@floegence/floe-webapp-core 0.36.0 → 0.36.1

package/dist/components/layout/DisplayModePageShell.d.ts

@@ -0,0 +1,8 @@
+import { type Component, type JSX } from 'solid-js';
+export interface DisplayModePageShellProps {
+    logo?: JSX.Element;
+    actions?: JSX.Element;
+    title?: string;
+    children: JSX.Element;
+}
+export declare const DisplayModePageShell: Component<DisplayModePageShellProps>;

package/dist/components/layout/DisplayModePageShell.js

@@ -0,0 +1,22 @@
+import { insert as r, createComponent as a, template as o } from "solid-js/web";
+import "solid-js";
+import { TopBar as i } from "./TopBar.js";
+var n = /* @__PURE__ */ o("<div class=display-mode-page-shell><main class=display-mode-page-shell__body>");
+const p = (e) => (() => {
+  var t = n(), l = t.firstChild;
+  return r(t, a(i, {
+    get logo() {
+      return e.logo;
+    },
+    get title() {
+      return e.title;
+    },
+    get actions() {
+      return e.actions;
+    },
+    ariaLabel: "Display mode top bar"
+  }), l), r(l, () => e.children), t;
+})();
+export {
+  p as DisplayModePageShell
+};

package/dist/components/layout/DisplayModeSwitcher.d.ts

@@ -0,0 +1,7 @@
+export type DisplayMode = 'activity' | 'deck' | 'workbench';
+export declare function sanitizeDisplayMode(value: unknown, fallback?: DisplayMode): DisplayMode;
+export interface DisplayModeSwitcherProps {
+    mode: DisplayMode;
+    onChange: (mode: DisplayMode) => void;
+}
+export declare function DisplayModeSwitcher(props: DisplayModeSwitcherProps): import("solid-js").JSX.Element;

package/dist/components/layout/DisplayModeSwitcher.js

@@ -0,0 +1,52 @@
+import { insert as a, createComponent as m, memo as h, effect as v, setAttribute as y, template as o, delegateEvents as p } from "solid-js/web";
+import { For as _ } from "solid-js";
+import { Bookmark as u, LayoutDashboard as k, Grid3x3 as f } from "../icons/index.js";
+var w = /* @__PURE__ */ o('<div class=display-mode-switcher role=tablist aria-label="Display mode">'), D = /* @__PURE__ */ o("<button type=button class=display-mode-switcher__pill role=tab><span class=display-mode-switcher__label>"), $ = /* @__PURE__ */ o("<span class=display-mode-switcher__pill-bg>");
+const g = /* @__PURE__ */ new Set(["activity", "deck", "workbench"]);
+function E(i, r = "activity") {
+  return typeof i == "string" && g.has(i) ? i : r;
+}
+const A = [{
+  id: "activity",
+  label: "Activity",
+  icon: u
+}, {
+  id: "deck",
+  label: "Deck",
+  icon: k
+}, {
+  id: "workbench",
+  label: "Workbench",
+  icon: f
+}];
+function L(i) {
+  return (() => {
+    var r = w();
+    return a(r, m(_, {
+      each: A,
+      children: (l) => {
+        const b = l.icon, c = () => i.mode === l.id;
+        return (() => {
+          var e = D(), s = e.firstChild;
+          return e.$$click = () => i.onChange(l.id), a(e, (() => {
+            var t = h(() => !!c());
+            return () => t() ? $() : null;
+          })(), s), a(e, m(b, {
+            class: "display-mode-switcher__icon"
+          }), s), a(s, () => l.label), v((t) => {
+            var n = !!c(), d = c();
+            return n !== t.e && e.classList.toggle("is-active", t.e = n), d !== t.t && y(e, "aria-selected", t.t = d), t;
+          }, {
+            e: void 0,
+            t: void 0
+          }), e;
+        })();
+      }
+    })), r;
+  })();
+}
+p(["click"]);
+export {
+  L as DisplayModeSwitcher,
+  E as sanitizeDisplayMode
+};

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

@@ -9,3 +9,5 @@ export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';
 export { SidebarPane, type SidebarPaneProps } from './SidebarPane';
 export { Panel, PanelHeader, PanelContent, type PanelProps, type PanelHeaderProps, type PanelContentProps } from './Panel';
 export { KeepAliveStack, type KeepAliveStackProps, type KeepAliveView } from './KeepAliveStack';
+export { DisplayModeSwitcher, sanitizeDisplayMode, type DisplayMode, type DisplayModeSwitcherProps, } from './DisplayModeSwitcher';
+export { DisplayModePageShell, type DisplayModePageShellProps } from './DisplayModePageShell';

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

@@ -1,6 +1,7 @@
 import { type InfiniteCanvasContextMenuEvent } from '../../ui';
-import type { WorkbenchViewport, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+import type { WorkbenchViewport, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchCanvasProps {
+    widgetDefinitions: readonly WorkbenchWidgetDefinition[];
     widgets: readonly WorkbenchWidgetItem[];
     viewport: WorkbenchViewport;
     selectedWidgetId: string | null;

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,12 +1,13 @@
-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 d, insert as a, createComponent as i, effect as l, template as c } from "solid-js/web";
+import { For as g } from "solid-js";
+import { WorkbenchWidget as u } from "./WorkbenchWidget.js";
+import { getWidgetEntry as m } from "./widgets/widgetRegistry.js";
+import { InfiniteCanvas as v } from "../ui/InfiniteCanvas.js";
+var s = /* @__PURE__ */ c("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>"), f = /* @__PURE__ */ c("<div class=workbench-canvas>");
+function b(e) {
   return (() => {
-    var t = s(), o = e.setCanvasFrameRef;
-    return typeof o == "function" ? l(o, t) : e.setCanvasFrameRef = t, a(t, i(g, {
+    var t = f(), o = e.setCanvasFrameRef;
+    return typeof o == "function" ? d(o, t) : e.setCanvasFrameRef = t, a(t, i(v, {
       ariaLabel: "Workbench canvas",
       class: "workbench-canvas__infinite",
       get viewport() {
@@ -22,12 +23,15 @@ function w(e) {
         return e.locked;
       },
       get children() {
-        var r = v();
-        return r.firstChild, a(r, i(d, {
+        var r = s();
+        return r.firstChild, a(r, i(g, {
           get each() {
             return e.widgets;
           },
-          children: (n) => i(m, {
+          children: (n) => i(u, {
+            get definition() {
+              return m(n.type, e.widgetDefinitions);
+            },
             item: n,
             get selected() {
               return e.selectedWidgetId === n.id;
@@ -71,9 +75,9 @@ function w(e) {
           })
         }), null), r;
       }
-    })), u(() => t.classList.toggle("is-locked", !!e.locked)), t;
+    })), l(() => t.classList.toggle("is-locked", !!e.locked)), t;
   })();
 }
 export {
-  w as WorkbenchCanvas
+  b as WorkbenchCanvas
 };

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;