@floegence/floe-webapp-core 0.36.13 → 0.36.16

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,19 +1,19 @@
-import { use as v, insert as m, createComponent as i, effect as W, template as f } from "solid-js/web";
-import { createMemo as o, Show as h, For as F } from "solid-js";
-import { WorkbenchCanvasField as y } from "./WorkbenchCanvasField.js";
-import { WorkbenchWidget as R } from "./WorkbenchWidget.js";
+import { use as C, insert as m, createComponent as i, effect as R, template as w } from "solid-js/web";
+import { createMemo as o, Show as h, For as W } from "solid-js";
+import { WorkbenchCanvasField as F } from "./WorkbenchCanvasField.js";
+import { WorkbenchWidget as y } from "./WorkbenchWidget.js";
 import { createWorkbenchRenderLayerMap as I, resolveWorkbenchWidgetRenderMode as l } from "./workbenchHelpers.js";
-import { getWidgetEntry as c } from "./widgets/widgetRegistry.js";
+import { getWidgetEntry as u } from "./widgets/widgetRegistry.js";
 import { InfiniteCanvas as S } from "../ui/InfiniteCanvas.js";
-var M = /* @__PURE__ */ f("<div class=workbench-canvas>"), k = /* @__PURE__ */ f("<div class=workbench-canvas__projected-layer>");
-function b(e) {
+var k = /* @__PURE__ */ w("<div class=workbench-canvas><div class=workbench-canvas__atmosphere aria-hidden=true>"), M = /* @__PURE__ */ w("<div class=workbench-canvas__projected-layer>");
+function q(e) {
   const n = o((g) => {
     const d = e.widgetById().get(e.widgetId);
     if (d) return d;
     if (g) return g;
     throw new Error(`Workbench widget ${e.widgetId} is missing from the projected render map.`);
-  }), a = o(() => c(n().type, e.widgetDefinitions));
-  return i(R, {
+  }), a = o(() => u(n().type, e.widgetDefinitions));
+  return i(y, {
     get definition() {
       return a();
     },
@@ -85,22 +85,30 @@ function b(e) {
     get onCommitResize() {
       return e.onCommitResize;
     },
+    get onRequestOverview() {
+      return e.onRequestOverview;
+    },
+    get onRequestFit() {
+      return e.onRequestFit;
+    },
     get onRequestDelete() {
       return e.onRequestDelete;
     }
   });
 }
-function q(e) {
+function V(e) {
   const n = o(() => new Map(e.widgets.map((t) => [t.id, t]))), a = o(() => I(e.widgets)), g = o(() => e.widgets.filter((t) => {
-    const r = c(t.type, e.widgetDefinitions);
+    const r = u(t.type, e.widgetDefinitions);
     return l(r) === "canvas_scaled";
   })), d = o(() => e.widgets.filter((t) => {
-    const r = c(t.type, e.widgetDefinitions);
+    const r = u(t.type, e.widgetDefinitions);
     return l(r) === "projected_surface";
-  }).map((t) => t.id)), w = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0;
+  }).map((t) => t.id)), s = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0;
   return (() => {
-    var t = M(), r = e.setCanvasFrameRef;
-    return typeof r == "function" ? v(r, t) : e.setCanvasFrameRef = t, m(t, i(S, {
+    var t = k();
+    t.firstChild;
+    var r = e.setCanvasFrameRef;
+    return typeof r == "function" ? C(r, t) : e.setCanvasFrameRef = t, m(t, i(S, {
       ariaLabel: "Workbench canvas",
       class: "workbench-canvas__infinite",
       get viewport() {
@@ -109,24 +117,30 @@ function q(e) {
       get onViewportChange() {
         return e.onViewportCommit;
       },
+      get onViewportInteractionStart() {
+        return e.onViewportInteractionStart;
+      },
       get onCanvasContextMenu() {
         return e.onCanvasContextMenu;
       },
+      get onCanvasPointerDown() {
+        return e.onCanvasPointerDown;
+      },
       get disablePanZoom() {
         return e.locked;
       },
-      overlay: (s) => i(h, {
+      overlay: (v) => i(h, {
         get when() {
           return d().length > 0;
         },
         get children() {
-          var u = k();
-          return m(u, i(F, {
+          var c = M();
+          return m(c, i(W, {
             get each() {
               return d();
             },
-            children: (C) => i(b, {
-              widgetId: C,
+            children: (f) => i(q, {
+              widgetId: f,
               get widgetDefinitions() {
                 return e.widgetDefinitions;
               },
@@ -174,19 +188,25 @@ function q(e) {
               get onCommitResize() {
                 return e.onCommitResize;
               },
+              get onRequestOverview() {
+                return e.onRequestOverview;
+              },
+              get onRequestFit() {
+                return e.onRequestFit;
+              },
               get onRequestDelete() {
                 return e.onRequestDelete;
               },
-              projectedViewport: s,
+              projectedViewport: v,
               get surfaceReady() {
-                return w();
+                return s();
               }
             })
-          })), u;
+          })), c;
         }
       }),
       get children() {
-        return i(y, {
+        return i(F, {
           get widgetDefinitions() {
             return e.widgetDefinitions;
           },
@@ -226,14 +246,20 @@ function q(e) {
           get onCommitResize() {
             return e.onCommitResize;
           },
+          get onRequestOverview() {
+            return e.onRequestOverview;
+          },
+          get onRequestFit() {
+            return e.onRequestFit;
+          },
           get onRequestDelete() {
             return e.onRequestDelete;
           }
         });
       }
-    })), W(() => t.classList.toggle("is-locked", !!e.locked)), t;
+    }), null), R(() => t.classList.toggle("is-locked", !!e.locked)), t;
   })();
 }
 export {
-  q as WorkbenchCanvas
+  V as WorkbenchCanvas
 };

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

@@ -19,6 +19,8 @@ export interface WorkbenchCanvasFieldProps {
         width: number;
         height: number;
     }) => void;
+    onRequestOverview: (item: WorkbenchWidgetItem) => void;
+    onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
 }
 export declare function WorkbenchCanvasField(props: WorkbenchCanvasFieldProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchCanvasField.js

@@ -3,8 +3,8 @@ import { createMemo as i, For as c } from "solid-js";
 import { createWorkbenchRenderLayerMap as a } from "./workbenchHelpers.js";
 import { getWidgetEntry as l } from "./widgets/widgetRegistry.js";
 import { WorkbenchWidget as w } from "./WorkbenchWidget.js";
-var f = /* @__PURE__ */ m("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>");
-function W(e) {
+var v = /* @__PURE__ */ m("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>");
+function f(e) {
   const t = i((r) => {
     const n = e.widgetById().get(e.widgetId);
     if (n) return n;
@@ -76,20 +76,26 @@ function W(e) {
     get onCommitResize() {
       return e.onCommitResize;
     },
+    get onRequestOverview() {
+      return e.onRequestOverview;
+    },
+    get onRequestFit() {
+      return e.onRequestFit;
+    },
     get onRequestDelete() {
       return e.onRequestDelete;
     }
   });
 }
-function v(e) {
+function F(e) {
   const t = i(() => e.widgets.map((n) => n.id)), d = i(() => new Map(e.widgets.map((n) => [n.id, n]))), r = i(() => a(e.widgets));
   return (() => {
-    var n = f();
+    var n = v();
     return n.firstChild, u(n, g(c, {
       get each() {
         return t();
       },
-      children: (o) => g(W, {
+      children: (o) => g(f, {
         widgetId: o,
         get widgetDefinitions() {
           return e.widgetDefinitions;
@@ -132,6 +138,12 @@ function v(e) {
         get onCommitResize() {
           return e.onCommitResize;
         },
+        get onRequestOverview() {
+          return e.onRequestOverview;
+        },
+        get onRequestFit() {
+          return e.onRequestFit;
+        },
         get onRequestDelete() {
           return e.onRequestDelete;
         }
@@ -140,5 +152,5 @@ function v(e) {
   })();
 }
 export {
-  v as WorkbenchCanvasField
+  F as WorkbenchCanvasField
 };

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

@@ -1,6 +1,15 @@
+import type { WorkbenchThemeId } from './workbenchThemes';
 export interface WorkbenchHudProps {
     scaleLabel: string;
     onZoomOut: () => void;
     onZoomIn: () => void;
+    /**
+     * Current workbench theme. When provided alongside {@link onSelectTheme},
+     * the HUD renders an inline theme selector next to the zoom controls.
+     * Omit both to hide the selector entirely (e.g. when the consumer provides
+     * its own theming UI elsewhere).
+     */
+    activeTheme?: WorkbenchThemeId;
+    onSelectTheme?: (id: WorkbenchThemeId) => void;
 }
 export declare function WorkbenchHud(props: WorkbenchHudProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchHud.js

@@ -1,17 +1,31 @@
-import { insert as n, createComponent as c, template as i, delegateEvents as r } from "solid-js/web";
-import { Minus as u, Plus as s } from "../icons/index.js";
-var b = /* @__PURE__ */ i('<div class=workbench-hud data-floe-canvas-interactive=true><button type=button class=workbench-hud__button aria-label="Zoom out"></button><div class=workbench-hud__scale></div><button type=button class=workbench-hud__button aria-label="Zoom in">');
-function m(t) {
+import { insert as n, createComponent as o, memo as h, template as i, delegateEvents as u } from "solid-js/web";
+import { Show as m } from "solid-js";
+import { Minus as b, Plus as d } from "../icons/index.js";
+import { WorkbenchThemeSelector as s } from "./WorkbenchThemeSelector.js";
+var _ = /* @__PURE__ */ i("<div class=workbench-hud__divider aria-hidden=true>"), v = /* @__PURE__ */ i('<div class=workbench-hud data-floe-canvas-interactive=true><button type=button class=workbench-hud__button aria-label="Zoom out"></button><div class=workbench-hud__scale></div><button type=button class=workbench-hud__button aria-label="Zoom in">');
+function S(e) {
   return (() => {
-    var o = b(), e = o.firstChild, l = e.nextSibling, a = l.nextSibling;
-    return e.$$click = () => t.onZoomOut(), n(e, c(u, {
+    var l = v(), t = l.firstChild, c = t.nextSibling, r = c.nextSibling;
+    return n(l, o(m, {
+      get when() {
+        return h(() => !!e.activeTheme)() && e.onSelectTheme;
+      },
+      get children() {
+        return [o(s, {
+          get activeTheme() {
+            return e.activeTheme;
+          },
+          onSelect: (a) => e.onSelectTheme?.(a)
+        }), _()];
+      }
+    }), t), t.$$click = () => e.onZoomOut(), n(t, o(b, {
       class: "w-3.5 h-3.5"
-    })), n(l, () => t.scaleLabel), a.$$click = () => t.onZoomIn(), n(a, c(s, {
+    })), n(c, () => e.scaleLabel), r.$$click = () => e.onZoomIn(), n(r, o(d, {
       class: "w-3.5 h-3.5"
-    })), o;
+    })), l;
   })();
 }
-r(["click"]);
+u(["click"]);
 export {
-  m as WorkbenchHud
+  S as WorkbenchHud
 };

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,17 +1,18 @@
-import { insert as c, createComponent as a, Portal as h, addEventListener as p, effect as k, className as W, template as g, delegateEvents as b } from "solid-js/web";
-import { createEffect as s, onCleanup as u, Show as C } from "solid-js";
-import { isTypingElement as y } from "../../utils/dom.js";
-import { WorkbenchCanvas as A } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as D } from "./WorkbenchContextMenu.js";
-import { WorkbenchFilterBar as x } from "./WorkbenchFilterBar.js";
-import { WorkbenchHud as S } from "./WorkbenchHud.js";
+import { insert as c, createComponent as a, Portal as v, addEventListener as w, effect as h, className as k, setAttribute as p, template as g, delegateEvents as W } from "solid-js/web";
+import { createEffect as s, onCleanup as u, Show as b } from "solid-js";
+import { isTypingElement as C } from "../../utils/dom.js";
+import { clientToCanvasWorld as A } from "../ui/canvasGeometry.js";
+import { WorkbenchCanvas as D } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as y } from "./WorkbenchContextMenu.js";
+import { WorkbenchFilterBar as S } from "./WorkbenchFilterBar.js";
+import { WorkbenchHud as x } from "./WorkbenchHud.js";
 import { WorkbenchLockButton as M } from "./WorkbenchLockButton.js";
 import { installWorkbenchContextMenuDismissListeners as F } from "./workbenchContextMenuDismiss.js";
-import { useWorkbenchModel as L } from "./useWorkbenchModel.js";
-var R = /* @__PURE__ */ g("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), E = /* @__PURE__ */ g("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const _ = "F1";
-function P(i) {
-  const e = L({
+import { useWorkbenchModel as R } from "./useWorkbenchModel.js";
+var T = /* @__PURE__ */ g("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), L = /* @__PURE__ */ g("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const E = "F1";
+function H(i) {
+  const e = R({
     state: () => i.state(),
     setState: (t) => i.setState(t),
     widgetDefinitions: () => i.widgetDefinitions,
@@ -30,7 +31,7 @@ function P(i) {
       i.onApiReady?.(null);
     });
   });
-  const d = () => i.lockShortcut === void 0 ? _ : i.lockShortcut;
+  const l = () => i.lockShortcut === void 0 ? E : i.lockShortcut;
   s(() => {
     if (typeof window > "u" || !e.contextMenu.state()) return;
     const t = F({
@@ -40,14 +41,14 @@ function P(i) {
     u(() => t());
   }), s(() => {
     if (i.enableKeyboard === !1 || typeof document > "u") return;
-    const t = d(), r = (n) => {
+    const t = l(), r = (n) => {
       if (n.defaultPrevented || n.isComposing) return;
       if (t !== null && n.key === t) {
         n.preventDefault(), e.lock.toggle();
         return;
       }
       const o = n.target;
-      if (!(o instanceof Element && y(o)))
+      if (!(o instanceof Element && C(o)))
         switch (n.key) {
           case "ArrowUp":
             n.preventDefault(), e.navigation.handleArrowNavigation("up");
@@ -73,20 +74,17 @@ function P(i) {
     const n = document.querySelector('[data-floe-workbench-canvas-frame="true"]');
     if (!n) return null;
     const o = n.getBoundingClientRect();
-    if (t < o.left || t > o.right || r < o.top || r > o.bottom)
-      return null;
-    const w = t - o.left, v = r - o.top, l = e.viewport();
-    return {
-      worldX: (w - l.x) / l.scale,
-      worldY: (v - l.y) / l.scale
-    };
+    return A(o, e.viewport(), {
+      clientX: t,
+      clientY: r
+    });
   }, f = (t, r, n) => {
     const o = m(r, n);
     o && e.widgetActions.addWidgetAtCursor(t, o.worldX, o.worldY);
   };
   return (() => {
-    var t = E(), r = t.firstChild;
-    return c(r, a(A, {
+    var t = L(), r = t.firstChild;
+    return c(r, a(D, {
       get widgetDefinitions() {
         return e.widgetDefinitions();
       },
@@ -117,9 +115,15 @@ function P(i) {
       get onViewportCommit() {
         return e.canvas.commitViewport;
       },
+      get onViewportInteractionStart() {
+        return e.canvas.cancelViewportNavigation;
+      },
       get onCanvasContextMenu() {
         return e.canvas.openCanvasContextMenu;
       },
+      get onCanvasPointerDown() {
+        return e.selection.clear;
+      },
       get onSelectWidget() {
         return e.canvas.selectWidget;
       },
@@ -138,6 +142,12 @@ function P(i) {
       get onCommitResize() {
         return e.canvas.commitResize;
       },
+      get onRequestOverview() {
+        return e.navigation.overviewWidget;
+      },
+      get onRequestFit() {
+        return e.navigation.fitWidget;
+      },
       get onRequestDelete() {
         return e.widgetActions.deleteWidget;
       }
@@ -149,9 +159,9 @@ function P(i) {
         return e.lock.toggle;
       },
       get shortcutLabel() {
-        return d() ?? void 0;
+        return l() ?? void 0;
       }
-    }), null), c(t, a(x, {
+    }), null), c(t, a(S, {
       get widgetDefinitions() {
         return e.widgetDefinitions();
       },
@@ -168,7 +178,7 @@ function P(i) {
         return e.filter.showAll;
       },
       onCreateAt: f
-    }), null), c(t, a(S, {
+    }), null), c(t, a(x, {
       get scaleLabel() {
         return e.scaleLabel();
       },
@@ -177,18 +187,22 @@ function P(i) {
       },
       get onZoomIn() {
         return e.hud.zoomIn;
-      }
-    }), null), c(t, a(C, {
+      },
+      get activeTheme() {
+        return e.theme();
+      },
+      onSelectTheme: (n) => e.appearance.setTheme(n)
+    }), null), c(t, a(b, {
       get when() {
         return e.contextMenu.state();
       },
       get children() {
-        return a(h, {
+        return a(v, {
           get children() {
             return [(() => {
-              var n = R();
-              return p(n, "contextmenu", e.contextMenu.retarget, !0), n;
-            })(), a(D, {
+              var n = T();
+              return w(n, "contextmenu", e.contextMenu.retarget, !0), n;
+            })(), a(y, {
               get x() {
                 return e.contextMenu.position()?.left ?? 0;
               },
@@ -202,10 +216,16 @@ function P(i) {
           }
         });
       }
-    }), null), k(() => W(t, `workbench-surface${i.class ? ` ${i.class}` : ""}`)), t;
+    }), null), h((n) => {
+      var o = `workbench-surface${i.class ? ` ${i.class}` : ""}`, d = e.theme();
+      return o !== n.e && k(t, n.e = o), d !== n.t && p(t, "data-workbench-theme", n.t = d), n;
+    }, {
+      e: void 0,
+      t: void 0
+    }), t;
   })();
 }
-b(["contextmenu"]);
+W(["contextmenu"]);
 export {
-  P as WorkbenchSurface
+  H as WorkbenchSurface
 };

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

@@ -0,0 +1,6 @@
+import { type WorkbenchThemeId } from './workbenchThemes';
+export interface WorkbenchThemeSelectorProps {
+    activeTheme: WorkbenchThemeId;
+    onSelect: (id: WorkbenchThemeId) => void;
+}
+export declare function WorkbenchThemeSelector(props: WorkbenchThemeSelectorProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchThemeSelector.js

@@ -0,0 +1,77 @@
+import { createComponent as l, insert as c, template as o, effect as $, setAttribute as k, setStyleProperty as h, delegateEvents as S } from "solid-js/web";
+import { createMemo as u, For as T } from "solid-js";
+import { Sparkles as C } from "../icons/index.js";
+import { Dropdown as x } from "../ui/Dropdown.js";
+import { workbenchThemeMeta as W, WORKBENCH_THEMES as E } from "./workbenchThemes.js";
+var y = /* @__PURE__ */ o("<div class=workbench-theme-selector data-floe-canvas-interactive=true>"), L = /* @__PURE__ */ o("<span class=workbench-theme-selector__trigger-inner>"), M = /* @__PURE__ */ o('<div class=workbench-theme-grid role=radiogroup aria-label="Workbench theme"><div class=workbench-theme-grid__header>Workbench theme</div><div class=workbench-theme-grid__items>'), p = /* @__PURE__ */ o("<button type=button class=workbench-theme-tile role=radio><span class=workbench-theme-tile__canvas aria-hidden=true><span class=workbench-theme-tile__widget></span><span class=workbench-theme-tile__dot></span></span><span class=workbench-theme-tile__meta><span class=workbench-theme-tile__label></span><span class=workbench-theme-tile__description>");
+function K(e) {
+  const r = u(() => W(e.activeTheme).label), a = u(() => [{
+    id: "theme-grid",
+    label: "Theme",
+    keepOpen: !0,
+    content: () => l(A, {
+      get activeTheme() {
+        return e.activeTheme;
+      },
+      onSelect: (i) => e.onSelect(i)
+    })
+  }]);
+  return (() => {
+    var i = y();
+    return c(i, l(x, {
+      get trigger() {
+        return (() => {
+          var n = L();
+          return c(n, l(C, {
+            class: "w-3.5 h-3.5"
+          })), n;
+        })();
+      },
+      get triggerAriaLabel() {
+        return `Workbench theme · ${r()}`;
+      },
+      triggerClass: "workbench-theme-selector__trigger",
+      get items() {
+        return a();
+      },
+      onSelect: () => {
+      },
+      align: "end"
+    })), i;
+  })();
+}
+function A(e) {
+  return (() => {
+    var r = M(), a = r.firstChild, i = a.nextSibling;
+    return c(i, l(T, {
+      each: E,
+      children: (n) => l(H, {
+        theme: n,
+        get active() {
+          return n.id === e.activeTheme;
+        },
+        onClick: () => e.onSelect(n.id)
+      })
+    })), r;
+  })();
+}
+function H(e) {
+  return (() => {
+    var r = p(), a = r.firstChild, i = a.firstChild, n = i.nextSibling, w = a.nextSibling, s = w.firstChild, f = s.nextSibling;
+    return r.$$click = () => e.onClick(), c(s, () => e.theme.label), c(f, () => e.theme.description), $((t) => {
+      var m = !!e.active, d = e.active, v = e.active, b = e.theme.preview.canvas, g = e.theme.preview.widget, _ = e.theme.preview.accent;
+      return m !== t.e && r.classList.toggle("is-active", t.e = m), d !== t.t && k(r, "aria-pressed", t.t = d), v !== t.a && k(r, "aria-checked", t.a = v), b !== t.o && h(a, "background", t.o = b), g !== t.i && h(i, "background", t.i = g), _ !== t.n && h(n, "background", t.n = _), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    }), r;
+  })();
+}
+S(["click"]);
+export {
+  K as WorkbenchThemeSelector
+};

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

@@ -32,6 +32,8 @@ export interface WorkbenchWidgetProps {
         width: number;
         height: number;
     }) => void;
+    onRequestOverview: (item: WorkbenchWidgetItem) => void;
+    onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
 }
 export declare function WorkbenchWidget(props: WorkbenchWidgetProps): JSX.Element;