@floegence/floe-webapp-core 0.36.26 → 0.36.28

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

@@ -0,0 +1,22 @@
+import { type JSX } from 'solid-js';
+export type SurfaceFloatingLayerPosition = Readonly<{
+    x: number;
+    y: number;
+}>;
+export type SurfaceFloatingLayerSize = Readonly<{
+    width: number;
+    height: number;
+}>;
+export interface SurfaceFloatingLayerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style' | 'ref'> {
+    position: SurfaceFloatingLayerPosition;
+    estimatedSize?: SurfaceFloatingLayerSize;
+    clamp?: boolean;
+    class?: string;
+    style?: JSX.CSSProperties;
+    children: JSX.Element;
+    layerRef?: (element: HTMLDivElement) => void;
+}
+/**
+ * Surface-aware floating layer for point-anchored overlays such as context menus.
+ */
+export declare function SurfaceFloatingLayer(props: SurfaceFloatingLayerProps): JSX.Element;

package/dist/components/ui/SurfaceFloatingLayer.js

@@ -0,0 +1,48 @@
+import { createComponent as m, Portal as d, use as y, spread as S, mergeProps as P, insert as v, template as R } from "solid-js/web";
+import { splitProps as g, createMemo as i } from "solid-js";
+import { cn as h } from "../../utils/cn.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as z } from "./localInteractionSurface.js";
+import { clampMenuPosition as _ } from "./menuUtils.js";
+import { resolveSurfacePortalHost as x, resolveSurfacePortalMount as C, resolveSurfacePortalBoundaryRect as M, isSurfacePortalMode as $, projectSurfacePortalPosition as A } from "./dialogSurfaceScope.js";
+var T = /* @__PURE__ */ R("<div>");
+function b() {
+  return {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0
+  };
+}
+function I(n) {
+  const [e, l] = g(n, ["position", "estimatedSize", "clamp", "class", "style", "children", "layerRef"]), o = i(() => x()), r = () => $(o()), c = () => M(o()) ?? b(), u = () => e.clamp !== !1 && !!e.estimatedSize, p = i(() => {
+    const t = e.position;
+    return !u() || !e.estimatedSize ? t : _(t, e.estimatedSize, c());
+  }), s = () => A(p(), o()), f = () => ({
+    ...e.style ?? {},
+    left: `${s().x}px`,
+    top: `${s().y}px`
+  });
+  return m(d, {
+    get mount() {
+      return C(o());
+    },
+    get children() {
+      var t = T(), a = e.layerRef;
+      return typeof a == "function" ? y(a, t) : e.layerRef = t, S(t, P(l, {
+        get class() {
+          return h(r() ? "absolute z-20" : "fixed z-50", e.class);
+        },
+        get style() {
+          return f();
+        }
+      }, () => ({
+        [z]: r() ? "true" : void 0
+      })), !1, !0), v(t, () => e.children), t;
+    }
+  });
+}
+export {
+  I as SurfaceFloatingLayer
+};

package/dist/components/ui/dialogSurfaceScope.js

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

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

@@ -4,6 +4,7 @@ export { Input, Textarea, NumberInput, AffixInput, type InputProps, type InputSi
 export { Dialog, ConfirmDialog, type DialogProps, type ConfirmDialogProps } from './Dialog';
 export { FloatingWindow, type FloatingWindowProps } from './FloatingWindow';
 export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectProps, } from './Dropdown';
+export { SurfaceFloatingLayer, type SurfaceFloatingLayerPosition, type SurfaceFloatingLayerProps, type SurfaceFloatingLayerSize, } from './SurfaceFloatingLayer';
 export { Tooltip, type TooltipProps } from './Tooltip';
 export { CommandPalette } from './CommandPalette';
 export { InfiniteCanvas, type InfiniteCanvasProps, type InfiniteCanvasPoint, type InfiniteCanvasContextMenuEvent, } from './InfiniteCanvas';

package/dist/components/workbench/WorkbenchContextMenu.js

@@ -1,49 +1,49 @@
-import { spread as d, mergeProps as v, insert as a, createComponent as s, addEventListener as f, effect as b, className as _, template as c, delegateEvents as p } from "solid-js/web";
-import { For as h } from "solid-js";
-import { cn as x } from "../../utils/cn.js";
-import { WORKBENCH_CONTEXT_MENU_ATTR as k } from "./workbenchContextMenuDismiss.js";
-var w = /* @__PURE__ */ c("<div role=menu class=workbench-context-menu data-floe-workbench-boundary=true>"), C = /* @__PURE__ */ c("<div role=separator aria-orientation=horizontal class=workbench-context-menu__separator>"), $ = /* @__PURE__ */ c("<button type=button role=menuitem><span class=workbench-context-menu__label>");
-function E(r) {
-  return r.kind === "action";
+import { spread as _, mergeProps as b, insert as c, createComponent as u, addEventListener as v, effect as f, className as p, template as a, delegateEvents as h } from "solid-js/web";
+import { For as x } from "solid-js";
+import { cn as k } from "../../utils/cn.js";
+import { WORKBENCH_CONTEXT_MENU_ATTR as w } from "./workbenchContextMenuDismiss.js";
+var $ = /* @__PURE__ */ a("<div role=menu class=workbench-context-menu data-floe-workbench-boundary=true>"), g = /* @__PURE__ */ a("<div role=separator aria-orientation=horizontal class=workbench-context-menu__separator>"), C = /* @__PURE__ */ a("<button type=button role=menuitem><span class=workbench-context-menu__icon aria-hidden=true></span><span class=workbench-context-menu__label>");
+function E(t) {
+  return t.kind === "action";
 }
-function M(r) {
+function A(t) {
   return (() => {
-    var o = w();
-    return d(o, v({
-      [k]: "true"
+    var o = $();
+    return _(o, b({
+      [w]: "true"
     }, {
       get style() {
         return {
-          left: `${r.x}px`,
-          top: `${r.y}px`
+          left: `${t.x}px`,
+          top: `${t.y}px`
         };
       },
       onContextMenu: (e) => e.preventDefault()
-    }), !1, !0), a(o, s(h, {
+    }), !1, !0), c(o, u(x, {
       get each() {
-        return r.items;
+        return t.items;
       },
       children: (e) => {
         if (!E(e))
-          return C();
+          return g();
         const m = e.icon;
         return (() => {
-          var t = $(), l = t.firstChild;
-          return f(t, "click", e.onSelect, !0), a(t, s(m, {
-            class: "h-3.5 w-3.5"
-          }), l), a(l, () => e.label), b((n) => {
-            var i = x("workbench-context-menu__item", e.destructive && "is-destructive"), u = e.disabled;
-            return i !== n.e && _(t, n.e = i), u !== n.t && (t.disabled = n.t = u), n;
+          var n = C(), i = n.firstChild, d = i.nextSibling;
+          return v(n, "click", e.onSelect, !0), c(i, u(m, {
+            class: "workbench-context-menu__icon-svg"
+          })), c(d, () => e.label), f((r) => {
+            var l = k("workbench-context-menu__item", e.destructive && "is-destructive"), s = e.disabled;
+            return l !== r.e && p(n, r.e = l), s !== r.t && (n.disabled = r.t = s), r;
           }, {
             e: void 0,
             t: void 0
-          }), t;
+          }), n;
         })();
       }
     })), o;
   })();
 }
-p(["click"]);
+h(["click"]);
 export {
-  M as WorkbenchContextMenu
+  A as WorkbenchContextMenu
 };