@floegence/floe-webapp-core 0.36.0 → 0.36.1

package/dist/components/workbench/useWorkbenchModel.js

@@ -1,122 +1,126 @@
-import { createSignal as k, createMemo as d } from "solid-js";
-import { ArrowUp as st, Copy as dt, Trash as lt } from "../icons/index.js";
-import { DEFAULT_WIDGET_DIMENSIONS as R, DEFAULT_FILTERS as at } from "./types.js";
-import { getTopZIndex as rt, createContextMenuPosition as gt, createWorkbenchId as ht, findNearestWidget as ut, clampScale as mt, WORKBENCH_CANVAS_ZOOM_STEP as z, WORKBENCH_CONTEXT_MENU_WIDTH_PX as ft, estimateContextMenuHeight as wt } from "./workbenchHelpers.js";
-import { WIDGET_REGISTRY as Wt, getWidgetEntry as xt } from "./widgets/widgetRegistry.js";
-function Yt(c) {
-  const [u, m] = k(null), [H, M] = k(null), [X, L] = k({ width: 0, height: 0 }), r = c.state, g = d(() => r().widgets), h = d(() => r().viewport), P = d(() => r().locked), T = d(() => r().filters), w = d(() => r().selectedWidgetId), W = d(() => rt(g())), q = d(() => `${Math.round(h().scale * 100)}%`), U = (t) => {
-    t && L({ width: t.clientWidth, height: t.clientHeight });
-  }, V = (t) => {
-    m({
+import { createSignal as _, createMemo as s } from "solid-js";
+import { ArrowUp as gt, Copy as ut, Trash as ht } from "../icons/index.js";
+import { getTopZIndex as ft, createContextMenuPosition as wt, createWorkbenchId as mt, findNearestWidget as Wt, clampScale as xt, WORKBENCH_CANVAS_ZOOM_STEP as R, WORKBENCH_CONTEXT_MENU_WIDTH_PX as St, estimateContextMenuHeight as pt } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetDefinitions as Ct, getWidgetEntry as q, createWorkbenchFilterState as kt } from "./widgets/widgetRegistry.js";
+function At(c) {
+  const [f, w] = _(null), [B, A] = _(null), [S, P] = _({ width: 0, height: 0 }), l = c.state, u = s(() => l().widgets), a = s(() => l().viewport), v = s(() => l().locked), D = s(() => l().filters), p = s(() => l().selectedWidgetId), C = s(() => ft(u())), Z = s(() => `${Math.round(a().scale * 100)}%`), $ = () => typeof c.widgetDefinitions == "function" ? c.widgetDefinitions() : c.widgetDefinitions, h = s(
+    () => Ct($())
+  ), j = (t) => {
+    t && P({ width: t.clientWidth, height: t.clientHeight });
+  }, K = (t) => {
+    w({
       clientX: t.clientX,
       clientY: t.clientY,
       worldX: t.worldX,
       worldY: t.worldY
     });
-  }, Z = (t, e) => {
-    f(e.id), m({
+  }, L = (t, e) => {
+    m(e.id), w({
       clientX: t.clientX,
       clientY: t.clientY,
       worldX: e.x,
       worldY: e.y,
       widgetId: e.id
     });
-  }, a = () => m(null), Y = d(() => {
-    const t = u();
+  }, g = () => w(null), U = (t) => l().widgets.find((e) => e.id === t) ?? null, k = (t) => l().widgets.find((e) => e.type === t) ?? null, T = s(() => {
+    const t = f();
     if (!t) return [];
     if (t.widgetId) {
-      const e = g().find((i) => i.id === t.widgetId), n = [];
+      const e = u().find((i) => i.id === t.widgetId), n = [];
       return e && (n.push({
         id: "bring-to-front",
         kind: "action",
         label: "Bring to Front",
-        icon: st,
+        icon: gt,
         onSelect: () => {
-          f(e.id), a();
+          m(e.id), g();
         }
       }), n.push({
         id: "duplicate",
         kind: "action",
         label: "Duplicate",
-        icon: dt,
+        icon: ut,
         onSelect: () => {
-          F(e.type, e.x + 32, e.y + 32), a();
+          z(e.type, e.x + 32, e.y + 32), g();
         }
       })), n.push({ id: "separator-delete", kind: "separator" }), n.push({
         id: "delete",
         kind: "action",
         label: "Delete",
-        icon: lt,
+        icon: ht,
         destructive: !0,
         onSelect: () => {
-          t.widgetId && S(t.widgetId), a();
+          t.widgetId && Y(t.widgetId), g();
         }
       }), n;
     }
-    return Wt.map((e) => ({
+    return h().map((e) => ({
       id: `add-${e.type}`,
       kind: "action",
       label: `Add ${e.label}`,
       icon: e.icon,
       onSelect: () => {
-        _(e.type, t.worldX, t.worldY), a();
+        M(e.type, t.worldX, t.worldY), g();
       }
     }));
-  }), B = d(() => {
-    const t = u();
+  }), G = s(() => {
+    const t = f();
     if (!t) return;
-    const e = Y(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
-    return gt({
+    const e = T(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
+    return wt({
       clientX: t.clientX,
       clientY: t.clientY,
-      menuWidth: ft,
-      menuHeight: wt(n, i)
+      menuWidth: St,
+      menuHeight: pt(n, i)
     });
-  }), x = (t, e, n) => {
-    const i = xt(t), o = R[t], s = {
-      id: ht(),
+  }), X = (t, e, n) => {
+    const i = q(t, h()), o = i.singleton ? k(t) : null;
+    if (o)
+      return W(o, { centerViewport: !0 });
+    const d = i.defaultSize, r = {
+      id: mt(),
       type: t,
       title: i.defaultTitle,
       x: e,
       y: n,
-      width: o.width,
-      height: o.height,
-      z_index: W() + 1,
+      width: d.width,
+      height: d.height,
+      z_index: C() + 1,
       created_at_unix_ms: Date.now()
     };
-    return c.setState((l) => ({
-      ...l,
-      widgets: [...l.widgets, s],
-      selectedWidgetId: s.id
-    })), s;
-  }, _ = (t, e, n) => {
-    const i = R[t];
-    return x(t, e - i.width / 2, n - i.height / 2);
-  }, F = (t, e, n) => x(t, e, n), S = (t) => {
+    return c.setState((x) => ({
+      ...x,
+      widgets: [...x.widgets, r],
+      selectedWidgetId: r.id
+    })), r;
+  }, M = (t, e, n) => {
+    const i = q(t, h()).defaultSize;
+    return X(t, e - i.width / 2, n - i.height / 2);
+  }, z = (t, e, n) => X(t, e, n), Y = (t) => {
     c.setState((e) => ({
       ...e,
       widgets: e.widgets.filter((n) => n.id !== t),
       selectedWidgetId: e.selectedWidgetId === t ? null : e.selectedWidgetId
     }));
-  }, G = (t) => {
-    M(t);
-  }, f = (t) => {
-    M(t);
-    const e = W(), n = g().find((i) => i.id === t);
+  }, J = (t) => {
+    A(t);
+  }, m = (t) => {
+    A(t);
+    const e = C(), n = u().find((i) => i.id === t);
     n && n.z_index < e && c.setState((i) => ({
       ...i,
       widgets: i.widgets.map(
         (o) => o.id === t ? { ...o, z_index: e + 1 } : o
       )
     }));
-  }, $ = (t, e) => {
+  }, Q = (t, e) => {
     c.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === t ? { ...i, x: e.x, y: e.y } : i
       )
     }));
-  }, j = (t, e) => {
+  }, tt = (t, e) => {
     c.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
@@ -125,74 +129,80 @@ function Yt(c) {
     }));
   }, I = (t) => {
     c.setState((e) => ({ ...e, viewport: t }));
-  }, A = (t) => {
-    const e = h(), n = X(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, s = mt(
-      t === "in" ? e.scale * z : e.scale / z
-    ), l = {
-      x: n.width / 2 - i * s,
-      y: n.height / 2 - o * s,
-      scale: s
+  }, O = (t) => {
+    const e = a(), n = S(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, d = xt(
+      t === "in" ? e.scale * R : e.scale / R
+    ), r = {
+      x: n.width / 2 - i * d,
+      y: n.height / 2 - o * d,
+      scale: d
     };
-    I(l);
-  }, v = () => {
+    I(r);
+  }, et = () => {
     c.setState((t) => ({ ...t, locked: !t.locked }));
-  }, K = (t) => {
+  }, nt = (t) => {
     c.setState((e) => ({
       ...e,
       filters: { ...e.filters, [t]: !e.filters[t] }
     }));
-  }, J = (t) => {
+  }, it = (t) => {
     c.setState((e) => {
       const n = { ...e.filters };
       for (const i of Object.keys(n))
         n[i] = i === t;
       return { ...e, filters: n };
     });
-  }, Q = () => {
-    c.setState((t) => ({
-      ...t,
-      filters: { ...at }
+  }, ot = () => {
+    const t = kt(h());
+    c.setState((e) => ({
+      ...e,
+      filters: t
     }));
-  }, E = (t) => {
+  }, V = (t) => {
     c.setState((e) => ({ ...e, selectedWidgetId: t }));
+  }, ct = () => {
+    const t = S(), e = a();
+    return {
+      worldX: t.width > 0 ? (t.width / 2 - e.x) / e.scale : 240,
+      worldY: t.height > 0 ? (t.height / 2 - e.y) / e.scale : 180
+    };
   };
-  let O = 0;
-  const tt = (t, e, n) => {
-    const i = h(), o = i.x, s = i.y, l = i.scale, et = performance.now(), nt = 360, it = ++O, ot = (p) => 1 - Math.pow(1 - p, 3), D = (p) => {
-      if (it !== O) return;
-      const ct = p - et, N = Math.min(Math.max(ct / nt, 0), 1), C = ot(N);
+  let N = 0;
+  const st = (t, e, n) => {
+    const i = a(), o = i.x, d = i.y, r = i.scale, x = performance.now(), dt = 360, rt = ++N, lt = (F) => 1 - Math.pow(1 - F, 3), E = (F) => {
+      if (rt !== N) return;
+      const at = F - x, H = Math.min(Math.max(at / dt, 0), 1), b = lt(H);
       I({
-        x: o + (t - o) * C,
-        y: s + (e - s) * C,
-        scale: l + (n - l) * C
-      }), N < 1 && requestAnimationFrame(D);
+        x: o + (t - o) * b,
+        y: d + (e - d) * b,
+        scale: r + (n - r) * b
+      }), H < 1 && requestAnimationFrame(E);
     };
-    requestAnimationFrame(D);
-  }, b = (t) => {
-    const e = X();
-    if (e.width === 0 || e.height === 0) return;
-    const n = h(), i = e.width / 2 - (t.x + t.width / 2) * n.scale, o = e.height / 2 - (t.y + t.height / 2) * n.scale;
-    tt(i, o, n.scale);
+    requestAnimationFrame(E);
   }, y = (t) => {
-    E(t.id), f(t.id), b(t);
-  };
+    const e = S();
+    if (e.width === 0 || e.height === 0) return;
+    const n = a(), i = e.width / 2 - (t.x + t.width / 2) * n.scale, o = e.height / 2 - (t.y + t.height / 2) * n.scale;
+    st(i, o, n.scale);
+  }, W = (t, e = {}) => (V(t.id), m(t.id), e.centerViewport !== !1 && y(t), t);
   return {
-    widgets: g,
-    viewport: h,
-    locked: P,
-    filters: T,
-    selectedWidgetId: w,
-    topZIndex: W,
-    scaleLabel: q,
-    optimisticFrontWidgetId: H,
-    setCanvasFrameRef: U,
+    widgets: u,
+    viewport: a,
+    locked: v,
+    filters: D,
+    selectedWidgetId: p,
+    topZIndex: C,
+    scaleLabel: Z,
+    optimisticFrontWidgetId: B,
+    widgetDefinitions: h,
+    setCanvasFrameRef: j,
     contextMenu: {
-      state: u,
-      items: Y,
-      position: B,
-      close: a,
+      state: f,
+      items: T,
+      position: G,
+      close: g,
       retarget: (t) => {
-        t.preventDefault(), t.stopPropagation(), m({
+        t.preventDefault(), t.stopPropagation(), w({
           clientX: t.clientX,
           clientY: t.clientY,
           worldX: 0,
@@ -201,53 +211,68 @@ function Yt(c) {
       }
     },
     canvas: {
-      openCanvasContextMenu: V,
-      openWidgetContextMenu: Z,
-      selectWidget: E,
-      startOptimisticFront: G,
-      commitFront: f,
-      commitMove: $,
-      commitResize: j,
+      openCanvasContextMenu: K,
+      openWidgetContextMenu: L,
+      selectWidget: V,
+      startOptimisticFront: J,
+      commitFront: m,
+      commitMove: Q,
+      commitResize: tt,
       commitViewport: I
     },
     hud: {
-      zoomIn: () => A("in"),
-      zoomOut: () => A("out")
+      zoomIn: () => O("in"),
+      zoomOut: () => O("out")
     },
     lock: {
-      toggle: v
+      toggle: et
     },
     filter: {
-      toggle: K,
-      solo: J,
-      showAll: Q
+      toggle: nt,
+      solo: it,
+      showAll: ot
     },
     navigation: {
       handleArrowNavigation: (t) => {
-        const e = ut(
-          g(),
-          w(),
+        const e = Wt(
+          u(),
+          p(),
           t,
-          T()
+          D()
         );
-        e && y(e);
+        e && W(e);
       },
-      centerOnWidget: b,
-      focusWidget: y
+      centerOnWidget: y,
+      focusWidget: W
     },
     widgetActions: {
       deleteSelected: () => {
-        const t = w();
-        t && S(t);
+        const t = p();
+        t && Y(t);
       },
-      deleteWidget: S,
-      addWidget: x,
-      addWidgetAtCursor: _,
-      addWidgetCentered: F
+      deleteWidget: Y,
+      addWidget: X,
+      addWidgetAtCursor: M,
+      addWidgetCentered: z,
+      ensureWidget: (t, e) => {
+        const n = k(t);
+        if (n)
+          return W(n, { centerViewport: e?.centerViewport ?? !0 });
+        const i = ct(), o = M(
+          t,
+          e?.worldX ?? i.worldX,
+          e?.worldY ?? i.worldY
+        );
+        return (e?.centerViewport ?? !0) && o && y(o), o;
+      }
+    },
+    queries: {
+      findWidgetByType: k,
+      findWidgetById: U
     },
     handleCloseRequest: () => {
-      if (u()) {
-        a();
+      if (f()) {
+        g();
         return;
       }
       c.onClose();
@@ -255,5 +280,5 @@ function Yt(c) {
   };
 }
 export {
-  Yt as useWorkbenchModel
+  At as useWorkbenchModel
 };

package/dist/components/workbench/widgets/widgetRegistry.d.ts

@@ -1,13 +1,14 @@
 import type { Component } from 'solid-js';
-import type { WorkbenchWidgetType } from '../types';
-export interface WidgetRegistryEntry {
-    type: WorkbenchWidgetType;
+import type { WorkbenchWidgetDefinition, WorkbenchWidgetType } from '../types';
+export interface WidgetRegistryEntry extends WorkbenchWidgetDefinition {
     label: string;
     icon: Component<{
         class?: string;
     }>;
-    body: Component;
     defaultTitle: string;
 }
 export declare const WIDGET_REGISTRY: readonly WidgetRegistryEntry[];
-export declare function getWidgetEntry(type: WorkbenchWidgetType): WidgetRegistryEntry;
+export declare function resolveWorkbenchWidgetDefinitions(widgetDefinitions?: readonly WorkbenchWidgetDefinition[]): readonly WorkbenchWidgetDefinition[];
+export declare function createWorkbenchFilterState(widgetDefinitions?: readonly WorkbenchWidgetDefinition[], filters?: Partial<Record<WorkbenchWidgetType, boolean>>): Record<WorkbenchWidgetType, boolean>;
+export declare function isValidWorkbenchWidgetType(type: unknown, widgetDefinitions?: readonly WorkbenchWidgetDefinition[]): type is WorkbenchWidgetType;
+export declare function getWidgetEntry(type: WorkbenchWidgetType, widgetDefinitions?: readonly WorkbenchWidgetDefinition[]): WorkbenchWidgetDefinition;

package/dist/components/workbench/widgets/widgetRegistry.js

@@ -1,50 +1,71 @@
-import { Terminal as i, Folder as r, Cpu as l, Activity as d, FileCode as m } from "../../icons/index.js";
-import { TerminalWidget as n } from "./TerminalWidget.js";
-import { FileBrowserWidget as y } from "./FileBrowserWidget.js";
-import { SystemMonitorWidget as a } from "./SystemMonitorWidget.js";
-import { LogViewerWidget as f } from "./LogViewerWidget.js";
-import { CodeEditorWidget as p } from "./CodeEditorWidget.js";
-const e = [
+import { Terminal as d, Folder as n, Cpu as a, Activity as f, FileCode as y } from "../../icons/index.js";
+import { TerminalWidget as m } from "./TerminalWidget.js";
+import { FileBrowserWidget as c } from "./FileBrowserWidget.js";
+import { SystemMonitorWidget as p } from "./SystemMonitorWidget.js";
+import { LogViewerWidget as u } from "./LogViewerWidget.js";
+import { CodeEditorWidget as h } from "./CodeEditorWidget.js";
+const g = [
   {
     type: "terminal",
     label: "Terminal",
-    icon: i,
-    body: n,
-    defaultTitle: "Terminal"
+    icon: d,
+    body: m,
+    defaultTitle: "Terminal",
+    defaultSize: { width: 480, height: 320 }
   },
   {
     type: "file-browser",
     label: "File Browser",
-    icon: r,
-    body: y,
-    defaultTitle: "File Browser"
+    icon: n,
+    body: c,
+    defaultTitle: "File Browser",
+    defaultSize: { width: 360, height: 400 }
   },
   {
     type: "system-monitor",
     label: "System Monitor",
-    icon: l,
-    body: a,
-    defaultTitle: "System Monitor"
+    icon: a,
+    body: p,
+    defaultTitle: "System Monitor",
+    defaultSize: { width: 340, height: 280 }
   },
   {
     type: "log-viewer",
     label: "Log Viewer",
-    icon: d,
-    body: f,
-    defaultTitle: "Log Viewer"
+    icon: f,
+    body: u,
+    defaultTitle: "Log Viewer",
+    defaultSize: { width: 500, height: 300 }
   },
   {
     type: "code-editor",
     label: "Code Editor",
-    icon: m,
-    body: p,
-    defaultTitle: "Code Editor"
+    icon: y,
+    body: h,
+    defaultTitle: "Code Editor",
+    defaultSize: { width: 520, height: 380 }
   }
 ];
-function w(o) {
-  return e.find((t) => t.type === o) ?? e[0];
+function l(e) {
+  return e && e.length > 0 ? e : g;
+}
+function E(e, t) {
+  const o = l(e), i = {};
+  for (const r of o)
+    i[r.type] = typeof t?.[r.type] == "boolean" ? !!t[r.type] : !0;
+  return i;
+}
+function F(e, t) {
+  return typeof e == "string" && l(t).some((o) => o.type === e);
+}
+function v(e, t) {
+  const o = l(t);
+  return o.find((i) => i.type === e) ?? o[0];
 }
 export {
-  e as WIDGET_REGISTRY,
-  w as getWidgetEntry
+  g as WIDGET_REGISTRY,
+  E as createWorkbenchFilterState,
+  v as getWidgetEntry,
+  F as isValidWorkbenchWidgetType,
+  l as resolveWorkbenchWidgetDefinitions
 };

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

@@ -1,9 +1,13 @@
-import { type WorkbenchState, type WorkbenchViewport, type WorkbenchWidgetItem, type WorkbenchWidgetType } from './types';
+import { type WorkbenchState, type WorkbenchViewport, type WorkbenchWidgetDefinition, type WorkbenchWidgetItem, type WorkbenchWidgetType } from './types';
 export declare function createWorkbenchId(): string;
 export declare function sanitizeViewport(viewport: Partial<WorkbenchViewport> | undefined): WorkbenchViewport;
-export declare function sanitizeFilters(filters: Partial<Record<WorkbenchWidgetType, boolean>> | undefined): Record<WorkbenchWidgetType, boolean>;
-export declare function sanitizeWorkbenchState(input: unknown): WorkbenchState;
-export declare function createDefaultWorkbenchState(): WorkbenchState;
+export declare function sanitizeFilters(filters: Partial<Record<WorkbenchWidgetType, boolean>> | undefined, widgetDefinitions?: readonly WorkbenchWidgetDefinition[]): Record<WorkbenchWidgetType, boolean>;
+export interface SanitizeWorkbenchStateOptions {
+    widgetDefinitions?: readonly WorkbenchWidgetDefinition[];
+    createFallbackState?: () => WorkbenchState;
+}
+export declare function sanitizeWorkbenchState(input: unknown, options?: SanitizeWorkbenchStateOptions): WorkbenchState;
+export declare function createDefaultWorkbenchState(widgetDefinitions?: readonly WorkbenchWidgetDefinition[]): WorkbenchState;
 export declare const WORKBENCH_CANVAS_ZOOM_STEP = 1.18;
 export declare const WORKBENCH_CONTEXT_MENU_WIDTH_PX = 200;
 export declare function createContextMenuPosition(options: {