@things-factory/figure-ui 10.1.84 → 10.1.86

package/client/modeller/editor.ts

@@ -9,7 +9,7 @@ import { live } from 'lit/directives/live.js'
 import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figurePlaneAlignChanges, type FigurePlaneContact, type FigureClipLoss, figurePartFaceOf, type FigureFaceArea, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model'
 import type { RecipeTemplate } from './recipes.js'
 import './figure-recipe-catalog.js'
-import type { FigureAsset, FigureAuthoringAction, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigureEvaluatedShape, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement } from '@hatiolab/figure-model'
 import type { FigureProductSession } from './product-session.js'
 import { captureFigureThumbnail } from './thumbnail.js'
 import { drawableFigureParts } from './renderer.js'
@@ -17,6 +17,7 @@ import './canvas.js'
 import './figure-parts.js'
 import './figure-material-panel.js'
 import './figure-section-panel.js'
+import './figure-section-editor.js'
 import { faceHighlightOf, ghostPartsOf, previewWordsOf, rowWordsOf, type HeldPreview } from './command-preview.js'
 import { motionEndsOf, type MotionEnds } from './motion-ends.js'
 import './figure-links.js'
@@ -453,6 +454,8 @@ export class FigureEditor extends LitElement {
   @state() private hiddenParts = new Set<string>()
   /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
   @state() private live: LiveValues = NOTHING_LIVE
+  /** The part whose drawn section is open in the section editor (ADR-0100 §3.2), or null. */
+  @state() private sectionEditing: string | null = null
   /**
    * A command seen before it is done (ADR-0097 §5.5): worked out on a copy for the figure, version, part and command it
    * names, and shown only while all four are still the ones on screen. Nothing of it is saved or undone.
@@ -491,6 +494,11 @@ export class FigureEditor extends LitElement {
   private onKey = (e: KeyboardEvent) => {
     const view = this.session?.read()
     if (!view || view.loading || view.saving || !view.context || !this.isConnected) return
+    /*
+     * The section editor open takes the keys for its own: Esc cancels it, Delete deletes a point, Ctrl+Z undoes a point.
+     * Heard here first, they deselected the part, deleted the part and undid the figure's last step (2026-09-30).
+     */
+    if (this.sectionEditing) return
     const canvas = this.renderRoot.querySelector<FigureCanvas>('figure-canvas')
     const path = e.composedPath()
     const action = keyActionOf(
@@ -637,6 +645,11 @@ export class FigureEditor extends LitElement {
     }
     if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected)) this.selected = ''
     if (_changed.has('selected')) this.gizmoMode = undefined
+    /*
+     * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
+     * own Esc, the part removed, another figure opened -- it closes and lets go of the preview it held.
+     */
+    if (this.sectionEditing && this.sectionEditing !== this.selected) this.closeSectionEditor()
   }
   /** The scene toggles: the mode already shown takes the gizmo away. */
   private useGizmo(mode: 'translate' | 'rotate' | 'scale') {
@@ -703,6 +716,16 @@ export class FigureEditor extends LitElement {
   private hold(values: Record<string, number>, edit?: FigurePartEdit) {
     this.live = { values: { ...this.live.values, ...values }, ...(edit ? { edit } : this.live.edit ? { edit: this.live.edit } : {}) }
   }
+  private closeSectionEditor() {
+    this.sectionEditing = null
+    this.holdAction(null)
+  }
+  /** A command in hand, drawn and not run; `null` lets go of it and the figure as it stands is drawn again. */
+  private holdAction(action: FigureAuthoringAction | null) {
+    const { action: _, ...rest } = this.live
+    this.live = action ? { ...rest, action } : rest
+  }
+
   private changed() {
     this.requestUpdate()
     this.dispatchEvent(new CustomEvent('changed', { bubbles: true, composed: true }))
@@ -1140,6 +1163,8 @@ export class FigureEditor extends LitElement {
   }
   /** One command, one step of the history. A refusal a person can meet here is said in their words. */
   private linkCommand(action: FigureAuthoringAction) {
+    /* Committed or refused, a command in hand is let go of: the figure as it stands is drawn again. */
+    this.holdAction(null)
     this.retry = undefined
     this.notice = ''
     const hadSize = this.hasSize()
@@ -1756,6 +1781,18 @@ export class FigureEditor extends LitElement {
    * recipe, or an AI draft when the page offers one. Nothing is added until one is chosen; the type, the space, the
    * mounting face and the tags are not asked for first.
    */
+  /** The section editor over the canvas, the figure behind it drawing what the working points make. */
+  private renderSectionEditor(geometry: readonly { id: string }[]) {
+    const part = geometry.find(g => ownerOf(g.id) === this.selected) as { id: string; shape: FigureEvaluatedShape } | undefined
+    if (!part?.shape?.extrusion || part.shape.extrusion.section.kind !== 'polygon') return nothing
+    return html`<figure-section-editor
+      .body=${{ ...part, id: this.selected }}
+      .revision=${this.session?.read().revision ?? 0}
+      @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+      @command-live=${(e: CustomEvent) => this.holdAction(e.detail.action)}
+      @section-editor-close=${() => this.closeSectionEditor()}
+    ></figure-section-editor>`
+  }
   private renderStart() {
     const shapes: FigurePaletteKind[] = ['box', 'cylinder', 'plate']
     /* Where it is authored from, chosen before any part (ADR-0097): the figure's own setting, no room made up for it. */
@@ -1965,6 +2002,7 @@ export class FigureEditor extends LitElement {
             ></figure-preview>`
           : html`<div middle>
           ${view.geometry.length === 0 && !unavailable ? this.renderStart() : nothing}
+          ${this.sectionEditing && this.sectionEditing === this.selected && !unavailable ? this.renderSectionEditor(view.geometry) : nothing}
           <figure-canvas
           ?startShown=${view.geometry.length === 0 && !unavailable}
           .view=${this.view}
@@ -2018,6 +2056,8 @@ export class FigureEditor extends LitElement {
                     .body=${{ ...part, id: this.selected }}
                     ?locked=${unavailable}
                     @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+                    @command-live=${(e: CustomEvent) => this.holdAction(e.detail.action)}
+                    @section-editor-open=${() => (this.sectionEditing = this.selected)}
                   ></figure-section-panel>
                   <figure-material-panel
                     .body=${{ ...part, id: this.selected }}
@@ -2186,7 +2226,11 @@ export class FigureEditor extends LitElement {
     if (agreed) this.linkCommand(refit.step)
   }
   private renderSingle(name: string, field: FieldLike, unavailable: boolean) {
-    const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))
+    /* A drawn section's point is called by its number and axis, as the section editor calls it (ADR-0100 §2.1, Q9). */
+    const point = /^point\.p(\d+)\.([xyz])$/.exec(name)
+    const words = point
+      ? [i18next.t('figure.label.section-editor-coordinate', { point: point[1]!, axis: point[2]!.toUpperCase() })]
+      : name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))
     return html`<span ?scrub=${!unavailable} @pointerdown=${(e: PointerEvent) => this.scrub(field as never, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
       ><input
         aria-label=${field.id}

package/client/modeller/figure-parts.ts

@@ -51,20 +51,20 @@ const KIND_ICON: Record<string, string> = {
 
 /** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */
 /*
-  The palette. A plate and a wall are boxes of a shape a person reaches for, so they are starting sizes, not kinds of their own.
+  The palette: starting shapes (ADR-0100 §2.1). A plate and a wall are boxes of a shape a person reaches for, so they are
+  starting sizes, not kinds of their own. A rounded box and a box open at the top are not here: they are a box with its
+  corners rounded or an inside made, from the part's own 단면 section (§3.3), so the palette does not offer a second way.
 */
 export type FigurePaletteKind = FigurePrimitiveCreation['kind'] | 'plate' | 'wall'
 const RECIPES: Array<{ kind: FigurePaletteKind; icon: string; label: string }> = [
   { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
   { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
-  { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rounded-box' },
   { kind: 'sphere', icon: 'circle', label: 'figure.label.primitive-sphere' },
   { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
   { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
   { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
   { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
-  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' },
-  { kind: 'hollow-box', icon: 'inventory_2', label: 'figure.label.primitive-hollow-box' }
+  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
 ]
 
 @customElement('figure-parts')

package/client/modeller/figure-section-editor.ts

@@ -0,0 +1,484 @@
+import { css, html, LitElement, nothing, svg } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { live } from 'lit/directives/live.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { figureSectionSidesOf } from '@hatiolab/figure-model'
+import type { FigureAuthoringAction, FigureEvaluatedShape, FigureSectionPoint } from '@hatiolab/figure-model'
+import { SidePanelStyles } from './side-panel-styles.js'
+import { extentOf, insertAfter, issueWords, issuesOf, markedBy, movePoint, pointLabel, removePoint, type Points } from './section-drawing.js'
+
+type Axis = 'x' | 'y' | 'z'
+
+/** How the section is laid on the screen, by the axis it is pushed along: across to the right, then down. */
+const SCREEN: Record<Axis, [Axis, Axis]> = { y: ['x', 'z'], x: ['z', 'y'], z: ['x', 'y'] }
+
+/** The editor's width and room for the solid beside it: below this the two take turns. */
+export const NARROW_BELOW = 900
+
+/**
+ * 단면 편집 — a drawn section edited point by point (ADR-0100 §3.2, stage 2).
+ *
+ * The outline is drawn flat, looking along the push, in millimetres from the part's origin; the figure behind stays in
+ * view and shows the solid the working points make (`command-live`, the same preview the section panel uses), so the 2D
+ * and the 3D stand side by side. A point is dragged or typed; a side pressed gains a point in its middle; a point is
+ * deleted by its button or the Delete key, never below three. What the kernel would refuse is marked on the outline and
+ * said in the list; apply is held back, and the solid shows the last valid shape, which the caption names.
+ *
+ * Apply sends one `command` (one step of the history); cancel or Esc sends nothing and lets the preview go. The undo
+ * here is the editor's own, for the working points only. If the figure changes while the editor is open, the working
+ * points are no longer of the figure as it is, and apply is refused until the editor is opened again.
+ */
+@customElement('figure-section-editor')
+export class FigureSectionEditor extends localize(i18next)(LitElement) {
+  static styles = [SidePanelStyles, css`
+    :host {
+      position: absolute;
+      left: 12px;
+      top: 12px;
+      bottom: 12px;
+      z-index: 5;
+      display: grid;
+      grid-template-rows: auto auto minmax(0, 1fr) auto;
+      width: min(560px, calc(100% - 24px));
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 12px;
+      box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
+      overflow: hidden;
+    }
+    /* Each in its own row: the tabs are hidden on a wide screen, and without the rows named the body fell into theirs. */
+    header {
+      grid-row: 1;
+    }
+    nav[tabs] {
+      grid-row: 2;
+    }
+    div[body] {
+      grid-row: 3;
+    }
+    footer {
+      grid-row: 4;
+    }
+    header {
+      display: flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 10px 14px 4px;
+    }
+    header h2 {
+      margin: 0;
+      font-size: var(--ui-t-body);
+    }
+    header span {
+      font-size: 0.72rem;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    nav[tabs] {
+      display: none;
+      gap: 4px;
+      padding: 0 14px 6px;
+    }
+    nav[tabs] button,
+    footer button,
+    li button {
+      font: inherit;
+      font-size: 0.78rem;
+      min-height: 30px;
+      padding: 0 12px;
+      border-radius: 15px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      background: var(--md-sys-color-surface-container-lowest);
+      color: var(--md-sys-color-on-surface);
+      cursor: pointer;
+    }
+    nav[tabs] button[on] {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+    }
+    div[body] {
+      display: grid;
+      grid-template-rows: minmax(160px, 1fr) auto;
+      min-height: 0;
+      border-top: 1px solid var(--md-sys-color-outline-variant);
+    }
+    div[outline] {
+      position: relative;
+      min-height: 0;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+      touch-action: none;
+      user-select: none;
+    }
+    div[caption] {
+      position: absolute;
+      left: 8px;
+      top: 6px;
+      font-size: 0.68rem;
+      color: var(--md-sys-color-on-surface-variant);
+      pointer-events: none;
+    }
+    div[caption][last-valid] {
+      color: var(--md-sys-color-error);
+      font-weight: 600;
+    }
+    aside {
+      max-height: 34vh;
+      overflow: auto;
+      padding: 8px 14px;
+      border-top: 1px solid var(--md-sys-color-outline-variant);
+    }
+    ol[points] {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: grid;
+      gap: 4px;
+    }
+    ol[points] li {
+      display: grid;
+      grid-template-columns: 2.2em minmax(0, 1fr) minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: center;
+      padding: 2px 4px;
+      border-radius: 6px;
+    }
+    ol[points] li[selected] {
+      background: var(--md-sys-color-secondary-container);
+    }
+    ol[points] li[marked] b {
+      color: var(--md-sys-color-error);
+    }
+    ol[points] input {
+      min-width: 0;
+      font: inherit;
+    }
+    ul[issues] {
+      margin: 8px 0 0;
+      padding: 0 0 0 16px;
+      color: var(--md-sys-color-error);
+      font-size: 0.76rem;
+    }
+    small {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    footer {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 14px;
+      border-top: 1px solid var(--md-sys-color-outline-variant);
+    }
+    footer span[grow] {
+      flex: 1;
+      font-size: 0.72rem;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    footer span[grow][stale] {
+      color: var(--md-sys-color-error);
+    }
+    footer button[primary] {
+      background: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+      border-color: transparent;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    /* Too little room beside the editor for the solid: the outline and the solid take turns (§7). */
+    :host([narrow]) nav[tabs] {
+      display: flex;
+    }
+    :host([narrow][show='solid']) div[body] {
+      display: none;
+    }
+    :host([narrow][show='solid']) {
+      bottom: auto;
+    }
+  `]
+
+  /** The part and its evaluated shape as they stand when the editor opens. */
+  @property({ attribute: false }) body?: { id: string; shape: FigureEvaluatedShape }
+  /** The figure's revision now; the editor remembers the one it opened at. */
+  @property({ type: Number }) revision = 0
+  /** Narrow: the outline or the solid behind. */
+  @property({ reflect: true }) show: 'outline' | 'solid' = 'outline'
+  /** Set when the space the editor stands in leaves too little beside it to see the solid. */
+  @property({ type: Boolean, reflect: true }) narrow = false
+  private room = new ResizeObserver(([entry]) => {
+    this.narrow = (entry?.contentRect.width ?? 0) < NARROW_BELOW
+    if (!this.narrow) this.show = 'outline'
+  })
+
+  @state() private working: FigureSectionPoint[] = []
+  @state() private selected: string | null = null
+  @state() private note = ''
+  private history: FigureSectionPoint[][] = []
+  private lastValid: FigureSectionPoint[] = []
+  private openedAt = 0
+  private dragging: string | null = null
+  /** The points as they were when a drag began: kept once the point moves, so a press alone is not a step back. */
+  private dragFrom: FigureSectionPoint[] | null = null
+  private extent = 200
+
+  private get axis(): Axis {
+    return (this.body?.shape.extrusion?.axis ?? 'y') as Axis
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    const s = this.body?.shape.extrusion?.section
+    this.working = s?.kind === 'polygon' ? s.points.map(p => ({ ...p })) : []
+    this.lastValid = this.working
+    this.openedAt = this.revision
+    this.extent = extentOf(this.working, this.axis)
+    window.addEventListener('keydown', this.keys, true)
+    if (this.parentElement) this.room.observe(this.parentElement)
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.keys, true)
+    this.room.disconnect()
+    super.disconnectedCallback()
+  }
+
+  /*
+   * Heard first (capture on the window), and a key the editor takes goes no further: the scene behind listens too, and
+   * would take Esc as "select nothing" and Delete as "delete the part".
+   */
+  private keys = (e: KeyboardEvent) => {
+    const inField = (e.composedPath()[0] as HTMLElement)?.tagName === 'INPUT'
+    const take = () => (e.preventDefault(), e.stopImmediatePropagation())
+    if (e.key === 'Escape') {
+      take()
+      this.cancel()
+    } else if ((e.key === 'Delete' || e.key === 'Backspace') && !inField && this.selected) {
+      /* In a field the key deletes a character; outside, the chosen point. */
+      take()
+      this.removePoint(this.selected)
+    } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'z' && !inField) {
+      take()
+      this.back()
+    }
+  }
+
+  private get stale() {
+    return this.revision !== this.openedAt
+  }
+
+  private change(next: FigureSectionPoint[]) {
+    this.history.push(this.working)
+    this.working = next
+    this.note = ''
+    if (!issuesOf(next, this.axis).length) this.lastValid = next
+    this.preview()
+  }
+
+  private back() {
+    const before = this.history.pop()
+    if (!before) return
+    this.working = before
+    if (!issuesOf(before, this.axis).length) this.lastValid = before
+    this.preview()
+  }
+
+  /** The solid behind shows the working points, or the last valid ones while the working ones are refused. */
+  private preview() {
+    this.dispatchEvent(
+      new CustomEvent('command-live', { detail: { action: this.action(this.lastValid) }, bubbles: true, composed: true })
+    )
+  }
+
+  private action(points: Points): FigureAuthoringAction {
+    return { kind: 'set-section-points', part: this.body!.id, points: points.map(p => ({ ...p })) }
+  }
+
+  private removePoint(id: string) {
+    const next = removePoint(this.working, id)
+    if ('refused' in next) {
+      this.note = i18next.t('figure.text.section-issue-too-few')
+      return
+    }
+    this.selected = null
+    this.change(next)
+  }
+
+  private apply() {
+    if (this.stale || issuesOf(this.working, this.axis).length) return
+    this.dispatchEvent(new CustomEvent('command', { detail: { action: this.action(this.working) }, bubbles: true, composed: true }))
+    this.close()
+  }
+
+  private cancel() {
+    this.dispatchEvent(new CustomEvent('command-live', { detail: { action: null }, bubbles: true, composed: true }))
+    this.close()
+  }
+
+  private close() {
+    this.dispatchEvent(new CustomEvent('section-editor-close', { bubbles: true, composed: true }))
+  }
+
+  private svgPoint(e: PointerEvent): { h: number; v: number } {
+    const el = this.renderRoot.querySelector('svg')!
+    const pt = el.createSVGPoint()
+    pt.x = e.clientX
+    pt.y = e.clientY
+    const p = pt.matrixTransform(el.getScreenCTM()!.inverse())
+    return { h: Math.round(p.x), v: Math.round(p.y) }
+  }
+
+  render() {
+    if (!this.body) return nothing
+    const issues = issuesOf(this.working, this.axis)
+    const length = this.body.shape.extrusion ? this.body.shape.extrusion.end - this.body.shape.extrusion.start : 0
+    return html`
+      <header>
+        <h2>${i18next.t('figure.label.section-editor')}</h2>
+        <span>${this.body.id} · ${i18next.t('figure.text.section-editor-length', { length: String(Math.round(length * 1000) / 1000) })}</span>
+      </header>
+      <nav tabs>
+        ${(['outline', 'solid'] as const).map(
+          one => html`<button ?on=${this.show === one} @click=${() => (this.show = one)}>${i18next.t(`figure.label.section-editor-${one}`)}</button>`
+        )}
+      </nav>
+      <div body>
+        <div outline>${this.drawing(issues)}</div>
+        <aside>${this.list(issues)}</aside>
+      </div>
+      <footer>
+        <button ?disabled=${!this.history.length} @click=${() => this.back()}>${i18next.t('figure.button.section-editor-back')}</button>
+        <span grow ?stale=${this.stale}>
+          ${this.stale ? i18next.t('figure.text.section-editor-stale') : i18next.t('figure.text.section-editor-hint')}
+        </span>
+        <button @click=${() => this.cancel()}>${i18next.t('figure.button.section-editor-cancel')}</button>
+        <button primary ?disabled=${this.stale || issues.length > 0} @click=${() => this.apply()}>${i18next.t('figure.button.section-editor-apply')}</button>
+      </footer>
+    `
+  }
+
+  private drawing(issues: ReturnType<typeof issuesOf>) {
+    const [h, v] = SCREEN[this.axis]
+    const e = this.extent
+    const marked = markedBy(issues)
+    const pts = this.working
+    const sides = pts.length >= 2 ? figureSectionSidesOf({ kind: 'polygon', points: pts }, this.axis) : []
+    const at = (id: string) => pts.find(p => p.id === id)!
+    const grid = Math.max(10, Math.pow(10, Math.floor(Math.log10(e))) / 2)
+    const lines: number[] = []
+    for (let g = -Math.floor(e / grid) * grid; g <= e; g += grid) lines.push(g)
+    const invalid = issues.length > 0
+    return html`<div caption ?last-valid=${invalid}>
+        ${invalid ? i18next.t('figure.text.section-editor-last-valid') : i18next.t('figure.text.section-editor-units', { h: h.toUpperCase(), v: v.toUpperCase() })}
+      </div>
+      <svg
+        viewBox=${`${-e} ${-e} ${2 * e} ${2 * e}`}
+        role="img"
+        aria-label=${i18next.t('figure.label.section-editor')}
+        @pointermove=${(ev: PointerEvent) => {
+          if (!this.dragging) return
+          if (this.dragFrom) this.history.push(this.dragFrom), (this.dragFrom = null)
+          const p = this.svgPoint(ev)
+          this.working = movePoint(this.working, this.dragging, { [h]: p.h, [v]: p.v })
+          if (!issuesOf(this.working, this.axis).length) this.lastValid = this.working
+          this.preview()
+        }}
+        @pointerup=${() => ((this.dragging = null), (this.dragFrom = null))}
+        @pointerleave=${() => ((this.dragging = null), (this.dragFrom = null))}
+      >
+        ${svg`${lines.map(g => svg`<line x1=${g} y1=${-e} x2=${g} y2=${e} stroke="var(--md-sys-color-outline-variant)" stroke-width=${e / 400} opacity="0.5" />
+          <line x1=${-e} y1=${g} x2=${e} y2=${g} stroke="var(--md-sys-color-outline-variant)" stroke-width=${e / 400} opacity="0.5" />`)}
+        <line x1=${-e} y1="0" x2=${e} y2="0" stroke="var(--md-sys-color-outline)" stroke-width=${e / 250} />
+        <line x1="0" y1=${-e} x2="0" y2=${e} stroke="var(--md-sys-color-outline)" stroke-width=${e / 250} />
+        <text x=${e * 0.92} y=${-e * 0.02} font-size=${e / 18} fill="var(--md-sys-color-on-surface-variant)">${h.toUpperCase()}</text>
+        <text x=${e * 0.02} y=${e * 0.95} font-size=${e / 18} fill="var(--md-sys-color-on-surface-variant)">${v.toUpperCase()}</text>
+        ${invalid && this.lastValid.length
+          ? svg`<polygon points=${this.lastValid.map(p => `${p[h]},${p[v]}`).join(' ')} fill="none" stroke="var(--md-sys-color-outline)" stroke-dasharray=${`${e / 50} ${e / 70}`} stroke-width=${e / 250} />`
+          : nothing}
+        <polygon points=${pts.map(p => `${p[h]},${p[v]}`).join(' ')} fill=${invalid ? 'none' : 'color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent)'} stroke="none" />
+        ${sides.map(s => {
+          const a = at(s.from!),
+            b = at(s.to!)
+          const bad = marked.sides.has(s.id)
+          return svg`<line x1=${a[h]} y1=${a[v]} x2=${b[h]} y2=${b[v]}
+            stroke=${bad ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-primary)'} stroke-width=${e / (bad ? 90 : 130)}
+            stroke-dasharray=${bad ? `${e / 40} ${e / 80}` : ''} />
+            <line side=${s.id} x1=${a[h]} y1=${a[v]} x2=${b[h]} y2=${b[v]} stroke="transparent" stroke-width=${e / 25} style="cursor: copy"
+              @pointerdown=${(ev: PointerEvent) => {
+                ev.stopPropagation()
+                const made = insertAfter(this.working, s.from!, this.axis)
+                this.change(made.points)
+                this.selected = made.id
+              }}><title>${i18next.t('figure.text.section-editor-add-here', { a: pointLabel(s.from!), b: pointLabel(s.to!) })}</title></line>`
+        })}
+        ${pts.map(p => {
+          const bad = marked.points.has(p.id),
+            on = this.selected === p.id
+          return svg`<g point=${p.id} style="cursor: grab"
+              @pointerdown=${(ev: PointerEvent) => {
+                ev.stopPropagation()
+                ;(ev.target as Element).setPointerCapture?.(ev.pointerId)
+                this.dragFrom = this.working
+                this.selected = p.id
+                this.dragging = p.id
+              }}>
+            <circle cx=${p[h]} cy=${p[v]} r=${e / (on ? 28 : 36)} fill=${bad ? 'var(--md-sys-color-error)' : on ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-surface)'}
+              stroke=${bad ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-primary)'} stroke-width=${e / 250} />
+            <text x=${p[h]! + e / 22} y=${p[v]! - e / 22} font-size=${e / 16} font-weight="600"
+              fill=${bad ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-on-surface)'}>${pointLabel(p.id)}</text>
+          </g>`
+        })}`}
+      </svg>`
+  }
+
+  private list(issues: ReturnType<typeof issuesOf>) {
+    const [h, v] = SCREEN[this.axis]
+    const marked = markedBy(issues)
+    return html`<ol points aria-label=${i18next.t('figure.label.section-editor-points')}>
+        ${this.working.map(
+          p => html`<li ?selected=${this.selected === p.id} ?marked=${marked.points.has(p.id)} @focusin=${() => (this.selected = p.id)}>
+            <b>${pointLabel(p.id)}</b>
+            ${([h, v] as const).map(
+              axis => html`<input
+                type="number"
+                step="any"
+                inputmode="decimal"
+                aria-label=${i18next.t('figure.label.section-editor-coordinate', { point: pointLabel(p.id), axis: axis.toUpperCase() })}
+                .value=${live(String(p[axis] ?? ''))}
+                @change=${(ev: Event) => {
+                  const input = ev.target as HTMLInputElement
+                  const value = Number(input.value)
+                  if (input.value === '' || !Number.isFinite(value)) {
+                    input.value = String(p[axis] ?? '')
+                    return
+                  }
+                  this.change(movePoint(this.working, p.id, { [axis]: value }))
+                }}
+              />`
+            )}
+            <button
+              ?disabled=${this.working.length <= 3}
+              title=${this.working.length <= 3 ? i18next.t('figure.text.section-issue-too-few') : ''}
+              aria-label=${i18next.t('figure.button.section-editor-remove', { point: pointLabel(p.id) })}
+              @click=${() => this.removePoint(p.id)}
+            >
+              ${i18next.t('figure.button.section-editor-remove', { point: pointLabel(p.id) })}
+            </button>
+          </li>`
+        )}
+      </ol>
+      ${this.note ? html`<small role="status">${this.note}</small>` : nothing}
+      ${issues.length
+        ? html`<ul issues role="alert">
+            ${issues.map(i => {
+              const w = issueWords(i, this.working, this.axis)
+              return html`<li>${i18next.t(w.key, w.params)}</li>`
+            })}
+          </ul>`
+        : nothing}`
+  }
+}