@things-factory/figure-ui 10.1.47 → 10.1.49

package/client/modeller/v3-links.ts

@@ -252,3 +252,11 @@ export function rangeDiffers(a: V3SizeRange, b: V3SizeRange): boolean {
   return AXES.some(axis => Math.abs(a[axis].min - b[axis].min) > 1e-3 || Math.abs(a[axis].max - b[axis].max) > 1e-3)
 }
 
+/**
+ * Whether the figure is a mechanism -- a part turns about a joint. Such a figure should grow by one ratio (chief
+ * architect's ruling 2026-09-24); the modeller proposes it, the author declares it.
+ */
+export function turnsAboutAJoint(asset: V3Asset): boolean {
+  return modelOf(asset).nodes.some(n => n.op === 'axis-turn@1')
+}
+

package/client/modeller/v3-stage-model.ts

@@ -126,6 +126,30 @@ export function gizmoResultOf(part: V3RenderPart, after: Record<string, unknown>
   return result
 }
 
+/**
+ * A drag as amounts, for a part whose place is worked out (`nudge-part`): how far its origin moved and how far each of
+ * its angles turned (rigid@1's order, degrees). Nothing on an axis that did not change.
+ */
+export function nudgeOf(part: V3RenderPart, result: GizmoResult): { by: Partial<Record<'x' | 'y' | 'z', number>>; turn: Partial<Record<'x' | 'y' | 'z', number>> } {
+  const axes = ['x', 'y', 'z'] as const
+  const by: Partial<Record<'x' | 'y' | 'z', number>> = {}
+  const turn: Partial<Record<'x' | 'y' | 'z', number>> = {}
+  if (result.position) axes.forEach((axis, i) => {
+    const d = round(result.position![i]! - (part.pose.t[i] as number))
+    if (Math.abs(d) > 1e-6) by[axis] = d
+  })
+  if (result.rotation) {
+    const r = part.pose.r
+    const now = new THREE.Euler().setFromRotationMatrix(new THREE.Matrix4().set(r[0]![0]!, r[0]![1]!, r[0]![2]!, 0, r[1]![0]!, r[1]![1]!, r[1]![2]!, 0, r[2]![0]!, r[2]![1]!, r[2]![2]!, 0, 0, 0, 0, 1), 'XYZ')
+    const was: number[] = [now.x, now.y, now.z].map(radians => (radians * 180) / Math.PI)
+    axes.forEach((axis, i) => {
+      const d = round(result.rotation![i]! - was[i]!)
+      if (Math.abs(d) > 1e-6) turn[axis] = d
+    })
+  }
+  return { by, turn }
+}
+
 /** The keys of `next` whose values differ from `current` -- only those are set, so the scene raises no echo. */
 export function changedKeys(current: Record<string, unknown>, next: Record<string, unknown>): Record<string, unknown> | null {
   const diff: Record<string, unknown> = {}

package/client/modeller/v3-thumbnail.ts

@@ -11,8 +11,9 @@ import type { V3RenderPart } from './v3-renderer.js'
  *
  * 저작면의 캔버스는 저작자가 돌려 둔 각도와 확대로 서 있다. 그것을 찍으면 카드마다 프레임이
  * 달라지고, 방금 확대해 보던 나사 하나가 그 자산의 얼굴이 된다. 목록은 견주는 자리이므로 그림은
- * **정해진 크기와 정해진 카메라**로 찍는다. `figure-v3-canvas` 의 `thumbnail()` 은 보이는 캔버스를
- * 그대로 뽑으므로 카드용이 아니다 — 여기서는 새로 세운 캔버스가 스스로 `fit()` 한 자리에서 찍는다.
+ * **정해진 크기와 정해진 카메라**로 찍는다 — 새로 세운 캔버스(`viewOnly`)가 스스로 `fit()` 한 자리에서
+ * `snapshot()` 으로 찍는다. 캔버스가 씬 위로 옮겨 가면서 찍는 길이 빠졌고, 그동안 저장은 그림 없이 갔다
+ * (사용자 2026-09-24).
  *
  * ## 왜 서버가 아니라 브라우저인가
  *
@@ -37,7 +38,8 @@ interface Shooter extends HTMLElement {
   parts?: V3RenderPart[]
   palette?: Record<string, string>
   context?: string
-  thumbnail?: () => string | undefined
+  viewOnly?: boolean
+  snapshot?: (width?: number, height?: number) => Promise<string | undefined>
   fit?: () => void
 }
 
@@ -74,6 +76,7 @@ export async function captureV3Thumbnail(
   shooter.parts = parts
   shooter.palette = palette
   shooter.context = 'thumbnail'
+  shooter.viewOnly = true
   shooter.style.cssText = 'display: block; width: 100%; height: 100%;'
 
   try {
@@ -82,7 +85,8 @@ export async function captureV3Thumbnail(
       (async () => {
         await settle()
         shooter.fit?.()
-        return shooter.thumbnail?.()
+        await settle()
+        return shooter.snapshot ? await shooter.snapshot(WIDTH, HEIGHT) : undefined
       })(),
       PATIENCE
     )

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

@@ -15,7 +15,7 @@ export declare class FigureV3Capability extends FigureV3Capability_base {
     /** The selected part, whose places are marked. */
     selected: string;
     locked: boolean;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     private setRung;
     private pick;
 }

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

@@ -18,7 +18,7 @@ export declare class FigureV3Clips extends FigureV3Clips_base {
     /** Where each clip is scrubbed to, in seconds. */
     private at;
     private adding;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     private renderClip;
     private renderTrack;
     private renderAdd;

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

@@ -22,7 +22,7 @@ export declare class FigureV3Controls extends FigureV3Controls_base {
     private open;
     /** Values in hand while a slider is dragged: the dial and the number follow them before the release commits. */
     private live;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     private renderControl;
     private renderDial;
     private renderSettings;

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

@@ -30,7 +30,7 @@ export declare class FigureV3Links extends FigureV3Links_base {
     private fasten;
     private motion;
     private place;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     /** Where things are held on this part: a seat things rest on, or a grip things are held in (parity row ⑤). */
     private renderPlaces;
     /** The figure holds things: `Capacity` and `Holdable`, the ladder's middle rung. One part edit, one undo step. */

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

@@ -26,7 +26,7 @@ export declare class FigureV3Material extends FigureV3Material_base {
     locked: boolean;
     /** The glow while its slider is dragged: shown beside it and drawn on the canvas, recorded on release. */
     private glowing?;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     private renderSegments;
     private swatches;
     private offered;

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

@@ -22,6 +22,8 @@ export interface V3PartRow {
     hidden?: boolean;
     /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */
     invisible?: boolean;
+    /** 되풀이한 부품이면 지금 몇 개로 그려지나. 되풀이는 한 부품이다 — 한 줄로 보인다. */
+    copies?: number;
 }
 /** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */
 export type V3PaletteKind = V3PrimitiveCreation['kind'] | 'plate' | 'wall';
@@ -38,7 +40,18 @@ export declare class FigureV3Parts extends FigureV3Parts_base {
      * 기준이 저작을 이끈다(V2 모델러의 정체성). 등급이 D 면 무엇이 넘쳤는지를 적는다. 누르면 성숙도 탭이 열린다.
      */
     budget?: V3BudgetLine;
+    /**
+     * 디테일 등급의 부품 한도 — V2 의 S/M/L(사용자 2026-09-24). 부품을 넣기 **전에** 몇 개 남았는지 보이고, 다 차면 팔레트가
+     * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.
+     */
+    partBudget?: {
+        level: 'S' | 'M' | 'L' | null;
+        used: number;
+        limit: number | null;
+    };
     render(): import("lit-html").TemplateResult<1>;
+    /** 디테일 등급 — 고르면 한도가 바뀐다. V2 의 자리 그대로, 목록 머리 아래. */
+    private renderLevel;
     private renderBudget;
     /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */
     private renderShowAll;

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

@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { ScrollbarStyles } from '@operato/styles';
+import { PART_LIMIT } from '@hatiolab/figure-model';
 import { partLabelOf } from './v3-fields.js';
 /** 제공자마다의 아이콘. Material Symbols 이름이다. */
 const PROVIDER_ICON = {
@@ -27,7 +28,7 @@ const RECIPES = [
     { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
     { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
     { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
-    { kind: 'wall', icon: 'wall', label: 'figure.label.primitive-wall' },
+    { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
     { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
 ];
 let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
@@ -121,25 +122,61 @@ let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
         font-style: normal;
         color: var(--md-sys-color-error);
       }
+      span[room][full] {
+        color: var(--md-sys-color-error);
+        font-weight: 600;
+      }
+      p[full] {
+        margin: 4px 0 0;
+        font-size: 0.68rem;
+        color: var(--md-sys-color-error);
+      }
+      div[level] {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        align-items: center;
+        gap: 6px;
+        margin: 0 0 6px;
+        font-size: 0.68rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[level] select {
+        min-width: 0;
+        padding: 2px 4px;
+        font: inherit;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface-container-lowest);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+      }
+      small[copies] {
+        color: var(--md-sys-color-on-surface-variant);
+      }
       span[room] {
         font-size: 0.7rem;
         font-weight: 400;
         letter-spacing: 0;
         text-transform: none;
       }
+      /* Three to a row, small (user, 2026-09-24): the palette is reached for, not read -- the list below is what grows. */
       div[palette] {
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 4px;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 3px;
       }
       button[shape] {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 2px;
-        padding: 7px 2px 5px 2px;
+        gap: 1px;
+        min-width: 0;
+        padding: 5px 1px 4px;
         font: var(--label-font, inherit);
-        font-size: 0.66rem;
+        font-size: 0.6rem;
+        line-height: 1.2;
+        text-align: center;
+        overflow-wrap: anywhere;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
         background: none;
         border: 1px solid var(--md-sys-color-outline-variant);
@@ -156,7 +193,7 @@ let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
         cursor: default;
       }
       button[shape] md-icon {
-        --md-icon-size: 20px;
+        --md-icon-size: 18px;
       }
       ol {
         margin: 0;
@@ -287,6 +324,8 @@ let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
     `
     ]; }
     render() {
+        const b = this.partBudget;
+        const full = !!b && b.limit !== null && b.used >= b.limit;
         return html `
       <section>
         <h3>${i18next.t('figure.label.shapes')}</h3>
@@ -294,8 +333,8 @@ let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
           ${RECIPES.map(recipe => html `
               <button
                 shape
-                ?disabled=${this.locked}
-                title=${i18next.t(recipe.label)}
+                ?disabled=${this.locked || full}
+                title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t(recipe.label)}
                 @click=${() => this.ask('add-part', { kind: recipe.kind })}
               >
                 <md-icon>${recipe.icon}</md-icon>
@@ -303,14 +342,18 @@ let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
               </button>
             `)}
         </div>
+        ${full ? html `<p full>${i18next.t('figure.text.part-limit-reached-short', { level: b.level, limit: b.limit })}</p>` : nothing}
       </section>
 
       <section list>
         <h3>
           <span>${i18next.t('figure.label.parts')}</span>
-          <span room>${this.parts.length}</span>
+          <span room ?full=${full} title=${i18next.t('figure.text.limit-comes-from-level')}
+            >${b && b.limit !== null ? i18next.t('figure.text.n-of-limit', { used: b.used, limit: b.limit }) : (b?.used ?? this.parts.length)}</span
+          >
           ${this.renderShowAll()}
         </h3>
+        ${this.renderLevel()}
         ${this.renderBudget()}
         ${this.parts.length === 0
             ? html `<p quiet>${i18next.t('figure.text.no-parts-yet')}</p>`
@@ -320,6 +363,29 @@ let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
       </section>
     `;
     }
+    /** 디테일 등급 — 고르면 한도가 바뀐다. V2 의 자리 그대로, 목록 머리 아래. */
+    renderLevel() {
+        const b = this.partBudget;
+        if (!b)
+            return nothing;
+        return html `<div level>
+      <label for="detail-level">${i18next.t('figure.label.detail-level')}</label>
+      <select
+        id="detail-level"
+        title=${i18next.t('figure.text.detail-level-explained')}
+        ?disabled=${this.locked}
+        @change=${(e) => {
+            const value = e.target.value;
+            this.dispatchEvent(new CustomEvent('set-detail-level', { detail: { level: value || null }, bubbles: true, composed: true }));
+        }}
+      >
+        <option value="" ?selected=${!b.level}>${i18next.t('figure.label.detail-none')}</option>
+        ${['S', 'M', 'L'].map(one => html `<option value=${one} ?selected=${one === b.level}>
+            ${one} ${i18next.t('figure.label.detail-' + one)} · ${i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}
+          </option>`)}
+      </select>
+    </div>`;
+    }
     renderBudget() {
         const b = this.budget;
         if (!b || !this.parts.length)
@@ -393,7 +459,7 @@ let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
         </button>
         <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>
         <span label title=${part.id}
-          >${partLabelOf(part.id)}${part.invisible ? html `<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
+          >${partLabelOf(part.id)}${part.copies ? html ` <small copies>× ${part.copies}</small>` : nothing}${part.invisible ? html `<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
         >
         ${selected ? this.renderOps(part.id, index) : nothing}
       </li>
@@ -445,6 +511,10 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], FigureV3Parts.prototype, "budget", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureV3Parts.prototype, "partBudget", void 0);
 FigureV3Parts = __decorate([
     customElement('figure-v3-parts')
 ], FigureV3Parts);

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

@@ -1 +1 @@
-{"version":3,"file":"figure-v3-parts.js","sourceRoot":"","sources":["../../client/modeller/figure-v3-parts.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport type { V3PrimitiveCreation } from '@hatiolab/figure-model'\nimport type { V3BudgetLine } from './v3-maturity.js'\nimport { partLabelOf } from './v3-fields.js'\n\n/**\n * 도형 팔레트와 부품 목록 — V3 자산의 것.\n *\n * `figure-parts`(V2) 와 **같은 자리, 같은 조작, 같은 낱말**이다. 저작자가 V2 에서 익힌 손이 그대로\n * 가야 한다: 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.\n *\n * 다른 것은 읽는 대상뿐이다. V2 는 부품의 `primitive` 를 읽었고 여기서는 V3 평가가 준 `provider` 를\n * 읽는다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라\n * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.\n *\n * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다 — V2 와 같은 규칙, 같은 사건 이름.\n */\n\n/** 한 줄 — V3 평가에서 이 패널이 읽는 것만. */\nexport interface V3PartRow {\n  id: string\n  provider: string\n  /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */\n  hidden?: boolean\n  /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */\n  invisible?: boolean\n}\n\n/** 제공자마다의 아이콘. Material Symbols 이름이다. */\nconst PROVIDER_ICON: Record<string, string> = {\n  box: 'deployed_code',\n  cylinder: 'database',\n  ellipticCylinder: 'database',\n  frustum: 'change_history',\n  sphere: 'circle',\n  roundedBox: 'crop_square',\n  roundedBoxXZ: 'crop_square',\n  hollowBox: 'check_box_outline_blank',\n  hollowBoxXZ: 'check_box_outline_blank',\n  polygon: 'pentagon',\n  portal: 'door_front'\n}\n\n/** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */\n/*\n  The palette: V2's shapes. A plate and a wall are boxes of a shape a person reaches for (V2 drew both as boxes), so\n  they are starting sizes, not kinds of their own.\n*/\nexport type V3PaletteKind = V3PrimitiveCreation['kind'] | 'plate' | 'wall'\nconst RECIPES: Array<{ kind: V3PaletteKind; icon: string; label: string }> = [\n  { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },\n  { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },\n  { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rounded-box' },\n  { kind: 'sphere', icon: 'circle', label: 'figure.label.primitive-sphere' },\n  { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },\n  { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },\n  { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },\n  { kind: 'wall', icon: 'wall', label: 'figure.label.primitive-wall' },\n  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }\n]\n\n@customElement('figure-v3-parts')\nexport class FigureV3Parts extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow: hidden;\n        background-color: var(--md-sys-color-surface-container-lowest);\n        /* The divider beside it is the editor's frame's (ox-three-pane). */\n        color: var(--md-sys-color-on-surface);\n        font: var(--label-font, inherit);\n        font-size: 0.76rem;\n        /* Folds by its own width: the editor gives this column 140 px when it has two columns (UX, 2026-09-24). */\n        container-type: inline-size;\n      }\n      section {\n        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      }\n      section[list] {\n        flex: 1;\n        min-height: 0;\n        overflow-y: auto;\n      }\n      h3 {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 6px;\n        margin: 0 0 6px 0;\n        font-size: var(--ui-t-micro, 11px);\n        font-weight: 700;\n        letter-spacing: 0.04em;\n        text-transform: uppercase;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      /* The cost line: the grade's letter in its colour, then what the figure costs. */\n      button[budget] {\n        display: flex;\n        align-items: flex-start;\n        gap: 6px;\n        width: 100%;\n        margin: 0 0 6px;\n        padding: 4px 6px;\n        font: inherit;\n        font-size: 0.68rem;\n        line-height: 1.5;\n        text-align: left;\n        color: var(--md-sys-color-on-surface-variant);\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      button[budget]:hover {\n        background: var(--md-sys-color-surface-container);\n      }\n      button[budget] b {\n        flex: none;\n        min-width: 16px;\n        text-align: center;\n        border-radius: 4px;\n        color: var(--md-sys-color-on-primary-container);\n        background: var(--md-sys-color-primary-container);\n      }\n      button[budget][grade='C'] b {\n        color: var(--md-sys-color-on-tertiary-container);\n        background: var(--md-sys-color-tertiary-container);\n      }\n      button[budget][grade='D'] {\n        border-color: var(--md-sys-color-error);\n      }\n      button[budget][grade='D'] b {\n        color: var(--md-sys-color-on-error);\n        background: var(--md-sys-color-error);\n      }\n      button[budget] em {\n        display: block;\n        font-style: normal;\n        color: var(--md-sys-color-error);\n      }\n      span[room] {\n        font-size: 0.7rem;\n        font-weight: 400;\n        letter-spacing: 0;\n        text-transform: none;\n      }\n      div[palette] {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 4px;\n      }\n      button[shape] {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 2px;\n        padding: 7px 2px 5px 2px;\n        font: var(--label-font, inherit);\n        font-size: 0.66rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      button[shape]:hover:not([disabled]) {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n        border-color: transparent;\n      }\n      button[shape][disabled] {\n        opacity: 0.35;\n        cursor: default;\n      }\n      button[shape] md-icon {\n        --md-icon-size: 20px;\n      }\n      ol {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      li {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 4px 6px;\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      li:hover {\n        background-color: var(--md-sys-color-surface-container);\n      }\n      li[selected] {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n      }\n      li md-icon {\n        --md-icon-size: 16px;\n        flex: none;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      button[eye][all] {\n        margin-left: auto;\n        opacity: 0.75;\n      }\n      button[eye][all]:hover {\n        opacity: 1;\n      }\n      button[eye] {\n        display: flex;\n        flex: none;\n        padding: 1px;\n        color: inherit;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n        opacity: 0;\n      }\n      li:hover button[eye],\n      li[selected] button[eye],\n      button[eye][off] {\n        opacity: 1;\n      }\n      button[eye][off] {\n        color: var(--md-sys-color-tertiary);\n      }\n      button[eye] md-icon {\n        --md-icon-size: 15px;\n        color: inherit;\n      }\n      li[off] span[label],\n      li[off] > md-icon,\n      li[invisible] span[label],\n      li[invisible] > md-icon {\n        opacity: 0.45;\n      }\n      li[selected] md-icon {\n        color: inherit;\n      }\n      span[label] {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-size: 0.78rem;\n      }\n      span[label] small {\n        margin-left: 4px;\n        font-size: 0.66rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      div[ops] {\n        display: none;\n        gap: 1px;\n      }\n      li[selected] div[ops] {\n        display: flex;\n      }\n      div[ops] button {\n        display: flex;\n        padding: 2px;\n        color: inherit;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      div[ops] button:hover:not([disabled]) {\n        background-color: var(--md-sys-color-surface-container-lowest);\n      }\n      div[ops] button[disabled] {\n        opacity: 0.3;\n        cursor: default;\n      }\n      div[ops] md-icon {\n        --md-icon-size: 15px;\n        color: inherit;\n      }\n      /*\n        Under 200 px the selected row's four buttons pushed its name out and the last one past the edge (seen at 140,\n        2026-09-24). They go to a line of their own under the name.\n      */\n      @container (max-width: 199px) {\n        li[selected] {\n          flex-wrap: wrap;\n        }\n        li[selected] div[ops] {\n          flex-basis: 100%;\n          justify-content: flex-end;\n        }\n      }\n      p[quiet] {\n        margin: 0;\n        font-size: 0.76rem;\n        line-height: 1.6;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n    `\n  ]\n\n  @property({ type: Array }) parts: V3PartRow[] = []\n  /** 고른 부품의 id. 자리(index)가 아니다 — V3 부품은 id 로 안정하게 가리킨다. */\n  @property({ type: String }) selected = ''\n  /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */\n  @property({ type: Boolean }) locked = false\n  /**\n   * 이 도형이 치르는 값 — 삼각형 · 묶음 · 한 화면에 몇 대 · 등급. 부품을 더하는 바로 그 자리에서 보여야 로우폴리의\n   * 기준이 저작을 이끈다(V2 모델러의 정체성). 등급이 D 면 무엇이 넘쳤는지를 적는다. 누르면 성숙도 탭이 열린다.\n   */\n  @property({ attribute: false }) budget?: V3BudgetLine\n\n  render() {\n    return html`\n      <section>\n        <h3>${i18next.t('figure.label.shapes')}</h3>\n        <div palette>\n          ${RECIPES.map(\n            recipe => html`\n              <button\n                shape\n                ?disabled=${this.locked}\n                title=${i18next.t(recipe.label)}\n                @click=${() => this.ask('add-part', { kind: recipe.kind })}\n              >\n                <md-icon>${recipe.icon}</md-icon>\n                <span>${i18next.t(recipe.label)}</span>\n              </button>\n            `\n          )}\n        </div>\n      </section>\n\n      <section list>\n        <h3>\n          <span>${i18next.t('figure.label.parts')}</span>\n          <span room>${this.parts.length}</span>\n          ${this.renderShowAll()}\n        </h3>\n        ${this.renderBudget()}\n        ${this.parts.length === 0\n          ? html`<p quiet>${i18next.t('figure.text.no-parts-yet')}</p>`\n          : html`<ol>\n              ${this.parts.map((part, index) => this.renderRow(part, index))}\n            </ol>`}\n      </section>\n    `\n  }\n\n  private renderBudget() {\n    const b = this.budget\n    if (!b || !this.parts.length) return nothing\n    const over = b.grade === 'D'\n    return html`<button\n      budget\n      grade=${b.grade}\n      title=${i18next.t('figure.text.parts-budget-open')}\n      @click=${() => this.dispatchEvent(new CustomEvent('show-maturity', { bubbles: true, composed: true }))}\n    >\n      <b>${b.grade}</b>\n      <span>\n        ${i18next.t('figure.text.parts-budget', {\n          triangles: b.triangles.toLocaleString(),\n          groups: b.groups.toLocaleString(),\n          instances: b.instances.toLocaleString()\n        })}\n        ${over\n          ? html`<em\n              >${i18next.t('figure.text.parts-budget-over', {\n                budget: i18next.t('figure.label.budget-' + b.tightest.key),\n                used: b.tightest.used.toLocaleString(),\n                limit: b.tightest.limit.toLocaleString()\n              })}</em\n            >`\n          : nothing}\n      </span>\n    </button>`\n  }\n\n  /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */\n  private renderShowAll() {\n    if (this.parts.length === 0) return nothing\n    const anyHidden = this.parts.some(part => part.hidden)\n    return html`\n      <button\n        eye\n        all\n        ?off=${!anyHidden}\n        title=${i18next.t(anyHidden ? 'figure.text.show-all-parts' : 'figure.text.hide-all-parts')}\n        @click=${(e: Event) => {\n          e.stopPropagation()\n          this.ask('set-all-parts-hidden', { hidden: !anyHidden })\n        }}\n      >\n        <md-icon>${anyHidden ? 'visibility' : 'visibility_off'}</md-icon>\n      </button>\n    `\n  }\n\n  private renderRow(part: V3PartRow, index: number) {\n    const selected = part.id === this.selected\n    const off = !!part.hidden\n    return html`\n      <li\n        ?selected=${selected}\n        ?off=${off}\n        ?invisible=${!!part.invisible}\n        @click=${() => this.ask('select-part', { id: part.id })}\n      >\n        <button\n          eye\n          ?off=${off}\n          title=${i18next.t(off ? 'figure.text.show-this-part' : 'figure.text.hide-this-part')}\n          @click=${(e: Event) => {\n            e.stopPropagation()\n            this.ask('toggle-part-hidden', { id: part.id })\n          }}\n        >\n          <md-icon>${off ? 'visibility_off' : 'visibility'}</md-icon>\n        </button>\n        <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>\n        <span label title=${part.id}\n          >${partLabelOf(part.id)}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span\n        >\n        ${selected ? this.renderOps(part.id, index) : nothing}\n      </li>\n    `\n  }\n\n  /** 고른 줄의 조작. 못 하는 것은 빼지 않고 흐리게 둔다 — 자리가 밀리면 연달아 지우다 엉뚱한 것을 누른다. */\n  private renderOps(id: string, index: number) {\n    const count = this.parts.length\n    const op = (name: string, icon: string, detail: object, enabled = true) => html`\n      <button\n        op=${name}\n        ?disabled=${!enabled || this.locked}\n        title=${i18next.t('figure.button.' + name)}\n        @click=${(e: Event) => {\n          e.stopPropagation()\n          if (enabled && !this.locked) this.ask(name, detail)\n        }}\n      >\n        <md-icon>${icon}</md-icon>\n      </button>\n    `\n    return html`\n      <div ops>\n        ${op('move-part-up', 'arrow_upward', { id, to: index - 1 }, index > 0)}\n        ${op('move-part-down', 'arrow_downward', { id, to: index + 1 }, index < count - 1)}\n        ${op('duplicate-part', 'content_copy', { id })} ${op('remove-part', 'delete', { id })}\n      </div>\n    `\n  }\n\n  /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */\n  private ask(what: string, detail: object) {\n    this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"figure-v3-parts.js","sourceRoot":"","sources":["../../client/modeller/figure-v3-parts.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { PART_LIMIT } from '@hatiolab/figure-model'\nimport type { V3PrimitiveCreation } from '@hatiolab/figure-model'\nimport type { V3BudgetLine } from './v3-maturity.js'\nimport { partLabelOf } from './v3-fields.js'\n\n/**\n * 도형 팔레트와 부품 목록 — V3 자산의 것.\n *\n * `figure-parts`(V2) 와 **같은 자리, 같은 조작, 같은 낱말**이다. 저작자가 V2 에서 익힌 손이 그대로\n * 가야 한다: 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.\n *\n * 다른 것은 읽는 대상뿐이다. V2 는 부품의 `primitive` 를 읽었고 여기서는 V3 평가가 준 `provider` 를\n * 읽는다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라\n * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.\n *\n * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다 — V2 와 같은 규칙, 같은 사건 이름.\n */\n\n/** 한 줄 — V3 평가에서 이 패널이 읽는 것만. */\nexport interface V3PartRow {\n  id: string\n  provider: string\n  /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */\n  hidden?: boolean\n  /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */\n  invisible?: boolean\n  /** 되풀이한 부품이면 지금 몇 개로 그려지나. 되풀이는 한 부품이다 — 한 줄로 보인다. */\n  copies?: number\n}\n\n/** 제공자마다의 아이콘. Material Symbols 이름이다. */\nconst PROVIDER_ICON: Record<string, string> = {\n  box: 'deployed_code',\n  cylinder: 'database',\n  ellipticCylinder: 'database',\n  frustum: 'change_history',\n  sphere: 'circle',\n  roundedBox: 'crop_square',\n  roundedBoxXZ: 'crop_square',\n  hollowBox: 'check_box_outline_blank',\n  hollowBoxXZ: 'check_box_outline_blank',\n  polygon: 'pentagon',\n  portal: 'door_front'\n}\n\n/** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */\n/*\n  The palette: V2's shapes. A plate and a wall are boxes of a shape a person reaches for (V2 drew both as boxes), so\n  they are starting sizes, not kinds of their own.\n*/\nexport type V3PaletteKind = V3PrimitiveCreation['kind'] | 'plate' | 'wall'\nconst RECIPES: Array<{ kind: V3PaletteKind; icon: string; label: string }> = [\n  { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },\n  { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },\n  { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rounded-box' },\n  { kind: 'sphere', icon: 'circle', label: 'figure.label.primitive-sphere' },\n  { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },\n  { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },\n  { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },\n  { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },\n  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }\n]\n\n@customElement('figure-v3-parts')\nexport class FigureV3Parts extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow: hidden;\n        background-color: var(--md-sys-color-surface-container-lowest);\n        /* The divider beside it is the editor's frame's (ox-three-pane). */\n        color: var(--md-sys-color-on-surface);\n        font: var(--label-font, inherit);\n        font-size: 0.76rem;\n        /* Folds by its own width: the editor gives this column 140 px when it has two columns (UX, 2026-09-24). */\n        container-type: inline-size;\n      }\n      section {\n        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      }\n      section[list] {\n        flex: 1;\n        min-height: 0;\n        overflow-y: auto;\n      }\n      h3 {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 6px;\n        margin: 0 0 6px 0;\n        font-size: var(--ui-t-micro, 11px);\n        font-weight: 700;\n        letter-spacing: 0.04em;\n        text-transform: uppercase;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      /* The cost line: the grade's letter in its colour, then what the figure costs. */\n      button[budget] {\n        display: flex;\n        align-items: flex-start;\n        gap: 6px;\n        width: 100%;\n        margin: 0 0 6px;\n        padding: 4px 6px;\n        font: inherit;\n        font-size: 0.68rem;\n        line-height: 1.5;\n        text-align: left;\n        color: var(--md-sys-color-on-surface-variant);\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      button[budget]:hover {\n        background: var(--md-sys-color-surface-container);\n      }\n      button[budget] b {\n        flex: none;\n        min-width: 16px;\n        text-align: center;\n        border-radius: 4px;\n        color: var(--md-sys-color-on-primary-container);\n        background: var(--md-sys-color-primary-container);\n      }\n      button[budget][grade='C'] b {\n        color: var(--md-sys-color-on-tertiary-container);\n        background: var(--md-sys-color-tertiary-container);\n      }\n      button[budget][grade='D'] {\n        border-color: var(--md-sys-color-error);\n      }\n      button[budget][grade='D'] b {\n        color: var(--md-sys-color-on-error);\n        background: var(--md-sys-color-error);\n      }\n      button[budget] em {\n        display: block;\n        font-style: normal;\n        color: var(--md-sys-color-error);\n      }\n      span[room][full] {\n        color: var(--md-sys-color-error);\n        font-weight: 600;\n      }\n      p[full] {\n        margin: 4px 0 0;\n        font-size: 0.68rem;\n        color: var(--md-sys-color-error);\n      }\n      div[level] {\n        display: grid;\n        grid-template-columns: auto minmax(0, 1fr);\n        align-items: center;\n        gap: 6px;\n        margin: 0 0 6px;\n        font-size: 0.68rem;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      div[level] select {\n        min-width: 0;\n        padding: 2px 4px;\n        font: inherit;\n        font-size: 0.7rem;\n        color: var(--md-sys-color-on-surface);\n        background: var(--md-sys-color-surface-container-lowest);\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 6px;\n      }\n      small[copies] {\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      span[room] {\n        font-size: 0.7rem;\n        font-weight: 400;\n        letter-spacing: 0;\n        text-transform: none;\n      }\n      /* Three to a row, small (user, 2026-09-24): the palette is reached for, not read -- the list below is what grows. */\n      div[palette] {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 3px;\n      }\n      button[shape] {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 1px;\n        min-width: 0;\n        padding: 5px 1px 4px;\n        font: var(--label-font, inherit);\n        font-size: 0.6rem;\n        line-height: 1.2;\n        text-align: center;\n        overflow-wrap: anywhere;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      button[shape]:hover:not([disabled]) {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n        border-color: transparent;\n      }\n      button[shape][disabled] {\n        opacity: 0.35;\n        cursor: default;\n      }\n      button[shape] md-icon {\n        --md-icon-size: 18px;\n      }\n      ol {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      li {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 4px 6px;\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      li:hover {\n        background-color: var(--md-sys-color-surface-container);\n      }\n      li[selected] {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n      }\n      li md-icon {\n        --md-icon-size: 16px;\n        flex: none;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      button[eye][all] {\n        margin-left: auto;\n        opacity: 0.75;\n      }\n      button[eye][all]:hover {\n        opacity: 1;\n      }\n      button[eye] {\n        display: flex;\n        flex: none;\n        padding: 1px;\n        color: inherit;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n        opacity: 0;\n      }\n      li:hover button[eye],\n      li[selected] button[eye],\n      button[eye][off] {\n        opacity: 1;\n      }\n      button[eye][off] {\n        color: var(--md-sys-color-tertiary);\n      }\n      button[eye] md-icon {\n        --md-icon-size: 15px;\n        color: inherit;\n      }\n      li[off] span[label],\n      li[off] > md-icon,\n      li[invisible] span[label],\n      li[invisible] > md-icon {\n        opacity: 0.45;\n      }\n      li[selected] md-icon {\n        color: inherit;\n      }\n      span[label] {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-size: 0.78rem;\n      }\n      span[label] small {\n        margin-left: 4px;\n        font-size: 0.66rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      div[ops] {\n        display: none;\n        gap: 1px;\n      }\n      li[selected] div[ops] {\n        display: flex;\n      }\n      div[ops] button {\n        display: flex;\n        padding: 2px;\n        color: inherit;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      div[ops] button:hover:not([disabled]) {\n        background-color: var(--md-sys-color-surface-container-lowest);\n      }\n      div[ops] button[disabled] {\n        opacity: 0.3;\n        cursor: default;\n      }\n      div[ops] md-icon {\n        --md-icon-size: 15px;\n        color: inherit;\n      }\n      /*\n        Under 200 px the selected row's four buttons pushed its name out and the last one past the edge (seen at 140,\n        2026-09-24). They go to a line of their own under the name.\n      */\n      @container (max-width: 199px) {\n        li[selected] {\n          flex-wrap: wrap;\n        }\n        li[selected] div[ops] {\n          flex-basis: 100%;\n          justify-content: flex-end;\n        }\n      }\n      p[quiet] {\n        margin: 0;\n        font-size: 0.76rem;\n        line-height: 1.6;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n    `\n  ]\n\n  @property({ type: Array }) parts: V3PartRow[] = []\n  /** 고른 부품의 id. 자리(index)가 아니다 — V3 부품은 id 로 안정하게 가리킨다. */\n  @property({ type: String }) selected = ''\n  /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */\n  @property({ type: Boolean }) locked = false\n  /**\n   * 이 도형이 치르는 값 — 삼각형 · 묶음 · 한 화면에 몇 대 · 등급. 부품을 더하는 바로 그 자리에서 보여야 로우폴리의\n   * 기준이 저작을 이끈다(V2 모델러의 정체성). 등급이 D 면 무엇이 넘쳤는지를 적는다. 누르면 성숙도 탭이 열린다.\n   */\n  @property({ attribute: false }) budget?: V3BudgetLine\n  /**\n   * 디테일 등급의 부품 한도 — V2 의 S/M/L(사용자 2026-09-24). 부품을 넣기 **전에** 몇 개 남았는지 보이고, 다 차면 팔레트가\n   * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.\n   */\n  @property({ attribute: false }) partBudget?: { level: 'S' | 'M' | 'L' | null; used: number; limit: number | null }\n\n  render() {\n    const b = this.partBudget\n    const full = !!b && b.limit !== null && b.used >= b.limit\n    return html`\n      <section>\n        <h3>${i18next.t('figure.label.shapes')}</h3>\n        <div palette>\n          ${RECIPES.map(\n            recipe => html`\n              <button\n                shape\n                ?disabled=${this.locked || full}\n                title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t(recipe.label)}\n                @click=${() => this.ask('add-part', { kind: recipe.kind })}\n              >\n                <md-icon>${recipe.icon}</md-icon>\n                <span>${i18next.t(recipe.label)}</span>\n              </button>\n            `\n          )}\n        </div>\n        ${full ? html`<p full>${i18next.t('figure.text.part-limit-reached-short', { level: b!.level, limit: b!.limit })}</p>` : nothing}\n      </section>\n\n      <section list>\n        <h3>\n          <span>${i18next.t('figure.label.parts')}</span>\n          <span room ?full=${full} title=${i18next.t('figure.text.limit-comes-from-level')}\n            >${b && b.limit !== null ? i18next.t('figure.text.n-of-limit', { used: b.used, limit: b.limit }) : (b?.used ?? this.parts.length)}</span\n          >\n          ${this.renderShowAll()}\n        </h3>\n        ${this.renderLevel()}\n        ${this.renderBudget()}\n        ${this.parts.length === 0\n          ? html`<p quiet>${i18next.t('figure.text.no-parts-yet')}</p>`\n          : html`<ol>\n              ${this.parts.map((part, index) => this.renderRow(part, index))}\n            </ol>`}\n      </section>\n    `\n  }\n\n  /** 디테일 등급 — 고르면 한도가 바뀐다. V2 의 자리 그대로, 목록 머리 아래. */\n  private renderLevel() {\n    const b = this.partBudget\n    if (!b) return nothing\n    return html`<div level>\n      <label for=\"detail-level\">${i18next.t('figure.label.detail-level')}</label>\n      <select\n        id=\"detail-level\"\n        title=${i18next.t('figure.text.detail-level-explained')}\n        ?disabled=${this.locked}\n        @change=${(e: Event) => {\n          const value = (e.target as HTMLSelectElement).value\n          this.dispatchEvent(new CustomEvent('set-detail-level', { detail: { level: value || null }, bubbles: true, composed: true }))\n        }}\n      >\n        <option value=\"\" ?selected=${!b.level}>${i18next.t('figure.label.detail-none')}</option>\n        ${(['S', 'M', 'L'] as const).map(\n          one => html`<option value=${one} ?selected=${one === b.level}>\n            ${one} ${i18next.t('figure.label.detail-' + one)} · ${i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}\n          </option>`\n        )}\n      </select>\n    </div>`\n  }\n\n  private renderBudget() {\n    const b = this.budget\n    if (!b || !this.parts.length) return nothing\n    const over = b.grade === 'D'\n    return html`<button\n      budget\n      grade=${b.grade}\n      title=${i18next.t('figure.text.parts-budget-open')}\n      @click=${() => this.dispatchEvent(new CustomEvent('show-maturity', { bubbles: true, composed: true }))}\n    >\n      <b>${b.grade}</b>\n      <span>\n        ${i18next.t('figure.text.parts-budget', {\n          triangles: b.triangles.toLocaleString(),\n          groups: b.groups.toLocaleString(),\n          instances: b.instances.toLocaleString()\n        })}\n        ${over\n          ? html`<em\n              >${i18next.t('figure.text.parts-budget-over', {\n                budget: i18next.t('figure.label.budget-' + b.tightest.key),\n                used: b.tightest.used.toLocaleString(),\n                limit: b.tightest.limit.toLocaleString()\n              })}</em\n            >`\n          : nothing}\n      </span>\n    </button>`\n  }\n\n  /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */\n  private renderShowAll() {\n    if (this.parts.length === 0) return nothing\n    const anyHidden = this.parts.some(part => part.hidden)\n    return html`\n      <button\n        eye\n        all\n        ?off=${!anyHidden}\n        title=${i18next.t(anyHidden ? 'figure.text.show-all-parts' : 'figure.text.hide-all-parts')}\n        @click=${(e: Event) => {\n          e.stopPropagation()\n          this.ask('set-all-parts-hidden', { hidden: !anyHidden })\n        }}\n      >\n        <md-icon>${anyHidden ? 'visibility' : 'visibility_off'}</md-icon>\n      </button>\n    `\n  }\n\n  private renderRow(part: V3PartRow, index: number) {\n    const selected = part.id === this.selected\n    const off = !!part.hidden\n    return html`\n      <li\n        ?selected=${selected}\n        ?off=${off}\n        ?invisible=${!!part.invisible}\n        @click=${() => this.ask('select-part', { id: part.id })}\n      >\n        <button\n          eye\n          ?off=${off}\n          title=${i18next.t(off ? 'figure.text.show-this-part' : 'figure.text.hide-this-part')}\n          @click=${(e: Event) => {\n            e.stopPropagation()\n            this.ask('toggle-part-hidden', { id: part.id })\n          }}\n        >\n          <md-icon>${off ? 'visibility_off' : 'visibility'}</md-icon>\n        </button>\n        <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>\n        <span label title=${part.id}\n          >${partLabelOf(part.id)}${part.copies ? html` <small copies>× ${part.copies}</small>` : nothing}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span\n        >\n        ${selected ? this.renderOps(part.id, index) : nothing}\n      </li>\n    `\n  }\n\n  /** 고른 줄의 조작. 못 하는 것은 빼지 않고 흐리게 둔다 — 자리가 밀리면 연달아 지우다 엉뚱한 것을 누른다. */\n  private renderOps(id: string, index: number) {\n    const count = this.parts.length\n    const op = (name: string, icon: string, detail: object, enabled = true) => html`\n      <button\n        op=${name}\n        ?disabled=${!enabled || this.locked}\n        title=${i18next.t('figure.button.' + name)}\n        @click=${(e: Event) => {\n          e.stopPropagation()\n          if (enabled && !this.locked) this.ask(name, detail)\n        }}\n      >\n        <md-icon>${icon}</md-icon>\n      </button>\n    `\n    return html`\n      <div ops>\n        ${op('move-part-up', 'arrow_upward', { id, to: index - 1 }, index > 0)}\n        ${op('move-part-down', 'arrow_downward', { id, to: index + 1 }, index < count - 1)}\n        ${op('duplicate-part', 'content_copy', { id })} ${op('remove-part', 'delete', { id })}\n      </div>\n    `\n  }\n\n  /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */\n  private ask(what: string, detail: object) {\n    this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -29,7 +29,7 @@ export declare class FigureV3Properties extends FigureV3Properties_base {
     private pickedPart?;
     private pickedFace?;
     private facts;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     private renderName;
     /**
      * The face the figure is placed by. In V3 it is part of the room declaration, so choosing one declares the room

package/dist-client/modeller/side-panel-styles.js

@@ -87,6 +87,14 @@ export const SidePanelStyles = css `
     overflow-wrap: anywhere;
     white-space: normal;
   }
+  /* A value read, not edited, beside its label: the field's size and colour, not the page's. */
+  div[inline-field] > span[value] {
+    font-size: 0.76rem;
+    color: var(--md-sys-color-on-surface);
+  }
+  label span[unit] {
+    color: var(--md-sys-color-outline);
+  }
   div[inline-field] + div[inline-field],
   div[inline-field] + div[vector-row],
   div[vector-row] + div[inline-field] {

package/dist-client/modeller/side-panel-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-panel-styles.js","sourceRoot":"","sources":["../../client/modeller/side-panel-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6SjC,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * The side panel's one look -- V2's inspector, for every element that draws in the V3 modeller's side.\n *\n * The side is drawn by several elements (the type field, the figure's properties, a part's values, fastening, places,\n * motion, material, controls, clips, the environment) and each had styled its own fields: three label styles and\n * three field heights in one column (user, 2026-09-24: \"why are the styles and layout all different?\"). They share\n * this sheet now and keep only what is theirs.\n *\n * The vocabulary, V2's:\n *   section              one titled group; the side is a stack of them\n *   h3                   a group's title -- small capitals\n *   div[inline-field]    a short label and its one field on one line\n *   div[field]           a label above a full-width field\n *   div[form]            short labels beside their fields, the fields starting on one line\n *   div[vector-row]      a title, then X · Y · Z in one row of cells with the axis inside (`div[triple]` of\n *                        `div[cell]`) -- three values read together, as vector tools lay them out\n *   div[pair]            two controls side by side\n *   label[toggle]        a checkbox and its words\n *   p[hint] · small      the quiet line under a field\n *   button[act]          an action under the fields it acts on\n *   [scrub]              a label dragged sideways to scrub its field\n */\nexport const SidePanelStyles = css`\n  :host {\n    --figure-control-height: 30px;\n    font-size: 0.76rem;\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The side is a stack of sections, each a titled group (V2's inspector). */\n  section {\n    display: grid;\n    gap: 6px;\n    padding: 8px 10px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  section > h3 {\n    margin: 0;\n  }\n  section div[field] + div[field],\n  section div[inline-field] + div[inline-field],\n  section div[vector-row] + div[vector-row] {\n    margin-top: 0;\n  }\n  h3 {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin: 14px 0 6px;\n    font-size: var(--ui-t-micro, 11px);\n    font-weight: 700;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  h3:first-child {\n    margin-top: 0;\n  }\n  label,\n  div[form] > span {\n    font-size: 0.68rem;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[field] {\n    display: grid;\n    gap: 2px;\n  }\n  div[field] + div[field],\n  div[field] + div[form],\n  div[form] + div[field],\n  div[vector-row] + div[vector-row],\n  div[vector-row] + div[field],\n  div[field] + div[vector-row] {\n    margin-top: 5px;\n  }\n  div[form],\n  div[inline-field],\n  div[vector-row] {\n    display: grid;\n    grid-template-columns: 64px minmax(0, 1fr);\n    align-items: center;\n    gap: 5px 7px;\n  }\n  div[form] > span,\n  div[inline-field] > label,\n  div[vector-row] > label {\n    overflow-wrap: anywhere;\n    white-space: normal;\n  }\n  div[inline-field] + div[inline-field],\n  div[inline-field] + div[vector-row],\n  div[vector-row] + div[inline-field] {\n    margin-top: 5px;\n  }\n  /* A row of icon tools (align, mirror, snap), as V2's placement section had them. */\n  div[tools] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n  div[tools] button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 28px;\n    padding: 0;\n    color: var(--md-sys-color-on-surface);\n    background: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    cursor: pointer;\n  }\n  div[tools] button:hover:not(:disabled) {\n    background: var(--md-sys-color-surface-container);\n  }\n  div[tools] button:disabled {\n    opacity: 0.45;\n    cursor: default;\n  }\n  div[tools] md-icon {\n    font-size: 17px;\n    width: 17px;\n    height: 17px;\n  }\n  div[pair] {\n    display: flex;\n    gap: 4px;\n  }\n  div[pair] > * {\n    flex: 1;\n    min-width: 0;\n  }\n  div[triple] {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 4px;\n  }\n  input,\n  select {\n    width: 100%;\n    min-width: 0;\n    min-height: var(--figure-control-height);\n    box-sizing: border-box;\n    padding: 4px 7px;\n    font: inherit;\n    font-size: 0.76rem;\n    color: var(--md-sys-color-on-surface);\n    background-color: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n  }\n  input[type='checkbox'],\n  input[type='radio'] {\n    width: auto;\n    min-height: 0;\n  }\n  /* A thin track and a small thumb: a slider is a line to drag along, not a block (user, 2026-09-24). */\n  input[type='range'] {\n    -webkit-appearance: none;\n    appearance: none;\n    min-height: 16px;\n    height: 16px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n  }\n  input[type='range']::-webkit-slider-runnable-track {\n    height: 3px;\n    border-radius: 2px;\n    background: var(--md-sys-color-outline-variant);\n  }\n  input[type='range']::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 12px;\n    height: 12px;\n    margin-top: -4.5px;\n    border: none;\n    border-radius: 50%;\n    background: var(--md-sys-color-primary);\n  }\n  input[type='range']::-moz-range-track {\n    height: 3px;\n    border-radius: 2px;\n    background: var(--md-sys-color-outline-variant);\n  }\n  input[type='range']::-moz-range-thumb {\n    width: 12px;\n    height: 12px;\n    border: none;\n    border-radius: 50%;\n    background: var(--md-sys-color-primary);\n  }\n  input[type='range']:focus {\n    outline: none;\n  }\n  input[type='range']:focus-visible::-webkit-slider-thumb {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: 2px;\n  }\n  input[type='color'] {\n    padding: 2px;\n    width: 40px;\n  }\n  input:focus,\n  select:focus {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: -1px;\n  }\n  input:disabled,\n  select:disabled {\n    opacity: 0.6;\n  }\n  /* A number with its axis inside the cell, on the left. */\n  div[cell] {\n    display: flex;\n    box-sizing: border-box;\n    height: var(--figure-control-height);\n    align-items: center;\n    gap: 2px;\n    padding-left: 6px;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n  }\n  div[cell]:focus-within {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: -1px;\n    border-color: transparent;\n  }\n  /* A label that scrubs its field when dragged sideways (vector tools' way). */\n  [scrub] {\n    cursor: ew-resize;\n    user-select: none;\n    touch-action: none;\n  }\n  div[cell] span[axis] {\n    flex: none;\n    font-size: 0.64rem;\n    letter-spacing: 0.02em;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[cell] input {\n    min-height: 0;\n    height: calc(var(--figure-control-height) - 2px);\n    padding: 4px 6px 4px 2px;\n    font-family: var(--mono-font, monospace);\n    text-align: right;\n    background: none;\n    border: none;\n    border-radius: 0;\n  }\n  div[cell] input:focus {\n    outline: none;\n  }\n  label[toggle] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.76rem;\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The 「?」 beside a title: no border, it says there is more rather than asking to be pressed (V2). */\n  button[help] {\n    display: inline-flex;\n    align-items: center;\n    padding: 0;\n    margin: 0;\n    color: var(--md-sys-color-outline);\n    background: none;\n    border: none;\n    cursor: pointer;\n  }\n  button[help] md-icon {\n    font-size: 13px;\n    width: 13px;\n    height: 13px;\n  }\n  button[help]:hover,\n  button[help][aria-expanded='true'] {\n    color: var(--md-sys-color-primary);\n  }\n  p[hint],\n  small {\n    display: block;\n    margin: 2px 0 4px;\n    font-size: 0.68rem;\n    line-height: 1.5;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  p[hint] {\n    padding-left: 6px;\n    border-left: 2px solid var(--md-sys-color-outline-variant);\n  }\n  button[act] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    width: 100%;\n    margin-top: 4px;\n    padding: 3px 8px;\n    min-height: 28px;\n    font: inherit;\n    font-size: 0.72rem;\n    color: var(--md-sys-color-on-surface);\n    background-color: var(--md-sys-color-surface-container);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    cursor: pointer;\n  }\n  button[act]:hover:not(:disabled) {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n  button[act]:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  button[act] md-icon {\n    font-size: 15px;\n    width: 15px;\n    height: 15px;\n  }\n`\n"]}
+{"version":3,"file":"side-panel-styles.js","sourceRoot":"","sources":["../../client/modeller/side-panel-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqTjC,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * The side panel's one look -- V2's inspector, for every element that draws in the V3 modeller's side.\n *\n * The side is drawn by several elements (the type field, the figure's properties, a part's values, fastening, places,\n * motion, material, controls, clips, the environment) and each had styled its own fields: three label styles and\n * three field heights in one column (user, 2026-09-24: \"why are the styles and layout all different?\"). They share\n * this sheet now and keep only what is theirs.\n *\n * The vocabulary, V2's:\n *   section              one titled group; the side is a stack of them\n *   h3                   a group's title -- small capitals\n *   div[inline-field]    a short label and its one field on one line\n *   div[field]           a label above a full-width field\n *   div[form]            short labels beside their fields, the fields starting on one line\n *   div[vector-row]      a title, then X · Y · Z in one row of cells with the axis inside (`div[triple]` of\n *                        `div[cell]`) -- three values read together, as vector tools lay them out\n *   div[pair]            two controls side by side\n *   label[toggle]        a checkbox and its words\n *   p[hint] · small      the quiet line under a field\n *   button[act]          an action under the fields it acts on\n *   [scrub]              a label dragged sideways to scrub its field\n */\nexport const SidePanelStyles = css`\n  :host {\n    --figure-control-height: 30px;\n    font-size: 0.76rem;\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The side is a stack of sections, each a titled group (V2's inspector). */\n  section {\n    display: grid;\n    gap: 6px;\n    padding: 8px 10px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  section > h3 {\n    margin: 0;\n  }\n  section div[field] + div[field],\n  section div[inline-field] + div[inline-field],\n  section div[vector-row] + div[vector-row] {\n    margin-top: 0;\n  }\n  h3 {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin: 14px 0 6px;\n    font-size: var(--ui-t-micro, 11px);\n    font-weight: 700;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  h3:first-child {\n    margin-top: 0;\n  }\n  label,\n  div[form] > span {\n    font-size: 0.68rem;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[field] {\n    display: grid;\n    gap: 2px;\n  }\n  div[field] + div[field],\n  div[field] + div[form],\n  div[form] + div[field],\n  div[vector-row] + div[vector-row],\n  div[vector-row] + div[field],\n  div[field] + div[vector-row] {\n    margin-top: 5px;\n  }\n  div[form],\n  div[inline-field],\n  div[vector-row] {\n    display: grid;\n    grid-template-columns: 64px minmax(0, 1fr);\n    align-items: center;\n    gap: 5px 7px;\n  }\n  div[form] > span,\n  div[inline-field] > label,\n  div[vector-row] > label {\n    overflow-wrap: anywhere;\n    white-space: normal;\n  }\n  /* A value read, not edited, beside its label: the field's size and colour, not the page's. */\n  div[inline-field] > span[value] {\n    font-size: 0.76rem;\n    color: var(--md-sys-color-on-surface);\n  }\n  label span[unit] {\n    color: var(--md-sys-color-outline);\n  }\n  div[inline-field] + div[inline-field],\n  div[inline-field] + div[vector-row],\n  div[vector-row] + div[inline-field] {\n    margin-top: 5px;\n  }\n  /* A row of icon tools (align, mirror, snap), as V2's placement section had them. */\n  div[tools] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n  div[tools] button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 28px;\n    padding: 0;\n    color: var(--md-sys-color-on-surface);\n    background: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    cursor: pointer;\n  }\n  div[tools] button:hover:not(:disabled) {\n    background: var(--md-sys-color-surface-container);\n  }\n  div[tools] button:disabled {\n    opacity: 0.45;\n    cursor: default;\n  }\n  div[tools] md-icon {\n    font-size: 17px;\n    width: 17px;\n    height: 17px;\n  }\n  div[pair] {\n    display: flex;\n    gap: 4px;\n  }\n  div[pair] > * {\n    flex: 1;\n    min-width: 0;\n  }\n  div[triple] {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 4px;\n  }\n  input,\n  select {\n    width: 100%;\n    min-width: 0;\n    min-height: var(--figure-control-height);\n    box-sizing: border-box;\n    padding: 4px 7px;\n    font: inherit;\n    font-size: 0.76rem;\n    color: var(--md-sys-color-on-surface);\n    background-color: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n  }\n  input[type='checkbox'],\n  input[type='radio'] {\n    width: auto;\n    min-height: 0;\n  }\n  /* A thin track and a small thumb: a slider is a line to drag along, not a block (user, 2026-09-24). */\n  input[type='range'] {\n    -webkit-appearance: none;\n    appearance: none;\n    min-height: 16px;\n    height: 16px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n  }\n  input[type='range']::-webkit-slider-runnable-track {\n    height: 3px;\n    border-radius: 2px;\n    background: var(--md-sys-color-outline-variant);\n  }\n  input[type='range']::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 12px;\n    height: 12px;\n    margin-top: -4.5px;\n    border: none;\n    border-radius: 50%;\n    background: var(--md-sys-color-primary);\n  }\n  input[type='range']::-moz-range-track {\n    height: 3px;\n    border-radius: 2px;\n    background: var(--md-sys-color-outline-variant);\n  }\n  input[type='range']::-moz-range-thumb {\n    width: 12px;\n    height: 12px;\n    border: none;\n    border-radius: 50%;\n    background: var(--md-sys-color-primary);\n  }\n  input[type='range']:focus {\n    outline: none;\n  }\n  input[type='range']:focus-visible::-webkit-slider-thumb {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: 2px;\n  }\n  input[type='color'] {\n    padding: 2px;\n    width: 40px;\n  }\n  input:focus,\n  select:focus {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: -1px;\n  }\n  input:disabled,\n  select:disabled {\n    opacity: 0.6;\n  }\n  /* A number with its axis inside the cell, on the left. */\n  div[cell] {\n    display: flex;\n    box-sizing: border-box;\n    height: var(--figure-control-height);\n    align-items: center;\n    gap: 2px;\n    padding-left: 6px;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n  }\n  div[cell]:focus-within {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: -1px;\n    border-color: transparent;\n  }\n  /* A label that scrubs its field when dragged sideways (vector tools' way). */\n  [scrub] {\n    cursor: ew-resize;\n    user-select: none;\n    touch-action: none;\n  }\n  div[cell] span[axis] {\n    flex: none;\n    font-size: 0.64rem;\n    letter-spacing: 0.02em;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[cell] input {\n    min-height: 0;\n    height: calc(var(--figure-control-height) - 2px);\n    padding: 4px 6px 4px 2px;\n    font-family: var(--mono-font, monospace);\n    text-align: right;\n    background: none;\n    border: none;\n    border-radius: 0;\n  }\n  div[cell] input:focus {\n    outline: none;\n  }\n  label[toggle] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.76rem;\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The 「?」 beside a title: no border, it says there is more rather than asking to be pressed (V2). */\n  button[help] {\n    display: inline-flex;\n    align-items: center;\n    padding: 0;\n    margin: 0;\n    color: var(--md-sys-color-outline);\n    background: none;\n    border: none;\n    cursor: pointer;\n  }\n  button[help] md-icon {\n    font-size: 13px;\n    width: 13px;\n    height: 13px;\n  }\n  button[help]:hover,\n  button[help][aria-expanded='true'] {\n    color: var(--md-sys-color-primary);\n  }\n  p[hint],\n  small {\n    display: block;\n    margin: 2px 0 4px;\n    font-size: 0.68rem;\n    line-height: 1.5;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  p[hint] {\n    padding-left: 6px;\n    border-left: 2px solid var(--md-sys-color-outline-variant);\n  }\n  button[act] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    width: 100%;\n    margin-top: 4px;\n    padding: 3px 8px;\n    min-height: 28px;\n    font: inherit;\n    font-size: 0.72rem;\n    color: var(--md-sys-color-on-surface);\n    background-color: var(--md-sys-color-surface-container);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    cursor: pointer;\n  }\n  button[act]:hover:not(:disabled) {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n  button[act]:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  button[act] md-icon {\n    font-size: 15px;\n    width: 15px;\n    height: 15px;\n  }\n`\n"]}

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

@@ -12,6 +12,14 @@ export declare class FigureV3Canvas extends LitElement {
     /** What the gizmo may write for the selected part; a change beyond it is not applied and the part springs back. */
     reach: GizmoReach;
     view: ViewSettings;
+    /**
+     * View only: nothing that happens on the board is told out. The card's picture is taken from a second canvas stood up
+     * off screen (`v3-thumbnail.ts`); the scene settles its components as it builds them, and a change told from there
+     * would reach the editor as an edit (V2's `viewOnly`, for the same reason).
+     */
+    viewOnly: boolean;
+    /** Where the selected part turns and how far (`v3-joint-fan`): shown, never picked, never saved. */
+    fan: V3RenderPart | null;
     private stage;
     private scene?;
     private board?;
@@ -23,6 +31,13 @@ export declare class FigureV3Canvas extends LitElement {
     firstUpdated(): void;
     protected updated(changed: PropertyValues): void;
     disconnectedCallback(): void;
+    /**
+     * The board as a picture, for the card: the 3D view at this size, or nothing when it cannot be taken. The scene's
+     * `toDataURL` renders the 2D board (a white sheet, V2 found), and the 3D renderer keeps no drawing buffer, so the
+     * scene's own `snapshot3d` draws and reads in one task. A picture that cannot be taken is not an error and is not
+     * faked (V2's `snapshot`, lost when this canvas moved onto the scene -- no card had a picture since, user 2026-09-24).
+     */
+    snapshot(width?: number, height?: number): Promise<string | undefined>;
     /** The whole figure in view: the board's fit, then the 3D camera's own, as V2 did. */
     fit(): void;
     /**
@@ -33,6 +48,8 @@ export declare class FigureV3Canvas extends LitElement {
     private components;
     /** The components standing now, by name. Not held between calls: the scene stands its board up again at times. */
     private standing;
+    /** A larger board under the same scene: its size, and the grid that suits it. Components are re-placed by `sync`. */
+    private grow;
     /** Bring the components to the evaluation: remove the gone, write only what differs, add the new. */
     private sync;
     /** Selection and drags, told out by the part's name -- never by its place in the list, which may change meanwhile. */