@things-factory/figure-ui 10.1.39 → 10.1.42

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

@@ -0,0 +1,249 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { MATERIAL_PRESETS, SEGMENT_PRESETS, v3TrianglesOf } from '@hatiolab/figure-model';
+import { activePalette } from '@hatiolab/things-scene';
+/** The purpose each palette role is for, by its token — the V2 inspector's words for the same roles. */
+const PURPOSE = {
+    'palette.primary': 'primary',
+    'palette.accent': 'accent',
+    'palette.neutral': 'neutral',
+    'palette.dark': 'dark',
+    'palette.light': 'light',
+    'palette.surface': 'surface',
+    'palette.status-danger': 'danger',
+    'palette.status-warning': 'warning',
+    'palette.status-info': 'info',
+    'palette.status-success': 'success'
+};
+export const purposeOf = (token) => i18next.t(`figure.label.palette-purpose-${PURPOSE[token ?? ''] ?? 'registered'}`);
+/** Bodies with a rim — the ones `set-segments` accepts. */
+const ROUND = new Set(['cylinder', 'ellipticCylinder', 'sphere', 'frustum']);
+const DEFAULT_SEGMENTS = 12;
+/**
+ * 재질 — a V3 part's material, drawn as the V2 inspector draws it (V3 parity row ③).
+ *
+ * The V3 editor showed the colour role as a raw token (`palette.dark`) in a select and nothing else. The V3 material
+ * holds the colour role, a preset, transparency and a glow; a round body also has how finely its rim is drawn. This
+ * shows those, with the V2 words: painted colours and lit colours as two groups of swatches, each named for what it
+ * is for.
+ *
+ * Not here, because a V3 material has no place for them: flat shading and casting shadows (V2 fields the converter
+ * does not carry). The glow's colour comes from the lit colours, as in V2.
+ *
+ * Every change leaves as one `v3-part-edit`; the editor runs it through the session, one step of the undo history.
+ */
+let FigureV3Material = class FigureV3Material extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** The asset's palette, token → colour. */
+        this.palette = {};
+        this.locked = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: grid;
+      gap: 10px;
+    }
+    h3 {
+      font-size: var(--ui-t-body, 13px);
+      margin: 12px 0 0;
+    }
+    div[field] {
+      display: grid;
+      gap: 4px;
+    }
+    div[field] > label {
+      font-weight: 600;
+    }
+    div[swatches] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    button[swatch] {
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      border-radius: 50%;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      background: var(--swatch);
+      cursor: pointer;
+    }
+    button[swatch][on] {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 1px;
+    }
+    small {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    select,
+    input[type='range'] {
+      font: inherit;
+      min-width: 0;
+    }
+    label[toggle] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    div[segments] {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 4px;
+    }
+    div[segments] button {
+      display: grid;
+      padding: 4px;
+      font: inherit;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+      cursor: pointer;
+    }
+    div[segments] button[on] {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      border-color: var(--md-sys-color-primary);
+    }
+  `; }
+    render() {
+        const part = this.body;
+        if (!part)
+            return nothing;
+        const material = part.material;
+        /*
+          The roles offered are the app's palette, as in V2, with any the asset carries beyond it. A new asset carries
+          only its primary colour; a role it lacks is sent with its colour and added in the same edit (`put`).
+        */
+        const entries = Object.entries(this.offered());
+        const painted = entries.filter(([token]) => !token.startsWith('palette.status-'));
+        const lit = entries.filter(([token]) => token.startsWith('palette.status-'));
+        const glow = material.emissive;
+        return html `
+      <h3>${i18next.t('figure.label.part-material')}</h3>
+      <div field>
+        <label>${i18next.t('figure.label.palette-role')}</label>
+        <div swatches>${this.swatches(painted, material.token, token => this.put({ token }))}</div>
+        ${lit.length
+            ? html `<small>${i18next.t('figure.label.status-colors')}</small>
+              <div swatches>${this.swatches(lit, material.token, token => this.put({ token }))}</div>`
+            : nothing}
+        <small><b>${purposeOf(material.token)}</b> — ${i18next.t('figure.text.palette-purpose-explained')}</small>
+      </div>
+      <div field>
+        <label>${i18next.t('figure.label.preset')}</label>
+        <select
+          ?disabled=${this.locked}
+          @change=${(e) => this.put({ preset: (e.target.value || undefined) })}
+        >
+          <option value="" ?selected=${!material.preset}>${i18next.t('figure.label.none')}</option>
+          ${MATERIAL_PRESETS.map(preset => html `<option value=${preset} ?selected=${preset === material.preset}>${i18next.t('figure.label.preset-' + preset)}</option>`)}
+        </select>
+      </div>
+      <label toggle>
+        <input
+          type="checkbox"
+          ?disabled=${this.locked}
+          .checked=${!!material.transparent}
+          @change=${(e) => this.put({ transparent: e.target.checked || undefined })}
+        />
+        ${i18next.t('figure.label.transparent')}
+      </label>
+      <div field>
+        <label>${i18next.t('figure.label.emissive')}</label>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          ?disabled=${this.locked}
+          .value=${String(glow?.intensity ?? 0)}
+          @change=${(e) => this.glow(Number(e.target.value))}
+        />
+        <small>${(glow?.intensity ?? 0).toFixed(2)}</small>
+      </div>
+      ${glow
+            ? html `<div field>
+            <label>${i18next.t('figure.label.emissive-color')}</label>
+            <div swatches>${this.swatches(lit.length ? lit : painted, glow.token, token => this.put({ emissive: { ...glow, token } }))}</div>
+          </div>`
+            : nothing}
+      ${this.renderSegments(part)}
+    `;
+    }
+    renderSegments(part) {
+        const provider = part.shape?.provider ?? '';
+        if (!ROUND.has(provider))
+            return nothing;
+        const current = part.segments ?? DEFAULT_SEGMENTS;
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.segments')}</label>
+        <div segments>
+          ${SEGMENT_PRESETS.map(preset => html `<button
+              ?on=${preset === current}
+              ?disabled=${this.locked}
+              @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}
+            >
+              <b>${preset}</b>
+              <small>${i18next.t('figure.text.n-triangles', { count: v3TrianglesOf({ ...part, segments: preset }) })}</small>
+            </button>`)}
+        </div>
+      </div>
+    `;
+    }
+    swatches(entries, chosen, pick) {
+        return entries.map(([token, colour]) => html `<button
+        swatch
+        ?on=${token === chosen}
+        ?disabled=${this.locked}
+        title=${purposeOf(token)}
+        aria-label=${purposeOf(token)}
+        style="--swatch:${colour}"
+        @click=${() => pick(token)}
+      ></button>`);
+    }
+    offered() {
+        return { ...activePalette(), ...this.palette };
+    }
+    /** Intensity 0 is no glow at all, as in V2; a new glow takes the part's own colour until another is picked. */
+    glow(intensity) {
+        const material = this.body.material;
+        this.put({ emissive: intensity > 0 ? { token: material.emissive?.token ?? material.token, intensity, on: true } : undefined });
+    }
+    put(patch) {
+        const material = { ...this.body.material, ...patch };
+        for (const key of Object.keys(material))
+            if (material[key] === undefined)
+                delete material[key];
+        /* The colours this material names that the asset does not carry yet. */
+        const offered = this.offered();
+        const palette = Object.fromEntries([material.token, material.emissive?.token]
+            .filter((token) => !!token && this.palette[token] === undefined && offered[token] !== undefined)
+            .map(token => [token, offered[token]]));
+        this.edit({ kind: 'set-material', target: this.body.id, material, ...(Object.keys(palette).length ? { palette } : {}) });
+    }
+    edit(edit) {
+        this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureV3Material.prototype, "body", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureV3Material.prototype, "palette", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureV3Material.prototype, "locked", void 0);
+FigureV3Material = __decorate([
+    customElement('figure-v3-material')
+], FigureV3Material);
+export { FigureV3Material };
+//# sourceMappingURL=figure-v3-material.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-v3-material.js","sourceRoot":"","sources":["../../client/modeller/figure-v3-material.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { MATERIAL_PRESETS, SEGMENT_PRESETS, v3TrianglesOf } from '@hatiolab/figure-model'\nimport { activePalette } from '@hatiolab/things-scene'\nimport type { V3AssetGeometry, V3Material, V3PartEdit } from '@hatiolab/figure-model'\n\n/** The purpose each palette role is for, by its token — the V2 inspector's words for the same roles. */\nconst PURPOSE: Record<string, string> = {\n  'palette.primary': 'primary',\n  'palette.accent': 'accent',\n  'palette.neutral': 'neutral',\n  'palette.dark': 'dark',\n  'palette.light': 'light',\n  'palette.surface': 'surface',\n  'palette.status-danger': 'danger',\n  'palette.status-warning': 'warning',\n  'palette.status-info': 'info',\n  'palette.status-success': 'success'\n}\nexport const purposeOf = (token?: string) => i18next.t(`figure.label.palette-purpose-${PURPOSE[token ?? ''] ?? 'registered'}`)\n\n/** Bodies with a rim — the ones `set-segments` accepts. */\nconst ROUND = new Set(['cylinder', 'ellipticCylinder', 'sphere', 'frustum'])\nconst DEFAULT_SEGMENTS = 12\n\n/**\n * 재질 — a V3 part's material, drawn as the V2 inspector draws it (V3 parity row ③).\n *\n * The V3 editor showed the colour role as a raw token (`palette.dark`) in a select and nothing else. The V3 material\n * holds the colour role, a preset, transparency and a glow; a round body also has how finely its rim is drawn. This\n * shows those, with the V2 words: painted colours and lit colours as two groups of swatches, each named for what it\n * is for.\n *\n * Not here, because a V3 material has no place for them: flat shading and casting shadows (V2 fields the converter\n * does not carry). The glow's colour comes from the lit colours, as in V2.\n *\n * Every change leaves as one `v3-part-edit`; the editor runs it through the session, one step of the undo history.\n */\n@customElement('figure-v3-material')\nexport class FigureV3Material extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: grid;\n      gap: 10px;\n    }\n    h3 {\n      font-size: var(--ui-t-body, 13px);\n      margin: 12px 0 0;\n    }\n    div[field] {\n      display: grid;\n      gap: 4px;\n    }\n    div[field] > label {\n      font-weight: 600;\n    }\n    div[swatches] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n    }\n    button[swatch] {\n      width: 22px;\n      height: 22px;\n      padding: 0;\n      border-radius: 50%;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      background: var(--swatch);\n      cursor: pointer;\n    }\n    button[swatch][on] {\n      outline: 2px solid var(--md-sys-color-primary);\n      outline-offset: 1px;\n    }\n    small {\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    select,\n    input[type='range'] {\n      font: inherit;\n      min-width: 0;\n    }\n    label[toggle] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    div[segments] {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 4px;\n    }\n    div[segments] button {\n      display: grid;\n      padding: 4px;\n      font: inherit;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      background: var(--md-sys-color-surface);\n      color: var(--md-sys-color-on-surface);\n      cursor: pointer;\n    }\n    div[segments] button[on] {\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  `\n\n  /** The selected body as evaluated — its material, its segments and its shape. */\n  @property({ attribute: false }) body?: V3AssetGeometry & { id: string }\n  /** The asset's palette, token → colour. */\n  @property({ attribute: false }) palette: Record<string, string> = {}\n  @property({ type: Boolean }) locked = false\n\n  render() {\n    const part = this.body\n    if (!part) return nothing\n    const material = part.material\n    /*\n      The roles offered are the app's palette, as in V2, with any the asset carries beyond it. A new asset carries\n      only its primary colour; a role it lacks is sent with its colour and added in the same edit (`put`).\n    */\n    const entries = Object.entries(this.offered())\n    const painted = entries.filter(([token]) => !token.startsWith('palette.status-'))\n    const lit = entries.filter(([token]) => token.startsWith('palette.status-'))\n    const glow = material.emissive\n    return html`\n      <h3>${i18next.t('figure.label.part-material')}</h3>\n      <div field>\n        <label>${i18next.t('figure.label.palette-role')}</label>\n        <div swatches>${this.swatches(painted, material.token, token => this.put({ token }))}</div>\n        ${lit.length\n          ? html`<small>${i18next.t('figure.label.status-colors')}</small>\n              <div swatches>${this.swatches(lit, material.token, token => this.put({ token }))}</div>`\n          : nothing}\n        <small><b>${purposeOf(material.token)}</b> — ${i18next.t('figure.text.palette-purpose-explained')}</small>\n      </div>\n      <div field>\n        <label>${i18next.t('figure.label.preset')}</label>\n        <select\n          ?disabled=${this.locked}\n          @change=${(e: Event) => this.put({ preset: ((e.target as HTMLSelectElement).value || undefined) as V3Material['preset'] })}\n        >\n          <option value=\"\" ?selected=${!material.preset}>${i18next.t('figure.label.none')}</option>\n          ${MATERIAL_PRESETS.map(\n            preset => html`<option value=${preset} ?selected=${preset === material.preset}>${i18next.t('figure.label.preset-' + preset)}</option>`\n          )}\n        </select>\n      </div>\n      <label toggle>\n        <input\n          type=\"checkbox\"\n          ?disabled=${this.locked}\n          .checked=${!!material.transparent}\n          @change=${(e: Event) => this.put({ transparent: (e.target as HTMLInputElement).checked || undefined })}\n        />\n        ${i18next.t('figure.label.transparent')}\n      </label>\n      <div field>\n        <label>${i18next.t('figure.label.emissive')}</label>\n        <input\n          type=\"range\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.05\"\n          ?disabled=${this.locked}\n          .value=${String(glow?.intensity ?? 0)}\n          @change=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value))}\n        />\n        <small>${(glow?.intensity ?? 0).toFixed(2)}</small>\n      </div>\n      ${glow\n        ? html`<div field>\n            <label>${i18next.t('figure.label.emissive-color')}</label>\n            <div swatches>${this.swatches(lit.length ? lit : painted, glow.token, token => this.put({ emissive: { ...glow, token } }))}</div>\n          </div>`\n        : nothing}\n      ${this.renderSegments(part)}\n    `\n  }\n\n  private renderSegments(part: V3AssetGeometry & { id: string }) {\n    const provider = (part as { shape?: { provider?: string } }).shape?.provider ?? ''\n    if (!ROUND.has(provider)) return nothing\n    const current = part.segments ?? DEFAULT_SEGMENTS\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.segments')}</label>\n        <div segments>\n          ${SEGMENT_PRESETS.map(\n            preset => html`<button\n              ?on=${preset === current}\n              ?disabled=${this.locked}\n              @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}\n            >\n              <b>${preset}</b>\n              <small>${i18next.t('figure.text.n-triangles', { count: v3TrianglesOf({ ...part, segments: preset }) })}</small>\n            </button>`\n          )}\n        </div>\n      </div>\n    `\n  }\n\n  private swatches(entries: [string, string][], chosen: string | undefined, pick: (token: string) => void) {\n    return entries.map(\n      ([token, colour]) => html`<button\n        swatch\n        ?on=${token === chosen}\n        ?disabled=${this.locked}\n        title=${purposeOf(token)}\n        aria-label=${purposeOf(token)}\n        style=\"--swatch:${colour}\"\n        @click=${() => pick(token)}\n      ></button>`\n    )\n  }\n\n  private offered(): Record<string, string> {\n    return { ...(activePalette() as Record<string, string>), ...this.palette }\n  }\n\n  /** Intensity 0 is no glow at all, as in V2; a new glow takes the part's own colour until another is picked. */\n  private glow(intensity: number) {\n    const material = this.body!.material\n    this.put({ emissive: intensity > 0 ? { token: material.emissive?.token ?? material.token, intensity, on: true } : undefined })\n  }\n\n  private put(patch: Partial<V3Material>) {\n    const material: V3Material = { ...this.body!.material, ...patch }\n    for (const key of Object.keys(material) as (keyof V3Material)[]) if (material[key] === undefined) delete material[key]\n    /* The colours this material names that the asset does not carry yet. */\n    const offered = this.offered()\n    const palette = Object.fromEntries(\n      [material.token, material.emissive?.token]\n        .filter((token): token is string => !!token && this.palette[token] === undefined && offered[token] !== undefined)\n        .map(token => [token, offered[token]!])\n    )\n    this.edit({ kind: 'set-material', target: this.body!.id, material, ...(Object.keys(palette).length ? { palette } : {}) })\n  }\n\n  private edit(edit: V3PartEdit) {\n    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -22,7 +22,7 @@ const PROVIDER_ICON = {
 const RECIPES = [
     { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
     { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
-    { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rect' },
+    { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rounded-box' },
     { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
 ];
 let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
@@ -47,6 +47,8 @@ let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
         color: var(--md-sys-color-on-surface);
         font: var(--label-font, inherit);
         font-size: 0.76rem;
+        /* Folds by its own width: the editor gives this column 140 px when it has two columns (UX, 2026-09-24). */
+        container-type: inline-size;
       }
       section {
         padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
@@ -213,6 +215,19 @@ let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
         --md-icon-size: 15px;
         color: inherit;
       }
+      /*
+        Under 200 px the selected row's four buttons pushed its name out and the last one past the edge (seen at 140,
+        2026-09-24). They go to a line of their own under the name.
+      */
+      @container (max-width: 199px) {
+        li[selected] {
+          flex-wrap: wrap;
+        }
+        li[selected] div[ops] {
+          flex-basis: 100%;
+          justify-content: flex-end;
+        }
+      }
       p[quiet] {
         margin: 0;
         font-size: 0.76rem;

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'\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 가 만들 수 있는 것만 보인다. */\nconst RECIPES: Array<{ kind: V3PrimitiveCreation['kind']; 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-rect' },\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        border-right: 1px solid var(--md-sys-color-outline-variant);\n        color: var(--md-sys-color-on-surface);\n        font: var(--label-font, inherit);\n        font-size: 0.76rem;\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      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      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  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.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  /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */\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          >${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 type { V3PrimitiveCreation } from '@hatiolab/figure-model'\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 가 만들 수 있는 것만 보인다. */\nconst RECIPES: Array<{ kind: V3PrimitiveCreation['kind']; 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: '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        border-right: 1px solid var(--md-sys-color-outline-variant);\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      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  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.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  /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */\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          >${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"]}

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

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