wip: Work on editor docs

package.json

@@ -103,7 +103,6 @@
     "@babel/plugin-syntax-import-assertions": "^7.22.5",
     "@babel/preset-react": "^7.22.15",
     "c8": "^10.1.2",
-    "eslint-config-next": "^14.0.1",
     "glob": "^11.0.1",
     "rehype-format": "^5.0.0",
     "rehype-stringify": "^10.0.1",

packages/react/components/Account/Set.mjs

@@ -15,6 +15,7 @@ import {
   shortDate,
   timeAgo,
 } from '@freesewing/utils'
+import { modalMeasurementHelp } from '@freesewing/react/components/Help'
 // Context
 import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
 import { ModalContext } from '@freesewing/react/context/Modal'
@@ -57,7 +58,6 @@ import { Popout } from '@freesewing/react/components/Popout'
 import { bundlePatternTranslations, draft, flattenFlags } from '../Editor/lib/index.mjs'
 import { Bonny } from '@freesewing/bonny'
 import { MiniNote, MiniTip } from '../Mini/index.mjs'
-import { modalMeasurementHelp } from '@freesewing/react/components/Help'
 
 /**
  * Component to show an individual measurements set

packages/react/components/Docusaurus/index.mjs

@@ -9,6 +9,7 @@ import {
   ChatIcon,
   DesignIcon,
   DocsIcon,
+  HelpIcon,
   ShowcaseIcon,
   RssIcon,
   LockIcon,
@@ -184,4 +185,7 @@ const navbarItems = {
       Link={props.Link}
     />
   ),
+  support: (props) => (
+    <SimpleNavbarItem label="Support" href="/support/" Icon={HelpIcon} Link={props.Link} />
+  ),
 }

packages/react/components/Editor/components/menus/Container.mjs

@@ -1,11 +1,24 @@
 // Dependencies
 import { menuValueWasChanged } from '../../lib/index.mjs'
 import { designOptionType } from '@freesewing/utils'
+import {
+  modalDesignOptionHelp,
+  modalCoreSettingHelp,
+  modalUiPreferenceHelp,
+} from '@freesewing/react/components/Help'
+// Context
+import { ModalContext } from '@freesewing/react/context/Modal'
 // Hooks
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useContext } from 'react'
 // Components
 import { SubAccordion } from '../Accordion.mjs'
-import { EditIcon, GroupIcon, OptionsIcon, ResetIcon } from '@freesewing/react/components/Icon'
+import {
+  HelpIcon,
+  EditIcon,
+  GroupIcon,
+  OptionsIcon,
+  ResetIcon,
+} from '@freesewing/react/components/Icon'
 import { Fieldset } from '@freesewing/react/components/Input'
 import { MiniTip } from '@freesewing/react/components/Mini'
 
@@ -25,6 +38,7 @@ const iconButtonClass = 'tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0
  * @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  {strign} type      one of designOption, coreSetting, or uiPreference
  */
 export const MenuItem = ({
   name,
@@ -38,7 +52,9 @@ export const MenuItem = ({
   state,
   config,
   Design,
+  type,
 }) => {
+  const { setModal } = useContext(ModalContext)
   // Local state - whether the override input should be shown
   const [override, setOverride] = useState(false)
 
@@ -69,6 +85,39 @@ export const MenuItem = ({
 
   // get buttons for open and closed states
   const buttons = []
+  if (type === 'designOption')
+    buttons.push(
+      <button
+        key="help"
+        className="tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0 tw:text-success"
+        onClick={() => modalDesignOptionHelp(Design.designConfig.data.id, name, setModal)}
+        title="Show help for this design option"
+      >
+        <HelpIcon />
+      </button>
+    )
+  else if (type === 'coreSetting')
+    buttons.push(
+      <button
+        key="help"
+        className="tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0 tw:text-success"
+        onClick={() => modalCoreSettingHelp(name, setModal)}
+        title="Show help for this core setting"
+      >
+        <HelpIcon />
+      </button>
+    )
+  else if (type === 'uiPreference')
+    buttons.push(
+      <button
+        key="help"
+        className="tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0 tw:text-success"
+        onClick={() => modalUiPreferenceHelp(name, setModal)}
+        title="Show help for this UI preference"
+      >
+        <HelpIcon />
+      </button>
+    )
   if (allowOverride)
     buttons.push(
       <button

packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs

@@ -124,6 +124,7 @@ export const CoreSetting = ({ name, config, ux, updateHandler, current, passProp
 
   return (
     <MenuItem
+      type="coreSetting"
       {...{
         name,
         config,

packages/react/components/Editor/components/menus/DesignOptionsMenu.mjs

@@ -121,6 +121,7 @@ export const DesignOption = ({ config, settings, ux, inputs, values, ...rest })
 
   return (
     <MenuItem
+      type="designOption"
       {...{
         config,
         ux,

packages/react/components/Editor/components/menus/LayoutMenu.mjs

@@ -61,63 +61,3 @@ export const LayoutSettingsMenu = ({ update, state, Design }) => {
     />
   )
 }
-
-/*
-const PrintActions = ({ state, update }) => (
-  <SubAccordion
-    items={[
-      [
-        <div className="tw:w-full tw:flex tw:flex-row tw:gap2 tw:justify-between" key={1}>
-          <div className="tw:flex tw:flex-row tw:items-center tw:gap-2">
-            <LeftRightIcon />
-            <span>{'workbench:partTransfo'}</span>
-          </div>
-          {state.ui.hideMovableButtons ? <BoolNoIcon /> : <BoolYesIcon />}
-        </div>,
-        <ListInput
-          key={2}
-          update={() => update.state.ui('hideMovableButtons', state.ui.hideMovableButtons ? false : true)}
-          label={
-            <span className="tw:text-base tw:font-normal">{'workbench:partTransfoDesc'}</span>
-          }
-          list={[
-            {
-              val: true,
-              label: 'workbench:partTransfoNo',
-              desc: 'workbench:partTransfoNoDesc',
-            },
-            {
-              val: false,
-              label: 'workbench:partTransfoYes',
-              desc: 'workbench:partTransfoYesDesc',
-            },
-          ]}
-          current={state.ui.hideMovableButtons ? true : false}
-        />,
-        'partTransfo',
-      ],
-      [
-        <div className="tw:w-full tw:flex tw:flex-row tw:gap2 tw:justify-between" key={1}>
-          <div className="tw:flex tw:flex-row tw:items-center tw:gap-2">
-            <ResetIcon />
-            <span>{'workbench:resetPrintLayout'}</span>
-          </div>
-          <WarningIcon />
-        </div>,
-
-        <Fragment key={2}>
-          <p>{'workbench:resetPrintLayoutDesc'}</p>
-          <button
-            className={`${horFlexClasses} tw:btn tw:btn-warning tw:btn-outline tw:w-full`}
-            onClick={() => update.ui(['layouts', 'print'])}
-          >
-            <ResetIcon />
-            <span>{'workbench:resetPrintLayout'}</span>
-          </button>
-        </Fragment>,
-        'reset',
-      ],
-    ]}
-  />
-)
-*/

packages/react/components/Editor/components/menus/UiPreferencesMenu.mjs

@@ -53,5 +53,11 @@ export const UiPreferencesMenu = ({ update, state, Design }) => {
 }
 
 export const UiPreference = ({ name, ux, ...rest }) => (
-  <MenuItem {...rest} name={name} allowToggle={!['ux', 'view'].includes(name) && ux > 3} ux={ux} />
+  <MenuItem
+    type="uiPreference"
+    {...rest}
+    name={name}
+    allowToggle={!['ux', 'view'].includes(name) && ux > 3}
+    ux={ux}
+  />
 )

packages/react/components/Editor/components/views/DraftView.mjs

@@ -1,7 +1,9 @@
 // Dependencies
-import React from 'react'
+import React, { useContext } from 'react'
 import { bundlePatternTranslations, draft, missingMeasurements } from '../../lib/index.mjs'
 import { colors, darkColors } from '@freesewing/plugin-theme'
+// Context
+import { ModalContext } from '@freesewing/react/context/Modal'
 // Hooks
 import { useColorMode } from '@docusaurus/theme-common'
 // Components
@@ -29,6 +31,7 @@ import { translateStrings } from '../../../Pattern/index.mjs'
  * @return {function} DraftView - React component
  */
 export const DraftView = ({ Design, state, update, config, plugins = [], PluginOutput = Null }) => {
+  const { modalContent } = useContext(ModalContext)
   /*
    * We need to manipulate the theme for SVG in the browser
    */
@@ -103,6 +106,7 @@ export const DraftView = ({ Design, state, update, config, plugins = [], PluginO
           rotate={state.ui.rotate}
           update={update}
         />
+        {modalContent}
       </>
     )
   }

packages/react/components/Editor/lib/core-settings.mjs

@@ -61,12 +61,6 @@ export function menuCoreSettingsSaboolHandler({ toggleSa }) {
   return toggleSa
 }
 
-const CoreDocsLink = ({ item }) => (
-  <a href={`/docs/about/site/draft/#${item.toLowerCase()}`} className={`${linkClasses} tw:px-2`}>
-    Learn more
-  </a>
-)
-
 export function menuCoreSettingsStructure({
   units = 'metric',
   sabool = false,
@@ -77,12 +71,7 @@ export function menuCoreSettingsStructure({
     sabool: {
       dense: true,
       title: 'Include seam allowance',
-      about: (
+      about: <>Controls whether or not you want to include seam allowance on your pattern.</>,
-        <>
-          Controls whether or not you want to include seam allowance on your pattern.
-          <CoreDocsLink item="sabool" />
-        </>
-      ),
       ux: config.uxLevels.core.sa,
       list: [0, 1],
       choiceTitles: {
@@ -99,12 +88,7 @@ export function menuCoreSettingsStructure({
     samm: sabool
       ? {
           title: 'Seam Allowance Size',
-          about: (
+          about: <>Controls the size of the pattern&apos;s seam allowance.</>,
-            <>
-              Controls the size of the pattern&apos;s seam allowance.
-              <CoreDocsLink item="sa" />
-            </>
-          ),
           ux: config.uxLevels.core.sa,
           min: 0,
           max: units === 'imperial' ? 25.4 : 25, // values are in mm
@@ -115,12 +99,7 @@ export function menuCoreSettingsStructure({
     units: {
       dense: true,
       title: 'Pattern units',
-      about: (
+      about: <>Allows you to switch between metric and imperial units on the pattern.</>,
-        <>
-          Allows you to switch between metric and imperial units on the pattern.
-          <CoreDocsLink item="units" />
-        </>
-      ),
       ux: config.uxLevels.core.units,
       list: ['metric', 'imperial'],
       dflt: accountUnits,
@@ -141,7 +120,6 @@ export function menuCoreSettingsStructure({
         <>
           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.
-          <CoreDocsLink item="paperless" />
         </>
       ),
       ux: config.uxLevels.core.paperless,
@@ -164,7 +142,6 @@ export function menuCoreSettingsStructure({
         <>
           Controls how detailed the pattern is; Either a complete pattern with all details, or a
           basic outline of the pattern parts.
-          <CoreDocsLink item="complete" />
         </>
       ),
       ux: config.uxLevels.core.complete,
@@ -187,7 +164,6 @@ export function menuCoreSettingsStructure({
         <>
           Controls efforts to save paper. Disable this to expand all pattern parts at the cost of
           using more space & paper.
-          <CoreDocsLink item="expand" />
         </>
       ),
       ux: config.uxLevels.core.expand,
@@ -206,12 +182,7 @@ export function menuCoreSettingsStructure({
     only: {
       dense: true,
       title: 'Only included selected pattern parts',
-      about: (
+      about: <>Allows you to control what parts to include in your pattern.</>,
-        <>
-          Allows you to control what parts to include in your pattern.
-          <CoreDocsLink item="only" />
-        </>
-      ),
       ux: config.uxLevels.core.only,
       dflt: false,
       list: parts,
@@ -224,7 +195,6 @@ export function menuCoreSettingsStructure({
         <>
           Allows you to control the scale of annotations on the pattern. This is most useful when
           generating very small patterns, like for doll outfits.
-          <CoreDocsLink item="scale" />
         </>
       ),
       ux: config.uxLevels.core.scale,
@@ -240,7 +210,6 @@ export function menuCoreSettingsStructure({
         <>
           Controls the gap between pattern parts, as well as the gap between the parts and the page
           edge.
-          <CoreDocsLink item="margin" />
         </>
       ),
       ux: config.uxLevels.core.margin,

packages/react/components/Editor/lib/design-options.mjs

@@ -4,17 +4,6 @@ import { designOptionType, set, orderBy } from '@freesewing/utils'
 import { i18n } from '@freesewing/collection'
 import { linkClasses } from '@freesewing/utils'
 
-const DesignDocsLink = ({ design, item }) => (
-  <a
-    href={`/docs/designs/${design}/options/#${item.toLowerCase()}`}
-    className={`${linkClasses} tw:px-2`}
-    target="_BLANK"
-    rel="noreferrer"
-  >
-    Learn more
-  </a>
-)
-
 export function menuDesignOptionsStructure(design, options, settings, asFullList = false) {
   if (!options) return options
   const sorted = {}
@@ -24,12 +13,7 @@ export function menuDesignOptionsStructure(design, options, settings, asFullList
         ...option,
         name,
         title: i18n[design]?.en?.o?.[name]?.t || name,
-        about: (
+        about: <span>{i18n[design]?.en?.o?.[name]?.d || name}</span>,
-          <span>
-            {i18n[design]?.en?.o?.[name]?.d || name}
-            <DesignDocsLink item={name} design={design} />
-          </span>
-        ),
         dense: true,
         sideBySide: true,
       }

packages/react/components/Editor/lib/ui-preferences.mjs

@@ -3,12 +3,6 @@ import { defaultConfig } from '../config/index.mjs'
 import { linkClasses } from '@freesewing/utils'
 import { AsideIcon, RotateIcon, RocketIcon, UxIcon } from '@freesewing/react/components/Icon'
 
-const UiDocsLink = ({ item }) => (
-  <a href={`/docs/about/site/draft/#${item.toLowerCase()}`} className={`${linkClasses} tw:px-2`}>
-    Learn more
-  </a>
-)
-
 export function menuUiPreferencesStructure() {
   const uiUx = defaultConfig.uxLevels.ui
   const uiPreferences = {
@@ -19,7 +13,6 @@ export function menuUiPreferencesStructure() {
         <span>
           Uses the right side of the screen for the Design Options, Core Settings, and UI
           Preferences menus.
-          <UiDocsLink item="aside" />
         </span>
       ),
       ux: uiUx.aside,
@@ -35,10 +28,7 @@ export function menuUiPreferencesStructure() {
       dense: true,
       title: 'User Experience',
       about: (
-        <span>
+        <span>Controls the user experience, from keep it simple, to give me all the powers.</span>
-          Controls the user experience, from keep it simple, to give me all the powers.
-          <UiDocsLink item="control" />
-        </span>
       ),
       ux: uiUx.ux,
       emoji: '🖥️',
@@ -63,12 +53,7 @@ export function menuUiPreferencesStructure() {
     rotate: {
       dense: true,
       title: 'Rotate Pattern',
-      about: (
+      about: <span>Allows you to rotate your pattern 90 degrees, handy for tall patterns.</span>,
-        <span>
-          Allows you to rotate your pattern 90 degrees, handy for tall patterns.
-          <UiDocsLink item="rotate" />
-        </span>
-      ),
       ux: uiUx.rotate,
       list: [0, 1],
       choiceTitles: {
@@ -81,12 +66,7 @@ export function menuUiPreferencesStructure() {
     renderer: {
       dense: true,
       title: 'Pattern render engine',
-      about: (
+      about: <span>Change the underlying method for rendering the pattern on screen.</span>,
-        <span>
-          Change the underlying method for rendering the pattern on screen.
-          <UiDocsLink item="renderer" />
-        </span>
-      ),
       ux: uiUx.renderer,
       list: ['react', 'svg'],
       choiceTitles: {

packages/react/components/Help/index.mjs

@@ -2,38 +2,80 @@ import React from 'react'
 // Components
 import { ModalWrapper } from '@freesewing/react/components/Modal'
 
-/**
+const Iframe = (props) => <iframe {...props} style={{ height: '90vh', width: '90vh' }} />
- * A component to display inline help for a measurement.
+
+/*
+ * A component to display inline help for a design option
  *
- * This is typically loaded as modal content as it returns an ifram
+ * This is typically loaded as modal content as it returns an iframe.
  *
  * @component
  * @param {object} props - All component props
- * @param {string} [props.m = undefined] - The measurment name (id)
+ * @param {string} props.design - The design name
+ * @param {string} props.o - The option ID
  * @returns {JSX.Element}
  */
-export const DesignOptionHelp = ({ design, o }) =>
+const DesignOptionHelp = ({ design, o }) =>
   design && o ? (
-    <iframe
+    <Iframe
       src={`https://freesewing.eu/docs/designs/${design.toLowerCase()}/options/${o.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
       title="Design Option Help"
-      style={{ height: '90vh', width: '90vw' }}
     />
   ) : (
     <p>Invalid props provided to DesignOptionHelp.</p>
   )
 
-/**
+/*
+ * A component to display inline help for a core setting
+ *
+ * This is typically loaded as modal content as it returns an iframe.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.name - The core setting name/id
+ * @returns {JSX.Element}
+ */
+const CoreSettingHelp = ({ name }) =>
+  name ? (
+    <Iframe
+      src={`https://freesewing.eu/docs/about/site/draft/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
+      title="Core Setting Help"
+    />
+  ) : (
+    <p>Invalid props provided to CoreSettingsHelp.</p>
+  )
+
+/*
+ * A component to display inline help for a UI preference
+ *
+ * This is typically loaded as modal content as it returns an iframe.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.name - The core setting name/id
+ * @returns {JSX.Element}
+ */
+const UiPreferenceHelp = ({ name }) =>
+  name ? (
+    <Iframe
+      src={`https://freesewing.eu/docs/about/site/draft/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
+      title="UI Preference Help"
+    />
+  ) : (
+    <p>Invalid props provided to UiPreferenceHelp.</p>
+  )
+
+/*
  * A component to display inline help for a measurement.
  *
- * This is typically loaded as modal content as it returns an ifram
+ * This is typically loaded as modal content as it returns an iframe
  *
  * @component
  * @param {object} props - All component props
  * @param {string} [props.m = undefined] - The measurment name (id)
  * @returns {JSX.Element}
  */
-export const MeasurementHelp = ({ m }) =>
+const MeasurementHelp = ({ m }) =>
   m ? (
     <iframe
       src={`https://freesewing.eu/docs/measurements/${m.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
@@ -41,12 +83,28 @@ export const MeasurementHelp = ({ m }) =>
       style={{ height: '90vh', width: '90vw' }}
     />
   ) : (
-    <p>No measurment name provided in the m prop.</p>
+    <p>No measurement name provided in the m prop.</p>
   )
 
+export function modalCoreSettingHelp(name, setModal) {
+  setModal(
+    <ModalWrapper fullWidth keepOpenOnClick>
+      <CoreSettingHelp name={name} />
+    </ModalWrapper>
+  )
+}
+
+export function modalUiPreferenceHelp(name, setModal) {
+  setModal(
+    <ModalWrapper fullWidth keepOpenOnClick>
+      <UiPreferenceHelp name={name} />
+    </ModalWrapper>
+  )
+}
+
 export function modalDesignOptionHelp(design, o, setModal) {
   setModal(
-    <ModalWrapper fullWidth>
+    <ModalWrapper fullWidth keepOpenOnClick>
       <DesignOptionHelp {...{ design, o }} />
     </ModalWrapper>
   )
@@ -55,7 +113,7 @@ export function modalDesignOptionHelp(design, o, setModal) {
 export function modalMeasurementHelp(m, setModal) {
   console.log('in modalMeasurmentHelp', { m, setModal })
   setModal(
-    <ModalWrapper fullWidth>
+    <ModalWrapper fullWidth keepOpenOnClick>
       <MeasurementHelp m={m} />
     </ModalWrapper>
   )

sites/dev/package.json

@@ -17,8 +17,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "3.7.0",
+    "@docusaurus/core": "3.8.0",
-    "@docusaurus/preset-classic": "3.7.0",
+    "@docusaurus/preset-classic": "3.8.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
@@ -28,8 +28,8 @@
   },
   "devDependencies": {
     "@babel/preset-react": "^7.26.3",
-    "@docusaurus/module-type-aliases": "3.7.0",
+    "@docusaurus/module-type-aliases": "3.8.0",
-    "@docusaurus/types": "3.7.0",
+    "@docusaurus/types": "3.8.0",
     "@tailwindcss/postcss": "^4.1.3",
     "autoprefixer": "^10.4.20",
     "daisyui": "^5.0.19",

sites/org/docs/docs/about/editor/readme.mdx

@@ -1,5 +0,0 @@
----
-title: FreeSewing Pattern Editor
----
-
-FIXME: Document v4 editor here

sites/org/docs/docs/about/faq/newsletter/readme.mdx

@@ -1,7 +0,0 @@
----
-title: Newsletter
----
-
-import DocCardList from '@theme/DocCardList'
-
-<DocCardList />

sites/org/docs/docs/about/faq/readme.mdx

@@ -2,6 +2,17 @@
 title: Frequently Asked Questions
 ---
 
-import DocCardList from '@theme/DocCardList'
+Below is a list of questions that we commonly get from people new to FreeSewing:
 
-<DocCardList />
+- [Can I use FreeSewing patterns for commercial purposes?](/docs/about/faq/commercial-use/)
+- [How can I sign up? I never received the E-mail to activate my account!](/docs/about/faq/email-trouble/)
+- [I'm having trouble with measurements. What should I check?](/docs/about/faq/measurements-issues/)
+- [Why do I have to click again to confirm I want to subscribe to your newsletter after I already clicked the confirmation link you sent me?](/docs/about/faq/why-subscribe-multiple-clicks/)
+- [Why do I have to click again to confirm I want to unsubscribe from the newsletter?](/docs/about/faq/newsletter/why-unsubscribe-multiple-clicks/)
+- [Why don't you use double notches to mark the back of the pattern?](/docs/about/faq/notches/)
+- [My printed PDFs are incorrectly sized/scaled. What's wrong?](/docs/about/faq/printing-issues/)
+- [Why is seam allowance not included by default?](/docs/about/faq/seam-allowance/)
+- [Where did the "standard" measurements go?](/docs/about/faq/standard-measurements/)
+- [Why are seam allowances tapered?](/docs/about/faq/tapering-seams/)
+- [Where can I download the sewing patterns?](/docs/about/faq/where-to-download-patterns/)
+- [Why do you even publish womenswear blocks? They are [insert strong opinion here].](/docs/about/faq/womenswear-blocks/)

sites/org/docs/docs/about/faq/standard-measurements/readme.mdx

@@ -2,7 +2,7 @@
 title: Where did the "standard" measurements go?
 ---
 
-In past versions of FreeSewing, we published a sizing table so that users could try out the platform without entering their measurements. Because there are no real standards for sizes, ours were -- like all sizing charts -- made up.
+In older versions of FreeSewing, we published a sizing table so that users could try out the platform without entering their measurements. Because there are no real standards for sizes, ours were -- like all sizing charts -- made up.
 
 We found that publishing these created unreasonable expectations. Users were disappointed when their patterns generated with "standard" sizes didn't fit as they expected. We removed the made up measurements in favor of [curated measurements sets](/docs/about/site/csets/).
 

sites/org/docs/docs/about/faq/where-to-download-patterns/readme.mdx

@@ -0,0 +1,14 @@
+---
+title: Where can I download the sewing patterns?
+---
+
+It can be frustrating for visitors who come here expecting a website where they
+can download sewing patterns that they can't seem to find the sewing patterns
+to download. Almost like hiding the _download button_ is some elaborate scheme
+to waste their time.
+
+In reality, FreeSewing is _very_ different from a website with some
+links to PDF sewing patterns.
+
+You can [generate bespoke patterns here](/) but if you are looking for a list
+of patterns to download, [you have not understood what it is that we do here](/docs/about/).

sites/org/docs/docs/about/guide/readme.mdx

@@ -1,116 +0,0 @@
----
-title: Getting started with FreeSewing.org
----
-
-Hi there 👋 and welcome to FreeSewing.org 🙂
-
-If you are new to FreeSewing, please take a few minutes to read this page and learn all about:
-
-- [What FreeSewing is](#what-is-freesewing)
-- [What FreeSewing.org is](#what-is-freesewingorg)
-- [What the difference is between patterns and designs](#patterns-vs-designs)
-- [What measurements sets are](#measurements-sets)
-- [Where to turn to for support](#where-to-turn-to-for-help)
-
-Sounds good? Then let's dive right in:
-
-## What is FreeSewing?
-
-FreeSewing is the leading [open source library](https://github.com/freesewing)
-for on-demand garment manufacturing. Loved by home sewers and fashion
-entrepreneurs alike, FreeSewing provides the tech stack for your creative
-endeavours.
-
-FreeSewing is the brain-child of [Joost De
-Cock](https://github.com/joostdecock), the FreeSewing maintainer. Various
-other people have contributed to FreeSewing over the years (the [FreeSewing
-contributors](https://github.com/freesewing/freesewing?tab=readme-ov-file#contributors-)),
-and the project is financially supported by [the FreeSewing
-patrons](https://freesewing.org/patrons).
-
-:::tip
-
-For more info about FreeSewing -- the open source project -- refer to
-[FreeSewing.dev](https://freesewing.dev/) which hosts documentation for
-developers, designers, contributors, and translators.
-
-:::
-
-## What is FreeSewing.org?
-
-Freesewing.org is the FreeSewing project's flagship website where we offer
-our ever-growing collection of bespoke sewing patterns to makers all
-over the world.
-
-FreeSewing is not about fashion, trends, or publishing the hot new pattern of
-the season. Instead, we want to empower makers by distilling the knowledge of
-the sewing community into parametric designs + documentation, and make that
-information freely available.
-
-FreeSewing.org is our most visible asset, and for many people their first
-encounter with the FreeSewing project.
-
-## Patterns vs Designs
-
-If you came to this site looking for _sewing patterns_ and did not immediately
-find a place to download them, that's because all of FreeSewing's sewing
-patterns are **made to measure**.
-
-We don’t scale or grade patterns.
-Instead, FreeSewing drafts a design into a pattern made to your measurements.
-That happens in real-time, in your browser.
-
-- **Design**: One of the styles that we offer. We've got dozens of designs, and
-  you can try them all
-- **Pattern**: The result of _drafting the design_ (turning it into a sewing
-  pattern to your measurements). We've got thousands of patterns stored for our
-  users, and some might be yours
-
-:::tip
-
-##### Saving is optional
-
-When you generate a bespoke pattern, you can tweak it endlessly through its various options,
-and export it to a range of formats, including PDF.
-But it remains ephemeral until you save it to your account, so it
-becomes one of **your patterns**.
-
-Saving your pattern is optional, but it allows you to re-visit the pattern later,
-make further tweaks to it or simply download the PDF again.
-
-You can save as many patterns as you like.
-:::
-
-:::note
-
-##### We respect the strictest privacy laws on the planet
-
-To generate bespoke sewing patterns, we need your measurements.
-Asking for them every time would be rather tedious, so we store them in your account.
-
-Your account data is stored on our backend, subject to [our privacy notice](/docs/about/privacy),
-and with respect for [your rights](/docs/about/rights/).
-:::
-
-## Measurements sets
-
-Once you have an account, you can start adding measurements.
-But that quickly brings up the next question: what if you want
-a pattern for you, but also for your partner?
-
-That's why we have **measurements sets**. You can add as many measurements sets as you like.
-Having just one for yourself is fine too.
-
-:::tip
-
-##### Curated measurements sets
-
-FreeSewing also provides **curated measurements sets**. These are measurements
-set from real people that we use to test our platform and designs. But you can
-also use them to test-drive our platform before you break out the measuring
-tape.
-:::
-
-## Where to turn to for help
-
-If you get stuck, consult [the support page](https://freesewing.org/support/) for various support options.

sites/org/docs/docs/about/readme.mdx

@@ -2,6 +2,136 @@
 title: About FreeSewing
 ---
 
-import DocCardList from '@theme/DocCardList'
+Hi there 👋 and welcome to FreeSewing.eu We're happy to have you 🙂
 
-<DocCardList />
+If you are new to FreeSewing, please take a few minutes to read this page and learn all about:
+
+- [What FreeSewing is](#what-is-freesewing)
+- [What FreeSewing.eu is](#what-is-freesewingeu)
+- [What the difference is between patterns and designs](#patterns-vs-designs)
+- [What measurements sets are](#measurements-sets)
+- [How to generate bespoke sewing patterns](#editor)
+- [Where to turn to for support](#where-to-turn-to-for-help)
+
+Sounds good? Then let's dive right in:
+
+## What is FreeSewing?
+
+FreeSewing is the leading [open source library](https://codeberg.org/freesewing/freesewing)
+for on-demand garment manufacturing. Loved by home sewers and fashion
+entrepreneurs alike, FreeSewing provides the tech stack for your creative
+endeavours.
+
+FreeSewing is the brain-child of [Joost De
+Cock](https://codeberg.org/joostdecock), the FreeSewing maintainer. Various
+other people have contributed to FreeSewing over the years (the FreeSewing
+contributors),
+and the project is financially supported by [the FreeSewing
+patrons](https://freesewing.eu/patrons).
+
+:::tip Looking for developer documentation?
+
+For more info about FreeSewing -- the open source project -- refer to
+[FreeSewing.dev](https://freesewing.dev/) which hosts documentation for
+developers, designers, contributors, and translators.
+
+:::
+
+## What is FreeSewing.eu?
+
+Freesewing.eu is the FreeSewing project's flagship website where we offer
+our ever-growing collection of bespoke sewing patterns to makers all
+over the world.
+
+FreeSewing is not about fashion, trends, or publishing the hot new pattern of
+the season. Instead, we want to empower makers by distilling the knowledge of
+the sewing community into parametric designs + documentation, and make that
+information freely available.
+
+FreeSewing.eu is our most visible asset, and for many people their first
+encounter with the FreeSewing project.
+
+## Patterns vs Designs
+
+If you came to this site looking for _sewing patterns_ and did not immediately
+find a place to download them, that's because all of FreeSewing's sewing
+patterns are **made to measure**.
+
+We don’t scale or grade patterns.
+Instead, FreeSewing drafts a design into a pattern made to your measurements.
+That happens in real-time, in your browser.
+
+- **Design**: One of the styles that we offer. We've got dozens of designs, and
+  you can try them all
+- **Pattern**: The result of _drafting the design_ (turning it into a sewing
+  pattern to your measurements). We've got thousands of patterns stored for our
+  users, and some might be yours
+
+:::tip
+
+##### Saving is optional
+
+When you generate a bespoke pattern, you can tweak it endlessly through its various options,
+and export it to a range of formats, including PDF.
+But it remains ephemeral until you save it to your account, so it
+becomes one of **your patterns**.
+
+Saving your pattern is optional, but it allows you to re-visit the pattern later,
+make further tweaks to it or simply download the PDF again.
+
+You can save as many patterns as you like.
+:::
+
+:::note
+
+##### We respect the strictest privacy laws on the planet
+
+To generate bespoke sewing patterns, we need your measurements.
+Asking for them every time would be rather tedious, so we store them in your account.
+
+Your account data is stored on our backend, subject to [our privacy notice](/docs/about/privacy),
+and with respect for [your rights](/docs/about/rights/).
+:::
+
+## Measurements sets
+
+Once you have an account, you can start adding measurements.
+But that quickly brings up the next question: what if you want
+a pattern for you, but also for your partner?
+
+That's why we have **measurements sets**. You can add as many measurements sets as you like.
+Having just one for yourself is fine too.
+
+:::tip
+
+##### Curated measurements sets
+
+FreeSewing also provides **curated measurements sets**. These are measurements
+set from real people that we use to test our platform and designs. But you can
+also use them to test-drive our platform before you break out the measuring
+tape.
+:::
+
+## How to generate bespoke sewing patterns {#editor}
+
+The [FreeSewing Editor](/docs/editor/) allows you to create bespoke sewing patterns in
+your browser.
+
+As our editor is packed with features, we have a dedicated documenation section for it:
+
+- [FreeSewing Editor Documentation](/docs/editor/)
+
+## Where to turn to for help
+
+If you get stuck, consult [the support page](https://freesewing.eu/support/) for various support options.
+
+## Further Reading
+
+The following information is important, but probably not something you want to read on your first visit.
+But it's here if you ever get curious:
+
+- The [FreeSewing Community Standards](/docs/about/community-standards/) are our rules that keep the trolls at bay.
+- The [FreeSewing Privacy Notice](/docs/about/privacy/) outlines our privacy policy.
+- The [FreeSewing Revenue Pledge](/docs/about/pledge/) explains what happens with the money we get from our patrons.
+- The [Pattern Notation Guide](/docs/about/notation/) explains what all the various notations on a pattern mean.
+- And [Your rights as a FreeSewing user](/docs/about/rights/) lists the rights we ensure for our users.

sites/org/docs/docs/about/site/draft/readme.mdx

@@ -25,9 +25,6 @@ hides the site header and footer and lets the editor take up the entire screen.
 It also has the **View menu** (on the left) expanded. By default you will only
 see the icons, and not the text of the menu on the left.
 
-![Screenshot of FreeSewing's pattern editor](editor.png "Screenshot of
-Freesewing's pattern editor")
-
 ### The view menu
 
 The **View menu** on the left allows you to select the view. Each view serves a

sites/org/docs/docs/about/site/readme.mdx

@@ -1,45 +1,34 @@
 ---
-title: Using the FreeSewing.org website
+title: Using the FreeSewing.eu website
 ---
 
 On these pages, we'll paint a high-level picture of how to get the most out of
-the FreeSewing.org website. Most people will be most interested in [How to
+the FreeSewing.eu website.
+
+:::tip
+If you are in a hurry, skip ahead to [How to
 generate bespoke sewing patterns](/docs/about/site/draft/).
-
-:::tip Where can I download the patterns?
-It can be frustrating for visitors who come here expecting a website where they
-can download sewing patterns that they can't seem to find the sewing patterns
-to download. Almost like hiding the _download button_ is some elaborate scheme
-to waste their time.
-
-I don't really know how to fix this because I cannot control people's
-expectations. FreeSewing.org is _very_ different from a website with some
-links to PDF sewing patterns. So if that's what you're expecting, we almost
-have to de-train you before we can talk about what this site offers.
-
-So I'm not going to do that. I'm going to assume you are reading with an open mind.
-
-joost
 :::
 
 ## Finding your way
 
-On every page of FreeSewing.org is the same header with links to the most
+On every page of FreeSewing.eu is the same header with links to the most
 important sections of the site:
 
-- [Designs](https://freesewing.org/designs/) shows our collection of parametric
+- [Designs](/designs/) shows our collection of parametric
-  designs you can generate bespoke sewing patterns from
+  designs you can generate bespoke sewing patterns from.
-- [Documentation](/docs/) holds all the documentation, for the website, for our
+- [Docs](/docs/) is short for _documentation_ and that's exactly what it provides.
-  designs, everything
+- [Showcase](/showcase/) show examples from the
-- [Blog](https://freesewing.org/blog/) holds blog posts with updates and news
-  about FreeSewing
-- [Showcase](https://freesewing.org/showcase/) show examples from the
   FreeSewing community, things they have made with FreeSewing patterns
-- [Account](https://freesewing.org/account/) is where you can manage your
+- [Blog](/blog/) holds blog posts with updates and news
-  FreeSewing account
+  about FreeSewing
-- [Support](https://freesewing.org/support/) lists your options for where to
+- [Forum](https://forum.freesewing.eu/) is a link to
+  [forum.freesewing.eu](htps://forum.freesewing.eu/), our user forum.
+- [Account](/account/) is where you can manage your
+  FreeSewing account. (if you are logged in, your username will be shown instead).
+- [Support](https://freesewing.eu/support/) lists your options for where to
   get help
-- [Search](https://freesewing.org/search/) can help you find something if
+- [Search](https://freesewing.eu/search/) can help you find something if
   you're not certain where to start looking
 
 In addition, the header also has buttons to change the **Theme** (or color
@@ -52,11 +41,11 @@ icon_ to open the menu that contains all of these links.
 ## Signing up or Signing in
 
 You can sign up for a FreeSewing account at
-[/signin](https://freesewing.org/signin/). We support signing in with your
+[/signin](https://freesewing.eu/signin/). We support signing in with your
 Google or GitHub account if that is easier for you.
 
 If you already have an account, you can sign in to your account at at
-[/signin](https://freesewing.org/signin/).
+[/signin](https://freesewing.eu/signin/).
 
 Some functionality requires a FreeSewing account. So I will assume you have an
 account for the remainder of these instructions.
@@ -64,16 +53,16 @@ account for the remainder of these instructions.
 ## Important account settings
 
 When your signed in, you can navigate to
-[/account](https://freesewing.org/account/) to manage the data stored in your
+[/account](https://freesewing.eu/account/) to manage the data stored in your
 account, which includes various settings.
 
 I'd like to highlight a couple of them that are worth your attention:
 
 ### User Experience
 
-The [User Experience setting](https://freesewing.org/account/control/) allows
+The [User Experience setting](https://freesewing.eu/account/control/) allows
 you to gradually reveal more complexity. If you are a little overwhelmed with
-everything FreeSewing.org has to offer, setting this to a lower value will
+everything FreeSewing.eu has to offer, setting this to a lower value will
 gradually hide more features for the sake of simplicity. But setting a higher
 value here will show more features and functionality.
 
@@ -82,12 +71,12 @@ more power, or some things that you know exists are not shown on your screen.
 
 ### Two-Factor Authentication
 
-Please enable [Two-Factor Authentication](https://freesewing.org/account/mfa/)
+Please enable [Two-Factor Authentication](https://freesewing.eu/account/mfa/)
 to secure your FreeSewing account.
 
 ## Make it your own
 
-Now that you have a FreeSewing account, there's more you can do on FreeSewing.org.
+Now that you have a FreeSewing account, there's more you can do on FreeSewing.eu.
 Click through to learn more about the following features:
 
 - [Account](/docs/about/site/account)

sites/org/docs/docs/editor/menus/core/complete/readme.mdx

@@ -0,0 +1,11 @@
+---
+title: Pattern Details
+---
+
+# Pattern Details {#complete}
+
+This setting -- which is enabled by default -- will give you a pattern with all
+details included.
+
+If you disable it, you will instead get a pattern that does not include any
+details such as text or annotations, and only include the seamlines.

sites/org/docs/docs/editor/menus/core/expand/readme.mdx

@@ -0,0 +1,16 @@
+---
+title: Pattern expansion
+---
+
+### Pattern expansion {#expand}
+
+This option suppresses all efforts to make the pattern consume less
+space/paper.
+
+Designers will often take steps to reduce the amount of paper consumed by a
+pattern. For example, a strip of fabric used for binding, or a simple
+rectangular part may not be included, or only partially.
+
+This option -- which is disabled by default -- allows you to suppress the space
+saving and indicate you rather want to get full-sized views on all pattern
+parts.

sites/org/docs/docs/editor/menus/core/include/readme.mdx

@@ -0,0 +1,14 @@
+---
+title: Included parts
+---
+
+### Included Parts {#include}
+
+This setting allows you to specify which patterns parts you want to generate.
+
+This can be useful if you want to only use a specific part. For example perhaps
+you have a shirt pattern and you only want to generate a different collar
+style.
+
+It can also be used to include pattern parts that -- for whatever reason -- are
+hidden by default.

sites/org/docs/docs/editor/menus/core/margin/readme.mdx

@@ -0,0 +1,11 @@
+---
+title: Margin
+---
+
+### Margin {#margin}
+
+The margin setting controls how much space will be added around each pattern
+part when calculating the pattern layout.
+
+Each pattern part is laid out as a rectangle on the page. The spacing around
+(and between) these rectangles is controlled by this setting.

sites/org/docs/docs/editor/menus/core/paperless/readme.mdx

@@ -0,0 +1,13 @@
+---
+title: Paperless Patterns
+---
+
+### Paperless Patterns {#paperless}
+
+The paperless setting lets you generate a sewing pattern that includes extra
+dimensions as well as a grid (in either metric or imperial, based on your
+choice of units).
+
+This allows you to skip printing the pattern altogether. Instead you can
+transfer it directly onto the fabric, or an intermediate medium such as pattern
+paper.

sites/org/docs/docs/editor/menus/core/sabool/readme.mdx

@@ -0,0 +1,24 @@
+---
+title: Include Seam Allowance
+---
+
+### Include Seam Allowance {#sabool}
+
+This [Core Setting][#core-settings] controls whether or not to include seam
+allowance on your pattern.
+
+By default, seam allowance is not included. To generate a pattern with seam
+allowance, you should enable it by changing this option to **Yes**.
+
+:::note
+FreeSewing's core library only takes a single setting to handle seam allowance:
+`sa`. However, for convenience, we've split this up into two different
+settings on the website:
+
+- **[Include Seam Allowance](/docs/about/site/draft#sabool)**: Controls whether
+  or not to include seam allowance
+- **[Seam Allowance Size](/docs/about/site/draft/#samm)**: Controls how big to
+  make the seam allowance, if it is included
+
+The latter will only be shown if you've enabled the former.
+:::

sites/org/docs/docs/editor/menus/core/samm/readme.mdx

@@ -0,0 +1,23 @@
+---
+title: Seam Allowance Size
+---
+
+### Seam Allowance Size {#samm}
+
+This Core Setting controls the base size of your seam
+allowance. In other words, the default seam allowance will be this size. Other
+allowance that is intended to be wider, like hem allowance, will be a multiple
+of this size.
+
+:::note
+FreeSewing's core library only takes a single setting to handle seam allowance:
+`sa`. However, for convenience, we've split this up into two different
+settings on the website:
+
+- **[Include Seam Allowance](#sabool)**:
+  Controls whether or not to include seam allowance
+- **[Seam Allowance Size](/docs/about/site/draft/#samm)**:
+  Controls how big to make the seam allowance, if it is included
+
+The latter will only be shown if you've enabled the former.
+:::

sites/org/docs/docs/editor/menus/core/scale/readme.mdx

@@ -0,0 +1,14 @@
+---
+title: Scale
+---
+
+### Scale {#scale}
+
+The scale settings allow you to scale those parts of a pattern that do not
+scale with measurements. Things like logos, line widths, font sizes, and so
+on.
+
+This setting was added at the requests of people who like to use our patterns
+to make doll clothes. When generating such a small pattern, the arrowheads,
+titles, and so on tend to obscure much of the pattern. This setting allows you
+to scale them down or -- if you so wish -- scale them up.

sites/org/docs/docs/editor/menus/core/units/readme.mdx

@@ -0,0 +1,13 @@
+---
+title: Units
+---
+
+### Units {#units}
+
+This controls the units used on your pattern. FreeSewing supports both metric
+and imperial units.
+
+Note that as a FreeSewing user, you can configure your units in your account,
+and those are the units that will be used by default. However, if you want to
+override those settings on an individual basis -- perhaps you are generating a
+pattern on behalf of someone else -- this setting allows you to do that.

sites/org/docs/docs/editor/menus/ui/aside/readme.mdx

@@ -0,0 +1,7 @@
+---
+title: Show Side Menu
+---
+
+# Show Side Menu {#aside}
+
+FIXME

sites/org/docs/docs/editor/menus/ui/control/readme.mdx

@@ -0,0 +1,7 @@
+---
+title: User Experience
+---
+
+### User Experience {#control}
+
+FIXME. See [/docs/about/site/account/#control](/docs/about/site/account/#control).

sites/org/docs/docs/editor/menus/ui/renderer/readme.mdx

@@ -0,0 +1,17 @@
+---
+title: Pattern Render Engine
+---
+
+### Render Engine {#renderer}
+
+This setting allows you to choose how your pattern will be rendered. In other
+words, how it will be drawn on the screen. There are two options:
+
+- `React` allows for more interactivity, and is optimized for displaying
+  patterns on-screen
+- `SVG` does not allow interactivity like the `React` option does. Instead it
+  is optimized for printing
+
+By default, this website only uses SVG when you are exporting your pattern.
+While you are generating and tweaking your pattern, we use React, unless you
+use this setting to change that to SVG.

sites/org/docs/docs/editor/menus/ui/rotate/readme.mdx

@@ -0,0 +1,7 @@
+---
+title: Rotate Pattern
+---
+
+# Rotate Pattern {#rotate}
+
+FIXME

sites/org/docs/docs/editor/menus/ui/ux/readme.mdx

@@ -0,0 +1,7 @@
+---
+title: User Experience
+---
+
+# User Experience {#ux}
+
+FIXME

sites/org/docs/docs/editor/readme.mdx

@@ -0,0 +1,614 @@
+---
+title: FreeSewing Editor
+---
+
+import {
+  OptionsIcon,
+  MeasurementsIcon,
+  BeakerIcon,
+  GaugeIcon,
+  PrintIcon,
+  SaveIcon,
+  ExportIcon,
+  EditIcon,
+  ListIcon,
+  XrayIcon,
+  DocsIcon,
+  DesignIcon,
+  UiIcon,
+  BackIcon,
+} from '@freesewing/react/components/Icon'
+import DraftView from '@site/docs/docs/editor/views/draft/readme.mdx'
+import DesignsView from '@site/docs/docs/editor/views/designs/readme.mdx'
+import SaveView from '@site/docs/docs/editor/views/save/readme.mdx'
+import ExportView from '@site/docs/docs/editor/views/export/readme.mdx'
+import MeasurementsView from '@site/docs/docs/editor/views/measurements/readme.mdx'
+import UndosView from '@site/docs/docs/editor/views/undos/readme.mdx'
+import LayoutView from '@site/docs/docs/editor/views/layout/readme.mdx'
+import DocsView from '@site/docs/docs/editor/views/docs/readme.mdx'
+import EditSettingsView from '@site/docs/docs/editor/views/editsettings/readme.mdx'
+import InspectView from '@site/docs/docs/editor/views/inspect/readme.mdx'
+import LogsView from '@site/docs/docs/editor/views/logs/readme.mdx'
+import TestView from '@site/docs/docs/editor/views/test/readme.mdx'
+import TimingView from '@site/docs/docs/editor/views/timing/readme.mdx'
+import PickerView from '@site/docs/docs/editor/views/picker/readme.mdx'
+
+Generating custom sewing patterns based on your measurements is the flagship
+feature of our website. As a user, the way to tap into that feature is by
+using the **FreeSewing Editor**.
+
+This page is the definitive guide to using the FreeSewing Editor.
+
+## Before you start
+
+Before we dive in, you should know that:
+
+- The home of the FreeSewing Editor is
+  [freesewing.eu/editor](https://freesewing.eu/editor/).
+- By default, some of the more advanced features of the Editor are hidden to not overwhelm new users.
+  <br />
+  <small className="tw:pl-4">
+    To gain access to all Editor features, set your [User Experience](/account/preferences/control/)
+    to level **4** which is what we used in our examples.
+  </small>
+- The editor stores your pattern settings in the URL, so you can bookmark or share the URL with others.
+- The editor has different areas, views, and menus which are all explained here.<br />
+  <small className="tw:pl-4">
+    Knowing where to find them and what they do is key to getting the most out of the FreeSewing
+    Editor.
+  </small>
+
+## Quick start guide
+
+To hit the ground running, following these 3 steps:
+
+1. [Choose a design](#1-choose-a-design)
+2. [Provide measurements](#2-provide-measurements)
+3. [Get to work](#3-get-to-work)
+
+### 1. Choose a design
+
+The first thing the Editor needs to know is what design to load. If you have
+not picked a design yet, then opening the editor will automatically load [the
+designs view](#designs) which lets you select a design from [the FreeSewing
+collection](/designs/).
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in designs view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/c3bddad4-a0bb-43e6-c8d0-ce33b80c6e00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in draft view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in draft
+    view](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/b2ce3fba-c44d-4fef-f83e-70b177acff00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in draft view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in designs view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/5a012f40-bed0-4de9-9d9f-52910839bc00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in designs view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+
+### 2. Provide measurements
+
+Assuming the design you chose requires measurements -- almost all designs do,
+but some do not -- the Editor will load [the measurements view](#measurements).
+
+As long as required measurements or missing, the Editor will not load any other view but
+[the measurements view](#measurements), or [the designs view](#designs) to
+choose a different design.
+
+Refer to [the measurements view](#measurements) for all details on how you can provide measurements, but there's one thing to note about this view: The drop-down at the top that says **Pattern Measurements**. This is [the view menu](#views) and it is present on every view except [the designs view](#designs) since all other views require a design to be chosen first.
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in measurements view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/66da8db9-4ebd-42c2-2880-44c1153b5b00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in measurements view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in measurements view, on a
+    table](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/be78a160-fbb4-47dc-8d19-01cca4ed1c00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in measurements view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in measurements view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/edbc0e51-10bc-464d-9ac4-62dab940e100/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in measurements view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+
+### 3. Get to work
+
+Once you have provided all required measurments, you are ready to go to work,
+which typically starts with loading [the draft view](#draft).
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in measurements view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/66da8db9-4ebd-42c2-2880-44c1153b5b00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in measurements view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in measurements view, on a
+    table](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/be78a160-fbb4-47dc-8d19-01cca4ed1c00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in measurements view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in measurements view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/edbc0e51-10bc-464d-9ac4-62dab940e100/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in measurements view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+
+## Editor Areas {#areas}
+
+The Editor has different areas, which are colorized in the screenshots below:
+
+- The **gray** top of the screenshot is the navbar of the FreeSewing website,
+  and is not part of the editor. We include it in the screenshots so that
+  things look the same on your screen, but it is **not an editor area**.
+- The **pink** horizontal strip at the top is the **ribbon area** where all
+  menus are placed. The actual contents of this area will differ based on the
+  view, but this area is present all all views with the exception of [the
+  designs view](#designs)
+- The **blue** and **green** areas below the ping strip at the top represent the
+  **main working area**. For many views, this will be a single area. But for
+  some views, like [the draft view](#draft) shown in the screenshot below, this
+  area is further divided:
+  - Marked in **blue** is the **pattern area** where you can see your pattern.<br />
+    <small className="tw:pl-4">
+      Note that this area has different pan & scroll behaviour. To scroll the entire page, make sure
+      to do so outside this area.
+    </small>
+  - Marked in **green** is the **aside area**, which allows you to (also) have the menus on the side.
+    This is optional as these menus are also available in the ribbon area.
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot showing colorized FreeSewing Editor areas (in draft view, on a
+    desktop)](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/2bc030be-d1af-4737-fd92-504d1419f900/public)
+    <div className="tw:text-center">
+      _A screenshot showing colorized FreeSewing Editor areas (in draft view, on a desktop)._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot showing colorized FreeSewing Editor areas (in draft view, on a
+    desktop)](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/fcc32713-8213-48fb-9768-eef6dc171100/public)
+    <div className="tw:text-center">
+      _A screenshot showing colorized FreeSewing Editor areas (in draft view, on a tablet)._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot showing colorized FreeSewing Editor areas (in draft view, on a
+    desktop)](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/8ae0fd81-e561-4771-d64f-19787dcbfc00/public)
+    <div className="tw:text-center">
+      _A screenshot showing colorized FreeSewing Editor areas (in draft view, on mobile)._
+    </div>
+  </TabItem>
+</Tabs>
+
+## Editor Views
+
+The editor supports different **views** where each view serves a different purpose.
+The following views are available:
+
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#draft">
+  <OptionsIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Draft Pattern</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>draft</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#designs">
+  <DesignIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Choose a different design</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>designs</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#save">
+  <SaveIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Save pattern as...</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>save</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#export">
+  <ExportIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Export Pattern</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>export</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#measurements">
+  <MeasurementsIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Pattern Measurements</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>measurements</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#undos">
+  <BackIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Undo History</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>undos</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#layout">
+  <PrintIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Pattern Layout</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>layout</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#docs">
+  <DocsIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Documentation</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>docs</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#editsettings">
+  <EditIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Edit settings by hand</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>editSettings</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#inspect">
+  <XrayIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Pattern inspector</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>inspect</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#logs">
+  <ListIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Pattern Logs</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>logs</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#test">
+  <BeakerIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Test Design</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>test</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#timing">
+  <GaugeIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Time Design</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>timing</b> view
+  </span>
+</a>
+<a className="tw:flex tw:flex-row tw:pl-4 tw:items-center" href="#picker">
+  <UiIcon className="tw:w-5 tw:h-5" />
+  <span className="tw:pl-2">Choose a different view</span>
+  <span className="tw:pl-4 tw:text-sm tw:text-base-content">
+    aka <b>picker</b> view
+  </span>
+</a>
+
+### Draft Pattern <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>draft</b> view</span> {#draft}
+
+<DraftView />
+
+### Choose a different design <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>designs</b> view</span> {#designs}
+
+<DesignsView />
+
+### Save pattern as... <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>save</b> view</span> {#save}
+
+<SaveView />
+
+### Export Pattern <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>export</b> view</span> {#export}
+
+<ExportView />
+
+### Measurements <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>measurements</b> view</span> {#measurements}
+
+<MeasurementsView />
+
+### Undo History <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>undos</b> view</span> {#undos}
+
+<UndosView />
+
+### Pattern Layout <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>layout</b> view</span> {#layout}
+
+<LayoutView />
+
+### Documentation <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>docs</b> view</span> {#docs}
+
+<DocsView />
+
+### Edit settings by hand <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>editSettings</b> view</span> {#editsettings}
+
+<EditSettingsView />
+
+### Pattern inspector <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>inspect</b> view</span> {#inspect}
+
+<InspectView />
+
+### Pattern Logs <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>logs</b> view</span> {#logs}
+
+<LogsView />
+
+### Test Design <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>test</b> view</span> {#test}
+
+<TestView />
+
+### Time Design <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>timing</b> view</span>
+
+<TimingView />
+
+### Choose a different view <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>picker</b> view</span> {#picker}
+
+<PickerView />
+
+## Editor Menus
+
+Depending on the view you have selected, different menus will be available.
+The full list of menus is:
+
+- View Menu
+- Design Options Menu
+- Core Settings Menu
+- UI Preferences Menu
+- Flags Menu
+- Print Settings Menu
+- Test Options Menu
+- Test Measurements Menu
+
+## The editor
+
+Below is a screenshot of FreeSewing's pattern editor in **kiosk mode** which
+hides the site header and footer and lets the editor take up the entire screen.
+It also has the **View menu** (on the left) expanded. By default you will only
+see the icons, and not the text of the menu on the left.
+
+Freesewing's pattern editor")
+
+### The view menu
+
+The **View menu** on the left allows you to select the view. Each view serves a
+different purpose. The different views are:
+
+- **Pattern editor**: This is where you can tweak your pattern
+- **Pattern measurements**: This is where you can choose which measurements set
+  to use to generate the pattern, or tweak measurements manually
+- **Pattern tests**: Allows you to test the pattern. This is an advanced
+  feature.
+- **Print layout**: Allows you to manually arrange the pattern parts to
+  optimize the layout for printing
+- **Save pattern as...**: Allows you to save the pattern to your account
+- **Export pattern**: Allows you to export the pattern as PDF or SVG
+- **Edit settings by hand**: Allows you to -- you guessed it -- edit the
+  settings to generate the pattern by hand. This is an advanced feature.
+- **Pattern logs**: This shows the logs generated when drafting the pattern.
+  This is an advanced feature.
+- **Pattern inspector**: Allows pattern designer to inspect various aspects of
+  the pattern. This is an advanced feature.
+- **Documentation**: Provides links to the documentation.
+
+Feel free to check out the other views, but our focus here is on the **Pattern
+editor**.
+
+### The settings menu
+
+On the right side of the screen is the **Settings menu** which in turn is made
+up of four sections:
+
+- **Messages from the designer**: Holds information the designer of the pattern
+  flagged for your attention. Note that these are not generic remarks about the
+  design in general (those go in the documentation), but rather information
+  specific to this very pattern. Make sure to check them out. As such, these
+  messages will be different for every user, measurements set, or even
+  combination of design options.
+- **Design options**: Holds all the different options the designer has added
+  that allow you to tweak your pattern. These options will be different for
+  each design. Refer to the design documentation for a list of all available
+  options, or check the inline documentation.
+- **Core settings**: These are settings that are not provided by the design(er)
+  but rather by FreeSewing's core library. As such, the settings you'll find
+  here are the same accross all designs as they all use the same core library.
+  Refer to [Core Settings](#core-settings) for all
+  details, or check the inline documentation.
+- **UI preferences**: And finally, these settings do not control the pattern as
+  such, but rather the user interface. For example, here you can enable kiosk
+  mode or tweak the user experience setting to see more or less features. Like
+  the core settings, the UI preferences are the same for every design. Refer to
+  [UI preferences](/docs/about/site/draft/#ui-preferences) or check the inline
+  documentation.
+
+### The header menu
+
+At the top is a header with icons to give you quick access to both Core
+settings and UI preferences. There is also an icon to clear your settings, clear
+both settings and measurements, or to bookmark the current pattern.
+
+## Design Options Menu
+
+Each FreeSewing design can define a list of options that allow you to further
+customize your pattern. You can find them in the **Design Options** menu.
+
+Since each design has its own options, the contents of the menu will be
+different for each design, but you typically find options to adjust the fit --
+such as changing the amount of ease -- as well options to change the style of
+the pattern.
+
+## Core Settings Menu {#core-settings}
+
+The editor's **Core Settings** menu allows you to tweak various aspects of the
+FreeSewing Core library, which -- under the hood -- generates your pattern for
+you.
+
+In contrast to Design options which are
+specific for a given design, these Core Settings are the same for every design.
+So you will find this menu always provides the same settings, regardless of
+what design you are generating a pattern for.
+
+The following core settings are available:
+
+### Pattern Details {#complete}
+
+This setting -- which is enabled by default -- will give you a pattern with all
+details included.
+
+If you disable it, you will instead get a pattern that does not include any
+details such as text or annotations, and only include the seamlines.
+
+### Pattern expansion {#expand}
+
+This option suppresses all efforts to make the pattern consume less
+space/paper.
+
+Designers will often take steps to reduce the amount of paper consumed by a
+pattern. For example, a strip of fabric used for binding, or a simple
+rectangular part may not be included, or only partially.
+
+This option -- which is disabled by default -- allows you to suppress the space
+saving and indicate you rather want to get full-sized views on all pattern
+parts.
+
+### Margin {#margin}
+
+The margin setting controls how much space will be added around each pattern
+part when calculating the pattern layout.
+
+Each pattern part is laid out as a rectangle on the page. The spacing around
+(and between) these rectangles is controlled by this setting.
+
+### Included Parts {#include}
+
+This setting allows you to specify which patterns parts you want to generate.
+
+This can be useful if you want to only use a specific part. For example perhaps
+you have a shirt pattern and you only want to generate a different collar
+style.
+
+It can also be used to include pattern parts that -- for whatever reason -- are
+hidden by default.
+
+### Paperless Patterns {#paperless}
+
+The paperless setting lets you generate a sewing pattern that includes extra
+dimensions as well as a grid (in either metric or imperial, based on your
+choice of units).
+
+This allows you to skip printing the pattern altogether. Instead you can
+transfer it directly onto the fabric, or an intermediate medium such as pattern
+paper.
+
+### Render Engine {#renderer}
+
+This setting allows you to choose how your pattern will be rendered. In other
+words, how it will be drawn on the screen. There are two options:
+
+- `React` allows for more interactivity, and is optimized for displaying
+  patterns on-screen
+- `SVG` does not allow interactivity like the `React` option does. Instead it
+  is optimized for printing
+
+By default, this website only uses SVG when you are exporting your pattern.
+While you are generating and tweaking your pattern, we use React, unless you
+use this setting to change that to SVG.
+
+### Include Seam Allowance {#sabool}
+
+This [Core Setting][#core-settings] controls whether or not to include seam
+allowance on your pattern.
+
+By default, seam allowance is not included. To generate a pattern with seam
+allowance, you should enable it by changing this option to **Yes**.
+
+:::note
+FreeSewing's core library only takes a single setting to handle seam allowance:
+`sa`. However, for convenience, we've split this up into two different
+settings on the website:
+
+- **[Include Seam Allowance](/docs/about/site/draft#sabool)**: Controls whether
+  or not to include seam allowance
+- **[Seam Allowance Size](/docs/about/site/draft/#samm)**: Controls how big to
+  make the seam allowance, if it is included
+
+The latter will only be shown if you've enabled the former.
+:::
+
+### Seam Allowance Size {#samm}
+
+This Core Setting controls the base size of your seam
+allowance. In other words, the default seam allowance will be this size. Other
+allowance that is intended to be wider, like hem allowance, will be a multiple
+of this size.
+
+:::note
+FreeSewing's core library only takes a single setting to handle seam allowance:
+`sa`. However, for convenience, we've split this up into two different
+settings on the website:
+
+- **[Include Seam Allowance](#sabool)**:
+  Controls whether or not to include seam allowance
+- **[Seam Allowance Size](/docs/about/site/draft/#samm)**:
+  Controls how big to make the seam allowance, if it is included
+
+The latter will only be shown if you've enabled the former.
+:::
+
+### Scale {#scale}
+
+The scale settings allow you to scale those parts of a pattern that do not
+scale with measurements. Things like logos, line widths, font sizes, and so
+on.
+
+This setting was added at the requests of people who like to use our patterns
+to make doll clothes. When generating such a small pattern, the arrowheads,
+titles, and so on tend to obscure much of the pattern. This setting allows you
+to scale them down or -- if you so wish -- scale them up.
+
+### Units {#units}
+
+This controls the units used on your pattern. FreeSewing supports both metric
+and imperial units.
+
+Note that as a FreeSewing user, you can configure your units in your account,
+and those are the units that will be used by default. However, if you want to
+override those settings on an individual basis -- perhaps you are generating a
+pattern on behalf of someone else -- this setting allows you to do that.
+
+## UI Preferences
+
+The **UI Preferences** menu allows you to tweak certain aspects of the user
+interface (UI).
+
+### User Experience {#control}
+
+FIXME. See [/docs/about/site/account/#control](/docs/about/site/account/#control).
+
+### Rotate Pattern {#rotate}
+
+FIXME
+
+### Pattern Render Engine

sites/org/docs/docs/editor/views/designs/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Choose a different design (designs view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/docs/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Documentation (docs view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/draft/readme.mdx

@@ -0,0 +1,92 @@
+---
+title: Draft Pattern (draft view)
+---
+
+import { PatternDiagram } from '@site/src/components/editor-docs.js'
+
+The Pattern Editors **draft view** is where you will end up spending most of
+your time.
+
+#### Purpose of the draft view
+
+To appreciate the significance of the draft view, it’s good to know what makes
+a FreeSewing pattern:
+
+<PatternDiagram />
+
+The diagram above helps us understand the Editor's priorities:
+
+- First it will prompt you for the design you want to use (using [the **designs** view](#designs))
+- Then it will ensure we have all required measurements (using [the **measurements** view](#measurements))
+- Finally it will ask you how _exactly_ you would like your pattern (using [the **draft** view](#draft))
+
+In other words, the goal of the draft view is to let your customize your pattern.
+To make that intutive, it will show you a live preview of what your patterns looks like.
+
+#### Layout of the draft view
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in draft view, on a desktop, with various areas
+    highlighted](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/29e8dd5d-101e-4123-cd39-991fd5c66400/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in draft view, on a desktop, with various areas
+      highlighted._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in measurements view, on a tablet, with various areas
+    highlighted](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/2a95ff6c-2b7d-41b1-182f-bb544c359d00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in measurements view, on a tablet, with various areas
+      highlighted._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in measurements view on mobile, with various areas
+    highlighted](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/d72f7db8-0d9d-4ad5-0f71-79d1f4c49c00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in measurements view, on mobile, with various areas
+      highlighted._
+    </div>
+  </TabItem>
+</Tabs>
+
+- The draft view has the [ribbon area](#areas) at the top where we will find:
+  - [The **view** menu](#view-menu) (not view-specific, it is the one with the **Draft pattern** label)
+  - The view-specific menus, including:
+    - [The **Design Options** menu](#options-menu) (highlighted in orange with the **Aaron Options** label, because our example uses the [Aaron design](/designs/aaron)
+    - [The **Core Settings** menu](#settings-menu) (highlighted in yellow)
+    - [The **UI Preferences** menu](#preferences-menu) (highlighted in green)
+    - [The **Flags** menu](#flags-menu)
+    - Icons to toggle certain [**Core Settings**](#settings-menu) (highlighted in the same yellow as the **Core Settings** menu
+    - Icons to toggle certain [**UI Preferences**](#preferences-menu) (highlighted in the same green as the **UI Preferences** menu
+    - The [**undo** icons](#undo-menu) as well as [the undo menu](#undo-menu) (highlighted in lavender)
+    - The [**restore** icons](#restore-menu) (highlighted in teal)
+    - The [**save**, **save as**, and **export** icons](#save-menu) (highlighted in gray)
+- In [the **main working area**](#areas), we have:
+  - [The pattern area](#areas) on the left (highlighted in red)
+    - The [**zoom** and **rotate** icons](#zoom-menu) inside [the pattern area](#areas), anchored at the top right (highlighted in mint)
+  - [The **aside** area](#areas) on the right, holding:
+    - The [Design Options menu](#options-menu) (highlighted in orange, same as in [the ribbon area](#areas))
+    - The [Core Settings menu](#settings-menu) (highlighted in yellow, same as in [the ribbon area](#areas))
+    - The [UI Preferences menu](#preferences-menu) (highlighted in green, same as in [the ribbon area](#areas))
+
+:::tip
+Refer to the documentation on the Editor areas and Editor menus to more in-depth info about each of these.
+:::
+
+:::note
+Not all menus are available on mobile, but all features are.
+:::
+
+#### Caveats of the draft view
+
+The [pattern area](#areas) implements its own pan, scroll, and zoom logic that
+allows you to scroll, pan, and zoom the SVG pattern.
+
+When this area takes up most of the screen, this can cause confusion when you
+try to scroll the page, but in reality you are scrolling the pattern.
+
+You can use the [**zoom** and **rotate** icons](#zoom-menu) anchored at the
+top-right to zoom if you find that work better for you.

sites/org/docs/docs/editor/views/editsettings/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Edit settings by hand (editSettings view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/export/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Export Pattern (export view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/inspect/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Pattern inspector (inspect view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/layout/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Pattern Layout (layout view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/logs/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Pattern Logs (logs view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/measurements/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Pattern Measurements (measurements view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/picker/readme.mdx

@@ -0,0 +1,37 @@
+---
+title: Choose a different view (picker view)
+---
+
+#### Purpose of the picker view
+
+The _picker_ view allows you to pick a different view.
+It is a full-page version of [the view menu](#view-menu).
+
+#### Layout of the picker view
+
+This view does not have a [ribbon area](#areas). The entire editor real-estate
+is used for letting you pick an Editor view.
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in picker view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/e823e841-69c6-48e2-d472-f98e889b3d00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in picker view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in picker view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/1f1388e1-7db0-44ad-b7fb-8befa7931c00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in picker view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in picker view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/2dff7ec1-7680-492c-49ce-edf90ed86500/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in picker view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>

sites/org/docs/docs/editor/views/save/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Save pattern as... (save view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/test/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Test Design (test view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/timing/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Time Design (timing view)
+---
+
+FIXME

sites/org/docs/docs/editor/views/undos/readme.mdx

@@ -0,0 +1,5 @@
+---
+title: Undo History (undos view)
+---
+
+FIXME

sites/org/docs/docs/readme.mdx

@@ -3,35 +3,24 @@ title: Documentation
 sidebar_label: Docs
 ---
 
-Documentation on FreeSewing.org is divided into four main sections:
+Documentation on FreeSewing.eu is divided into five main sections:
 
-## About FreeSewing
+- The [**About FreeSewing**](/docs/about/) section holds information about
-
+  FreeSewing, and this website. <br />
-The [**About FreeSewing**](/docs/about/) section holds information about
+  <small style={{ paddingLeft: '2rem' }}>
-FreeSewing, and this website. Including:
+    This 👆 is a good place to start if you are new here.
-
+  </small>
-- [Getting started with FreeSewing.org](/docs/about/guide/)
+- The [**FreeSewing Designs**](/docs/designs/) section holds the documentation
-- [Using the FreeSewing.org website](/docs/about/site/)
-- [Frequently Asked Questions](/docs/about/faq/)
-
-And more.
-
-## FreeSewing Designs
-
-The [**FreeSewing Designs**](/docs/designs/) section holds the documentation
   for [all our designs](/designs/).
-
+- The [**FreeSewing Editor**](/docs/editor/) section holds the documentation
-## Measurements we use
+  on how to create bespoke patterns in your browser.
-
+- The [**Measurements we use**](/docs/measurements/) section holds the
-The [**Measurements we use**](/docs/measurements/) section holds the
+  documentation for the various measurements we use.
+- The [**Sewing Terminology**](/docs/sewing/) section holds the
   documentation for the various measurements we use.
 
-## Sewing Terminology
+:::tip Documentation for FreeSewing contributors and developers
-
+All this documentation is for makers.
-The [**Sewing Terminology**](/docs/sewing/) section holds the
+Documentation for contributors and developers is hosted on
-documentation for the various measurements we use.
-
-## Documentation for FreeSewing contributors and developers
-
-The documentation for contributors and developers is hosted on
 [FreeSewing.dev](https://freesewing.dev/).
+:::

sites/org/docusaurus.config.mjs

@@ -54,11 +54,9 @@ const config = {
   // Not time to look into this now
   onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',
-
   future: {
     experimental_faster: false, // Too many bugs for now
   },
-
   plugins: [
     ...docusaurusPlugins,
     [
@@ -186,6 +184,7 @@ const config = {
         { type: 'custom-FreeSewingNavbarItem', position: 'left', id: 'blog' },
         { type: 'custom-FreeSewingNavbarItem', position: 'left', id: 'forum' },
         { type: 'custom-FreeSewingNavbarItem', position: 'right', id: 'account' },
+        { type: 'custom-FreeSewingNavbarItem', position: 'right', id: 'support' },
       ],
     },
     footer: {

sites/org/package.json

@@ -17,10 +17,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.7.0",
+    "@docusaurus/core": "^3.8.0",
-    "@docusaurus/faster": "^3.7.0",
+    "@docusaurus/plugin-content-blog": "^3.8.0",
-    "@docusaurus/plugin-content-blog": "^3.7.0",
+    "@docusaurus/preset-classic": "^3.8.0",
-    "@docusaurus/preset-classic": "^3.7.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "lodash": "^4.17.21",
@@ -32,8 +31,8 @@
   },
   "devDependencies": {
     "@babel/plugin-syntax-import-attributes": "^7.25.6",
-    "@docusaurus/module-type-aliases": "^3.7.0",
+    "@docusaurus/module-type-aliases": "^3.8.0",
-    "@docusaurus/types": "^3.7.0",
+    "@docusaurus/types": "^3.8.0",
     "@tailwindcss/postcss": "^4.1.3",
     "autoprefixer": "^10.4.20",
     "daisyui": "^5.0.19",

sites/org/src/components/editor-docs.js

@@ -0,0 +1,92 @@
+import React from 'react'
+
+// See: /docs/editor/views/draft
+export const PatternDiagram = () => (
+  <svg viewBox="0 0 700 280" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+        <polygon points="0 0, 10 3.5, 0 7" fill="currentColor" />
+      </marker>
+    </defs>
+    <path
+      d="M 120,50 L 265,50"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      markerEnd="url(#arrowhead)"
+    />
+    <path
+      d="M 350,75 L 350,125"
+      stroke="currentColor"
+      strokeWidth="2"
+      markerEnd="url(#arrowhead)"
+    />
+    <path
+      d="M 530,50 L 435, 50"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      markerEnd="url(#arrowhead)"
+    />
+    <path
+      d="M 350,175 L 350,225"
+      stroke="currentColor"
+      strokeWidth="2"
+      markerEnd="url(#arrowhead)"
+    />
+    <SvgBox x={120} y={50} color="user" text="User Measurements" view="measurements" />
+    <SvgBox x={350} y={50} color="design" text="FreeSewing Design" view="designs" />
+    <SvgBox x={580} y={50} color="user" text="User Preferences" view="draft" />
+    <SvgBox x={350} y={150} color="core" text="FreeSewing Core" />
+    <SvgBox x={350} y={250} color="pattern" text="Bespoke Pattern" />
+  </svg>
+)
+const colors = {
+  user: {
+    stroke: '#fb64b6',
+    fill: '#fccee8',
+  },
+  pattern: {
+    stroke: '#a684ff',
+    fill: '#ddd6ff',
+  },
+  core: {
+    stroke: '#525252',
+    fill: '#a1a1a1',
+  },
+  design: {
+    stroke: '#00d5be',
+    fill: '#96f7e4',
+  },
+}
+
+const SvgBox = ({ x, y, color, text, view = false }) => (
+  <>
+    <rect
+      x={x - 85}
+      y={y - 25}
+      width="170"
+      height="50"
+      rx="10"
+      className=""
+      {...colors[color]}
+      strokeWidth="2"
+    />
+    <text
+      x={x}
+      y={view ? y : y + 5}
+      className=""
+      textAnchor="middle"
+      style={{ fontWeight: 'bold' }}
+    >
+      {text}
+    </text>
+    {view ? (
+      <text x={x} y={y + 16} className="" textAnchor="middle" style={{ fontSize: 'small' }}>
+        <tspan>[view = </tspan>
+        <tspan style={{ fontWeight: 'bold' }}>{view}</tspan>
+        <tspan>]</tspan>
+      </text>
+    ) : null}
+  </>
+)

sites/studio/package.json

@@ -15,9 +15,9 @@
     "serve": "docusaurus serve"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.7.0",
+    "@docusaurus/core": "^3.8.0",
-    "@docusaurus/faster": "^3.7.0",
+    "@docusaurus/faster": "^3.8.0",
-    "@docusaurus/preset-classic": "^3.7.0",
+    "@docusaurus/preset-classic": "^3.8.0",
     "@mdx-js/react": "^3.0.0",
     "@freesewing/collection":    "file:../../packages/collection",
     "@freesewing/config":        "file:../../packages/config",
@@ -39,8 +39,8 @@
   },
   "devDependencies": {
     "@babel/plugin-syntax-import-attributes": "^7.25.6",
-    "@docusaurus/module-type-aliases": "^3.7.0",
+    "@docusaurus/module-type-aliases": "^3.8.0",
-    "@docusaurus/types": "^3.7.0",
+    "@docusaurus/types": "^3.8.0",
     "@tailwindcss/postcss": "^4.1.3",
     "autoprefixer": "^10.4.20",
     "daisyui": "^5.0.19",