@floegence/floe-webapp-core 0.82.1 → 0.83.1

package/dist/components/graph/GraphCanvas.d.ts

@@ -0,0 +1,27 @@
+import { type JSX } from 'solid-js';
+import type { GraphLayout, GraphLayoutNode, GraphObjectEvent, GraphObjectRef, GraphViewport } from './types';
+export interface GraphNodeRenderContext {
+    selected: () => boolean;
+    /** Use on a touch-accessible menu trigger; floating UI remains host-owned. */
+    openMenu: (event: MouseEvent) => void;
+}
+export interface GraphCanvasProps {
+    layout: GraphLayout;
+    viewport: GraphViewport;
+    onViewportChange: (viewport: GraphViewport) => void;
+    ariaLabel: string;
+    renderNode: (node: GraphLayoutNode, context: GraphNodeRenderContext) => JSX.Element;
+    renderGroup?: (node: GraphLayoutNode, context: GraphNodeRenderContext) => JSX.Element;
+    selected?: GraphObjectRef | null;
+    /** Undefined follows pointer/focus. Null explicitly clears highlighting. */
+    highlight?: GraphObjectRef | null;
+    onActivate?: (event: GraphObjectEvent) => void;
+    onContextMenu?: (event: GraphObjectEvent) => void;
+    onHover?: (object: GraphObjectRef | null) => void;
+    onInteractionStart?: () => void;
+    /** Overlay content should use shared SurfaceFloatingLayer for point placement. */
+    overlay?: JSX.Element;
+    class?: string;
+}
+/** Controlled graph surface. Hosts own documents and selection; Floe owns geometry and input. */
+export declare function GraphCanvas(props: GraphCanvasProps): JSX.Element;

package/dist/components/graph/GraphCanvas.js

@@ -0,0 +1,178 @@
+import { insert as w, createComponent as y, setAttribute as c, effect as C, className as N, template as M, memo as Q, setStyleProperty as E, use as Z, delegateEvents as p } from "solid-js/web";
+import { createUniqueId as ee, createSignal as V, createMemo as k, onMount as te, For as P, Show as ne, onCleanup as re } from "solid-js";
+import { InfiniteCanvas as ae } from "../ui/InfiniteCanvas.js";
+import { resolveSurfaceInteractionTargetRole as ie } from "../ui/localInteractionSurface.js";
+import { graphRelatedEdges as B, graphSectionPath as oe } from "./geometry.js";
+var le = /* @__PURE__ */ M("<div data-floe-canvas-pan-surface=true role=group tabindex=0>"), ce = /* @__PURE__ */ M("<div role=region tabindex=0>"), de = /* @__PURE__ */ M('<svg class=floe-graph__edges width=1 height=1><defs><marker viewBox="0 0 8 8"refX=7 refY=4 markerWidth=7 markerHeight=7 orient=auto-start-reverse><path d="M1 1 L7 4 L1 7"fill=none stroke=context-stroke stroke-width=1.2>'), ue = /* @__PURE__ */ M("<svg><g><path class=floe-graph__edge></path><path class=floe-graph__edge-target tabindex=0 role=button data-floe-canvas-pan-surface=true></svg>", !1, !0, !1);
+function me(i) {
+  const T = `graph-arrow-${ee()}`;
+  let u;
+  const [F, W] = V(null), [q, K] = V({
+    width: 0,
+    height: 0
+  }), A = () => i.highlight === void 0 ? F() : i.highlight, O = k(() => new Map(i.layout.nodes.map((e) => [e.id, e]))), U = k(() => {
+    const e = A();
+    return e?.kind === "node" ? B(i.layout, e.id) : new Set(e ? [e.id] : []);
+  }), R = k(() => {
+    const e = A();
+    if (e?.kind !== "node") return null;
+    const t = O().get(e.id), r = t?.kind === "group" ? t.id : t?.parentId;
+    return r ? B(i.layout, r) : null;
+  }), S = (e) => i.selected?.kind === e.kind && i.selected.id === e.id, J = (e) => {
+    const {
+      width: t,
+      height: r
+    } = q();
+    if (!t || !r) return i.layout.nodes;
+    const a = -e.x / e.scale - 240, n = -e.y / e.scale - 240, x = a + t / e.scale + 480, l = n + r / e.scale + 480;
+    return i.layout.nodes.filter((d) => d.id === i.selected?.id || d.x + d.width >= a && d.x <= x && d.y + d.height >= n && d.y <= l);
+  }, s = (e) => {
+    W(e), i.onHover?.(e);
+  }, m = (e, t, r) => {
+    const a = t.getBoundingClientRect();
+    return {
+      object: e,
+      owner: t,
+      position: r && (r.clientX !== 0 || r.clientY !== 0) ? {
+        x: r.clientX,
+        y: r.clientY
+      } : {
+        x: a.left + a.width / 2,
+        y: a.top + Math.min(32, a.height / 2)
+      }
+    };
+  }, L = (e, t) => {
+    i.onContextMenu && (t.preventDefault(), t.stopPropagation(), i.onContextMenu(m(e, t.currentTarget, t)));
+  }, _ = (e, t) => {
+    t.target === t.currentTarget && (t.key === "ContextMenu" || t.shiftKey && t.key === "F10" ? (t.preventDefault(), t.stopPropagation(), i.onContextMenu?.(m(e, t.currentTarget))) : t.key === "Enter" ? (t.preventDefault(), t.stopPropagation(), i.onActivate?.(m(e, t.currentTarget))) : t.key === "Escape" && (s(null), i.onActivate?.(m(null, u))));
+  };
+  te(() => {
+    if (!u) return;
+    const e = () => K({
+      width: u.clientWidth,
+      height: u.clientHeight
+    });
+    e();
+    const t = new ResizeObserver(e);
+    t.observe(u), re(() => t.disconnect());
+  });
+  const j = (e) => {
+    const t = {
+      kind: "node",
+      id: e.id
+    }, r = {
+      selected: () => S(t),
+      openMenu: (a) => L(t, a)
+    };
+    return (() => {
+      var a = le();
+      return a.$$keydown = (n) => _(t, n), a.$$contextmenu = (n) => L(t, n), a.$$click = (n) => {
+        n.target.closest("button, a, input, select, textarea, [data-floe-canvas-interactive]") || (n.stopPropagation(), i.onActivate?.(m(t, n.currentTarget, n)));
+      }, a.$$focusout = () => s(null), a.$$focusin = () => s(t), a.addEventListener("pointerleave", () => s(null)), a.addEventListener("pointerenter", () => s(t)), w(a, (() => {
+        var n = Q(() => !!(e.kind === "group" && i.renderGroup));
+        return () => n() ? i.renderGroup(e, r) : i.renderNode(e, r);
+      })()), C((n) => {
+        var x = e.kind === "group" ? "floe-graph__group" : "floe-graph__node", l = e.id, d = S(t), $ = `${e.x}px`, h = `${e.y}px`, g = `${e.width}px`, b = `${e.height}px`, v = e.label;
+        return x !== n.e && N(a, n.e = x), l !== n.t && c(a, "data-graph-object", n.t = l), d !== n.a && c(a, "data-selected", n.a = d), $ !== n.o && E(a, "left", n.o = $), h !== n.i && E(a, "top", n.i = h), g !== n.n && E(a, "width", n.n = g), b !== n.s && E(a, "height", n.s = b), v !== n.h && c(a, "aria-label", n.h = v), n;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0,
+        s: void 0,
+        h: void 0
+      }), a;
+    })();
+  };
+  return (() => {
+    var e = ce();
+    e.$$keydown = (r) => _(null, r);
+    var t = u;
+    return typeof t == "function" ? Z(t, e) : u = e, w(e, y(ae, {
+      get viewport() {
+        return i.viewport;
+      },
+      minScale: 0.1,
+      maxScale: 3,
+      get ariaLabel() {
+        return i.ariaLabel;
+      },
+      get onViewportChange() {
+        return i.onViewportChange;
+      },
+      onViewportInteractionStart: () => i.onInteractionStart?.(),
+      resolveTargetRole: (r) => (r.target instanceof Element ? r.target : null)?.closest('button, a, input, select, textarea, [data-floe-canvas-interactive="true"]') ? "local_surface" : ie(r),
+      onCanvasPointerDown: (r) => {
+        !(r.target instanceof Element) || r.target.closest("[data-graph-object]") || i.onActivate?.(m(null, u, r));
+      },
+      onCanvasContextMenu: (r) => i.onContextMenu?.({
+        object: null,
+        owner: u,
+        position: {
+          x: r.clientX,
+          y: r.clientY
+        }
+      }),
+      children: (r) => {
+        const a = k(() => J(r())), n = k(() => a().filter((l) => l.kind === "group")), x = k(() => a().filter((l) => l.kind !== "group"));
+        return [y(P, {
+          get each() {
+            return n();
+          },
+          children: j
+        }), (() => {
+          var l = de(), d = l.firstChild, $ = d.firstChild;
+          return c($, "id", T), w(l, y(P, {
+            get each() {
+              return i.layout.edges;
+            },
+            children: (h) => {
+              const g = {
+                kind: "edge",
+                id: h.id
+              }, b = () => h.sections.map(oe).join(" ");
+              return y(ne, {
+                get when() {
+                  return !R() || R().has(h.id);
+                },
+                get children() {
+                  var v = ue(), I = v.firstChild, f = I.nextSibling;
+                  return c(I, "marker-end", `url(#${T})`), f.$$keydown = (o) => _(g, o), f.$$contextmenu = (o) => L(g, o), f.$$click = (o) => {
+                    o.stopPropagation(), i.onActivate?.(m(g, o.currentTarget, o));
+                  }, f.addEventListener("blur", () => s(null)), f.addEventListener("focus", () => s(g)), f.addEventListener("pointerleave", () => s(null)), f.addEventListener("pointerenter", () => s(g)), C((o) => {
+                    var z = h.id, D = U().has(h.id), H = S(g), X = b(), Y = b(), G = h.label;
+                    return z !== o.e && c(v, "data-graph-object", o.e = z), D !== o.t && c(v, "data-emphasized", o.t = D), H !== o.a && c(v, "data-selected", o.a = H), X !== o.o && c(I, "d", o.o = X), Y !== o.i && c(f, "d", o.i = Y), G !== o.n && c(f, "aria-label", o.n = G), o;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0,
+                    o: void 0,
+                    i: void 0,
+                    n: void 0
+                  }), v;
+                }
+              });
+            }
+          }), null), C(() => c(l, "aria-label", i.ariaLabel)), l;
+        })(), y(P, {
+          get each() {
+            return x();
+          },
+          children: j
+        })];
+      }
+    }), null), w(e, () => i.overlay, null), C((r) => {
+      var a = `floe-graph ${i.class ?? ""}`, n = i.ariaLabel;
+      return a !== r.e && N(e, r.e = a), n !== r.t && c(e, "aria-label", r.t = n), r;
+    }, {
+      e: void 0,
+      t: void 0
+    }), e;
+  })();
+}
+p(["focusin", "focusout", "click", "contextmenu", "keydown"]);
+export {
+  me as GraphCanvas
+};

package/dist/components/graph/engine.d.ts

@@ -0,0 +1,7 @@
+import type { GraphInput, GraphLayout, GraphLayoutOptions } from './types';
+export interface GraphLayoutEngine {
+    layout(input: GraphInput, options?: GraphLayoutOptions): Promise<GraphLayout>;
+    dispose(): void;
+}
+/** One worker per mounted graph. Dispose on unmount; failures are never hidden. */
+export declare function createGraphLayoutEngine(): GraphLayoutEngine;

package/dist/components/graph/engine.js

@@ -0,0 +1,35 @@
+import m from "../../_virtual/elk-api.js";
+import { computeGraphLayout as u } from "./layout.js";
+function c() {
+  const r = new Worker(new URL(
+    /* @vite-ignore */
+    "" + new URL("../../assets/elk-worker-CrDP6jPz.js", import.meta.url).href,
+    import.meta.url
+  ), { type: "module" }), p = new m({ workerFactory: () => r });
+  let o;
+  const t = /* @__PURE__ */ new Set(), n = (e) => {
+    o = e, r.terminate();
+    for (const a of t) a.reject(e);
+    t.clear();
+  };
+  return r.addEventListener(
+    "error",
+    (e) => n(new Error(e.message || "Graph layout worker failed"))
+  ), r.addEventListener(
+    "messageerror",
+    () => n(new Error("Invalid graph layout worker response"))
+  ), {
+    layout(e, a) {
+      return o ? Promise.reject(o) : new Promise((l, s) => {
+        const i = { reject: s };
+        t.add(i), u(e, a ?? {}, p).then(l, s).finally(() => t.delete(i));
+      });
+    },
+    dispose() {
+      n(new Error("Graph layout engine disposed"));
+    }
+  };
+}
+export {
+  c as createGraphLayoutEngine
+};

package/dist/components/graph/geometry.d.ts

@@ -0,0 +1,8 @@
+import type { GraphBounds, GraphLayout, GraphPoint, GraphViewport } from './types';
+export declare function graphSectionPath(points: readonly GraphPoint[]): string;
+export declare function fitGraphViewport(bounds: GraphBounds, size: {
+    width: number;
+    height: number;
+}, padding?: number): GraphViewport;
+/** Includes descendants so highlighting a group traces all of its direct routes. */
+export declare function graphRelatedEdges(layout: GraphLayout, nodeId: string): ReadonlySet<string>;

package/dist/components/graph/geometry.js

@@ -0,0 +1,35 @@
+function c(t) {
+  return t.map((h, a) => `${a ? "L" : "M"}${h.x},${h.y}`).join(" ");
+}
+function o(t, h, a = 48) {
+  const i = Math.max(
+    0.1,
+    Math.min(
+      1,
+      (h.width - a * 2) / Math.max(1, t.width),
+      (h.height - a * 2) / Math.max(1, t.height)
+    )
+  );
+  return {
+    x: (h.width - t.width * i) / 2 - t.x * i,
+    y: (h.height - t.height * i) / 2 - t.y * i,
+    scale: i
+  };
+}
+function f(t, h) {
+  const a = /* @__PURE__ */ new Set([h]), i = /* @__PURE__ */ new Map();
+  for (const e of t.nodes)
+    e.parentId && i.set(e.parentId, [...i.get(e.parentId) ?? [], e.id]);
+  const n = (e) => {
+    for (const r of i.get(e) ?? [])
+      a.has(r) || (a.add(r), n(r));
+  };
+  return n(h), new Set(
+    t.edges.filter((e) => a.has(e.source) || a.has(e.target)).map((e) => e.id)
+  );
+}
+export {
+  o as fitGraphViewport,
+  f as graphRelatedEdges,
+  c as graphSectionPath
+};

package/dist/components/graph/layout.d.ts

@@ -0,0 +1,5 @@
+import type { ELK } from 'elkjs/lib/elk-api';
+import type { GraphInput, GraphLayout, GraphLayoutOptions } from './types';
+export declare function validateGraphInput(input: GraphInput): void;
+/** Normalizes geometry around the supplied ELK engine; browser layout runs in its worker. */
+export declare function computeGraphLayout(input: GraphInput, options: GraphLayoutOptions, engine: Pick<ELK, 'layout'>): Promise<GraphLayout>;

package/dist/components/graph/layout.js

@@ -0,0 +1,121 @@
+function k(n) {
+  const i = /* @__PURE__ */ new Set(), p = (e) => {
+    if (!e || i.has(e)) throw new Error(`Duplicate or empty graph ID: ${e}`);
+    i.add(e);
+  }, s = new Map(n.nodes.map((e) => [e.id, e]));
+  for (const e of n.nodes) {
+    if (p(e.id), ![e.width, e.height].every((r) => Number.isFinite(r) && r > 0))
+      throw new Error(`Invalid dimensions for graph node: ${e.id}`);
+    for (const r of e.ports ?? []) p(r.id);
+    const a = /* @__PURE__ */ new Set([e.id]);
+    let d = e.parentId;
+    for (; d !== void 0; ) {
+      const r = s.get(d);
+      if (!r || r.kind !== "group")
+        throw new Error(`Invalid parent for graph node: ${e.id}`);
+      if (a.has(d)) throw new Error(`Cyclic graph containment: ${e.id}`);
+      a.add(d), d = r.parentId;
+    }
+  }
+  for (const e of n.edges) {
+    p(e.id);
+    for (const [a, d] of [
+      [e.source, e.sourcePort],
+      [e.target, e.targetPort]
+    ]) {
+      const r = s.get(a);
+      if (!r || d !== void 0 && !r.ports?.some((c) => c.id === d))
+        throw new Error(`Invalid endpoint for graph edge: ${e.id}`);
+    }
+  }
+}
+async function N(n, i, p) {
+  k(n);
+  const s = i.groupPadding ?? { top: 64, right: 28, bottom: 28, left: 28 };
+  if (![...Object.values(s), i.spacing ?? 64].every((t) => Number.isFinite(t) && t >= 0))
+    throw new Error("Graph layout spacing must be finite and nonnegative");
+  const e = /* @__PURE__ */ new Map();
+  for (const t of n.nodes)
+    e.set(t.id, {
+      id: t.id,
+      width: t.width,
+      height: t.height,
+      ...t.kind === "group" ? { children: [] } : {},
+      ports: t.ports?.map((o) => ({
+        id: o.id,
+        width: 1,
+        height: 1,
+        layoutOptions: { "elk.port.side": o.side }
+      })),
+      layoutOptions: {
+        "elk.portConstraints": "FIXED_ORDER",
+        "elk.padding": `[top=${s.top},left=${s.left},bottom=${s.bottom},right=${s.right}]`
+      }
+    });
+  const a = [];
+  for (const t of n.nodes)
+    (t.parentId ? e.get(t.parentId).children : a).push(e.get(t.id));
+  const d = /* @__PURE__ */ new Set([
+    ...n.nodes.flatMap((t) => [t.id, ...(t.ports ?? []).map((o) => o.id)]),
+    ...n.edges.map((t) => t.id)
+  ]);
+  let r = "$graph";
+  for (; d.has(r); ) r += "$";
+  const c = await p.layout({
+    id: r,
+    children: a,
+    edges: n.edges.map((t) => ({
+      id: t.id,
+      sources: [t.sourcePort ?? t.source],
+      targets: [t.targetPort ?? t.target]
+    })),
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": i.direction ?? "RIGHT",
+      "elk.edgeRouting": "ORTHOGONAL",
+      "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+      "elk.spacing.nodeNode": String(i.spacing ?? 64),
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(i.spacing ?? 64),
+      "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
+      "elk.randomSeed": "1"
+    }
+  }), f = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map(), I = (t) => {
+    for (const o of t.edges ?? []) {
+      const h = o.container ?? t.id, l = f.get(h) ?? { x: 0, y: 0 };
+      x.set(
+        o.id,
+        (o.sections ?? []).map(
+          (g) => [g.startPoint, ...g.bendPoints ?? [], g.endPoint].map((w) => ({
+            x: w.x + l.x,
+            y: w.y + l.y
+          }))
+        )
+      );
+    }
+    for (const o of t.children ?? []) I(o);
+  }, E = (t, o, h) => {
+    const l = o + (t.x ?? 0), g = h + (t.y ?? 0);
+    f.set(t.id, { x: l, y: g, width: t.width ?? 0, height: t.height ?? 0 });
+    for (const w of t.children ?? []) E(w, l, g);
+  };
+  for (const t of c.children ?? []) E(t, 0, 0);
+  I(c);
+  const y = i.anchor && f.get(i.anchor.nodeId), u = y ? i.anchor.position.x - y.x : 0, m = y ? i.anchor.position.y - y.y : 0;
+  return {
+    nodes: n.nodes.map((t) => {
+      const o = f.get(t.id);
+      return { ...t, ...o, x: o.x + u, y: o.y + m };
+    }),
+    edges: n.edges.map((t) => ({
+      ...t,
+      sections: (x.get(t.id) ?? []).map(
+        (o) => o.map((h) => ({ x: h.x + u, y: h.y + m }))
+      )
+    })),
+    bounds: { x: u, y: m, width: c.width ?? 0, height: c.height ?? 0 }
+  };
+}
+export {
+  N as computeGraphLayout,
+  k as validateGraphInput
+};

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

@@ -0,0 +1,72 @@
+import type { InfiniteCanvasPoint } from '../ui/InfiniteCanvas';
+export interface GraphPoint {
+    x: number;
+    y: number;
+}
+export interface GraphBounds extends GraphPoint {
+    width: number;
+    height: number;
+}
+export type GraphViewport = InfiniteCanvasPoint;
+/** Port IDs, node IDs, and edge IDs share one namespace. */
+export interface GraphPort {
+    id: string;
+    side: 'NORTH' | 'EAST' | 'SOUTH' | 'WEST';
+}
+export interface GraphNode {
+    id: string;
+    label: string;
+    kind?: 'node' | 'group';
+    parentId?: string;
+    width: number;
+    height: number;
+    ports?: readonly GraphPort[];
+}
+export interface GraphEdge {
+    id: string;
+    label: string;
+    source: string;
+    target: string;
+    sourcePort?: string;
+    targetPort?: string;
+}
+export interface GraphInput {
+    nodes: readonly GraphNode[];
+    edges: readonly GraphEdge[];
+}
+export interface GraphLayoutNode extends GraphNode, GraphBounds {
+}
+export interface GraphLayoutEdge extends GraphEdge {
+    /** Separate sections preserve branches and self loops without inventing joins. */
+    sections: readonly (readonly GraphPoint[])[];
+}
+export interface GraphLayout {
+    nodes: readonly GraphLayoutNode[];
+    edges: readonly GraphLayoutEdge[];
+    bounds: GraphBounds;
+}
+export interface GraphLayoutOptions {
+    direction?: 'RIGHT' | 'DOWN' | 'LEFT' | 'UP';
+    spacing?: number;
+    groupPadding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Keep the object under inspection at its previous world position after layout. */
+    anchor?: {
+        nodeId: string;
+        position: GraphPoint;
+    };
+}
+export type GraphObjectRef = {
+    kind: 'node' | 'edge';
+    id: string;
+};
+/** Client coordinates go directly to SurfaceFloatingLayer; never rescale them. */
+export interface GraphObjectEvent {
+    object: GraphObjectRef | null;
+    position: GraphPoint;
+    owner: Element;
+}

package/dist/components/ui/InfiniteCanvas.d.ts

@@ -14,7 +14,7 @@ export interface InfiniteCanvasContextMenuEvent {
     worldY: number;
 }
 export interface InfiniteCanvasProps {
-    children: JSX.Element;
+    children: JSX.Element | ((viewport: Accessor<InfiniteCanvasPoint>) => JSX.Element);
     overlay?: (viewport: Accessor<InfiniteCanvasPoint>) => JSX.Element;
     viewport: InfiniteCanvasPoint;
     onViewportChange?: (viewport: InfiniteCanvasPoint) => void;