@things-factory/figure-ui 10.1.5 → 10.1.6

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

@@ -0,0 +1,344 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+const RUNGS = Object.freeze({
+    none: [],
+    hold: ['Capacity', 'Holdable'],
+    flow: ['FlowNode']
+});
+/** 선언된 이름 집합이 사다리 어느 칸인가. 어느 칸도 아니면 `null` — 지어내지 않는다. */
+function rungOf(names) {
+    const has = new Set(names ?? []);
+    if (has.size === 0)
+        return 'none';
+    for (const [rung, wanted] of Object.entries(RUNGS)) {
+        if (wanted.length === has.size && wanted.every(name => has.has(name)))
+            return rung;
+    }
+    return null;
+}
+let FigureCapabilities = class FigureCapabilities extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.parts = [];
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow-y: auto;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font, inherit);
+        font-size: 0.76rem;
+      }
+
+      section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-large, 12px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      /* 다른 탭들과 같은 눈금이다 — 탭마다 다른 제목 규격을 쓰면 따로 논다 */
+      h3 {
+        margin: 0 0 2px 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));
+      }
+
+      p[quiet] {
+        margin: 0;
+        font-size: 0.72rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      /* 사다리 — 고르는 것이 하나라 라디오다 */
+      label[rung] {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--spacing-medium, 8px);
+        padding: 6px 8px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      label[rung][on] {
+        border-color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-surface-container);
+      }
+      label[rung]:hover:not([on]) {
+        background-color: var(--md-sys-color-surface-container-low);
+      }
+      label[rung] span {
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+      }
+      label[rung] strong {
+        font-weight: 600;
+      }
+      label[rung] em {
+        font-style: normal;
+        font-size: 0.7rem;
+        line-height: 1.4;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      input[type='radio'] {
+        flex: none;
+        margin: 2px 0 0 0;
+        accent-color: var(--md-sys-color-primary);
+        cursor: pointer;
+      }
+
+      /* 실제로 씬에 붙는 이름. 고른 뒤에 보여 준다 */
+      code[names] {
+        font: var(--mono-font, ui-monospace, monospace);
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      /* 지정된 부품 한 줄 — 읽는 것이지 고치는 것이 아니다. 눌러 그 부품으로 간다 */
+      button[marked] {
+        display: flex;
+        align-items: baseline;
+        gap: var(--spacing-medium, 8px);
+        width: 100%;
+        padding: 5px 8px;
+        text-align: left;
+        font: inherit;
+        color: inherit;
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      button[marked]:hover {
+        background-color: var(--md-sys-color-surface-container);
+      }
+      button[marked] b {
+        flex: none;
+        font-weight: 600;
+      }
+      button[marked] span {
+        flex: none;
+        font-size: 0.72rem;
+        color: var(--md-sys-color-primary);
+      }
+      button[marked] em {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: right;
+        font-style: normal;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      /* 부품마다 한 줄. 자리를 고른 것만 아래로 펼친다 */
+      div[part] {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: 6px 0;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+      div[part]:first-of-type {
+        border-top: none;
+      }
+      div[head] {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+      }
+      div[head] b {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 600;
+      }
+
+      select,
+      input[type='text'],
+      input[type='number'] {
+        padding: 4px 6px;
+        font: var(--input-field-font, inherit);
+        font-size: 0.74rem;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 4px;
+      }
+      /* 이름이 길어질 수 있는 쪽(문)까지 안 잘리는 폭이다 */
+      div[head] select {
+        flex: none;
+        width: 8.5em;
+      }
+
+      div[detail] {
+        display: grid;
+        grid-template-columns: 4.5em 1fr;
+        align-items: center;
+        gap: 4px var(--spacing-medium, 8px);
+        padding-left: var(--spacing-medium, 8px);
+      }
+      div[detail] > span {
+        font-size: 0.72rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[detail] input {
+        width: 100%;
+        box-sizing: border-box;
+      }
+      div[detail] em {
+        grid-column: 2;
+        font-style: normal;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    `
+    ]; }
+    render() {
+        const rung = rungOf(this.board?.capabilities);
+        const names = this.board?.capabilities ?? [];
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.what-this-does')}</h3>
+
+        ${this.rung('none', rung)} ${this.rung('hold', rung)} ${this.rung('flow', rung)}
+        ${rung === null
+            ? html `<p quiet>${i18next.t('figure.text.capability-hand-written')}</p>`
+            : ''}
+        ${names.length > 0 ? html `<code names>${names.join(' · ')}</code>` : ''}
+      </section>
+
+      ${this.renderAnchors(rung)}
+    `;
+    }
+    /**
+     * 자리와 문 — **여기서는 읽기만 한다.**
+     *
+     * 지정은 속성 탭에서 한다. 부품을 고치는 곳이 한 군데여야 하기 때문이다 — 목록을 여기 또
+     * 두면 같은 부품을 두 화면에서 고치게 되고, 저작자는 어느 쪽이 이기는지 매번 생각해야 한다.
+     *
+     * 그래도 요약은 남긴다. 「어느 부품이 자리인가」는 부품을 하나씩 눌러 보며 알아낼 일이
+     * 아니다 — 자리는 그려지지 않으므로 화면을 봐서는 영영 못 찾는다.
+     */
+    renderAnchors(rung) {
+        if (rung === 'none') {
+            return html `
+        <section>
+          <h3>${i18next.t('figure.label.slots-and-ports')}</h3>
+          <p quiet>${i18next.t('figure.text.slots-need-capability')}</p>
+        </section>
+      `;
+        }
+        const marked = this.parts.filter(part => part.capability);
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.slots-and-ports')}</h3>
+        <p quiet>${i18next.t('figure.text.anchors-are-not-drawn')}</p>
+
+        ${marked.length === 0
+            ? html `<p quiet>${i18next.t('figure.text.designate-in-properties')}</p>`
+            : marked.map(part => this.renderMarked(part))}
+      </section>
+    `;
+    }
+    /** 지정된 부품 한 줄. 누르면 그 부품이 골라진다 — 고치는 자리는 속성 탭이다. */
+    renderMarked(part) {
+        const spec = part.capability;
+        return html `
+      <button marked @click=${() => this.pick(part)}>
+        <b>${part.name}</b>
+        <span>${spec.roles.map(role => i18next.t('figure.label.role-' + role)).join(' · ')}</span>
+        ${spec.accepts?.length ? html `<em>${spec.accepts.join(' · ')}</em>` : ''}
+      </button>
+    `;
+    }
+    /** 이 부품을 고르게 한다. 부품 목록에서 누른 것과 같은 알림이다. */
+    pick(part) {
+        const index = this.parts.indexOf(part);
+        if (index < 0)
+            return;
+        this.dispatchEvent(new CustomEvent('select-part', { detail: { index }, bubbles: true, composed: true }));
+    }
+    /**
+     * 사다리 한 칸.
+     *
+     * `checked` 를 `live()` 로 묶는다. 그냥 두면 Lit 이 **마지막으로 그린 값**과 견주므로,
+     * 브라우저가 DOM 을 바꿨는데 모델은 안 바뀐 경우 되돌리지 않는다. 실제로 그랬다 — 고르는
+     * 도중 도형이 다시 실렸더니 점은 「흐른다」에 있고 강조 상자는 「그리기만 한다」에 있었다.
+     * 화면이 모델과 다른 말을 하는 상태다. `live()` 는 **지금 DOM 의 값**과 견준다.
+     */
+    rung(which, chosen) {
+        return html `
+      <label rung ?on=${chosen === which}>
+        <input
+          type="radio"
+          name="rung"
+          .checked=${live(chosen === which)}
+          @change=${() => this.setRung(which)}
+        />
+        <span>
+          <strong>${i18next.t(`figure.label.rung-${which}`)}</strong>
+          <em>${i18next.t(`figure.text.rung-${which}-note`)}</em>
+        </span>
+      </label>
+    `;
+    }
+    /**
+     * 사다리를 내리면 자리도 함께 거둔다.
+     *
+     * 능력을 「그리기만 한다」로 되돌려 놓고 부품에 자리 표시가 남아 있으면, 형식은 자리를
+     * 그대로 실어 보내는데 씬은 그것을 쓸 클래스가 없다. **선언은 있고 길이 없는** 상태가
+     * 되고, 그 도형은 멀쩡해 보이면서 아무것도 못 받는다.
+     */
+    setRung(which) {
+        const board = this.board;
+        if (!board)
+            return;
+        this.tellBoard({ ...board, capabilities: RUNGS[which].length > 0 ? [...RUNGS[which]] : undefined });
+        if (which === 'none') {
+            this.parts.forEach((part, index) => {
+                if (!part.capability)
+                    return;
+                const { capability, ...rest } = part;
+                this.dispatchEvent(new CustomEvent('update-part', { detail: { index, part: rest }, bubbles: true, composed: true }));
+            });
+        }
+    }
+    tellBoard(board) {
+        this.board = board;
+        this.dispatchEvent(new CustomEvent('update-board', { detail: { board }, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], FigureCapabilities.prototype, "board", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FigureCapabilities.prototype, "parts", void 0);
+FigureCapabilities = __decorate([
+    customElement('figure-capabilities')
+], FigureCapabilities);
+export { FigureCapabilities };
+//# sourceMappingURL=figure-capabilities.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-capabilities.js","sourceRoot":"","sources":["../../client/modeller/figure-capabilities.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport type { BoardModel, PartModel } from './figure-source.js'\n\n/**\n * 이 도형이 **무엇을 하는가.**\n *\n * ## 왜 탭 하나가 필요한가\n *\n * 지금까지 저작한 것은 **생김새**뿐이었다. 컨베이어를 아무리 잘 그려도 보드에 놓으면\n * 상자 하나를 못 받는다 — 물건을 받고 담고 흘려보내는 것은 씬의 capability 가 하는 일이고,\n * 손으로 쓴 컴포넌트는 클래스 선언 한 줄로 그것을 졌다. 저작한 도형에는 그 줄을 쓸 자리가\n * 없어서, 여기서 고른 것이 그 줄이 된다.\n *\n * ## 사다리로 묻는다\n *\n * 능력의 이름(`Capacity` · `Holdable` · `Transferable` · `FlowNode`)을 그대로 늘어놓고\n * 고르라고 하면, 저작자는 넷의 관계를 먼저 배워야 한다. 실제로 물어야 하는 것은 하나다 —\n * **이 도형이 물건을 다루나, 다룬다면 지나가나.** 그래서 세 칸의 사다리로 묻고, 이름은\n * 고른 뒤에 보여 준다.\n *\n * 윗 칸이 아랫 칸을 포함한다(`FlowNode` 가 나머지 셋을 스스로 흡수한다). 그래서 사다리이지\n * 체크상자가 아니다.\n */\n\n/** 사다리 한 칸 — 화면이 묻는 말과, 그것이 되는 능력 이름. */\ntype Rung = 'none' | 'hold' | 'flow'\n\nconst RUNGS: Readonly<Record<Rung, readonly string[]>> = Object.freeze({\n  none: [],\n  hold: ['Capacity', 'Holdable'],\n  flow: ['FlowNode']\n})\n\n/** 선언된 이름 집합이 사다리 어느 칸인가. 어느 칸도 아니면 `null` — 지어내지 않는다. */\nfunction rungOf(names: readonly string[] | undefined): Rung | null {\n  const has = new Set(names ?? [])\n  if (has.size === 0) return 'none'\n\n  for (const [rung, wanted] of Object.entries(RUNGS) as [Rung, readonly string[]][]) {\n    if (wanted.length === has.size && wanted.every(name => has.has(name))) return rung\n  }\n  return null\n}\n\n@customElement('figure-capabilities')\nexport class FigureCapabilities 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-y: auto;\n        background-color: var(--md-sys-color-surface-container-lowest);\n        color: var(--md-sys-color-on-surface);\n        font: var(--label-font, inherit);\n        font-size: 0.76rem;\n      }\n\n      section {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-large, 12px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      }\n\n      /* 다른 탭들과 같은 눈금이다 — 탭마다 다른 제목 규격을 쓰면 따로 논다 */\n      h3 {\n        margin: 0 0 2px 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\n      p[quiet] {\n        margin: 0;\n        font-size: 0.72rem;\n        line-height: 1.5;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      /* 사다리 — 고르는 것이 하나라 라디오다 */\n      label[rung] {\n        display: flex;\n        align-items: flex-start;\n        gap: var(--spacing-medium, 8px);\n        padding: 6px 8px;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      label[rung][on] {\n        border-color: var(--md-sys-color-primary);\n        background-color: var(--md-sys-color-surface-container);\n      }\n      label[rung]:hover:not([on]) {\n        background-color: var(--md-sys-color-surface-container-low);\n      }\n      label[rung] span {\n        display: flex;\n        flex-direction: column;\n        gap: 1px;\n      }\n      label[rung] strong {\n        font-weight: 600;\n      }\n      label[rung] em {\n        font-style: normal;\n        font-size: 0.7rem;\n        line-height: 1.4;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      input[type='radio'] {\n        flex: none;\n        margin: 2px 0 0 0;\n        accent-color: var(--md-sys-color-primary);\n        cursor: pointer;\n      }\n\n      /* 실제로 씬에 붙는 이름. 고른 뒤에 보여 준다 */\n      code[names] {\n        font: var(--mono-font, ui-monospace, monospace);\n        font-size: 0.7rem;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      /* 지정된 부품 한 줄 — 읽는 것이지 고치는 것이 아니다. 눌러 그 부품으로 간다 */\n      button[marked] {\n        display: flex;\n        align-items: baseline;\n        gap: var(--spacing-medium, 8px);\n        width: 100%;\n        padding: 5px 8px;\n        text-align: left;\n        font: inherit;\n        color: inherit;\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      button[marked]:hover {\n        background-color: var(--md-sys-color-surface-container);\n      }\n      button[marked] b {\n        flex: none;\n        font-weight: 600;\n      }\n      button[marked] span {\n        flex: none;\n        font-size: 0.72rem;\n        color: var(--md-sys-color-primary);\n      }\n      button[marked] em {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        text-align: right;\n        font-style: normal;\n        font-size: 0.7rem;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      /* 부품마다 한 줄. 자리를 고른 것만 아래로 펼친다 */\n      div[part] {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        padding: 6px 0;\n        border-top: 1px solid var(--md-sys-color-outline-variant);\n      }\n      div[part]:first-of-type {\n        border-top: none;\n      }\n      div[head] {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-medium, 8px);\n      }\n      div[head] b {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-weight: 600;\n      }\n\n      select,\n      input[type='text'],\n      input[type='number'] {\n        padding: 4px 6px;\n        font: var(--input-field-font, inherit);\n        font-size: 0.74rem;\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface);\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 4px;\n      }\n      /* 이름이 길어질 수 있는 쪽(문)까지 안 잘리는 폭이다 */\n      div[head] select {\n        flex: none;\n        width: 8.5em;\n      }\n\n      div[detail] {\n        display: grid;\n        grid-template-columns: 4.5em 1fr;\n        align-items: center;\n        gap: 4px var(--spacing-medium, 8px);\n        padding-left: var(--spacing-medium, 8px);\n      }\n      div[detail] > span {\n        font-size: 0.72rem;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      div[detail] input {\n        width: 100%;\n        box-sizing: border-box;\n      }\n      div[detail] em {\n        grid-column: 2;\n        font-style: normal;\n        font-size: 0.7rem;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n    `\n  ]\n\n  @property({ type: Object }) board?: BoardModel\n  @property({ type: Array }) parts: PartModel[] = []\n\n  render() {\n    const rung = rungOf(this.board?.capabilities)\n    const names = this.board?.capabilities ?? []\n\n    return html`\n      <section>\n        <h3>${i18next.t('figure.label.what-this-does')}</h3>\n\n        ${this.rung('none', rung)} ${this.rung('hold', rung)} ${this.rung('flow', rung)}\n        ${rung === null\n          ? html`<p quiet>${i18next.t('figure.text.capability-hand-written')}</p>`\n          : ''}\n        ${names.length > 0 ? html`<code names>${names.join(' · ')}</code>` : ''}\n      </section>\n\n      ${this.renderAnchors(rung)}\n    `\n  }\n\n  /**\n   * 자리와 문 — **여기서는 읽기만 한다.**\n   *\n   * 지정은 속성 탭에서 한다. 부품을 고치는 곳이 한 군데여야 하기 때문이다 — 목록을 여기 또\n   * 두면 같은 부품을 두 화면에서 고치게 되고, 저작자는 어느 쪽이 이기는지 매번 생각해야 한다.\n   *\n   * 그래도 요약은 남긴다. 「어느 부품이 자리인가」는 부품을 하나씩 눌러 보며 알아낼 일이\n   * 아니다 — 자리는 그려지지 않으므로 화면을 봐서는 영영 못 찾는다.\n   */\n  private renderAnchors(rung: Rung | null) {\n    if (rung === 'none') {\n      return html`\n        <section>\n          <h3>${i18next.t('figure.label.slots-and-ports')}</h3>\n          <p quiet>${i18next.t('figure.text.slots-need-capability')}</p>\n        </section>\n      `\n    }\n\n    const marked = this.parts.filter(part => part.capability)\n\n    return html`\n      <section>\n        <h3>${i18next.t('figure.label.slots-and-ports')}</h3>\n        <p quiet>${i18next.t('figure.text.anchors-are-not-drawn')}</p>\n\n        ${marked.length === 0\n          ? html`<p quiet>${i18next.t('figure.text.designate-in-properties')}</p>`\n          : marked.map(part => this.renderMarked(part))}\n      </section>\n    `\n  }\n\n  /** 지정된 부품 한 줄. 누르면 그 부품이 골라진다 — 고치는 자리는 속성 탭이다. */\n  private renderMarked(part: PartModel) {\n    const spec = part.capability!\n\n    return html`\n      <button marked @click=${() => this.pick(part)}>\n        <b>${part.name}</b>\n        <span>${spec.roles.map(role => i18next.t('figure.label.role-' + role)).join(' · ')}</span>\n        ${spec.accepts?.length ? html`<em>${spec.accepts.join(' · ')}</em>` : ''}\n      </button>\n    `\n  }\n\n  /** 이 부품을 고르게 한다. 부품 목록에서 누른 것과 같은 알림이다. */\n  private pick(part: PartModel) {\n    const index = this.parts.indexOf(part)\n    if (index < 0) return\n\n    this.dispatchEvent(new CustomEvent('select-part', { detail: { index }, bubbles: true, composed: true }))\n  }\n\n  /**\n   * 사다리 한 칸.\n   *\n   * `checked` 를 `live()` 로 묶는다. 그냥 두면 Lit 이 **마지막으로 그린 값**과 견주므로,\n   * 브라우저가 DOM 을 바꿨는데 모델은 안 바뀐 경우 되돌리지 않는다. 실제로 그랬다 — 고르는\n   * 도중 도형이 다시 실렸더니 점은 「흐른다」에 있고 강조 상자는 「그리기만 한다」에 있었다.\n   * 화면이 모델과 다른 말을 하는 상태다. `live()` 는 **지금 DOM 의 값**과 견준다.\n   */\n  private rung(which: Rung, chosen: Rung | null) {\n    return html`\n      <label rung ?on=${chosen === which}>\n        <input\n          type=\"radio\"\n          name=\"rung\"\n          .checked=${live(chosen === which)}\n          @change=${() => this.setRung(which)}\n        />\n        <span>\n          <strong>${i18next.t(`figure.label.rung-${which}`)}</strong>\n          <em>${i18next.t(`figure.text.rung-${which}-note`)}</em>\n        </span>\n      </label>\n    `\n  }\n\n  /**\n   * 사다리를 내리면 자리도 함께 거둔다.\n   *\n   * 능력을 「그리기만 한다」로 되돌려 놓고 부품에 자리 표시가 남아 있으면, 형식은 자리를\n   * 그대로 실어 보내는데 씬은 그것을 쓸 클래스가 없다. **선언은 있고 길이 없는** 상태가\n   * 되고, 그 도형은 멀쩡해 보이면서 아무것도 못 받는다.\n   */\n  private setRung(which: Rung) {\n    const board = this.board\n    if (!board) return\n\n    this.tellBoard({ ...board, capabilities: RUNGS[which].length > 0 ? [...RUNGS[which]] : undefined })\n\n    if (which === 'none') {\n      this.parts.forEach((part, index) => {\n        if (!part.capability) return\n        const { capability, ...rest } = part\n        this.dispatchEvent(\n          new CustomEvent('update-part', { detail: { index, part: rest }, bubbles: true, composed: true })\n        )\n      })\n    }\n  }\n\n  private tellBoard(board: BoardModel) {\n    this.board = board\n    this.dispatchEvent(new CustomEvent('update-board', { detail: { board }, bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist-client/modeller/figure-history-panel.d.ts

@@ -21,7 +21,7 @@ declare const FigureHistoryPanel_base: (new (...args: any[]) => LitElement) & ty
  * 않는다 — 다시 내보내려면 발행을 한 번 더 하고, 그때 번호는 이미 쓴 다음 번호를 받는다.
  */
 export declare class FigureHistoryPanel extends FigureHistoryPanel_base {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     /** 지금 열려 있는 도형. 없으면(새로 만드는 중) 발행할 것이 없다. */
     figureId?: string;
     figureState?: 'draft' | 'released';
@@ -31,10 +31,24 @@ export declare class FigureHistoryPanel extends FigureHistoryPanel_base {
     private versions;
     private busy;
     private failure;
+    /**
+     * 발행 판정. **저장된 정본에 대한 것**이라 저장할 때마다 다시 묻는다(`figureVersion` 이 아니라
+     * `dirty` 가 풀리는 순간이 그때다).
+     */
+    private inspection?;
     updated(changes: Map<string, unknown>): void;
+    private inspect;
     private reload;
     render(): import("lit-html").TemplateResult<1>;
     private renderRelease;
+    /**
+     * 사유 한 줄 — **잰 것 · 왜 · 어떻게** 셋을 함께 말한다.
+     *
+     * 잰 것만 보여 줬더니 「1 조각이 2 조각으로 갈라진다」에서 사람이 멈췄다. 왜 나쁜지도, 무엇을
+     * 바꾸면 되는지도 알 수 없었다. 그 셋은 형식(`figure-model` 의 gate)이 만들고 여기서는 자리만
+     * 준다 — 화면이 문장을 지으면 서버가 거절할 때와 다른 말을 하게 된다.
+     */
+    private renderFinding;
     private renderVersion;
     private release;
     private revert;