@floegence/floe-webapp-core 0.36.12 → 0.36.15

package/dist/components/ui/InfiniteCanvas.js

@@ -1,163 +1,181 @@
-import { insert as x, effect as G, className as T, setAttribute as J, setStyleProperty as K, template as Q, use as ee, delegateEvents as te } from "solid-js/web";
-import { createSignal as _, untrack as L, createEffect as b, onCleanup as A } from "solid-js";
-import { cn as D } from "../../utils/cn.js";
-import { startHotInteraction as y } from "../../utils/hotInteraction.js";
-import { resolveSurfaceInteractionTargetRole as ne, resolveSurfaceWheelRouting as re, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as oe } from "./localInteractionSurface.js";
-var ae = /* @__PURE__ */ Q('<div><div style="transform-origin:0 0">');
-const ie = 1, ce = 0.45, le = 2.2, se = 14e-4, ue = '[data-floe-canvas-pan-surface="true"]', Y = 3;
-function de(n, a, d) {
-  return Math.max(a, Math.min(d, n));
+import { spread as B, mergeProps as j, insert as T, effect as q, className as G, setStyleProperty as J, template as K, use as Q } from "solid-js/web";
+import { createSignal as _, untrack as I, createEffect as L, onCleanup as A } from "solid-js";
+import { cn as x } from "../../utils/cn.js";
+import { startHotInteraction as D } from "../../utils/hotInteraction.js";
+import { resolveSurfaceInteractionTargetRole as ee, resolveSurfaceWheelRouting as te, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as ne } from "./localInteractionSurface.js";
+import { clientToCanvasLocal as Y, localToCanvasWorld as re, createViewportFromZoomAnchor as oe } from "./canvasGeometry.js";
+import { SURFACE_PORTAL_LAYER_ATTR as ie } from "./dialogSurfaceScope.js";
+var ae = /* @__PURE__ */ K('<div><div style="transform-origin:0 0">');
+const ce = 1, le = 0.45, se = 2.2, ue = 14e-4, de = '[data-floe-canvas-pan-surface="true"]', R = 3;
+function fe(t, i, u) {
+  return Math.max(i, Math.min(u, t));
 }
-function M(n) {
+function b(t) {
   return {
-    x: Number.isFinite(n.x) ? n.x : 0,
-    y: Number.isFinite(n.y) ? n.y : 0,
-    scale: Number.isFinite(n.scale) && n.scale > 0 ? n.scale : ie
+    x: Number.isFinite(t.x) ? t.x : 0,
+    y: Number.isFinite(t.y) ? t.y : 0,
+    scale: Number.isFinite(t.scale) && t.scale > 0 ? t.scale : ce
   };
 }
-function fe(n, a) {
-  return n.deltaMode === 1 ? n.deltaY * 16 : n.deltaMode === 2 ? n.deltaY * (a?.clientHeight ?? window.innerHeight) : n.deltaY;
+function me(t, i) {
+  return t.deltaMode === 1 ? t.deltaY * 16 : t.deltaMode === 2 ? t.deltaY * (i?.clientHeight ?? window.innerHeight) : t.deltaY;
 }
-function Ce(n) {
-  const [a, d] = _(L(() => M(n.viewport))), [v, w] = _(null);
-  let i, f, m = !1, l;
-  const R = () => n.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => n.panSurfaceSelector ?? ue, F = () => n.wheelInteractiveSelector ?? oe, k = () => n.minScale ?? ce, V = () => n.maxScale ?? le, $ = () => n.wheelZoomSpeed ?? se, N = () => {
-    const e = v();
+function Pe(t) {
+  const [i, u] = _(I(() => b(t.viewport))), [m, S] = _(null);
+  let a, d, f = !1, l;
+  const M = () => t.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => t.panSurfaceSelector ?? de, F = () => t.wheelInteractiveSelector ?? ne, V = () => t.minScale ?? le, y = () => t.maxScale ?? se, k = () => t.wheelZoomSpeed ?? ue, U = () => {
+    const e = m();
     return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
-  }, p = () => {
-    f !== void 0 && (window.clearTimeout(f), f = void 0);
+  }, w = () => {
+    d !== void 0 && (window.clearTimeout(d), d = void 0);
   }, C = () => {
-    m = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
-  }, U = () => {
+    f = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
+  }, N = () => {
     if (typeof window > "u") {
-      m = !1;
+      f = !1;
       return;
     }
     l !== void 0 && window.clearTimeout(l), l = window.setTimeout(() => {
-      l = void 0, m = !1;
+      l = void 0, f = !1;
     }, 0);
-  }, h = (e) => {
-    L(() => n.onViewportChange?.(e));
-  }, H = (e) => {
+  }, v = (e) => {
+    I(() => t.onViewportChange?.(e));
+  }, Z = (e) => {
     if (typeof window > "u") {
-      h(e);
+      v(e);
       return;
     }
-    p(), f = window.setTimeout(() => {
-      f = void 0, h(e);
+    w(), d = window.setTimeout(() => {
+      d = void 0, v(e);
     }, 90);
-  }, g = (e) => ne({
+  }, p = (e) => ee({
     target: e,
-    interactiveSelector: R(),
+    interactiveSelector: M(),
     panSurfaceSelector: X()
-  }), E = (e) => {
-    const t = v();
-    if (!t || e !== void 0 && t.pointerId !== e) return;
-    t.stopInteraction?.();
-    const o = a();
-    w(null), i && i.hasPointerCapture(t.pointerId) && i.releasePointerCapture(t.pointerId), t.startedFromPanSurface && t.moved && (m = !0, U()), h(o);
+  }), h = (e) => {
+    const n = m();
+    if (!n || e !== void 0 && n.pointerId !== e) return;
+    n.stopInteraction?.();
+    const r = i();
+    S(null), a && a.hasPointerCapture(n.pointerId) && a.releasePointerCapture(n.pointerId), n.startedFromPanSurface && n.moved && (f = !0, N()), v(r);
   };
-  b(() => {
-    v() || d(M(n.viewport));
-  }), b(() => {
-    const e = i;
+  L(() => {
+    m() || u(b(t.viewport));
+  }), L(() => {
+    const e = a;
     if (!e) return;
-    const t = (o) => {
-      !m || g(o.target) !== "pan_surface" || (C(), o.preventDefault(), o.stopPropagation());
+    const n = (r) => {
+      !f || p(r.target) !== "pan_surface" || (C(), r.preventDefault(), r.stopPropagation());
     };
-    e.addEventListener("click", t, !0), e.addEventListener("wheel", P, {
+    e.addEventListener("click", n, !0), e.addEventListener("wheel", g, {
       passive: !1
     }), A(() => {
-      e.removeEventListener("click", t, !0), e.removeEventListener("wheel", P);
+      e.removeEventListener("click", n, !0), e.removeEventListener("wheel", g);
     });
   }), A(() => {
-    p(), E(), C();
+    w(), h(), C();
   });
-  const Z = (e) => {
-    if (e.button !== 0 || n.disablePanZoom) return;
-    const t = g(e.target), o = t === "pan_surface";
-    t !== "local_surface" && (p(), C(), o || (e.preventDefault(), i?.setPointerCapture(e.pointerId)), w({
+  const H = (e) => {
+    if (e.button !== 0 || t.disablePanZoom) return;
+    const n = p(e.target), r = n === "pan_surface";
+    n !== "local_surface" && (w(), C(), r || (t.onViewportInteractionStart?.("pan"), e.preventDefault(), a?.setPointerCapture(e.pointerId)), S({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
-      startViewport: a(),
+      startViewport: i(),
       moved: !1,
-      startedFromPanSurface: o,
-      stopInteraction: o ? void 0 : y({
+      startedFromPanSurface: r,
+      stopInteraction: r ? void 0 : D({
         kind: "drag",
         cursor: "grabbing"
       })
     }));
   }, W = (e) => {
-    const t = v();
-    if (!t || t.pointerId !== e.pointerId) return;
-    const o = e.clientX - t.startClientX, r = e.clientY - t.startClientY;
-    if (!(t.moved || Math.abs(o) > Y || Math.abs(r) > Y)) return;
-    t.moved || (e.preventDefault(), i?.hasPointerCapture(e.pointerId) || i?.setPointerCapture(e.pointerId));
+    const n = m();
+    if (!n || n.pointerId !== e.pointerId) return;
+    const r = e.clientX - n.startClientX, o = e.clientY - n.startClientY;
+    if (!(n.moved || Math.abs(r) > R || Math.abs(o) > R)) return;
+    n.moved || (e.preventDefault(), a?.hasPointerCapture(e.pointerId) || a?.setPointerCapture(e.pointerId));
     const s = {
-      ...t.startViewport,
-      x: t.startViewport.x + o,
-      y: t.startViewport.y + r
+      ...n.startViewport,
+      x: n.startViewport.x + r,
+      y: n.startViewport.y + o
     };
-    t.moved || w({
-      ...t,
+    n.moved || S({
+      ...n,
       moved: !0,
-      stopInteraction: t.stopInteraction ?? y({
+      stopInteraction: n.stopInteraction ?? D({
         kind: "drag",
         cursor: "grabbing"
       })
-    }), d(s);
+    }), u(s);
   }, O = (e) => {
-    E(e.pointerId);
-  }, z = (e) => {
-    E(e.pointerId);
-  }, P = (e) => {
-    const t = i?.getBoundingClientRect();
-    if (!t || re({
+    h(e.pointerId);
+  }, $ = (e) => {
+    h(e.pointerId);
+  }, g = (e) => {
+    const n = a?.getBoundingClientRect();
+    if (!n || te({
       target: e.target,
-      disablePanZoom: !!n.disablePanZoom,
+      disablePanZoom: !!t.disablePanZoom,
       wheelInteractiveSelector: F()
     }).kind !== "canvas_zoom") return;
+    e.preventDefault(), t.onViewportInteractionStart?.("wheel");
+    const o = i(), c = Y(n, {
+      clientX: e.clientX,
+      clientY: e.clientY
+    }), s = me(e, a), P = fe(o.scale * Math.exp(-s * k()), V(), y());
+    if (Math.abs(P - o.scale) < 1e-4) return;
+    const E = oe({
+      viewport: o,
+      localPoint: c,
+      nextScale: P
+    });
+    u(E), Z(E);
+  }, z = (e) => {
+    if (p(e.target) !== "canvas") return;
+    const n = a?.getBoundingClientRect();
+    if (!n) return;
     e.preventDefault();
-    const r = a(), c = e.clientX - t.left, s = e.clientY - t.top, S = fe(e, i), u = de(r.scale * Math.exp(-S * $()), k(), V());
-    if (Math.abs(u - r.scale) < 1e-4) return;
-    const j = (c - r.x) / r.scale, q = (s - r.y) / r.scale, I = {
-      x: c - j * u,
-      y: s - q * u,
-      scale: u
-    };
-    d(I), H(I);
-  }, B = (e) => {
-    if (g(e.target) !== "canvas") return;
-    const t = i?.getBoundingClientRect();
-    if (!t) return;
-    e.preventDefault();
-    const o = e.clientX - t.left, r = e.clientY - t.top, c = a();
-    n.onCanvasContextMenu?.({
+    const r = Y(n, {
+      clientX: e.clientX,
+      clientY: e.clientY
+    }), o = i(), c = re(o, r);
+    t.onCanvasContextMenu?.({
       clientX: e.clientX,
       clientY: e.clientY,
-      localX: o,
-      localY: r,
-      worldX: (o - c.x) / c.scale,
-      worldY: (r - c.y) / c.scale
+      localX: r.localX,
+      localY: r.localY,
+      worldX: c.worldX,
+      worldY: c.worldY
     });
   };
   return (() => {
-    var e = ae(), t = e.firstChild;
-    e.$$contextmenu = B, e.addEventListener("pointercancel", z), e.$$pointerup = O, e.$$pointermove = W, e.$$pointerdown = Z;
-    var o = i;
-    return typeof o == "function" ? ee(o, e) : i = e, x(t, () => n.children), x(e, () => n.overlay?.(a()), null), G((r) => {
-      var c = D("floe-infinite-canvas", N() && "is-panning", n.disablePanZoom && "is-locked", n.class), s = n.ariaLabel ?? "Infinite canvas", S = D("floe-infinite-canvas__viewport", n.contentClass), u = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
-      return c !== r.e && T(e, r.e = c), s !== r.t && J(e, "aria-label", r.t = s), S !== r.a && T(t, r.a = S), u !== r.o && K(t, "transform", r.o = u), r;
+    var e = ae(), n = e.firstChild, r = a;
+    return typeof r == "function" ? Q(r, e) : a = e, B(e, j({
+      get class() {
+        return x("floe-infinite-canvas", U() && "is-panning", t.disablePanZoom && "is-locked", t.class);
+      }
+    }, {
+      [ie]: "true"
+    }, {
+      onPointerDown: H,
+      onPointerMove: W,
+      onPointerUp: O,
+      onPointerCancel: $,
+      onContextMenu: z,
+      get "aria-label"() {
+        return t.ariaLabel ?? "Infinite canvas";
+      }
+    }), !1, !0), T(n, () => t.children), T(e, () => t.overlay?.(i()), null), q((o) => {
+      var c = x("floe-infinite-canvas__viewport", t.contentClass), s = `translate(${i().x}px, ${i().y}px) scale(${i().scale})`;
+      return c !== o.e && G(n, o.e = c), s !== o.t && J(n, "transform", o.t = s), o;
     }, {
       e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
+      t: void 0
     }), e;
   })();
 }
-te(["pointerdown", "pointermove", "pointerup", "contextmenu"]);
 export {
-  Ce as InfiniteCanvas
+  Pe as InfiniteCanvas
 };

package/dist/components/ui/canvasGeometry.d.ts

@@ -0,0 +1,32 @@
+export interface CanvasViewportLike {
+    x: number;
+    y: number;
+    scale: number;
+}
+export interface CanvasClientPoint {
+    clientX: number;
+    clientY: number;
+}
+export interface CanvasLocalPoint {
+    localX: number;
+    localY: number;
+}
+export interface CanvasWorldPoint {
+    worldX: number;
+    worldY: number;
+}
+export interface CanvasViewportRectLike {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export declare function isPointInsideCanvasRect(rect: CanvasViewportRectLike, point: CanvasClientPoint): boolean;
+export declare function clientToCanvasLocal(rect: Pick<CanvasViewportRectLike, 'left' | 'top'>, point: CanvasClientPoint): CanvasLocalPoint;
+export declare function localToCanvasWorld(viewport: CanvasViewportLike, point: CanvasLocalPoint): CanvasWorldPoint;
+export declare function clientToCanvasWorld(rect: CanvasViewportRectLike, viewport: CanvasViewportLike, point: CanvasClientPoint): CanvasWorldPoint | null;
+export declare function createViewportFromZoomAnchor(options: {
+    viewport: CanvasViewportLike;
+    localPoint: CanvasLocalPoint;
+    nextScale: number;
+}): CanvasViewportLike;

package/dist/components/ui/canvasGeometry.js

@@ -0,0 +1,33 @@
+function e(l, c) {
+  return c.clientX >= l.left && c.clientX <= l.right && c.clientY >= l.top && c.clientY <= l.bottom;
+}
+function o(l, c) {
+  return {
+    localX: c.clientX - l.left,
+    localY: c.clientY - l.top
+  };
+}
+function a(l, c) {
+  return {
+    worldX: (c.localX - l.x) / l.scale,
+    worldY: (c.localY - l.y) / l.scale
+  };
+}
+function t(l, c, n) {
+  return e(l, n) ? a(c, o(l, n)) : null;
+}
+function r(l) {
+  const c = a(l.viewport, l.localPoint);
+  return {
+    x: l.localPoint.localX - c.worldX * l.nextScale,
+    y: l.localPoint.localY - c.worldY * l.nextScale,
+    scale: l.nextScale
+  };
+}
+export {
+  o as clientToCanvasLocal,
+  t as clientToCanvasWorld,
+  r as createViewportFromZoomAnchor,
+  e as isPointInsideCanvasRect,
+  a as localToCanvasWorld
+};

package/dist/components/ui/dialogSurfaceScope.d.ts

@@ -1,14 +1,39 @@
+import type { SurfacePortalRect } from './surfacePortalTypes';
 export declare const DIALOG_SURFACE_HOST_ATTR = "data-floe-dialog-surface-host";
+export declare const SURFACE_PORTAL_HOST_ATTR = "data-floe-dialog-surface-host";
+export declare const SURFACE_PORTAL_LAYER_ATTR = "data-floe-surface-portal-layer";
 export declare const DIALOG_SURFACE_BOUNDARY_ATTR = "data-floe-dialog-surface-boundary";
 export type DialogSurfaceInteractionSnapshot = Readonly<{
     target: Element | null;
     activeElement: Element | null;
     recordedAt: number;
 }>;
+export type SurfacePortalInteractionSnapshot = DialogSurfaceInteractionSnapshot;
+export type SurfacePortalMode = 'global' | 'surface';
 export type ResolvedDialogSurfaceHost = Readonly<{
     host: HTMLElement | null;
-    mode: 'global' | 'surface';
+    boundaryHost: HTMLElement | null;
+    mountHost: HTMLElement | null;
+    mode: SurfacePortalMode;
 }>;
+export type ResolvedSurfacePortalHost = ResolvedDialogSurfaceHost;
+export type SurfacePortalBoundaryRect = SurfacePortalRect;
+export type { SurfacePortalRect };
 export declare function ensureDialogSurfaceInteractionTracking(): void;
+export declare function ensureSurfacePortalInteractionTracking(): void;
 export declare function resolveDialogSurfaceHost(): ResolvedDialogSurfaceHost;
+export declare function resolveSurfacePortalHost(): ResolvedSurfacePortalHost;
+export declare function isSurfacePortalMode(surfaceHost: ResolvedSurfacePortalHost): boolean;
+export declare function resolveSurfacePortalMount(surfaceHost: ResolvedSurfacePortalHost): HTMLElement | undefined;
+export declare function resolveSurfacePortalBoundaryRect(surfaceHost: ResolvedSurfacePortalHost): SurfacePortalBoundaryRect;
+export declare function resolveSurfacePortalMountRect(surfaceHost: ResolvedSurfacePortalHost): SurfacePortalBoundaryRect;
+export declare function projectSurfacePortalPosition(position: Readonly<{
+    x: number;
+    y: number;
+}>, surfaceHost: ResolvedSurfacePortalHost): Readonly<{
+    x: number;
+    y: number;
+}>;
+export declare function projectSurfacePortalRect(rect: SurfacePortalBoundaryRect, surfaceHost: ResolvedSurfacePortalHost): SurfacePortalBoundaryRect;
 export declare function __resetDialogSurfaceScopeForTests(): void;
+export declare function __resetSurfacePortalScopeForTests(): void;

package/dist/components/ui/dialogSurfaceScope.js

@@ -1,45 +1,144 @@
-const a = "data-floe-dialog-surface-host", m = "data-floe-dialog-surface-boundary";
-let o = null, t = null;
-function d(e) {
-  return typeof Element < "u" && e instanceof Element ? e : typeof Node < "u" && e instanceof Node ? e.parentElement : null;
-}
-function f(e) {
-  const n = e?.activeElement;
-  return n instanceof Element ? n : null;
-}
-function i(e) {
-  const n = typeof document < "u" ? document : null;
-  o = {
-    target: d(e),
-    activeElement: f(n),
+const f = "data-floe-dialog-surface-host", y = f, m = "data-floe-surface-portal-layer", A = "data-floe-dialog-surface-boundary", p = 1600;
+let r = null, o = null;
+function g(t) {
+  return typeof Element < "u" && t instanceof Element ? t : typeof Node < "u" && t instanceof Node ? t.parentElement : null;
+}
+function E(t) {
+  const e = t?.activeElement;
+  return e instanceof Element ? e : null;
+}
+function d(t) {
+  const e = typeof document < "u" ? document : null;
+  r = {
+    target: g(t),
+    activeElement: E(e),
     recordedAt: Date.now()
   };
 }
-function r(e) {
-  i(e.target);
+function i(t) {
+  d(t.target);
+}
+function l(t) {
+  d(t.target);
+}
+function a() {
+  T();
+}
+function T() {
+  typeof document > "u" || o !== document && (o && (o.removeEventListener("pointerdown", i, !0), o.removeEventListener("focusin", l, !0)), document.addEventListener("pointerdown", i, !0), document.addEventListener("focusin", l, !0), o = document);
+}
+function w() {
+  return !r || Date.now() - r.recordedAt > p ? null : r;
+}
+function c(t) {
+  const e = t?.closest(`[${f}="true"]`);
+  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement && e.isConnected ? e : null;
+}
+function R(t) {
+  if (!t) return null;
+  const e = t.closest(`[${m}="true"]`);
+  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement && e.isConnected ? e : null;
+}
+function v() {
+  a();
+  const t = w(), e = c(t?.target ?? null) ?? c(t?.activeElement ?? null);
+  return e ? {
+    host: e,
+    boundaryHost: e,
+    mountHost: R(e) ?? e,
+    mode: "surface"
+  } : { host: null, boundaryHost: null, mountHost: null, mode: "global" };
 }
-function u(e) {
-  i(e.target);
+function u(t) {
+  return t.mode === "surface" && !!t.boundaryHost?.isConnected;
 }
-function l() {
-  typeof document > "u" || t !== document && (t && (t.removeEventListener("pointerdown", r, !0), t.removeEventListener("focusin", u, !0)), document.addEventListener("pointerdown", r, !0), document.addEventListener("focusin", u, !0), t = document);
+function S(t) {
+  if (u(t))
+    return t.mountHost ?? t.boundaryHost ?? void 0;
 }
 function s() {
-  return !o || Date.now() - o.recordedAt > 1600 ? null : o;
+  return typeof window > "u" ? {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0
+  } : {
+    left: 0,
+    top: 0,
+    right: window.innerWidth,
+    bottom: window.innerHeight,
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+}
+function _(t) {
+  if (!u(t) || !t.boundaryHost)
+    return s();
+  const e = t.boundaryHost.getBoundingClientRect();
+  return {
+    left: e.left,
+    top: e.top,
+    right: e.right,
+    bottom: e.bottom,
+    width: e.width,
+    height: e.height
+  };
+}
+function h(t) {
+  const e = S(t);
+  if (!e)
+    return s();
+  const n = e.getBoundingClientRect();
+  return {
+    left: n.left,
+    top: n.top,
+    right: n.right,
+    bottom: n.bottom,
+    width: n.width,
+    height: n.height
+  };
+}
+function b(t, e) {
+  if (!u(e))
+    return t;
+  const n = h(e);
+  return {
+    x: t.x - n.left,
+    y: t.y - n.top
+  };
 }
-function c(e) {
-  const n = e?.closest(`[${a}="true"]`);
-  return n instanceof HTMLElement && n.isConnected ? n : null;
+function L(t, e) {
+  if (!u(e))
+    return t;
+  const n = h(e);
+  return {
+    left: t.left - n.left,
+    top: t.top - n.top,
+    right: t.right - n.left,
+    bottom: t.bottom - n.top,
+    width: t.width,
+    height: t.height
+  };
 }
-function E() {
-  l();
-  const e = s(), n = c(e?.target ?? null) ?? c(e?.activeElement ?? null);
-  return n ? { host: n, mode: "surface" } : { host: null, mode: "global" };
+function P() {
+  r = null;
 }
-typeof document < "u" && l();
+typeof document < "u" && a();
 export {
-  m as DIALOG_SURFACE_BOUNDARY_ATTR,
-  a as DIALOG_SURFACE_HOST_ATTR,
-  l as ensureDialogSurfaceInteractionTracking,
-  E as resolveDialogSurfaceHost
+  A as DIALOG_SURFACE_BOUNDARY_ATTR,
+  f as DIALOG_SURFACE_HOST_ATTR,
+  y as SURFACE_PORTAL_HOST_ATTR,
+  m as SURFACE_PORTAL_LAYER_ATTR,
+  P as __resetSurfacePortalScopeForTests,
+  a as ensureDialogSurfaceInteractionTracking,
+  T as ensureSurfacePortalInteractionTracking,
+  u as isSurfacePortalMode,
+  b as projectSurfacePortalPosition,
+  L as projectSurfacePortalRect,
+  _ as resolveSurfacePortalBoundaryRect,
+  v as resolveSurfacePortalHost,
+  S as resolveSurfacePortalMount,
+  h as resolveSurfacePortalMountRect
 };

package/dist/components/ui/index.d.ts

@@ -7,7 +7,9 @@ export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectPro
 export { Tooltip, type TooltipProps } from './Tooltip';
 export { CommandPalette } from './CommandPalette';
 export { InfiniteCanvas, type InfiniteCanvasProps, type InfiniteCanvasPoint, type InfiniteCanvasContextMenuEvent, } from './InfiniteCanvas';
+export { clientToCanvasLocal, clientToCanvasWorld, createViewportFromZoomAnchor, isPointInsideCanvasRect, localToCanvasWorld, type CanvasClientPoint, type CanvasLocalPoint, type CanvasViewportLike, type CanvasViewportRectLike, type CanvasWorldPoint, } from './canvasGeometry';
 export { CANVAS_WHEEL_INTERACTIVE_ATTR, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR, LOCAL_INTERACTION_SURFACE_ATTR, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR, WORKBENCH_WIDGET_SHELL_ATTR, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR, isLocalInteractionSurfaceTarget, resolveSurfaceInteractionTargetRole, resolveSurfaceWheelRouting, resolveWorkbenchWidgetEventOwnership, type SurfaceInteractionRoutingOptions, type SurfaceInteractionTargetRole, type SurfaceWheelLocalReason, type SurfaceWheelRoutingDecision, type SurfaceWheelRoutingOptions, type WorkbenchWidgetEventOwnership, type WorkbenchWidgetEventOwnershipOptions, } from './localInteractionSurface';
+export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, isSurfacePortalMode, projectSurfacePortalPosition, projectSurfacePortalRect, resolveSurfacePortalBoundaryRect, resolveSurfacePortalHost, resolveSurfacePortalMount, resolveSurfacePortalMountRect, __resetSurfacePortalScopeForTests, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalInteractionSnapshot, type SurfacePortalMode, type SurfacePortalRect, } from './surfacePortalScope';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Interactive3DCard, AnimatedBorderCard, NeonCard, MorphCard, type CardProps, type CardVariant, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, type Interactive3DCardProps, type AnimatedBorderCardProps, type NeonCardProps, type MorphCardProps, } from './Card';
 export { Tabs, TabPanel, type TabsProps, type TabPanelProps, type TabItem, type TabsFeatures, type TabsSlotClassNames, type TabsIndicatorMode, type TabsIndicatorColorToken, } from './Tabs';
 export { DirectoryPicker, type DirectoryPickerProps } from './DirectoryPicker';

package/dist/components/ui/menuUtils.d.ts

@@ -1,11 +1,30 @@
 export declare const VIEWPORT_MARGIN = 8;
 export declare const MENU_ITEM_SELECTOR = "[role=\"menuitem\"]:not([disabled]):not([aria-disabled=\"true\"])";
+export type MenuBoundaryRect = Readonly<{
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}>;
 export type MenuFocusMode = 'first' | 'last' | 'selected';
-export declare function calculateMenuPosition(triggerRect: DOMRect, menuRect: DOMRect, align: 'start' | 'center' | 'end'): {
+export declare function resolveViewportMenuBoundaryRect(): MenuBoundaryRect;
+export declare function clampMenuPosition(anchor: Readonly<{
+    x: number;
+    y: number;
+}>, menuRect: Readonly<{
+    width: number;
+    height: number;
+}>, boundaryRect?: MenuBoundaryRect): {
+    x: number;
+    y: number;
+};
+export declare function calculateMenuPosition(triggerRect: DOMRect, menuRect: DOMRect, align: 'start' | 'center' | 'end', boundaryRect?: MenuBoundaryRect): {
     x: number;
     y: number;
 };
-export declare function calculateSubmenuPosition(parentRect: DOMRect, submenuRect: DOMRect): {
+export declare function calculateSubmenuPosition(parentRect: DOMRect, submenuRect: DOMRect, boundaryRect?: MenuBoundaryRect): {
     x: number;
     y: number;
 };