@things-factory/figure-ui 10.1.181 → 10.1.183

package/dist-client/modeller/figure-fasten-dialog.js

@@ -0,0 +1,418 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import '@operato/input/ox-input-select-buttons.js';
+import '@operato/popup/ox-popup-actions.js';
+import { CommonPopupStyles } from '@operato/styles';
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
+import './figure-fasten-drawing.js';
+import { turnsInPlace } from './fasten-geometry.js';
+import { aimFasten, fastenChanged, fastenDetailWordsOf, fastenFormOf, fastenPlanOf, fastenSentenceOf, fastenTargetsOf } from './fasten-form.js';
+import { fieldWordsOf, hasInstanceSize, heldBy } from './links.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 -- chosen with room to see it, in the standard
+ * popup the editor opens (`openPopup`: its title, its close, moved by its head) (user 2026-10-17: 「속성에는 심플하고
+ * 직관적인 결과 위주로, 편집은 팝업에서 넓은 공간을 써서」; 2026-10-18: the standard popup, not a window of its own).
+ *
+ * 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;
+ * 「취소」 and Esc close it with nothing written (`fasten-cancel`). A row of the target list under the pointer or the
+ * arrows asks the canvas to light that part (`fasten-hover`). The window is the only one telling the preview while it
+ * is open; the editor keeps the panel quiet.
+ */
+let FigureFastenDialog = class FigureFastenDialog extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** The part being fastened. */
+        this.partId = '';
+        this.locked = false;
+        /** What the command would do, in words (the editor works it out: `command-preview.ts`). */
+        this.previewWords = [];
+        /** Why the last 「적용」 was refused, in the editor's words. */
+        this.error = '';
+        this.told = '';
+        this.hovered = null;
+        this.onKey = async (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                e.preventDefault();
+                this.cancel();
+                return;
+            }
+            if (e.key !== 'Enter' || e.isComposing)
+                return;
+            const path = e.composedPath();
+            const target = path[0];
+            /* On a chip of the list Enter applies, as it does anywhere in the window; a chip is chosen by Space or a press. */
+            const onChip = path.some(n => n.localName === 'ox-input-select-buttons');
+            /* A button, a fold or a list of options does what Enter does to it. */
+            if (!onChip &&
+                (target.localName === 'button' ||
+                    target.localName === 'summary' ||
+                    target.localName === 'select' ||
+                    /^md-.*button$/.test(target.localName)))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            /* A number typed and Enter: the number first, as leaving the field would take it. */
+            if (target.localName === 'input')
+                target.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+            await this.updateComplete;
+            this.apply();
+        };
+        this.apply = () => {
+            const plan = this.revision && this.form ? fastenPlanOf(this.revision, this.partId, this.form) : undefined;
+            if (this.locked || !plan?.action)
+                return;
+            this.dispatchEvent(new CustomEvent('fasten-apply', { detail: { action: plan.action }, bubbles: true, composed: true }));
+        };
+        this.cancel = () => {
+            this.dispatchEvent(new CustomEvent('fasten-cancel', { bubbles: true, composed: true }));
+        };
+    }
+    static { this.styles = [
+        SidePanelStyles,
+        CommonPopupStyles,
+        css `
+      :host {
+        display: grid;
+        gap: 16px;
+        padding: var(--popup-padding, 16px);
+        overflow: auto;
+      }
+      /* The result in one line, at the top: it changes with every choice below it. */
+      p[fasten-sentence] {
+        margin: 0;
+        font-size: var(--ui-t-body, 13px);
+        font-weight: 600;
+      }
+      div[question] {
+        display: grid;
+        align-content: start;
+        gap: 6px;
+      }
+      h4 {
+        margin: 0;
+        font-size: var(--ui-t-small, 11.5px);
+        font-weight: 600;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      p[loops] {
+        margin: 0;
+      }
+      details[fasten-detail] {
+        margin: 0;
+      }
+      details[fasten-detail] > div[form] {
+        margin-top: 8px;
+        max-width: 320px;
+      }
+      span[fasten-summary] {
+        opacity: 0.8;
+      }
+      ul[preview-words] {
+        margin: 0;
+        padding: 8px 12px 8px 26px;
+        border-radius: 6px;
+        background: var(--md-sys-color-surface-container, #8881);
+        display: grid;
+        gap: 4px;
+      }
+      p[preview-words] {
+        margin: 0;
+        padding: 8px 12px;
+        border-radius: 6px;
+        background: var(--md-sys-color-surface-container, #8881);
+      }
+      p[error] {
+        margin: 0;
+        color: var(--md-sys-color-error);
+      }
+    `
+    ]; }
+    willUpdate() {
+        /* Opened on what the part has now; another part is another window's. */
+        if (this.revision && this.partId && this.partId !== this.loadedFor) {
+            this.loadedFor = this.partId;
+            this.form = fastenFormOf(this.revision, this.partId);
+            this.opened = JSON.stringify(fastenPlanOf(this.revision, this.partId, this.form).action ?? null);
+        }
+    }
+    async firstUpdated() {
+        /* Into the list, on what is chosen, so the arrows go from there. */
+        const list = this.renderRoot.querySelector('ox-input-select-buttons');
+        await list?.updateComplete;
+        const chips = list?.shadowRoot?.querySelectorAll('md-filter-chip');
+        ([...(chips ?? [])].find(c => c.hasAttribute('selected')) ?? chips?.[0])?.focus();
+    }
+    updated() {
+        const plan = this.revision && this.form ? fastenPlanOf(this.revision, this.partId, this.form) : undefined;
+        const candidate = plan?.action ? { action: plan.action, ...(plan.face ? { face: plan.face } : {}) } : null;
+        const said = JSON.stringify(candidate);
+        if (said === this.told)
+            return;
+        this.told = said;
+        this.dispatchEvent(new CustomEvent('preview-command', { detail: candidate, bubbles: true, composed: true }));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        /* Closed: what it showed goes with it. */
+        if (this.told && this.told !== 'null')
+            this.dispatchEvent(new CustomEvent('preview-command', { detail: null, bubbles: true, composed: true }));
+        this.told = '';
+        this.hover(null);
+    }
+    render() {
+        const revision = this.revision;
+        const f = this.form;
+        if (!revision || !f)
+            return nothing;
+        const asset = revision.asset;
+        const held = !!heldBy(asset, this.partId);
+        const plan = fastenPlanOf(revision, this.partId, f);
+        const planeWord = i18next.t('figure.label.resize-place-' + (asset.placement ?? 'floor'));
+        const modes = f.toPlane
+            ? ['meet']
+            : ['meet', 'flush', ...(turnsInPlace(asset, this.partId) ? ['centre'] : [])];
+        const detail = fastenDetailWordsOf(f, (key, params) => i18next.t(key, params));
+        const drawing = (show) => html `<figure-fasten-drawing
+        show=${show}
+        .target=${f.toPlane ? '' : f.target}
+        .planeWord=${planeWord}
+        .faces=${plan.theirFaces}
+        .face=${plan.targetFace}
+        .modes=${modes}
+        .mode=${plan.mode}
+        .view=${plan.view}
+        .align=${f.align}
+        .alignMm=${f.alignMm}
+        .gap=${f.gap}
+        .partName=${this.partId}
+        ?locked=${this.locked}
+        @fasten-change=${(e) => (this.form = fastenChanged(revision, this.partId, this.form, e.detail))}
+      ></figure-fasten-drawing>`;
+        return html `
+      ${plan.aim
+            ? html `<p fasten-sentence role="status">
+              ${fastenSentenceOf(this.partId, f, plan, planeWord, (key, params) => i18next.t(key, params))}
+            </p>`
+            : html `<p hint fasten-sentence>${i18next.t('figure.text.fasten-target-first')}</p>`}
+      <div question="what">
+        <h4 id="what">${i18next.t('figure.label.fasten-what')}</h4>
+        ${this.renderTargets(revision, f, planeWord)}
+      </div>
+      ${plan.aim
+            ? html `<div question="face">
+                <h4>
+                  ${
+            /* The face asked is the target's, named: the part's own face follows from it. */ f.toPlane
+                ? i18next.t('figure.label.fasten-face-on-plane', { plane: planeWord })
+                : i18next.t('figure.label.fasten-face-on-part', { part: f.target })}
+                </h4>
+                ${drawing('face')}
+              </div>
+              ${modes.length > 1
+                ? html `<div question="how">
+                      <h4>${i18next.t('figure.label.fasten-how')}</h4>
+                      ${drawing('how')}
+                    </div>`
+                : nothing}
+              <div question="detail">
+                <details fasten-detail>
+                  <summary>
+                    ${i18next.t('figure.label.fasten-detail')}${detail.length ? html ` · <span fasten-summary>${detail.join(' · ')}</span>` : nothing}
+                  </summary>
+                  ${plan.alignRows.length ? this.renderAlignment(plan.alignRows) : nothing}
+                  <div form>
+                    <span>${i18next.t('figure.label.gap')}</span>
+                    <input
+                      gap
+                      type="number"
+                      step="any"
+                      .value=${f.gapKept !== undefined ? '' : String(f.gap)}
+                      placeholder=${f.gapKept !== undefined ? i18next.t('figure.label.follows-expression') : ''}
+                      @change=${(e) => this.set({ gap: Number(e.target.value) || 0, gapKept: undefined })}
+                    />
+                    <span>${i18next.t('figure.label.twist')}</span>
+                    <input
+                      twist
+                      type="number"
+                      step="any"
+                      .value=${String(f.twist)}
+                      @change=${(e) => this.set({ twist: Number(e.target.value) || 0 })}
+                    />
+                  </div>
+                </details>
+              </div>
+              ${ /* 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.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>
+        <md-filled-button slot="confirm" apply ?disabled=${this.locked || !plan.action} @click=${this.apply}>
+          ${i18next.t(held ? 'figure.button.apply' : 'figure.button.fasten')}
+        </md-filled-button>
+      </ox-popup-actions>
+    `;
+    }
+    /**
+     * What to fasten to: the plane and the other parts, as the standard choice chips. The arrows move among them and
+     * the canvas lights the part under the focus or the pointer; a part hanging from this one is not offered, and why is
+     * said under them.
+     */
+    renderTargets(revision, f, planeWord) {
+        const chosen = f.toPlane ? PLANE : f.target;
+        const targets = fastenTargetsOf(revision, this.partId);
+        const chipOf = (e) => e.composedPath().find(n => n.localName === 'md-filter-chip')?.getAttribute('data-value') ?? null;
+        return html `<ox-input-select-buttons
+        targets
+        aria-labelledby="what"
+        .options=${[{ value: PLANE, display: planeWord }, ...targets.filter(t => !t.loops).map(t => ({ value: t.part, display: t.part }))]}
+        .value=${chosen || undefined}
+        ?disabled=${this.locked}
+        @change=${(e) => {
+            /* A chip pressed again lets go of it; what to fasten to is always one thing once chosen. */
+            if (e.detail)
+                this.aim(e.detail);
+            else
+                e.target.value = chosen || undefined;
+        }}
+        @pointerover=${(e) => this.hover(chipOf(e))}
+        @pointerleave=${() => this.hover(null)}
+        @focusin=${(e) => this.hover(chipOf(e))}
+        @keyup=${(e) => {
+            /* The arrows move the focus among the chips inside the list, which tells nothing outside it: read where it is. */
+            const at = e.currentTarget.shadowRoot?.activeElement;
+            if (at?.localName === 'md-filter-chip')
+                this.hover(at.getAttribute('data-value'));
+        }}
+      ></ox-input-select-buttons>
+      ${targets.filter(t => t.loops).map(t => html `<p hint loops target=${t.part}>${i18next.t('figure.text.target-would-loop', { part: t.part, mine: this.partId })}</p>`)}`;
+    }
+    aim(part) {
+        if (this.locked || !this.revision || !this.form)
+            return;
+        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 });
+    }
+    /** The part under the pointer or the focus in the list, for the canvas to light; the plane lights nothing. */
+    hover(part) {
+        const lit = part && part !== PLANE ? part : null;
+        if (lit === this.hovered)
+            return;
+        this.hovered = lit;
+        const face = lit && this.revision && this.form
+            ? fastenPlanOf(this.revision, this.partId, aimFasten(this.revision, this.partId, this.form, { part: lit }))
+                .targetFace
+            : undefined;
+        this.dispatchEvent(new CustomEvent('fasten-hover', { detail: lit ? { part: lit, face } : null, bubbles: true, composed: true }));
+    }
+    set(change) {
+        this.form = { ...this.form, ...change };
+    }
+    /**
+     * Where on the target face the part sits, on the axes the drawing cannot set: centred, level with the target's edge on
+     * either side, a distance off centre, a share of the figure's size, or the position field it follows.
+     */
+    renderAlignment(axes) {
+        const f = this.form;
+        const set = (axis, how) => this.set({ align: { ...f.align, [axis]: how } });
+        const setMm = (axis, mm) => this.set({ alignMm: { ...f.alignMm, [axis]: mm } });
+        return html `<div form>
+      ${axes.map(({ axis, edges }) => {
+            const how = f.align[axis] === 'min' || f.align[axis] === 'max'
+                ? edges
+                    ? f.align[axis]
+                    : 'centre'
+                : (f.align[axis] ?? 'centre');
+            return html `<span>${i18next.t('figure.label.align-' + axis)}</span>
+          <select @change=${(e) => set(axis, e.target.value)}>
+            <option value="centre" ?selected=${how === 'centre'}>${i18next.t('figure.label.align-centre')}</option>
+            ${edges
+                ? html `<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>`
+                : nothing}
+            ${f.alignInput?.[axis]
+                ? html `<option value="input" ?selected=${how === 'input'}>
+                    ${i18next.t('figure.label.align-input', { field: fieldWordsOf(f.alignInput[axis], key => i18next.t(key)) })}
+                  </option>`
+                : nothing}
+            <option value="mm" ?selected=${how === 'mm'}>${i18next.t('figure.label.align-mm')}</option>
+            ${this.revision && hasInstanceSize(this.revision.asset, axis)
+                ? html `<option value="share" ?selected=${how === 'share'}>
+                    ${i18next.t('figure.label.align-share')}
+                  </option>`
+                : nothing}
+          </select>
+          ${how === 'mm' || how === 'share'
+                ? html `<span></span
+                  ><input
+                    type="number"
+                    step="any"
+                    aria-label=${i18next.t('figure.label.align-mm')}
+                    .value=${String(f.alignMm[axis] ?? 0)}
+                    @change=${(e) => setMm(axis, Number(e.target.value) || 0)}
+                  />`
+                : nothing}`;
+        })}
+    </div>`;
+    }
+    renderPreviewWords() {
+        if (this.previewWords.length === 1)
+            return html `<p preview-words role="status">${this.previewWords[0]}</p>`;
+        return this.previewWords.length
+            ? html `<ul preview-words role="status">
+          ${this.previewWords.map(line => html `<li>${line}</li>`)}
+        </ul>`
+            : nothing;
+    }
+    /** Enter applies what is chosen, Esc closes with nothing written; a key the window does not take goes on. */
+    connectedCallback() {
+        super.connectedCallback();
+        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('ox-floating-overlay')?.style.setProperty('--overlay-center-fit-width', '640px');
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureFastenDialog.prototype, "revision", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureFastenDialog.prototype, "partId", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureFastenDialog.prototype, "locked", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureFastenDialog.prototype, "previewWords", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureFastenDialog.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureFastenDialog.prototype, "form", void 0);
+FigureFastenDialog = __decorate([
+    customElement('figure-fasten-dialog')
+], FigureFastenDialog);
+export { FigureFastenDialog };
+//# sourceMappingURL=figure-fasten-dialog.js.map

package/dist-client/modeller/figure-fasten-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure-fasten-dialog.js","sourceRoot":"","sources":["../../client/modeller/figure-fasten-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport '@operato/input/ox-input-select-buttons.js'\nimport '@operato/popup/ox-popup-actions.js'\nimport { CommonPopupStyles } from '@operato/styles'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\n\nimport './figure-fasten-drawing.js'\nimport type { FastenChange } from './figure-fasten-drawing.js'\nimport { turnsInPlace, type FastenMode } from './fasten-geometry.js'\nimport {\n  aimFasten,\n  fastenChanged,\n  fastenDetailWordsOf,\n  fastenFormOf,\n  fastenPlanOf,\n  fastenSentenceOf,\n  fastenTargetsOf,\n  type FastenForm\n} from './fasten-form.js'\nimport { fieldWordsOf, hasInstanceSize, heldBy, type Alignment, type Axis } from './links.js'\nimport type { FigureRevision } from './revision.js'\n\n/** The target list's entry for the plane the figure stands by. */\nconst PLANE = '__plane'\n\n/**\n * 붙이기 창: what the selected part is fastened to, on which face, how -- chosen with room to see it, in the standard\n * popup the editor opens (`openPopup`: its title, its close, moved by its head) (user 2026-10-17: 「속성에는 심플하고\n * 직관적인 결과 위주로, 편집은 팝업에서 넓은 공간을 써서」; 2026-10-18: the standard popup, not a window of its own).\n *\n * Everything chosen here is tried, not done: the command it comes to is told to the editor as it changes\n * (`preview-command`), and the canvas draws it. 「적용」 sends it once (`fasten-apply`), one step of the history;\n * 「취소」 and Esc close it with nothing written (`fasten-cancel`). A row of the target list under the pointer or the\n * arrows asks the canvas to light that part (`fasten-hover`). The window is the only one telling the preview while it\n * is open; the editor keeps the panel quiet.\n */\n@customElement('figure-fasten-dialog')\nexport class FigureFastenDialog extends localize(i18next)(LitElement) {\n  static styles = [\n    SidePanelStyles,\n    CommonPopupStyles,\n    css`\n      :host {\n        display: grid;\n        gap: 16px;\n        padding: var(--popup-padding, 16px);\n        overflow: auto;\n      }\n      /* The result in one line, at the top: it changes with every choice below it. */\n      p[fasten-sentence] {\n        margin: 0;\n        font-size: var(--ui-t-body, 13px);\n        font-weight: 600;\n      }\n      div[question] {\n        display: grid;\n        align-content: start;\n        gap: 6px;\n      }\n      h4 {\n        margin: 0;\n        font-size: var(--ui-t-small, 11.5px);\n        font-weight: 600;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      p[loops] {\n        margin: 0;\n      }\n      details[fasten-detail] {\n        margin: 0;\n      }\n      details[fasten-detail] > div[form] {\n        margin-top: 8px;\n        max-width: 320px;\n      }\n      span[fasten-summary] {\n        opacity: 0.8;\n      }\n      ul[preview-words] {\n        margin: 0;\n        padding: 8px 12px 8px 26px;\n        border-radius: 6px;\n        background: var(--md-sys-color-surface-container, #8881);\n        display: grid;\n        gap: 4px;\n      }\n      p[preview-words] {\n        margin: 0;\n        padding: 8px 12px;\n        border-radius: 6px;\n        background: var(--md-sys-color-surface-container, #8881);\n      }\n      p[error] {\n        margin: 0;\n        color: var(--md-sys-color-error);\n      }\n    `\n  ]\n\n  /** The figure at the version on screen. */\n  @property({ attribute: false }) revision?: FigureRevision\n  /** The part being fastened. */\n  @property() partId = ''\n  @property({ type: Boolean }) locked = false\n  /** What the command would do, in words (the editor works it out: `command-preview.ts`). */\n  @property({ attribute: false }) previewWords: string[] = []\n  /** Why the last 「적용」 was refused, in the editor's words. */\n  @property() error = ''\n\n  @state() private form?: FastenForm\n  /** The command the part's own fastening comes to, as opened: tried unchanged, nothing new is said of it. */\n  private opened?: string\n  private told = ''\n  private loadedFor?: string\n  private hovered: string | null = null\n\n  willUpdate() {\n    /* Opened on what the part has now; another part is another window's. */\n    if (this.revision && this.partId && this.partId !== this.loadedFor) {\n      this.loadedFor = this.partId\n      this.form = fastenFormOf(this.revision, this.partId)\n      this.opened = JSON.stringify(fastenPlanOf(this.revision, this.partId, this.form).action ?? null)\n    }\n  }\n\n  async firstUpdated() {\n    /* Into the list, on what is chosen, so the arrows go from there. */\n    const list = this.renderRoot.querySelector<HTMLElement & { updateComplete?: Promise<unknown> }>(\n      'ox-input-select-buttons'\n    )\n    await list?.updateComplete\n    const chips = list?.shadowRoot?.querySelectorAll<HTMLElement>('md-filter-chip')\n    ;([...(chips ?? [])].find(c => c.hasAttribute('selected')) ?? chips?.[0])?.focus()\n  }\n\n  updated() {\n    const plan = this.revision && this.form ? fastenPlanOf(this.revision, this.partId, this.form) : undefined\n    const candidate = plan?.action ? { action: plan.action, ...(plan.face ? { face: plan.face } : {}) } : null\n    const said = JSON.stringify(candidate)\n    if (said === this.told) return\n    this.told = said\n    this.dispatchEvent(new CustomEvent('preview-command', { detail: candidate, bubbles: true, composed: true }))\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    /* Closed: what it showed goes with it. */\n    if (this.told && this.told !== 'null')\n      this.dispatchEvent(new CustomEvent('preview-command', { detail: null, bubbles: true, composed: true }))\n    this.told = ''\n    this.hover(null)\n  }\n\n  render() {\n    const revision = this.revision\n    const f = this.form\n    if (!revision || !f) return nothing\n    const asset = revision.asset\n    const held = !!heldBy(asset, this.partId)\n    const plan = fastenPlanOf(revision, this.partId, f)\n    const planeWord = i18next.t('figure.label.resize-place-' + (asset.placement ?? 'floor'))\n    const modes: FastenMode[] = f.toPlane\n      ? ['meet']\n      : ['meet', 'flush', ...(turnsInPlace(asset, this.partId) ? (['centre'] as FastenMode[]) : [])]\n    const detail = fastenDetailWordsOf(f, (key, params) => i18next.t(key, params))\n    const drawing = (show: 'face' | 'how') =>\n      html`<figure-fasten-drawing\n        show=${show}\n        .target=${f.toPlane ? '' : f.target}\n        .planeWord=${planeWord}\n        .faces=${plan.theirFaces}\n        .face=${plan.targetFace}\n        .modes=${modes}\n        .mode=${plan.mode}\n        .view=${plan.view}\n        .align=${f.align}\n        .alignMm=${f.alignMm}\n        .gap=${f.gap}\n        .partName=${this.partId}\n        ?locked=${this.locked}\n        @fasten-change=${(e: CustomEvent<FastenChange>) => (this.form = fastenChanged(revision, this.partId, this.form!, e.detail))}\n      ></figure-fasten-drawing>`\n    return html`\n      ${\n        plan.aim\n          ? html`<p fasten-sentence role=\"status\">\n              ${fastenSentenceOf(this.partId, f, plan, planeWord, (key, params) => i18next.t(key, params))}\n            </p>`\n          : html`<p hint fasten-sentence>${i18next.t('figure.text.fasten-target-first')}</p>`\n      }\n      <div question=\"what\">\n        <h4 id=\"what\">${i18next.t('figure.label.fasten-what')}</h4>\n        ${this.renderTargets(revision, f, planeWord)}\n      </div>\n      ${\n        plan.aim\n          ? html`<div question=\"face\">\n                <h4>\n                  ${\n                    /* The face asked is the target's, named: the part's own face follows from it. */ f.toPlane\n                      ? i18next.t('figure.label.fasten-face-on-plane', { plane: planeWord })\n                      : i18next.t('figure.label.fasten-face-on-part', { part: f.target })\n                  }\n                </h4>\n                ${drawing('face')}\n              </div>\n              ${\n                modes.length > 1\n                  ? html`<div question=\"how\">\n                      <h4>${i18next.t('figure.label.fasten-how')}</h4>\n                      ${drawing('how')}\n                    </div>`\n                  : nothing\n              }\n              <div question=\"detail\">\n                <details fasten-detail>\n                  <summary>\n                    ${i18next.t('figure.label.fasten-detail')}${detail.length ? html` · <span fasten-summary>${detail.join(' · ')}</span>` : nothing}\n                  </summary>\n                  ${plan.alignRows.length ? this.renderAlignment(plan.alignRows) : nothing}\n                  <div form>\n                    <span>${i18next.t('figure.label.gap')}</span>\n                    <input\n                      gap\n                      type=\"number\"\n                      step=\"any\"\n                      .value=${f.gapKept !== undefined ? '' : String(f.gap)}\n                      placeholder=${f.gapKept !== undefined ? i18next.t('figure.label.follows-expression') : ''}\n                      @change=${(e: Event) => this.set({ gap: Number((e.target as HTMLInputElement).value) || 0, gapKept: undefined })}\n                    />\n                    <span>${i18next.t('figure.label.twist')}</span>\n                    <input\n                      twist\n                      type=\"number\"\n                      step=\"any\"\n                      .value=${String(f.twist)}\n                      @change=${(e: Event) => this.set({ twist: Number((e.target as HTMLInputElement).value) || 0 })}\n                    />\n                  </div>\n                </details>\n              </div>\n              ${/* 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()}`\n          : nothing\n      }\n      ${this.error ? html`<p error role=\"alert\">${this.error}</p>` : nothing}\n      <ox-popup-actions>\n        <md-text-button slot=\"cancel\" cancel @click=${this.cancel}>${i18next.t('figure.button.cancel')}</md-text-button>\n        <md-filled-button slot=\"confirm\" apply ?disabled=${this.locked || !plan.action} @click=${this.apply}>\n          ${i18next.t(held ? 'figure.button.apply' : 'figure.button.fasten')}\n        </md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  /**\n   * What to fasten to: the plane and the other parts, as the standard choice chips. The arrows move among them and\n   * the canvas lights the part under the focus or the pointer; a part hanging from this one is not offered, and why is\n   * said under them.\n   */\n  private renderTargets(revision: FigureRevision, f: FastenForm, planeWord: string) {\n    const chosen = f.toPlane ? PLANE : f.target\n    const targets = fastenTargetsOf(revision, this.partId)\n    const chipOf = (e: Event) =>\n      (e.composedPath().find(n => (n as Element).localName === 'md-filter-chip') as Element | undefined)?.getAttribute(\n        'data-value'\n      ) ?? null\n    return html`<ox-input-select-buttons\n        targets\n        aria-labelledby=\"what\"\n        .options=${[{ value: PLANE, display: planeWord }, ...targets.filter(t => !t.loops).map(t => ({ value: t.part, display: t.part }))]}\n        .value=${chosen || undefined}\n        ?disabled=${this.locked}\n        @change=${(e: CustomEvent) => {\n          /* A chip pressed again lets go of it; what to fasten to is always one thing once chosen. */\n          if (e.detail) this.aim(e.detail)\n          else (e.target as HTMLElement & { value?: string }).value = chosen || undefined\n        }}\n        @pointerover=${(e: Event) => this.hover(chipOf(e))}\n        @pointerleave=${() => this.hover(null)}\n        @focusin=${(e: Event) => this.hover(chipOf(e))}\n        @keyup=${(e: KeyboardEvent) => {\n          /* The arrows move the focus among the chips inside the list, which tells nothing outside it: read where it is. */\n          const at = (e.currentTarget as Element).shadowRoot?.activeElement\n          if (at?.localName === 'md-filter-chip') this.hover(at.getAttribute('data-value'))\n        }}\n      ></ox-input-select-buttons>\n      ${targets.filter(t => t.loops).map(t => html`<p hint loops target=${t.part}>${i18next.t('figure.text.target-would-loop', { part: t.part, mine: this.partId })}</p>`)}`\n  }\n\n  private aim(part: string) {\n    if (this.locked || !this.revision || !this.form) return\n    const chosen = this.form.toPlane ? PLANE : this.form.target\n    if (part === chosen) return\n    this.form = aimFasten(this.revision, this.partId, this.form, part === PLANE ? { plane: true } : { part })\n  }\n\n  /** The part under the pointer or the focus in the list, for the canvas to light; the plane lights nothing. */\n  private hover(part: string | null) {\n    const lit = part && part !== PLANE ? part : null\n    if (lit === this.hovered) return\n    this.hovered = lit\n    const face =\n      lit && this.revision && this.form\n        ? fastenPlanOf(this.revision, this.partId, aimFasten(this.revision, this.partId, this.form, { part: lit }))\n            .targetFace\n        : undefined\n    this.dispatchEvent(\n      new CustomEvent('fasten-hover', { detail: lit ? { part: lit, face } : null, bubbles: true, composed: true })\n    )\n  }\n\n  private set(change: Partial<FastenForm>) {\n    this.form = { ...this.form!, ...change }\n  }\n\n  /**\n   * Where on the target face the part sits, on the axes the drawing cannot set: centred, level with the target's edge on\n   * either side, a distance off centre, a share of the figure's size, or the position field it follows.\n   */\n  private renderAlignment(axes: { axis: Axis; edges: boolean }[]) {\n    const f = this.form!\n    const set = (axis: Axis, how: Alignment) => this.set({ align: { ...f.align, [axis]: how } })\n    const setMm = (axis: Axis, mm: number) => this.set({ alignMm: { ...f.alignMm, [axis]: mm } })\n    return html`<div form>\n      ${axes.map(({ axis, edges }) => {\n        const how =\n          f.align[axis] === 'min' || f.align[axis] === 'max'\n            ? edges\n              ? f.align[axis]!\n              : 'centre'\n            : (f.align[axis] ?? 'centre')\n        return html`<span>${i18next.t('figure.label.align-' + axis)}</span>\n          <select @change=${(e: Event) => set(axis, (e.target as HTMLSelectElement).value as Alignment)}>\n            <option value=\"centre\" ?selected=${how === 'centre'}>${i18next.t('figure.label.align-centre')}</option>\n            ${\n              edges\n                ? html`<option value=\"min\" ?selected=${how === 'min'}>\n                      ${i18next.t(`figure.label.align-${axis}-min`)}\n                    </option>\n                    <option value=\"max\" ?selected=${how === 'max'}>\n                      ${i18next.t(`figure.label.align-${axis}-max`)}\n                    </option>`\n                : nothing\n            }\n            ${\n              f.alignInput?.[axis]\n                ? html`<option value=\"input\" ?selected=${how === 'input'}>\n                    ${i18next.t('figure.label.align-input', { field: fieldWordsOf(f.alignInput[axis]!, key => i18next.t(key)) })}\n                  </option>`\n                : nothing\n            }\n            <option value=\"mm\" ?selected=${how === 'mm'}>${i18next.t('figure.label.align-mm')}</option>\n            ${\n              this.revision && hasInstanceSize(this.revision.asset, axis)\n                ? html`<option value=\"share\" ?selected=${how === 'share'}>\n                    ${i18next.t('figure.label.align-share')}\n                  </option>`\n                : nothing\n            }\n          </select>\n          ${\n            how === 'mm' || how === 'share'\n              ? html`<span></span\n                  ><input\n                    type=\"number\"\n                    step=\"any\"\n                    aria-label=${i18next.t('figure.label.align-mm')}\n                    .value=${String(f.alignMm[axis] ?? 0)}\n                    @change=${(e: Event) => setMm(axis, Number((e.target as HTMLInputElement).value) || 0)}\n                  />`\n              : nothing\n          }`\n      })}\n    </div>`\n  }\n\n  private renderPreviewWords() {\n    if (this.previewWords.length === 1) return html`<p preview-words role=\"status\">${this.previewWords[0]}</p>`\n    return this.previewWords.length\n      ? html`<ul preview-words role=\"status\">\n          ${this.previewWords.map(line => html`<li>${line}</li>`)}\n        </ul>`\n      : nothing\n  }\n\n  /** Enter applies what is chosen, Esc closes with nothing written; a key the window does not take goes on. */\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('role', 'dialog')\n    this.setAttribute('aria-label', i18next.t('figure.label.fastening'))\n    this.addEventListener('keydown', this.onKey)\n    /* 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. */\n    this.closest<HTMLElement>('ox-floating-overlay')?.style.setProperty('--overlay-center-fit-width', '640px')\n  }\n\n  private onKey = async (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      this.cancel()\n      return\n    }\n    if (e.key !== 'Enter' || e.isComposing) return\n    const path = e.composedPath() as Element[]\n    const target = path[0] as HTMLElement\n    /* On a chip of the list Enter applies, as it does anywhere in the window; a chip is chosen by Space or a press. */\n    const onChip = path.some(n => n.localName === 'ox-input-select-buttons')\n    /* A button, a fold or a list of options does what Enter does to it. */\n    if (\n      !onChip &&\n      (target.localName === 'button' ||\n        target.localName === 'summary' ||\n        target.localName === 'select' ||\n        /^md-.*button$/.test(target.localName))\n    )\n      return\n    e.preventDefault()\n    e.stopPropagation()\n    /* A number typed and Enter: the number first, as leaving the field would take it. */\n    if (target.localName === 'input') target.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n    await this.updateComplete\n    this.apply()\n  }\n\n  private apply = () => {\n    const plan = this.revision && this.form ? fastenPlanOf(this.revision, this.partId, this.form) : undefined\n    if (this.locked || !plan?.action) return\n    this.dispatchEvent(\n      new CustomEvent('fasten-apply', { detail: { action: plan.action }, bubbles: true, composed: true })\n    )\n  }\n\n  private cancel = () => {\n    this.dispatchEvent(new CustomEvent('fasten-cancel', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, nothing } from 'lit';
 import { type FaceView, type FastenMode } from './fasten-geometry.js';
 import type { Alignment } from './links.js';
 type Axis = 'x' | 'y' | 'z';
@@ -25,7 +25,8 @@ declare const FigureFastenDrawing_base: (new (...args: any[]) => LitElement) & t
  * footprint on it: dragged, caught at the centre and at the edges from inside and outside, a guide drawn where it is
  * caught and a dimension where it is not, which is pressed to type the number. It may go past the edges: the part that
  * does is shaded, and a part off the face altogether is said so. Nothing is decided here: every change goes to the form
- * (`fasten-change`), and a press or a drag let go says so (`fasten-release`), for the form to apply a fastening it holds.
+ * (`fasten-change`), and a press or a drag let go says so (`fasten-release`). The window draws it twice, under its own
+ * questions: the face (`show="face"`: the box and the face seen from above, side by side) and the way (`show="how"`).
  */
 export declare class FigureFastenDrawing extends FigureFastenDrawing_base {
     static styles: import("lit").CSSResult;
@@ -46,6 +47,8 @@ export declare class FigureFastenDrawing extends FigureFastenDrawing_base {
     locked: boolean;
     /** The form already says how the fastening it has lies on the face: the drawing says it only while dragging. */
     said: boolean;
+    /** Which of its questions it draws: the face, or the way. */
+    show: 'face' | 'how';
     /** Where the footprint is while dragging, and what it is caught by; undefined when nothing is dragged. */
     private dragged?;
     private typing?;
@@ -53,7 +56,7 @@ export declare class FigureFastenDrawing extends FigureFastenDrawing_base {
     private gapFrom?;
     private change;
     private released;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     /** The target box, its faces pressed; or the plane. */
     private renderTarget;
     /** How: three side views; the chosen one's gap is dragged. */

package/dist-client/modeller/figure-fasten-drawing.js

@@ -16,6 +16,9 @@ const HIDDEN = [
     ['back', 236, 14]
 ];
 const PANEL_W = 300;
+/* The face seen from above, beside the box in the fastening window: taller than the panel's was, for a long face's parts. */
+const WHERE_W = 360;
+const WHERE_H = 200;
 /**
  * 붙이기 그림 (user 2026-10-01) — which face of what the part is fastened to, how, and where on it; each of them chosen
  * by pressing or dragging the drawing, none by a list of faces.
@@ -26,7 +29,8 @@ const PANEL_W = 300;
  * footprint on it: dragged, caught at the centre and at the edges from inside and outside, a guide drawn where it is
  * caught and a dimension where it is not, which is pressed to type the number. It may go past the edges: the part that
  * does is shaded, and a part off the face altogether is said so. Nothing is decided here: every change goes to the form
- * (`fasten-change`), and a press or a drag let go says so (`fasten-release`), for the form to apply a fastening it holds.
+ * (`fasten-change`), and a press or a drag let go says so (`fasten-release`). The window draws it twice, under its own
+ * questions: the face (`show="face"`: the box and the face seen from above, side by side) and the way (`show="how"`).
  */
 let FigureFastenDrawing = class FigureFastenDrawing extends localize(i18next)(LitElement) {
     constructor() {
@@ -47,6 +51,8 @@ let FigureFastenDrawing = class FigureFastenDrawing extends localize(i18next)(Li
         this.locked = false;
         /** The form already says how the fastening it has lies on the face: the drawing says it only while dragging. */
         this.said = false;
+        /** Which of its questions it draws: the face, or the way. */
+        this.show = 'face';
         this.scale = 1;
     }
     static { this.styles = css `
@@ -66,31 +72,45 @@ let FigureFastenDrawing = class FigureFastenDrawing extends localize(i18next)(Li
     }
     div[modes] {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
       gap: 6px;
     }
     div[modes] svg {
-      width: 64px;
-      height: 44px;
+      width: 48px;
+      height: 33px;
     }
+    /* A choice drawn, not a box to press (the side's rule: no boxed buttons): the chosen one on the primary's ground. */
     div[modes] button {
       display: grid;
       justify-items: center;
       align-content: center;
       gap: 2px;
-      padding: 2px 4px 4px;
+      padding: 4px 4px 6px;
       font: inherit;
       color: var(--md-sys-color-on-surface);
       background: none;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 8px;
+      border: none;
+      border-radius: 6px;
       cursor: pointer;
     }
+    div[modes] button:hover:not([on]):not(:disabled) {
+      background: var(--md-sys-color-surface-container);
+    }
     div[modes] button[on] {
-      border: 1.5px solid var(--md-sys-color-primary);
       background: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);
     }
+    /* The box and the face seen from above side by side, one under the other where the window is narrow. */
+    div[face-row] {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 12px;
+      align-items: start;
+    }
+    div[face-row] > div {
+      display: grid;
+      gap: 8px;
+    }
     div[where] {
       position: relative;
     }
@@ -113,7 +133,9 @@ let FigureFastenDrawing = class FigureFastenDrawing extends localize(i18next)(Li
         this.dispatchEvent(new CustomEvent('fasten-release', { bubbles: true, composed: true }));
     }
     render() {
-        return html `${this.renderTarget()}${this.renderModes()}${this.renderWhere()}`;
+        if (this.show === 'how')
+            return this.renderModes();
+        return html `<div face-row>${this.target ? html `<div>${this.renderTarget()}</div>` : nothing}<div>${this.renderWhere()}</div></div>`;
     }
     /** The target box, its faces pressed; or the plane. */
     renderTarget() {
@@ -235,7 +257,7 @@ let FigureFastenDrawing = class FigureFastenDrawing extends localize(i18next)(Li
         if (!view)
             return nothing;
         const { h, v, sign } = screenOf(view.axes);
-        const W = PANEL_W, H = 180;
+        const W = WHERE_W, H = WHERE_H;
         /* Room around the face for the part to go past its edges by about half itself; a plane with no size, three parts wide. */
         const span = (a) => (view.face[a] !== undefined ? view.face[a] + view.part[a] : view.part[a] * 3);
         const k = Math.min((W - 40) / span(h), (H - 40) / span(v));
@@ -444,6 +466,10 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], FigureFastenDrawing.prototype, "said", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], FigureFastenDrawing.prototype, "show", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)