feat [org]: Wrote Editor docs

packages/react/components/Button/index.mjs

@@ -3,7 +3,7 @@ import { copyToClipboard } from '@freesewing/utils'
 import { CopyIcon, OkIcon } from '@freesewing/react/components/Icon'
 import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
 
-const handleCopied = (content, setCopied, setLoadingStatus, label) => {
+const handleCopied = (content, setCopied, setLoadingStatus, label, handler=false) => {
   copyToClipboard(content)
   setCopied(true)
   setLoadingStatus([
@@ -13,6 +13,7 @@ const handleCopied = (content, setCopied, setLoadingStatus, label) => {
     true,
   ])
   setTimeout(() => setCopied(false), 1000)
+  if (typeof handler === 'function') handler(content, label)
 }
 
 /**
@@ -21,12 +22,14 @@ const handleCopied = (content, setCopied, setLoadingStatus, label) => {
  * @component
  * @param {object} props - All component props
  * @param {JSX.element} props.children - The component children
+ * @param {string} [props.btnClasses = 'tw:daisy-btn tw:daisy-btn-ghost tw:hover:border-transparent w:hover:border-transparent tw:hover:shadow-none'] - The content that should be copied to the clipboard
  * @param {string} props.content - The content that should be copied to the clipboard
  * @param {string} props.label - The label to show when the content is copied
+ * @param {function} [props.onCopy=false] - An optional handler to call after copying to the clipboard, receives content, label as parameters
  * @param {boolean} props.sup - Set this to true to render as superscript (above the line)
  * @returns {JSX.Element}
  */
-export const CopyToClipboardButton = ({ children, content, label = false, sup = false }) => {
+export const CopyToClipboardButton = ({ children, content, label = false, sup = false, btnClasses="tw:daisy-btn tw:daisy-btn-ghost tw:hover:border-transparent w:hover:border-transparent tw:hover:shadow-none", onCopy=false }) => {
   const [copied, setCopied] = useState(false)
   const { setLoadingStatus } = useContext(LoadingStatusContext)
 
@@ -36,9 +39,10 @@ export const CopyToClipboardButton = ({ children, content, label = false, sup =
     <button
       className={
         (copied ? 'tw:text-success ' : '') +
-        'tw:daisy-btn tw:w-full tw:daisy-btn-ghost tw:lg:w-auto tw:hover:bg-transparent tw:hover:border-transparent tw:group tw:hover:shadow-none'
+        btnClasses +
+        ' tw:w-full tw:lg:w-auto tw:group tw:flex tw:flex-row tw:justify-between'
       }
-      onClick={() => handleCopied(content, setCopied, setLoadingStatus, label)}
+      onClick={() => handleCopied(content, setCopied, setLoadingStatus, label, onCopy)}
     >
       {sup ? children : null}
       {copied ? (

packages/react/components/Collection/index.mjs

@@ -179,7 +179,7 @@ export const Collection = ({ Link = false, linkTo = 'about', editor = false, onC
                 onClick={() => setFilter({ ld: 1 })}
               >
                 <ResetIcon />
-                Clear Filter
+                Clear Filters
               </button>
               <button
                 className="tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"

packages/react/components/Editor/components/HeaderMenu.mjs

@@ -17,6 +17,7 @@ import {
   ExportIcon,
   FixmeIcon,
   FlagIcon,
+  MeasurementsIcon,
   OptionsIcon,
   PaperlessIcon,
   PrintIcon,
@@ -52,6 +53,7 @@ const headerMenuIcons = {
   settings: SettingsIcon,
   ui: UiIcon,
   layout: PrintIcon,
+  measurements: MeasurementsIcon,
 }
 
 export const HeaderMenuIcon = (props) => {
@@ -121,7 +123,7 @@ export const HeaderMenuTestViewDesignMeasurements = (props) => {
       tooltip="See how changes to a measurement influence the pattern being generated."
       toggle={
         <>
-          <HeaderMenuIcon name="options" extraClasses="tw:text-secondary" />
+          <HeaderMenuIcon name="measurements" extraClasses="tw:text-secondary" />
           <span className="tw:hidden tw:lg:inline">Test Measurements</span>
         </>
       }
@@ -463,12 +465,12 @@ export const HeaderMenuTestIcons = (props) => {
   const Button = HeaderMenuButton
 
   return (
-    <div className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:justify-center tw:px-0.5 tw:lg:px-1">
+    <div className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:justify-center tw:px-0.5 tw:lg:px-1 tw:items-center">
       <Button
         updateHandler={() => update.settings('sample', undefined)}
         tooltip="Clear the test so you can select another"
       >
-        Clear Test
+        <ResetIcon /> <span className="tw:hidden tw:lg:inline">Clear Test</span>
       </Button>
     </div>
   )
@@ -528,7 +530,7 @@ export const HeaderMenuButton = ({
 }) => (
   <Tooltip tip={tooltip}>
     <button
-      className={`${lgOnly ? 'tw:hidden tw:lg:inline' : ''} tw:daisy-btn tw:daisy-btn-ghost tw:daisy-btn-sm tw:px-1 tw:disabled:bg-transparent`}
+      className={`${lgOnly ? 'tw:hidden tw:lg:inline' : ''} tw:daisy-btn tw:daisy-btn-ghost tw:my-1 tw:px-1 tw:disabled:bg-transparent`}
       onClick={updateHandler}
       disabled={disabled}
     >
@@ -604,7 +606,7 @@ export const HeaderMenuViewMenu = (props) => {
 }
 
 export const HeaderMenuLayoutView = (props) => (
-  <>
+  <div className="tw:flex tw:flex-row tw:items-center">
     <HeaderMenuDropdown
       {...props}
       id="layoutOptions"
@@ -619,7 +621,7 @@ export const HeaderMenuLayoutView = (props) => (
       <LayoutSettingsMenu {...props} />
     </HeaderMenuDropdown>
     <HeaderMenuLayoutViewIcons {...props} />
-  </>
+  </div>
 )
 
 export const HeaderMenuLayoutViewIcons = (props) => {

packages/react/components/Editor/components/MovablePattern.mjs

@@ -2,7 +2,6 @@ import React, { useRef, useState, useEffect, useCallback } from 'react'
 import { ZoomablePattern } from './ZoomablePattern.mjs'
 import { generateStackTransform, getTransformedBounds } from '@freesewing/core'
 import { getProps } from '@freesewing/react/components/Pattern'
-import { FlipIcon, RotateIcon, ResetIcon } from '@freesewing/react/components/Icon'
 import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
 //import { Buttons } from './transform-buttons.mjs'
@@ -413,6 +412,26 @@ const Button = ({ onClickCb, transform, Icon, title = '' }) => {
   )
 }
 
+const InnerFlipIcon = () => (
+  <path
+    strokeLinkecap="round"
+    strokeLinejoin="round"
+    d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+  />
+)
+const InnerRotateIcon = ({ props }) => (
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    d="M 19.5,12 C 19.5,10.768 19.454,9.547 19.362,8.338 19.21576,6.3582806 17.641719,4.7842398 15.662,4.638 14.504476,4.5506731 13.344609,4.5048098 12.184624,4.5004103 M 19.5,12 l 3,-3 m -3,3 -3,-3 m -12,3 c 0,1.232 0.046,2.453 0.138,3.662 0.1462398,1.979719 1.7202806,3.55376 3.7,3.7 1.295324,0.09777 2.593584,0.143587 3.891661,0.13746 M 4.5,12 l 3,3 m -3,-3 -3,3"
+    {...props}
+  />
+)
+const InnerResetIcon = () => (
+  <path d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z" />
+)
+
+
 /** buttons for manipulating the part */
 export const Buttons = ({ transform, flip, rotate, resetPart, rotate90, iconSize }) => {
   return (
@@ -438,31 +457,31 @@ export const Buttons = ({ transform, flip, rotate, resetPart, rotate90, iconSize
         <Button
           onClickCb={resetPart}
           transform={`translate(${rectSize / -2}, ${rectSize / -2})`}
-          Icon={() => <ResetIcon wrapped={0} />}
+          Icon={() => <InnerResetIcon />}
           title="Reset part orientation"
         />
         <Button
           onClickCb={() => rotate90()}
           transform={`translate(${rectSize * -2.7}, ${rectSize / -2})`}
-          Icon={() => <RotateIcon wrapped={0} style={{}} />}
+          Icon={() => <InnerRotateIcon />}
           title="Rotate part clockwise"
         />
         <Button
           onClickCb={() => flip('y')}
           transform={`rotate(90) translate(${rectSize / -2}, ${rectSize * -1.6})`}
-          Icon={() => <FlipIcon wrapped={0} />}
+          Icon={() => <InnerFlipIcon />}
           title="Flip part top/bottom"
         />
         <Button
           onClickCb={() => flip('x')}
           transform={`translate(${rectSize * -1.6}, ${rectSize / -2})`}
-          Icon={() => <FlipIcon style={{}} wrapped={0} />}
+          Icon={() => <InnerFlipIcon />}
           title="Flip part left/right"
         />
         <Button
           onClickCb={() => rotate90(-1)}
           transform={`translate(${rectSize * 1.7}, ${rectSize / -2})`}
-          Icon={() => <RotateIcon transform="scale(-1,1), translate(-24,0)" wrapped={0} />}
+          Icon={() => <InnerRotateIcon transform="scale(-1,1), translate(-24,0)" />}
           title="Rotate part counter-clockwise"
         />
       </g>

packages/react/components/Editor/components/PatternLayout.mjs

@@ -4,6 +4,9 @@ import { HeaderMenu } from './HeaderMenu.mjs'
 import { DesignOptionsMenu } from './menus/DesignOptionsMenu.mjs'
 import { CoreSettingsMenu } from './menus/CoreSettingsMenu.mjs'
 import { UiPreferencesMenu } from './menus/UiPreferencesMenu.mjs'
+import { LayoutSettingsMenu } from './menus/LayoutMenu.mjs'
+import { TestOptionsMenu, TestMeasurementsMenu } from './menus/TestMenu.mjs'
+import { useDesignTranslation } from '@freesewing/react/hooks/useDesignTranslation'
 
 /**
  * A layout for views that include a drafted pattern
@@ -17,6 +20,7 @@ import { UiPreferencesMenu } from './menus/UiPreferencesMenu.mjs'
  */
 export const PatternLayout = (props) => {
   const { Design, pattern, update, config, state } = props
+  const i18n = useDesignTranslation(Design.designConfig.data.id)
 
   return (
     <ZoomContextProvider>
@@ -29,30 +33,63 @@ export const PatternLayout = (props) => {
           <div className="tw:lg:w-2/3 tw:flex tw:flex-col tw:h-full tw:grow tw:p-2 tw:shadow tw:mx-2">
             {props.output}
           </div>
-          {state.ui?.aside ? (
+          <PatternAsideMenu {...props} i18n={i18n} />
-            <div
-              className={`tw:hidden tw:md:block tw:w-1/3 tw:shrink tw:grow-0 tw:lg:p-4 tw:max-w-2xl tw:h-full tw:overflow-scroll`}
-            >
-              <h5 className="tw:capitalize">{pattern.designConfig.data.id} Options</h5>
-              <SideMenuUl>
-                <DesignOptionsMenu {...props} />
-              </SideMenuUl>
-              <h5>Core Settings</h5>
-              <SideMenuUl>
-                <CoreSettingsMenu {...props} />
-              </SideMenuUl>
-              <h5>UI Preferences</h5>
-              <SideMenuUl>
-                <UiPreferencesMenu {...props} />
-              </SideMenuUl>
-            </div>
-          ) : null}
         </div>
       </div>
     </ZoomContextProvider>
   )
 }
 
+const PatternAsideMenu = (props) => {
+  if (!props.state.ui?.aside) return null
+  if (props.state.view === 'draft') return (
+    <PatternAsideWrapper>
+      <h5 className="tw:capitalize">{props.pattern.designConfig.data.id} Options</h5>
+      <SideMenuUl>
+        <DesignOptionsMenu {...props} />
+      </SideMenuUl>
+      <h5>Core Settings</h5>
+      <SideMenuUl>
+        <CoreSettingsMenu {...props} />
+      </SideMenuUl>
+      <h5>UI Preferences</h5>
+      <SideMenuUl>
+        <UiPreferencesMenu {...props} />
+      </SideMenuUl>
+    </PatternAsideWrapper>
+  )
+  if (props.state.view === 'layout') return (
+    <PatternAsideWrapper>
+      <h5>Layout Settings</h5>
+      <SideMenuUl>
+        <LayoutSettingsMenu {...props} />
+      </SideMenuUl>
+    </PatternAsideWrapper>
+  )
+  if (props.state.view === 'test') return (
+    <PatternAsideWrapper>
+      <h5>Test Design Options</h5>
+      <SideMenuUl>
+        <TestOptionsMenu {...props} />
+      </SideMenuUl>
+      <h5>Test Measurements</h5>
+      <SideMenuUl>
+        <TestMeasurementsMenu {...props} />
+      </SideMenuUl>
+    </PatternAsideWrapper>
+  )
+
+  return null
+}
+
+const PatternAsideWrapper = ({ children }) => (
+  <div
+    className={`tw:hidden tw:md:block tw:w-1/3 tw:shrink tw:grow-0 tw:lg:p-4 tw:max-w-2xl tw:h-full tw:overflow-scroll`}
+  >
+    {children}
+  </div>
+)
+
 export const SideMenuUl = ({ children }) => (
   <ul
     className="tw:daisy-menu tw:daisy-dropdown-content tw:flex-nowrap tw:bg-base-200 tw:rounded-box tw:z-1 tw:w-full tw:p-0 tw:pl-0"

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

@@ -5,7 +5,7 @@ import { measurements as measurementsTranslations } from '@freesewing/i18n'
 import React, { useMemo } from 'react'
 // Components
 import { MenuButtonGroup } from './Container.mjs'
-import { BeakerIcon, OptionsIcon } from '@freesewing/react/components/Icon'
+import { MeasurementsIcon, OptionsIcon } from '@freesewing/react/components/Icon'
 
 /**
  * The test design options menu
@@ -87,7 +87,7 @@ const SampleOptionButton = ({ name, i18n, update }) => (
     }
     onClick={() => update.settings('sample', { type: 'option', option: name })}
   >
-    <BeakerIcon className="tw:w-5 tw:h-5" />
+    <OptionsIcon className="tw:w-5 tw:h-5" />
     <span>{i18n.en?.o[name]?.t ?? name}</span>
   </button>
 )
@@ -100,7 +100,7 @@ const SampleMeasurementButton = ({ name, update }) => (
     }
     onClick={() => update.settings('sample', { type: 'measurement', measurement: name })}
   >
-    <BeakerIcon className="tw:w-5 tw:h-5" />
+    <MeasurementsIcon className="tw:w-5 tw:h-5" />
     <span>{measurementsTranslations[name]}</span>
   </button>
 )

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

@@ -1,11 +1,15 @@
 // Dependencies
 import { linkClasses, capitalize } from '@freesewing/utils'
+// Context
+import { ModalContext } from '@freesewing/react/context/Modal'
 // Hooks
-import React from 'react'
+import React, { useContext } from 'react'
 // Components
-import { H1, H5 } from '@freesewing/react/components/Heading'
+import { H1, H2 } from '@freesewing/react/components/Heading'
-import { Popout } from '@freesewing/react/components/Popout'
+import { modalDocsHelp } from '@freesewing/react/components/Help'
 import { HeaderMenu } from '../HeaderMenu.mjs'
+import { Popout } from '@freesewing/react/components/Popout'
+
 
 /**
  * This is the docs view, it just shows content
@@ -16,51 +20,51 @@ import { HeaderMenu } from '../HeaderMenu.mjs'
  * @param {Object} props.update - Helper object for updating the editor state
  */
 export const DocsView = ({ state, config, update }) => {
+  const { setModal, modalContent } = useContext(ModalContext)
+
   return (
     <>
       <HeaderMenu state={state} {...{ config, update }} />
       <div className="tw:m-auto tw:mt-8 tw:max-w-2xl tw:px-4 tw:mb-8">
         <H1>Documentation</H1>
         {state?.design ? (
-          <Popout type="link">
+          <>
-            <H5>Design Documentation</H5>
+            <H2>Design Documentation</H2>
-            <p className="tw:text-lg">
+            <Popout type="link" compact dense>
-              You can find documentation for the {capitalize(state.design)} design at:
+              <div className="tw:font-bold tw:py-1">
-              <br />
-              <b>
                 <a
                   className={linkClasses}
                   href={`https://freesewing.eu/docs/designs/${state.design}`}
                 >{`FreeSewing.eu/docs/designs/${state.design}`}</a>
-              </b>
+              </div>
-            </p>
+            </Popout>
-          </Popout>
+            <button
+              className="tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline tw:mt-4"
+              onClick={() => modalDocsHelp(`docs/designs/${state.design}`, setModal)}
+            >Open without leaving the Editor</button>
+          </>
         ) : null}
-        <Popout type="link">
+        <H2>Editor Documentation</H2>
-          <H5>Understanding the FreeSewing Pattern Editor</H5>
+        <Popout type="link" compact dense>
-          <p className="tw:text-lg">
+          <div className="tw:font-bold tw:py-1">
-            Please refer to the pattern editor documentation at:
+            <a
-            <br />
+              className={linkClasses}
-            <b>
+              href="https://freesewing.eu/docs/editor"
-              <a
+            >{`FreeSewing.eu/docs/editor`}</a>
-                className={linkClasses}
+          </div>
-                href="https://freesewing.eu/docs/about/editor"
-              >{`FreeSewing.eu/docs/about/editor`}</a>
-            </b>
-          </p>
         </Popout>
-        <Popout type="tip">
+        <button
-          <H5>
+          className="tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline tw:mt-4"
-            Looking for info on how it <em>really</em> works?
+          onClick={() => modalDocsHelp(`docs/editor`, setModal)}
-          </H5>
+        >Open without leaving the Editor</button>
-          <p>
+        <H2>Developer Documentation</H2>
-            Documentation for developers and contributors is available at{' '}
+        <Popout type="link" compact>
-            <b>
+          <b>
-              <a className={linkClasses} href="https://freesewing.dev/">{`FreeSewing.dev`}</a>
+            <a className={linkClasses} href="https://freesewing.dev/">{`FreeSewing.dev`}</a>
-            </b>
+          </b>
-          </p>
         </Popout>
       </div>
+      {modalContent}
     </>
   )
 }

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

@@ -58,10 +58,26 @@ export const ExportView = (props) => {
         <H2>Share your pattern</H2>
         <p>If you merely want to share your pattern with others, you can copy these URLs:</p>
         <div className="tw:grid tw:grid-cols-1 tw:lg:grid-cols-2 tw:gap-2 tw:mt-2 ">
-          <CopyToClipboardButton content={urls.a} update={update}>
+          <CopyToClipboardButton
+            content={urls.a}
+            btnClasses="tw:daisy-btn tw-daisy-btn-neutral tw:daisy-btn-outline"
+            label="Pattern and Measurements URL"
+            onCopy={() => {
+              console.log('handler called')
+              update.notifySuccess('Pattern and Measurements URL copied to clipboard')
+            }}
+          >
             Pattern and Measurements
           </CopyToClipboardButton>
-          <CopyToClipboardButton content={urls.b} update={update}>
+          <CopyToClipboardButton
+            content={urls.b}
+            btnClasses="tw:daisy-btn tw-daisy-btn-neutral tw:daisy-btn-outline"
+            label="Pattern URL"
+            onCopy={() => {
+              console.log('handler called')
+              update.notifySuccess('Pattern URL copied to clipboard')
+            }}
+          >
             Pattern only
           </CopyToClipboardButton>
         </div>

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

@@ -162,7 +162,7 @@ export const SaveView = ({ config, state, update }) => {
             To access your saved patterns, go to:
             <b>
               {' '}
-              <Link href="/account/patterns">/account/patterns</Link>
+              <Link href="/account/data/patterns/">/account/data/patterns</Link>
             </b>
           </p>
         </div>

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

@@ -14,6 +14,7 @@ import { ZoomablePattern } from '../ZoomablePattern.mjs'
 import { PatternLayout } from '../PatternLayout.mjs'
 import { HeaderMenu } from '../HeaderMenu.mjs'
 import { H1, H3, H4, H5 } from '@freesewing/react/components/Heading'
+import { OptionsIcon, MeasurementsIcon } from '@freesewing/react/components/Icon'
 
 /**
  * The test view allows users to test options and measurements
@@ -87,6 +88,7 @@ export const TestView = ({ Design, state, update, config }) => {
     't',
     'ASC'
   )
+  const btnClasses = "tw:my-0.5 tw:block tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline tw:daisy-btn-xs tw:flex tw:flex-row tw:items-center tw:justify-between tw:w-full tw:max-w-64"
 
   return (
     <>
@@ -106,12 +108,13 @@ export const TestView = ({ Design, state, update, config }) => {
                 {trm.map(({ t, m }) => (
                   <button
                     key={m}
-                    className="tw:my-0.5 tw:block tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline tw:daisy-btn-xs"
+                    className={btnClasses}
                     onClick={() =>
                       update.settings(['sample'], { type: 'measurement', measurement: m })
                     }
                   >
-                    {t}
+                    <MeasurementsIcon className="tw:w-4 tw:h-4" />
+                    <span>{t}</span>
                   </button>
                 ))}
               </div>
@@ -122,12 +125,13 @@ export const TestView = ({ Design, state, update, config }) => {
                     {tom.map(({ t, m }) => (
                       <button
                         key={m}
-                        className="tw:my-0.5 tw:block tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline tw:daisy-btn-xs"
+                        className={btnClasses}
                         onClick={() =>
                           update.settings(['sample'], { type: 'measurement', measurement: m })
                         }
                       >
-                        {t}
+                        <MeasurementsIcon className="tw:w-4 tw:h-4" />
+                        <span>{t}</span>
                       </button>
                     ))}
                   </div>
@@ -158,6 +162,7 @@ const SampleOptionsMenu = ({ Design, state, update }) => {
 
 const SampleOptionsSubMenu = ({ structure, update, level = 1 }) => {
   const output = []
+  const btnClasses = "tw:my-0.5 tw:block tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline tw:daisy-btn-xs tw:flex tw:flex-row tw:items-center tw:justify-between tw:w-full tw:max-w-64"
   /*
    * Show entries alphabetic, but force groups last, and advanced last among them
    */
@@ -175,10 +180,11 @@ const SampleOptionsSubMenu = ({ structure, update, level = 1 }) => {
       output.push(
         <button
           key={name}
-          className="tw:my-0.5 tw:block tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline tw:daisy-btn-xs"
+          className={btnClasses}
           onClick={() => update.settings(['sample'], { type: 'option', option: name })}
         >
-          {struct.title}
+          <OptionsIcon className="tw:w-4 tw:h-4" />
+          <span>{struct.title}</span>
         </button>
       )
   }

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

@@ -108,33 +108,33 @@ export const UndoStep = ({ update, state, step, Design, compact = false, index =
 
   return (
     <>
-      <p className="tw:text-sm tw:italic tw:font-medium tw:opacity-70 tw:text-right tw:p-0 tw:tw:m-0 tw:-mb-2 tw:pr-2">
-        <UndoStepTimeAgo step={step} />
-      </p>
       <ButtonFrame onClick={() => update.restore(index, state._)}>
-        <div className="tw:flex tw:flex-row tw:items-center tw:justify-between tw:gap-2 tw:w-full tw:m-0 tw:p-0 tw:-mt-2 tw:text-lg">
+        <div className="tw:flex tw:flex-col tw:font-medium tw:items-end tw:w-full tw:-mb-2">
-          <span className="tw:flex tw:flex-row tw:gap-2 tw:items-center">
+          <div className="tw:text-sm tw:-mt-2 tw:italic"><UndoStepTimeAgo step={step} /></div>
-            {data.fieldIcon || null}
+          <div className="tw:flex tw:flex-row tw:items-center tw:justify-start tw:gap-2 tw:w-full tw:text-lg tw:-mt-2">
-            {data.title}
+            <span className="tw:opacity-70 tw:flex tw:flex-row tw:gap-1 tw:items-center tw:text-base">
-          </span>
+              {data.menu}
-          <span className="tw:opacity-70 tw:flex tw:flex-row tw:gap-1 tw:items-center tw:text-base">
+            </span>
-            {data.icon || null} {data.menu}
+            <span>&raquo;</span>
-          </span>
+            <span className="tw:flex tw:flex-row tw:gap-2 tw:items-center">
-        </div>
+              {data.title}
-        <div className="tw:flex tw:flex-row tw:gap-1 tw:items-center tw:align-start tw:w-full">
+            </span>
-          {data.msg ? (
+          </div>
-            data.msg
+          <div className="tw:flex tw:flex-row tw:gap-1 tw:items-center tw:align-start tw:w-full">
-          ) : (
+            {data.msg ? (
-            <>
+              data.msg
-              <span className="">
+            ) : (
-                {Array.isArray(data.newVal) ? data.newVal.join(', ') : data.newVal}
+              <>
-              </span>
+                <span className="">
-              <LeftIcon className="tw:w-4 tw:h-4 tw:text-secondary tw:shrink-0" stroke={4} />
+                  {Array.isArray(data.newVal) ? data.newVal.join(', ') : data.newVal}
-              <span className="tw:line-through tw:decoration-1 tw:opacity-70">
+                </span>
-                {Array.isArray(data.oldVal) ? data.oldVal.join(', ') : data.oldVal}
+                <LeftIcon className="tw:w-4 tw:h-4 tw:text-secondary tw:shrink-0" stroke={4} />
-              </span>
+                <span className="tw:line-through tw:decoration-1 tw:opacity-70">
-            </>
+                  {Array.isArray(data.oldVal) ? data.oldVal.join(', ') : data.oldVal}
-          )}
+                </span>
+              </>
+            )}
+          </div>
         </div>
       </ButtonFrame>
     </>

packages/react/components/Help/index.mjs

@@ -2,7 +2,26 @@ 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 an iframe intended for a modal window.
+ *
+ * All props are passed down to the iframe tag.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @returns {JSX.Element}
+ */
+const Iframe = (props) => <iframe {...props} style={{ height: '90vh', width: '90vw' }} className="tw:w-full tw:mx-auto tw:max-w-4xl" />
+
+/*
+ * A component to display an iframe with FreeSewing.eu docs content intended for a modal window.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.path - The (relative) URL path of the page to load
+ * @returns {JSX.Element}
+ */
+const DocsHelp = ({ path }) => <Iframe src={`https://freesewing.eu/${path}/?docusaurus-data-fs-embed=true`} />
 
 /*
  * A component to display inline help for a design option
@@ -19,7 +38,7 @@ const DesignOptionHelp = ({ design, o }) =>
   design && o ? (
     <Iframe
       src={`https://freesewing.eu/docs/designs/${design.toLowerCase()}/options/${o.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
-      title="Design Option Help"
+      title="Design Options Help"
     />
   ) : (
     <p>Invalid props provided to DesignOptionHelp.</p>
@@ -38,7 +57,7 @@ const DesignOptionHelp = ({ design, o }) =>
 const CoreSettingHelp = ({ name }) =>
   name ? (
     <Iframe
-      src={`https://freesewing.eu/docs/about/site/draft/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
+      src={`https://freesewing.eu/docs/editor/menus/settings/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
       title="Core Setting Help"
     />
   ) : (
@@ -58,8 +77,8 @@ const CoreSettingHelp = ({ name }) =>
 const UiPreferenceHelp = ({ name }) =>
   name ? (
     <Iframe
-      src={`https://freesewing.eu/docs/about/site/draft/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
+      src={`https://freesewing.eu/docs/editor/menus/preferences/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
-      title="UI Preference Help"
+      title="UI Preferences Help"
     />
   ) : (
     <p>Invalid props provided to UiPreferenceHelp.</p>
@@ -111,10 +130,17 @@ export function modalDesignOptionHelp(design, o, setModal) {
 }
 
 export function modalMeasurementHelp(m, setModal) {
-  console.log('in modalMeasurmentHelp', { m, setModal })
   setModal(
     <ModalWrapper fullWidth keepOpenOnClick>
       <MeasurementHelp m={m} />
     </ModalWrapper>
   )
 }
+
+export function modalDocsHelp(path, setModal) {
+  setModal(
+    <ModalWrapper wide keepOpenOnClick>
+      <DocsHelp path={path} />
+    </ModalWrapper>
+  )
+}

packages/react/components/Modal/index.mjs

@@ -24,6 +24,7 @@ const slideClasses = {
  * @param {bool} [keepOpenOnClick = false] - Set to true to prevent a click in the modal content from closing the modal
  * @param {string} [slideFrom = left] - Direction to slide in from on mobile
  * @param {bool} [fullWidth = false] - Set to true to not constrain the width
+ * @param {bool} [wide = false] - Set to true to not set a wide max width
  * @returns {JSX.Element}
  */
 export const ModalWrapper = ({
@@ -37,6 +38,7 @@ export const ModalWrapper = ({
   keepOpenOnClick = false,
   slideFrom = 'left',
   fullWidth = false,
+  wide = false,
 }) => {
   const { clearModal } = useContext(ModalContext)
   const [animate, setAnimate] = useState('in')
@@ -82,7 +84,8 @@ export const ModalWrapper = ({
           onClick={keepOpenOnClick ? stopClick : null}
           className={`tw:z-30 tw:bg-base-100 tw:p-4 tw:lg:px-8 tw:lg:rounded-lg tw:lg:shadow-lg tw:max-h-full tw:overflow-auto tw:hover:cursor-default ${
             fullWidth ? 'tw:w-full' : ''
-          }`}
+
+          } ${wide ? 'tw:max-w-5xl tw:w-full' : ''} `}
         >
           {children}
           <button

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

@@ -0,0 +1,22 @@
+---
+title: Flags Menu
+---
+
+The **Flags Menu** holds messages that were _flagged_ by the designer.
+
+In other words, this menu facilitates communication between the original
+designer and you, the person using their design.
+
+Sometimes a flag is merely informative, sometimes they indicate there's a
+potential problem with your pattern.
+
+:::tip
+The UI preferences menu is accessible in the [ribbon area](#areas) in the
+[draft view](#draft) and other views that show the pattern.
+:::
+
+:::warning
+Before printing a pattern, let alone cutting into any fabric, make sure to
+check all of the messages in this menu.
+:::
+

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

@@ -0,0 +1,11 @@
+---
+title: Layout Menu
+---
+
+The layout menu holds settings for the (print) layout. It is shown only on the
+[layout view](#layout).
+
+:::tip
+The test menu is accessible in the [ribbon area](#areas) in the [layout view](#layout) only.
+:::
+

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

@@ -0,0 +1,16 @@
+---
+title: 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.
+
+:::tip
+The design options menu is accessible in the [ribbon area](#areas) in the
+[draft view](#draft) and other views that show the pattern.
+:::

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

@@ -0,0 +1,10 @@
+---
+title: Show Side Menu
+---
+
+This toggles the aside area on or off. The aside area can hold menus that are
+also accessible via the [ribbon area](#areas).
+
+:::note
+That the aside area is not available on mobile.
+:::

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

@@ -0,0 +1,6 @@
+---
+title: User Experience
+---
+
+This is a Editor-specific way to configure the [control
+setting](/docs/about/site/account/#control).

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

@@ -0,0 +1,31 @@
+---
+title: UI Preferences Menu
+---
+import Aside from '@site/docs/docs/editor/menus/preferences/aside/readme.mdx'
+import Control from '@site/docs/docs/editor/menus/preferences/control/readme.mdx'
+import Renderer from '@site/docs/docs/editor/menus/preferences/renderer/readme.mdx'
+import Rotate from '@site/docs/docs/editor/menus/preferences/rotate/readme.mdx'
+
+The **UI Preferences** menu allows you to tweak certain aspects of the user
+interface (UI).
+These preferences are ephemeral, which means they are not kept in the URL.
+
+:::tip
+The UI preferences menu is accessible in the [ribbon area](#areas) in the
+[draft view](#draft) and other views that show the pattern.
+:::
+
+The UI preferences includes in this menu are:
+
+#### Show Side Menu {#aside}
+<Aside />
+
+#### User Experience {#control}
+<Control />
+
+#### Pattern Render Engine {#renderer}
+<Renderer />
+
+#### Rotate Pattern {#rotate}
+<Rotate />
+

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

@@ -2,8 +2,6 @@
 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:
 

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

@@ -0,0 +1,8 @@
+---
+title: Rotate Pattern
+---
+
+This allows you to rotate your pattern 90 degrees in the Editor.
+
+This is useful for patterns that are very tall as patterns are constrained by
+width in the Editor.

sites/org/docs/docs/editor/menus/readme.md

@@ -0,0 +1,3 @@
+---
+title: Editor Menus
+---

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

@@ -2,8 +2,6 @@
 title: Pattern Details
 ---
 
-# Pattern Details {#complete}
-
 This setting -- which is enabled by default -- will give you a pattern with all
 details included.
 

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

@@ -2,8 +2,6 @@
 title: Pattern expansion
 ---
 
-### Pattern expansion {#expand}
-
 This option suppresses all efforts to make the pattern consume less
 space/paper.
 

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

@@ -2,8 +2,6 @@
 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

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

@@ -2,8 +2,6 @@
 title: Margin
 ---
 
-### Margin {#margin}
-
 The margin setting controls how much space will be added around each pattern
 part when calculating the pattern layout.
 

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

@@ -2,8 +2,6 @@
 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).

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

@@ -0,0 +1,57 @@
+---
+title: Core Settings Menu
+---
+import Complete from '@site/docs/docs/editor/menus/settings/complete/readme.mdx'
+import Expand from '@site/docs/docs/editor/menus/settings/expand/readme.mdx'
+import Include from '@site/docs/docs/editor/menus/settings/include/readme.mdx'
+import Margin from '@site/docs/docs/editor/menus/settings/margin/readme.mdx'
+import Paperless from '@site/docs/docs/editor/menus/settings/paperless/readme.mdx'
+import Sabool from '@site/docs/docs/editor/menus/settings/sabool/readme.mdx'
+import Samm from '@site/docs/docs/editor/menus/settings/samm/readme.mdx'
+import Scale from '@site/docs/docs/editor/menus/settings/scale/readme.mdx'
+import Units from '@site/docs/docs/editor/menus/settings/units/readme.mdx'
+
+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.
+
+:::tip
+The core settings menu is accessible in the [ribbon area](#areas) in the
+[draft view](#draft) and other views that show the pattern.
+:::
+
+The following core settings are available:
+
+#### Pattern Details {#complete}
+<Complete />
+
+#### Pattern Expansion {#expand}
+<Expand />
+
+#### Included parts {#include}
+<Include />
+
+#### Margin {#margin}
+<Margin />
+
+#### Paperless Patterns {#paperless}
+<Paperless />
+
+#### Include Seam Allowance {#sabool}
+<Sabool />
+
+#### Seam Allowance Size {#samm}
+<Samm />
+
+#### Scale {#scale}
+<Scale />
+
+#### Units {#units}
+<Units />
+

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

@@ -2,10 +2,7 @@
 title: Include Seam Allowance
 ---
 
-### Include Seam Allowance {#sabool}
+This controls whether or not to include seam allowance on your pattern.
-
-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**.
@@ -15,9 +12,9 @@ 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
+- **[Include Seam Allowance](#sabool)**: Controls whether
   or not to include seam allowance
-- **[Seam Allowance Size](/docs/about/site/draft/#samm)**: Controls how big to
+- **[Seam Allowance Size](#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/settings/samm/readme.mdx

@@ -2,8 +2,6 @@
 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
@@ -16,7 +14,7 @@ settings on the website:
 
 - **[Include Seam Allowance](#sabool)**:
   Controls whether or not to include seam allowance
-- **[Seam Allowance Size](/docs/about/site/draft/#samm)**:
+- **[Seam Allowance Size](#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/settings/scale/readme.mdx

@@ -2,8 +2,6 @@
 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.

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

@@ -2,8 +2,6 @@
 title: Units
 ---
 
-### Units {#units}
-
 This controls the units used on your pattern. FreeSewing supports both metric
 and imperial units.
 

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

@@ -0,0 +1,18 @@
+---
+title: Test Menu
+---
+
+The test menu allows you to run tests on the design, making sure the influence
+of design options or measurements is as expected.
+
+The menu will include buttons to test:
+
+- All Design Options
+- All Measurements
+  - All required measurments
+  - Any optional measurements
+
+:::tip
+The test menu is accessible in the [ribbon area](#areas) in the [test view](#test) only.
+:::
+

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

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

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

@@ -1,7 +0,0 @@
----
-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/rotate/readme.mdx

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

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

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

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

@@ -0,0 +1,9 @@
+---
+title: View Menu
+---
+
+The **View menu** allows you to set the Editor view.
+
+:::tip
+Refer to [Editor Views](#editor-views) for more details.
+:::

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

@@ -33,6 +33,14 @@ 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'
 
+import PreferencesMenu from '@site/docs/docs/editor/menus/preferences/readme.mdx'
+import OptionsMenu from '@site/docs/docs/editor/menus/options/readme.mdx'
+import SettingsMenu from '@site/docs/docs/editor/menus/settings/readme.mdx'
+import ViewMenu from '@site/docs/docs/editor/menus/view/readme.mdx'
+import FlagsMenu from '@site/docs/docs/editor/menus/flags/readme.mdx'
+import TestMenu from '@site/docs/docs/editor/menus/test/readme.mdx'
+import LayoutMenu from '@site/docs/docs/editor/menus/layout/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**.
@@ -45,18 +53,14 @@ 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">
+- By default, some of the more advanced features of the Editor are hidden to not overwhelm new users.
-    Knowing where to find them and what they do is key to getting the most out of the FreeSewing
+
-    Editor.
+:::tip
-  </small>
+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.
+:::
 
 ## Quick start guide
 
@@ -73,30 +77,6 @@ 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,
@@ -108,59 +88,11 @@ 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:
@@ -360,7 +292,7 @@ The following views are available:
 
 <TestView />
 
-### Time Design <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>timing</b> view</span>
+### Time Design <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>timing</b> view</span> {#timing)
 
 <TimingView />
 
@@ -373,242 +305,32 @@ The following views are available:
 Depending on the view you have selected, different menus will be available.
 The full list of menus is:
 
-- View Menu
+- [View Menu](#view-menu)
-- Design Options Menu
+- [Design Options Menu](#options-menu)
-- Core Settings Menu
+- [Core Settings Menu](#settings-menu)
-- UI Preferences Menu
+- [UI Preferences Menu](#preferences-menu)
-- Flags Menu
+- [Flags Menu](#flags-menu)
-- Print Settings Menu
+- [Test Menu](#test-menu)
-- Test Options Menu
+- [Layout Menu](#layout-menu)
-- Test Measurements Menu
 
-## The editor
+### View Menu {#view-menu}
+<ViewMenu />
 
-Below is a screenshot of FreeSewing's pattern editor in **kiosk mode** which
+### Design Options Menu {#options-menu}
-hides the site header and footer and lets the editor take up the entire screen.
+<OptionsMenu />
-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")
+### Core Settings Menu {#settings-menu}
+<SettingsMenu />
 
-### The view menu
+### UI Preferences Menu {#preferences-menu}
+<PreferencesMenu />
 
-The **View menu** on the left allows you to select the view. Each view serves a
+### Flags Menu {#flags-menu}
-different purpose. The different views are:
+<FlagsMenu />
 
-- **Pattern editor**: This is where you can tweak your pattern
+### Test Menu {#test-menu}
-- **Pattern measurements**: This is where you can choose which measurements set
+<TestMenu />
-  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
+### Layout Menu {#layout-menu}
-editor**.
+<LayoutMenu />
 
-### 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

@@ -1,5 +1,71 @@
 ---
 title: Choose a different design (designs view)
 ---
+import { CisFemaleIcon, ResetIcon, FilterIcon, ShowcaseIcon } from '@freesewing/react/components/Icon'
+
+#### Purpose of the designs view
+
+The _designs_ view allows you to chose the design you want to generate a pattern from.
+It is the first thing the Editor will present you with.
+
+#### Layout of the designs view
+
+This view does not have a [ribbon area](#areas). The entire editor real-estate
+is used for letting you choose a design.
+
+<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 designs view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in designs view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/b2ce3fba-c44d-4fef-f83e-70b177acff00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in designs 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>
+
+#### Controlling the design grid
+
+By default, you will get a grid of pictures showcasing the available designs,
+as well as a list of design names at the top for quick access in case you
+already know which design you want.
+
+You can control the way the designs are displayed with the buttons between the
+list of names and the grid of pictures:
+
+| Button | Description |
+| ------ | ----------- |
+| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"><CisFemaleIcon /> Show Line Drawings</button> | Display a line drawing for each design<br /><small>This button won't be shown when pictures are currently displayed</small> |
+| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"><ShowcaseIcon /> Show Examples</button> | Display a picture for each design<br /><small>This button won't be shown when line drawings are currently displayed</small> |
+| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"><FilterIcon /> Show Filters</button> | Display filters for the list of designs<br /><small>See [Design filters](#filters)</small> |
+| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"><FilterIcon /> Hide Filters</button> | Display filters for the list of designs<br /><small>This button won't be shown unless filters are currently displayed</small> |
+| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"><ResetIcon /> Clear Filters</button> | Display filters for the list of designs<br /><small>This button won't be shown unless filters are currently displayed</small> |
+
+##### Design filters {#filters}
+
+When you click the **Show Filters** button, it will bring up these filters:
+
+![A screenshot of the Design filters in the FreeSewing
+Editor](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/5c42adbd-7a11-4128-0ae5-3782f0def700/public)
+
+They allow you to filter on:
+
+- **Tags**: These designate different departments
+- **Techniques**: These let you filter based on the techniques that you are comfortable with
+- **Difficulty**: These let you filter based on the difficulty level of making the design
+
+You can click on any of them to select/deselect, and can also combine filters.
 
-FIXME

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

@@ -2,4 +2,43 @@
 title: Documentation (docs view)
 ---
 
-FIXME
+#### Purpose of the docs view
+
+The _docs_ view holds links to the documentation of the desing you are
+currently using, as well as documentation about the FreeSewing editor itself,
+and even documentation for developers.
+
+#### Layout of the docs view
+
+This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in docs view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/c1a8bbc2-262a-4a05-4500-68437793c200/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in docs view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in docs view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/7aa3e12e-33ba-407f-6714-b23c9785bf00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in docs view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in docs view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/26bcc631-800f-4a71-a14b-54745713fb00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in docs view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+
+:::tip Reading documenation without leaving the Editor
+
+If you want to check something in the documenation but do not want to leave the Editor, look for this button:
+<br /><button className="tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline tw:mt-4">Open without leaving the Editor</button>
+<br/>It will load the documentation in a modal window floating on top of the Editor.
+:::

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

@@ -1,5 +1,66 @@
 ---
 title: Edit settings by hand (editSettings view)
 ---
+import { OkIcon, ResetIcon, FilterIcon, ShowcaseIcon } from '@freesewing/react/components/Icon'
+
+#### Purpose of the editSettings view
+
+The _editSettings view allows you to manually tweak all of the inputs of your pattern, accept the design.
+That includes:
+
+- The measurements
+- The design options
+- The core settings
+
+:::warning
+This is an advanced feature that does provide any guardrails.
+:::
+
+#### Layout of the editSettings view
+
+This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
+
+The rest of the [main working area](#areas) is taken up by a YAML editor that allows you to make changes.
+
+:::tip
+We use [YAML](https://en.wikipedia.org/wiki/YAML) here as a format to edit the
+settings. If you are not familiar, hopefully the syntax is self-explanatory.
+If not, there's plenty of information online about how it works.
+:::
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in docs view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/9fc57e07-ea5b-4f41-ad35-add527304700/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in docs view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in docs view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/cd026ef0-535c-4b15-bba3-69fc9cda5800/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in docs view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in docs view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/ca22a664-e882-4cc4-47b9-3b99364a0c00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in docs view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+
+#### Saving or reverting changes
+
+Changes you make here are not immeadiate. Instead, once you introduce a change,
+and number of extra buttons will appear below the YAML editor:
+
+| Button | Description |
+| ------ | ----------- |
+| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline">Show Changes</button> | Shows the unsaved changes you have made<br /><small>This button won't show until you make a change</small> |
+| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-primary"><OkIcon /> Save Settings</button> | Applies the changes you have made (this does not save your pattern)<br /><small>This button won't show until you make a change</small> |
+| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-error tw:daisy-btn-outline"><ResetIcon /> Revert Settings</button> | Discard any changes you have made<br /><small>This button won't show until you make a change</small> |
+
 
-FIXME

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

@@ -2,4 +2,60 @@
 title: Export Pattern (export view)
 ---
 
-FIXME
+#### Purpose of the export view
+
+The _export_ view allows you to export your pattern in a variety of formats.
+
+#### Layout of the export view
+
+This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in export view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/d8024ba1-a01b-445d-0230-652c119ff400/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in export view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in export view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/08121359-a9e0-4773-a282-75acbb770b00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in export view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in export view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/f712e979-317f-4775-bff7-07a61cfe7400/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in export view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+
+#### Available export formats
+
+The page lists the following export formats:
+
+- **Share your pattern**: These are URLs that you can copy that include the Editor state
+  - **Pattern and Measurements**: This URL includes all patterns settings plus the measurements used<br /><small>With this URL anyone can create the exact same pattern.</small>
+  - **Pattern only**: This URL includes all patterns settings, but no measurements<br /><small>With this URL anyone can create the same pattern style with their own measurements.</small>
+- **Export for printing**: Export formats intended for printing your pattern
+  - **ISO paper sizes**: Standard paper sizes
+    - **A4 PDF**: Export to PDF, tiled to A4-sized pages
+    - **A3 PDF**: Export to PDF, tiled to A3-sized pages
+    - **A2 PDF**: Export to PDF, tiled to A2-sized pages
+    - **A1 PDF**: Export to PDF, tiled to A1-sized pages
+    - **A0 PDF**: Export to PDF, tiled to A0-sized pages
+  - **Other paper sizes**: Local paper sizes used in the US and Canada
+    - **Letter PDF**: Export to PDF, tiles to Letter-sized pages
+    - **Legal PDF**: Export to PDF, tiles to Legal-sized pages
+    - **Tabloid PDF**: Export to PDF, tiles to Tabloid-sized pages
+- **Export for editing**: Export formats intended for further editing
+    - **SVG**: Export to SVG<br /><small>This is the native FreeSewing format</small>
+    - **SVG**: Export to (untiled) PDF
+- **Export as code**: Export formats for developers
+    - **JSON**: Export pattern settings as JSON
+    - **YAML**: Export pattern settings as YAML
+

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

@@ -2,4 +2,40 @@
 title: Pattern inspector (inspect view)
 ---
 
-FIXME
+#### Purpose of the inspect view
+
+The _inspect_ view is a version of the [draft view](#draft) with extra features
+for pattern designers that allows them to _inspect_ the various points and
+paths that make up a pattern.
+
+This is an advanced feature that is of little value to regular users of the
+site and intended for designers and developers.
+
+#### Layout of the inspect view
+
+This view shares the same layout as the [draft view](#draft).
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in inspect view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/91d45b1d-b43f-47bc-8251-eebf85e90b00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in inspect view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in inspect view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/7362d841-1546-4078-7bbd-2765c737ce00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in inspect view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in inspect view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/35456cf1-8e7f-4d78-d329-5c293b878b00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in inspect view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+

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

@@ -1,5 +1,70 @@
 ---
 title: Pattern Layout (layout view)
 ---
+import { PrintIcon, ResetIcon } from '@freesewing/react/components/Icon'
+
+#### Purpose of the layout view
+
+The _layout_ view allows you to customize the way the individual patterns parts
+are laid out on the page(s).
+
+:::tip
+Placing pattern parts on page to use as little paper as possible -- aka
+[the bin packing problem](https://en.wikipedia.org/wiki/Bin_packing_problem) -- is
+one of those challenges where humans are (still) much better at than computers.
+
+Every time you tweak your pattern, FreeSewing needs to re-draft it, calculate
+the new layout, and render it on screen. For this reason, we wrote a packing
+algorithm that prioritizes speed.<br />
+As a result, it is often trivial for a human to come up with a more optimized layout.
+This view lets you accomplish this without requiring any additional software.
+
+If you want more control over your pattern, you can also [export it as SVG](#export)
+and use [Inkscape](https://inkscape.org/) to edit it locally.
+:::
+
+#### Layout of the layout view
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in inspect view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/c404cef0-c56f-48f0-52fa-1bcf0fc23800/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in inspect view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in inspect view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/f6786677-4da1-46d7-d644-067825179e00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in inspect view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in inspect view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/83492873-d65a-4e87-4a62-abeaeedfbe00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in inspect view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+
+- The layout 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 **Pattern Layout** label)
+  - The view-specific menus, including:
+    - The [**layout** menu](#layout-menu) (highlighted in yellow)
+    - The [**layout** icons](#layout-menu) (highlighted in green)
+- In [the **main working area**](#areas), we have:
+  - [The pattern area](#areas) on the left (highlighted in yellow)
+  - [The **aside** area](#areas) on the right, holding:
+    - The [Layout menu](#layout-menu) (highlighted in yellow, same as in [the ribbon area](#areas))
+
+#### Layout icons
+
+The _layout icons_ in the ribbon area hold:
+
+- A **summary** about the numbner of pages required for the current layout
+- A **Apply Layout** button to apply the current layout
+- A <PrintIcon className="tw:w-5 tw:h-5 tw:inline" /> icon that takes you to the [export view](#export)
+- A <ResetIcon className="tw:w-5 tw:h-5 tw:inline" /> icon the resets the layout changes
 
-FIXME

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

@@ -2,4 +2,38 @@
 title: Pattern Logs (logs view)
 ---
 
-FIXME
+#### Purpose of the logs view
+
+The _logs_ view show the logs generated by the FreeSewing core library.
+
+This is an advanced feature that is of little value to regular users of the
+site and intended for designers and developers.
+
+#### Layout of the logs view
+
+This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in logs view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/5d5d88de-c906-48fd-653f-afde14d37700/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in logs view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in logs view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/9fcf87a7-ac66-46df-6dea-e2e345841800/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in logs view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in logs view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/2ce55414-411b-4308-c9d8-dc2919669200/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in logs view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+

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

@@ -2,4 +2,56 @@
 title: Pattern Measurements (measurements view)
 ---
 
-FIXME
+#### Purpose of the measurements view
+
+The _measurements_ view is where you should provide the measurements to be used
+for your pattern.
+
+:::tip
+If you are lacking any required measurements, this view will be automatically loaded.
+:::
+
+#### Layout of the measurements view
+
+This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in measurements view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/63eb1d1d-aab2-4cbd-9c3b-1b31bdb28f00/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
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/3323de58-86e5-4d1f-235c-199b396dbe00/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/705f89b6-0bfe-415e-233e-a168f4bdd900/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in measurements view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+
+#### Ways to provide measurements
+
+This view has different ways that you can provide measurements:
+
+- **Choose one of your own measurements set**<br />
+  Use this to select one of the measurements sets stored in your own FreeSewing account.
+- **Choose one of the measurements sets you have bookmarked**<br />
+  Choose this to use a measurement set you have bookmarked, which can be either
+  one of your own, or a public measurements set from another FreeSewing user.
+- **Choose one of Freesewing's curated measurments sets**<br />
+  Choose one of the measurements sets from the list we curate.
+- **Load a measurements set by ID**<br />
+  If you know the ID of the measurements set you want to use, you can load it this way.
+  If it's not one of your own measurements sets, it needs to be a public set for this to work.
+- **Edit measurements by hand**<br />
+  Regardless of what option you choose, this allows you to edit all measurments by hand.

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

@@ -0,0 +1,3 @@
+---
+title: Editor views
+---

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

@@ -1,5 +1,48 @@
 ---
 title: Save pattern as... (save view)
 ---
+import { UploadIcon } from '@freesewing/react/components/Icon'
 
-FIXME
+#### Purpose of the save view
+
+The _save_ view allows you to save your current work as a (new) pattern in your
+FreeSewing account.
+
+:::tip
+Once a pattern has been stored in your account you can use the
+<UploadIcon className="tw:w-6 tw:h-6 tw:inline" /> in the ribbon area
+to save your changes.
+:::
+
+#### Layout of the save view
+
+This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
+
+The save view itself takes a **title** and optional **notes** to store along the pattern.
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in docs view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/3123cdaf-9aa5-4303-e589-4fdd2316f600/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in docs view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in docs view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/48d0e87b-beae-43eb-65b7-d24ea9ac2100/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in docs view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in docs view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/937eeea2-a4bf-44ca-0442-f6406f06b000/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in docs view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+
+:::tip
+To access your saved patterns, go to [/account/data/patterns](/account/data/patterns/)

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

@@ -2,4 +2,49 @@
 title: Test Design (test view)
 ---
 
-FIXME
+#### Purpose of the test view
+
+The _test_ view is a version of the [draft view](#draft) with extra features
+for pattern designers that allows them to _test_ the impact of the various
+design options and measurements on their design.
+
+This is an advanced feature that is of little value to regular users of the
+site and intended for designers and developers.
+
+#### Layout of the test view
+
+This view shares the same layout as the [draft view](#draft).
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in test view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/27202deb-f393-4753-ccea-2c7bd6d0c600/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in test view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in test view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/8938f140-57b8-4927-6a80-8ba2598bc600/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in test view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in test view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/de0c53f0-6604-4b71-f6d1-c518607b9100/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in test view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+
+- The layout 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 **Pattern Layout** label)
+  - The view-specific menus, including:
+    - The [**test** menu](**test-menu) (highlighted in yellow)
+- In [the **main working area**](#areas), we have:
+  - [The pattern area](#areas) on the left which shows the effect of the test
+  - [The **aside** area](#areas) on the right, holding:
+    - The [Test menu](#test-menu) (highlighted in yellow, same as in [the ribbon area](#areas))
+

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

@@ -2,4 +2,42 @@
 title: Time Design (timing view)
 ---
 
-FIXME
+#### Purpose of the timing view
+
+The _timing_ view is a version of the [draft view](#draft) with extra features
+for pattern designers that allows them to _time_ the impact of the various
+design options and measurements on the the design.
+
+This is an advanced feature that is of little value to regular users of the
+site and intended for designers and developers.
+
+#### Layout of the timing view
+
+This view shares the same layout as the [draft view](#draft). However, it has
+an extra area that sits below the [ribbon area](#areas) that generates a
+timeseries graph of the subsequent draft operations (marked in yellow).
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in timing view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/20627a5b-9fd8-469f-879e-edcb99e15c00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in timing view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in timing view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/ef340831-321b-4b07-fa47-0a13dda4fe00/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in timing view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in timing view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/7b7f632b-0a70-458b-9697-941495a6e200/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in timing view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+

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

@@ -2,4 +2,41 @@
 title: Undo History (undos view)
 ---
 
-FIXME
+#### Purpose of the undos view
+
+The _undos_ view allows you to revert recent changes to your pattern.
+It lists the recent changes you made, and clicking on any changes will
+roll back all changes up to (and including) that change.
+
+:::tip
+This functionality is available in the [draft view](#draft) via the icons in the [ribbon area](#areas).
+:::
+
+#### Layout of the undos view
+
+This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
+
+<Tabs>
+  <TabItem value="desktop" label="On Desktop">
+    ![A screenshot of the FreeSewing Editor in undos view, on a
+    desktop](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/3963a3b2-8893-437d-d2da-94c6c5971500/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in undos view, on a desktop._
+    </div>
+  </TabItem>
+  <TabItem value="tablet" label="On Tablet">
+    ![A screenshot of the FreeSewing Editor in undos view, on a
+    tablet](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/e0ca5572-083d-4d98-6934-93b11570b500/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in undos view, on a tablet._
+    </div>
+  </TabItem>
+  <TabItem value="mobile" label="On Mobile">
+    ![A screenshot of the FreeSewing Editor in undos view on
+    mobile](https://imagedelivery.net/ouSuR9yY1bHt-fuAokSA5Q/084cf186-ddf0-42f7-f8ab-68e9657e1000/public)
+    <div className="tw:text-center">
+      _A screenshot of the FreeSewing editor in undos view, on mobile._
+    </div>
+  </TabItem>
+</Tabs>
+

sites/org/docusaurus.config.mjs

@@ -8,9 +8,10 @@ import smartypants from 'remark-smartypants'
  *  - We hide certain dynamic pages (like for measurements sets, patterns, and so on)
  */
 function customizeSidebar(items) {
-  // Filter out design options
+  // Filter out docs
   const docs = items.filter((entry) => entry.label === 'Docs').pop().items
   for (const item in docs) {
+    // Filter out design options
     if (docs[item].label === 'FreeSewing Designs') {
       for (const design in docs[item].items) {
         for (const subpage in docs[item].items[design].items) {
@@ -20,8 +21,9 @@ function customizeSidebar(items) {
         }
       }
     }
-    if (docs[item].label === 'hidden') {
+    // Filter out submenus in Editor docs
-      console.log(docs[item])
+    if (docs[item].label === 'FreeSewing Editor') {
+      docs[item].items = []
     }
   }