diff --git a/config/dependencies.yaml b/config/dependencies.yaml
index 34ad7af1760..b90fa4ff143 100644
--- a/config/dependencies.yaml
+++ b/config/dependencies.yaml
@@ -126,9 +126,14 @@ plugintest:
     '@freesewing/plugin-theme': *freesewing
 react-components:
   _:
+    axios: *axios
     html-react-parser: "^5.0.7"
+    nuqs: "^1.17.6"
+    react-markdown: "^9.0.1"
+    use-local-storage-state: "19.1.0"
+    use-session-storage-state: "^19.0.0"
   peer:
-    react: '>=14'
+    react: "^18.2.0"
 rehype-jargon:
   _:
     'unist-util-visit': &unist-util-visit '5.0.0'
diff --git a/markdown/org/showcase/first-attempt-sewing-undies/en.md b/markdown/org/showcase/first-attempt-sewing-undies/en.md
index 4a0a793e799..5249fd7fec4 100644
--- a/markdown/org/showcase/first-attempt-sewing-undies/en.md
+++ b/markdown/org/showcase/first-attempt-sewing-undies/en.md
@@ -7,5 +7,5 @@ author: auxsuivants
 designs: ["umbra"]
 ---
 
-I've been wanting to attempt a pair of these forever, but i've had so many other projects going. But I finally got to them tonight and they're definitely comfy and cute as all hell. Gonna be  making a lot more of these <3
+I've been wanting to attempt a pair of these forever, but i've had so many other projects going. But I finally got to them tonight and they're definitely comfy and cute as all hell. Gonna be  making a lot more of these &lt;3
 
diff --git a/package.json b/package.json
index febddb6bb75..bc53ae97453 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "cleanall": "lerna run clean",
     "test": "lerna run test",
     "e2e": "lerna run e2e",
-    "prettier": "npx prettier --write 'config/*' 'config/**/*' 'packages/**/src/*.mjs' 'packages/i18n/src/locales/**/*.*' 'packages/**/tests/*.mjs'",
+    "prettier": "npx prettier --write 'config/*' 'config/**/*' 'packages/**/src/*.mjs' 'packages/i18n/src/locales/**/*.*' 'packages/**/tests/*.mjs' 'packages/react-components/src/**/*.mjs'",
     "reconfigure": "all-contributors generate && node --experimental-json-modules --no-warnings scripts/reconfigure.mjs",
     "sitebuildconfigure": "SITEBUILD=1 node --experimental-json-modules --no-warnings scripts/reconfigure.mjs",
     "prerelease": "lerna version --no-git-tag-version --no-push && yarn reconfigure && yarn buildall",
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index c30277751e8..ad193fe633b 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -23,7 +23,12 @@
     ".": {
       "internal": "./src/index.mjs",
       "default": "./dist/index.mjs"
-    }
+    },
+    "./pattern": "./src/pattern/index.mjs",
+    "./xray": "./src/pattern-xray/index.mjs",
+    "./editor": "./src/editor/index.mjs",
+    "./icons": "./src/editor/swizzle/components/icons.mjs"
+
   },
   "scripts": {
     "build": "node build.mjs",
@@ -40,10 +45,15 @@
     "wbuild:all": "yarn wbuild"
   },
   "peerDependencies": {
-    "react": ">=14"
+    "react": "^18.2.0"
   },
   "dependencies": {
-    "html-react-parser": "^5.0.7"
+    "axios": "1.6.8",
+    "html-react-parser": "^5.0.7",
+    "nuqs": "^1.17.6",
+    "react-markdown": "^9.0.1",
+    "use-local-storage-state": "19.1.0",
+    "use-session-storage-state": "^19.0.0"
   },
   "devDependencies": {},
   "files": [
diff --git a/packages/react-components/src/editor/components/view-wrapper.mjs b/packages/react-components/src/editor/components/view-wrapper.mjs
new file mode 100644
index 00000000000..ff6f1949d06
--- /dev/null
+++ b/packages/react-components/src/editor/components/view-wrapper.mjs
@@ -0,0 +1,137 @@
+// Hooks
+import { useState } from 'react'
+
+/**
+ * The editor view wrapper component
+ *
+ * Figures out what view to load initially,
+ * and handles state for the pattern, inclding the view
+ *
+ * @param (object) props - All the props
+ * @param {object} props.designs - An object holding all designs
+ * @param {object} props.preload - Object holding state to preload
+ * @param {object} props.locale - The locale (language) code
+ * @param {object} props.design - A design name to force the editor to use this design
+ * @param {object} props.Swizzled - An object holding swizzled code
+ */
+export const ViewWrapper = ({ designs = {}, preload = {}, design = false, Swizzled }) => {
+  /*
+   * Ephemeral state will not be stored in the state backend
+   * It is used for things like loading state and so on
+   */
+  const [ephemeralState, setEphemeralState] = useState({})
+  // Editor state
+  const allState = Swizzled.hooks.useEditorState(
+    Swizzled.methods.initialEditorState(preload),
+    setEphemeralState
+  )
+  const state = allState[0]
+  const update = allState[2]
+
+  // Don't bother before state is initialized
+  if (!state) return <Swizzled.components.TemporaryLoader />
+
+  // Figure out what view to load
+  const [View, extraProps] = viewfinder({ design, designs, preload, state, Swizzled })
+
+  /*
+   * Pass this down to allow disabling features that require measurements
+   */
+  const { missingMeasurements = [] } = extraProps
+
+  /*
+   * Almost all editor state has a default settings, and when that is selected
+   * we just unset that value in the state. This way, state holds only what is
+   * customized, and it makes it a lot easier to see how a pattern was edited.
+   * The big exception is the 'ui.ux' setting. If it is unset, a bunch of
+   * components will not function properly. We could guard against this by passing
+   * the default to all of these components, but instead, we just check that state
+   * is undefined, and if so pass down the default ux value here.
+   * This way, should more of these exceptions get added over time, we can use
+   * the same centralized solution.
+   */
+  const passDownState =
+    state.ui.ux === undefined
+      ? {
+          ...state,
+          ui: { ...state.ui, ux: Swizzled.config.defaultUx },
+          _: { ...ephemeralState, missingMeasurements },
+        }
+      : { ...state, _: { ...ephemeralState, missingMeasurements } }
+
+  return (
+    <div className="flex flex-row items-top">
+      {Swizzled.config.withAside ? (
+        <Swizzled.components.AsideViewMenu update={update} state={passDownState} />
+      ) : null}
+      <div
+        className={
+          state.ui.kiosk
+            ? 'md:z-30 md:w-screen md:h-screen md:fixed md:top-0 md:left-0 md:bg-base-100'
+            : 'grow w-full'
+        }
+      >
+        <Swizzled.components.LoadingStatus state={passDownState} update={update} />
+        <View {...extraProps} {...{ update, designs }} state={passDownState} />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Helper method to figure out what view to load
+ * based on the props passed in, and destructure
+ * the props we need for it.
+ *
+ * @param (object) props - All the props
+ * @param {object} props.design - The (name of the) current design
+ * @param {object} props.designs - An object holding all designs
+ * @param (object) props.state - React state passed down from the wrapper view
+ */
+const viewfinder = ({ design, designs, state, Swizzled }) => {
+  /*
+   * Grab Design from props or state and make them extra props
+   */
+  if (!design && state?.design) design = state.design
+  const Design = designs[design] || false
+  const extraProps = { design, Design }
+
+  /*
+   * If no design is set, return the designs view
+   */
+  if (!designs[design]) return [getViewComponent('designs', Swizzled), extraProps]
+
+  /*
+   * If we have a design, do we have the measurements?
+   */
+  const [measurementsOk, missingMeasurements] = Swizzled.methods.hasRequiredMeasurements(
+    designs[design],
+    state.settings?.measurements
+  )
+  if (missingMeasurements) extraProps.missingMeasurements = missingMeasurements
+
+  /*
+   * Allow all views that do not require measurements before
+   * we force the user to the measurements view
+   */
+  if (state.view && Swizzled.config.measurementsFreeViews.includes(state.view)) {
+    const view = getViewComponent(state.view, Swizzled)
+    if (view) return [view, extraProps]
+  }
+
+  if (!measurementsOk) return [getViewComponent('measurements', Swizzled), extraProps]
+
+  /*
+   * If a view is set, return that
+   */
+  const view = getViewComponent(state.view, Swizzled)
+  if (view) return [view, extraProps]
+
+  /*
+   * If no obvious view was found, return the view picker
+   */
+  return [getViewComponent('picker', Swizzled), extraProps]
+}
+
+const getViewComponent = (view = false, Swizzled) =>
+  view ? Swizzled.components[Swizzled.config.viewComponents[view]] : false
diff --git a/packages/react-components/src/editor/en.yaml b/packages/react-components/src/editor/en.yaml
new file mode 100644
index 00000000000..fb9d3eb5e8e
--- /dev/null
+++ b/packages/react-components/src/editor/en.yaml
@@ -0,0 +1,290 @@
+# Popout component
+comment: Comment
+note: Note
+tip: Tip
+warning: Warning
+fixme: FIXME
+link: Link
+related: Related
+
+# Designs view
+chooseADesign: Choose a Design
+# Mesurements view
+measurements: Measurements
+measurementsAreOk: We have all required measurements to draft this pattern.
+editMeasurements: Edit Measurements
+editMeasurementsDesc: You can manually set or override measurements below.
+requiredMeasurements: Required Measurements
+optionalMeasurements: Optional Measurements
+missingMeasurements: Missing Measurements
+missingMeasurementsInfo: To generate this pattern, we need the following additional measurements
+missingMeasurementsNotify: To generate this pattern, we need some additional measurements
+
+# Measurements sets
+noOwnSets: You do not have any of your own measurements sets (yet)
+pleaseMtm: Because our patterns are bespoke, we strongly suggest you take accurate measurements.
+noOwnSetsMsg: You can store your measurements as a measurements set, after which you can generate as many patterns as you want for them.
+chooseFromOwnSets: Choose one of your own measurements sets
+chooseFromOwnSetsDesc: Pick any of your own measurements sets that have all required measurements to generate this pattern.
+newSet: Create a new measurements set
+someSetsLacking: Some of your measurements sets lack the measurements required to generate this pattern
+chooseFromBookmarkedSets: Choose one of the measurements sets you've bookmarked
+chooseFromBookmarkedSetsDesc: If you've bookmarked any measurements sets, you can select from those too.
+chooseFromCuratedSets: Choose one of FreeSewing's curated measurements sets
+chooseFromCuratedSetsDesc: If you're just looking to try out our platform, you can select from our list of curated measurements sets.
+
+# View wrapper
+requiredPropsMissing.t: Required props are missing
+requiredPropsMissing.d: The FreeSewing pattern editor needs to be initialized properly. It currently lacks some props to be able to bootstrap.
+
+# View picker
+chooseAnActivity: Choose an activity
+chooseAnotherActivity: Choose a different activity
+view.draft.t: Draft Pattern
+view.draft.d: Choose this if you are not certain what to pick
+view.measurements.t: Pattern Measurements
+view.measurements.d: Update or load measurements to generate a pattern for
+view.test.t: Test Design
+view.test.d: See how different options or changes in measurements influence the design
+view.timing.t: Time Design
+view.timing.d: Shows detailed timing of the pattern being drafted, allowing you to find bottlenecks in performance
+view.printLayout.t: Print Layout
+view.printLayout.d: Organize your pattern parts to minimize paper use
+view.save.t: Save pattern as...
+view.save.d: Save the changes to this pattern in your account, or save it as a new pattern
+view.export.t: Export Pattern
+view.export.d: Export this pattern into a variety of formats
+view.editSettings.t: Edit settings by hand
+view.editSettings.d: Throw caution to the wind, and hand-edit the pattern's settings
+view.logs.t: Pattern Logs
+view.logs.d: Show the logs generated by the pattern, useful to troubleshoot problems
+view.inspect.t: Pattern inspector
+view.inspect.d: Load the pattern in the inspector, giving you in-depth info about a pattern's components
+view.docs.t: Documentation
+view.docs.d: More information and links to documentation
+view.designs.t: Choose a different Design
+view.designs.d: "Current design: {- design }"
+view.picker.t: Choose a different view
+view.undos.t: Undo History
+view.undos.d: Time-travel through your recent pattern changes
+showAdvancedOptions: Show advanced options
+hideAdvancedOptions: Hide advanced options
+views.t: Views
+views.d: Choose between the main views of the pattern editor
+measurementsFreeViewsOnly.t: We are only showing activities that do not require measurements
+measurementsFreeViewsOnly.d: Once we have all measurements required to generate a pattern, you will have more choices here.
+
+
+# menus
+youAreUsingTheDefaultValue: You are using the default value
+youAreUsingACustomValue: You are using a custom value
+designOptions.t: Design Options
+designOptions.d: These options are specific to this design. You can use them to customize your pattern in a variety of ways.
+fit.t: Fit
+style.t: Style
+advanced.t: Advanced
+coreSettings.t: Core Settings
+coreSettings.d: These settings are not specific to the design, but instead allow you to customize various parameters of the FreeSewing core library, which generates the design for you.
+paperless.t: Paperless
+paperless.d: Trees are awesome, and taping together sewing patterns is not much fun. Try our paperless mode to avoid the need to print out your pattern altogether.
+samm.t: Seam Allowance Size
+samm.d: Controls the amount of seam allowance used in your pattern
+sabool.t: Include Seam Allowance
+sabool.d: Controls whether or not to include seam allowance in your pattern
+complete.t: Details
+complete.d: Controls how detailed the pattern is; Either a complete pattern with all details, or a basic outline of the pattern parts
+expand.t: Expand
+expand.d: Controls efforts to save paper. Disable this to expand all pattern parts at the cost of using more space.
+only.t: Included Parts
+only.d: Use this to control exactly which pattern parts will be included in your pattern
+units.t: Units
+units.d: This setting determines how unit are displayed on your pattern
+margin.t: Margin
+margin.d: Controls the margin around pattern parts
+scale.t: Scale
+scale.d: Controls the overall line width, font size, and other elements that do not scale with the pattern's measurements
+yes: Yes
+no: No
+completeYes.t: Generate a complete pattern
+completeYes.d: This will generate a complete pattern with all notations, lines, markings. Use this if you are not certain what to choose.
+completeNo.t: Generate a pattern outline
+completeNo.d: Only generate the outline of the pattern parts. Use this if you are looking to use a laser cutter or have other specific needs.
+expandYes.t: Expand all pattern parts
+expandYes.d: This will generate a pattern where all pattern parts are drawn to their full size, even if they are simple rectangles.
+expandNo.t: Keep patterns parts compact where possible
+expandNo.d: This will draw a more dense representation of the pattern which includes all info without using up too much space & paper.
+saNo.t: Do not include seam allowance
+saNo.d: This generates a pattern which does not include any seam allowance. The size of the seam allowance does not matter as no seam allowance will be included.
+saYes.t: Include seam allowance
+saYes.d: This generates a pattern that will include seam allowance. The size of the seam allowance is set individually.
+paperlessNo.t: Generate a regular pattern
+paperlessNo.d: This will generate a regular pattern, which you can then print out.
+paperlessYes.t: Generate a paperless pattern
+paperlessYes.d:  This generates a pattern with dimensions and a grid, which allows you to transfer it on fabric or another medium without the need to print out the pattern.
+metric: Metric
+uiPreferences.t: UI Preferences
+uiPreferences.d: These preferences control the UI (User Interface) of the pattern editor
+renderer.t: Render Engine
+renderer.d: Controls how the pattern is rendered (drawn) on the screen
+renderWithReact.t: Render with FreeSewing's React components
+renderWithReact.d: Render as SVG through our React components. Allows interactivity and is optimized for screen. Use this if you are not sure what to pick.
+renderWithCore.t: Render with FreeSewing's Core library
+renderWithCore.d: Render directly to SVG from Core. Allows no interactivity and is optimized for print. Use this if you want to know what it will look like when exported.
+kiosk.t: Kiosk Mode
+kiosk.d: Controls how the pattern editor is embedded in the web page.
+aside.t: Aside Menu
+aside.d: Controls whether or not to show menus on the side of larger screens
+withAside.t: Also show menus on the side
+withAside.d: Shows menus both on the side of the screen, as well as the drop-downs in the header (this only applies to larger screens)
+noAside.t: Only show menus in the header
+noAside.d: Only shows the drop-down variant of the menus, making more room for your pattern
+rotate.t: Rotate pattern
+rotate.d: Allows you to rotate your pattern 90 degrees to better fit your screen
+rotateNo.t: Do not rotate pattern
+rotateNo.d: Show the pattern as it is
+rotateYes.t: Rotate pattern 90 degrees
+rotateYes.d: Rotate the pattern 90 degrees counter clockwise
+websiteMode.t: Use inline mode
+websiteMode.d: Embeds the pattern editor in the natural flow of the web page.
+kioskMode.t: Use kiosk mode
+kioskMode.d: Breaks out the pattern editor to fill the entire page.
+ux.t: User Experience
+ux.d: Which user experience do you prefer? From keep it simple, to give me all the powers.
+inspect.t: Inspect
+inspect.d: Enabling this will allow you to drill down into the pattern, and pull up information about its various parts, paths, and points.
+inspectNo.t: Disable the inspector
+inspectNo.d: This is the default, the pattern inspector is disabled and the pattern is displayed as usual.
+inspectYes.t: Enable the inspector
+inspectYes.d: With the pattern inspector enabled and the React rendering engine selected, we will add interactivity to the pattern to allow you to inspect the various elements that make up the pattern.
+draft: Draft
+test: Test
+print: Print layout
+cut: Cut Layout
+save: Save
+export: Export
+edit: Edit
+draft.t: Draft your pattern
+draft.d: Launches FreeSewing flagship pattern editor, where you can tweak your pattern to your heart's desire
+test.t: Test your pattern
+test.d: See how your pattern adapts to changes in options, or measurements
+print.t: Print Layout
+print.d: Allows you to arrange your pattern pieces so you can printing your pattern on as little pages as possible
+cut.t: Cutting layout
+cut.d: Allows you to arrange your pattern pieces so you can determine exactly how much fabric you need to make it.
+save.t: Save your pattern
+save.d: Save the current pattern to your FreeSewing account
+export.t: Export your pattern
+export.d: Allows you to export this pattern to a variety of formats
+logs.t: Pattern logs
+enterCustomValue: Enter a custom value
+
+# ux
+ux1.t: Keep it as simple as possible
+ux1.d: Hides all but the most essential features.
+ux2.t: Keep it simple, but not too simple
+ux2.d: Hides the majority of features.
+ux3.t: Balance simplicity with power
+ux3.d: Reveals the majority of features, but not all.
+ux4.t: Give me all powers, but keep me safe
+ux4.d: Reveals all features, keeps handrails and safety checks.
+ux5.t: Get out of my way
+ux5.d: Reveals all features, removes all handrails and safety checks.
+
+# Tooltips
+tt.changeEditorView: Change to a different view
+tt.toggleSa: Turns Seam Allowance on or off (see Core Settings)
+tt.togglePaperless: Turns Paperless on or off (see Core Settings)
+tt.toggleComplete: Turns Details on or off (see Core Settings)
+tt.toggleExpand: Turns Expand on or off (see Core Settings)
+tt.toggleUnits: Switches Units between metric and imperial (see Core Settings)
+tt.changeUx: Changes your UX setting (see UI Preferences)
+tt.toggleAside: Turn the Aside Menu on or off (see UI Preferences)
+tt.toggleKiosk: Turns Kiosk Mode on or off (see UI Preferences)
+tt.toggleRotate: Turns Rotate Pattern on or off (see UI Preferences)
+tt.toggleRenderer: Switches the Render Engine between React and SVG (see UI Preferences)
+tt.exportPattern: Export pattern
+tt.savePattern: Save pattern
+tt.savePatternAs: Save pattern as...
+tt.undo: Undo most recent change
+tt.undoAll: Undo all changes since the last save point
+tt.resetDesign: Reset all settings, but keep the design and measurements
+tt.resetAll: Reset the editor completely
+
+# flags
+apply: Apply
+decrease: Decrease
+disable: Disable
+dismiss: Dismiss
+expandIsOff.t: This design saves space (and trees) because expand is disabled
+expandIsOff.d: "Because the **expand** core setting is currently disabled, some parts are not fully drawn or not shown at all. Typically, these are simple rectangles that only take up space, or things that can be cut on the fold. \n\nTo expand all pattern parts to their full size, enable the expand setting."
+expandIsOn.t: This design can save space (and trees)
+expandIsOn.d: "Because the **expand** core setting is currently enabled, all parts are fully drawn. You can display this design in a more compact way by disabling the **expand** setting. \n\nDoing so will mean that some parts are not fully drawn or not shown at all. Typically, these are simple rectangles that only take up space, or things that can be cut on the fold."
+enable: Enable
+flags: Flags
+flagMenu.t: Flags
+flagMenuOne.d: A specific issue about your current pattern needs your attention.
+flagMenuMany.d: Some issues about your current pattern need your attention.
+hide: Hide
+increase: Increase
+show: Show
+saIncluded: (This includes seam allowance)
+saExcluded: (This does not include seam allowance)
+saUnused: (This part does not require any seam allowance)
+partHiddenByExpand: This part is not shown because the **expand** core setting is currently disabled. Enable it to show this pattern part.
+
+# Auth
+authRequired: Authentication required
+membersOnly: This functionality requires a FreeSewing account.
+signUp: Sign Up
+signIn: Sign In
+statusUnknown: Account status warning
+statusUnknownMsg: Your account status prohibits us from processing your data. Please contact support.
+consentLacking: Consent lacking
+consentLackingMsg: We do not have your consent for processing your data. Without consent, we have no legal basis to process your data.
+accountProhibited: Your account has been disabled
+accountProhibitedMsg: Your account has been administratively disabled.
+accountDisabled: Account disabled
+accountDisabledMsg: You cannot re-enable a disabled account. You need to contact support to address this.
+accountInactive: Your account is inactive
+accountInactiveMsg: You must activate your account via the signup link we sent you.
+signupAgain: If you cannot find the link, you can receive a new one by signing up again.
+cannotUse: A disabled account cannot be used.
+contactSupport: Contact support
+reviewConsent: Review your consent
+roleLacking: You lack the required role to access this content
+roleLackingMsg: This content requires the <b>{ requiredRole }</b> role. Your role is <b>{ role }</b> which does not grant you access to this content.
+
+# save pattern
+bookmarkPattern: Bookmark pattern
+savePattern: Save pattern
+saveAsNewPattern: Save as a New Pattern
+savePatternAs: Save pattern as...
+savePatternAsHellip: Save pattern as...
+patternBookmarkCreated: Pattern bookmark created
+see: See
+addNotes: Add notes
+addSettingsToNotes: Add settings to notes
+exporting: Exporting
+exportAsData: Export as data
+exportForEditing: Export for editing
+exportForPrinting: Export for printing
+exportPattern-txt: Export a PDF suitable for your printer, or download this pattern in a variety of formats
+exportPattern: Export pattern
+settings: Settings
+patternTitle: Pattern Title
+patternNotes: Pattern Notes
+toAccessPatternsGoTo: To access your patterns, go to
+genericLoadingMessage: Hang tight, we're working on it...
+patternSavedAs: Pattern saved as
+cancel: Cancel
+
+# undo history
+secondsAgo: seconds ago
+minutesAgo: minutes ago
+hoursAgo: hours ago
+undos.unknown.t: Unknown Change
+defaultRestored: Cleared (default restored)
+includeAllParts: Include all parts
+allFirstLetter: A
+undo: Undo
+xMeasurementsChanged: "{ count } Measurements changed"
diff --git a/packages/react-components/src/editor/index.mjs b/packages/react-components/src/editor/index.mjs
new file mode 100644
index 00000000000..13f00b88dd6
--- /dev/null
+++ b/packages/react-components/src/editor/index.mjs
@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react'
+import { swizzleConfig } from './swizzle/config.mjs'
+import { swizzleComponents } from './swizzle/components/index.mjs'
+import { swizzleHooks } from './swizzle/hooks/index.mjs'
+import { swizzleMethods } from './swizzle/methods/index.mjs'
+import { ViewWrapper } from './components/view-wrapper.mjs'
+// This is an exception as we need to show something before Swizzled components are ready
+import { TemporaryLoader as UnswizzledTemporaryLoader } from './swizzle/components/loaders.mjs'
+
+/*
+ * Namespaces used by the pattern editor
+ */
+export const ns = ['pe', 'measurements']
+
+/**
+ * PatternEditor is the high-level FreeSewing component
+ * that provides the entire pattern editing environment
+ *
+ * @param {object} props.design = The name of the design we are editing
+ * @param {object} props.designs = An object holding the designs code
+ * @param {object} props.components = An object holding components to swizzle
+ * @param {object} props.hooks = An object holding hooks to swizzle
+ * @param {object} props.methods = An object holding methods to swizzle
+ * @param {object} props.config = An object holding the editor config to swizzle
+ * @param {object} props.locale = The locale (language) code
+ * @param {object} props.preload = Any state to preload
+ *
+ */
+export const PatternEditor = (props) => {
+  const [swizzled, setSwizzled] = useState(false)
+
+  useEffect(() => {
+    if (!swizzled) {
+      const merged = {
+        config: swizzleConfig(props.config),
+      }
+      merged.methods = swizzleMethods(props.methods, merged)
+      merged.components = swizzleComponents(props.components, merged)
+      merged.hooks = swizzleHooks(props.hooks, merged)
+      setSwizzled(merged)
+    }
+  }, [swizzled, props.components, props.config, props.hooks, props.methods])
+
+  if (!swizzled?.hooks) return <UnswizzledTemporaryLoader />
+  /*
+   * First of all, make sure we have all the required props
+   */
+  const lackingProps = lackingPropsCheck(props)
+  if (lackingProps !== false) return <LackingPropsError error={lackingProps} />
+
+  /*
+   * Extract props we care about
+   */
+  const { designs = {}, locale = 'en', preload } = props
+
+  /*
+   * Now return the view wrapper and pass it the relevant props and the swizzled props
+   */
+  return <ViewWrapper {...{ designs, locale, preload }} Swizzled={swizzled} />
+}
+
+/**
+ * Helper function to verify that all props that are required to
+ * run the editor are present.
+ *
+ * Note that these errors are not translation, because they are
+ * not intended for end-users, but rather for developers.
+ *
+ * @param {object} props - The props passed to the PatternEditor component
+ * @return {bool} result - Either true or false depending on required props being present
+ */
+const lackingPropsCheck = (props) => {
+  if (typeof props.designs !== 'object')
+    return "Please pass a 'designs' prop with the designs supported by this editor"
+  if (Object.keys(props.designs).length < 1) return "The 'designs' prop does not hold any designs"
+
+  return false
+}
+
+/**
+ * A component to inform the user that the editor cannot be started
+ * because there are missing required props
+ */
+const LackingPropsError = ({ error }) => (
+  <div className="w-full p-0 text-center py-24">
+    <h2>Unable to initialize pattern editor</h2>
+    <p>{error}</p>
+  </div>
+)
diff --git a/packages/react-components/src/editor/nl.yaml b/packages/react-components/src/editor/nl.yaml
new file mode 100644
index 00000000000..58d34e436a4
--- /dev/null
+++ b/packages/react-components/src/editor/nl.yaml
@@ -0,0 +1,23 @@
+# Popout component
+comment: Opmerking
+note: Notitie
+tip: Tip
+warning: Waarschuwing
+fixme: FIXME
+link: Link
+related: Gerelateerd
+
+# Mesurements view
+measurements: Maten
+measurementsAreOk: We hebben alle benodigde maten om dit patroon te tekenen.
+editMeasurements: Maten Aanpassen
+editMeasurementsDesc: Hier kan je manueel de maten aanpassen.
+requiredMeasurements: Vereiste Maten
+optionalMeasurements: Optionele Maten
+
+# Designs view
+pickADesign: Kies een ontwerp
+
+# View wrapper
+requiredPropsMissing.t: Vereiste props ontbreken
+requiredPropsMissing.d: De FreeSewing patroon editor moet correct geinitialiseerd worden. Momenteel ontbreken een aantal props die noodzakelijk zijn om de editor te starten.
diff --git a/packages/react-components/src/editor/props.md b/packages/react-components/src/editor/props.md
new file mode 100644
index 00000000000..7933b55d590
--- /dev/null
+++ b/packages/react-components/src/editor/props.md
@@ -0,0 +1,26 @@
+# List of props that can be passed to the pattern editor
+
+| Prop | Default | Description |
+| ---- | ------- | ----------- |
+| `design` | `undefined` | Name of the current design (key in the `objects` prop).<br>Note that this will set the initial state, but it can be changed by the user. |
+| `designs` | `{}` |Object holding all designs that are available. |
+| `locale` | `en` | Language code |
+| `imperial`| `false` | Whether to use imperial units as the default, or not |
+| `components` | `{}` | Object holding swizzled components |
+| `hooks` | `{}` | Object holding swizzled hooks |
+| `methods` | `{}` | Object holding swizzled methods |
+
+
+## Defaults object
+
+```mjs
+{
+  locale: 'en',
+  imperial: 'false',
+  ui: {
+    renderer: 'react',
+    kiosk: false,
+    }
+}
+```
+
diff --git a/packages/react-components/src/editor/swizzle/components/accordion.mjs b/packages/react-components/src/editor/swizzle/components/accordion.mjs
new file mode 100644
index 00000000000..d2d561f0cbe
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/accordion.mjs
@@ -0,0 +1,64 @@
+import { useState } from 'react'
+
+/*
+ * DaisyUI's accordion seems rather unreliable.
+ * So instead, we handle this in React state
+ */
+const getProps = (isActive) => ({
+  className: `p-2 px-4 rounded-lg bg-transparent shadow
+    w-full mt-2 py-4 h-auto content-start text-left bg-opacity-20
+    ${isActive ? 'hover:bg-transparent' : 'hover:bg-secondary hover:bg-opacity-10'}`,
+})
+
+const getSubProps = (isActive) => ({
+  className: ` p-2 px-4 rounded bg-transparent w-full mt-2 py-4 h-auto
+  content-start bg-secondary text-left bg-opacity-20
+  ${
+    isActive
+      ? 'bg-opacity-100 hover:bg-transparent shadow'
+      : 'hover:bg-opacity-10 hover:bg-secondary '
+  }`,
+})
+
+const components = {
+  button: (props) => <button {...props}>{props.children}</button>,
+  div: (props) => <div {...props}>{props.children}</div>,
+}
+
+export const BaseAccordion = ({
+  items, // Items in the accordion
+  act, // Allows one to preset the active (opened) entry
+  propsGetter = getProps, // Method to get the relevant props
+  component = 'button',
+}) => {
+  const [active, setActive] = useState(act)
+  const Component = components[component]
+
+  return (
+    <nav>
+      {items
+        .filter((item) => item[0])
+        .map((item, i) =>
+          active === item[2] ? (
+            <div key={i} {...propsGetter(true)}>
+              <Component onClick={setActive} className="w-full hover:cursor-pointer">
+                {item[0]}
+              </Component>
+              {item[1]}
+            </div>
+          ) : (
+            <Component
+              key={i}
+              {...propsGetter(active === item[2])}
+              onClick={() => setActive(item[2])}
+            >
+              {item[0]}
+            </Component>
+          )
+        )}
+    </nav>
+  )
+}
+
+export const SubAccordion = (props) => <BaseAccordion {...props} propsGetter={getSubProps} />
+export const Accordion = (props) => <BaseAccordion {...props} propsGetter={getProps} />
diff --git a/packages/react-components/src/editor/swizzle/components/aside-view-menu.mjs b/packages/react-components/src/editor/swizzle/components/aside-view-menu.mjs
new file mode 100644
index 00000000000..13bca1d376a
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/aside-view-menu.mjs
@@ -0,0 +1,122 @@
+import { useState } from 'react'
+
+export const AsideViewMenuButton = ({
+  href,
+  label,
+  children,
+  onClick = false,
+  active = false,
+  extraClasses = 'lg:hover:bg-secondary lg:hover:text-secondary-content',
+  Swizzled,
+}) => {
+  const className = `w-full flex flex-row items-center px-4 py-2 ${extraClasses} ${
+    active
+      ? 'font-bold lg:font-normal bg-secondary bg-opacity-10 lg:bg-secondary lg:text-secondary-content lg:bg-opacity-50'
+      : 'lg:bg-neutral lg:text-neutral-content'
+  }`
+  const span = <span className="block grow text-left">{label}</span>
+
+  return onClick ? (
+    <button {...{ onClick, className }} title={label}>
+      {span}
+      {children}
+    </button>
+  ) : (
+    <Swizzled.components.Link {...{ href, className }} title={label}>
+      {span}
+      {children}
+    </Swizzled.components.Link>
+  )
+}
+
+export const ViewTypeIcon = ({ Swizzled, view, className = 'h-6 w-6 grow-0' }) => {
+  const Icon = Swizzled.components[`View${Swizzled.methods.capitalize(view)}Icon`]
+  if (!Icon) return <Swizzled.components.OptionsIcon />
+
+  return <Icon className={className} />
+}
+
+export const AsideViewMenuSpacer = () => (
+  <hr className="my-1 w-full opacity-20 font-bold border-t-2" />
+)
+
+export const AsideViewMenuIcons = ({ state, update, setDense, dense, Swizzled }) => {
+  const { t } = Swizzled.methods
+  const iconSize = 'h-6 w-6 grow-0'
+
+  const output = [
+    <Swizzled.components.AsideViewMenuButton
+      key={1}
+      onClick={() => setDense(!dense)}
+      label={
+        dense ? (
+          ''
+        ) : (
+          <b>
+            <em className="pl-4 opacity-60">Editor Views</em>
+          </b>
+        )
+      }
+      extraClasses="hidden lg:flex text-accent bg-neutral hover:bg-accent hover:text-neutral-content"
+    >
+      {dense ? (
+        <Swizzled.components.RightIcon
+          className={`${iconSize} group-hover:animate-[bounceright_1s_infinite] animate-[bounceright_1s_5]`}
+          stroke={4}
+        />
+      ) : (
+        <Swizzled.components.LeftIcon className={`${iconSize} animate-bounce-right`} stroke={4} />
+      )}
+    </Swizzled.components.AsideViewMenuButton>,
+  ]
+
+  let i = 1
+  for (const view of [
+    'spacer',
+    ...Swizzled.config.mainViews,
+    'spacer',
+    ...Swizzled.config.extraViews,
+    'spacerOver3',
+    ...Swizzled.config.devViews,
+    'spacer',
+    'picker',
+  ]) {
+    if (view === 'spacer') output.push(<Swizzled.components.AsideViewMenuSpacer key={i} />)
+    else if (view === 'spacerOver3')
+      output.push(state.ui.ux > 3 ? <Swizzled.components.AsideViewMenuSpacer key={i} /> : null)
+    else if (state.ui.ux >= Swizzled.config.uxLevels.views[view])
+      output.push(
+        <Swizzled.components.AsideViewMenuButton
+          key={view}
+          onClick={() => update.view(view)}
+          label={t(`pe:view.${view}.t`)}
+          active={state.view === view}
+        >
+          <Swizzled.components.ViewTypeIcon view={view} />
+        </Swizzled.components.AsideViewMenuButton>
+      )
+    i++
+  }
+
+  return output
+}
+
+export const AsideViewMenu = ({ Swizzled, update, state }) => {
+  const [dense, setDense] = useState(true)
+  return (
+    <div
+      className={`w-64 min-h-screen pt-4
+        bg-neutral
+        shrink-0 grow-0 self-stretch
+        transition-all
+        drop-shadow-xl
+        ${dense ? '-ml-52' : 'ml-0'}`}
+    >
+      <aside className="sticky top-4 group">
+        <div className="flex flex-col items-center w-full">
+          <Swizzled.components.AsideViewMenuIcons {...{ update, state, setDense, dense }} />
+        </div>
+      </aside>
+    </div>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/auth-wrapper.mjs b/packages/react-components/src/editor/swizzle/components/auth-wrapper.mjs
new file mode 100644
index 00000000000..26ff0ad6be6
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/auth-wrapper.mjs
@@ -0,0 +1,210 @@
+import { useState, useEffect } from 'react'
+
+export const AuthMessageWrapper = ({ children }) => (
+  <div className="m-auto max-w-xl text-center mt-8 p-8">{children}</div>
+)
+
+export const ContactSupport = ({ t, Swizzled }) => (
+  <div className="flex flex-row items-center justify-center gap-4 mt-8">
+    <Swizzled.components.Link href="/support" className="btn btn-success w-full">
+      {t('contactSupport')}
+    </Swizzled.components.Link>
+  </div>
+)
+
+export const AuthRequired = ({ t, banner, Swizzled }) => (
+  <Swizzled.components.AuthMessageWrapper>
+    {banner}
+    <h2>{Swizzled.methods.t('pe:authRequired')}</h2>
+    <p>{t('pe:membersOnly')}</p>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-8">
+      <Swizzled.components.Link
+        href="/signup"
+        className={`${Swizzled.config.classes.horFlex} btn btn-secondary w-full`}
+      >
+        <Swizzled.components.PlusIcon />
+        {t('pe:signUp')}
+      </Swizzled.components.Link>
+      <Swizzled.components.Link
+        href="/signin"
+        className={`${Swizzled.config.classes.horFlex} btn btn-secondary btn-outline w-full`}
+      >
+        <Swizzled.components.LockIcon />
+        {t('signIn')}
+      </Swizzled.components.Link>
+    </div>
+  </Swizzled.components.AuthMessageWrapper>
+)
+
+export const AccountInactive = ({ t, banner, Swizzled }) => (
+  <Swizzled.components.AuthMessageWrapper>
+    {banner}
+    <h1>{t('accountInactive')}</h1>
+    <p>{t('accountInactiveMsg')}</p>
+    <p>{t('signupAgain')}</p>
+    <div className="flex flex-row items-center justify-center gap-4 mt-8">
+      <Swizzled.components.Link href="/signup" className="btn btn-primary w-full">
+        {t('signUp')}
+      </Swizzled.components.Link>
+    </div>
+  </Swizzled.components.AuthMessageWrapper>
+)
+
+export const AccountDisabled = ({ t, banner, Swizzled }) => (
+  <Swizzled.components.AuthMessageWrapper>
+    {banner}
+    <h1>{t('accountDisabled')}</h1>
+    <p>{t('accountDisabledMsg')}</p>
+    <ContactSupport t={t} />
+  </Swizzled.components.AuthMessageWrapper>
+)
+
+export const AccountProhibited = ({ t, banner, Swizzled }) => (
+  <Swizzled.components.AuthMessageWrapper>
+    {banner}
+    <h1>{t('accountProhibited')}</h1>
+    <p>{t('accountProhibitedMsg')}</p>
+    <Swizzled.components.ContactSupport t={t} />
+  </Swizzled.components.AuthMessageWrapper>
+)
+
+export const AccountStatusUnknown = ({ t, banner, Swizzled }) => (
+  <Swizzled.components.AuthMessageWrapper>
+    {banner}
+    <h1>{t('statusUnknown')}</h1>
+    <p>{t('statusUnknownMsg')}</p>
+    <Swizzled.components.ContactSupport t={t} />
+  </Swizzled.components.AuthMessageWrapper>
+)
+
+export const RoleLacking = ({ t, requiredRole, role, banner, Swizzled }) => (
+  <Swizzled.components.AuthMessageWrapper>
+    {banner}
+    <h1>{t('roleLacking')}</h1>
+    <p dangerouslySetInnerHTML={{ __html: t('roleLackingMsg', { requiredRole, role }) }} />
+    <Swizzled.components.ContactSupport t={t} />
+  </Swizzled.components.AuthMessageWrapper>
+)
+
+export const ConsentLacking = ({ banner, Swizzled }) => {
+  //const { setAccount, setToken, setSeenUser } = Swizzled.hooks.useAccount()
+  //const backend = Swizzled.hooks.useBackend()
+
+  //const updateConsent = async ({ consent1, consent2 }) => {
+  //  let consent = 0
+  //  if (consent1) consent = 1
+  //  if (consent1 && consent2) consent = 2
+  //  if (consent > 0) {
+  //    const result = await backend.updateConsent(consent)
+  //    if (result.success) {
+  //      setToken(result.data.token)
+  //      setAccount(result.data.account)
+  //      setSeenUser(result.data.account.username)
+  //      refresh()
+  //    } else {
+  //      console.log('something went wrong', result)
+  //      refresh()
+  //    }
+  //  }
+  //}
+
+  return (
+    <Swizzled.components.AuthMessageWrapper>
+      <div className="text-left">
+        {banner}
+        <p>FIXME: Handle content form</p>
+        {/*<ConsentForm submit={updateConsent} />*/}
+      </div>
+    </Swizzled.components.AuthMessageWrapper>
+  )
+}
+
+export const AuthWrapper = ({ children, requiredRole = 'user', Swizzled }) => {
+  const { t } = Swizzled.methods
+  const { useAccount, useBackend } = Swizzled.hooks
+  const { account, setAccount, token, admin, stopImpersonating, signOut } = useAccount()
+  const backend = useBackend()
+
+  const [ready, setReady] = useState(false)
+  const [impersonating, setImpersonating] = useState(false)
+  const [error, setError] = useState(false)
+  const [refreshCount, setRefreshCount] = useState(0)
+
+  /*
+   * Avoid hydration errors
+   */
+  useEffect(() => {
+    const verifyAdmin = async () => {
+      const result = await backend.adminPing(admin.token)
+      if (result.success && result.data.account.role === 'admin') {
+        setImpersonating({
+          admin: result.data.account.username,
+          user: account.username,
+        })
+      }
+      setReady(true)
+    }
+    const verifyUser = async () => {
+      const result = await backend.ping()
+      if (result.success) {
+        // Refresh account in local storage
+        setAccount({
+          ...account,
+          ...result.data.account,
+        })
+      } else {
+        if (result.data?.error?.error) setError(result.data.error.error)
+        else signOut()
+      }
+      setReady(true)
+    }
+    if (admin && admin.token) verifyAdmin()
+    if (token) verifyUser()
+    else setReady(true)
+  }, [admin, token, refreshCount])
+
+  const refresh = () => {
+    setRefreshCount(refreshCount + 1)
+    setError(false)
+  }
+
+  if (!ready) return <Swizzled.components.Loading />
+
+  const banner = impersonating ? (
+    <div className="bg-warning rounded-lg shadow py-4 px-6 flex flex-row items-center gap-4 justify-between">
+      <span className="text-base-100 text-left">
+        Hi <b>{impersonating.admin}</b>, you are currently impersonating <b>{impersonating.user}</b>
+      </span>
+      <button className="btn btn-neutral" onClick={stopImpersonating}>
+        Stop Impersonating
+      </button>
+    </div>
+  ) : null
+
+  const childProps = { t, banner, Swizzled }
+
+  if (!token || !account.username) return <Swizzled.components.AuthRequired {...childProps} />
+  if (error) {
+    if (error === 'accountInactive') return <Swizzled.components.AccountInactive {...childProps} />
+    if (error === 'accountDisabled') return <Swizzled.components.AccountDisabled {...childProps} />
+    if (error === 'accountBlocked') return <Swizzled.components.AccountProhibited {...childProps} />
+    if (error === 'consentLacking')
+      return <Swizzled.components.ConsentLacking {...childProps} refresh={refresh} />
+    return <Swizzled.components.AccountStatusUnknown {...childProps} />
+  }
+
+  if (
+    !Swizzled.config.roles.levels[account.role] ||
+    Swizzled.config.roles.levels[account.role] < Swizzled.config.roles.levels[requiredRole]
+  ) {
+    return (
+      <Swizzled.components.RoleLacking
+        {...childProps}
+        role={account.role}
+        requiredRole={requiredRole}
+      />
+    )
+  }
+
+  return children
+}
diff --git a/packages/react-components/src/editor/swizzle/components/curated-sets.mjs b/packages/react-components/src/editor/swizzle/components/curated-sets.mjs
new file mode 100644
index 00000000000..bb25160bf82
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/curated-sets.mjs
@@ -0,0 +1,37 @@
+export const CuratedMeasurementsSetLineup = ({ sets = [], locale, clickHandler, Swizzled }) => (
+  <div
+    className={`w-full flex flex-row ${
+      sets.length > 1 ? 'justify-start px-8' : 'justify-center'
+    } overflow-x-scroll`}
+    style={{
+      backgroundImage: `url(/img/lineup-backdrop.svg)`,
+      width: 'auto',
+      backgroundSize: 'auto 100%',
+      backgroundRepeat: 'repeat-x',
+    }}
+  >
+    {sets.map((set) => {
+      const props = {
+        className: 'aspect-[1/3] w-auto h-96',
+        style: {
+          backgroundImage: `url(${Swizzled.methods.cloudImageUrl({
+            id: `cset-${set.id}`,
+            type: 'lineup',
+          })})`,
+          width: 'auto',
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+        },
+        onClick: () => clickHandler(set),
+      }
+
+      return (
+        <div className="flex flex-col items-center" key={set.id}>
+          <button {...props} key={set.id}></button>
+          <b>{set[`name${Swizzled.methods.capitalize(locale)}`]}</b>
+        </div>
+      )
+    })}
+  </div>
+)
diff --git a/packages/react-components/src/editor/swizzle/components/designs-view.mjs b/packages/react-components/src/editor/swizzle/components/designs-view.mjs
new file mode 100644
index 00000000000..f6ed0a3a326
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/designs-view.mjs
@@ -0,0 +1,28 @@
+/**
+ * The design view is loaded if and only if not design is passed to the editor
+ *
+ * @param {Object} props - All the props
+ * @param {Object} designs - Object holding all designs
+ * @param {object} props.Swizzled - An object holding swizzled code
+ * @param {Object} update - ViewWrapper state update object
+ */
+export const DesignsView = ({ designs = {}, Swizzled, update }) => (
+  <div className="text-center mt-8 mb-24">
+    <h2>{Swizzled.methods.t('pe:chooseADesign')}</h2>
+    <ul className="flex flex-row flex-wrap gap-2 items-center justify-center max-w-2xl px-8 mx-auto">
+      {Object.keys(designs).map((name) => (
+        <li key={name}>
+          <button
+            className={`btn btn-primary btn-outline btn-sm capitalize font-bold `}
+            onClick={() => {
+              update.design(name)
+              update.view('draft')
+            }}
+          >
+            {name}
+          </button>
+        </li>
+      ))}
+    </ul>
+  </div>
+)
diff --git a/packages/react-components/src/editor/swizzle/components/draft-view.mjs b/packages/react-components/src/editor/swizzle/components/draft-view.mjs
new file mode 100644
index 00000000000..39975a0255e
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/draft-view.mjs
@@ -0,0 +1,67 @@
+/**
+ * The draft view allows users to tweak their pattern
+ *
+ * @param (object) props - All the props
+ * @param {function} props.Design - The design constructor
+ * @param {array} props.missingMeasurements - List of missing measurements for the current design
+ * @param {object} props.state - The ViewWrapper state object
+ * @param {object} props.state.settings - The current settings
+ * @param {object} props.update - Helper object for updating the ViewWrapper state
+ * @param {object} props.Swizzled - An object holding swizzled code
+ * @return {function} DraftView - React component
+ */
+export const DraftView = ({ Design, state, update, Swizzled }) => {
+  /*
+   * Don't trust that we have all measurements
+   *
+   * We do not need to change the view here. That is done in the central
+   * ViewWrapper componenet. However, checking the measurements against
+   * the design takes a brief moment, so this component will typically
+   * render before that happens, and if measurments are missing it will
+   * throw and error.
+   *
+   * So when measurements are missing, we just return here and the view
+   * will switch on the next render loop.
+   */
+  if (Swizzled.methods.missingMeasurements(state)) return null
+
+  /*
+   * First, attempt to draft
+   */
+  const { pattern } = Swizzled.methods.draft(Design, state.settings)
+
+  let output = null
+  let renderProps = false
+  if (state.ui?.renderer === 'svg') {
+    try {
+      const __html = pattern.render()
+      output = (
+        <Swizzled.components.ZoomablePattern>
+          <div className="w-full h-full" dangerouslySetInnerHTML={{ __html }} />
+        </Swizzled.components.ZoomablePattern>
+      )
+    } catch (err) {
+      console.log(err)
+    }
+  } else {
+    renderProps = pattern.getRenderProps()
+    output = (
+      <Swizzled.components.ZoomablePattern
+        renderProps={renderProps}
+        patternLocale={state.locale || 'en'}
+        rotate={state.ui.rotate}
+      />
+    )
+  }
+
+  return (
+    <Swizzled.components.PatternLayout
+      {...{ update, Design, output, state, pattern }}
+      menu={
+        state.ui?.aside ? (
+          <Swizzled.components.DraftMenu {...{ Design, pattern, update, state }} />
+        ) : null
+      }
+    />
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/dynamic-mdx.mjs b/packages/react-components/src/editor/swizzle/components/dynamic-mdx.mjs
new file mode 100644
index 00000000000..27319260e6e
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/dynamic-mdx.mjs
@@ -0,0 +1,12 @@
+/*
+ * Loading MDX dynamically is non-trivial an depends on the
+ * environment in which the component is loaded.
+ * By default, we use this component, which disabled loading
+ * inline docs. If you want this to work, you need to pass in
+ * your own DynamicMdx component into the editor:
+ *
+ * <PatternEditor components={{ DynamicMdx: MyComponent }} />
+ */
+export const DynamicMdx = ({ Swizzled }) => (
+  <Swizzled.components.Popout node>Not implemented</Swizzled.components.Popout>
+)
diff --git a/packages/react-components/src/editor/swizzle/components/error-view.mjs b/packages/react-components/src/editor/swizzle/components/error-view.mjs
new file mode 100644
index 00000000000..d2997094f14
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/error-view.mjs
@@ -0,0 +1,23 @@
+/**
+ * The error view is loaded if and only an error occurs that we can't handle
+ *
+ * @param {object} props - The component's props
+ * @param {object} props.Swizzled - Swizzled code
+ * @param {function} props.Design - The design constructor
+ * @param {object} props.state - The ViewWrapper state object
+ * @param {object} props.state.settings - The current settings
+ * @param {object} props.update - Helper object for updating the ViewWrapper state
+ * @param {array} props.missingMeasurements - List of missing measurements for the current design
+ * @param {object} props.components - The possibly swizzled components
+ * @param {object} props.methods - The possibly swizzled methods
+ * @param {function} props.methods.t - The translation method
+ * @param {object} props.config - The possibly swizzled pattern editor configuration
+ * @return {function} MeasurementsView - React component
+ */
+export const ErrorView = ({ Swizzled, state }) => (
+  <div className="text-center mt-8">
+    <h2>{Swizzled.methods.t('oops')}</h2>
+    <p>FIXME: Something went wrong</p>
+    <pre>{JSON.stringify(state, null, 2)}</pre>
+  </div>
+)
diff --git a/packages/react-components/src/editor/swizzle/components/flags.mjs b/packages/react-components/src/editor/swizzle/components/flags.mjs
new file mode 100644
index 00000000000..c549905f1fd
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/flags.mjs
@@ -0,0 +1,103 @@
+import mustache from 'mustache'
+
+export const FlagTypeIcon = ({ Swizzled, type, className = 'w-6 h-6' }) => {
+  const Icon = Swizzled.components[`Flag${Swizzled.methods.capitalize(type)}Icon`]
+
+  return Icon ? <Icon className={className} /> : null
+}
+
+export const Flag = ({ Swizzled, data, handleUpdate }) => {
+  const btnIcon = data.suggest?.icon ? (
+    <Swizzled.components.FlagTypeIcon type={data.suggest.icon} className="w-5 h-6 sm:w-6 h-6" />
+  ) : null
+  const { t } = Swizzled.methods
+
+  const button =
+    data.suggest?.text && data.suggest?.update ? (
+      <button
+        className={`btn btn-secondary btn-outline flex flex-row items-center ${
+          btnIcon ? 'gap-6' : ''
+        }`}
+        onClick={() => handleUpdate(data.suggest.update)}
+      >
+        {btnIcon}
+        {t(data.suggest.text)}
+      </button>
+    ) : null
+
+  const desc = data.replace ? mustache.render(t(data.desc), data.replace) : t(data.desc)
+  const notes = data.notes
+    ? Array.isArray(data.notes)
+      ? '\n\n' +
+        data.notes
+          .map((note) => (data.replace ? mustache.render(t(note), data.replace) : t(note)))
+          .join('\n\n')
+      : '\n\n' + (data.replace ? mustache.render(t(data.notes), data.replace) : t(data.notes))
+    : null
+
+  return (
+    <div className="flex flex-col gap-2 items-start">
+      <div className="first:mt-0 grow md flag">
+        <pre>{desc}</pre>
+        <pre>{notes}</pre>
+      </div>
+      {button ? <div className="mt-2 w-full flex flex-row justify-end">{button}</div> : null}
+    </div>
+  )
+}
+//<Mdx md={notes ? desc + notes : desc} />
+
+export const FlagsAccordionTitle = ({ flags, Swizzled }) => {
+  const { t } = Swizzled.methods
+  const flagList = Swizzled.methods.flattenFlags(flags)
+
+  if (Object.keys(flagList).length < 1) return null
+
+  return (
+    <>
+      <h5 className="flex flex-row gap-2 items-center justify-between w-full">
+        <span className="text-left">
+          {t('pe:flagMenu.t')} ({Object.keys(flagList).length})
+        </span>
+        <Swizzled.components.FlagTypeIcon className="w-8 h-8" />
+      </h5>
+      <p className="text-left">
+        {Object.keys(flagList).length > 1 ? t('pe:flagMenuMany.d') : t('pe:flagMenuOne.d')}
+      </p>
+    </>
+  )
+}
+
+export const FlagsAccordionEntries = ({ flags, update, Swizzled }) => {
+  const flagList = Swizzled.methods.flattenFlags(flags)
+  const { t } = Swizzled.methods
+
+  if (Object.keys(flagList).length < 1) return null
+
+  const handleUpdate = (config) => {
+    if (config.settings) update.settings(...config.settings)
+    if (config.ui) update.ui(...config.settings)
+  }
+
+  return (
+    <Swizzled.components.SubAccordion
+      items={Object.entries(flagList).map(([key, flag], i) => {
+        const title = flag.replace ? mustache.render(t(flag.title), flag.replace) : t(flag.title)
+
+        return [
+          <div className="w-full flex flex-row gap2 justify-between" key={i}>
+            <div className="flex flex-row items-center gap-2">
+              <div className="no-shrink">
+                <Swizzled.components.FlagIcon type={flag.type} />
+              </div>
+              <span className="font-medium text-left">{title}</span>
+            </div>
+            <span className="uppercase font-bold">{flag.type}</span>
+          </div>,
+          <Swizzled.components.Flag key={key} t={t} data={flag} handleUpdate={handleUpdate} />,
+          key,
+        ]
+      })}
+    />
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/header-menu.mjs b/packages/react-components/src/editor/swizzle/components/header-menu.mjs
new file mode 100644
index 00000000000..e88d0812c77
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/header-menu.mjs
@@ -0,0 +1,525 @@
+import { useState } from 'react'
+
+export const HeaderMenu = ({ state, Swizzled, update, Design, pattern }) => {
+  const [open, setOpen] = useState()
+
+  /*
+   * Guard views that require measurements agains missing measurements
+   * and make sure there's a view-specific header menu
+   */
+  const ViewMenu =
+    !Swizzled.methods.missingMeasurements(state) &&
+    Swizzled.components[`HeaderMenu${Swizzled.config.viewComponents[state.view]}`]
+      ? Swizzled.components[`HeaderMenu${Swizzled.config.viewComponents[state.view]}`]
+      : Swizzled.components.Null
+
+  return (
+    <div
+      className={`flex sticky top-0 ${
+        state.ui.kiosk ? 'z-50' : 'z-20'
+      } transition-[top] duration-300 ease-in-out`}
+    >
+      <div
+        className={`flex flex-row flex-wrap gap-1 md:gap-4 w-full items-start justify-center border-b border-base-300 py-1 md:py-1.5`}
+      >
+        <Swizzled.components.HeaderMenuAllViews {...{ state, Swizzled, update, open, setOpen }} />
+        <ViewMenu {...{ state, Swizzled, update, Design, pattern, open, setOpen }} />
+      </div>
+    </div>
+  )
+}
+
+export const HeaderMenuAllViews = ({ state, Swizzled, update, open, setOpen }) => (
+  <Swizzled.components.HeaderMenuViewMenu {...{ state, Swizzled, update, open, setOpen }} />
+)
+
+export const HeaderMenuDraftView = (props) => {
+  const { Swizzled } = props
+  const flags = props.pattern?.setStores?.[0]?.plugins?.['plugin-annotations']?.flags
+
+  return (
+    <>
+      <div className="flex flex-row gap-1">
+        <Swizzled.components.HeaderMenuDraftViewDesignOptions {...props} />
+        <Swizzled.components.HeaderMenuDraftViewCoreSettings {...props} />
+        <Swizzled.components.HeaderMenuDraftViewUiPreferences {...props} />
+        {flags ? <Swizzled.components.HeaderMenuDraftViewFlags {...props} flags={flags} /> : null}
+      </div>
+      <Swizzled.components.HeaderMenuDraftViewIcons {...props} />
+      <Swizzled.components.HeaderMenuUndoIcons {...props} />
+      <Swizzled.components.HeaderMenuSaveIcons {...props} />
+    </>
+  )
+}
+
+export const HeaderMenuDropdown = (props) => {
+  const { Swizzled, tooltip, toggle, open, setOpen, id } = props
+  /*
+   * We need to use both !fixed and md:!absolute here to override DaisyUI's
+   * classes on dropdown-content to force the dropdown to use the available
+   * screen space on mobile, rather than be positioned under its toggle button
+   */
+
+  return props.disabled ? (
+    <Swizzled.components.Tooltip tip={tooltip}>
+      <button
+        disabled
+        tabIndex={0}
+        role="button"
+        className="btn btn-ghost hover:bg-secondary hover:bg-opacity-20 hover:border-solid hover:boder-2 hover:border-secondary border border-secondary border-2 border-dotted btn-sm px-2 z-20 relative"
+      >
+        {toggle}
+      </button>
+    </Swizzled.components.Tooltip>
+  ) : (
+    <Swizzled.components.Tooltip tip={tooltip}>
+      <div className={`dropdown ${open === id ? 'dropdown-open z-20' : ''}`}>
+        <div
+          tabIndex={0}
+          role="button"
+          className="btn btn-ghost hover:bg-secondary hover:bg-opacity-20 hover:border-solid hover:boder-2 hover:border-secondary border border-secondary border-2 border-dotted btn-sm px-2 z-20 relative"
+          onClick={() => setOpen(open === id ? false : id)}
+        >
+          {toggle}
+        </div>
+        <div
+          tabIndex={0}
+          className="dropdown-content bg-base-100 bg-opacity-90 z-20 shadow left-0 !fixed md:!absolute top-12 w-screen md:w-96"
+        >
+          {props.children}
+        </div>
+        {open === id && (
+          <div
+            className="w-screen h-screen absolute top-10 left-0 opacity-0"
+            style={{ width: '200vw', transform: 'translateX(-100vw)' }}
+            onClick={() => setOpen(false)}
+          ></div>
+        )}
+      </div>
+    </Swizzled.components.Tooltip>
+  )
+}
+
+export const HeaderMenuDraftViewDesignOptions = (props) => {
+  const { Swizzled } = props
+
+  return (
+    <Swizzled.components.HeaderMenuDropdown
+      {...props}
+      id="designOptions"
+      tooltip={Swizzled.methods.t('pe:designOptions.d')}
+      toggle={
+        <>
+          <Swizzled.components.HeaderMenuIcon name="options" extraClasses="text-secondary" />
+          <span className="hidden lg:inline">{Swizzled.methods.t('pe:designOptions.t')}</span>
+        </>
+      }
+    >
+      <Swizzled.components.DesignOptionsMenu {...props} />
+    </Swizzled.components.HeaderMenuDropdown>
+  )
+}
+
+export const HeaderMenuDraftViewCoreSettings = (props) => {
+  const { Swizzled } = props
+
+  return (
+    <Swizzled.components.HeaderMenuDropdown
+      {...props}
+      tooltip={Swizzled.methods.t('pe:coreSettings.d')}
+      id="coreSettings"
+      toggle={
+        <>
+          <Swizzled.components.HeaderMenuIcon name="settings" extraClasses="text-secondary" />
+          <span className="hidden lg:inline">{Swizzled.methods.t('pe:coreSettings.t')}</span>
+        </>
+      }
+    >
+      <Swizzled.components.CoreSettingsMenu {...props} />
+    </Swizzled.components.HeaderMenuDropdown>
+  )
+}
+
+export const HeaderMenuDraftViewUiPreferences = (props) => {
+  const { Swizzled } = props
+
+  return (
+    <Swizzled.components.HeaderMenuDropdown
+      {...props}
+      tooltip={Swizzled.methods.t('pe:uiPreferences.d')}
+      id="uiPreferences"
+      toggle={
+        <>
+          <Swizzled.components.HeaderMenuIcon name="ui" extraClasses="text-secondary" />
+          <span className="hidden lg:inline">{Swizzled.methods.t('pe:uiPreferences.t')}</span>
+        </>
+      }
+    >
+      <Swizzled.components.UiPreferencesMenu {...props} />
+    </Swizzled.components.HeaderMenuDropdown>
+  )
+}
+
+export const HeaderMenuDraftViewFlags = (props) => {
+  const { Swizzled } = props
+  const count = Object.keys(Swizzled.methods.flattenFlags(props.flags)).length
+
+  return (
+    <Swizzled.components.HeaderMenuDropdown
+      {...props}
+      tooltip={Swizzled.methods.t('pe:flagMenuMany.d')}
+      id="flags"
+      toggle={
+        <>
+          <Swizzled.components.HeaderMenuIcon name="flag" extraClasses="text-secondary" />
+          <span className="hidden lg:inline">
+            {Swizzled.methods.t('pe:flags')}
+            <span>({count})</span>
+          </span>
+        </>
+      }
+    >
+      <Swizzled.components.FlagsAccordionEntries {...props} />
+    </Swizzled.components.HeaderMenuDropdown>
+  )
+}
+
+export const HeaderMenuDraftViewIcons = (props) => {
+  const { Swizzled, update } = props
+  const Button = Swizzled.components.HeaderMenuButton
+  const size = 'w-5 h-5'
+  const muted = 'text-current opacity-50'
+  const ux = props.state.ui.ux
+  const levels = {
+    ...props.Swizzled.config.uxLevels.core,
+    ...props.Swizzled.config.uxLevels.ui,
+  }
+
+  return (
+    <div className="flex flex-row flex-wrap items-center justify-center px-2">
+      {ux >= levels.sa ? (
+        <Button updateHandler={update.toggleSa} tooltip={Swizzled.methods.t('pe:tt.toggleSa')}>
+          <Swizzled.components.SaIcon
+            className={`${size} ${props.state.settings.sabool ? 'text-secondary' : muted}`}
+          />
+        </Button>
+      ) : null}
+      {ux >= levels.paperless ? (
+        <Button
+          updateHandler={() => update.settings('paperless', props.state.settings.paperless ? 0 : 1)}
+          tooltip={Swizzled.methods.t('pe:tt.togglePaperless')}
+        >
+          <Swizzled.components.PaperlessIcon
+            className={`${size} ${props.state.settings.paperless ? 'text-secondary' : muted}`}
+          />
+        </Button>
+      ) : null}
+      {ux >= levels.complete ? (
+        <Button
+          updateHandler={() => update.settings('complete', props.state.settings.complete ? 0 : 1)}
+          tooltip={Swizzled.methods.t('pe:tt.toggleComplete')}
+        >
+          <Swizzled.components.DetailIcon
+            className={`${size} ${!props.state.settings.complete ? 'text-secondary' : muted}`}
+          />
+        </Button>
+      ) : null}
+      {ux >= levels.expand ? (
+        <Button
+          updateHandler={() => update.settings('expand', props.state.settings.expand ? 0 : 1)}
+          tooltip={Swizzled.methods.t('pe:tt.toggleExpand')}
+        >
+          <Swizzled.components.ExpandIcon
+            className={`${size} ${props.state.settings.expand ? 'text-secondary' : muted}`}
+          />
+        </Button>
+      ) : null}
+      {ux >= levels.units ? (
+        <Button
+          updateHandler={() =>
+            update.settings(
+              'units',
+              props.state.settings.units === 'imperial' ? 'metric' : 'imperial'
+            )
+          }
+          tooltip={Swizzled.methods.t('pe:tt.toggleUnits')}
+        >
+          <Swizzled.components.UnitsIcon
+            className={`${size} ${
+              props.state.settings.units === 'imperial' ? 'text-secondary' : muted
+            }`}
+          />
+        </Button>
+      ) : null}
+      <Swizzled.components.HeaderMenuIconSpacer />
+      {ux >= levels.ux ? (
+        <div className="flex flex-row px-1">
+          <Swizzled.components.Tooltip tip={Swizzled.methods.t('pe:tt.changeUx')}>
+            {[0, 1, 2, 3, 4].map((i) => (
+              <button
+                key={i}
+                className="btn btn-ghost btn-sm px-0 -mx-0.5"
+                onClick={() => update.ui('ux', i + 1)}
+              >
+                <Swizzled.components.CircleIcon
+                  key={i}
+                  fill={i < props.state.ui.ux ? true : false}
+                  className={`${size} ${
+                    i < props.state.ui.ux ? 'stroke-secondary fill-secondary' : 'stroke-current'
+                  }`}
+                  fillOpacity={0.3}
+                />
+              </button>
+            ))}
+          </Swizzled.components.Tooltip>
+        </div>
+      ) : null}
+      {ux >= levels.aside ? (
+        <Button
+          updateHandler={() => update.ui('aside', props.state.ui.aside ? 0 : 1)}
+          tooltip={Swizzled.methods.t('pe:tt.toggleAside')}
+        >
+          <Swizzled.components.MenuIcon
+            className={`${size} ${!props.state.ui.aside ? 'text-secondary' : muted}`}
+          />
+        </Button>
+      ) : null}
+      {ux >= levels.kiosk ? (
+        <Button
+          updateHandler={() => update.ui('kiosk', props.state.ui.kiosk ? 0 : 1)}
+          tooltip={Swizzled.methods.t('pe:tt.toggleKiosk')}
+        >
+          <Swizzled.components.KioskIcon
+            className={`${size} ${props.state.ui.kiosk ? 'text-secondary' : muted}`}
+          />
+        </Button>
+      ) : null}
+      {ux >= levels.rotate ? (
+        <Button
+          updateHandler={() => update.ui('rotate', props.state.ui.rotate ? 0 : 1)}
+          tooltip={Swizzled.methods.t('pe:tt.toggleRotate')}
+        >
+          <Swizzled.components.RotateIcon
+            className={`${size} ${props.state.ui.rotate ? 'text-secondary' : muted}`}
+          />
+        </Button>
+      ) : null}
+      {ux >= levels.renderer ? (
+        <Button
+          updateHandler={() =>
+            update.ui('renderer', props.state.ui.renderer === 'react' ? 'svg' : 'react')
+          }
+          tooltip={Swizzled.methods.t('pe:tt.toggleRenderer')}
+        >
+          <Swizzled.components.RocketIcon
+            className={`${size} ${props.state.ui.renderer === 'svg' ? 'text-secondary' : muted}`}
+          />
+        </Button>
+      ) : null}
+    </div>
+  )
+}
+
+export const HeaderMenuUndoIcons = (props) => {
+  const { Swizzled, update, state, Design } = props
+  const Button = Swizzled.components.HeaderMenuButton
+  const size = 'w-5 h-5'
+  const undos = props.state._?.undos && props.state._.undos.length > 0 ? props.state._.undos : false
+
+  return (
+    <div className="flex flex-row flex-wrap items-center justify-center px-2">
+      <Button
+        updateHandler={() => update.restore(0, state._)}
+        tooltip={Swizzled.methods.t('pe:tt.undo')}
+        disabled={undos ? false : true}
+      >
+        <Swizzled.components.UndoIcon
+          className={`${size} ${undos ? 'text-secondary' : ''}`}
+          text="1"
+        />
+      </Button>
+      <Button
+        updateHandler={() => update.restore(undos.length - 1, state._)}
+        tooltip={Swizzled.methods.t('pe:tt.undoAll')}
+        disabled={undos ? false : true}
+      >
+        <Swizzled.components.UndoIcon
+          className={`${size} ${undos ? 'text-secondary' : ''}`}
+          text={Swizzled.methods.t('pe:allFirstLetter')}
+        />
+      </Button>
+      <Swizzled.components.HeaderMenuDropdown
+        {...props}
+        tooltip={Swizzled.methods.t('pe:view.undos.t')}
+        id="undos"
+        disabled={undos ? false : true}
+        toggle={
+          <>
+            <Swizzled.components.UndoIcon className="w-4 h-4" stroke={3} />
+            <span className="hidden lg:inline">{Swizzled.methods.t('pe:undo')}</span>
+          </>
+        }
+      >
+        {undos ? (
+          <ul className="dropdown-content bg-base-100 bg-opacity-90 z-20 shadow left-0 !fixed md:!absolute w-screen md:w-96 px-4 md:p-2 md:pt-0">
+            {undos.slice(0, 9).map((step, index) => (
+              <li key={index}>
+                <Swizzled.components.UndoStep {...{ step, update, state, Design, index }} compact />
+              </li>
+            ))}
+            <li key="view">
+              <Swizzled.components.ButtonFrame
+                dense
+                onClick={() => {
+                  return null /*update.state(index, state._) */
+                }}
+              >
+                <div className="flex flex-row items-center align-center justify-between gap-2 w-full">
+                  <div className="flex flex-row items-center align-start gap-2 grow">
+                    <Swizzled.components.UndoIcon className="w-5 h-5 text-secondary" />
+                    {Swizzled.methods.t(`pe:view.undos.t`)}...
+                  </div>
+                  {undos.length}
+                </div>
+              </Swizzled.components.ButtonFrame>
+            </li>
+          </ul>
+        ) : null}
+      </Swizzled.components.HeaderMenuDropdown>
+      <Button updateHandler={update.clearAll} tooltip={Swizzled.methods.t('pe:tt.resetDesign')}>
+        <Swizzled.components.TrashIcon className={`${size} text-secondary`} />
+      </Button>
+      <Button updateHandler={update.clearAll} tooltip={Swizzled.methods.t('pe:tt.resetAll')}>
+        <Swizzled.components.ResetAllIcon className={`${size} text-secondary`} />
+      </Button>
+    </div>
+  )
+}
+
+export const HeaderMenuSaveIcons = (props) => {
+  const { Swizzled, update } = props
+  const Button = Swizzled.components.HeaderMenuButton
+  const size = 'w-5 h-5'
+  const saveable = props.state._?.undos && props.state._.undos.length > 0
+
+  return (
+    <div className="flex flex-row flex-wrap items-center justify-center px-2">
+      <Button
+        updateHandler={update.clearPattern}
+        tooltip={Swizzled.methods.t('pe:tt.savePattern')}
+        disabled={saveable ? false : true}
+      >
+        <Swizzled.components.SaveIcon className={`${size} ${saveable ? 'text-success' : ''}`} />
+      </Button>
+      <Button
+        updateHandler={() => update.view('save')}
+        tooltip={Swizzled.methods.t('pe:tt.savePatternAs')}
+      >
+        <Swizzled.components.SaveAsIcon className={`${size} text-secondary`} />
+      </Button>
+      <Button
+        updateHandler={update.clearPattern}
+        tooltip={Swizzled.methods.t('pe:tt.exportPattern')}
+      >
+        <Swizzled.components.ExportIcon className={`${size} text-secondary`} />
+      </Button>
+    </div>
+  )
+}
+
+export const HeaderMenuIcon = (props) => {
+  const { Swizzled, name, extraClasses = '' } = props
+  const Icon =
+    Swizzled.components[`${Swizzled.methods.capitalize(name)}Icon`] || Swizzled.components.Noop
+  return <Icon {...props} className={`h-5 w-5 ${extraClasses}`} />
+}
+export const HeaderMenuIconSpacer = () => <span className="px-1 font-bold opacity-30">|</span>
+
+export const HeaderMenuButton = ({
+  Swizzled,
+  updateHandler,
+  children,
+  tooltip,
+  disabled = false,
+}) => (
+  <Swizzled.components.Tooltip tip={tooltip}>
+    <button
+      className="btn btn-ghost btn-sm px-1 disabled:bg-transparent"
+      onClick={updateHandler}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  </Swizzled.components.Tooltip>
+)
+
+export const HeaderMenuViewMenu = (props) => {
+  const { Swizzled, update, state } = props
+  const output = []
+  let i = 1
+  for (const viewName of [
+    'spacer',
+    ...Swizzled.config.mainViews,
+    'spacer',
+    ...Swizzled.config.extraViews,
+    'spacerOver3',
+    ...Swizzled.config.devViews,
+    'spacer',
+    'picker',
+  ]) {
+    if (viewName === 'spacer') output.push(<Swizzled.components.AsideViewMenuSpacer key={i} />)
+    else if (viewName === 'spacerOver3')
+      output.push(state.ui.ux > 3 ? <Swizzled.components.AsideViewMenuSpacer key={i} /> : null)
+    else if (
+      state.ui.ux >= Swizzled.config.uxLevels.views[viewName] &&
+      (Swizzled.config.measurementsFreeViews.includes(viewName) ||
+        state._.missingMeasurements.length < 1)
+    )
+      output.push(
+        <li key={i} className="mb-1 flex flex-row items-center justify-between w-full">
+          <a
+            className={`w-full rounded-lg border-2 border-secondary text-base-content
+            flex flex-row items-center gap-2 md:gap-4 p-2
+            hover:cursor-pointer
+            hover:bg-secondary hover:bg-opacity-20 hover:border-solid ${
+              viewName === state.view ? 'bg-secondary border-solid bg-opacity-20' : 'border-dotted'
+            }`}
+            onClick={() => update.view(viewName)}
+          >
+            <Swizzled.components.ViewTypeIcon
+              view={viewName}
+              className="w-6 h-6 grow-0"
+              Swizzled={Swizzled}
+            />
+            <b className="text-left grow">{Swizzled.methods.t(`pe:view.${viewName}.t`)}</b>
+          </a>
+        </li>
+      )
+    i++
+  }
+
+  return (
+    <Swizzled.components.HeaderMenuDropdown
+      {...props}
+      tooltip={Swizzled.methods.t('pe:views.d')}
+      id="views"
+      toggle={
+        <>
+          <Swizzled.components.HeaderMenuIcon
+            name="right"
+            stroke={3}
+            extraClasses="text-secondary rotate-90"
+          />
+          <span className="hidden lg:inline">{Swizzled.methods.t('pe:views.t')}</span>
+        </>
+      }
+    >
+      <ul
+        tabIndex={i}
+        className="dropdown-content bg-base-100 bg-opacity-90 z-20 shadow left-0 !fixed md:!absolute w-screen md:w-96 px-4 md:p-2 md:pt-0"
+      >
+        {output}
+      </ul>
+    </Swizzled.components.HeaderMenuDropdown>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/html-span.mjs b/packages/react-components/src/editor/swizzle/components/html-span.mjs
new file mode 100644
index 00000000000..3d98e8acc26
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/html-span.mjs
@@ -0,0 +1 @@
+export const HtmlSpan = ({ html }) => <span dangerouslySetInnerHTML={{ __html: html }} />
diff --git a/packages/react-components/src/editor/swizzle/components/icons.mjs b/packages/react-components/src/editor/swizzle/components/icons.mjs
new file mode 100644
index 00000000000..fc2952d6858
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/icons.mjs
@@ -0,0 +1,1134 @@
+/*
+ * Used inside the pattern editor
+ */
+export const logoPath =
+  'm18.56 0c-0.4945 0.3515-0.469 0.3065-0.8685 0.437-0.916 0.2995-1.7945 0.135-2.837 0.048-0.3135-0.035-0.6245-0.0555-0.928-0.0575-1.5325-0.0105-2.834 0.439-3.0805 1.694-0.4545 0.2755-0.8725 0.609-1.2865 0.943-0.884 0.6975-1.5495 1.55-2.0035 2.5775-0.62 1.5175-0.06 3.146 0.2175 4.684 0.066 0.36 0.135 0.703 0.172 0.8355 0.0525 0.1865 0.145 0.3645 0.2455 0.5245 0.0235 4e-3 0.1475-0.187 0.177-0.2715 0.043-0.123 0.0385-0.3205-0.0085-0.4905-0.104-0.3825-0.203-0.693-0.2115-0.849-0.015-0.293 0.042-0.5635 0.149-0.6975 0.038-0.0475 0.125 0.1975 0.1025 0.2885-0.0265 0.1095-0.0465 0.297-0.038 0.3835 0.0235 0.293 0.0665 0.6065 0.12 0.8805 0.0685 0.3535 0.098 0.5805 0.0855 0.6685-9e-3 0.064-0.039 0.1285-0.154 0.3265-0.1 0.1735-0.152 0.314-0.16 0.438-0.0085 0.121 0.028 0.4235 0.062 0.4975 0.0495 0.1155 0.1985 0.237 0.3285 0.267 0.1245 0.0475 0.187 0.146 0.251 0.2565 0.1555 0.2965 0.2755 0.6575 0.3945 1.2015 0.058 0.2605 0.1065 0.493 0.122 0.615-0.96 1e-3 -2.1895 0.0015-3.3095 0.0015-0.377 6e-3 -1.058-0.171-1.6825-0.212-0.0905-0.977-0.5195-2.112-1.2535-2.178-0.501-0.0455-0.9165 0.145-1.268 0.9365l0.01 0.0425c0.2075-0.1735 0.4265-0.704 1.2155-0.6675 0.606 0.0275 0.808 1.1745 0.868 1.8645-0.369 0.027-0.683 0.1405-0.847 0.424h-0.0035c0 5e-4 0 0.0015 0.0015 0.0025-0.0015 1e-3 -0.0015 2e-3 -0.0015 3e-3h0.0035c0.169 0.2905 0.4945 0.403 0.877 0.4255 0.2555 7.225 7.047 8.157 8.903 8.157 6.924 0 9.348-4.705 9.7125-6.5685 0.1705 0.794-0.3665 1.8055-0.495 2.552 1.4605-1.6885 1.1965-3.312 0.9295-4.945 0.222 0.264 0.5225 0.4275 0.93 0.337-0.2905-0.194-0.6845-0.058-0.9205-0.8765-0.103-0.3535-0.192-0.6185-0.2805-0.841-0.191-0.7165-0.462-1.401-0.795-2.068-0.281-0.7235-0.0955-1.1925-0.1235-1.8135 0.5055 1.667 0.8215 2.1105 1.4115 2.285-1.484-1.788-0.976-4.5565-1.8145-7.0275 0.3795 0.223 0.8125 0.29 1.2735 0.0175-0.446-0.127-0.891 0.2085-1.531-0.732-0.5405-1.0515-1.3235-1.828-2.2735-2.513-0.509-0.332-1.074-0.555-1.642-0.762 0.5785-0.145 1.2245-0.66 1.2545-1.0445zm-0.9705 5.5535c0.762 0.278 1.602 1.334 1.5925 2.37v0.058c-0.0205 1.407-0.66 2.1635-0.633 3.1005 0.0345 1.1035 0.5095 1.4885 0.604 1.6725-0.162-0.6805-0.257-1.5365-0.043-2.2145 0.275-0.872 0.5525-1.594 0.5325-2.277-0.01-0.16-0.078-0.7585-0.1235-1.0235 0.817 1.179-0.177 2.8935 0.109 4.0155 0.497 1.9545 2.7245 2.2015 2.0615 6.1395-0.5835 3.462-4.5815 6.0895-8.6795 6.0895-3.038 0-8.3025-1.6815-8.5625-7.646 0.6175-0.044 1.2815-0.216 1.654-0.21 1.126 0 2.412 5e-4 3.381 1e-3 0.182 0.821 0.3185 1.019 1.009 1.566 0.768 0.604 0.947 0.6775 2.083 0.6885 1.1365 0.0115 1.4735-0.232 2.576-1.275 0.238-0.279 0.341-0.6445 0.4565-0.988 1.134-0.0105 1.961-0.0305 2.7745-0.0685 0.8285-0.0375 0.9455 0 2.2805-0.1375-1.335-0.1375-1.452-0.1-2.2805-0.138-0.792-0.036-1.594-0.0565-2.6785-0.0665 0.091-0.4085 0.221-0.8075 0.3595-1.202 0.0855-0.2325 0.186-0.459 0.289-0.6845l0.1125-0.035c0.217-0.077 0.409-0.242 0.4855-0.465 0.0985-0.2955 0.0285-0.6275-0.162-0.869-0.0655-0.0905-0.147-0.206-0.1805-0.257-0.1005-0.159-0.103-0.2475-0.018-0.8385 0.0715-0.495 0.0795-0.754 0.03-1.005-0.01-0.1435-0.011-0.4385-0.0155-0.518 0.038 0.021 0.1205 0.209 0.204 0.4635 0.083 0.2555 0.0965 0.3085 0.1155 0.526 0.021 0.247-0.0715 0.43-0.1475 0.7985-0.038 0.19-0.0715 0.3665-0.0715 0.3905 0 0.0255 0.018 0.0795 0.037 0.1215 0.0445 0.094 0.128 0.226 0.1435 0.226 0.2725-0.3005 0.4325-0.6715 0.575-1.048 0.15-0.426 0.194-0.878 0.299-1.3165 0.085-0.382 0.183-0.7645 0.2135-1.1565 0.0615-0.765 0.0255-1.305-0.1435-2.102-0.0405-0.18-0.1575-0.5235-0.239-0.6855zm-2.68 3.7685c0.2925-0.0035 0.582 0.032 0.8575 0.1115 0.3745 0.1435 0.427 0.478 0.496 0.8535 0.0385 0.24 0.037 0.4125-0.0065 0.6945-0.0305 0.409-0.193 0.7255-0.548 0.948-0.5355 0.099-1.108 0.1945-1.562-0.16-0.381-0.525-0.6105-1.1885-0.523-1.8355 0.0555-0.2655 0.179-0.4035 0.433-0.486 0.2735-0.0785 0.563-0.1215 0.853-0.126zm-4.4415 0.0475c0.2735-0.0025 0.55 0.0265 0.702 0.1235 0.6525 0.4415 0.443 1.16 0.185 1.7905-0.3755 0.8255-1.1875 0.795-1.9745 0.7885-0.4355-0.1275-0.4755-0.4845-0.5385-0.866-0.054-0.3685-0.169-0.7635-0.073-1.134 0.2465-0.596 1.1475-0.6645 1.699-0.7025zm9.9515 0.103c0.0035 1.5865 0.2745 2.366 0.8185 3.4895-0.3205-0.6115-0.7785-0.9595-0.949-1.6905-0.326-1.4115 0.0255-1.3325 0.1305-1.799zm-7.9065 1.149c0.086 0.087 0.1275 0.207 0.202 0.3025 0.0575-0.0985 0.1165-0.1965 0.1905-0.284 0.0385 1e-3 0.0855 0.077 0.128 0.213 0.182 0.503 0.2175 1.0565 0.4535 1.54 0.2205 0.35-0.0805 0.554-0.411 0.57-0.241-5e-4 -0.343-0.165-0.4845-0.328-0.0365 0.1065-0.106 0.175-0.189 0.247-0.211 0.177-0.6245 0.1115-0.6885-0.1675 0.085-0.533 0.3565-1.0225 0.5345-1.5335 0.0885-0.1865 0.0895-0.3295 0.2645-0.5595zm-3.096 2.6925c0.1065 0 0.399 0.1985 0.4585 0.3105 0.041 0.0745 0.1345 0.3645 0.141 0.435 0.0105 0.084-0.015 0.283-0.041 0.337-0.019 0.0385-0.0335 0.044-0.0555 0.019-0.0185-0.021-0.2635-0.491-0.42-0.802-0.123-0.249-0.136-0.2995-0.083-0.2995zm6.111 0.1555c4e-3 5e-4 0.01 2e-3 0.0155 0.0035 0.033 0.0135 0.01 0.1305-0.114 0.5555-0.0235 0.128-0.0805 0.229-0.164 0.313-0.0275 0-0.04-0.032-0.083-0.2095-0.0365-0.1515-0.0405-0.2865-0.015-0.4075 0.044-0.1515 0.222-0.198 0.3605-0.255zm-0.7415 0.9265c0.0105-2e-3 0.0205 0.0035 0.0335 0.014 0.045 0.0315 0.0515 0.1145 0.0215 0.277-0.0365 0.209-0.0445 0.232-0.0985 0.2535-0.0235 0.0105-0.0655 0.018-0.0935 0.018-0.0505-9e-3 -0.0635-0.05-0.0515-0.112 0-0.13 0.038-0.243 0.124-0.3765 0.0325-0.05 0.049-0.0715 0.0645-0.074zm-4.3165 0.0095c0.0345 0 0.1385 0.075 0.177 0.127 0.043 0.055 0.092 0.3825 0.0645 0.439-0.0315 0.071-0.1855 0.0355-0.228-0.053-0.026-0.053-0.0875-0.339-0.0875-0.407 0-0.063 0.0305-0.106 0.074-0.106zm3.9455 0.0865c0.042 0.06 0.053 0.137 0.044 0.306l-0.0085 0.154-0.044 0.044c-0.0265 0.0245-0.0715 0.0545-0.0985 0.067-0.0595 0.028-0.105 0.0305-0.1135 8e-3 -0.01-0.03 7e-3 -0.221 0.0255-0.2855 0.0215-0.0665 0.118-0.265 0.15-0.307 0.0145-0.0385 0.0315 0.0095 0.045 0.0135zm-2.5105-9e-3c0.0905 0.023 0.1305 0.1045 0.18 0.1785l0.0335 0.066-0.047 0.1635c-0.025 0.09-0.0515 0.171-0.0595 0.18-9e-3 0.01-0.0425 0.015-0.092 0.0145-0.132-0.0035-0.147-9e-3 -0.1825-0.063l-0.033-0.049 0.028-0.1375c0.0405-0.198 0.06-0.2575 0.105-0.3085 0.0235-0.0275 0.047-0.0425 0.0675-0.0445zm-0.8355 0.1415 0.0745 0.0745 0.0125 0.1685c0.0065 0.092 0.0095 0.1775 0.0045 0.188-0.0045 0.0145-0.0315 0.0185-0.115 0.0185h-0.1085c-0.058-0.0635-0.076-0.141-0.1005-0.221-0.057-0.2405-0.057-0.35 2e-3 -0.3645 0.0965 6e-3 0.16 0.076 0.2305 0.136zm2.9-0.1155c0.118 0.0315 0.0945 0.219 0.094 0.353-9e-3 0.217-0.0175 0.262-0.0455 0.29-0.0485 0.0485-0.1835 0.0215-0.249-0.0505-0.0215-0.026-0.0235-0.034-0.0065-0.1395 0.0195-0.1285 0.0445-0.2085 0.1-0.3185 0.0405-0.079 0.0785-0.1285 0.107-0.1345zm-2.663 0.01c0.0065-5e-4 0.017 0 0.027 1e-3 0.075 6e-3 0.145 0.055 0.207 0.145l0.05 0.0735c0.0045 0.1205 0 0.2475-0.0215 0.3595-0.013 0.0065-0.067 0.0165-0.12 0.0215-0.092 0.0085-0.1005 0.0065-0.1325-0.0215-0.0445-0.038-0.057-0.1085-0.068-0.3425-0.0065-0.191-2e-3 -0.2335 0.058-0.2365zm1.1345 0.04c0.0805 0.017 0.1315 0.06 0.154 0.1305 0.018 0.0605 0.029 0.399 0.0115 0.4225-6e-3 0.01-0.044 0.0225-0.0875 0.028-0.162 0.0205-0.305 5e-3 -0.319-0.0335-0.018-0.044 0.1025-0.48 0.147-0.534 0.019-0.042 0.065-0.0095 0.094-0.0135zm1.049 3e-3c0.0355-0.0035 0.0735 0.0305 0.1105 0.103 0.03 0.0605 0.0345 0.0815 0.0345 0.217 0 0.108-0.0065 0.1545-0.018 0.1645-0.01 8e-3 -0.0505 0.0225-0.0935 0.0335-0.075 0.0195-0.0915 0.0215-0.115 0.0135l-0.1125-0.0205 0.0085-0.067c8e-3 -0.0875 0.0655-0.2815 0.106-0.3655 0.024-0.05 0.0515-0.075 0.0795-0.0785zm-0.489 0.0015c0.0235-1e-3 0.0345 0.0045 0.0495 0.021 0.0355 0.042 0.0805 0.166 0.109 0.2985 0.038 0.1865 0.038 0.186-0.0435 0.2105-0.0355 0.011-0.1105 0.0225-0.164 0.0255-0.1765 9e-3 -0.19-0.0015-0.1685-0.1575 0.017-0.139 0.0855-0.358 0.115-0.374 0.032-0.017 0.069-0.0165 0.1025-0.024zm-8.9965 0.7045c0.0015-5e-4 0.0035 0 0.0035 0 0.0045 0.0975 0.0045 0.196 0.0065 0.294-0.2475-0.019-0.4295-0.078-0.4295-0.1475 0-0.0685 0.1755-0.127 0.4195-0.1465zm0.4325 0.0085c0.2005 0.025 0.339 0.0775 0.3365 0.138 0 0.061-0.134 0.113-0.333 0.1375-2e-3 -0.0915-2e-3 -0.1835-0.0035-0.2755zm9.363 0.2665c0.017-0.0015 0.0245-3e-3 0.0505-5e-4 0.104 0.0105 0.119 0.017 0.119 0.052 0 0.046-0.079 0.1845-0.1325 0.2325-0.025 0.024-0.0595 0.044-0.0715 0.044-0.06 0-0.095-0.1265-0.067-0.243 0.017-0.063 0.048-0.0825 0.1015-0.085zm-0.3775 0.0415c0.0465-4e-3 0.0915 0.0085 0.1365 0.0145-0.013 0.1315-0.072 0.239-0.1815 0.3105-0.027 0-0.0405-0.0515-0.0405-0.164 0-0.134 7e-3 -0.1595 0.0855-0.161zm-0.414 0.0485c0.0965 0 0.1815 0.0045 0.1855 0.01 0.018 0.017-0.034 0.146-0.1105 0.277-0.0655 0.1165-0.075 0.125-0.1155 0.128-0.159-0.018-0.1545-0.2045-0.179-0.3325 0-0.076 0.017-0.0825 0.2195-0.0825zm-1.5045 0.0145c0.1105 2e-3 0.1535 0.0185 0.1535 0.061 0 0.054-0.041 0.1615-0.0645 0.175-0.0355 0.0195-0.0385 0.0185-0.1085-0.0545-0.1105-0.124-0.123-0.147 0.0195-0.1815zm0.532 0.0055c2e-3 3e-3 0.0235 0.042 0.045 0.086 0.047 0.0915 0.0505 0.1315 0.017 0.162-0.079 0.045-0.0955 0.0195-0.167-0.026-0.083-0.0785-0.1485-0.184-0.127-0.206 0.074-0.0265 0.1555-0.0165 0.232-0.016zm0.211 0.0025 0.1975 0.0035c0.077 0 0.1435 4e-3 0.147 0.01 0.0135 0.012-0.03 0.269-0.0535 0.327-0.027 0.065-0.1215 0.0655-0.1705-0.0115-0.07-0.1105-0.116-0.2035-0.1175-0.2675z'
+
+export const IconWrapper = ({
+  className = 'w-6 h-6',
+  stroke = 2,
+  children = null,
+  fill = false,
+  fillOpacity = 1,
+  dasharray = null,
+  wrapped = true,
+}) =>
+  wrapped ? (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill={fill ? 'currentColor' : 'none'}
+      fillOpacity={fillOpacity}
+      strokeOpacity={fillOpacity}
+      viewBox="0 0 24 24"
+      strokeWidth={stroke}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeDasharray={dasharray ? dasharray : ''}
+      className={className + ' icon'}
+    >
+      {children}
+    </svg>
+  ) : (
+    <> {children} </>
+  )
+
+// Looks like a play triangle
+export const ApplyIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
+  </IconWrapper>
+)
+
+// Looks like a lab beaker
+export const BeakerIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
+  </IconWrapper>
+)
+
+// Looks like a left U-turn that we slightly rotate
+export const BackIcon = (props) => (
+  <IconWrapper {...props} className={`${props.className || 'w-6 h-h'} -rotate-45`}>
+    <path d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+  </IconWrapper>
+)
+
+// Looks like a red X
+export const BoolNoIcon = ({ size = 6 }) => (
+  <NoIcon className={`w-${size} h-${size} text-error`} stroke={4} />
+)
+
+// Looks like a green checkbox
+export const BoolYesIcon = ({ size = 6 }) => (
+  <OkIcon className={`w-${size} h-${size} text-success`} stroke={4} />
+)
+
+// Looks like a bookmark
+export const BookmarkIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+  </IconWrapper>
+)
+
+// Looks lik a speech bubble
+export const ChatIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+  </IconWrapper>
+)
+
+// Looks like a circle
+export const CircleIcon = (props) => (
+  <IconWrapper {...props}>
+    <circle cx="12" cy="12" r="10" />
+  </IconWrapper>
+)
+
+// Looks like a X
+export const CloseIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M6 18L18 6M6 6l12 12" />
+  </IconWrapper>
+)
+
+// Looks like a museum building
+export const CuratedMeasurementsSetIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z" />
+  </IconWrapper>
+)
+
+// Looks like a coathanger
+export const DesignIcon = (props) => (
+  <IconWrapper {...props} stroke={0} fill>
+    <path d="m11.975 2.9104c-1.5285 0-2.7845 1.2563-2.7845 2.7848 0 0.7494 0.30048 1.4389 0.78637 1.9394a0.79437 0.79437 0 0 0 0.0084 0.00839c0.38087 0.38087 0.74541 0.62517 0.94538 0.82483 0.19998 0.19966 0.25013 0.2645 0.25013 0.51907v0.65964l-9.1217 5.2665c-0.28478 0.16442-0.83603 0.46612-1.3165 0.9611-0.48047 0.49498-0.92451 1.3399-0.66684 2.2585 0.22026 0.78524 0.7746 1.3486 1.3416 1.5878 0.56697 0.23928 1.0982 0.23415 1.4685 0.23415h18.041c0.37033 0 0.90158 0.0051 1.4686-0.23415 0.56697-0.23928 1.1215-0.80261 1.3418-1.5878 0.25767-0.91859-0.18662-1.7636-0.66709-2.2585-0.48046-0.49498-1.0315-0.79669-1.3162-0.9611l-8.9844-5.1873v-0.73889c0-0.70372-0.35623-1.2837-0.71653-1.6435-0.35778-0.3572-0.70316-0.58503-0.93768-0.81789-0.20864-0.21601-0.33607-0.50298-0.33607-0.83033 0-0.67 0.52595-1.1962 1.1959-1.1962 0.67001 0 1.1962 0.5262 1.1962 1.1962a0.79429 0.79429 0 0 0 0.79434 0.79427 0.79429 0.79429 0 0 0 0.79427-0.79427c0-1.5285-1.2563-2.7848-2.7848-2.7848zm-0.06859 8.2927 8.9919 5.1914c0.28947 0.16712 0.69347 0.41336 0.94393 0.67138 0.25046 0.25803 0.31301 0.3714 0.24754 0.60483-0.10289 0.36677-0.19003 0.40213-0.35969 0.47373-0.16967 0.07161-0.47013 0.09952-0.80336 0.09952h-18.041c-0.33323 0-0.6337-0.02792-0.80336-0.09952-0.16967-0.07161-0.25675-0.10696-0.35963-0.47373-0.06548-0.23342-0.00303-0.3468 0.24748-0.60483 0.25046-0.25803 0.65471-0.50426 0.94418-0.67138z" />
+  </IconWrapper>
+)
+
+// Looks like a left and right pane with different level of detail
+export const DetailIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
+  </IconWrapper>
+)
+
+// Looks like a document icon
+export const DocsIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+  </IconWrapper>
+)
+
+// Looks like a down pointing chevron
+export const DownIcon = (props) => (
+  <IconWrapper {...props}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={props.stroke || 2}
+      d="M19 9l-7 7-7-7"
+    />
+  </IconWrapper>
+)
+
+// Looks like a pencil
+export const EditIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+  </IconWrapper>
+)
+
+// Looks like FIXME
+export const ErrorIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+  </IconWrapper>
+)
+
+// Looks like arrows pointing outwards
+export const ExpandIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+  </IconWrapper>
+)
+
+// Looks like a file/sheet with an arrow pointing downwards
+export const ExportIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+  </IconWrapper>
+)
+
+// Looks like a ! in a triangle, is intended to be shown on an error background
+export const FailureIcon = ({ size = 6 }) => (
+  <NoIcon className={`w-${size} h-${size} text-secondary-content`} stroke={4} />
+)
+
+// Looks lik a flag
+export const FlagIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5" />
+  </IconWrapper>
+)
+
+// Looks like a gauge or speedometer
+export const GaugeIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 4.9580501,20.694732 A 9.9588146,9.9588156 45 0 1 4.9523103,6.6165865 9.9588146,9.9588156 45 0 1 19.030446,6.5993628 9.9588146,9.9588156 45 0 1 19.059151,20.67748 Z" />
+    <path d="m 13.346899,14.905658 c 0.185287,0.691503 -0.22474,1.402361 -0.916092,1.588212 -0.691356,0.185836 -1.402539,-0.223628 -1.588938,-0.914833 -0.186401,-0.691204 0.222481,-1.402721 0.913533,-1.589686 l 4.660195,-6.2056598 z" />
+  </IconWrapper>
+)
+
+// Looks like abox
+export const GroupIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+  </IconWrapper>
+)
+
+// Looks like a question mark in a circle
+export const HelpIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+  </IconWrapper>
+)
+
+// Looks like a pie with a slice a bit out of it
+export const IncludeIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
+    <path d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
+  </IconWrapper>
+)
+
+// Looks like a rectangle with rounded corners (like a full screen display)
+export const KioskIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 3,17.033898 V 7.2838983 c 0,-1.242641 1.007359,-2.25 2.25,-2.25 h 13.5 c 1.242641,0 2.25,1.007359 2.25,2.25 v 9.7499997 m -18,0 c 0,1.242641 1.007359,2.25 2.25,2.25 h 13.5 c 1.242641,0 2.25,-1.007359 2.25,-2.25" />
+  </IconWrapper>
+)
+
+// Looks like a left pointing chevron
+export const LeftIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M15 19l-7-7 7-7" />
+  </IconWrapper>
+)
+
+// Looks like a bullet list
+export const ListIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+  </IconWrapper>
+)
+
+// Looks like a padlock
+export const LockIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+  </IconWrapper>
+)
+
+// Looks like 4 boxes spaces out
+export const MarginIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="m 2.4889452,14.488945 h 7.0221096 v 7.02211 H 2.4889452 Z M 14.488945,2.4889452 h 7.02211 v 7.0221096 h -7.02211 z m -11.9999998,0 H 9.5110548 V 9.5110548 H 2.4889452 Z M 14.488945,14.488945 h 7.02211 v 7.02211 h -7.02211 z" />
+  </IconWrapper>
+)
+
+// Looks like a tape measure
+export const MeasurementsIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="m 23.045963,7.9355562 v 3.7987498 l -0.01469,-0.056 C 23.346411,18.817891 1.2185835,21.36545 1.2185835,21.36545 v -3.836793 m 0.075177,-5.192339 V 8.3573441 M 6.7939469,16.638959 C 5.6484749,16.381008 4.6127423,16.03325 3.7570739,15.581871 2.2780992,14.801689 1.3370697,13.711938 1.2971261,12.241292 M 2.0464728,10.122206 C 4.5831883,3.7286119 20.382021,3.7454996 22.30006,10.110938 M 1.2185835,17.535357 c 0,0 23.2148625,-2.584129 21.7494555,-10.2183133 C 21.611034,0.24754253 2.7448834,0.46882453 1.373585,7.5355232 0.41141246,12.493877 8.5647942,13.74509 15.368311,13.344749 v 1.037311" />
+  </IconWrapper>
+)
+
+// Looks like two people's heads next/behinf to each other, one bigger, one smaller
+export const MeasurementsSetIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+  </IconWrapper>
+)
+
+// Looks like 3 horizontal lines (hamburger menu)
+export const MenuIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M4 6h16M4 12h16M4 18h16" />
+  </IconWrapper>
+)
+
+// Looks like a X
+export const NoIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M6,6 L 18,18 M 18,6 L 6,18" />
+  </IconWrapper>
+)
+
+// Looks like a checkmark
+export const OkIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M4.5 12.75l6 6 9-13.5" />
+  </IconWrapper>
+)
+
+// Looks like sliders on a mixing panel
+export const OptionsIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
+  </IconWrapper>
+)
+
+// Looks like a grid
+export const PaperlessIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 1.5867219,1.58672 H 22.413278 V 22.41328 H 1.5867219 Z" />
+    <path
+      d="M 22.007133,15.500122 H 1.97864 m 20.028493,-7 H 1.97864 M 15.492887,1.9858756 V 22.014369 m -7,-20.0284934 V 22.014369"
+      strokeWidth={props.stroke / 2 || 1.1}
+    />
+  </IconWrapper>
+)
+
+// Looks like a +
+export const PlusIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </IconWrapper>
+)
+
+// Looks like a printer
+export const PrintIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+  </IconWrapper>
+)
+
+// Looks like a single rewind arrow
+export const ResetIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M16 18 l 0 -12 l -8 6 z M 6 6 l 0 12 l 1 0 l 0 -10 z" />
+  </IconWrapper>
+)
+
+// Looks like a double rewind arrow
+export const ResetAllIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 18 l 0 -12 l -8 6 z M 20 18 l 0 -12 l -8 6 z M 2 6 l 0 12 l 1 0 l 0 -10 z" />
+  </IconWrapper>
+)
+
+// Looks like a right pointing chevron
+export const RightIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M9 5l7 7-7 7" />
+  </IconWrapper>
+)
+
+// Looks like a rocket
+export const RocketIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
+  </IconWrapper>
+)
+
+// Looks like two arrows in a circular layout
+export const RotateIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+  </IconWrapper>
+)
+
+// Looks like a cloud with a plus sign in it
+export const SaveIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 24V12.5m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
+  </IconWrapper>
+)
+
+// Looks like a cloud with a plus sign in it
+export const SaveAsIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z M 11.5,10 v6 M 8.5,13 h 6" />
+  </IconWrapper>
+)
+
+// Looks like a small solid circle with a larger dashed circle around it
+export const SaIcon = (props) => (
+  <IconWrapper {...props}>
+    <circle cx="12" cy="12" r="5" />
+    <circle cx="12" cy="12" r="10" strokeDasharray="2 4" />
+  </IconWrapper>
+)
+
+// Looks like lines of varying thickness
+export const ScaleIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 2 20 h 20" strokeWidth={props.stroke / 2 || 1} />
+    <path d="M 2 12 h 20" />
+    <path d="M 2 4 h 20" strokeWidth={props.stroke * 2 || 4} />
+  </IconWrapper>
+)
+
+// Looks like a gear
+export const SettingsIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+    <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+  </IconWrapper>
+)
+
+// Looks like a spinning circle
+export const SpinnerIcon = (props) => (
+  <IconWrapper
+    {...props}
+    className={`${props.className ? props.className : 'h-6 w-6'} animate-spin`}
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    ></circle>
+    <path
+      className="opacity-85"
+      fill="currentColor"
+      stroke="none"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </IconWrapper>
+)
+
+// Looks like a white checkbox, intended to be shown on a success-colored background
+export const SuccessIcon = ({ size = 6 }) => (
+  <OkIcon className={`w-${size} h-${size} text-secondary-content`} stroke={4} />
+)
+
+// Looks like a light bulb
+export const TipIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+  </IconWrapper>
+)
+
+// Looks like a trashcan
+export const TrashIcon = (props) => (
+  <IconWrapper {...props} stroke={props.stroke || 2}>
+    <path d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+  </IconWrapper>
+)
+
+// Looks like a desktop screen
+export const UiIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+  </IconWrapper>
+)
+
+// Looks like a rewind arrow, but takes text to go inside it
+export const UndoIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="m 2.447878,2.716835 v 4.38448 h 4.38448 M 3.1307,6.882055 c 1.771085,-3.0536 5.075566,-5.10727 8.859706,-5.10727 5.65253,0 10.234811,4.58228 10.234811,10.23481 0,5.65253 -4.582281,10.23481 -10.234811,10.23481 -5.440329,0 -9.889258,-4.24469 -10.215624,-9.60291" />
+    {props.text ? (
+      <text
+        x="12"
+        y="17"
+        style={{
+          fontSize: '15px',
+          textAnchor: 'middle',
+          fontWeight: 500,
+          fill: 'currentColor',
+          stroke: 'none',
+        }}
+      >
+        {props.text}
+      </text>
+    ) : null}
+  </IconWrapper>
+)
+
+// Looks like a bit of measuring tape
+export const UnitsIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="m 1.5,4.5 h 21 v 15 h -21 z" />
+    <path
+      d="m 3.5,19.316406 v -3.708984 z m 2.1035156,0 v -3.708984 z m 2.1035156,0 v -3.708984 z m 2.1035157,0 v -3.708984 z m 4.3789061,0 v -3.708984 z m 2.103516,0 v -3.708984 z m 2.103515,0 v -3.708984 z m 2.103516,0 V 15.607422 Z M 12,19.130859 v -5.082031 z m 0,-8.986328 V 5.0625001 Z M 5.6035156,8.5859371 v -3.708984 z m 12.7929684,0 v -3.708984 z"
+      strokeWidth={props.stroke / 2 || 1.1}
+    />
+  </IconWrapper>
+)
+
+// Looks like an up pointing chevron
+export const UpIcon = (props) => (
+  <IconWrapper {...props}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={props.stroke || 2}
+      d="M19 16l-7 -7-7 7"
+    />
+  </IconWrapper>
+)
+// Looks like a cloud with an arrow pointing upwards in it
+export const UploadIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
+  </IconWrapper>
+)
+
+// Looks like old-timey scales
+export const UxIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
+  </IconWrapper>
+)
+
+// Looks like an ! in a triangle
+export const WarningIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+  </IconWrapper>
+)
+
+// Looks like a wrench
+export const WrenchIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" />
+  </IconWrapper>
+)
+
+// Looks like a box in dashed lines
+export const XrayIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
+  </IconWrapper>
+)
+
+// These icons all reuse existing icons
+export const ViewDraftIcon = OptionsIcon
+export const ViewMeasurementsIcon = MeasurementsIcon
+export const ViewTestIcon = BeakerIcon
+export const ViewTimingIcon = GaugeIcon
+export const ViewPrintLayoutIcon = PrintIcon
+export const ViewSaveIcon = SaveIcon
+export const ViewExportIcon = ExportIcon
+export const ViewEditSettingsIcon = EditIcon
+export const ViewLogsIcon = ListIcon
+export const ViewInspectIcon = XrayIcon
+export const ViewDocsIcon = DocsIcon
+export const ViewDesignsIcon = DesignIcon
+export const ViewViewPickerIcon = UiIcon
+export const ViewUndosIcon = BackIcon
+// Flag icons
+export const FlagNoteIcon = ChatIcon
+export const FlagInfoIcon = DocsIcon
+export const FlagTipIcon = TipIcon
+export const FlagWarningIcon = WarningIcon
+export const FlagErrorIcon = ErrorIcon
+export const FlagFixmeIcon = WrenchIcon
+export const FlagExpandIcon = ExpandIcon
+export const FlagOtionsIcon = OptionsIcon
+
+/*
+ * Not used inside the pattern editor
+// Used in several icons
+const page =
+  'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'
+
+export const BeakerIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
+  </IconWrapper>
+)
+
+export const BioIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+  </IconWrapper>
+)
+
+
+export const BoxIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+  </IconWrapper>
+)
+
+export const BriefcaseIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" />
+  </IconWrapper>
+)
+
+export const BugIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0112 12.75zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 01-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 002.248-2.354M12 12.75a2.25 2.25 0 01-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 00-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 01.4-2.253M12 8.25a2.25 2.25 0 00-2.248 2.146M12 8.25a2.25 2.25 0 012.248 2.146M8.683 5a6.032 6.032 0 01-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0115.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 00-.575-1.752M4.921 6a24.048 24.048 0 00-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 01-5.223 1.082" />
+  </IconWrapper>
+)
+
+export const BulletIcon = (props) => (
+  <IconWrapper {...props}>
+    <circle cx="12" cy="12" r="8" />
+  </IconWrapper>
+)
+
+export const CalendarIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+  </IconWrapper>
+)
+
+export const CameraIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+    <path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+  </IconWrapper>
+)
+
+export const CcByIcon = (props) => (
+  <IconWrapper {...props}>
+    <path
+      d="M 11.984994,0 C 8.6607938,0 5.8471705,1.1601335 3.5443291,3.4798048 1.1812345,5.8793118 0,8.7193215 0,11.998499 c 0,3.279177 1.1812345,6.098835 3.5443291,8.458672 2.3630952,2.359333 5.1767182,3.539828 8.4406649,3.539828 3.304116,0 6.168372,-1.189416 8.590722,-3.569839 C 22.858473,18.167736 24,15.358508 24,11.998499 24,8.6384865 22.839122,5.799476 20.517194,3.4798048 18.193261,1.1601435 15.349364,0 11.984994,0 Z m 0.03001,2.1593096 c 2.723639,0 5.036475,0.9595726 6.938602,2.8795795 1.922212,1.8994211 2.884082,4.2196862 2.884082,6.9596099 0,2.7595 -0.942016,5.049981 -2.824059,6.869575 -1.983474,1.960173 -4.315165,2.939602 -6.998625,2.939602 -2.6844678,0 -4.9973137,-0.9695 -6.9386019,-2.90959 C 3.1330942,16.957996 2.1638068,14.65808 2.1638068,11.998499 2.1638068,9.338412 3.144029,7.01864 5.1064104,5.0388891 6.988468,3.1188722 9.291366,2.1593096 12.015006,2.1593096 Z m -0.07352,2.0902833 c -0.904485,0.031562 -1.62123,0.7741886 -1.620608,1.6791298 -7.4e-5,0.9273199 0.751714,1.6791063 1.679131,1.6791296 0.927415,-2.33e-5 1.679201,-0.7518097 1.679129,-1.6791296 7.3e-5,-0.9273198 -0.751714,-1.6791066 -1.679129,-1.6791298 -0.01951,-3.396e-4 -0.03902,-3.396e-4 -0.05852,0 z M 9.5450805,8.2530938 c -0.426825,0 -0.7742903,0.3459997 -0.7742903,0.774291 v 4.9083402 h 1.3700138 v 5.81168 h 3.719895 v -5.81168 h 1.368513 V 9.0273848 c 0,-0.4282815 -0.347466,-0.7742918 -0.774292,-0.774291 z"
+      stroke="none"
+      fill="currentColor"
+    />
+  </IconWrapper>
+)
+
+export const CisFemaleIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="m 8.233159,2.5000002 c 0,0 0.03684,1.4367676 0.07562,2.1541457 C 8.413989,6.5901608 7.3671071,6.9496995 7.3372662,8.1692173 7.3029172,9.5719723 8.2152,10.315942 8.255388,12.267223 8.290568,13.973294 7.1739465,15.012709 7.1739465,17.259683 9.46861,17.549817 10.668009,19.205086 11.354231,21.5 h 0.109763 0.93923 0.109803 c 0.686181,-2.294914 1.88558,-3.950183 4.180285,-4.240317 0,-2.246974 -1.116622,-3.286389 -1.081483,-4.99246 0.04015,-1.951281 0.952433,-2.6952507 0.918122,-4.0980057 -0.0298,-1.2195178 -1.076723,-1.5790565 -0.971513,-3.5150714 0.0389,-0.7173781 0.07562,-2.1541457 0.07562,-2.1541457 h -0.722313 c 0,1.5276628 -1.146752,3.7763442 -2.978112,3.7763442 -1.831402,0 -2.978154,-2.2486814 -2.978154,-3.7763442 z" />
+  </IconWrapper>
+)
+
+export const CisMaleIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 6.2021092,6.7988281 C 5.0433189,10.972649 5.2215488,13.211802 5.2215488,16.798828 h 5.8983122 l 0.143133,-1.21128 c 0.331559,-1.834081 0.655671,-2.543616 1.078829,0.07477 l 0.134587,1.136509 h 5.896176 c 0,-3.587026 0.180363,-5.826179 -0.978425,-9.9999999 z" />
+  </IconWrapper>
+)
+
+export const ClearIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 12l6.414 6.414a2 2 0 001.414.586H19a2 2 0 002-2V7a2 2 0 00-2-2h-8.172a2 2 0 00-1.414.586L3 12z" />
+  </IconWrapper>
+)
+
+export const CloneIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
+  </IconWrapper>
+)
+
+export const CodeIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+  </IconWrapper>
+)
+
+export const CogIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+  </IconWrapper>
+)
+
+export const CommunityIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+  </IconWrapper>
+)
+
+export const CompareIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" />
+  </IconWrapper>
+)
+
+export const CopyIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+  </IconWrapper>
+)
+
+export const CoverPageIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d={page} />
+    <circle cx="9" cy="12" r="1" />
+    <circle cx="14" cy="12" r="1" />
+    <path d="M 9 16 C 11 18 12 18 14 16" />
+  </IconWrapper>
+)
+
+export const CsetIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z" />
+  </IconWrapper>
+)
+export const CuratedMeasurementsSetIcon = CsetIcon
+
+export const CloudIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
+  </IconWrapper>
+)
+
+export const CutIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M7.848 8.25l1.536.887M7.848 8.25a3 3 0 11-5.196-3 3 3 0 015.196 3zm1.536.887a2.165 2.165 0 011.083 1.839c.005.351.054.695.14 1.024M9.384 9.137l2.077 1.199M7.848 15.75l1.536-.887m-1.536.887a3 3 0 11-5.196 3 3 3 0 015.196-3zm1.536-.887a2.165 2.165 0 001.083-1.838c.005-.352.054-.695.14-1.025m-1.223 2.863l2.077-1.199m0-3.328a4.323 4.323 0 012.068-1.379l5.325-1.628a4.5 4.5 0 012.48-.044l.803.215-7.794 4.5m-2.882-1.664A4.331 4.331 0 0010.607 12m3.736 0l7.794 4.5-.802.215a4.5 4.5 0 01-2.48-.043l-5.326-1.629a4.324 4.324 0 01-2.068-1.379M14.343 12l-2.882 1.664" />
+  </IconWrapper>
+)
+
+export const CuttingLayoutIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d={page} />
+    <path
+      d="M7.848 8.25l1.536.887M7.848 8.25a3 3 0 11-5.196-3 3 3 0 015.196 3zm1.536.887a2.165 2.165 0 011.083 1.839c.005.351.054.695.14 1.024M9.384 9.137l2.077 1.199M7.848 15.75l1.536-.887m-1.536.887a3 3 0 11-5.196 3 3 3 0 015.196-3zm1.536-.887a2.165 2.165 0 001.083-1.838c.005-.352.054-.695.14-1.025m-1.223 2.863l2.077-1.199m0-3.328a4.323 4.323 0 012.068-1.379l5.325-1.628a4.5 4.5 0 012.48-.044l.803.215-7.794 4.5m-2.882-1.664A4.331 4.331 0 0010.607 12m3.736 0l7.794 4.5-.802.215a4.5 4.5 0 01-2.48-.043l-5.326-1.629a4.324 4.324 0 01-2.068-1.379M14.343 12l-2.882 1.664"
+      transform="rotate(-90) scale(0.6) translate(-35 8)"
+    />
+  </IconWrapper>
+)
+
+export const DetailIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 12,3.8533453 V 20.547919 M 1.5305595,3.53056 H 22.46944 V 20.469444 H 1.5305595 Z" />
+    <path
+      d="m 14.415354,11.5 h 5.669292 m -5.669292,3 h 5.669292 m -5.669292,-6 h 5.669292"
+      strokeWidth={props.stroke / 2 || 1.1}
+    />
+  </IconWrapper>
+)
+
+export const DiscordIcon = (props) => (
+  <IconWrapper {...props} stroke={0} fill>
+    <path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z" />
+  </IconWrapper>
+)
+
+export const DoubleLeftIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M11 19l-7-7 7-7 M19 19l-7-7 7-7" />
+  </IconWrapper>
+)
+export const DoubleRightIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M5 5l7 7-7 7 M13 5l7 7-7 7" />
+  </IconWrapper>
+)
+
+export const DownloadIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 9.75v6.75m0 0l-3-3m3 3l3-3m-8.25 6a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
+  </IconWrapper>
+)
+
+export const EmailIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+  </IconWrapper>
+)
+
+export const FacebookIcon = (props) => (
+  <IconWrapper {...props} stroke={0} fill>
+    <path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0" />
+  </IconWrapper>
+)
+
+export const FilterIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+  </IconWrapper>
+)
+
+export const FingerprintIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
+  </IconWrapper>
+)
+
+export const ForbiddenIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+  </IconWrapper>
+)
+
+export const FreeSewingIcon = (props) => (
+  <IconWrapper {...props} stroke={0} fill>
+    <path d={logoPath} />
+  </IconWrapper>
+)
+
+export const GaugeIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 4.9580501,20.694732 A 9.9588146,9.9588156 45 0 1 4.9523103,6.6165865 9.9588146,9.9588156 45 0 1 19.030446,6.5993628 9.9588146,9.9588156 45 0 1 19.059151,20.67748 Z" />
+    <path d="m 13.346899,14.905658 c 0.185287,0.691503 -0.22474,1.402361 -0.916092,1.588212 -0.691356,0.185836 -1.402539,-0.223628 -1.588938,-0.914833 -0.186401,-0.691204 0.222481,-1.402721 0.913533,-1.589686 l 4.660195,-6.2056598 z" />
+  </IconWrapper>
+)
+
+export const GitHubIcon = (props) => (
+  <IconWrapper {...props} stroke={0} fill>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  </IconWrapper>
+)
+
+export const GuideIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z" />
+  </IconWrapper>
+)
+
+export const GoogleIcon = (props) => (
+  <IconWrapper {...props} fill>
+    <path d="M 12.25009,0 C 7.5567085,0 3.5033589,2.69334 1.530043,6.613315 0.71674427,8.240005 0.25,10.06676 0.25,12.00009 c 0,1.93333 0.46674427,3.759905 1.280043,5.386595 C 3.5033589,21.30666 7.5567085,24 12.25009,24 c 3.239959,0 5.959944,-1.066635 7.94668,-2.906575 2.266629,-2.093365 3.573349,-5.173415 3.573349,-8.826735 0,-0.98666 -0.08023,-1.70661 -0.253496,-2.453265 l -11.266533,0 0,4.45322 6.613137,0 c -0.133283,1.106705 -0.853233,2.77333 -2.453266,3.89327 -1.013315,0.706675 -2.373243,1.199975 -4.159871,1.199975 -3.173318,0 -5.8666835,-2.09327 -6.826777,-4.986605 -0.2533286,-0.746655 -0.399991,-1.54657 -0.399991,-2.373195 0,-0.82672 0.1467055,-1.62672 0.386706,-2.373375 C 6.3834495,6.73338 9.076772,4.63993 12.25009,4.63993 c 2.253301,0 3.773228,0.973465 4.639932,1.786855 L 20.27666,3.12004 C 18.196718,1.186705 15.490049,0 12.25009,0 Z" />
+  </IconWrapper>
+)
+
+export const HeartIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+  </IconWrapper>
+)
+
+export const HomeIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+  </IconWrapper>
+)
+
+export const I18nIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
+  </IconWrapper>
+)
+
+export const ImportIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12-3-3m0 0-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+  </IconWrapper>
+)
+
+export const IncludeIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
+    <path d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
+  </IconWrapper>
+)
+
+export const InstagramIcon = (props) => (
+  <IconWrapper {...props} stroke={0} fill>
+    <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
+  </IconWrapper>
+)
+
+export const KeyIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+  </IconWrapper>
+)
+
+export const LabelIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
+    <path d="M6 6h.008v.008H6V6z" />
+  </IconWrapper>
+)
+
+export const LeftRightIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+  </IconWrapper>
+)
+
+export const LinkIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+  </IconWrapper>
+)
+
+export const MastodonIcon = (props) => (
+  <IconWrapper {...props} fill stroke={0}>
+    <path d="m 11.217423,0.1875 c -2.8267978,0.0231106 -5.545964,0.32921539 -7.1306105,1.056962 0,0 -3.14282962,1.4058166 -3.14282962,6.2023445 0,1.0983506 -0.021349,2.4116171 0.013437,3.8043315 0.11412502,4.690743 0.85993502,9.313695 5.19692442,10.461603 1.9996899,0.529281 3.7166529,0.640169 5.0993757,0.564166 2.507534,-0.139021 3.915187,-0.894849 3.915187,-0.894849 l -0.08272,-1.819364 c 0,0 -1.79194,0.564966 -3.804377,0.496111 -1.9938518,-0.06838 -4.0987697,-0.214969 -4.4212502,-2.662908 -0.029782,-0.215025 -0.044673,-0.445024 -0.044673,-0.686494 0,0 1.9573364,0.47844 4.4378282,0.592088 1.516743,0.06957 2.939062,-0.08886 4.383732,-0.261231 2.770451,-0.330816 5.182722,-2.037815 5.485905,-3.597546 0.477704,-2.456993 0.438356,-5.9959075 0.438356,-5.9959075 0,-4.7965279 -3.142655,-6.2023445 -3.142655,-6.2023445 C 16.83453,0.51671539 14.113674,0.21061063 11.286876,0.1875 Z M 8.0182292,3.9352913 c 1.177465,0 2.0690118,0.4525587 2.6585778,1.3578046 l 0.573249,0.9608111 0.573247,-0.9608111 c 0.589448,-0.9052459 1.480995,-1.3578046 2.65858,-1.3578046 1.017594,0 1.837518,0.3577205 2.463657,1.0555661 0.606959,0.6978459 0.909169,1.6411822 0.909169,2.8281631 V 13.626816 H 15.553691 V 7.9896839 c 0,-1.1882914 -0.49996,-1.7914432 -1.500043,-1.7914432 -1.10575,0 -1.659889,0.715401 -1.659889,2.1301529 V 11.413948 H 10.106352 V 8.3283936 c 0,-1.4147519 -0.5543138,-2.1301529 -1.6600628,-2.1301529 -1.000084,0 -1.5000426,0.6031518 -1.5000426,1.7914432 V 13.626816 H 4.6452275 V 7.8190205 c 0,-1.1869809 0.3022656,-2.1303172 0.9093441,-2.8281631 C 6.1805914,4.2930118 7.0005147,3.9352913 8.0182292,3.9352913 Z" />
+  </IconWrapper>
+)
+
+export const MarginIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="m 2.4889452,14.488945 h 7.0221096 v 7.02211 H 2.4889452 Z M 14.488945,2.4889452 h 7.02211 v 7.0221096 h -7.02211 z m -11.9999998,0 H 9.5110548 V 9.5110548 H 2.4889452 Z M 14.488945,14.488945 h 7.02211 v 7.02211 h -7.02211 z" />
+  </IconWrapper>
+)
+
+export const MeasieIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="m 23.045963,7.9355562 v 3.7987498 l -0.01469,-0.056 C 23.346411,18.817891 1.2185835,21.36545 1.2185835,21.36545 v -3.836793 m 0.075177,-5.192339 V 8.3573441 M 6.7939469,16.638959 C 5.6484749,16.381008 4.6127423,16.03325 3.7570739,15.581871 2.2780992,14.801689 1.3370697,13.711938 1.2971261,12.241292 M 2.0464728,10.122206 C 4.5831883,3.7286119 20.382021,3.7454996 22.30006,10.110938 M 1.2185835,17.535357 c 0,0 23.2148625,-2.584129 21.7494555,-10.2183133 C 21.611034,0.24754253 2.7448834,0.46882453 1.373585,7.5355232 0.41141246,12.493877 8.5647942,13.74509 15.368311,13.344749 v 1.037311" />
+  </IconWrapper>
+)
+
+export const MegaphoneIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
+  </IconWrapper>
+)
+
+export const MenuAltIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
+  </IconWrapper>
+)
+
+export const MeasurementsSetIcon = MsetIcon
+
+export const MsfIcon = (props) => (
+  <IconWrapper {...props}>
+    <path
+      d="m 13.474495,8.5668953 c 2.067369,-0.6105025 3.786721,-1.0959232 4.916321,-1.3525676 0,0 0.250807,-0.062865 0.30719,-0.07129 0.05703,-0.00843 0.08166,-0.019443 0.09916,-0.04083 a 0.23006778,0.23007257 0 0 0 0.03046,-0.1523016 c -0.01296,-0.047311 -0.05703,-0.1173046 -0.04342,-0.1523016 0.01296,-0.034997 0.08749,-0.2106298 0.09138,-0.2410901 0.0039,-0.029812 -0.04018,-0.078419 -0.05703,-0.091381 -0.0175,-0.012962 0.01361,-0.1082314 -0.0084,-0.147765 A 0.35320266,0.35321001 0 0 0 18.701894,6.2162665 c -0.03889,-0.025924 -0.05314,-0.1652635 -0.05314,-0.1911871 a 0.51068567,0.5106963 0 0 0 -0.0039,-0.057032 c 0,0 0.02592,-0.017499 -0.0045,-0.038885 -0.03111,-0.022035 -0.06222,-0.029164 -0.06611,-0.064809 -0.0045,-0.035645 0.0097,-0.031756 -0.0032,-0.05768 -0.01361,-0.025923 -0.03176,-0.043422 -0.04537,-0.047959 -0.01231,-0.00518 -0.0039,-0.034997 -0.0084,-0.079067 -0.0039,-0.042774 -0.0084,-0.073882 -0.0084,-0.073882 l -0.09592,-0.073883 c -0.0175,-0.012962 -0.0175,-0.022034 -0.02139,-0.047959 -0.0045,-0.025923 0,-0.043422 -0.03046,-0.057032 -0.03111,-0.012962 -0.143873,-0.043422 -0.143873,-0.043422 0,0 -0.07907,-0.022036 -0.113413,-0.00843 -0.035,0.012962 -0.05185,0.00389 -0.100452,0.03046 a 0.39532773,0.39533597 0 0 1 -0.157483,0.051847 c -0.04277,0 -0.06935,0.017499 -0.105638,0.00389 -0.035,-0.012962 -0.02981,-0.029812 -0.186646,0.026572 -0.156835,0.057032 -1.500301,0.423852 -1.500301,0.423852 0,0 -3.693398,1.0933307 -5.936396,2.0285272 -0.73881,0.3071955 -3.7504297,1.5606049 -6.6084549,3.3234144 -0.05055,0.03564 -0.086842,0.05768 -0.1166541,0.106935 l -0.014903,0.02852 h 2.84183 a 67.507721,67.509127 0 0 1 4.921506,-2.0181578 c 0.706296,-0.2521054 1.07894,-0.4037588 2.334269,-0.8140009 z M 9.7642467,5.7872296 c 0,0.038885 0.021387,0.06481 0.054439,0.1101757 0.023979,0.032404 0.00259,0.052496 0.044069,0.1004542 0.041477,0.047959 0.016203,0.033052 0.077769,0.088788 0.038884,0.034997 0.036292,0.093325 0.093323,0.1989642 0.05833,0.1062871 0.06999,0.1069351 0.121192,0.1652634 0.05768,0.064161 0.09722,0.089436 0.155537,0.1231375 0.08685,0.051199 0.04278,0.1386915 0.140634,0.1322107 0.09592,-0.00648 0.1685,-0.024627 0.2359,-0.00583 0.05574,0.016203 0.02592,0.00324 0.09527,0.00324 0.07129,0 -0.02463,-0.011018 0.06676,-0.022035 0.08555,-0.00972 0.01944,0.068697 0.125079,0.078419 0,0 0.05833,0.027219 0.174332,0.00843 0.114711,-0.019443 0.194424,-0.043422 0.229422,-0.1166566 0.06546,-0.141932 0.118597,-0.1445245 0.171091,-0.2009084 0.05055,-0.053144 0.06287,-0.020739 0.110822,-0.040182 0.04796,-0.018795 0.06287,-0.1464687 0.116653,-0.1814656 0.08425,-0.051848 0.165909,-0.1814657 0.233309,-0.2294245 0.06805,-0.048607 0.226827,-0.2935856 0.313022,-0.4666262 0.08685,-0.1730404 0.195719,-0.4484794 0.204792,-0.5476375 0.0097,-0.099158 -0.01426,-0.1257297 0.01426,-0.2022046 0.02916,-0.076474 0.04407,-0.1950755 0.04407,-0.2715503 0,-0.077771 -0.01944,-0.1924833 -0.03889,-0.2501635 -0.01944,-0.058329 -0.02398,-0.147765 -0.02398,-0.147765 0,0 -0.0525,-0.085548 -0.0525,-0.1335068 0,-0.048607 -0.01361,-0.1101756 -0.07129,-0.1490612 -0.05833,-0.038886 -0.07713,-0.1568381 -0.115359,-0.233313 -0.03889,-0.077771 -0.08555,-0.079715 -0.08555,-0.1471168 0,-0.066753 -0.144522,-0.1659115 -0.192479,-0.2235917 -0.04861,-0.058328 -0.174982,-0.1743366 -0.22294,-0.1743366 -0.04796,0 -0.0512,-0.00259 -0.112117,-0.00259 -0.06092,0 -0.05833,-0.034349 -0.09657,-0.04407 -0.03824,-0.00907 -0.124431,-0.014906 -0.1685,0.031108 -0.01879,0.048607 -0.04796,0.034349 -0.09592,0.034349 -0.04796,0 -0.07648,0.024627 -0.114709,0.04407 -0.03889,0.019443 -0.09916,0.020091 -0.118598,0.058328 -0.01944,0.038886 -0.09268,0.065457 -0.130264,0.075179 -0.03889,0.00972 -0.125728,0.072586 -0.206089,0.1399878 -0.07971,0.067401 -0.421894,0.3065471 -0.650017,0.6655899 C 9.866643,4.4074445 9.9003431,4.537711 9.8504411,4.6621446 9.7947062,4.8021323 9.7661908,4.9181409 9.7286024,5.0237798 9.6897172,5.1294187 9.7026789,5.5720655 9.7039749,5.654373 c 0.00194,0.073235 0.060272,0.094621 0.060272,0.1328588 z m 7.5650183,5.6124744 c 0.07583,-0.03694 0.128319,-0.06351 0.149706,-0.07453 0.147762,-0.07972 1.314303,-0.595596 1.449751,-0.663646 0.136096,-0.0674 1.32532,-0.60791 1.32532,-0.60791 0,0 0.342186,-0.1360989 0.579381,-0.2527553 0.167204,-0.082307 0.224884,-0.088788 0.274786,-0.2080375 C 21.132189,9.5357931 20.975352,8.9849149 20.91897,8.8714988 20.861939,8.7587304 20.743989,8.4068166 20.561878,8.1352661 20.37912,7.8643638 20.217101,7.6854905 20.189882,7.6543821 c -0.02722,-0.031108 -0.08685,-0.046663 -0.152947,-0.046663 -0.06611,0 -0.279322,0.064161 -0.279322,0.064161 0,0 -0.696036,0.2307206 -0.861943,0.2734947 -0.167205,0.042774 -4.164552,1.3519194 -4.692087,1.5554202 -0.523,0.2009085 -0.646134,0.2086855 -1.600753,0.616983 -0.21257,0.09073 -0.32404,0.114064 -0.33441,0.187947 0,0.04537 0.03629,0.05962 0.09657,0.09916 0.08425,0.05379 0.263121,0.184706 0.321448,0.214518 0.111469,0.05703 0.287098,0.239794 0.287098,0.239794 0,0 0.07388,0.134155 0.165261,0.198965 0.09527,0.0687 0.11406,0.07388 0.2359,0.214518 0.02916,0.035 0.07713,0.08101 0.127023,0.127674 h 0.0013 a 6.0919357,6.0920626 0 0 0 0.208682,0.185354 l 0.101748,0.04602 0.138689,0.167856 c 0,0 0.05833,0.04083 0.09203,0.0862 0.0337,0.04537 0.252102,0.262477 0.252102,0.262477 0,0 0.09073,0.06805 0.147762,0.136099 0.05639,0.06805 0.113413,0.114065 0.136096,0.1698 a 0.36940461,0.3694123 0 0 0 0.136744,0.165912 c 0.06805,0.04537 0.128321,-0.02916 0.207386,-0.06351 0.07972,-0.03435 0.587159,-0.303955 0.680482,-0.338952 0.05833,-0.02204 1.279954,-0.601429 1.724537,-0.817892 z M 3.0521001,11.782078 c 0.028515,0 0.066105,0.0078 0.078417,0.01944 0.012962,0.01296 0.049902,0.03759 0.074528,0.0337 0.025275,-0.0045 0.033051,-0.0045 0.045365,0.02074 0.012962,0.02463 0.016851,0.06805 0.053791,0.101103 0.037588,0.03305 0.062864,0.02916 0.079065,0.05833 0.016851,0.02916 0.037588,0.03694 0.033051,0.07907 -0.00389,0.04083 -0.00843,0.06157 0.00454,0.06999 0.011666,0.0084 0.011666,0.01685 0.016203,0.05379 0.00454,0.03694 -0.020739,0.103695 -0.00454,0.108231 0.016851,0.0039 0.016851,-0.0052 0.016851,0.02463 0,0.02916 -0.016851,0.0162 -0.016851,0.0324 0,0.01685 0.016851,0.02592 0.016851,0.02592 0,0 -0.00389,0.01231 -0.00389,0.04083 a 0.14257722,0.14258019 0 0 0 0.020739,0.06287 c 0.03694,0.0162 0.099804,0.0162 0.1198944,-0.0045 0.020739,-0.02139 0.029163,-0.02916 0.083602,-0.0499 0.053791,-0.02074 0.075824,-0.07777 0.1380407,-0.11212 0.062216,-0.0324 0.079065,-0.07907 0.1121175,-0.07453 0.033051,0.0045 0.074528,-0.05379 0.1036926,-0.04925 0.029163,0.0045 0.069991,-0.02916 0.1036924,-0.0337 0.032403,-0.0039 0.053791,-0.0078 0.070641,-0.02852 0.016203,-0.02139 0.020091,-0.03759 0.03694,-0.03759 0.016203,0 0.00389,-0.0084 0.033051,-0.0337 0.029163,-0.02398 0.033699,-0.04472 0.058327,-0.04926 0.025275,-0.0045 0.045365,-0.0499 0.086842,-0.07064 0.041477,-0.02009 0.086842,-0.06351 0.1451695,-0.06351 0.058328,0 0.027219,0.0058 0.069992,0.04342 0.043421,0.03694 0.051846,0.0324 0.1017483,0.04537 0.049254,0.01231 0.058327,-0.01685 0.066105,0.02074 0.00843,0.03694 0.025275,0.06222 0.079065,0.05379 0.053143,-0.0084 0.068697,-0.04537 0.1244312,-0.07453 0.348669,-0.182759 0.7647352,-0.384964 1.2183901,-0.594946 H 3.3767872 c -0.018147,0.03565 -0.029163,0.06287 -0.058976,0.08296 -0.037588,0.02592 -0.041477,0.02592 -0.062864,0.03759 -0.020091,0.01296 -0.053791,0.0084 -0.077769,0.03759 -0.025275,0.02852 -0.037588,0.04926 -0.058328,0.05379 -0.020739,0.0039 -0.037588,0.01685 -0.062864,0.03305 -0.024627,0.0162 -0.045365,0.02463 -0.03694,0.06611 0.00907,0.04148 0.00389,0.07129 0.0337,0.07129 z M 23.950032,11.762636 A 7.2001496,7.2002995 0 0 0 23.84634,11.399704 C 23.755608,11.110007 23.651916,10.84429 23.587756,10.77624 a 0.27478519,0.27479091 0 0 0 -0.254047,-0.07129 c -0.09592,0.02592 -2.170414,0.489957 -2.170414,0.489957 0,0 -0.359684,0.09073 -0.818522,0.204797 h -0.0026 c -0.700573,0.174985 -1.629917,0.406354 -1.863873,0.463386 -0.569012,0.139988 -2.909223,0.864554 -3.346675,1.028522 -0.02528,0.0091 -0.103693,0.02592 -0.09722,0.07388 0.0045,0.04796 0.03176,0.04537 0.06157,0.08425 0.02981,0.04018 0.134154,0.105638 0.254695,0.233313 0.08425,0.08944 0.149058,0.211277 0.202849,0.259236 a 0.30006024,0.30006649 0 0 1 0.09074,0.134155 c 0.01037,0.03759 0.04342,0.05509 0.05444,0.08231 0.01102,0.02722 0.0175,0.04926 0.04537,0.113417 0.02592,0.06481 0.04537,0.09916 0.08814,0.157486 0.04277,0.05963 0.346722,0.328583 0.389495,0.449775 0.02463,0.06611 0.185999,0.260534 0.185999,0.260534 l 0.07453,0.162022 c 0.09722,0.222943 0.265064,0.680497 0.287099,0.692163 -0.01167,-0.07518 -0.0162,-0.101751 -0.0026,-0.03889 0.0065,0.03046 0.0065,0.04018 0.0026,0.03889 0.02203,0.140635 0.07259,0.453664 0.09009,0.6792 h 0.237197 c 0.290987,-0.111472 0.7926,-0.303307 1.158764,-0.438111 0.745289,-0.274143 1.411515,-0.488661 1.920903,-0.672719 0.231366,-0.08425 -0.05509,-1.109533 -0.05509,-1.109533 0,0 1.290972,-0.423852 1.936458,-0.612446 0.371998,-0.108879 1.685652,-0.434222 1.743979,-0.456255 0.0849,-0.035 0.138041,-0.181466 0.149058,-0.239794 0.01037,-0.05963 0.1011,-0.585227 0,-0.981211 z M 7.3060858,17.767854 c 0.1801658,-0.0687 0.1360964,-0.137395 0.1659081,-0.190539 0.02657,-0.04731 -0.025276,-0.09527 0.058976,-0.185354 0.055735,-0.05898 0.2022004,-0.547637 0.2022004,-0.547637 0,0 0.092675,-0.178225 0.080361,-0.220351 -0.014906,-0.05185 0.05055,-0.207391 0.1101733,-0.349971 h 6.481e-4 c 0.040829,-0.100454 0.080361,-0.192483 0.090731,-0.242386 0.014258,-0.07129 0.1185984,-0.264421 0.1438735,-0.316269 0.025922,-0.0512 0.055735,-0.175632 0.090731,-0.286456 0.028515,-0.09074 0.2060889,-0.581987 0.2060889,-0.581987 0,0 0.1859985,-0.360338 0.2009043,-0.489956 0.00518,-0.04213 0.1036924,-0.188595 0.1205426,-0.257293 0.017499,-0.0687 0,-0.111471 0.042773,-0.145821 0.042773,-0.03435 0.1633159,-0.266366 0.1633159,-0.335712 0,-0.07 0.1296155,-0.261181 0.2151619,-0.427092 0.090731,-0.281272 0.099804,-0.34997 0.1859985,-0.461441 0.066752,-0.08684 0.08425,-0.239794 0.1101733,-0.325991 0.025923,-0.0862 0.051846,-0.184706 0.093971,-0.254051 0.043421,-0.0687 0.1244311,-0.241091 0.1503542,-0.283865 0.025275,-0.04277 0.02657,-0.147117 0.034996,-0.198316 0.00907,-0.05185 0.082953,-0.105639 0.094619,-0.154894 0.017499,-0.07259 0.022684,-0.05898 0.022684,-0.09527 v -0.0175 l 0.00194,-0.08684 c 0.015555,-0.03953 0.056383,-0.09527 0.029811,-0.151005 -0.029163,-0.06027 -0.1639638,0.02852 -0.3311679,0.08296 a 6.1146184,6.1147458 0 0 0 -0.338941,0.154887 H 9.250973 C 8.1855279,11.903272 5.03846,13.446378 5.03846,13.446378 l -2.9409793,1.490611 c 0,0 -1.22940442,0.624112 -1.39984901,0.830206 -0.082954,0.100454 -0.099156,0.254699 -0.0570309,0.505511 v 6.48e-4 c 0.0187942,0.110824 0.049254,0.242387 0.092027,0.395337 0.13804068,0.501623 0.24367742,0.754379 0.33700061,0.814003 0.2307159,0.149061 0.8081536,-0.246274 1.3726298,-0.468571 1.2637527,-0.493845 1.8833154,-0.66235 1.8833154,-0.66235 0,0 0.1451695,-0.02852 0.068049,0.02592 -0.2696006,0.191836 -1.2520872,0.651981 -1.7187036,0.911218 -0.6001205,0.333118 -2.38687221,1.297479 -2.47565892,1.408951 -0.0887867,0.110175 -0.22034661,0.187947 -0.19766387,0.410242 0,0 0.05184625,0.423852 0.29163522,0.931308 0.14646568,0.307844 0.38884695,0.610502 0.57678965,0.670127 0.18859072,0.06027 0.24886192,-0.0862 0.54179332,-0.206742 0.090731,-0.03759 4.504144,-2.139998 4.504144,-2.139998 0,0 1.2099621,-0.525603 1.3901279,-0.594949 z m 9.7905182,-1.493852 h -0.237197 l 0.0052,0.09009 z M 13.90806,17.30058 c 0.0065,-0.05963 -0.02333,-0.08425 -0.0162,-0.129618 0.02074,-0.11212 -0.02333,-0.116656 -0.04342,-0.161375 -0.02787,-0.06157 0.0019,-0.06481 -0.02139,-0.137396 -0.03241,-0.102397 -0.119246,-0.395336 -0.156834,-0.489957 a 2.5430592,2.5431121 0 0 1 -0.04148,-0.109528 15.122907,15.123222 0 0 0 -0.05509,-0.149061 c -0.02204,-0.05833 -0.01296,-0.07713 -0.02722,-0.123137 -0.03694,-0.116657 -0.128967,-0.233313 -0.149058,-0.280624 -0.02074,-0.04796 -0.04018,-0.130914 -0.05379,-0.151005 -0.01361,-0.02139 -0.05833,-0.07388 -0.06546,-0.101103 a 0.21127351,0.21127791 0 0 0 -0.04407,-0.08879 c -0.02074,-0.02074 -0.09333,-0.06222 -0.09333,-0.110176 0,-0.04796 0.0175,-0.03889 -0.0097,-0.08685 -0.02787,-0.04796 -0.08296,-0.09657 -0.103692,-0.143229 a 1.3888317,1.3888606 0 0 0 -0.261176,-0.34608 c -0.04083,-0.035 -0.121191,-0.06092 -0.135448,-0.10888 -0.01361,-0.04731 -0.102397,-0.116657 -0.123135,-0.137395 -0.02009,-0.02074 -0.04861,-0.02592 -0.06287,-0.05185 -0.01361,-0.02463 -0.02592,-0.06351 -0.05444,-0.07064 -0.04666,-0.01231 -0.05703,-0.03759 -0.05703,-0.03759 0,0 -0.04537,-0.04213 -0.07972,-0.09074 a 0.3635719,0.36357948 0 0 0 -0.144522,-0.112767 c -0.04083,-0.01361 -0.035,-0.01815 -0.07324,-0.06157 -0.02333,-0.02592 -0.01685,-0.03111 -0.0674,-0.02333 -0.04796,0.0084 -0.146465,0.34997 -0.187943,0.397929 a 0.39208735,0.39209552 0 0 0 -0.08749,0.184058 c -0.0065,0.06222 -0.259231,0.601429 -0.314318,0.683737 -0.05509,0.08231 -0.07388,0.136747 -0.11471,0.246274 -0.04083,0.110176 -0.0337,0.127027 -0.06805,0.174985 a 0.97989434,0.97991474 0 0 0 -0.121169,0.221009 l -0.131559,0.316269 -0.03046,0.05055 v 6.48e-4 c -0.03565,0.05833 -0.09851,0.165264 -0.173684,0.293587 -0.116655,0.198964 -0.110174,0.267013 -0.151003,0.301362 -0.04083,0.03435 -0.04731,0.123138 -0.08879,0.191835 -0.04083,0.0687 -0.0687,0.135452 -0.116655,0.203501 -0.04796,0.0687 -0.09462,0.203501 -0.141929,0.28516 0,0 -0.05638,0.181466 -0.09786,0.221647 a 0.65974368,0.65975742 0 0 0 -0.116655,0.213223 c -0.01944,0.06611 -0.068048,0.155541 -0.1023961,0.196372 -0.034348,0.04083 -0.046013,0.08166 -0.1011001,0.177577 -0.054439,0.09592 -0.1510023,0.285808 -0.2196986,0.381726 -0.068697,0.09592 -0.088138,0.219054 -0.1360965,0.287753 -0.047958,0.0687 -0.026571,0.0862 -0.075177,0.127025 -0.047958,0.04148 -0.032403,0.05315 -0.097212,0.05963 -0.069993,0.0065 -0.099156,0.0337 -0.092027,-0.02852 0.00648,-0.06092 0.011018,-0.09268 -0.023331,-0.09268 -0.034348,0 -0.027219,-0.0097 -0.068696,0.03759 -0.040829,0.04796 -0.047958,0.02917 -0.1011003,0.04926 -0.053143,0.02009 0.00648,0.01944 -0.082953,0.04018 -0.088786,0.02074 -0.057031,0.0026 -0.1049887,0.0026 -0.047958,0 -0.038236,0.03046 -0.099804,0.04407 -0.061568,0.01296 -0.1043404,0.02139 -0.1043404,-0.01944 0,-0.04213 0.023332,-0.0052 0.00972,-0.05963 -0.012962,-0.05444 0.00324,-0.06546 -0.037588,-0.05185 -0.040829,0.01296 -0.069344,0.02722 -0.097212,-0.0071 -0.027218,-0.03435 -0.015554,-0.04018 -0.057031,-0.04731 -0.040829,-0.0065 -0.078417,0.0065 -0.1062848,-0.01491 -0.027218,-0.02074 -0.047958,-0.05638 -0.095916,-0.07 -0.048606,-0.01296 -0.093971,0.0039 -0.149058,0.03046 -0.053791,0.02787 -0.017499,0.04861 -0.058976,0.04861 -0.040829,0 -0.06092,0.03241 -0.075176,-0.01491 -0.01361,-0.04861 0,-0.107584 -0.034348,-0.127674 -0.034348,-0.02074 -0.058976,-0.0052 -0.1140618,-0.0052 -0.054439,0 -0.022035,-0.03176 -0.042125,-0.07259 -0.021388,-0.04148 -0.0337,0.0032 -0.088786,-0.03824 -0.054439,-0.04148 -0.019443,-0.04342 -0.053791,-0.06416 -0.034348,-0.01944 -0.066753,-0.0045 -0.1075809,-0.0013 a 0.12313487,0.12313743 0 0 1 -0.1205425,-0.06481 c -0.036292,-0.06351 -0.040181,-0.213871 -0.040181,-0.240442 0,-0.02787 -0.012962,-0.03694 -0.054439,-0.03046 -0.040829,0.0071 -0.2663602,0.134803 -0.3013564,0.148412 -0.034348,0.01296 -0.9798943,0.572913 -1.0485907,0.63513 -0.068696,0.06092 -0.1069329,0.103047 -0.1205425,0.184706 a 2.3803914,2.380441 0 0 0 -0.00648,0.484774 c 0.02398,0.211278 0.1296156,0.591059 0.1983119,0.719381 0.068697,0.128323 0.2093293,0.36034 0.3538508,0.471163 0.077769,0.05898 0.1302637,0.08814 0.1918311,0.08814 0.061568,0 0.4588394,-0.230721 0.6552072,-0.320158 0.1970158,-0.08944 1.101733,-0.561247 1.2183871,-0.615687 0.1166541,-0.05444 2.0213572,-1.007135 2.1101432,-1.055094 0.08879,-0.04796 1.840542,-0.873628 1.927384,-0.921586 0.08749,-0.04796 1.403089,-0.676607 1.43031,-0.690217 0.02787,-0.01426 0.07064,-0.03241 0.05574,-0.07777 -0.0162,-0.05185 -0.05574,-0.08425 -0.04926,-0.165912 z"
+      stroke="none"
+      fill="currentColor"
+    />
+  </IconWrapper>
+)
+
+// NarrowIcon - Looks like two arrow pointing inwards
+export const NarrowIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M1.5 12 h 7 M 15.5 12 h 7 M 18 8 l -4 4 l 4 4 M 6 8 l 4 4 l -4 4" />
+  </IconWrapper>
+)
+
+export const NewMsetIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
+  </IconWrapper>
+)
+
+export const NewsletterIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
+  </IconWrapper>
+)
+
+export const NoteIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+  </IconWrapper>
+)
+
+export const OpackIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
+  </IconWrapper>
+)
+export const OptionPackIcon = OpackIcon
+
+export const OpenSourceIcon = (props) => (
+  <IconWrapper {...props}>
+    <path
+      d="m 12.000078,12.599774 m 1.493301,3.88999 a 4.1666775,4.1666475 0 1 0 -2.9866,0 l -2.8066682,7.313237 a 12,11.999914 0 1 1 8.5997792,0 z"
+      stroke="none"
+      fill="currentColor"
+    />
+  </IconWrapper>
+)
+
+export const PageMarginIcon = (props) => (
+  <IconWrapper {...props}>
+    <path
+      d="M 4.5 2.5 v 19.2 h 15 v -13.3 h-3 v 10.3 h-9 v-13.2 h 6 v-3 z"
+      strokeWidth={0.1}
+      stroke="none"
+      fill="currentColor"
+      fillOpacity="0.666"
+    />
+    <path d={page} />
+  </IconWrapper>
+)
+
+export const PageOrientationIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d={page} transform="scale(-1 1) translate(-21 0)" />
+    <path d="M 16.5 7.75 h 5 v 14 h-5" />
+  </IconWrapper>
+)
+
+export const PageSizeIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d={page} />
+    <path d={page} transform="scale(0.666) translate(3, 11)" />
+  </IconWrapper>
+)
+
+export const PatternIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+  </IconWrapper>
+)
+
+export const NewPatternIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+  </IconWrapper>
+)
+
+export const PluginIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z" />
+  </IconWrapper>
+)
+
+
+export const PrintIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+  </IconWrapper>
+)
+
+export const PrivacyIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
+  </IconWrapper>
+)
+
+export const RedditIcon = (props) => (
+  <IconWrapper {...props} stroke={0} fill>
+    <path d="M 11.710829,0.00384705 C 5.0683862,0.16990815 -0.16221405,5.6505729 0.00384705,12.293016 0.16990814,18.686369 5.3178021,23.833614 11.628124,24.082706 18.270567,24.248767 23.833939,19.018167 24,12.375723 V 11.710829 C 23.833939,5.0683862 18.353273,-0.16221404 11.710829,0.00384705 Z m 5.187788,5.10021625 c 0.15698,0.00649 0.313636,0.048326 0.458939,0.1313569 0.581214,0.3321223 0.912687,1.0793971 0.580565,1.660611 C 17.605998,7.4772452 16.858724,7.808718 16.27751,7.4765965 15.862357,7.3105352 15.614238,6.8947339 15.614238,6.3965506 L 13.038995,5.8159854 12.208689,9.55236 c 1.826672,0.08303 3.48858,0.664893 4.651007,1.495199 0.664245,-0.664245 1.826673,-0.664245 2.490917,0 0.332122,0.332121 0.49786,0.747274 0.49786,1.245457 0.249091,0.747275 -0.249092,1.327193 -0.830306,1.576284 v 0.49948 c 0,2.740009 -3.155161,4.897506 -7.057597,4.897506 -3.9024357,0 -7.0575963,-2.157497 -7.0575963,-4.897506 V 13.8693 C 3.9896377,13.454147 3.6578398,12.458754 3.989962,11.545418 c 0.2490916,-0.664245 0.9120387,-1.08037 1.5762832,-0.99734 0.4981831,0 0.9133359,0.167358 1.2454581,0.499481 C 8.2232228,10.134222 9.8848065,9.55236 11.545418,9.55236 l 0.913011,-4.1515273 c 0,-0.083031 0.08271,-0.1654124 0.08271,-0.1654125 0.08303,-0.08303 0.166711,-0.084328 0.249741,-0.084328 l 2.906069,0.664893 C 15.946037,5.3800751 16.427678,5.084603 16.898617,5.1040633 Z M 9.3026198,12.293016 c -0.6642443,0 -1.2454583,0.581214 -1.2454583,1.245458 0,0.664245 0.498183,1.245459 1.2454583,1.245459 0.6642442,0 1.2454582,-0.581214 1.2454582,-1.245459 0,-0.664244 -0.581214,-1.245458 -1.2454582,-1.245458 z m 5.4813132,0 c -0.664245,0 -1.245459,0.581214 -1.245459,1.245458 0,0.664245 0.581214,1.245459 1.245459,1.245459 0.664245,0 1.245458,-0.581214 1.245458,-1.245459 0,-0.664244 -0.581213,-1.245458 -1.245458,-1.245458 z m -5.3872557,3.943952 c -0.072653,0 -0.135249,0.04021 -0.1767645,0.123249 -0.1660605,0.16606 -0.1660605,0.332121 0,0.415152 0.8303052,0.830306 2.4905922,0.914633 2.9887762,0.914633 0.498183,0 2.077061,-0.08433 2.990396,-0.914633 -0.08303,-0.08303 -0.084,-0.249092 -0.167034,-0.415152 -0.166061,-0.166062 -0.332121,-0.166062 -0.415152,0 -0.498183,0.581213 -1.660611,0.747598 -2.490917,0.747598 -0.830305,0 -1.992733,-0.166385 -2.4909165,-0.747598 -0.08303,-0.08303 -0.1657365,-0.123249 -0.2383882,-0.123249 z" />
+  </IconWrapper>
+)
+
+export const ReloadIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+  </IconWrapper>
+)
+
+export const RssIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />
+  </IconWrapper>
+)
+
+export const ScaleIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 2 20 h 20" strokeWidth={props.stroke / 2 || 1} />
+    <path d="M 2 12 h 20" />
+    <path d="M 2 4 h 20" strokeWidth={props.stroke * 2 || 4} />
+  </IconWrapper>
+)
+
+export const SearchIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+  </IconWrapper>
+)
+
+export const ShieldIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+  </IconWrapper>
+)
+
+export const ShowcaseIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+    <path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+  </IconWrapper>
+)
+
+export const SigninIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+  </IconWrapper>
+)
+
+export const SignoutIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+  </IconWrapper>
+)
+
+export const StarIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+  </IconWrapper>
+)
+
+export const ThemeIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+  </IconWrapper>
+)
+
+export const TikTokIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 21.070629,5.6224629 A 5.7508474,5.7508474 0 0 1 16.547219,0.52913011 V 0 H 12.41376 v 16.404252 a 3.474745,3.474745 0 0 1 -6.2403831,2.091334 l -0.0024,-0.0012 0.0024,0.0012 A 3.4735455,3.4735455 0 0 1 9.9924767,13.084289 V 8.8848362 A 7.5938063,7.5938063 0 0 0 3.5205237,21.713559 7.5950059,7.5950059 0 0 0 16.547219,16.405452 V 8.0233494 a 9.8171151,9.8171151 0 0 0 5.72685,1.8309665 V 5.7472464 A 5.7964413,5.7964413 0 0 1 21.070637,5.6225887 Z" />
+  </IconWrapper>
+)
+
+export const TutorialIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 14l9-5-9-5-9 5 9 5z" />
+    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
+    <path d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
+  </IconWrapper>
+)
+
+export const TrophyIcon = (props) => (
+  <IconWrapper {...props} stroke={props.stroke || 2}>
+    <path d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 002.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 012.916.52 6.003 6.003 0 01-5.395 4.972m0 0a6.726 6.726 0 01-2.749 1.35m0 0a6.772 6.772 0 01-3.044 0" />
+  </IconWrapper>
+)
+
+export const TwitchIcon = (props) => (
+  <IconWrapper {...props} stroke={0} fill>
+    <path d="M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z" />
+  </IconWrapper>
+)
+
+export const TwitterIcon = (props) => (
+  <IconWrapper {...props} stroke={0} fill>
+    <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+  </IconWrapper>
+)
+
+
+export const UserIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </IconWrapper>
+)
+
+export const VersionIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+  </IconWrapper>
+)
+
+// WideIcon - Looks like two arrow pointing outwards
+export const WideIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3 12 h 7 M 14 12 h 7 M 5.5 8 l -4 4 l 4 4 M 18.5 8 l 4 4 l -4 4" />
+  </IconWrapper>
+)
+
+export const XrayIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
+  </IconWrapper>
+)
+
+export const YouTubeIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 18.723199,4.1090377 H 5.2768074 C 2.638649,4.1090377 0.5,6.2476867 0.5,8.8858457 v 6.7217683 c 0,2.638165 2.138649,4.776807 4.7768074,4.776807 H 18.723199 c 2.638159,0 4.776801,-2.138642 4.776801,-4.776807 V 8.8858457 c 0,-2.638159 -2.138642,-4.776808 -4.776801,-4.776808 z M 15.492674,12.57377 9.2033594,15.573394 C 9.0357741,15.653314 8.8421952,15.531134 8.8421952,15.345486 V 9.1587477 c 0,-0.188291 0.1986681,-0.310321 0.3666026,-0.22521 l 6.2893152,3.1871143 c 0.186996,0.09475 0.18375,0.36291 -0.0054,0.453118 z" />
+  </IconWrapper>
+)
+
+export const ZoomInIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6" />
+  </IconWrapper>
+)
+
+export const ZoomOutIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6" />
+  </IconWrapper>
+)
+*/
diff --git a/packages/react-components/src/editor/swizzle/components/index.mjs b/packages/react-components/src/editor/swizzle/components/index.mjs
new file mode 100644
index 00000000000..9bf1262b860
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/index.mjs
@@ -0,0 +1,453 @@
+/*************************************************************************
+ *                                                                       *
+ * FreeSewing's pattern editor allows swizzling components               *
+ *                                                                       *
+ * To 'swizzle' means to replace the default implementation of a         *
+ * component with a custom one. It allows one to customize               *
+ * the pattern editor.                                                   *
+ *                                                                       *
+ * This file holds the 'swizzleComponents' method that will return       *
+ * the various components that can be swizzled, or their default         *
+ * implementation.                                                       *
+ *                                                                       *
+ * To use a custom version, simply pas it as a prop into the editor      *
+ * under the 'components' key. So to pass a custom 'TemporaryLoader'     *
+ * component, you do:                                                    *
+ *                                                                       *
+ * <PatternEditor compnents={{ TemporaryLoader: MyTemporaryLoader }} />  *
+ *                                                                       *
+ *************************************************************************/
+
+/*
+ * Import of components that can be swizzled
+ */
+import { Link, AnchorLink, PageLink, WebLink, CardLink } from './link.mjs'
+// Accordion
+import { BaseAccordion, SubAccordion, Accordion } from './accordion.mjs'
+// Auth wrapper
+import {
+  AuthWrapper,
+  AuthMessageWrapper,
+  ContactSupport,
+  AuthRequired,
+  AccountInactive,
+  AccountDisabled,
+  AccountProhibited,
+  AccountStatusUnknown,
+  RoleLacking,
+  ConsentLacking,
+} from './auth-wrapper.mjs'
+// Ux
+import { Ux } from './ux.mjs'
+// Popout
+import { Popout } from './popout.mjs'
+// Loader
+import { TemporaryLoader } from './loaders.mjs'
+// Measurements Sets
+import { UserSetPicker, BookmarkedSetPicker, CuratedSetPicker } from './sets.mjs'
+// Curated Measurements Sets
+import { CuratedMeasurementsSetLineup } from './curated-sets.mjs'
+import { MeasurementsSetCard } from './measurements-set-card.mjs'
+// Icons
+import {
+  ApplyIcon,
+  BackIcon,
+  BeakerIcon,
+  BookmarkIcon,
+  BoolNoIcon,
+  BoolYesIcon,
+  CircleIcon,
+  CloseIcon,
+  CuratedMeasurementsSetIcon,
+  DesignIcon,
+  DetailIcon,
+  DocsIcon,
+  DownIcon,
+  EditIcon,
+  ExpandIcon,
+  ExportIcon,
+  FailureIcon,
+  FlagIcon,
+  FlagNoteIcon,
+  FlagInfoIcon,
+  FlagTipIcon,
+  FlagWarningIcon,
+  FlagErrorIcon,
+  FlagFixmeIcon,
+  FlagExpandIcon,
+  FlagOtionsIcon,
+  GaugeIcon,
+  GroupIcon,
+  IncludeIcon,
+  HelpIcon,
+  KioskIcon,
+  LeftIcon,
+  ListIcon,
+  LockIcon,
+  MarginIcon,
+  MeasurementsIcon,
+  MeasurementsSetIcon,
+  MenuIcon,
+  NoIcon,
+  OkIcon,
+  OptionsIcon,
+  PaperlessIcon,
+  PlusIcon,
+  PrintIcon,
+  ResetAllIcon,
+  ResetIcon,
+  RightIcon,
+  RocketIcon,
+  RotateIcon,
+  SaIcon,
+  SaveIcon,
+  SaveAsIcon,
+  ScaleIcon,
+  SettingsIcon,
+  SpinnerIcon,
+  SuccessIcon,
+  TipIcon,
+  TrashIcon,
+  UiIcon,
+  UndoIcon,
+  UnitsIcon,
+  UpIcon,
+  UploadIcon,
+  UxIcon,
+  XrayIcon,
+  ViewDraftIcon,
+  ViewMeasurementsIcon,
+  ViewTestIcon,
+  ViewTimingIcon,
+  ViewPrintLayoutIcon,
+  ViewSaveIcon,
+  ViewExportIcon,
+  ViewEditSettingsIcon,
+  ViewLogsIcon,
+  ViewInspectIcon,
+  ViewDocsIcon,
+  ViewDesignsIcon,
+  ViewViewPickerIcon,
+  ViewUndosIcon,
+} from './icons.mjs'
+// Measurements Editor
+import { MeasurementsEditor } from './measurements-editor.mjs'
+// Zoomable pattern
+import { ZoomablePattern, ZoomContextProvider } from './zoomable-pattern.mjs'
+import { PatternLayout } from './pattern-layout.mjs'
+// inputs
+import {
+  FormControl,
+  ButtonFrame,
+  NumberInput,
+  StringInput,
+  ListInput,
+  MarkdownInput,
+  MeasurementInput,
+  ToggleInput,
+} from './inputs.mjs'
+// Views
+import { DesignsView } from './designs-view.mjs'
+import { DraftView } from './draft-view.mjs'
+import { ErrorView } from './error-view.mjs'
+import { MeasurementsView } from './measurements-view.mjs'
+import { SaveView } from './save-view.mjs'
+import { ViewPicker } from './view-picker.mjs'
+import { UndoStep, UndoStepTimeAgo, UndosView } from './undos-view.mjs'
+// Pattern
+import { Pattern } from '@freesewing/react-components/pattern'
+// Menus
+import { DraftMenu } from './menus/draft-menu.mjs'
+import { CoreSettingsMenu, CoreSetting } from './menus/core-settings-menu.mjs'
+import { DesignOptionsMenu, DesignOption } from './menus/design-options-menu.mjs'
+import { UiPreferencesMenu, UiPreference } from './menus/ui-preferences-menu.mjs'
+import { MenuItem, MenuItemGroup, MenuItemTitle } from './menus/containers.mjs'
+import {
+  MenuBoolInput,
+  MenuConstantInput,
+  MenuDegInput,
+  MenuEditOption,
+  MenuListInput,
+  MenuListToggle,
+  MenuMmInput,
+  //MenuNumberInput,
+  MenuUxSettingInput,
+  MenuOnlySettingInput,
+  MenuPctInput,
+  MenuSliderInput,
+} from './menus/shared-inputs.mjs'
+import {
+  MenuBoolValue,
+  MenuConstantOptionValue,
+  MenuCountOptionValue,
+  MenuDegOptionValue,
+  MenuHighlightValue,
+  MenuListOptionValue,
+  MenuListValue,
+  MenuMmOptionValue,
+  MenuMmValue,
+  MenuOnlySettingValue,
+  MenuPctOptionValue,
+  MenuScaleSettingValue,
+  MenuShowValue,
+} from './menus/shared-values.mjs'
+import {
+  HeaderMenu,
+  HeaderMenuAllViews,
+  HeaderMenuDraftView,
+  HeaderMenuButton,
+  HeaderMenuDropdown,
+  HeaderMenuDraftViewDesignOptions,
+  HeaderMenuDraftViewCoreSettings,
+  HeaderMenuDraftViewUiPreferences,
+  HeaderMenuDraftViewFlags,
+  HeaderMenuDraftViewIcons,
+  HeaderMenuIcon,
+  HeaderMenuIconSpacer,
+  HeaderMenuSaveIcons,
+  HeaderMenuUndoIcons,
+  HeaderMenuViewMenu,
+} from './header-menu.mjs'
+// Flags
+import { Flag, FlagTypeIcon, FlagsAccordionTitle, FlagsAccordionEntries } from './flags.mjs'
+// View Menu
+import {
+  AsideViewMenu,
+  AsideViewMenuIcons,
+  AsideViewMenuButton,
+  AsideViewMenuSpacer,
+  ViewTypeIcon,
+} from './aside-view-menu.mjs'
+import { Null } from './null.mjs'
+import { LargeScreenOnly } from './large-screen-only.mjs'
+import { Tooltip } from './tooltip.mjs'
+import { LoadingStatus } from './loading-status.mjs'
+import { Spinner, Loading } from './spinner.mjs'
+import { Tab, Tabs } from './tabs.mjs'
+import { Markdown } from './markdown.mjs'
+import { HtmlSpan } from './html-span.mjs'
+/**
+ * This object holds all components that can be swizzled
+ */
+const defaultComponents = {
+  Accordion,
+  AuthWrapper,
+  AuthMessageWrapper,
+  BackIcon,
+  ContactSupport,
+  AuthRequired,
+  AccountInactive,
+  AccountDisabled,
+  AccountProhibited,
+  AccountStatusUnknown,
+  AnchorLink,
+  AsideViewMenu,
+  AsideViewMenuIcons,
+  AsideViewMenuButton,
+  AsideViewMenuSpacer,
+  RoleLacking,
+  ConsentLacking,
+  BaseAccordion,
+  BookmarkedSetPicker,
+  ButtonFrame,
+  CardLink,
+  CircleIcon,
+  CoreSetting,
+  CoreSettingsMenu,
+  CuratedMeasurementsSetIcon,
+  CuratedMeasurementsSetLineup,
+  CuratedSetPicker,
+  DesignOption,
+  DesignOptionsMenu,
+  DesignsView,
+  DraftMenu,
+  DraftView,
+  ErrorView,
+  SaveView,
+  Flag,
+  FlagsAccordionTitle,
+  FlagsAccordionEntries,
+  FlagTypeIcon,
+  FormControl,
+  HeaderMenu,
+  HeaderMenuAllViews,
+  HeaderMenuDraftView,
+  HeaderMenuDraftViewDesignOptions,
+  HeaderMenuDraftViewCoreSettings,
+  HeaderMenuDraftViewUiPreferences,
+  HeaderMenuDraftViewFlags,
+  HeaderMenuDraftViewIcons,
+  HeaderMenuButton,
+  HeaderMenuDropdown,
+  HeaderMenuIcon,
+  HeaderMenuIconSpacer,
+  HeaderMenuSaveIcons,
+  HeaderMenuUndoIcons,
+  HtmlSpan,
+  LargeScreenOnly,
+  Link,
+  ListInput,
+  Loading,
+  LoadingStatus,
+  Markdown,
+  MarkdownInput,
+  MeasurementInput,
+  MeasurementsSetCard,
+  MeasurementsView,
+  MeasurementsEditor,
+  MenuIcon,
+  NumberInput,
+  Null,
+  PageLink,
+  Pattern,
+  PatternLayout,
+  Popout,
+  StringInput,
+  SubAccordion,
+  Spinner,
+  SpinnerIcon,
+  Tab,
+  Tabs,
+  TemporaryLoader,
+  ToggleInput,
+  Tooltip,
+  UiPreferencesMenu,
+  UiPreference,
+  UndoStep,
+  UndoStepTimeAgo,
+  UndosView,
+  UserSetPicker,
+  Ux,
+  HeaderMenuViewMenu,
+  ViewPicker,
+  ViewTypeIcon,
+  WebLink,
+  ZoomablePattern,
+  ZoomContextProvider,
+  // icons
+  ApplyIcon,
+  BeakerIcon,
+  BookmarkIcon,
+  BoolNoIcon,
+  BoolYesIcon,
+  CloseIcon,
+  DesignIcon,
+  DetailIcon,
+  DocsIcon,
+  DownIcon,
+  EditIcon,
+  ExpandIcon,
+  ExportIcon,
+  FailureIcon,
+  FlagIcon,
+  FlagNoteIcon,
+  FlagInfoIcon,
+  FlagTipIcon,
+  FlagWarningIcon,
+  FlagErrorIcon,
+  FlagFixmeIcon,
+  FlagExpandIcon,
+  FlagOtionsIcon,
+  GaugeIcon,
+  GroupIcon,
+  HelpIcon,
+  IncludeIcon,
+  KioskIcon,
+  LeftIcon,
+  ListIcon,
+  LockIcon,
+  MarginIcon,
+  MeasurementsIcon,
+  MeasurementsSetIcon,
+  NoIcon,
+  OkIcon,
+  OptionsIcon,
+  PaperlessIcon,
+  PlusIcon,
+  PrintIcon,
+  ResetAllIcon,
+  ResetIcon,
+  RightIcon,
+  RocketIcon,
+  RotateIcon,
+  SaIcon,
+  SaveIcon,
+  SaveAsIcon,
+  ScaleIcon,
+  SettingsIcon,
+  SuccessIcon,
+  TipIcon,
+  TrashIcon,
+  UiIcon,
+  UndoIcon,
+  UnitsIcon,
+  UpIcon,
+  UploadIcon,
+  UxIcon,
+  XrayIcon,
+  ViewDraftIcon,
+  ViewMeasurementsIcon,
+  ViewTestIcon,
+  ViewTimingIcon,
+  ViewPrintLayoutIcon,
+  ViewSaveIcon,
+  ViewExportIcon,
+  ViewEditSettingsIcon,
+  ViewLogsIcon,
+  ViewInspectIcon,
+  ViewDocsIcon,
+  ViewDesignsIcon,
+  ViewViewPickerIcon,
+  ViewUndosIcon,
+  // menus
+  MenuItem,
+  MenuItemGroup,
+  MenuItemTitle,
+  MenuBoolInput,
+  MenuConstantInput,
+  MenuDegInput,
+  MenuEditOption,
+  MenuListInput,
+  MenuListToggle,
+  MenuMmInput,
+  //MenuNumberInput,
+  MenuUxSettingInput,
+  MenuOnlySettingInput,
+  MenuPctInput,
+  MenuSliderInput,
+  MenuBoolValue,
+  MenuConstantOptionValue,
+  MenuCountOptionValue,
+  MenuDegOptionValue,
+  MenuHighlightValue,
+  MenuListOptionValue,
+  MenuListValue,
+  MenuMmOptionValue,
+  MenuMmValue,
+  MenuOnlySettingValue,
+  MenuPctOptionValue,
+  MenuScaleSettingValue,
+  MenuShowValue,
+}
+
+/*
+ * This method returns a component that can be swizzled
+ * So either the passed-in component, or the default one
+ */
+export const swizzleComponents = (components = {}, Swizzled) => {
+  /*
+   * We need to return all resulting components, swizzled or not
+   * So we create this object so we can pass that down
+   */
+  const all = {}
+  for (let [name, Component] of Object.entries(defaultComponents)) {
+    all[name] = components[name]
+      ? (props) => components[name]({ Swizzled, ...props })
+      : (props) => <Component {...props} Swizzled={Swizzled} />
+  }
+
+  /*
+   * Return all components
+   */
+  return all
+}
diff --git a/packages/react-components/src/editor/swizzle/components/inputs.mjs b/packages/react-components/src/editor/swizzle/components/inputs.mjs
new file mode 100644
index 00000000000..9fa1b579575
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/inputs.mjs
@@ -0,0 +1,349 @@
+// Hooks
+import { useState } from 'react'
+
+/*
+ * Helper component to wrap a form control with a label
+ */
+export const FormControl = ({
+  label, // the (top-left) label
+  children, // Children to go inside the form control
+  docs = false, // Optional top-right label
+  labelBL = false, // Optional bottom-left label
+  labelBR = false, // Optional bottom-right label
+  forId = false, // ID of the for element we are wrapping
+  Swizzled, // Object holding swizzled code
+}) => {
+  if (labelBR && !labelBL) labelBL = <span></span>
+
+  const topLabelChildren = (
+    <>
+      <span className="label-text text-lg font-bold mb-0 text-inherit">{label}</span>
+      {docs ? (
+        <span className="label-text-alt">
+          <button
+            className="btn btn-ghost btn-sm btn-circle hover:btn-secondary"
+            onClick={() =>
+              Swizzled.methods.setModal(
+                <Swizzled.components.ModalWrapper
+                  flex="col"
+                  justify="top lg:justify-center"
+                  slideFrom="right"
+                  keepOpenOnClick
+                >
+                  <div className="mdx max-w-prose">{docs}</div>
+                </Swizzled.components.ModalWrapper>
+              )
+            }
+          >
+            <Swizzled.components.DocsIcon />
+          </button>
+        </span>
+      ) : null}
+    </>
+  )
+  const bottomLabelChildren = (
+    <>
+      {labelBL ? <span className="label-text-alt">{labelBL}</span> : null}
+      {labelBR ? <span className="label-text-alt">{labelBR}</span> : null}
+    </>
+  )
+
+  return (
+    <div className="form-control w-full mt-2">
+      {forId ? (
+        <label className="label pb-0" htmlFor={forId}>
+          {topLabelChildren}
+        </label>
+      ) : (
+        <div className="label pb-0">{topLabelChildren}</div>
+      )}
+      {children}
+      {labelBL || labelBR ? (
+        forId ? (
+          <label className="label" htmlFor={forId}>
+            {bottomLabelChildren}
+          </label>
+        ) : (
+          <div className="label">{bottomLabelChildren}</div>
+        )
+      ) : null}
+    </div>
+  )
+}
+
+/*
+ * Helper method to wrap content in a button
+ */
+export const ButtonFrame = ({
+  children, // Children of the button
+  onClick, // onClick handler
+  active, // Whether or not to render the button as active/selected
+  accordion = false, // Set this to true to not set a background color when active
+  dense = false, // Use less padding
+}) => (
+  <button
+    className={`
+    btn btn-ghost btn-secondary
+    w-full ${dense ? 'mt-1 py-0 btn-sm' : 'mt-2 py-4 h-auto content-start'}
+    border-2 border-secondary text-left bg-opacity-20
+    ${accordion ? 'hover:bg-transparent' : 'hover:bg-secondary hover:bg-opacity-10'}
+    hover:border-secondary hover:border-solid hover:border-2
+    ${active ? 'border-solid' : 'border-dotted'}
+    ${active && !accordion ? 'bg-secondary' : 'bg-transparent'}
+    `}
+    onClick={onClick}
+  >
+    {children}
+  </button>
+)
+
+/*
+ * Input for integers
+ */
+export const NumberInput = ({
+  label, // Label to use
+  update, // onChange handler
+  valid, // Method that should return whether the value is valid or not
+  current, // The current value
+  original, // The original value
+  placeholder, // The placeholder text
+  docs = false, // Docs to load, if any
+  id = '', // An id to tie the input to the label
+  labelBL = false, // Bottom-Left label
+  labelBR = false, // Bottom-Right label
+  max = 0,
+  min = 220,
+  step = 1,
+  Swizzled, // Object holding swizzled code
+}) => (
+  <Swizzled.components.FormControl {...{ label, labelBL, labelBR, docs }} forId={id}>
+    <input
+      id={id}
+      type="number"
+      placeholder={placeholder}
+      value={current}
+      onChange={(evt) => update(evt.target.value)}
+      className={`input w-full input-bordered ${
+        current === original ? 'input-secondary' : valid(current) ? 'input-success' : 'input-error'
+      }`}
+      {...{ max, min, step }}
+    />
+  </Swizzled.components.FormControl>
+)
+
+/*
+ * Input for strings
+ */
+export const StringInput = ({
+  label, // Label to use
+  update, // onChange handler
+  valid, // Method that should return whether the value is valid or not
+  current, // The current value
+  original, // The original value
+  placeholder, // The placeholder text
+  docs = false, // Docs to load, if any
+  id = '', // An id to tie the input to the label
+  labelBL = false, // Bottom-Left label
+  labelBR = false, // Bottom-Right label
+  Swizzled, // Object holding swizzled code
+}) => (
+  <Swizzled.components.FormControl {...{ label, labelBL, labelBR, docs }} forId={id}>
+    <input
+      id={id}
+      type="text"
+      placeholder={placeholder}
+      value={current}
+      onChange={(evt) => update(evt.target.value)}
+      className={`input w-full input-bordered ${
+        current === original ? 'input-secondary' : valid(current) ? 'input-success' : 'input-error'
+      }`}
+    />
+  </Swizzled.components.FormControl>
+)
+
+/*
+ * Input for a list of things to pick from
+ */
+export const ListInput = ({
+  update, // the onChange handler
+  label, // The label
+  list, // The list of items to present { val, label, desc }
+  current, // The (value of the) current item
+  docs = false, // Docs to load, if any
+  Swizzled, // Object holding swizzled code
+}) => (
+  <Swizzled.components.FormControl label={label} docs={docs}>
+    {list.map((item, i) => (
+      <Swizzled.components.ButtonFrame
+        key={i}
+        active={item.val === current}
+        onClick={() => update(item.val)}
+      >
+        <div className="w-full flex flex-col gap-2">
+          <div className="w-full text-lg leading-5">{item.label}</div>
+          {item.desc ? (
+            <div className="w-full text-normal font-normal normal-case pt-1 leading-5">
+              {item.desc}
+            </div>
+          ) : null}
+        </div>
+      </Swizzled.components.ButtonFrame>
+    ))}
+  </Swizzled.components.FormControl>
+)
+
+/*
+ * Input for markdown content
+ */
+export const MarkdownInput = ({
+  label, // The label
+  current, // The current value (markdown)
+  update, // The onChange handler
+  placeholder, // The placeholder content
+  docs = false, // Docs to load, if any
+  id = '', // An id to tie the input to the label
+  labelBL = false, // Bottom-Left label
+  labelBR = false, // Bottom-Right label
+  Swizzled, // Swizzled code
+}) => (
+  <Swizzled.components.FormControl {...{ label, labelBL, labelBR, docs }} forId={id}>
+    <Swizzled.components.Tabs tabs={['edit', 'preview']}>
+      <Swizzled.components.Tab key="edit">
+        <div className="flex flex-row items-center mt-4">
+          <textarea
+            id={id}
+            rows="5"
+            className="textarea textarea-bordered textarea-lg w-full"
+            value={current}
+            placeholder={placeholder}
+            onChange={(evt) => update(evt.target.value)}
+          />
+        </div>
+      </Swizzled.components.Tab>
+      <Swizzled.components.Tab key="preview">
+        <div className="mdx mt-4 shadow p-2 px-4 rounded">
+          <Swizzled.components.Markdown>{current}</Swizzled.components.Markdown>
+        </div>
+      </Swizzled.components.Tab>
+    </Swizzled.components.Tabs>
+  </Swizzled.components.FormControl>
+)
+
+export const MeasurementInput = ({
+  imperial, // True for imperial, False for metric
+  m, // The measurement name
+  original, // The original value
+  update, // The onChange handler
+  placeholder, // The placeholder content
+  docs = false, // Docs to load, if any
+  id = '', // An id to tie the input to the label
+  Swizzled, // Swizzled code
+}) => {
+  const { t } = Swizzled.methods
+  const isDegree = Swizzled.methods.isDegreeMeasurement(m)
+  const units = imperial ? 'imperial' : 'metric'
+
+  const [localVal, setLocalVal] = useState(
+    typeof original === 'undefined'
+      ? original
+      : isDegree
+        ? Number(original)
+        : Swizzled.methods.measurementAsUnits(original, units)
+  )
+  const [validatedVal, setValidatedVal] = useState(
+    Swizzled.methods.measurementAsUnits(original, units)
+  )
+  const [valid, setValid] = useState(null)
+
+  // Update onChange
+  const localUpdate = (newVal) => {
+    setLocalVal(newVal)
+    const parsedVal = isDegree
+      ? Number(newVal)
+      : Swizzled.methods.parseDistanceInput(newVal, imperial)
+    if (parsedVal) {
+      update(m, isDegree ? parsedVal : Swizzled.methods.measurementAsMm(parsedVal, units))
+      setValid(true)
+      setValidatedVal(parsedVal)
+    } else setValid(false)
+  }
+
+  if (!m) return null
+
+  // Various visual indicators for validating the input
+  let inputClasses = 'input-secondary'
+  let bottomLeftLabel = null
+  if (valid === true) {
+    inputClasses = 'input-success'
+    const val = `${validatedVal}${isDegree ? '°' : imperial ? '"' : 'cm'}`
+    bottomLeftLabel = <span className="font-medium text-base text-success -mt-2 block">{val}</span>
+  } else if (valid === false) {
+    inputClasses = 'input-error'
+    bottomLeftLabel = (
+      <span className="font-medium text-error text-base -mt-2 block">¯\_(ツ)_/¯</span>
+    )
+  }
+
+  /*
+   * I'm on the fence here about using a text input rather than number
+   * Obviously, number is the more correct option, but when the user enter
+   * text, it won't fire an onChange event and thus they can enter text and it
+   * will not be marked as invalid input.
+   * See: https://github.com/facebook/react/issues/16554
+   */
+  return (
+    <Swizzled.components.FormControl
+      label={t(m) + (isDegree ? ' (°)' : '')}
+      docs={docs}
+      forId={id}
+      labelBL={bottomLeftLabel}
+    >
+      <input
+        id={id}
+        type="number"
+        placeholder={placeholder}
+        value={localVal}
+        onChange={(evt) => localUpdate(evt.target.value)}
+        className={`input w-full input-bordered ${inputClasses}`}
+      />
+    </Swizzled.components.FormControl>
+  )
+}
+
+/*
+ * Input for booleans
+ */
+export const ToggleInput = ({
+  label, // Label to use
+  update, // onChange handler
+  current, // The current value
+  disabled = false, // Allows rendering a disabled view
+  list = [true, false], // The values to chose between
+  labels = ['Yes', 'No'], // The labels for the values
+  on = true, // The value that should show the toggle in the 'on' state
+  id = '', // An id to tie the input to the label
+  labelTR = false, // Top-Right label
+  labelBL = false, // Bottom-Left label
+  labelBR = false, // Bottom-Right label
+  Swizzled, // Object holding swizzled code
+}) => (
+  <Swizzled.components.FormControl
+    {...{ labelBL, labelBR, labelTR }}
+    label={
+      label
+        ? `${label} (${current === on ? labels[0] : labels[1]})`
+        : `${current === on ? labels[0] : labels[1]}`
+    }
+    forId={id}
+  >
+    <input
+      id={id}
+      disabled={disabled}
+      type="checkbox"
+      value={current}
+      onChange={() => update(list.indexOf(current) === 0 ? list[1] : list[0])}
+      className="toggle my-3 toggle-primary"
+      checked={list.indexOf(current) === 0 ? true : false}
+    />
+  </Swizzled.components.FormControl>
+)
diff --git a/packages/react-components/src/editor/swizzle/components/large-screen-only.mjs b/packages/react-components/src/editor/swizzle/components/large-screen-only.mjs
new file mode 100644
index 00000000000..e10119cfc44
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/large-screen-only.mjs
@@ -0,0 +1 @@
+export const LargeScreenOnly = ({ children }) => <div className="hidden xl:block">{children}</div>
diff --git a/packages/react-components/src/editor/swizzle/components/link.mjs b/packages/react-components/src/editor/swizzle/components/link.mjs
new file mode 100644
index 00000000000..91e05f0d4d3
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/link.mjs
@@ -0,0 +1,48 @@
+import Link from 'next/link'
+
+const AnchorLink = ({ id, txt = false, children, Swizzled }) => (
+  <a href={`#${id}`} className={Swizzled.config.classes.link} title={txt ? txt : ''}>
+    {txt ? txt : children}
+  </a>
+)
+
+const PageLink = ({ href, txt = false, children, Swizzled }) => (
+  <Swizzled.components.Link
+    href={href}
+    className={Swizzled.config.classes.link}
+    title={txt ? txt : ''}
+  >
+    {children ? children : txt}
+  </Swizzled.components.Link>
+)
+
+const WebLink = ({ href, txt = false, children, Swizzled }) => (
+  <a href={href} className={Swizzled.config.classes.link} title={txt ? txt : ''}>
+    {children ? children : txt}
+  </a>
+)
+
+const CardLink = ({
+  bg = 'bg-base-200',
+  textColor = 'text-base-content',
+  href,
+  title,
+  text,
+  icon,
+  Swizzled,
+}) => (
+  <Swizzled.components.Link
+    href={href}
+    className={`px-8 ${bg} py-10 rounded-lg block ${textColor}
+    hover:bg-secondary hover:bg-opacity-10 shadow-lg
+    transition-color duration-300 grow`}
+  >
+    <h2 className="mb-4 text-inherit flex flex-row gap-4 justify-between items-center font-medium">
+      {title}
+      <span className="shrink-0">{icon}</span>
+    </h2>
+    <p className="font-medium text-inherit italic text-lg">{text}</p>
+  </Swizzled.components.Link>
+)
+
+export { Link, AnchorLink, PageLink, WebLink, CardLink }
diff --git a/packages/react-components/src/editor/swizzle/components/loaders.mjs b/packages/react-components/src/editor/swizzle/components/loaders.mjs
new file mode 100644
index 00000000000..774cdd91141
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/loaders.mjs
@@ -0,0 +1,6 @@
+/**
+ * A temporary loader 'one moment please' style
+ * Just a spinner in this case, but could also be branded.
+ */
+export const TemporaryLoader = ({ Swizzled = false }) =>
+  Swizzled ? <Swizzled.components.Spinner /> : <div className="text-center m-auto">...</div>
diff --git a/packages/react-components/src/editor/swizzle/components/loading-status.mjs b/packages/react-components/src/editor/swizzle/components/loading-status.mjs
new file mode 100644
index 00000000000..c0741fd69a7
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/loading-status.mjs
@@ -0,0 +1,57 @@
+import { useEffect } from 'react'
+
+export const LoadingStatus = ({ Swizzled, state, update }) => {
+  useEffect(() => {
+    if (typeof state._.loading === 'object') {
+      for (const conf of Object.values(state._.loading)) {
+        if (conf.fadeTimer)
+          window.setTimeout(function () {
+            update.fadeNotify(conf.id)
+          }, conf.fadeTimer)
+        if (conf.clearTimer)
+          window.setTimeout(function () {
+            update.clearNotify(conf.id)
+          }, conf.clearTimer)
+      }
+    }
+  }, [state._, update])
+
+  if (!state._.loading || Object.keys(state._.loading).length < 1) return null
+
+  return (
+    <div className="fixed bottom-0 md:buttom-28 left-0 w-full z-30 md:px-4 md:mx-auto mb-4">
+      <div className="flex flex-col gap-2">
+        {Object.entries(state._.loading).map(([id, config]) => {
+          const conf = {
+            ...Swizzled.config.loadingStatus.defaults,
+            ...config,
+          }
+          const Icon =
+            typeof conf.icon === 'undefined'
+              ? Swizzled.components.Spinner
+              : Swizzled.components[`${Swizzled.methods.capitalize(conf.icon)}Icon`] ||
+                Swizzled.components.Noop
+          return (
+            <div
+              key={id}
+              className={`w-full md:max-w-2xl m-auto bg-${
+                conf.color
+              } flex flex-row items-center gap-4 p-4 px-4 ${
+                conf.fading ? 'opacity-0' : 'opacity-100'
+              }
+              transition-opacity delay-[${
+                Swizzled.config.loadingStatus.timeout * 1000 - 400
+              }ms] duration-300
+              md:rounded-lg shadow text-secondary-content text-lg lg:text-xl font-medium md:bg-opacity-90`}
+            >
+              <span className="shrink-0">
+                <Icon />
+              </span>
+              {conf.msg}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/markdown.mjs b/packages/react-components/src/editor/swizzle/components/markdown.mjs
new file mode 100644
index 00000000000..6ff5cedafbf
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/markdown.mjs
@@ -0,0 +1,3 @@
+import Markdown from 'react-markdown'
+
+export { Markdown }
diff --git a/packages/react-components/src/editor/swizzle/components/measurements-editor.mjs b/packages/react-components/src/editor/swizzle/components/measurements-editor.mjs
new file mode 100644
index 00000000000..b65d0534d8c
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/measurements-editor.mjs
@@ -0,0 +1,57 @@
+/**
+ * This MeasurementsEditor component allows inline-editing of the measurements
+ *
+ * @param {object} props - The component's props
+ * @param {function} props.Design - The design constructor
+ * @param {object} props.state - The ViewWrapper state object
+ * @param {object} props.state.settings - The current settings
+ * @param {object} props.update - Helper object for updating the ViewWrapper state
+ * @param {object} props.Swizzled - An object holding swizzled code
+ * @return {function} MeasurementsEditor - React component
+ */
+export const MeasurementsEditor = ({ Design, update, state, Swizzled }) => {
+  /*
+   * Helper method to handle state updates for measurements
+   */
+  const onUpdate = (m, newVal) => {
+    update.settings(['measurements', m], newVal)
+  }
+
+  return (
+    <div className="max-w-2xl">
+      <h5>{Swizzled.methods.t('pe:requiredMeasurements')}</h5>
+      {Object.keys(Design.patternConfig.measurements).length === 0 ? (
+        <p>({Swizzled.methods.t('account:none')})</p>
+      ) : (
+        <div>
+          {Design.patternConfig.measurements.map((m) => (
+            <Swizzled.components.MeasurementInput
+              key={m}
+              m={m}
+              imperial={state.settings.units === 'imperial' ? true : false}
+              original={state.settings.measurements?.[m]}
+              update={(m, newVal) => onUpdate(m, newVal)}
+              id={`edit-${m}`}
+            />
+          ))}
+          <br />
+        </div>
+      )}
+      <h5>{Swizzled.methods.t('pe:optionalMeasurements')}</h5>
+      {Object.keys(Design.patternConfig.optionalMeasurements).length === 0 ? (
+        <p>({Swizzled.methods.t('account:none')})</p>
+      ) : (
+        Design.patternConfig.optionalMeasurements.map((m) => (
+          <Swizzled.components.MeasurementInput
+            key={m}
+            m={m}
+            imperial={state.settings.units === 'umperial' ? true : false}
+            original={state.settings.measurements?.[m]}
+            update={(m, newVal) => onUpdate(m, newVal)}
+            id={`edit-${m}`}
+          />
+        ))
+      )}
+    </div>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/measurements-set-card.mjs b/packages/react-components/src/editor/swizzle/components/measurements-set-card.mjs
new file mode 100644
index 00000000000..213f2b8da85
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/measurements-set-card.mjs
@@ -0,0 +1,94 @@
+const sizes = { lg: 96, md: 52, sm: 36 }
+
+export const MeasurementsSetCard = ({
+  set,
+  onClick = false,
+  href = false,
+  useA = false,
+  Design = false,
+  language = false,
+  size = 'lg',
+  Swizzled,
+}) => {
+  const s = sizes[size]
+  const { t, hasRequiredMeasurements } = Swizzled.methods
+  const { NoIcon, OkIcon } = Swizzled.components
+
+  const wrapperProps = {
+    className: `bg-base-300 aspect-square h-${s} w-${s} mb-2
+      mx-auto flex flex-col items-start text-center justify-between rounded-none md:rounded shadow`,
+    style: {
+      backgroundImage: `url(${Swizzled.methods.cloudImageUrl({ type: 'w500', id: set.img })})`,
+      backgroundSize: 'cover',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: '50%',
+    },
+  }
+  if (!set.img || set.img === 'default-avatar')
+    wrapperProps.style.backgroundPosition = 'bottom right'
+
+  let icon = <span></span>
+  let missingMeasies = ''
+  let linebreak = ''
+  const maxLength = 75
+  if (Design) {
+    const [hasMeasies, missing] = hasRequiredMeasurements(Design, set.measies)
+    const iconClasses = 'w-8 h-8 p-1 rounded-full -mt-2 -ml-2 shadow'
+    icon = hasMeasies ? (
+      <OkIcon className={`${iconClasses} bg-success text-success-content`} stroke={4} />
+    ) : (
+      <NoIcon className={`${iconClasses} bg-error text-error-content`} stroke={3} />
+    )
+    if (missing.length > 0) {
+      const translated = missing.map((m) => {
+        return t(m)
+      })
+      let missingString = translated.join(', ')
+      if (missingString.length > maxLength) {
+        const lastSpace = missingString.lastIndexOf(', ', maxLength)
+        missingString = missingString.substring(0, lastSpace) + ', ' + '...'
+      }
+      const measieClasses = 'font-normal text-xs'
+      missingMeasies = <span className={`${measieClasses}`}>{missingString}</span>
+      linebreak = <br />
+    }
+  }
+
+  const inner = (
+    <>
+      {icon}
+      <span className="bg-neutral text-neutral-content px-4 w-full bg-opacity-50 py-2 rounded rounded-t-none font-bold leading-5">
+        {language ? set[`name${Swizzled.methods.capitalize(language)}`] : set.name}
+        {linebreak}
+        {missingMeasies}
+      </span>
+    </>
+  )
+
+  // Is it a button with an onClick handler?
+  if (onClick)
+    return (
+      <button {...wrapperProps} onClick={() => onClick(set)}>
+        {inner}
+      </button>
+    )
+
+  // Returns a link to an internal page
+  if (href && !useA)
+    return (
+      <Swizzled.components.Link {...wrapperProps} href={href}>
+        {inner}
+      </Swizzled.components.Link>
+    )
+
+  // Returns a link to an external page
+  if (href && useA)
+    return (
+      <a {...wrapperProps} href={href}>
+        {inner}
+      </a>
+    )
+
+  // Returns a div
+  return <div {...wrapperProps}>{inner}</div>
+}
diff --git a/packages/react-components/src/editor/swizzle/components/measurements-view.mjs b/packages/react-components/src/editor/swizzle/components/measurements-view.mjs
new file mode 100644
index 00000000000..fd46ebae11a
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/measurements-view.mjs
@@ -0,0 +1,171 @@
+import { Fragment, useEffect } from 'react'
+import { horFlexClasses } from '../../utils.mjs'
+
+const iconClasses = { className: 'w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 shrink-0', stroke: 1.5 }
+
+/**
+ * The measurements view is loaded to update/set measurements
+ *
+ * It will be automatically loaded if we do not have all required measurements for a design.
+ *
+ * @param {Object} props - All the props
+ * @param {Object} props.Swizzled - An object with swizzled components, hooks, methods, and config
+ * @param {Function} props.Design - The design constructor
+ * @param {string} props.design - The design name
+ * @param {Object} props.state - The editor state object
+ * @param {Object} props.update - Helper object for updating the ViewWrapper state
+ * @param {Array} props.missingMeasurements - List of missing measurements for the current design
+ * @return {Function} MeasurementsView - React component
+ */
+export const MeasurementsView = ({ Design, missingMeasurements, update, Swizzled, state }) => {
+  // Swizzled components
+  const {
+    Accordion,
+    Popout,
+    MeasurementsEditor,
+    MeasurementsSetIcon,
+    UserSetPicker,
+    BookmarkIcon,
+    BookmarkedSetPicker,
+    CuratedMeasurementsSetIcon,
+    CuratedSetPicker,
+    EditIcon,
+  } = Swizzled.components
+  // Swizzled methods
+  const { t, designMeasurements, capitalize } = Swizzled.methods
+  // Swizzled config
+  const { config } = Swizzled
+  // Editor state
+  const { locale } = state
+
+  /*
+   * If there is no view set, completing measurements will switch to the view picker
+   * Which is a bit confusing. So in this case, set the view to measurements.
+   */
+  useEffect(() => {
+    if (!config.views.includes(state.view)) update.view('measurements')
+    if (state._.missingMeasurements && state._.missingMeasurements.length > 0)
+      update.notify({ msg: t('pe:missingMeasurementsNotify'), icon: 'tip' }, 'missingMeasurements')
+    else update.notifySuccess(t('pe:measurementsAreOk'))
+  }, [state.view, update])
+
+  const loadMeasurements = (set) => {
+    update.settings(['measurements'], designMeasurements(Design, set.measies))
+    update.settings(['units'], set.imperial ? 'imperial' : 'metric')
+    // Save the measurement set name to pattern settings
+    if (set[`name${capitalize(locale)}`])
+      // Curated measurement set
+      update.settings(['metadata'], { setName: set[`name${capitalize(locale)}`] })
+    else if (set.name)
+      // User measurement set
+      update.settings(['metadata'], { setName: set.name })
+  }
+
+  // Construct accordion items based on the editor configuration
+  const items = []
+  if (config.enableBackend)
+    items.push(
+      [
+        <Fragment key={1}>
+          <div className={horFlexClasses}>
+            <h5 id="ownsets">{t('pe:chooseFromOwnSets')}</h5>
+            <MeasurementsSetIcon {...iconClasses} />
+          </div>
+          <p className="text-left">{t('pe:chooseFromOwnSetsDesc')}</p>
+        </Fragment>,
+        <UserSetPicker
+          key={2}
+          size="md"
+          clickHandler={loadMeasurements}
+          missingClickHandler={loadMeasurements}
+          {...{ Swizzled, Design }}
+        />,
+        'ownSets',
+      ],
+      [
+        <Fragment key={1}>
+          <div className={horFlexClasses}>
+            <h5 id="bookmarkedsets">{t('pe:chooseFromBookmarkedSets')}</h5>
+            <BookmarkIcon {...iconClasses} />
+          </div>
+          <p className="text-left">{t('pe:chooseFromBookmarkedSetsDesc')}</p>
+        </Fragment>,
+        <BookmarkedSetPicker
+          key={2}
+          size="md"
+          clickHandler={loadMeasurements}
+          missingClickHandler={loadMeasurements}
+          {...{ Swizzled, Design }}
+        />,
+        'bmSets',
+      ],
+      [
+        <Fragment key={1}>
+          <div className={horFlexClasses}>
+            <h5 id="curatedsets">{t('pe:chooseFromCuratedSets')}</h5>
+            <CuratedMeasurementsSetIcon {...iconClasses} />
+          </div>
+          <p className="text-left">{t('pe:chooseFromCuratedSetsDesc')}</p>
+        </Fragment>,
+        <CuratedSetPicker
+          key={2}
+          clickHandler={loadMeasurements}
+          {...{ Swizzled, Design, locale }}
+        />,
+        'csets',
+      ]
+    )
+  // Manual editing is always an option
+  items.push([
+    <Fragment key={1}>
+      <div className={horFlexClasses}>
+        <h5 id="editmeasurements">{t('pe:editMeasurements')}</h5>
+        <EditIcon {...iconClasses} />
+      </div>
+      <p className="text-left">{t('pe:editMeasurementsDesc')}</p>
+    </Fragment>,
+    <MeasurementsEditor key={2} {...{ Design, Swizzled, update, state }} />,
+    'edit',
+  ])
+
+  return (
+    <>
+      <Swizzled.components.HeaderMenu state={state} {...{ Swizzled, update }} />
+      <div className="max-w-7xl mt-8 mx-auto px-4">
+        <h2>{t('pe:measurements')}</h2>
+        {missingMeasurements && missingMeasurements.length > 0 ? (
+          <Popout note dense noP>
+            <h5>{t('pe:missingMeasurementsInfo')}:</h5>
+            <ol className="list list-inside flex flex-row flex-wrap">
+              {missingMeasurements.map((m, i) => (
+                <li key={i}>
+                  {i > 0 ? <span className="pr-2">,</span> : null}
+                  <span className="font-medium">{t(`measurements:${m}`)}</span>
+                </li>
+              ))}
+            </ol>
+            <p className="text-sm m-0 p-0 pt-2">
+              ({missingMeasurements.length} {t('pe:missingMeasurements')})
+            </p>
+          </Popout>
+        ) : (
+          <Popout tip dense noP>
+            <h5>{t('pe:measurementsAreOk')}</h5>
+            <div className="flex flex-row flex-wrap gap-2 mt-2">
+              <button className="btn btn-primary lg:btn-lg" onClick={() => update.view('draft')}>
+                {t('pe:view.draft.t')}
+              </button>
+              <button
+                className="btn btn-primary btn-outline lg:btn-lg"
+                onClick={() => update.view('picker')}
+              >
+                {t('pe:chooseAnotherActivity')}
+              </button>
+            </div>
+          </Popout>
+        )}
+        {items.length > 1 ? <Accordion items={items} /> : items}
+      </div>
+    </>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/menus/containers.mjs b/packages/react-components/src/editor/swizzle/components/menus/containers.mjs
new file mode 100644
index 00000000000..9ee30172276
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/menus/containers.mjs
@@ -0,0 +1,272 @@
+import { useState, useMemo } from 'react'
+
+/** @type {String} class to apply to buttons on open menu items */
+const iconButtonClass = 'btn btn-xs btn-ghost px-0 text-accent'
+
+/**
+ * A generic component for handling a menu item.
+ * Wraps the given input in a {@see Collapse} with the appropriate buttons
+ * @param  {String}  options.name       the name of the item, for using as a key
+ * @param  {Object}  options.config     the configuration for the input
+ * @param  {Sting|Boolean|Number}  options.current    the current value of the item
+ * @param  {Function}  options.updateFunc the function that will be called by event handlers to update the value
+ * @param  {Function}  options.t          the translation function
+ * @param  {Object}  options.passProps  props to pass to the Input component
+ * @param  {Boolean}  changed            has the value changed from default?
+ * @param  {React.Component}  Input              the input component this menu item will use
+ * @param  {React.Component}  Value              a value display component this menu item will use
+ * @param  {Boolean} allowOverride      all a text input to be used to override the given input component
+ * @param  {Number}  ux            the user-defined ux level
+ * @param {object} props.Swizzled - An object holding swizzled code
+ */
+export const MenuItem = ({
+  name,
+  Swizzled,
+  current,
+  updateHandler,
+  passProps = {},
+  changed,
+  Input = () => {},
+  allowOverride = false,
+  ux = 5,
+  docs,
+  config,
+  Design,
+}) => {
+  // Local state - whether the override input should be shown
+  const [override, setOverride] = useState(false)
+
+  // generate properties to pass to the Input
+  const drillProps = useMemo(
+    () => ({
+      name,
+      config,
+      ux,
+      current,
+      updateHandler,
+      t: Swizzled.methods.t,
+      changed,
+      override,
+      Design,
+      ...passProps,
+    }),
+    [name, config, current, updateHandler, changed, override, passProps, ux]
+  )
+
+  if (!config) {
+    console.log('no config in containers', { name, current, config })
+    return null
+  }
+
+  // don't render if this item is more advanced than the user has chosen to see
+  if (config.ux && config.ux > ux) return null
+
+  // get buttons for open and closed states
+  const buttons = []
+  if (allowOverride)
+    buttons.push(
+      <button
+        key="edit"
+        className={iconButtonClass}
+        onClick={(evt) => {
+          evt.stopPropagation()
+          setOverride(!override)
+        }}
+      >
+        <Swizzled.components.EditIcon
+          className={`w-6 h-6 ${
+            override ? 'bg-secondary text-secondary-content rounded' : 'text-secondary'
+          }`}
+        />
+      </button>
+    )
+  const ResetButton = ({ disabled = false }) => (
+    <button
+      className={`${iconButtonClass} disabled:bg-opacity-0`}
+      disabled={disabled}
+      onClick={(evt) => {
+        evt.stopPropagation()
+        updateHandler([name], '__UNSET__')
+      }}
+    >
+      <Swizzled.components.ResetIcon />
+    </button>
+  )
+
+  buttons.push(<ResetButton open disabled={!changed} key="clear" />)
+
+  return (
+    <Swizzled.components.FormControl
+      label={<span className="text-base font-normal">{Swizzled.methods.t(`${name}.d`)}</span>}
+      id={config.name}
+      labelBR={<div className="flex flex-row items-center gap-2">{buttons}</div>}
+      labelBL={
+        <span
+          className={`text-base font-medium -mt-2 block ${changed ? 'text-accent' : 'opacity-50'}`}
+        >
+          {Swizzled.methods.t(`pe:youAreUsing${changed ? 'ACustom' : 'TheDefault'}Value`)}
+        </span>
+      }
+      docs={docs}
+    >
+      <Input {...drillProps} />
+    </Swizzled.components.FormControl>
+  )
+}
+
+/**
+ * A component for recursively displaying groups of menu items.
+ * Accepts any object where menu item configurations are keyed by name
+ * Items that are group headings are expected to have an isGroup: true property
+ * @param  {Boolean} options.collapsible   Should this group be collapsible (use false for the top level of a menu)
+ * @param  {Number}  options.ux       the user-defined ux level
+ * @param  {String}  options.name          the name of the group or item
+ * @param  {Object}  options.currentValues a map of current values for items in the group, keyed by name
+ * @param  {Object}  structure             the configuration for the group.
+ * @param  {React.Component}  Icon         the icon to display next to closed groups
+ * @param  {React.Component}  Item         the component to use for menu items
+ * @param  {Object}  values                a map of Value display components to be used by menu items in the group
+ * @param  {Object}  inputs                a map of Input components to be used by menu items in the group
+ * @param  {Object}  passProps             properties to pass to Inputs within menu items
+ * @param  {Object}  emojis                a map of emojis to use as icons for groups or items
+ * @param  {Function}  updateHandler          the function called by change handlers on inputs within menu items
+ * @param  {Boolean}  topLevel             is this group the top level group? false for nested
+ * @param  {Function}  t                   translation function
+ * @param {object} props.Swizzled - An object holding swizzled code
+
+ */
+export const MenuItemGroup = ({
+  collapsible = true,
+  ux,
+  currentValues = {},
+  structure,
+  Icon,
+  Item = false,
+  inputs = {},
+  values = {},
+  passProps = {},
+  updateHandler,
+  topLevel = false,
+  isDesignOptionsGroup = false,
+  Design,
+  Swizzled,
+  state,
+}) => {
+  if (!Item) Item = Swizzled.components.MenuItem
+
+  // map the entries in the structure
+  const content = Object.entries(structure).map(([itemName, item]) => {
+    // if it's the isGroup property, or it is false, it shouldn't be shown
+    if (itemName === 'isGroup' || item === false) return null
+    if (!item) return null
+    if (item.ux && ux && item.ux > ux) return null
+
+    const ItemIcon = item.icon
+      ? item.icon
+      : item.isGroup
+        ? Swizzled.components.GroupIcon
+        : Icon
+          ? Icon
+          : () => <span role="img">fixme-icon</span>
+    const Value = item.isGroup
+      ? () => (
+          <div className="flex flex-row gap-2 items-center font-medium">
+            {Object.keys(item).filter((i) => i !== 'isGroup').length}
+            <Swizzled.components.OptionsIcon className="w-5 h-5" />
+          </div>
+        )
+      : isDesignOptionsGroup
+        ? values[Swizzled.methods.designOptionType(item)]
+        : values[itemName]
+          ? values[itemName]
+          : () => <span>¯\_(ツ)_/¯</span>
+
+    return [
+      <div className="flex flex-row items-center justify-between w-full" key="a">
+        <div className="flex flex-row items-center gap-4 w-full">
+          <ItemIcon />
+          <span className="font-medium">
+            {Swizzled.methods.t([`pe:${itemName}.t`, `pe:${itemName}`])}
+          </span>
+        </div>
+        <div className="font-bold">
+          <Value
+            current={currentValues[itemName]}
+            config={item}
+            t={Swizzled.methods.t}
+            changed={Swizzled.methods.menuValueWasChanged(currentValues[itemName], item)}
+            Design={Design}
+          />
+        </div>
+      </div>,
+      item.isGroup ? (
+        <MenuItemGroup
+          key={itemName}
+          {...{
+            collapsible: true,
+            // it's the top level if the previous level was top but not wrapped
+            topLevel: topLevel && !collapsible,
+            state,
+            name: itemName,
+            currentValues,
+            structure: item,
+            Icon,
+            Item,
+            values,
+            inputs,
+            passProps,
+            updateHandler,
+            isDesignOptionsGroup,
+            Design,
+            Swizzled,
+          }}
+        />
+      ) : (
+        <Item
+          key={itemName}
+          {...{
+            name: itemName,
+            current: currentValues[itemName],
+            config: item,
+            state,
+            changed: Swizzled.methods.menuValueWasChanged(currentValues[itemName], item),
+            Value: values[itemName],
+            Input: inputs[itemName],
+            updateHandler,
+            passProps,
+            Design,
+            Swizzled,
+          }}
+        />
+      ),
+      itemName,
+    ]
+  })
+
+  return <Swizzled.components.SubAccordion items={content.filter((item) => item !== null)} />
+}
+
+/**
+ * A generic component to present the title of a menu item
+ * @param  {String}  options.name    the name of the item, to act as its translation key
+ * @param  {Function}  options.t       the translation function
+ * @param  {String|React.Component}  options.current a  the current value, or a Value component to display it
+ * @param  {Boolean} options.open    is the menu item open?
+ * @param  {String}  options.emoji   the emoji icon of the menu item
+ */
+export const MenuItemTitle = ({
+  name,
+  current = null,
+  open = false,
+  emoji = '',
+  Icon = false,
+  Swizzled,
+}) => (
+  <div className={`flex flex-row gap-1 items-center w-full ${open ? '' : 'justify-between'}`}>
+    <span className="font-medium capitalize flex flex-row gap-2">
+      {Icon ? <Icon /> : <span role="img">{emoji}</span>}
+      {Swizzled.methods.t([`${name}.t`, name])}
+    </span>
+    <span className="font-bold">{current}</span>
+  </div>
+)
diff --git a/packages/react-components/src/editor/swizzle/components/menus/core-settings-menu.mjs b/packages/react-components/src/editor/swizzle/components/menus/core-settings-menu.mjs
new file mode 100644
index 00000000000..673ce6a76bf
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/menus/core-settings-menu.mjs
@@ -0,0 +1,135 @@
+/**
+ * The core settings menu
+ * @param  {Object} options.update        settings and ui update functions
+ * @param  {Object} options.settings      core settings
+ * @param  {Object} options.patternConfig the configuration from the pattern
+ * @param  {String} options.language      the menu language
+ * @param  {Object} options.account       the user account data
+ * @param {object} props.Swizzled - An object holding swizzled code
+ */
+export const CoreSettingsMenu = ({ update, state, language, Design, Swizzled }) => {
+  const structure = Swizzled.methods.menuCoreSettingsStructure({
+    language,
+    units: state.settings?.units,
+    sabool: state.settings?.sabool,
+    parts: Design.patternConfig.draftOrder,
+  })
+
+  const inputs = {
+    complete: Swizzled.components.MenuListInput,
+    expand: Swizzled.components.MenuListInput,
+    margin: Swizzled.components.MenuMmInput,
+    only: Swizzled.components.MenuOnlySettingInput,
+    paperless: Swizzled.components.MenuBoolInput,
+    sabool: Swizzled.components.MenuBoolInput,
+    samm: Swizzled.components.MenuMmInput,
+    scale: Swizzled.components.MenuSliderInput,
+    units: Swizzled.components.MenuBoolInput,
+  }
+
+  const values = {
+    complete: Swizzled.components.MenuListValue,
+    expand: Swizzled.components.MenuListValue,
+    margin: Swizzled.components.MenuMmValue,
+    only: Swizzled.components.MenuOnlySettingValue,
+    paperless: Swizzled.components.MenuListValue,
+    sabool: Swizzled.components.MenuListValue,
+    samm: Swizzled.components.MenuMmValue,
+    scale: Swizzled.components.MenuScaleSettingValue,
+    units: Swizzled.components.MenuListValue,
+  }
+
+  return (
+    <Swizzled.components.MenuItemGroup
+      {...{
+        structure,
+        ux: state.ui.ux,
+        currentValues: state.settings || {},
+        Icon: Swizzled.components.SettingsIcon,
+        Item: (props) => (
+          <Swizzled.components.CoreSetting
+            updateHandler={update}
+            {...{ inputs, values, Swizzled, Design }}
+            {...props}
+          />
+        ),
+        isFirst: true,
+        name: 'pe:designOptions',
+        language: state.locale,
+        passProps: {
+          ux: state.ui.ux,
+          settings: state.settings,
+          patternConfig: Design.patternConfig,
+          toggleSa: update.toggleSa,
+        },
+        updateHandler: update.settings,
+        isDesignOptionsGroup: false,
+        Swizzled,
+        state,
+        Design,
+        inputs,
+        values,
+      }}
+    />
+  )
+}
+
+/** A wrapper for {@see MenuItem} to handle core settings-specific business */
+export const CoreSetting = ({
+  Swizzled,
+  name,
+  config,
+  ux,
+  updateHandler,
+  current,
+  passProps,
+  ...rest
+}) => {
+  // is toggling allowed?
+  const allowToggle = ux > 3 && config.list?.length === 2
+
+  const handlerArgs = {
+    updateHandler,
+    current,
+    config,
+    ...passProps,
+  }
+
+  /*
+   * Load a specific update handler if one is configured
+   */
+  const handler = Swizzled.config.menuCoreSettingsHandlerMethods?.[name.toLowerCase()]
+    ? Swizzled.methods[Swizzled.config.menuCoreSettingsHandlerMethods[name.toLowerCase()]](
+        handlerArgs
+      )
+    : updateHandler
+
+  return (
+    <Swizzled.components.MenuItem
+      {...{
+        name,
+        config,
+        ux,
+        current,
+        passProps,
+        ...rest,
+        allowToggle,
+        updateHandler: handler,
+      }}
+    />
+  )
+}
+
+export const ClearAllButton = ({ setSettings, compact = false, Swizzled }) => {
+  return (
+    <div className={`${compact ? '' : 'text-center mt-8'}`}>
+      <button
+        className={`justify-self-center btn btn-error btn-outline ${compact ? 'btn-sm' : ''}`}
+        onClick={() => setSettings({})}
+      >
+        <Swizzled.components.TrashIcon />
+        {Swizzled.methods.t('clearSettings')}
+      </button>
+    </div>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/menus/design-options-menu.mjs b/packages/react-components/src/editor/swizzle/components/menus/design-options-menu.mjs
new file mode 100644
index 00000000000..e061c1821bc
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/menus/design-options-menu.mjs
@@ -0,0 +1,112 @@
+import { useCallback, useMemo } from 'react'
+
+/**
+ * The design options menu
+ * @param {object} props.Design - An object holding the Design instance
+ * @param {String} props.isFirst - Boolean indicating whether this is the first/top entry of the menu
+ * @param {Object} props.state - Object holding state
+ * @param {Object} props.update - Object holding state handlers
+ * @param {object} props.Swizzled - An object holding swizzled code
+ */
+export const DesignOptionsMenu = ({ Design, isFirst = true, state, update, Swizzled }) => {
+  const structure = useMemo(
+    () => Swizzled.methods.menuDesignOptionsStructure(Design.patternConfig.options, state.settings),
+    [Design.patternConfig, state.settings]
+  )
+  const updateHandler = useCallback(
+    (name, value = '__UNSET__') => update.settings(['options', ...name], value),
+    [update.settings]
+  )
+
+  const drillProps = { Design, state, update }
+  const inputs = {
+    bool: (props) => <Swizzled.components.MenuBoolInput {...drillProps} {...props} />,
+    constant: (props) => <Swizzled.components.MenuConstantInput {...drillProps} {...props} />,
+    count: (props) => (
+      <Swizzled.components.MenuSliderInput
+        {...drillProps}
+        {...props}
+        config={{ ...props.config, step: 1 }}
+      />
+    ),
+    deg: (props) => <Swizzled.components.MenuDegInput {...drillProps} {...props} />,
+    list: (props) => (
+      <Swizzled.components.MenuListInput {...drillProps} {...props} isDesignOption />
+    ),
+    mm: () => <span>FIXME: Mm options are deprecated. Please report this </span>,
+    pct: (props) => <Swizzled.components.MenuPctInput {...drillProps} {...props} />,
+  }
+  const values = {
+    bool: (props) => <Swizzled.components.MenuBoolValue {...drillProps} {...props} />,
+    constant: (props) => <Swizzled.components.MenuConstantOptionValue {...drillProps} {...props} />,
+    count: (props) => <Swizzled.components.MenuCountOptionValue {...drillProps} {...props} />,
+    deg: (props) => <Swizzled.components.MenuDegOptionValue {...drillProps} {...props} />,
+    list: (props) => <Swizzled.components.MenuListOptionValue {...drillProps} {...props} />,
+    mm: (props) => <Swizzled.components.MenuMmOptionValue {...drillProps} {...props} />,
+    pct: (props) => <Swizzled.components.MenuPctOptionValue {...drillProps} {...props} />,
+  }
+
+  return (
+    <Swizzled.components.MenuItemGroup
+      {...{
+        structure,
+        ux: state.ui.ux,
+        currentValues: state.settings.options || {},
+        Icon: Swizzled.components.OptionsIcon,
+        Item: (props) => (
+          <Swizzled.components.DesignOption
+            {...{ inputs, values, Swizzled, update, Design }}
+            {...props}
+          />
+        ),
+        isFirst,
+        name: 'pe:designOptions',
+        language: state.locale,
+        passProps: {
+          ux: state.ui.ux,
+          settings: state.settings,
+          patternConfig: Design.patternConfig,
+        },
+        updateHandler,
+        isDesignOptionsGroup: true,
+        Swizzled,
+        state,
+        Design,
+        inputs,
+        values,
+      }}
+    />
+  )
+}
+
+/**
+ * A wrapper for {@see MenuItem} to handle design option-specific business
+ * @param  {Object}    options.config   the config for the item
+ * @param  {Object}    options.settings core settings
+ * @param  {Object} options.rest     the rest of the props
+ */
+export const DesignOption = ({ config, settings, ux, inputs, values, Swizzled, ...rest }) => {
+  const type = Swizzled.methods.designOptionType(config)
+  const Input = inputs[type]
+  const Value = values[type]
+  const allowOverride = ['pct', 'count', 'deg'].includes(type)
+  const allowToggle = (ux > 3 && type === 'bool') || (type == 'list' && config.list.length === 2)
+
+  // Hide option?
+  if (config?.hide || (typeof config?.hide === 'function' && config.hide(settings))) return null
+
+  return (
+    <Swizzled.components.MenuItem
+      {...{
+        config,
+        ux,
+        ...rest,
+        Swizzled,
+        Input,
+        Value,
+        allowOverride,
+        allowToggle,
+      }}
+    />
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/menus/draft-menu.mjs b/packages/react-components/src/editor/swizzle/components/menus/draft-menu.mjs
new file mode 100644
index 00000000000..2ebe13aa6a7
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/menus/draft-menu.mjs
@@ -0,0 +1,52 @@
+export const DraftMenu = ({ Design, pattern, state, Swizzled, update }) => {
+  // Swizzled methods
+  const { t } = Swizzled.methods
+  // Swizzled components
+  const { FlagsAccordionTitle, FlagsAccordionEntries, Accordion } = Swizzled.components
+
+  const menuProps = { Design, state, Swizzled, pattern, update }
+
+  const sections = [
+    {
+      name: 'designOptions',
+      icon: <Swizzled.components.OptionsIcon className="w-8 h-8" />,
+      menu: <Swizzled.components.DesignOptionsMenu {...menuProps} />,
+    },
+    {
+      name: 'coreSettings',
+      icon: <Swizzled.components.SettingsIcon className="w-8 h-8" />,
+      menu: <Swizzled.components.CoreSettingsMenu {...menuProps} />,
+    },
+    {
+      name: 'uiPreferences',
+      icon: <Swizzled.components.UiIcon className="w-8 h-8" />,
+      menu: <Swizzled.components.UiPreferencesMenu {...menuProps} />,
+    },
+  ]
+
+  const items = []
+  items.push(
+    ...sections.map((section) => [
+      <>
+        <h5 className="flex flex-row gap-2 items-center justify-between w-full">
+          <span>{t(`pe:${section.name}.t`)}</span>
+          {section.icon}
+        </h5>
+        <p className="text-left">{t(`pe:${section.name}.d`)}</p>
+      </>,
+      section.menu,
+      section.name,
+    ])
+  )
+
+  const flags = pattern.setStores?.[0]?.plugins?.['plugin-annotations']?.flags
+
+  if (flags)
+    items.push([
+      <FlagsAccordionTitle key={1} {...{ flags, Swizzled }} />,
+      <FlagsAccordionEntries {...{ update, state, flags }} key={2} />,
+      'flags',
+    ])
+
+  return <Accordion items={items} />
+}
diff --git a/packages/react-components/src/editor/swizzle/components/menus/shared-inputs.mjs b/packages/react-components/src/editor/swizzle/components/menus/shared-inputs.mjs
new file mode 100644
index 00000000000..c2cb878fa05
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/menus/shared-inputs.mjs
@@ -0,0 +1,459 @@
+import { useMemo, useCallback, useState } from 'react'
+
+/** A boolean version of {@see MenuListInput} that sets up the necessary configuration */
+export const MenuBoolInput = (props) => {
+  const { name, config, Swizzled } = props
+  const boolConfig = useBoolConfig(name, config)
+
+  return <Swizzled.components.MenuListInput {...props} config={boolConfig} />
+}
+
+/** A placeholder for an input to handle constant values */
+export const MenuConstantInput = ({
+  type = 'number',
+  name,
+  current,
+  updateHandler,
+  changed,
+  config,
+}) => (
+  <>
+    <input
+      type={type}
+      className={`
+      input input-bordered w-full text-base-content
+      input-${changed ? 'secondary' : 'accent'}
+    `}
+      value={changed ? current : config.dflt}
+      onChange={(evt) => updateHandler([name], evt.target.value)}
+    />
+  </>
+)
+
+/** A {@see MenuSliderInput} to handle degree values */
+export const MenuDegInput = (props) => {
+  const { updateHandler } = props
+  const { MenuSliderInput } = props.Swizzled.components
+  const { round } = props.Swizzled.methods
+  const degUpdateHandler = useCallback(
+    (path, newVal) => {
+      updateHandler(path, newVal === undefined ? undefined : Number(newVal))
+    },
+    [updateHandler]
+  )
+  return (
+    <MenuSliderInput {...props} suffix="°" valFormatter={round} updateHandler={degUpdateHandler} />
+  )
+}
+
+/**
+ * An input for selecting and item from a list
+ * @param  {String}  options.name       the name of the property this input changes
+ * @param  {Object}  options.config     configuration for the input
+ * @param  {String|Number}  options.current    the current value of the input
+ * @param  {Function}  options.updateFunc the function called by the event handler to update the value
+ * @param  {Boolean} options.compact    include descriptions with the list items?
+ * @param  {Function}  options.t          translation function
+ * @param  {String}  design  name of the design
+ * @param  {Boolean} isDesignOption  Whether or not it's a design option
+ */
+export const MenuListInput = ({
+  name,
+  config,
+  current,
+  updateHandler,
+  compact = false,
+  t,
+  changed,
+  design,
+  isDesignOption = false,
+  Swizzled,
+}) => {
+  const handleChange = useSharedHandlers({
+    dflt: config.dflt,
+    updateHandler,
+    name,
+    isDesignOption,
+  })
+
+  return config.list.map((entry) => {
+    const titleKey = config.choiceTitles
+      ? config.choiceTitles[entry]
+      : isDesignOption
+        ? `${design}:${name}.${entry}`
+        : `${name}.o.${entry}`
+    const title = config.titleMethod ? config.titleMethod(entry, t) : t(`${titleKey}.t`)
+    const desc = config.valueMethod ? config.valueMethod(entry, t) : t(`${titleKey}.d`)
+    const sideBySide = config.sideBySide || desc.length + title.length < 42
+
+    return (
+      <Swizzled.components.ButtonFrame
+        dense={config.dense || false}
+        key={entry}
+        active={
+          changed
+            ? Array.isArray(current)
+              ? current.includes(entry)
+              : current === entry
+            : entry === config.dflt
+        }
+        onClick={() => handleChange(entry)}
+      >
+        <div
+          className={`w-full flex items-start ${
+            sideBySide ? 'flex-row justify-between gap-2' : 'flex-col'
+          }`}
+        >
+          <div className="font-bold text-lg shrink-0">{title}</div>
+          {compact ? null : <div className="text-base font-normal">{desc}</div>}
+        </div>
+      </Swizzled.components.ButtonFrame>
+    )
+  })
+}
+
+/** a toggle input for list/boolean values */
+export const MenuListToggle = ({ config, changed, updateHandler, name }) => {
+  const boolConfig = useBoolConfig(name, config)
+  const handleChange = useSharedHandlers({ dflt: boolConfig.dflt, updateHandler, name })
+
+  const dfltIndex = boolConfig.list.indexOf(boolConfig.dflt)
+
+  const doToggle = () =>
+    handleChange(boolConfig.list[changed ? dfltIndex : Math.abs(dfltIndex - 1)])
+
+  const checked = boolConfig.dflt == false ? changed : !changed
+
+  return (
+    <input
+      type="checkbox"
+      className={`toggle ${changed ? 'toggle-accent' : 'toggle-secondary'}`}
+      checked={checked}
+      onChange={doToggle}
+      onClick={(evt) => evt.stopPropagation()}
+    />
+  )
+}
+
+export const MenuMmInput = (props) => {
+  const { units, updateHandler, current, config } = props
+  const { MenuSliderInput } = props.Swizzled.components
+  const mmUpdateHandler = useCallback(
+    (path, newCurrent) => {
+      const calcCurrent =
+        typeof newCurrent === 'undefined'
+          ? undefined
+          : props.Swizzled.methods.measurementAsMm(newCurrent, units)
+      updateHandler(path, calcCurrent)
+    },
+    [updateHandler, units]
+  )
+
+  // add a default step that's appropriate to the unit. can be overwritten by config
+  const defaultStep = units === 'imperial' ? 0.125 : 0.1
+
+  return (
+    <MenuSliderInput
+      {...props}
+      {...{
+        config: {
+          step: defaultStep,
+          ...config,
+          dflt: props.Swizzled.methods.measurementAsUnits(config.dflt, units),
+        },
+        current:
+          current === undefined
+            ? undefined
+            : props.Swizzled.methods.measurementAsUnits(current, units),
+        updateHandler: mmUpdateHandler,
+        valFormatter: (val) =>
+          units === 'imperial' ? props.Swizzle.methods.formatFraction128(val, null) : val,
+        suffix: units === 'imperial' ? '"' : 'cm',
+      }}
+    />
+  )
+}
+
+/**
+ * A number input that accepts comma or period decimal separators.
+ * Because our use case is almost never going to include thousands, we're using a very simple way of accepting commas:
+ * The validator checks for the presence of a single comma or period followed by numbers
+ * The parser replaces a single comma with a period
+ *
+ * optionally accepts fractions
+ * @param  {Number}  options.val       the value of the input
+ * @param  {Function}  options.onUpdate  a function to handle when the value is updated to a valid value
+ * @param  {Boolean} options.fractions should the input allow fractional input
+ */
+//export const MenuNumberInput = ({
+//  value,
+//  onUpdate,
+//  onMount,
+//  className,
+//  fractions = true,
+//  min = -Infinity,
+//  max = Infinity,
+//  swizzled,
+//}) => {
+//  const valid = useRef(validateVal(value, fractions, min, max))
+//
+//  const handleChange = useCallback(
+//    (newVal) => {
+//      // only actually update if the value is valid
+//      if (typeof onUpdate === 'function') {
+//        onUpdate(valid.current, newVal)
+//      }
+//    },
+//    [onUpdate, valid]
+//  )
+//
+//  // onChange
+//  const onChange = useCallback(
+//    (evt) => {
+//      const newVal = evt.target.value
+//      // set validity so it will display
+//      valid.current = validateVal(newVal, fractions, min, max)
+//
+//      // handle the change
+//      handleChange(newVal)
+//    },
+//    [fractions, min, max, valid]
+//  )
+//
+//  const val = typeof value === 'undefined' ? config.dflt : value
+//
+//  useEffect(() => {
+//    if (typeof onMount === 'function') {
+//      onMount(valid.current)
+//    }
+//  }, [onMount, valid])
+//
+//  return (
+//    <input
+//      type="text"
+//      inputMode="number"
+//      className={`input input-secondary ${className || 'input-sm grow text-base-content'}
+//        ${valid.current === false && 'input-error'}
+//        ${valid.current && 'input-success'}
+//      `}
+//      value={val}
+//      onChange={onChange}
+//    />
+//  )
+//}
+
+/** A {@see SliderInput} to handle percentage values */
+export const MenuPctInput = ({ current, changed, updateHandler, config, Swizzled, ...rest }) => {
+  const factor = 100
+  let pctCurrent = changed ? Swizzled.methods.menuRoundPct(current, factor) : current
+  const pctUpdateHandler = useCallback(
+    (path, newVal) =>
+      updateHandler(
+        path,
+        newVal === undefined ? undefined : Swizzled.methods.menuRoundPct(newVal, 1 / factor)
+      ),
+    [updateHandler]
+  )
+
+  return (
+    <Swizzled.components.MenuSliderInput
+      {...{
+        ...rest,
+        config: { ...config, dflt: Swizzled.methods.menuRoundPct(config.dflt, factor) },
+        current: pctCurrent,
+        updateHandler: pctUpdateHandler,
+        suffix: '%',
+        valFormatter: Swizzled.methods.round,
+        changed,
+      }}
+    />
+  )
+}
+
+/**
+ * An input component that uses a slider to change a number value
+ * @param  {String}   options.name         the name of the property being changed by the input
+ * @param  {Object}   options.config       configuration for the input
+ * @param  {Number}   options.current      the current value of the input
+ * @param  {Function}   options.updateHandler   the function called by the event handler to update the value
+ * @param  {Function}   options.t            translation function
+ * @param  {Boolean}   options.override     open the text input to allow override of the slider?
+ * @param  {String}   options.suffix       a suffix to append to value labels
+ * @param  {Function} options.valFormatter a function that accepts a value and formats it for display as a label
+ * @param  {Function}   options.setReset     a setter for the reset function on the parent component
+ */
+export const MenuSliderInput = ({
+  name,
+  config,
+  current,
+  updateHandler,
+  override,
+  suffix = '',
+  valFormatter = (val) => val,
+  setReset,
+  children,
+  changed,
+  Swizzled,
+}) => {
+  const { max, min } = config
+  const handleChange = useSharedHandlers({
+    current,
+    dflt: config.dflt,
+    updateHandler,
+    name,
+    setReset,
+  })
+
+  const val = typeof current === 'undefined' ? config.dflt : current
+
+  if (override)
+    return (
+      <>
+        <div className="flex flex-row justify-between">
+          <Swizzled.components.MenuEditOption
+            {...{
+              config,
+              Swizzled,
+              current: val,
+              handleChange,
+              min,
+              max,
+            }}
+          />
+        </div>
+        {children}
+      </>
+    )
+
+  return (
+    <>
+      <div className="flex flex-row justify-between">
+        <span className="opacity-50">
+          <span dangerouslySetInnerHTML={{ __html: valFormatter(min) + suffix }} />
+        </span>
+        <span className={`font-bold ${val === config.dflt ? 'text-secondary' : 'text-accent'}`}>
+          <span dangerouslySetInnerHTML={{ __html: valFormatter(val) + suffix }} />
+        </span>
+        <span className="opacity-50">
+          <span dangerouslySetInnerHTML={{ __html: valFormatter(max) + suffix }} />
+        </span>
+      </div>
+      <input
+        type="range"
+        {...{ min, max, value: val, step: config.step || 0.1 }}
+        onChange={(evt) => handleChange(evt.target.value)}
+        className={`
+          range range-sm mt-1
+          ${changed ? 'range-accent' : 'range-secondary'}
+        `}
+      />
+      {children}
+    </>
+  )
+}
+
+export const MenuEditOption = (props) => {
+  const [manualEdit, setManualEdit] = useState(props.current)
+  const { config, handleChange, Swizzled } = props
+  const type = Swizzled.methods.designOptionType(config)
+
+  const onUpdate = useCallback(
+    (validVal) => {
+      if (validVal !== null && validVal !== false) handleChange(validVal)
+    },
+    [handleChange]
+  )
+
+  if (!['pct', 'count', 'deg', 'mm'].includes(type))
+    return <p>This design option type does not have a component to handle manual input.</p>
+
+  return (
+    <div className="form-control mb-2 w-full">
+      <label className="label font-medium text-accent">
+        <em>
+          {Swizzled.methods.t('pe:enterCustomValue')} ({Swizzled.config.menuOptionEditLabels[type]})
+        </em>
+      </label>
+      <label className="input-group input-group-sm flex flex-row items-center gap-2 -mt-4">
+        <Swizzled.components.NumberInput value={manualEdit} update={setManualEdit} />
+        <button className="btn btn-secondary mt-4" onClick={() => onUpdate(manualEdit)}>
+          <Swizzled.components.ApplyIcon />
+        </button>
+      </label>
+    </div>
+  )
+}
+
+/**
+ * A hook to get the change handler for an input.
+ * @param  {Number|String|Boolean} options.dflt       the default value for the input
+ * @param  {Function}              options.updateHandler the onChange
+ * @param  {string}                options.name       the name of the property being changed
+ * @return the change handler for the input
+ */
+const useSharedHandlers = ({ dflt, updateHandler, name, isDesignOption }) => {
+  return useCallback(
+    (newCurrent = '__UNSET__') => {
+      /*
+       * When a design option is set to the default, just unset it instead
+       * This is both more efficient, and  makes it easy to see in which ways
+       * your pattern differs from the defaults
+       */
+      if (isDesignOption && newCurrent === dflt) newCurrent = '__UNSET__'
+      updateHandler([name], newCurrent)
+    },
+    [dflt, updateHandler, name, isDesignOption]
+  )
+}
+
+/** get the configuration that allows a boolean value to use the list input */
+const useBoolConfig = (name, config) => {
+  return useMemo(
+    () => ({
+      list: [false, true],
+      choiceTitles: {
+        false: `${name}No`,
+        true: `${name}Yes`,
+      },
+      valueTitles: {
+        false: 'no',
+        true: 'yes',
+      },
+      ...config,
+    }),
+    [name, config]
+  )
+}
+
+/** an input for the 'only' setting. toggles individual parts*/
+export const MenuOnlySettingInput = (props) => {
+  const { Swizzled, config } = props
+  const { t } = Swizzled.methods
+  config.sideBySide = true
+  config.titleMethod = (entry, t) => {
+    const chunks = entry.split('.')
+    return <span className="font-medium text-base">{t(`${chunks[0]}:${chunks[1]}`)}</span>
+  }
+  config.valueMethod = (entry) => (
+    <span className="text-sm">{Swizzled.methods.capitalize(entry.split('.')[0])}</span>
+  )
+  config.dense = true
+  // Sort alphabetically (translated)
+  const order = []
+  for (const part of config.list) {
+    const [ns, name] = part.split('.')
+    order.push(t(`${ns}:${name}`) + `|${part}`)
+  }
+  order.sort()
+  config.list = order.map((entry) => entry.split('|')[1])
+
+  return <Swizzled.components.MenuListInput {...props} />
+}
+
+export const MenuUxSettingInput = (props) => {
+  const { state, update, Swizzled } = props
+
+  return (
+    <Swizzled.components.MenuListInput {...props} updateHandler={update.ui} current={state.ui.ux} />
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/menus/shared-values.mjs b/packages/react-components/src/editor/swizzle/components/menus/shared-values.mjs
new file mode 100644
index 00000000000..c94b6da8866
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/menus/shared-values.mjs
@@ -0,0 +1,142 @@
+import { mergeOptions } from '@freesewing/core'
+
+/** Displays that constant values are not implemented in the front end */
+export const MenuConstantOptionValue = () => (
+  <span className="text-error">FIXME: No ConstantOptionvalue implemented</span>
+)
+
+/** Displays a count value*/
+export const MenuCountOptionValue = ({ Swizzled, config, current, changed }) => (
+  <Swizzled.components.MenuShowValue {...{ current, changed, dflt: config.count }} />
+)
+
+/** Displays a degree value */
+export const MenuDegOptionValue = ({ config, current, changed, Swizzled }) => (
+  <Swizzled.components.MenuHighlightValue changed={changed}>
+    {' '}
+    {changed ? current : config.deg}&deg;
+  </Swizzled.components.MenuHighlightValue>
+)
+
+/**
+ * A component to highlight a changed value
+ * @param {Boolean} changed - Whether the value is changed or not
+ * @param {Function} children - The React children
+ */
+export const MenuHighlightValue = ({ changed, children }) => (
+  <span className={changed ? 'text-accent' : ''}> {children} </span>
+)
+
+/** Displays a list option value */
+export const MenuListOptionValue = (props) => (
+  <MenuListValue
+    {...props}
+    t={(input) => props.Swizzled.methods.t(`${props.design}:${props.config.name}.${input}.t`)}
+  />
+)
+
+/**
+ * Displays the correct, translated value for a list
+ * @param  {String|Boolean} options.current the current value, if it has been changed
+ * @param  {Function} options.t       a translation function
+ * @param  {Object} options.config  the item config
+ * @param  {Boolean} options.changed has the value been changed?
+ * @param {object} props.Swizzled - An object holding swizzled code
+ */
+export const MenuListValue = ({ current, config, changed, Swizzled }) => {
+  // get the values
+  const val = changed ? current : config.dflt
+
+  // key will be based on a few factors
+  let key
+  // are valueTitles configured?
+  if (config.valueTitles) key = config.valueTitles[val]
+  // if not, is the value a string
+  else if (typeof val === 'string') key = val
+  // otherwise stringify booleans
+  else if (val) key = <Swizzled.components.BoolYesIcon />
+  else key = <Swizzled.components.BoolNoIcon />
+
+  const translated =
+    config.doNotTranslate || typeof key !== 'string' ? key : Swizzled.methods.t(key)
+
+  return (
+    <Swizzled.components.MenuHighlightValue changed={changed}>
+      {translated}
+    </Swizzled.components.MenuHighlightValue>
+  )
+}
+
+/** Displays the corrent, translated value for a boolean */
+export const MenuBoolValue = MenuListOptionValue
+
+/** Displays the MmOptions are not supported */
+export const MenuMmOptionValue = () => (
+  <span className="text-error">FIXME: No Mm Options are not supported</span>
+)
+
+/** Displays a formated mm value based on the current units */
+export const MenuMmValue = ({ current, config, units, changed, Swizzled }) => (
+  <Swizzled.components.MenuHighlightValue changed={changed}>
+    <span
+      dangerouslySetInnerHTML={{
+        __html: Swizzled.methods.formatMm(changed ? current : config.dflt, units),
+      }}
+    />
+  </Swizzled.components.MenuHighlightValue>
+)
+
+/** Displays the current percentage value, and the absolute value if configured
+ *
+ **************************************************************************
+ * SliderIcon  Title                                                 THIS *
+ * min%                                                              max% *
+ * ----------------------0----------------------------------------------- *
+ * msg                                               PencilIcon ResetIcon *
+ **************************************************************************
+ * */
+export const MenuPctOptionValue = ({
+  config,
+  current,
+  settings,
+  changed,
+  patternConfig,
+  Swizzled,
+}) => {
+  const val = changed ? current : config.pct / 100
+
+  return (
+    <Swizzled.components.MenuHighlightValue changed={changed}>
+      {Swizzled.methods.formatPercentage(val)}
+      {config.toAbs && settings?.measurements
+        ? ` | ${Swizzled.methods.formatMm(
+            config.toAbs(val, settings, mergeOptions(settings, patternConfig.options))
+          )}`
+        : null}
+    </Swizzled.components.MenuHighlightValue>
+  )
+}
+
+/**
+ * A component to display a value, highligting it if it changed
+ * @param  {Number|String|Boolean} options.current - The current value, if it has been changed
+ * @param  {Number|String|Boolean} options.dflt - The default value
+ * @param  {Boolean} options.changed - Has the value been changed?
+ */
+export const MenuShowValue = ({ Swizzled, current, dflt, changed }) => {
+  const { MenuHighlightValue } = Swizzled.components
+
+  return <MenuHighlightValue changed={changed}> {changed ? current : dflt} </MenuHighlightValue>
+}
+
+export const MenuScaleSettingValue = ({ Swizzled, current, config, changed }) => (
+  <Swizzled.components.MenuHighlightValue current={current} dflt={config.dflt} changed={changed} />
+)
+
+export const MenuOnlySettingValue = ({ Swizzled, current, config }) => (
+  <Swizzled.components.MenuHighlightValue
+    current={current?.length}
+    dflt={config.parts.length}
+    changed={current !== undefined}
+  />
+)
diff --git a/packages/react-components/src/editor/swizzle/components/menus/ui-preferences-menu.mjs b/packages/react-components/src/editor/swizzle/components/menus/ui-preferences-menu.mjs
new file mode 100644
index 00000000000..b28f57436a6
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/menus/ui-preferences-menu.mjs
@@ -0,0 +1,60 @@
+export const UiPreferencesMenu = ({ Swizzled, update, state, Design }) => {
+  const structure = Swizzled.methods.menuUiPreferencesStructure()
+
+  const drillProps = { Design, state, update }
+  const inputs = {
+    ux: (props) => <Swizzled.components.MenuUxSettingInput {...drillProps} {...props} />,
+    aside: (props) => <Swizzled.components.MenuListInput {...drillProps} {...props} />,
+    kiosk: (props) => <Swizzled.components.MenuListInput {...drillProps} {...props} />,
+    rotate: (props) => <Swizzled.components.MenuListInput {...drillProps} {...props} />,
+    renderer: (props) => <Swizzled.components.MenuListInput {...drillProps} {...props} />,
+  }
+  const values = {
+    ux: (props) => <Swizzled.components.Ux ux={state.ui.ux} {...props} />,
+    aside: Swizzled.components.MenuListValue,
+    kiosk: Swizzled.components.MenuListValue,
+    rotate: Swizzled.components.MenuListValue,
+    renderer: Swizzled.components.MenuListValue,
+  }
+
+  return (
+    <Swizzled.components.MenuItemGroup
+      {...{
+        structure,
+        ux: state.ui?.ux,
+        currentValues: state.ui || {},
+        Item: (props) => (
+          <Swizzled.components.UiPreference
+            updateHandler={update}
+            {...{ inputs, values, Swizzled, Design }}
+            {...props}
+          />
+        ),
+        isFirst: true,
+        name: 'pe:uiPreferences',
+        language: state.locale,
+        passProps: {
+          ux: state.ui?.ux,
+          settings: state.settings,
+          patternConfig: Design.patternConfig,
+        },
+        updateHandler: update.ui,
+        isDesignOptionsGroup: false,
+        Swizzled,
+        state,
+        Design,
+        inputs,
+        values,
+      }}
+    />
+  )
+}
+
+export const UiPreference = ({ Swizzled, name, ux, ...rest }) => (
+  <Swizzled.components.MenuItem
+    {...rest}
+    name={name}
+    allowToggle={!['ux', 'view'].includes(name) && ux > 3}
+    ux={ux}
+  />
+)
diff --git a/packages/react-components/src/editor/swizzle/components/null.mjs b/packages/react-components/src/editor/swizzle/components/null.mjs
new file mode 100644
index 00000000000..4850fbdfb6b
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/null.mjs
@@ -0,0 +1,5 @@
+/*
+ * When debugging, you can override this component to catch errors
+ * as it is typically used when a component can't be found.
+ */
+export const Null = () => null
diff --git a/packages/react-components/src/editor/swizzle/components/pattern-layout.mjs b/packages/react-components/src/editor/swizzle/components/pattern-layout.mjs
new file mode 100644
index 00000000000..1d4602b063e
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/pattern-layout.mjs
@@ -0,0 +1,34 @@
+/**
+ * A layout for views that include a drafted pattern
+ *
+ * @param {object} settings - The pattern settings/state
+ * @param {object} ui - The UI settings/state
+ * @param {object} update - Object holding methods to manipulate state
+ * @param {function} Design - The Design contructor
+ * @param {object] pattern - The drafted pattern
+ * @param {object} props.Swizzled - An object holding swizzled code
+ */
+export const PatternLayout = (props) => {
+  const { menu = null, Design, pattern, update, Swizzled } = props
+
+  return (
+    <Swizzled.components.ZoomContextProvider>
+      <div className="flex flex-col h-full">
+        <Swizzled.components.HeaderMenu
+          state={props.state}
+          {...{ Swizzled, update, Design, pattern }}
+        />
+        <div className="flex lg:flex-row grow lg:max-h-[90vh] max-h-[calc(100vh-3rem)] h-full py-4 lg:mt-6">
+          <div className="lg:w-2/3 flex flex-col h-full grow px-4">{props.output}</div>
+          {menu ? (
+            <div
+              className={`hidden xl:block w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-full overflow-scroll`}
+            >
+              {menu}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </Swizzled.components.ZoomContextProvider>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/popout.mjs b/packages/react-components/src/editor/swizzle/components/popout.mjs
new file mode 100644
index 00000000000..7bbee39cbd8
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/popout.mjs
@@ -0,0 +1,103 @@
+//  __SDEFILE__ - This file is a dependency for the stand-alone environment
+import { useState } from 'react'
+
+const colors = {
+  comment: 'secondary',
+  note: 'primary',
+  tip: 'accent',
+  warning: 'error',
+  error: 'error',
+  fixme: 'warning',
+  link: 'secondary',
+  related: 'info',
+  tldr: 'info',
+  none: '',
+}
+
+/**
+ * This popout component is a way to make some content stand out
+ *
+ * @param {object} components - Object holding possibly swizzled components
+ * @param {object} methods - Object holding possibly swizzled methods
+ */
+export const Popout = (props) => {
+  /*
+   * Load (swizzled) components
+   */
+  const { CloseIcon } = props.Swizzled.components
+
+  /*
+   * Load (swizzled) methods
+   */
+  const { t } = props.Swizzled.methods
+
+  const [hide, setHide] = useState(false)
+  if (hide) return null
+
+  let type = 'none'
+  for (const t in colors) {
+    if (props[t]) type = t
+  }
+  const color = colors[type]
+  const { className = '' } = props
+
+  return props.compact ? (
+    <div
+      className={`relative ${
+        props.dense ? 'my-1' : 'my-8'
+      } bg-${color} bg-opacity-5 -ml-4 -mr-4 sm:ml-0 sm:mr-0 ${className}`}
+    >
+      <div
+        className={`
+          border-y-4 sm:border-0 sm:border-l-4 px-4
+          shadow text-base border-${color}
+          flex flex-row items-center
+        `}
+      >
+        <div className={`font-bold uppercase text-${color}`}>
+          {props.title || (
+            <>
+              <span>{t(`pe:${type}`).toUpperCase()}</span>
+              <span className="px-3">|</span>
+            </>
+          )}
+        </div>
+        <div className="popout-content">{props.noP ? props.children : <p>{props.children}</p>}</div>
+      </div>
+    </div>
+  ) : (
+    <div
+      className={`relative my-8 bg-${color} bg-opacity-5 -ml-4 -mr-4 sm:ml-0 sm:mr-0 ${className}`}
+    >
+      <div
+        className={`
+          border-y-4 sm:border-0 sm:border-l-4 px-6 sm:px-8 py-4 sm:py-2
+          shadow text-base border-${color}
+        `}
+      >
+        <div className={`font-bold flex flex-row gap-1 items-end justify-between`}>
+          <div>
+            <span className={`font-bold uppercase text-${color}`}>
+              {type === 'tldr' ? 'TL;DR' : t(`pe:${type}`).toUpperCase()}
+            </span>
+            <span className={`font-normal text-base text-${color}`}>
+              {type === 'comment' && (
+                <>
+                  {' '}
+                  by <b>{props.by}</b>
+                </>
+              )}
+            </span>
+          </div>
+          {props.hideable && (
+            <button onClick={() => setHide(true)} className="hover:text-secondary" title="Close">
+              <CloseIcon />
+            </button>
+          )}
+        </div>
+        <div className="py-1 first:mt-0 popout-content">{props.children}</div>
+        {type === 'comment' && <div className={`font-bold italic text-${color}`}>{props.by}</div>}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/save-view.mjs b/packages/react-components/src/editor/swizzle/components/save-view.mjs
new file mode 100644
index 00000000000..4c1abb99b67
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/save-view.mjs
@@ -0,0 +1,214 @@
+import { useState } from 'react'
+import yaml from 'js-yaml'
+
+export const SaveView = ({ Swizzled, state, update }) => {
+  // Hooks
+  const backend = Swizzled.hooks.useBackend()
+  const { t } = Swizzled.methods
+
+  // State
+  const [name, setName] = useState(
+    `${Swizzled.methods.capitalize(state.design)} / ${Swizzled.methods.shortDate(status.locale)}`
+  )
+  const [withNotes, setWithNotes] = useState(false)
+  const [notes, setNotes] = useState('')
+  const [savedId, setSavedId] = useState()
+  const [bookmarkedId] = useState() // FIXME
+  const [saveAs] = useState(false) // FIXME
+
+  const addSettingsToNotes = () => {
+    setNotes(
+      notes +
+        '\n\n#### ' +
+        Swizzled.methods.t('pe:settings') +
+        '\n\n' +
+        '```yaml\n' +
+        yaml.dump(state.settings) +
+        '````'
+    )
+  }
+
+  const saveAsNewPattern = async () => {
+    const loadingId = 'savePatternAs'
+    update.startLoading(loadingId)
+    const patternData = {
+      design: state.design,
+      name,
+      public: false,
+      settings: state.settings,
+      data: {},
+    }
+    if (withNotes) patternData.notes = notes
+    const result = await backend.createPattern(patternData)
+    if (result.success) {
+      const id = result.data.pattern.id
+      update.stopLoading(loadingId)
+      update.view('draft')
+      update.notifySuccess(
+        <span>
+          {t('pe:patternSavedAs')}:{' '}
+          <Swizzled.components.Link
+            href={`/account/pattern?id=${id}`}
+            className={`${Swizzled.config.classes.link} text-secondary-content`}
+          >
+            /account/pattern?id={id}
+          </Swizzled.components.Link>
+        </span>,
+        id
+      )
+    } else update.notifyFailure('oops', loadingId)
+  }
+
+  const savePattern = async () => {
+    //setLoadingStatus([true, 'savingPattern'])
+    const patternData = {
+      design: state.design,
+      settings: state.settings,
+      name,
+      public: false,
+      data: {},
+    }
+    const result = await backend.updatePattern(saveAs.pattern, patternData)
+    if (result.success) {
+      //setLoadingStatus([
+      //  true,
+      //  <>
+      //    {t('status:patternSaved')} <small>[#{saveAs.pattern}]</small>
+      //  </>,
+      //  true,
+      //  true,
+      //])
+      setSavedId(saveAs.pattern)
+      update.notify({ color: 'success', msg: 'boom' }, saveAs.pattern)
+    } //else setLoadingStatus([true, 'backendError', true, false])
+  }
+
+  //const bookmarkPattern = async () => {
+  //  setLoadingStatus([true, 'creatingBookmark'])
+  //  const result = await backend.createBookmark({
+  //    type: 'pattern',
+  //    title: name,
+  //    url: window.location.pathname + window.location.search + window.location.hash,
+  //  })
+  //  if (result.success) {
+  //    const id = result.data.bookmark.id
+  //    setLoadingStatus([
+  //      true,
+  //      <>
+  //        {t('status:bookmarkCreated')} <small>[#{id}]</small>
+  //      </>,
+  //      true,
+  //      true,
+  //    ])
+  //    setBookmarkedId(id)
+  //  } else setLoadingStatus([true, 'backendError', true, false])
+  //}
+
+  return (
+    <Swizzled.components.AuthWrapper>
+      <Swizzled.components.HeaderMenu {...{ state, update }} />
+      <div className="m-auto mt-8 max-w-2xl px-4">
+        {saveAs && saveAs.pattern ? (
+          <>
+            <h2>{t('pe:savePattern')}</h2>
+            {savedId && (
+              <Swizzled.components.Popout link>
+                <h5>{t('workbend:patternSaved')}</h5>
+                {t('pe:see')}:{' '}
+                <Swizzled.components.PageLink
+                  href={`/account/patterns/${savedId}`}
+                  txt={`/account/patterns/${savedId}`}
+                />
+              </Swizzled.components.Popout>
+            )}
+            <button
+              className={`${Swizzled.config.classeshorFlexNoSm} btn btn-primary btn-lg w-full mt-2 my-8`}
+              onClick={savePattern}
+            >
+              <Swizzled.components.SaveIcon className="h-8 w-8" />
+              {t('pe:savePattern')} #{saveAs.pattern}
+            </button>
+          </>
+        ) : null}
+        <h2>{t('pe:saveAsNewPattern')}</h2>
+        {bookmarkedId && (
+          <Swizzled.components.Popout link>
+            <h5>{t('pe:patternBookmarkCreated')}</h5>
+            {t('pe:see')}:{' '}
+            <Swizzled.components.PageLink
+              href={`/account/bookmarks/${bookmarkedId}`}
+              txt={`/account/bookmarks/${bookmarkedId}`}
+            />
+          </Swizzled.components.Popout>
+        )}
+        <div className="mb-4">
+          <Swizzled.components.StringInput
+            label={t('pe:patternTitle')}
+            current={name}
+            update={setName}
+            valid={Swizzled.methods.notEmpty}
+            labelBR={
+              <>
+                {withNotes ? (
+                  <div className="flex flex-row items-center gap-4">
+                    <button
+                      className={`font-bold ${Swizzled.config.classes.link}`}
+                      onClick={() => setWithNotes(false)}
+                    >
+                      {t('pe:hideNotes')}
+                    </button>
+                    <button
+                      className={`font-bold ${Swizzled.config.classes.link}`}
+                      onClick={addSettingsToNotes}
+                    >
+                      {t('pe:addSettingsToNotes')}
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    className={`font-bold ${Swizzled.config.classes.link}`}
+                    onClick={() => setWithNotes(true)}
+                  >
+                    {t('pe:addNotes')}
+                  </button>
+                )}
+              </>
+            }
+          />
+          {withNotes ? (
+            <Swizzled.components.MarkdownInput
+              label={t('pe:patternNotes')}
+              current={notes}
+              update={setNotes}
+            />
+          ) : null}
+          <div className="flex flex-row gap-2 mt-8">
+            <button
+              className={`btn btn-primary btn-lg btn-outline`}
+              onClick={update.viewBack}
+              title={t('pe:cancel')}
+            >
+              <span>{t('pe:cancel')}</span>
+            </button>
+            <button
+              className={`flex flex-row items-center justify-between btn btn-primary btn-lg grow`}
+              onClick={saveAsNewPattern}
+              title={t('pe:saveAsNewPattern')}
+            >
+              <Swizzled.components.SaveAsIcon className="w-8 h-8" />
+              <span>{t('pe:saveAsNewPattern')}</span>
+            </button>
+          </div>
+          <p className="text-sm text-right">
+            To access your saved patterns, go to:{' '}
+            <b>
+              <Swizzled.components.PageLink href="//account/patterns">
+                /account/patterns
+              </Swizzled.components.PageLink>
+            </b>
+          </p>
+        </div>
+      </div>
+    </Swizzled.components.AuthWrapper>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/sets.mjs b/packages/react-components/src/editor/swizzle/components/sets.mjs
new file mode 100644
index 00000000000..54d77e1bca6
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/sets.mjs
@@ -0,0 +1,225 @@
+import { useState, useEffect } from 'react'
+import orderBy from 'lodash.orderby'
+
+export const UserSetPicker = ({
+  Design,
+  clickHandler,
+  missingClickHandler,
+  size = 'lg',
+  Swizzled,
+}) => {
+  // Swizzled components
+  const { Popout, MeasurementsSetCard } = Swizzled.components
+  // Swizzled hooks
+  const { useBackend } = Swizzled.hooks
+  const backend = useBackend()
+  // Swizzled methods
+  const { t, hasRequiredMeasurements } = Swizzled.methods
+  // Swizzled config
+  const { config } = Swizzled
+
+  // Local state
+  const [sets, setSets] = useState({})
+
+  // Effects
+  useEffect(() => {
+    const getSets = async () => {
+      const result = await backend.getSets()
+      if (result.success) {
+        const all = {}
+        for (const set of result.data.sets) all[set.id] = set
+        setSets(all)
+      }
+    }
+    getSets()
+  }, [backend])
+  let hasSets = false
+  const okSets = []
+  const lackingSets = []
+  if (Object.keys(sets).length > 0) {
+    hasSets = true
+    for (const setId in sets) {
+      const [hasMeasies] = hasRequiredMeasurements(Design, sets[setId].measies)
+      if (hasMeasies) okSets.push(sets[setId])
+      else lackingSets.push(sets[setId])
+    }
+  }
+
+  if (!hasSets)
+    return (
+      <div className="w-full max-w-3xl mx-auto">
+        <Popout tip>
+          <h5>{t('pe:noOwnSets')}</h5>
+          <p className="">{t('pe:noOwnSetsMsg')}</p>
+          {config.hrefNewSet ? (
+            <a
+              href={config.hrefNewSet}
+              className="btn btn-accent capitalize"
+              target="_BLANK"
+              rel="nofollow"
+            >
+              {t('pe:newSet')}
+            </a>
+          ) : null}
+          <p className="text-sm">{t('pe:pleaseMtm')}</p>
+        </Popout>
+      </div>
+    )
+
+  return (
+    <>
+      {okSets.length > 0 && (
+        <div className="flex flex-row flex-wrap gap-2">
+          {okSets.map((set) => (
+            <MeasurementsSetCard
+              href={false}
+              {...{ set, Design, config }}
+              onClick={clickHandler}
+              key={set.id}
+              size={size}
+            />
+          ))}
+        </div>
+      )}
+      {lackingSets.length > 0 ? (
+        <div className="my-4">
+          <Popout note compact>
+            {t('pe:someSetsLacking')}
+          </Popout>
+          <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-2">
+            {lackingSets.map((set) => (
+              <MeasurementsSetCard
+                {...{ set, Design }}
+                onClick={missingClickHandler}
+                href={false}
+                key={set.id}
+                size={size}
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </>
+  )
+}
+
+export const BookmarkedSetPicker = ({
+  Design,
+  clickHandler,
+  missingClickHandler,
+  size = 'lg',
+  Swizzled,
+}) => {
+  // Swizzled components
+  const { Popout, MeasurementsSetCard } = Swizzled.components
+  // Swizzled hooks
+  const { useBackend } = Swizzled.hooks
+  const backend = useBackend()
+  // Swizzled methods
+  const { t, hasRequiredMeasurements } = Swizzled.methods
+  // Swizzled config
+  const { config } = Swizzled
+
+  // Local state
+  const [sets, setSets] = useState({})
+
+  // Effects
+  useEffect(() => {
+    const getBookmarks = async () => {
+      const result = await backend.getBookmarks()
+      const loadedSets = {}
+      if (result.success) {
+        for (const bookmark of result.data.bookmarks.filter(
+          (bookmark) => bookmark.type === 'set'
+        )) {
+          let set
+          try {
+            set = await backend.getSet(bookmark.url.slice(6))
+            if (set.success) {
+              const [hasMeasies] = hasRequiredMeasurements(Design, set.data.set.measies)
+              loadedSets[set.data.set.id] = { ...set.data.set, hasMeasies }
+            }
+          } catch (err) {
+            console.log(err)
+          }
+        }
+      }
+      setSets(loadedSets)
+    }
+    getBookmarks()
+  }, [])
+
+  const okSets = Object.values(sets).filter((set) => set.hasMeasies)
+  const lackingSets = Object.values(sets).filter((set) => !set.hasMeasies)
+
+  return (
+    <>
+      {okSets.length > 0 && (
+        <div className="flex flex-row flex-wrap gap-2">
+          {okSets.map((set) => (
+            <MeasurementsSetCard
+              href={false}
+              {...{ set, Design, config }}
+              onClick={clickHandler}
+              key={set.id}
+              size={size}
+            />
+          ))}
+        </div>
+      )}
+      {lackingSets.length > 0 && (
+        <div className="my-4">
+          <Popout note compact>
+            {t('pe:someSetsLacking')}
+          </Popout>
+          <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-2">
+            {lackingSets.map((set) => (
+              <MeasurementsSetCard
+                href={false}
+                {...{ set, Design }}
+                onClick={missingClickHandler}
+                key={set.id}
+                size={size}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export const CuratedSetPicker = ({ clickHandler, Swizzled, locale }) => {
+  // Swizzled components
+  const { CuratedMeasurementsSetLineup } = Swizzled.components
+  // Swizzled hooks
+  const { useBackend } = Swizzled.hooks
+  const backend = useBackend()
+
+  // Local state
+  const [sets, setSets] = useState([])
+
+  // Effects
+  useEffect(() => {
+    const getSets = async () => {
+      const result = await backend.getCuratedSets()
+      if (result.success) {
+        const allSets = {}
+        for (const set of result.data.curatedSets) {
+          if (set.published) allSets[set.id] = set
+        }
+        setSets(allSets)
+      }
+    }
+    getSets()
+  }, [])
+
+  return (
+    <div className="max-w-7xl xl:pl-4">
+      <CuratedMeasurementsSetLineup
+        {...{ locale, clickHandler }}
+        sets={orderBy(sets, 'height', 'asc')}
+      />
+    </div>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/spinner.mjs b/packages/react-components/src/editor/swizzle/components/spinner.mjs
new file mode 100644
index 00000000000..2c1f9ee445a
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/spinner.mjs
@@ -0,0 +1,21 @@
+export const Spinner = ({ className = 'h-6 w-6 animate-spin' }) => (
+  <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    ></circle>
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+)
+
+export const Loading = () => (
+  <Spinner className="w-24 h-24 color-primary animate-spin m-auto mt-8" />
+)
diff --git a/packages/react-components/src/editor/swizzle/components/tabs.mjs b/packages/react-components/src/editor/swizzle/components/tabs.mjs
new file mode 100644
index 00000000000..29c7ff1df6b
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/tabs.mjs
@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+
+export const Tabs = ({ tabs = '', active = 0, children, withModal = false, Swizzled }) => {
+  // Keep active tab in state
+  const [activeTab, setActiveTab] = useState(active)
+
+  /*
+   * In MDX, tabs are passed as a comma-seperated list.
+   * In React, they come as an array.
+   * So we need to handle both cases.
+   */
+  const tablist = Array.isArray(tabs) ? tabs : tabs.split(',').map((tab) => tab.trim())
+
+  /*
+   * Don't bother unless there's actual tabs to show
+   */
+  if (!tablist) return null
+
+  /*
+   * Pass down activeTab and tabId for conditional rendering
+   */
+  const childrenWithTabSetter = children.map((child, tabId) =>
+    React.cloneElement(child, { activeTab, tabId, key: tabId })
+  )
+
+  return (
+    <div className="my-4">
+      <div className="tabs">
+        {tablist.map((title, tabId) => {
+          const btnClasses = `text-lg font-bold capitalize tab h-auto tab-bordered grow py-2 ${
+            activeTab === tabId ? 'tab-active' : ''
+          }`
+
+          return withModal && activeTab === tabId ? (
+            <button
+              key={tabId}
+              className={btnClasses}
+              onClick={() =>
+                Swizzled.methods.setModal(
+                  <Swizzled.components.ModalWrapper
+                    flex="col"
+                    justify="top lg:justify-center"
+                    slideFrom="right"
+                    fullWidth
+                  >
+                    {childrenWithTabSetter}
+                  </Swizzled.components.ModalWrapper>
+                )
+              }
+            >
+              <span className="pr-2">{title}</span>
+              <Swizzled.components.KioskIcon className="w-6 h-6 hover:text-secondary" />
+            </button>
+          ) : (
+            <button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}>
+              {title}
+            </button>
+          )
+        })}
+      </div>
+      <div>{childrenWithTabSetter}</div>
+    </div>
+  )
+}
+
+export const Tab = ({ children, tabId, activeTab }) => (activeTab === tabId ? children : null)
diff --git a/packages/react-components/src/editor/swizzle/components/tooltip.mjs b/packages/react-components/src/editor/swizzle/components/tooltip.mjs
new file mode 100644
index 00000000000..4e704e66dd9
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/tooltip.mjs
@@ -0,0 +1,13 @@
+export const Tooltip = (props) => {
+  const { children, tip, ...rest } = props
+
+  return (
+    <div
+      {...rest}
+      className={`tooltip tooltip-bottom before:bg-base-200 before:shadow before:text-base-content`}
+      data-tip={tip}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/undos-view.mjs b/packages/react-components/src/editor/swizzle/components/undos-view.mjs
new file mode 100644
index 00000000000..2093d8aad07
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/undos-view.mjs
@@ -0,0 +1,144 @@
+import orderBy from 'lodash.orderby'
+
+/**
+ * The undos view shows the undo history, and allows restoring any undo state
+ *
+ * @param (object) props - All the props
+ * @param {object} props.swizzled - An object with swizzled components, hooks, methods, config, and defaults
+ * @param {object} designs - Object holding all designs
+ * @param {object} update - ViewWrapper state update object
+ */
+export const UndosView = ({ Design, Swizzled, update, state }) => {
+  const steps = orderBy(state._.undos, 'time', 'desc')
+
+  return (
+    <>
+      <Swizzled.components.HeaderMenu state={state} {...{ Swizzled, update, Design }} />
+      <div className="text-left mt-8 mb-24 px-4 max-w-xl mx-auto">
+        <h2>{Swizzled.methods.t('pe:view.undos.t')}</h2>
+        <p>{Swizzled.methods.t('pe:view.undos.d')}</p>
+        <small>
+          <b>Tip:</b> Click on any change to undo all changes up to, and including, that change.
+        </small>
+        {steps.length < 1 ? (
+          <Swizzled.components.Popout note>
+            <h4>Your undo history is currently empty</h4>
+            <p>When you make changes to your pattern, they will show up here.</p>
+            <p>For example, you can click the button below to change the pattern rotation:</p>
+            <button
+              className="btn btn-primary capitalize"
+              onClick={() => update.settings('ui.rotate', state.settings?.ui?.rotate ? 0 : 1)}
+            >
+              {Swizzled.methods.t('pe:example')}: {Swizzled.methods.t('pe:rotate.t')}
+            </button>
+            <p>As soon as you do, the change will show up here, and you can undo it.</p>
+          </Swizzled.components.Popout>
+        ) : (
+          <div className="flex flex-col gap-2 mt-4">
+            {steps.map((step, index) => (
+              <Swizzled.components.UndoStep
+                key={step.time}
+                {...{ step, update, state, Design, index }}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+export const UndoStepTimeAgo = ({ Swizzled, step }) => {
+  if (!step.time) return null
+  const secondsAgo = Math.floor((Date.now() - step.time) / 100) / 10
+  const minutesAgo = Math.floor(secondsAgo / 60)
+  const hoursAgo = Math.floor(minutesAgo / 60)
+
+  return hoursAgo ? (
+    <span>
+      {hoursAgo} {Swizzled.methods.t('pe:hoursAgo')}
+    </span>
+  ) : minutesAgo ? (
+    <span>
+      {minutesAgo} {Swizzled.methods.t('pe:minutesAgo')}
+    </span>
+  ) : (
+    <span>
+      {secondsAgo} {Swizzled.methods.t('pe:secondsAgo')}
+    </span>
+  )
+}
+
+export const UndoStep = ({ Swizzled, update, state, step, Design, compact = false, index = 0 }) => {
+  const { t } = Swizzled.methods
+
+  /*
+   * Ensure path is always an array
+   */
+  if (!Array.isArray(step.path)) step.path = step.path.split('.')
+
+  /*
+   * Figure this out once
+   */
+  const imperial = state.settings?.units === 'imperial' ? true : false
+
+  /*
+   * Metadata can be ignored
+   */
+  if (step.name === 'settings' && step.path[1] === 'metadata') return null
+
+  /*
+   * Defer for anything else to this method
+   */
+  const data = Swizzled.methods.getUndoStepData({ step, state, Design, imperial })
+
+  if (data === false) return <pre>{JSON.stringify(step, null, 2)}</pre> //null
+  if (data === null) return <p>Unsupported</p>
+
+  if (compact)
+    return (
+      <Swizzled.components.ButtonFrame dense onClick={() => update.restore(index, state._)}>
+        <div className="flex flex-row items-center align-start gap-2 w-full">
+          <Swizzled.components.UndoIcon text={index} className="w-5 h-5 text-secondary" />
+          {data.msg ? data.msg : t(`pe:${data.optCode}`)}
+        </div>
+      </Swizzled.components.ButtonFrame>
+    )
+
+  return (
+    <>
+      <p className="text-sm italic font-medium opacity-70 text-right p-0 m-0 -mb-2 pr-2">
+        <Swizzled.components.UndoStepTimeAgo step={step} />
+      </p>
+      <Swizzled.components.ButtonFrame onClick={() => update.restore(index, state._)}>
+        <div className="flex flex-row items-center justify-between gap-2 w-full m-0 p-0 -mt-2 text-lg">
+          <span className="flex flex-row gap-2 items-center">
+            {data.fieldIcon || null}
+            {t(`pe:${data.optCode}`)}
+          </span>
+          <span className="opacity-70 flex flex-row gap-1 items-center text-base">
+            {data.icon || null} {t(`pe:${data.titleCode}`)}
+          </span>
+        </div>
+        <div className="flex flex-row gap-1 items-center align-start w-full">
+          {data.msg ? (
+            data.msg
+          ) : (
+            <>
+              <span className="">
+                {Array.isArray(data.newVal) ? data.newVal.join(', ') : data.newVal}
+              </span>
+              <Swizzled.components.LeftIcon
+                className="w-4 h-4 text-secondary shrink-0"
+                stroke={4}
+              />
+              <span className="line-through decoration-1 opacity-70">
+                {Array.isArray(data.oldVal) ? data.oldVal.join(', ') : data.oldVal}
+              </span>
+            </>
+          )}
+        </div>
+      </Swizzled.components.ButtonFrame>
+    </>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/ux.mjs b/packages/react-components/src/editor/swizzle/components/ux.mjs
new file mode 100644
index 00000000000..a48f72a2781
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/ux.mjs
@@ -0,0 +1,12 @@
+export const Ux = ({ Swizzled, ux = 0 }) => (
+  <div className="flex flex-row">
+    {[0, 1, 2, 3, 4].map((i) => (
+      <Swizzled.components.CircleIcon
+        key={i}
+        fill={i < ux ? true : false}
+        className={`w-6 h-6 ${i < ux ? 'stroke-secondary fill-secondary' : 'stroke-current'}`}
+        fillOpacity={0.3}
+      />
+    ))}
+  </div>
+)
diff --git a/packages/react-components/src/editor/swizzle/components/view-picker.mjs b/packages/react-components/src/editor/swizzle/components/view-picker.mjs
new file mode 100644
index 00000000000..0b84fe656fc
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/view-picker.mjs
@@ -0,0 +1,111 @@
+import { useState } from 'react'
+
+/**
+ * The design view is loaded if and only if not design is passed to the editor
+ *
+ * @param (object) props - All the props
+ * @param {object} props.swizzled - An object with swizzled components, hooks, methods, config, and defaults
+ * @param {object} designs - Object holding all designs
+ * @param {object} update - ViewWrapper state update object
+ */
+export const ViewPicker = ({ Design, Swizzled, update, state }) => {
+  const [showDev, setShowDev] = useState(false)
+
+  /*
+   * If we don't have the measurments, only present measurements free views
+   */
+  if (state._.missingMeasurements.length > 1)
+    return (
+      <div className="text-center mt-8 mb-24 px-4 max-w-xl mx-auto">
+        <h2>{Swizzled.methods.t('Choose an activity')}</h2>
+        <div className="flex flex-col mx-auto justify-center gap-2 mt-4">
+          {Swizzled.config.measurementsFreeViews
+            .filter((view) => view !== 'picker')
+            .map((view) => (
+              <MainCard key={view} {...{ view, update, Design, Swizzled }} />
+            ))}
+          <Swizzled.components.Popout note>
+            <div className="text-left">
+              <h5>{Swizzled.methods.t('pe:measurementsFreeViewsOnly.t')}:</h5>
+              <p>{Swizzled.methods.t('pe:measurementsFreeViewsOnly.d')}</p>
+            </div>
+          </Swizzled.components.Popout>
+        </div>
+      </div>
+    )
+
+  return (
+    <div className="text-center mt-8 mb-24 px-4">
+      <h2>{Swizzled.methods.t('Choose an activity')}</h2>
+      <div className="max-w-6xl grid grid-cols-1 lg:grid-cols-2 mx-auto justify-center gap-2 lg:gap-4 mt-4">
+        {Swizzled.config.mainViews.map((view) => (
+          <MainCard key={view} {...{ view, update, Design, Swizzled }} />
+        ))}
+      </div>
+      <div className="max-w-6xl grid grid-cols-1 lg:grid-cols-4 mx-auto justify-center gap-2 lg:gap-4 mt-4">
+        {Swizzled.config.extraViews.map((view) => (
+          <ExtraCard key={view} {...{ view, update, Swizzled }} />
+        ))}
+      </div>
+      {showDev || state.ui.ux > 3 ? (
+        <div className="max-w-6xl grid grid-cols-1 lg:grid-cols-4 mx-auto justify-center gap-2 lg:gap-4 mt-4">
+          {Swizzled.config.devViews.map((view) => (
+            <ExtraCard key={view} {...{ view, update, Swizzled }} />
+          ))}
+        </div>
+      ) : null}
+      {state.ui.ux < 4 ? (
+        <button className="btn btn-ghost mt-2" onClick={() => setShowDev(!showDev)}>
+          {Swizzled.methods.t(`pe:${showDev ? 'hide' : 'show'}AdvancedOptions`)}
+        </button>
+      ) : null}
+    </div>
+  )
+}
+
+const MainCard = ({ view, Swizzled, update, Design }) => {
+  const Icon = Swizzled.components[`View${Swizzled.methods.capitalize(view)}Icon`]
+  const { NoIcon } = Swizzled.components
+  const color = Swizzled.config.mainViewColors[view] || 'neutral'
+  return (
+    <button
+      className={`border shadow p-4 rounded-lg w-full bg-${
+        color === 'none' ? 'secondary' : color
+      } ${
+        color === 'none' ? 'bg-opacity-10 hover:bg-opacity-20' : 'hover:bg-opacity-90'
+      } flex flex-col`}
+      title={Swizzled.methods.t(`pe:view.${view}.t`)}
+      onClick={() => update.view(view)}
+    >
+      <h4
+        className={`flex flex-row items-center justify-between p-0 text-${color}-content mb-2 text-left`}
+      >
+        {Swizzled.methods.t(`pe:view.${view}.t`)}
+        {Icon ? <Icon className="w-10 h-10" /> : <NoIcon className="w-10 h-10" />}
+      </h4>
+      <p className={`text-left text-lg m-0 p-0 text-${color}-content grow-2`}>
+        {Swizzled.methods.t(`pe:view.${view}.d`, {
+          design: `${Design.designConfig.data.name} v${Design.designConfig.data.version}`,
+        })}
+      </p>
+    </button>
+  )
+}
+
+const ExtraCard = ({ view, Swizzled, update }) => {
+  const Icon = Swizzled.components[`View${Swizzled.methods.capitalize(view)}Icon`]
+  const { NoIcon } = Swizzled.components
+  return (
+    <button
+      className="border shadow p-3 rounded-lg w-full hover:bg-secondary hover:bg-opacity-20 flex flex-col"
+      title={Swizzled.methods.t(`pe:view.${view}.t`)}
+      onClick={() => update.view(view)}
+    >
+      <h5 className="flex flex-row items-center justify-between p-0 mb-1 text-left">
+        {Swizzled.methods.t(`pe:view.${view}.t`)}
+        {Icon ? <Icon className="w-8 h-8" /> : <NoIcon className="w-8 h-8" />}
+      </h5>
+      <p className="text-left m-0 p-0 grow-2">{Swizzled.methods.t(`pe:view.${view}.d`)}</p>
+    </button>
+  )
+}
diff --git a/packages/react-components/src/editor/swizzle/components/zoomable-pattern.mjs b/packages/react-components/src/editor/swizzle/components/zoomable-pattern.mjs
new file mode 100644
index 00000000000..8d6566c0d16
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/components/zoomable-pattern.mjs
@@ -0,0 +1,88 @@
+import React, { useState, useMemo, useCallback, forwardRef, useContext } from 'react'
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
+
+/*
+ * A pattern you can pan and zoom
+ */
+export const ZoomablePattern = forwardRef(function ZoomablePatternRef(props, ref) {
+  const { renderProps, Swizzled, rotate } = props
+  const { onTransformed, setZoomFunctions } = useContext(ZoomContext)
+
+  return (
+    <TransformWrapper
+      minScale={0.1}
+      centerZoomedOut={true}
+      wheel={{ activationKeys: ['Control'] }}
+      doubleClick={{ mode: 'reset' }}
+      onTransformed={onTransformed}
+      onInit={setZoomFunctions}
+    >
+      <TransformComponent
+        wrapperStyle={{ width: '100%', height: '100%' }}
+        contentStyle={{ width: '100%', height: '100%' }}
+        wrapperClass={'pan-zoom-pattern'}
+        id="pan-zoom-pattern"
+      >
+        {props.children || (
+          <Swizzled.components.Pattern
+            {...{ renderProps }}
+            t={Swizzled.methods.t}
+            ref={ref}
+            className={`freesewing pattern w-full ${rotate ? '-rotate-90' : ''}`}
+          />
+        )}
+      </TransformComponent>
+    </TransformWrapper>
+  )
+})
+
+/*
+ * Context
+ */
+
+/**
+ * A context for managing zoom state of a ZoomablePattern
+ * Makes transform handlers to be available in components
+ */
+const ZoomContext = React.createContext({})
+
+/**
+ * Provider for the ZoomContext
+ */
+export const ZoomContextProvider = ({ children }) => {
+  const [zoomed, setZoomed] = useState(false)
+  const [zoomFunctions, _setZoomFunctions] = useState(false)
+
+  const setZoomFunctions = useCallback(
+    (zoomInstance) => {
+      const reset = () => {
+        setZoomed(false)
+        zoomInstance.resetTransform()
+      }
+
+      if (zoomInstance) {
+        const { zoomIn, zoomOut, resetTransform } = zoomInstance
+        _setZoomFunctions({ zoomIn, zoomOut, resetTransform, reset })
+      }
+    },
+    [_setZoomFunctions, setZoomed]
+  )
+
+  const onTransformed = useCallback(
+    (_ref, state) => {
+      setZoomed(state.scale !== 1)
+    },
+    [setZoomed]
+  )
+
+  const value = useMemo(() => {
+    return {
+      zoomed,
+      zoomFunctions,
+      setZoomFunctions,
+      onTransformed,
+    }
+  }, [zoomed, zoomFunctions, setZoomFunctions, onTransformed])
+
+  return <ZoomContext.Provider value={value}>{children}</ZoomContext.Provider>
+}
diff --git a/packages/react-components/src/editor/swizzle/config.mjs b/packages/react-components/src/editor/swizzle/config.mjs
new file mode 100644
index 00000000000..5ea04e81f04
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/config.mjs
@@ -0,0 +1,198 @@
+/*************************************************************************
+ *                                                                       *
+ * FreeSewing's pattern editor allows swizzling the config               *
+ *                                                                       *
+ * To 'swizzle' means to replace a default implementation with a         *
+ * custom one. It allows one to customize the pattern editor.            *
+ *                                                                       *
+ * This file holds the 'swizzleConfig' method that will return           *
+ * the merged configuration.                                             *
+ *                                                                       *
+ * To use a custom config, simply pas it as a prop into the editor       *
+ * under the 'config' key. So to pass a custom 'newSet' link (used to    *
+ * link to a page to create a new measurements set), you do:             *
+ *                                                                       *
+ * <PatternEditor config={{ newSet: '/my/custom/page' }} />              *
+ *                                                                       *
+ *************************************************************************/
+
+/*
+ * Default config for the FreeSewing pattern editor
+ */
+export const defaultConfig = {
+  // Enable use of a (FreeSewing) backend to load data from
+  enableBackend: true,
+  // Link to create a new measurements set, set to false to disable
+  hrefNewSet: 'https://freesewing.org/new/set',
+  // Cloud default image
+  cloudImageDflt:
+    'https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/365cc64e-1502-4d2b-60e0-cc8beee73f00/public',
+  // Cloud image base URL
+  cloudImageUrl: 'https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/',
+  // Cloud image variants
+  cloudImageVariants: ['public', 'sq100', 'sq200', 'sq500', 'w200', 'w500', 'w1000', 'w2000'],
+  // Views
+  mainViews: ['draft', 'designs', 'save', 'export'],
+  extraViews: ['measurements', 'undos', 'printLayout', 'docs'],
+  devViews: ['editSettings', 'inspect', 'logs', 'test', 'timing'],
+  utilViews: ['picker'],
+  measurementsFreeViews: ['designs', 'measurements', 'docs', 'picker'],
+  mainViewColors: {
+    draft: 'primary',
+    save: 'none',
+    export: 'none',
+    designs: 'accent',
+    measurements: 'primary',
+    docs: 'secondary',
+  },
+  // View components
+  // Facilitate lookup of view components
+  viewComponents: {
+    draft: 'DraftView',
+    designs: 'DesignsView',
+    save: 'SaveView',
+    export: 'ViewPicker',
+    measurements: 'MeasurementsView',
+    undos: 'UndosView',
+    printLayout: 'ViewPicker',
+    editSettings: 'ViewPicker',
+    docs: 'ViewPicker',
+    inspect: 'ViewPicker',
+    logs: 'ViewPicker',
+    test: 'ViewPicker',
+    timing: 'ViewPicker',
+    picker: 'ViewPicker',
+    error: 'ViewPicker',
+  },
+  // Facilitate lookup of menu value components
+  menuValueComponents: {
+    bool: 'BoolValue',
+    constant: 'ConstantOptionValue',
+    count: 'CountOptionValue',
+    deg: 'DegOptionValue',
+    list: 'ListOptionValue',
+    mm: 'MmOptionValue',
+    pct: 'PctOptionValue',
+  },
+  // Facilitate custom handlers for core settings
+  menuCoreSettingsHandlerMethods: {
+    only: 'menuCoreSettingsOnlyHandler',
+    sabool: 'menuCoreSettingsSaboolHandler',
+    samm: 'menuCoreSettingsSammHandler',
+  },
+  menuGroupEmojis: {
+    advanced: '🤓',
+    fit: '👕',
+    style: '💃🏽',
+    dflt: '🕹️',
+    groupDflt: '📁',
+  },
+  menuOptionEditLabels: {
+    pct: '%',
+    count: '#',
+    deg: '°',
+    mm: 'mm',
+  },
+  // i18n
+  i18nPatternNamespaces: ['plugin-annotations'],
+  // State backend (one of 'react', 'storage', 'session', or 'url')
+  stateBackend: 'url',
+  // UX levels
+  uxLevels: {
+    core: {
+      sa: 1,
+      paperless: 2,
+      units: 1,
+      complete: 3,
+      expand: 4,
+      only: 4,
+      scale: 3,
+      margin: 3,
+    },
+    ui: {
+      renderer: 4,
+      aside: 3,
+      kiosk: 3,
+      rotate: 4,
+      ux: 1,
+    },
+    views: {
+      draft: 1,
+      measurements: 1,
+      test: 4,
+      timing: 4,
+      printLayout: 2,
+      export: 1,
+      save: 1,
+      undos: 2,
+      editSettings: 3,
+      logs: 4,
+      inspect: 4,
+      docs: 1,
+      designs: 1,
+      picker: 1,
+    },
+  },
+  defaultUx: 4,
+  // Flag types
+  flagTypes: ['error', 'warn', 'note', 'info', 'tip', 'fixme'],
+  // Initial state
+  initialState: {
+    settings: {},
+    ui: {
+      renderer: 'react',
+      kiosk: 0,
+      aside: 1,
+      ux: 4,
+    },
+    locale: 'en',
+  },
+  loadingStatus: {
+    timeout: 2,
+    defaults: {
+      color: 'secondary',
+      icon: 'Spinner',
+    },
+  },
+  classes: {
+    horFlex: 'flex flex-row items-center justify-between gap-4 w-full',
+    horFlexNoSm: 'md:flex md:flex-row md:items-center md:justify-between md:gap-4 md-w-full',
+    link: 'underline decoration-2 hover:decoration-4 text-secondary hover:text-secondary-focus',
+  },
+  roles: {
+    levels: {
+      readNone: 0,
+      readSome: 1,
+      readOnly: 2,
+      writeSome: 3,
+      user: 4,
+      tester: 4,
+      curator: 5,
+      bughunter: 6,
+      support: 8,
+      admin: 9,
+    },
+    base: 'user',
+  },
+  // Ms before to fade out a notification
+  notifyTimeout: 6660,
+  degreeMeasurements: ['shoulderSlope'],
+}
+
+/*
+ * This method returns the swizzled configuration
+ */
+export const swizzleConfig = (config = {}) => {
+  const mergedConfig = {
+    ...defaultConfig,
+    ...config,
+  }
+  mergedConfig.views = [
+    ...mergedConfig.mainViews,
+    ...mergedConfig.extraViews,
+    ...mergedConfig.devViews,
+    ...mergedConfig.utilViews,
+  ]
+
+  return mergedConfig
+}
diff --git a/packages/react-components/src/editor/swizzle/hooks/index.mjs b/packages/react-components/src/editor/swizzle/hooks/index.mjs
new file mode 100644
index 00000000000..ddde3bcc2e5
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/hooks/index.mjs
@@ -0,0 +1,73 @@
+/*************************************************************************
+ *                                                                       *
+ * FreeSewing's pattern editor allows swizzling hooks                    *
+ *                                                                       *
+ * To 'swizzle' means to replace the default implementation of a         *
+ * hook with a custom one. It allows one to customize                    *
+ * the pattern editor.                                                   *
+ *                                                                       *
+ * This file holds the 'swizzleHooks' method that will return            *
+ * the various hooks that can be swizzled, or their default              *
+ * implementation.                                                       *
+ *                                                                       *
+ * To use a custom version, simply pas it as a prop into the editor      *
+ * under the 'hooks' key. So to pass a custom 'useAccount' method        *
+ * (used for loading the user's account data) you do:                    *
+ *                                                                       *
+ * <PatternEditor hooks={{ useAccount: myCustomHook }} />                *
+ *                                                                       *
+ *************************************************************************/
+
+/*
+ * Import of components that can be swizzled
+ */
+// useAccount
+import { useAccount } from './use-account.mjs'
+import { useBackend } from './use-backend.mjs'
+import {
+  useReactEditorState,
+  useStorageEditorState,
+  useSessionEditorState,
+  useUrlEditorState,
+} from './use-editor-state.mjs'
+
+/*
+ * We support different state backend, so let's handle those
+ */
+const stateBackends = {
+  react: useReactEditorState,
+  storage: useStorageEditorState,
+  session: useSessionEditorState,
+  url: useUrlEditorState,
+}
+
+/**
+ * This object holds all hooks that can be swizzled
+ */
+const defaultHooks = (config) => ({
+  useAccount,
+  useBackend,
+  useEditorState: stateBackends[config.stateBackend] || useReactEditorState,
+})
+
+/*
+ * This method returns hooks that can be swizzled
+ * So either the passed-in methods, or the default ones
+ */
+export const swizzleHooks = (hooks = {}, Swizzled) => {
+  /*
+   * We need to return the resulting hooks, swizzled or not
+   * So we put this in this object so we can pass that down
+   */
+  const all = {}
+  for (const [name, hook] of Object.entries(defaultHooks(Swizzled.config))) {
+    all[name] = hooks[name]
+      ? (...params) => hooks[name](Swizzled, ...params)
+      : (...params) => hook(Swizzled, ...params)
+  }
+
+  /*
+   * Return all hooks
+   */
+  return all
+}
diff --git a/packages/react-components/src/editor/swizzle/hooks/use-account.mjs b/packages/react-components/src/editor/swizzle/hooks/use-account.mjs
new file mode 100644
index 00000000000..9e1b7e1a7f9
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/hooks/use-account.mjs
@@ -0,0 +1,59 @@
+import useLocalStorageState from 'use-local-storage-state'
+
+/*
+ * Make it possible to always check for account.username and account.ux
+ */
+const noAccount = { username: false, ux: 3 }
+
+/*
+ * The useAccount hook
+ */
+export function useAccount(Swizzled) {
+  // (persisted) State (saved to local storage)
+  const [account, setAccount] = useLocalStorageState('fs-account', { defaultValue: noAccount })
+  const [admin, setAdmin] = useLocalStorageState('fs-admin', { defaultValue: noAccount })
+  const [token, setToken] = useLocalStorageState('fs-token', { defaultValue: null })
+  const [seenUser, setSeenUser] = useLocalStorageState('fs-seen-user', { defaultValue: false })
+
+  // Clear user data. This gets called when signing out
+  const signOut = () => {
+    setAccount(noAccount)
+    setToken(null)
+  }
+
+  // Impersonate a user.
+  // Only admins can do this but that is enforced at the backend.
+  const impersonate = (data) => {
+    setAdmin({ token, account })
+    const newAccount = {
+      ...data.account,
+      impersonatingAdmin: { id: account.id, username: account.username },
+    }
+    setAdmin({ token, account: { ...account } })
+    setAccount(newAccount)
+    setToken(data.token)
+  }
+
+  const stopImpersonating = () => {
+    setAccount(admin.account)
+    setToken(admin.token)
+    clearAdmin()
+  }
+
+  const clearAdmin = () => setAdmin(noAccount)
+
+  return {
+    account,
+    setAccount,
+    token,
+    setToken,
+    seenUser,
+    setSeenUser,
+    signOut,
+    admin,
+    clearAdmin,
+    impersonate,
+    stopImpersonating,
+    ux: account?.control || account?.ux || Swizzled.config.defaultUx,
+  }
+}
diff --git a/packages/react-components/src/editor/swizzle/hooks/use-backend.mjs b/packages/react-components/src/editor/swizzle/hooks/use-backend.mjs
new file mode 100644
index 00000000000..c54b3087693
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/hooks/use-backend.mjs
@@ -0,0 +1,633 @@
+// Dependencies
+import axios from 'axios'
+// Hooks
+import { useMemo } from 'react'
+import { freeSewingConfig } from 'shared/config/freesewing.config.mjs'
+
+/*
+ * Helper methods to interact with the FreeSewing backend
+ */
+const apiHandler = axios.create({
+  baseURL: freeSewingConfig.backend,
+  timeout: 6660,
+})
+
+const auth = (token) =>
+  token ? { headers: { Authorization: 'Bearer ' + token } } : { headers: {} }
+
+/*
+ * This api object handles async code for different HTTP methods
+ */
+const api = {
+  get: async (uri, config = {}) => {
+    let result
+    try {
+      result = await apiHandler.get(uri, config)
+      return result
+    } catch (err) {
+      return err
+    }
+  },
+  post: async (uri, data = null, config = {}) => {
+    let result
+    try {
+      result = await apiHandler.post(uri, data, config)
+      return result
+    } catch (err) {
+      return err
+    }
+  },
+  put: async (uri, data = null, config = {}) => {
+    let result
+    try {
+      result = await apiHandler.put(uri, data, config)
+      return result
+    } catch (err) {
+      return err
+    }
+  },
+  patch: async (uri, data = null, config = {}) => {
+    let result
+    try {
+      result = await apiHandler.patch(uri, data, config)
+      return result
+    } catch (err) {
+      return err
+    }
+  },
+  delete: async (uri, config = {}) => {
+    let result
+    try {
+      result = await apiHandler.delete(uri, config)
+      return result
+    } catch (err) {
+      return err
+    }
+  },
+}
+
+/*
+ * Helper method to handle the response and verify that it was successful
+ */
+const responseHandler = (response, expectedStatus = 200, expectData = true) => {
+  if (response && response.status === expectedStatus) {
+    if (!expectData || response.data) {
+      return { success: true, data: response.data, response }
+    }
+    return { success: true, response }
+  }
+
+  // Unpack axios errors
+  if (response?.name === 'AxiosError')
+    return {
+      success: false,
+      status: response.response?.status,
+      data: response.response?.data,
+      error: response.message,
+    }
+
+  return { success: false, response }
+}
+
+function Backend(auth) {
+  this.auth = auth
+}
+
+/*
+ * backend.signUp: User signup
+ */
+Backend.prototype.signUp = async function ({ email, language }) {
+  return responseHandler(await api.post('/signup', { email, language }), 201)
+}
+
+/*
+ * backend.oauthInit: Init Oauth flow for oauth provider
+ */
+Backend.prototype.oauthInit = async function ({ provider, language }) {
+  return responseHandler(await api.post('/signin/oauth/init', { provider, language }))
+}
+
+/*
+ * backend.oauthSignIn: User sign in via oauth provider
+ */
+Backend.prototype.oauthSignIn = async function ({ state, code, provider }) {
+  return responseHandler(await api.post('/signin/oauth', { state, code, provider }))
+}
+
+/*
+ * Backend.prototype.loadConfirmation: Load a confirmation
+ */
+Backend.prototype.loadConfirmation = async function ({ id, check }) {
+  return responseHandler(await api.get(`/confirmations/${id}/${check}`))
+}
+/*
+ * Backend.prototype.confirmSignup: Confirm a signup
+ */
+Backend.prototype.confirmSignup = async function ({ id, consent }) {
+  return responseHandler(await api.post(`/confirm/signup/${id}`, { consent }))
+}
+
+/*
+ * Backend.prototype.signIn: User signin/login
+ */
+Backend.prototype.signIn = async function ({ username, password = false, token = false }) {
+  return password === false
+    ? responseHandler(await api.post('/signinlink', { username }))
+    : responseHandler(await api.post('/signin', { username, password, token }))
+}
+
+/*
+ * Backend.prototype.signInFromLink: Trade in sign-in link id & check for JWT token
+ */
+Backend.prototype.signInFromLink = async function ({ id, check }) {
+  return responseHandler(await api.post(`/signinlink/${id}/${check}`))
+}
+
+/*
+ * Generic update account method
+ */
+Backend.prototype.updateAccount = async function (data) {
+  return responseHandler(await api.patch(`/account/jwt`, data, this.auth))
+}
+
+/*
+ * Update consent (uses the jwt-guest middleware)
+ */
+Backend.prototype.updateConsent = async function (consent) {
+  return responseHandler(await api.patch(`/consent/jwt`, { consent }, this.auth))
+}
+
+/*
+ * Checks whether a username is available
+ */
+Backend.prototype.isUsernameAvailable = async function (username) {
+  const response = await api.post(`/available/username/jwt`, { username }, this.auth)
+
+  // 404 means username is available, which is success in this case
+  return response.status === 404
+    ? { success: true, data: false, available: true, response }
+    : { success: false, available: false, response }
+}
+
+/*
+ * Remove account method
+ */
+Backend.prototype.removeAccount = async function () {
+  return responseHandler(await api.delete(`/account/jwt`, this.auth))
+}
+/*
+ * Enable MFA
+ */
+Backend.prototype.enableMfa = async function () {
+  return responseHandler(await api.post(`/account/mfa/jwt`, { mfa: true }, this.auth))
+}
+
+/*
+ * Confirm MFA
+ */
+Backend.prototype.confirmMfa = async function (data) {
+  return responseHandler(await api.post(`/account/mfa/jwt`, { ...data, mfa: true }, this.auth))
+}
+
+/*
+ * Disable MFA
+ */
+Backend.prototype.disableMfa = async function (data) {
+  return responseHandler(await api.post(`/account/mfa/jwt`, { ...data, mfa: false }, this.auth))
+}
+
+/*
+ * Reload account
+ */
+Backend.prototype.reloadAccount = async function () {
+  return responseHandler(await api.get(`/whoami/jwt`, this.auth))
+}
+
+/*
+ * Export account data
+ */
+Backend.prototype.exportAccount = async function () {
+  return responseHandler(await api.get(`/account/export/jwt`, this.auth))
+}
+
+/*
+ * Restrict processing of account data
+ */
+Backend.prototype.restrictAccount = async function () {
+  return responseHandler(await api.get(`/account/restrict/jwt`, this.auth))
+}
+
+/*
+ * Remove account
+ */
+Backend.prototype.restrictAccount = async function () {
+  return responseHandler(await api.delete(`/account/jwt`, this.auth))
+}
+
+/*
+ * Load all user data
+ */
+Backend.prototype.getUserData = async function (uid) {
+  return responseHandler(await api.get(`/users/${uid}/jwt`, this.auth))
+}
+
+/*
+ * Load user profile
+ */
+Backend.prototype.getProfile = async function (uid) {
+  return responseHandler(await api.get(`/users/${uid}`))
+}
+
+/*
+ * Load user count
+ */
+Backend.prototype.getUserCount = async function () {
+  return responseHandler(await api.get(`/info/users`))
+}
+
+/*
+ * Load stats
+ */
+Backend.prototype.getStats = async function () {
+  return responseHandler(await api.get(`/info/stats`))
+}
+
+/*
+ * Create bookmark
+ */
+Backend.prototype.createBookmark = async function (data) {
+  return responseHandler(await api.post(`/bookmarks/jwt`, data, this.auth), 201)
+}
+
+/*
+ * Get bookmark
+ */
+Backend.prototype.getBookmark = async function (id) {
+  return responseHandler(await api.get(`/bookmarks/${id}/jwt`, this.auth))
+}
+/*
+ * Get bookmarks
+ */
+Backend.prototype.getBookmarks = async function () {
+  return responseHandler(await api.get(`/bookmarks/jwt`, this.auth))
+}
+
+/*
+ * Remove bookmark
+ */
+Backend.prototype.removeBookmark = async function (id) {
+  const response = await api.delete(`/bookmarks/${id}/jwt`, this.auth)
+
+  return response && response.status === 204 ? true : false
+}
+
+/*
+ * Create API key
+ */
+Backend.prototype.createApikey = async function (data) {
+  return responseHandler(await api.post(`/apikeys/jwt`, data, this.auth), 201)
+}
+
+/*
+ * Get API key
+ */
+Backend.prototype.getApikey = async function (id) {
+  return responseHandler(await api.get(`/apikeys/${id}/jwt`, this.auth))
+}
+
+/*
+ * Get API keys
+ */
+Backend.prototype.getApikeys = async function () {
+  return responseHandler(await api.get(`/apikeys/jwt`, this.auth))
+}
+
+/*
+ * Remove API key
+ */
+Backend.prototype.removeApikey = async function (id) {
+  const response = await api.delete(`/apikeys/${id}/jwt`, this.auth)
+
+  return response && response.status === 204 ? true : false
+}
+
+/*
+ * Get measurements sets
+ */
+Backend.prototype.getSets = async function () {
+  return responseHandler(await api.get(`/sets/jwt`, this.auth))
+}
+
+/*
+ * Get measurements set
+ */
+Backend.prototype.getSet = async function (id) {
+  return responseHandler(await api.get(`/sets/${id}/jwt`, this.auth))
+}
+
+/*
+ * Get public measurements set
+ */
+Backend.prototype.getPublicSet = async function (id) {
+  return responseHandler(await api.get(`/sets/${id}.json`))
+}
+
+/*
+ * Create measurements set
+ */
+Backend.prototype.createSet = async function (data) {
+  return responseHandler(await api.post(`/sets/jwt`, data, this.auth), 201)
+}
+
+/*
+ * Remove measurements set
+ */
+Backend.prototype.removeSet = async function (id) {
+  const response = await api.delete(`/sets/${id}/jwt`, this.auth)
+
+  return response && response.status === 204 ? true : false
+}
+
+/*
+ * Generic update measurements set method
+ */
+Backend.prototype.updateSet = async function (id, data) {
+  return responseHandler(await api.patch(`/sets/${id}/jwt`, data, this.auth))
+}
+
+/*
+ * Get curated measurements sets
+ */
+Backend.prototype.getCuratedSets = async function () {
+  return responseHandler(await api.get(`/curated-sets`))
+}
+
+/*
+ * Get measurements sets suggested for curation
+ */
+Backend.prototype.getSuggestedSets = async function () {
+  return responseHandler(await api.get(`/suggested-sets/jwt`, this.auth))
+}
+
+/*
+ * Get option packs suggested for curation
+ */
+Backend.prototype.getSuggestedPacks = async function () {
+  return responseHandler(await api.get(`/suggested-packs/jwt`, this.auth))
+}
+
+/*
+ * Remove suggested measurements set
+ */
+Backend.prototype.removeSuggestedMeasurementsSet = async function (id) {
+  const response = await api.delete(`/suggested-sets/${id}/jwt`, this.auth)
+
+  return response && response.status === 204 ? true : false
+}
+
+/*
+ * Get curated measurements set
+ */
+Backend.prototype.getCuratedSet = async function (id) {
+  return responseHandler(await api.get(`/curated-sets/${id}`))
+}
+
+/*
+ * Generic update curated measurements set method
+ */
+Backend.prototype.updateCuratedSet = async function (id, data) {
+  return responseHandler(await api.patch(`/curated-sets/${id}/jwt`, data, this.auth))
+}
+
+/*
+ * Remove curated measurements set
+ */
+Backend.prototype.removeCuratedMeasurementsSet = async function (id) {
+  const response = await api.delete(`/curated-sets/${id}/jwt`, this.auth)
+
+  return response && response.status === 204 ? true : false
+}
+
+/*
+ * Get pattern
+ */
+Backend.prototype.getPattern = async function (id) {
+  return responseHandler(await api.get(`/patterns/${id}/jwt`, this.auth))
+}
+
+/*
+ * Get public pattern
+ */
+Backend.prototype.getPublicPattern = async function (id) {
+  return responseHandler(await api.get(`/patterns/${id}.json`))
+}
+
+/*
+ * Get patterns
+ */
+Backend.prototype.getPatterns = async function () {
+  return responseHandler(await api.get(`/patterns/jwt`, this.auth))
+}
+
+/*
+ * Create pattern
+ */
+Backend.prototype.createPattern = async function (data) {
+  return responseHandler(await api.post(`/patterns/jwt`, data, this.auth), 201)
+}
+
+/*
+ * Remove pattern
+ */
+Backend.prototype.removePattern = async function (id) {
+  const response = await api.delete(`/patterns/${id}/jwt`, this.auth)
+
+  return response && response.status === 204 ? true : false
+}
+
+/*
+ * Generic update pattern set method
+ */
+Backend.prototype.updatePattern = async function (id, data) {
+  return responseHandler(await api.patch(`/patterns/${id}/jwt`, data, this.auth))
+}
+
+/*
+ * Create GitHub issue
+ */
+Backend.prototype.createIssue = async function (data) {
+  return responseHandler(await api.post(`/issues`, data), 201)
+}
+
+/*
+ * Create GitHub discussion
+ */
+Backend.prototype.createDiscussion = async function (data) {
+  return responseHandler(await api.post(`/discussions`, data), 201)
+}
+
+/*
+ * Check whether a slug is available
+ */
+Backend.prototype.isSlugAvailable = async function ({ slug, type }) {
+  const response = await api.get(`/slugs/${type}/${slug}/jwt`, this.auth)
+
+  // 404 means username is available, which is success in this case
+  return response.status === 200
+    ? { success: false, available: false, response }
+    : { success: true, data: false, available: true, response }
+}
+
+/*
+ * Create showcase/blog post (pull request)
+ */
+Backend.prototype.createPost = async function (type, data) {
+  return responseHandler(await api.post(`/flows/pr/${type}/jwt`, data, this.auth), 201)
+}
+
+/*
+ * Send translation invite
+ */
+Backend.prototype.sendTranslatorInvite = async function (language) {
+  return responseHandler(await api.post(`/flows/translator-invite/jwt`, { language }, this.auth))
+}
+
+/*
+ * Send language suggestion
+ */
+Backend.prototype.sendLanguageSuggestion = async function (data) {
+  return responseHandler(await api.post(`/flows/language-suggestion/jwt`, data, this.auth))
+}
+
+/*
+ * Subscribe to newsletter
+ */
+Backend.prototype.newsletterSubscribe = async function ({ email, language }) {
+  return responseHandler(await api.post('/subscriber', { email, language }))
+}
+
+/*
+ * Confirm newsletter subscribe
+ */
+Backend.prototype.confirmNewsletterSubscribe = async function ({ id, ehash }) {
+  return responseHandler(await api.put('/subscriber', { id, ehash }))
+}
+
+/*
+ * Newsletter unsubscribe
+ */
+Backend.prototype.newsletterUnsubscribe = async function (ehash) {
+  return responseHandler(await api.delete(`/subscriber/${ehash}`))
+}
+
+/*
+ * Upload an image
+ */
+Backend.prototype.uploadImage = async function (body) {
+  return responseHandler(await api.post('/images/jwt', body, this.auth))
+}
+
+/*
+ * Upload an image anonymously
+ */
+Backend.prototype.uploadAnonImage = async function (body) {
+  return responseHandler(await api.post('/images', body))
+}
+
+/*
+ * Remove an (uploaded) image
+ */
+Backend.prototype.removeImage = async function (id) {
+  return responseHandler(await api.delete(`/images/${id}/jwt`, this.auth))
+}
+
+/*
+ * Suggest a measurements set for curation
+ */
+Backend.prototype.suggestCset = async function (data) {
+  return responseHandler(await api.post(`/curated-sets/suggest/jwt`, data, this.auth))
+}
+
+/*
+ * Suggest an option pack
+ */
+Backend.prototype.suggestOpack = async function (data) {
+  return responseHandler(await api.post(`/option-packs/suggest/jwt`, data, this.auth))
+}
+
+/*
+ * Create a curated set from a suggested set
+ */
+Backend.prototype.csetFromSuggestedSet = async function (id) {
+  return responseHandler(await api.post(`/curated-sets/from/${id}/jwt`, {}, this.auth))
+}
+
+/*
+ * Ping backend to see if current token is still valid
+ */
+Backend.prototype.ping = async function () {
+  return responseHandler(await api.get(`/whoami/jwt`, this.auth))
+}
+
+/*
+ * Search user (admin method)
+ */
+Backend.prototype.adminSearchUsers = async function (q) {
+  return responseHandler(await api.post('/admin/search/users/jwt', { q }, this.auth))
+}
+
+/*
+ * Load user (admin method)
+ */
+Backend.prototype.adminLoadUser = async function (id) {
+  return responseHandler(await api.get(`/admin/user/${id}/jwt`, this.auth))
+}
+
+/*
+ * Update user (admin method)
+ */
+Backend.prototype.adminUpdateUser = async function ({ id, data }) {
+  return responseHandler(await api.patch(`/admin/user/${id}/jwt`, data, this.auth))
+}
+
+/*
+ * Impersonate user (admin method)
+ */
+Backend.prototype.adminImpersonateUser = async function (id) {
+  return responseHandler(await api.get(`/admin/impersonate/${id}/jwt`, this.auth))
+}
+
+/*
+ * Load newsletter subscribers (admin method)
+ */
+Backend.prototype.adminLoadSubscribers = async function () {
+  return responseHandler(await api.get(`/admin/subscribers/jwt`, this.auth))
+}
+
+/*
+ * Verify an admin account while impersonating another user
+ */
+Backend.prototype.adminPing = async function (token) {
+  return responseHandler(await api.get(`/whoami/jwt`, auth(token)))
+}
+
+/*
+ * backend.img: Generate a social media image
+ */
+Backend.prototype.img = async function (data) {
+  return responseHandler(await api.post('/img', data, { responseType: 'arraybuffer' }))
+}
+
+export function useBackend(Swizzled) {
+  /*
+   * Load swizzled useAccount hook and use it
+   */
+  const { token } = Swizzled.hooks.useAccount()
+
+  /*
+   * This backend object is what we'll end up returning
+   */
+  const backend = useMemo(() => new Backend(auth(token)), [token])
+
+  return backend
+}
diff --git a/packages/react-components/src/editor/swizzle/hooks/use-editor-state.mjs b/packages/react-components/src/editor/swizzle/hooks/use-editor-state.mjs
new file mode 100644
index 00000000000..e949f0bf902
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/hooks/use-editor-state.mjs
@@ -0,0 +1,120 @@
+import { useMemo, useState, useEffect } from 'react'
+import useLocalStorageState from 'use-local-storage-state'
+import useSessionStorageState from 'use-session-storage-state'
+import { useQueryState, createParser } from 'nuqs'
+
+/**
+ * react
+ * This holds the editor state, using React state.
+ * It also provides helper methods to manipulate state.
+ *
+ * @params {object} init - Initial pattern settings
+ * @return {array} return - And array with get, set, and update methods
+ */
+export const useReactEditorState = (Swizzled, init = {}, setEphemeralState) => {
+  const [state, setState] = useState(init)
+  const update = useMemo(
+    () => Swizzled.methods.stateUpdateFactory(setState, setEphemeralState),
+    [setState]
+  )
+
+  return [state, setState, update]
+}
+
+/**
+ * storage
+ * This holds the editor state, using local storage.
+ * It also provides helper methods to manipulate state.
+ *
+ * @params {object} init - Initial pattern settings
+ * @return {array} return - And array with get, set, and update methods
+ */
+export const useStorageEditorState = (Swizzled, init = {}, setEphemeralState) => {
+  const [state, setState] = useLocalStorageState('fs-editor', { defaultValue: init })
+  const update = useMemo(
+    () => Swizzled.methods.stateUpdateFactory(setState, setEphemeralState),
+    [setState]
+  )
+
+  return [state, setState, update]
+}
+
+/**
+ * session
+ * This holds the editor state, using session storage.
+ * It also provides helper methods to manipulate state.
+ *
+ * @params {object} init - Initial pattern settings
+ * @return {array} return - And array with get, set, and update methods
+ */
+export const useSessionEditorState = (Swizzled, init = {}, setEphemeralState) => {
+  const [state, setState] = useSessionStorageState('fs-editor', { defaultValue: init })
+  const update = useMemo(
+    () => Swizzled.methods.stateUpdateFactory(setState, setEphemeralState),
+    [setState]
+  )
+
+  return [state, setState, update]
+}
+
+/**
+ * url
+ * This holds the editor state, using session storage.
+ * It also provides helper methods to manipulate state.
+ *
+ * @params {object} init - Initial pattern settings
+ * @return {array} return - And array with get, set, and update methods
+ */
+export const useUrlEditorState = (Swizzled, init = {}, setEphemeralState) => {
+  const [state, setState] = useQueryState('s', pojoParser)
+  const update = useMemo(
+    () => Swizzled.methods.stateUpdateFactory(setState, setEphemeralState),
+    [setState]
+  )
+
+  /*
+   * Set the initial state
+   */
+  useEffect(() => {
+    // Handle state on a hard reload or cold start
+    if (typeof URLSearchParams !== 'undefined') {
+      let urlState = false
+      try {
+        const params = new URLSearchParams(document.location.search)
+        const s = params.get('s')
+        if (typeof s === 'string' && s.length > 0) urlState = JSON.parse(s)
+        if (urlState) setState(urlState)
+        else setState(init)
+      } catch (err) {
+        setState(init)
+      }
+    }
+  }, [])
+
+  return [state, setState, update]
+}
+
+/*
+ * Our URL state library does not support storing Javascript objects out of the box.
+ * But it allows us to pass a customer parser to handle them, so this is that parser
+ */
+const pojoParser = createParser({
+  parse: (v) => {
+    let val
+    try {
+      val = JSON.parse(v)
+    } catch (err) {
+      val = null
+    }
+    return val
+  },
+  serialize: (v) => {
+    let val
+    try {
+      val = JSON.stringify(v)
+    } catch (err) {
+      val = null
+    }
+    return val
+  },
+})
diff --git a/packages/react-components/src/editor/swizzle/methods/core-settings.mjs b/packages/react-components/src/editor/swizzle/methods/core-settings.mjs
new file mode 100644
index 00000000000..d6a736be192
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/methods/core-settings.mjs
@@ -0,0 +1,149 @@
+export function defaultSa(Swizzled, units, inMm = true) {
+  const dflt = units === 'imperial' ? 0.5 : 1
+  return inMm ? Swizzled.methods.measurementAsMm(dflt, units) : dflt
+}
+export function defaultSamm(Swizzled, units, inMm = true) {
+  const dflt = units === 'imperial' ? 0.5 : 1
+  return inMm ? Swizzled.methods.measurementAsMm(dflt, units) : dflt
+}
+/** custom event handlers for inputs that need them */
+export function menuCoreSettingsOnlyHandler(Swizzled, { updateHandler, current }) {
+  return function (path, part) {
+    // Is this a reset?
+    if (part === undefined || part === '__UNSET__') return updateHandler(path, part)
+
+    // add or remove the part from the set
+    let newParts = new Set(current || [])
+    if (newParts.has(part)) newParts.delete(part)
+    else newParts.add(part)
+
+    // if the set is now empty, reset
+    if (newParts.size < 1) newParts = undefined
+    // otherwise use the new set
+    else newParts = [...newParts]
+
+    updateHandler(path, newParts)
+  }
+}
+
+export function menuCoreSettingsSammHandler(Swizzled, { updateHandler, config }) {
+  return function (_path, newCurrent) {
+    // convert to millimeters if there's a value
+    newCurrent = newCurrent === undefined ? config.dflt : newCurrent
+    // update both values to match
+    updateHandler(['samm'], newCurrent)
+    updateHandler(['sa'], newCurrent)
+  }
+}
+
+export function menuCoreSettingsSaboolHandler(Swizzled, { toggleSa }) {
+  return toggleSa
+}
+export function menuCoreSettingsStructure(
+  Swizzled,
+  { units = 'metric', sabool = false, parts = [] }
+) {
+  return {
+    sabool: {
+      ux: Swizzled.config.uxLevels.core.sa,
+      list: [0, 1],
+      choiceTitles: {
+        0: 'saNo',
+        1: 'saYes',
+      },
+      valueTitles: {
+        0: 'no',
+        1: 'yes',
+      },
+      dflt: 0,
+      icon: Swizzled.components.SaIcon,
+    },
+    samm: sabool
+      ? {
+          ux: Swizzled.config.uxLevels.core.sa,
+          min: 0,
+          max: units === 'imperial' ? 2 : 2.5,
+          dflt: Swizzled.methods.defaultSamm(units),
+          icon: Swizzled.components.SaIcon,
+        }
+      : false,
+    paperless: {
+      ux: Swizzled.config.uxLevels.core.paperless,
+      list: [0, 1],
+      choiceTitles: {
+        0: 'paperlessNo',
+        1: 'paperlessYes',
+      },
+      valueTitles: {
+        0: 'no',
+        1: 'yes',
+      },
+      dflt: 0,
+      icon: Swizzled.components.PaperlessIcon,
+    },
+    units: {
+      ux: Swizzled.config.uxLevels.core.units,
+      list: ['metric', 'imperial'],
+      dflt: 'metric',
+      choiceTitles: {
+        metric: 'metric',
+        imperial: 'imperial',
+      },
+      valueTitles: {
+        metric: 'metric',
+        imperial: 'imperial',
+      },
+      icon: Swizzled.components.UnitsIcon,
+    },
+    complete: {
+      ux: Swizzled.config.uxLevels.core.complete,
+      list: [1, 0],
+      dflt: 1,
+      choiceTitles: {
+        0: 'completeNo',
+        1: 'completeYes',
+      },
+      valueTitles: {
+        0: 'no',
+        1: 'yes',
+      },
+      icon: Swizzled.components.DetailIcon,
+    },
+    expand: {
+      ux: Swizzled.config.uxLevels.core.expand,
+      list: [1, 0],
+      dflt: 1,
+      choiceTitles: {
+        0: 'expandNo',
+        1: 'expandYes',
+      },
+      valueTitles: {
+        0: 'no',
+        1: 'yes',
+      },
+      icon: Swizzled.components.ExpandIcon,
+    },
+    only: {
+      ux: Swizzled.config.uxLevels.core.only,
+      dflt: false,
+      list: parts,
+      parts,
+      icon: Swizzled.components.IncludeIcon,
+    },
+    scale: {
+      ux: Swizzled.config.uxLevels.core.scale,
+      min: 0.1,
+      max: 5,
+      dflt: 1,
+      step: 0.1,
+      icon: Swizzled.components.ScaleIcon,
+    },
+    margin: {
+      ux: Swizzled.config.uxLevels.core.margin,
+      min: 0,
+      max: 2.5,
+      dflt: Swizzled.methods.measurementAsMm(units === 'imperial' ? 0.125 : 0.2, units),
+      icon: Swizzled.components.MarginIcon,
+    },
+  }
+}
diff --git a/packages/react-components/src/editor/swizzle/methods/design-options.mjs b/packages/react-components/src/editor/swizzle/methods/design-options.mjs
new file mode 100644
index 00000000000..43a9718d62a
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/methods/design-options.mjs
@@ -0,0 +1,87 @@
+export function designOptionType(Swizzled, option) {
+  if (typeof option?.pct !== 'undefined') return 'pct'
+  if (typeof option?.bool !== 'undefined') return 'bool'
+  if (typeof option?.count !== 'undefined') return 'count'
+  if (typeof option?.deg !== 'undefined') return 'deg'
+  if (typeof option?.list !== 'undefined') return 'list'
+  if (typeof option?.mm !== 'undefined') return 'mm'
+
+  return 'constant'
+}
+import { mergeOptions } from '@freesewing/core'
+import set from 'lodash.set'
+import orderBy from 'lodash.orderby'
+
+export function menuDesignOptionsStructure(Swizzled, options, settings, asFullList = false) {
+  if (!options) return options
+  const sorted = {}
+  for (const [name, option] of Object.entries(options)) {
+    if (typeof option === 'object') sorted[name] = { ...option, name }
+  }
+
+  const menu = {}
+  // Fixme: One day we should sort this based on the translation
+  for (const option of orderBy(sorted, ['order', 'menu', 'name'], ['asc', 'asc', 'asc'])) {
+    if (typeof option === 'object') {
+      const oType = Swizzled.methods.designOptionType(option)
+      option.dflt = option.dflt || option[oType]
+      if (oType === 'pct') option.dflt /= 100
+      if (typeof option.menu === 'function')
+        option.menu = asFullList
+          ? 'conditional'
+          : option.menu(settings, mergeOptions(settings, options))
+      if (option.menu) {
+        // Handle nested groups that don't have any direct children
+        if (option.menu.includes('.')) {
+          let menuPath = []
+          for (const chunk of option.menu.split('.')) {
+            menuPath.push(chunk)
+            set(menu, `${menuPath.join('.')}.isGroup`, true)
+          }
+        }
+        set(menu, `${option.menu}.isGroup`, true)
+        set(menu, `${option.menu}.${option.name}`, option)
+      } else if (typeof option.menu === 'undefined') {
+        console.log(
+          `Warning: Option ${option.name} does not have a menu config. ` +
+            'Either configure it, or set it to false to hide this option.'
+        )
+      }
+    }
+  }
+
+  // Always put advanced at the end
+  if (menu.advanced) {
+    const adv = menu.advanced
+    delete menu.advanced
+    menu.advanced = adv
+  }
+
+  return menu
+}
+/*
+ * Helper method to grab an option from an Design options structure
+ *
+ * Since these structures can be nested with option groups, this needs some extra logic
+ */
+export function getOptionStructure(Swizzled, option, Design, state) {
+  const structure = Swizzled.methods.menuDesignOptionsStructure(
+    Design.patternConfig.options,
+    state.settings
+  )
+  console.log({ structure })
+
+  return Swizzled.methods.findOption(structure, option)
+}
+
+export function findOption(Swizzled, structure, option) {
+  for (const [key, val] of Object.entries(structure)) {
+    if (key === option) return val
+    if (val.isGroup) {
+      const sub = findOption(val, option)
+      if (sub) return sub
+    }
+  }
+
+  return false
+}
diff --git a/packages/react-components/src/editor/swizzle/methods/editor.mjs b/packages/react-components/src/editor/swizzle/methods/editor.mjs
new file mode 100644
index 00000000000..c26134be6d1
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/methods/editor.mjs
@@ -0,0 +1,716 @@
+/*
+ * This method drafts the pattern
+ *
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param {function} Design - The Design constructor
+ * @param {object} settings - The settings for the pattern
+ * @return {object} data - The drafted pattern, along with errors and failure data
+ */
+export function draft(Swizzled, Design, settings) {
+  const data = {
+    // The pattern
+    pattern: new Design(settings),
+    // Any errors logged by the pattern
+    errors: [],
+    // If the pattern fails to draft, this will hold the error
+    failure: false,
+  }
+  // Draft the pattern or die trying
+  try {
+    data.pattern.draft()
+    data.errors.push(...data.pattern.store.logs.error)
+    for (const store of data.pattern.setStores) data.errors.push(...store.logs.error)
+  } catch (error) {
+    data.failure = error
+  }
+
+  return data
+}
+export function flattenFlags(Swizzled, flags) {
+  const all = {}
+  for (const type of Swizzled.config.flagTypes) {
+    let i = 0
+    if (flags[type]) {
+      for (const flag of Object.values(flags[type])) {
+        i++
+        all[`${type}-${i}`] = { ...flag, type }
+      }
+    }
+  }
+
+  return all
+}
+
+export function getUiPreferenceUndoStepData(Swizzled, { step }) {
+  /*
+   * We'll need these
+   */
+  const field = step.name === 'ui' ? step.path[1] : step.path[2]
+  const structure = Swizzled.methods.menuUiPreferencesStructure()[field]
+
+  /*
+   * This we'll end up returning
+   */
+  const data = {
+    icon: <Swizzled.components.UiIcon />,
+    field,
+    optCode: `${field}.t`,
+    titleCode: 'uiPreferences.t',
+    structure: Swizzled.methods.menuUiPreferencesStructure()[field],
+  }
+  const FieldIcon = data.structure.icon
+  data.fieldIcon = <FieldIcon />
+
+  /*
+   * Add oldval and newVal if they exist, or fall back to default
+   */
+  for (const key of ['old', 'new'])
+    data[key + 'Val'] = Swizzled.methods.t(
+      structure.choiceTitles[
+        structure.choiceTitles[String(step[key])] ? String(step[key]) : String(structure.dflt)
+      ] + '.t'
+    )
+
+  return data
+}
+
+export function getCoreSettingUndoStepData(Swizzled, { step, state, Design }) {
+  const field = step.path[1]
+  const structure = Swizzled.methods.menuCoreSettingsStructure({
+    language: state.language,
+    units: state.settings.units,
+    sabool: state.settings.sabool,
+    parts: Design.patternConfig.draftOrder,
+  })
+
+  const data = {
+    field,
+    titleCode: 'coreSettings.t',
+    optCode: `${field}.t`,
+    icon: <Swizzled.components.SettingsIcon />,
+    structure: structure[field],
+  }
+  if (!data.structure && field === 'sa') data.structure = structure.samm
+  const FieldIcon = data.structure?.icon || Swizzled.components.FixmeIcon
+  data.fieldIcon = <FieldIcon />
+
+  /*
+   * Save us some typing
+   */
+  const cord = Swizzled.methods.settingsValueCustomOrDefault
+  const formatMm = Swizzled.methods.formatMm
+  const Html = Swizzled.components.HtmlSpan
+
+  /*
+   * Need to allow HTML in some of these in case this is
+   * formated as imperial which uses <sub> and <sup>
+   */
+  switch (data.field) {
+    case 'margin':
+    case 'sa':
+    case 'samm':
+      if (data.field !== 'margin') {
+        data.optCode = `samm.t`
+      }
+      data.oldVal = <Html html={formatMm(cord(step.old, data.structure.dflt))} />
+      data.newVal = <Html html={formatMm(cord(step.new, data.structure.dflt))} />
+      return data
+    case 'scale':
+      data.oldVal = cord(step.old, data.structure.dflt)
+      data.newVal = cord(step.new, data.structure.dflt)
+      return data
+    case 'units':
+      data.oldVal = Swizzled.methods.t(
+        step.new === 'imperial' ? 'pe:metricUnits' : 'pe:imperialUnits'
+      )
+      data.newVal = Swizzled.methods.t(
+        step.new === 'imperial' ? 'pe:imperialUnits' : 'pe:metricUnits'
+      )
+      return data
+    case 'only':
+      data.oldVal = cord(step.old, data.structure.dflt) || Swizzled.methods.t('pe:includeAllParts')
+      data.newVal = cord(step.new, data.structure.dflt) || Swizzled.methods.t('pe:includeAllParts')
+      return data
+    default:
+      data.oldVal = Swizzled.methods.t(
+        (data.structure.choiceTitles[String(step.old)]
+          ? data.structure.choiceTitles[String(step.old)]
+          : data.structure.choiceTitles[String(data.structure.dflt)]) + '.t'
+      )
+      data.newVal = Swizzled.methods.t(
+        (data.structure.choiceTitles[String(step.new)]
+          ? data.structure.choiceTitles[String(step.new)]
+          : data.structure.choiceTitles[String(data.structure.dflt)]) + '.t'
+      )
+      return data
+  }
+}
+
+export function getDesignOptionUndoStepData(Swizzled, { step, state, Design }) {
+  const option = Design.patternConfig.options[step.path[2]]
+  const data = {
+    icon: <Swizzled.components.OptionsIcon />,
+    field: step.path[2],
+    optCode: `${state.design}:${step.path[2]}.t`,
+    titleCode: `designOptions.t`,
+    oldVal: Swizzled.methods.formatDesignOptionValue(option, step.old, state.units === 'imperial'),
+    newVal: Swizzled.methods.formatDesignOptionValue(option, step.new, state.units === 'imperial'),
+  }
+
+  return data
+}
+
+export function getUndoStepData(Swizzled, props) {
+  /*
+   * UI Preferences
+   */
+  if ((props.step.name === 'settings' && props.step.path[1] === 'ui') || props.step.name === 'ui')
+    return Swizzled.methods.getUiPreferenceUndoStepData(props)
+
+  /*
+   * Design options
+   */
+  if (props.step.name === 'settings' && props.step.path[1] === 'options')
+    return Swizzled.methods.getDesignOptionUndoStepData(props)
+
+  /*
+   * Core Settings
+   */
+  if (
+    props.step.name === 'settings' &&
+    [
+      'sa',
+      'samm',
+      'margin',
+      'scale',
+      'only',
+      'complete',
+      'paperless',
+      'sabool',
+      'units',
+      'expand',
+    ].includes(props.step.path[1])
+  )
+    return Swizzled.methods.getCoreSettingUndoStepData(props)
+
+  /*
+   * Measurements
+   */
+  if (props.step.name === 'settings' && props.step.path[1] === 'measurements') {
+    const data = {
+      icon: <Swizzled.components.MeasurementsIcon />,
+      field: 'measurements',
+      optCode: `measurements`,
+      titleCode: 'measurements',
+    }
+    /*
+     * Single measurements change?
+     */
+    if (props.step.path[2])
+      return {
+        ...data,
+        field: props.step.path[2],
+        oldVal: Swizzled.methods.formatMm(props.step.old, props.imperial),
+        newVal: Swizzled.methods.formatMm(props.step.new, props.imperial),
+      }
+    let count = 0
+    for (const m of Object.keys(props.step.new)) {
+      if (props.step.new[m] !== props.step.old?.[m]) count++
+    }
+    return { ...data, msg: Swizzled.methods.t('pe:xMeasurementsChanged', { count }) }
+  }
+
+  /*
+   * Bail out of the step fell throug
+   */
+  return false
+}
+/*
+ * This helper method constructs the initial state object.
+ *
+ * If they are not present, it will fall back to the relevant defaults
+ * @param {object} Swizzled - The swizzled data
+ */
+export function initialEditorState(Swizzled) {
+  /*
+   * Create initial state object
+   */
+  const initial = { ...Swizzled.config.initialState }
+
+  /*
+   * FIXME: Add preload support, from URL or other sources, rather than just passing in an object
+   */
+
+  return initial
+}
+/**
+ * round a value to the correct number of decimal places to display all supplied digits after multiplication
+ * this is a workaround for floating point errors
+ * examples:
+ * roundPct(0.72, 100) === 72
+ * roundPct(7.5, 0.01) === 0.075
+ * roundPct(7.50, 0.01) === 0.0750
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param  {Number} num the number to be operated on
+ * @param  {Number} factor the number to multiply by
+ * @return {Number}     the given num multiplied by the factor, rounded appropriately
+ */
+export function menuRoundPct(Swizzled, num, factor) {
+  const { round } = Swizzled.methods
+  // stringify
+  const str = '' + num
+  // get the index of the decimal point in the number
+  const decimalIndex = str.indexOf('.')
+  // get the number of places the factor moves the decimal point
+  const factorPlaces = factor > 0 ? Math.ceil(Math.log10(factor)) : Math.floor(Math.log10(factor))
+  // the number of places needed is the number of digits that exist after the decimal minus the number of places the decimal point is being moved
+  const numPlaces = Math.max(0, str.length - (decimalIndex + factorPlaces))
+  return round(num * factor, numPlaces)
+}
+
+const menuNumericInputMatcher = /^-?[0-9]*[.,eE]?[0-9]+$/ // match a single decimal separator
+const menuFractionInputMatcher = /^-?[0-9]*(\s?[0-9]+\/|[.,eE])?[0-9]+$/ // match a single decimal separator or fraction
+
+/**
+ * Validate and parse a value that should be a number
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param  {any}  val            the value to validate
+ * @param  {Boolean} allowFractions should fractions be considered valid input?
+ * @param  {Number}  min            the minimum allowable value
+ * @param  {Number}  max            the maximum allowable value
+ * @return {null|false|Number}      null if the value is empty,
+ *                                  false if the value is invalid,
+ *                                  or the value parsed to a number if it is valid
+ */
+export function menuValidateNumericValue(
+  Swizzled,
+  val,
+  allowFractions = true,
+  min = -Infinity,
+  max = Infinity
+) {
+  // if it's empty, we're neutral
+  if (typeof val === 'undefined' || val === '') return null
+
+  // make sure it's a string
+  val = ('' + val).trim()
+
+  // get the appropriate match pattern and check for a match
+  const matchPattern = allowFractions ? menuFractionInputMatcher : menuNumericInputMatcher
+  if (!val.match(matchPattern)) return false
+
+  // replace comma with period
+  const parsedVal = val.replace(',', '.')
+  // if fractions are allowed, parse for fractions, otherwise use the number as a value
+  const useVal = allowFractions ? Swizzled.methods.fractionToDecimal(parsedVal) : parsedVal
+
+  // check that it's a number and it's in the range
+  if (isNaN(useVal) || useVal > max || useVal < min) return false
+
+  // all checks passed. return the parsed value
+  return useVal
+}
+
+/**
+ * Check to see if a value is different from its default
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param {Number|String|Boolean} current the current value
+ * @param {Object} config  configuration containing a dflt key
+ * @return {Boolean}         was the value changed?
+ */
+export function menuValueWasChanged(Swizzled, current, config) {
+  if (typeof current === 'undefined') return false
+  if (current == config.dflt) return false
+
+  return true
+}
+import get from 'lodash.get'
+import set from 'lodash.set'
+import unset from 'lodash.unset'
+
+const UNSET = '__UNSET__'
+/*
+ * Helper method to handle object updates
+ *
+ * @param {object} methods - An object holding possibly swizzled methods (unused here)
+ * @param {object} obj - The object to update
+ * @param {string|array} path - The path to the key to update, either as array or dot notation
+ * @param {mixed} val - The new value to set or 'unset' to unset the value
+ * @return {object} result - The updated object
+ */
+export function objUpdate(Swizzled, obj = {}, path, val = '__UNSET__') {
+  if (val === UNSET) unset(obj, path)
+  else set(obj, path, val)
+
+  return obj
+}
+
+/*
+ * Helper method to handle object updates that also updates the undo history in ephemeral state
+ *
+ * @param {object} methods - An object holding possibly swizzled methods (unused here)
+ * @param {object} obj - The object to update
+ * @param {string|array} path - The path to the key to update, either as array or dot notation
+ * @param {mixed} val - The new value to set or 'unset' to unset the value
+ * @param {function} setEphemeralState - The ephemeral state setter
+ * @return {object} result - The updated object
+ */
+export function undoableObjUpdate(
+  Swizzled,
+  name,
+  obj = {},
+  path,
+  val = '__UNSET__',
+  setEphemeralState
+) {
+  const current = get(obj, path)
+  setEphemeralState((cur) => {
+    if (!Array.isArray(cur.undos)) cur.undos = []
+    return {
+      ...cur,
+      undos: [
+        {
+          name,
+          time: Date.now(),
+          path,
+          old: current,
+          new: val,
+          restore: Swizzled.methods.cloneObject(obj),
+        },
+        ...cur.undos,
+      ],
+    }
+  })
+
+  return Swizzled.methods.objUpdate(obj, path, val)
+}
+
+/*
+ * Helper method to add an undo step for which state updates are handles in another way
+ *
+ * This is typically used for SA changes as it requires changing 3 fields:
+ * - sabool: Is sa on or off?
+ * - sa: sa value for core
+ * - samm: Holds the sa value in mm even when sa is off
+ *
+ * @param {object} Swizzled - An object holding possibly swizzled code (unused here)
+ * @param {object} undo - The undo step to add
+ * @param {object} restore - The state to restore for this step
+ * @param {function} setEphemeralState - The ephemeral state setter
+ */
+export function addUndoStep(Swizzled, undo, restore, setEphemeralState) {
+  setEphemeralState((cur) => {
+    if (!Array.isArray(cur.undos)) cur.undos = []
+    return {
+      ...cur,
+      undos: [
+        { time: Date.now(), ...undo, restore: Swizzled.methods.cloneObject(restore) },
+        ...cur.undos,
+      ],
+    }
+  })
+}
+
+/*
+ * Helper method to clone an object
+ */
+export function cloneObject(Swizzled, obj) {
+  return JSON.parse(JSON.stringify(obj))
+}
+/**
+ * Helper method to push a prefix to a set path
+ *
+ * By 'set path' we mean a path to be passed to the
+ * objUpdate method, which uses lodash's set under the hood.
+ *
+ * @param {string} prefix - The prefix path to add
+ * @param {string|array} path - The path to prefix either as array or a string in dot notation
+ * @return {array} newPath - The prefixed path
+ */
+export function statePrefixPath(Swizzled, prefix, path) {
+  if (Array.isArray(path)) return [prefix, ...path]
+  else return [prefix, ...path.split('.')]
+}
+/*
+ * This creates the helper object for state updates
+ */
+export function stateUpdateFactory(Swizzled, setState, setEphemeralState) {
+  return {
+    /*
+     * This allows raw access to the entire state object
+     */
+    state: (path, val) => setState((cur) => Swizzled.methods.objUpdate({ ...cur }, path, val)),
+    /*
+     * These hold an object, so we take a path
+     */
+    settings: (path = null, val = null) => {
+      /*
+       * This check can be removed once all code is migrated to the new editor
+       */
+      if (Array.isArray(path) && Array.isArray(path[0]) && val === null) {
+        throw new Error(
+          'Update.settings was called with an array of operations. This is no longer supported.'
+        )
+      }
+      return setState((cur) =>
+        Swizzled.methods.undoableObjUpdate(
+          'settings',
+          { ...cur },
+          Swizzled.methods.statePrefixPath('settings', path),
+          val,
+          setEphemeralState
+        )
+      )
+    },
+    /*
+     * Helper to restore from undo state
+     * Takes the index of the undo step in the array in ephemeral state
+     */
+    restore: async (i, ephemeralState) => {
+      setState(ephemeralState.undos[i].restore)
+      setEphemeralState((cur) => {
+        cur.undos = cur.undos.slice(i + 1)
+        return cur
+      })
+    },
+    /*
+     * Helper to toggle SA on or off as that requires managing sa, samm, and sabool
+     */
+    toggleSa: () =>
+      setState((cur) => {
+        const sa = cur.settings?.samm || (cur.settings?.units === 'imperial' ? 15.3125 : 10)
+        const restore = Swizzled.methods.cloneObject(cur)
+        // This requires 3 changes
+        const update = cur.settings.sabool
+          ? [
+              ['sabool', 0],
+              ['sa', 0],
+              ['samm', sa],
+            ]
+          : [
+              ['sabool', 1],
+              ['sa', sa],
+              ['samm', sa],
+            ]
+        for (const [key, val] of update) Swizzled.methods.objUpdate(cur, `settings.${key}`, val)
+        // Which we'll group as 1 undo action
+        Swizzled.methods.addUndoStep(
+          {
+            name: 'settings',
+            path: ['settings', 'sa'],
+            new: cur.settings.sabool ? 0 : sa,
+            old: cur.settings.sabool ? sa : 0,
+          },
+          restore,
+          setEphemeralState
+        )
+
+        return cur
+      }),
+    ui: (path, val) =>
+      setState((cur) =>
+        Swizzled.methods.undoableObjUpdate(
+          'ui',
+          { ...cur },
+          Swizzled.methods.statePrefixPath('ui', path),
+          val,
+          setEphemeralState
+        )
+      ),
+    /*
+     * These only hold a string, so we only take a value
+     */
+    design: (val) => setState((cur) => Swizzled.methods.objUpdate({ ...cur }, 'design', val)),
+    view: (val) => {
+      // Only take valid view names
+      if (!Swizzled.config.views.includes(val)) return console.log('not a valid view:', val)
+      setState((cur) => ({ ...cur, view: val }))
+      // Also add it onto the views (history)
+      setEphemeralState((cur) => {
+        if (!Array.isArray(cur.views)) cur.views = []
+        return { ...cur, views: [val, ...cur.views] }
+      })
+    },
+    viewBack: () => {
+      setEphemeralState((eph) => {
+        if (Array.isArray(eph.views) && Swizzled.config.views.includes(eph.views[1])) {
+          // Load view at the 1 position of the history
+          setState((cur) => ({ ...cur, view: eph.views[1] }))
+          return { ...eph, views: eph.views.slice(1) }
+        }
+
+        return eph
+      })
+    },
+    ux: (val) => setState((cur) => Swizzled.methods.objUpdate({ ...cur }, 'ux', val)),
+    clearPattern: () =>
+      setState((cur) => {
+        const newState = { ...cur }
+        Swizzled.methods.objUpdate(newState, 'settings', {
+          measurements: cur.settings.measurements,
+        })
+        /*
+         * Let's also reset the renderer to React as that feels a bit like a pattern setting even though it's UI
+         */
+        Swizzled.methods.objUpdate(newState, 'ui', { ...newState.ui, renderer: 'react' })
+        return newState
+      }),
+    clearAll: () => setState(Swizzled.config.initialState),
+    /*
+     * These are setters for the ephemeral state which is passed down as part of the
+     * state object, but is not managed in the state backend because it's ephemeral
+     */
+    startLoading: (id, conf = {}) =>
+      setEphemeralState((cur) => {
+        const newState = { ...cur }
+        if (typeof newState.loading !== 'object') newState.loading = {}
+        if (typeof conf.color === 'undefined') conf.color = 'info'
+        newState.loading[id] = {
+          msg: Swizzled.methods.t('pe:genericLoadingMsg'),
+          ...conf,
+        }
+        return newState
+      }),
+    stopLoading: (id) =>
+      setEphemeralState((cur) => {
+        const newState = { ...cur }
+        if (typeof newState.loading[id] !== 'undefined') delete newState.loading[id]
+        return newState
+      }),
+    clearLoading: () => setEphemeralState((cur) => ({ ...cur, loading: {} })),
+    notify: (conf, id = false) =>
+      setEphemeralState((cur) => {
+        const newState = { ...cur }
+        /*
+         * Passing in an id allows making sure the same notification is not repeated
+         * So if the id is set, and we have a loading state with that id, we just return
+         */
+        if (id && cur.loading?.[id]) return newState
+        if (typeof newState.loading !== 'object') newState.loading = {}
+        if (id === false) id = Date.now()
+        newState.loading[id] = { ...conf, id, fadeTimer: Swizzled.config.notifyTimeout }
+        return newState
+      }),
+    notifySuccess: (msg, id = false) =>
+      setEphemeralState((cur) => {
+        const newState = { ...cur }
+        /*
+         * Passing in an id allows making sure the same notification is not repeated
+         * So if the id is set, and we have a loading state with that id, we just return
+         */
+        if (id && cur.loading?.[id]) return newState
+        if (typeof newState.loading !== 'object') newState.loading = {}
+        if (id === false) id = Date.now()
+        newState.loading[id] = {
+          msg,
+          icon: 'success',
+          color: 'success',
+          id,
+          fadeTimer: Swizzled.config.notifyTimeout,
+        }
+        return newState
+      }),
+    notifyFailure: (msg, id = false) =>
+      setEphemeralState((cur) => {
+        const newState = { ...cur }
+        /*
+         * Passing in an id allows making sure the same notification is not repeated
+         * So if the id is set, and we have a loading state with that id, we just return
+         */
+        if (id && cur.loading?.[id]) return newState
+        if (typeof newState.loading !== 'object') newState.loading = {}
+        if (id === false) id = Date.now()
+        newState.loading[id] = {
+          msg,
+          icon: 'failure',
+          color: 'error',
+          id,
+          fadeTimer: Swizzled.config.notifyTimeout,
+        }
+        return newState
+      }),
+    fadeNotify: (id) =>
+      setEphemeralState((cur) => {
+        const newState = { ...cur }
+        newState.loading[id] = { ...newState.loading[id], clearTimer: 600, id, fading: true }
+        delete newState.loading[id].fadeTimer
+        return newState
+      }),
+    clearNotify: (id) =>
+      setEphemeralState((cur) => {
+        const newState = { ...cur }
+        if (typeof newState.loading[id] !== 'undefined') delete newState.loading[id]
+        return newState
+      }),
+  }
+}
+/*
+ * Returns the URL of a cloud-hosted image (cloudflare in this case) based on the ID and Variant
+ * @param {object} Swizzled - Swizzled code, not used here
+ */
+export function cloudImageUrl(Swizzled, { id = 'default-avatar', variant = 'public' }) {
+  /*
+   * Return something default so that people will actually change it
+   */
+  if (!id || id === 'default-avatar') return Swizzled.config.cloudImageDflt
+
+  /*
+   * If the variant is invalid, set it to the smallest thumbnail so
+   * people don't load enourmous images by accident
+   */
+  if (!Swizzled.config.cloudImageVariants.includes(variant)) variant = 'sq100'
+
+  return `${Swizzled.config.cloudImageUrl}${id}/${variant}`
+}
+/**
+ * This method does nothing. It is used to disable certain methods
+ * that need to be passed it to work
+ *
+ * @return {null} null - null
+ */
+export function noop() {
+  return null
+}
+/*
+ * A method that check that a value is not empty
+ */
+export function notEmpty(value) {
+  return String(value).length > 0
+}
+/**
+ * Helper method to merge arrays of translation namespaces
+ *
+ * Note that this method is variadic
+ *
+ * @param {object} methods - An object holding possibly swizzled methods (unused here)
+ * @param {[string]} namespaces - A string or array of strings of namespaces
+ * @return {[string]} namespaces - A merged array of all namespaces
+ */
+export function nsMerge(Swizzled, ...args) {
+  const ns = new Set()
+  for (const arg of args) {
+    if (typeof arg === 'string') ns.add(arg)
+    else if (Array.isArray(arg)) {
+      for (const el of nsMerge(...arg)) ns.add(el)
+    }
+  }
+
+  return [...ns]
+}
+/*
+ * A translation fallback method in case none is passed in
+ *
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param {string} key - The input
+ * @return {string} key - The input is returned
+ */
+export function t(Swizzled, key) {
+  return Array.isArray(key) ? key[0] : key
+}
+export function settingsValueIsCustom(Swizzled, val, dflt) {
+  return typeof val === 'undefined' || val === '__UNSET__' || val === dflt ? false : true
+}
+
+export function settingsValueCustomOrDefault(Swizzled, val, dflt) {
+  return typeof val === 'undefined' || val === '__UNSET__' || val === dflt ? dflt : val
+}
diff --git a/packages/react-components/src/editor/swizzle/methods/formatting.mjs b/packages/react-components/src/editor/swizzle/methods/formatting.mjs
new file mode 100644
index 00000000000..d46446bad07
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/methods/formatting.mjs
@@ -0,0 +1,245 @@
+/*
+ * Method that capitalizes a string (make the first character uppercase)
+ *
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param {string} string - The input string to capitalize
+ * @return {string} String - The capitalized input string
+ */
+export function capitalize(Swizzled, string) {
+  return typeof string === 'string' ? string.charAt(0).toUpperCase() + string.slice(1) : ''
+}
+
+export function formatDesignOptionValue(Swizzled, option, value, imperial) {
+  const oType = Swizzled.methods.designOptionType(option)
+  if (oType === 'pct') return Swizzled.methods.formatPercentage(value ? value : option.pct / 100)
+  if (oType === 'deg') return `${value ? value : option.deg}°`
+  if (oType === 'bool')
+    return typeof value === 'undefined' ? (
+      option.bool
+    ) : value ? (
+      <Swizzled.components.BoolYesIcon />
+    ) : (
+      <Swizzled.components.BoolNoIcon />
+    )
+  if (oType === 'mm')
+    return Swizzled.methods.formatMm(typeof value === 'undefined' ? option.mm : value, imperial)
+  if (oType === 'list') return typeof value === 'undefined' ? option.dflt : value
+
+  return value
+}
+
+/**
+ * format a value to the nearest fraction with a denominator that is a power of 2
+ * or a decimal if the value is between fractions
+ * NOTE: this method does not convert mm to inches. It will turn any given value directly into its equivalent fractional representation
+ *
+ * fraction: the value to process
+ * format: the type of formatting to apply. html, notags, or anything else which will only return numbers
+ */
+export function formatFraction128(Swizzled, fraction, format = 'html') {
+  let negative = ''
+  let inches = ''
+  let rest = ''
+  if (fraction < 0) {
+    fraction = fraction * -1
+    negative = '-'
+  }
+  if (Math.abs(fraction) < 1) rest = fraction
+  else {
+    inches = Math.floor(fraction)
+    rest = fraction - inches
+  }
+  let fraction128 = Math.round(rest * 128)
+  if (fraction128 == 0)
+    return Swizzled.methods.formatImperial(negative, inches || fraction128, false, false, format)
+
+  for (let i = 1; i < 7; i++) {
+    const numoFactor = Math.pow(2, 7 - i)
+    if (fraction128 % numoFactor === 0)
+      return Swizzled.methods.formatImperial(
+        negative,
+        inches,
+        fraction128 / numoFactor,
+        Math.pow(2, i),
+        format
+      )
+  }
+
+  return (
+    negative +
+    Math.round(fraction * 100) / 100 +
+    (format === 'html' || format === 'notags' ? '"' : '')
+  )
+}
+
+// Formatting for imperial values
+export function formatImperial(Swizzled, neg, inch, numo = false, deno = false, format = 'html') {
+  if (format === 'html') {
+    if (numo) return `${neg}${inch}&nbsp;<sup>${numo}</sup>/<sub>${deno}</sub>"`
+    else return `${neg}${inch}"`
+  } else if (format === 'notags') {
+    if (numo) return `${neg}${inch} ${numo}/${deno}"`
+    else return `${neg}${inch}"`
+  } else {
+    if (numo) return `${neg}${inch} ${numo}/${deno}`
+    else return `${neg}${inch}`
+  }
+}
+
+// Format a value in mm based on the user's units
+// Format can be html, notags, or anything else which will only return numbers
+export function formatMm(Swizzled, val, units, format = 'html') {
+  val = Swizzled.methods.roundMm(val)
+  if (units === 'imperial' || units === true) {
+    if (val == 0) return Swizzled.methods.formatImperial('', 0, false, false, format)
+
+    let fraction = val / 25.4
+    return Swizzled.methods.formatFraction128(fraction, format)
+  } else {
+    if (format === 'html' || format === 'notags') return Swizzled.methods.roundMm(val / 10) + 'cm'
+    else return Swizzled.methods.roundMm(val / 10)
+  }
+}
+
+// Format a percentage (as in, between 0 and 1)
+export function formatPercentage(Swizzled, val) {
+  return Math.round(1000 * val) / 10 + '%'
+}
+
+/**
+ * A generic rounding method
+ *
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param {number} val - The input number to round
+ * @param {number} decimals - The number of decimal points to use when rounding
+ * @return {number} result - The rounded number
+ */
+export function round(methods, val, decimals = 1) {
+  return Math.round(val * Math.pow(10, decimals)) / Math.pow(10, decimals)
+}
+
+// Rounds a value in mm
+export function roundMm(Swizzled, val, units) {
+  if (units === 'imperial') return Math.round(val * 1000000) / 1000000
+  else return Math.round(val * 10) / 10
+}
+
+/**
+ * Converts a value that contain a fraction to a decimal
+ *
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param {number} value - The input value
+ * @return {number} result - The resulting decimal value
+ */
+export function fractionToDecimal(Swizzled, value) {
+  // if it's just a number, return it
+  if (!isNaN(value)) return value
+
+  // keep a running total
+  let total = 0
+
+  // split by spaces
+  let chunks = String(value).split(' ')
+  if (chunks.length > 2) return Number.NaN // too many spaces to parse
+
+  // a whole number with a fraction
+  if (chunks.length === 2) {
+    // shift the whole number from the array
+    const whole = Number(chunks.shift())
+    // if it's not a number, return NaN
+    if (isNaN(whole)) return Number.NaN
+    // otherwise add it to the total
+    total += whole
+  }
+
+  // now we have only one chunk to parse
+  let fraction = chunks[0]
+
+  // split it to get numerator and denominator
+  let fChunks = fraction.trim().split('/')
+  // not really a fraction. return NaN
+  if (fChunks.length !== 2 || fChunks[1] === '') return Number.NaN
+
+  // do the division
+  let num = Number(fChunks[0])
+  let denom = Number(fChunks[1])
+  if (isNaN(num) || isNaN(denom)) return NaN
+  return total + num / denom
+}
+
+/**
+ * Helper method to turn a measurement in millimeter regardless of units
+ *
+ * @param {object} Swizzled - Swizzled code, including methods
+ * @param {number} value - The input value
+ * @param {string} units - One of 'metric' or 'imperial'
+ * @return {number} result - Value in millimeter
+ */
+export function measurementAsMm(Swizzled, value, units = 'metric') {
+  if (typeof value === 'number') return value * (units === 'imperial' ? 25.4 : 10)
+
+  if (String(value).endsWith('.')) return false
+
+  if (units === 'metric') {
+    value = Number(value)
+    if (isNaN(value)) return false
+    return value * 10
+  } else {
+    const decimal = Swizzled.methods.fractionToDecimal(value)
+    if (isNaN(decimal)) return false
+    return decimal * 24.5
+  }
+}
+
+/**
+ * Converts a millimeter value to a Number value in the given units
+ *
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param {number} mmValue - The input value in millimeter
+ * @param {string} units - One of 'metric' or 'imperial'
+ * @result {number} result - The result in millimeter
+ */
+export function measurementAsUnits(Swizzled, mmValue, units = 'metric') {
+  return Swizzled.methods.round(mmValue / (units === 'imperial' ? 25.4 : 10), 3)
+}
+export function shortDate(locale = 'en', timestamp = false, withTime = true) {
+  const options = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }
+  if (withTime) {
+    options.hour = '2-digit'
+    options.minute = '2-digit'
+    options.hour12 = false
+  }
+  const ts = timestamp ? new Date(timestamp) : new Date()
+
+  return ts.toLocaleDateString(locale, options)
+}
+/*
+ * Parses value that should be a distance (cm or inch)
+ *
+ * @param {object} Swizzled - Swizzled code, including methods
+ * @param {number} val - The input value
+ * @param {bool} imperial - True if the units are imperial, false for metric
+ * @return {number} result - The distance in the relevant units
+ */
+export function parseDistanceInput(Swizzled, val = false, imperial = false) {
+  // No input is not valid
+  if (!val) return false
+
+  // Cast to string, and replace comma with period
+  val = val.toString().trim().replace(',', '.')
+
+  // Regex pattern for regular numbers with decimal seperator or fractions
+  const regex = imperial
+    ? /^-?[0-9]*(\s?[0-9]+\/|[.])?[0-9]+$/ // imperial (fractions)
+    : /^-?[0-9]*[.]?[0-9]+$/ // metric (no fractions)
+  if (!val.match(regex)) return false
+
+  // if fractions are allowed, parse for fractions, otherwise use the number as a value
+  if (imperial) val = Swizzled.methods.fractionToDecimal(val)
+
+  return isNaN(val) ? false : Number(val)
+}
diff --git a/packages/react-components/src/editor/swizzle/methods/index.mjs b/packages/react-components/src/editor/swizzle/methods/index.mjs
new file mode 100644
index 00000000000..6ec60661fc0
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/methods/index.mjs
@@ -0,0 +1,174 @@
+/*************************************************************************
+ *                                                                       *
+ * FreeSewing's pattern editor allows swizzling methods                  *
+ *                                                                       *
+ * To 'swizzle' means to replace the default implementation of a         *
+ * method with a custom one. It allows one to customize                  *
+ * the pattern editor.                                                   *
+ *                                                                       *
+ * This file holds the 'swizzleMethods' method that will return          *
+ * the various methods that can be swizzled, or their default            *
+ * implementation.                                                       *
+ *                                                                       *
+ * To use a custom version, simply pas it as a prop into the editor      *
+ * under the 'methods' key. So to pass a custom 't' method (used for     *
+ * translation(, you do:                                                 *
+ *                                                                       *
+ * <PatternEditor methods={{ t: myCustomTranslationMethod }} />          *
+ *                                                                       *
+ *************************************************************************/
+
+/*
+ * Import of methods that can be swizzled
+ */
+import {
+  defaultSa,
+  defaultSamm,
+  menuCoreSettingsOnlyHandler,
+  menuCoreSettingsSaboolHandler,
+  menuCoreSettingsSammHandler,
+  menuCoreSettingsStructure,
+} from './core-settings.mjs'
+import {
+  designOptionType,
+  findOption,
+  getOptionStructure,
+  menuDesignOptionsStructure,
+} from './design-options.mjs'
+import {
+  addUndoStep,
+  cloneObject,
+  cloudImageUrl,
+  draft,
+  flattenFlags,
+  getCoreSettingUndoStepData,
+  getDesignOptionUndoStepData,
+  getUiPreferenceUndoStepData,
+  getUndoStepData,
+  initialEditorState,
+  menuRoundPct,
+  menuValidateNumericValue,
+  menuValueWasChanged,
+  noop,
+  notEmpty,
+  nsMerge,
+  objUpdate,
+  settingsValueIsCustom,
+  settingsValueCustomOrDefault,
+  statePrefixPath,
+  stateUpdateFactory,
+  t,
+  undoableObjUpdate,
+} from './editor.mjs'
+import {
+  capitalize,
+  formatDesignOptionValue,
+  formatFraction128,
+  formatImperial,
+  formatMm,
+  formatPercentage,
+  round,
+  roundMm,
+  fractionToDecimal,
+  measurementAsMm,
+  measurementAsUnits,
+  shortDate,
+  parseDistanceInput,
+} from './formatting.mjs'
+import {
+  designMeasurements,
+  hasRequiredMeasurements,
+  isDegreeMeasurement,
+  missingMeasurements,
+  structureMeasurementsAsDesign,
+} from './measurements.mjs'
+import { menuUiPreferencesStructure } from './ui-preferences.mjs'
+
+/**
+ * This object holds all methods that can be swizzled
+ */
+const defaultMethods = {
+  // core-settings.mjs
+  defaultSa,
+  defaultSamm,
+  menuCoreSettingsOnlyHandler,
+  menuCoreSettingsSaboolHandler,
+  menuCoreSettingsSammHandler,
+  menuCoreSettingsStructure,
+  // design-options.mjs
+  designOptionType,
+  findOption,
+  getOptionStructure,
+  menuDesignOptionsStructure,
+  // editor.mjs
+  addUndoStep,
+  cloneObject,
+  cloudImageUrl,
+  draft,
+  flattenFlags,
+  getCoreSettingUndoStepData,
+  getDesignOptionUndoStepData,
+  getUiPreferenceUndoStepData,
+  getUndoStepData,
+  initialEditorState,
+  menuRoundPct,
+  menuValidateNumericValue,
+  menuValueWasChanged,
+  noop,
+  notEmpty,
+  nsMerge,
+  objUpdate,
+  settingsValueIsCustom,
+  settingsValueCustomOrDefault,
+  statePrefixPath,
+  stateUpdateFactory,
+  t,
+  undoableObjUpdate,
+  // formatting.mjs
+  capitalize,
+  formatDesignOptionValue,
+  formatFraction128,
+  formatImperial,
+  formatMm,
+  formatPercentage,
+  round,
+  roundMm,
+  fractionToDecimal,
+  measurementAsMm,
+  measurementAsUnits,
+  shortDate,
+  parseDistanceInput,
+  // measurements.mjs
+  designMeasurements,
+  hasRequiredMeasurements,
+  isDegreeMeasurement,
+  missingMeasurements,
+  structureMeasurementsAsDesign,
+  // ui-preferences.mjs
+  menuUiPreferencesStructure,
+}
+
+/*
+ * This method returns methods that can be swizzled
+ * So either the passed-in methods, or the default ones
+ */
+export const swizzleMethods = (methods, Swizzled) => {
+  /*
+   * We need to pass down the resulting methods, swizzled or not
+   * because some methods rely on other (possibly swizzled) methods.
+   * So we put this in this object so we can pass that down
+   */
+  const all = {}
+  for (const [name, method] of Object.entries(defaultMethods)) {
+    if (typeof method !== 'function')
+      console.warn(`${name} is not defined as default method in swizzleMethods`)
+    all[name] = methods[name]
+      ? (...params) => methods[name](all, ...params)
+      : (...params) => method(Swizzled, ...params)
+  }
+
+  /*
+   * Return all methods
+   */
+  return all
+}
diff --git a/packages/react-components/src/editor/swizzle/methods/measurements.mjs b/packages/react-components/src/editor/swizzle/methods/measurements.mjs
new file mode 100644
index 00000000000..e75b1cf22bd
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/methods/measurements.mjs
@@ -0,0 +1,84 @@
+/*
+ * Returns a list of measurements for a design
+ *
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param {object} Design - The Design object
+ * @param {object} measies - The current set of measurements
+ * @return {object} measurements - Object holding measurements that are relevant for this design
+ */
+export function designMeasurements(Swizzled, Design, measies = {}) {
+  const measurements = {}
+  for (const m of Design.patternConfig?.measurements || []) measurements[m] = measies[m]
+  for (const m of Design.patternConfig?.optionalMeasurements || []) measurements[m] = measies[m]
+
+  return measurements
+}
+/**
+ * Helper method to determine whether all required measurements for a design are present
+ *
+ * @param {object} Swizzled - Swizzled code, including methods
+ * @param {object} Design - The FreeSewing design (or a plain object holding measurements)
+ * @param {object} measurements - An object holding the user's measurements
+ * @return {array} result - An array where the first element is true when we
+ * have all measurements, and false if not. The second element is a list of
+ * missing measurements.
+ */
+export function hasRequiredMeasurements(Swizzled, Design, measurements = {}) {
+  /*
+   * If design is just a plain object holding measurements, we restructure it as a Design
+   * AS it happens, this method is smart enough to test for this, so we call it always
+   */
+  Design = Swizzled.methods.structureMeasurementsAsDesign(Design)
+
+  /*
+   * Walk required measuremnets, and keep track of what's missing
+   */
+  const missing = []
+  for (const m of Design.patternConfig?.measurements || []) {
+    if (typeof measurements[m] === 'undefined') missing.push(m)
+  }
+
+  /*
+   * Return true or false, plus a list of missing measurements
+   */
+  return [missing.length === 0, missing]
+}
+/**
+ * Helper method to determine whether a measurement uses degrees
+ *
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param {string} name - The name of the measurement
+ * @return {bool} isDegree - True if the measurment is a degree measurement
+ */
+export function isDegreeMeasurement(Swizzled, name) {
+  return Swizzled.config.degreeMeasurements.indexOf(name) !== -1
+}
+/*
+ * Helper method to check whether measururements are missing
+ *
+ * Note that this does not actually check the settings against
+ * the chose design, but rather relies on the missing measurements
+ * being set in state. That's because checking is more expensive,
+ * so we do it only once in the non-Swizzled ViewWrapper components
+ *
+ * @param {object} Swizzled - Object holding Swizzled code
+ * @param {object } state - The Editor state
+ * @return {bool} missing - True if there are missing measurments, false if not
+ */
+export function missingMeasurements(Swizzled, state) {
+  return (
+    !Swizzled.config.measurementsFreeViews.includes(state.view) &&
+    state._.missingMeasurements &&
+    state._.missingMeasurements.length > 0
+  )
+}
+/*
+ * This takes a POJO of measurements, and turns it into a structure that matches a design object
+ *
+ * @param {object} Swizzled - Swizzled code, not used here
+ * @param {object} measurements - The POJO of measurments
+ * @return {object} design - The measurements structured as a design object
+ */
+export function structureMeasurementsAsDesign(Swizzled, measurements) {
+  return measurements.patternConfig ? measurements : { patternConfig: { measurements } }
+}
diff --git a/packages/react-components/src/editor/swizzle/methods/ui-preferences.mjs b/packages/react-components/src/editor/swizzle/methods/ui-preferences.mjs
new file mode 100644
index 00000000000..39c61b157fd
--- /dev/null
+++ b/packages/react-components/src/editor/swizzle/methods/ui-preferences.mjs
@@ -0,0 +1,60 @@
+export function menuUiPreferencesStructure(Swizzled) {
+  const uiUx = Swizzled.config.uxLevels.ui
+  const uiPreferences = {
+    ux: {
+      ux: uiUx.ux,
+      emoji: '🖥️',
+      list: [1, 2, 3, 4, 5],
+      choiceTitles: {},
+      icon: Swizzled.components.UxIcon,
+      dflt: Swizzled.config.defaultUx,
+    },
+    aside: {
+      ux: uiUx.aside,
+      list: [0, 1],
+      choiceTitles: {
+        0: 'pe:noAside',
+        1: 'pe:withAside',
+      },
+      dflt: 1,
+      icon: Swizzled.components.MenuIcon,
+    },
+    kiosk: {
+      ux: uiUx.kiosk,
+      list: [0, 1],
+      choiceTitles: {
+        0: 'pe:websiteMode',
+        1: 'pe:kioskMode',
+      },
+      dflt: 0,
+      icon: Swizzled.components.KioskIcon,
+    },
+    rotate: {
+      ux: uiUx.rotate,
+      list: [0, 1],
+      choiceTitles: {
+        0: 'pe:rotateNo',
+        1: 'pe:rotateYes',
+      },
+      dflt: 0,
+      icon: Swizzled.components.RotateIcon,
+    },
+    renderer: {
+      ux: uiUx.renderer,
+      list: ['react', 'svg'],
+      choiceTitles: {
+        react: 'pe:renderWithReact',
+        svg: 'pe:renderWithCore',
+      },
+      valueTitles: {
+        react: 'React',
+        svg: 'SVG',
+      },
+      dflt: 'react',
+      icon: Swizzled.components.RocketIcon,
+    },
+  }
+
+  uiPreferences.ux.list.forEach((i) => (uiPreferences.ux.choiceTitles[i] = 'pe:ux' + i))
+  return uiPreferences
+}
diff --git a/packages/react-components/src/editor/utils.mjs b/packages/react-components/src/editor/utils.mjs
new file mode 100644
index 00000000000..432989daaa1
--- /dev/null
+++ b/packages/react-components/src/editor/utils.mjs
@@ -0,0 +1,4 @@
+/*
+ * To spread icon + text horizontal
+ */
+export const horFlexClasses = 'flex flex-row items-center justify-between gap-4 w-full'
diff --git a/packages/react-components/src/index.mjs b/packages/react-components/src/index.mjs
index ab5f209e1ad..008aa8aabd0 100644
--- a/packages/react-components/src/index.mjs
+++ b/packages/react-components/src/index.mjs
@@ -1,45 +1,47 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
-// Components
-// Pattern
-import { Pattern as PatternComponent } from './pattern/index.mjs'
-import { Svg as SvgComponent } from './pattern/svg.mjs'
-import { Defs as DefsComponent } from './pattern/defs.mjs'
-import { Group as GroupComponent } from './pattern/group.mjs'
-import { Stack as StackComponent } from './pattern/stack.mjs'
-import { Part as PartComponent } from './pattern/part.mjs'
-import { Point as PointComponent } from './pattern/point.mjs'
-import { Snippet as SnippetComponent } from './pattern/snippet.mjs'
-import { Path as PathComponent } from './pattern/path.mjs'
-import { Grid as GridComponent } from './pattern/grid.mjs'
-import { Text as TextComponent, TextOnPath as TextOnPathComponent } from './pattern/text.mjs'
+// Pattern components
+import { Defs } from './pattern/defs.mjs'
+import { Grid } from './pattern/grid.mjs'
+import { Group } from './pattern/group.mjs'
+import { Part } from './pattern/part.mjs'
+import { Path } from './pattern/path.mjs'
+import { Pattern } from './pattern/index.mjs'
+import { PatternXray } from './pattern-xray/index.mjs'
+import { Point } from './pattern/point.mjs'
+import { Stack } from './pattern/stack.mjs'
+import { Snippet } from './pattern/snippet.mjs'
+import { Svg } from './pattern/svg.mjs'
+import { Text, TextOnPath } from './pattern/text.mjs'
 // Pattern Utils
-import { getProps, withinPartBounds, getId, translateStrings } from './pattern/utils.mjs'
-// PatternXray
-import { PatternXray as PatternXrayComponent } from './pattern-xray/index.mjs'
+import { getId, getProps, translateStrings, withinPartBounds } from './pattern/utils.mjs'
+
+/**
+ * Translation namespaces used by these components
+ */
+const ns = ['editor']
 
 /*
  * Export all components as named exports
  */
-export const Pattern = PatternComponent
-export const Svg = SvgComponent
-export const Defs = DefsComponent
-export const Group = GroupComponent
-export const Stack = StackComponent
-export const Part = PartComponent
-export const Point = PointComponent
-export const Path = PathComponent
-export const Snippet = SnippetComponent
-export const Grid = GridComponent
-export const Text = TextComponent
-export const TextOnPath = TextOnPathComponent
-export const PatternXray = PatternXrayComponent
-
-/*
- * Export pattern utils
- */
-export const utils = {
-  getProps,
-  withinPartBounds,
+export {
+  // Pattern components
+  Pattern,
+  Svg,
+  Defs,
+  Group,
+  Stack,
+  Part,
+  Point,
+  Path,
+  Snippet,
+  Grid,
+  Text,
+  TextOnPath,
+  PatternXray,
+  // These are not React components but pattern helpers
   getId,
+  getProps,
   translateStrings,
+  withinPartBounds,
+  // These are not React components but various helpers
+  ns,
 }
diff --git a/plugins/plugin-annotations/src/flag.mjs b/plugins/plugin-annotations/src/flag.mjs
index d287a754f7f..cab990a94ed 100644
--- a/plugins/plugin-annotations/src/flag.mjs
+++ b/plugins/plugin-annotations/src/flag.mjs
@@ -41,7 +41,6 @@ function flag(type, store, data) {
 
   if (!data.id && !data.title) {
     store.log.warn(`store.flag.${type} called without an id or title property`)
-    console.log(data)
     return
   }
 
diff --git a/sites/org/components/layouts/editor.mjs b/sites/org/components/layouts/editor.mjs
new file mode 100644
index 00000000000..c85ad8fcfe1
--- /dev/null
+++ b/sites/org/components/layouts/editor.mjs
@@ -0,0 +1 @@
+export const EditorLayout = ({ children }) => <section id="fs-editor" className="m-0 p-0">{children}</section>
diff --git a/sites/org/hooks/use-design.mjs b/sites/org/hooks/use-design.mjs
index 30134d131e0..36bbe075de0 100644
--- a/sites/org/hooks/use-design.mjs
+++ b/sites/org/hooks/use-design.mjs
@@ -61,7 +61,7 @@ import { Waralee as waralee } from '@freesewing/waralee'
 import { Yuri as yuri } from '@freesewing/yuri'
 import { Lily as lily } from '@freesewing/lily'
 
-const designs = {
+export const designs = {
   aaron,
   albert,
   bee,
diff --git a/sites/org/pages/-/index.mjs b/sites/org/pages/-/index.mjs
new file mode 100644
index 00000000000..ca469960b81
--- /dev/null
+++ b/sites/org/pages/-/index.mjs
@@ -0,0 +1,48 @@
+// Dependencies
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Translation & router hook
+import { useTranslation } from 'next-i18next'
+import { useRouter } from 'next/router'
+// Layout components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { EditorLayout } from 'site/components/layouts/editor.mjs'
+// The FreeSewing pattern editor
+import { PatternEditor, ns as editorNs } from '@freesewing/react-components/editor'
+// The useDesign hook and FreeSewing collection
+import { designs } from 'site/hooks/use-design.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(pageNs, editorNs)
+
+const PatternEditorPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+  const router = useRouter()
+  const { locale } = router
+  /*
+   * Swizzled methods get an object holding swizzled methods as their
+   * first parameter. So we need to strip that out.
+   */
+  const altT = (methods, ...params) => t(...params)
+
+  return (
+    <PageWrapper {...page} title="Pattern Editor" layout={EditorLayout} footer={false}>
+      <PatternEditor {...{ designs, locale }} components={{}} methods={{ t: altT }} config={{}} />
+    </PageWrapper>
+  )
+}
+
+export default PatternEditorPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['editor'],
+        title: 'Pattern Editor',
+      },
+    },
+  }
+}
diff --git a/sites/shared/components/hodl/en.yaml b/sites/shared/components/hodl/en.yaml
index c1a2a0ac4a6..fa3876cad78 100644
--- a/sites/shared/components/hodl/en.yaml
+++ b/sites/shared/components/hodl/en.yaml
@@ -1,13 +1,13 @@
 oneMoment: One moment please
 giveUp: This is taking longer than expected
-0: Ordering more coffee
-1: Re-threading machine
-2: Doing some stuff that would bore you to death
-3: Removing pins from mouth
-4: Sending love to the FreeSewing patrons
-5: HODL!
-6: Turning it off and on again
-7: Searching for scissors
-8: Eating cookies
-9: Wait, what were we doing again?
-10: Not not loading something
+hodl0: Ordering more coffee
+hodl1: Re-threading machine
+hodl2: Doing some stuff that would bore you to death
+hodl3: Removing pins from mouth
+hodl4: Sending love to the FreeSewing patrons
+hodl5: HODL!
+hodl6: Turning it off and on again
+hodl7: Searching for scissors
+hodl8: Eating cookies
+hodl9: Wait, what were we doing again?
+hodl10: Not not loading something
diff --git a/sites/shared/components/inputs.mjs b/sites/shared/components/inputs.mjs
index 87244e552f3..9258e5d6f59 100644
--- a/sites/shared/components/inputs.mjs
+++ b/sites/shared/components/inputs.mjs
@@ -530,8 +530,8 @@ export const MeasieInput = ({
     typeof original === 'undefined'
       ? original
       : isDegree
-        ? Number(original)
-        : measurementAsUnits(original, units)
+      ? Number(original)
+      : measurementAsUnits(original, units)
   )
   const [validatedVal, setValidatedVal] = useState(measurementAsUnits(original, units))
   const [valid, setValid] = useState(null)
diff --git a/sites/shared/components/workbench/menus/design-options/values.mjs b/sites/shared/components/workbench/menus/design-options/values.mjs
index ad3a825e161..765d14c8660 100644
--- a/sites/shared/components/workbench/menus/design-options/values.mjs
+++ b/sites/shared/components/workbench/menus/design-options/values.mjs
@@ -36,7 +36,7 @@ export const DegOptionValue = ({ config, current, changed }) => (
 
 /** Displays the MmOptions are not supported */
 export const MmOptionValue = () => (
-  <span className="text-error">FIXME: No Mm Options are not supported</span>
+  <span className="text-error">FIXME: Mm Options are not supported</span>
 )
 
 /** Displays that constant values are not implemented in the front end */
diff --git a/sites/shared/components/workbench/menus/shared/inputs.mjs b/sites/shared/components/workbench/menus/shared/inputs.mjs
index 349f97ffc78..c2e7cb603e9 100644
--- a/sites/shared/components/workbench/menus/shared/inputs.mjs
+++ b/sites/shared/components/workbench/menus/shared/inputs.mjs
@@ -247,8 +247,8 @@ export const ListInput = ({
     const titleKey = config.choiceTitles
       ? config.choiceTitles[entry]
       : isDesignOption
-        ? `${design}:${name}.${entry}`
-        : `${name}.o.${entry}`
+      ? `${design}:${name}.${entry}`
+      : `${name}.o.${entry}`
     const title = config.titleMethod ? config.titleMethod(entry, t) : t(`${titleKey}.t`)
     const desc = config.valueMethod ? config.valueMethod(entry, t) : t(`${titleKey}.d`)
     const sideBySide = config.sideBySide || desc.length + title.length < 42
diff --git a/sites/shared/components/workbench/views/inspect/inspector/menu.mjs b/sites/shared/components/workbench/views/inspect/inspector/menu.mjs
index 13bb698b475..4c47aa5c403 100644
--- a/sites/shared/components/workbench/views/inspect/inspector/menu.mjs
+++ b/sites/shared/components/workbench/views/inspect/inspector/menu.mjs
@@ -5,8 +5,7 @@ import { useTranslation } from 'next-i18next'
 import { WrenchIcon } from 'shared/components/icons.mjs'
 import { Collapse } from 'shared/components/collapse.mjs'
 // Dependencies
-import { utils } from 'pkgs/react-components/src/index.mjs'
-const { getId } = utils
+import { getId } from 'pkgs/react-components/src/index.mjs'
 import orderBy from 'lodash.orderby'
 import { stackInfo } from './stack.mjs'
 import { pathInfo } from './path.mjs'
diff --git a/sites/shared/components/workbench/views/inspect/inspector/path.mjs b/sites/shared/components/workbench/views/inspect/inspector/path.mjs
index ca13f12a3d4..fe4f0f45c78 100644
--- a/sites/shared/components/workbench/views/inspect/inspector/path.mjs
+++ b/sites/shared/components/workbench/views/inspect/inspector/path.mjs
@@ -1,6 +1,6 @@
 //  __SDEFILE__ - This file is a dependency for the stand-alone environment
 // Components
-import { Path as ShowPath, utils } from 'pkgs/react-components/src/index.mjs'
+import { Path as ShowPath, getId, getProps } from 'pkgs/react-components/src/index.mjs'
 import { Attributes, pointCoords, KeyValTable } from './shared.mjs'
 import { formatMm } from 'shared/utils.mjs'
 import { TrashIcon, PrintIcon, SearchIcon } from 'shared/components/icons.mjs'
@@ -131,13 +131,13 @@ export const pathInfo = ({ id, pathName, stackName, path, inspector, t }) => {
 const InspectPath = ({ stackName, pathName, path, t, inspector }) => {
   const classes = path.attributes.list.class
   if (typeof classes === 'string' && classes.includes('skip-inspector')) return null
-  const id = utils.getId({ stackName, pathName, settings: { idPrefix: 'path-' } })
+  const id = getId({ stackName, pathName, settings: { idPrefix: 'path-' } })
 
   return (
     <g>
       <path
         d={path.d}
-        {...utils.getProps(path)}
+        {...getProps(path)}
         className={`hover:opacity-20 text-primary hover:cursor-pointer ${
           inspector.data.reveal[id] ? 'pulse-stroke stroke-3xl' : 'opacity-0 stroko-0 stroke-5xl'
         }`}
diff --git a/sites/shared/components/workbench/views/inspect/inspector/point.mjs b/sites/shared/components/workbench/views/inspect/inspector/point.mjs
index 962cd67d3e6..ff4748df8bd 100644
--- a/sites/shared/components/workbench/views/inspect/inspector/point.mjs
+++ b/sites/shared/components/workbench/views/inspect/inspector/point.mjs
@@ -1,6 +1,6 @@
 //  __SDEFILE__ - This file is a dependency for the stand-alone environment
 // Components
-import { Point as ShowPoint, utils } from 'pkgs/react-components/src/index.mjs'
+import { Point as ShowPoint, getId, withinPartBounds } from 'pkgs/react-components/src/index.mjs'
 import { Attributes, pointCoords, KeyValTable } from './shared.mjs'
 import { TrashIcon, PrintIcon, SearchIcon } from 'shared/components/icons.mjs'
 
@@ -113,7 +113,7 @@ const InspectPoint = ({
   inspector,
   color = 'contrast',
 }) => {
-  const id = utils.getId({ stackName, pointName, settings: { idPrefix: 'point-' } })
+  const id = getId({ stackName, pointName, settings: { idPrefix: 'point-' } })
 
   return (
     <g>
@@ -149,7 +149,7 @@ export const Point = ({
   inspector,
 }) => {
   // Don't include parts outside the part bounding box
-  if (!utils.withinPartBounds(point, part)) return null
+  if (!withinPartBounds(point, part)) return null
 
   return (
     <>
diff --git a/sites/shared/components/workbench/views/inspect/inspector/stack.mjs b/sites/shared/components/workbench/views/inspect/inspector/stack.mjs
index 622ccd522bc..f966691c615 100644
--- a/sites/shared/components/workbench/views/inspect/inspector/stack.mjs
+++ b/sites/shared/components/workbench/views/inspect/inspector/stack.mjs
@@ -1,5 +1,5 @@
 //  __SDEFILE__ - This file is a dependency for the stand-alone environment
-import { Stack as ShowStack, utils } from 'pkgs/react-components/src/index.mjs'
+import { Stack as ShowStack, getId } from 'pkgs/react-components/src/index.mjs'
 import { pointCoords, KeyValTable } from './shared.mjs'
 import { TrashIcon, PrintIcon, SearchIcon } from 'shared/components/icons.mjs'
 import { formatMm } from 'shared/utils.mjs'
@@ -65,7 +65,7 @@ export const stackInfo = ({ stackName, stack, inspector, id, t }) => ({
 })
 
 export const InspectStack = ({ stackName, stack, t, inspector }) => {
-  const id = utils.getId({ stackName, settings: { idPrefix: `stack-` } })
+  const id = getId({ stackName, settings: { idPrefix: `stack-` } })
 
   const reveal = inspector.data.reveal[id] ? true : false
 
diff --git a/sites/shared/config/next.mjs b/sites/shared/config/next.mjs
index 73aaf4e0844..2a71bc5f708 100644
--- a/sites/shared/config/next.mjs
+++ b/sites/shared/config/next.mjs
@@ -59,7 +59,7 @@ const config = ({ site }) => {
         )
       }
       // Load these from source, rather than compiled package
-      for (const pkg of ['core', 'i18n', 'models', 'snapseries', 'react-components']) {
+      for (const pkg of ['core', 'i18n', 'models', 'snapseries']) {
         config.resolve.alias[`@freesewing/${pkg}`] = path.resolve(
           `../../packages/${pkg}/src/index.mjs`
         )
diff --git a/sites/shared/config/tailwind.config.mjs b/sites/shared/config/tailwind.config.mjs
index 1a6dd719944..f9631cd8a9b 100644
--- a/sites/shared/config/tailwind.config.mjs
+++ b/sites/shared/config/tailwind.config.mjs
@@ -12,6 +12,7 @@ export default {
     './page-templates/*.mjs',
     '../shared/components/**/*.mjs',
     '../shared/config/tailwind-force.html',
+    '../../packages/react-components/src/**/*.mjs',
   ],
   plugins: [require('daisyui'), require('tailwindcss/nesting')],
   daisyui: {
diff --git a/sites/shared/prebuild/i18n.mjs b/sites/shared/prebuild/i18n.mjs
index cfc5cbdb20f..2670f919e77 100644
--- a/sites/shared/prebuild/i18n.mjs
+++ b/sites/shared/prebuild/i18n.mjs
@@ -8,17 +8,47 @@ import { designs as fsDesigns } from '../i18n/designs.mjs'
 import { designs as sdeDesigns } from '../i18n/sde-designs.mjs'
 import { plugins } from '../i18n/plugins.mjs'
 
+/*
+ * This holds aliases for namespaces so we can write them shorter
+ */
+const shorterNs = {
+  editor: 'pe',
+}
+
+/*
+ * Helper method to shorten certain namespaces to something ... shorter
+ */
+const shortenNamespace = (ns) => (shorterNs[ns] ? shorterNs[ns] : ns)
+
 /*
  * This is where we configure what folders we should check for
  * code-adjacent translation source files
  */
 const sitesFolder = path.join(fileURLToPath(import.meta.url), '..', '..', '..')
+const reactFolder = path.join(
+  fileURLToPath(import.meta.url),
+  '..',
+  '..',
+  '..',
+  '..',
+  'packages',
+  'react-components',
+  'src'
+)
 export const folders = {
   backend: [path.join(sitesFolder, 'backend', 'src', 'templates', 'email')],
-  org: [path.join(sitesFolder, 'org', 'pages'), path.join(sitesFolder, 'org', 'components')],
+  org: [
+    path.join(sitesFolder, 'org', 'pages'),
+    path.join(sitesFolder, 'org', 'components'),
+    reactFolder,
+  ],
   dev: [path.join(sitesFolder, 'dev', 'pages'), path.join(sitesFolder, 'dev', 'components')],
-  lab: [path.join(sitesFolder, 'lab', 'pages'), path.join(sitesFolder, 'lab', 'components')],
-  sde: [path.join(sitesFolder, 'sde', 'pages')],
+  lab: [
+    path.join(sitesFolder, 'lab', 'pages'),
+    path.join(sitesFolder, 'lab', 'components'),
+    reactFolder,
+  ],
+  sde: [path.join(sitesFolder, 'sde', 'pages'), reactFolder],
   shared: [
     path.join(sitesFolder, 'shared', 'components'),
     path.join(sitesFolder, 'shared', 'i18n'),
@@ -79,7 +109,7 @@ const getI18nFileList = async (site, languages) => {
  */
 const languageAndNamespaceFromFilename = (file) => [
   path.basename(file).split('.')[0],
-  path.dirname(file).split('/').pop(),
+  shortenNamespace(path.dirname(file).split('/').pop()),
 ]
 
 /*
diff --git a/yarn.lock b/yarn.lock
index 0bf0f2f4652..9cc2bd8042b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3594,6 +3594,15 @@ axe-core@=4.7.0:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz"
   integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
+axios@1.6.8:
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.8.tgz#66d294951f5d988a00e87a0ffb955316a619ea66"
+  integrity sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axios@1.7.4, axios@^1.5.1, axios@^1.6.0:
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.4.tgz#4c8ded1b43683c8dd362973c393f3ede24052aa2"
@@ -7340,6 +7349,11 @@ html-to-text@^9.0.5:
     htmlparser2 "^8.0.2"
     selderee "^0.11.0"
 
+html-url-attributes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/html-url-attributes/-/html-url-attributes-3.0.0.tgz#fc4abf0c3fb437e2329c678b80abb3c62cff6f08"
+  integrity sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow==
+
 html-void-elements@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz"
@@ -10317,6 +10331,11 @@ minizlib@^2.1.1, minizlib@^2.1.2:
     minipass "^3.0.0"
     yallist "^4.0.0"
 
+mitt@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
 mkdirp@0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz"
@@ -10729,6 +10748,13 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
+nuqs@^1.17.6:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/nuqs/-/nuqs-1.19.1.tgz#02058e5531e0abb712394e7ec125225f59d87f55"
+  integrity sha512-oixldNThB1wbu6B5K961++7wpTz/EZFPWnraGmIQhibDT+YxRJNplWMIoPJgL4dlsiSDVI5bbUWKpzsIWVh3Pg==
+  dependencies:
+    mitt "^3.0.1"
+
 nx@19.0.3, "nx@>=17.1.2 < 20":
   version "19.0.3"
   resolved "https://registry.yarnpkg.com/nx/-/nx-19.0.3.tgz#184ba380e852e65d4f2a754938bf19d63074d0c6"
@@ -12006,6 +12032,22 @@ react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-markdown@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-9.0.1.tgz#c05ddbff67fd3b3f839f8c648e6fb35d022397d1"
+  integrity sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    devlop "^1.0.0"
+    hast-util-to-jsx-runtime "^2.0.0"
+    html-url-attributes "^3.0.0"
+    mdast-util-to-hast "^13.0.0"
+    remark-parse "^11.0.0"
+    remark-rehype "^11.0.0"
+    unified "^11.0.0"
+    unist-util-visit "^5.0.0"
+    vfile "^6.0.0"
+
 react-property@2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz"
@@ -14283,11 +14325,21 @@ urlgrey@1.0.0:
   dependencies:
     fast-url-parser "^1.1.3"
 
+use-local-storage-state@19.1.0:
+  version "19.1.0"
+  resolved "https://registry.yarnpkg.com/use-local-storage-state/-/use-local-storage-state-19.1.0.tgz#9424981fd95dd37d253aad982f0a959ef5542fe2"
+  integrity sha512-3Ea6uRtRaSwpZYD9maZPKoEEGRuHmVA7zGrV/Uh9s5NTj9K1x/MB4IOQoywjUesQyhXmJq6bqjC5cAqlsXoOTw==
+
 use-local-storage-state@19.3.1:
   version "19.3.1"
   resolved "https://registry.yarnpkg.com/use-local-storage-state/-/use-local-storage-state-19.3.1.tgz#06826e2f2af4d8ac37b081a4fb0d7b78aaa7724f"
   integrity sha512-y3Z1dODXvZXZB4qtLDNN8iuXbsYD6TAxz61K58GWB9/yKwrNG9ynI0GzCTHi/Je1rMiyOwMimz0oyFsZn+Kj7Q==
 
+use-session-storage-state@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/use-session-storage-state/-/use-session-storage-state-19.0.0.tgz#582307c5fd9a27cb9a54390c9ecad6284bc4c95c"
+  integrity sha512-u6kyD7lgAm0xSwLerXcrbaNLWqeYsXYPuB97XZftBPAqPo5gVAMvAeFsRLwxblpCQDxFkjKsz/apTM5OlkbKFg==
+
 use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"