@floegence/floe-webapp-core 0.35.58 → 0.36.0

package/dist/components/workbench/useWorkbenchModel.js

@@ -0,0 +1,259 @@
+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({
+      clientX: t.clientX,
+      clientY: t.clientY,
+      worldX: t.worldX,
+      worldY: t.worldY
+    });
+  }, Z = (t, e) => {
+    f(e.id), m({
+      clientX: t.clientX,
+      clientY: t.clientY,
+      worldX: e.x,
+      worldY: e.y,
+      widgetId: e.id
+    });
+  }, a = () => m(null), Y = d(() => {
+    const t = u();
+    if (!t) return [];
+    if (t.widgetId) {
+      const e = g().find((i) => i.id === t.widgetId), n = [];
+      return e && (n.push({
+        id: "bring-to-front",
+        kind: "action",
+        label: "Bring to Front",
+        icon: st,
+        onSelect: () => {
+          f(e.id), a();
+        }
+      }), n.push({
+        id: "duplicate",
+        kind: "action",
+        label: "Duplicate",
+        icon: dt,
+        onSelect: () => {
+          F(e.type, e.x + 32, e.y + 32), a();
+        }
+      })), n.push({ id: "separator-delete", kind: "separator" }), n.push({
+        id: "delete",
+        kind: "action",
+        label: "Delete",
+        icon: lt,
+        destructive: !0,
+        onSelect: () => {
+          t.widgetId && S(t.widgetId), a();
+        }
+      }), n;
+    }
+    return Wt.map((e) => ({
+      id: `add-${e.type}`,
+      kind: "action",
+      label: `Add ${e.label}`,
+      icon: e.icon,
+      onSelect: () => {
+        _(e.type, t.worldX, t.worldY), a();
+      }
+    }));
+  }), B = d(() => {
+    const t = u();
+    if (!t) return;
+    const e = Y(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
+    return gt({
+      clientX: t.clientX,
+      clientY: t.clientY,
+      menuWidth: ft,
+      menuHeight: wt(n, i)
+    });
+  }), x = (t, e, n) => {
+    const i = xt(t), o = R[t], s = {
+      id: ht(),
+      type: t,
+      title: i.defaultTitle,
+      x: e,
+      y: n,
+      width: o.width,
+      height: o.height,
+      z_index: W() + 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) => {
+    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);
+    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) => {
+    c.setState((n) => ({
+      ...n,
+      widgets: n.widgets.map(
+        (i) => i.id === t ? { ...i, x: e.x, y: e.y } : i
+      )
+    }));
+  }, j = (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 }));
+  }, 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
+    };
+    I(l);
+  }, v = () => {
+    c.setState((t) => ({ ...t, locked: !t.locked }));
+  }, K = (t) => {
+    c.setState((e) => ({
+      ...e,
+      filters: { ...e.filters, [t]: !e.filters[t] }
+    }));
+  }, J = (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 }
+    }));
+  }, E = (t) => {
+    c.setState((e) => ({ ...e, selectedWidgetId: t }));
+  };
+  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);
+      I({
+        x: o + (t - o) * C,
+        y: s + (e - s) * C,
+        scale: l + (n - l) * C
+      }), N < 1 && requestAnimationFrame(D);
+    };
+    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);
+  }, y = (t) => {
+    E(t.id), f(t.id), b(t);
+  };
+  return {
+    widgets: g,
+    viewport: h,
+    locked: P,
+    filters: T,
+    selectedWidgetId: w,
+    topZIndex: W,
+    scaleLabel: q,
+    optimisticFrontWidgetId: H,
+    setCanvasFrameRef: U,
+    contextMenu: {
+      state: u,
+      items: Y,
+      position: B,
+      close: a,
+      retarget: (t) => {
+        t.preventDefault(), t.stopPropagation(), m({
+          clientX: t.clientX,
+          clientY: t.clientY,
+          worldX: 0,
+          worldY: 0
+        });
+      }
+    },
+    canvas: {
+      openCanvasContextMenu: V,
+      openWidgetContextMenu: Z,
+      selectWidget: E,
+      startOptimisticFront: G,
+      commitFront: f,
+      commitMove: $,
+      commitResize: j,
+      commitViewport: I
+    },
+    hud: {
+      zoomIn: () => A("in"),
+      zoomOut: () => A("out")
+    },
+    lock: {
+      toggle: v
+    },
+    filter: {
+      toggle: K,
+      solo: J,
+      showAll: Q
+    },
+    navigation: {
+      handleArrowNavigation: (t) => {
+        const e = ut(
+          g(),
+          w(),
+          t,
+          T()
+        );
+        e && y(e);
+      },
+      centerOnWidget: b,
+      focusWidget: y
+    },
+    widgetActions: {
+      deleteSelected: () => {
+        const t = w();
+        t && S(t);
+      },
+      deleteWidget: S,
+      addWidget: x,
+      addWidgetAtCursor: _,
+      addWidgetCentered: F
+    },
+    handleCloseRequest: () => {
+      if (u()) {
+        a();
+        return;
+      }
+      c.onClose();
+    }
+  };
+}
+export {
+  Yt 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;

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

@@ -0,0 +1,142 @@
+import { insert as c, createComponent as r, template as g, memo as s, effect as h, setStyleProperty as k, delegateEvents as _ } from "solid-js/web";
+import { createSignal as v, For as u } from "solid-js";
+import { ChevronDown as p, ChevronRight as m, FolderOpen as x, Folder as $, FileCode as C } from "../../icons/index.js";
+var F = /* @__PURE__ */ g("<button type=button class=workbench-widget-filebrowser__row><span class=workbench-widget-filebrowser__icon></span><span class=workbench-widget-filebrowser__name>"), S = /* @__PURE__ */ g("<span class=workbench-widget-filebrowser__chev>"), T = /* @__PURE__ */ g("<span class=workbench-widget-filebrowser__chev aria-hidden=true>"), j = /* @__PURE__ */ g("<div class=workbench-widget-filebrowser><div class=workbench-widget-filebrowser__toolbar><span class=workbench-widget-filebrowser__path>~/projects/floe-webapp</span></div><div class=workbench-widget-filebrowser__tree>");
+const y = {
+  id: "root",
+  label: "floe-webapp",
+  kind: "folder",
+  children: [{
+    id: "src",
+    label: "src",
+    kind: "folder",
+    children: [{
+      id: "components",
+      label: "components",
+      kind: "folder",
+      children: [{
+        id: "app-tsx",
+        label: "App.tsx",
+        kind: "file"
+      }, {
+        id: "notes-tsx",
+        label: "NotesBoard.tsx",
+        kind: "file"
+      }, {
+        id: "workbench-tsx",
+        label: "WorkbenchOverlay.tsx",
+        kind: "file"
+      }]
+    }, {
+      id: "utils",
+      label: "utils",
+      kind: "folder",
+      children: [{
+        id: "animations",
+        label: "animations.ts",
+        kind: "file"
+      }, {
+        id: "cn",
+        label: "cn.ts",
+        kind: "file"
+      }]
+    }, {
+      id: "index",
+      label: "index.ts",
+      kind: "file"
+    }]
+  }, {
+    id: "public",
+    label: "public",
+    kind: "folder",
+    children: [{
+      id: "logo",
+      label: "logo.svg",
+      kind: "file"
+    }]
+  }, {
+    id: "pkgjson",
+    label: "package.json",
+    kind: "file"
+  }, {
+    id: "tsconfig",
+    label: "tsconfig.json",
+    kind: "file"
+  }]
+}, f = (n) => {
+  const i = () => n.node.kind === "folder", o = () => n.expanded.has(n.node.id);
+  return [(() => {
+    var e = F(), d = e.firstChild, t = d.nextSibling;
+    return e.$$click = () => {
+      i() && n.onToggle(n.node.id);
+    }, c(e, (() => {
+      var l = s(() => !!i());
+      return () => l() ? (() => {
+        var a = S();
+        return c(a, (() => {
+          var b = s(() => !!o());
+          return () => b() ? r(p, {
+            class: "w-3 h-3"
+          }) : r(m, {
+            class: "w-3 h-3"
+          });
+        })()), a;
+      })() : T();
+    })(), d), c(d, (() => {
+      var l = s(() => !!i());
+      return () => l() ? s(() => !!o())() ? r(x, {
+        class: "w-3.5 h-3.5"
+      }) : r($, {
+        class: "w-3.5 h-3.5"
+      }) : r(C, {
+        class: "w-3.5 h-3.5"
+      });
+    })()), c(t, () => n.node.label), h((l) => {
+      var a = !!i(), b = !!(i() && o()), w = `${n.depth * 14 + 8}px`;
+      return a !== l.e && e.classList.toggle("is-folder", l.e = a), b !== l.t && e.classList.toggle("is-open", l.t = b), w !== l.a && k(e, "padding-left", l.a = w), l;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), e;
+  })(), s(() => s(() => !!(i() && o() && n.node.children))() ? r(u, {
+    get each() {
+      return n.node.children;
+    },
+    children: (e) => r(f, {
+      node: e,
+      get depth() {
+        return n.depth + 1;
+      },
+      get expanded() {
+        return n.expanded;
+      },
+      get onToggle() {
+        return n.onToggle;
+      }
+    })
+  }) : null)];
+};
+function B() {
+  const [n, i] = v(/* @__PURE__ */ new Set(["root", "src", "components"])), o = (e) => {
+    i((d) => {
+      const t = new Set(d);
+      return t.has(e) ? t.delete(e) : t.add(e), t;
+    });
+  };
+  return (() => {
+    var e = j(), d = e.firstChild, t = d.nextSibling;
+    return c(t, r(f, {
+      node: y,
+      depth: 0,
+      get expanded() {
+        return n();
+      },
+      onToggle: o
+    })), e;
+  })();
+}
+_(["click"]);
+export {
+  B as FileBrowserWidget
+};

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

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

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

@@ -0,0 +1,86 @@
+import { insert as a, createComponent as _, effect as f, className as S, template as d } from "solid-js/web";
+import { createSignal as b, onMount as $, onCleanup as k, For as y } from "solid-js";
+var C = /* @__PURE__ */ d("<div class=workbench-widget-logviewer><div class=workbench-widget-logviewer__lines>"), L = /* @__PURE__ */ d("<div class=workbench-widget-logviewer__line><span class=workbench-widget-logviewer__ts></span><span></span><span class=workbench-widget-logviewer__msg>");
+const i = [{
+  level: "info",
+  message: "Request GET /api/health 200 (12ms)"
+}, {
+  level: "info",
+  message: "WebSocket ping/pong cycle OK (lat=38ms)"
+}, {
+  level: "info",
+  message: 'Scheduled job "rotate-keys" completed'
+}, {
+  level: "debug",
+  message: "Cache hit workbench:viewport -> fresh"
+}, {
+  level: "warn",
+  message: "Slow query detected (234ms) on notes.topics"
+}, {
+  level: "warn",
+  message: "Retry #2 for upstream call /v1/sync"
+}, {
+  level: "error",
+  message: "Connection timeout on retry 3"
+}, {
+  level: "info",
+  message: "Reconnected successfully after backoff"
+}, {
+  level: "info",
+  message: "Applied migration 0042_user_schema"
+}, {
+  level: "debug",
+  message: "GC pause 14ms (young)"
+}], M = 1100, w = 10;
+function p(s) {
+  const c = String(s.getHours()).padStart(2, "0"), g = String(s.getMinutes()).padStart(2, "0"), n = String(s.getSeconds()).padStart(2, "0");
+  return `${c}:${g}:${n}`;
+}
+function A() {
+  const s = (() => {
+    const t = /* @__PURE__ */ new Date();
+    return Array.from({
+      length: 6
+    }, (r, e) => {
+      const l = i[e * 3 % i.length], o = new Date(t.getTime() - (6 - e) * 4200);
+      return {
+        id: o.getTime() + e,
+        ts: p(o),
+        level: l.level,
+        message: l.message
+      };
+    });
+  })(), [c, g] = b(s);
+  let n = s.length, m;
+  const h = () => {
+    const t = i[n % i.length];
+    n += 1, g((r) => {
+      const e = [...r, {
+        id: n,
+        ts: p(/* @__PURE__ */ new Date()),
+        level: t.level,
+        message: t.message
+      }];
+      return e.length > w ? e.slice(e.length - w) : e;
+    });
+  };
+  return $(() => {
+    m = window.setInterval(h, M);
+  }), k(() => {
+    m !== void 0 && window.clearInterval(m);
+  }), (() => {
+    var t = C(), r = t.firstChild;
+    return a(r, _(y, {
+      get each() {
+        return c();
+      },
+      children: (e) => (() => {
+        var l = L(), o = l.firstChild, v = o.nextSibling, u = v.nextSibling;
+        return a(o, () => e.ts), a(v, () => e.level.toUpperCase()), a(u, () => e.message), f(() => S(v, `workbench-widget-logviewer__level workbench-widget-logviewer__level--${e.level}`)), l;
+      })()
+    })), t;
+  })();
+}
+export {
+  A as LogViewerWidget
+};

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

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