@things-factory/figure-ui 10.1.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-report.js","sourceRoot":"","sources":["../../client/modeller/figure-report.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing, svg } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { compile, costCurveSvg, costOf, scoreOf, validate } from '@hatiolab/figure-model'\nimport type { FigureCost, FigureScore, FigureSource } from '@hatiolab/figure-model'\n\nimport { capacityOf } from './scene-budget.js'\nimport { maturityOf } from './maturity.js'\nimport type { MaturityAxis } from './maturity.js'\nimport type { FigureCapacity } from './scene-budget.js'\n\n/**\n * 판단 패널. 모델러 화면에 **늘 떠 있다.**\n *\n * 저장을 선택해야 아는 것이 아니다. 부품을 하나 놓을 때마다 무게와 점수가 움직이고,\n * 그것이 보여야 저작자가 고칠 수 있다. 「무엇 때문에 점수가 낮은가」를 말해 주지\n * 않으면 점수는 잔소리일 뿐이다.\n *\n * ## 셈을 여기서 하지 않는다\n *\n * 검증·원가·점수는 전부 `@hatiolab/figure-model` 이 한다. 화면은 **부르고 보여 줄\n * 뿐**이다. 한도나 등급 경계를 화면이 다시 정하면 서버가 거절할 것을 화면이\n * 통과시키게 된다.\n */\n@customElement('figure-report')\nexport class FigureReport extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow-y: auto;\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      section {\n        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      }\n      section > h3 {\n        margin: 0 0 6px 0;\n        font-size: var(--ui-t-micro, 11px);\n        font-weight: 700;\n        letter-spacing: 0.04em;\n        text-transform: uppercase;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n\n      /* ── 몇 개까지 편한가 ───────────────────────────────────────────\n         로우폴리의 값은 「얼마나 많이 편하게 놓을 수 있나」다. 그 답이 머리에 온다.\n         등급은 형상 자체가 한도 안인지를 말할 뿐이라 옆의 작은 badge 로 둔다. */\n      div[verdict] {\n        display: flex;\n        align-items: baseline;\n        gap: 6px;\n      }\n      span[capacity] {\n        font-size: 2.1rem;\n        font-weight: 800;\n        line-height: 1;\n        letter-spacing: -0.01em;\n        color: var(--md-sys-color-primary);\n      }\n      span[unit] {\n        font-size: 0.9rem;\n        font-weight: 600;\n        color: var(--md-sys-color-primary);\n      }\n      /*\n        등급 badge.\n\n        전에는 \"C 0\" 만 있었다. 글자 하나와 숫자 하나인데 어디에도 뜻이 없어서, 크게 뜬\n        개수 옆에 빨간 badge 가 붙은 것으로만 읽혔다. 0 을 100점 만점의 0 점으로 읽는 것이\n        자연스럽다. 실제 뜻은 \"선언한 한도에 남은 여유가 0\" 이다.\n\n        그래서 무엇을 측정하는지를 badge 안에 적고, 눈금은 바로 아래 줄에 늘 보이게 둔다.\n      */\n      span[grade] {\n        display: flex;\n        align-items: baseline;\n        gap: 5px;\n        margin-left: auto;\n        padding: 3px 10px;\n        font-size: 0.76rem;\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      span[grade] small {\n        font-size: 0.68rem;\n        font-weight: 500;\n      }\n      /*\n        C 는 한도를 지킨 것이다. 빨강은 넘긴 것(D)에만 쓴다. 지킨 것에 빨강을 쓰면\n        고칠 것이 없는데도 고쳐야 할 것처럼 보인다.\n      */\n      span[grade][tight] {\n        color: var(--md-sys-color-on-tertiary-container, #3d2f00);\n        background-color: var(--md-sys-color-tertiary-container, #ffdf9a);\n      }\n      /*\n        Pair the container with its on-container.\n\n        This used to fill with --md-sys-color-error and write with\n        --md-sys-color-on-error-container. Once the palette made containers\n        neutral and moved the meaning into the text colour, those two became the\n        same red and the badge went blank -- a filled pill with no readable text.\n      */\n      span[grade][over] {\n        color: var(--md-sys-color-on-error-container);\n        background-color: var(--md-sys-color-error-container);\n      }\n\n      /* 등급 눈금. 접어 두지 않는다 — 한 번 보고 마는 값이 아니라 볼 때마다 필요하다 */\n      p[scale] {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 2px 10px;\n        margin: 6px 0 0 0;\n        font-size: 0.7rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      p[scale] b {\n        font-weight: 700;\n      }\n      p[scale] span[now] b {\n        color: var(--md-sys-color-primary);\n      }\n      p[scale] span[now] {\n        color: var(--md-sys-color-on-surface);\n      }\n      /* 이 큰 숫자가 어느 축인지 먼저 말한다 — 성숙도의 한 축이지 전부가 아니다 */\n      p[lead] {\n        margin: 0 0 4px 0;\n        font-size: 0.74rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n\n      /* 근거를 함께 낸다 — 숫자만 크게 내걸면 재 본 값처럼 읽힌다 */\n      p[basis] {\n        margin: 6px 0 0 0;\n        font-size: 0.72rem;\n        line-height: 1.55;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      p[basis] em {\n        font-style: normal;\n        color: var(--md-sys-color-tertiary);\n      }\n      span[score] {\n        font-size: 0.8rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n\n      /* 무엇 때문에 이 등급인가 — 한도에 가장 가까운 항목 */\n      p[because] {\n        margin: 8px 0 0 0;\n        /* 본문 크기를 물려받으면 이 줄만 제목처럼 커진다 — 화면을 띄워 보고 알았다 */\n        font-size: 0.78rem;\n        line-height: 1.6;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      p[because] strong {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* ── 성숙도 radar ────────────────────────────────────────────────\n         여섯 축을 한 그림으로. 목록만 두면 「어느 쪽이 모자란가」가 안 보인다.\n         못 잰 축은 점을 찍지 않고 살만 흐리게 남긴다 — 0 으로 찍으면 「나쁘다」가 된다. */\n      div[radar] {\n        display: flex;\n        justify-content: center;\n        padding: 2px 0 6px 0;\n        color: var(--md-sys-color-primary);\n      }\n      div[radar] svg {\n        width: 100%;\n        max-width: 240px;\n        height: auto;\n      }\n      div[radar] polygon[web] {\n        fill: none;\n        stroke: var(--md-sys-color-outline-variant);\n        stroke-width: 0.6;\n      }\n      div[radar] line[spoke] {\n        stroke: var(--md-sys-color-outline-variant);\n        stroke-width: 0.6;\n      }\n      div[radar] polygon[shape] {\n        fill: color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);\n        stroke: var(--md-sys-color-primary);\n        stroke-width: 1.4;\n        stroke-linejoin: round;\n      }\n      div[radar] circle[dot] {\n        fill: var(--md-sys-color-primary);\n      }\n      div[radar] text {\n        font-size: 5.2px;\n        fill: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n\n      /* 그림에 자리를 주지 않은 축을 글로 밝힌다 */\n      p[unmeasured] {\n        margin: 0 0 8px 0;\n        font-size: 0.7rem;\n        line-height: 1.5;\n        color: var(--md-sys-color-tertiary);\n      }\n\n      /* ── 성숙도 축 ──────────────────────────────────────────────────\n         한 숫자로 합치지 않는다. 합치면 「무엇을 고쳐야 하나」가 사라진다. */\n      ul[axes] {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: 7px;\n      }\n      ul[axes] li {\n        display: grid;\n        grid-template-columns: 1fr auto;\n        gap: 2px 8px;\n        font-size: 0.75rem;\n      }\n      ul[axes] li[blocked] {\n        opacity: 0.7;\n      }\n      ul[axes] em {\n        grid-column: 1 / -1;\n        font-style: normal;\n        font-size: 0.68rem;\n        line-height: 1.5;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      /* 못 잰 축은 0 으로 두지 않는다 — 0 은 「나쁘다」는 뜻이 되어 버린다 */\n      ul[axes] li[blocked] em {\n        color: var(--md-sys-color-tertiary);\n      }\n      span[reading] {\n        font-family: var(--mono-font, monospace);\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n\n      /* ── 예산 막대 ────────────────────────────────────────────────── */\n      ul[budgets] {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n      ul[budgets] li {\n        display: grid;\n        grid-template-columns: 1fr auto;\n        gap: 2px 8px;\n        font-size: 0.75rem;\n      }\n      div[bar] {\n        grid-column: 1 / -1;\n        height: 4px;\n        background-color: var(--md-sys-color-surface-container-highest);\n        border-radius: 2px;\n        overflow: hidden;\n      }\n      div[bar] > i {\n        display: block;\n        height: 100%;\n        background-color: var(--md-sys-color-primary);\n      }\n      div[bar] > i[tight] {\n        background-color: var(--md-sys-color-error);\n      }\n\n      /* ── 무게 ─────────────────────────────────────────────────────── */\n      dl[metrics] {\n        margin: 0;\n        display: grid;\n        grid-template-columns: 1fr auto;\n        gap: 4px 8px;\n        font-size: 0.78rem;\n      }\n      dl[metrics] dt {\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      dl[metrics] dd {\n        margin: 0;\n        text-align: right;\n        font-family: var(--mono-font, monospace);\n      }\n\n      /* ── 추이 ──────────────────────────────────────────────────────────\n         그림은 자연 크기가 680px 다. 300px 칸에 넣으면 글자가 4px 이 되어 아무것도\n         읽을 수 없다 — 사이드바에는 숫자를 두고, 그림은 선택해서 크게 본다. */\n      button[expand] {\n        margin-top: 6px;\n        padding: 4px 10px;\n        font: var(--label-font, inherit);\n        font-size: 0.74rem;\n        color: var(--md-sys-color-on-surface);\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      button[expand]:hover {\n        background-color: var(--md-sys-color-surface-container);\n      }\n\n      div[sheet] {\n        position: fixed;\n        inset: 0;\n        z-index: 10;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: var(--spacing-large, 12px);\n        background-color: rgba(0, 0, 0, 0.32);\n      }\n      div[sheet] > figure {\n        max-width: 100%;\n        max-height: 100%;\n        margin: 0;\n        padding: var(--spacing-large, 12px);\n        overflow: auto;\n        color: var(--md-sys-color-primary);\n        background-color: var(--md-sys-color-surface-container-lowest);\n        /* 담는 면이 팝업이면 안쪽 모서리는 알약이다 — 시트 자체는 페이지 값을 쓴다 */\n        border-radius: 6px;\n        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);\n      }\n      div[sheet] svg {\n        display: block;\n        /* 자연 크기보다 작게 줄이지 않는다 — 좁으면 넘겨 보게 둔다 */\n        min-width: 680px;\n      }\n      div[sheet] figcaption {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n      }\n      div[sheet] button[close] {\n        padding: 5px 14px;\n        font: var(--label-font, inherit);\n        color: var(--md-sys-color-on-surface);\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 999em;\n        cursor: pointer;\n      }\n\n      /* ── 알림 ─────────────────────────────────────────────────────── */\n      ul[findings] {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n      ul[findings] li {\n        display: flex;\n        gap: 6px;\n        line-height: 1.5;\n      }\n      ul[findings] md-icon {\n        --md-icon-size: 16px;\n        flex: none;\n        color: var(--md-sys-color-error);\n      }\n      ul[findings] li[violation] md-icon {\n        color: var(--md-sys-color-tertiary);\n      }\n      /* 어긴 자리. 문구에 붙어 흐르면 문장의 일부로 읽힌다 — badge 로 보이게 뗀다 */\n      code[at] {\n        padding: 1px 5px;\n        font-family: var(--mono-font, monospace);\n        font-size: 0.68rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        background-color: var(--md-sys-color-surface-container);\n        border-radius: 4px;\n        white-space: nowrap;\n      }\n\n      /*\n        발견이 없을 때의 문구.\n\n        크기를 안 적어 두었더니 본문 기본 크기를 물려받아 이 줄만 제목처럼 커졌다. 이\n        패널의 글자는 전부 0.7rem 대인데 여기만 1rem 이라 아래쪽이 무너져 보였다.\n\n        찾은 것이 있을 때의 목록(ul[findings] li)과 같은 크기로 맞춘다. 있을 때와 없을 때\n        절의 생김새가 달라질 이유가 없다.\n\n        이 파일에서 같은 실수를 두 번째로 한다. p[because] 에도 같은 주석이 있다.\n      */\n      p[quiet] {\n        margin: 0;\n        font-size: 0.76rem;\n        line-height: 1.6;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n  `\n  ]\n\n  /** 저작 중인 원본 데이터. 바뀌면 다시 측정한다. */\n  @property({ type: Object }) source?: FigureSource\n\n  @state() private cost?: FigureCost\n  @state() private score?: FigureScore\n  @state() private curve = ''\n  /** 1만 개를 놓았을 때. 저작자가 실제로 궁금한 숫자다. */\n  @state() private many?: FigureCost\n  /** 몇 개까지 놓을 수 있나. 이 패널의 머리다. */\n  @state() private capacity?: FigureCapacity\n  /** 추이 그림을 제 크기로 펼쳤나. */\n  @state() private expanded = false\n  @state() private errors: { code: string; message: string; at?: string }[] = []\n  @state() private violations: { code: string; message: string }[] = []\n\n  willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('source')) {\n      this.measure()\n    }\n  }\n\n  render() {\n    if (!this.source) {\n      return html`\n        <section>\n          <p quiet>${i18next.t('text.report-appears-when-you-add-a-part')}</p>\n        </section>\n      `\n    }\n\n    // 형식을 어긴 상태에서는 셈이 뜻을 갖지 못한다 — 무엇이 잘못됐는지만 보여 준다.\n    if (this.errors.length > 0) {\n      return html`${this.renderFindings()}`\n    }\n\n    return html`\n      ${this.renderVerdict()} ${this.renderAxes()} ${this.renderBudgets()} ${this.renderMetrics()} ${this.renderCurve()}\n      ${this.renderFindings()} ${this.renderSheet()}\n    `\n  }\n\n  /**\n   * 머리 — 몇 개까지 편한가.\n   *\n   * 로우폴리의 값은 「얼마나 많이 편하게 놓을 수 있나」에 있다. 등급 B 는 그 물음에\n   * 직접 답하지 않는다 — 형상이 선언된 한도 안인지를 말할 뿐이다. 그래서 개수를\n   * 머리에 올리고 등급은 옆의 badge 로 내린다.\n   *\n   * 근거를 함께 낸다. 이 개수의 분모는 실측이 아니라 설계 문서의 목표치이고(미결\n   * D-20), 그 사실이 화면에 없으면 재 본 값처럼 읽힌다.\n   */\n  private renderVerdict() {\n    const score = this.score\n    const capacity = this.capacity\n    if (!score || !capacity) return nothing\n\n    return html`\n      <section>\n        <h3>${i18next.t('label.maturity')}</h3>\n        <p lead>${i18next.t('label.axis-scale')} — ${i18next.t('text.how-many-fit')}</p>\n        <div verdict>\n          <span capacity>${capacity.instances.toLocaleString()}</span>\n          <span unit>${i18next.t('text.instances-unit')}</span>\n          <span\n            grade\n            ?tight=${score.grade === 'C'}\n            ?over=${score.grade === 'D'}\n            title=${i18next.t('text.grade-explained')}\n          >\n            ${score.grade}\n            <small>${i18next.t('text.headroom-percent', { percent: Math.round(score.score) })}</small>\n          </span>\n        </div>\n        <p because>\n          ${i18next.t('text.grade-decided-by')}\n          <strong>${i18next.t('label.budget-' + score.tightest.key)}</strong>\n          — ${score.tightest.used} / ${score.tightest.limit}\n          (${Math.round((score.tightest.used / score.tightest.limit) * 100)}%)\n        </p>\n        ${this.renderGradeScale(score.grade)}\n        <p basis>\n          ${i18next.t('text.bound-by-' + capacity.bound, {\n            per: capacity.per.toLocaleString(),\n            budget: capacity.budget.toLocaleString()\n          })}\n          <em>${i18next.t('text.budget-not-measured-yet')}</em>\n        </p>\n      </section>\n    `\n  }\n\n  /**\n   * 등급 눈금.\n   *\n   * A·B·C·D 가 무엇을 뜻하는지 화면 어디에도 없었다. badge 만 보고는 좋은지 나쁜지도,\n   * 무엇을 고쳐야 오르는지도 알 수 없다. 눈금을 늘 곁에 두고 지금 어디에 있는지를\n   * 표시한다.\n   *\n   * 접어 두지 않는다. 한 번 배우고 마는 값이 아니라 볼 때마다 대조하는 값이다.\n   */\n  private renderGradeScale(now: string) {\n    const bounds: [string, string][] = [\n      ['A', '≤ 50%'],\n      ['B', '≤ 75%'],\n      ['C', '≤ 100%'],\n      ['D', '> 100%']\n    ]\n\n    return html`\n      <p scale>\n        <span>${i18next.t('text.grade-scale-lead')}</span>\n        ${bounds.map(\n          ([grade, bound]) => html`<span ?now=${grade === now}><b>${grade}</b> ${bound}</span>`\n        )}\n      </p>\n    `\n  }\n\n  /**\n   * 성숙도 — 여러 축으로 본다.\n   *\n   * 「몇 개까지 편한가」 하나로는 좋은 형상과 나쁜 형상이 구분되지 않는다. 부품 하나짜리\n   * 상자도 그 축에서는 만점이다.\n   *\n   * **못 재는 축을 0 으로 두지 않는다.** 0 은 「나쁘다」는 뜻이 되는데, 사실은 아직\n   * 측정할 방법이 없는 것이다. 측정하지 못한다고 알리고 이유를 붙인다. 지어낸 점수보다 그것이\n   * 이 리포트를 믿을 만하게 만든다.\n   */\n  private renderAxes() {\n    if (!this.cost || !this.score || !this.source) return nothing\n\n    /*\n      규모는 목록에서 뺀다 — 머리로 올라갔다. 같은 숫자를 두 번 내면 읽는 사람이\n      둘이 다른 것인 줄 안다.\n    */\n    const axes = maturityOf(this.source, this.cost, this.score).filter(axis => axis.key !== 'scale')\n\n    // radar 에는 여섯을 다 그린다. 규모가 어디쯤인지 함께 보여야 뜻이 있다\n    const all = maturityOf(this.source, this.cost, this.score)\n\n    return html`\n      <section>\n        <h3>${i18next.t('label.by-axis')}</h3>\n        <div radar>${this.renderRadar(all.filter(axis => axis.ratio !== undefined))}</div>\n        ${this.renderUnmeasured(all.filter(axis => axis.ratio === undefined))}\n        <ul axes>\n          ${axes.map(axis => this.renderAxis(axis))}\n        </ul>\n      </section>\n    `\n  }\n\n  /**\n   * 성숙도 radar. **측정한 축만 그린다.**\n   *\n   * 측정하지 못하는 축도 spoke 를 그려 두고 도형만 건너뛰던 때가 있었다. 그러면 그 방향을 가로지르는\n   * 직선이 생겨서 도형이 그쪽으로 움푹 들어간 것처럼 보인다. 0 으로 찍지 않으려고 한\n   * 일인데 결과는 0 으로 찍은 것과 똑같이 읽혔다. 점선 살과 물음표로는 그 인상이\n   * 지워지지 않았다.\n   *\n   * 그래서 아예 빼고, 못 재는 축은 그림 아래에 글로 적는다. 잴 수 없는 것은 그림에\n   * 자리를 주지 않는 편이 정직하다.\n   */\n  private renderRadar(axes: MaturityAxis[]) {\n    // 그림 안에서는 **짧은 이름**을 쓴다. 긴 이름을 그대로 쓰면 왼쪽이 잘린다 —\n    // 화면을 띄워 보고 알았다.\n    const cx = 60\n    const cy = 46\n    const r = 28\n\n    const at = (index: number, ratio: number) => {\n      const angle = -Math.PI / 2 + (index * 2 * Math.PI) / axes.length\n      return [cx + r * ratio * Math.cos(angle), cy + r * ratio * Math.sin(angle)]\n    }\n\n    const points = axes\n      .map((axis, index) => at(index, Math.max(0.04, Math.min(1, axis.ratio ?? 0))).map(n => n.toFixed(1)).join(','))\n      .join(' ')\n\n    return svg`\n      <svg viewBox=\"0 0 120 96\" aria-hidden=\"true\">\n        ${[0.33, 0.66, 1].map(\n          ring => svg`<polygon web points=${axes.map((_, i) => at(i, ring).map(n => n.toFixed(1)).join(',')).join(' ')}></polygon>`\n        )}\n        ${axes.map((_, index) => {\n          const [x, y] = at(index, 1)\n          return svg`<line spoke x1=${cx} y1=${cy} x2=${x.toFixed(1)} y2=${y.toFixed(1)}></line>`\n        })}\n        <polygon shape points=${points}></polygon>\n        ${axes.map((axis, index) => {\n          const [x, y] = at(index, Math.max(0.04, Math.min(1, axis.ratio ?? 0)))\n          return svg`<circle dot cx=${x.toFixed(1)} cy=${y.toFixed(1)} r=\"1.4\"></circle>`\n        })}\n        ${axes.map((axis, index) => {\n          const [x, y] = at(index, 1.28)\n          const anchor = x < cx - 3 ? 'end' : x > cx + 3 ? 'start' : 'middle'\n          return svg`\n            <text x=${x.toFixed(1)} y=${(y + 1.8).toFixed(1)} text-anchor=${anchor}>\n              ${i18next.t('label.axis-' + axis.key + '-short')}\n            </text>\n          `\n        })}\n      </svg>\n    `\n  }\n\n  /**\n   * 그림에 없는 축을 글로 밝힌다.\n   *\n   * 빼기만 하면 축이 여섯인지 다섯인지 알 수 없고, 없는 것을 없다고 말하지 않은 셈이\n   * 된다. 무엇을 아직 못 재는지 한 줄로 적는다. 왜 못 재는지는 아래 목록의 그 항목에\n   * 그대로 있다.\n   */\n  private renderUnmeasured(axes: MaturityAxis[]) {\n    if (axes.length === 0) return nothing\n\n    return html`\n      <p unmeasured>\n        ${i18next.t('text.axes-not-measurable-yet', {\n          axes: axes.map(axis => i18next.t('label.axis-' + axis.key)).join(' · ')\n        })}\n      </p>\n    `\n  }\n\n  private renderAxis(axis: MaturityAxis) {\n    const name = i18next.t('label.axis-' + axis.key)\n\n    if (axis.blocked) {\n      return html`\n        <li blocked>\n          <span>${name}</span>\n          <span reading>${i18next.t('text.not-measurable-yet')}</span>\n          <em>${i18next.t(axis.blocked)}</em>\n        </li>\n      `\n    }\n\n    const ratio = Math.max(0, Math.min(1, axis.ratio ?? 0))\n    return html`\n      <li>\n        <span>${name}</span>\n        <span reading>${axis.readingKey ? i18next.t(axis.readingKey) : (axis.reading ?? '')}</span>\n        <div bar><i style=\"width:${Math.round(ratio * 100)}%\"></i></div>\n        ${axis.because ? html`<em>${i18next.t(axis.because)}</em>` : ''}\n      </li>\n    `\n  }\n\n  /**\n   * 예산 막대.\n   *\n   * 숫자만 늘어놓으면 어느 것이 꽉 찼는지 눈에 안 들어온다. 한도에 가장 가까운 하나를 색으로\n   * 구분한다. 그것이 점수를 정한 항목이다.\n   *\n   * ## `use.label` 을 쓰지 않는 이유\n   *\n   * `FigureBudgetUse` 에 `label` 과 `why` 가 있고 「저작자에게 그대로 보여 준다」고\n   * 적혀 있다. 그런데 그 문구가 **한국어로 구워져** 있다. 이 제품은 5언어를 쓰므로\n   * 그것을 그대로 실으면 다른 언어 사용자에게 한국어가 나온다.\n   *\n   * `budgets` 는 **배열**이다. `Object.entries` 로 돌면 키가 인덱스(0·1·2…)가 되어\n   * `label.budget-0` 같은 없는 키를 찾는다 — 화면을 띄워 보고서야 드러났다.\n   * 배열을 그대로 돌고 `use.key` 를 쓴다.\n   *\n   * 그래서 **안정된 `key`** 로 이 화면의 i18n 을 찾는다. `key` 는 열거형이라 형식의\n   * 일부이고, 문구는 화면의 몫이다. figure-model 이 문구를 언어 중립으로 바꾸면\n   * 그때 `label` 을 쓸 수 있다.\n   */\n  private renderBudgets() {\n    const score = this.score\n    if (!score) return nothing\n\n    return html`\n      <section>\n        <h3>${i18next.t('label.budgets')}</h3>\n        <ul budgets>\n          ${score.budgets.map(use => {\n            const ratio = Math.min(1, use.ratio)\n            const tight = use.key === score.tightest.key\n            return html`\n              <li>\n                <span>${i18next.t('label.budget-' + use.key)}</span>\n                <span>${use.used} / ${use.limit}</span>\n                <div bar><i ?tight=${tight} style=\"width:${Math.round(ratio * 100)}%\"></i></div>\n              </li>\n            `\n          })}\n        </ul>\n      </section>\n    `\n  }\n\n  private renderMetrics() {\n    const cost = this.cost\n    if (!cost) return nothing\n\n    return html`\n      <section>\n        <h3>${i18next.t('label.weight')}</h3>\n        <dl metrics>\n          <dt>${i18next.t('label.triangles')}</dt>\n          <dd>${cost.triangles.toLocaleString()}</dd>\n\n          <dt>${i18next.t('label.triangles-at-100')}</dt>\n          <dd>${cost.at.triangles.toLocaleString()}</dd>\n\n          <dt>${i18next.t('label.draw-calls-at-100')}</dt>\n          <dd>${cost.at.drawCalls.toLocaleString()}</dd>\n\n          <dt>${i18next.t('label.distinct-shapes')}</dt>\n          <dd>${cost.distinctShapes}</dd>\n\n          <dt>${i18next.t('label.distinct-materials')}</dt>\n          <dd>${cost.distinctMaterials}</dd>\n        </dl>\n      </section>\n    `\n  }\n\n  /**\n   * 재활용 추이 — 「많이 놓으면 어떻게 되나」에 답한다.\n   *\n   * ## 그림을 사이드바에 밀어 넣지 않는다\n   *\n   * `costCurveSvg` 의 자연 크기는 680x380 이고 글자가 11px 다. 300px 칸에서\n   * width:100% 로 줄이면 글자가 4px 이 되어 **아무것도 읽을 수 없다** — 화면을 띄워\n   * 보고서야 드러났다. 읽을 수 없는 그림은 없는 것과 같으므로, 사이드바에는 저작자가\n   * 실제로 궁금한 숫자(1만 개일 때)를 두고 그림은 선택해서 제 크기로 본다.\n   */\n  private renderCurve() {\n    const many = this.many\n    if (!many && !this.curve) return nothing\n\n    return html`\n      <section>\n        <h3>${i18next.t('label.reuse-trend')}</h3>\n        ${many\n          ? html`\n              <dl metrics>\n                <dt>${i18next.t('label.triangles-at-10k')}</dt>\n                <dd>${many.at.triangles.toLocaleString()}</dd>\n\n                <dt>${i18next.t('label.draw-calls-at-10k')}</dt>\n                <dd>${many.at.drawCalls.toLocaleString()}</dd>\n              </dl>\n            `\n          : nothing}\n        ${this.curve\n          ? html`\n              <button expand @click=${() => (this.expanded = true)}>\n                ${i18next.t('button.see-the-trend-chart')}\n              </button>\n            `\n          : nothing}\n      </section>\n    `\n  }\n\n  /** 그림을 제 크기로 보여 준다. 좁으면 줄이지 않고 넘겨 보게 둔다. */\n  private renderSheet() {\n    if (!this.expanded || !this.curve) return nothing\n\n    return html`\n      <div sheet @click=${() => (this.expanded = false)}>\n        <figure @click=${(e: Event) => e.stopPropagation()}>\n          ${unsafeSVG(this.curve)}\n          <figcaption>\n            <button close @click=${() => (this.expanded = false)}>${i18next.t('button.close')}</button>\n          </figcaption>\n        </figure>\n      </div>\n    `\n  }\n\n  /**\n   * 발견.\n   *\n   * 오류(막는 것)와 위반(알리는 것)을 **가려서** 보여 준다. 섞으면 저작자가 무엇을\n   * 반드시 고쳐야 하는지 모른다. 아무것도 없으면 「없다」고 말한다 — 빈 자리로 두면\n   * 검사가 돌았는지 알 수 없다.\n   */\n  private renderFindings() {\n    if (this.errors.length === 0 && this.violations.length === 0) {\n      return html`\n        <section>\n          <h3>${i18next.t('label.findings')}</h3>\n          <p quiet>${i18next.t('text.no-findings')}</p>\n        </section>\n      `\n    }\n\n    return html`\n      <section>\n        <h3>${i18next.t('label.findings')}</h3>\n        <ul findings>\n          ${this.errors.map(\n            e => html`\n              <li>\n                <md-icon>error</md-icon>\n                <span>${e.message} ${e.at ? html`<code at>${e.at}</code>` : ''}</span>\n              </li>\n            `\n          )}\n          ${this.violations.map(\n            v => html`\n              <li violation>\n                <md-icon>info</md-icon>\n                <span>${v.message}</span>\n              </li>\n            `\n          )}\n        </ul>\n      </section>\n    `\n  }\n\n  /** 원본 데이터를 측정해 결과를 상태에 담는다. 셈은 전부 figure-model 이 한다. */\n  private measure() {\n    const source = this.source\n    if (!source) {\n      this.cost = undefined\n      this.score = undefined\n      this.many = undefined\n      this.capacity = undefined\n      this.curve = ''\n      this.errors = []\n      this.violations = []\n      return\n    }\n\n    const result = validate(source)\n    this.errors = result.errors.map(e => ({ code: e.code, message: e.message, at: e.path }))\n    this.violations = result.violations.map(v => ({ code: v.code, message: v.message }))\n\n    if (this.errors.length > 0) {\n      // 형식을 어겼으면 컴파일이 던진다. 셈을 비우고 오류만 보여 준다.\n      this.cost = undefined\n      this.score = undefined\n      this.many = undefined\n      this.capacity = undefined\n      this.curve = ''\n      this.dispatchEvent(\n        new CustomEvent('verdict-changed', { detail: {}, bubbles: true, composed: true })\n      )\n      return\n    }\n\n    const blueprint = compile(source)\n    this.cost = costOf(blueprint, 100)\n    // 1만 개는 figure-model 에 다시 묻는다 — 화면이 곱셈으로 짐작하지 않는다.\n    this.many = costOf(blueprint, 10000)\n    this.score = scoreOf(blueprint)\n    this.capacity = capacityOf(this.cost)\n\n    // 개수를 밖으로 알린다. 탭 이름표가 이 값을 보여 주는데, 거기서 다시 셈하면\n    // 같은 형상이 두 자리에서 다르게 나올 수 있다.\n    this.dispatchEvent(\n      new CustomEvent('verdict-changed', {\n        detail: { instances: this.capacity?.instances, grade: this.score?.grade },\n        bubbles: true,\n        composed: true\n      })\n    )\n    this.curve = costCurveSvg(blueprint)\n  }\n}\n"]}

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+import type { ViewSettings } from './figure-view.js';
+declare const FigureSettings_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 저작 화면의 **보기 설정**.
+ *
+ * ## 자산이 아니라 작업대다
+ *
+ * 여기서 고치는 것은 저장되지 않는다. 조명을 밝게 하고 바닥을 켠 것은 지금 보기 편한
+ * 상태일 뿐이다. 그래서 「저장 안 됨」을 화면에 적어 둔다 — 안 적으면 저작자가 조명을
+ * 맞춰 두고 그것이 자산에 딸려 간다고 여긴다.
+ *
+ * ## 값을 들고 있지 않는다
+ *
+ * 이 패널은 받은 것을 그리고 바뀐 것을 알린다. 정본은 모델러 페이지가 갖는다 — 속성
+ * 패널과 같은 방식이다. 여기서 들고 있으면 페이지가 다시 그릴 때 두 벌이 갈린다.
+ */
+export declare class FigureSettings extends FigureSettings_base {
+    static styles: import("lit").CSSResult[];
+    view: ViewSettings;
+    render(): import("lit-html").TemplateResult<1>;
+    private toggle;
+    private slider;
+    /** 처음 값으로 되돌린다. 만지다 길을 잃었을 때 돌아올 자리가 있어야 한다. */
+    private reset;
+    private put;
+    /**
+     * 바뀐 것을 알린다.
+     *
+     * **알리기 전에 내 것도 바꿔 둔다.** Lit 은 속성을 다음 렌더에 넣으므로, 같은 프레임에
+     * 두 번 고치면 두 번째가 `this.view` 의 옛 값을 읽어 첫 번째를 덮는다. 실제로 그랬다 —
+     * 축 가이드를 끄고 바닥판을 켰더니 축 가이드가 도로 켜져 있었고, 화면의 체크 상자와
+     * 씬의 상태가 서로 다른 말을 했다.
+     *
+     * 정본은 여전히 모델러 페이지가 갖는다. 여기 값은 다음 렌더에 같은 것으로 덮인다.
+     */
+    private tell;
+}
+export {};

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

@@ -0,0 +1,277 @@
+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 } 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='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('label.guides')}</h3>
+        <p quiet>${i18next.t('text.view-settings-are-not-saved')}</p>
+
+        ${this.toggle('grid', view.grid, i18next.t('label.coordinate-ground'), i18next.t('text.coordinate-ground-explained'))}
+        ${this.toggle('gridLabels', view.gridLabels, i18next.t('label.axis-labels'))}
+        ${this.toggle('floor', view.floor, i18next.t('label.floor'), i18next.t('text.floor-explained'))}
+      </section>
+
+      <section>
+        <h3>${i18next.t('label.environment')}</h3>
+
+        <label field>
+          <span>${i18next.t('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(`label.environment-${name}`)}
+              </option>`)}
+          </select>
+        </label>
+        <p quiet>${i18next.t('text.environment-explained')}</p>
+
+        <label field>
+          <span>${i18next.t('label.sky-color')}</span>
+          <input
+            type="color"
+            .value=${view.skyColor}
+            @change=${(e) => this.put({ skyColor: e.target.value })}
+          />
+        </label>
+      </section>
+
+      <section>
+        <h3>${i18next.t('label.key-light')}</h3>
+
+        ${this.slider('dirLightIntensity', view.dirLightIntensity, i18next.t('label.intensity'), 0, 5, 0.1)}
+        ${this.toggle('dirLightFollowCamera', view.dirLightFollowCamera, i18next.t('label.follow-camera'), i18next.t('text.follow-camera-explained'))}
+        ${this.toggle('dirShadowEnabled', view.dirShadowEnabled, i18next.t('label.cast-shadow'))}
+        ${view.dirLightIntensity === 0 && view.hemiIntensity === 0
+            ? html `<p quiet>${i18next.t('text.all-lights-off')}</p>`
+            : ''}
+      </section>
+
+      <section>
+        <h3>${i18next.t('label.hemisphere-light')}</h3>
+
+        ${this.slider('hemiIntensity', view.hemiIntensity, i18next.t('label.intensity'), 0, 8, 0.1)}
+        <p quiet>${i18next.t('text.hemisphere-light-explained')}</p>
+      </section>
+
+      <section>
+        <button reset @click=${() => this.reset()}>${i18next.t('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 } 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='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      <section>\n        <h3>${i18next.t('label.guides')}</h3>\n        <p quiet>${i18next.t('text.view-settings-are-not-saved')}</p>\n\n        ${this.toggle('grid', view.grid, i18next.t('label.coordinate-ground'), i18next.t('text.coordinate-ground-explained'))}\n        ${this.toggle('gridLabels', view.gridLabels, i18next.t('label.axis-labels'))}\n        ${this.toggle('floor', view.floor, i18next.t('label.floor'), i18next.t('text.floor-explained'))}\n      </section>\n\n      <section>\n        <h3>${i18next.t('label.environment')}</h3>\n\n        <label field>\n          <span>${i18next.t('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(`label.environment-${name}`)}\n              </option>`\n            )}\n          </select>\n        </label>\n        <p quiet>${i18next.t('text.environment-explained')}</p>\n\n        <label field>\n          <span>${i18next.t('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('label.key-light')}</h3>\n\n        ${this.slider('dirLightIntensity', view.dirLightIntensity, i18next.t('label.intensity'), 0, 5, 0.1)}\n        ${this.toggle(\n          'dirLightFollowCamera',\n          view.dirLightFollowCamera,\n          i18next.t('label.follow-camera'),\n          i18next.t('text.follow-camera-explained')\n        )}\n        ${this.toggle('dirShadowEnabled', view.dirShadowEnabled, i18next.t('label.cast-shadow'))}\n        ${view.dirLightIntensity === 0 && view.hemiIntensity === 0\n          ? html`<p quiet>${i18next.t('text.all-lights-off')}</p>`\n          : ''}\n      </section>\n\n      <section>\n        <h3>${i18next.t('label.hemisphere-light')}</h3>\n\n        ${this.slider('hemiIntensity', view.hemiIntensity, i18next.t('label.intensity'), 0, 8, 0.1)}\n        <p quiet>${i18next.t('text.hemisphere-light-explained')}</p>\n      </section>\n\n      <section>\n        <button reset @click=${() => this.reset()}>${i18next.t('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-side.d.ts

@@ -0,0 +1,41 @@
+import './figure-inspector.js';
+import './figure-report.js';
+import './figure-settings.js';
+import { LitElement } from 'lit';
+import type { FigureSource } from '@hatiolab/figure-model';
+import type { BoardModel, PartModel } from './figure-source.js';
+import type { ViewSettings } from './figure-view.js';
+declare const FigureSide_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.
+ *
+ * ## 왜 위아래로 나누지 않나
+ *
+ * 둘 다 세로로 긴 화면이다. 위아래로 나누면 양쪽 다 잘려서, 속성은 재질까지 못
+ * 내려가고 판정은 무게까지 못 내려간다. 탭으로 겹치면 각자 칸 전체를 쓴다.
+ *
+ * ## 그래도 개수는 늘 보인다
+ *
+ * 성숙도의 축 하나 —「몇 개까지 편한가」— 는 부품을 고칠 때마다 움직이고, 그것이
+ * 보여야 저작자가 고칠 수 있다. 탭 뒤로 숨으면 저장하고 나서야 알게 된다. 그래서 그
+ * 숫자만 **탭 이름표에 남긴다** — 성숙도를 덮어 두고 속성을 만져도 따라 움직이는
+ * 것이 보인다.
+ *
+ * 판정은 화면에서 감춰도 **DOM 에는 남는다.** 떼었다 붙이면 다시 세느라 값이 잠깐
+ * 비고, 펼쳐 둔 추이 그림 같은 상태도 날아간다.
+ */
+export declare class FigureSide extends FigureSide_base {
+    static styles: import("lit").CSSResult;
+    board?: BoardModel;
+    parts: PartModel[];
+    source?: FigureSource;
+    selected: number;
+    /** 저작 화면의 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다. */
+    view: ViewSettings;
+    private tab;
+    /** 판정이 알려 준 개수. 탭 이름표에 붙는다. */
+    private instances?;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderTab;
+}
+export {};