@floegence/floe-webapp-core 0.35.59 → 0.36.1

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

@@ -0,0 +1,56 @@
+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 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: TWidgetType;
+    title: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    z_index: number;
+    created_at_unix_ms: number;
+}
+export interface WorkbenchViewport {
+    x: number;
+    y: number;
+    scale: number;
+}
+export interface WorkbenchState<TWidgetType extends string = WorkbenchWidgetType> {
+    version: 1;
+    widgets: WorkbenchWidgetItem<TWidgetType>[];
+    viewport: WorkbenchViewport;
+    locked: boolean;
+    filters: Record<TWidgetType, boolean>;
+    selectedWidgetId: string | null;
+}
+export interface WorkbenchContextMenuState {
+    clientX: number;
+    clientY: number;
+    worldX: number;
+    worldY: number;
+    widgetId?: string | null;
+}
+export declare const DEFAULT_WORKBENCH_VIEWPORT: WorkbenchViewport;

package/dist/components/workbench/types.js

@@ -0,0 +1,11 @@
+const e = [
+  "terminal",
+  "file-browser",
+  "system-monitor",
+  "log-viewer",
+  "code-editor"
+], o = { x: 80, y: 60, scale: 1 };
+export {
+  o as DEFAULT_WORKBENCH_VIEWPORT,
+  e as WORKBENCH_WIDGET_TYPES
+};

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

@@ -0,0 +1,83 @@
+import type { InfiniteCanvasContextMenuEvent } from '../../ui';
+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<WorkbenchWidgetType>[]>;
+    viewport: import("solid-js").Accessor<WorkbenchViewport>;
+    locked: import("solid-js").Accessor<boolean>;
+    filters: import("solid-js").Accessor<Record<WorkbenchWidgetType, boolean>>;
+    selectedWidgetId: import("solid-js").Accessor<string | null>;
+    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>;
+        items: import("solid-js").Accessor<WorkbenchContextMenuItem[]>;
+        position: import("solid-js").Accessor<{
+            left: number;
+            top: number;
+        } | undefined>;
+        close: () => null;
+        retarget: (event: MouseEvent) => void;
+    };
+    canvas: {
+        openCanvasContextMenu: (event: InfiniteCanvasContextMenuEvent) => void;
+        openWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
+        selectWidget: (widgetId: string) => void;
+        startOptimisticFront: (widgetId: string) => void;
+        commitFront: (widgetId: string) => void;
+        commitMove: (widgetId: string, position: {
+            x: number;
+            y: number;
+        }) => void;
+        commitResize: (widgetId: string, size: {
+            width: number;
+            height: number;
+        }) => void;
+        commitViewport: (next: WorkbenchViewport) => void;
+    };
+    hud: {
+        zoomIn: () => void;
+        zoomOut: () => void;
+    };
+    lock: {
+        toggle: () => void;
+    };
+    filter: {
+        toggle: (type: WorkbenchWidgetType) => void;
+        solo: (type: WorkbenchWidgetType) => void;
+        showAll: () => void;
+    };
+    navigation: {
+        handleArrowNavigation: (direction: "up" | "down" | "left" | "right") => void;
+        centerOnWidget: (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<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;
+};

package/dist/components/workbench/useWorkbenchModel.js

@@ -0,0 +1,284 @@
+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
+    });
+  }, L = (t, e) => {
+    m(e.id), w({
+      clientX: t.clientX,
+      clientY: t.clientY,
+      worldX: e.x,
+      worldY: e.y,
+      widgetId: e.id
+    });
+  }, 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 = u().find((i) => i.id === t.widgetId), n = [];
+      return e && (n.push({
+        id: "bring-to-front",
+        kind: "action",
+        label: "Bring to Front",
+        icon: gt,
+        onSelect: () => {
+          m(e.id), g();
+        }
+      }), n.push({
+        id: "duplicate",
+        kind: "action",
+        label: "Duplicate",
+        icon: ut,
+        onSelect: () => {
+          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: ht,
+        destructive: !0,
+        onSelect: () => {
+          t.widgetId && Y(t.widgetId), g();
+        }
+      }), n;
+    }
+    return h().map((e) => ({
+      id: `add-${e.type}`,
+      kind: "action",
+      label: `Add ${e.label}`,
+      icon: e.icon,
+      onSelect: () => {
+        M(e.type, t.worldX, t.worldY), g();
+      }
+    }));
+  }), G = s(() => {
+    const t = f();
+    if (!t) return;
+    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: St,
+      menuHeight: pt(n, i)
+    });
+  }), 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: d.width,
+      height: d.height,
+      z_index: C() + 1,
+      created_at_unix_ms: Date.now()
+    };
+    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
+    }));
+  }, 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
+      )
+    }));
+  }, Q = (t, e) => {
+    c.setState((n) => ({
+      ...n,
+      widgets: n.widgets.map(
+        (i) => i.id === t ? { ...i, x: e.x, y: e.y } : i
+      )
+    }));
+  }, tt = (t, e) => {
+    c.setState((n) => ({
+      ...n,
+      widgets: n.widgets.map(
+        (i) => i.id === t ? { ...i, width: e.width, height: e.height } : i
+      )
+    }));
+  }, I = (t) => {
+    c.setState((e) => ({ ...e, viewport: t }));
+  }, 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(r);
+  }, et = () => {
+    c.setState((t) => ({ ...t, locked: !t.locked }));
+  }, nt = (t) => {
+    c.setState((e) => ({
+      ...e,
+      filters: { ...e.filters, [t]: !e.filters[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 };
+    });
+  }, ot = () => {
+    const t = kt(h());
+    c.setState((e) => ({
+      ...e,
+      filters: 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 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) * b,
+        y: d + (e - d) * b,
+        scale: r + (n - r) * b
+      }), H < 1 && requestAnimationFrame(E);
+    };
+    requestAnimationFrame(E);
+  }, y = (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: u,
+    viewport: a,
+    locked: v,
+    filters: D,
+    selectedWidgetId: p,
+    topZIndex: C,
+    scaleLabel: Z,
+    optimisticFrontWidgetId: B,
+    widgetDefinitions: h,
+    setCanvasFrameRef: j,
+    contextMenu: {
+      state: f,
+      items: T,
+      position: G,
+      close: g,
+      retarget: (t) => {
+        t.preventDefault(), t.stopPropagation(), w({
+          clientX: t.clientX,
+          clientY: t.clientY,
+          worldX: 0,
+          worldY: 0
+        });
+      }
+    },
+    canvas: {
+      openCanvasContextMenu: K,
+      openWidgetContextMenu: L,
+      selectWidget: V,
+      startOptimisticFront: J,
+      commitFront: m,
+      commitMove: Q,
+      commitResize: tt,
+      commitViewport: I
+    },
+    hud: {
+      zoomIn: () => O("in"),
+      zoomOut: () => O("out")
+    },
+    lock: {
+      toggle: et
+    },
+    filter: {
+      toggle: nt,
+      solo: it,
+      showAll: ot
+    },
+    navigation: {
+      handleArrowNavigation: (t) => {
+        const e = Wt(
+          u(),
+          p(),
+          t,
+          D()
+        );
+        e && W(e);
+      },
+      centerOnWidget: y,
+      focusWidget: W
+    },
+    widgetActions: {
+      deleteSelected: () => {
+        const t = p();
+        t && Y(t);
+      },
+      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 (f()) {
+        g();
+        return;
+      }
+      c.onClose();
+    }
+  };
+}
+export {
+  At as useWorkbenchModel
+};

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

@@ -0,0 +1 @@
+export declare function CodeEditorWidget(): import("solid-js").JSX.Element;

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

@@ -0,0 +1,144 @@
+import { insert as e, createComponent as d, effect as k, className as m, memo as w, template as o } from "solid-js/web";
+import { For as l } from "solid-js";
+var g = /* @__PURE__ */ o("<div class=workbench-widget-codeeditor><div class=workbench-widget-codeeditor__gutter></div><div class=workbench-widget-codeeditor__code>"), p = /* @__PURE__ */ o("<span>"), h = /* @__PURE__ */ o("<div class=workbench-widget-codeeditor__line>"), v = /* @__PURE__ */ o("<span class=workbench-widget-codeeditor__caret aria-hidden=true>");
+const u = [{
+  tokens: [{
+    kind: "comment",
+    text: "// workbench counter demo"
+  }]
+}, {
+  tokens: [{
+    kind: "keyword",
+    text: "import"
+  }, {
+    kind: "plain",
+    text: " { createSignal } "
+  }, {
+    kind: "keyword",
+    text: "from"
+  }, {
+    kind: "string",
+    text: " 'solid-js'"
+  }, {
+    kind: "plain",
+    text: ";"
+  }]
+}, {
+  tokens: []
+}, {
+  tokens: [{
+    kind: "keyword",
+    text: "export function "
+  }, {
+    kind: "fn",
+    text: "Counter"
+  }, {
+    kind: "plain",
+    text: "() {"
+  }]
+}, {
+  tokens: [{
+    kind: "plain",
+    text: "  "
+  }, {
+    kind: "keyword",
+    text: "const"
+  }, {
+    kind: "plain",
+    text: " [count, setCount] = "
+  }, {
+    kind: "fn",
+    text: "createSignal"
+  }, {
+    kind: "plain",
+    text: "("
+  }, {
+    kind: "number",
+    text: "0"
+  }, {
+    kind: "plain",
+    text: ");"
+  }]
+}, {
+  tokens: []
+}, {
+  tokens: [{
+    kind: "plain",
+    text: "  "
+  }, {
+    kind: "keyword",
+    text: "return"
+  }, {
+    kind: "plain",
+    text: " ("
+  }]
+}, {
+  tokens: [{
+    kind: "plain",
+    text: "    <button "
+  }, {
+    kind: "attr",
+    text: "onClick"
+  }, {
+    kind: "plain",
+    text: "={() => setCount(c => c + "
+  }, {
+    kind: "number",
+    text: "1"
+  }, {
+    kind: "plain",
+    text: ")}>"
+  }]
+}, {
+  tokens: [{
+    kind: "plain",
+    text: "      Count: {count()}"
+  }]
+}, {
+  tokens: [{
+    kind: "plain",
+    text: "    </button>"
+  }]
+}, {
+  tokens: [{
+    kind: "plain",
+    text: "  );"
+  }]
+}, {
+  tokens: [{
+    kind: "plain",
+    text: "}"
+  }]
+}], a = 4;
+function f() {
+  return (() => {
+    var c = g(), s = c.firstChild, _ = s.nextSibling;
+    return e(s, d(l, {
+      each: u,
+      children: (x, n) => (() => {
+        var t = p();
+        return e(t, () => n() + 1), k(() => t.classList.toggle("is-active", n() === a)), t;
+      })()
+    })), e(_, d(l, {
+      each: u,
+      children: (x, n) => (() => {
+        var t = h();
+        return e(t, d(l, {
+          get each() {
+            return x.tokens;
+          },
+          children: (i) => (() => {
+            var r = p();
+            return e(r, () => i.text), k(() => m(r, `workbench-widget-codeeditor__${i.kind}`)), r;
+          })()
+        }), null), e(t, (() => {
+          var i = w(() => n() === a);
+          return () => i() ? v() : null;
+        })(), null), k(() => t.classList.toggle("is-active", n() === a)), t;
+      })()
+    })), c;
+  })();
+}
+export {
+  f as CodeEditorWidget
+};

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

@@ -0,0 +1 @@
+export declare function FileBrowserWidget(): import("solid-js").JSX.Element;