@things-factory/figure-ui 10.1.204 → 10.1.205

package/client/modeller/fasten-form.ts

@@ -1,5 +1,5 @@
-import { FIGURE_FACES, figurePlaneFacingOf } from '@hatiolab/figure-model'
-import type { FigureAuthoringAction, FigureFace } from '@hatiolab/figure-model'
+import { FIGURE_FACES, figureFastenTargetAt, figurePlaneFacingOf, figureSurfaceKeptPlaceOf } from '@hatiolab/figure-model'
+import type { FigureAuthoringAction, FigureFace, FigureSurfacePlace } from '@hatiolab/figure-model'
 
 import { faceViewOf, type FaceView, type FastenMode, type FastenTarget } from './fasten-geometry.js'
 import type { FastenChange } from './figure-fasten-drawing.js'
@@ -14,10 +14,12 @@ import {
   heldBy,
   mountingPlaneOf,
   placeKeptOf,
+  surfaceOf,
   type Alignment,
   type Axis
 } from './links.js'
 import type { FigureRevision } from './revision.js'
+import { ownerOf } from './fields.js'
 
 /*
  * A fastening as it is chosen, before it is done: to what, which face, how, where across the face. The fastening window
@@ -39,6 +41,8 @@ export interface FastenForm {
   align: Partial<Record<Axis, Alignment>>
   alignMm: Partial<Record<Axis, number>>
   alignInput: Partial<Record<Axis, string>>
+  /** On a point of the target's curved surface instead of a face (ADR-0140 3.9): where, as the record says it. */
+  surface?: FigureSurfacePlace
 }
 
 export const freshFasten = (): FastenForm => ({
@@ -72,15 +76,38 @@ export function fastenTargetsOf(revision: FigureRevision, part: string): Array<{
 }
 
 /**
- * A new aim: the plane, another part, or another face of the same part. Where on the face is filled in as where the
- * part stands now, so fastening it keeps it there (`placeKeptOf`); the author changes it from there.
+ * The point of a target's curved surface on the side the part stands on now (ADR-0140 3.9): the kernel's
+ * (`figureSurfaceKeptPlaceOf`), or, the part standing on its axis, the surface's first point.
+ */
+export function surfaceKeptOf(revision: FigureRevision, part: string, target: string): FigureSurfacePlace | undefined {
+  const surface = surfaceOf(revision.asset, target)
+  if (!surface) return undefined
+  return (
+    figureSurfaceKeptPlaceOf(revision.asset, part, target, { ...revision.inputs }) ??
+    (surface.form === 'around' ? { around: 0, along: 'centre' } : { toward: { x: 0, y: 1, z: 0 } })
+  )
+}
+
+/**
+ * A new aim: the plane, another part, another face of the same part, or a point of its curved surface. Where on the
+ * face -- or the surface -- is filled in as where the part stands now, so fastening it keeps it there (`placeKeptOf`,
+ * `surfaceKeptOf`); the author changes it from there. A part aimed at a sphere, or beside a cylinder's side within its
+ * length, is aimed at the surface: it is fastened as it stands (ADR-0140 3.6).
  */
 export function aimFasten(
   revision: FigureRevision,
   part: string,
   form: FastenForm,
-  to: { plane: true } | { part: string } | { targetFace: FigureFace }
+  to: { plane: true } | { part: string } | { targetFace: FigureFace } | { surface: true }
 ): FastenForm {
+  if ('surface' in to) return { ...form, surface: surfaceKeptOf(revision, part, form.target), align: {}, alignMm: {}, alignInput: {} }
+  if ('part' in to) {
+    /* Beside its curved surface -- a sphere's anywhere, a cylinder's side within its length -- or with no face at all. */
+    const beside = figureSurfaceKeptPlaceOf(revision.asset, part, to.part, { ...revision.inputs })
+    const kept = beside ?? (!facesOf(revision.asset, to.part).length ? surfaceKeptOf(revision, part, to.part) : undefined)
+    if (kept) return { ...form, toPlane: false, target: to.part, surface: kept, align: {}, alignMm: {}, alignInput: {} }
+  }
+  form = { ...form, surface: undefined }
   /* Aimed at the plane, it meets it toward the side the placement uses -- below a ceiling -- until the author says (ADR-0140 3.11). */
   const f: FastenForm =
     'plane' in to
@@ -107,6 +134,8 @@ export function fastenChanged(
 ): FastenForm {
   const f = form
   if ('targetFace' in change) return aimFasten(revision, part, f, { targetFace: change.targetFace as FigureFace })
+  if ('onSurface' in change) return aimFasten(revision, part, f, { surface: true })
+  if ('surface' in change) return { ...f, surface: change.surface }
   if ('mode' in change) return { ...f, facing: change.mode }
   if ('gap' in change) return { ...f, gap: change.gap, gapKept: undefined }
   return {
@@ -129,6 +158,8 @@ export interface FastenPlan {
   action?: FigureAuthoringAction
   /** The face the command would meet, lit on the canvas while it is tried. */
   face?: { part: string; face: string }
+  /** On a point of the target's curved surface: which surface, about which axis, and where (ADR-0140 3.9). */
+  surface?: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }
 }
 
 export function fastenPlanOf(revision: FigureRevision, part: string, f: FastenForm): FastenPlan {
@@ -143,6 +174,19 @@ export function fastenPlanOf(revision: FigureRevision, part: string, f: FastenFo
   /* The plane takes a part standing on it or hanging below it, a wall only one standing out of it (ADR-0140 3.11). */
   const planeWay = figurePlaneFacingOf(asset)
   const mode: FastenMode = f.toPlane ? (mountingPlaneOf(asset).facings.includes(f.facing) ? f.facing : (planeWay ?? 'meet')) : f.facing
+  const surface = !f.toPlane && f.target && f.surface ? surfaceOf(asset, f.target) : undefined
+  if (surface) {
+    /* On the surface: where is the surface's own words, so no alignment goes with it (ADR-0140 3.9). */
+    const action = {
+      kind: 'attach',
+      part,
+      to: { part: f.target, surface: f.surface },
+      facing: mode,
+      ...fastenGapOf(f),
+      replace: !!heldBy(asset, part)
+    } as FigureAuthoringAction
+    return { theirFaces, targetFace, mode, alignRows: [], action, surface: { ...surface, place: f.surface! } }
+  }
   if (!aim) return { theirFaces, targetFace, mode, alignRows: [] }
   const align = alignOf(asset, aim, f.align, f.alignMm, f.alignInput)
   const view = faceViewOf(revision, part, aim, mode)
@@ -177,7 +221,8 @@ export function fastenSentenceOf(
   planeWord: string,
   say: Say
 ): string {
-  const to = form.toPlane ? planeWord : `${form.target}의 ${say('figure.label.face-' + plan.targetFace)}`
+  const where = plan.surface ? say('figure.label.surface-' + plan.surface.form) : say('figure.label.face-' + plan.targetFace)
+  const to = form.toPlane ? planeWord : `${form.target}의 ${where}`
   return say(`figure.text.fasten-sentence-${plan.mode}`, { to })
 }
 
@@ -191,3 +236,37 @@ export function fastenDetailWordsOf(form: FastenForm, say: Say): string[] {
         : [])
   ]
 }
+
+/**
+ * A part pressed on the canvas while the window is open (ADR-0140 stage 4): aimed at, on the face or the point pressed,
+ * its middle where it was pressed -- the kernel's reading of the press (`figureFastenTargetAt`), the point and normal brought into that part's own
+ * frame by the pose its body is drawn at (`at.id`, a row's copy too). The part itself, one hanging from it, or one with
+ * nothing to fasten to is not aimed at; a press on a curve there is no fastening to aims at the part alone. Each says
+ * why, by its words' key.
+ */
+export function aimFastenAt(
+  revision: FigureRevision,
+  part: string,
+  form: FastenForm,
+  at: { id: string; point?: readonly number[]; normal?: readonly number[] }
+): { form?: FastenForm; note?: 'aim-self' | 'aim-cannot' | 'target-would-loop' | 'aim-not-here'; part: string } {
+  const target = ownerOf(at.id)
+  const offered = fastenTargetsOf(revision, part).find(t => t.part === target)
+  if (target === part) return { note: 'aim-self', part: target }
+  if (!offered) return { note: 'aim-cannot', part: target }
+  if (offered.loops) return { note: 'target-would-loop', part: target }
+  const aimed = aimFasten(revision, part, form, { part: target })
+  const pose = (revision.geometry as Array<{ id: string; pose?: { r: number[][]; t: number[] } }>).find(g => g.id === at.id)?.pose
+  if (!pose || !at.point || !at.normal) return { form: aimed, part: target }
+  /* Into the part's own frame: rᵀ (p − t), and the normal by rᵀ. */
+  const own = (v: readonly number[], from: readonly number[] = [0, 0, 0]) => [0, 1, 2].map(c => [0, 1, 2].reduce((sum, i) => sum + pose.r[i]![c]! * (v[i]! - from[i]!), 0))
+  const lands = figureFastenTargetAt(revision.asset, target, own(at.point, pose.t), own(at.normal), { ...revision.inputs })
+  if ('face' in lands) {
+    /* On the face where it was pressed, as a point of a curved surface is: its middle there. */
+    const onFace = aimFasten(revision, part, { ...aimed, surface: undefined }, { targetFace: lands.face as FigureFace })
+    const at = lands.at as Partial<Record<Axis, number>>
+    return { form: { ...onFace, align: Object.fromEntries(Object.keys(at).map(a => [a, 'mm'])) as FastenForm['align'], alignMm: { ...at }, alignInput: {} }, part: target }
+  }
+  if ('surface' in lands) return { form: { ...aimed, toPlane: false, target, surface: lands.surface, align: {}, alignMm: {}, alignInput: {} }, part: target }
+  return { form: aimed, note: 'aim-not-here', part: target }
+}

package/client/modeller/figure-fasten-dialog.ts

@@ -15,6 +15,7 @@ import type { FastenChange } from './figure-fasten-drawing.js'
 import { turnsInPlace, type FastenMode } from './fasten-geometry.js'
 import {
   aimFasten,
+  aimFastenAt,
   fastenChanged,
   fastenDetailWordsOf,
   fastenFormOf,
@@ -23,16 +24,17 @@ import {
   fastenTargetsOf,
   type FastenForm
 } from './fasten-form.js'
-import { fieldWordsOf, hasInstanceSize, heldBy, mountingPlaneOf, type Alignment, type Axis } from './links.js'
+import { fieldWordsOf, hasInstanceSize, heldBy, mountingPlaneOf, surfaceOf, type Alignment, type Axis } from './links.js'
 import type { FigureRevision } from './revision.js'
 
 /** The target list's entry for the plane the figure stands by. */
 const PLANE = '__plane'
 
 /**
- * 붙이기 창: what the selected part is fastened to, on which face, how (user 2026-10-17: 「속성에는 심플하고 직관적인
- * 결과 위주로, 편집은 팝업에서 넓은 공간을 써서」). The editor stands it over the side panel with its title and close,
- * where the canvas stays in sight (2026-10-19: the standard popup, always modal, hid the 3D it was choosing for).
+ * 붙이기 창: what the selected part is fastened to, on which face, how -- chosen with room to see it, in the standard
+ * popup the editor opens (`openPopup`: its title, its close, moved by its head; no backdrop, so the canvas can be
+ * pressed while it is open) (user 2026-10-17: 「속성에는 심플하고 직관적인 결과 위주로, 편집은 팝업에서 넓은 공간을
+ * 써서」; 2026-10-18: the standard popup, not a window of its own; put back 2026-10-20).
  *
  * Everything chosen here is tried, not done: the command it comes to is told to the editor as it changes
  * (`preview-command`), and the canvas draws it. 「적용」 sends it once (`fasten-apply`), one step of the history;
@@ -46,11 +48,16 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
     SidePanelStyles,
     CommonPopupStyles,
     css`
+      /*
+        The popup holds it at its own height and cuts what is past the screen: the window scrolls itself, within the
+        screen less the popup's head and margins, 취소 · 적용 kept at its foot (below).
+      */
       :host {
         display: grid;
         gap: 16px;
         padding: var(--popup-padding, 16px);
         overflow: auto;
+        max-height: calc(100dvh - 32px - 56px);
       }
       /* The result in one line, at the top: it changes with every choice below it. */
       p[fasten-sentence] {
@@ -104,7 +111,7 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
         margin: 0;
         color: var(--md-sys-color-error);
       }
-      /* 취소 · 적용 stay in sight at the window's foot when what is above them is taller than the panel. */
+      /* 취소 · 적용 stay in sight at the window's foot when what is above them is taller than the screen. */
       ox-popup-actions {
         position: sticky;
         bottom: calc(-1 * var(--popup-padding, 16px));
@@ -126,6 +133,8 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
   @property() error = ''
 
   @state() private form?: FastenForm
+  /** Why a press on the canvas aimed at nothing, or only at the part (ADR-0140 stage 4); cleared by the next choice. */
+  @state() private aimNote = ''
   /** The command the part's own fastening comes to, as opened: tried unchanged, nothing new is said of it. */
   private opened?: string
   private told = ''
@@ -195,12 +204,17 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
         .alignMm=${f.alignMm}
         .gap=${f.gap}
         .partName=${this.partId}
+        .surfaceForm=${f.toPlane || !f.target ? '' : (surfaceOf(asset, f.target)?.form ?? '')}
+        .surface=${plan.surface}
         ?locked=${this.locked}
-        @fasten-change=${(e: CustomEvent<FastenChange>) => (this.form = fastenChanged(revision, this.partId, this.form!, e.detail))}
+        @fasten-change=${(e: CustomEvent<FastenChange>) => {
+          this.aimNote = ''
+          this.form = fastenChanged(revision, this.partId, this.form!, e.detail)
+        }}
       ></figure-fasten-drawing>`
     return html`
       ${
-        plan.aim
+        plan.aim || plan.surface
           ? html`<p fasten-sentence role="status">
               ${fastenSentenceOf(f, plan, planeWord, (key, params) => i18next.t(key, params))}
             </p>`
@@ -211,13 +225,15 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
         ${this.renderTargets(revision, f, planeWord)}
       </div>
       ${
-        plan.aim
+        plan.aim || plan.surface
           ? html`<div question="face">
                 <h4>
                   ${
                     /* The face asked is the target's, named: the part meets it by its real shape, by no face of its own. */ f.toPlane
                       ? i18next.t('figure.label.fasten-face-on-plane', { plane: planeWord })
-                      : i18next.t('figure.label.fasten-face-on-part', { part: f.target })
+                      : /* A sphere has no face to choose: where on its surface. */ plan.theirFaces.length
+                        ? i18next.t('figure.label.fasten-face-on-part', { part: f.target })
+                        : i18next.t('figure.label.fasten-face-on-surface', { part: f.target })
                   }
                 </h4>
                 ${drawing('face')}
@@ -252,6 +268,7 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
               ${/* The one it has, tried unchanged: that it stays where it is goes without saying. */ JSON.stringify(plan.action ?? null) === this.opened ? nothing : this.renderPreviewWords()}`
           : nothing
       }
+      ${this.aimNote ? html`<p hint aim-note role="status">${this.aimNote}</p>` : nothing}
       ${this.error ? html`<p error role="alert">${this.error}</p>` : nothing}
       <ox-popup-actions>
         <md-text-button slot="cancel" cancel @click=${this.cancel}>${i18next.t('figure.button.cancel')}</md-text-button>
@@ -310,11 +327,25 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
 
   private aim(part: string) {
     if (this.locked || !this.revision || !this.form) return
+    this.aimNote = ''
     const chosen = this.form.toPlane ? PLANE : this.form.target
     if (part === chosen) return
     this.form = aimFasten(this.revision, this.partId, this.form, part === PLANE ? { plane: true } : { part })
   }
 
+  /**
+   * A part pressed on the canvas while the window is open (ADR-0140 stage 4): aimed at, on the face or the point pressed
+   * -- the kernel's reading of the press (`figureFastenTargetAt`), the point and normal brought into that part's own
+   * frame by the pose it is drawn at. The part itself, or one hanging from it, is not aimed at; and a press on a curve
+   * there is no fastening to aims at the part alone. Each is said.
+   */
+  aimAt(at: { id: string; point?: number[]; normal?: number[] }) {
+    if (this.locked || !this.revision || !this.form) return
+    const aimed = aimFastenAt(this.revision, this.partId, this.form, at)
+    this.aimNote = aimed.note ? i18next.t(`figure.text.${aimed.note}`, { part: aimed.part, mine: this.partId }) : ''
+    if (aimed.form) this.form = aimed.form
+  }
+
   /** The part under the pointer or the focus in the list, for the canvas to light; the plane lights nothing. */
   private hover(part: string | null) {
     const lit = part && part !== PLANE ? part : null
@@ -410,6 +441,8 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
     this.setAttribute('role', 'dialog')
     this.setAttribute('aria-label', i18next.t('figure.label.fastening'))
     this.addEventListener('keydown', this.onKey)
+    /* The popup's fitting width is the overlay's own setting; the window asks it for room for the face and the way side by side. */
+    this.closest<HTMLElement>('ox-floating-overlay')?.style.setProperty('--overlay-center-fit-width', '640px')
   }
 
   private onKey = async (e: KeyboardEvent) => {

package/client/modeller/figure-fasten-drawing.ts

@@ -2,16 +2,23 @@ import { css, html, LitElement, nothing, svg } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import type { FigureFace } from '@hatiolab/figure-model'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
+import { figureAroundNormalOf, figureAroundOf, figureCaughtAngleOf, figureSurfaceAnglesOf, figureSurfacePlaceOf } from '@hatiolab/figure-model'
+import type { FigureFace, FigureSurfacePlace } from '@hatiolab/figure-model'
 
 import { alignmentAt, fastenLabelsOf, offsetOf, overhangOf, screenOf, type FaceView, type FastenMode } from './fasten-geometry.js'
 import type { Alignment } from './links.js'
 
 type Axis = 'x' | 'y' | 'z'
+const AXES: Axis[] = ['x', 'y', 'z']
+type SidePlace = Extract<FigureSurfacePlace, { around: number }>
+type RoundPlace = Extract<FigureSurfacePlace, { toward: unknown }>
 
 /** A change the drawing asks of the fastening form. */
 export type FastenChange =
   | { targetFace: string }
+  | { onSurface: true }
+  | { surface: FigureSurfacePlace }
   | { mode: FastenMode }
   | { axis: Axis; how: Alignment; mm?: number }
   | { gap: number }
@@ -49,7 +56,8 @@ const WHERE_H = 200
  */
 @customElement('figure-fasten-drawing')
 export class FigureFastenDrawing extends localize(i18next)(LitElement) {
-  static styles = css`
+  /* The panel's own field rows (where along a cylinder's side), as the window's other rows are. */
+  static styles = [SidePanelStyles, css`
     :host {
       display: grid;
       gap: 8px;
@@ -90,6 +98,29 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     div[modes] button:hover:not([on]):not(:disabled) {
       background: var(--md-sys-color-surface-container);
     }
+    /* Faces beyond the box's six and a curved surface: tags as the hidden faces are drawn beside the box -- one look for every face. */
+    div[face-tags] {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 6px;
+    }
+    button[face-tag] {
+      height: 20px;
+      padding: 0 10px;
+      font: inherit;
+      font-size: var(--ui-t-small, 11.5px);
+      color: var(--md-sys-color-on-surface-variant);
+      background: transparent;
+      border: 1px dashed var(--md-sys-color-outline);
+      border-radius: 10px;
+      cursor: pointer;
+    }
+    button[face-tag][on] {
+      color: var(--md-sys-color-on-primary-container);
+      background: var(--md-sys-color-primary-container);
+      border: 1px solid var(--md-sys-color-primary);
+    }
     div[modes] button[on] {
       background: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);
@@ -105,8 +136,12 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
       display: grid;
       gap: 8px;
     }
+    /* The place is drawn at its own size, never blown up past it: its words stay the window's size. */
     div[where] {
       position: relative;
+      width: 100%;
+      max-width: 360px;
+      justify-self: center;
     }
     div[where] input {
       position: absolute;
@@ -119,7 +154,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     small[off] {
       color: var(--md-sys-color-error);
     }
-  `
+  `]
 
   /** The target's name, or empty for the plane the figure stands by. */
   @property() target = ''
@@ -140,6 +175,12 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
   @property({ type: Boolean }) said = false
   /** Which of its questions it draws: the face, or the way. */
   @property() show: 'face' | 'how' = 'face'
+  /** The curved surface the target offers to be fastened to at a point (ADR-0140 3.9), if any. */
+  @property() surfaceForm: 'around' | 'toward' | '' = ''
+  /** Fastened to a point of that surface: which, about which axis, and where; undefined while on a face. */
+  @property({ attribute: false }) surface?: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }
+  /** The angles while one is dragged round the surface, told to the form when let go. */
+  @state() private turning?: { around?: number; azimuth?: number; elevation?: number }
 
   /** Where the footprint is while dragging, and what it is caught by; undefined when nothing is dragged. */
   @state() private dragged?: { at: Record<Axis, number>; caught: Partial<Record<Axis, string>> }
@@ -156,6 +197,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
 
   render() {
     if (this.show === 'how') return this.renderModes()
+    /* A part with no face (a sphere) has only its surface: its tag above, the place across the whole width. */
+    if (this.target && !this.faces.length) return html`${this.renderTarget()}<div>${this.renderWhere()}</div>`
     return html`<div face-row>${this.target ? html`<div>${this.renderTarget()}</div>` : nothing}<div>${this.renderWhere()}</div></div>`
   }
 
@@ -166,18 +209,18 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     const has = (f: string) => this.faces.includes(f)
     /* A press is a whole change, as a drag let go is: the form applies a fastening the part already has. */
     const pick = (f: string) => () => {
-      if (this.locked || !has(f) || f === this.face) return
+      if (this.locked || !has(f) || (!this.surface && f === this.face)) return
       this.change({ targetFace: f })
       this.released()
     }
     const seen = SEEN.map(([f, d]) => {
-      const on = this.face === f
+      const on = !this.surface && this.face === f
       return svg`<path face=${f} d=${d} @click=${pick(f)}
         style=${`cursor:${has(f) ? 'pointer' : 'default'};fill:${on ? 'var(--md-sys-color-primary-container)' : 'var(--md-sys-color-surface-container)'};fill-opacity:${has(f) ? 1 : 0.4};stroke:${on ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-outline)'};stroke-width:${on ? 2 : 1}`}>
         <title>${i18next.t('figure.label.face-' + f)}</title></path>`
     })
     const hidden = HIDDEN.map(([f, x, y]) => {
-      const on = this.face === f
+      const on = !this.surface && this.face === f
       return svg`<g face=${f} @click=${pick(f)} style=${`cursor:${has(f) ? 'pointer' : 'default'};opacity:${has(f) ? 1 : 0.35}`}>
         <rect x=${x - 26} y=${y - 10} width="52" height="20" rx="10"
           style=${`fill:${on ? 'var(--md-sys-color-primary-container)' : 'transparent'};stroke:${on ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-outline)'};stroke-dasharray:${on ? '' : '3 2'}`} />
@@ -186,14 +229,25 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     })
     /* A shape's faces beyond its six outer ones -- a door frame's opening -- are tags of their own under the box. */
     const others = this.faces.filter(f => !SEEN.some(([s]) => s === f) && !HIDDEN.some(([h]) => h === f))
-    return html`${svg`<svg viewBox="-20 0 ${PANEL_W} 126" role="img" aria-label=${this.target}>
+    /* A sphere has no face: no box of faces it has not, only its surface. */
+    return html`${this.faces.length
+        ? svg`<svg viewBox="-20 0 ${PANEL_W} 126" role="img" aria-label=${this.target}>
         ${seen}
         <text x="110" y="70" text-anchor="middle" font-size="12" pointer-events="none" style="fill:var(--md-sys-color-on-surface)">${this.target}</text>
         ${hidden}
-      </svg>`}
-      ${others.length
-        ? html`<div modes>
-            ${others.map(f => html`<button ?on=${f === this.face} ?disabled=${this.locked} @click=${pick(f)}>${i18next.t('figure.label.face-' + f, { defaultValue: f })}</button>`)}
+      </svg>`
+        : nothing}
+      ${others.length || this.surfaceForm
+        ? html`<div face-tags>
+            ${others.map(f => html`<button face-tag ?on=${!this.surface && f === this.face} ?disabled=${this.locked} @click=${pick(f)}>${i18next.t('figure.label.face-' + f, { defaultValue: f })}</button>`)}
+            ${this.surfaceForm
+              ? html`<button face-tag surface ?on=${!!this.surface} ?disabled=${this.locked}
+                  @click=${() => {
+                    if (this.locked || this.surface) return
+                    this.change({ onSurface: true })
+                    this.released()
+                  }}>${i18next.t('figure.label.surface-' + this.surfaceForm)}</button>`
+              : nothing}
           </div>`
         : nothing}`
   }
@@ -266,6 +320,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
   }
 
   private renderWhere() {
+    if (this.surface) return this.renderSurfaceWhere(this.surface)
     const view = this.view
     if (!view) return nothing
     const { h, v, sign } = screenOf(view.axes)
@@ -286,6 +341,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     const px = cx + sign[h] * at[h] * k - pw / 2,
       py = cy + sign[v] * at[v] * k - ph / 2
     const faceSized = view.face[h] !== undefined && view.face[v] !== undefined
+    /* An end disc is drawn as the disc it is: its overhang is measured on it (ADR-0140 3.9). */
+    const disc = !!view.measure.disc
     const fx = cx - fw / 2,
       fy = cy - fh / 2
     const ix = Math.max(fx, px),
@@ -326,7 +383,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
             @pointermove=${(ev: PointerEvent) => this.drag(ev, view, cx, cy)}
             @pointerup=${() => this.drop()} @pointercancel=${() => this.drop()}>
           ${faceSized
-            ? svg`<rect x=${fx} y=${fy} width=${fw} height=${fh} rx="4" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />`
+            ? svg`<rect x=${fx} y=${fy} width=${fw} height=${fh} rx=${disc ? fw / 2 : 4} ry=${disc ? fh / 2 : 4} style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />`
             : svg`<rect x="1" y="1" width=${W - 2} height=${H - 2} rx="8" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />`}
           <text face-name x=${labels.face.x} y=${labels.face.y} font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${faceName}${sizeWords}</text>
           ${guide(h)}${guide(v)}
@@ -429,4 +486,168 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     })
     this.released()
   }
+
+  /**
+   * Where on a curved surface (ADR-0140 3.9). A cylinder's side is seen from its end: its section a circle, the point
+   * on its rim at the angle `around`, dragged round it -- caught at every 45°, where the faces it had are named -- and
+   * along its length chosen below it. A sphere is seen from above and from the side: its point dragged round the
+   * first for the direction across its axis, along the second for how high. Nothing is told the form until let go.
+   */
+  private renderSurfaceWhere(surface: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }) {
+    const R = 56
+    const axis = surface.axis
+    const across = (['x', 'y', 'z'] as Axis[]).filter(a => a !== axis) as [Axis, Axis]
+    const { h, v, sign } = screenOf(across)
+    const deg = (r: number) => (r * 180) / Math.PI
+    const rad = (d: number) => (d * Math.PI) / 180
+    /* A direction across the axis on the circle drawn at (cx, cy): its point there, and the way back from a pointer. */
+    const onCircle = (n: number[], cx: number, cy: number, r = R) => ({ x: cx + sign[h] * n[AXES.indexOf(h)]! * r, y: cy + sign[v] * n[AXES.indexOf(v)]! * r })
+    const angleAt = (p: { x: number; y: number }, cx: number, cy: number) => {
+      const d = [0, 0, 0]
+      d[AXES.indexOf(h)] = sign[h] * (p.x - cx)
+      d[AXES.indexOf(v)] = sign[v] * (p.y - cy)
+      return figureAroundOf(axis, d)
+    }
+    const caught = (a: number) => figureCaughtAngleOf(a) % 360
+    /* The faces the four quarters were named by, round the circle: where a part fastened to one of them now stands. */
+    const FACE_AT: Record<Axis, [string, string]> = { x: ['left', 'right'], y: ['bottom', 'top'], z: ['back', 'front'] }
+    const ticks = (cx: number, cy: number) =>
+      [0, 90, 180, 270].map(t => {
+        const n = figureAroundNormalOf(axis, t)
+        const k = n.findIndex(c => Math.abs(c) > 0.5)
+        const word = i18next.t('figure.label.face-' + FACE_AT[AXES[k]!][n[k]! > 0 ? 1 : 0])
+        const p = onCircle(n, cx, cy, R + 16)
+        return svg`<text x=${p.x} y=${p.y + 4} text-anchor="middle" font-size="10" pointer-events="none" style="fill:var(--md-sys-color-on-surface-variant)">${word}</text>`
+      })
+    const marker = (p: { x: number; y: number }, cx: number, cy: number, label: string) => svg`
+      <line x1=${cx} y1=${cy} x2=${p.x} y2=${p.y} style="stroke:var(--md-sys-color-primary);stroke-dasharray:3 2" />
+      <circle marker cx=${p.x} cy=${p.y} r="8" style=${`fill:var(--md-sys-color-tertiary-container);stroke:var(--md-sys-color-on-surface);cursor:${this.locked ? 'default' : 'grab'}`} />
+      <text x=${cx} y=${Math.hypot(p.x - cx, p.y - cy) < 16 ? cy - 14 : cy + 4} text-anchor="middle" font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${label}</text>`
+    const drag = (on: (p: { x: number; y: number }) => void) => ({
+      down: (ev: PointerEvent) => {
+        if (this.locked) return
+        ;(ev.currentTarget as Element).setPointerCapture(ev.pointerId)
+        on(this.pointIn(ev))
+      },
+      move: (ev: PointerEvent) => {
+        if (!this.turning || !(ev.currentTarget as Element).hasPointerCapture?.(ev.pointerId)) return
+        on(this.pointIn(ev))
+      },
+      up: () => this.letGo(surface)
+    })
+    if (surface.form === 'around') {
+      const place = surface.place as SidePlace
+      const around = this.turning?.around ?? place.around
+      /* The section in the middle under its name, the ticks clear of both. */
+      const cx = WHERE_W / 2,
+        cy = 110
+      const d = drag(p => (this.turning = { around: caught(angleAt(p, cx, cy)) }))
+      return html`<div where surface tabindex="0" @keydown=${(ev: KeyboardEvent) => this.turnKeys(ev, surface)}>
+          ${svg`<svg viewBox="0 0 ${WHERE_W} ${WHERE_H}" role="img" aria-label=${i18next.t('figure.label.surface-seen-end', { part: this.target })}
+              @pointerdown=${d.down} @pointermove=${d.move} @pointerup=${d.up} @pointercancel=${d.up}>
+            <text x=${WHERE_W / 2} y="14" text-anchor="middle" font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${i18next.t('figure.label.surface-seen-end', { part: this.target })}</text>
+            <circle cx=${cx} cy=${cy} r=${R} style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />
+            ${ticks(cx, cy)}
+            ${marker(onCircle(figureAroundNormalOf(axis, around), cx, cy), cx, cy, `${Math.round(around)}°`)}
+          </svg>`}
+        </div>
+        ${this.renderAlong(surface.axis, place.along)}`
+    }
+    /* A sphere: its direction across its axis (the azimuth, by the same rule as a cylinder's around) and how high. */
+    const now = figureSurfaceAnglesOf(surface, surface.place) as { azimuth: number; elevation: number }
+    const azimuth = this.turning?.azimuth ?? now.azimuth
+    const elevation = this.turning?.elevation ?? now.elevation
+    const ax = 110,
+      ay = 110,
+      sx = 250,
+      sy = 110
+    const aboveAt = onCircle(figureAroundNormalOf(axis, azimuth), ax, ay, R * Math.cos(rad(elevation)) || 0)
+    const sideAt = { x: sx + R * Math.cos(rad(elevation)), y: sy - R * Math.sin(rad(elevation)) }
+    const d = drag(p => {
+      const above = Math.hypot(p.x - ax, p.y - ay) <= R + 16 && p.x < (ax + sx) / 2
+      this.turning = above
+        ? { azimuth: caught(angleAt(p, ax, ay)), elevation }
+        : { azimuth, elevation: Math.max(-90, Math.min(90, figureCaughtAngleOf(deg(Math.atan2(sy - p.y, Math.max(0, p.x - sx)))))) }
+    })
+    return html`<div where surface tabindex="0" @keydown=${(ev: KeyboardEvent) => this.turnKeys(ev, surface)}>
+      ${svg`<svg viewBox="0 0 ${WHERE_W} ${WHERE_H}" role="img" aria-label=${i18next.t('figure.label.surface-toward')}
+          @pointerdown=${d.down} @pointermove=${d.move} @pointerup=${d.up} @pointercancel=${d.up}>
+        <text x=${ax} y="14" text-anchor="middle" font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${i18next.t('figure.label.surface-seen-above')}</text>
+        <circle cx=${ax} cy=${ay} r=${R} style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />
+        ${ticks(ax, ay)}
+        ${marker(aboveAt, ax, ay, `${Math.round(azimuth)}°`)}
+        <text x=${sx + R / 2} y="14" text-anchor="middle" font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${i18next.t('figure.label.surface-seen-side')}</text>
+        <path d=${`M ${sx} ${sy - R} A ${R} ${R} 0 0 1 ${sx} ${sy + R}`} style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />
+        <line x1=${sx} y1=${sy - R} x2=${sx} y2=${sy + R} style="stroke:var(--md-sys-color-primary)" />
+        ${marker(sideAt, sx, sy, `${Math.round(elevation)}°`)}
+      </svg>`}
+    </div>`
+  }
+
+  /** Where along a cylinder's side: centred, level with an end, or a distance from the middle -- its alignment words. */
+  private renderAlong(axis: Axis, along: unknown) {
+    const how = along === 'min' || along === 'max' ? along : along && typeof along === 'object' ? 'mm' : 'centre'
+    const mm = how === 'mm' ? Number((along as { mm: number }).mm) || 0 : 0
+    const place = this.surface!.place as SidePlace
+    const tell = (next: unknown) => {
+      this.change({ surface: { around: place.around, along: next as never } })
+      this.released()
+    }
+    return html`<div form along>
+      <span>${i18next.t('figure.label.align-' + axis)}</span>
+      <select ?disabled=${this.locked} @change=${(e: Event) => {
+        const v = (e.target as HTMLSelectElement).value
+        tell(v === 'mm' ? { mm } : v)
+      }}>
+        <option value="centre" ?selected=${how === 'centre'}>${i18next.t('figure.label.align-centre')}</option>
+        <option value="min" ?selected=${how === 'min'}>${i18next.t(`figure.label.align-${axis}-min`)}</option>
+        <option value="max" ?selected=${how === 'max'}>${i18next.t(`figure.label.align-${axis}-max`)}</option>
+        <option value="mm" ?selected=${how === 'mm'}>${i18next.t('figure.label.align-mm')}</option>
+      </select>
+      ${how === 'mm'
+        ? html`<span></span><input type="number" step="any" aria-label=${i18next.t('figure.label.align-mm')} .value=${String(mm)}
+            ?disabled=${this.locked} @change=${(e: Event) => tell({ mm: Number((e.target as HTMLInputElement).value) || 0 })} />`
+        : nothing}
+    </div>`
+  }
+
+  /** A pointer's place in the drawing's own units. */
+  private pointIn(ev: PointerEvent) {
+    const svgEl = (ev.currentTarget as Element).closest('svg') as SVGSVGElement
+    const pt = svgEl.createSVGPoint()
+    pt.x = ev.clientX
+    pt.y = ev.clientY
+    return pt.matrixTransform(svgEl.getScreenCTM()!.inverse())
+  }
+
+  /** Let go: the angles dragged become the place, told to the form once. */
+  private letGo(surface: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }) {
+    const t = this.turning
+    if (!t) return
+    this.turning = undefined
+    this.change({ surface: this.placeOf(surface, t) })
+    this.released()
+  }
+
+  /** The place the angles come to: the kernel's (`figureSurfacePlaceOf`), along a side kept. */
+  private placeOf(surface: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }, t: { around?: number; azimuth?: number; elevation?: number }): FigureSurfacePlace {
+    const now = figureSurfaceAnglesOf(surface, surface.place) as { around?: number; azimuth?: number; elevation?: number }
+    const angles = surface.form === 'around' ? { around: t.around ?? now.around! } : { azimuth: t.azimuth ?? now.azimuth!, elevation: t.elevation ?? now.elevation! }
+    return figureSurfacePlaceOf(surface, surface.place, angles)
+  }
+
+  /** Arrows turn it a degree, fifteen with Shift: round the side, or round and up and down a sphere. */
+  private turnKeys(ev: KeyboardEvent, surface: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }) {
+    const step = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, 1], ArrowDown: [0, -1] }[ev.key]
+    if (!step || this.locked) return
+    ev.preventDefault()
+    ev.stopPropagation()
+    const by = ev.shiftKey ? 15 : 1
+    const now = figureSurfaceAnglesOf(surface, surface.place) as { around?: number; azimuth?: number; elevation?: number }
+    if (surface.form === 'around') {
+      if (!step[0]) return
+      this.change({ surface: this.placeOf(surface, { around: now.around! + step[0] * by }) })
+    } else this.change({ surface: this.placeOf(surface, { azimuth: now.azimuth! + step[0] * by, elevation: Math.max(-90, Math.min(90, now.elevation! + step[1] * by)) }) })
+    this.released()
+  }
 }