@floegence/floe-webapp-core 0.36.0 → 0.36.1

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,70 +1,84 @@
-import { insert as c, createComponent as i, Portal as v, addEventListener as s, effect as h, className as p, template as d, delegateEvents as k } from "solid-js/web";
-import { createEffect as b, onCleanup as C, Show as W } from "solid-js";
-import { isTypingElement as x } from "../../utils/dom.js";
-import { WorkbenchCanvas as A } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as M } from "./WorkbenchContextMenu.js";
-import { WorkbenchFilterBar as S } from "./WorkbenchFilterBar.js";
-import { WorkbenchHud as y } from "./WorkbenchHud.js";
-import { WorkbenchLockButton as F } from "./WorkbenchLockButton.js";
-import { useWorkbenchModel as D } from "./useWorkbenchModel.js";
-var L = /* @__PURE__ */ d("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), E = /* @__PURE__ */ d("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const I = "F1";
-function U(a) {
-  const e = D({
-    state: () => a.state(),
-    setState: (r) => a.setState(r),
+import { insert as c, createComponent as a, Portal as k, addEventListener as s, effect as p, className as b, template as m, delegateEvents as C } from "solid-js/web";
+import { createEffect as d, onCleanup as g, Show as W } from "solid-js";
+import { isTypingElement as A } from "../../utils/dom.js";
+import { WorkbenchCanvas as y } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as x } from "./WorkbenchContextMenu.js";
+import { WorkbenchFilterBar as D } from "./WorkbenchFilterBar.js";
+import { WorkbenchHud as M } from "./WorkbenchHud.js";
+import { WorkbenchLockButton as S } from "./WorkbenchLockButton.js";
+import { useWorkbenchModel as F } from "./useWorkbenchModel.js";
+var L = /* @__PURE__ */ m("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), R = /* @__PURE__ */ m("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const E = "F1";
+function K(i) {
+  const e = F({
+    state: () => i.state(),
+    setState: (t) => i.setState(t),
+    widgetDefinitions: () => i.widgetDefinitions,
     onClose: () => {
     }
-  }), u = () => a.lockShortcut === void 0 ? I : a.lockShortcut;
-  b(() => {
-    if (a.enableKeyboard === !1 || typeof document > "u") return;
-    const r = u(), o = (t) => {
-      if (t.defaultPrevented || t.isComposing) return;
-      if (r !== null && t.key === r) {
-        t.preventDefault(), e.lock.toggle();
+  });
+  d(() => {
+    i.onApiReady?.({
+      ensureWidget: (t, r) => e.widgetActions.ensureWidget(t, r) ?? null,
+      focusWidget: (t, r) => e.navigation.focusWidget(t, r),
+      findWidgetByType: (t) => e.queries.findWidgetByType(t)
+    }), g(() => {
+      i.onApiReady?.(null);
+    });
+  });
+  const u = () => i.lockShortcut === void 0 ? E : i.lockShortcut;
+  d(() => {
+    if (i.enableKeyboard === !1 || typeof document > "u") return;
+    const t = u(), r = (n) => {
+      if (n.defaultPrevented || n.isComposing) return;
+      if (t !== null && n.key === t) {
+        n.preventDefault(), e.lock.toggle();
         return;
       }
-      const n = t.target;
-      if (!(n instanceof Element && x(n)))
-        switch (t.key) {
+      const o = n.target;
+      if (!(o instanceof Element && A(o)))
+        switch (n.key) {
           case "ArrowUp":
-            t.preventDefault(), e.navigation.handleArrowNavigation("up");
+            n.preventDefault(), e.navigation.handleArrowNavigation("up");
             break;
           case "ArrowDown":
-            t.preventDefault(), e.navigation.handleArrowNavigation("down");
+            n.preventDefault(), e.navigation.handleArrowNavigation("down");
             break;
           case "ArrowLeft":
-            t.preventDefault(), e.navigation.handleArrowNavigation("left");
+            n.preventDefault(), e.navigation.handleArrowNavigation("left");
             break;
           case "ArrowRight":
-            t.preventDefault(), e.navigation.handleArrowNavigation("right");
+            n.preventDefault(), e.navigation.handleArrowNavigation("right");
             break;
           case "Delete":
           case "Backspace":
-            e.selectedWidgetId() && (t.preventDefault(), e.widgetActions.deleteSelected());
+            e.selectedWidgetId() && (n.preventDefault(), e.widgetActions.deleteSelected());
             break;
         }
     };
-    document.addEventListener("keydown", o, !0), C(() => document.removeEventListener("keydown", o, !0));
+    document.addEventListener("keydown", r, !0), g(() => document.removeEventListener("keydown", r, !0));
   });
-  const g = (r, o) => {
-    const t = document.querySelector('[data-floe-workbench-canvas-frame="true"]');
-    if (!t) return null;
-    const n = t.getBoundingClientRect();
-    if (r < n.left || r > n.right || o < n.top || o > n.bottom)
+  const f = (t, r) => {
+    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 f = r - n.left, w = o - n.top, l = e.viewport();
+    const v = t - o.left, h = r - o.top, l = e.viewport();
     return {
-      worldX: (f - l.x) / l.scale,
-      worldY: (w - l.y) / l.scale
+      worldX: (v - l.x) / l.scale,
+      worldY: (h - l.y) / l.scale
     };
-  }, m = (r, o, t) => {
-    const n = g(o, t);
-    n && e.widgetActions.addWidgetAtCursor(r, n.worldX, n.worldY);
+  }, w = (t, r, n) => {
+    const o = f(r, n);
+    o && e.widgetActions.addWidgetAtCursor(t, o.worldX, o.worldY);
   };
   return (() => {
-    var r = E(), o = r.firstChild;
-    return c(o, i(A, {
+    var t = R(), r = t.firstChild;
+    return c(r, a(y, {
+      get widgetDefinitions() {
+        return e.widgetDefinitions();
+      },
       get widgets() {
         return e.widgets();
       },
@@ -116,7 +130,7 @@ function U(a) {
       get onRequestDelete() {
         return e.widgetActions.deleteWidget;
       }
-    })), c(r, i(F, {
+    })), c(t, a(S, {
       get locked() {
         return e.locked();
       },
@@ -126,7 +140,10 @@ function U(a) {
       get shortcutLabel() {
         return u() ?? void 0;
       }
-    }), null), c(r, i(S, {
+    }), null), c(t, a(D, {
+      get widgetDefinitions() {
+        return e.widgetDefinitions();
+      },
       get widgets() {
         return e.widgets();
       },
@@ -139,8 +156,8 @@ function U(a) {
       get onShowAll() {
         return e.filter.showAll;
       },
-      onCreateAt: m
-    }), null), c(r, i(y, {
+      onCreateAt: w
+    }), null), c(t, a(M, {
       get scaleLabel() {
         return e.scaleLabel();
       },
@@ -150,17 +167,17 @@ function U(a) {
       get onZoomIn() {
         return e.hud.zoomIn;
       }
-    }), null), c(r, i(W, {
+    }), null), c(t, a(W, {
       get when() {
         return e.contextMenu.state();
       },
       get children() {
-        return i(v, {
+        return a(k, {
           get children() {
             return [(() => {
-              var t = L();
-              return s(t, "contextmenu", e.contextMenu.retarget, !0), s(t, "click", e.contextMenu.close, !0), t;
-            })(), i(M, {
+              var n = L();
+              return s(n, "contextmenu", e.contextMenu.retarget, !0), s(n, "click", e.contextMenu.close, !0), n;
+            })(), a(x, {
               get x() {
                 return e.contextMenu.position()?.left ?? 0;
               },
@@ -174,10 +191,10 @@ function U(a) {
           }
         });
       }
-    }), null), h(() => p(r, `workbench-surface${a.class ? ` ${a.class}` : ""}`)), r;
+    }), null), p(() => b(t, `workbench-surface${i.class ? ` ${i.class}` : ""}`)), t;
   })();
 }
-k(["click", "contextmenu"]);
+C(["click", "contextmenu"]);
 export {
-  U as WorkbenchSurface
+  K as WorkbenchSurface
 };

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

@@ -1,6 +1,7 @@
 import { type JSX } from 'solid-js';
-import type { WorkbenchWidgetItem } from './types';
+import type { WorkbenchWidgetDefinition, WorkbenchWidgetItem } from './types';
 export interface WorkbenchWidgetProps {
+    definition: WorkbenchWidgetDefinition;
     item: WorkbenchWidgetItem;
     selected: boolean;
     optimisticFront: boolean;

package/dist/components/workbench/WorkbenchWidget.js

@@ -1,35 +1,34 @@
-import { insert as m, createComponent as v, memo as G, effect as N, setAttribute as O, setStyleProperty as f, template as E, delegateEvents as T } from "solid-js/web";
-import { createSignal as P, onCleanup as q, untrack as I, createMemo as y } from "solid-js";
-import { startHotInteraction as A } from "../../utils/hotInteraction.js";
-import { GripVertical as V, X as Z } from "../icons/index.js";
-import { getWidgetEntry as j } from "./widgets/widgetRegistry.js";
-var J = /* @__PURE__ */ E('<article class=workbench-widget><header class=workbench-widget__header><button type=button class=workbench-widget__drag aria-label="Drag widget"data-floe-canvas-interactive=true></button><div class=workbench-widget__title-area><span class=workbench-widget__title></span></div><button type=button class=workbench-widget__close aria-label="Remove widget"data-floe-canvas-interactive=true></button></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), K = /* @__PURE__ */ E('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
-const Q = 220, U = 160;
-function ot(i) {
-  const [u, x] = P(null), [b, C] = P(null);
+import { insert as m, createComponent as f, memo as B, effect as G, setAttribute as N, setStyleProperty as v, template as A, delegateEvents as O } from "solid-js/web";
+import { createSignal as R, onCleanup as T, untrack as I, createMemo as H } from "solid-js";
+import { startHotInteraction as P } from "../../utils/hotInteraction.js";
+import { GripVertical as q, X as V } from "../icons/index.js";
+var Z = /* @__PURE__ */ A('<article class=workbench-widget><header class=workbench-widget__header><button type=button class=workbench-widget__drag aria-label="Drag widget"data-floe-canvas-interactive=true></button><div class=workbench-widget__title-area><span class=workbench-widget__title></span></div><button type=button class=workbench-widget__close aria-label="Remove widget"data-floe-canvas-interactive=true></button></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), j = /* @__PURE__ */ A('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
+const J = 220, K = 160;
+function et(e) {
+  const [u, x] = R(null), [b, C] = R(null);
   let g, w;
-  q(() => {
+  T(() => {
     g?.abort(), g = void 0, w?.abort(), w = void 0, I(u)?.stopInteraction(), I(b)?.stopInteraction();
   });
-  const M = y(() => j(i.item.type)), _ = () => u() !== null, k = () => b() !== null, $ = y(() => {
-    const e = u();
-    return e ? {
-      x: e.worldX,
-      y: e.worldY
+  const M = () => u() !== null, _ = () => b() !== null, k = H(() => {
+    const i = u();
+    return i ? {
+      x: i.worldX,
+      y: i.worldY
     } : {
-      x: i.item.x,
-      y: i.item.y
+      x: e.item.x,
+      y: e.item.y
     };
-  }), X = y(() => {
-    const e = b();
-    return e ? {
-      width: e.width,
-      height: e.height
+  }), y = H(() => {
+    const i = b();
+    return i ? {
+      width: i.width,
+      height: i.height
     } : {
-      width: i.item.width,
-      height: i.item.height
+      width: e.item.width,
+      height: e.item.height
     };
-  }), z = (e) => {
+  }), $ = (i) => {
     const o = I(u);
     if (!o) return;
     const a = {
@@ -38,23 +37,23 @@ function ot(i) {
     }, r = {
       x: o.startWorldX,
       y: o.startWorldY
-    }, d = e && (Math.abs(a.x - r.x) > 1 || Math.abs(a.y - r.y) > 1);
-    i.onCommitFront(i.item.id), d && i.onCommitMove(i.item.id, a), o.stopInteraction(), x(null), g?.abort(), g = void 0;
-  }, F = (e) => {
-    if (e.button !== 0 || i.locked) return;
-    e.preventDefault(), e.stopPropagation(), g?.abort(), i.onStartOptimisticFront(i.item.id);
-    const o = A({
+    }, d = i && (Math.abs(a.x - r.x) > 1 || Math.abs(a.y - r.y) > 1);
+    e.onCommitFront(e.item.id), d && e.onCommitMove(e.item.id, a), o.stopInteraction(), x(null), g?.abort(), g = void 0;
+  }, F = (i) => {
+    if (i.button !== 0 || e.locked) return;
+    i.preventDefault(), i.stopPropagation(), g?.abort(), e.onStartOptimisticFront(e.item.id);
+    const o = P({
       kind: "drag",
       cursor: "grabbing"
-    }), a = Math.max(i.viewportScale, 1e-3);
+    }), a = Math.max(e.viewportScale, 1e-3);
     x({
-      pointerId: e.pointerId,
-      startClientX: e.clientX,
-      startClientY: e.clientY,
-      startWorldX: i.item.x,
-      startWorldY: i.item.y,
-      worldX: i.item.x,
-      worldY: i.item.y,
+      pointerId: i.pointerId,
+      startClientX: i.clientX,
+      startClientY: i.clientY,
+      startWorldX: e.item.x,
+      startWorldY: e.item.y,
+      worldX: e.item.x,
+      worldY: e.item.y,
       moved: !1,
       scale: a,
       stopInteraction: o
@@ -71,9 +70,9 @@ function ot(i) {
         };
       });
     }, d = (t) => {
-      t.pointerId === e.pointerId && z(!0);
+      t.pointerId === i.pointerId && $(!0);
     }, s = (t) => {
-      t.pointerId === e.pointerId && z(!1);
+      t.pointerId === i.pointerId && $(!1);
     }, l = new AbortController();
     g = l, window.addEventListener("pointermove", r, {
       signal: l.signal
@@ -84,36 +83,36 @@ function ot(i) {
       once: !0,
       signal: l.signal
     });
-  }, S = (e) => {
+  }, X = (i) => {
     const o = I(b);
     if (!o) return;
     const a = {
       width: o.width,
       height: o.height
     }, r = Math.abs(o.width - o.startWidth) > 1 || Math.abs(o.height - o.startHeight) > 1;
-    e && r && i.onCommitResize(i.item.id, a), o.stopInteraction(), C(null), w?.abort(), w = void 0;
-  }, B = (e) => {
-    if (e.button !== 0 || i.locked) return;
-    e.preventDefault(), e.stopPropagation(), w?.abort(), i.onStartOptimisticFront(i.item.id);
-    const o = A({
+    i && r && e.onCommitResize(e.item.id, a), o.stopInteraction(), C(null), w?.abort(), w = void 0;
+  }, E = (i) => {
+    if (i.button !== 0 || e.locked) return;
+    i.preventDefault(), i.stopPropagation(), w?.abort(), e.onStartOptimisticFront(e.item.id);
+    const o = P({
       kind: "drag",
       cursor: "nwse-resize"
-    }), a = Math.max(i.viewportScale, 1e-3);
+    }), a = Math.max(e.viewportScale, 1e-3);
     C({
-      pointerId: e.pointerId,
-      startClientX: e.clientX,
-      startClientY: e.clientY,
-      startWidth: i.item.width,
-      startHeight: i.item.height,
-      width: i.item.width,
-      height: i.item.height,
+      pointerId: i.pointerId,
+      startClientX: i.clientX,
+      startClientY: i.clientY,
+      startWidth: e.item.width,
+      startHeight: e.item.height,
+      width: e.item.width,
+      height: e.item.height,
       scale: a,
       stopInteraction: o
     });
     const r = (t) => {
       C((n) => {
         if (!n || n.pointerId !== t.pointerId) return n;
-        const c = Math.max(Q, n.startWidth + (t.clientX - n.startClientX) / n.scale), h = Math.max(U, n.startHeight + (t.clientY - n.startClientY) / n.scale);
+        const c = Math.max(J, n.startWidth + (t.clientX - n.startClientX) / n.scale), h = Math.max(K, n.startHeight + (t.clientY - n.startClientY) / n.scale);
         return {
           ...n,
           width: c,
@@ -121,9 +120,9 @@ function ot(i) {
         };
       });
     }, d = (t) => {
-      t.pointerId === e.pointerId && S(!0);
+      t.pointerId === i.pointerId && X(!0);
     }, s = (t) => {
-      t.pointerId === e.pointerId && S(!1);
+      t.pointerId === i.pointerId && X(!1);
     }, l = new AbortController();
     w = l, window.addEventListener("pointermove", r, {
       signal: l.signal
@@ -136,34 +135,44 @@ function ot(i) {
     });
   };
   return (() => {
-    var e = J(), o = e.firstChild, a = o.firstChild, r = a.nextSibling, d = r.firstChild, s = r.nextSibling, l = o.nextSibling;
-    return e.$$click = () => {
-      i.onSelect(i.item.id), i.onCommitFront(i.item.id);
-    }, e.$$contextmenu = (t) => {
-      t.preventDefault(), t.stopPropagation(), i.onContextMenu(t, i.item);
-    }, a.$$pointerdown = F, m(a, v(V, {
+    var i = Z(), o = i.firstChild, a = o.firstChild, r = a.nextSibling, d = r.firstChild, s = r.nextSibling, l = o.nextSibling;
+    return i.$$click = () => {
+      e.onSelect(e.item.id), e.onCommitFront(e.item.id);
+    }, i.$$contextmenu = (t) => {
+      t.preventDefault(), t.stopPropagation(), e.onContextMenu(t, e.item);
+    }, a.$$pointerdown = F, m(a, f(q, {
       class: "w-3.5 h-3.5"
     })), m(r, () => {
-      const t = M().icon;
-      return v(t, {
+      const t = e.definition.icon;
+      return f(t, {
         class: "w-3.5 h-3.5"
       });
-    }, d), m(d, () => i.item.title), s.$$click = (t) => {
-      t.stopPropagation(), t.preventDefault(), i.onRequestDelete(i.item.id);
-    }, s.$$pointerdown = (t) => t.stopPropagation(), m(s, v(Z, {
+    }, d), m(d, () => e.item.title), s.$$click = (t) => {
+      t.stopPropagation(), t.preventDefault(), e.onRequestDelete(e.item.id);
+    }, s.$$pointerdown = (t) => t.stopPropagation(), m(s, f(V, {
       class: "w-3 h-3"
     })), m(l, () => {
-      const t = M().body;
-      return v(t, {});
-    }), m(e, (() => {
-      var t = G(() => !!i.locked);
+      const t = e.definition.body;
+      return f(t, {
+        get widgetId() {
+          return e.item.id;
+        },
+        get title() {
+          return e.item.title;
+        },
+        get type() {
+          return e.item.type;
+        }
+      });
+    }), m(i, (() => {
+      var t = B(() => !!e.locked);
       return () => t() ? null : (() => {
-        var n = K();
-        return n.$$pointerdown = B, n;
+        var n = j();
+        return n.$$pointerdown = E, n;
       })();
-    })(), null), N((t) => {
-      var n = !!i.selected, c = !!_(), h = !!k(), Y = !!i.filtered, W = i.item.id, L = `translate(${$().x}px, ${$().y}px)`, D = `${X().width}px`, R = `${X().height}px`, H = _() || k() || i.optimisticFront ? `${i.topZIndex + 1}` : `${i.item.z_index}`;
-      return n !== t.e && e.classList.toggle("is-selected", t.e = n), c !== t.t && e.classList.toggle("is-dragging", t.t = c), h !== t.a && e.classList.toggle("is-resizing", t.a = h), Y !== t.o && e.classList.toggle("is-filtered-out", t.o = Y), W !== t.i && O(e, "data-floe-workbench-widget-id", t.i = W), L !== t.n && f(e, "transform", t.n = L), D !== t.s && f(e, "width", t.s = D), R !== t.h && f(e, "height", t.h = R), H !== t.r && f(e, "z-index", t.r = H), t;
+    })(), null), G((t) => {
+      var n = !!e.selected, c = !!M(), h = !!_(), z = !!e.filtered, S = e.item.id, Y = `translate(${k().x}px, ${k().y}px)`, W = `${y().width}px`, L = `${y().height}px`, D = M() || _() || e.optimisticFront ? `${e.topZIndex + 1}` : `${e.item.z_index}`;
+      return n !== t.e && i.classList.toggle("is-selected", t.e = n), c !== t.t && i.classList.toggle("is-dragging", t.t = c), h !== t.a && i.classList.toggle("is-resizing", t.a = h), z !== t.o && i.classList.toggle("is-filtered-out", t.o = z), S !== t.i && N(i, "data-floe-workbench-widget-id", t.i = S), Y !== t.n && v(i, "transform", t.n = Y), W !== t.s && v(i, "width", t.s = W), L !== t.h && v(i, "height", t.h = L), D !== t.r && v(i, "z-index", t.r = D), t;
     }, {
       e: void 0,
       t: void 0,
@@ -174,10 +183,10 @@ function ot(i) {
       s: void 0,
       h: void 0,
       r: void 0
-    }), e;
+    }), i;
   })();
 }
-T(["contextmenu", "click", "pointerdown"]);
+O(["contextmenu", "click", "pointerdown"]);
 export {
-  ot as WorkbenchWidget
+  et as WorkbenchWidget
 };

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

@@ -1,7 +1,7 @@
 export { WorkbenchOverlay, type WorkbenchOverlayProps, } from './WorkbenchOverlay';
-export { WorkbenchSurface, type WorkbenchSurfaceProps, } from './WorkbenchSurface';
+export { WorkbenchSurface, type WorkbenchSurfaceApi, type WorkbenchSurfaceProps, } from './WorkbenchSurface';
 export { WorkbenchContextMenu, type WorkbenchContextMenuItem, type WorkbenchContextMenuProps, } from './WorkbenchContextMenu';
 export { useWorkbenchModel, type UseWorkbenchModelOptions } from './useWorkbenchModel';
-export { WIDGET_REGISTRY, getWidgetEntry, type WidgetRegistryEntry } from './widgets/widgetRegistry';
+export { WIDGET_REGISTRY, createWorkbenchFilterState, getWidgetEntry, isValidWorkbenchWidgetType, resolveWorkbenchWidgetDefinitions, type WidgetRegistryEntry, } from './widgets/widgetRegistry';
 export * from './types';
 export { sanitizeWorkbenchState, createDefaultWorkbenchState, createWorkbenchId, } from './workbenchHelpers';

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

@@ -1,8 +1,30 @@
-export type WorkbenchWidgetType = 'terminal' | 'file-browser' | 'system-monitor' | 'log-viewer' | 'code-editor';
+import type { Component } from 'solid-js';
+export type BuiltinWorkbenchWidgetType = 'terminal' | 'file-browser' | 'system-monitor' | 'log-viewer' | 'code-editor';
+export type WorkbenchWidgetType = BuiltinWorkbenchWidgetType | (string & {});
 export declare const WORKBENCH_WIDGET_TYPES: readonly WorkbenchWidgetType[];
-export interface WorkbenchWidgetItem {
+export interface WorkbenchWidgetBodyProps<TWidgetType extends string = WorkbenchWidgetType> {
+    widgetId: string;
+    title: string;
+    type: TWidgetType;
+}
+export interface WorkbenchWidgetDefinition<TWidgetType extends string = WorkbenchWidgetType> {
+    type: TWidgetType;
+    label: string;
+    icon: Component<{
+        class?: string;
+    }>;
+    body: Component<WorkbenchWidgetBodyProps<TWidgetType>>;
+    defaultTitle: string;
+    defaultSize: {
+        width: number;
+        height: number;
+    };
+    group?: string;
+    singleton?: boolean;
+}
+export interface WorkbenchWidgetItem<TWidgetType extends string = WorkbenchWidgetType> {
     id: string;
-    type: WorkbenchWidgetType;
+    type: TWidgetType;
     title: string;
     x: number;
     y: number;
@@ -16,12 +38,12 @@ export interface WorkbenchViewport {
     y: number;
     scale: number;
 }
-export interface WorkbenchState {
+export interface WorkbenchState<TWidgetType extends string = WorkbenchWidgetType> {
     version: 1;
-    widgets: WorkbenchWidgetItem[];
+    widgets: WorkbenchWidgetItem<TWidgetType>[];
     viewport: WorkbenchViewport;
     locked: boolean;
-    filters: Record<WorkbenchWidgetType, boolean>;
+    filters: Record<TWidgetType, boolean>;
     selectedWidgetId: string | null;
 }
 export interface WorkbenchContextMenuState {
@@ -31,9 +53,4 @@ export interface WorkbenchContextMenuState {
     worldY: number;
     widgetId?: string | null;
 }
-export declare const DEFAULT_WIDGET_DIMENSIONS: Readonly<Record<WorkbenchWidgetType, {
-    width: number;
-    height: number;
-}>>;
 export declare const DEFAULT_WORKBENCH_VIEWPORT: WorkbenchViewport;
-export declare const DEFAULT_FILTERS: Record<WorkbenchWidgetType, boolean>;

package/dist/components/workbench/types.js

@@ -4,22 +4,8 @@ const e = [
   "system-monitor",
   "log-viewer",
   "code-editor"
-], t = {
-  terminal: { width: 480, height: 320 },
-  "file-browser": { width: 360, height: 400 },
-  "system-monitor": { width: 340, height: 280 },
-  "log-viewer": { width: 500, height: 300 },
-  "code-editor": { width: 520, height: 380 }
-}, i = { x: 80, y: 60, scale: 1 }, r = {
-  terminal: !0,
-  "file-browser": !0,
-  "system-monitor": !0,
-  "log-viewer": !0,
-  "code-editor": !0
-};
+], o = { x: 80, y: 60, scale: 1 };
 export {
-  r as DEFAULT_FILTERS,
-  t as DEFAULT_WIDGET_DIMENSIONS,
-  i as DEFAULT_WORKBENCH_VIEWPORT,
+  o as DEFAULT_WORKBENCH_VIEWPORT,
   e as WORKBENCH_WIDGET_TYPES
 };

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

@@ -1,13 +1,14 @@
 import type { InfiniteCanvasContextMenuEvent } from '../../ui';
-import { type WorkbenchContextMenuState, type WorkbenchState, type WorkbenchViewport, type WorkbenchWidgetItem, type WorkbenchWidgetType } from './types';
+import { type WorkbenchWidgetDefinition, type WorkbenchContextMenuState, type WorkbenchState, type WorkbenchViewport, type WorkbenchWidgetItem, type WorkbenchWidgetType } from './types';
 import type { WorkbenchContextMenuItem } from './WorkbenchContextMenu';
 export interface UseWorkbenchModelOptions {
     state: () => WorkbenchState;
     setState: (updater: (prev: WorkbenchState) => WorkbenchState) => void;
     onClose: () => void;
+    widgetDefinitions?: readonly WorkbenchWidgetDefinition[] | (() => readonly WorkbenchWidgetDefinition[] | undefined);
 }
 export declare function useWorkbenchModel(options: UseWorkbenchModelOptions): {
-    widgets: import("solid-js").Accessor<WorkbenchWidgetItem[]>;
+    widgets: import("solid-js").Accessor<WorkbenchWidgetItem<WorkbenchWidgetType>[]>;
     viewport: import("solid-js").Accessor<WorkbenchViewport>;
     locked: import("solid-js").Accessor<boolean>;
     filters: import("solid-js").Accessor<Record<WorkbenchWidgetType, boolean>>;
@@ -15,6 +16,7 @@ export declare function useWorkbenchModel(options: UseWorkbenchModelOptions): {
     topZIndex: import("solid-js").Accessor<number>;
     scaleLabel: import("solid-js").Accessor<string>;
     optimisticFrontWidgetId: import("solid-js").Accessor<string | null>;
+    widgetDefinitions: import("solid-js").Accessor<readonly WorkbenchWidgetDefinition<WorkbenchWidgetType>[]>;
     setCanvasFrameRef: (el: HTMLDivElement | undefined) => void;
     contextMenu: {
         state: import("solid-js").Accessor<WorkbenchContextMenuState | null>;
@@ -57,14 +59,25 @@ export declare function useWorkbenchModel(options: UseWorkbenchModelOptions): {
     navigation: {
         handleArrowNavigation: (direction: "up" | "down" | "left" | "right") => void;
         centerOnWidget: (widget: WorkbenchWidgetItem) => void;
-        focusWidget: (widget: WorkbenchWidgetItem) => void;
+        focusWidget: (widget: WorkbenchWidgetItem, options?: {
+            centerViewport?: boolean;
+        }) => WorkbenchWidgetItem<WorkbenchWidgetType>;
     };
     widgetActions: {
         deleteSelected: () => void;
         deleteWidget: (widgetId: string) => void;
-        addWidget: (type: WorkbenchWidgetType, worldX: number, worldY: number) => WorkbenchWidgetItem;
-        addWidgetAtCursor: (type: WorkbenchWidgetType, worldX: number, worldY: number) => WorkbenchWidgetItem;
-        addWidgetCentered: (type: WorkbenchWidgetType, worldX: number, worldY: number) => WorkbenchWidgetItem;
+        addWidget: (type: WorkbenchWidgetType, worldX: number, worldY: number) => WorkbenchWidgetItem<WorkbenchWidgetType>;
+        addWidgetAtCursor: (type: WorkbenchWidgetType, worldX: number, worldY: number) => WorkbenchWidgetItem<WorkbenchWidgetType>;
+        addWidgetCentered: (type: WorkbenchWidgetType, worldX: number, worldY: number) => WorkbenchWidgetItem<WorkbenchWidgetType>;
+        ensureWidget: (type: WorkbenchWidgetType, ensureOptions?: {
+            centerViewport?: boolean;
+            worldX?: number;
+            worldY?: number;
+        }) => WorkbenchWidgetItem<WorkbenchWidgetType>;
+    };
+    queries: {
+        findWidgetByType: (type: WorkbenchWidgetType) => WorkbenchWidgetItem<WorkbenchWidgetType> | null;
+        findWidgetById: (widgetId: string) => WorkbenchWidgetItem<WorkbenchWidgetType> | null;
     };
     handleCloseRequest: () => void;
 };