@things-factory/figure-ui 10.1.181 → 10.1.183

package/client/modeller/editor-styles.ts

@@ -91,11 +91,27 @@ export const EditorStyles = css`
     color: var(--md-sys-color-primary);
     font-weight: 600;
   }
-  ox-canvas-bar button[save] {
+  /*
+    The bar's two commitments, one shape (user 2026-10-18: 「발행버튼도 저장버튼도 라운드 버튼으로 … 버튼 안에 적절한 아이콘」):
+    round, an icon inside, so neither is taken for the other. Save, done many times a day, is the filled one; release,
+    a promise to whoever draws the figure, is outlined.
+  */
+  ox-canvas-bar button[save],
+  ox-canvas-bar button[publish] {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     height: 32px;
-    padding: 0 14px;
-    border: none;
+    padding: 0 14px 0 10px;
     border-radius: 999em;
+    font-weight: 600;
+  }
+  ox-canvas-bar button[save] md-icon,
+  ox-canvas-bar button[publish] md-icon {
+    --md-icon-size: 18px;
+  }
+  ox-canvas-bar button[save] {
+    border: 1px solid transparent;
     color: var(--md-sys-color-on-primary);
     background: var(--md-sys-color-primary);
   }
@@ -360,9 +376,10 @@ export const EditorStyles = css`
     align-items: center;
     gap: 4px;
     height: 32px;
-    padding: 0 10px;
+    padding: 0 14px 0 10px;
     border: none;
-    border-radius: 6px;
+    /* Round as save and release beside it: one shape for the bar's end. */
+    border-radius: 999em;
     color: var(--md-sys-color-on-error-container);
     background: var(--md-sys-color-error-container);
   }
@@ -383,12 +400,14 @@ export const EditorStyles = css`
     box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);
   }
   ox-canvas-bar button[publish] {
-    height: 32px;
-    padding: 0 8px;
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 6px;
+    border: 1px solid var(--md-sys-color-outline);
+    color: var(--md-sys-color-primary);
     background: var(--md-sys-color-surface);
   }
+  ox-canvas-bar button[publish][aria-pressed='true'] {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
   button:disabled {
     opacity: 0.45;
     cursor: default;

package/client/modeller/editor.ts

@@ -6,7 +6,7 @@ import { openPopup } from '@operato/layout'
 import { OxPrompt } from '@operato/popup'
 import { customElement, property, state } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
-import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model'
+import { figurePartFaceOf, PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, 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, FigureEvaluatedShape, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement, FigureFaceMappingNeed, FigureFaceRemap } from '@hatiolab/figure-model'
@@ -18,10 +18,11 @@ import './figure-parts.js'
 import './figure-material-panel.js'
 import './figure-section-panel.js'
 import './figure-section-editor.js'
-import { rowWordsOf } from './command-preview.js'
+import { faceHighlightOf, rowWordsOf } from './command-preview.js'
 import { CommandPreview, NO_WORDS } from './command-preview-controller.js'
 import { motionEndsOf, type MotionEnds } from './motion-ends.js'
 import './figure-links.js'
+import './figure-fasten-dialog.js'
 import './figure-controls.js'
 import './figure-clips.js'
 import './figure-data-panel.js'
@@ -137,6 +138,17 @@ export class FigureEditor extends LitElement {
   @state() private tab: SideTab = 'properties'
   /** The view settings or the release history, open over the work from the bar. */
   @state() private overlay?: BarOverlay
+  /**
+   * The fastening window open for the selected part (user 2026-10-17), in the standard popup (2026-10-18): chosen there,
+   * applied once. It closes with nothing written when the part, the tab or the middle changes under it.
+   */
+  @state() private fastening = false
+  private fastenPopup?: { close: () => void }
+  private fastenWindow?: HTMLElement & { revision?: FigureRevision; partId: string; locked: boolean; previewWords: string[]; error: string }
+  /** Why the window's 「적용」 was refused, said in it. */
+  @state() private fastenError = ''
+  /** The face of the part a row of the window's list is on, lit on the canvas while the pointer or the arrows are there. */
+  @state() private fastenHover: FigureRenderPart | null = null
   /** 「더 보기」 open, as this person left it last (chief architect 2026-10-16: kept per person). */
   @state() private moreOpen = FigureEditor.storedMoreOpen()
   private static storedMoreOpen(): boolean {
@@ -279,6 +291,8 @@ 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 window is about the part chosen on the properties tab, being edited: it does not follow anywhere else. */
+    if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit')) this.closeFastening()
     /*
      * 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.
@@ -765,10 +779,11 @@ export class FigureEditor extends LitElement {
     return html`<figure-links
       .revision=${shown}
       .section=${section}
-      .active=${this.tab === tab}
+      .active=${this.tab === tab && !(section === 'shape' && this.fastening)}
       .partId=${this.selected}
       ?locked=${unavailable}
       @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+      @fasten-open=${() => this.openFastening()}
       .previewWords=${this.commandPreview.words()}
       .detachWords=${this.commandPreview.detachWords(shown)}
       .overhangWords=${section === 'shape' ? this.overhangOf(shown).words : NO_WORDS}
@@ -881,7 +896,7 @@ export class FigureEditor extends LitElement {
       <div overlay-body>${body}</div>
     </div>`
     return html`${panel('view', 'figure.label.tab-environment', html`<figure-settings .view=${this.view} @update-view=${(e: CustomEvent) => this.setView(e.detail.view)}></figure-settings>`)}
-      ${panel('history', 'figure.label.history', html`<slot name="history"></slot>`)}`
+      ${panel('history', 'figure.button.release', html`<slot name="history"></slot>`)}`
   }
   /**
    * The face a size drag keeps for the selected part, figure-model's rule (`figureScaleAnchorOf`): the gizmo shows it
@@ -1366,8 +1381,16 @@ export class FigureEditor extends LitElement {
       </ul>
     </div>`
   }
-  /** To the release that exists: the history's release section, opened from the bar, not a second one here. */
+  /*
+    The bar's one way to the releases (user 2026-10-18: the history icon and 「발행」 opened the same panel): the panel
+    of releases -- what to release now, the releases before it and going back to one -- opened at its release section,
+    closed again by a second press.
+  */
   private goRelease = async () => {
+    if (this.overlay === 'history') {
+      this.overlay = undefined
+      return
+    }
     this.overlay = 'history'
     await this.updateComplete
     await this.querySelector<HTMLElement & { showRelease?: () => Promise<void> }>('figure-history-panel')?.showRelease?.()
@@ -1418,19 +1441,80 @@ export class FigureEditor extends LitElement {
       }
     })
   }
-  /** "Fasten it first", from the motion tab: to the properties tab, the fastening form open on this part. */
+  /** "Fasten it first", from the motion tab or a row: to the properties tab, the fastening window open on this part. */
   private async goFasten() {
     this.tab = 'properties'
     await this.updateComplete
-    const links = [...this.renderRoot.querySelectorAll<HTMLElement & { section?: string; showFastening?: () => Promise<void> }>('figure-links')].find(l => l.section === 'shape')
-    await links?.showFastening?.()
+    this.openFastening()
+  }
+  private openFastening() {
+    if (!this.selected || this.fastenPopup) return
+    this.fastenError = ''
+    this.fastenHover = null
+    this.fastening = true
+    const content = document.createElement('figure-fasten-dialog') as NonNullable<typeof this.fastenWindow>
+    content.addEventListener('preview-command', e => this.commandPreview.ask((e as CustomEvent).detail))
+    content.addEventListener('fasten-hover', e => this.hoverFastening((e as CustomEvent).detail))
+    content.addEventListener('fasten-apply', e => this.applyFastening((e as CustomEvent).detail.action))
+    content.addEventListener('fasten-cancel', () => this.closeFastening())
+    this.fastenWindow = content
+    this.tellFastening()
+    const popup = openPopup(html`${content}`, { title: i18next.t('figure.label.fastening'), size: 'fit', backdrop: true, movable: true, closable: true, escapable: true })
+    this.fastenPopup = popup
+    /* Closed by its own X or Esc as well: the editor lets go of it the same way. */
+    popup.result.then(() => this.fastenPopup === popup && this.fastenClosed())
+  }
+  private closeFastening() {
+    const popup = this.fastenPopup
+    this.fastenClosed()
+    popup?.close()
+  }
+  private fastenClosed() {
+    this.fastenPopup = undefined
+    this.fastenWindow = undefined
+    this.fastening = false
+    this.fastenError = ''
+    this.fastenHover = null
+  }
+  /** What the window shows is the editor's: the figure on screen, the part, and what the preview and a refusal said. */
+  private tellFastening() {
+    const content = this.fastenWindow
+    const view = this.session?.read()
+    if (!content || !view) return
+    content.revision = this.shown()
+    content.partId = this.selected
+    content.locked = view.loading || !!view.error || view.saving || !view.context
+    content.previewWords = this.commandPreview.words()
+    content.error = this.fastenError
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.closeFastening()
+  }
+  /** 「적용」: the command, one step; refused, the window stays open and says why. */
+  private applyFastening(action: FigureAuthoringAction) {
+    if (this.linkCommand(action)) this.closeFastening()
+    else this.fastenError = this.error
+  }
+  /** A row of the window's list under the pointer or the arrows: the face of that part it would be fastened on, lit. */
+  private hoverFastening(on: { part: string; face?: string } | null) {
+    const shown = this.shown()
+    let lit: FigureRenderPart | null = null
+    try {
+      lit = on?.face && shown ? faceHighlightOf(figurePartFaceOf(shown.asset, on.part, on.face, shown.inputs)) : null
+    } catch {
+      lit = null
+    }
+    this.fastenHover = lit
   }
   /** What the canvas draws of it, made once per preview: a new list every render would stand the board up each time. */
   private previewShown(): { ghost: FigureRenderPart[]; highlight: FigureRenderPart | null } {
     const p = this.commandPreview.current()
     /* On the motion tab, with nothing being tried: where the selected part's motion takes it, at both ends. */
     if (!p && this.tab === 'motion' && this.middle === 'edit') return { ghost: this.motionEnds()?.ghost ?? [], highlight: null }
-    return this.commandPreview.drawnOf(p)
+    const drawn = this.commandPreview.drawnOf(p)
+    /* A part in the fastening window's list under the pointer: its face lit in place of the one the command meets. */
+    return this.fastenHover ? { ghost: drawn.ghost, highlight: this.fastenHover } : drawn
   }
   /**
    * What the author has in view, for the AI dock to hear with a request (ADR-0097 §5.6 item 5): the part selected and
@@ -1473,6 +1557,7 @@ export class FigureEditor extends LitElement {
   }
   updated(changed: PropertyValues<this>) {
     super.updated?.(changed)
+    this.tellFastening()
     /* Nothing blocks release any more: the list under the bar closes, and opens fresh when something does again. */
     if (changed.has('releaseBlockers') && !this.releaseBlockers.length && this.blockersOpen) this.blockersOpen = false
     this.refusals.tell(changed)
@@ -1681,14 +1766,22 @@ export class FigureEditor extends LitElement {
         )}
         <span slot="status" class="status" role="status" ?dirty=${status === 'figure.text.unsaved-changes'}>${i18next.t(status)}</span>
         <span slot="status" release-state>${this.releaseWords(view)}</span>
-        ${this.renderOverlayButton('history', 'history', 'figure.label.history', 'commit')}
         ${blockers.length
           ? html`<button slot="commit" release-blocked aria-expanded=${String(this.blockersOpen)} @click=${() => (this.blockersOpen = !this.blockersOpen)}>
               <md-icon>error</md-icon>${i18next.t('figure.button.release-blocked', { count: blockers.length })}
             </button>`
           : nothing}
-        <button slot="commit" publish ?disabled=${!view.id} title=${view.id ? '' : i18next.t('figure.text.save-the-figure-before-releasing')} @click=${this.goRelease}>${i18next.t('figure.button.release')}</button>
-        <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}>${i18next.t('figure.button.save')}</button>
+        <button
+          slot="commit"
+          publish
+          aria-pressed=${String(this.overlay === 'history')}
+          ?disabled=${!view.id}
+          title=${view.id ? '' : i18next.t('figure.text.save-the-figure-before-releasing')}
+          @click=${this.goRelease}
+        >
+          <md-icon>publish</md-icon>${i18next.t('figure.button.release')}
+        </button>
+        <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}><md-icon>save</md-icon>${i18next.t('figure.button.save')}</button>
       </ox-canvas-bar>
       ${this.blockersOpen && blockers.length ? this.renderReleaseBlockers(blockers, asset, unavailable) : nothing}
       ${this.catalogOpen

package/client/modeller/fasten-form.ts

@@ -0,0 +1,207 @@
+import { FIGURE_FACES } from '@hatiolab/figure-model'
+import type { FigureAuthoringAction, FigureFace } from '@hatiolab/figure-model'
+
+import { faceViewOf, modeOf, myFaceFor, type FaceView, type FastenMode, type FastenTarget } from './fasten-geometry.js'
+import type { FastenChange } from './figure-fasten-drawing.js'
+import {
+  alignOf,
+  alignRowsOf,
+  canFasten,
+  facesOf,
+  fasteningOf,
+  fastenGapOf,
+  hangsFrom,
+  heldBy,
+  ownFacesOf,
+  placeKeptOf,
+  type Alignment,
+  type Axis
+} from './links.js'
+import type { FigureRevision } from './revision.js'
+
+/*
+ * A fastening as it is chosen, before it is done: what, which face, how, where across the face. The fastening window
+ * (`figure-fasten-dialog.ts`) holds one and changes it as the author chooses; the attach command is worked out from it
+ * only here, so the window, its preview and the panel's 「정렬 고치기」 send the same command for the same choice.
+ */
+
+const FACES = Object.keys(FIGURE_FACES) as FigureFace[]
+
+export interface FastenForm {
+  face: FigureFace | 'centre'
+  toPlane: boolean
+  target: string
+  targetFace: FigureFace
+  facing: 'meet' | 'flush'
+  gap: number
+  /** The record's gap when it is worked out (a length that follows something): kept until a number is typed. */
+  gapKept: unknown
+  twist: number
+  align: Partial<Record<Axis, Alignment>>
+  alignMm: Partial<Record<Axis, number>>
+  alignInput: Partial<Record<Axis, string>>
+}
+
+export const freshFasten = (): FastenForm => ({
+  face: 'bottom',
+  toPlane: false,
+  target: '',
+  targetFace: 'top',
+  facing: 'meet',
+  gap: 0,
+  gapKept: undefined,
+  twist: 0,
+  align: {},
+  alignMm: {},
+  alignInput: {}
+})
+
+/** The part's own fastening as a form, or a fresh one: a window opens on what the part has (walk 1, 2026-09-26). */
+export function fastenFormOf(revision: FigureRevision, part: string): FastenForm {
+  const own = fasteningOf(revision, part)
+  return own && !own.atOrigin ? ({ ...freshFasten(), ...own } as FastenForm) : freshFasten()
+}
+
+/** What a part may be fastened to: every other part that can be, each said whether it would close a loop. */
+export function fastenTargetsOf(revision: FigureRevision, part: string): Array<{ part: string; loops: boolean }> {
+  const asset = revision.asset
+  return (
+    asset.appearance
+      .map(look => look.target)
+      .filter(one => one !== part && canFasten(asset, one))
+      /* Not a part that hangs from this one: fastening a frame to its own roller would close a loop. */
+      .map(one => ({ part: one, loops: hangsFrom(asset, one, part) }))
+  )
+}
+
+/**
+ * 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.
+ */
+export function aimFasten(
+  revision: FigureRevision,
+  part: string,
+  form: FastenForm,
+  to: { plane: true } | { part: string } | { targetFace: FigureFace }
+): FastenForm {
+  const f: FastenForm =
+    'plane' in to
+      ? { ...form, toPlane: true, target: '' }
+      : 'part' in to
+        ? { ...form, toPlane: false, target: to.part }
+        : { ...form, targetFace: to.targetFace }
+  const theirFaces = f.target ? facesOf(revision.asset, f.target) : FACES
+  const targetFace = (theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0]) as FigureFace
+  const aim: FastenTarget | undefined = f.toPlane
+    ? 'plane'
+    : f.target
+      ? { part: f.target, face: targetFace }
+      : undefined
+  return { ...f, ...(aim ? placeKeptOf(revision, part, aim, !!f.twist) : { align: {}, alignMm: {}, alignInput: {} }) }
+}
+
+/** A change the drawing asks: a face, a way, a gap or a place across the face. */
+export function fastenChanged(
+  revision: FigureRevision,
+  part: string,
+  form: FastenForm,
+  change: FastenChange
+): FastenForm {
+  const f = form
+  if ('targetFace' in change) return aimFasten(revision, part, f, { targetFace: change.targetFace as FigureFace })
+  if ('mode' in change)
+    return {
+      ...f,
+      face: change.mode === 'centre' ? 'centre' : f.face === 'centre' ? 'bottom' : f.face,
+      facing: change.mode === 'flush' ? 'flush' : 'meet'
+    }
+  if ('gap' in change) return { ...f, gap: change.gap, gapKept: undefined }
+  return {
+    ...f,
+    align: { ...f.align, [change.axis]: change.how },
+    alignMm: change.how === 'mm' ? { ...f.alignMm, [change.axis]: change.mm ?? 0 } : f.alignMm
+  }
+}
+
+/** What a form comes to: the face aimed at, the part's own face, the way, the drawing of the face and the command. */
+export interface FastenPlan {
+  /** Nothing is aimed at until a part or the plane is chosen. */
+  aim?: FastenTarget
+  theirFaces: string[]
+  targetFace: FigureFace
+  mode: FastenMode
+  /** The part's own face: not chosen, the target's face and the way give it (user 2026-10-01; the kernel takes no other). */
+  myFace: FigureFace | 'centre'
+  view?: FaceView
+  /** The axes across the face asked in rows: where the drawing cannot set the place. */
+  alignRows: { axis: Axis; edges: boolean }[]
+  action?: FigureAuthoringAction
+  /** The face the command would meet, lit on the canvas while it is tried. */
+  face?: { part: string; face: string }
+}
+
+export function fastenPlanOf(revision: FigureRevision, part: string, f: FastenForm): FastenPlan {
+  const asset = revision.asset
+  const mineFaces = ownFacesOf(asset, part, f.toPlane)
+  const theirFaces = f.target ? facesOf(asset, f.target) : FACES
+  const targetFace = (theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0]) as FigureFace
+  const aim: FastenTarget | undefined = f.toPlane
+    ? 'plane'
+    : f.target
+      ? { part: f.target, face: targetFace }
+      : undefined
+  const mode: FastenMode = f.toPlane ? 'meet' : modeOf(f.face, f.facing)
+  const derived = aim ? myFaceFor(revision, part, aim, mode) : undefined
+  const myFace = derived ?? (mineFaces.includes(f.face) ? f.face : mineFaces[0]!)
+  if (!aim) return { theirFaces, targetFace, mode, myFace, alignRows: [] }
+  const align = alignOf(asset, part, aim, f.align, f.alignMm, !!f.twist, f.alignInput)
+  const view = faceViewOf(revision, part, aim)
+  const action = {
+    kind: 'attach',
+    part,
+    face: myFace,
+    to: f.toPlane ? { plane: 'mounting-plane' } : { part: f.target, face: targetFace },
+    ...(f.toPlane ? {} : { facing: f.facing }),
+    ...fastenGapOf(f),
+    twist: f.twist,
+    ...(align ? { align } : {}),
+    replace: !!heldBy(asset, part)
+  } as FigureAuthoringAction
+  return {
+    aim,
+    theirFaces,
+    targetFace,
+    mode,
+    myFace,
+    view,
+    alignRows: alignRowsOf(asset, part, aim, view, !!f.twist, f.alignInput),
+    action,
+    ...(f.toPlane ? {} : { face: { part: f.target, face: targetFace } })
+  }
+}
+
+type Say = (key: string, params?: Record<string, string>) => string
+
+/** 「lid 의 아랫면을 bin 의 윗면에 맞닿게」: what the fastening is, in one line, the part's own face said as a result. */
+export function fastenSentenceOf(
+  part: string,
+  form: FastenForm,
+  plan: FastenPlan,
+  planeWord: string,
+  say: Say
+): string {
+  const to = form.toPlane ? planeWord : `${form.target}의 ${say('figure.label.face-' + plan.targetFace)}`
+  return say(`figure.text.fasten-sentence-${plan.mode}`, { part, face: say('figure.label.face-' + plan.myFace), to })
+}
+
+/** What the folded details hold that is not their default, said while folded; nothing for the default. */
+export function fastenDetailWordsOf(form: FastenForm, say: Say): string[] {
+  return [
+    ...(form.gapKept !== undefined
+      ? [say('figure.text.fasten-summary-gap-worked-out')]
+      : form.gap
+        ? [say('figure.text.fasten-summary-gap', { mm: String(form.gap) })]
+        : []),
+    ...(form.twist ? [say('figure.text.fasten-summary-twist', { degrees: String(form.twist) })] : [])
+  ]
+}

package/client/modeller/fasten-geometry.ts

@@ -190,7 +190,9 @@ export function screenOf(axes: readonly [Axis, Axis]): { h: Axis; v: Axis; sign:
  * Where the fastening drawing writes its two names so neither lies over the other (user 2026-10-16: 「roller」 over the
  * roller's thin bar, and 「frame 윗면 2000 × 600」 cut by it). The face's name stands above the face, inside its top edge
  * only when the face fills the drawing. The part's name stands in the part when the part is wide and tall enough for it,
- * else just under it -- above it when the drawing ends first. Widths are estimated: 7 px a letter at 11-12 px.
+ * else just under it -- above it when the drawing ends first. Under a part as tall as the face, just under it is the
+ * face's own edge, and the name lay on that line (2026-10-18, the roller in the fastening window): it goes under the edge.
+ * Widths are estimated: 7 px a letter at 11-12 px; a line of it stands 11 px over its baseline and 3 under.
  */
 export function fastenLabelsOf(
   face: { x: number; y: number; w: number; h: number },
@@ -202,5 +204,7 @@ export function fastenLabelsOf(
   const fits = part.w >= partName.length * 7 + 8 && part.h >= 16
   if (fits) return { face: facePlace, part: { x: part.x + part.w / 2, y: part.y + part.h / 2 + 4, inside: true } }
   const below = part.y + part.h + 14
+  const edge = face.y + face.h
+  if (below - 11 < edge + 2 && below + 3 > edge - 2 && edge + 14 <= height - 4) return { face: facePlace, part: { x: part.x + part.w / 2, y: edge + 14, inside: false } }
   return { face: facePlace, part: { x: part.x + part.w / 2, y: below <= height - 20 ? below : part.y - 5, inside: false } }
 }