@floegence/floe-webapp-core 0.36.15 → 0.36.16

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,54 +1,54 @@
-import { insert as c, createComponent as a, Portal as f, addEventListener as w, effect as v, className as h, template as d, delegateEvents as p } from "solid-js/web";
-import { createEffect as s, onCleanup as l, Show as k } from "solid-js";
-import { isTypingElement as W } from "../../utils/dom.js";
-import { clientToCanvasWorld as C } from "../ui/canvasGeometry.js";
-import { WorkbenchCanvas as b } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as A } from "./WorkbenchContextMenu.js";
-import { WorkbenchFilterBar as y } from "./WorkbenchFilterBar.js";
-import { WorkbenchHud as D } from "./WorkbenchHud.js";
-import { WorkbenchLockButton as S } from "./WorkbenchLockButton.js";
-import { installWorkbenchContextMenuDismissListeners as x } from "./workbenchContextMenuDismiss.js";
-import { useWorkbenchModel as M } from "./useWorkbenchModel.js";
-var F = /* @__PURE__ */ d("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), L = /* @__PURE__ */ d("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const R = "F1";
-function U(o) {
-  const e = M({
-    state: () => o.state(),
-    setState: (t) => o.setState(t),
-    widgetDefinitions: () => o.widgetDefinitions,
+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 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,
     onClose: () => {
     }
   });
   s(() => {
-    o.onApiReady?.({
+    i.onApiReady?.({
       ensureWidget: (t, r) => e.widgetActions.ensureWidget(t, r) ?? null,
       clearSelection: () => e.selection.clear(),
       focusWidget: (t, r) => e.navigation.focusWidget(t, r),
       fitWidget: (t) => e.navigation.fitWidget(t),
       overviewWidget: (t) => e.navigation.overviewWidget(t),
       findWidgetByType: (t) => e.queries.findWidgetByType(t)
-    }), l(() => {
-      o.onApiReady?.(null);
+    }), u(() => {
+      i.onApiReady?.(null);
     });
   });
-  const u = () => o.lockShortcut === void 0 ? R : o.lockShortcut;
+  const l = () => i.lockShortcut === void 0 ? E : i.lockShortcut;
   s(() => {
     if (typeof window > "u" || !e.contextMenu.state()) return;
-    const t = x({
+    const t = F({
       ownerWindow: window,
       onDismiss: e.contextMenu.close
     });
-    l(() => t());
+    u(() => t());
   }), s(() => {
-    if (o.enableKeyboard === !1 || typeof document > "u") return;
-    const t = u(), r = (n) => {
+    if (i.enableKeyboard === !1 || typeof document > "u") return;
+    const t = l(), r = (n) => {
       if (n.defaultPrevented || n.isComposing) return;
       if (t !== null && n.key === t) {
         n.preventDefault(), e.lock.toggle();
         return;
       }
-      const i = n.target;
-      if (!(i instanceof Element && W(i)))
+      const o = n.target;
+      if (!(o instanceof Element && C(o)))
         switch (n.key) {
           case "ArrowUp":
             n.preventDefault(), e.navigation.handleArrowNavigation("up");
@@ -68,23 +68,23 @@ function U(o) {
             break;
         }
     };
-    document.addEventListener("keydown", r, !0), l(() => document.removeEventListener("keydown", r, !0));
+    document.addEventListener("keydown", r, !0), u(() => document.removeEventListener("keydown", r, !0));
   });
-  const g = (t, r) => {
+  const m = (t, r) => {
     const n = document.querySelector('[data-floe-workbench-canvas-frame="true"]');
     if (!n) return null;
-    const i = n.getBoundingClientRect();
-    return C(i, e.viewport(), {
+    const o = n.getBoundingClientRect();
+    return A(o, e.viewport(), {
       clientX: t,
       clientY: r
     });
-  }, m = (t, r, n) => {
-    const i = g(r, n);
-    i && e.widgetActions.addWidgetAtCursor(t, i.worldX, i.worldY);
+  }, f = (t, r, n) => {
+    const o = m(r, n);
+    o && e.widgetActions.addWidgetAtCursor(t, o.worldX, o.worldY);
   };
   return (() => {
     var t = L(), r = t.firstChild;
-    return c(r, a(b, {
+    return c(r, a(D, {
       get widgetDefinitions() {
         return e.widgetDefinitions();
       },
@@ -121,6 +121,9 @@ function U(o) {
       get onCanvasContextMenu() {
         return e.canvas.openCanvasContextMenu;
       },
+      get onCanvasPointerDown() {
+        return e.selection.clear;
+      },
       get onSelectWidget() {
         return e.canvas.selectWidget;
       },
@@ -139,10 +142,16 @@ function U(o) {
       get onCommitResize() {
         return e.canvas.commitResize;
       },
+      get onRequestOverview() {
+        return e.navigation.overviewWidget;
+      },
+      get onRequestFit() {
+        return e.navigation.fitWidget;
+      },
       get onRequestDelete() {
         return e.widgetActions.deleteWidget;
       }
-    })), c(t, a(S, {
+    })), c(t, a(M, {
       get locked() {
         return e.locked();
       },
@@ -150,9 +159,9 @@ function U(o) {
         return e.lock.toggle;
       },
       get shortcutLabel() {
-        return u() ?? void 0;
+        return l() ?? void 0;
       }
-    }), null), c(t, a(y, {
+    }), null), c(t, a(S, {
       get widgetDefinitions() {
         return e.widgetDefinitions();
       },
@@ -168,8 +177,8 @@ function U(o) {
       get onShowAll() {
         return e.filter.showAll;
       },
-      onCreateAt: m
-    }), null), c(t, a(D, {
+      onCreateAt: f
+    }), null), c(t, a(x, {
       get scaleLabel() {
         return e.scaleLabel();
       },
@@ -178,18 +187,22 @@ function U(o) {
       },
       get onZoomIn() {
         return e.hud.zoomIn;
-      }
-    }), null), c(t, a(k, {
+      },
+      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(f, {
+        return a(v, {
           get children() {
             return [(() => {
-              var n = F();
+              var n = T();
               return w(n, "contextmenu", e.contextMenu.retarget, !0), n;
-            })(), a(A, {
+            })(), a(y, {
               get x() {
                 return e.contextMenu.position()?.left ?? 0;
               },
@@ -203,10 +216,16 @@ function U(o) {
           }
         });
       }
-    }), null), v(() => h(t, `workbench-surface${o.class ? ` ${o.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;
   })();
 }
-p(["contextmenu"]);
+W(["contextmenu"]);
 export {
-  U 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;