@things-factory/figure-ui 10.1.244 → 10.1.246

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

@@ -1 +1 @@
-{"version":3,"file":"figure-material-panel.js","sourceRoot":"","sources":["../../client/modeller/figure-material-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, svg } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { MATERIAL_PRESETS, SEGMENT_PRESETS, figureTrianglesOf } from '@hatiolab/figure-model'\nimport { activePalette } from '@hatiolab/things-scene'\nimport type { FigureAssetGeometry, FigureMaterial, FigurePartEdit } from '@hatiolab/figure-model'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\nimport { isRoundBody } from './starting-shape.js'\nimport { glowOf, materialEditOf, offeredPaletteOf } from './material-edit.js'\n\n/** The purpose each palette role is for, by its token. */\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 DEFAULT_SEGMENTS = 12\n\n/**\n * 재질 — a part's material.\n *\n * An earlier editor showed the colour role as a raw token (`palette.dark`) in a select and nothing else. The 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: painted colours and lit colours as two groups of swatches, each named for what it\n * is for.\n *\n * Not here, because a material has no place for them: flat shading and casting\n * shadows. The glow's colour comes from the lit colours.\n *\n * Every change leaves as one `part-edit`; the editor runs it through the session, one step of the undo history.\n */\n@customElement('figure-material-panel')\nexport class FigureMaterialPanel extends localize(i18next)(LitElement) {\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    /* The rarer half, drawn inside the 「더 보기」 fold: the fold gives the padding and the line. */\n    div[more] {\n      display: grid;\n      gap: 8px;\n    }\n    div[field] {\n      display: grid;\n      gap: 4px;\n    }\n    /* A slider and its value on one line, the value at the end where the eye finishes. */\n    div[slider] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 3em;\n      align-items: center;\n      gap: 8px;\n    }\n    div[slider] output {\n      text-align: right;\n      font-variant-numeric: tabular-nums;\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    select,\n    input[type='range'] {\n      font: inherit;\n      min-width: 0;\n    }\n    /* The segment picker: the four common counts as their silhouettes with their triangle cost, the rest folded. */\n    div[segments] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 4px;\n    }\n    button[seg] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 1px;\n      padding: 6px 2px 4px;\n      font: inherit;\n      color: 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[seg]:hover:not([on]) {\n      background-color: var(--md-sys-color-surface-container);\n    }\n    button[seg][on] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n    /* Small, and 12 and 16 both read as circles: large enough for the corners to show. */\n    button[seg] svg {\n      display: block;\n      width: 32px;\n      height: 32px;\n    }\n    button[seg] svg polygon {\n      fill: var(--md-sys-color-surface-container-highest);\n      stroke: currentColor;\n      stroke-width: 1.1;\n      stroke-linejoin: miter;\n    }\n    button[seg][on] svg polygon {\n      fill: var(--md-sys-color-surface-container-lowest);\n    }\n    button[seg] b {\n      font-weight: 600;\n    }\n    button[seg] small {\n      margin: 0;\n    }\n    details[free] summary {\n      margin-top: 4px;\n      cursor: pointer;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    div[presets] {\n      display: flex;\n      gap: 4px;\n      margin-top: 4px;\n    }\n    div[presets] button {\n      flex: 1;\n      padding: 3px 0;\n      font: inherit;\n      color: 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    div[presets] button[on] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n  `]\n\n  /** The selected body as evaluated — its material, its segments and its shape. */\n  @property({ attribute: false }) body?: FigureAssetGeometry & { 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   * Which half to draw. `look` is what most parts need -- the colour role and the preset; `more` is what few parts\n   * need -- transparency, glow and the segments of a round part -- drawn in the properties' 「더 보기」 fold.\n   */\n  @property({ type: String }) show: 'look' | 'more' = 'look'\n  /** The glow while its slider is dragged: shown beside it and drawn on the canvas, recorded on release. */\n  @state() private glowing?: number\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, 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    if (this.show === 'more') return this.renderMore(part, painted, lit)\n    return html`<section>\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      </div>\n      <div form>\n        <span>${i18next.t('figure.label.preset')}</span>\n        <select\n          ?disabled=${this.locked}\n          @change=${(e: Event) => this.put({ preset: ((e.target as HTMLSelectElement).value || undefined) as FigureMaterial['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    </section>`\n  }\n\n  /** Transparency, glow and segments: few parts need them, so they wait in the 「더 보기」 fold. */\n  private renderMore(part: FigureAssetGeometry & { id: string }, painted: [string, string][], lit: [string, string][]) {\n    const material = part.material\n    const glow = material.emissive\n    /* Under its own title: below 「단면」 without one, transparency and glow read as the section's (sweep 2026-10-27 U21). */\n    return html`<div more>\n      <h3>${i18next.t('figure.label.part-material')}</h3>\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 form>\n        <span>${i18next.t('figure.label.emissive')}</span>\n        <div slider>\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          @input=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value), true)}\n          @change=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value))}\n        />\n        <output>${(this.glowing ?? glow?.intensity ?? 0).toFixed(2)}</output>\n        </div>\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    </div>`\n  }\n\n  private renderSegments(part: FigureAssetGeometry & { id: string }) {\n    if (!isRoundBody((part as { shape?: never }).shape)) 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.slice(0, 4).map(\n            preset => html`<button\n              seg\n              ?on=${preset === current}\n              ?disabled=${this.locked}\n              @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}\n            >\n              ${silhouette(preset)}\n              <b>${preset}</b>\n              <small>${i18next.t('figure.text.n-triangles', { count: figureTrianglesOf({ ...part, segments: preset }) })}</small>\n            </button>`\n          )}\n        </div>\n        <details free ?open=${SEGMENT_PRESETS.slice(4).includes(current as never)}>\n          <summary>${i18next.t('figure.text.more-segment-options')}</summary>\n          <div presets>\n            ${SEGMENT_PRESETS.slice(4).map(\n              preset => html`<button ?on=${preset === current} ?disabled=${this.locked} @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}>\n                ${preset}\n              </button>`\n            )}\n          </div>\n        </details>\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 offeredPaletteOf(activePalette() as Record<string, string>, this.palette)\n  }\n\n  private glow(intensity: number, live = false) {\n    this.glowing = live ? intensity : undefined\n    this.put(glowOf(this.body!.material, intensity), live)\n  }\n\n  /** A material change: recorded, or -- while a slider is dragged -- only drawn (`part-live`). */\n  private put(patch: Partial<FigureMaterial>, live = false) {\n    const edit = materialEditOf(this.body!.id, this.body!.material, patch, this.palette, this.offered())\n    if (live) this.dispatchEvent(new CustomEvent('part-live', { detail: { edit }, bubbles: true, composed: true }))\n    else this.edit(edit)\n  }\n\n  private edit(edit: FigurePartEdit) {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))\n  }\n}\n\n/** A regular polygon of this many sides -- how round a body with this rim count looks from its end. */\nfunction silhouette(segments: number) {\n  const points: string[] = []\n  for (let i = 0; i < segments; i++) {\n    const angle = -Math.PI / 2 + (i * 2 * Math.PI) / segments\n    points.push(`${(16 + 13 * Math.cos(angle)).toFixed(2)},${(16 + 13 * Math.sin(angle)).toFixed(2)}`)\n  }\n  return svg`<svg viewBox=\"0 0 32 32\" aria-hidden=\"true\"><polygon points=${points.join(' ')}></polygon></svg>`\n}\n"]}
+{"version":3,"file":"figure-material-panel.js","sourceRoot":"","sources":["../../client/modeller/figure-material-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, svg } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { MATERIAL_PRESETS, SEGMENT_PRESETS, figureTrianglesOf } from '@hatiolab/figure-model'\nimport { activePalette } from '@hatiolab/things-scene'\nimport type { FigureAssetGeometry, FigureMaterial, FigurePartEdit } from '@hatiolab/figure-model'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\nimport { isRoundBody } from './starting-shape.js'\nimport { glowOf, materialEditOf, offeredPaletteOf, ownColourOf } from './material-edit.js'\n\n/** The purpose each palette role is for, by its token. */\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 DEFAULT_SEGMENTS = 12\n\n/**\n * 재질 — a part's material.\n *\n * An earlier editor showed the colour role as a raw token (`palette.dark`) in a select and nothing else. The 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: painted colours and lit colours as two groups of swatches, each named for what it\n * is for.\n *\n * Not here, because a material has no place for them: flat shading and casting\n * shadows. The glow's colour comes from the lit colours.\n *\n * Every change leaves as one `part-edit`; the editor runs it through the session, one step of the undo history.\n */\n@customElement('figure-material-panel')\nexport class FigureMaterialPanel extends localize(i18next)(LitElement) {\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    /* The rarer half, drawn inside the 「더 보기」 fold: the fold gives the padding and the line. */\n    div[more] {\n      display: grid;\n      gap: 8px;\n    }\n    div[field] {\n      display: grid;\n      gap: 4px;\n    }\n    /* A slider and its value on one line, the value at the end where the eye finishes. */\n    div[slider] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 3em;\n      align-items: center;\n      gap: 8px;\n    }\n    div[slider] output {\n      text-align: right;\n      font-variant-numeric: tabular-nums;\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    /*\n      The colour picked by its value: a swatch's size, told apart from the roles by a ring of every hue (the usual mark of\n      「any colour」). A colour picked joins the swatches before it, chosen there as any is. The browser's picker lies over\n      the ring, unseen.\n    */\n    label[own-colour] {\n      position: relative;\n      display: inline-grid;\n      place-items: center;\n      box-sizing: border-box;\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n      background: conic-gradient(#f44336, #ffeb3b, #4caf50, #00bcd4, #3f51b5, #e91e63, #f44336);\n      cursor: pointer;\n    }\n    label[own-colour]::after {\n      content: '';\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: var(--md-sys-color-surface);\n    }\n    label[own-colour] input {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      border: 0;\n      opacity: 0;\n      cursor: pointer;\n    }\n    button[swatch][on] {\n      outline: 2px solid var(--md-sys-color-primary);\n      outline-offset: 1px;\n    }\n    select,\n    input[type='range'] {\n      font: inherit;\n      min-width: 0;\n    }\n    /* The segment picker: the four common counts as their silhouettes with their triangle cost, the rest folded. */\n    div[segments] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 4px;\n    }\n    button[seg] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 1px;\n      padding: 6px 2px 4px;\n      font: inherit;\n      color: 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[seg]:hover:not([on]) {\n      background-color: var(--md-sys-color-surface-container);\n    }\n    button[seg][on] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n    /* Small, and 12 and 16 both read as circles: large enough for the corners to show. */\n    button[seg] svg {\n      display: block;\n      width: 32px;\n      height: 32px;\n    }\n    button[seg] svg polygon {\n      fill: var(--md-sys-color-surface-container-highest);\n      stroke: currentColor;\n      stroke-width: 1.1;\n      stroke-linejoin: miter;\n    }\n    button[seg][on] svg polygon {\n      fill: var(--md-sys-color-surface-container-lowest);\n    }\n    button[seg] b {\n      font-weight: 600;\n    }\n    button[seg] small {\n      margin: 0;\n    }\n    details[free] summary {\n      margin-top: 4px;\n      cursor: pointer;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    div[presets] {\n      display: flex;\n      gap: 4px;\n      margin-top: 4px;\n    }\n    div[presets] button {\n      flex: 1;\n      padding: 3px 0;\n      font: inherit;\n      color: 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    div[presets] button[on] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n  `]\n\n  /** The selected body as evaluated — its material, its segments and its shape. */\n  @property({ attribute: false }) body?: FigureAssetGeometry & { 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   * Which half to draw. `look` is what most parts need -- the colour role and the preset; `more` is what few parts\n   * need -- transparency, glow and the segments of a round part -- drawn in the properties' 「더 보기」 fold.\n   */\n  @property({ type: String }) show: 'look' | 'more' = 'look'\n  /** The glow while its slider is dragged: shown beside it and drawn on the canvas, recorded on release. */\n  @state() private glowing?: number\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, 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    if (this.show === 'more') return this.renderMore(part, painted, lit)\n    return html`<section>\n      <h3>${i18next.t('figure.label.part-material')}</h3>\n      <div field>\n        <label>${i18next.t('figure.label.palette-role')}</label>\n        <div swatches>\n          ${this.swatches(painted, material.token, token => this.put({ token }))}\n          <label own-colour title=${i18next.t('figure.text.own-colour-explained')}>\n            <input\n              type=\"color\"\n              ?disabled=${this.locked}\n              aria-label=${i18next.t('figure.label.own-colour')}\n              .value=${this.offered()[material.token] ?? '#9a9a9a'}\n              @change=${(e: Event) => this.pickOwn((e.target as HTMLInputElement).value)}\n            />\n          </label>\n        </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      </div>\n      <div form>\n        <span>${i18next.t('figure.label.preset')}</span>\n        <select\n          ?disabled=${this.locked}\n          @change=${(e: Event) => this.put({ preset: ((e.target as HTMLSelectElement).value || undefined) as FigureMaterial['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    </section>`\n  }\n\n  /** Transparency, glow and segments: few parts need them, so they wait in the 「더 보기」 fold. */\n  private renderMore(part: FigureAssetGeometry & { id: string }, painted: [string, string][], lit: [string, string][]) {\n    const material = part.material\n    const glow = material.emissive\n    /* Under its own title: below 「단면」 without one, transparency and glow read as the section's (sweep 2026-10-27 U21). */\n    return html`<div more>\n      <h3>${i18next.t('figure.label.part-material')}</h3>\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 form>\n        <span>${i18next.t('figure.label.emissive')}</span>\n        <div slider>\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          @input=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value), true)}\n          @change=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value))}\n        />\n        <output>${(this.glowing ?? glow?.intensity ?? 0).toFixed(2)}</output>\n        </div>\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    </div>`\n  }\n\n  private renderSegments(part: FigureAssetGeometry & { id: string }) {\n    if (!isRoundBody((part as { shape?: never }).shape)) 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.slice(0, 4).map(\n            preset => html`<button\n              seg\n              ?on=${preset === current}\n              ?disabled=${this.locked}\n              @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}\n            >\n              ${silhouette(preset)}\n              <b>${preset}</b>\n              <small>${i18next.t('figure.text.n-triangles', { count: figureTrianglesOf({ ...part, segments: preset }) })}</small>\n            </button>`\n          )}\n        </div>\n        <details free ?open=${SEGMENT_PRESETS.slice(4).includes(current as never)}>\n          <summary>${i18next.t('figure.text.more-segment-options')}</summary>\n          <div presets>\n            ${SEGMENT_PRESETS.slice(4).map(\n              preset => html`<button ?on=${preset === current} ?disabled=${this.locked} @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}>\n                ${preset}\n              </button>`\n            )}\n          </div>\n        </details>\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 offeredPaletteOf(activePalette() as Record<string, string>, this.palette)\n  }\n\n  private glow(intensity: number, live = false) {\n    this.glowing = live ? intensity : undefined\n    this.put(glowOf(this.body!.material, intensity), live)\n  }\n\n  /** A colour picked by its value: the part takes it, and the asset's palette carries it in the same edit. */\n  private pickOwn(hex: string) {\n    const { token, colour } = ownColourOf(hex)\n    this.put({ token }, false, { [token]: colour })\n  }\n\n  /** A material change: recorded, or -- while a slider is dragged -- only drawn (`part-live`). */\n  private put(patch: Partial<FigureMaterial>, live = false, more: Record<string, string> = {}) {\n    const edit = materialEditOf(this.body!.id, this.body!.material, patch, this.palette, { ...this.offered(), ...more })\n    if (live) this.dispatchEvent(new CustomEvent('part-live', { detail: { edit }, bubbles: true, composed: true }))\n    else this.edit(edit)\n  }\n\n  private edit(edit: FigurePartEdit) {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))\n  }\n}\n\n/** A regular polygon of this many sides -- how round a body with this rim count looks from its end. */\nfunction silhouette(segments: number) {\n  const points: string[] = []\n  for (let i = 0; i < segments; i++) {\n    const angle = -Math.PI / 2 + (i * 2 * Math.PI) / segments\n    points.push(`${(16 + 13 * Math.cos(angle)).toFixed(2)},${(16 + 13 * Math.sin(angle)).toFixed(2)}`)\n  }\n  return svg`<svg viewBox=\"0 0 32 32\" aria-hidden=\"true\"><polygon points=${points.join(' ')}></polygon></svg>`\n}\n"]}

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

@@ -32,7 +32,7 @@ export interface FigurePartRow {
     fastenedTo?: string;
 }
 /** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */
-export type FigurePaletteKind = Exclude<FigurePrimitiveCreation['kind'], 'mesh'> | 'plate' | 'wall';
+export type FigurePaletteKind = Exclude<FigurePrimitiveCreation['kind'], 'mesh' | 'tapered-box' | 'duct'> | 'plate' | 'wall';
 declare const FigureParts_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class FigureParts extends FigureParts_base {
     static styles: import("lit").CSSResult[];

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

@@ -17,6 +17,9 @@ const KIND_ICON = {
     'hollow-box': 'check_box_outline_blank',
     polygon: 'pentagon',
     pyramid: 'details',
+    'tapered-box': 'change_history',
+    pipe: 'conversion_path',
+    duct: 'conversion_path',
     portal: 'door_front'
 };
 const RECIPES = [
@@ -26,6 +29,7 @@ const RECIPES = [
     { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
     { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
     { kind: 'pyramid', icon: 'details', label: 'figure.label.primitive-pyramid' },
+    { kind: 'pipe', icon: 'conversion_path', label: 'figure.label.primitive-pipe' },
     { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
     { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
     { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
@@ -546,7 +550,7 @@ let FigureParts = class FigureParts extends localize(i18next)(LitElement) {
       >
         <option value="" ?selected=${!b.level}>${i18next.t('figure.label.detail-none')}</option>
         ${DETAIL_LEVELS.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] })}
+            ${one === 'UNLIMITED' ? '' : `${one} `}${i18next.t('figure.label.detail-' + one)} · ${PART_LIMIT[one] === null ? i18next.t('figure.text.no-part-limit') : i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}
           </option>`)}
       </select>
     </div>`;

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

@@ -1 +1 @@
-{"version":3,"file":"figure-parts.js","sourceRoot":"","sources":["../../client/modeller/figure-parts.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-file.js'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { DETAIL_LEVELS, PART_LIMIT, type DetailLevel } from '@hatiolab/figure-model'\nimport type { FigurePrimitiveCreation } from '@hatiolab/figure-model'\nimport type { FigureBudgetLine } from './maturity.js'\nimport { partLabelOf } from './fields.js'\n\n/**\n * 부품 팔레트와 부품 목록 — 자산의 것.\n *\n * 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.\n *\n * 부품은 평가가 준 형상에서 읽은 시작 모양 이름(`kind`)으로 보인다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라\n * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.\n *\n * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다.\n */\n\n/** 한 줄 — 평가에서 이 패널이 읽는 것만. */\nexport interface FigurePartRow {\n  id: string\n  /** 시작 모양 이름(`startingShapeKindOfBody`): 상자 · 원기둥 … 아이콘을 고른다. */\n  kind: string\n  /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */\n  hidden?: boolean\n  /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */\n  invisible?: boolean\n  /** 되풀이한 부품이면 지금 몇 개로 그려지나. 되풀이는 한 부품이다 — 한 줄로 보인다. */\n  copies?: number\n  /**\n   * 바로 붙어 있는 곳: `대상 부품 · 대상 면`. 목록은 평평한 채로 두고 보조 문구로만 적는다 — 순서도 들여쓰기도\n   * 붙임 때문에 바뀌지 않는다(ADR-0097 §5.5, 설계자 2026-09-27).\n   */\n  fastenedTo?: string\n}\n\n/** 시작 모양마다의 아이콘. Material Symbols 이름이다. */\nconst KIND_ICON: Record<string, string> = {\n  cube: 'deployed_code',\n  cylinder: 'database',\n  frustum: 'change_history',\n  sphere: 'circle',\n  'rounded-box': 'crop_square',\n  'hollow-box': 'check_box_outline_blank',\n  polygon: 'pentagon',\n  pyramid: 'details',\n  portal: 'door_front'\n}\n\n/** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */\n/*\n  The palette: starting shapes (ADR-0100 §2.1). A plate and a wall are boxes of a shape a person reaches for, so they are\n  starting sizes, not kinds of their own. A rounded box and a box open at the top are not here: they are a box with its\n  corners rounded or an inside made, from the part's own 단면 section (§3.3), so the palette does not offer a second way.\n*/\n/* A mesh part is made from a file (`import-mesh`), not from a starting size. */\nexport type FigurePaletteKind = Exclude<FigurePrimitiveCreation['kind'], 'mesh'> | 'plate' | 'wall'\nconst RECIPES: Array<{ kind: FigurePaletteKind; 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: '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: 'pyramid', icon: 'details', label: 'figure.label.primitive-pyramid' },\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-parts')\nexport class FigureParts 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: var(--ui-t-small, 11.5px);\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[model-root] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        width: 100%;\n        min-height: 32px;\n        padding: 4px 8px;\n        border: 1px solid transparent;\n        border-radius: 6px;\n        background: none;\n        font: inherit;\n        font-weight: 600;\n        text-align: start;\n        color: var(--md-sys-color-on-surface);\n        cursor: pointer;\n      }\n      button[model-root] span {\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n      /* Chosen: a frame and a tint, not colour alone. */\n      button[model-root][on] {\n        border-color: var(--md-sys-color-primary);\n        background: var(--md-sys-color-primary-container);\n      }\n      button[model-root]:focus-visible,\n      button[pick]:focus-visible {\n        outline: 2px solid var(--md-sys-color-primary);\n        outline-offset: 1px;\n      }\n      /* The cost line as a line, not a card; lit under the hand like the rest of the list. */\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: var(--ui-t-micro, 11px);\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 transparent;\n        border-radius: 4px;\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: var(--ui-t-micro, 11px);\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: var(--ui-t-micro, 11px);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      /* A field in the side panel's look (side-panel-styles): 26px, a quiet ground, its line only under the hand. */\n      div[level] select {\n        min-width: 0;\n        min-height: 26px;\n        padding: 2px 4px;\n        font: inherit;\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--md-sys-color-on-surface);\n        background: var(--md-sys-color-surface-container-low);\n        border: 1px solid transparent;\n        border-radius: 4px;\n      }\n      div[level] select:hover:not(:disabled) {\n        border-color: var(--md-sys-color-outline-variant);\n      }\n      small[copies] {\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      span[room] {\n        font-size: var(--ui-t-micro, 11px);\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      /* A tile with no outline: its icon and name, lit under the hand -- ten outlined tiles were the boxiest part of the screen (user 2026-10-17). */\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: var(--ui-t-micro, 11px);\n        line-height: 1.2;\n        text-align: center;\n        overflow-wrap: anywhere;\n        /* A tile's name on one line, so the nine stand one height; a long name ends in an ellipsis, its title says it all. */\n        white-space: nowrap;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        background: none;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      /*\n        A file brought in is not a starting shape: its own row under the nine, its words on one line. As a tenth tile its\n        two-word name broke onto two lines and stood it taller than the rest (2026-10-16).\n      */\n      button[shape] > span {\n        max-width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      /*\n        The one file picker (ox-input-file, quiet) on that row: a GLB refused or going up is said on the spot. Its button\n        wears the tiles' words and lit hand -- the picker's own 13/600 stood louder than the shapes' heading.\n      */\n      ox-input-file[mesh-file] {\n        grid-column: 1 / -1;\n        justify-content: center;\n        font-size: var(--ui-t-micro, 11px);\n        --ox-input-file-action-height: 26px;\n      }\n      ox-input-file[mesh-file]::part(attach) {\n        gap: 6px;\n        padding: 0 8px;\n        font: var(--label-font, inherit);\n        font-size: var(--ui-t-micro, 11px);\n        font-weight: 400;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        border-radius: 4px;\n      }\n      ox-input-file[mesh-file]:not([disabled])::part(attach):hover {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n      }\n      ox-input-file[mesh-file][disabled]::part(attach) {\n        opacity: 0.35;\n      }\n      ox-input-file[mesh-file] md-icon {\n        --md-icon-size: 18px;\n      }\n      section[shapes].candrop {\n        outline: 1px dashed var(--md-sys-color-primary);\n        outline-offset: -1px;\n      }\n      /* An action in the side panel's look: icon and words in the primary colour, no pill. */\n      button[recipe-catalog] {\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        padding: 4px 6px;\n        margin-left: -6px;\n        font: inherit;\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--md-sys-color-primary);\n        background: none;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      button[recipe-catalog]:hover:not(:disabled) {\n        background: var(--md-sys-color-surface-container);\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      /*\n        Icons by role, three sizes on the whole screen (2026-10-16; there were six): 20 for the bar, the tabs and the\n        model's head, 18 for a palette tile, 16 beside words and on a row.\n      */\n      button[model-root] md-icon {\n        --md-icon-size: 20px;\n      }\n      /* Beside its words, as every icon on a button with words is; without a size it stood at md-icon's own 24. */\n      button[recipe-catalog] md-icon {\n        --md-icon-size: 16px;\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: 16px;\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      button[pick] {\n        display: flex;\n        flex: 1;\n        min-width: 0;\n        padding: 0;\n        font: inherit;\n        color: inherit;\n        text-align: start;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\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: var(--ui-t-body, 13px);\n      }\n      span[label] small {\n        margin-left: 4px;\n        font-size: var(--ui-t-micro, 11px);\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: 16px;\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: var(--ui-t-small, 11.5px);\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: FigurePartRow[] = []\n  /** 고른 부품의 id. 자리(index)가 아니다 — 부품은 id 로 안정하게 가리킨다. */\n  @property({ type: String }) selected = ''\n  /** The model's own name, the list's root: choosing it shows the model's settings (B.1). */\n  @property({ type: String }) modelName = ''\n  /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */\n  @property({ type: Boolean }) locked = false\n  /**\n   * 이 피규어가 치르는 값 — 삼각형 · 묶음 · 한 화면에 몇 대 · 등급. 부품을 더하는 바로 그 자리에서 보여야 로우폴리의\n   * 기준이 저작을 이끈다. 등급이 D 면 무엇이 넘쳤는지를 적는다. 누르면 성숙도 탭이 열린다.\n   */\n  @property({ attribute: false }) budget?: FigureBudgetLine\n  /**\n   * 디테일 등급(S/M/L)의 부품 한도(사용자 2026-09-24). 부품을 넣기 **전에** 몇 개 남았는지 보이고, 다 차면 팔레트가\n   * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.\n   */\n  @property({ attribute: false }) partBudget?: { level: DetailLevel | null; used: number; limit: number | null }\n  /** How many recipe templates the catalog holds; none, and the section is not drawn. */\n  @property({ type: Number }) recipeCount = 0\n  /** How far the GLB being brought in has gone up (0‒1), while it does; the picker shows it. */\n  @property({ type: Number }) meshProgress?: number\n\n  /* A GLB dragged over the shapes is a part brought in: the section is where it is dropped (page standard §7-1). */\n  @query('section[shapes]') private shapes?: HTMLElement\n\n  firstUpdated() {\n    /* The drop area is drawn by the first render; the picker is told it by the next. */\n    this.requestUpdate()\n  }\n\n  render() {\n    const b = this.partBudget\n    const full = !!b && b.limit !== null && b.used >= b.limit\n    return html`\n      <section shapes>\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          <ox-input-file\n            quiet\n            hide-filelist\n            mesh-file\n            accept=\".glb,model/gltf-binary\"\n            .label=${i18next.t('figure.button.import-mesh')}\n            title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t('figure.text.import-mesh-hint')}\n            ?disabled=${this.locked || full}\n            .dropTarget=${this.shapes}\n            .progress=${this.meshProgress}\n            @change=${(e: CustomEvent) => {\n              const file = (e.detail as File[] | undefined)?.[0]\n              if (file) this.ask('import-mesh', { file })\n              ;(e.currentTarget as HTMLElement & { reset(): void }).reset()\n            }}\n          ><md-icon slot=\"icon\">view_in_ar</md-icon></ox-input-file>\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      ${this.renderRecipes(full)}\n\n      <section list>\n        <!--\n          The list's root: the model by its name. Choosing it shows the model's settings -- not \"select all\", not \"fit the\n          view\" -- the same move as the model name in the properties panel's path (designer 2026-09-27, B.1).\n        -->\n        <button\n          model-root\n          aria-pressed=${String(!this.selected)}\n          ?on=${!this.selected}\n          title=${i18next.t('figure.button.show-model-settings')}\n          aria-label=${`${i18next.t('figure.button.show-model-settings')}: ${this.modelName || i18next.t('figure.text.new-figure-name')}`}\n          @click=${() => this.dispatchEvent(new CustomEvent('show-model-settings', { bubbles: true, composed: true }))}\n        >\n          <md-icon>category</md-icon><span>${this.modelName || i18next.t('figure.text.new-figure-name')}</span>\n        </button>\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  /** 디테일 등급 — 고르면 한도가 바뀐다. 목록 머리 아래. */\n  private renderLevel() {\n    const b = this.partBudget\n    /* Not before the first part: a level with nothing to limit was the first choice a new figure met (U09). Once set, it shows. */\n    if (!b || (!this.parts.length && !b.level)) 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        .value=${b.level ?? ''}\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        ${DETAIL_LEVELS.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        <strong performance-cost>${i18next.t('figure.label.performance-cost')}</strong>\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: FigurePartRow, index: number) {\n    const selected = part.id === this.selected\n    const off = !!part.hidden\n    /* The row is picked by the keyboard too, by its name's button: the eye was the only stop on a row, and it does not pick (2026-11-01 audit). */\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>${KIND_ICON[part.kind] ?? 'deployed_code'}</md-icon>\n        <button pick aria-pressed=${String(selected)}><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}${part.fastenedTo\n            ? html`<small fastened-to title=${i18next.t('figure.label.fastened-to')}>${part.fastenedTo}</small>`\n            : nothing}</span\n        ></button>\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   * Recipes (ADR-0095): the catalog of templates -- a door, a roller row -- opened over the modeller, put onto the chosen\n   * part in one step.\n   */\n  private renderRecipes(full: boolean) {\n    if (!this.recipeCount) return nothing\n    return html`<section recipes>\n      <h3>${i18next.t('figure.label.recipes')}</h3>\n      <button recipe-catalog ?disabled=${this.locked || full} @click=${() => this.ask('open-recipe-catalog', {})}>\n        <md-icon>widgets</md-icon>${i18next.t('figure.button.open-recipe-catalog', { count: this.recipeCount })}\n      </button>\n    </section>`\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-parts.js","sourceRoot":"","sources":["../../client/modeller/figure-parts.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-file.js'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { DETAIL_LEVELS, PART_LIMIT, type DetailLevel } from '@hatiolab/figure-model'\nimport type { FigurePrimitiveCreation } from '@hatiolab/figure-model'\nimport type { FigureBudgetLine } from './maturity.js'\nimport { partLabelOf } from './fields.js'\n\n/**\n * 부품 팔레트와 부품 목록 — 자산의 것.\n *\n * 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.\n *\n * 부품은 평가가 준 형상에서 읽은 시작 모양 이름(`kind`)으로 보인다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라\n * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.\n *\n * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다.\n */\n\n/** 한 줄 — 평가에서 이 패널이 읽는 것만. */\nexport interface FigurePartRow {\n  id: string\n  /** 시작 모양 이름(`startingShapeKindOfBody`): 상자 · 원기둥 … 아이콘을 고른다. */\n  kind: string\n  /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */\n  hidden?: boolean\n  /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */\n  invisible?: boolean\n  /** 되풀이한 부품이면 지금 몇 개로 그려지나. 되풀이는 한 부품이다 — 한 줄로 보인다. */\n  copies?: number\n  /**\n   * 바로 붙어 있는 곳: `대상 부품 · 대상 면`. 목록은 평평한 채로 두고 보조 문구로만 적는다 — 순서도 들여쓰기도\n   * 붙임 때문에 바뀌지 않는다(ADR-0097 §5.5, 설계자 2026-09-27).\n   */\n  fastenedTo?: string\n}\n\n/** 시작 모양마다의 아이콘. Material Symbols 이름이다. */\nconst KIND_ICON: Record<string, string> = {\n  cube: 'deployed_code',\n  cylinder: 'database',\n  frustum: 'change_history',\n  sphere: 'circle',\n  'rounded-box': 'crop_square',\n  'hollow-box': 'check_box_outline_blank',\n  polygon: 'pentagon',\n  pyramid: 'details',\n  'tapered-box': 'change_history',\n  pipe: 'conversion_path',\n  duct: 'conversion_path',\n  portal: 'door_front'\n}\n\n/** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */\n/*\n  The palette: starting shapes (ADR-0100 §2.1). A plate and a wall are boxes of a shape a person reaches for, so they are\n  starting sizes, not kinds of their own. A rounded box and a box open at the top are not here: they are a box with its\n  corners rounded or an inside made, from the part's own 단면 section (§3.3), so the palette does not offer a second way.\n*/\n/* A mesh part is made from a file (`import-mesh`), not from a starting size. */\n/* A tapered box is a box with its top resized in the section editor, and a duct a pipe of a rectangle: no second way here. */\nexport type FigurePaletteKind = Exclude<FigurePrimitiveCreation['kind'], 'mesh' | 'tapered-box' | 'duct'> | 'plate' | 'wall'\nconst RECIPES: Array<{ kind: FigurePaletteKind; 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: '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: 'pyramid', icon: 'details', label: 'figure.label.primitive-pyramid' },\n  { kind: 'pipe', icon: 'conversion_path', label: 'figure.label.primitive-pipe' },\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-parts')\nexport class FigureParts 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: var(--ui-t-small, 11.5px);\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[model-root] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        width: 100%;\n        min-height: 32px;\n        padding: 4px 8px;\n        border: 1px solid transparent;\n        border-radius: 6px;\n        background: none;\n        font: inherit;\n        font-weight: 600;\n        text-align: start;\n        color: var(--md-sys-color-on-surface);\n        cursor: pointer;\n      }\n      button[model-root] span {\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n      /* Chosen: a frame and a tint, not colour alone. */\n      button[model-root][on] {\n        border-color: var(--md-sys-color-primary);\n        background: var(--md-sys-color-primary-container);\n      }\n      button[model-root]:focus-visible,\n      button[pick]:focus-visible {\n        outline: 2px solid var(--md-sys-color-primary);\n        outline-offset: 1px;\n      }\n      /* The cost line as a line, not a card; lit under the hand like the rest of the list. */\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: var(--ui-t-micro, 11px);\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 transparent;\n        border-radius: 4px;\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: var(--ui-t-micro, 11px);\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: var(--ui-t-micro, 11px);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      /* A field in the side panel's look (side-panel-styles): 26px, a quiet ground, its line only under the hand. */\n      div[level] select {\n        min-width: 0;\n        min-height: 26px;\n        padding: 2px 4px;\n        font: inherit;\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--md-sys-color-on-surface);\n        background: var(--md-sys-color-surface-container-low);\n        border: 1px solid transparent;\n        border-radius: 4px;\n      }\n      div[level] select:hover:not(:disabled) {\n        border-color: var(--md-sys-color-outline-variant);\n      }\n      small[copies] {\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      span[room] {\n        font-size: var(--ui-t-micro, 11px);\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      /* A tile with no outline: its icon and name, lit under the hand -- ten outlined tiles were the boxiest part of the screen (user 2026-10-17). */\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: var(--ui-t-micro, 11px);\n        line-height: 1.2;\n        text-align: center;\n        overflow-wrap: anywhere;\n        /* A tile's name on one line, so the nine stand one height; a long name ends in an ellipsis, its title says it all. */\n        white-space: nowrap;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        background: none;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      /*\n        A file brought in is not a starting shape: its own row under the nine, its words on one line. As a tenth tile its\n        two-word name broke onto two lines and stood it taller than the rest (2026-10-16).\n      */\n      button[shape] > span {\n        max-width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      /*\n        The one file picker (ox-input-file, quiet) on that row: a GLB refused or going up is said on the spot. Its button\n        wears the tiles' words and lit hand -- the picker's own 13/600 stood louder than the shapes' heading.\n      */\n      ox-input-file[mesh-file] {\n        grid-column: 1 / -1;\n        justify-content: center;\n        font-size: var(--ui-t-micro, 11px);\n        --ox-input-file-action-height: 26px;\n      }\n      ox-input-file[mesh-file]::part(attach) {\n        gap: 6px;\n        padding: 0 8px;\n        font: var(--label-font, inherit);\n        font-size: var(--ui-t-micro, 11px);\n        font-weight: 400;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        border-radius: 4px;\n      }\n      ox-input-file[mesh-file]:not([disabled])::part(attach):hover {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n      }\n      ox-input-file[mesh-file][disabled]::part(attach) {\n        opacity: 0.35;\n      }\n      ox-input-file[mesh-file] md-icon {\n        --md-icon-size: 18px;\n      }\n      section[shapes].candrop {\n        outline: 1px dashed var(--md-sys-color-primary);\n        outline-offset: -1px;\n      }\n      /* An action in the side panel's look: icon and words in the primary colour, no pill. */\n      button[recipe-catalog] {\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        padding: 4px 6px;\n        margin-left: -6px;\n        font: inherit;\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--md-sys-color-primary);\n        background: none;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      button[recipe-catalog]:hover:not(:disabled) {\n        background: var(--md-sys-color-surface-container);\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      /*\n        Icons by role, three sizes on the whole screen (2026-10-16; there were six): 20 for the bar, the tabs and the\n        model's head, 18 for a palette tile, 16 beside words and on a row.\n      */\n      button[model-root] md-icon {\n        --md-icon-size: 20px;\n      }\n      /* Beside its words, as every icon on a button with words is; without a size it stood at md-icon's own 24. */\n      button[recipe-catalog] md-icon {\n        --md-icon-size: 16px;\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: 16px;\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      button[pick] {\n        display: flex;\n        flex: 1;\n        min-width: 0;\n        padding: 0;\n        font: inherit;\n        color: inherit;\n        text-align: start;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\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: var(--ui-t-body, 13px);\n      }\n      span[label] small {\n        margin-left: 4px;\n        font-size: var(--ui-t-micro, 11px);\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: 16px;\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: var(--ui-t-small, 11.5px);\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: FigurePartRow[] = []\n  /** 고른 부품의 id. 자리(index)가 아니다 — 부품은 id 로 안정하게 가리킨다. */\n  @property({ type: String }) selected = ''\n  /** The model's own name, the list's root: choosing it shows the model's settings (B.1). */\n  @property({ type: String }) modelName = ''\n  /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */\n  @property({ type: Boolean }) locked = false\n  /**\n   * 이 피규어가 치르는 값 — 삼각형 · 묶음 · 한 화면에 몇 대 · 등급. 부품을 더하는 바로 그 자리에서 보여야 로우폴리의\n   * 기준이 저작을 이끈다. 등급이 D 면 무엇이 넘쳤는지를 적는다. 누르면 성숙도 탭이 열린다.\n   */\n  @property({ attribute: false }) budget?: FigureBudgetLine\n  /**\n   * 디테일 등급(S/M/L)의 부품 한도(사용자 2026-09-24). 부품을 넣기 **전에** 몇 개 남았는지 보이고, 다 차면 팔레트가\n   * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.\n   */\n  @property({ attribute: false }) partBudget?: { level: DetailLevel | null; used: number; limit: number | null }\n  /** How many recipe templates the catalog holds; none, and the section is not drawn. */\n  @property({ type: Number }) recipeCount = 0\n  /** How far the GLB being brought in has gone up (0‒1), while it does; the picker shows it. */\n  @property({ type: Number }) meshProgress?: number\n\n  /* A GLB dragged over the shapes is a part brought in: the section is where it is dropped (page standard §7-1). */\n  @query('section[shapes]') private shapes?: HTMLElement\n\n  firstUpdated() {\n    /* The drop area is drawn by the first render; the picker is told it by the next. */\n    this.requestUpdate()\n  }\n\n  render() {\n    const b = this.partBudget\n    const full = !!b && b.limit !== null && b.used >= b.limit\n    return html`\n      <section shapes>\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          <ox-input-file\n            quiet\n            hide-filelist\n            mesh-file\n            accept=\".glb,model/gltf-binary\"\n            .label=${i18next.t('figure.button.import-mesh')}\n            title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t('figure.text.import-mesh-hint')}\n            ?disabled=${this.locked || full}\n            .dropTarget=${this.shapes}\n            .progress=${this.meshProgress}\n            @change=${(e: CustomEvent) => {\n              const file = (e.detail as File[] | undefined)?.[0]\n              if (file) this.ask('import-mesh', { file })\n              ;(e.currentTarget as HTMLElement & { reset(): void }).reset()\n            }}\n          ><md-icon slot=\"icon\">view_in_ar</md-icon></ox-input-file>\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      ${this.renderRecipes(full)}\n\n      <section list>\n        <!--\n          The list's root: the model by its name. Choosing it shows the model's settings -- not \"select all\", not \"fit the\n          view\" -- the same move as the model name in the properties panel's path (designer 2026-09-27, B.1).\n        -->\n        <button\n          model-root\n          aria-pressed=${String(!this.selected)}\n          ?on=${!this.selected}\n          title=${i18next.t('figure.button.show-model-settings')}\n          aria-label=${`${i18next.t('figure.button.show-model-settings')}: ${this.modelName || i18next.t('figure.text.new-figure-name')}`}\n          @click=${() => this.dispatchEvent(new CustomEvent('show-model-settings', { bubbles: true, composed: true }))}\n        >\n          <md-icon>category</md-icon><span>${this.modelName || i18next.t('figure.text.new-figure-name')}</span>\n        </button>\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  /** 디테일 등급 — 고르면 한도가 바뀐다. 목록 머리 아래. */\n  private renderLevel() {\n    const b = this.partBudget\n    /* Not before the first part: a level with nothing to limit was the first choice a new figure met (U09). Once set, it shows. */\n    if (!b || (!this.parts.length && !b.level)) 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        .value=${b.level ?? ''}\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        ${DETAIL_LEVELS.map(\n          one => html`<option value=${one} ?selected=${one === b.level}>\n            ${one === 'UNLIMITED' ? '' : `${one} `}${i18next.t('figure.label.detail-' + one)} · ${PART_LIMIT[one] === null ? i18next.t('figure.text.no-part-limit') : 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        <strong performance-cost>${i18next.t('figure.label.performance-cost')}</strong>\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: FigurePartRow, index: number) {\n    const selected = part.id === this.selected\n    const off = !!part.hidden\n    /* The row is picked by the keyboard too, by its name's button: the eye was the only stop on a row, and it does not pick (2026-11-01 audit). */\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>${KIND_ICON[part.kind] ?? 'deployed_code'}</md-icon>\n        <button pick aria-pressed=${String(selected)}><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}${part.fastenedTo\n            ? html`<small fastened-to title=${i18next.t('figure.label.fastened-to')}>${part.fastenedTo}</small>`\n            : nothing}</span\n        ></button>\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   * Recipes (ADR-0095): the catalog of templates -- a door, a roller row -- opened over the modeller, put onto the chosen\n   * part in one step.\n   */\n  private renderRecipes(full: boolean) {\n    if (!this.recipeCount) return nothing\n    return html`<section recipes>\n      <h3>${i18next.t('figure.label.recipes')}</h3>\n      <button recipe-catalog ?disabled=${this.locked || full} @click=${() => this.ask('open-recipe-catalog', {})}>\n        <md-icon>widgets</md-icon>${i18next.t('figure.button.open-recipe-catalog', { count: this.recipeCount })}\n      </button>\n    </section>`\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-pipe-panel.d.ts

@@ -0,0 +1,29 @@
+import '@material/web/icon/icon.js';
+import { LitElement, nothing } from 'lit';
+import { type FigureEvaluatedShape } from '@hatiolab/figure-model';
+type Body = {
+    id: string;
+    shape: FigureEvaluatedShape;
+};
+declare const FigurePipePanel_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 관 — a pipe's or a duct's section, wall and path (ADR-0100 §16.2), each change one `set-pipe` command, one step of the
+ * history. The path is its pieces in order: a straight run, so long; a bend, of a radius, so many degrees, toward one of
+ * four directions across the pipe -- each said as the figure's axis it turns to there. What the kernel refuses (a bend
+ * tighter than the section, a wall too thick, a path through itself) is said by the editor, with the number it takes.
+ */
+export declare class FigurePipePanel extends FigurePipePanel_base {
+    static styles: import("lit").CSSResult[];
+    body?: Body;
+    locked: boolean;
+    private send;
+    /** A number field: sent on change, put back when it is not a number. */
+    private number;
+    /**
+     * Its end's size: the same as its start's until changed, when it narrows or widens to it evenly along its length
+     * (ADR-0100 §16.2.9) -- a bar thick below and thin above. 「한 굵기로」 makes it one size all along again.
+     */
+    private renderEnd;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+export {};

package/dist-client/modeller/figure-pipe-panel.js

@@ -0,0 +1,221 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { i18next, localize } from '@operato/i18n';
+import { FIGURE_SWEEP_PIECE_LIMIT } from '@hatiolab/figure-model';
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
+import { bendWordOf, piecesOf, QUARTERS } from './pipe-path.js';
+/**
+ * 관 — a pipe's or a duct's section, wall and path (ADR-0100 §16.2), each change one `set-pipe` command, one step of the
+ * history. The path is its pieces in order: a straight run, so long; a bend, of a radius, so many degrees, toward one of
+ * four directions across the pipe -- each said as the figure's axis it turns to there. What the kernel refuses (a bend
+ * tighter than the section, a wall too thick, a path through itself) is said by the editor, with the number it takes.
+ */
+let FigurePipePanel = class FigurePipePanel extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.locked = false;
+    }
+    static { this.styles = [
+        SidePanelStyles,
+        css `
+      :host {
+        display: block;
+      }
+      div[pipe] {
+        display: grid;
+        gap: 8px;
+      }
+      ol[pieces] {
+        display: grid;
+        gap: 6px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      ol[pieces] li {
+        display: grid;
+        grid-template-columns: 20px minmax(0, 1fr) 30px;
+        gap: 4px 6px;
+        align-items: center;
+        padding: 6px 0;
+        border-top: 1px dashed var(--md-sys-color-outline-variant);
+      }
+      ol[pieces] li > b {
+        font-variant-numeric: tabular-nums;
+        opacity: 0.7;
+      }
+      ol[pieces] li div[form] {
+        grid-column: 2;
+      }
+      ol[pieces] li button[act] {
+        width: 30px;
+        min-height: var(--figure-control-height);
+        margin: 0;
+        padding: 0;
+      }
+      div[pair] {
+        display: flex;
+        gap: 6px;
+      }
+      div[pair] > button {
+        flex: 1;
+      }
+      md-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+      }
+    `
+    ]; }
+    send(request) {
+        this.dispatchEvent(new CustomEvent('command', { detail: { action: { kind: 'set-pipe', part: this.body.id, ...request } }, bubbles: true, composed: true }));
+    }
+    /** A number field: sent on change, put back when it is not a number. */
+    number(label, now, set, options = {}) {
+        return html `<span>${label}</span>
+      <div>
+        <input
+          type="number"
+          step=${options.step ?? 'any'}
+          min=${options.min ?? 0}
+          aria-label=${label}
+          ?disabled=${this.locked}
+          .value=${live(String(Math.round(now * 1000) / 1000))}
+          @change=${(e) => {
+            const input = e.target;
+            const value = input.valueAsNumber;
+            if (!Number.isFinite(value)) {
+                input.value = String(now);
+                return;
+            }
+            set(value);
+        }}
+        />
+        ${options.note ? html `<small>${options.note}</small>` : nothing}
+      </div>`;
+    }
+    /**
+     * Its end's size: the same as its start's until changed, when it narrows or widens to it evenly along its length
+     * (ADR-0100 §16.2.9) -- a bar thick below and thin above. 「한 굵기로」 makes it one size all along again.
+     */
+    renderEnd(sweep, round) {
+        const s = sweep.section, to = sweep.to;
+        const same = html `<span></span>
+      <div>
+        <button act end-same ?disabled=${this.locked} @click=${() => this.send(round ? { endRadius: null } : { endWidth: null, endDepth: null })}>
+          ${i18next.t('figure.button.pipe-end-same')}
+        </button>
+      </div>`;
+        if (round) {
+            const now = to?.kind === 'ellipse' ? 2 * to.radius.x : s.kind === 'ellipse' ? 2 * s.radius.x : 0;
+            return html `${this.number(i18next.t('figure.label.pipe-end-diameter'), now, value => this.send({ endRadius: value / 2 }), { note: to ? '' : i18next.t('figure.text.pipe-end-same') })}
+        ${to ? same : nothing}`;
+        }
+        if (s.kind !== 'rectangle')
+            return nothing;
+        const end = to?.kind === 'rectangle' ? to.size : s.size;
+        return html `${this.number(i18next.t('figure.label.pipe-end-width'), end.x, value => this.send({ endWidth: value }), { note: to ? '' : i18next.t('figure.text.pipe-end-same') })}
+      ${this.number(i18next.t('figure.label.pipe-end-depth'), end.z, value => this.send({ endDepth: value }))}
+      ${to ? same : nothing}`;
+    }
+    render() {
+        const sweep = this.body?.shape.sweep;
+        if (!sweep)
+            return nothing;
+        const s = sweep.section;
+        const round = s.kind === 'ellipse';
+        const pieces = piecesOf(sweep);
+        const withPiece = (i, piece) => this.send({ path: pieces.map((p, j) => (j === i ? piece : p)) });
+        const radius = round ? s.radius.x ?? s.radius.z ?? 0 : 0;
+        /* The group's heading is the part's properties' own, as a box's size group's is: here only what is in it. */
+        return html `<div pipe>
+      <div form>
+        <span>${i18next.t('figure.label.pipe-section')}</span>
+        <select
+          aria-label=${i18next.t('figure.label.pipe-section')}
+          ?disabled=${this.locked}
+          @change=${(e) => {
+            const to = e.target.value;
+            if (to === 'round' && !round)
+                this.send({ radius: Math.min(s.kind === 'rectangle' ? s.size.x : 0, s.kind === 'rectangle' ? s.size.z : 0) / 2 });
+            if (to === 'square' && round)
+                this.send({ width: 2 * radius, depth: 2 * radius, round: 0 });
+        }}
+        >
+          <option value="round" ?selected=${round}>${i18next.t('figure.label.pipe-section-round')}</option>
+          <option value="square" ?selected=${!round}>${i18next.t('figure.label.pipe-section-square')}</option>
+        </select>
+        ${round
+            ? this.number(i18next.t('figure.label.pipe-diameter'), 2 * radius, value => this.send({ radius: value / 2 }))
+            : s.kind === 'rectangle'
+                ? html `${this.number(i18next.t('figure.label.pipe-width'), s.size.x, value => this.send({ width: value }))}
+              ${this.number(i18next.t('figure.label.pipe-depth'), s.size.z, value => this.send({ depth: value }))}
+              ${this.number(i18next.t('figure.label.pipe-round'), s.corner?.x ?? 0, value => this.send({ round: value }))}`
+                : nothing}
+        ${this.renderEnd(sweep, round)}
+        ${this.number(i18next.t('figure.label.pipe-wall'), sweep.wall ?? 0, value => this.send({ wall: value }), { note: i18next.t('figure.text.pipe-wall-zero') })}
+      </div>
+      <ol pieces aria-label=${i18next.t('figure.label.pipe-path')}>
+        ${pieces.map((p, i) => html `<li>
+            <b>${i + 1}</b>
+            <div form>
+              ${'line' in p
+            ? this.number(i18next.t('figure.label.pipe-line-length'), p.line, value => withPiece(i, { line: value }))
+            : html `${this.number(i18next.t('figure.label.pipe-bend-radius'), p.bend.radius, value => withPiece(i, { bend: { ...p.bend, radius: value } }))}
+                  ${this.number(i18next.t('figure.label.pipe-bend-angle'), p.bend.angle, value => withPiece(i, { bend: { ...p.bend, angle: Math.round(value) } }), { min: 1, step: '1' })}
+                  <span>${i18next.t('figure.label.pipe-bend-toward')}</span>
+                  <select
+                    aria-label=${i18next.t('figure.label.pipe-bend-toward')}
+                    ?disabled=${this.locked}
+                    @change=${(e) => withPiece(i, { bend: { ...p.bend, toward: Number(e.target.value) } })}
+                  >
+                    ${[...new Set([...QUARTERS, p.bend.toward])].map(t => html `<option value=${t} ?selected=${t === p.bend.toward}>${bendWordOf(sweep, i, t) || `${t}°`}</option>`)}
+                  </select>`}
+            </div>
+            <button
+              act
+              ?disabled=${this.locked || pieces.length <= 1}
+              title=${i18next.t('figure.button.pipe-remove-piece')}
+              aria-label=${i18next.t('figure.button.pipe-remove-piece')}
+              @click=${() => this.send({ path: pieces.filter((_, j) => j !== i) })}
+            >
+              <md-icon>close</md-icon>
+            </button>
+          </li>`)}
+      </ol>
+      <div pair>
+        <button act add-line ?disabled=${this.locked || pieces.length >= FIGURE_SWEEP_PIECE_LIMIT} @click=${() => this.send({ path: [...pieces, { line: 100 }] })}>
+          <md-icon>add</md-icon>${i18next.t('figure.button.pipe-add-line')}
+        </button>
+        <button
+          act
+          add-bend
+          ?disabled=${this.locked || pieces.length >= FIGURE_SWEEP_PIECE_LIMIT}
+          @click=${() => {
+            /* A bend wider than the section, toward its first quarter: 90° of twice the section's reach. */
+            const reach = round ? radius : Math.hypot(s.kind === 'rectangle' ? s.size.x : 0, s.kind === 'rectangle' ? s.size.z : 0) / 2;
+            this.send({ path: [...pieces, { bend: { radius: Math.ceil(2 * reach), angle: 90, toward: 0 } }] });
+        }}
+        >
+          <md-icon>add</md-icon>${i18next.t('figure.button.pipe-add-bend')}
+        </button>
+      </div>
+    </div>`;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigurePipePanel.prototype, "body", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigurePipePanel.prototype, "locked", void 0);
+FigurePipePanel = __decorate([
+    customElement('figure-pipe-panel')
+], FigurePipePanel);
+export { FigurePipePanel };
+//# sourceMappingURL=figure-pipe-panel.js.map