@things-factory/figure-ui 10.1.225 → 10.1.226

package/client/modeller/figure-preview.ts

@@ -2,6 +2,8 @@ import { css, html, LitElement, nothing, unsafeCSS } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
+import { unitWord } from './unit-words.js'
+import * as THREE from 'three'
 import { compileFigureAsset } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureDataRow, FigureDataValue, FigureGraphStateInput } from '@hatiolab/figure-model'
 import { create, figureLegendSourcesChanged, registerFigure, unregisterFigure } from '@hatiolab/things-scene'
@@ -68,6 +70,23 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       stage (the 1024 width, both side panels open) the controls lay over the help's button. One row that wraps keeps both
       whole: side by side when there is room, the controls above the help when there is not.
     */
+    /* A variant's name over its box: small, on the stage, never in the way of the pointer. */
+    div[tags] {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+      pointer-events: none;
+    }
+    div[tags] span {
+      position: absolute;
+      transform: translate(-50%, calc(-100% - 4px));
+      padding: 1px 6px;
+      white-space: nowrap;
+      font-size: var(--ui-t-micro, 11px);
+      color: rgba(255, 255, 255, 0.92);
+      background-color: rgba(28, 28, 30, 0.72);
+      border-radius: 4px;
+    }
     div[foot] {
       position: absolute;
       left: 8px;
@@ -328,6 +347,9 @@ export class FigurePreview extends localize(i18next)(LitElement) {
   }
 
   private scene?: SceneHandle
+  /* The eight variants named over each one, where the camera shows it (sweep 2026-10-27 M4). */
+  @state() private tags: { name: string; x: number; y: number }[] = []
+  private tagFrame = 0
   private standing?: string
   private registered?: string
   private watcher?: ResizeObserver
@@ -347,6 +369,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     /* The part the help speaks of: the one picked in it, else the one chosen in the editor, else the first. */
     const setupPart = setupPartOf(this.setupPart, this.selected, asset?.appearance.map(p => p.target) ?? [])
     return html`<div stage></div>
+      ${this.tags.length ? html`<div tags>${this.tags.map(t => html`<span style=${`left:${t.x}px;top:${t.y}px`}>${t.name}</span>`)}</div>` : nothing}
       ${this.cannot
         ? html`<div cannot>${this.cannot}</div>`
         : html`<div legend>
@@ -393,10 +416,50 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     </div>`
   }
 
+  /*
+    Each variant's name over its top, followed while the eight stand: the legend alone listed 「x · y · x·y …」 with
+    nothing saying which box was which (sweep 2026-10-27 M4).
+  */
+  private followTags() {
+    cancelAnimationFrame(this.tagFrame)
+    if (this.way !== 'eight' || !this.scene) {
+      if (this.tags.length) this.tags = []
+      return
+    }
+    const names = new Map(PREVIEW_WAYS.map(way => [`at-${way.name}`, way.axes.length ? way.name : i18next.t('figure.label.preview-base')]))
+    const box = new THREE.Box3()
+    const top = new THREE.Vector3()
+    const step = () => {
+      const root = this.scene?.root as { activeCamera3d?: THREE.Camera; renderer3d?: THREE.WebGLRenderer; components?: { model?: { id?: string }; _realObject?: { object3d?: THREE.Object3D } }[] } | undefined
+      const camera = root?.activeCamera3d
+      const canvas = root?.renderer3d?.domElement
+      if (!camera || !canvas || this.way !== 'eight') return
+      const at = canvas.getBoundingClientRect()
+      const host = this.getBoundingClientRect()
+      const tags: { name: string; x: number; y: number }[] = []
+      for (const component of root?.components ?? []) {
+        const name = names.get(component.model?.id ?? '')
+        const object = component._realObject?.object3d
+        if (!name || !object) continue
+        box.setFromObject(object)
+        if (box.isEmpty()) continue
+        box.getCenter(top)
+        top.y = box.max.y
+        top.project(camera)
+        if (top.z > 1) continue
+        tags.push({ name, x: Math.round((top.x * 0.5 + 0.5) * at.width + at.left - host.left), y: Math.round((-top.y * 0.5 + 0.5) * at.height + at.top - host.top) })
+      }
+      if (JSON.stringify(tags) !== JSON.stringify(this.tags)) this.tags = tags
+      this.tagFrame = requestAnimationFrame(step)
+    }
+    this.tagFrame = requestAnimationFrame(step)
+  }
+
   private chooseWay(way: 'one' | 'eight') {
     if (way === this.way) return
     this.way = way
     this.standUp()
+    this.followTags()
     /* The content is made again inside the scene standing, which keeps the camera: from one figure to eight it stood inside them. */
     requestAnimationFrame(() => this.fitView())
   }
@@ -434,7 +497,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
         const step = Math.max((control.max - control.min) / 100, 0.01)
         const label = asset.stateInputs?.[control.id]?.label ?? control.id
         return html`<label>
-          <span>${label} <span drive>${control.unit}</span></span>
+          <span>${label} <span drive>${unitWord(control.unit)}</span></span>
           ${this.renderDial(control, value)}
           <input
             type="range"
@@ -494,7 +557,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     if (node.kind === 'number') {
       const ranged = node.min !== undefined && node.max !== undefined && node.max > node.min
       return html`<label>
-        <span>${label} <span drive>${node.unit ?? ''}</span></span>
+        <span>${label} <span drive>${unitWord(node.unit)}</span></span>
         <span></span>
         ${ranged
           ? html`<input type="range" min=${node.min!} max=${node.max!} step=${Math.max((node.max! - node.min!) / 100, 0.01)} .value=${String(value ?? node.min)} @input=${(e: Event) => this.value(row, (e.target as HTMLInputElement).value)} />
@@ -679,6 +742,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
           this.cannot = ''
           this.tellLegends()
           this.tellSample()
+          this.followTags()
           return
         } catch {
           this.teardown()
@@ -698,12 +762,15 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       this.scene.root?.fitCameraToModel?.()
       this.cannot = ''
       this.tellSample()
+      this.followTags()
     } catch (error) {
       this.cannot = (error as Error).message
     }
   }
 
   private teardown() {
+    cancelAnimationFrame(this.tagFrame)
+    this.tags = []
     this.scene?.dispose?.()
     this.scene = undefined
     this.standing = undefined

package/client/modeller/figure-recipe-catalog.ts

@@ -218,8 +218,12 @@ export class FigureRecipeCatalog extends localize(i18next)(LitElement) {
         background: var(--md-sys-color-error-container);
         border-radius: 6px;
       }
+      /* The guide's titles under the recipe's own (13px): they stood at 18px over it (sweep 2026-10-27 U29). */
       ox-markdown {
         display: block;
+        --markdown-h1-font-size: var(--ui-t-body);
+        --markdown-h2-font-size: var(--ui-t-body);
+        --markdown-h3-font-size: var(--ui-t-small);
       }
     `
   ]

package/client/modeller/figure-slot-layout-panel.ts

@@ -3,6 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import '@material/web/icon/icon.js'
 import '@operato/slot-layout-editor'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { compileFigureAsset, type FigureAsset, type SlotLayout } from '@hatiolab/figure-model'
 
 import {
@@ -29,15 +30,30 @@ import {
  */
 @customElement('figure-slot-layout-panel')
 export class FigureSlotLayoutPanel extends localize(i18next)(LitElement) {
-  static styles = css`
+  /*
+    The panel's controls, and the shared editor given the same (sweep 2026-10-27 M2): its own 12px, boxed 24px fields and
+    right-aligned labels at 34% stood under the panel's 11.5px, 26px underlined fields and 72px labels.
+  */
+  static styles = [SidePanelStyles, css`
     :host {
       display: flex;
       flex-direction: column;
       gap: 6px;
     }
+    ox-slot-layout-editor {
+      --slot-layout-font-size: var(--ui-t-small, 11.5px);
+      --slot-layout-label-column: var(--figure-label-width);
+      --slot-layout-label-align: left;
+      --property-editor-field-height: var(--figure-control-height);
+      --slot-layout-field-border: 0 solid transparent;
+      --slot-layout-field-border-bottom: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+      --slot-layout-field-radius: 0;
+      --slot-layout-field-background: transparent;
+      --property-editor-label-color: var(--md-sys-color-on-surface-variant);
+    }
     div[form] {
       display: grid;
-      grid-template-columns: auto 1fr;
+      grid-template-columns: var(--figure-label-width) minmax(0, 1fr);
       gap: 4px 8px;
       align-items: center;
     }
@@ -77,7 +93,7 @@ export class FigureSlotLayoutPanel extends localize(i18next)(LitElement) {
     small[hint] {
       color: var(--md-sys-color-on-surface-variant);
     }
-  `
+  `]
 
   @property({ attribute: false }) asset?: FigureAsset
   /** The part selected on the canvas: what a new anchor stands on. */
@@ -133,14 +149,14 @@ export class FigureSlotLayoutPanel extends localize(i18next)(LitElement) {
               ${(['top', 'bottom'] as const).map(f => html`<option value=${f} ?selected=${f === a.face}>${i18next.t('figure.label.face-' + f)}</option>`)}
             </select>
             <button ?disabled=${this.locked || form.anchors.length <= 1} title=${i18next.t('figure.button.remove-slot-anchor')} @click=${() => this.edit({ anchors: form.anchors.filter((_, k) => k !== i) })}>
-              <md-icon>close</md-icon>
+              <md-icon>delete</md-icon>
             </button>
           </li>`
         )}
       </ul>
       <div actions>
         ${(['top', 'bottom'] as const).map(
-          face => html`<button ?disabled=${this.locked || !this.partId} @click=${() => this.addAnchor(face)}>
+          face => html`<button act ?disabled=${this.locked || !this.partId} @click=${() => this.addAnchor(face)}>
             <md-icon>add</md-icon>${i18next.t(face === 'top' ? 'figure.button.add-slot-anchor-top' : 'figure.button.add-slot-anchor-bottom', { part: this.partId })}
           </button>`
         )}
@@ -151,10 +167,10 @@ export class FigureSlotLayoutPanel extends localize(i18next)(LitElement) {
 
       <div actions>
         ${stored.layout && changed
-          ? html`<button ?disabled=${this.locked} @click=${() => this.apply(stored.layout)}><md-icon>check</md-icon>${i18next.t('figure.button.apply-slot-anchors')}</button>`
+          ? html`<button act ?disabled=${this.locked} @click=${() => this.apply(stored.layout)}><md-icon>check</md-icon>${i18next.t('figure.button.apply-slot-anchors')}</button>`
           : nothing}
         ${stored.layout
-          ? html`<button ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-slot-layout' })}><md-icon>delete</md-icon>${i18next.t('figure.button.remove-slot-layout')}</button>`
+          ? html`<button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-slot-layout' })}><md-icon>delete</md-icon>${i18next.t('figure.button.remove-slot-layout')}</button>`
           : nothing}
       </div>
     `
@@ -176,7 +192,8 @@ export class FigureSlotLayoutPanel extends localize(i18next)(LitElement) {
       presetSize: startSizeOf(form.anchors, anchorFaces, anchorRoomOf(form.anchors, geometry)),
       /* No layout yet: the whole face is one slot, shown at once and put in on Apply. */
       startFrom: 'single',
-      anchors: form.anchors.map(a => ({ id: a.id, label: `${a.id} · ${a.part} ${i18next.t('figure.label.face-' + a.face)}` })),
+      /* The face names its part: an anchor named as its part is not named twice (「tub · tub 윗면」, sweep 2026-10-27 M5). */
+      anchors: form.anchors.map(a => ({ id: a.id, label: `${a.id === a.part ? '' : `${a.id} · `}${a.part} ${i18next.t('figure.label.face-' + a.face)}` })),
       anchorFaces,
       validate: (layout: SlotLayout) => figureSlotIssues(layout, form.anchors.map(a => a.id)),
       issueText: (issue: { code: string; path: string }) =>

package/client/modeller/figure-verdict.ts

@@ -759,7 +759,10 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
             ? html`<p quiet>${i18next.t(this.asking ? 'figure.text.verdict-asking' : 'figure.text.verdict-waiting')}</p>`
             : blocking.length
               ? html`<p>${i18next.t('figure.text.cannot-release-now')}</p>`
-              : html`<p clear>${i18next.t('figure.text.nothing-blocks-release')}</p>`}
+              : this.revision && !this.revision.asset.appearance.length
+                ? /* No part: nothing to judge, not 「nothing blocks」 (sweep 2026-10-27 U24). */
+                  html`<p quiet>${i18next.t('figure.text.release-needs-a-part')}</p>`
+                : html`<p clear>${i18next.t('figure.text.nothing-blocks-release')}</p>`}
         ${blocking.length
           ? html`<ul gate>
               <li head>${i18next.t('figure.text.must-fix-to-release')}</li>

package/client/modeller/unit-words.ts

@@ -0,0 +1,11 @@
+import { i18next } from '@operato/i18n'
+
+/**
+ * A unit as the screen names it: the graph's codes (deg, percent, count …) are not words a person reads, and a unit
+ * typed by the author (rpm) stays as typed (sweep 2026-10-27 U9).
+ */
+export function unitWord(unit: string | undefined): string {
+  if (!unit) return ''
+  const key = `figure.label.unit-${unit}`
+  return i18next.exists(key) ? i18next.t(key) : unit
+}

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

@@ -499,9 +499,10 @@ export class FigureModellerPage extends PageView {
       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.
+        the rail matches the page name and marks "new figure" while an existing one is being edited. The address names
+        the figure before it is read: opened by its address, the rail marked "new figure" (sweep 2026-10-27 U30).
       */
-      menu: view.id ? 'figure-list' : undefined,
+      menu: view.id || this.lifecycle?.resourceId ? 'figure-list' : undefined,
       /* The canvas needs the width: the rail folds while the modeller is open and comes back as it was on leaving. */
       rail: 'collapsed',
       actions: [],

package/dist-client/modeller/consumer-capabilities.d.ts

@@ -1,11 +1,22 @@
 import type { FigureAsset } from '@hatiolab/figure-model';
 import { type FigureCapabilityDescriptor, type FigureCapabilitySetting } from '@hatiolab/things-scene';
+import { type Rung } from '@things-factory/figure-viewer/dist-client/capability-rung.js';
 /** The products' capabilities this modeller knows: registered descriptors with a namespaced name. */
 export declare const consumerDescriptors: () => FigureCapabilityDescriptor[];
 /** The products' capabilities the figure declares that this modeller has no descriptor for: kept, said, removable. */
 export declare function unknownConsumerNames(asset: FigureAsset): string[];
 /** What a capability still needs on this figure: a shared or a product's name not declared, or the item mark. */
 export declare function needsMissing(descriptor: FigureCapabilityDescriptor, asset: FigureAsset): string[];
+/**
+ * What a product's capability needs that the figure lacks, as the tab offers it: the item tag, and the rungs that would
+ * give the names it needs (Holdable | FlowNode and Capacity | FlowNode: hold or flow). Its own names are not shown to the
+ * author (sweep 2026-10-27 U19); `names` keeps a need no rung gives.
+ */
+export declare function needsOffered(descriptor: FigureCapabilityDescriptor, asset: FigureAsset): {
+    item: boolean;
+    rungs: Rung[];
+    names: string[];
+};
 /** The names with a product's capability put on or taken off; the shared ones as they are. */
 export declare function namesWith(asset: FigureAsset, name: string, on: boolean): string[];
 /** A capability's settings on the asset, or an empty object. */

package/dist-client/modeller/consumer-capabilities.js

@@ -6,6 +6,7 @@
  */
 import { isFigureConsumerCapability } from '@hatiolab/figure-model';
 import { figureCapabilityDescriptors } from '@hatiolab/things-scene';
+import { RUNGS } from '@things-factory/figure-viewer/dist-client/capability-rung.js';
 /** The products' capabilities this modeller knows: registered descriptors with a namespaced name. */
 export const consumerDescriptors = () => figureCapabilityDescriptors().filter(d => isFigureConsumerCapability(d.name));
 /** The products' capabilities the figure declares that this modeller has no descriptor for: kept, said, removable. */
@@ -19,6 +20,19 @@ export function needsMissing(descriptor, asset) {
     const has = (need) => (need === 'item' ? !!asset.item : names.has(need));
     return descriptor.needs.filter(need => (Array.isArray(need) ? !need.some(has) : !has(need))).map(need => (Array.isArray(need) ? need.join(' | ') : need));
 }
+/**
+ * What a product's capability needs that the figure lacks, as the tab offers it: the item tag, and the rungs that would
+ * give the names it needs (Holdable | FlowNode and Capacity | FlowNode: hold or flow). Its own names are not shown to the
+ * author (sweep 2026-10-27 U19); `names` keeps a need no rung gives.
+ */
+export function needsOffered(descriptor, asset) {
+    const missing = needsMissing(descriptor, asset);
+    const groups = descriptor.needs.filter(need => need !== 'item').map(need => (Array.isArray(need) ? need : [need]));
+    const gives = (rung) => groups.every(group => group.some(name => RUNGS[rung].includes(name)));
+    const lacking = missing.filter(m => m !== 'item');
+    const rungs = lacking.length ? ['hold', 'flow'].filter(gives) : [];
+    return { item: missing.includes('item'), rungs, names: lacking.length && !rungs.length ? lacking : [] };
+}
 /** The names with a product's capability put on or taken off; the shared ones as they are. */
 export function namesWith(asset, name, on) {
     const names = asset.document.capabilities.names ?? [];

package/dist-client/modeller/consumer-capabilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"consumer-capabilities.js","sourceRoot":"","sources":["../../client/modeller/consumer-capabilities.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * A product's capabilities in the modeller (ADR-0167 3, 9, 12): the descriptors registered with the scene, which ones\n * the figure wears, what each still needs, and its settings on the asset as its descriptor draws them -- parts picked,\n * an input and a value per fixed key. The descriptor's own check says what the settings lack. Kept apart from the\n * element so it is tested without a browser.\n */\nimport { isFigureConsumerCapability } from '@hatiolab/figure-model'\nimport type { FigureAsset } from '@hatiolab/figure-model'\nimport { figureCapabilityDescriptors, type FigureCapabilityDescriptor, type FigureCapabilitySetting } from '@hatiolab/things-scene'\n\n/** The products' capabilities this modeller knows: registered descriptors with a namespaced name. */\nexport const consumerDescriptors = (): FigureCapabilityDescriptor[] => figureCapabilityDescriptors().filter(d => isFigureConsumerCapability(d.name))\n\n/** The products' capabilities the figure declares that this modeller has no descriptor for: kept, said, removable. */\nexport function unknownConsumerNames(asset: FigureAsset): string[] {\n  const known = new Set(consumerDescriptors().map(d => d.name))\n  return (asset.document.capabilities.names ?? []).filter(n => isFigureConsumerCapability(n) && !known.has(n))\n}\n\n/** What a capability still needs on this figure: a shared or a product's name not declared, or the item mark. */\nexport function needsMissing(descriptor: FigureCapabilityDescriptor, asset: FigureAsset): string[] {\n  const names = new Set(asset.document.capabilities.names ?? [])\n  const has = (need: string) => (need === 'item' ? !!asset.item : names.has(need))\n  return descriptor.needs.filter(need => (Array.isArray(need) ? !need.some(has) : !has(need as string))).map(need => (Array.isArray(need) ? need.join(' | ') : (need as string)))\n}\n\n/** The names with a product's capability put on or taken off; the shared ones as they are. */\nexport function namesWith(asset: FigureAsset, name: string, on: boolean): string[] {\n  const names = asset.document.capabilities.names ?? []\n  return on ? [...new Set([...names, name])] : names.filter(n => n !== name)\n}\n\n/** A capability's settings on the asset, or an empty object. */\nexport const settingsOf = (asset: FigureAsset, name: string): Record<string, unknown> => ({ ...(asset.document.capabilities.extensions?.[name] ?? {}) })\n\n/** The parts a parts setting holds. */\nexport function partsAt(settings: Record<string, unknown>, key: string): string[] {\n  const v = settings[key]\n  return Array.isArray(v) ? v.filter((x): x is string => typeof x === 'string') : []\n}\n\n/** The settings with a parts setting changed; none is left out. */\nexport function withParts(settings: Record<string, unknown>, key: string, parts: string[]): Record<string, unknown> {\n  const next = { ...settings }\n  if (parts.length) next[key] = [...parts]\n  else delete next[key]\n  return next\n}\n\n/** An input table as held: the input, and a value per fixed key (the descriptor's start where none is given yet). */\nexport function inputTableAt(settings: Record<string, unknown>, setting: Extract<FigureCapabilitySetting, { kind: 'input-table' }>): { input?: string; values: Record<string, number> } {\n  const v = settings[setting.key] as { input?: unknown; values?: Record<string, unknown> } | undefined\n  const values = Object.fromEntries(setting.keys.map(k => [k, typeof v?.values?.[k] === 'number' ? (v.values[k] as number) : setting.start[k]!]))\n  return { ...(typeof v?.input === 'string' ? { input: v.input } : {}), values }\n}\n\n/** The settings with an input table changed: an input chosen writes every fixed key's value; none takes the table away. */\nexport function withInputTable(settings: Record<string, unknown>, setting: Extract<FigureCapabilitySetting, { kind: 'input-table' }>, input: string | undefined, values: Record<string, number>): Record<string, unknown> {\n  const next = { ...settings }\n  if (input) next[setting.key] = { input, values: Object.fromEntries(setting.keys.map(k => [k, values[k] ?? setting.start[k]!])) }\n  else delete next[setting.key]\n  return next\n}\n\n/** What the capability's own check says of the settings now; nothing when it has no check. */\nexport const settingsIssues = (descriptor: FigureCapabilityDescriptor, asset: FigureAsset): string[] => descriptor.check?.(asset.document.capabilities.extensions?.[descriptor.name], asset) ?? []\n"]}
+{"version":3,"file":"consumer-capabilities.js","sourceRoot":"","sources":["../../client/modeller/consumer-capabilities.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * A product's capabilities in the modeller (ADR-0167 3, 9, 12): the descriptors registered with the scene, which ones\n * the figure wears, what each still needs, and its settings on the asset as its descriptor draws them -- parts picked,\n * an input and a value per fixed key. The descriptor's own check says what the settings lack. Kept apart from the\n * element so it is tested without a browser.\n */\nimport { isFigureConsumerCapability } from '@hatiolab/figure-model'\nimport type { FigureAsset } from '@hatiolab/figure-model'\nimport { figureCapabilityDescriptors, type FigureCapabilityDescriptor, type FigureCapabilitySetting } from '@hatiolab/things-scene'\nimport { RUNGS, type Rung } from '@things-factory/figure-viewer/dist-client/capability-rung.js'\n\n/** The products' capabilities this modeller knows: registered descriptors with a namespaced name. */\nexport const consumerDescriptors = (): FigureCapabilityDescriptor[] => figureCapabilityDescriptors().filter(d => isFigureConsumerCapability(d.name))\n\n/** The products' capabilities the figure declares that this modeller has no descriptor for: kept, said, removable. */\nexport function unknownConsumerNames(asset: FigureAsset): string[] {\n  const known = new Set(consumerDescriptors().map(d => d.name))\n  return (asset.document.capabilities.names ?? []).filter(n => isFigureConsumerCapability(n) && !known.has(n))\n}\n\n/** What a capability still needs on this figure: a shared or a product's name not declared, or the item mark. */\nexport function needsMissing(descriptor: FigureCapabilityDescriptor, asset: FigureAsset): string[] {\n  const names = new Set(asset.document.capabilities.names ?? [])\n  const has = (need: string) => (need === 'item' ? !!asset.item : names.has(need))\n  return descriptor.needs.filter(need => (Array.isArray(need) ? !need.some(has) : !has(need as string))).map(need => (Array.isArray(need) ? need.join(' | ') : (need as string)))\n}\n\n/**\n * What a product's capability needs that the figure lacks, as the tab offers it: the item tag, and the rungs that would\n * give the names it needs (Holdable | FlowNode and Capacity | FlowNode: hold or flow). Its own names are not shown to the\n * author (sweep 2026-10-27 U19); `names` keeps a need no rung gives.\n */\nexport function needsOffered(descriptor: FigureCapabilityDescriptor, asset: FigureAsset): { item: boolean; rungs: Rung[]; names: string[] } {\n  const missing = needsMissing(descriptor, asset)\n  const groups = descriptor.needs.filter(need => need !== 'item').map(need => (Array.isArray(need) ? need : [need as string]))\n  const gives = (rung: Rung) => groups.every(group => group.some(name => (RUNGS[rung] as readonly string[]).includes(name)))\n  const lacking = missing.filter(m => m !== 'item')\n  const rungs = lacking.length ? (['hold', 'flow'] as const).filter(gives) : []\n  return { item: missing.includes('item'), rungs, names: lacking.length && !rungs.length ? lacking : [] }\n}\n\n/** The names with a product's capability put on or taken off; the shared ones as they are. */\nexport function namesWith(asset: FigureAsset, name: string, on: boolean): string[] {\n  const names = asset.document.capabilities.names ?? []\n  return on ? [...new Set([...names, name])] : names.filter(n => n !== name)\n}\n\n/** A capability's settings on the asset, or an empty object. */\nexport const settingsOf = (asset: FigureAsset, name: string): Record<string, unknown> => ({ ...(asset.document.capabilities.extensions?.[name] ?? {}) })\n\n/** The parts a parts setting holds. */\nexport function partsAt(settings: Record<string, unknown>, key: string): string[] {\n  const v = settings[key]\n  return Array.isArray(v) ? v.filter((x): x is string => typeof x === 'string') : []\n}\n\n/** The settings with a parts setting changed; none is left out. */\nexport function withParts(settings: Record<string, unknown>, key: string, parts: string[]): Record<string, unknown> {\n  const next = { ...settings }\n  if (parts.length) next[key] = [...parts]\n  else delete next[key]\n  return next\n}\n\n/** An input table as held: the input, and a value per fixed key (the descriptor's start where none is given yet). */\nexport function inputTableAt(settings: Record<string, unknown>, setting: Extract<FigureCapabilitySetting, { kind: 'input-table' }>): { input?: string; values: Record<string, number> } {\n  const v = settings[setting.key] as { input?: unknown; values?: Record<string, unknown> } | undefined\n  const values = Object.fromEntries(setting.keys.map(k => [k, typeof v?.values?.[k] === 'number' ? (v.values[k] as number) : setting.start[k]!]))\n  return { ...(typeof v?.input === 'string' ? { input: v.input } : {}), values }\n}\n\n/** The settings with an input table changed: an input chosen writes every fixed key's value; none takes the table away. */\nexport function withInputTable(settings: Record<string, unknown>, setting: Extract<FigureCapabilitySetting, { kind: 'input-table' }>, input: string | undefined, values: Record<string, number>): Record<string, unknown> {\n  const next = { ...settings }\n  if (input) next[setting.key] = { input, values: Object.fromEntries(setting.keys.map(k => [k, values[k] ?? setting.start[k]!])) }\n  else delete next[setting.key]\n  return next\n}\n\n/** What the capability's own check says of the settings now; nothing when it has no check. */\nexport const settingsIssues = (descriptor: FigureCapabilityDescriptor, asset: FigureAsset): string[] => descriptor.check?.(asset.document.capabilities.extensions?.[descriptor.name], asset) ?? []\n"]}

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

@@ -18,7 +18,8 @@ export const EditorStyles = css `
   /* 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;
+    /* The bar's height, beside its 32px icons and the save (sweep 2026-10-27 U25). */
+    height: 32px;
     border: 1px solid transparent;
     padding: 0 10px;
     border-radius: 999em;
@@ -206,6 +207,22 @@ export const EditorStyles = css `
     margin-top: 4px;
     color: var(--md-sys-color-on-surface-variant);
   }
+  div[start] button[start-more] {
+    display: block;
+    text-align: left;
+    margin: 4px 0 0;
+    padding: 0;
+    font: inherit;
+    font-size: var(--ui-t-small);
+    color: var(--md-sys-color-primary);
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  /* No rule under the last way to start: it closed nothing (sweep 2026-10-27 U23). */
+  div[start-paths] > section:last-of-type {
+    border-bottom: none;
+  }
   /* The side: tabs over one panel at a time, each using the whole height. */
   /*
     The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8b9B,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    /* The bar's height, beside its 32px icons and the save (sweep 2026-10-27 U25). */\n    height: 32px;\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  div[start] button[start-more] {\n    display: block;\n    text-align: left;\n    margin: 4px 0 0;\n    padding: 0;\n    font: inherit;\n    font-size: var(--ui-t-small);\n    color: var(--md-sys-color-primary);\n    background: none;\n    border: none;\n    cursor: pointer;\n  }\n  /* No rule under the last way to start: it closed nothing (sweep 2026-10-27 U23). */\n  div[start-paths] > section:last-of-type {\n    border-bottom: none;\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"]}