@floegence/floe-webapp-core 0.36.13 → 0.36.16

package/dist/components/ui/InfiniteCanvas.js

@@ -1,163 +1,183 @@
-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 { 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 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 { startHotInteraction as x } 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 ae } from "./dialogSurfaceScope.js";
+var ie = /* @__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, a, u) {
+  return Math.max(a, 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, a) {
+  return t.deltaMode === 1 ? t.deltaY * 16 : t.deltaMode === 2 ? t.deltaY * (a?.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 ge(t) {
+  const [a, u] = _(I(() => b(t.viewport))), [m, S] = _(null);
+  let i, 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({
+  }, h = (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);
+  }), p = (e) => {
+    const n = m();
+    if (!n || e !== void 0 && n.pointerId !== e) return;
+    n.stopInteraction?.();
+    const r = a();
+    S(null), i && i.hasPointerCapture(n.pointerId) && i.releasePointerCapture(n.pointerId), n.startedFromPanSurface && n.moved && (f = !0, N()), v(r);
   };
-  b(() => {
-    v() || d(M(n.viewport));
-  }), b(() => {
+  L(() => {
+    m() || u(b(t.viewport));
+  }), L(() => {
     const e = i;
     if (!e) return;
-    const t = (o) => {
-      !m || g(o.target) !== "pan_surface" || (C(), o.preventDefault(), o.stopPropagation());
+    const n = (r) => {
+      !f || h(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", P, {
       passive: !1
     }), A(() => {
-      e.removeEventListener("click", t, !0), e.removeEventListener("wheel", P);
+      e.removeEventListener("click", n, !0), e.removeEventListener("wheel", P);
     });
   }), A(() => {
-    p(), E(), C();
+    w(), p(), 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) return;
+    const n = h(e.target);
+    if (n === "canvas" && t.onCanvasPointerDown?.(e), t.disablePanZoom) return;
+    const r = n === "pan_surface";
+    n !== "local_surface" && (w(), C(), r || (t.onViewportInteractionStart?.("pan"), e.preventDefault(), i?.setPointerCapture(e.pointerId)), S({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
       startViewport: a(),
       moved: !1,
-      startedFromPanSurface: o,
-      stopInteraction: o ? void 0 : y({
+      startedFromPanSurface: r,
+      stopInteraction: r ? void 0 : x({
         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(), i?.hasPointerCapture(e.pointerId) || i?.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 ?? x({
         kind: "drag",
         cursor: "grabbing"
       })
-    }), d(s);
+    }), u(s);
   }, O = (e) => {
-    E(e.pointerId);
-  }, z = (e) => {
-    E(e.pointerId);
+    p(e.pointerId);
+  }, $ = (e) => {
+    p(e.pointerId);
   }, P = (e) => {
-    const t = i?.getBoundingClientRect();
-    if (!t || re({
+    const n = i?.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 = a(), c = Y(n, {
+      clientX: e.clientX,
+      clientY: e.clientY
+    }), s = me(e, i), g = fe(o.scale * Math.exp(-s * k()), V(), y());
+    if (Math.abs(g - o.scale) < 1e-4) return;
+    const E = oe({
+      viewport: o,
+      localPoint: c,
+      nextScale: g
+    });
+    u(E), Z(E);
+  }, z = (e) => {
+    if (h(e.target) !== "canvas") return;
+    const n = i?.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 = a(), 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 = ie(), n = e.firstChild, r = i;
+    return typeof r == "function" ? Q(r, e) : i = e, B(e, j({
+      get class() {
+        return D("floe-infinite-canvas", U() && "is-panning", t.disablePanZoom && "is-locked", t.class);
+      }
+    }, {
+      [ae]: "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?.(a()), null), q((o) => {
+      var c = D("floe-infinite-canvas__viewport", t.contentClass), s = `translate(${a().x}px, ${a().y}px) scale(${a().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
+  ge 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,5 +1,7 @@
+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;
@@ -10,17 +12,13 @@ export type SurfacePortalInteractionSnapshot = DialogSurfaceInteractionSnapshot;
 export type SurfacePortalMode = 'global' | 'surface';
 export type ResolvedDialogSurfaceHost = Readonly<{
     host: HTMLElement | null;
+    boundaryHost: HTMLElement | null;
+    mountHost: HTMLElement | null;
     mode: SurfacePortalMode;
 }>;
 export type ResolvedSurfacePortalHost = ResolvedDialogSurfaceHost;
-export type SurfacePortalBoundaryRect = Readonly<{
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-    width: number;
-    height: number;
-}>;
+export type SurfacePortalBoundaryRect = SurfacePortalRect;
+export type { SurfacePortalRect };
 export declare function ensureDialogSurfaceInteractionTracking(): void;
 export declare function ensureSurfacePortalInteractionTracking(): void;
 export declare function resolveDialogSurfaceHost(): ResolvedDialogSurfaceHost;
@@ -28,6 +26,7 @@ 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;
@@ -35,5 +34,6 @@ export declare function projectSurfacePortalPosition(position: 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,51 +1,62 @@
-const a = "data-floe-dialog-surface-host", w = "data-floe-dialog-surface-boundary";
-let o = null, n = null;
-function s(e) {
-  return typeof Element < "u" && e instanceof Element ? e : typeof Node < "u" && e instanceof Node ? e.parentElement : null;
-}
-function h(e) {
-  const t = e?.activeElement;
-  return t instanceof Element ? t : null;
-}
-function l(e) {
-  const t = typeof document < "u" ? document : null;
-  o = {
-    target: s(e),
-    activeElement: h(t),
+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 u(e) {
-  l(e.target);
+function i(t) {
+  d(t.target);
 }
-function c(e) {
-  l(e.target);
+function l(t) {
+  d(t.target);
 }
-function f() {
-  m();
+function a() {
+  T();
 }
-function m() {
-  typeof document > "u" || n !== document && (n && (n.removeEventListener("pointerdown", u, !0), n.removeEventListener("focusin", c, !0)), document.addEventListener("pointerdown", u, !0), document.addEventListener("focusin", c, !0), n = document);
+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 E() {
-  return !o || Date.now() - o.recordedAt > 1600 ? null : o;
+function w() {
+  return !r || Date.now() - r.recordedAt > p ? null : r;
 }
-function d(e) {
-  const t = e?.closest(`[${a}="true"]`);
-  return typeof HTMLElement > "u" ? null : t instanceof HTMLElement && t.isConnected ? t : null;
+function c(t) {
+  const e = t?.closest(`[${f}="true"]`);
+  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement && e.isConnected ? e : null;
 }
-function T() {
-  f();
-  const e = E(), t = d(e?.target ?? null) ?? d(e?.activeElement ?? null);
-  return t ? { host: t, mode: "surface" } : { host: null, mode: "global" };
+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 r(e) {
-  return e.mode === "surface" && !!e.host?.isConnected;
+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 v(e) {
-  return r(e) ? e.host ?? void 0 : void 0;
+function u(t) {
+  return t.mode === "surface" && !!t.boundaryHost?.isConnected;
 }
-function p() {
+function S(t) {
+  if (u(t))
+    return t.mountHost ?? t.boundaryHost ?? void 0;
+}
+function s() {
   return typeof window > "u" ? {
     left: 0,
     top: 0,
@@ -62,37 +73,72 @@ function p() {
     height: window.innerHeight
   };
 }
-function g(e) {
-  if (!r(e) || !e.host)
-    return p();
-  const t = e.host.getBoundingClientRect();
+function _(t) {
+  if (!u(t) || !t.boundaryHost)
+    return s();
+  const e = t.boundaryHost.getBoundingClientRect();
   return {
-    left: t.left,
-    top: t.top,
-    right: t.right,
-    bottom: t.bottom,
-    width: t.width,
-    height: t.height
+    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 S(e, t) {
-  if (!r(t))
-    return e;
-  const i = g(t);
+function L(t, e) {
+  if (!u(e))
+    return t;
+  const n = h(e);
   return {
-    x: e.x - i.left,
-    y: e.y - i.top
+    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
   };
 }
-typeof document < "u" && f();
+function P() {
+  r = null;
+}
+typeof document < "u" && a();
 export {
-  w as DIALOG_SURFACE_BOUNDARY_ATTR,
-  a as DIALOG_SURFACE_HOST_ATTR,
-  f as ensureDialogSurfaceInteractionTracking,
-  m as ensureSurfacePortalInteractionTracking,
-  r as isSurfacePortalMode,
-  S as projectSurfacePortalPosition,
-  g as resolveSurfacePortalBoundaryRect,
-  T as resolveSurfacePortalHost,
-  v as resolveSurfacePortalMount
+  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/surfacePortalScope.d.ts

@@ -1 +1 @@
-export { SURFACE_PORTAL_HOST_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, projectSurfacePortalPosition, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, } from './dialogSurfaceScope';
+export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, resolveSurfacePortalMountRect, projectSurfacePortalPosition, projectSurfacePortalRect, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalRect, } from './dialogSurfaceScope';

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

@@ -0,0 +1,8 @@
+export type SurfacePortalRect = Readonly<{
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}>;

package/dist/components/workbench/WorkbenchCanvas.d.ts

@@ -14,7 +14,9 @@ export interface WorkbenchCanvasProps {
     filters: Record<WorkbenchWidgetType, boolean>;
     setCanvasFrameRef: (el: HTMLDivElement | undefined) => void;
     onViewportCommit: (viewport: WorkbenchViewport) => void;
+    onViewportInteractionStart?: (kind: 'wheel' | 'pan') => void;
     onCanvasContextMenu: (event: InfiniteCanvasContextMenuEvent) => void;
+    onCanvasPointerDown?: (event: PointerEvent) => void;
     onSelectWidget: (widgetId: string) => void;
     onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
     onStartOptimisticFront: (widgetId: string) => void;
@@ -27,6 +29,8 @@ export interface WorkbenchCanvasProps {
         width: number;
         height: number;
     }) => void;
+    onRequestOverview: (item: WorkbenchWidgetItem) => void;
+    onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
 }
 export declare function WorkbenchCanvas(props: WorkbenchCanvasProps): import("solid-js").JSX.Element;