@floegence/floe-webapp-core 0.41.4 → 0.42.1

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

@@ -0,0 +1,20 @@
+import { type JSX } from 'solid-js';
+export interface WorkbenchDockPopoverSurfaceProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style' | 'ref'> {
+    owner: Element;
+    estimatedSize?: Readonly<{
+        width: number;
+        height: number;
+    }>;
+    gap?: number;
+    boundaryPadding?: number;
+    class?: string;
+    style?: JSX.CSSProperties;
+    children: JSX.Element;
+    surfaceRef?: (element: HTMLDivElement) => void;
+    onOwnerDisconnect?: () => void;
+}
+/**
+ * Surface-aware companion panel anchored above a Workbench Dock item.
+ * It owns viewport projection and clamping while the caller owns panel content.
+ */
+export declare function WorkbenchDockPopoverSurface(props: WorkbenchDockPopoverSurfaceProps): JSX.Element;

package/dist/components/workbench/WorkbenchDockPopoverSurface.js

@@ -0,0 +1,90 @@
+import { createComponent as $, use as C, spread as B, mergeProps as X, insert as q, effect as H, setStyleProperty as U, template as P } from "solid-js/web";
+import { splitProps as W, createSignal as d, createEffect as Y, onCleanup as I } from "solid-js";
+import { SurfaceFloatingLayer as T } from "../ui/SurfaceFloatingLayer.js";
+import { cn as Z } from "../../utils/cn.js";
+import { resolveSurfacePortalBoundaryRect as j, resolveSurfacePortalHost as G } from "../ui/dialogSurfaceScope.js";
+var J = /* @__PURE__ */ P("<div>"), K = /* @__PURE__ */ P("<span class=workbench-dock-popover__arrow aria-hidden=true>");
+const f = {
+  width: 320,
+  height: 320
+};
+function p(l, t, m) {
+  return Math.max(t, Math.min(m, l));
+}
+function ne(l) {
+  const [t, m] = W(l, ["owner", "estimatedSize", "gap", "boundaryPadding", "class", "style", "children", "surfaceRef", "onOwnerDisconnect"]), [x, z] = d({
+    x: 0,
+    y: 0
+  }), [k, R] = d(f.width / 2), [O, h] = d(!1), [E, L] = d(0);
+  let i, u = !1;
+  const _ = () => ({
+    owner: t.owner,
+    estimatedSize: t.estimatedSize ?? f,
+    gap: Math.max(0, t.gap ?? 16),
+    boundaryPadding: Math.max(0, t.boundaryPadding ?? 12),
+    onOwnerDisconnect: t.onOwnerDisconnect
+  }), g = (e) => {
+    const n = e.owner;
+    if (!n.isConnected) {
+      h(!1), u || (u = !0, e.onOwnerDisconnect?.());
+      return;
+    }
+    u = !1;
+    const r = e.estimatedSize, o = i?.offsetWidth || r.width, s = i?.offsetHeight || r.height, D = e.gap, a = e.boundaryPadding, w = n.getBoundingClientRect(), c = j(G({
+      owner: n
+    })), v = c.left + a, F = Math.max(v, c.right - a - o), y = c.top + a, M = Math.max(y, c.bottom - a - s), b = w.left + w.width / 2, S = p(b - o / 2, v, F), A = p(w.top - D - s, y, M);
+    z({
+      x: S,
+      y: A
+    }), R(p(b - S, 18, Math.max(18, o - 18))), h(!!i);
+  };
+  return Y(() => {
+    E();
+    const e = _(), n = e.owner;
+    let r = window.requestAnimationFrame(() => g(e));
+    const o = () => {
+      window.cancelAnimationFrame(r), r = window.requestAnimationFrame(() => g(e));
+    }, s = typeof ResizeObserver == "function" ? new ResizeObserver(o) : null;
+    s?.observe(n), i && s?.observe(i), window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), I(() => {
+      window.cancelAnimationFrame(r), s?.disconnect(), window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
+    });
+  }), $(T, {
+    get owner() {
+      return t.owner;
+    },
+    get position() {
+      return x();
+    },
+    get estimatedSize() {
+      return t.estimatedSize ?? f;
+    },
+    clamp: !1,
+    class: "workbench-dock-popover-layer",
+    get style() {
+      return {
+        visibility: O() ? "visible" : "hidden"
+      };
+    },
+    get children() {
+      return [(() => {
+        var e = J();
+        return C((n) => {
+          i = n, t.surfaceRef?.(n), L((r) => r + 1);
+        }, e), B(e, X(m, {
+          get class() {
+            return Z("workbench-dock-popover workbench-dock-material", t.class);
+          },
+          get style() {
+            return t.style;
+          }
+        }), !1, !0), q(e, () => t.children), e;
+      })(), (() => {
+        var e = K();
+        return H((n) => U(e, "left", `${k()}px`)), e;
+      })()];
+    }
+  });
+}
+export {
+  ne as WorkbenchDockPopoverSurface
+};

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

@@ -1,4 +1,5 @@
 import { type Component, type JSX } from 'solid-js';
+import { type WorkbenchWidgetFrame } from './workbenchHelpers';
 import { type WorkbenchEdgeAutoPanFrame } from './workbenchEdgeAutoPan';
 import type { WorkbenchDockToolId, WorkbenchInteractionMode, WorkbenchViewport, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchFilterBarProps {
@@ -12,7 +13,6 @@ export interface WorkbenchFilterBarProps {
     dockActions?: readonly WorkbenchDockAction[];
     dockItems?: readonly WorkbenchHostDockItem[];
     registerExternalDockDragController?: (controller: WorkbenchExternalDockDragController | null) => void;
-    onExternalDockDrop?: (item: WorkbenchExternalDockDragItem) => void;
     /**
      * Called when the user drags a widget pill onto the canvas to create a
      * new widget of that type. Coordinates are in client space (clientX/Y).
@@ -46,7 +46,7 @@ export type WorkbenchHostDockItem = Readonly<{
     }>;
     active?: boolean;
     onActivate?: (trigger: HTMLButtonElement) => void;
-    onDropToCanvas?: (clientX: number, clientY: number, context?: WorkbenchDockDropContext) => void;
+    canvasPlacement?: WorkbenchDockCanvasPlacement;
 }>;
 export type WorkbenchDockItemActivation = Readonly<{
     kind: 'widget' | 'tool';
@@ -60,6 +60,8 @@ export type WorkbenchExternalDockDragItem = Readonly<{
     icon: Component<{
         class?: string;
     }>;
+    canvasPlacement?: WorkbenchDockCanvasPlacement;
+    onDropToDock?: () => void;
 }>;
 export type WorkbenchExternalDockDragController = Readonly<{
     begin: (event: PointerEvent, item: WorkbenchExternalDockDragItem) => void;
@@ -76,6 +78,22 @@ export type WorkbenchDockDragPreview = Readonly<{
 export type WorkbenchDockDropContext = Readonly<{
     dropAllowed: boolean;
     canvasFrame: WorkbenchEdgeAutoPanFrame;
+    worldPoint?: Readonly<{
+        worldX: number;
+        worldY: number;
+    }>;
+}>;
+export type WorkbenchDockCanvasPlacement = Readonly<{
+    widgetType: WorkbenchWidgetType;
+    onDrop: (placement: WorkbenchCanvasWidgetPlacement) => void;
+}>;
+export type WorkbenchCanvasWidgetPlacement = Readonly<{
+    widgetType: WorkbenchWidgetType;
+    centerWorld: Readonly<{
+        worldX: number;
+        worldY: number;
+    }>;
+    frame: WorkbenchWidgetFrame;
 }>;
 export declare function WorkbenchDock(props: WorkbenchFilterBarProps): JSX.Element;
 export declare const WorkbenchFilterBar: typeof WorkbenchDock;