@things-factory/figure-ui 10.1.3

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

@@ -0,0 +1,175 @@
+import { __decorate, __metadata } from "tslib";
+import './figure-inspector.js';
+import './figure-report.js';
+import './figure-settings.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { DEFAULT_VIEW } from './figure-view.js';
+/**
+ * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.
+ *
+ * ## 왜 위아래로 나누지 않나
+ *
+ * 둘 다 세로로 긴 화면이다. 위아래로 나누면 양쪽 다 잘려서, 속성은 재질까지 못
+ * 내려가고 판정은 무게까지 못 내려간다. 탭으로 겹치면 각자 칸 전체를 쓴다.
+ *
+ * ## 그래도 개수는 늘 보인다
+ *
+ * 성숙도의 축 하나 —「몇 개까지 편한가」— 는 부품을 고칠 때마다 움직이고, 그것이
+ * 보여야 저작자가 고칠 수 있다. 탭 뒤로 숨으면 저장하고 나서야 알게 된다. 그래서 그
+ * 숫자만 **탭 이름표에 남긴다** — 성숙도를 덮어 두고 속성을 만져도 따라 움직이는
+ * 것이 보인다.
+ *
+ * 판정은 화면에서 감춰도 **DOM 에는 남는다.** 떼었다 붙이면 다시 세느라 값이 잠깐
+ * 비고, 펼쳐 둔 추이 그림 같은 상태도 날아간다.
+ */
+let FigureSide = class FigureSide extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.parts = [];
+        this.selected = -1;
+        /** 저작 화면의 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다. */
+        this.view = DEFAULT_VIEW;
+        this.tab = 'properties';
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow: hidden;
+      background-color: var(--md-sys-color-surface-container-lowest);
+      border-left: 1px solid var(--md-sys-color-outline-variant);
+      color: var(--md-sys-color-on-surface);
+      font: var(--label-font, inherit);
+      /*
+        이 패널의 본문 크기를 여기서 한 번 정한다.
+
+        전에는 규칙마다 따로 적었다. 그러면 빠뜨린 규칙이 본문 기본 크기(1rem)를
+        물려받아 그 줄만 제목처럼 커진다. 오류가 아니라서 화면을 띄워 봐야 안다.
+        이 파일에서만 두 번 났다.
+
+        form 요소(input · select · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.
+        그것 말고는 여기 값을 따른다.
+      */
+      font-size: 0.76rem;
+    }
+
+    div[tabs] {
+      display: flex;
+      flex: none;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+    button[tab] {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 8px 6px;
+      font: var(--label-font, inherit);
+      font-size: 0.76rem;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background: none;
+      border: none;
+      /* 고른 탭을 밑줄로 말한다 — 칸을 색으로 채우면 아래 내용과 경계가 흐려진다 */
+      border-bottom: 2px solid transparent;
+      cursor: pointer;
+    }
+    button[tab]:hover:not([on]) {
+      background-color: var(--md-sys-color-surface-container);
+    }
+    button[tab][on] {
+      font-weight: 700;
+      color: var(--md-sys-color-primary);
+      border-bottom-color: var(--md-sys-color-primary);
+    }
+
+    /* 판정을 덮어 두어도 개수는 여기 남는다 */
+    span[badge] {
+      padding: 1px 7px;
+      font-size: 0.72rem;
+      font-weight: 700;
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border-radius: 999em;
+    }
+
+    figure-inspector,
+    figure-report,
+    figure-settings {
+      flex: 1;
+      min-height: 0;
+      border-left: none;
+    }
+    /* 감추되 떼지는 않는다 */
+    [off] {
+      display: none;
+    }
+  `; }
+    render() {
+        return html `
+      <div tabs>
+        ${this.renderTab('properties', i18next.t('label.properties'))}
+        ${this.renderTab('verdict', i18next.t('label.maturity'), this.instances)}
+        ${this.renderTab('view', i18next.t('label.view'))}
+      </div>
+
+      <figure-inspector
+        ?off=${this.tab !== 'properties'}
+        .board=${this.board}
+        .parts=${this.parts}
+        .selected=${this.selected}
+      ></figure-inspector>
+
+      <figure-report
+        ?off=${this.tab !== 'verdict'}
+        .source=${this.source}
+        @verdict-changed=${(e) => (this.instances = e.detail.instances)}
+      ></figure-report>
+
+      <figure-settings ?off=${this.tab !== 'view'} .view=${this.view}></figure-settings>
+    `;
+    }
+    renderTab(tab, label, badge) {
+        return html `
+      <button tab ?on=${this.tab === tab} @click=${() => (this.tab = tab)}>
+        ${label}${badge == null ? '' : html `<span badge>${badge.toLocaleString()}</span>`}
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], FigureSide.prototype, "board", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FigureSide.prototype, "parts", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], FigureSide.prototype, "source", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FigureSide.prototype, "selected", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], FigureSide.prototype, "view", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureSide.prototype, "tab", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], FigureSide.prototype, "instances", void 0);
+FigureSide = __decorate([
+    customElement('figure-side')
+], FigureSide);
+export { FigureSide };
+//# sourceMappingURL=figure-side.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-side.js","sourceRoot":"","sources":["../../client/modeller/figure-side.ts"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAK/C;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAtD;;QAoFsB,UAAK,GAAgB,EAAE,CAAA;QAEtB,aAAQ,GAAG,CAAC,CAAC,CAAA;QACzC,6CAA6C;QACjB,SAAI,GAAiB,YAAY,CAAA;QAE5C,QAAG,GAAQ,YAAY,CAAA;IAoC1C,CAAC;aA7HQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ElB,AA1EY,CA0EZ;IAmBD,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC;UAC3D,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC;UACtE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;;;;eAI1C,IAAI,CAAC,GAAG,KAAK,YAAY;iBACvB,IAAI,CAAC,KAAK;iBACV,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;;;;eAIlB,IAAI,CAAC,GAAG,KAAK,SAAS;kBACnB,IAAI,CAAC,MAAM;2BACF,CAAC,CAAc,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC;;;8BAGtD,IAAI,CAAC,GAAG,KAAK,MAAM,UAAU,IAAI,CAAC,IAAI;KAC/D,CAAA;IACH,CAAC;IAEO,SAAS,CAAC,GAAQ,EAAE,KAAa,EAAE,KAAc;QACvD,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,GAAG,KAAK,GAAG,WAAW,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;UAC/D,KAAK,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,KAAK,CAAC,cAAc,EAAE,SAAS;;KAEpF,CAAA;IACH,CAAC;;AA1C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAmB;AACnB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;yCAAwB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4CAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAkC;AAE5C;IAAhB,KAAK,EAAE;;uCAAgC;AAEvB;IAAhB,KAAK,EAAE;;6CAA2B;AA5FxB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA8HtB","sourcesContent":["import './figure-inspector.js'\nimport './figure-report.js'\nimport './figure-settings.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport type { FigureSource } from '@hatiolab/figure-model'\n\nimport type { BoardModel, PartModel } from './figure-source.js'\nimport { DEFAULT_VIEW } from './figure-view.js'\nimport type { ViewSettings } from './figure-view.js'\n\ntype Tab = 'properties' | 'verdict' | 'view'\n\n/**\n * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.\n *\n * ## 왜 위아래로 나누지 않나\n *\n * 둘 다 세로로 긴 화면이다. 위아래로 나누면 양쪽 다 잘려서, 속성은 재질까지 못\n * 내려가고 판정은 무게까지 못 내려간다. 탭으로 겹치면 각자 칸 전체를 쓴다.\n *\n * ## 그래도 개수는 늘 보인다\n *\n * 성숙도의 축 하나 —「몇 개까지 편한가」— 는 부품을 고칠 때마다 움직이고, 그것이\n * 보여야 저작자가 고칠 수 있다. 탭 뒤로 숨으면 저장하고 나서야 알게 된다. 그래서 그\n * 숫자만 **탭 이름표에 남긴다** — 성숙도를 덮어 두고 속성을 만져도 따라 움직이는\n * 것이 보인다.\n *\n * 판정은 화면에서 감춰도 **DOM 에는 남는다.** 떼었다 붙이면 다시 세느라 값이 잠깐\n * 비고, 펼쳐 둔 추이 그림 같은 상태도 날아간다.\n */\n@customElement('figure-side')\nexport class FigureSide extends localize(i18next)(LitElement) {\n  static styles = 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-left: 1px solid var(--md-sys-color-outline-variant);\n      color: var(--md-sys-color-on-surface);\n      font: var(--label-font, inherit);\n      /*\n        이 패널의 본문 크기를 여기서 한 번 정한다.\n\n        전에는 규칙마다 따로 적었다. 그러면 빠뜨린 규칙이 본문 기본 크기(1rem)를\n        물려받아 그 줄만 제목처럼 커진다. 오류가 아니라서 화면을 띄워 봐야 안다.\n        이 파일에서만 두 번 났다.\n\n        form 요소(input · select · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.\n        그것 말고는 여기 값을 따른다.\n      */\n      font-size: 0.76rem;\n    }\n\n    div[tabs] {\n      display: flex;\n      flex: none;\n      border-bottom: 1px solid var(--md-sys-color-outline-variant);\n    }\n    button[tab] {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n      padding: 8px 6px;\n      font: var(--label-font, inherit);\n      font-size: 0.76rem;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      background: none;\n      border: none;\n      /* 고른 탭을 밑줄로 말한다 — 칸을 색으로 채우면 아래 내용과 경계가 흐려진다 */\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n    }\n    button[tab]:hover:not([on]) {\n      background-color: var(--md-sys-color-surface-container);\n    }\n    button[tab][on] {\n      font-weight: 700;\n      color: var(--md-sys-color-primary);\n      border-bottom-color: var(--md-sys-color-primary);\n    }\n\n    /* 판정을 덮어 두어도 개수는 여기 남는다 */\n    span[badge] {\n      padding: 1px 7px;\n      font-size: 0.72rem;\n      font-weight: 700;\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-radius: 999em;\n    }\n\n    figure-inspector,\n    figure-report,\n    figure-settings {\n      flex: 1;\n      min-height: 0;\n      border-left: none;\n    }\n    /* 감추되 떼지는 않는다 */\n    [off] {\n      display: none;\n    }\n  `\n\n  /*\n    두 형태가 이 패널에서 갈린다.\n\n    속성은 **수정하는** 곳이라 편집 중인 씬 모델을 받는다. 판정은 **저장될 것을 측정하는**\n    곳이라 변환된 FigureSource 를 받는다. 변환은 모델러 페이지가 한 번만 해서 내려보낸다.\n  */\n  @property({ type: Object }) board?: BoardModel\n  @property({ type: Array }) parts: PartModel[] = []\n  @property({ type: Object }) source?: FigureSource\n  @property({ type: Number }) selected = -1\n  /** 저작 화면의 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다. */\n  @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW\n\n  @state() private tab: Tab = 'properties'\n  /** 판정이 알려 준 개수. 탭 이름표에 붙는다. */\n  @state() private instances?: number\n\n  render() {\n    return html`\n      <div tabs>\n        ${this.renderTab('properties', i18next.t('label.properties'))}\n        ${this.renderTab('verdict', i18next.t('label.maturity'), this.instances)}\n        ${this.renderTab('view', i18next.t('label.view'))}\n      </div>\n\n      <figure-inspector\n        ?off=${this.tab !== 'properties'}\n        .board=${this.board}\n        .parts=${this.parts}\n        .selected=${this.selected}\n      ></figure-inspector>\n\n      <figure-report\n        ?off=${this.tab !== 'verdict'}\n        .source=${this.source}\n        @verdict-changed=${(e: CustomEvent) => (this.instances = e.detail.instances)}\n      ></figure-report>\n\n      <figure-settings ?off=${this.tab !== 'view'} .view=${this.view}></figure-settings>\n    `\n  }\n\n  private renderTab(tab: Tab, label: string, badge?: number) {\n    return html`\n      <button tab ?on=${this.tab === tab} @click=${() => (this.tab = tab)}>\n        ${label}${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}\n      </button>\n    `\n  }\n}\n"]}

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

@@ -0,0 +1,196 @@
+import type { DetailLevel, FigurePart, FigureSource, Vec3 } from '@hatiolab/figure-model';
+/**
+ * Scene model <-> `FigureSource`.
+ *
+ * ## Why this is the only place that converts
+ *
+ * While authoring, the source of truth is the **scene model** -- part
+ * components sitting on a board. `FigureSource` is produced from it when the
+ * asset is saved or scored.
+ *
+ * The two use different vocabularies. The scene inherited 2D canvas terms
+ * (`width`/`height` in plan, `depth` for height, `left`/`top`/`zPos` for
+ * position); the format uses the axes 3D tools use (`x` right, `y` up, `z`
+ * front, position at the part's **centre**).
+ *
+ * **Convert in one place.** Two places drift, and this format has already had
+ * one incident caused by axes disagreeing.
+ *
+ * ## It was called `fold`, and that was wrong
+ *
+ * `fold` is an established term -- it reduces a structure to a summary, and
+ * this repo already uses it correctly (`foldKpi`, `foldProbeResults`). Nothing
+ * is reduced here: the same information comes out in a different shape, and it
+ * goes back unchanged. A reader who learned `fold` from `foldKpi` reads this
+ * one as reducing something, and the user did exactly that.
+ *
+ * ## The mapping
+ *
+ * The board is the base box; its centre is the format's origin.
+ *
+ *     format            scene
+ *     ────────────────  ──────────────────────────────
+ *     base.x            board width
+ *     base.y            board depth      <- height
+ *     base.z            board height
+ *
+ *     size.x            width
+ *     size.y            depth
+ *     size.z            height
+ *
+ *     position.x        left + width/2  - board width/2
+ *     position.y        zPos + depth/2  - board depth/2      <- zPos is the underside
+ *     position.z        top  + height/2 - board height/2
+ *
+ *     rotation.x        rotationX       (scene radians, format degrees)
+ *     rotation.y        -rotation
+ *     rotation.z        rotationY
+ *
+ * The rotation names are crossed because of the scene: `rotationY` becomes
+ * three's z (`real-object.ts`, `get rotation()`). That stays inside this table.
+ *
+ * ## Fields nothing reads yet still travel
+ *
+ * `materialSlot`, `keepRound`, `sizing`, `anchor`, `repeat` and `label` exist in the format
+ * and the editor ignores them. They still have to survive a round trip. When a
+ * source proposed by AI is opened, edited and written back, a field that
+ * disappears **without an error** is one the author cannot know about.
+ *
+ * **Five have gone that way here**: `ports`, `animations`, `anchor`,
+ * `shape.hollow` and `keepRound`. The last one the test caught first, which
+ * is the guard below actually earning its keep. The third showed up as a conveyor motor that stayed on the
+ * floor no matter what the sample said; the fourth as a hollowed tray that
+ * came out a solid block.
+ *
+ * All four passed the round-trip test, because the fixture it uses did not
+ * carry the field. So the test now reads the **field list the format declares**
+ * rather than trusting the fixture.
+ *
+ * `shape` is unpacked into `round`, `path` and `hollow` rather than carried
+ * whole, because the editor holds those as separate state. Every field added
+ * under `shape` costs a line here, and forgetting that line was the fourth
+ * of the four.
+ */
+/** 보드의 상태. 기준 상자이자 원본 데이터의 뼈대다. */
+export interface BoardModel {
+    /** 기준 상자. 씬의 용어 그대로다. */
+    width: number;
+    height: number;
+    depth: number;
+    /** 컴포넌트 타입 이름. **저장되는 식별자다.** */
+    figureType?: string;
+    detailLevel?: DetailLevel;
+    styleKit?: string;
+    /**
+     * 형상 전체의 기준점.
+     *
+     * **부품의 `anchor` 와 다른 것이다.** 이쪽은 점(`Vec3`)이고 저쪽은 축별로 어느 면을
+     * 붙잡느냐다. 한 형식 안에 같은 낱말이 둘인 것은 좋지 않으나, 이름을 바꾸면 저장된
+     * 원본이 따라와야 하므로 여기서 정하지 않는다.
+     */
+    anchor?: Vec3;
+    /**
+     * 움직임. **부품 바깥에 있다** — clip 하나가 부품 여럿을 함께 움직이기 때문이다.
+     *
+     * 편집면이 아직 이것을 만지지 않는다. 그래도 여기 실어 두는 것은, 안 실으면 열었다
+     * 저장하는 것만으로 **조용히 지워지기** 때문이다.
+     */
+    animations?: FigureSource['animations'];
+}
+/** 부품 컴포넌트의 상태. 씬의 용어 그대로다. */
+export interface PartModel {
+    type: 'figure-part';
+    /** 부품 이름. **저장되는 식별자다.** 씬은 이 값을 검색에도 쓴다. */
+    name: string;
+    primitive: FigurePart['primitive'];
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    /** 부피의 **밑면** 높이. 씬의 'floor' 배치에서 그렇게 정해져 있다. */
+    zPos: number;
+    depth: number;
+    /** 라디안. 씬이 그렇게 쓴다. */
+    rotationX?: number;
+    rotation?: number;
+    rotationY?: number;
+    segments?: number;
+    round?: number;
+    path?: {
+        x: number;
+        y: number;
+    }[];
+    /** 속을 판 단면. 편집면이 아직 안 만지지만 잃어버리면 통이 통짜 상자가 된다. */
+    hollow?: NonNullable<FigurePart['shape']>['hollow'];
+    /**
+     * 편집 중에만 쓰는 상태 — **저장 형식으로 넘어가지 않는다.**
+     *
+     * 씬이 이미 갖고 있는 속성이다. 편집 모드에서는 `faint`(반투명 + 색을 버리고 회색으로
+     * 수렴)로 보이고, 뷰 모드에서는 아예 안 그려진다. 판단은 씬의 `modeling-faint` 한 곳에
+     * 있고 2D 캔버스·3D 재질·DOM 세 채널이 같이 쓴다.
+     *
+     * 숨김은 "지금 이 뒤를 만지려고" 하는 것이지 그 부품의 성질이 아니다. 그래서
+     * `toFigureSource` 가 싣지 않고, 다시 열면 전부 보이는 상태로 돌아온다.
+     */
+    hidden?: boolean;
+    token?: string;
+    preset?: FigurePart['material']['preset'];
+    flatShading?: boolean;
+    transparent?: boolean;
+    /**
+     * 자체발광. 없으면 안 빛난다.
+     *
+     * 바깥의 `token` 이 **꺼진 모습**이고 이 안의 `token` 이 **켜진 모습**이다 — 꺼진
+     * 전구는 빨갛지 않고 어두운 플라스틱이다.
+     */
+    emissive?: FigurePart['material']['emissive'];
+    surface?: FigurePart['material']['surface'];
+    materialSlot?: FigurePart['materialSlot'];
+    /** 단면을 원으로 지킬까. 곡면만 뜻이 있고 기본은 지키는 것이다. */
+    keepRound?: FigurePart['keepRound'];
+    sizing?: FigurePart['sizing'];
+    /** 축마다 어느 면을 붙잡나. `sizing` 이 정한 것을 덮어쓴다. */
+    anchor?: FigurePart['anchor'];
+    repeat?: FigurePart['repeat'];
+    label?: FigurePart['label'];
+}
+/**
+ * 판의 절반. 형식의 원점이 판 중심이라 이 값이 늘 함께 다닌다.
+ *
+ * 축 이름은 **형식의 것**이다 — x 가로 · y 높이 · z 세로.
+ */
+export declare function halfOf(board: BoardModel): Vec3;
+/**
+ * 저작자가 보는 축이 씬의 어느 용어인가.
+ *
+ * 씬은 2D 캔버스에서 온 용어를 쓰므로 축 이름이 그대로 없다. 이 표가 **유일한** 대응이다 —
+ * 편집 규칙이 저마다 자기 표를 들면 한 곳을 고칠 때 다른 곳이 남는다.
+ */
+export declare const AXIS_KEYS: {
+    readonly x: {
+        readonly at: "left";
+        readonly size: "width";
+    };
+    readonly y: {
+        readonly at: "zPos";
+        readonly size: "depth";
+    };
+    readonly z: {
+        readonly at: "top";
+        readonly size: "height";
+    };
+};
+export type PlaneAxis = keyof typeof AXIS_KEYS;
+/** 판이 그 축으로 얼마나 넓은가. */
+export declare function boardExtent(board: BoardModel, axis: PlaneAxis): number;
+/** 부품 하나를 저장 형식으로 변환한다. 저작 화면이 저작자의 어휘로 보일 때 쓴다. */
+export declare function partToFigure(part: PartModel, board: BoardModel): FigurePart;
+/** 부품 하나를 씬 용어로 되돌린다. */
+export declare function partFromFigure(part: FigurePart, board: BoardModel): PartModel;
+/** 씬 모델을 저장 형식으로 변환한다. */
+export declare function toFigureSource(board: BoardModel, parts: PartModel[]): FigureSource;
+/** 형식을 씬 모델로 편다. */
+export declare function fromFigureSource(source: FigureSource): {
+    board: BoardModel;
+    parts: PartModel[];
+};

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

@@ -0,0 +1,153 @@
+const RAD_TO_DEG = 180 / Math.PI;
+const DEG_TO_RAD = Math.PI / 180;
+/** 값이 있는 것만 남긴다. 없는 필드를 `undefined` 로 두면 접었다 편 것이 원본과 달라진다. */
+function withoutEmpty(value) {
+    const out = {};
+    for (const [key, item] of Object.entries(value)) {
+        if (item !== undefined)
+            out[key] = item;
+    }
+    return out;
+}
+/** 소수점 넷째 자리까지. 라디안↔도를 오가며 생기는 꼬리를 자른다. */
+function round4(value) {
+    return Math.round(value * 1e4) / 1e4;
+}
+/**
+ * 판의 절반. 형식의 원점이 판 중심이라 이 값이 늘 함께 다닌다.
+ *
+ * 축 이름은 **형식의 것**이다 — x 가로 · y 높이 · z 세로.
+ */
+export function halfOf(board) {
+    return { x: board.width / 2, y: board.depth / 2, z: board.height / 2 };
+}
+/**
+ * 저작자가 보는 축이 씬의 어느 용어인가.
+ *
+ * 씬은 2D 캔버스에서 온 용어를 쓰므로 축 이름이 그대로 없다. 이 표가 **유일한** 대응이다 —
+ * 편집 규칙이 저마다 자기 표를 들면 한 곳을 고칠 때 다른 곳이 남는다.
+ */
+export const AXIS_KEYS = {
+    x: { at: 'left', size: 'width' },
+    y: { at: 'zPos', size: 'depth' },
+    z: { at: 'top', size: 'height' }
+};
+/** 판이 그 축으로 얼마나 넓은가. */
+export function boardExtent(board, axis) {
+    return axis === 'x' ? board.width : axis === 'y' ? board.depth : board.height;
+}
+/** 부품 하나를 저장 형식으로 변환한다. 저작 화면이 저작자의 어휘로 보일 때 쓴다. */
+export function partToFigure(part, board) {
+    return partTo(part, halfOf(board));
+}
+/** 부품 하나를 씬 용어로 되돌린다. */
+export function partFromFigure(part, board) {
+    return partFrom(part, halfOf(board));
+}
+/** 씬 모델을 저장 형식으로 변환한다. */
+export function toFigureSource(board, parts) {
+    const half = halfOf(board);
+    return withoutEmpty({
+        type: board.figureType ?? '',
+        base: { x: board.width, y: board.depth, z: board.height },
+        anchor: board.anchor,
+        detailLevel: board.detailLevel,
+        styleKit: board.styleKit,
+        parts: parts.map(part => partTo(part, half)),
+        animations: board.animations
+    });
+}
+function partTo(part, half) {
+    const rotation = withoutEmpty({
+        x: part.rotationX ? round4(part.rotationX * RAD_TO_DEG) : undefined,
+        y: part.rotation ? round4(-part.rotation * RAD_TO_DEG) : undefined,
+        z: part.rotationY ? round4(part.rotationY * RAD_TO_DEG) : undefined
+    });
+    const shape = withoutEmpty({ round: part.round, path: part.path, hollow: part.hollow });
+    const material = withoutEmpty({
+        token: part.token,
+        preset: part.preset,
+        flatShading: part.flatShading,
+        transparent: part.transparent,
+        emissive: part.emissive,
+        surface: part.surface
+    });
+    return withoutEmpty({
+        name: part.name,
+        primitive: part.primitive,
+        transform: withoutEmpty({
+            position: {
+                x: round4(part.left + part.width / 2 - half.x),
+                y: round4(part.zPos + part.depth / 2 - half.y),
+                z: round4(part.top + part.height / 2 - half.z)
+            },
+            size: { x: part.width, y: part.depth, z: part.height },
+            rotation: Object.keys(rotation).length > 0 ? rotation : undefined
+        }),
+        segments: part.segments,
+        shape: Object.keys(shape).length > 0 ? shape : undefined,
+        material,
+        materialSlot: part.materialSlot,
+        keepRound: part.keepRound,
+        sizing: part.sizing,
+        anchor: part.anchor,
+        repeat: part.repeat,
+        label: part.label
+    });
+}
+/** 형식을 씬 모델로 편다. */
+export function fromFigureSource(source) {
+    const half = { x: source.base.x / 2, y: source.base.y / 2, z: source.base.z / 2 };
+    const board = withoutEmpty({
+        width: source.base.x,
+        height: source.base.z,
+        depth: source.base.y,
+        figureType: source.type,
+        detailLevel: source.detailLevel,
+        styleKit: source.styleKit,
+        anchor: source.anchor,
+        animations: source.animations
+    });
+    return { board, parts: source.parts.map(part => partFrom(part, half)) };
+}
+function partFrom(part, half) {
+    const { position, size, rotation } = part.transform;
+    const material = part.material ?? {};
+    return withoutEmpty({
+        type: 'figure-part',
+        name: part.name,
+        primitive: part.primitive,
+        left: round4(half.x + position.x - size.x / 2),
+        top: round4(half.z + position.z - size.z / 2),
+        width: size.x,
+        height: size.z,
+        zPos: round4(half.y + position.y - size.y / 2),
+        depth: size.y,
+        /*
+          라디안은 자르지 않는다.
+    
+          소수 넷째에서 잘랐더니 도로 되돌릴 때 57 배로 커져 45 도가 45.0001 이 됐다.
+          자르는 것은 **사람이 읽는 쪽**(도)에서만 한다.
+        */
+        rotationX: rotation?.x ? rotation.x * DEG_TO_RAD : undefined,
+        rotation: rotation?.y ? -rotation.y * DEG_TO_RAD : undefined,
+        rotationY: rotation?.z ? rotation.z * DEG_TO_RAD : undefined,
+        segments: part.segments,
+        round: part.shape?.round,
+        path: part.shape?.path,
+        hollow: part.shape?.hollow,
+        token: material.token,
+        preset: material.preset,
+        flatShading: material.flatShading,
+        transparent: material.transparent,
+        emissive: material.emissive,
+        surface: material.surface,
+        materialSlot: part.materialSlot,
+        keepRound: part.keepRound,
+        sizing: part.sizing,
+        anchor: part.anchor,
+        repeat: part.repeat,
+        label: part.label
+    });
+}
+//# sourceMappingURL=figure-source.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-source.js","sourceRoot":"","sources":["../../client/modeller/figure-source.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DetailLevel, FigurePart, FigureSource, Vec3 } from '@hatiolab/figure-model'\n\n/**\n * Scene model <-> `FigureSource`.\n *\n * ## Why this is the only place that converts\n *\n * While authoring, the source of truth is the **scene model** -- part\n * components sitting on a board. `FigureSource` is produced from it when the\n * asset is saved or scored.\n *\n * The two use different vocabularies. The scene inherited 2D canvas terms\n * (`width`/`height` in plan, `depth` for height, `left`/`top`/`zPos` for\n * position); the format uses the axes 3D tools use (`x` right, `y` up, `z`\n * front, position at the part's **centre**).\n *\n * **Convert in one place.** Two places drift, and this format has already had\n * one incident caused by axes disagreeing.\n *\n * ## It was called `fold`, and that was wrong\n *\n * `fold` is an established term -- it reduces a structure to a summary, and\n * this repo already uses it correctly (`foldKpi`, `foldProbeResults`). Nothing\n * is reduced here: the same information comes out in a different shape, and it\n * goes back unchanged. A reader who learned `fold` from `foldKpi` reads this\n * one as reducing something, and the user did exactly that.\n *\n * ## The mapping\n *\n * The board is the base box; its centre is the format's origin.\n *\n *     format            scene\n *     ────────────────  ──────────────────────────────\n *     base.x            board width\n *     base.y            board depth      <- height\n *     base.z            board height\n *\n *     size.x            width\n *     size.y            depth\n *     size.z            height\n *\n *     position.x        left + width/2  - board width/2\n *     position.y        zPos + depth/2  - board depth/2      <- zPos is the underside\n *     position.z        top  + height/2 - board height/2\n *\n *     rotation.x        rotationX       (scene radians, format degrees)\n *     rotation.y        -rotation\n *     rotation.z        rotationY\n *\n * The rotation names are crossed because of the scene: `rotationY` becomes\n * three's z (`real-object.ts`, `get rotation()`). That stays inside this table.\n *\n * ## Fields nothing reads yet still travel\n *\n * `materialSlot`, `keepRound`, `sizing`, `anchor`, `repeat` and `label` exist in the format\n * and the editor ignores them. They still have to survive a round trip. When a\n * source proposed by AI is opened, edited and written back, a field that\n * disappears **without an error** is one the author cannot know about.\n *\n * **Five have gone that way here**: `ports`, `animations`, `anchor`,\n * `shape.hollow` and `keepRound`. The last one the test caught first, which\n * is the guard below actually earning its keep. The third showed up as a conveyor motor that stayed on the\n * floor no matter what the sample said; the fourth as a hollowed tray that\n * came out a solid block.\n *\n * All four passed the round-trip test, because the fixture it uses did not\n * carry the field. So the test now reads the **field list the format declares**\n * rather than trusting the fixture.\n *\n * `shape` is unpacked into `round`, `path` and `hollow` rather than carried\n * whole, because the editor holds those as separate state. Every field added\n * under `shape` costs a line here, and forgetting that line was the fourth\n * of the four.\n */\n/** 보드의 상태. 기준 상자이자 원본 데이터의 뼈대다. */\nexport interface BoardModel {\n  /** 기준 상자. 씬의 용어 그대로다. */\n  width: number\n  height: number\n  depth: number\n  /** 컴포넌트 타입 이름. **저장되는 식별자다.** */\n  figureType?: string\n  detailLevel?: DetailLevel\n  styleKit?: string\n  /**\n   * 형상 전체의 기준점.\n   *\n   * **부품의 `anchor` 와 다른 것이다.** 이쪽은 점(`Vec3`)이고 저쪽은 축별로 어느 면을\n   * 붙잡느냐다. 한 형식 안에 같은 낱말이 둘인 것은 좋지 않으나, 이름을 바꾸면 저장된\n   * 원본이 따라와야 하므로 여기서 정하지 않는다.\n   */\n  anchor?: Vec3\n  /**\n   * 움직임. **부품 바깥에 있다** — clip 하나가 부품 여럿을 함께 움직이기 때문이다.\n   *\n   * 편집면이 아직 이것을 만지지 않는다. 그래도 여기 실어 두는 것은, 안 실으면 열었다\n   * 저장하는 것만으로 **조용히 지워지기** 때문이다.\n   */\n  animations?: FigureSource['animations']\n}\n\n/** 부품 컴포넌트의 상태. 씬의 용어 그대로다. */\nexport interface PartModel {\n  type: 'figure-part'\n  /** 부품 이름. **저장되는 식별자다.** 씬은 이 값을 검색에도 쓴다. */\n  name: string\n  primitive: FigurePart['primitive']\n\n  left: number\n  top: number\n  width: number\n  height: number\n  /** 부피의 **밑면** 높이. 씬의 'floor' 배치에서 그렇게 정해져 있다. */\n  zPos: number\n  depth: number\n\n  /** 라디안. 씬이 그렇게 쓴다. */\n  rotationX?: number\n  rotation?: number\n  rotationY?: number\n\n  segments?: number\n  round?: number\n  path?: { x: number; y: number }[]\n  /** 속을 판 단면. 편집면이 아직 안 만지지만 잃어버리면 통이 통짜 상자가 된다. */\n  hollow?: NonNullable<FigurePart['shape']>['hollow']\n\n  /**\n   * 편집 중에만 쓰는 상태 — **저장 형식으로 넘어가지 않는다.**\n   *\n   * 씬이 이미 갖고 있는 속성이다. 편집 모드에서는 `faint`(반투명 + 색을 버리고 회색으로\n   * 수렴)로 보이고, 뷰 모드에서는 아예 안 그려진다. 판단은 씬의 `modeling-faint` 한 곳에\n   * 있고 2D 캔버스·3D 재질·DOM 세 채널이 같이 쓴다.\n   *\n   * 숨김은 \"지금 이 뒤를 만지려고\" 하는 것이지 그 부품의 성질이 아니다. 그래서\n   * `toFigureSource` 가 싣지 않고, 다시 열면 전부 보이는 상태로 돌아온다.\n   */\n  hidden?: boolean\n\n  token?: string\n  preset?: FigurePart['material']['preset']\n  flatShading?: boolean\n  transparent?: boolean\n  /**\n   * 자체발광. 없으면 안 빛난다.\n   *\n   * 바깥의 `token` 이 **꺼진 모습**이고 이 안의 `token` 이 **켜진 모습**이다 — 꺼진\n   * 전구는 빨갛지 않고 어두운 플라스틱이다.\n   */\n  emissive?: FigurePart['material']['emissive']\n  surface?: FigurePart['material']['surface']\n\n  /* 아직 아무 일도 안 하지만 잃어버리지 않는다. */\n  materialSlot?: FigurePart['materialSlot']\n  /** 단면을 원으로 지킬까. 곡면만 뜻이 있고 기본은 지키는 것이다. */\n  keepRound?: FigurePart['keepRound']\n  sizing?: FigurePart['sizing']\n  /** 축마다 어느 면을 붙잡나. `sizing` 이 정한 것을 덮어쓴다. */\n  anchor?: FigurePart['anchor']\n  repeat?: FigurePart['repeat']\n  label?: FigurePart['label']\n}\n\nconst RAD_TO_DEG = 180 / Math.PI\nconst DEG_TO_RAD = Math.PI / 180\n\n/** 값이 있는 것만 남긴다. 없는 필드를 `undefined` 로 두면 접었다 편 것이 원본과 달라진다. */\nfunction withoutEmpty<T extends object>(value: T): T {\n  const out = {} as Record<string, unknown>\n  for (const [key, item] of Object.entries(value)) {\n    if (item !== undefined) out[key] = item\n  }\n  return out as T\n}\n\n/** 소수점 넷째 자리까지. 라디안↔도를 오가며 생기는 꼬리를 자른다. */\nfunction round4(value: number): number {\n  return Math.round(value * 1e4) / 1e4\n}\n\n/**\n * 판의 절반. 형식의 원점이 판 중심이라 이 값이 늘 함께 다닌다.\n *\n * 축 이름은 **형식의 것**이다 — x 가로 · y 높이 · z 세로.\n */\nexport function halfOf(board: BoardModel): Vec3 {\n  return { x: board.width / 2, y: board.depth / 2, z: board.height / 2 }\n}\n\n/**\n * 저작자가 보는 축이 씬의 어느 용어인가.\n *\n * 씬은 2D 캔버스에서 온 용어를 쓰므로 축 이름이 그대로 없다. 이 표가 **유일한** 대응이다 —\n * 편집 규칙이 저마다 자기 표를 들면 한 곳을 고칠 때 다른 곳이 남는다.\n */\nexport const AXIS_KEYS = {\n  x: { at: 'left', size: 'width' },\n  y: { at: 'zPos', size: 'depth' },\n  z: { at: 'top', size: 'height' }\n} as const\n\nexport type PlaneAxis = keyof typeof AXIS_KEYS\n\n/** 판이 그 축으로 얼마나 넓은가. */\nexport function boardExtent(board: BoardModel, axis: PlaneAxis): number {\n  return axis === 'x' ? board.width : axis === 'y' ? board.depth : board.height\n}\n\n/** 부품 하나를 저장 형식으로 변환한다. 저작 화면이 저작자의 어휘로 보일 때 쓴다. */\nexport function partToFigure(part: PartModel, board: BoardModel): FigurePart {\n  return partTo(part, halfOf(board))\n}\n\n/** 부품 하나를 씬 용어로 되돌린다. */\nexport function partFromFigure(part: FigurePart, board: BoardModel): PartModel {\n  return partFrom(part, halfOf(board))\n}\n\n/** 씬 모델을 저장 형식으로 변환한다. */\nexport function toFigureSource(board: BoardModel, parts: PartModel[]): FigureSource {\n  const half = halfOf(board)\n\n  return withoutEmpty({\n    type: board.figureType ?? '',\n    base: { x: board.width, y: board.depth, z: board.height },\n    anchor: board.anchor,\n    detailLevel: board.detailLevel,\n    styleKit: board.styleKit,\n    parts: parts.map(part => partTo(part, half)),\n    animations: board.animations\n  }) as FigureSource\n}\n\nfunction partTo(part: PartModel, half: Vec3): FigurePart {\n  const rotation = withoutEmpty({\n    x: part.rotationX ? round4(part.rotationX * RAD_TO_DEG) : undefined,\n    y: part.rotation ? round4(-part.rotation * RAD_TO_DEG) : undefined,\n    z: part.rotationY ? round4(part.rotationY * RAD_TO_DEG) : undefined\n  })\n\n  const shape = withoutEmpty({ round: part.round, path: part.path, hollow: part.hollow })\n  const material = withoutEmpty({\n    token: part.token,\n    preset: part.preset,\n    flatShading: part.flatShading,\n    transparent: part.transparent,\n    emissive: part.emissive,\n    surface: part.surface\n  })\n\n  return withoutEmpty({\n    name: part.name,\n    primitive: part.primitive,\n    transform: withoutEmpty({\n      position: {\n        x: round4(part.left + part.width / 2 - half.x),\n        y: round4(part.zPos + part.depth / 2 - half.y),\n        z: round4(part.top + part.height / 2 - half.z)\n      },\n      size: { x: part.width, y: part.depth, z: part.height },\n      rotation: Object.keys(rotation).length > 0 ? rotation : undefined\n    }),\n    segments: part.segments,\n    shape: Object.keys(shape).length > 0 ? shape : undefined,\n    material,\n    materialSlot: part.materialSlot,\n    keepRound: part.keepRound,\n    sizing: part.sizing,\n    anchor: part.anchor,\n    repeat: part.repeat,\n    label: part.label\n  }) as FigurePart\n}\n\n/** 형식을 씬 모델로 편다. */\nexport function fromFigureSource(source: FigureSource): { board: BoardModel; parts: PartModel[] } {\n  const half: Vec3 = { x: source.base.x / 2, y: source.base.y / 2, z: source.base.z / 2 }\n\n  const board = withoutEmpty({\n    width: source.base.x,\n    height: source.base.z,\n    depth: source.base.y,\n    figureType: source.type,\n    detailLevel: source.detailLevel,\n    styleKit: source.styleKit,\n    anchor: source.anchor,\n    animations: source.animations\n  }) as BoardModel\n\n  return { board, parts: source.parts.map(part => partFrom(part, half)) }\n}\n\nfunction partFrom(part: FigurePart, half: Vec3): PartModel {\n  const { position, size, rotation } = part.transform\n  const material = part.material ?? {}\n\n  return withoutEmpty({\n    type: 'figure-part',\n    name: part.name,\n    primitive: part.primitive,\n\n    left: round4(half.x + position.x - size.x / 2),\n    top: round4(half.z + position.z - size.z / 2),\n    width: size.x,\n    height: size.z,\n    zPos: round4(half.y + position.y - size.y / 2),\n    depth: size.y,\n\n    /*\n      라디안은 자르지 않는다.\n\n      소수 넷째에서 잘랐더니 도로 되돌릴 때 57 배로 커져 45 도가 45.0001 이 됐다.\n      자르는 것은 **사람이 읽는 쪽**(도)에서만 한다.\n    */\n    rotationX: rotation?.x ? rotation.x * DEG_TO_RAD : undefined,\n    rotation: rotation?.y ? -rotation.y * DEG_TO_RAD : undefined,\n    rotationY: rotation?.z ? rotation.z * DEG_TO_RAD : undefined,\n\n    segments: part.segments,\n    round: part.shape?.round,\n    path: part.shape?.path,\n    hollow: part.shape?.hollow,\n\n    token: material.token,\n    preset: material.preset,\n    flatShading: material.flatShading,\n    transparent: material.transparent,\n    emissive: material.emissive,\n    surface: material.surface,\n\n    materialSlot: part.materialSlot,\n    keepRound: part.keepRound,\n    sizing: part.sizing,\n    anchor: part.anchor,\n    repeat: part.repeat,\n    label: part.label\n  }) as PartModel\n}\n"]}

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

@@ -0,0 +1,57 @@
+/**
+ * 저작 화면의 **보기 설정**.
+ *
+ * ## 저장되지 않는다
+ *
+ * 이것은 자산이 아니라 **작업대**다. 조명을 밝게 하고 바닥을 켠 것은 그 사람이 지금
+ * 보기 편한 상태일 뿐, 그 자산의 성질이 아니다. 그래서 `FigureSource` 에 안 들어간다 —
+ * `toFigureSource` 는 판에서 `width` · `height` · `depth` 와 몇 가지만 집어 가고 나머지는
+ * 버린다.
+ *
+ * 다른 사람이 같은 자산을 열면 자기 설정으로 본다. 그것이 맞다.
+ *
+ * ## 씬이 아는 이름을 그대로 쓴다
+ *
+ * 여기 이름은 전부 `model-layer` 의 상태 이름이다. 옮겨 적는 표를 두지 않는다 — 표를
+ * 두면 씬이 새 설정을 받아도 이쪽이 모른다.
+ *
+ * 값이 바뀌면 씬이 스스로 반영한다(`three-capability` 의 `onchange`). 다만 `grid` 는
+ * 한동안 3D 를 세울 때만 읽혔다 — things-scene 10.1.5 에서 고쳤다.
+ */
+export interface ViewSettings {
+    /** 좌표 바탕(축 가이드). 원점과 눈금을 보인다. */
+    grid: boolean;
+    /** 축 이름표(X · Y · Z). 눈금만 두고 글자를 끌 수 있다. */
+    gridLabels: boolean;
+    /** 판의 바닥면. 좌표 바탕과 겹치므로 기본은 끈다. */
+    floor: boolean;
+    /** Environment — 반사(IBL). 금속 재질이 무엇을 비출지 정한다. */
+    environment: EnvironmentName;
+    /** Sky Color — 배경색. */
+    skyColor: string;
+    /** Key Light Intensity. */
+    dirLightIntensity: number;
+    /** Key Light — Follow Camera. 끄면 그림자 방향이 고정된다. */
+    dirLightFollowCamera: boolean;
+    /** Key Light — Cast Shadow. */
+    dirShadowEnabled: boolean;
+    /** Hemisphere Light Intensity — 그늘진 면을 들어올린다. */
+    hemiIntensity: number;
+}
+/**
+ * 환경 프리셋 — **`scene-manager` 의 `SkyPreset` 과 같은 여덟이다.**
+ *
+ * 한동안 다섯만 적었다. 씬은 여덟을 다 받는데 이쪽이 셋을 몰라서 고를 수 없었다.
+ * operato-board 의 3D 씬 속성 패널도 같은 여덟을 보인다.
+ */
+export declare const ENVIRONMENTS: readonly ["studio", "warehouse", "factory", "office", "home", "sunny", "cloudy", "rainy"];
+export type EnvironmentName = (typeof ENVIRONMENTS)[number];
+/** 배경색 기본값. 회색이라 부품 색이 제 색으로 보인다. */
+export declare const WORKBENCH = "#7c7c7c";
+/**
+ * 처음 값.
+ *
+ * **지금 저작 화면이 실제로 쓰던 값 그대로다.** 설정을 만들면서 화면이 달라지면
+ * 무엇이 설정 때문이고 무엇이 원래 그랬는지 갈리지 않는다.
+ */
+export declare const DEFAULT_VIEW: ViewSettings;