@things-factory/figure-ui 10.1.39 → 10.1.40

package/dist-client/modeller/figure-v3-properties.d.ts

@@ -0,0 +1,46 @@
+import '@material/web/icon/icon.js';
+import { LitElement, nothing } from 'lit';
+declare const FigureV3Properties_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 속성 — the V3 modeller's figure properties (parity row ②).
+ *
+ * The V2 inspector opens with what the figure is: its name, the face it is placed by, the room it takes up, where
+ * the catalogue files it. The V3 page had only the type. The same rows, in the same order, drawn the way the V2
+ * inspector draws them.
+ *
+ * Two kinds of change leave this tab, and it does neither itself:
+ *  - `v3-command` carries an authoring command (rename, declare the room, the mounting face). The page runs it
+ *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.
+ *  - `v3-catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them
+ *    to the saved row at once, so they need a saved figure.
+ *
+ * Not here yet, because V3 has no place for them: editing the declared room by hand (V3 declares it from the
+ * parts, as graph expressions), and the detail level (the converter records it as lost). Both wait on a V3 ruling.
+ */
+export declare class FigureV3Properties extends FigureV3Properties_base {
+    static styles: import("lit").CSSResult;
+    /** The source being edited. */
+    source?: string;
+    /** The saved row, if any. Category and tags live on it. */
+    figureId?: string;
+    figureCategory?: string;
+    figureTags?: string[];
+    /** The part and face picked for the mounting face, before 「이 면으로」 is pressed. */
+    private pickedPart?;
+    private pickedFace?;
+    private facts;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private renderName;
+    /**
+     * The face the figure is placed by. In V3 it is part of the room declaration, so choosing one declares the room
+     * again from the parts — the only way V3 declares it — with the new face. The hint says so.
+     */
+    private renderPlacement;
+    private renderSpace;
+    private renderMounting;
+    private renderCatalog;
+    private declare;
+    private command;
+    private catalog;
+}
+export {};

package/dist-client/modeller/figure-v3-properties.js

@@ -0,0 +1,259 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { V3_FACES } from '@hatiolab/figure-model';
+import { occupancyFromParts } from './v3-occupancy.js';
+import { tagsOf, v3FigureFacts } from './v3-figure-facts.js';
+const PLACEMENTS = ['floor', 'ceiling', 'center'];
+const FACES = Object.keys(V3_FACES);
+/**
+ * 속성 — the V3 modeller's figure properties (parity row ②).
+ *
+ * The V2 inspector opens with what the figure is: its name, the face it is placed by, the room it takes up, where
+ * the catalogue files it. The V3 page had only the type. The same rows, in the same order, drawn the way the V2
+ * inspector draws them.
+ *
+ * Two kinds of change leave this tab, and it does neither itself:
+ *  - `v3-command` carries an authoring command (rename, declare the room, the mounting face). The page runs it
+ *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.
+ *  - `v3-catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them
+ *    to the saved row at once, so they need a saved figure.
+ *
+ * Not here yet, because V3 has no place for them: editing the declared room by hand (V3 declares it from the
+ * parts, as graph expressions), and the detail level (the converter records it as lost). Both wait on a V3 ruling.
+ */
+let FigureV3Properties = class FigureV3Properties extends localize(i18next)(LitElement) {
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 12px;
+      overflow: auto;
+      font-size: 0.76rem;
+      color: var(--md-sys-color-on-surface);
+    }
+    div[field] {
+      display: grid;
+      gap: 4px;
+    }
+    div[field] > label {
+      font-weight: 600;
+    }
+    div[row] {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+    input,
+    select,
+    button {
+      font: inherit;
+      min-width: 0;
+    }
+    input,
+    select {
+      padding: 5px 8px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 4px;
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+    }
+    div[row] > select {
+      flex: 1;
+    }
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border: none;
+      border-radius: 999em;
+      cursor: pointer;
+      color: var(--md-sys-color-on-secondary-container);
+      background: var(--md-sys-color-secondary-container);
+    }
+    button:disabled,
+    input:disabled,
+    select:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    button md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    small {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  `; }
+    facts() {
+        try {
+            return this.source ? v3FigureFacts(this.source) : undefined;
+        }
+        catch {
+            /* A source the format refuses has no facts to show; the verdict tab says why. */
+            return undefined;
+        }
+    }
+    render() {
+        const facts = this.facts();
+        if (!facts)
+            return nothing;
+        return html `${this.renderName(facts)} ${this.renderPlacement(facts)} ${this.renderSpace(facts)} ${this.renderMounting(facts)}
+    ${this.renderCatalog()}`;
+    }
+    renderName(facts) {
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.name')}</label>
+        <input
+          .value=${facts.name}
+          placeholder=${i18next.t('figure.text.figure-display-name')}
+          @change=${(event) => {
+            const input = event.target;
+            if (!input.value.trim()) {
+                /* The format refuses a blank name; put the old one back rather than send a command that fails. */
+                input.value = facts.name;
+                return;
+            }
+            if (input.value.trim() !== facts.name)
+                this.command({ kind: 'rename', name: input.value });
+        }}
+        />
+      </div>
+    `;
+    }
+    /**
+     * The face the figure is placed by. In V3 it is part of the room declaration, so choosing one declares the room
+     * again from the parts — the only way V3 declares it — with the new face. The hint says so.
+     */
+    renderPlacement(facts) {
+        const current = facts.placement ?? 'floor';
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.figure-placement')}</label>
+        <select
+          ?disabled=${!facts.parts.length}
+          @change=${(event) => this.declare(event.target.value)}
+        >
+          ${PLACEMENTS.map(one => html `<option value=${one} ?selected=${one === current}>${i18next.t('figure.label.placement-' + one)}</option>`)}
+        </select>
+        <small>${i18next.t(facts.parts.length ? 'figure.text.placement-redeclares' : 'figure.text.fit-needs-parts')}</small>
+      </div>
+    `;
+    }
+    renderSpace(facts) {
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.declared-space')}</label>
+        <div row>
+          <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>
+          <button fit ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>
+            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    renderMounting(facts) {
+        const mounting = facts.mounting;
+        const part = [this.pickedPart, mounting?.part, facts.parts[0]].find(one => one && facts.parts.includes(one));
+        const face = this.pickedFace ?? mounting?.face ?? 'bottom';
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.mounting-face')}</label>
+        <div row>
+          <select ?disabled=${!facts.declared} @change=${(e) => (this.pickedPart = e.target.value)}>
+            ${facts.parts.map(one => html `<option value=${one} ?selected=${one === part}>${one}</option>`)}
+          </select>
+          <select ?disabled=${!facts.declared} @change=${(e) => (this.pickedFace = e.target.value)}>
+            ${FACES.map(one => html `<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}
+          </select>
+        </div>
+        <div row>
+          <button ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part, face })}>
+            ${i18next.t('figure.button.set-mounting-face')}
+          </button>
+          <button ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
+            ${i18next.t('figure.button.clear-mounting-face')}
+          </button>
+        </div>
+        <small>
+          ${facts.declared
+            ? mounting
+                ? `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`
+                : i18next.t('figure.label.mounting-face-none')
+            : i18next.t('figure.text.mounting-face-needs-space')}
+        </small>
+      </div>
+    `;
+    }
+    renderCatalog() {
+        const saved = !!this.figureId;
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.category')}</label>
+        <input
+          .value=${this.figureCategory ?? ''}
+          ?disabled=${!saved}
+          placeholder=${i18next.t('figure.text.category-placeholder')}
+          @change=${(e) => this.catalog({ category: e.target.value.trim() })}
+        />
+      </div>
+      <div field>
+        <label>${i18next.t('figure.label.tags')}</label>
+        <input
+          .value=${(this.figureTags ?? []).join(', ')}
+          ?disabled=${!saved}
+          placeholder=${i18next.t('figure.text.tags-placeholder')}
+          @change=${(e) => this.catalog({ tags: tagsOf(e.target.value) })}
+        />
+        ${saved ? nothing : html `<small>${i18next.t('figure.text.catalog-needs-a-save')}</small>`}
+      </div>
+    `;
+    }
+    declare(placement) {
+        if (!this.source)
+            return;
+        this.command(occupancyFromParts(this.source, placement));
+    }
+    command(action) {
+        this.dispatchEvent(new CustomEvent('v3-command', { detail: { action }, bubbles: true, composed: true }));
+    }
+    catalog(patch) {
+        this.dispatchEvent(new CustomEvent('v3-catalog', { detail: patch, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureV3Properties.prototype, "source", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureV3Properties.prototype, "figureId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureV3Properties.prototype, "figureCategory", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FigureV3Properties.prototype, "figureTags", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureV3Properties.prototype, "pickedPart", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureV3Properties.prototype, "pickedFace", void 0);
+FigureV3Properties = __decorate([
+    customElement('figure-v3-properties')
+], FigureV3Properties);
+export { FigureV3Properties };
+//# sourceMappingURL=figure-v3-properties.js.map

package/dist-client/modeller/figure-v3-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure-v3-properties.js","sourceRoot":"","sources":["../../client/modeller/figure-v3-properties.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { V3_FACES } from '@hatiolab/figure-model'\nimport type { V3AuthoringAction, V3Face } from '@hatiolab/figure-model'\n\nimport { occupancyFromParts } from './v3-occupancy.js'\nimport { tagsOf, v3FigureFacts, type Placement, type V3FigureFacts } from './v3-figure-facts.js'\n\nconst PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center']\nconst FACES = Object.keys(V3_FACES) as V3Face[]\n\n/**\n * 속성 — the V3 modeller's figure properties (parity row ②).\n *\n * The V2 inspector opens with what the figure is: its name, the face it is placed by, the room it takes up, where\n * the catalogue files it. The V3 page had only the type. The same rows, in the same order, drawn the way the V2\n * inspector draws them.\n *\n * Two kinds of change leave this tab, and it does neither itself:\n *  - `v3-command` carries an authoring command (rename, declare the room, the mounting face). The page runs it\n *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.\n *  - `v3-catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them\n *    to the saved row at once, so they need a saved figure.\n *\n * Not here yet, because V3 has no place for them: editing the declared room by hand (V3 declares it from the\n * parts, as graph expressions), and the detail level (the converter records it as lost). Both wait on a V3 ruling.\n */\n@customElement('figure-v3-properties')\nexport class FigureV3Properties extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 12px;\n      overflow: auto;\n      font-size: 0.76rem;\n      color: var(--md-sys-color-on-surface);\n    }\n    div[field] {\n      display: grid;\n      gap: 4px;\n    }\n    div[field] > label {\n      font-weight: 600;\n    }\n    div[row] {\n      display: flex;\n      gap: 6px;\n      align-items: center;\n    }\n    input,\n    select,\n    button {\n      font: inherit;\n      min-width: 0;\n    }\n    input,\n    select {\n      padding: 5px 8px;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 4px;\n      background: var(--md-sys-color-surface);\n      color: var(--md-sys-color-on-surface);\n    }\n    div[row] > select {\n      flex: 1;\n    }\n    button {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      border: none;\n      border-radius: 999em;\n      cursor: pointer;\n      color: var(--md-sys-color-on-secondary-container);\n      background: var(--md-sys-color-secondary-container);\n    }\n    button:disabled,\n    input:disabled,\n    select:disabled {\n      opacity: 0.5;\n      cursor: default;\n    }\n    button md-icon {\n      font-size: 16px;\n      width: 16px;\n      height: 16px;\n    }\n    small {\n      color: var(--md-sys-color-on-surface-variant);\n    }\n  `\n\n  /** The source being edited. */\n  @property({ type: String }) source?: string\n  /** The saved row, if any. Category and tags live on it. */\n  @property({ type: String }) figureId?: string\n  @property({ type: String }) figureCategory?: string\n  @property({ type: Array }) figureTags?: string[]\n  /** The part and face picked for the mounting face, before 「이 면으로」 is pressed. */\n  @state() private pickedPart?: string\n  @state() private pickedFace?: V3Face\n\n  private facts(): V3FigureFacts | undefined {\n    try {\n      return this.source ? v3FigureFacts(this.source) : undefined\n    } catch {\n      /* A source the format refuses has no facts to show; the verdict tab says why. */\n      return undefined\n    }\n  }\n\n  render() {\n    const facts = this.facts()\n    if (!facts) return nothing\n    return html`${this.renderName(facts)} ${this.renderPlacement(facts)} ${this.renderSpace(facts)} ${this.renderMounting(facts)}\n    ${this.renderCatalog()}`\n  }\n\n  private renderName(facts: V3FigureFacts) {\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.name')}</label>\n        <input\n          .value=${facts.name}\n          placeholder=${i18next.t('figure.text.figure-display-name')}\n          @change=${(event: Event) => {\n            const input = event.target as HTMLInputElement\n            if (!input.value.trim()) {\n              /* The format refuses a blank name; put the old one back rather than send a command that fails. */\n              input.value = facts.name\n              return\n            }\n            if (input.value.trim() !== facts.name) this.command({ kind: 'rename', name: input.value })\n          }}\n        />\n      </div>\n    `\n  }\n\n  /**\n   * The face the figure is placed by. In V3 it is part of the room declaration, so choosing one declares the room\n   * again from the parts — the only way V3 declares it — with the new face. The hint says so.\n   */\n  private renderPlacement(facts: V3FigureFacts) {\n    const current = facts.placement ?? 'floor'\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.figure-placement')}</label>\n        <select\n          ?disabled=${!facts.parts.length}\n          @change=${(event: Event) => this.declare((event.target as HTMLSelectElement).value as Placement)}\n        >\n          ${PLACEMENTS.map(\n            one => html`<option value=${one} ?selected=${one === current}>${i18next.t('figure.label.placement-' + one)}</option>`\n          )}\n        </select>\n        <small>${i18next.t(facts.parts.length ? 'figure.text.placement-redeclares' : 'figure.text.fit-needs-parts')}</small>\n      </div>\n    `\n  }\n\n  private renderSpace(facts: V3FigureFacts) {\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.declared-space')}</label>\n        <div row>\n          <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>\n          <button fit ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>\n            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private renderMounting(facts: V3FigureFacts) {\n    const mounting = facts.mounting\n    const part = [this.pickedPart, mounting?.part, facts.parts[0]].find(one => one && facts.parts.includes(one))\n    const face: V3Face = this.pickedFace ?? mounting?.face ?? 'bottom'\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.mounting-face')}</label>\n        <div row>\n          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedPart = (e.target as HTMLSelectElement).value)}>\n            ${facts.parts.map(one => html`<option value=${one} ?selected=${one === part}>${one}</option>`)}\n          </select>\n          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedFace = (e.target as HTMLSelectElement).value as V3Face)}>\n            ${FACES.map(one => html`<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}\n          </select>\n        </div>\n        <div row>\n          <button ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>\n            ${i18next.t('figure.button.set-mounting-face')}\n          </button>\n          <button ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>\n            ${i18next.t('figure.button.clear-mounting-face')}\n          </button>\n        </div>\n        <small>\n          ${facts.declared\n            ? mounting\n              ? `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`\n              : i18next.t('figure.label.mounting-face-none')\n            : i18next.t('figure.text.mounting-face-needs-space')}\n        </small>\n      </div>\n    `\n  }\n\n  private renderCatalog() {\n    const saved = !!this.figureId\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.category')}</label>\n        <input\n          .value=${this.figureCategory ?? ''}\n          ?disabled=${!saved}\n          placeholder=${i18next.t('figure.text.category-placeholder')}\n          @change=${(e: Event) => this.catalog({ category: (e.target as HTMLInputElement).value.trim() })}\n        />\n      </div>\n      <div field>\n        <label>${i18next.t('figure.label.tags')}</label>\n        <input\n          .value=${(this.figureTags ?? []).join(', ')}\n          ?disabled=${!saved}\n          placeholder=${i18next.t('figure.text.tags-placeholder')}\n          @change=${(e: Event) => this.catalog({ tags: tagsOf((e.target as HTMLInputElement).value) })}\n        />\n        ${saved ? nothing : html`<small>${i18next.t('figure.text.catalog-needs-a-save')}</small>`}\n      </div>\n    `\n  }\n\n  private declare(placement: Placement) {\n    if (!this.source) return\n    this.command(occupancyFromParts(this.source, placement))\n  }\n\n  private command(action: V3AuthoringAction) {\n    this.dispatchEvent(new CustomEvent('v3-command', { detail: { action }, bubbles: true, composed: true }))\n  }\n\n  private catalog(patch: { category?: string; tags?: string[] }) {\n    this.dispatchEvent(new CustomEvent('v3-catalog', { detail: patch, bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist-client/modeller/v3-canvas.d.ts

@@ -12,6 +12,7 @@ export declare class FigureV3Canvas extends LitElement {
     private readonly camera;
     private controls?;
     private observer?;
+    private themeObserver?;
     private initialized;
     private contextAtRender;
     render(): import("lit-html").TemplateResult<1>;
@@ -21,6 +22,11 @@ export declare class FigureV3Canvas extends LitElement {
     protected updated(changed: PropertyValues): void;
     private updateGeometry;
     fit(): void;
+    /**
+     * The scene's background, taken from the host's computed background — the token resolved and normalised to
+     * `rgb(r, g, b)`, which THREE.Color reads. The token's own text may use the space-separated form it does not.
+     */
+    private paintBackground;
     private draw;
     private pick;
     thumbnail(): any;

package/dist-client/modeller/v3-canvas.js

@@ -33,7 +33,12 @@ let FigureV3Canvas = class FigureV3Canvas extends LitElement {
       min-width: 0;
       min-height: 0;
       position: relative;
-      background: #eef2f4;
+      /*
+        The working board is one step above the surface in both themes (UX, 2026-09-24): surface-container is 238
+        in light and 31 in dark. The 3D background is read from this same value (paintBackground), so the
+        first paint and the scene agree and there is no flash between them.
+      */
+      background: var(--md-sys-color-surface-container);
     }
     canvas {
       display: block;
@@ -45,7 +50,7 @@ let FigureV3Canvas = class FigureV3Canvas extends LitElement {
       inset: 45% 1rem auto;
       text-align: center;
       pointer-events: none;
-      color: #526773;
+      color: var(--md-sys-color-on-surface-variant);
     }
   `; }
     render() {
@@ -66,7 +71,16 @@ let FigureV3Canvas = class FigureV3Canvas extends LitElement {
         const canvas = this.renderRoot.querySelector('canvas');
         this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true });
         this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
-        this.scene.background = new THREE.Color('#eef2f4');
+        this.paintBackground();
+        /*
+          The app switches theme by the body's class (light · dark). Reading the colour once at start left a light
+          board in the middle of a dark screen after every switch (seen 2026-09-24), so it is read again then.
+        */
+        this.themeObserver = new MutationObserver(() => {
+            this.paintBackground();
+            this.draw();
+        });
+        this.themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
         this.scene.add(this.group, new THREE.HemisphereLight(0xffffff, 0x62717d, 2.5));
         const light = new THREE.DirectionalLight(0xffffff, 3);
         light.position.set(1, 2, 3);
@@ -123,12 +137,22 @@ let FigureV3Canvas = class FigureV3Canvas extends LitElement {
         this.controls?.update();
         this.draw();
     }
+    /**
+     * The scene's background, taken from the host's computed background — the token resolved and normalised to
+     * `rgb(r, g, b)`, which THREE.Color reads. The token's own text may use the space-separated form it does not.
+     */
+    paintBackground() {
+        const colour = getComputedStyle(this).backgroundColor;
+        if (colour && colour !== 'rgba(0, 0, 0, 0)' && colour !== 'transparent')
+            this.scene.background = new THREE.Color(colour);
+    }
     thumbnail() {
         this.draw();
         return this.renderer?.domElement.toDataURL('image/png');
     }
     disconnectedCallback() {
         this.observer?.disconnect();
+        this.themeObserver?.disconnect();
         this.controls?.dispose();
         disposeV3Meshes(this.group);
         this.renderer?.dispose();

package/dist-client/modeller/v3-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"v3-canvas.js","sourceRoot":"","sources":["../../client/modeller/v3-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as THREE from 'three'\nimport { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'\nimport { replaceV3Meshes, disposeV3Meshes, type V3RenderPart } from './v3-renderer.js'\n\n/** Renders evaluated V3 geometry directly. There is no parts/base or things-scene conversion. */\n@customElement('figure-v3-canvas')\nexport class FigureV3Canvas extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      min-width: 0;\n      min-height: 0;\n      position: relative;\n      background: #eef2f4;\n    }\n    canvas {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    p {\n      position: absolute;\n      inset: 45% 1rem auto;\n      text-align: center;\n      pointer-events: none;\n      color: #526773;\n    }\n  `\n  @property({ attribute: false }) parts: V3RenderPart[] = []\n  @property({ attribute: false }) palette: Record<string, string> = {}\n  @property() context = ''\n  private renderer?: THREE.WebGLRenderer\n  private readonly scene = new THREE.Scene()\n  private readonly group = new THREE.Group()\n  private readonly camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000000)\n  private controls?: OrbitControls\n  private observer?: ResizeObserver\n  private initialized = false\n  private contextAtRender = ''\n  render() {\n    return html`<canvas aria-label=\"Figure 3D 모델\" @pointerup=${this.pick}></canvas\n      >${this.parts.length ? null : html`<p>도형을 추가해 모델링을 시작하세요.</p>`}`\n  }\n  protected firstUpdated() {\n    this.initialize()\n  }\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.hasUpdated) void this.updateComplete.then(() => this.initialize())\n  }\n  private initialize() {\n    if (this.initialized || !this.isConnected) return\n    const canvas = this.renderRoot.querySelector('canvas')!\n    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true })\n    this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))\n    this.scene.background = new THREE.Color('#eef2f4')\n    this.scene.add(this.group, new THREE.HemisphereLight(0xffffff, 0x62717d, 2.5))\n    const light = new THREE.DirectionalLight(0xffffff, 3)\n    light.position.set(1, 2, 3)\n    this.scene.add(light)\n    this.controls = new OrbitControls(this.camera, canvas)\n    this.controls.addEventListener('change', this.draw)\n    this.observer = new ResizeObserver(() => {\n      const r = this.getBoundingClientRect()\n      if (r.width && r.height) {\n        this.renderer!.setSize(r.width, r.height, false)\n        this.camera.aspect = r.width / r.height\n        this.camera.updateProjectionMatrix()\n        this.draw()\n      }\n    })\n    this.observer.observe(this)\n    this.initialized = true\n    this.updateGeometry(true)\n  }\n  protected updated(changed: PropertyValues) {\n    if (this.initialized && (changed.has('parts') || changed.has('palette') || changed.has('context')))\n      this.updateGeometry(this.contextAtRender !== this.context)\n  }\n  private updateGeometry(fit: boolean) {\n    try {\n      const wasEmpty = this.group.children.length === 0\n      replaceV3Meshes(this.group, this.parts, this.palette)\n      this.contextAtRender = this.context\n      if (fit || wasEmpty) this.fit()\n      this.draw()\n    } catch (error) {\n      // Do not leave another model's geometry visible after a failed context switch.\n      if (this.contextAtRender !== this.context) {\n        disposeV3Meshes(this.group)\n        this.draw()\n      }\n      this.dispatchEvent(new CustomEvent('render-error', { detail: error, bubbles: true, composed: true }))\n    }\n  }\n  fit() {\n    const bounds = new THREE.Box3().setFromObject(this.group),\n      center = new THREE.Vector3(),\n      size = new THREE.Vector3()\n    if (!bounds.isEmpty()) {\n      bounds.getCenter(center)\n      bounds.getSize(size)\n    }\n    const radius = Math.max(size.length() / 2, 100),\n      distance = (radius / Math.sin(THREE.MathUtils.degToRad(this.camera.fov / 2))) * 1.3\n    this.camera.position.copy(center).add(new THREE.Vector3(1, 0.8, 1).normalize().multiplyScalar(distance))\n    this.camera.near = Math.max(0.01, distance / 10000)\n    this.camera.far = Math.max(10000, distance * 100)\n    this.camera.updateProjectionMatrix()\n    this.controls?.target.copy(center)\n    this.controls?.update()\n    this.draw()\n  }\n  private draw = () => {\n    if (this.renderer) this.renderer.render(this.scene, this.camera)\n  }\n  private pick = (event: PointerEvent) => {\n    const r = (event.currentTarget as HTMLCanvasElement).getBoundingClientRect(),\n      ray = new THREE.Raycaster()\n    ray.setFromCamera(\n      new THREE.Vector2(((event.clientX - r.left) / r.width) * 2 - 1, (-(event.clientY - r.top) / r.height) * 2 + 1),\n      this.camera\n    )\n    const hit = ray.intersectObjects(this.group.children)[0]\n    this.dispatchEvent(\n      new CustomEvent('part-selected', { detail: hit?.object.name ?? '', bubbles: true, composed: true })\n    )\n  }\n  thumbnail() {\n    this.draw()\n    return this.renderer?.domElement.toDataURL('image/png')\n  }\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.controls?.dispose()\n    disposeV3Meshes(this.group)\n    this.renderer?.dispose()\n    this.renderer = undefined\n    this.scene.clear()\n    this.initialized = false\n    super.disconnectedCallback()\n  }\n}\n"]}
+{"version":3,"file":"v3-canvas.js","sourceRoot":"","sources":["../../client/modeller/v3-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as THREE from 'three'\nimport { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'\nimport { replaceV3Meshes, disposeV3Meshes, type V3RenderPart } from './v3-renderer.js'\n\n/** Renders evaluated V3 geometry directly. There is no parts/base or things-scene conversion. */\n@customElement('figure-v3-canvas')\nexport class FigureV3Canvas extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      min-width: 0;\n      min-height: 0;\n      position: relative;\n      /*\n        The working board is one step above the surface in both themes (UX, 2026-09-24): surface-container is 238\n        in light and 31 in dark. The 3D background is read from this same value (paintBackground), so the\n        first paint and the scene agree and there is no flash between them.\n      */\n      background: var(--md-sys-color-surface-container);\n    }\n    canvas {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    p {\n      position: absolute;\n      inset: 45% 1rem auto;\n      text-align: center;\n      pointer-events: none;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n  `\n  @property({ attribute: false }) parts: V3RenderPart[] = []\n  @property({ attribute: false }) palette: Record<string, string> = {}\n  @property() context = ''\n  private renderer?: THREE.WebGLRenderer\n  private readonly scene = new THREE.Scene()\n  private readonly group = new THREE.Group()\n  private readonly camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000000)\n  private controls?: OrbitControls\n  private observer?: ResizeObserver\n  private themeObserver?: MutationObserver\n  private initialized = false\n  private contextAtRender = ''\n  render() {\n    return html`<canvas aria-label=\"Figure 3D 모델\" @pointerup=${this.pick}></canvas\n      >${this.parts.length ? null : html`<p>도형을 추가해 모델링을 시작하세요.</p>`}`\n  }\n  protected firstUpdated() {\n    this.initialize()\n  }\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.hasUpdated) void this.updateComplete.then(() => this.initialize())\n  }\n  private initialize() {\n    if (this.initialized || !this.isConnected) return\n    const canvas = this.renderRoot.querySelector('canvas')!\n    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true })\n    this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))\n    this.paintBackground()\n    /*\n      The app switches theme by the body's class (light · dark). Reading the colour once at start left a light\n      board in the middle of a dark screen after every switch (seen 2026-09-24), so it is read again then.\n    */\n    this.themeObserver = new MutationObserver(() => {\n      this.paintBackground()\n      this.draw()\n    })\n    this.themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] })\n    this.scene.add(this.group, new THREE.HemisphereLight(0xffffff, 0x62717d, 2.5))\n    const light = new THREE.DirectionalLight(0xffffff, 3)\n    light.position.set(1, 2, 3)\n    this.scene.add(light)\n    this.controls = new OrbitControls(this.camera, canvas)\n    this.controls.addEventListener('change', this.draw)\n    this.observer = new ResizeObserver(() => {\n      const r = this.getBoundingClientRect()\n      if (r.width && r.height) {\n        this.renderer!.setSize(r.width, r.height, false)\n        this.camera.aspect = r.width / r.height\n        this.camera.updateProjectionMatrix()\n        this.draw()\n      }\n    })\n    this.observer.observe(this)\n    this.initialized = true\n    this.updateGeometry(true)\n  }\n  protected updated(changed: PropertyValues) {\n    if (this.initialized && (changed.has('parts') || changed.has('palette') || changed.has('context')))\n      this.updateGeometry(this.contextAtRender !== this.context)\n  }\n  private updateGeometry(fit: boolean) {\n    try {\n      const wasEmpty = this.group.children.length === 0\n      replaceV3Meshes(this.group, this.parts, this.palette)\n      this.contextAtRender = this.context\n      if (fit || wasEmpty) this.fit()\n      this.draw()\n    } catch (error) {\n      // Do not leave another model's geometry visible after a failed context switch.\n      if (this.contextAtRender !== this.context) {\n        disposeV3Meshes(this.group)\n        this.draw()\n      }\n      this.dispatchEvent(new CustomEvent('render-error', { detail: error, bubbles: true, composed: true }))\n    }\n  }\n  fit() {\n    const bounds = new THREE.Box3().setFromObject(this.group),\n      center = new THREE.Vector3(),\n      size = new THREE.Vector3()\n    if (!bounds.isEmpty()) {\n      bounds.getCenter(center)\n      bounds.getSize(size)\n    }\n    const radius = Math.max(size.length() / 2, 100),\n      distance = (radius / Math.sin(THREE.MathUtils.degToRad(this.camera.fov / 2))) * 1.3\n    this.camera.position.copy(center).add(new THREE.Vector3(1, 0.8, 1).normalize().multiplyScalar(distance))\n    this.camera.near = Math.max(0.01, distance / 10000)\n    this.camera.far = Math.max(10000, distance * 100)\n    this.camera.updateProjectionMatrix()\n    this.controls?.target.copy(center)\n    this.controls?.update()\n    this.draw()\n  }\n  /**\n   * The scene's background, taken from the host's computed background — the token resolved and normalised to\n   * `rgb(r, g, b)`, which THREE.Color reads. The token's own text may use the space-separated form it does not.\n   */\n  private paintBackground() {\n    const colour = getComputedStyle(this).backgroundColor\n    if (colour && colour !== 'rgba(0, 0, 0, 0)' && colour !== 'transparent') this.scene.background = new THREE.Color(colour)\n  }\n  private draw = () => {\n    if (this.renderer) this.renderer.render(this.scene, this.camera)\n  }\n  private pick = (event: PointerEvent) => {\n    const r = (event.currentTarget as HTMLCanvasElement).getBoundingClientRect(),\n      ray = new THREE.Raycaster()\n    ray.setFromCamera(\n      new THREE.Vector2(((event.clientX - r.left) / r.width) * 2 - 1, (-(event.clientY - r.top) / r.height) * 2 + 1),\n      this.camera\n    )\n    const hit = ray.intersectObjects(this.group.children)[0]\n    this.dispatchEvent(\n      new CustomEvent('part-selected', { detail: hit?.object.name ?? '', bubbles: true, composed: true })\n    )\n  }\n  thumbnail() {\n    this.draw()\n    return this.renderer?.domElement.toDataURL('image/png')\n  }\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.themeObserver?.disconnect()\n    this.controls?.dispose()\n    disposeV3Meshes(this.group)\n    this.renderer?.dispose()\n    this.renderer = undefined\n    this.scene.clear()\n    this.initialized = false\n    super.disconnectedCallback()\n  }\n}\n"]}

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

@@ -44,6 +44,12 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
       flex-direction: column;
       min-height: 0;
       height: 100%;
+      /*
+        The editor folds by the width it is given, not the window's. The rail (208 open, 56 closed) and the page's
+        320 side take their share first, so a window rule was wrong whenever either was there: at 945 with the rail
+        open the editor had 417 and still drew its 660 of columns, over the side (UX ruling, 2026-09-24).
+      */
+      container-type: inline-size;
       font: 13px sans-serif;
       color: var(--md-sys-color-on-surface, #22343f);
     }
@@ -52,7 +58,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
       align-items: center;
       gap: 8px;
       padding: 10px;
-      border-bottom: 1px solid #d4dde2;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
       flex-wrap: wrap;
     }
     main {
@@ -67,10 +73,10 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
       background: var(--md-sys-color-surface, #fff);
     }
     aside:first-child {
-      border-right: 1px solid #d4dde2;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
     }
     aside:last-child {
-      border-left: 1px solid #d4dde2;
+      border-left: 1px solid var(--md-sys-color-outline-variant);
     }
     h3 {
       font-size: var(--ui-t-body, 13px);
@@ -85,7 +91,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
       font: inherit;
       box-sizing: border-box;
       height: 34px;
-      border: 1px solid #cbd5dc;
+      border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: 6px;
       background: var(--md-sys-color-surface, #fff);
       color: inherit;
@@ -100,8 +106,9 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
       cursor: default;
     }
     button[aria-pressed='true'] {
-      background: #d6edf0;
-      border-color: #337783;
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      border-color: var(--md-sys-color-primary);
     }
     .parts {
       display: grid;
@@ -124,25 +131,46 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
     }
     .error {
       padding: 10px;
-      background: #fff0eb;
-      color: #922716;
+      background: var(--md-sys-color-error-container);
+      color: var(--md-sys-color-on-error-container);
       white-space: pre-wrap;
     }
     .status {
       margin-left: auto;
     }
     .hint {
-      color: #637783;
+      color: var(--md-sys-color-on-surface-variant);
       line-height: 1.5;
     }
-    @media (max-width: 800px) {
+    /* 660 and over: parts | canvas | inputs. Below that the sum of the columns' least widths no longer fits. */
+    @container (max-width: 659px) {
       main {
         grid-template-columns: 140px minmax(160px, 1fr);
       }
       aside:last-child {
         grid-column: 1/-1;
         max-height: 260px;
-        border-top: 1px solid #d4dde2;
+        border-left: none;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+    }
+    /* Under 420: one column. The canvas first — seeing what is being made comes before the lists — and main scrolls. */
+    @container (max-width: 419px) {
+      main {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: minmax(240px, 45%);
+        grid-auto-rows: auto;
+        overflow-y: auto;
+      }
+      figure-v3-canvas {
+        order: -1;
+      }
+      aside:first-child {
+        border-right: none;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+      aside:last-child {
+        max-height: none;
       }
     }
   `; }