@things-factory/figure-ui 10.1.76 → 10.1.77

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

@@ -1,69 +0,0 @@
-import '@material/web/icon/icon.js';
-import { LitElement } from 'lit';
-import type { V3PrimitiveCreation } from '@hatiolab/figure-model';
-import type { V3BudgetLine } from './v3-maturity.js';
-/**
- * 도형 팔레트와 부품 목록 — V3 자산의 것.
- *
- * 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.
- *
- * 부품의 도형은 V3 평가가 준 `provider` 로 읽는다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라
- * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.
- *
- * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다.
- */
-/** 한 줄 — V3 평가에서 이 패널이 읽는 것만. */
-export interface V3PartRow {
-    id: string;
-    provider: string;
-    /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */
-    hidden?: boolean;
-    /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */
-    invisible?: boolean;
-    /** 되풀이한 부품이면 지금 몇 개로 그려지나. 되풀이는 한 부품이다 — 한 줄로 보인다. */
-    copies?: number;
-}
-/** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */
-export type V3PaletteKind = V3PrimitiveCreation['kind'] | 'plate' | 'wall';
-declare const FigureV3Parts_base: (new (...args: any[]) => LitElement) & typeof LitElement;
-export declare class FigureV3Parts extends FigureV3Parts_base {
-    static styles: import("lit").CSSResult[];
-    parts: V3PartRow[];
-    /** 고른 부품의 id. 자리(index)가 아니다 — V3 부품은 id 로 안정하게 가리킨다. */
-    selected: string;
-    /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */
-    locked: boolean;
-    /**
-     * 이 도형이 치르는 값 — 삼각형 · 묶음 · 한 화면에 몇 대 · 등급. 부품을 더하는 바로 그 자리에서 보여야 로우폴리의
-     * 기준이 저작을 이끈다. 등급이 D 면 무엇이 넘쳤는지를 적는다. 누르면 성숙도 탭이 열린다.
-     */
-    budget?: V3BudgetLine;
-    /**
-     * 디테일 등급(S/M/L)의 부품 한도(사용자 2026-09-24). 부품을 넣기 **전에** 몇 개 남았는지 보이고, 다 차면 팔레트가
-     * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.
-     */
-    partBudget?: {
-        level: 'S' | 'M' | 'L' | null;
-        used: number;
-        limit: number | null;
-    };
-    /** How many recipe templates the catalog holds; none, and the section is not drawn. */
-    recipeCount: number;
-    render(): import("lit-html").TemplateResult<1>;
-    /** 디테일 등급 — 고르면 한도가 바뀐다. 목록 머리 아래. */
-    private renderLevel;
-    private renderBudget;
-    /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */
-    private renderShowAll;
-    private renderRow;
-    /** 고른 줄의 조작. 못 하는 것은 빼지 않고 흐리게 둔다 — 자리가 밀리면 연달아 지우다 엉뚱한 것을 누른다. */
-    private renderOps;
-    /**
-     * Recipes (ADR-0095): the catalog of templates -- a door, a roller row -- opened over the modeller, put onto the chosen
-     * part in one step.
-     */
-    private renderRecipes;
-    /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */
-    private ask;
-}
-export {};

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

@@ -1,559 +0,0 @@
-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 { i18next, localize } from '@operato/i18n';
-import { ScrollbarStyles } from '@operato/styles';
-import { PART_LIMIT } from '@hatiolab/figure-model';
-import { partLabelOf } from './v3-fields.js';
-/** 제공자마다의 아이콘. Material Symbols 이름이다. */
-const PROVIDER_ICON = {
-    box: 'deployed_code',
-    cylinder: 'database',
-    ellipticCylinder: 'database',
-    frustum: 'change_history',
-    sphere: 'circle',
-    roundedBox: 'crop_square',
-    roundedBoxXZ: 'crop_square',
-    hollowBox: 'check_box_outline_blank',
-    hollowBoxXZ: 'check_box_outline_blank',
-    polygon: 'pentagon',
-    portal: 'door_front'
-};
-const RECIPES = [
-    { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
-    { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
-    { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rounded-box' },
-    { kind: 'sphere', icon: 'circle', label: 'figure.label.primitive-sphere' },
-    { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
-    { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
-    { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
-    { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
-    { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' },
-    { kind: 'hollow-box', icon: 'inventory_2', label: 'figure.label.primitive-hollow-box' }
-];
-let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.parts = [];
-        /** 고른 부품의 id. 자리(index)가 아니다 — V3 부품은 id 로 안정하게 가리킨다. */
-        this.selected = '';
-        /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */
-        this.locked = false;
-        /** How many recipe templates the catalog holds; none, and the section is not drawn. */
-        this.recipeCount = 0;
-    }
-    static { this.styles = [
-        ScrollbarStyles,
-        css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        min-height: 0;
-        overflow: hidden;
-        background-color: var(--md-sys-color-surface-container-lowest);
-        /* The divider beside it is the editor's frame's (ox-three-pane). */
-        color: var(--md-sys-color-on-surface);
-        font: var(--label-font, inherit);
-        font-size: 0.76rem;
-        /* Folds by its own width: the editor gives this column 140 px when it has two columns (UX, 2026-09-24). */
-        container-type: inline-size;
-      }
-      section {
-        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-      section[list] {
-        flex: 1;
-        min-height: 0;
-        overflow-y: auto;
-      }
-      h3 {
-        display: flex;
-        align-items: baseline;
-        justify-content: space-between;
-        gap: 6px;
-        margin: 0 0 6px 0;
-        font-size: var(--ui-t-micro, 11px);
-        font-weight: 700;
-        letter-spacing: 0.04em;
-        text-transform: uppercase;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      }
-      /* The cost line: the grade's letter in its colour, then what the figure costs. */
-      button[budget] {
-        display: flex;
-        align-items: flex-start;
-        gap: 6px;
-        width: 100%;
-        margin: 0 0 6px;
-        padding: 4px 6px;
-        font: inherit;
-        font-size: 0.68rem;
-        line-height: 1.5;
-        text-align: left;
-        color: var(--md-sys-color-on-surface-variant);
-        background: none;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 6px;
-        cursor: pointer;
-      }
-      button[budget]:hover {
-        background: var(--md-sys-color-surface-container);
-      }
-      button[budget] b {
-        flex: none;
-        min-width: 16px;
-        text-align: center;
-        border-radius: 4px;
-        color: var(--md-sys-color-on-primary-container);
-        background: var(--md-sys-color-primary-container);
-      }
-      button[budget][grade='C'] b {
-        color: var(--md-sys-color-on-tertiary-container);
-        background: var(--md-sys-color-tertiary-container);
-      }
-      button[budget][grade='D'] {
-        border-color: var(--md-sys-color-error);
-      }
-      button[budget][grade='D'] b {
-        color: var(--md-sys-color-on-error);
-        background: var(--md-sys-color-error);
-      }
-      button[budget] em {
-        display: block;
-        font-style: normal;
-        color: var(--md-sys-color-error);
-      }
-      span[room][full] {
-        color: var(--md-sys-color-error);
-        font-weight: 600;
-      }
-      p[full] {
-        margin: 4px 0 0;
-        font-size: 0.68rem;
-        color: var(--md-sys-color-error);
-      }
-      div[level] {
-        display: grid;
-        grid-template-columns: auto minmax(0, 1fr);
-        align-items: center;
-        gap: 6px;
-        margin: 0 0 6px;
-        font-size: 0.68rem;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      div[level] select {
-        min-width: 0;
-        padding: 2px 4px;
-        font: inherit;
-        font-size: 0.7rem;
-        color: var(--md-sys-color-on-surface);
-        background: var(--md-sys-color-surface-container-lowest);
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 6px;
-      }
-      small[copies] {
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      span[room] {
-        font-size: 0.7rem;
-        font-weight: 400;
-        letter-spacing: 0;
-        text-transform: none;
-      }
-      /* Three to a row, small (user, 2026-09-24): the palette is reached for, not read -- the list below is what grows. */
-      div[palette] {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: 3px;
-      }
-      button[shape] {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1px;
-        min-width: 0;
-        padding: 5px 1px 4px;
-        font: var(--label-font, inherit);
-        font-size: 0.6rem;
-        line-height: 1.2;
-        text-align: center;
-        overflow-wrap: anywhere;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-        background: none;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 6px;
-        cursor: pointer;
-      }
-      button[recipe-catalog] {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 4px 10px;
-        font: inherit;
-        font-size: 0.75rem;
-        color: var(--md-sys-color-on-surface);
-        background: none;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 999em;
-        cursor: pointer;
-      }
-      button[shape]:hover:not([disabled]) {
-        color: var(--md-sys-color-on-primary-container);
-        background-color: var(--md-sys-color-primary-container);
-        border-color: transparent;
-      }
-      button[shape][disabled] {
-        opacity: 0.35;
-        cursor: default;
-      }
-      button[shape] md-icon {
-        --md-icon-size: 18px;
-      }
-      ol {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-      li {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 4px 6px;
-        border-radius: 6px;
-        cursor: pointer;
-      }
-      li:hover {
-        background-color: var(--md-sys-color-surface-container);
-      }
-      li[selected] {
-        color: var(--md-sys-color-on-primary-container);
-        background-color: var(--md-sys-color-primary-container);
-      }
-      li md-icon {
-        --md-icon-size: 16px;
-        flex: none;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      }
-      button[eye][all] {
-        margin-left: auto;
-        opacity: 0.75;
-      }
-      button[eye][all]:hover {
-        opacity: 1;
-      }
-      button[eye] {
-        display: flex;
-        flex: none;
-        padding: 1px;
-        color: inherit;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        opacity: 0;
-      }
-      li:hover button[eye],
-      li[selected] button[eye],
-      button[eye][off] {
-        opacity: 1;
-      }
-      button[eye][off] {
-        color: var(--md-sys-color-tertiary);
-      }
-      button[eye] md-icon {
-        --md-icon-size: 15px;
-        color: inherit;
-      }
-      li[off] span[label],
-      li[off] > md-icon,
-      li[invisible] span[label],
-      li[invisible] > md-icon {
-        opacity: 0.45;
-      }
-      li[selected] md-icon {
-        color: inherit;
-      }
-      span[label] {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 0.78rem;
-      }
-      span[label] small {
-        margin-left: 4px;
-        font-size: 0.66rem;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      }
-      div[ops] {
-        display: none;
-        gap: 1px;
-      }
-      li[selected] div[ops] {
-        display: flex;
-      }
-      div[ops] button {
-        display: flex;
-        padding: 2px;
-        color: inherit;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      div[ops] button:hover:not([disabled]) {
-        background-color: var(--md-sys-color-surface-container-lowest);
-      }
-      div[ops] button[disabled] {
-        opacity: 0.3;
-        cursor: default;
-      }
-      div[ops] md-icon {
-        --md-icon-size: 15px;
-        color: inherit;
-      }
-      /*
-        Under 200 px the selected row's four buttons pushed its name out and the last one past the edge (seen at 140,
-        2026-09-24). They go to a line of their own under the name.
-      */
-      @container (max-width: 199px) {
-        li[selected] {
-          flex-wrap: wrap;
-        }
-        li[selected] div[ops] {
-          flex-basis: 100%;
-          justify-content: flex-end;
-        }
-      }
-      p[quiet] {
-        margin: 0;
-        font-size: 0.76rem;
-        line-height: 1.6;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      }
-    `
-    ]; }
-    render() {
-        const b = this.partBudget;
-        const full = !!b && b.limit !== null && b.used >= b.limit;
-        return html `
-      <section>
-        <h3>${i18next.t('figure.label.shapes')}</h3>
-        <div palette>
-          ${RECIPES.map(recipe => html `
-              <button
-                shape
-                ?disabled=${this.locked || full}
-                title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t(recipe.label)}
-                @click=${() => this.ask('add-part', { kind: recipe.kind })}
-              >
-                <md-icon>${recipe.icon}</md-icon>
-                <span>${i18next.t(recipe.label)}</span>
-              </button>
-            `)}
-        </div>
-        ${full ? html `<p full>${i18next.t('figure.text.part-limit-reached-short', { level: b.level, limit: b.limit })}</p>` : nothing}
-      </section>
-      ${this.renderRecipes(full)}
-
-      <section list>
-        <h3>
-          <span>${i18next.t('figure.label.parts')}</span>
-          <span room ?full=${full} title=${i18next.t('figure.text.limit-comes-from-level')}
-            >${b && b.limit !== null ? i18next.t('figure.text.n-of-limit', { used: b.used, limit: b.limit }) : (b?.used ?? this.parts.length)}</span
-          >
-          ${this.renderShowAll()}
-        </h3>
-        ${this.renderLevel()}
-        ${this.renderBudget()}
-        ${this.parts.length === 0
-            ? html `<p quiet>${i18next.t('figure.text.no-parts-yet')}</p>`
-            : html `<ol>
-              ${this.parts.map((part, index) => this.renderRow(part, index))}
-            </ol>`}
-      </section>
-    `;
-    }
-    /** 디테일 등급 — 고르면 한도가 바뀐다. 목록 머리 아래. */
-    renderLevel() {
-        const b = this.partBudget;
-        if (!b)
-            return nothing;
-        return html `<div level>
-      <label for="detail-level">${i18next.t('figure.label.detail-level')}</label>
-      <select
-        id="detail-level"
-        title=${i18next.t('figure.text.detail-level-explained')}
-        .value=${b.level ?? ''}
-        ?disabled=${this.locked}
-        @change=${(e) => {
-            const value = e.target.value;
-            this.dispatchEvent(new CustomEvent('set-detail-level', { detail: { level: value || null }, bubbles: true, composed: true }));
-        }}
-      >
-        <option value="" ?selected=${!b.level}>${i18next.t('figure.label.detail-none')}</option>
-        ${['S', 'M', 'L'].map(one => html `<option value=${one} ?selected=${one === b.level}>
-            ${one} ${i18next.t('figure.label.detail-' + one)} · ${i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}
-          </option>`)}
-      </select>
-    </div>`;
-    }
-    renderBudget() {
-        const b = this.budget;
-        if (!b || !this.parts.length)
-            return nothing;
-        const over = b.grade === 'D';
-        return html `<button
-      budget
-      grade=${b.grade}
-      title=${i18next.t('figure.text.parts-budget-open')}
-      @click=${() => this.dispatchEvent(new CustomEvent('show-maturity', { bubbles: true, composed: true }))}
-    >
-      <b>${b.grade}</b>
-      <span>
-        <strong performance-cost>${i18next.t('figure.label.performance-cost')}</strong>
-        ${i18next.t('figure.text.parts-budget', {
-            triangles: b.triangles.toLocaleString(),
-            groups: b.groups.toLocaleString(),
-            instances: b.instances.toLocaleString()
-        })}
-        ${over
-            ? html `<em
-              >${i18next.t('figure.text.parts-budget-over', {
-                budget: i18next.t('figure.label.budget-' + b.tightest.key),
-                used: b.tightest.used.toLocaleString(),
-                limit: b.tightest.limit.toLocaleString()
-            })}</em
-            >`
-            : nothing}
-      </span>
-    </button>`;
-    }
-    /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */
-    renderShowAll() {
-        if (this.parts.length === 0)
-            return nothing;
-        const anyHidden = this.parts.some(part => part.hidden);
-        return html `
-      <button
-        eye
-        all
-        ?off=${!anyHidden}
-        title=${i18next.t(anyHidden ? 'figure.text.show-all-parts' : 'figure.text.hide-all-parts')}
-        @click=${(e) => {
-            e.stopPropagation();
-            this.ask('set-all-parts-hidden', { hidden: !anyHidden });
-        }}
-      >
-        <md-icon>${anyHidden ? 'visibility' : 'visibility_off'}</md-icon>
-      </button>
-    `;
-    }
-    renderRow(part, index) {
-        const selected = part.id === this.selected;
-        const off = !!part.hidden;
-        return html `
-      <li
-        ?selected=${selected}
-        ?off=${off}
-        ?invisible=${!!part.invisible}
-        @click=${() => this.ask('select-part', { id: part.id })}
-      >
-        <button
-          eye
-          ?off=${off}
-          title=${i18next.t(off ? 'figure.text.show-this-part' : 'figure.text.hide-this-part')}
-          @click=${(e) => {
-            e.stopPropagation();
-            this.ask('toggle-part-hidden', { id: part.id });
-        }}
-        >
-          <md-icon>${off ? 'visibility_off' : 'visibility'}</md-icon>
-        </button>
-        <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>
-        <span label title=${part.id}
-          >${partLabelOf(part.id)}${part.copies ? html ` <small copies>× ${part.copies}</small>` : nothing}${part.invisible ? html `<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
-        >
-        ${selected ? this.renderOps(part.id, index) : nothing}
-      </li>
-    `;
-    }
-    /** 고른 줄의 조작. 못 하는 것은 빼지 않고 흐리게 둔다 — 자리가 밀리면 연달아 지우다 엉뚱한 것을 누른다. */
-    renderOps(id, index) {
-        const count = this.parts.length;
-        const op = (name, icon, detail, enabled = true) => html `
-      <button
-        op=${name}
-        ?disabled=${!enabled || this.locked}
-        title=${i18next.t('figure.button.' + name)}
-        @click=${(e) => {
-            e.stopPropagation();
-            if (enabled && !this.locked)
-                this.ask(name, detail);
-        }}
-      >
-        <md-icon>${icon}</md-icon>
-      </button>
-    `;
-        return html `
-      <div ops>
-        ${op('move-part-up', 'arrow_upward', { id, to: index - 1 }, index > 0)}
-        ${op('move-part-down', 'arrow_downward', { id, to: index + 1 }, index < count - 1)}
-        ${op('duplicate-part', 'content_copy', { id })} ${op('remove-part', 'delete', { id })}
-      </div>
-    `;
-    }
-    /**
-     * Recipes (ADR-0095): the catalog of templates -- a door, a roller row -- opened over the modeller, put onto the chosen
-     * part in one step.
-     */
-    renderRecipes(full) {
-        if (!this.recipeCount)
-            return nothing;
-        return html `<section recipes>
-      <h3>${i18next.t('figure.label.recipes')}</h3>
-      <button recipe-catalog ?disabled=${this.locked || full} @click=${() => this.ask('open-recipe-catalog', {})}>
-        <md-icon>widgets</md-icon>${i18next.t('figure.button.open-recipe-catalog', { count: this.recipeCount })}
-      </button>
-    </section>`;
-    }
-    /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */
-    ask(what, detail) {
-        this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }));
-    }
-};
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], FigureV3Parts.prototype, "parts", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], FigureV3Parts.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], FigureV3Parts.prototype, "locked", void 0);
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Object)
-], FigureV3Parts.prototype, "budget", void 0);
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Object)
-], FigureV3Parts.prototype, "partBudget", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], FigureV3Parts.prototype, "recipeCount", void 0);
-FigureV3Parts = __decorate([
-    customElement('figure-v3-parts')
-], FigureV3Parts);
-export { FigureV3Parts };
-//# sourceMappingURL=figure-v3-parts.js.map