@forgeax/interface 0.4.1

package/dist/package/browser/components/DockShell/ueDrag/geometry.d.ts

@@ -0,0 +1,94 @@
+/** dockview `Position` — identical set, reused so `moveTo({ position })` takes
+ *  a UePosition directly without translation. */
+export type UePosition = 'top' | 'bottom' | 'left' | 'right' | 'center';
+/** Outer (dock-to-whole-region) targets have no center. */
+export type UeOuterPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface Rect {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+/** Director footprint tuning. Kept here (not in CSS) so hit-testing and
+ *  rendering agree to the pixel — the overlay reads the SAME shapes it draws.
+ *  The director fills the group's CONTENT area (tab strip excluded) as a large
+ *  center rectangle framed by four shallow trapezoids — NOT corner-to-corner
+ *  triangles. A large center is what keeps the four shapes trapezoidal. */
+export declare const UE_DIRECTOR_MARGIN = 6;
+export declare const UE_DIRECTOR_CENTER_RATIO = 0.46;
+export declare const UE_DIRECTOR_CENTER_MIN_W = 64;
+export declare const UE_DIRECTOR_CENTER_MIN_H = 52;
+export declare const UE_OUTER_BUTTON = 40;
+export declare const UE_OUTER_MARGIN = 16;
+export declare function pointInRect(p: Point, r: Rect): boolean;
+/** A trapezoid, as four viewport-space points (wide outer edge → narrow inner
+ *  edge), ready to hand straight to an SVG `<polygon points>`. */
+export type Polygon = readonly Point[];
+export interface DirectorLayout {
+    /** Widget center. */
+    readonly cx: number;
+    readonly cy: number;
+    /** Filled bounds = the group inset by a small margin. */
+    readonly bounds: Rect;
+    /** Center square — merge the panel in as a tab. */
+    readonly center: Rect;
+    /** Directional trapezoids, wide edge on a group edge, narrow edge on the
+     *  center square, split along the group's real (aspect-aware) diagonals. */
+    readonly top: Polygon;
+    readonly bottom: Polygon;
+    readonly left: Polygon;
+    readonly right: Polygon;
+}
+/** Build the dock director filling `content` (the group's content area, inset by
+ *  a small margin): a LARGE center rectangle framed by four shallow trapezoids.
+ *  Because the center is large, the surrounding shapes read as trapezoids rather
+ *  than corner-reaching triangles. */
+export declare function directorLayout(content: Rect, margin?: number): DirectorLayout;
+/** Which director shape (if any) the pointer is over. Center square wins; the
+ *  surrounding ring is split along the group's real diagonals (aspect-aware, so
+ *  the split lines actually hit the rectangle corners) into four trapezoids. */
+export declare function hitDirector(layout: DirectorLayout, p: Point): UePosition | null;
+export type OuterLayout = Readonly<Record<UeOuterPosition, Rect>>;
+/** Four dock-to-whole-region buttons pinned just inside the region's edges. */
+export declare function outerTargets(wrap: Rect, button?: number, margin?: number): OuterLayout;
+export declare function hitOuter(layout: OuterLayout, p: Point): UeOuterPosition | null;
+/** The translucent preview rectangle for a group-relative drop. Edges take half
+ *  the group along their axis; center covers the whole group. */
+export declare function previewRect(group: Rect, pos: UePosition): Rect;
+/** The preview rectangle for an outer (dock-to-whole-region) drop: a third of
+ *  the region on the chosen side (UE reserves a slab, not a half, for the shell
+ *  edge so the remaining layout stays legible). */
+export declare function outerPreviewRect(wrap: Rect, pos: UeOuterPosition, ratio?: number): Rect;
+/** Pick the innermost (smallest-area) group whose rect contains the point.
+ *  dockview groups never truly nest, but tolerant selection keeps the choice
+ *  stable when rects touch at shared sashes. */
+export declare function pickGroup<T extends {
+    readonly rect: Rect;
+}>(p: Point, groups: readonly T[]): T | null;
+/** Smallest rect covering both inputs. */
+export declare function unionRect(a: Rect, b: Rect): Rect;
+/** A tab strip runs along one axis: 'x' for the horizontal grid/footer strips,
+ *  'y' for the vertical left/right edge strips. */
+export type StripAxis = 'x' | 'y';
+export interface StripInsertion {
+    /** Index the dropped panel takes among the strip's CURRENT tabs. */
+    readonly index: number;
+    /** Slot the incoming tab occupies — the ghost-tab preview footprint. */
+    readonly slot: Rect;
+}
+/** Minimum slot length; matches the edge strip's `min-width/height: 104px`. */
+export declare const UE_STRIP_SLOT_MIN = 104;
+/** Where a tab dropped at `p` lands in a strip of existing tabs. The index is
+ *  decided by tab MIDPOINTS along the strip axis, which is what makes a drag
+ *  along the strip reorder continuously: once the slot opens between two tabs
+ *  the cursor sits in that gap, and both neighbours' midpoints stay on their
+ *  own side of it, so the choice is stable until the cursor passes the next
+ *  midpoint. `tabs` must be in DOM order and exclude the slot itself. */
+export declare function stripInsertion(tabs: readonly Rect[], strip: Rect, p: Point, axis: StripAxis, minSlot?: number): StripInsertion;
+/** Map a UePosition to the dockview grid `Direction` used by `addGroup`/
+ *  `addPanel({ position })`. 'center' has no absolute direction. */
+export declare function toGridDirection(pos: UePosition): 'above' | 'below' | 'left' | 'right' | 'within';

package/dist/package/browser/components/DockShell/ueDrag/geometry.js

@@ -0,0 +1,217 @@
+// Pure geometry for the Unreal-Engine-style dock drag overlay.
+//
+// UE's docking model is DISCRETE and uses a "dock director" widget painted at
+// the center of the group under the cursor: a small center SQUARE surrounded by
+// four TRAPEZOIDS (top/bottom/left/right) that tile the ring between the center
+// square and the widget's outer square along its diagonals. The four trapezoids
+// pick a split direction; the center square merges the panel in as a tab. On
+// top of that, four "dock to the whole region" buttons sit at the region edges.
+// The drop is decided by which SHAPE the cursor is over — not a free-form
+// cursor-region heuristic. This module is the single source of truth for those
+// shapes, their hit-testing, and the translucent preview slab.
+//
+// Everything here is framebuffer-agnostic (plain numbers), so it is exhaustively
+// unit-testable without a DOM. The imperative overlay (overlay.ts) and the drag
+// controller (controller.ts) consume these helpers; they own no geometry of
+// their own.
+/** Director footprint tuning. Kept here (not in CSS) so hit-testing and
+ *  rendering agree to the pixel — the overlay reads the SAME shapes it draws.
+ *  The director fills the group's CONTENT area (tab strip excluded) as a large
+ *  center rectangle framed by four shallow trapezoids — NOT corner-to-corner
+ *  triangles. A large center is what keeps the four shapes trapezoidal. */
+export const UE_DIRECTOR_MARGIN = 6; // inset from the content edges (px)
+export const UE_DIRECTOR_CENTER_RATIO = 0.46; // center rectangle ÷ content side
+export const UE_DIRECTOR_CENTER_MIN_W = 64;
+export const UE_DIRECTOR_CENTER_MIN_H = 52;
+export const UE_OUTER_BUTTON = 40;
+export const UE_OUTER_MARGIN = 16;
+export function pointInRect(p, r) {
+    return p.x >= r.x && p.x <= r.x + r.width && p.y >= r.y && p.y <= r.y + r.height;
+}
+function centeredSquare(cx, cy, size) {
+    return { x: cx - size / 2, y: cy - size / 2, width: size, height: size };
+}
+function clamp(n, lo, hi) {
+    return Math.max(lo, Math.min(hi, n));
+}
+/** Build the dock director filling `content` (the group's content area, inset by
+ *  a small margin): a LARGE center rectangle framed by four shallow trapezoids.
+ *  Because the center is large, the surrounding shapes read as trapezoids rather
+ *  than corner-reaching triangles. */
+export function directorLayout(content, margin = UE_DIRECTOR_MARGIN) {
+    const m = Math.min(margin, content.width / 6, content.height / 6);
+    const bx = content.x + m;
+    const by = content.y + m;
+    const bw = content.width - 2 * m;
+    const bh = content.height - 2 * m;
+    const cx = bx + bw / 2;
+    const cy = by + bh / 2;
+    const cW = clamp(bw * UE_DIRECTOR_CENTER_RATIO, Math.min(UE_DIRECTOR_CENTER_MIN_W, bw), bw);
+    const cH = clamp(bh * UE_DIRECTOR_CENTER_RATIO, Math.min(UE_DIRECTOR_CENTER_MIN_H, bh), bh);
+    const cwh = cW / 2;
+    const chh = cH / 2;
+    const oTL = { x: bx, y: by };
+    const oTR = { x: bx + bw, y: by };
+    const oBR = { x: bx + bw, y: by + bh };
+    const oBL = { x: bx, y: by + bh };
+    const cTL = { x: cx - cwh, y: cy - chh };
+    const cTR = { x: cx + cwh, y: cy - chh };
+    const cBR = { x: cx + cwh, y: cy + chh };
+    const cBL = { x: cx - cwh, y: cy + chh };
+    return {
+        cx,
+        cy,
+        bounds: { x: bx, y: by, width: bw, height: bh },
+        center: { x: cx - cwh, y: cy - chh, width: cW, height: cH },
+        top: [oTL, oTR, cTR, cTL],
+        right: [oTR, oBR, cBR, cTR],
+        bottom: [oBR, oBL, cBL, cBR],
+        left: [oBL, oTL, cTL, cBL],
+    };
+}
+/** Which director shape (if any) the pointer is over. Center square wins; the
+ *  surrounding ring is split along the group's real diagonals (aspect-aware, so
+ *  the split lines actually hit the rectangle corners) into four trapezoids. */
+export function hitDirector(layout, p) {
+    if (pointInRect(p, layout.center))
+        return 'center';
+    if (!pointInRect(p, layout.bounds))
+        return null;
+    const dx = (p.x - layout.cx) / (layout.bounds.width / 2);
+    const dy = (p.y - layout.cy) / (layout.bounds.height / 2);
+    if (Math.abs(dx) >= Math.abs(dy))
+        return dx < 0 ? 'left' : 'right';
+    return dy < 0 ? 'top' : 'bottom';
+}
+/** Four dock-to-whole-region buttons pinned just inside the region's edges. */
+export function outerTargets(wrap, button = UE_OUTER_BUTTON, margin = UE_OUTER_MARGIN) {
+    const cx = wrap.x + wrap.width / 2;
+    const cy = wrap.y + wrap.height / 2;
+    return {
+        top: centeredSquare(cx, wrap.y + margin + button / 2, button),
+        bottom: centeredSquare(cx, wrap.y + wrap.height - margin - button / 2, button),
+        left: centeredSquare(wrap.x + margin + button / 2, cy, button),
+        right: centeredSquare(wrap.x + wrap.width - margin - button / 2, cy, button),
+    };
+}
+export function hitOuter(layout, p) {
+    const order = ['top', 'bottom', 'left', 'right'];
+    for (const pos of order) {
+        if (pointInRect(p, layout[pos]))
+            return pos;
+    }
+    return null;
+}
+/** The translucent preview rectangle for a group-relative drop. Edges take half
+ *  the group along their axis; center covers the whole group. */
+export function previewRect(group, pos) {
+    const half = (n) => n / 2;
+    switch (pos) {
+        case 'top':
+            return { x: group.x, y: group.y, width: group.width, height: half(group.height) };
+        case 'bottom':
+            return { x: group.x, y: group.y + half(group.height), width: group.width, height: half(group.height) };
+        case 'left':
+            return { x: group.x, y: group.y, width: half(group.width), height: group.height };
+        case 'right':
+            return { x: group.x + half(group.width), y: group.y, width: half(group.width), height: group.height };
+        case 'center':
+        default:
+            return { ...group };
+    }
+}
+/** The preview rectangle for an outer (dock-to-whole-region) drop: a third of
+ *  the region on the chosen side (UE reserves a slab, not a half, for the shell
+ *  edge so the remaining layout stays legible). */
+export function outerPreviewRect(wrap, pos, ratio = 1 / 3) {
+    const slabW = wrap.width * ratio;
+    const slabH = wrap.height * ratio;
+    switch (pos) {
+        case 'top':
+            return { x: wrap.x, y: wrap.y, width: wrap.width, height: slabH };
+        case 'bottom':
+            return { x: wrap.x, y: wrap.y + wrap.height - slabH, width: wrap.width, height: slabH };
+        case 'left':
+            return { x: wrap.x, y: wrap.y, width: slabW, height: wrap.height };
+        case 'right':
+        default:
+            return { x: wrap.x + wrap.width - slabW, y: wrap.y, width: slabW, height: wrap.height };
+    }
+}
+/** Pick the innermost (smallest-area) group whose rect contains the point.
+ *  dockview groups never truly nest, but tolerant selection keeps the choice
+ *  stable when rects touch at shared sashes. */
+export function pickGroup(p, groups) {
+    let best = null;
+    let bestArea = Infinity;
+    for (const g of groups) {
+        if (!pointInRect(p, g.rect))
+            continue;
+        const area = g.rect.width * g.rect.height;
+        if (area < bestArea) {
+            best = g;
+            bestArea = area;
+        }
+    }
+    return best;
+}
+/** Smallest rect covering both inputs. */
+export function unionRect(a, b) {
+    const x = Math.min(a.x, b.x);
+    const y = Math.min(a.y, b.y);
+    return {
+        x,
+        y,
+        width: Math.max(a.x + a.width, b.x + b.width) - x,
+        height: Math.max(a.y + a.height, b.y + b.height) - y,
+    };
+}
+/** Minimum slot length; matches the edge strip's `min-width/height: 104px`. */
+export const UE_STRIP_SLOT_MIN = 104;
+/** Where a tab dropped at `p` lands in a strip of existing tabs. The index is
+ *  decided by tab MIDPOINTS along the strip axis, which is what makes a drag
+ *  along the strip reorder continuously: once the slot opens between two tabs
+ *  the cursor sits in that gap, and both neighbours' midpoints stay on their
+ *  own side of it, so the choice is stable until the cursor passes the next
+ *  midpoint. `tabs` must be in DOM order and exclude the slot itself. */
+export function stripInsertion(tabs, strip, p, axis, minSlot = UE_STRIP_SLOT_MIN) {
+    const horiz = axis === 'x';
+    const start = (r) => (horiz ? r.x : r.y);
+    const span = (r) => (horiz ? r.width : r.height);
+    const cursor = horiz ? p.x : p.y;
+    let index = tabs.length;
+    for (let i = 0; i < tabs.length; i += 1) {
+        if (cursor < start(tabs[i]) + span(tabs[i]) / 2) {
+            index = i;
+            break;
+        }
+    }
+    // Match the strip's rhythm: a median-sized slot reads as "one more tab".
+    const lengths = tabs.map(span).sort((a, b) => a - b);
+    const median = lengths.length > 0 ? lengths[Math.floor(lengths.length / 2)] : 0;
+    const slotLen = Math.max(minSlot, median);
+    const last = tabs[tabs.length - 1];
+    const at = index < tabs.length
+        ? start(tabs[index])
+        : last
+            ? start(last) + span(last)
+            : start(strip);
+    return {
+        index,
+        slot: horiz
+            ? { x: at, y: strip.y, width: slotLen, height: strip.height }
+            : { x: strip.x, y: at, width: strip.width, height: slotLen },
+    };
+}
+/** Map a UePosition to the dockview grid `Direction` used by `addGroup`/
+ *  `addPanel({ position })`. 'center' has no absolute direction. */
+export function toGridDirection(pos) {
+    switch (pos) {
+        case 'top': return 'above';
+        case 'bottom': return 'below';
+        case 'left': return 'left';
+        case 'right': return 'right';
+        case 'center':
+        default: return 'within';
+    }
+}

package/dist/package/browser/components/DockShell/ueDrag/overlay.d.ts

@@ -0,0 +1,32 @@
+import type { DirectorLayout, OuterLayout, Point, Rect, UePosition } from './geometry';
+import './ueDrag.css';
+export interface OverlayActive {
+    readonly kind: 'group' | 'outer';
+    readonly pos: UePosition;
+}
+export interface OverlayState {
+    /** Cursor position in viewport coordinates (for the drag ghost). */
+    readonly pointer: Point;
+    /** Dock director for the hovered group, or null when over no group. */
+    readonly director: DirectorLayout | null;
+    /** Four dock-to-region buttons for the hovered region, or null. */
+    readonly outer: OuterLayout | null;
+    /** The shape currently under the cursor (drives highlight + preview). */
+    readonly active: OverlayActive | null;
+    /** Translucent slab showing where a drop would land. */
+    readonly preview: Rect | null;
+    /** How to paint `preview`. A tab-strip target draws an OUTLINE only: the real
+     *  landing hint there is the ghost tab slot the controller inserts into the
+     *  strip, which a filled slab (drawn above every app layer) would cover. */
+    readonly previewKind?: 'slab' | 'strip';
+    /** Drag ghost label (the panel title). */
+    readonly ghostTitle: string | null;
+}
+export interface UeOverlayHandle {
+    update(state: OverlayState): void;
+    /** Body-level host for the live panel preview (see build()'s liveHost). */
+    livePreviewHost(): HTMLElement;
+    hide(): void;
+    destroy(): void;
+}
+export declare function getUeOverlay(): UeOverlayHandle;

package/dist/package/browser/components/DockShell/ueDrag/overlay.js

@@ -0,0 +1,206 @@
+// Imperative, viewport-fixed overlay for the UE-style dock drag.
+//
+// WHY imperative + a module singleton (not a React component):
+//   * The drag controller (controller.ts) is itself installed imperatively from
+//     `DockRegion.onReady` (same lifecycle as `installEdgeDrawer`), so it has no
+//     React render scope to hang an overlay off of.
+//   * There are THREE DockRegion instances (DockShell / AuxBar / ChatDock). A
+//     drag can start in one and land in another; a single body-level overlay in
+//     viewport coordinates paints seamlessly across all of them.
+//   * During a drag we update on every pointermove — bypassing React's commit
+//     phase keeps it jank-free.
+//
+// The dock director (center square + four trapezoids) is drawn as SVG so the
+// trapezoids and their highlight are trivial. The overlay is purely decorative
+// (`pointer-events: none`); all hit-testing is done by the controller against
+// the SAME shapes drawn here (see geometry.ts), so it never needs events.
+import './ueDrag.css';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+let dom = null;
+function placeRect(el, r) {
+    if (!r) {
+        el.style.display = 'none';
+        return;
+    }
+    el.style.display = '';
+    el.style.transform = `translate(${r.x}px, ${r.y}px)`;
+    el.style.width = `${r.width}px`;
+    el.style.height = `${r.height}px`;
+}
+function placeSquare(el, r) {
+    if (!r) {
+        el.style.display = 'none';
+        return;
+    }
+    el.style.display = '';
+    el.style.left = `${r.x}px`;
+    el.style.top = `${r.y}px`;
+    el.style.width = `${r.width}px`;
+    el.style.height = `${r.height}px`;
+}
+function pointsAttr(poly) {
+    return poly.map((p) => `${p.x},${p.y}`).join(' ');
+}
+function build() {
+    const root = document.createElement('div');
+    root.className = 'fx-ue-overlay';
+    // Host for the LIVE panel preview (the lifted floating carrier is re-parented
+    // here during a drag). First child → stacks below the slab/director/ghost, so
+    // the green tint + wireframe read on top of the real panel render. Living in
+    // the body-level overlay (z 2147483000) lifts it above the viewport keep-alive
+    // surface (z 40) and works across dockview instances.
+    const liveHost = document.createElement('div');
+    liveHost.className = 'fx-ue-live-host';
+    root.appendChild(liveHost);
+    const preview = document.createElement('div');
+    preview.className = 'fx-ue-preview';
+    preview.style.display = 'none';
+    root.appendChild(preview);
+    // The dock director is SVG (trapezoids). One viewport-sized svg, shapes drawn
+    // directly in viewport coordinates.
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('class', 'fx-ue-svg');
+    const dirGroup = document.createElementNS(SVG_NS, 'g');
+    dirGroup.setAttribute('class', 'fx-ue-director');
+    dirGroup.style.display = 'none';
+    const mkPoly = (cls) => {
+        const p = document.createElementNS(SVG_NS, 'polygon');
+        p.setAttribute('class', `fx-ue-dir-trap fx-ue-dir-trap--${cls}`);
+        dirGroup.appendChild(p);
+        return p;
+    };
+    const dirTrapezoids = {
+        top: mkPoly('top'),
+        bottom: mkPoly('bottom'),
+        left: mkPoly('left'),
+        right: mkPoly('right'),
+    };
+    const dirCenter = document.createElementNS(SVG_NS, 'rect');
+    dirCenter.setAttribute('class', 'fx-ue-dir-center');
+    dirCenter.setAttribute('rx', '4');
+    dirGroup.appendChild(dirCenter);
+    svg.appendChild(dirGroup);
+    root.appendChild(svg);
+    // Dock-to-region buttons remain simple squares pinned at the edges.
+    const outerBox = document.createElement('div');
+    outerBox.className = 'fx-ue-outer';
+    outerBox.style.display = 'none';
+    const mkBtn = (cls) => {
+        const b = document.createElement('div');
+        b.className = `fx-ue-btn fx-ue-btn--outer ${cls}`;
+        const glyph = document.createElement('span');
+        glyph.className = 'fx-ue-btn-glyph';
+        b.appendChild(glyph);
+        return b;
+    };
+    const outerBtns = {
+        top: mkBtn('fx-ue-btn--top'),
+        bottom: mkBtn('fx-ue-btn--bottom'),
+        left: mkBtn('fx-ue-btn--left'),
+        right: mkBtn('fx-ue-btn--right'),
+    };
+    for (const b of Object.values(outerBtns))
+        outerBox.appendChild(b);
+    root.appendChild(outerBox);
+    const ghost = document.createElement('div');
+    ghost.className = 'fx-ue-ghost';
+    ghost.style.display = 'none';
+    root.appendChild(ghost);
+    document.body.appendChild(root);
+    return {
+        root,
+        liveHost,
+        preview,
+        svg,
+        dirGroup,
+        dirTrapezoids,
+        dirCenter,
+        outerBox,
+        outerBtns,
+        ghost,
+    };
+}
+function ensureDom() {
+    if (dom && document.body.contains(dom.root))
+        return dom;
+    dom = build();
+    return dom;
+}
+function setActiveEls(els, activePos) {
+    for (const [pos, el] of Object.entries(els)) {
+        el.classList.toggle('fx-ue-active', pos === activePos);
+    }
+}
+let handle = null;
+export function getUeOverlay() {
+    if (handle)
+        return handle;
+    handle = {
+        update(state) {
+            const d = ensureDom();
+            d.root.style.display = '';
+            // Preview slab.
+            placeRect(d.preview, state.preview);
+            d.preview.classList.toggle('fx-ue-preview--strip', state.previewKind === 'strip');
+            // Dock director (SVG trapezoids + center square).
+            const dir = state.director;
+            if (dir) {
+                d.dirGroup.style.display = '';
+                d.dirTrapezoids.top.setAttribute('points', pointsAttr(dir.top));
+                d.dirTrapezoids.bottom.setAttribute('points', pointsAttr(dir.bottom));
+                d.dirTrapezoids.left.setAttribute('points', pointsAttr(dir.left));
+                d.dirTrapezoids.right.setAttribute('points', pointsAttr(dir.right));
+                d.dirCenter.setAttribute('x', String(dir.center.x));
+                d.dirCenter.setAttribute('y', String(dir.center.y));
+                d.dirCenter.setAttribute('width', String(dir.center.width));
+                d.dirCenter.setAttribute('height', String(dir.center.height));
+                const activeDir = state.active?.kind === 'group' ? state.active.pos : null;
+                setActiveEls({ ...d.dirTrapezoids, center: d.dirCenter }, activeDir);
+            }
+            else {
+                d.dirGroup.style.display = 'none';
+            }
+            // Outer (dock-to-region) targets.
+            if (state.outer) {
+                d.outerBox.style.display = '';
+                placeSquare(d.outerBtns.top, state.outer.top);
+                placeSquare(d.outerBtns.bottom, state.outer.bottom);
+                placeSquare(d.outerBtns.left, state.outer.left);
+                placeSquare(d.outerBtns.right, state.outer.right);
+                setActiveEls(d.outerBtns, state.active?.kind === 'outer' ? state.active.pos : null);
+            }
+            else {
+                d.outerBox.style.display = 'none';
+            }
+            // Ghost chip.
+            if (state.ghostTitle) {
+                d.ghost.style.display = '';
+                d.ghost.textContent = state.ghostTitle;
+                d.ghost.style.transform = `translate(${state.pointer.x + 14}px, ${state.pointer.y + 14}px)`;
+            }
+            else {
+                d.ghost.style.display = 'none';
+            }
+        },
+        livePreviewHost() {
+            return ensureDom().liveHost;
+        },
+        hide() {
+            if (!dom)
+                return;
+            dom.root.style.display = 'none';
+            dom.preview.style.display = 'none';
+            dom.dirGroup.style.display = 'none';
+            dom.outerBox.style.display = 'none';
+            dom.ghost.style.display = 'none';
+        },
+        destroy() {
+            try {
+                dom?.root.remove();
+            }
+            catch { /* noop */ }
+            dom = null;
+        },
+    };
+    return handle;
+}