@things-factory/figure-ui 10.1.37 → 10.1.39

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

@@ -0,0 +1,352 @@
+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';
+/** 제공자마다의 아이콘. 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'
+};
+/** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */
+const RECIPES = [
+    { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
+    { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
+    { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rect' },
+    { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
+];
+let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.parts = [];
+        /** 고른 부품의 id. 자리(index)가 아니다 — V3 부품은 id 로 안정하게 가리킨다. */
+        this.selected = '';
+        /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */
+        this.locked = false;
+    }
+    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);
+        border-right: 1px solid var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font, inherit);
+        font-size: 0.76rem;
+      }
+      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));
+      }
+      span[room] {
+        font-size: 0.7rem;
+        font-weight: 400;
+        letter-spacing: 0;
+        text-transform: none;
+      }
+      div[palette] {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px;
+      }
+      button[shape] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2px;
+        padding: 7px 2px 5px 2px;
+        font: var(--label-font, inherit);
+        font-size: 0.66rem;
+        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[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: 20px;
+      }
+      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;
+      }
+      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() {
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.shapes')}</h3>
+        <div palette>
+          ${RECIPES.map(recipe => html `
+              <button
+                shape
+                ?disabled=${this.locked}
+                title=${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>
+      </section>
+
+      <section list>
+        <h3>
+          <span>${i18next.t('figure.label.parts')}</span>
+          <span room>${this.parts.length}</span>
+          ${this.renderShowAll()}
+        </h3>
+        ${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>
+    `;
+    }
+    /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */
+    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}
+          >${part.id}${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>
+    `;
+    }
+    /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */
+    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);
+FigureV3Parts = __decorate([
+    customElement('figure-v3-parts')
+], FigureV3Parts);
+export { FigureV3Parts };
+//# sourceMappingURL=figure-v3-parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-v3-parts.js","sourceRoot":"","sources":["../../client/modeller/figure-v3-parts.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport type { V3PrimitiveCreation } from '@hatiolab/figure-model'\n\n/**\n * 도형 팔레트와 부품 목록 — V3 자산의 것.\n *\n * `figure-parts`(V2) 와 **같은 자리, 같은 조작, 같은 낱말**이다. 저작자가 V2 에서 익힌 손이 그대로\n * 가야 한다: 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.\n *\n * 다른 것은 읽는 대상뿐이다. V2 는 부품의 `primitive` 를 읽었고 여기서는 V3 평가가 준 `provider` 를\n * 읽는다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라\n * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.\n *\n * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다 — V2 와 같은 규칙, 같은 사건 이름.\n */\n\n/** 한 줄 — V3 평가에서 이 패널이 읽는 것만. */\nexport interface V3PartRow {\n  id: string\n  provider: string\n  /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */\n  hidden?: boolean\n  /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */\n  invisible?: boolean\n}\n\n/** 제공자마다의 아이콘. Material Symbols 이름이다. */\nconst PROVIDER_ICON: Record<string, string> = {\n  box: 'deployed_code',\n  cylinder: 'database',\n  ellipticCylinder: 'database',\n  frustum: 'change_history',\n  sphere: 'circle',\n  roundedBox: 'crop_square',\n  roundedBoxXZ: 'crop_square',\n  hollowBox: 'check_box_outline_blank',\n  hollowBoxXZ: 'check_box_outline_blank',\n  polygon: 'pentagon',\n  portal: 'door_front'\n}\n\n/** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */\nconst RECIPES: Array<{ kind: V3PrimitiveCreation['kind']; icon: string; label: string }> = [\n  { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },\n  { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },\n  { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rect' },\n  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }\n]\n\n@customElement('figure-v3-parts')\nexport class FigureV3Parts extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow: hidden;\n        background-color: var(--md-sys-color-surface-container-lowest);\n        border-right: 1px solid var(--md-sys-color-outline-variant);\n        color: var(--md-sys-color-on-surface);\n        font: var(--label-font, inherit);\n        font-size: 0.76rem;\n      }\n      section {\n        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      }\n      section[list] {\n        flex: 1;\n        min-height: 0;\n        overflow-y: auto;\n      }\n      h3 {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 6px;\n        margin: 0 0 6px 0;\n        font-size: var(--ui-t-micro, 11px);\n        font-weight: 700;\n        letter-spacing: 0.04em;\n        text-transform: uppercase;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      span[room] {\n        font-size: 0.7rem;\n        font-weight: 400;\n        letter-spacing: 0;\n        text-transform: none;\n      }\n      div[palette] {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 4px;\n      }\n      button[shape] {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 2px;\n        padding: 7px 2px 5px 2px;\n        font: var(--label-font, inherit);\n        font-size: 0.66rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      button[shape]:hover:not([disabled]) {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n        border-color: transparent;\n      }\n      button[shape][disabled] {\n        opacity: 0.35;\n        cursor: default;\n      }\n      button[shape] md-icon {\n        --md-icon-size: 20px;\n      }\n      ol {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      li {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 4px 6px;\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      li:hover {\n        background-color: var(--md-sys-color-surface-container);\n      }\n      li[selected] {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n      }\n      li md-icon {\n        --md-icon-size: 16px;\n        flex: none;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      button[eye][all] {\n        margin-left: auto;\n        opacity: 0.75;\n      }\n      button[eye][all]:hover {\n        opacity: 1;\n      }\n      button[eye] {\n        display: flex;\n        flex: none;\n        padding: 1px;\n        color: inherit;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n        opacity: 0;\n      }\n      li:hover button[eye],\n      li[selected] button[eye],\n      button[eye][off] {\n        opacity: 1;\n      }\n      button[eye][off] {\n        color: var(--md-sys-color-tertiary);\n      }\n      button[eye] md-icon {\n        --md-icon-size: 15px;\n        color: inherit;\n      }\n      li[off] span[label],\n      li[off] > md-icon,\n      li[invisible] span[label],\n      li[invisible] > md-icon {\n        opacity: 0.45;\n      }\n      li[selected] md-icon {\n        color: inherit;\n      }\n      span[label] {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-size: 0.78rem;\n      }\n      span[label] small {\n        margin-left: 4px;\n        font-size: 0.66rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      div[ops] {\n        display: none;\n        gap: 1px;\n      }\n      li[selected] div[ops] {\n        display: flex;\n      }\n      div[ops] button {\n        display: flex;\n        padding: 2px;\n        color: inherit;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      div[ops] button:hover:not([disabled]) {\n        background-color: var(--md-sys-color-surface-container-lowest);\n      }\n      div[ops] button[disabled] {\n        opacity: 0.3;\n        cursor: default;\n      }\n      div[ops] md-icon {\n        --md-icon-size: 15px;\n        color: inherit;\n      }\n      p[quiet] {\n        margin: 0;\n        font-size: 0.76rem;\n        line-height: 1.6;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n    `\n  ]\n\n  @property({ type: Array }) parts: V3PartRow[] = []\n  /** 고른 부품의 id. 자리(index)가 아니다 — V3 부품은 id 로 안정하게 가리킨다. */\n  @property({ type: String }) selected = ''\n  /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */\n  @property({ type: Boolean }) locked = false\n\n  render() {\n    return html`\n      <section>\n        <h3>${i18next.t('figure.label.shapes')}</h3>\n        <div palette>\n          ${RECIPES.map(\n            recipe => html`\n              <button\n                shape\n                ?disabled=${this.locked}\n                title=${i18next.t(recipe.label)}\n                @click=${() => this.ask('add-part', { kind: recipe.kind })}\n              >\n                <md-icon>${recipe.icon}</md-icon>\n                <span>${i18next.t(recipe.label)}</span>\n              </button>\n            `\n          )}\n        </div>\n      </section>\n\n      <section list>\n        <h3>\n          <span>${i18next.t('figure.label.parts')}</span>\n          <span room>${this.parts.length}</span>\n          ${this.renderShowAll()}\n        </h3>\n        ${this.parts.length === 0\n          ? html`<p quiet>${i18next.t('figure.text.no-parts-yet')}</p>`\n          : html`<ol>\n              ${this.parts.map((part, index) => this.renderRow(part, index))}\n            </ol>`}\n      </section>\n    `\n  }\n\n  /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */\n  private renderShowAll() {\n    if (this.parts.length === 0) return nothing\n    const anyHidden = this.parts.some(part => part.hidden)\n    return html`\n      <button\n        eye\n        all\n        ?off=${!anyHidden}\n        title=${i18next.t(anyHidden ? 'figure.text.show-all-parts' : 'figure.text.hide-all-parts')}\n        @click=${(e: Event) => {\n          e.stopPropagation()\n          this.ask('set-all-parts-hidden', { hidden: !anyHidden })\n        }}\n      >\n        <md-icon>${anyHidden ? 'visibility' : 'visibility_off'}</md-icon>\n      </button>\n    `\n  }\n\n  private renderRow(part: V3PartRow, index: number) {\n    const selected = part.id === this.selected\n    const off = !!part.hidden\n    return html`\n      <li\n        ?selected=${selected}\n        ?off=${off}\n        ?invisible=${!!part.invisible}\n        @click=${() => this.ask('select-part', { id: part.id })}\n      >\n        <button\n          eye\n          ?off=${off}\n          title=${i18next.t(off ? 'figure.text.show-this-part' : 'figure.text.hide-this-part')}\n          @click=${(e: Event) => {\n            e.stopPropagation()\n            this.ask('toggle-part-hidden', { id: part.id })\n          }}\n        >\n          <md-icon>${off ? 'visibility_off' : 'visibility'}</md-icon>\n        </button>\n        <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>\n        <span label title=${part.id}\n          >${part.id}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span\n        >\n        ${selected ? this.renderOps(part.id, index) : nothing}\n      </li>\n    `\n  }\n\n  /** 고른 줄의 조작. 못 하는 것은 빼지 않고 흐리게 둔다 — 자리가 밀리면 연달아 지우다 엉뚱한 것을 누른다. */\n  private renderOps(id: string, index: number) {\n    const count = this.parts.length\n    const op = (name: string, icon: string, detail: object, enabled = true) => html`\n      <button\n        op=${name}\n        ?disabled=${!enabled || this.locked}\n        title=${i18next.t('figure.button.' + name)}\n        @click=${(e: Event) => {\n          e.stopPropagation()\n          if (enabled && !this.locked) this.ask(name, detail)\n        }}\n      >\n        <md-icon>${icon}</md-icon>\n      </button>\n    `\n    return html`\n      <div ops>\n        ${op('move-part-up', 'arrow_upward', { id, to: index - 1 }, index > 0)}\n        ${op('move-part-down', 'arrow_downward', { id, to: index + 1 }, index < count - 1)}\n        ${op('duplicate-part', 'content_copy', { id })} ${op('remove-part', 'delete', { id })}\n      </div>\n    `\n  }\n\n  /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */\n  private ask(what: string, detail: object) {\n    this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -0,0 +1,50 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+/** How long an edit settles before the server is asked again. One question per pause, not one per keystroke. */
+export declare const VERDICT_SETTLE_MS = 400;
+declare const FigureV3Verdict_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 판정 — the V3 modeller's verdict while editing (parity row ①).
+ *
+ * The V2 modeller shows, as the author edits, how many of the figure fit on one screen and what would stop it
+ * being published. The V3 page showed neither: the author learned what blocked a release only after saving, in the
+ * release panel. This tab answers both from the source being edited.
+ *
+ * The count is computed here, from `v3CostOf` and the same `capacityFrom` the catalogue cards use, so the tab and
+ * the card cannot disagree. The findings are not: they come from the server's release door (`inspectFigureDraft`),
+ * the same door and the same sentences as the release panel. A second judgement on the screen would say something
+ * different the first time either changed.
+ *
+ * No grade. V2's grade measures V2 reuse; nothing measures it for V3, so the tab shows no letter rather than one
+ * nothing computed.
+ */
+export declare class FigureV3Verdict extends FigureV3Verdict_base {
+    static styles: import("lit").CSSResult[];
+    /** The source being edited, serialised. Every change of it is a new question. */
+    source?: string;
+    /** The saved row, if any — the server reads its type and last release from it. */
+    figureId?: string;
+    /** Changing the type changes the verdict (a temporary type is refused), so it is a reason to ask again. */
+    figureType?: string;
+    private capacity?;
+    /** Bodies in the asset, drawn or hidden. With none there is nothing to fit the space to, so the button is not offered. */
+    private bodies;
+    private inspection?;
+    private failure;
+    private asking;
+    private timer?;
+    /** Answers can come back out of order; only the newest question's answer is shown. */
+    private asked;
+    disconnectedCallback(): void;
+    updated(changes: Map<string, unknown>): void;
+    private measure;
+    private schedule;
+    private ask;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderCount;
+    private renderGate;
+    /** The same way out the release panel offers for the same two findings — declare the space from the parts. */
+    private actionsFor;
+    private fit;
+}
+export {};