@floegence/floe-webapp-core 0.35.58 → 0.36.0

package/dist/components/workbench/WorkbenchSurface.js

@@ -0,0 +1,183 @@
+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),
+    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();
+        return;
+      }
+      const n = t.target;
+      if (!(n instanceof Element && x(n)))
+        switch (t.key) {
+          case "ArrowUp":
+            t.preventDefault(), e.navigation.handleArrowNavigation("up");
+            break;
+          case "ArrowDown":
+            t.preventDefault(), e.navigation.handleArrowNavigation("down");
+            break;
+          case "ArrowLeft":
+            t.preventDefault(), e.navigation.handleArrowNavigation("left");
+            break;
+          case "ArrowRight":
+            t.preventDefault(), e.navigation.handleArrowNavigation("right");
+            break;
+          case "Delete":
+          case "Backspace":
+            e.selectedWidgetId() && (t.preventDefault(), e.widgetActions.deleteSelected());
+            break;
+        }
+    };
+    document.addEventListener("keydown", o, !0), C(() => document.removeEventListener("keydown", o, !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)
+      return null;
+    const f = r - n.left, w = o - n.top, l = e.viewport();
+    return {
+      worldX: (f - l.x) / l.scale,
+      worldY: (w - l.y) / l.scale
+    };
+  }, m = (r, o, t) => {
+    const n = g(o, t);
+    n && e.widgetActions.addWidgetAtCursor(r, n.worldX, n.worldY);
+  };
+  return (() => {
+    var r = E(), o = r.firstChild;
+    return c(o, i(A, {
+      get widgets() {
+        return e.widgets();
+      },
+      get viewport() {
+        return e.viewport();
+      },
+      get selectedWidgetId() {
+        return e.selectedWidgetId();
+      },
+      get optimisticFrontWidgetId() {
+        return e.optimisticFrontWidgetId();
+      },
+      get topZIndex() {
+        return e.topZIndex();
+      },
+      get locked() {
+        return e.locked();
+      },
+      get filters() {
+        return e.filters();
+      },
+      get setCanvasFrameRef() {
+        return e.setCanvasFrameRef;
+      },
+      get onViewportCommit() {
+        return e.canvas.commitViewport;
+      },
+      get onCanvasContextMenu() {
+        return e.canvas.openCanvasContextMenu;
+      },
+      get onSelectWidget() {
+        return e.canvas.selectWidget;
+      },
+      get onWidgetContextMenu() {
+        return e.canvas.openWidgetContextMenu;
+      },
+      get onStartOptimisticFront() {
+        return e.canvas.startOptimisticFront;
+      },
+      get onCommitFront() {
+        return e.canvas.commitFront;
+      },
+      get onCommitMove() {
+        return e.canvas.commitMove;
+      },
+      get onCommitResize() {
+        return e.canvas.commitResize;
+      },
+      get onRequestDelete() {
+        return e.widgetActions.deleteWidget;
+      }
+    })), c(r, i(F, {
+      get locked() {
+        return e.locked();
+      },
+      get onToggle() {
+        return e.lock.toggle;
+      },
+      get shortcutLabel() {
+        return u() ?? void 0;
+      }
+    }), null), c(r, i(S, {
+      get widgets() {
+        return e.widgets();
+      },
+      get filters() {
+        return e.filters();
+      },
+      get onSoloFilter() {
+        return e.filter.solo;
+      },
+      get onShowAll() {
+        return e.filter.showAll;
+      },
+      onCreateAt: m
+    }), null), c(r, i(y, {
+      get scaleLabel() {
+        return e.scaleLabel();
+      },
+      get onZoomOut() {
+        return e.hud.zoomOut;
+      },
+      get onZoomIn() {
+        return e.hud.zoomIn;
+      }
+    }), null), c(r, i(W, {
+      get when() {
+        return e.contextMenu.state();
+      },
+      get children() {
+        return i(v, {
+          get children() {
+            return [(() => {
+              var t = L();
+              return s(t, "contextmenu", e.contextMenu.retarget, !0), s(t, "click", e.contextMenu.close, !0), t;
+            })(), i(M, {
+              get x() {
+                return e.contextMenu.position()?.left ?? 0;
+              },
+              get y() {
+                return e.contextMenu.position()?.top ?? 0;
+              },
+              get items() {
+                return e.contextMenu.items();
+              }
+            })];
+          }
+        });
+      }
+    }), null), h(() => p(r, `workbench-surface${a.class ? ` ${a.class}` : ""}`)), r;
+  })();
+}
+k(["click", "contextmenu"]);
+export {
+  U as WorkbenchSurface
+};

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

@@ -0,0 +1,25 @@
+import { type JSX } from 'solid-js';
+import type { WorkbenchWidgetItem } from './types';
+export interface WorkbenchWidgetProps {
+    item: WorkbenchWidgetItem;
+    selected: boolean;
+    optimisticFront: boolean;
+    topZIndex: number;
+    viewportScale: number;
+    locked: boolean;
+    filtered: boolean;
+    onSelect: (widgetId: string) => void;
+    onContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
+    onStartOptimisticFront: (widgetId: string) => void;
+    onCommitFront: (widgetId: string) => void;
+    onCommitMove: (widgetId: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onCommitResize: (widgetId: string, size: {
+        width: number;
+        height: number;
+    }) => void;
+    onRequestDelete: (widgetId: string) => void;
+}
+export declare function WorkbenchWidget(props: WorkbenchWidgetProps): JSX.Element;

package/dist/components/workbench/WorkbenchWidget.js

@@ -0,0 +1,183 @@
+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);
+  let g, w;
+  q(() => {
+    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
+    } : {
+      x: i.item.x,
+      y: i.item.y
+    };
+  }), X = y(() => {
+    const e = b();
+    return e ? {
+      width: e.width,
+      height: e.height
+    } : {
+      width: i.item.width,
+      height: i.item.height
+    };
+  }), z = (e) => {
+    const o = I(u);
+    if (!o) return;
+    const a = {
+      x: o.worldX,
+      y: o.worldY
+    }, 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({
+      kind: "drag",
+      cursor: "grabbing"
+    }), a = Math.max(i.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,
+      moved: !1,
+      scale: a,
+      stopInteraction: o
+    });
+    const r = (t) => {
+      x((n) => {
+        if (!n || n.pointerId !== t.pointerId) return n;
+        const c = n.startWorldX + (t.clientX - n.startClientX) / n.scale, h = n.startWorldY + (t.clientY - n.startClientY) / n.scale;
+        return {
+          ...n,
+          worldX: c,
+          worldY: h,
+          moved: n.moved || Math.abs(c - n.startWorldX) > 2 || Math.abs(h - n.startWorldY) > 2
+        };
+      });
+    }, d = (t) => {
+      t.pointerId === e.pointerId && z(!0);
+    }, s = (t) => {
+      t.pointerId === e.pointerId && z(!1);
+    }, l = new AbortController();
+    g = l, window.addEventListener("pointermove", r, {
+      signal: l.signal
+    }), window.addEventListener("pointerup", d, {
+      once: !0,
+      signal: l.signal
+    }), window.addEventListener("pointercancel", s, {
+      once: !0,
+      signal: l.signal
+    });
+  }, S = (e) => {
+    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({
+      kind: "drag",
+      cursor: "nwse-resize"
+    }), a = Math.max(i.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,
+      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);
+        return {
+          ...n,
+          width: c,
+          height: h
+        };
+      });
+    }, d = (t) => {
+      t.pointerId === e.pointerId && S(!0);
+    }, s = (t) => {
+      t.pointerId === e.pointerId && S(!1);
+    }, l = new AbortController();
+    w = l, window.addEventListener("pointermove", r, {
+      signal: l.signal
+    }), window.addEventListener("pointerup", d, {
+      once: !0,
+      signal: l.signal
+    }), window.addEventListener("pointercancel", s, {
+      once: !0,
+      signal: l.signal
+    });
+  };
+  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, {
+      class: "w-3.5 h-3.5"
+    })), m(r, () => {
+      const t = M().icon;
+      return v(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, {
+      class: "w-3 h-3"
+    })), m(l, () => {
+      const t = M().body;
+      return v(t, {});
+    }), m(e, (() => {
+      var t = G(() => !!i.locked);
+      return () => t() ? null : (() => {
+        var n = K();
+        return n.$$pointerdown = B, 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;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0
+    }), e;
+  })();
+}
+T(["contextmenu", "click", "pointerdown"]);
+export {
+  ot as WorkbenchWidget
+};

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

@@ -0,0 +1,7 @@
+export { WorkbenchOverlay, type WorkbenchOverlayProps, } from './WorkbenchOverlay';
+export { WorkbenchSurface, 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 * from './types';
+export { sanitizeWorkbenchState, createDefaultWorkbenchState, createWorkbenchId, } from './workbenchHelpers';

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

@@ -0,0 +1,39 @@
+export type WorkbenchWidgetType = 'terminal' | 'file-browser' | 'system-monitor' | 'log-viewer' | 'code-editor';
+export declare const WORKBENCH_WIDGET_TYPES: readonly WorkbenchWidgetType[];
+export interface WorkbenchWidgetItem {
+    id: string;
+    type: WorkbenchWidgetType;
+    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 {
+    version: 1;
+    widgets: WorkbenchWidgetItem[];
+    viewport: WorkbenchViewport;
+    locked: boolean;
+    filters: Record<WorkbenchWidgetType, boolean>;
+    selectedWidgetId: string | null;
+}
+export interface WorkbenchContextMenuState {
+    clientX: number;
+    clientY: number;
+    worldX: number;
+    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

@@ -0,0 +1,25 @@
+const e = [
+  "terminal",
+  "file-browser",
+  "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
+};
+export {
+  r as DEFAULT_FILTERS,
+  t as DEFAULT_WIDGET_DIMENSIONS,
+  i as DEFAULT_WORKBENCH_VIEWPORT,
+  e as WORKBENCH_WIDGET_TYPES
+};

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

@@ -0,0 +1,70 @@
+import type { InfiniteCanvasContextMenuEvent } from '../../ui';
+import { 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;
+}
+export declare function useWorkbenchModel(options: UseWorkbenchModelOptions): {
+    widgets: import("solid-js").Accessor<WorkbenchWidgetItem[]>;
+    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>;
+    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) => void;
+    };
+    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;
+    };
+    handleCloseRequest: () => void;
+};