@things-factory/figure-ui 10.1.6 → 10.1.8

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

@@ -69,6 +69,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         display: flex;
         flex-direction: column;
         min-height: 0;
+        --figure-control-height: 30px;
         overflow-y: auto;
         background-color: var(--md-sys-color-surface-container-lowest);
         color: var(--md-sys-color-on-surface);
@@ -93,9 +94,39 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         칸 높이는 건드리지 않는다(작게 만드는 것이 아니라 **빈 곳을 줄이는 것**이다).
       */
       section {
-        padding: 6px 10px;
+        padding: 8px 10px;
         border-bottom: 1px solid var(--md-sys-color-outline-variant);
       }
+      /* 입력 행은 촘촘하게, 서로 다른 편집 의도 사이에는 호흡을 둔다. */
+      section + section {
+        margin-top: 6px;
+      }
+      section[collapsible] {
+        padding: 0;
+      }
+      details[group] > summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 34px;
+        padding: 0 10px;
+        cursor: pointer;
+        list-style: none;
+      }
+      details[group] > summary::-webkit-details-marker {
+        display: none;
+      }
+      details[group] > summary h3 {
+        margin: 0;
+      }
+      details[group] > summary md-icon {
+        --md-icon-size: 16px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      details[group] > div[group-content] {
+        padding: 4px 10px 8px;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
       h3 {
         display: flex;
         align-items: center;
@@ -108,6 +139,42 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
 
+      /* 자산 메타데이터는 부품을 고친다는 현재 문맥에서는 요약으로만 둔다. */
+      details[asset] {
+        margin: -1px 0;
+      }
+      details[asset] summary {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-height: 26px;
+        cursor: pointer;
+        list-style: none;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      details[asset] summary::-webkit-details-marker {
+        display: none;
+      }
+      details[asset] summary::before {
+        content: '›';
+        font-size: 1.1rem;
+        line-height: 1;
+        transition: transform 120ms ease;
+      }
+      details[asset][open] summary::before {
+        transform: rotate(90deg);
+      }
+      details[asset] summary b {
+        font-size: var(--ui-t-micro, 11px);
+        letter-spacing: 0.04em;
+      }
+      details[asset] summary small {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 0.7rem;
+      }
+
       label {
         display: flex;
         align-items: center;
@@ -153,6 +220,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       input,
       select {
         width: 100%;
+        min-height: var(--figure-control-height);
         box-sizing: border-box;
         padding: 4px 7px;
         font: var(--input-field-font, inherit);
@@ -177,6 +245,9 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       */
       div[cell] {
         display: flex;
+        box-sizing: border-box;
+        height: var(--figure-control-height);
+        min-height: var(--figure-control-height);
         align-items: center;
         gap: 2px;
         padding-left: 6px;
@@ -197,6 +268,8 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       }
       div[cell] input {
         min-width: 0;
+        min-height: 0;
+        height: calc(var(--figure-control-height) - 2px);
         padding: 4px 6px 4px 2px;
         font-family: var(--mono-font, monospace);
         text-align: right;
@@ -216,11 +289,163 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       }
       div[field] + div[field],
       div[triple] + div[field],
-      div[field] + div[triple] {
+      div[field] + div[triple],
+      div[inline-field] + div[inline-field],
+      div[inline-field] + div[field],
+      div[field] + div[inline-field],
+      div[vector-row] + div[vector-row],
+      div[vector-row] + div[field],
+      div[field] + div[vector-row] {
         /* 칸 사이 7 → 5. 칸 자체는 그대로 두고 사이만 좁힌다. */
         margin-top: 5px;
       }
 
+      /* 짧은 라벨과 단일 값은 같은 줄에서 읽는다. 복잡한 선택기에는 쓰지 않는다. */
+      div[inline-field] {
+        display: grid;
+        /* 같은 편집 밀도 안에서는 입력 시작선을 맞춘다. 라벨 길이가 칸 폭을 흔들면 안 된다. */
+        grid-template-columns: 64px minmax(0, 1fr);
+        align-items: center;
+        gap: 7px;
+      }
+      div[inline-field] > label {
+        margin: 0;
+        white-space: nowrap;
+      }
+      /* 한 줄 입력의 설명은 입력칸을 밀어내지 않고 바로 아래 전폭에서 읽는다. */
+      div[inline-field] > p[hint] {
+        grid-column: 1 / -1;
+        margin: -2px 0 1px;
+      }
+      div[inline-field] > code[fixed] {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      /* X·Y·Z는 함께 비교하는 값이므로, 묶음 제목만 왼쪽에 두고 입력은 한 행에 둔다. */
+      div[vector-row] {
+        display: grid;
+        grid-template-columns: 64px minmax(0, 1fr);
+        align-items: center;
+        gap: 7px;
+      }
+      div[vector-row] > label {
+        margin: 0;
+        white-space: nowrap;
+      }
+      div[vector-row] > p[hint] {
+        grid-column: 1 / -1;
+        margin: -2px 0 1px;
+      }
+      div[sizing-choices] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 5px;
+      }
+      button[sizing-choice] {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 2px;
+        min-height: 52px;
+        padding: 7px 8px;
+        color: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface-container-lowest);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 7px;
+        text-align: left;
+        cursor: pointer;
+      }
+      button[sizing-choice][on] {
+        color: var(--md-sys-color-on-primary-container);
+        background: var(--md-sys-color-primary-container);
+        border-color: transparent;
+      }
+      button[sizing-choice] b {
+        font-size: 0.74rem;
+      }
+      button[sizing-choice] small {
+        font-size: 0.64rem;
+        line-height: 1.35;
+        opacity: 0.8;
+      }
+      div[anchor-rows] {
+        display: grid;
+        gap: 6px;
+      }
+      div[anchor-row] {
+        display: grid;
+        grid-template-columns: 46px minmax(0, 1fr);
+        align-items: start;
+        gap: 8px;
+        padding: 6px 7px;
+        background: var(--md-sys-color-surface-container);
+        border-radius: 7px;
+      }
+      div[anchor-row] label {
+        margin: 0;
+        font-size: 0.7rem;
+        font-weight: 700;
+      }
+      div[anchor-options] {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 4px;
+      }
+      button[anchor-choice] {
+        min-width: 0;
+        height: var(--figure-control-height);
+        box-sizing: border-box;
+        padding: 4px 3px;
+        overflow: hidden;
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font, inherit);
+        font-size: 0.63rem;
+        line-height: 1.2;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background: var(--md-sys-color-surface-container-lowest);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 5px;
+        cursor: pointer;
+      }
+      button[anchor-choice][on] {
+        color: var(--md-sys-color-on-primary-container);
+        background: var(--md-sys-color-primary-container);
+        border-color: transparent;
+      }
+      details[anchor-advanced] {
+        grid-column: 2;
+        margin-top: 4px;
+      }
+      details[anchor-advanced] summary {
+        cursor: pointer;
+        font-size: 0.62rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      details[anchor-advanced] div[anchor-options] {
+        margin-top: 4px;
+      }
+      div[palette-meaning] {
+        display: grid;
+        gap: 2px;
+        margin-top: 7px;
+        padding: 6px 8px;
+        color: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface-container);
+        border-radius: 7px;
+      }
+      div[palette-meaning] b {
+        font-size: 0.72rem;
+      }
+      div[palette-meaning] small {
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.64rem;
+        line-height: 1.35;
+      }
+
       /*
         정밀 제작 도구.
 
@@ -229,13 +454,17 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         늘 조금씩 어긋나고, 기준 치수를 바꾸면 전부 다시 해야 한다.
       */
       div[tools] {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 3px;
-        margin-top: 6px;
+        display: grid;
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+        gap: 4px;
       }
       div[tools] button {
-        padding: 3px 8px;
+        display: grid;
+        place-items: center;
+        min-width: 0;
+        height: var(--figure-control-height);
+        box-sizing: border-box;
+        padding: 0;
         font: var(--label-font, inherit);
         font-size: 0.7rem;
         color: var(--md-sys-color-on-surface);
@@ -244,6 +473,9 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         border-radius: 6px;
         cursor: pointer;
       }
+      div[tools] button md-icon {
+        font-size: 17px;
+      }
       div[tools] button[disabled] {
         opacity: 0.35;
         cursor: default;
@@ -253,11 +485,6 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         background-color: var(--md-sys-color-primary-container);
         border-color: transparent;
       }
-      div[tools] span[sep] {
-        width: 1px;
-        margin: 2px 3px;
-        background-color: var(--md-sys-color-outline-variant);
-      }
 
       /* 지금 어느 축이 늘어나나 — 크기를 고치면 바뀔 수 있어서 값으로 적는다 */
       p[axis-now] {
@@ -316,7 +543,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       */
       div[segments] {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(4, 1fr);
         gap: 4px;
       }
       /* 원 유지 · 끄기 — 고르는 값이라 분할 수와 같은 모양으로 둔다 */
@@ -374,8 +601,8 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       button[seg] svg {
         display: block;
         /* 작으면 12 와 16 이 둘 다 동그라미로 보인다 — 각이 읽힐 만큼은 키운다 */
-        width: 40px;
-        height: 40px;
+        width: 32px;
+        height: 32px;
       }
       button[seg] svg polygon {
         fill: var(--md-sys-color-surface-container-highest);
@@ -398,7 +625,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       button[seg][on] small {
         color: inherit;
       }
-      /* 프리셋 밖의 값도 쓸 수 있다. 다만 권하는 쪽을 크게 둔다 */
+      /* 성능·실루엣 검증을 마친 프리셋만 고른다. */
       details[free] {
         margin-top: 6px;
       }
@@ -491,6 +718,26 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       label[toggle] input {
         width: auto;
       }
+      div[role-choices] {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 4px;
+      }
+      div[role-choices] label[toggle] {
+        justify-content: center;
+        min-height: 30px;
+        margin: 0;
+        padding: 2px 4px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        font-size: 0.68rem;
+        text-align: center;
+      }
+      div[role-choices] label[toggle]:has(input:checked) {
+        color: var(--md-sys-color-on-primary-container);
+        background: var(--md-sys-color-primary-container);
+        border-color: transparent;
+      }
 
       p[quiet] {
         margin: 0;
@@ -531,7 +778,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         const part = this.chosen;
         if (!part || !this.board) {
             return html `
-        ${this.renderFigure()}
+        ${this.renderFigure(false)}
         <section>
           <h3>${i18next.t('figure.label.properties')}</h3>
           <p quiet>${i18next.t('figure.text.select-a-part-to-edit')}</p>
@@ -548,7 +795,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
           묶음은 아예 나오지 않는다 — 해 둬도 아무 일도 안 일어나는 칸을 보여 주지 않는다.
         */
         return html `
-      ${this.renderFigure()} ${this.renderIdentity(shown)} ${this.renderRole(shown)}
+      ${this.renderFigure(true)} ${this.renderIdentity(shown)} ${this.renderRole(shown)}
       ${this.renderPlacement(shown)} ${this.renderShape(shown)} ${this.renderMaterial(shown)}
       ${this.renderBehaviour(shown)}
     `;
@@ -572,16 +819,18 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       <section>
         <h3>${i18next.t('figure.label.role-in-capability')}${this.help('figure.text.anchors-are-not-drawn')}</h3>
 
-        ${PART_ROLES.map(one => html `
-            <label toggle>
-              <input
-                type="checkbox"
-                .checked=${live(roles.includes(one))}
-                @change=${(e) => this.toggleRole(one, e.target.checked)}
-              />
-              ${i18next.t('figure.label.role-' + one)}
-            </label>
-          `)}
+        <div role-choices>
+          ${PART_ROLES.map(one => html `
+              <label toggle>
+                <input
+                  type="checkbox"
+                  .checked=${live(roles.includes(one))}
+                  @change=${(e) => this.toggleRole(one, e.target.checked)}
+                />
+                ${i18next.t('figure.label.role-' + one)}
+              </label>
+            `)}
+        </div>
         ${roles.length === 0 ? html `<p quiet>${i18next.t('figure.text.role-none-means-drawn')}</p>` : nothing}
 
         ${roles.includes('slot')
@@ -666,11 +915,9 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
      *
      * 저장되는 식별자다. 배치된 보드가 이 이름으로 타입을 찾으므로 만든 뒤에는 못 바꾼다.
      */
-    renderFigure() {
-        return html `
-      <section>
-        <h3>${i18next.t('figure.label.figure')}</h3>
-        <div field>
+    renderFigure(compact = false) {
+        const fields = html `
+        <div inline-field>
           <label>${i18next.t('figure.label.name')}</label>
           <input
             .value=${this.figureName}
@@ -682,31 +929,91 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         }))}
           />
         </div>
-        <div field>
-          <label>${i18next.t('figure.label.figure-type')}${this.help('figure.text.type-name-cannot-change')}</label>
+        <div inline-field>
+          <label>${i18next.t('figure.label.figure-type')}${this.helpButton('figure.text.type-name-cannot-change')}</label>
           <code fixed title=${i18next.t('figure.text.type-name-cannot-change')}>
             <md-icon>lock</md-icon>${this.board?.figureType ?? ''}
           </code>
+          ${this.helpHint('figure.text.type-name-cannot-change')}
         </div>
         <!--
           왜 못 고치는지 **적어 둔다.** 전에는 tooltip 에만 있었고, 그러면 눌러 보고 안 되는 것을
           알게 된다 — 화면이 안 되는 이유를 말하지 않으면 사용자가 자기 실수라고 생각한다.
         -->
+
+        <div inline-field>
+          <label>${i18next.t('figure.label.category')}${this.helpButton('figure.text.category-explained')}</label>
+          <input
+            .value=${this.figureCategory ?? ''}
+            placeholder=${i18next.t('figure.text.category-placeholder')}
+            @change=${(e) => this.tellCatalog({ category: e.target.value.trim() || undefined })}
+          />
+          ${this.helpHint('figure.text.category-explained')}
+        </div>
+
+        <div inline-field>
+          <label>${i18next.t('figure.label.tags')}${this.helpButton('figure.text.tags-explained')}</label>
+          <input
+            .value=${(this.figureTags ?? []).join(', ')}
+            placeholder=${i18next.t('figure.text.tags-placeholder')}
+            @change=${(e) => this.tellTags(e.target.value)}
+          />
+          ${this.helpHint('figure.text.tags-explained')}
+        </div>
+    `;
+        if (compact) {
+            return html `
+        <section>
+          <details asset>
+            <summary>
+              <b>${i18next.t('figure.label.figure')}</b>
+              <small>${this.figureName || this.board?.figureType || ''}</small>
+            </summary>
+            ${fields}
+          </details>
+        </section>
+      `;
+        }
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.figure')}</h3>
+        ${fields}
       </section>
     `;
     }
+    /**
+     * 태그 줄을 목록으로.
+     *
+     * 쉼표로 가르고 `#` 은 떼어 낸다 — 사람은 `#반출` 이라고 적고, 저장되는 것은 `반출` 이다.
+     * 겹친 것은 한 번만 남긴다. 빈 줄은 **빈 배열**이지 `undefined` 가 아니다 — 전부 지우려는
+     * 저작자가 지울 방법을 잃지 않게.
+     */
+    tellTags(raw) {
+        const tags = [
+            ...new Set(raw
+                .split(',')
+                .map(one => one.trim().replace(/^#+/, '').trim())
+                .filter(one => one.length > 0))
+        ];
+        this.tellCatalog({ tags });
+    }
+    /** 카탈로그 값이 바뀌었다고 알린다. 정본은 저작면이 든다 — 여기서는 알리기만 한다. */
+    tellCatalog(patch) {
+        this.dispatchEvent(new CustomEvent('figure-catalog', { detail: patch, bubbles: true, composed: true }));
+    }
     renderIdentity(part) {
         return html `
       <section>
         <h3>${i18next.t('figure.label.part')}</h3>
-        <div field>
-          <label>${i18next.t('figure.label.name')}${this.help('figure.text.renaming-a-part-breaks-bindings')}</label>
+        <div inline-field>
+          <label>${i18next.t('figure.label.name')}${this.helpButton('figure.text.renaming-a-part-breaks-bindings')}</label>
           <input
             .value=${part.name}
             @change=${(e) => this.put({ name: e.target.value })}
           />
+          ${this.helpHint('figure.text.renaming-a-part-breaks-bindings')}
         </div>
-        <div field>
+        <div inline-field>
           <label>${i18next.t('figure.label.shape')}</label>
           <select @change=${(e) => this.changePrimitive(e.target.value)}>
             ${PRIMITIVE_KINDS.map(kind => html `
@@ -726,56 +1033,74 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       <section>
         <h3>${i18next.t('figure.label.placement')}</h3>
 
-        <label>${i18next.t('figure.label.part-position')}</label>
-        <div triple>
-          ${['x', 'y', 'z'].map(axis => this.number(axis.toUpperCase(), t.position[axis], value => this.putTransform({ position: { ...t.position, [axis]: value } })))}
+        <div vector-row>
+          <label>${i18next.t('figure.label.part-position')}</label>
+          <div triple>
+            ${['x', 'y', 'z'].map(axis => this.number(axis.toUpperCase(), t.position[axis], value => this.putTransform({ position: { ...t.position, [axis]: value } })))}
+          </div>
         </div>
 
-        <div field>
+        <div vector-row>
           <label>${i18next.t('figure.label.part-size')}</label>
           <div triple>
             ${['x', 'y', 'z'].map(axis => this.number(axis.toUpperCase(), t.size[axis], value => this.putTransform({ size: { ...t.size, [axis]: value } }), 1))}
           </div>
         </div>
 
-        <div field>
-          <label>${i18next.t('figure.label.tools')}</label>
+        <div vector-row>
+          <label>${i18next.t('figure.label.rotation-degrees')}</label>
+          <div triple>
+            ${['x', 'y', 'z'].map(axis => this.number(axis.toUpperCase(), rotation[axis] ?? 0, value => this.putTransform({ rotation: { ...rotation, [axis]: value } })))}
+          </div>
+        </div>
+
+        <div vector-row>
+          <label>${i18next.t('figure.label.tools')}${this.helpButton('figure.text.tools-explained')}</label>
           <div tools>
-            <button title=${i18next.t('figure.text.center-on-x')} @click=${() => this.ask('center', 'x')}>
-              ${i18next.t('figure.button.center-x')}
+            <button
+              aria-label=${i18next.t('figure.button.center-x')}
+              title=${i18next.t('figure.text.center-on-x')}
+              @click=${() => this.ask('center', 'x')}
+            >
+              <md-icon>horizontal_distribute</md-icon>
             </button>
-            <button title=${i18next.t('figure.text.center-on-z')} @click=${() => this.ask('center', 'z')}>
-              ${i18next.t('figure.button.center-z')}
+            <button
+              aria-label=${i18next.t('figure.button.center-z')}
+              title=${i18next.t('figure.text.center-on-z')}
+              @click=${() => this.ask('center', 'z')}
+            >
+              <md-icon>vertical_align_center</md-icon>
             </button>
-            <button title=${i18next.t('figure.text.put-on-floor')} @click=${() => this.ask('floor', 'y')}>
-              ${i18next.t('figure.button.to-floor')}
+            <button
+              aria-label=${i18next.t('figure.button.to-floor')}
+              title=${i18next.t('figure.text.put-on-floor')}
+              @click=${() => this.ask('floor', 'y')}
+            >
+              <md-icon>vertical_align_bottom</md-icon>
             </button>
-            <span sep></span>
             ${['x', 'z'].map(axis => {
             // 이미 가운데면 대칭이 제자리다 — 겹친 부품이 조용히 생기지 않게 막는다
             const able = this.board ? canMirror(this.board, this.parts, this.selected, axis) : false;
             return html `
                 <button
                   ?disabled=${!able}
+                  aria-label=${i18next.t('figure.button.mirror-' + axis)}
                   title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')}
                   @click=${() => this.ask('mirror', axis)}
                 >
-                  ${i18next.t('figure.button.mirror-' + axis)}
+                  <md-icon>${axis === 'x' ? 'flip' : 'flip_camera_android'}</md-icon>
                 </button>
               `;
         })}
-            <span sep></span>
-            <button title=${i18next.t('figure.text.snap-explained')} @click=${() => this.ask('snap', 'x')}>
-              ${i18next.t('figure.button.snap')}
+            <button
+              aria-label=${i18next.t('figure.button.snap')}
+              title=${i18next.t('figure.text.snap-explained')}
+              @click=${() => this.ask('snap', 'x')}
+            >
+              <md-icon>grid_on</md-icon>
             </button>
           </div>
-        </div>
-
-        <div field>
-          <label>${i18next.t('figure.label.rotation-degrees')}</label>
-          <div triple>
-            ${['x', 'y', 'z'].map(axis => this.number(axis.toUpperCase(), rotation[axis] ?? 0, value => this.putTransform({ rotation: { ...rotation, [axis]: value } })))}
-          </div>
+          ${this.helpHint('figure.text.tools-explained')}
         </div>
       </section>
     `;
@@ -807,17 +1132,17 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         const wall = hollow?.wall ?? 0;
         const reshape = (over) => this.put({ shape: { ...(part.shape ?? {}), ...over } });
         return html `
-      <div field>
+      <div inline-field>
         <label>${i18next.t('figure.label.corner-round')}</label>
         ${this.number('', part.shape?.round ?? 0, value => reshape({ round: value }))}
       </div>
-      <div field>
+      <div inline-field>
         <label>${i18next.t('figure.label.hollow-wall')}</label>
         ${this.number('', wall, value => reshape({ hollow: value > 0 ? { ...(hollow ?? {}), wall: value } : undefined }))}
       </div>
       ${wall > 0
             ? html `
-            <div field>
+            <div inline-field>
               <label>${i18next.t('figure.label.hollow-floor')}</label>
               ${this.number('', hollow?.floor ?? wall, value => reshape({ hollow: { ...hollow, wall, floor: value } }))}
             </div>
@@ -859,11 +1184,13 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
     }
     renderSegments(part) {
         const current = part.segments ?? SEGMENT_PRESETS[1];
+        const common = SEGMENT_PRESETS.slice(0, 4);
+        const advanced = SEGMENT_PRESETS.slice(4);
         return html `
       <div field>
         <label>${i18next.t('figure.label.segments')}</label>
         <div segments>
-          ${SEGMENT_PRESETS.map(preset => {
+          ${common.map(preset => {
             const triangles = trianglesOf({ ...part, segments: preset });
             return html `
               <button seg ?on=${current === preset} @click=${() => this.put({ segments: preset })}>
@@ -875,9 +1202,13 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         })}
         </div>
 
-        <details free>
-          <summary>${i18next.t('figure.text.other-segment-count')}</summary>
-          ${this.number('', current, value => this.put({ segments: value }), 3)}
+        <details free ?open=${advanced.includes(current)}>
+          <summary>${i18next.t('figure.text.more-segment-options')}</summary>
+          <div presets>
+            ${advanced.map(preset => html `
+              <button ?on=${current === preset} @click=${() => this.put({ segments: preset })}>${preset}</button>
+            `)}
+          </div>
         </details>
       </div>
     `;
@@ -902,16 +1233,35 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
     `;
     }
     /** 견본 한 줄. 무리마다 부른다. */
+    palettePurpose(token) {
+        const purposes = {
+            'palette.primary': 'primary',
+            'palette.accent': 'accent',
+            'palette.neutral': 'neutral',
+            'palette.dark': 'dark',
+            'palette.light': 'light',
+            'palette.surface': 'surface',
+            'palette.status-danger': 'danger',
+            'palette.status-warning': 'warning',
+            'palette.status-info': 'info',
+            'palette.status-success': 'success'
+        };
+        return i18next.t(`figure.label.palette-purpose-${purposes[token ?? ''] ?? 'registered'}`);
+    }
     swatches(entries, chosen) {
-        return entries.map(([token, color]) => html `
+        return entries.map(([token, color]) => {
+            const purpose = this.palettePurpose(token);
+            return html `
         <button
           swatch
           ?on=${token === chosen}
-          title=${token}
+          aria-label=${purpose}
+          title=${purpose}
           style="--swatch:${color}"
           @click=${() => this.putMaterial({ token })}
         ></button>
-      `);
+      `;
+        });
     }
     renderMaterial(part) {
         const material = part.material ?? {};
@@ -933,7 +1283,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         <h3>${i18next.t('figure.label.part-material')}</h3>
 
         <div field>
-          <label>${i18next.t('figure.label.palette-token')}</label>
+          <label>${i18next.t('figure.label.palette-role')}</label>
           <div swatches>
             ${this.swatches(painted, material.token)}
           </div>
@@ -945,7 +1295,10 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
                 </div>
               `
             : ''}
-          <span token>${material.token ?? i18next.t('figure.label.no-color-chosen')}</span>
+          <div palette-meaning>
+            <b>${material.token ? this.palettePurpose(material.token) : i18next.t('figure.label.no-color-chosen')}</b>
+            <small>${i18next.t('figure.text.palette-purpose-explained')}</small>
+          </div>
         </div>
 
         <div field>
@@ -1063,19 +1416,23 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         return html `
       <section>
         <h3>${i18next.t('figure.label.sizing-rule')}${this.help('figure.text.sizing-' + sizing + '-explained')}</h3>
-        <select @change=${(e) => this.put({ sizing: e.target.value })}>
+        <div sizing-choices>
           ${SIZING_RULES.map(rule => html `
-              <option value=${rule} ?selected=${rule === sizing}>${i18next.t('figure.label.sizing-' + rule)}</option>
+              <button sizing-choice ?on=${rule === sizing} @click=${() => this.put({ sizing: rule })}>
+                <b>${i18next.t('figure.label.sizing-' + rule)}</b>
+                <small>${i18next.t('figure.text.sizing-' + rule + '-explained')}</small>
+              </button>
             `)}
-        </select>
-        ${sizing === 'scale' ? nothing : this.help('figure.text.sizing-costs-one-draw-call')}
-        ${sizing === 'repeat' ? this.help('figure.text.repeat-edits-the-unit') : nothing}
+        </div>
+        ${sizing === 'scale'
+            ? nothing
+            : html `<p cost>${i18next.t('figure.text.sizing-costs-one-draw-call')}</p>`}
 
         ${this.renderAnchors(part)}
 
         ${sizing === 'repeat'
             ? html `
-              <div field>
+              <div inline-field>
                 <label>${i18next.t('figure.label.repeat-axis')}</label>
                 <select
                   @change=${(e) => this.put({ repeat: { ...repeat, axis: e.target.value } })}
@@ -1083,9 +1440,10 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
                   ${['x', 'y', 'z'].map(axis => html `<option value=${axis} ?selected=${axis === repeat.axis}>${axis}</option>`)}
                 </select>
               </div>
-              <div field>
-                <label>${i18next.t('figure.label.repeat-pitch')}${this.help('figure.text.repeat-pitch-explained')}</label>
+              <div inline-field>
+                <label>${i18next.t('figure.label.repeat-pitch')}${this.helpButton('figure.text.repeat-pitch-explained')}</label>
                 ${this.number('', repeat.pitch, value => this.put({ repeat: { ...repeat, pitch: value } }), 1)}
+                ${this.helpHint('figure.text.repeat-pitch-explained')}
               </div>
               ${this.renderRepeatCount(part)}
             `
@@ -1172,6 +1530,9 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
      * 계속 고치는 사람이 매번 다시 펴야 하면 접은 것이 되레 방해가 된다.
      */
     help(key) {
+        return html `${this.helpButton(key)}${this.helpHint(key)}`;
+    }
+    helpButton(key) {
         const shown = this.opened.has(key);
         return html `
       <button
@@ -1185,18 +1546,38 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       >
         <md-icon>${shown ? 'help' : 'help_outline'}</md-icon>
       </button>
-      ${shown ? html `<p hint>${i18next.t(key)}</p>` : nothing}
     `;
     }
+    helpHint(key) {
+        return this.opened.has(key) ? html `<p hint>${i18next.t(key)}</p>` : nothing;
+    }
     renderAnchors(part) {
         const base = this.board
             ? { x: this.board.width, y: this.board.height, z: this.board.depth }
             : { x: 0, y: 0, z: 0 };
+        const nameOf = (rule, axis) => `${i18next.t(rule === 'min' || rule === 'max' ? `figure.label.anchor-${rule}-${axis}` : `figure.label.anchor-${rule}`)} (${rule})`;
+        const setAnchor = (axis, rule) => {
+            const anchor = { ...(part.anchor ?? {}) };
+            /* 「자동」은 칸을 지우는 것이다 — 빈 값을 넣어 두면 형식이 그것을 값으로 읽는다. */
+            if (rule)
+                anchor[axis] = rule;
+            else
+                delete anchor[axis];
+            this.put({ anchor: Object.keys(anchor).length ? anchor : undefined });
+        };
+        const shortNameOf = (rule, axis) => {
+            if (rule === 'auto')
+                return i18next.t('figure.label.anchor-choice-auto');
+            if (rule === 'min' || rule === 'max')
+                return i18next.t(`figure.label.anchor-choice-${rule}-${axis}`);
+            return i18next.t(`figure.label.anchor-choice-${rule}`);
+        };
         return html `
       <div field>
-        <!-- 「anchor.x」로 적힌 사유를 화면에서 찾을 수 있게 칸 이름에 그 낱말을 남긴다 -->
+        <!-- 저장 키(anchor)는 남기되, 사용자는 축마다 어느 면을 기준으로 삼는지 읽는다. -->
         <label>${i18next.t('figure.label.anchor')} (anchor)${this.help('figure.text.anchor-explained')}</label>
-        ${['x', 'y', 'z'].map(axis => {
+        <div anchor-rows>
+          ${['x', 'y', 'z'].map(axis => {
             const said = part.anchor?.[axis];
             const auto = anchorOfPart(part, base, axis);
             /*
@@ -1214,32 +1595,42 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
               `max` 는 정본에 저장되는 이름이고 서버 오류·형식 문서·게이트 사유가 다 그 이름을 쓴다.
               숨기면 안 되는 종류다. 동작이 먼저고 이름이 괄호로 따라온다.
             */
-            const nameOf = (rule) => `${i18next.t(rule === 'min' || rule === 'max' ? `figure.label.anchor-${rule}-${axis}` : `figure.label.anchor-${rule}`)} (${rule})`;
             return html `
-            <div cell>
-              <span axis>${axis}</span>
-              <select
-                @change=${(e) => {
-                const value = e.target.value;
-                const anchor = { ...(part.anchor ?? {}) };
-                /* 「자동」은 칸을 지우는 것이다 — 빈 값을 넣어 두면 형식이 그것을 값으로 읽는다. */
-                if (value) {
-                    anchor[axis] = value;
-                }
-                else {
-                    delete anchor[axis];
-                }
-                this.put({ anchor: Object.keys(anchor).length ? anchor : undefined });
-            }}
-              >
-                <option value="" ?selected=${!said}>
-                  ${i18next.t('figure.label.anchor-auto', { rule: nameOf(auto) })}
-                </option>
-                ${ANCHOR_RULES.map(rule => html `<option value=${rule} ?selected=${rule === said}>${nameOf(rule)}</option>`)}
-              </select>
+            <div anchor-row>
+              <label>${axis.toUpperCase()}축</label>
+              <div anchor-options>
+                ${['auto', 'scale', 'min', 'center', 'max', 'span'].map(rule => {
+                const selected = rule === 'auto' ? !said : rule === said;
+                const fullName = rule === 'auto' ? i18next.t('figure.label.anchor-auto', { rule: nameOf(auto, axis) }) : nameOf(rule, axis);
+                return html `
+                    <button
+                      anchor-choice
+                      ?on=${selected}
+                      aria-pressed=${selected ? 'true' : 'false'}
+                      title=${fullName}
+                      @click=${() => setAnchor(axis, rule === 'auto' ? undefined : rule)}
+                    >${shortNameOf(rule, axis)}</button>
+                  `;
+            })}
+              </div>
+              <details anchor-advanced>
+                <summary>${i18next.t('figure.label.anchor-advanced')}</summary>
+                <div anchor-options>
+                  ${ANCHOR_RULES.filter(rule => rule.startsWith('aspect-')).map(rule => html `
+                    <button
+                      anchor-choice
+                      ?on=${rule === said}
+                      aria-pressed=${rule === said ? 'true' : 'false'}
+                      title=${nameOf(rule, axis)}
+                      @click=${() => setAnchor(axis, rule)}
+                    >${i18next.t(`figure.label.anchor-choice-${rule}`)}</button>
+                  `)}
+                </div>
+              </details>
             </div>
           `;
         })}
+        </div>
       </div>
     `;
     }
@@ -1347,6 +1738,14 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], FigureInspector.prototype, "figureName", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureInspector.prototype, "figureCategory", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FigureInspector.prototype, "figureTags", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)