@things-factory/figure-ui 10.1.152 → 10.1.153

package/dist-client/modeller/editor.js

@@ -1,13 +1,13 @@
 var FigureEditor_1;
 import { __decorate, __metadata } from "tslib";
-import { LitElement, html, css, nothing } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { i18next } from '@operato/i18n';
 import '@operato/layout';
-import { notify, openPopup } from '@operato/layout';
+import { openPopup } from '@operato/layout';
 import { OxPrompt } from '@operato/popup';
 import { customElement, property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figurePartFaceOf, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
+import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
 import './figure-recipe-catalog.js';
 import { captureFigureThumbnail } from './thumbnail.js';
 import { drawableFigureParts } from './renderer.js';
@@ -16,7 +16,8 @@ import './figure-parts.js';
 import './figure-material-panel.js';
 import './figure-section-panel.js';
 import './figure-section-editor.js';
-import { faceHighlightOf, ghostPartsOf, previewWordsOf, rowWordsOf } from './command-preview.js';
+import { rowWordsOf } from './command-preview.js';
+import { CommandPreview, NO_WORDS } from './command-preview-controller.js';
 import { motionEndsOf } from './motion-ends.js';
 import './figure-links.js';
 import './figure-controls.js';
@@ -26,9 +27,13 @@ import './figure-settings.js';
 import { DEFAULT_VIEW } from './figure-view.js';
 import './figure-capability-panel.js';
 import { gizmoChanges, gizmoReachOf } from './gizmo.js';
-import { keyActionOf } from './keys.js';
+import { ModellerKeys } from './modeller-keys.js';
+import { PaneFold } from './pane-fold.js';
+import { PanelMemory } from './panel-memory.js';
+import { RefusalTeller } from './refusal-teller.js';
 import { groupFields, ownerOf, partLabelOf, repeatOf } from './fields.js';
 import { SidePanelStyles } from './side-panel-styles.js';
+import { EditorStyles } from './editor-styles.js';
 import { ScrollbarStyles } from '@operato/styles';
 import { alignChanges, canMirror, mirrorChanges } from './align.js';
 import { paletteRecipe } from './palette.js';
@@ -44,28 +49,12 @@ import { roomRefitRowsOf } from './occupancy.js';
 import { editRefusalOf, inDeclaredRoom, narrowingRetryOf, partNameRefusalOf, partRefusalOf, placedRefusalOf, recipeRefusalOf, removalNoticeOf } from './refusals.js';
 import { endPlaceKeyOf, fieldWordsOf, followOf, measureNow, partSummaryOf, instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js';
 import { jointFanOf } from './joint-fan.js';
-import { derivedHeld, derivedOf } from './revision.js';
+import { derivedOf } from './revision.js';
 import { jointDragOf } from './joint-drag.js';
 import { liveOverSession, NOTHING_LIVE, scrubbed, scrubStep } from './live.js';
 import { startingShapeKindOfBody } from './starting-shape.js';
-/** Whether the narrow fold was said in this browser before; true from now on. Storage refused: said, as before. */
-function foldSaid() {
-    try {
-        if (localStorage.getItem('figure-fold-said'))
-            return true;
-        localStorage.setItem('figure-fold-said', '1');
-    }
-    catch {
-        /* No storage here: said every time, as it was. */
-    }
-    return false;
-}
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
-/** The words a panel is given when there are none: one array, so it does not read as a change. */
-const NO_WORDS = [];
 const NO_OVERHANG = { words: NO_WORDS, note: NO_WORDS };
-/** How long a command's candidate rests before its preview is worked out. */
-const PREVIEW_SETTLE_MS = 150;
 let FigureEditor = class FigureEditor extends LitElement {
     constructor() {
         super(...arguments);
@@ -99,58 +88,36 @@ let FigureEditor = class FigureEditor extends LitElement {
         /** The part whose drawn section is open in the section editor (ADR-0100 §3.2), or null. */
         this.sectionEditing = null;
         this.lastContext = null;
-        /** The modeller's keys (`keys.ts`): undo, redo, duplicate, remove, back to the whole figure, the gizmo's modes. */
-        this.onKey = (e) => {
-            const view = this.session?.read();
-            if (!view || view.loading || view.saving || !view.context || !this.isConnected)
-                return;
-            /*
-             * The section editor open takes the keys for its own: Esc cancels it, Delete deletes a point, Ctrl+Z undoes a point.
-             * Heard here first, they deselected the part, deleted the part and undid the figure's last step (2026-09-30).
-             */
-            if (this.sectionEditing)
-                return;
-            const canvas = this.renderRoot.querySelector('figure-canvas');
-            const path = e.composedPath();
-            const action = keyActionOf({ key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey, target: path[0], inScene: !!canvas && path.includes(canvas) }, this.selected);
-            if (!action)
-                return;
-            e.preventDefault();
-            /*
-              The session's history is the only one. With the canvas focused the scene took Ctrl+Z as well, undoing on its own
-              board the last value the canvas had written -- which the canvas then told as a drag: an undo of a drag on a
-              part placed by a rule wrote the drag again (2026-09-25). Heard first (capture) and kept from the scene.
-            */
-            e.stopPropagation();
-            if (action === 'translate' || action === 'rotate' || action === 'scale')
-                canvas && this.useGizmo(action);
-            else if (action === 'undo')
-                view.canUndo && this.run(() => this.session.undo());
-            else if (action === 'redo')
-                view.canRedo && this.run(() => this.session.redo());
-            else if (action === 'duplicate')
-                this.duplicatePart(this.selected);
-            else if (action === 'remove')
-                this.removePart(this.selected);
-            else
-                this.selected = '';
-        };
-        this.foldedForWidth = false;
-        this.keptOpenByAuthor = false;
-        this.widthWatch = new ResizeObserver(([entry]) => this.fitPanesTo(entry.contentRect.width));
-        /**
-         * Refusals and notices go to the app's shared surfaces, as every screen's do (user, 2026-09-27: 「왜 모두가 사용하는
-         * notification 오류 표현 방법을 사용하지 않고」 · 「혹은 oxprompt 에서 확인하고 진행하던지」). A refusal with a way on --
-         * delete and fit the space again, narrow the range -- asks in the app's prompt and goes on when confirmed; any
-         * other refusal is the app's notification, which stays until it is closed.
-         */
-        this.toldViewError = '';
-        /*
-          Per model and per part, how far its properties panel was scrolled and which of its folds were open, so going back
-          to one finds it as it was left (designer 2026-09-27, B.1). The path stays held at the top, so a scroll kept cannot
-          hide which part the panel speaks of. Another model starts clean.
-        */
-        this.panelMemory = new Map();
+        this.commandPreview = new CommandPreview(this, {
+            session: () => this.session,
+            selected: () => this.selected,
+            shown: () => this.shown(),
+            formsInSight: () => this.middle === 'edit' && this.tab === 'properties',
+            said: error => this.said(error)
+        });
+        this.keys = new ModellerKeys(this, {
+            taking: () => {
+                const view = this.session?.read();
+                /*
+                 * The section editor open takes the keys for its own: Esc cancels it, Delete deletes a point, Ctrl+Z undoes a point.
+                 * Heard here first, they deselected the part, deleted the part and undid the figure's last step (2026-09-30).
+                 */
+                return !!view && !view.loading && !view.saving && !!view.context && this.isConnected && !this.sectionEditing;
+            },
+            scene: () => this.renderRoot.querySelector('figure-canvas'),
+            selected: () => this.selected,
+            act: action => this.keyAction(action)
+        });
+        this.paneFold = new PaneFold(this, () => this.panes);
+        this.refusals = new RefusalTeller({
+            session: () => this.session,
+            error: () => this.error,
+            notice: () => this.notice,
+            retry: () => this.retry,
+            refuse: message => (this.error = message),
+            command: action => this.linkCommand(action)
+        });
+        this.panelMemory = new PanelMemory(() => this.renderRoot);
         /** The preview is made when first asked for, and kept (hidden) after that; it is taken down with the editor. */
         this.previewMounted = false;
         this.lastAnchors = {};
@@ -163,310 +130,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     static { FigureEditor_1 = this; }
     /* The operato scrollbar, as every scrolling panel of the app has it -- the side panel scrolled with the browser's own. */
-    static { this.styles = [ScrollbarStyles, SidePanelStyles, css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-      height: 100%;
-      /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */
-      container-type: inline-size;
-      font: 13px sans-serif;
-      color: var(--md-sys-color-on-surface);
-    }
-    /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and
-       fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */
-    ox-canvas-bar button[mode] {
-      height: 28px;
-      padding: 0 10px;
-      border-radius: 999em;
-      border-color: transparent;
-      background: none;
-    }
-    ox-canvas-bar button[mode][aria-pressed='true'] {
-      border-color: var(--md-sys-color-primary);
-    }
-    /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */
-    ox-canvas-bar .gizmo-tools {
-      display: inline-flex;
-      gap: 2px;
-      padding-left: 4px;
-      border-left: 1px solid var(--md-sys-color-outline-variant);
-    }
-    ox-canvas-bar button[tool] {
-      display: inline-grid;
-      place-items: center;
-      width: 32px;
-      height: 32px;
-      padding: 0;
-      border: none;
-      border-radius: var(--md-sys-shape-corner-small, 8px);
-      background: transparent;
-      color: var(--md-sys-color-on-surface-variant);
-      cursor: pointer;
-    }
-    ox-canvas-bar button[tool]:hover:not(:disabled) {
-      background: var(--md-sys-color-surface-container-high);
-      color: var(--md-sys-color-on-surface);
-    }
-    ox-canvas-bar button[tool][aria-pressed='true'] {
-      background: var(--md-sys-color-secondary-container);
-      color: var(--md-sys-color-on-secondary-container);
-    }
-    ox-canvas-bar button[tool]:disabled {
-      opacity: 0.38;
-      cursor: default;
-    }
-    /*
-      Slotted into the bar from here, the tools do not get the bar's own icon size (20px, set inside its shadow): they
-      showed at md-icon's 24px, heavier than undo, redo and fit beside them. The same size, and the bar's focus ring.
-    */
-    ox-canvas-bar button[tool] md-icon {
-      --md-icon-size: 20px;
-    }
-    ox-canvas-bar button[tool]:focus-visible {
-      outline: 2px solid var(--md-sys-color-primary);
-      outline-offset: 1px;
-    }
-    figure-preview {
-      min-width: 0;
-      min-height: 0;
-    }
-    /* The edit canvas stays standing while the preview is in front (a 3D scene costs a third of a second to make), out of sight. */
-    div[middle][hidden] {
-      display: none;
-    }
-    /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */
-    figure-preview[hidden] {
-      display: none;
-    }
-    ox-canvas-bar .status {
-      padding: 0 8px;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-    ox-canvas-bar .status[dirty] {
-      color: var(--md-sys-color-primary);
-      font-weight: 600;
-    }
-    ox-canvas-bar button[save] {
-      height: 32px;
-      padding: 0 14px;
-      border: none;
-      border-radius: 999em;
-      color: var(--md-sys-color-on-primary);
-      background: var(--md-sys-color-primary);
-    }
-    /* The three panes are ox-three-pane's (ADR-0060 decision 8): widths 200 | 1fr | 340, 160 | 300 under
-       860px and one column with the middle first under 560px are the frame's, as are the dividers. */
-    ox-three-pane {
-      flex: 1;
-      min-height: 0;
-    }
-    figure-parts {
-      min-height: 0;
-    }
-    figure-canvas {
-      flex: 1;
-      min-width: 0;
-      min-height: 0;
-    }
-    div[middle] {
-      position: relative;
-      display: flex;
-      min-width: 0;
-      min-height: 0;
-    }
-    /* A new figure's first question, over the empty canvas. */
-    div[start] {
-      position: absolute;
-      inset: 50% auto auto 50%;
-      z-index: 10;
-      color: var(--md-sys-color-on-surface);
-      transform: translate(-50%, -50%);
-      width: min(440px, calc(100% - 32px));
-      box-sizing: border-box;
-      padding: 20px;
-      border-radius: 12px;
-      background: var(--md-sys-color-surface, #fff);
-      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
-    }
-    div[start] button[start-button] {
-      width: auto;
-      margin: 0;
-      font-size: var(--ui-t-body);
-      height: 36px;
-      padding: 0 16px;
-      border: 1px solid var(--md-sys-color-outline);
-      border-radius: 999em;
-      color: var(--md-sys-color-primary);
-      background: var(--md-sys-color-surface, #fff);
-      cursor: pointer;
-    }
-    div[start] button[start-button]:hover:not(:disabled) {
-      background: var(--md-sys-color-primary-container);
-    }
-    div[start] button[start-button][pressed] {
-      color: var(--md-sys-color-on-primary);
-      background: var(--md-sys-color-primary);
-      border-color: var(--md-sys-color-primary);
-    }
-    div[start] button[start-button]:disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-    div[start] h2 {
-      margin: 0 0 12px;
-      font-size: var(--ui-t-title);
-    }
-    div[start-paths] {
-      display: grid;
-      gap: 14px;
-    }
-    div[start-paths] h3 {
-      margin: 0 0 6px;
-      font-size: var(--ui-t-body);
-    }
-    div[start-shapes] {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-    div[start] small {
-      display: block;
-      margin-top: 4px;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-    /* The side: tabs over one panel at a time, each using the whole height. */
-    aside {
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-      background: var(--md-sys-color-surface-container-lowest);
-    }
-    div[tabs] {
-      display: flex;
-      flex: none;
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
-    }
-    button[tab] {
-      flex: 1;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 1px;
-      min-width: 0;
-      height: 48px;
-      padding: 0;
-      border: none;
-      border-radius: 0;
-      border-bottom: 2px solid transparent;
-      background: none;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-    button[tab]:hover:not([on]) {
-      background: var(--md-sys-color-surface-container);
-    }
-    button[tab][on] {
-      color: var(--md-sys-color-primary);
-      border-bottom-color: var(--md-sys-color-primary);
-    }
-    button[tab] md-icon {
-      font-size: 20px;
-      width: 20px;
-      height: 20px;
-    }
-    button[tab] span[tab-label] {
-      max-width: 100%;
-      overflow: hidden;
-      font-size: 0.66rem;
-      line-height: 1.2;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    span[badge] {
-      position: absolute;
-      top: 3px;
-      right: 2px;
-      padding: 0 5px;
-      font-size: 0.62rem;
-      font-weight: 700;
-      line-height: 1.5;
-      color: var(--md-sys-color-on-primary-container);
-      background: var(--md-sys-color-primary-container);
-      border-radius: 999em;
-      pointer-events: none;
-    }
-    /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */
-    div[panel] {
-      flex: 1;
-      min-height: 0;
-      overflow: auto;
-      padding: 0;
-    }
-    div[panel][flush] {
-      padding: 0;
-    }
-    /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */
-    [off] {
-      display: none !important;
-    }
-    /* Which part the panel speaks of. */
-    div[subject] {
-      position: sticky;
-      top: 0;
-      z-index: 1;
-      display: grid;
-      gap: 4px;
-      padding: 10px 12px;
-      background: var(--md-sys-color-surface-container-lowest);
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
-    }
-    /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */
-    div[subject-summary] {
-      display: grid;
-      gap: 2px;
-    }
-    div[subject-summary] b {
-      font-size: var(--ui-t-body, 13px);
-      font-weight: 600;
-    }
-    div[subject-summary] b span {
-      font-weight: 400;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-    div[subject-summary] small {
-      color: var(--md-sys-color-on-surface-variant);
-    }
-    button {
-      font: inherit;
-      box-sizing: border-box;
-      height: 32px;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-      background: var(--md-sys-color-surface);
-      color: inherit;
-      padding: 0 8px;
-      min-width: 0;
-    }
-    button {
-      cursor: pointer;
-    }
-    button:disabled {
-      opacity: 0.45;
-      cursor: default;
-    }
-    button[aria-pressed='true'] {
-      background: var(--md-sys-color-secondary-container);
-      color: var(--md-sys-color-on-secondary-container);
-      border-color: var(--md-sys-color-primary);
-    }
-    .hint {
-      color: var(--md-sys-color-on-surface-variant);
-      line-height: 1.5;
-    }
-  `]; }
+    static { this.styles = [ScrollbarStyles, SidePanelStyles, EditorStyles]; }
     static storedView() {
         try {
             const stored = JSON.parse(localStorage.getItem('figure-view') ?? 'null');
@@ -510,115 +174,21 @@ let FigureEditor = class FigureEditor extends LitElement {
         </button>`)}
     </span>`;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener('keydown', this.onKey, true);
-        this.widthWatch.observe(this);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('keydown', this.onKey, true);
-        this.widthWatch.disconnect();
-        clearTimeout(this.previewTimer);
-        clearTimeout(this.detachTimer);
-        super.disconnectedCallback();
-    }
-    /*
-      Narrow, the parts list gives way to the canvas rather than all three shrinking (designer 2026-09-27, U11): under
-      FOLD_START_UNDER px the canvas would be left under about 560 px beside both sides. The fold is said once, and the
-      bar's own toggle opens it again; opened by the author, it is not folded again until the screen has been wide.
-      Said once in this browser, not on every opening (2026-10-02): the list folds as before, the notice does not come back.
-    */
-    static { this.FOLD_START_UNDER = 1100; }
-    fitPanesTo(width) {
-        const panes = this.panes;
-        if (!panes || !width)
-            return;
-        if (this.foldedForWidth && !panes.foldStart)
-            this.keptOpenByAuthor = true;
-        if (width < FigureEditor_1.FOLD_START_UNDER) {
-            if (!panes.foldStart && !this.keptOpenByAuthor) {
-                panes.foldStart = true;
-                this.foldedForWidth = true;
-                if (!foldSaid())
-                    notify({ level: 'info', message: i18next.t('figure.text.parts-panel-folded-narrow') });
-            }
-        }
-        else {
-            if (this.foldedForWidth && panes.foldStart)
-                panes.foldStart = false;
-            this.foldedForWidth = false;
-            this.keptOpenByAuthor = false;
-        }
-    }
-    tell(changed) {
-        if (changed.has('error') && this.error) {
-            const retry = this.retry;
-            if (retry)
-                this.ask(this.error, retry);
-            else
-                notify({ level: 'error', message: this.error });
-        }
-        if (changed.has('notice') && this.notice)
-            notify({ level: 'info', message: this.notice });
-        const viewError = this.session?.read()?.error ?? '';
-        if (viewError && viewError !== this.toldViewError)
-            notify({ level: 'error', message: viewError });
-        this.toldViewError = viewError;
-    }
-    /*
-      An edit that would stop clips is refused by figure-model with the clips named (CLIPS_DROPPED). The person is told
-      which, and why, before anything is written; agreed, the same edit is made again letting exactly those go, as one
-      step undo brings back (designer 2026-09-27).
-    */
-    askClipLoss(error, again) {
-        if (error?.code !== 'CLIPS_DROPPED')
-            return false;
-        const clips = error.clips;
-        /* The consent is for this edit, on this figure as it is now: held with it while the person reads. */
-        const session = this.session;
-        const { context, revision } = session.read();
-        void this.confirmClipLoss(clips, again, { session, context: context, revision: revision });
-        return true;
-    }
-    async confirmClipLoss(clips, again, asked) {
-        const agreed = await OxPrompt.open({
-            type: 'warning',
-            text: i18next.t('figure.text.clips-would-go', { clips: clips.map(c => i18next.t(`figure.text.clip-${c.why}`, { clip: c.clip })).join(', ') }),
-            confirmButton: { text: i18next.t('figure.button.let-clips-go') },
-            cancelButton: { text: i18next.t('figure.button.keep-editing') }
-        });
-        if (!agreed)
-            return;
-        /* Changed while the person read -- another figure, or an edit in between: the consent was not for this; nothing is applied. */
-        const now = this.session === asked.session ? asked.session.read() : undefined;
-        if (!now || now.context !== asked.context || now.revision !== asked.revision) {
-            this.error = i18next.t('figure.text.clips-consent-stale');
-            return;
-        }
-        asked.session.withConsent({ dropClips: clips.map(c => c.id), context: asked.context, revision: asked.revision }, again);
-    }
-    async ask(message, retry) {
-        const agreed = await OxPrompt.open({
-            type: 'question',
-            text: message,
-            confirmButton: { text: retry.label },
-            cancelButton: { text: i18next.t('figure.button.keep-editing') }
-        });
-        if (!agreed)
-            return;
-        if (retry.run)
-            retry.run();
+    keyAction(action) {
+        const view = this.session.read();
+        const canvas = this.renderRoot.querySelector('figure-canvas');
+        if (action === 'translate' || action === 'rotate' || action === 'scale')
+            canvas && this.useGizmo(action);
+        else if (action === 'undo')
+            view.canUndo && this.run(() => this.session.undo());
+        else if (action === 'redo')
+            view.canRedo && this.run(() => this.session.redo());
+        else if (action === 'duplicate')
+            this.duplicatePart(this.selected);
+        else if (action === 'remove')
+            this.removePart(this.selected);
         else
-            this.linkCommand(retry.action);
-    }
-    propertiesPanel() {
-        return this.renderRoot.querySelector('div[panel]');
-    }
-    foldsOf(panel) {
-        const folds = [...panel.querySelectorAll('details')];
-        for (const inner of panel.querySelectorAll('figure-links'))
-            folds.push(...(inner.shadowRoot?.querySelectorAll('details') ?? []));
-        return folds;
+            this.selected = '';
     }
     willUpdate(_changed) {
         if (this.middle === 'preview')
@@ -632,11 +202,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.panelMemory.clear();
         }
         else if (_changed.has('selected')) {
-            const panel = this.propertiesPanel();
-            const was = _changed.get('selected') ?? '';
-            if (panel)
-                this.panelMemory.set(was || '@model', { top: panel.scrollTop, open: this.foldsOf(panel).map(d => d.open) });
-            this.restorePanelFor = this.selected || '@model';
+            this.panelMemory.leave(_changed.get('selected') ?? '', this.selected);
         }
         if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected))
             this.selected = '';
@@ -697,7 +263,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.changed();
         }
         catch (error) {
-            if (this.askClipLoss(error, () => this.run(action)))
+            if (this.refusals.askClipLoss(error, () => this.run(action)))
                 return;
             this.error = this.said(error);
         }
@@ -859,7 +425,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.changed();
         }
         catch (error) {
-            if (this.askClipLoss(error, () => this.removePart(id, refitRoom)))
+            if (this.refusals.askClipLoss(error, () => this.removePart(id, refitRoom)))
                 return;
             /*
               A part in the declared space goes, and the space is fitted to the parts left, in the same click: every space
@@ -1150,15 +716,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.error = partNameRefusalOf(error, (key, params) => i18next.t(key, params)) ?? this.said(error);
         }
     }
-    previewWordsNow() {
-        const preview = this.currentPreview();
-        const language = i18next.language;
-        if (this.previewWordsSaid && this.previewWordsSaid.preview === preview && this.previewWordsSaid.part === this.selected && this.previewWordsSaid.language === language)
-            return this.previewWordsSaid.words;
-        const words = previewWordsOf(preview, this.selected, (key, params) => i18next.t(key, params));
-        this.previewWordsSaid = { preview, part: this.selected, language, words };
-        return words;
-    }
+    /** Size response, fastening and motion for the selected part, as authoring commands. */
     renderLinks(unavailable, section) {
         const shown = this.shown();
         if (!shown)
@@ -1169,13 +727,13 @@ let FigureEditor = class FigureEditor extends LitElement {
       .partId=${this.selected}
       ?locked=${unavailable}
       @command=${(e) => this.linkCommand(e.detail.action)}
-      .previewWords=${this.previewWordsNow()}
-      .detachWords=${this.detachWords(shown)}
+      .previewWords=${this.commandPreview.words()}
+      .detachWords=${this.commandPreview.detachWords(shown)}
       .overhangWords=${section === 'shape' ? this.overhangOf(shown).words : NO_WORDS}
       .overhangNote=${section === 'shape' ? this.overhangOf(shown).note : NO_WORDS}
       .motionEnds=${section === 'motion' ? this.motionEnds() : null}
       @go-fasten=${() => this.goFasten()}
-      @preview-command=${(e) => this.previewCommand(e.detail)}
+      @preview-command=${(e) => this.commandPreview.ask(e.detail)}
       @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
     ></figure-links>`;
     }
@@ -1256,7 +814,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             return true;
         }
         catch (error) {
-            if (this.askClipLoss(error, () => this.linkCommand(action, from)))
+            if (this.refusals.askClipLoss(error, () => this.linkCommand(action, from)))
                 return false;
             const code = error?.code;
             /* Something stands on a face this takes away: ask where it goes, there, rather than only saying no. */
@@ -1657,115 +1215,6 @@ let FigureEditor = class FigureEditor extends LitElement {
             return i18next.t('figure.text.release-state-released', { version: String(version) });
         return version > 0 ? i18next.t('figure.text.release-state-draft-over', { version: String(version) }) : i18next.t('figure.text.release-state-draft-new');
     }
-    previewCommand(candidate) {
-        clearTimeout(this.previewTimer);
-        if (!candidate || !this.session || !this.selected) {
-            this.preview = undefined;
-            return;
-        }
-        const view = this.session.read();
-        const key = JSON.stringify(candidate);
-        const same = this.preview && this.preview.key === key && this.preview.context === view.context && this.preview.part === this.selected && 'revision' in this.preview && this.preview.revision === view.revision;
-        if (same)
-            return;
-        /*
-          What another command would do is not said of this one while this one is worked out: a row's pitch refused stayed
-          on screen for the count chosen after it (:3300, 2026-10-11).
-        */
-        if (this.preview && this.preview.key !== key)
-            this.preview = undefined;
-        this.previewTimer = setTimeout(() => this.computePreview(candidate), PREVIEW_SETTLE_MS);
-    }
-    computePreview(candidate) {
-        if (!this.session || !this.selected)
-            return;
-        const view = this.session.read();
-        const held = { context: view.context, revision: view.revision, key: JSON.stringify(candidate), part: this.selected };
-        try {
-            const seen = this.session.previewCommand(candidate.action);
-            let face;
-            if (candidate.face) {
-                try {
-                    const shown = this.shown();
-                    face = figurePartFaceOf(shown.asset, candidate.face.part, candidate.face.face, shown.inputs);
-                }
-                catch {
-                    face = undefined;
-                }
-            }
-            /* A row is read on the figure the command would make, by figure-model, as drawn. */
-            const row = candidate.action.kind === 'make-repeat' ? figureRowOf(seen.asset, this.selected, this.shown().inputs) : undefined;
-            this.preview = {
-                ...held,
-                context: seen.context,
-                revision: seen.revision,
-                geometry: seen.geometry,
-                moves: seen.moves,
-                added: seen.added,
-                ...(row ? { row } : {}),
-                clipsWouldGo: seen.clipsWouldGo,
-                face,
-                faceUnknown: !!candidate.face && !face
-            };
-        }
-        catch (error) {
-            /* Refused: nothing of an earlier result stays on screen, and the reason is said. */
-            this.preview = { ...held, refused: this.said(error) };
-        }
-    }
-    /** The preview, while it still speaks of what is on screen: this figure, this version, this part. */
-    currentPreview() {
-        const p = this.preview;
-        const view = this.session?.read();
-        /* Only where its form is: the properties panel stays in the page on another tab, and did not clear it (2026-09-27, :3391). */
-        if (!p || !view || p.context !== view.context || p.revision !== view.revision || p.part !== this.selected || this.middle !== 'edit' || this.tab !== 'properties')
-            return undefined;
-        return p;
-    }
-    /**
-     * Said once the figure has rested: working it out is a preview of the command on a copy (tens of milliseconds), and the
-     * edit that made this version should be on screen before it. Until then nothing is said, as for a part with no joint.
-     */
-    detachWords(shown) {
-        const part = this.selected;
-        if (!this.session || !shown.asset.joints?.some(j => j.body1.part === part))
-            return NO_WORDS;
-        const key = `detach|${part}`;
-        const said = derivedHeld(shown, key);
-        if (said)
-            return said;
-        if (this.detachAsked?.shown !== shown || this.detachAsked.part !== part) {
-            this.detachAsked = { shown, part };
-            clearTimeout(this.detachTimer);
-            this.detachTimer = setTimeout(() => {
-                if (this.shown() !== shown || this.selected !== part)
-                    return;
-                derivedOf(shown, key, () => this.computeDetachWords(shown, part));
-                this.requestUpdate();
-            }, PREVIEW_SETTLE_MS);
-        }
-        return NO_WORDS;
-    }
-    computeDetachWords(shown, part) {
-        const say = (k, params) => i18next.t(k, params);
-        let words;
-        try {
-            const seen = this.session.previewCommand({ kind: 'detach', part });
-            const own = seen.moves.some(m => m.body === part);
-            words = own
-                ? [say('figure.text.detach-moves'), ...previewWordsOf({ context: seen.context, revision: seen.revision, key: `detach|${part}`, moves: seen.moves }, part, say)]
-                : /* It stays where it is: as expected, so nothing is said (user 2026-10-01). */ [];
-            const children = (shown.asset.joints ?? []).filter(j => 'part' in j.body0 && j.body0.part === part).map(j => partLabelOf(j.body1.part));
-            if (children.length)
-                words.push(say('figure.text.detach-keeps-children', { parts: children.join(', ') }));
-            if (seen.clipsWouldGo.length)
-                words.push(say('figure.text.detach-clips', { clips: seen.clipsWouldGo.map(c => c.clip).join(', ') }));
-        }
-        catch (error) {
-            words = [say('figure.text.detach-refused', { reason: this.said(error) })];
-        }
-        return words;
-    }
     /*
       Past the edge of the face a part is fastened to (ADR-0097 §5.5, Q3): the selected part's own, and the parts fastened
       to it -- said apart from the room, nothing moved. Read once per version, part and language. The note says it is wider
@@ -1830,15 +1279,11 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     /** What the canvas draws of it, made once per preview: a new list every render would stand the board up each time. */
     previewShown() {
-        const p = this.currentPreview();
+        const p = this.commandPreview.current();
         /* On the motion tab, with nothing being tried: where the selected part's motion takes it, at both ends. */
         if (!p && this.tab === 'motion' && this.middle === 'edit')
             return { ghost: this.motionEnds()?.ghost ?? [], highlight: null };
-        if (!p || p.refused)
-            return { ghost: [], highlight: null };
-        if (this.previewDrawn?.of !== p)
-            this.previewDrawn = { of: p, ghost: ghostPartsOf(p), highlight: faceHighlightOf(p.face) };
-        return this.previewDrawn;
+        return this.commandPreview.drawnOf(p);
     }
     /**
      * What the author has in view, for the AI dock to hear with a request (ADR-0097 §5.6 item 5): the part selected and
@@ -1881,25 +1326,12 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     updated(changed) {
         super.updated?.(changed);
-        this.tell(changed);
-        if (this.restorePanelFor !== undefined) {
-            const key = this.restorePanelFor;
-            this.restorePanelFor = undefined;
-            requestAnimationFrame(async () => {
-                const panel = this.propertiesPanel();
-                if (!panel || (this.selected || '@model') !== key)
-                    return;
-                await Promise.all([...panel.querySelectorAll('figure-links')].map(el => el.updateComplete));
-                const kept = this.panelMemory.get(key);
-                if (kept)
-                    this.foldsOf(panel).forEach((fold, i) => i < kept.open.length && (fold.open = kept.open[i]));
-                panel.scrollTop = kept?.top ?? 0;
-            });
-        }
+        this.refusals.tell(changed);
+        this.panelMemory.restore(() => this.selected);
         const panes = this.renderRoot.querySelector('ox-three-pane') ?? undefined;
         if (panes !== this.panes) {
             this.panes = panes;
-            this.fitPanesTo(this.getBoundingClientRect().width);
+            this.paneFold.fitTo(this.getBoundingClientRect().width);
         }
     }
     /**
@@ -2508,10 +1940,6 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureEditor.prototype, "sectionEditing", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureEditor.prototype, "preview", void 0);
 FigureEditor = FigureEditor_1 = __decorate([
     customElement('figure-editor')
 ], FigureEditor);