@things-factory/figure-ui 10.1.152 → 10.1.153

package/dist-client/modeller/command-preview-controller.js

@@ -0,0 +1,178 @@
+import { i18next } from '@operato/i18n';
+import { figurePartFaceOf, figureRowOf } from '@hatiolab/figure-model';
+import { faceHighlightOf, ghostPartsOf, previewWordsOf } from './command-preview.js';
+import { partLabelOf } from './fields.js';
+import { derivedHeld, derivedOf } from './revision.js';
+/** The words a panel is given when there are none: one array, so it does not read as a change. */
+export const NO_WORDS = [];
+/** How long a command's candidate rests before its preview is worked out. */
+const PREVIEW_SETTLE_MS = 150;
+/**
+ * A command seen before it is done (ADR-0097 §5.5): worked out on a copy for the figure, version, part and command it
+ * names, and shown only while all four are still the ones on screen. Nothing of it is saved or undone. And what taking
+ * the selected part off would do, worked out the same way. Both wait for the figure to rest; the editor taken down
+ * stops both.
+ */
+export class CommandPreview {
+    constructor(host, of) {
+        this.host = host;
+        this.of = of;
+        host.addController(this);
+    }
+    hostConnected() { }
+    hostDisconnected() {
+        clearTimeout(this.previewTimer);
+        clearTimeout(this.detachTimer);
+    }
+    /** Drawn again only when it is another preview, as a state of the editor would be. */
+    hold(preview) {
+        if (preview === this.preview)
+            return;
+        this.preview = preview;
+        this.host.requestUpdate();
+    }
+    /**
+     * The fastening form's command, seen before it is done; null clears what was shown. What a command would do is worked
+     * out on a copy of the figure -- several compiles of it -- so it waits for the field to rest: a number typed digit by
+     * digit asks once, for the number it ends on. Clearing is at once, and the same question on the same version is not
+     * asked again.
+     */
+    ask(candidate) {
+        clearTimeout(this.previewTimer);
+        const session = this.of.session();
+        const selected = this.of.selected();
+        if (!candidate || !session || !selected) {
+            this.hold(undefined);
+            return;
+        }
+        const view = session.read();
+        const key = JSON.stringify(candidate);
+        const same = this.preview &&
+            this.preview.key === key &&
+            this.preview.context === view.context &&
+            this.preview.part === 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.hold(undefined);
+        this.previewTimer = setTimeout(() => this.compute(candidate), PREVIEW_SETTLE_MS);
+    }
+    compute(candidate) {
+        const session = this.of.session();
+        const selected = this.of.selected();
+        if (!session || !selected)
+            return;
+        const view = session.read();
+        const held = { context: view.context, revision: view.revision, key: JSON.stringify(candidate), part: selected };
+        try {
+            const seen = session.previewCommand(candidate.action);
+            let face;
+            if (candidate.face) {
+                try {
+                    const shown = this.of.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, selected, this.of.shown().inputs) : undefined;
+            this.hold({
+                ...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.hold({ ...held, refused: this.of.said(error) });
+        }
+    }
+    /** The preview, while it still speaks of what is on screen: this figure, this version, this part. */
+    current() {
+        const p = this.preview;
+        const view = this.of.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.of.selected() || !this.of.formsInSight())
+            return undefined;
+        return p;
+    }
+    /** What the preview says, the same array while it says the same thing. */
+    words() {
+        const preview = this.current();
+        const selected = this.of.selected();
+        const language = i18next.language;
+        if (this.wordsSaid && this.wordsSaid.preview === preview && this.wordsSaid.part === selected && this.wordsSaid.language === language)
+            return this.wordsSaid.words;
+        const words = previewWordsOf(preview, selected, (key, params) => i18next.t(key, params));
+        this.wordsSaid = { preview, part: selected, language, words };
+        return words;
+    }
+    /** What the canvas draws of a preview, made once per preview: a new list every render would stand the board up each time. */
+    drawnOf(p) {
+        if (!p || p.refused)
+            return { ghost: [], highlight: null };
+        if (this.drawn?.of !== p)
+            this.drawn = { of: p, ghost: ghostPartsOf(p), highlight: faceHighlightOf(p.face) };
+        return this.drawn;
+    }
+    /**
+     * 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.of.selected();
+        if (!this.of.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.of.shown() !== shown || this.of.selected() !== part)
+                    return;
+                derivedOf(shown, key, () => this.computeDetachWords(shown, part));
+                this.host.requestUpdate();
+            }, PREVIEW_SETTLE_MS);
+        }
+        return NO_WORDS;
+    }
+    computeDetachWords(shown, part) {
+        const say = (k, params) => i18next.t(k, params);
+        let words;
+        try {
+            const seen = this.of.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.of.said(error) })];
+        }
+        return words;
+    }
+}
+//# sourceMappingURL=command-preview-controller.js.map

package/dist-client/modeller/command-preview-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-preview-controller.js","sourceRoot":"","sources":["../../client/modeller/command-preview-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { i18next } from '@operato/i18n'\nimport { figurePartFaceOf, figureRowOf, type FigureAuthoringAction, type FigureFaceArea } from '@hatiolab/figure-model'\nimport { faceHighlightOf, ghostPartsOf, previewWordsOf, type HeldPreview } from './command-preview.js'\nimport { partLabelOf } from './fields.js'\nimport type { FigureProductSession } from './product-session.js'\nimport type { FigureRenderPart } from './renderer.js'\nimport { derivedHeld, derivedOf, type FigureRevision } from './revision.js'\n\n/** The words a panel is given when there are none: one array, so it does not read as a change. */\nexport const NO_WORDS: string[] = []\n\n/** How long a command's candidate rests before its preview is worked out. */\nconst PREVIEW_SETTLE_MS = 150\n\n/** A command a form is trying, with the face it names when it names one. */\nexport type PreviewCandidate = { action: FigureAuthoringAction; face?: { part: string; face: string } }\n\n/** What the preview reads of the editor. */\nexport interface CommandPreviewHost {\n  session(): FigureProductSession | undefined\n  selected(): string\n  /** The figure on screen at its version (`revision.ts`). */\n  shown(): FigureRevision | undefined\n  /** Whether the properties panel, where the forms are, is in sight: the edit middle, the properties tab. */\n  formsInSight(): boolean\n  /** A refusal in the person's words. */\n  said(error: unknown): string\n}\n\n/**\n * A command seen before it is done (ADR-0097 §5.5): worked out on a copy for the figure, version, part and command it\n * names, and shown only while all four are still the ones on screen. Nothing of it is saved or undone. And what taking\n * the selected part off would do, worked out the same way. Both wait for the figure to rest; the editor taken down\n * stops both.\n */\nexport class CommandPreview implements ReactiveController {\n  private preview?: HeldPreview & { part: string }\n  private drawn?: { of: HeldPreview; ghost: FigureRenderPart[]; highlight: FigureRenderPart | null }\n  /*\n    What a panel is handed is the same object while it says the same thing: a new array each render reads as a change to\n    the panel, which draws itself again for nothing (sixteen times for one edit).\n  */\n  private wordsSaid?: { preview: unknown; part: string; language: string; words: string[] }\n  private previewTimer?: ReturnType<typeof setTimeout>\n  /*\n    What taking the selected part off would do, worked out on a copy before the button is pressed (ADR-0097 §5.5): whether\n    it stays where it stands now, what stays fastened to it, which clips would go. \"It stays where it is\" is said only\n    when the copy shows it does.\n  */\n  private detachTimer?: ReturnType<typeof setTimeout>\n  private detachAsked?: { shown: FigureRevision; part: string }\n\n  constructor(\n    private readonly host: ReactiveControllerHost,\n    private readonly of: CommandPreviewHost\n  ) {\n    host.addController(this)\n  }\n\n  hostConnected() {}\n\n  hostDisconnected() {\n    clearTimeout(this.previewTimer)\n    clearTimeout(this.detachTimer)\n  }\n\n  /** Drawn again only when it is another preview, as a state of the editor would be. */\n  private hold(preview: (HeldPreview & { part: string }) | undefined) {\n    if (preview === this.preview) return\n    this.preview = preview\n    this.host.requestUpdate()\n  }\n\n  /**\n   * The fastening form's command, seen before it is done; null clears what was shown. What a command would do is worked\n   * out on a copy of the figure -- several compiles of it -- so it waits for the field to rest: a number typed digit by\n   * digit asks once, for the number it ends on. Clearing is at once, and the same question on the same version is not\n   * asked again.\n   */\n  ask(candidate: PreviewCandidate | null) {\n    clearTimeout(this.previewTimer)\n    const session = this.of.session()\n    const selected = this.of.selected()\n    if (!candidate || !session || !selected) {\n      this.hold(undefined)\n      return\n    }\n    const view = session.read()\n    const key = JSON.stringify(candidate)\n    const same =\n      this.preview &&\n      this.preview.key === key &&\n      this.preview.context === view.context &&\n      this.preview.part === selected &&\n      'revision' in this.preview &&\n      this.preview.revision === view.revision\n    if (same) return\n    /*\n      What another command would do is not said of this one while this one is worked out: a row's pitch refused stayed\n      on screen for the count chosen after it (:3300, 2026-10-11).\n    */\n    if (this.preview && this.preview.key !== key) this.hold(undefined)\n    this.previewTimer = setTimeout(() => this.compute(candidate), PREVIEW_SETTLE_MS)\n  }\n\n  private compute(candidate: PreviewCandidate) {\n    const session = this.of.session()\n    const selected = this.of.selected()\n    if (!session || !selected) return\n    const view = session.read()\n    const held = { context: view.context!, revision: view.revision!, key: JSON.stringify(candidate), part: selected }\n    try {\n      const seen = session.previewCommand(candidate.action)\n      let face: FigureFaceArea | undefined\n      if (candidate.face) {\n        try {\n          const shown = this.of.shown()!\n          face = figurePartFaceOf(shown.asset, candidate.face.part, candidate.face.face, shown.inputs)\n        } catch {\n          face = undefined\n        }\n      }\n      /* A row is read on the figure the command would make, by figure-model, as drawn. */\n      const row = candidate.action.kind === 'make-repeat' ? figureRowOf(seen.asset, selected, this.of.shown()!.inputs) : undefined\n      this.hold({\n        ...held,\n        context: seen.context,\n        revision: seen.revision,\n        geometry: seen.geometry,\n        moves: seen.moves,\n        added: seen.added,\n        ...(row ? { row } : {}),\n        clipsWouldGo: seen.clipsWouldGo,\n        face,\n        faceUnknown: !!candidate.face && !face\n      })\n    } catch (error) {\n      /* Refused: nothing of an earlier result stays on screen, and the reason is said. */\n      this.hold({ ...held, refused: this.of.said(error) })\n    }\n  }\n\n  /** The preview, while it still speaks of what is on screen: this figure, this version, this part. */\n  current(): (HeldPreview & { part: string }) | undefined {\n    const p = this.preview\n    const view = this.of.session()?.read()\n    /* Only where its form is: the properties panel stays in the page on another tab, and did not clear it (2026-09-27, :3391). */\n    if (!p || !view || p.context !== view.context || p.revision !== view.revision || p.part !== this.of.selected() || !this.of.formsInSight()) return undefined\n    return p\n  }\n\n  /** What the preview says, the same array while it says the same thing. */\n  words(): string[] {\n    const preview = this.current()\n    const selected = this.of.selected()\n    const language = i18next.language\n    if (this.wordsSaid && this.wordsSaid.preview === preview && this.wordsSaid.part === selected && this.wordsSaid.language === language) return this.wordsSaid.words\n    const words = previewWordsOf(preview, selected, (key, params) => i18next.t(key, params))\n    this.wordsSaid = { preview, part: selected, language, words }\n    return words\n  }\n\n  /** What the canvas draws of a preview, made once per preview: a new list every render would stand the board up each time. */\n  drawnOf(p: (HeldPreview & { part: string }) | undefined): { ghost: FigureRenderPart[]; highlight: FigureRenderPart | null } {\n    if (!p || p.refused) return { ghost: [], highlight: null }\n    if (this.drawn?.of !== p) this.drawn = { of: p, ghost: ghostPartsOf(p), highlight: faceHighlightOf(p.face) }\n    return this.drawn\n  }\n\n  /**\n   * Said once the figure has rested: working it out is a preview of the command on a copy (tens of milliseconds), and the\n   * edit that made this version should be on screen before it. Until then nothing is said, as for a part with no joint.\n   */\n  detachWords(shown: FigureRevision): string[] {\n    const part = this.of.selected()\n    if (!this.of.session() || !shown.asset.joints?.some(j => j.body1.part === part)) return NO_WORDS\n    const key = `detach|${part}`\n    const said = derivedHeld<string[]>(shown, key)\n    if (said) return said\n    if (this.detachAsked?.shown !== shown || this.detachAsked.part !== part) {\n      this.detachAsked = { shown, part }\n      clearTimeout(this.detachTimer)\n      this.detachTimer = setTimeout(() => {\n        if (this.of.shown() !== shown || this.of.selected() !== part) return\n        derivedOf(shown, key, () => this.computeDetachWords(shown, part))\n        this.host.requestUpdate()\n      }, PREVIEW_SETTLE_MS)\n    }\n    return NO_WORDS\n  }\n\n  private computeDetachWords(shown: FigureRevision, part: string): string[] {\n    const say = (k: string, params?: Record<string, string>) => i18next.t(k, params)\n    let words: string[]\n    try {\n      const seen = this.of.session()!.previewCommand({ kind: 'detach', part })\n      const own = seen.moves.some(m => m.body === part)\n      words = own\n        ? [say('figure.text.detach-moves'), ...previewWordsOf({ context: seen.context, revision: seen.revision, key: `detach|${part}`, moves: seen.moves }, part, say)]\n        : /* It stays where it is: as expected, so nothing is said (user 2026-10-01). */ []\n      const children = (shown.asset.joints ?? []).filter(j => 'part' in j.body0 && j.body0.part === part).map(j => partLabelOf(j.body1.part))\n      if (children.length) words.push(say('figure.text.detach-keeps-children', { parts: children.join(', ') }))\n      if (seen.clipsWouldGo.length) words.push(say('figure.text.detach-clips', { clips: seen.clipsWouldGo.map(c => c.clip).join(', ') }))\n    } catch (error) {\n      words = [say('figure.text.detach-refused', { reason: this.of.said(error) })]\n    }\n    return words\n  }\n}\n"]}

package/dist-client/modeller/editor-styles.d.ts

@@ -0,0 +1,2 @@
+/** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */
+export declare const EditorStyles: import("lit").CSSResult;

package/dist-client/modeller/editor-styles.js

@@ -0,0 +1,307 @@
+import { css } from 'lit';
+/** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */
+export const EditorStyles = 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;
+  }
+`;
+//# sourceMappingURL=editor-styles.js.map

package/dist-client/modeller/editor-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-styles.js","sourceRoot":"","sources":["../../client/modeller/editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,gHAAgH;AAChH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+S9B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */\nexport const EditorStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */\n    container-type: inline-size;\n    font: 13px sans-serif;\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and\n     fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */\n  ox-canvas-bar button[mode] {\n    height: 28px;\n    padding: 0 10px;\n    border-radius: 999em;\n    border-color: transparent;\n    background: none;\n  }\n  ox-canvas-bar button[mode][aria-pressed='true'] {\n    border-color: var(--md-sys-color-primary);\n  }\n  /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */\n  ox-canvas-bar .gizmo-tools {\n    display: inline-flex;\n    gap: 2px;\n    padding-left: 4px;\n    border-left: 1px solid var(--md-sys-color-outline-variant);\n  }\n  ox-canvas-bar button[tool] {\n    display: inline-grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant);\n    cursor: pointer;\n  }\n  ox-canvas-bar button[tool]:hover:not(:disabled) {\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface);\n  }\n  ox-canvas-bar button[tool][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n  ox-canvas-bar button[tool]:disabled {\n    opacity: 0.38;\n    cursor: default;\n  }\n  /*\n    Slotted into the bar from here, the tools do not get the bar's own icon size (20px, set inside its shadow): they\n    showed at md-icon's 24px, heavier than undo, redo and fit beside them. The same size, and the bar's focus ring.\n  */\n  ox-canvas-bar button[tool] md-icon {\n    --md-icon-size: 20px;\n  }\n  ox-canvas-bar button[tool]:focus-visible {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: 1px;\n  }\n  figure-preview {\n    min-width: 0;\n    min-height: 0;\n  }\n  /* 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. */\n  div[middle][hidden] {\n    display: none;\n  }\n  /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */\n  figure-preview[hidden] {\n    display: none;\n  }\n  ox-canvas-bar .status {\n    padding: 0 8px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  ox-canvas-bar .status[dirty] {\n    color: var(--md-sys-color-primary);\n    font-weight: 600;\n  }\n  ox-canvas-bar button[save] {\n    height: 32px;\n    padding: 0 14px;\n    border: none;\n    border-radius: 999em;\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n  }\n  /* The three panes are ox-three-pane's (ADR-0060 decision 8): widths 200 | 1fr | 340, 160 | 300 under\n     860px and one column with the middle first under 560px are the frame's, as are the dividers. */\n  ox-three-pane {\n    flex: 1;\n    min-height: 0;\n  }\n  figure-parts {\n    min-height: 0;\n  }\n  figure-canvas {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n  }\n  div[middle] {\n    position: relative;\n    display: flex;\n    min-width: 0;\n    min-height: 0;\n  }\n  /* A new figure's first question, over the empty canvas. */\n  div[start] {\n    position: absolute;\n    inset: 50% auto auto 50%;\n    z-index: 10;\n    color: var(--md-sys-color-on-surface);\n    transform: translate(-50%, -50%);\n    width: min(440px, calc(100% - 32px));\n    box-sizing: border-box;\n    padding: 20px;\n    border-radius: 12px;\n    background: var(--md-sys-color-surface, #fff);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);\n  }\n  div[start] button[start-button] {\n    width: auto;\n    margin: 0;\n    font-size: var(--ui-t-body);\n    height: 36px;\n    padding: 0 16px;\n    border: 1px solid var(--md-sys-color-outline);\n    border-radius: 999em;\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface, #fff);\n    cursor: pointer;\n  }\n  div[start] button[start-button]:hover:not(:disabled) {\n    background: var(--md-sys-color-primary-container);\n  }\n  div[start] button[start-button][pressed] {\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n    border-color: var(--md-sys-color-primary);\n  }\n  div[start] button[start-button]:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  div[start] h2 {\n    margin: 0 0 12px;\n    font-size: var(--ui-t-title);\n  }\n  div[start-paths] {\n    display: grid;\n    gap: 14px;\n  }\n  div[start-paths] h3 {\n    margin: 0 0 6px;\n    font-size: var(--ui-t-body);\n  }\n  div[start-shapes] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  div[start] small {\n    display: block;\n    margin-top: 4px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /* The side: tabs over one panel at a time, each using the whole height. */\n  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    background: var(--md-sys-color-surface-container-lowest);\n  }\n  div[tabs] {\n    display: flex;\n    flex: none;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  button[tab] {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 1px;\n    min-width: 0;\n    height: 48px;\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    border-bottom: 2px solid transparent;\n    background: none;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  button[tab]:hover:not([on]) {\n    background: var(--md-sys-color-surface-container);\n  }\n  button[tab][on] {\n    color: var(--md-sys-color-primary);\n    border-bottom-color: var(--md-sys-color-primary);\n  }\n  button[tab] md-icon {\n    font-size: 20px;\n    width: 20px;\n    height: 20px;\n  }\n  button[tab] span[tab-label] {\n    max-width: 100%;\n    overflow: hidden;\n    font-size: 0.66rem;\n    line-height: 1.2;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  span[badge] {\n    position: absolute;\n    top: 3px;\n    right: 2px;\n    padding: 0 5px;\n    font-size: 0.62rem;\n    font-weight: 700;\n    line-height: 1.5;\n    color: var(--md-sys-color-on-primary-container);\n    background: var(--md-sys-color-primary-container);\n    border-radius: 999em;\n    pointer-events: none;\n  }\n  /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */\n  div[panel] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding: 0;\n  }\n  div[panel][flush] {\n    padding: 0;\n  }\n  /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */\n  [off] {\n    display: none !important;\n  }\n  /* Which part the panel speaks of. */\n  div[subject] {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    display: grid;\n    gap: 4px;\n    padding: 10px 12px;\n    background: var(--md-sys-color-surface-container-lowest);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */\n  div[subject-summary] {\n    display: grid;\n    gap: 2px;\n  }\n  div[subject-summary] b {\n    font-size: var(--ui-t-body, 13px);\n    font-weight: 600;\n  }\n  div[subject-summary] b span {\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[subject-summary] small {\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  button {\n    font: inherit;\n    box-sizing: border-box;\n    height: 32px;\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    background: var(--md-sys-color-surface);\n    color: inherit;\n    padding: 0 8px;\n    min-width: 0;\n  }\n  button {\n    cursor: pointer;\n  }\n  button:disabled {\n    opacity: 0.45;\n    cursor: default;\n  }\n  button[aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    border-color: var(--md-sys-color-primary);\n  }\n  .hint {\n    color: var(--md-sys-color-on-surface-variant);\n    line-height: 1.5;\n  }\n`\n"]}

package/dist-client/modeller/editor.d.ts

@@ -77,43 +77,19 @@ export declare class FigureEditor extends LitElement {
     private live;
     /** The part whose drawn section is open in the section editor (ADR-0100 §3.2), or null. */
     private sectionEditing;
-    /**
-     * A command seen before it is done (ADR-0097 §5.5): worked out on a copy for the figure, version, part and command it
-     * names, and shown only while all four are still the ones on screen. Nothing of it is saved or undone.
-     */
-    private preview?;
-    private previewDrawn?;
     private lastContext;
+    private commandPreview;
     /**
      * Move, turn and size on the canvas, in the bar's tools: the gizmo the W · E · R keys give, found without knowing the
      * keys (2026-09-26 -- a person dragging the part turned the camera). Each is offered only where the part's own
      * numbers can take it (`gizmoReachOf`).
      */
     private renderGizmoTools;
-    /** The modeller's keys (`keys.ts`): undo, redo, duplicate, remove, back to the whole figure, the gizmo's modes. */
-    private onKey;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private static readonly FOLD_START_UNDER;
-    private foldedForWidth;
-    private keptOpenByAuthor;
-    private widthWatch;
-    private fitPanesTo;
-    /**
-     * 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.
-     */
-    private toldViewError;
-    private tell;
-    private askClipLoss;
-    private confirmClipLoss;
-    private ask;
+    private keys;
+    private keyAction;
+    private paneFold;
+    private refusals;
     private panelMemory;
-    private restorePanelFor?;
-    private propertiesPanel;
-    private foldsOf;
     /** The preview is made when first asked for, and kept (hidden) after that; it is taken down with the editor. */
     private previewMounted;
     protected willUpdate(_changed: PropertyValues): void;
@@ -209,8 +185,6 @@ export declare class FigureEditor extends LitElement {
     private renderRepeatNote;
     private renamePart;
     /** Size response, fastening and motion for the selected part, as authoring commands. */
-    private previewWordsSaid?;
-    private previewWordsNow;
     private renderLinks;
     /**
      * The face a size drag keeps for the selected part, figure-model's rule (`figureScaleAnchorOf`): the gizmo shows it
@@ -273,25 +247,6 @@ export declare class FigureEditor extends LitElement {
     private releaseWords;
     /** To the release that exists: the history tab's release section, not a second one here. */
     private goRelease;
-    /** The fastening form's command, seen before it is done; null clears what was shown. */
-    /**
-     * What a command would do is worked out on a copy of the figure -- several compiles of it -- so it waits for the field to
-     * rest: a number typed digit by digit asks once, for the number it ends on. Clearing is at once, and the same question on
-     * the same version is not asked again.
-     */
-    private previewTimer?;
-    private previewCommand;
-    private computePreview;
-    /** The preview, while it still speaks of what is on screen: this figure, this version, this part. */
-    private currentPreview;
-    private detachTimer?;
-    private detachAsked?;
-    /**
-     * 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.
-     */
-    private detachWords;
-    private computeDetachWords;
     private overhangOf;
     /** The selected part's motion at both ends of its range, made once per version and part. */
     private motionEnds;