@floegence/floe-webapp-core 0.36.0 → 0.36.2

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,12 +1,11 @@
-import { use as l, insert as a, createComponent as i, effect as u, template as c } from "solid-js/web";
-import { For as d } from "solid-js";
-import { WorkbenchWidget as m } from "./WorkbenchWidget.js";
-import { InfiniteCanvas as g } from "../ui/InfiniteCanvas.js";
-var v = /* @__PURE__ */ c("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>"), s = /* @__PURE__ */ c("<div class=workbench-canvas>");
-function w(e) {
+import { use as r, insert as o, createComponent as i, effect as a, template as g } from "solid-js/web";
+import { WorkbenchCanvasField as c } from "./WorkbenchCanvasField.js";
+import { InfiniteCanvas as u } from "../ui/InfiniteCanvas.js";
+var m = /* @__PURE__ */ g("<div class=workbench-canvas>");
+function C(e) {
   return (() => {
-    var t = s(), o = e.setCanvasFrameRef;
-    return typeof o == "function" ? l(o, t) : e.setCanvasFrameRef = t, a(t, i(g, {
+    var t = m(), n = e.setCanvasFrameRef;
+    return typeof n == "function" ? r(n, t) : e.setCanvasFrameRef = t, o(t, i(u, {
       ariaLabel: "Workbench canvas",
       class: "workbench-canvas__infinite",
       get viewport() {
@@ -22,58 +21,57 @@ function w(e) {
         return e.locked;
       },
       get children() {
-        var r = v();
-        return r.firstChild, a(r, i(d, {
-          get each() {
+        return i(c, {
+          get widgetDefinitions() {
+            return e.widgetDefinitions;
+          },
+          get widgets() {
             return e.widgets;
           },
-          children: (n) => i(m, {
-            item: n,
-            get selected() {
-              return e.selectedWidgetId === n.id;
-            },
-            get optimisticFront() {
-              return e.optimisticFrontWidgetId === n.id;
-            },
-            get topZIndex() {
-              return e.topZIndex;
-            },
-            get viewportScale() {
-              return e.viewport.scale;
-            },
-            get locked() {
-              return e.locked;
-            },
-            get filtered() {
-              return !e.filters[n.type];
-            },
-            get onSelect() {
-              return e.onSelectWidget;
-            },
-            get onContextMenu() {
-              return e.onWidgetContextMenu;
-            },
-            get onStartOptimisticFront() {
-              return e.onStartOptimisticFront;
-            },
-            get onCommitFront() {
-              return e.onCommitFront;
-            },
-            get onCommitMove() {
-              return e.onCommitMove;
-            },
-            get onCommitResize() {
-              return e.onCommitResize;
-            },
-            get onRequestDelete() {
-              return e.onRequestDelete;
-            }
-          })
-        }), null), r;
+          get selectedWidgetId() {
+            return e.selectedWidgetId;
+          },
+          get optimisticFrontWidgetId() {
+            return e.optimisticFrontWidgetId;
+          },
+          get topZIndex() {
+            return e.topZIndex;
+          },
+          get viewportScale() {
+            return e.viewport.scale;
+          },
+          get locked() {
+            return e.locked;
+          },
+          get filters() {
+            return e.filters;
+          },
+          get onSelectWidget() {
+            return e.onSelectWidget;
+          },
+          get onWidgetContextMenu() {
+            return e.onWidgetContextMenu;
+          },
+          get onStartOptimisticFront() {
+            return e.onStartOptimisticFront;
+          },
+          get onCommitFront() {
+            return e.onCommitFront;
+          },
+          get onCommitMove() {
+            return e.onCommitMove;
+          },
+          get onCommitResize() {
+            return e.onCommitResize;
+          },
+          get onRequestDelete() {
+            return e.onRequestDelete;
+          }
+        });
       }
-    })), u(() => t.classList.toggle("is-locked", !!e.locked)), t;
+    })), a(() => t.classList.toggle("is-locked", !!e.locked)), t;
   })();
 }
 export {
-  w as WorkbenchCanvas
+  C as WorkbenchCanvas
 };

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

@@ -0,0 +1,25 @@
+import type { WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+export interface WorkbenchCanvasFieldProps {
+    widgetDefinitions: readonly WorkbenchWidgetDefinition[];
+    widgets: readonly WorkbenchWidgetItem[];
+    selectedWidgetId: string | null;
+    optimisticFrontWidgetId: string | null;
+    topZIndex: number;
+    viewportScale: number;
+    locked: boolean;
+    filters: Record<WorkbenchWidgetType, boolean>;
+    onSelectWidget: (widgetId: string) => void;
+    onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
+    onStartOptimisticFront: (widgetId: string) => void;
+    onCommitFront: (widgetId: string) => void;
+    onCommitMove: (widgetId: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onCommitResize: (widgetId: string, size: {
+        width: number;
+        height: number;
+    }) => void;
+    onRequestDelete: (widgetId: string) => void;
+}
+export declare function WorkbenchCanvasField(props: WorkbenchCanvasFieldProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchCanvasField.js

@@ -0,0 +1,145 @@
+import { insert as o, createComponent as g, template as u } from "solid-js/web";
+import { createMemo as r, For as m } from "solid-js";
+import { getWidgetEntry as c } from "./widgets/widgetRegistry.js";
+import { WorkbenchWidget as l } from "./WorkbenchWidget.js";
+var a = /* @__PURE__ */ u("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>");
+function w(t) {
+  const e = r((n) => {
+    const i = t.widgetById().get(t.widgetId);
+    if (i) return i;
+    if (n) return n;
+    throw new Error(`Workbench widget ${t.widgetId} is missing from the render map.`);
+  }), d = r(() => c(e().type, t.widgetDefinitions));
+  return g(l, {
+    get definition() {
+      return d();
+    },
+    get widgetId() {
+      return t.widgetId;
+    },
+    get widgetTitle() {
+      return e().title;
+    },
+    get widgetType() {
+      return e().type;
+    },
+    get x() {
+      return e().x;
+    },
+    get y() {
+      return e().y;
+    },
+    get width() {
+      return e().width;
+    },
+    get height() {
+      return e().height;
+    },
+    get zIndex() {
+      return e().z_index;
+    },
+    itemSnapshot: e,
+    get selected() {
+      return t.selectedWidgetId === t.widgetId;
+    },
+    get optimisticFront() {
+      return t.optimisticFrontWidgetId === t.widgetId;
+    },
+    get topZIndex() {
+      return t.topZIndex;
+    },
+    get viewportScale() {
+      return t.viewportScale;
+    },
+    get locked() {
+      return t.locked;
+    },
+    get filtered() {
+      return !t.filters[e().type];
+    },
+    get onSelect() {
+      return t.onSelectWidget;
+    },
+    get onContextMenu() {
+      return t.onWidgetContextMenu;
+    },
+    get onStartOptimisticFront() {
+      return t.onStartOptimisticFront;
+    },
+    get onCommitFront() {
+      return t.onCommitFront;
+    },
+    get onCommitMove() {
+      return t.onCommitMove;
+    },
+    get onCommitResize() {
+      return t.onCommitResize;
+    },
+    get onRequestDelete() {
+      return t.onRequestDelete;
+    }
+  });
+}
+function W(t) {
+  const e = r(() => t.widgets.map((n) => n.id)), d = r(() => new Map(t.widgets.map((n) => [n.id, n])));
+  return (() => {
+    var n = a();
+    return n.firstChild, o(n, g(m, {
+      get each() {
+        return e();
+      },
+      children: (i) => g(w, {
+        widgetId: i,
+        get widgetDefinitions() {
+          return t.widgetDefinitions;
+        },
+        get widgets() {
+          return t.widgets;
+        },
+        widgetById: d,
+        get selectedWidgetId() {
+          return t.selectedWidgetId;
+        },
+        get optimisticFrontWidgetId() {
+          return t.optimisticFrontWidgetId;
+        },
+        get topZIndex() {
+          return t.topZIndex;
+        },
+        get viewportScale() {
+          return t.viewportScale;
+        },
+        get locked() {
+          return t.locked;
+        },
+        get filters() {
+          return t.filters;
+        },
+        get onSelectWidget() {
+          return t.onSelectWidget;
+        },
+        get onWidgetContextMenu() {
+          return t.onWidgetContextMenu;
+        },
+        get onStartOptimisticFront() {
+          return t.onStartOptimisticFront;
+        },
+        get onCommitFront() {
+          return t.onCommitFront;
+        },
+        get onCommitMove() {
+          return t.onCommitMove;
+        },
+        get onCommitResize() {
+          return t.onCommitResize;
+        },
+        get onRequestDelete() {
+          return t.onRequestDelete;
+        }
+      })
+    }), null), n;
+  })();
+}
+export {
+  W as WorkbenchCanvasField
+};

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

@@ -1,6 +1,7 @@
 import { type JSX } from 'solid-js';
-import type { WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+import type { WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchFilterBarProps {
+    widgetDefinitions: readonly WorkbenchWidgetDefinition[];
     widgets: readonly WorkbenchWidgetItem[];
     filters: Record<WorkbenchWidgetType, boolean>;
     /** Solo a single widget type — only this type remains visible. */

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,19 +1,18 @@
-import { insert as g, createComponent as d, effect as I, setAttribute as S, template as E, Portal as F, setStyleProperty as H, delegateEvents as T } from "solid-js/web";
-import { createSignal as O, onCleanup as p, createMemo as G, For as P, Show as Y } from "solid-js";
+import { insert as v, createComponent as d, effect as D, setAttribute as S, template as I, Portal as F, setStyleProperty as H, delegateEvents as P } from "solid-js/web";
+import { createSignal as O, onCleanup as R, createMemo as B, For as T, Show as X } from "solid-js";
 import { Motion as C } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
 import { easing as y, duration as L } from "../../utils/animations.js";
-import { Layers as B, Plus as W } from "../icons/index.js";
-import { startHotInteraction as q } from "../../utils/hotInteraction.js";
-import { WIDGET_REGISTRY as x } from "./widgets/widgetRegistry.js";
-var z = /* @__PURE__ */ E("<button type=button class=workbench-dock__item>"), N = /* @__PURE__ */ E('<div class=workbench-dock data-floe-canvas-interactive=true><button type=button class=workbench-dock__item aria-label="Show all widgets"></button><span class=workbench-dock__divider aria-hidden=true>'), U = /* @__PURE__ */ E("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
-const X = 5, V = '[data-floe-workbench-canvas-frame="true"]';
+import { Layers as G, Plus as q } from "../icons/index.js";
+import { startHotInteraction as z } from "../../utils/hotInteraction.js";
+var N = /* @__PURE__ */ I("<button type=button class=workbench-dock__item>"), U = /* @__PURE__ */ I('<div class=workbench-dock data-floe-canvas-interactive=true><button type=button class=workbench-dock__item aria-label="Show all widgets"></button><span class=workbench-dock__divider aria-hidden=true>'), V = /* @__PURE__ */ I("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
+const x = 5, W = '[data-floe-workbench-canvas-frame="true"]';
 function j(e, l) {
-  const a = document.querySelector(V);
+  const a = document.querySelector(W);
   if (!(a instanceof HTMLElement)) return !1;
   const s = a.getBoundingClientRect();
   return e >= s.left && e <= s.right && l >= s.top && l <= s.bottom;
 }
-function J(e) {
+function p(e) {
   const l = () => e.hoverOffset === -1 ? {
     scale: 1.26,
     y: -6,
@@ -30,12 +29,12 @@ function J(e) {
     scale: 1,
     y: 0,
     x: 0
-  }, a = () => e.hoverOffset === -1, s = (i) => {
-    i.button === 0 && e.onDragBegin(i, e.type, e.label, e.icon);
+  }, a = () => e.hoverOffset === -1, s = (o) => {
+    o.button === 0 && e.onDragBegin(o, e.type, e.label, e.icon);
   };
   return (() => {
-    var i = z();
-    return i.$$pointerdown = s, i.addEventListener("pointerleave", () => e.onLeave()), i.addEventListener("pointerenter", () => e.onEnter()), g(i, d(C.span, {
+    var o = N();
+    return o.$$pointerdown = s, o.addEventListener("pointerleave", () => e.onLeave()), o.addEventListener("pointerenter", () => e.onEnter()), v(o, d(C.span, {
       class: "workbench-dock__tile",
       get animate() {
         return l();
@@ -54,7 +53,7 @@ function J(e) {
           });
         })();
       }
-    }), null), g(i, d(C.span, {
+    }), null), v(o, d(C.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -71,71 +70,71 @@ function J(e) {
       get children() {
         return e.label;
       }
-    }), null), I((t) => {
-      var f = !!e.active, _ = !!a(), h = !!e.isDragging, w = `${e.label} — click to solo, drag to canvas to create`, b = e.active;
-      return f !== t.e && i.classList.toggle("is-active", t.e = f), _ !== t.t && i.classList.toggle("is-hovered", t.t = _), h !== t.a && i.classList.toggle("is-source-dragging", t.a = h), w !== t.o && S(i, "aria-label", t.o = w), b !== t.i && S(i, "aria-pressed", t.i = b), t;
+    }), null), D((t) => {
+      var h = !!e.active, m = !!a(), f = !!e.isDragging, _ = `${e.label} — click to solo, drag to canvas to create`, b = e.active;
+      return h !== t.e && o.classList.toggle("is-active", t.e = h), m !== t.t && o.classList.toggle("is-hovered", t.t = m), f !== t.a && o.classList.toggle("is-source-dragging", t.a = f), _ !== t.o && S(o, "aria-label", t.o = _), b !== t.i && S(o, "aria-pressed", t.i = b), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0
-    }), i;
+    }), o;
   })();
 }
-function ie(e) {
-  const [l, a] = O(null), [s, i] = O(null);
+function re(e) {
+  const [l, a] = O(null), [s, o] = O(null);
   let t;
-  p(() => {
+  R(() => {
     t?.abort(), t = void 0, s()?.stopInteraction();
   });
-  const f = G(() => x.every((o) => e.filters[o.type])), _ = (o) => {
+  const h = B(() => e.widgetDefinitions.every((i) => e.filters[i.type])), m = (i) => {
     const r = l();
-    return r === null ? 0 : r === o ? -1 : r === o + 1 ? -2 : r === o - 1 ? 1 : 0;
-  }, h = (o) => {
+    return r === null ? 0 : r === i ? -1 : r === i + 1 ? -2 : r === i - 1 ? 1 : 0;
+  }, f = (i) => {
     const r = s();
     if (!r) return;
     const n = !r.moved;
-    if (r.stopInteraction(), i(null), t?.abort(), t = void 0, n) {
+    if (r.stopInteraction(), o(null), t?.abort(), t = void 0, n) {
       e.onSoloFilter(r.type);
       return;
     }
-    o && r.overCanvas && e.onCreateAt?.(r.type, r.clientX, r.clientY);
-  }, w = (o, r, n, u) => {
-    o.preventDefault(), t?.abort(), i({
+    i && r.overCanvas && e.onCreateAt?.(r.type, r.clientX, r.clientY);
+  }, _ = (i, r, n, u) => {
+    i.preventDefault(), t?.abort(), o({
       type: r,
       label: n,
       icon: u,
-      pointerId: o.pointerId,
-      startClientX: o.clientX,
-      startClientY: o.clientY,
-      clientX: o.clientX,
-      clientY: o.clientY,
+      pointerId: i.pointerId,
+      startClientX: i.clientX,
+      startClientY: i.clientY,
+      clientX: i.clientX,
+      clientY: i.clientY,
       moved: !1,
       overCanvas: !1,
-      stopInteraction: q({
+      stopInteraction: z({
         kind: "drag",
         cursor: "grabbing"
       })
     });
     const c = new AbortController();
     t = c;
-    const k = (v) => {
-      i((m) => {
-        if (!m || m.pointerId !== v.pointerId) return m;
-        const M = v.clientX - m.startClientX, R = v.clientY - m.startClientY, D = m.moved || Math.abs(M) > X || Math.abs(R) > X;
+    const k = (g) => {
+      o((w) => {
+        if (!w || w.pointerId !== g.pointerId) return w;
+        const Y = g.clientX - w.startClientX, M = g.clientY - w.startClientY, E = w.moved || Math.abs(Y) > x || Math.abs(M) > x;
         return {
-          ...m,
-          clientX: v.clientX,
-          clientY: v.clientY,
-          moved: D,
-          overCanvas: D && j(v.clientX, v.clientY)
+          ...w,
+          clientX: g.clientX,
+          clientY: g.clientY,
+          moved: E,
+          overCanvas: E && j(g.clientX, g.clientY)
         };
       });
-    }, $ = (v) => {
-      v.pointerId === o.pointerId && h(!0);
-    }, A = (v) => {
-      v.pointerId === o.pointerId && h(!1);
+    }, $ = (g) => {
+      g.pointerId === i.pointerId && f(!0);
+    }, A = (g) => {
+      g.pointerId === i.pointerId && f(!1);
     };
     window.addEventListener("pointermove", k, {
       signal: c.signal
@@ -146,8 +145,8 @@ function ie(e) {
     });
   }, b = () => s()?.type ?? null;
   return [(() => {
-    var o = N(), r = o.firstChild;
-    return r.nextSibling, o.addEventListener("pointerleave", () => a(null)), r.$$click = () => e.onShowAll(), r.addEventListener("pointerleave", () => a((n) => n === 0 ? null : n)), r.addEventListener("pointerenter", () => a(0)), g(r, d(C.span, {
+    var i = U(), r = i.firstChild;
+    return r.nextSibling, i.addEventListener("pointerleave", () => a(null)), r.$$click = () => e.onShowAll(), r.addEventListener("pointerleave", () => a((n) => n === 0 ? null : n)), r.addEventListener("pointerenter", () => a(0)), v(r, d(C.span, {
       class: "workbench-dock__tile",
       get animate() {
         return {
@@ -163,11 +162,11 @@ function ie(e) {
         };
       },
       get children() {
-        return d(B, {
+        return d(G, {
           class: "workbench-dock__icon"
         });
       }
-    }), null), g(r, d(C.span, {
+    }), null), v(r, d(C.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -182,11 +181,13 @@ function ie(e) {
         };
       },
       children: "Show all widgets"
-    }), null), g(o, d(P, {
-      each: x,
+    }), null), v(i, d(T, {
+      get each() {
+        return e.widgetDefinitions;
+      },
       children: (n, u) => {
         const c = () => u() + 1;
-        return d(J, {
+        return d(p, {
           get type() {
             return n.type;
           },
@@ -200,7 +201,7 @@ function ie(e) {
             return e.filters[n.type];
           },
           get hoverOffset() {
-            return _(c());
+            return m(c());
           },
           get isDragging() {
             return b() === n.type;
@@ -208,39 +209,39 @@ function ie(e) {
           onEnter: () => a(c()),
           onLeave: () => a((k) => k === c() ? null : k),
           onSolo: () => e.onSoloFilter(n.type),
-          onDragBegin: w
+          onDragBegin: _
         });
       }
-    }), null), I((n) => {
-      var u = !!f(), c = l() === 0, k = f();
+    }), null), D((n) => {
+      var u = !!h(), c = l() === 0, k = h();
       return u !== n.e && r.classList.toggle("is-active", n.e = u), c !== n.t && r.classList.toggle("is-hovered", n.t = c), k !== n.a && S(r, "aria-pressed", n.a = k), n;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), o;
-  })(), d(Y, {
+    }), i;
+  })(), d(X, {
     get when() {
       return s()?.moved ?? !1;
     },
     get children() {
-      return d(K, {
+      return d(J, {
         state: s
       });
     }
   })];
 }
-function K(e) {
+function J(e) {
   const l = () => {
     const t = e.state();
     return t ? `translate3d(${t.clientX + 14}px, ${t.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
-  }, a = () => e.state()?.overCanvas ?? !1, s = () => e.state()?.label ?? "", i = () => e.state()?.icon;
+  }, a = () => e.state()?.overCanvas ?? !1, s = () => e.state()?.label ?? "", o = () => e.state()?.icon;
   return d(F, {
     get children() {
-      var t = U(), f = t.firstChild, _ = f.nextSibling, h = _.firstChild, w = h.nextSibling, b = w.firstChild, o = b.nextSibling, r = o.firstChild;
-      return g(h, d(Y, {
+      var t = V(), h = t.firstChild, m = h.nextSibling, f = m.firstChild, _ = f.nextSibling, b = _.firstChild, i = b.nextSibling, r = i.firstChild;
+      return v(f, d(X, {
         get when() {
-          return i();
+          return o();
         },
         children: (n) => {
           const u = n();
@@ -248,9 +249,9 @@ function K(e) {
             class: "w-4 h-4"
           });
         }
-      })), g(b, s), g(o, d(W, {
+      })), v(b, s), v(i, d(q, {
         class: "w-3 h-3"
-      }), r), g(r, () => a() ? "Drop to create" : "Drag onto canvas"), I((n) => {
+      }), r), v(r, () => a() ? "Drop to create" : "Drag onto canvas"), D((n) => {
         var u = !!a(), c = l();
         return u !== n.e && t.classList.toggle("is-over-canvas", n.e = u), c !== n.t && H(t, "transform", n.t = c), n;
       }, {
@@ -260,7 +261,7 @@ function K(e) {
     }
   });
 }
-T(["pointerdown", "click"]);
+P(["pointerdown", "click"]);
 export {
-  ie as WorkbenchFilterBar
+  re as WorkbenchFilterBar
 };

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

@@ -1,4 +1,15 @@
-import type { WorkbenchState } from './types';
+import type { WorkbenchState, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+export interface WorkbenchSurfaceApi {
+    ensureWidget: (type: WorkbenchWidgetType, options?: {
+        centerViewport?: boolean;
+        worldX?: number;
+        worldY?: number;
+    }) => WorkbenchWidgetItem | null;
+    focusWidget: (widget: WorkbenchWidgetItem, options?: {
+        centerViewport?: boolean;
+    }) => WorkbenchWidgetItem;
+    findWidgetByType: (type: WorkbenchWidgetType) => WorkbenchWidgetItem | null;
+}
 export interface WorkbenchSurfaceProps {
     state: () => WorkbenchState;
     setState: (updater: (prev: WorkbenchState) => WorkbenchState) => void;
@@ -17,5 +28,7 @@ export interface WorkbenchSurfaceProps {
      * Optional class added to the surface root for layout integration.
      */
     class?: string;
+    widgetDefinitions?: readonly WorkbenchWidgetDefinition[];
+    onApiReady?: (api: WorkbenchSurfaceApi | null) => void;
 }
 export declare function WorkbenchSurface(props: WorkbenchSurfaceProps): import("solid-js").JSX.Element;