@things-factory/figure-ui 10.1.224 → 10.1.225

package/client/modeller/editor-styles.ts

@@ -339,11 +339,12 @@ export const EditorStyles = css`
     min-height: 0;
     overflow: auto;
   }
-  /* Which part the panel speaks of. */
+  /* Which part the panel speaks of. Above z-index 1: a chip's label (md-filter-chip) sits at 1 and, coming later, was
+     drawn over it when the panel scrolled (sweep 2026-10-27 U2). */
   div[subject] {
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: 2;
     display: grid;
     gap: 4px;
     padding: 10px 12px;

package/client/modeller/editor.ts

@@ -1943,7 +1943,9 @@ export class FigureEditor extends LitElement {
                     @part-live=${(e: CustomEvent) => this.hold({}, e.detail.edit)}
                   ></figure-material-panel>
                   ${this.renderMore(part, view.palette ?? {}, unavailable)}`
-              : view.geometry.length === 0
+              : view.loading || !view.context
+                ? nothing
+                : view.geometry.length === 0
                 ? html`${this.renderSubject()}<section empty-figure>
                     <p>${i18next.t('figure.text.empty-figure-next')}</p>
                     <details>

package/client/modeller/figure-capability-panel.ts

@@ -50,6 +50,12 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
       border-radius: 8px;
       cursor: pointer;
     }
+    /* The box keeps its size beside a long note: squeezed by the flex row it read as a dot (sweep 2026-10-27 U1). */
+    label[rung] > input,
+    label[item] > input {
+      flex: none;
+      margin: 2px 0 0;
+    }
     label[rung][on],
     label[item][on] {
       border-color: var(--md-sys-color-primary);

package/client/modeller/figure-clips.ts

@@ -118,7 +118,7 @@ export class FigureClips extends localize(i18next)(LitElement) {
         <h3>${i18next.t('figure.label.clips')}${this.help.button('figure.text.clips-explained')}</h3>
         ${this.help.hint('figure.text.clips-explained')}
         ${clips.map(clip => this.renderClip(clip))}
-        ${empty ? html`<p hint>${i18next.t('figure.text.no-controls')}</p>` : nothing}
+        ${empty ? html`<p hint>${i18next.t('figure.text.no-clips')}</p>` : nothing}
       </section>
       ${empty ? nothing : this.renderAdd(asset, clips)} ${this.renderGroups(asset)}
     `

package/client/modeller/figure-data-panel.ts

@@ -346,7 +346,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
             this.edit({ kind: 'set-data-schema', schema: schemaWithoutField(schema, row.path) })
           }}
         >
-          <md-icon>close</md-icon>
+          <md-icon>delete</md-icon>
         </button>
       </div>
       <div form>
@@ -412,22 +412,25 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
   private renderAddField(schema: readonly FigureDataField[], under: string) {
     const a = this.adding
     const named = a.name.trim()
+    const add = () => {
+      if (this.locked || !named) return
+      this.edit({ kind: 'set-data-schema', schema: schemaWithField(schema, under, { name: named, ...nodeOfKind(a.kind) } as FigureDataField) })
+      this.adding = { ...a, name: '' }
+    }
     return html`<div form>
         <span>${i18next.t('figure.label.data-name')}</span>
-        <input .value=${a.name} @input=${(e: Event) => (this.adding = { ...a, name: (e.target as HTMLInputElement).value })} />
+        <input
+          aria-label=${i18next.t('figure.label.data-name')}
+          .value=${a.name}
+          @input=${(e: Event) => (this.adding = { ...a, name: (e.target as HTMLInputElement).value })}
+          @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && !e.isComposing && add()}
+        />
         <span>${i18next.t('figure.label.data-kind')}</span>
         <select @change=${(e: Event) => (this.adding = { ...a, kind: (e.target as HTMLSelectElement).value as FigureDataNode['kind'] })}>
           ${KINDS.map(k => html`<option value=${k} ?selected=${k === a.kind}>${i18next.t('figure.label.data-kind-' + k)}</option>`)}
         </select>
       </div>
-      <button
-        act
-        ?disabled=${this.locked || !named}
-        @click=${() => {
-          this.edit({ kind: 'set-data-schema', schema: schemaWithField(schema, under, { name: named, ...nodeOfKind(a.kind) } as FigureDataField) })
-          this.adding = { ...a, name: '' }
-        }}
-      >
+      <button act ?disabled=${this.locked || !named} @click=${add}>
         <md-icon>add</md-icon>${i18next.t(under ? 'figure.button.add-data-child' : 'figure.button.add-data-field', { parent: under })}
       </button>`
   }
@@ -505,7 +508,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
           <strong>${b.label ?? b.accessor}</strong> → ${what} <small>· ${i18next.t('figure.label.data-method-' + methodOf(b))}</small>
         </button>
         <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-binding')} @click=${() => this.edit({ kind: 'remove-data-binding', id: b.id })}>
-          <md-icon>close</md-icon>
+          <md-icon>delete</md-icon>
         </button>
       </div>
       ${resting.filter(r => r.id === b.id).map(r => this.renderResting(r))}
@@ -700,7 +703,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     return html`<div looks style="grid-template-columns: ${gridOf(keyCells, columns.length)}">
       <span style="grid-column: span ${keyCells}">${i18next.t('figure.label.data-otherwise')}</span>
       ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, 'default', l)))}
-      ${needed ? html`<span></span>` : html`<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => set({ ...b, table: rest })}><md-icon>close</md-icon></button>`}
+      ${needed ? html`<span></span>` : html`<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => set({ ...b, table: rest })}><md-icon>delete</md-icon></button>`}
     </div>`
   }
 
@@ -736,7 +739,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
             ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, k, l)))}
             ${boolean || rows.length < 2 && domain.length > 0
               ? html`<span></span>`
-              : html`<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => rekeyed(rows.filter((_, j) => j !== i))}><md-icon>close</md-icon></button>`}`
+              : html`<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => rekeyed(rows.filter((_, j) => j !== i))}><md-icon>delete</md-icon></button>`}`
         )}
       </div>
       ${this.renderOtherwise(asset, b, columns, domain.length > 0 && !covered, set, 1)}
@@ -779,7 +782,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
           return html`<input type="number" step="any" .value=${e.from} ?disabled=${this.locked} @change=${(ev: Event) => rekey(i, 'from', (ev.target as HTMLInputElement).value)} />
             <input type="number" step="any" .value=${e.to} ?disabled=${this.locked} @change=${(ev: Event) => rekey(i, 'to', (ev.target as HTMLInputElement).value)} />
             ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, k, l)))}
-            <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-range')} @click=${() => set(tableWithKeys(b, rows.filter((_, j) => j !== i)))}><md-icon>close</md-icon></button>`
+            <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-range')} @click=${() => set(tableWithKeys(b, rows.filter((_, j) => j !== i)))}><md-icon>delete</md-icon></button>`
         })}
       </div>
       ${this.renderOtherwise(asset, b, columns, false, set, 2)}

package/client/modeller/figure-preview.ts

@@ -83,7 +83,26 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     div[foot] > * { pointer-events: auto; }
     div[setup] { max-width: min(320px, 100%); padding: 12px; border-radius: 8px; background: rgba(28,28,30,.9); color: #fff; display: grid; gap: 8px; }
     div[setup] p { margin: 0; line-height: 1.5; }
-    div[setup] select, div[setup] button { font: inherit; padding: 8px; min-width: 0; }
+    /* The help's choice and button in the look of the controls beside it, not the browser's grey (sweep 2026-10-27 U7). */
+    div[setup] select,
+    div[setup] button {
+      min-width: 0;
+      padding: 4px 8px;
+      font: inherit;
+      color: rgba(255, 255, 255, 0.92);
+      background-color: rgba(255, 255, 255, 0.14);
+      border: 1px solid rgba(255, 255, 255, 0.22);
+      border-radius: 5px;
+    }
+    div[setup] button {
+      cursor: pointer;
+    }
+    div[setup] button:hover {
+      background-color: rgba(255, 255, 255, 0.24);
+    }
+    div[setup] option {
+      color: initial;
+    }
     /* Which is which: side by side means nothing without a legend. */
     div[legend] {
       position: absolute;
@@ -153,22 +172,29 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       margin-left: 4px;
       color: #ffcc80;
     }
+    /*
+      One grid for every row, each row its subgrid: the rows' names in one column, so a value's field starts where the one
+      above it does whatever the names' lengths (a row of its own grid started 28px off, sweep 2026-10-27 U7).
+    */
     div[clips] {
       margin-left: auto;
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
+      display: grid;
+      grid-template-columns: auto 20px 96px 34px;
+      gap: 6px 8px;
+      align-items: center;
       padding: 8px 10px;
       color: rgba(255, 255, 255, 0.92);
       background-color: rgba(28, 28, 30, 0.72);
       border-radius: 8px;
       font-size: var(--ui-t-micro, 11px);
     }
+    div[clips] > * {
+      grid-column: 1 / -1;
+    }
     div[clips] label {
       display: grid;
-      grid-template-columns: auto 20px 96px 34px;
+      grid-template-columns: subgrid;
       align-items: center;
-      gap: 8px;
     }
     /* A motion group's clip: as wide as the dial, slider and value together, so its name reads. */
     div[clips] select {
@@ -218,6 +244,20 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       width: 96px;
       accent-color: var(--md-sys-color-primary);
     }
+    /* A value typed, not slid: in the look of the group's clip choice, starting where the sliders start. */
+    div[clips] input:not([type='range']) {
+      box-sizing: border-box;
+      min-width: 0;
+      font: inherit;
+      color: inherit;
+      background-color: rgba(255, 255, 255, 0.14);
+      border: 1px solid rgba(255, 255, 255, 0.22);
+      border-radius: 5px;
+    }
+    div[clips] input:not([type='range']):not([type='number']) {
+      grid-column: 3 / -1;
+      width: auto;
+    }
     div[clips] output {
       font-variant-numeric: tabular-nums;
       text-align: right;

package/client/modeller/product-session.ts

@@ -162,12 +162,13 @@ export function createFigureProductSession(store: FigureProductStore) {
      * -- the server writes over it only while it still holds this. Nothing for a figure not saved yet.
      */
     confirmedSource: () => (id ? baseline : undefined),
-    startNew({ discard = false } = {}) {
+    /** A new figure, named in the screen's language by the page: the session has no words of its own. */
+    startNew({ discard = false, name }: { discard?: boolean; name: string }) {
       canLeave(discard)
       ++epoch
       clear()
       loading = false
-      workspace.open(serializeFigureAsset(createFigureAsset('새 Figure')))
+      workspace.open(serializeFigureAsset(createFigureAsset(name)))
       creationId = crypto.randomUUID()
       return read()
     },

package/client/pages/figure-modeller-page.ts

@@ -450,7 +450,7 @@ export class FigureModellerPage extends PageView {
         await opening
         this.readRow(id)
       } else {
-        this.session.startNew({ discard })
+        this.session.startNew({ discard, name: i18next.t('figure.text.new-figure-name') })
         this.row = { version: 0 }
         this.typeError = ''
         this.takeNewFigureProposal()
@@ -496,7 +496,7 @@ export class FigureModellerPage extends PageView {
   get context() {
     const view = this.session.read()
     return {
-      title: view.name ?? 'Figure',
+      title: view.name || i18next.t('figure.label.figure'),
       /*
         A figure that has an id was opened from the catalog (or saved there), so the rail marks the catalog. Without this
         the rail matches the page name and marks "new figure" while an existing one is being edited.

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

@@ -338,11 +338,12 @@ export const EditorStyles = css `
     min-height: 0;
     overflow: auto;
   }
-  /* Which part the panel speaks of. */
+  /* Which part the panel speaks of. Above z-index 1: a chip's label (md-filter-chip) sits at 1 and, coming later, was
+     drawn over it when the panel scrolled (sweep 2026-10-27 U2). */
   div[subject] {
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: 2;
     display: grid;
     gap: 4px;
     padding: 10px 12px;

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4a9B,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    position: relative;\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    /* The app's one face (its typography theme's --theme-font) at the body size: a bare sans-serif here put a second\n       face under everything the editor draws, beside the parts list and the shell in the app's own (2026-10-16). */\n    font-family: var(--theme-font, ui-sans-serif, system-ui, sans-serif);\n    font-size: var(--ui-t-body, 13px);\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    border: 1px solid transparent;\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  /*\n    The bar's two commitments, one shape (user 2026-10-18: 「발행버튼도 저장버튼도 라운드 버튼으로 … 버튼 안에 적절한 아이콘」):\n    round, an icon inside, so neither is taken for the other. Save, done many times a day, is the filled one; release,\n    a promise to whoever draws the figure, is outlined.\n  */\n  ox-canvas-bar button[save],\n  ox-canvas-bar button[publish] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    height: 32px;\n    padding: 0 14px 0 10px;\n    border-radius: 999em;\n    font-weight: 600;\n  }\n  ox-canvas-bar button[save] md-icon,\n  ox-canvas-bar button[publish] md-icon {\n    --md-icon-size: 18px;\n  }\n  ox-canvas-bar button[save] {\n    border: 1px solid transparent;\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  /* Which size handles change one diameter (ADR-0140 4.1): a quiet line over the canvas, out of the gizmo's way. */\n  p[same-measure] {\n    position: absolute;\n    bottom: 12px;\n    left: 50%;\n    z-index: 5;\n    transform: translateX(-50%);\n    margin: 0;\n    padding: 4px 10px;\n    border-radius: 999em;\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface-variant);\n    font-size: var(--ui-t-small, 11.5px);\n    pointer-events: none;\n    white-space: nowrap;\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  /*\n    The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body\n    for the bar, and the fields the editor drew itself -- the part's name -- stood a step larger than every other field.\n  */\n  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    font-size: var(--ui-t-small, 11.5px);\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: var(--ui-t-micro, 11px);\n    line-height: 1.2;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  /* A range's two ends read as one: smallest – largest. */\n  div[pair][range] {\n    align-items: center;\n  }\n  div[pair][range] > span[dash] {\n    flex: none;\n    color: var(--md-sys-color-on-surface-variant);\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  /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */\n  div[group-fields] {\n    display: grid;\n    gap: 6px;\n  }\n  /* The folded 「더 보기」: its title is the fold's handle, at the title's size. */\n  section[more] > details > summary {\n    padding: 0;\n  }\n  section[more] > details > summary > h3 {\n    margin: 0;\n  }\n  div[more-body] {\n    display: grid;\n    gap: 16px;\n    margin-top: 12px;\n  }\n  /*\n    The view settings and the release history, opened from the bar over the right of the work: neither is about the\n    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16). The fastening window stands in\n    the same place, over the side panel, so the canvas it previews on stays in sight (user 2026-10-19).\n  */\n  :host {\n    position: relative;\n  }\n  div[side-overlay] {\n    position: absolute;\n    top: var(--figure-bar-height, 44px);\n    right: 8px;\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    width: min(360px, calc(100% - 16px));\n    max-height: calc(100% - var(--figure-bar-height, 44px) - 16px);\n    background: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);\n  }\n  div[overlay-head] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 8px 8px 12px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  div[overlay-head] h3 {\n    margin: 0;\n  }\n  div[overlay-head] button[quiet] {\n    margin-left: 0;\n  }\n  [overlay-body] {\n    min-height: 0;\n    overflow: auto;\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  /*\n    No rule here draws every button as a box: the side's buttons take the shared panel rules (SidePanelStyles), one\n    height with the fields beside them, and only the bar's publish keeps an outline (user 2026-10-16: 「버튼 박스도\n    과하게 사용되어서」 -- a bare 「button」 rule had put a 32px box round every button the editor drew).\n  */\n  button {\n    font: inherit;\n    box-sizing: border-box;\n    color: inherit;\n    min-width: 0;\n    cursor: pointer;\n  }\n  /* What blocks release, beside 「발행」: one red word button, and its list under the bar. */\n  ox-canvas-bar button[release-blocked] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: 32px;\n    padding: 0 14px 0 10px;\n    border: none;\n    /* Round as save and release beside it: one shape for the bar's end. */\n    border-radius: 999em;\n    color: var(--md-sys-color-on-error-container);\n    background: var(--md-sys-color-error-container);\n  }\n  ox-canvas-bar button[release-blocked] md-icon {\n    --md-icon-size: 18px;\n  }\n  div[release-blockers] {\n    position: absolute;\n    top: 46px;\n    right: 8px;\n    z-index: 6;\n    width: min(340px, calc(100% - 16px));\n    padding: 8px 10px 10px;\n    box-sizing: border-box;\n    background: var(--md-sys-color-surface);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);\n  }\n  ox-canvas-bar button[publish] {\n    border: 1px solid var(--md-sys-color-outline);\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface);\n  }\n  ox-canvas-bar button[publish][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6a9B,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    position: relative;\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    /* The app's one face (its typography theme's --theme-font) at the body size: a bare sans-serif here put a second\n       face under everything the editor draws, beside the parts list and the shell in the app's own (2026-10-16). */\n    font-family: var(--theme-font, ui-sans-serif, system-ui, sans-serif);\n    font-size: var(--ui-t-body, 13px);\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    border: 1px solid transparent;\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  /*\n    The bar's two commitments, one shape (user 2026-10-18: 「발행버튼도 저장버튼도 라운드 버튼으로 … 버튼 안에 적절한 아이콘」):\n    round, an icon inside, so neither is taken for the other. Save, done many times a day, is the filled one; release,\n    a promise to whoever draws the figure, is outlined.\n  */\n  ox-canvas-bar button[save],\n  ox-canvas-bar button[publish] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    height: 32px;\n    padding: 0 14px 0 10px;\n    border-radius: 999em;\n    font-weight: 600;\n  }\n  ox-canvas-bar button[save] md-icon,\n  ox-canvas-bar button[publish] md-icon {\n    --md-icon-size: 18px;\n  }\n  ox-canvas-bar button[save] {\n    border: 1px solid transparent;\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  /* Which size handles change one diameter (ADR-0140 4.1): a quiet line over the canvas, out of the gizmo's way. */\n  p[same-measure] {\n    position: absolute;\n    bottom: 12px;\n    left: 50%;\n    z-index: 5;\n    transform: translateX(-50%);\n    margin: 0;\n    padding: 4px 10px;\n    border-radius: 999em;\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface-variant);\n    font-size: var(--ui-t-small, 11.5px);\n    pointer-events: none;\n    white-space: nowrap;\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  /*\n    The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body\n    for the bar, and the fields the editor drew itself -- the part's name -- stood a step larger than every other field.\n  */\n  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    font-size: var(--ui-t-small, 11.5px);\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: var(--ui-t-micro, 11px);\n    line-height: 1.2;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  /* A range's two ends read as one: smallest – largest. */\n  div[pair][range] {\n    align-items: center;\n  }\n  div[pair][range] > span[dash] {\n    flex: none;\n    color: var(--md-sys-color-on-surface-variant);\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  /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */\n  div[group-fields] {\n    display: grid;\n    gap: 6px;\n  }\n  /* The folded 「더 보기」: its title is the fold's handle, at the title's size. */\n  section[more] > details > summary {\n    padding: 0;\n  }\n  section[more] > details > summary > h3 {\n    margin: 0;\n  }\n  div[more-body] {\n    display: grid;\n    gap: 16px;\n    margin-top: 12px;\n  }\n  /*\n    The view settings and the release history, opened from the bar over the right of the work: neither is about the\n    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16). The fastening window stands in\n    the same place, over the side panel, so the canvas it previews on stays in sight (user 2026-10-19).\n  */\n  :host {\n    position: relative;\n  }\n  div[side-overlay] {\n    position: absolute;\n    top: var(--figure-bar-height, 44px);\n    right: 8px;\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    width: min(360px, calc(100% - 16px));\n    max-height: calc(100% - var(--figure-bar-height, 44px) - 16px);\n    background: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);\n  }\n  div[overlay-head] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 8px 8px 12px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  div[overlay-head] h3 {\n    margin: 0;\n  }\n  div[overlay-head] button[quiet] {\n    margin-left: 0;\n  }\n  [overlay-body] {\n    min-height: 0;\n    overflow: auto;\n  }\n  /* Which part the panel speaks of. Above z-index 1: a chip's label (md-filter-chip) sits at 1 and, coming later, was\n     drawn over it when the panel scrolled (sweep 2026-10-27 U2). */\n  div[subject] {\n    position: sticky;\n    top: 0;\n    z-index: 2;\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  /*\n    No rule here draws every button as a box: the side's buttons take the shared panel rules (SidePanelStyles), one\n    height with the fields beside them, and only the bar's publish keeps an outline (user 2026-10-16: 「버튼 박스도\n    과하게 사용되어서」 -- a bare 「button」 rule had put a 32px box round every button the editor drew).\n  */\n  button {\n    font: inherit;\n    box-sizing: border-box;\n    color: inherit;\n    min-width: 0;\n    cursor: pointer;\n  }\n  /* What blocks release, beside 「발행」: one red word button, and its list under the bar. */\n  ox-canvas-bar button[release-blocked] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: 32px;\n    padding: 0 14px 0 10px;\n    border: none;\n    /* Round as save and release beside it: one shape for the bar's end. */\n    border-radius: 999em;\n    color: var(--md-sys-color-on-error-container);\n    background: var(--md-sys-color-error-container);\n  }\n  ox-canvas-bar button[release-blocked] md-icon {\n    --md-icon-size: 18px;\n  }\n  div[release-blockers] {\n    position: absolute;\n    top: 46px;\n    right: 8px;\n    z-index: 6;\n    width: min(340px, calc(100% - 16px));\n    padding: 8px 10px 10px;\n    box-sizing: border-box;\n    background: var(--md-sys-color-surface);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);\n  }\n  ox-canvas-bar button[publish] {\n    border: 1px solid var(--md-sys-color-outline);\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface);\n  }\n  ox-canvas-bar button[publish][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\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.js

@@ -1970,15 +1970,17 @@ let FigureEditor = class FigureEditor extends LitElement {
                     @part-live=${(e) => this.hold({}, e.detail.edit)}
                   ></figure-material-panel>
                   ${this.renderMore(part, view.palette ?? {}, unavailable)}`
-            : view.geometry.length === 0
-                ? html `${this.renderSubject()}<section empty-figure>
+            : view.loading || !view.context
+                ? nothing
+                : view.geometry.length === 0
+                    ? html `${this.renderSubject()}<section empty-figure>
                     <p>${i18next.t('figure.text.empty-figure-next')}</p>
                     <details>
                       <summary>${i18next.t('figure.label.figure-info-later')}</summary>
                       <slot name="figure"></slot>
                     </details>
                   </section>`
-                : html `${this.renderSubject()}<slot name="figure"></slot>`}
+                    : html `${this.renderSubject()}<slot name="figure"></slot>`}
           </div>
           <div panel ?off=${tab !== 'response'}>
             ${this.renderSubject()}