@things-factory/figure-ui 10.1.46 → 10.1.48

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

@@ -0,0 +1,317 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { DEFAULT_VIEW, ENVIRONMENTS, SCENE_REFERENCES } from './figure-view.js';
+/**
+ * 저작 화면의 **보기 설정**.
+ *
+ * ## 자산이 아니라 작업대다
+ *
+ * 여기서 고치는 것은 저장되지 않는다. 조명을 밝게 하고 바닥을 켠 것은 지금 보기 편한
+ * 상태일 뿐이다. 그래서 「저장 안 됨」을 화면에 적어 둔다 — 안 적으면 저작자가 조명을
+ * 맞춰 두고 그것이 자산에 딸려 간다고 여긴다.
+ *
+ * ## 값을 들고 있지 않는다
+ *
+ * 이 패널은 받은 것을 그리고 바뀐 것을 알린다. 정본은 모델러 페이지가 갖는다 — 속성
+ * 패널과 같은 방식이다. 여기서 들고 있으면 페이지가 다시 그릴 때 두 벌이 갈린다.
+ */
+let FigureSettings = class FigureSettings extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.view = DEFAULT_VIEW;
+    }
+    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[row] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--spacing-medium, 8px);
+        cursor: pointer;
+      }
+      label[row] span {
+        display: flex;
+        flex-direction: column;
+      }
+      label[row] em {
+        font-style: normal;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      input[type='checkbox'] {
+        flex: none;
+        width: 16px;
+        height: 16px;
+        margin: 0;
+        accent-color: var(--md-sys-color-primary);
+        cursor: pointer;
+      }
+
+      label[field] {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      label[field] > span {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      select,
+      input[type='number'],
+      input[type='color'] {
+        width: 100%;
+        padding: 5px 6px;
+        font: var(--input-field-font, inherit);
+        font-size: 0.76rem;
+        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;
+      }
+      input[type='color'] {
+        height: 30px;
+        padding: 2px;
+        cursor: pointer;
+      }
+
+      /* 값이 옆에 붙어야 끌면서 얼마인지 안다 */
+      div[slider] {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+      }
+      input[type='range'] {
+        flex: 1;
+        accent-color: var(--md-sys-color-primary);
+        cursor: pointer;
+      }
+      div[slider] output {
+        flex: none;
+        width: 2.4em;
+        text-align: right;
+        font: var(--mono-font, ui-monospace, monospace);
+        font-size: 0.72rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      button[reset] {
+        align-self: flex-start;
+        padding: 5px 12px;
+        font: var(--label-font, inherit);
+        font-size: 0.74rem;
+        color: var(--md-sys-color-on-surface-variant);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      button[reset]:hover {
+        background-color: var(--md-sys-color-surface-container);
+      }
+    `
+    ]; }
+    render() {
+        const view = this.view ?? DEFAULT_VIEW;
+        return html `
+      <!--
+        놓이는 도면.
+
+        이 묶음이 맨 위인 것은, 나머지가 「어떻게 보이나」인데 이것은 「무엇으로 보고
+        있나」이기 때문이다. 미리보기가 도면에 놓인 모습을 말하는 자리이므로, 어떤 도면을
+        가정하는지가 먼저 정해져야 그 다음이 뜻을 갖는다.
+
+        도형 탭의 「배치 기준」과 짝이지 같은 것이 아니다. 저쪽은 이 도형이 어느 면에
+        붙는가(저장된다), 이쪽은 그 면을 가진 도면이 어느 쪽을 기준으로 재는가(저장 안 된다).
+      -->
+      <section>
+        <h3>${i18next.t('figure.label.assumed-drawing')}</h3>
+        <p quiet>${i18next.t('figure.text.view-settings-are-not-saved')}</p>
+
+        <label field>
+          <span>${i18next.t('figure.label.scene-reference')}</span>
+          <select
+            .value=${view.placement}
+            @change=${(e) => this.put({ placement: e.target.value })}
+          >
+            ${SCENE_REFERENCES.map(name => html `<option value=${name} ?selected=${view.placement === name}>
+                ${i18next.t(`figure.label.scene-reference-${name}`)}
+              </option>`)}
+          </select>
+        </label>
+        <p quiet>${i18next.t('figure.text.scene-reference-explained')}</p>
+
+        <label field>
+          <span>${i18next.t('figure.label.ceiling-height')}</span>
+          <input
+            type="number"
+            min="0"
+            step="100"
+            .value=${String(view.ceilingHeight)}
+            @change=${(e) => this.put({ ceilingHeight: Number(e.target.value) || 0 })}
+          />
+        </label>
+        <p quiet>${i18next.t('figure.text.ceiling-height-explained')}</p>
+      </section>
+
+      <section>
+        <h3>${i18next.t('figure.label.guides')}</h3>
+
+        ${this.toggle('grid', view.grid, i18next.t('figure.label.coordinate-ground'), i18next.t('figure.text.coordinate-ground-explained'))}
+        ${this.toggle('gridLabels', view.gridLabels, i18next.t('figure.label.axis-labels'))}
+        ${this.toggle('floor', view.floor, i18next.t('figure.label.scene-floor'), i18next.t('figure.text.floor-explained'))}
+      </section>
+
+      <section>
+        <h3>${i18next.t('figure.label.environment')}</h3>
+
+        <label field>
+          <span>${i18next.t('figure.label.preset')}</span>
+          <select
+            .value=${view.environment}
+            @change=${(e) => this.put({ environment: e.target.value })}
+          >
+            ${ENVIRONMENTS.map(name => html `<option value=${name} ?selected=${view.environment === name}>
+                ${i18next.t(`figure.label.environment-${name}`)}
+              </option>`)}
+          </select>
+        </label>
+        <p quiet>${i18next.t('figure.text.environment-explained')}</p>
+
+        <label field>
+          <span>${i18next.t('figure.label.sky-color')}</span>
+          <input
+            type="color"
+            .value=${view.skyColor}
+            @change=${(e) => this.put({ skyColor: e.target.value })}
+          />
+        </label>
+      </section>
+
+      <section>
+        <h3>${i18next.t('figure.label.key-light')}</h3>
+
+        ${this.slider('dirLightIntensity', view.dirLightIntensity, i18next.t('figure.label.intensity'), 0, 5, 0.1)}
+        ${this.toggle('dirLightFollowCamera', view.dirLightFollowCamera, i18next.t('figure.label.follow-camera'), i18next.t('figure.text.follow-camera-explained'))}
+        ${this.toggle('dirShadowEnabled', view.dirShadowEnabled, i18next.t('figure.label.cast-shadow'))}
+        ${view.dirLightIntensity === 0 && view.hemiIntensity === 0
+            ? html `<p quiet>${i18next.t('figure.text.all-lights-off')}</p>`
+            : ''}
+      </section>
+
+      <section>
+        <h3>${i18next.t('figure.label.hemisphere-light')}</h3>
+
+        ${this.slider('hemiIntensity', view.hemiIntensity, i18next.t('figure.label.intensity'), 0, 8, 0.1)}
+        <p quiet>${i18next.t('figure.text.hemisphere-light-explained')}</p>
+      </section>
+
+      <section>
+        <button reset @click=${() => this.reset()}>${i18next.t('figure.button.reset-view')}</button>
+      </section>
+    `;
+    }
+    toggle(key, on, label, hint) {
+        return html `
+      <label row>
+        <span>
+          ${label}${hint ? html `<em>${hint}</em>` : ''}
+        </span>
+        <input
+          type="checkbox"
+          .checked=${on}
+          @change=${(e) => this.put({ [key]: e.target.checked })}
+        />
+      </label>
+    `;
+    }
+    slider(key, value, label, min, max, step) {
+        return html `
+      <label field>
+        <span>${label}</span>
+        <div slider>
+          <input
+            type="range"
+            min=${min}
+            max=${max}
+            step=${step}
+            .value=${String(value)}
+            @input=${(e) => this.put({ [key]: Number(e.target.value) })}
+          />
+          <output>${value.toFixed(1)}</output>
+        </div>
+      </label>
+    `;
+    }
+    /** 처음 값으로 되돌린다. 만지다 길을 잃었을 때 돌아올 자리가 있어야 한다. */
+    reset() {
+        this.tell({ ...DEFAULT_VIEW });
+    }
+    put(patch) {
+        this.tell({ ...(this.view ?? DEFAULT_VIEW), ...patch });
+    }
+    /**
+     * 바뀐 것을 알린다.
+     *
+     * **알리기 전에 내 것도 바꿔 둔다.** Lit 은 속성을 다음 렌더에 넣으므로, 같은 프레임에
+     * 두 번 고치면 두 번째가 `this.view` 의 옛 값을 읽어 첫 번째를 덮는다. 실제로 그랬다 —
+     * 축 가이드를 끄고 바닥판을 켰더니 축 가이드가 도로 켜져 있었고, 화면의 체크 상자와
+     * 씬의 상태가 서로 다른 말을 했다.
+     *
+     * 정본은 여전히 모델러 페이지가 갖는다. 여기 값은 다음 렌더에 같은 것으로 덮인다.
+     */
+    tell(view) {
+        this.view = view;
+        this.dispatchEvent(new CustomEvent('update-view', { detail: { view }, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], FigureSettings.prototype, "view", void 0);
+FigureSettings = __decorate([
+    customElement('figure-settings')
+], FigureSettings);
+export { FigureSettings };
+//# sourceMappingURL=figure-settings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-settings.js","sourceRoot":"","sources":["../../client/modeller/figure-settings.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DEFAULT_VIEW, ENVIRONMENTS, SCENE_REFERENCES } from './figure-view.js'\nimport type { EnvironmentName, ViewSettings } from './figure-view.js'\n\n/**\n * 저작 화면의 **보기 설정**.\n *\n * ## 자산이 아니라 작업대다\n *\n * 여기서 고치는 것은 저장되지 않는다. 조명을 밝게 하고 바닥을 켠 것은 지금 보기 편한\n * 상태일 뿐이다. 그래서 「저장 안 됨」을 화면에 적어 둔다 — 안 적으면 저작자가 조명을\n * 맞춰 두고 그것이 자산에 딸려 간다고 여긴다.\n *\n * ## 값을 들고 있지 않는다\n *\n * 이 패널은 받은 것을 그리고 바뀐 것을 알린다. 정본은 모델러 페이지가 갖는다 — 속성\n * 패널과 같은 방식이다. 여기서 들고 있으면 페이지가 다시 그릴 때 두 벌이 갈린다.\n */\n@customElement('figure-settings')\nexport class FigureSettings 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      /* 저장되지 않는다는 것을 한 번 말해 둔다 */\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      label[row] {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--spacing-medium, 8px);\n        cursor: pointer;\n      }\n      label[row] span {\n        display: flex;\n        flex-direction: column;\n      }\n      label[row] em {\n        font-style: normal;\n        font-size: 0.7rem;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      input[type='checkbox'] {\n        flex: none;\n        width: 16px;\n        height: 16px;\n        margin: 0;\n        accent-color: var(--md-sys-color-primary);\n        cursor: pointer;\n      }\n\n      label[field] {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n      }\n      label[field] > span {\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      select,\n      input[type='number'],\n      input[type='color'] {\n        width: 100%;\n        padding: 5px 6px;\n        font: var(--input-field-font, inherit);\n        font-size: 0.76rem;\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      input[type='color'] {\n        height: 30px;\n        padding: 2px;\n        cursor: pointer;\n      }\n\n      /* 값이 옆에 붙어야 끌면서 얼마인지 안다 */\n      div[slider] {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-medium, 8px);\n      }\n      input[type='range'] {\n        flex: 1;\n        accent-color: var(--md-sys-color-primary);\n        cursor: pointer;\n      }\n      div[slider] output {\n        flex: none;\n        width: 2.4em;\n        text-align: right;\n        font: var(--mono-font, ui-monospace, monospace);\n        font-size: 0.72rem;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      button[reset] {\n        align-self: flex-start;\n        padding: 5px 12px;\n        font: var(--label-font, inherit);\n        font-size: 0.74rem;\n        color: var(--md-sys-color-on-surface-variant);\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      button[reset]:hover {\n        background-color: var(--md-sys-color-surface-container);\n      }\n    `\n  ]\n\n  @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW\n\n  render() {\n    const view = this.view ?? DEFAULT_VIEW\n\n    return html`\n      <!--\n        놓이는 도면.\n\n        이 묶음이 맨 위인 것은, 나머지가 「어떻게 보이나」인데 이것은 「무엇으로 보고\n        있나」이기 때문이다. 미리보기가 도면에 놓인 모습을 말하는 자리이므로, 어떤 도면을\n        가정하는지가 먼저 정해져야 그 다음이 뜻을 갖는다.\n\n        도형 탭의 「배치 기준」과 짝이지 같은 것이 아니다. 저쪽은 이 도형이 어느 면에\n        붙는가(저장된다), 이쪽은 그 면을 가진 도면이 어느 쪽을 기준으로 재는가(저장 안 된다).\n      -->\n      <section>\n        <h3>${i18next.t('figure.label.assumed-drawing')}</h3>\n        <p quiet>${i18next.t('figure.text.view-settings-are-not-saved')}</p>\n\n        <label field>\n          <span>${i18next.t('figure.label.scene-reference')}</span>\n          <select\n            .value=${view.placement}\n            @change=${(e: Event) =>\n              this.put({ placement: (e.target as HTMLSelectElement).value as ViewSettings['placement'] })}\n          >\n            ${SCENE_REFERENCES.map(\n              name => html`<option value=${name} ?selected=${view.placement === name}>\n                ${i18next.t(`figure.label.scene-reference-${name}`)}\n              </option>`\n            )}\n          </select>\n        </label>\n        <p quiet>${i18next.t('figure.text.scene-reference-explained')}</p>\n\n        <label field>\n          <span>${i18next.t('figure.label.ceiling-height')}</span>\n          <input\n            type=\"number\"\n            min=\"0\"\n            step=\"100\"\n            .value=${String(view.ceilingHeight)}\n            @change=${(e: Event) => this.put({ ceilingHeight: Number((e.target as HTMLInputElement).value) || 0 })}\n          />\n        </label>\n        <p quiet>${i18next.t('figure.text.ceiling-height-explained')}</p>\n      </section>\n\n      <section>\n        <h3>${i18next.t('figure.label.guides')}</h3>\n\n        ${this.toggle('grid', view.grid, i18next.t('figure.label.coordinate-ground'), i18next.t('figure.text.coordinate-ground-explained'))}\n        ${this.toggle('gridLabels', view.gridLabels, i18next.t('figure.label.axis-labels'))}\n        ${this.toggle('floor', view.floor, i18next.t('figure.label.scene-floor'), i18next.t('figure.text.floor-explained'))}\n      </section>\n\n      <section>\n        <h3>${i18next.t('figure.label.environment')}</h3>\n\n        <label field>\n          <span>${i18next.t('figure.label.preset')}</span>\n          <select\n            .value=${view.environment}\n            @change=${(e: Event) => this.put({ environment: (e.target as HTMLSelectElement).value as EnvironmentName })}\n          >\n            ${ENVIRONMENTS.map(\n              name => html`<option value=${name} ?selected=${view.environment === name}>\n                ${i18next.t(`figure.label.environment-${name}`)}\n              </option>`\n            )}\n          </select>\n        </label>\n        <p quiet>${i18next.t('figure.text.environment-explained')}</p>\n\n        <label field>\n          <span>${i18next.t('figure.label.sky-color')}</span>\n          <input\n            type=\"color\"\n            .value=${view.skyColor}\n            @change=${(e: Event) => this.put({ skyColor: (e.target as HTMLInputElement).value })}\n          />\n        </label>\n      </section>\n\n      <section>\n        <h3>${i18next.t('figure.label.key-light')}</h3>\n\n        ${this.slider('dirLightIntensity', view.dirLightIntensity, i18next.t('figure.label.intensity'), 0, 5, 0.1)}\n        ${this.toggle(\n          'dirLightFollowCamera',\n          view.dirLightFollowCamera,\n          i18next.t('figure.label.follow-camera'),\n          i18next.t('figure.text.follow-camera-explained')\n        )}\n        ${this.toggle('dirShadowEnabled', view.dirShadowEnabled, i18next.t('figure.label.cast-shadow'))}\n        ${view.dirLightIntensity === 0 && view.hemiIntensity === 0\n          ? html`<p quiet>${i18next.t('figure.text.all-lights-off')}</p>`\n          : ''}\n      </section>\n\n      <section>\n        <h3>${i18next.t('figure.label.hemisphere-light')}</h3>\n\n        ${this.slider('hemiIntensity', view.hemiIntensity, i18next.t('figure.label.intensity'), 0, 8, 0.1)}\n        <p quiet>${i18next.t('figure.text.hemisphere-light-explained')}</p>\n      </section>\n\n      <section>\n        <button reset @click=${() => this.reset()}>${i18next.t('figure.button.reset-view')}</button>\n      </section>\n    `\n  }\n\n  private toggle(key: keyof ViewSettings, on: boolean, label: string, hint?: string) {\n    return html`\n      <label row>\n        <span>\n          ${label}${hint ? html`<em>${hint}</em>` : ''}\n        </span>\n        <input\n          type=\"checkbox\"\n          .checked=${on}\n          @change=${(e: Event) => this.put({ [key]: (e.target as HTMLInputElement).checked } as Partial<ViewSettings>)}\n        />\n      </label>\n    `\n  }\n\n  private slider(key: keyof ViewSettings, value: number, label: string, min: number, max: number, step: number) {\n    return html`\n      <label field>\n        <span>${label}</span>\n        <div slider>\n          <input\n            type=\"range\"\n            min=${min}\n            max=${max}\n            step=${step}\n            .value=${String(value)}\n            @input=${(e: Event) =>\n              this.put({ [key]: Number((e.target as HTMLInputElement).value) } as Partial<ViewSettings>)}\n          />\n          <output>${value.toFixed(1)}</output>\n        </div>\n      </label>\n    `\n  }\n\n  /** 처음 값으로 되돌린다. 만지다 길을 잃었을 때 돌아올 자리가 있어야 한다. */\n  private reset() {\n    this.tell({ ...DEFAULT_VIEW })\n  }\n\n  private put(patch: Partial<ViewSettings>) {\n    this.tell({ ...(this.view ?? DEFAULT_VIEW), ...patch })\n  }\n\n  /**\n   * 바뀐 것을 알린다.\n   *\n   * **알리기 전에 내 것도 바꿔 둔다.** Lit 은 속성을 다음 렌더에 넣으므로, 같은 프레임에\n   * 두 번 고치면 두 번째가 `this.view` 의 옛 값을 읽어 첫 번째를 덮는다. 실제로 그랬다 —\n   * 축 가이드를 끄고 바닥판을 켰더니 축 가이드가 도로 켜져 있었고, 화면의 체크 상자와\n   * 씬의 상태가 서로 다른 말을 했다.\n   *\n   * 정본은 여전히 모델러 페이지가 갖는다. 여기 값은 다음 렌더에 같은 것으로 덮인다.\n   */\n  private tell(view: ViewSettings) {\n    this.view = view\n    this.dispatchEvent(new CustomEvent('update-view', { detail: { view }, bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+import { LitElement, nothing } from 'lit';
+import type { V3Asset } from '@hatiolab/figure-model';
+type Rung = 'none' | 'hold' | 'flow';
+/** Which rung a set of names is, or null when it is none of them -- not invented. */
+export declare function rungOf(names: readonly string[] | undefined): Rung | null;
+declare const FigureV3Capability_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 자리·능력 — what the figure does on a board (V2's 「능력」 tab, parity row ⑤): the ladder from drawing only, to
+ * holding things, to passing them on, and every place things are held, whatever part it is on. A place is not drawn,
+ * so the list is the only way to find one; choosing a row selects its part, where the place is edited.
+ */
+export declare class FigureV3Capability extends FigureV3Capability_base {
+    static styles: import("lit").CSSResult[];
+    asset?: V3Asset;
+    /** The selected part, whose places are marked. */
+    selected: string;
+    locked: boolean;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private setRung;
+    private pick;
+}
+export {};

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

@@ -0,0 +1,141 @@
+import { __decorate, __metadata } from "tslib";
+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 { v3BindingsOf } from '@hatiolab/figure-model';
+import { SidePanelStyles } from './side-panel-styles.js';
+const RUNGS = Object.freeze({
+    none: [],
+    hold: ['Capacity', 'Holdable'],
+    flow: ['FlowNode']
+});
+/** Which rung a set of names is, or null when it is none of them -- not invented. */
+export 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;
+}
+/**
+ * 자리·능력 — what the figure does on a board (V2's 「능력」 tab, parity row ⑤): the ladder from drawing only, to
+ * holding things, to passing them on, and every place things are held, whatever part it is on. A place is not drawn,
+ * so the list is the only way to find one; choosing a row selects its part, where the place is edited.
+ */
+let FigureV3Capability = class FigureV3Capability extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** The selected part, whose places are marked. */
+        this.selected = '';
+        this.locked = false;
+    }
+    static { this.styles = [SidePanelStyles, css `
+    :host {
+      display: block;
+    }
+    label[rung] {
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+      padding: 8px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+    label[rung][on] {
+      border-color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+    }
+    label[rung] span {
+      display: grid;
+      gap: 2px;
+    }
+    label[rung] em,
+    p[hint],
+    small {
+      font-style: normal;
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    button[place] {
+      display: grid;
+      gap: 2px;
+      text-align: left;
+      padding: 6px 8px;
+      font: inherit;
+      color: inherit;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 8px;
+      background: none;
+      cursor: pointer;
+    }
+    button[place][on] {
+      border-color: var(--md-sys-color-primary);
+    }
+    code {
+      font-size: 0.9em;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  `]; }
+    render() {
+        const asset = this.asset;
+        if (!asset)
+            return nothing;
+        const names = asset.document.capabilities.names ?? [];
+        const rung = rungOf(names);
+        const places = v3BindingsOf(asset);
+        return html `<section>
+      <h3>${i18next.t('figure.label.what-this-does')}</h3>
+      ${['none', 'hold', 'flow'].map(which => html `<label rung ?on=${rung === which}>
+          <input type="radio" name="rung" .checked=${live(rung === which)} ?disabled=${this.locked} @change=${() => this.setRung(which)} />
+          <span>
+            <strong>${i18next.t(`figure.label.rung-${which}`)}</strong>
+            <em>${i18next.t(`figure.text.rung-${which}-note`)}</em>
+          </span>
+        </label>`)}
+      ${rung === null ? html `<p hint>${i18next.t('figure.text.capability-hand-written')}</p>` : nothing}
+      ${names.length ? html `<code>${names.join(' · ')}</code>` : nothing}
+      </section>
+      <section>
+      <h3>${i18next.t('figure.label.places')}</h3>
+      ${places.length
+            ? places.map(one => html `<button place ?on=${one.part === this.selected} @click=${() => one.part && this.pick(one.part)}>
+              <strong>${one.label}</strong>
+              <small>
+                ${i18next.t('figure.label.place-' + one.role)} · ${one.part ?? '?'}${one.face ? ' · ' + i18next.t('figure.label.face-' + one.face) : ''} ·
+                ${one.accepts.join(', ')} · ${i18next.t('figure.label.place-holds', { count: one.capacity })}
+              </small>
+            </button>`)
+            : html `<p hint>${i18next.t('figure.text.no-places')}</p>`}
+      ${places.length && rung === 'none' ? html `<p hint>${i18next.t('figure.text.place-needs-holding')}</p>` : nothing}
+      </section>
+    `;
+    }
+    setRung(which) {
+        this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-capabilities', names: [...RUNGS[which]] } }, bubbles: true, composed: true }));
+    }
+    pick(part) {
+        this.dispatchEvent(new CustomEvent('select-part', { detail: { id: part }, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureV3Capability.prototype, "asset", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureV3Capability.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureV3Capability.prototype, "locked", void 0);
+FigureV3Capability = __decorate([
+    customElement('figure-v3-capability')
+], FigureV3Capability);
+export { FigureV3Capability };
+//# sourceMappingURL=figure-v3-capability.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-v3-capability.js","sourceRoot":"","sources":["../../client/modeller/figure-v3-capability.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { v3BindingsOf } from '@hatiolab/figure-model'\nimport type { FigureCapability, V3Asset } from '@hatiolab/figure-model'\nimport { SidePanelStyles } from './side-panel-styles.js'\n\n/*\n  One rung per set of the format's capability names. Typed as the format's names, so a misspelt rung does not pass\n  (ADR-0051 ④, the V2 ladder's lesson).\n*/\ntype Rung = 'none' | 'hold' | 'flow'\nconst RUNGS: Readonly<Record<Rung, readonly FigureCapability[]>> = Object.freeze({\n  none: [],\n  hold: ['Capacity', 'Holdable'],\n  flow: ['FlowNode']\n})\n\n/** Which rung a set of names is, or null when it is none of them -- not invented. */\nexport function rungOf(names: readonly string[] | undefined): Rung | null {\n  const has = new Set(names ?? [])\n  if (has.size === 0) return 'none'\n  for (const [rung, wanted] of Object.entries(RUNGS) as [Rung, readonly FigureCapability[]][])\n    if (wanted.length === has.size && wanted.every(name => has.has(name))) return rung\n  return null\n}\n\n/**\n * 자리·능력 — what the figure does on a board (V2's 「능력」 tab, parity row ⑤): the ladder from drawing only, to\n * holding things, to passing them on, and every place things are held, whatever part it is on. A place is not drawn,\n * so the list is the only way to find one; choosing a row selects its part, where the place is edited.\n */\n@customElement('figure-v3-capability')\nexport class FigureV3Capability extends localize(i18next)(LitElement) {\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    label[rung] {\n      display: flex;\n      gap: 8px;\n      align-items: flex-start;\n      padding: 8px;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n      cursor: pointer;\n    }\n    label[rung][on] {\n      border-color: var(--md-sys-color-primary);\n      background: var(--md-sys-color-secondary-container);\n      color: var(--md-sys-color-on-secondary-container);\n    }\n    label[rung] span {\n      display: grid;\n      gap: 2px;\n    }\n    label[rung] em,\n    p[hint],\n    small {\n      font-style: normal;\n      margin: 0;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    button[place] {\n      display: grid;\n      gap: 2px;\n      text-align: left;\n      padding: 6px 8px;\n      font: inherit;\n      color: inherit;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n      background: none;\n      cursor: pointer;\n    }\n    button[place][on] {\n      border-color: var(--md-sys-color-primary);\n    }\n    code {\n      font-size: 0.9em;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n  `]\n\n  @property({ attribute: false }) asset?: V3Asset\n  /** The selected part, whose places are marked. */\n  @property() selected = ''\n  @property({ type: Boolean }) locked = false\n\n  render() {\n    const asset = this.asset\n    if (!asset) return nothing\n    const names = asset.document.capabilities.names ?? []\n    const rung = rungOf(names)\n    const places = v3BindingsOf(asset)\n    return html`<section>\n      <h3>${i18next.t('figure.label.what-this-does')}</h3>\n      ${(['none', 'hold', 'flow'] as const).map(\n        which => html`<label rung ?on=${rung === which}>\n          <input type=\"radio\" name=\"rung\" .checked=${live(rung === which)} ?disabled=${this.locked} @change=${() => this.setRung(which)} />\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      ${rung === null ? html`<p hint>${i18next.t('figure.text.capability-hand-written')}</p>` : nothing}\n      ${names.length ? html`<code>${names.join(' · ')}</code>` : nothing}\n      </section>\n      <section>\n      <h3>${i18next.t('figure.label.places')}</h3>\n      ${places.length\n        ? places.map(\n            one => html`<button place ?on=${one.part === this.selected} @click=${() => one.part && this.pick(one.part)}>\n              <strong>${one.label}</strong>\n              <small>\n                ${i18next.t('figure.label.place-' + one.role)} · ${one.part ?? '?'}${one.face ? ' · ' + i18next.t('figure.label.face-' + one.face) : ''} ·\n                ${one.accepts.join(', ')} · ${i18next.t('figure.label.place-holds', { count: one.capacity })}\n              </small>\n            </button>`\n          )\n        : html`<p hint>${i18next.t('figure.text.no-places')}</p>`}\n      ${places.length && rung === 'none' ? html`<p hint>${i18next.t('figure.text.place-needs-holding')}</p>` : nothing}\n      </section>\n    `\n  }\n\n  private setRung(which: Rung) {\n    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-capabilities', names: [...RUNGS[which]] } }, bubbles: true, composed: true }))\n  }\n\n  private pick(part: string) {\n    this.dispatchEvent(new CustomEvent('select-part', { detail: { id: part }, bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -0,0 +1,31 @@
+import '@material/web/icon/icon.js';
+import { LitElement, nothing } from 'lit';
+import type { V3Asset } from '@hatiolab/figure-model';
+declare const FigureV3Clips_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 클립 — V2's animations (parity row ⑥): controls played by keys over time. A clip is one clock; each track plays one
+ * control. Scrubbing a clip shows its pose at that moment (one batch of input changes, not saved as the default); a key
+ * is added at the scrubbed moment with the control's value there, so a pose is made with the controls' sliders and
+ * then kept as a key -- the way V2's recorder worked. Every change is one part edit.
+ */
+export declare class FigureV3Clips extends FigureV3Clips_base {
+    private readonly help;
+    static styles: import("lit").CSSResult[];
+    asset?: V3Asset;
+    /** The values the editor holds now, by input id -- what a new key takes. */
+    values: Record<string, number>;
+    locked: boolean;
+    /** Where each clip is scrubbed to, in seconds. */
+    private at;
+    private adding;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private renderClip;
+    private renderTrack;
+    private renderAdd;
+    /** Show the clip's pose at a moment: one batch of input changes, not saved as the default. */
+    /** Show the clip's pose at a moment. While the bar is dragged the pose is live (drawn, not recorded); the release
+     * applies it as one batch of input changes. */
+    private scrub;
+    private edit;
+}
+export {};