@things-factory/figure-ui 10.1.6 → 10.1.8

package/client/modeller/figure-inspector.ts

@@ -72,6 +72,7 @@ export 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);
@@ -96,9 +97,39 @@ export 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;
@@ -111,6 +142,42 @@ export 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;
@@ -156,6 +223,7 @@ export 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);
@@ -180,6 +248,9 @@ export 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;
@@ -200,6 +271,8 @@ export 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;
@@ -219,11 +292,163 @@ export 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;
+      }
+
       /*
         정밀 제작 도구.
 
@@ -232,13 +457,17 @@ export 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);
@@ -247,6 +476,9 @@ export 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;
@@ -256,11 +488,6 @@ export 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] {
@@ -319,7 +546,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
       */
       div[segments] {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(4, 1fr);
         gap: 4px;
       }
       /* 원 유지 · 끄기 — 고르는 값이라 분할 수와 같은 모양으로 둔다 */
@@ -377,8 +604,8 @@ export 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);
@@ -401,7 +628,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
       button[seg][on] small {
         color: inherit;
       }
-      /* 프리셋 밖의 값도 쓸 수 있다. 다만 권하는 쪽을 크게 둔다 */
+      /* 성능·실루엣 검증을 마친 프리셋만 고른다. */
       details[free] {
         margin-top: 6px;
       }
@@ -494,6 +721,26 @@ export 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;
@@ -530,6 +777,10 @@ export class FigureInspector extends localize(i18next)(LitElement) {
   /** 보드. 위치를 보드 중심 기준으로 바꾸려면 이것이 있어야 한다. */
   /** 도형의 표시 이름. 정본은 저작면이 들고, 여기서는 보여 주고 바꾼다(`figure-rename` 으로 알린다). */
   @property({ type: String }) figureName = ''
+  /** 분류 하나 — 팔레트에서 묶는 기준. */
+  @property({ type: String }) figureCategory?: string
+  /** 태그 여럿 — 분류로는 못 하는 찾기. */
+  @property({ type: Array }) figureTags?: string[]
 
   /** 펴 둔 도움말. 부품을 바꿔도 유지된다 — 매번 다시 펴게 하지 않는다. */
   @state() private opened = new Set<string>()
@@ -548,7 +799,7 @@ export 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>
@@ -567,7 +818,7 @@ export 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)}
     `
@@ -593,18 +844,20 @@ export 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 as readonly PartRole[]).map(
-          one => html`
-            <label toggle>
-              <input
-                type="checkbox"
-                .checked=${live(roles.includes(one))}
-                @change=${(e: Event) => this.toggleRole(one, (e.target as HTMLInputElement).checked)}
-              />
-              ${i18next.t('figure.label.role-' + one)}
-            </label>
-          `
-        )}
+        <div role-choices>
+          ${(PART_ROLES as readonly PartRole[]).map(
+            one => html`
+              <label toggle>
+                <input
+                  type="checkbox"
+                  .checked=${live(roles.includes(one))}
+                  @change=${(e: Event) => this.toggleRole(one, (e.target as HTMLInputElement).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')
@@ -691,11 +944,9 @@ export class FigureInspector extends localize(i18next)(LitElement) {
    *
    * 저장되는 식별자다. 배치된 보드가 이 이름으로 타입을 찾으므로 만든 뒤에는 못 바꾼다.
    */
-  private renderFigure() {
-    return html`
-      <section>
-        <h3>${i18next.t('figure.label.figure')}</h3>
-        <div field>
+  private renderFigure(compact = false) {
+    const fields = html`
+        <div inline-field>
           <label>${i18next.t('figure.label.name')}</label>
           <input
             .value=${this.figureName}
@@ -710,32 +961,99 @@ export 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: Event) => this.tellCatalog({ category: (e.target as HTMLInputElement).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: Event) => this.tellTags((e.target as HTMLInputElement).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` 가 아니다 — 전부 지우려는
+   * 저작자가 지울 방법을 잃지 않게.
+   */
+  private tellTags(raw: string) {
+    const tags = [
+      ...new Set(
+        raw
+          .split(',')
+          .map(one => one.trim().replace(/^#+/, '').trim())
+          .filter(one => one.length > 0)
+      )
+    ]
+
+    this.tellCatalog({ tags })
+  }
+
+  /** 카탈로그 값이 바뀌었다고 알린다. 정본은 저작면이 든다 — 여기서는 알리기만 한다. */
+  private tellCatalog(patch: { category?: string; tags?: string[] }) {
+    this.dispatchEvent(new CustomEvent('figure-catalog', { detail: patch, bubbles: true, composed: true }))
+  }
+
   private renderIdentity(part: FigurePart) {
     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: Event) => this.put({ name: (e.target as HTMLInputElement).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: Event) => this.changePrimitive((e.target as HTMLSelectElement).value as PrimitiveKind)}>
             ${PRIMITIVE_KINDS.map(
@@ -759,16 +1077,18 @@ export 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'] as const).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'] as const).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'] as const).map(axis =>
@@ -782,48 +1102,64 @@ export class FigureInspector extends localize(i18next)(LitElement) {
           </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'] as const).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'] as const).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'] as const).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>
     `
@@ -860,11 +1196,11 @@ export class FigureInspector extends localize(i18next)(LitElement) {
       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 })
@@ -872,7 +1208,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
       </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>
@@ -917,12 +1253,14 @@ export class FigureInspector extends localize(i18next)(LitElement) {
 
   private renderSegments(part: FigurePart) {
     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 })}>
@@ -934,9 +1272,13 @@ export 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>
     `
@@ -964,17 +1306,38 @@ export class FigureInspector extends localize(i18next)(LitElement) {
   }
 
   /** 견본 한 줄. 무리마다 부른다. */
+  private palettePurpose(token?: string) {
+    const purposes: Record<string, string> = {
+      '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'}`)
+  }
+
   private swatches(entries: [string, string][], chosen?: string) {
     return entries.map(
-      ([token, color]) => html`
+      ([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>
       `
+      }
     )
   }
 
@@ -1001,7 +1364,7 @@ export 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>
@@ -1013,7 +1376,10 @@ export 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>
@@ -1138,21 +1504,25 @@ export 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: Event) => this.put({ sizing: (e.target as HTMLSelectElement).value as never })}>
+        <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: Event) =>
@@ -1163,9 +1533,10 @@ export class FigureInspector extends localize(i18next)(LitElement) {
                   )}
                 </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)}
             `
@@ -1255,6 +1626,10 @@ export class FigureInspector extends localize(i18next)(LitElement) {
    * 계속 고치는 사람이 매번 다시 펴야 하면 접은 것이 되레 방해가 된다.
    */
   private help(key: string) {
+    return html`${this.helpButton(key)}${this.helpHint(key)}`
+  }
+
+  private helpButton(key: string) {
     const shown = this.opened.has(key)
 
     return html`
@@ -1269,20 +1644,38 @@ export class FigureInspector extends localize(i18next)(LitElement) {
       >
         <md-icon>${shown ? 'help' : 'help_outline'}</md-icon>
       </button>
-      ${shown ? html`<p hint>${i18next.t(key)}</p>` : nothing}
     `
   }
 
+  private helpHint(key: string) {
+    return this.opened.has(key) ? html`<p hint>${i18next.t(key)}</p>` : nothing
+  }
+
   private renderAnchors(part: FigurePart) {
     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: string, axis: Axis) =>
+      `${i18next.t(rule === 'min' || rule === 'max' ? `figure.label.anchor-${rule}-${axis}` : `figure.label.anchor-${rule}`)} (${rule})`
+    const setAnchor = (axis: Axis, rule?: AnchorRule) => {
+      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: AnchorRule | 'auto', axis: 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'] as const).map(axis => {
+        <div anchor-rows>
+          ${(['x', 'y', 'z'] as const).map(axis => {
           const said = part.anchor?.[axis]
           const auto = anchorOfPart(part, base, axis)
 
@@ -1301,35 +1694,42 @@ export class FigureInspector extends localize(i18next)(LitElement) {
             `max` 는 정본에 저장되는 이름이고 서버 오류·형식 문서·게이트 사유가 다 그 이름을 쓴다.
             숨기면 안 되는 종류다. 동작이 먼저고 이름이 괄호로 따라온다.
           */
-          const nameOf = (rule: string) =>
-            `${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: Event) => {
-                  const value = (e.target as HTMLSelectElement).value
-                  const anchor = { ...(part.anchor ?? {}) }
-                  /* 「자동」은 칸을 지우는 것이다 — 빈 값을 넣어 두면 형식이 그것을 값으로 읽는다. */
-                  if (value) {
-                    anchor[axis] = value as AnchorRule
-                  } 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'] as const).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>
     `
   }