@almadar/ui 5.146.2 → 5.147.0

package/dist/avl/index.cjs

@@ -29963,7 +29963,12 @@ function daysAgo(n) {
   d.setDate(d.getDate() - n);
   return d;
 }
-var DEFAULT_PRESETS, DateRangePicker;
+function resolvePresetRange(preset) {
+  if (typeof preset.range === "function") return preset.range();
+  if (preset.range) return preset.range;
+  return TOKEN_RANGES[preset.value]?.() ?? null;
+}
+var TOKEN_RANGES, DEFAULT_PRESETS, DateRangePicker;
 var init_DateRangePicker = __esm({
   "components/core/molecules/DateRangePicker.tsx"() {
     "use client";
@@ -29973,32 +29978,19 @@ var init_DateRangePicker = __esm({
     init_Stack();
     init_Typography();
     init_useEventBus();
+    TOKEN_RANGES = {
+      "7d": () => ({ from: toISODate(daysAgo(7)), to: toISODate(/* @__PURE__ */ new Date()) }),
+      "30d": () => ({ from: toISODate(daysAgo(30)), to: toISODate(/* @__PURE__ */ new Date()) }),
+      month: () => ({ from: toISODate(startOfMonth(/* @__PURE__ */ new Date())), to: toISODate(/* @__PURE__ */ new Date()) }),
+      quarter: () => ({ from: toISODate(startOfQuarter(/* @__PURE__ */ new Date())), to: toISODate(/* @__PURE__ */ new Date()) }),
+      ytd: () => ({ from: toISODate(startOfYear(/* @__PURE__ */ new Date())), to: toISODate(/* @__PURE__ */ new Date()) })
+    };
     DEFAULT_PRESETS = [
-      {
-        label: "Last 7 days",
-        value: "7d",
-        range: () => ({ from: toISODate(daysAgo(7)), to: toISODate(/* @__PURE__ */ new Date()) })
-      },
-      {
-        label: "Last 30 days",
-        value: "30d",
-        range: () => ({ from: toISODate(daysAgo(30)), to: toISODate(/* @__PURE__ */ new Date()) })
-      },
-      {
-        label: "This Month",
-        value: "month",
-        range: () => ({ from: toISODate(startOfMonth(/* @__PURE__ */ new Date())), to: toISODate(/* @__PURE__ */ new Date()) })
-      },
-      {
-        label: "This Quarter",
-        value: "quarter",
-        range: () => ({ from: toISODate(startOfQuarter(/* @__PURE__ */ new Date())), to: toISODate(/* @__PURE__ */ new Date()) })
-      },
-      {
-        label: "YTD",
-        value: "ytd",
-        range: () => ({ from: toISODate(startOfYear(/* @__PURE__ */ new Date())), to: toISODate(/* @__PURE__ */ new Date()) })
-      }
+      { label: "Last 7 days", value: "7d" },
+      { label: "Last 30 days", value: "30d" },
+      { label: "This Month", value: "month" },
+      { label: "This Quarter", value: "quarter" },
+      { label: "YTD", value: "ytd" }
     ];
     DateRangePicker = ({
       from: fromProp,
@@ -30039,7 +30031,8 @@ var init_DateRangePicker = __esm({
       );
       const handlePreset = React94.useCallback(
         (preset) => {
-          const range = preset.range();
+          const range = resolvePresetRange(preset);
+          if (range === null) return;
           setFrom(range.from);
           setTo(range.to);
           setActivePreset(preset.value);
@@ -30047,8 +30040,12 @@ var init_DateRangePicker = __esm({
         },
         [emit]
       );
+      const renderablePresets = React94.useMemo(
+        () => presets.filter((p) => p.range !== void 0 || TOKEN_RANGES[p.value] !== void 0),
+        [presets]
+      );
       const presetButtons = React94.useMemo(
-        () => presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+        () => renderablePresets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
             variant: activePreset === preset.value ? "primary" : "ghost",
@@ -30058,7 +30055,7 @@ var init_DateRangePicker = __esm({
           },
           preset.value
         )),
-        [presets, activePreset, handlePreset]
+        [renderablePresets, activePreset, handlePreset]
       );
       return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: cn(className), children: [
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "end", children: [
@@ -30085,7 +30082,7 @@ var init_DateRangePicker = __esm({
             )
           ] })
         ] }),
-        presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", wrap: true, children: presetButtons })
+        renderablePresets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", wrap: true, children: presetButtons })
       ] });
     };
     DateRangePicker.displayName = "DateRangePicker";
@@ -30527,6 +30524,208 @@ var init_PhysicsCanvas = __esm({
     };
   }
 });
+
+// lib/graphViewLayouts.ts
+function buildAdjacency(nodeIds, edges) {
+  const known = new Set(nodeIds);
+  const out = /* @__PURE__ */ new Map();
+  const inMap = /* @__PURE__ */ new Map();
+  for (const id of nodeIds) {
+    out.set(id, []);
+    inMap.set(id, []);
+  }
+  for (const edge of edges) {
+    if (!known.has(edge.source) || !known.has(edge.target)) continue;
+    out.get(edge.source)?.push(edge.target);
+    inMap.get(edge.target)?.push(edge.source);
+  }
+  return { out, in: inMap };
+}
+function findRoots(nodeIds, adjacency) {
+  return nodeIds.filter((id) => (adjacency.in.get(id)?.length ?? 0) === 0);
+}
+function assignLayers(nodeIds, adjacency, roots) {
+  const layer = new Map(nodeIds.map((id) => [id, 0]));
+  const onStack = /* @__PURE__ */ new Set();
+  const visit = (id) => {
+    onStack.add(id);
+    const currentLayer = layer.get(id) ?? 0;
+    for (const next of adjacency.out.get(id) ?? []) {
+      if (onStack.has(next)) continue;
+      const candidate = currentLayer + 1;
+      if (candidate > (layer.get(next) ?? 0)) {
+        layer.set(next, candidate);
+      }
+      visit(next);
+    }
+    onStack.delete(id);
+  };
+  for (const root of roots) visit(root);
+  return layer;
+}
+function computeVisitOrder(nodeIds, adjacency, roots) {
+  const order = /* @__PURE__ */ new Map();
+  const visited = /* @__PURE__ */ new Set();
+  let counter = 0;
+  const visit = (id) => {
+    if (visited.has(id)) return;
+    visited.add(id);
+    order.set(id, counter++);
+    for (const next of adjacency.out.get(id) ?? []) visit(next);
+  };
+  for (const root of roots) visit(root);
+  for (const id of nodeIds) {
+    if (!visited.has(id)) order.set(id, counter++);
+  }
+  return order;
+}
+function bfsDepthAndOrder(nodeIds, adjacency, roots) {
+  const depth = new Map(nodeIds.map((id) => [id, 0]));
+  const visitOrder = /* @__PURE__ */ new Map();
+  const visited = /* @__PURE__ */ new Set();
+  const queue = [];
+  let counter = 0;
+  for (const root of roots) {
+    if (visited.has(root)) continue;
+    visited.add(root);
+    depth.set(root, 0);
+    visitOrder.set(root, counter++);
+    queue.push(root);
+  }
+  let head = 0;
+  while (head < queue.length) {
+    const id = queue[head++];
+    const d = depth.get(id) ?? 0;
+    for (const next of adjacency.out.get(id) ?? []) {
+      if (visited.has(next)) continue;
+      visited.add(next);
+      depth.set(next, d + 1);
+      visitOrder.set(next, counter++);
+      queue.push(next);
+    }
+  }
+  for (const id of nodeIds) {
+    if (!visited.has(id)) visitOrder.set(id, counter++);
+  }
+  return { depth, visitOrder };
+}
+function edgeWalkOrder(nodeIds, adjacency) {
+  const visited = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const start of nodeIds) {
+    if (visited.has(start)) continue;
+    let current = start;
+    while (current !== void 0 && !visited.has(current)) {
+      visited.add(current);
+      result.push(current);
+      const outs = adjacency.out.get(current) ?? [];
+      current = outs.find((next) => !visited.has(next));
+    }
+  }
+  return result;
+}
+function groupByTier(nodeIds, tierOf, maxTier) {
+  const groups = Array.from({ length: maxTier + 1 }, () => []);
+  for (const id of nodeIds) {
+    groups[tierOf.get(id) ?? 0].push(id);
+  }
+  return groups;
+}
+function distributeAxis(count, start, end) {
+  if (count <= 0) return [];
+  const slot = (end - start) / count;
+  return Array.from({ length: count }, (_, i) => start + slot * (i + 0.5));
+}
+function orderByParentPositionThenInput(group, adjacency, positioned, inputIndex) {
+  const withKey = group.map((id) => {
+    const parentValues = (adjacency.in.get(id) ?? []).map((p) => positioned.get(p)).filter((v) => v !== void 0);
+    const avg = parentValues.length > 0 ? parentValues.reduce((a, b) => a + b, 0) / parentValues.length : Number.POSITIVE_INFINITY;
+    return { id, avg, idx: inputIndex.get(id) ?? 0 };
+  });
+  withKey.sort((a, b) => a.avg !== b.avg ? a.avg - b.avg : a.idx - b.idx);
+  return withKey.map((k) => k.id);
+}
+function layoutFlow(nodeIds, adjacency, roots, width, height, margin) {
+  const inputIndex = new Map(nodeIds.map((id, i) => [id, i]));
+  const layers = assignLayers(nodeIds, adjacency, roots);
+  const maxLayer = Math.max(...Array.from(layers.values()));
+  const layerGroups = groupByTier(nodeIds, layers, maxLayer);
+  const positions = /* @__PURE__ */ new Map();
+  const yById = /* @__PURE__ */ new Map();
+  for (let l = 0; l <= maxLayer; l++) {
+    const x = margin + l * (width - 2 * margin) / Math.max(1, maxLayer);
+    const ordered2 = orderByParentPositionThenInput(layerGroups[l], adjacency, yById, inputIndex);
+    const ys = distributeAxis(ordered2.length, margin, height - margin);
+    ordered2.forEach((id, i) => {
+      positions.set(id, { id, x, y: ys[i] });
+      yById.set(id, ys[i]);
+    });
+  }
+  return nodeIds.map((id) => positions.get(id));
+}
+function layoutTree2(nodeIds, adjacency, roots, width, height, margin) {
+  const effectiveRoots = roots.length > 0 ? roots : [nodeIds[0]];
+  const layers = assignLayers(nodeIds, adjacency, effectiveRoots);
+  const maxLayer = Math.max(...Array.from(layers.values()));
+  const visitOrder = computeVisitOrder(nodeIds, adjacency, effectiveRoots);
+  const layerGroups = groupByTier(nodeIds, layers, maxLayer);
+  const positions = /* @__PURE__ */ new Map();
+  for (let l = 0; l <= maxLayer; l++) {
+    const ordered2 = [...layerGroups[l]].sort(
+      (a, b) => (visitOrder.get(a) ?? 0) - (visitOrder.get(b) ?? 0)
+    );
+    const y = margin + l * (height - 2 * margin) / Math.max(1, maxLayer);
+    const xs = distributeAxis(ordered2.length, margin, width - margin);
+    ordered2.forEach((id, i) => positions.set(id, { id, x: xs[i], y }));
+  }
+  return nodeIds.map((id) => positions.get(id));
+}
+function layoutRadial(nodeIds, adjacency, roots, width, height, margin) {
+  const cx = width / 2;
+  const cy = height / 2;
+  const maxRadius = Math.min(width, height) / 2 - margin;
+  if (roots.length === 0) {
+    const order = edgeWalkOrder(nodeIds, adjacency);
+    const k = order.length;
+    const positions2 = /* @__PURE__ */ new Map();
+    order.forEach((id, i) => {
+      const angle = i / k * 2 * Math.PI;
+      positions2.set(id, { id, x: cx + maxRadius * Math.cos(angle), y: cy + maxRadius * Math.sin(angle) });
+    });
+    return nodeIds.map((id) => positions2.get(id));
+  }
+  const { depth, visitOrder } = bfsDepthAndOrder(nodeIds, adjacency, roots);
+  const maxDepth = Math.max(...Array.from(depth.values()));
+  const ringGroups = groupByTier(nodeIds, depth, maxDepth);
+  const positions = /* @__PURE__ */ new Map();
+  for (let d = 0; d <= maxDepth; d++) {
+    const ordered2 = [...ringGroups[d]].sort(
+      (a, b) => (visitOrder.get(a) ?? 0) - (visitOrder.get(b) ?? 0)
+    );
+    const radius = d * maxRadius / Math.max(1, maxDepth);
+    const k = ordered2.length;
+    ordered2.forEach((id, i) => {
+      const angle = i / k * 2 * Math.PI;
+      positions.set(id, { id, x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) });
+    });
+  }
+  return nodeIds.map((id) => positions.get(id));
+}
+function computeStaticLayout(mode, input) {
+  const { nodeIds, edges, width, height } = input;
+  const margin = input.margin ?? 40;
+  if (nodeIds.length === 0) return [];
+  if (nodeIds.length === 1) return [{ id: nodeIds[0], x: width / 2, y: height / 2 }];
+  const adjacency = buildAdjacency(nodeIds, edges);
+  const roots = findRoots(nodeIds, adjacency);
+  if (mode === "flow") return layoutFlow(nodeIds, adjacency, roots, width, height, margin);
+  if (mode === "tree") return layoutTree2(nodeIds, adjacency, roots, width, height, margin);
+  return layoutRadial(nodeIds, adjacency, roots, width, height, margin);
+}
+var init_graphViewLayouts = __esm({
+  "lib/graphViewLayouts.ts"() {
+  }
+});
 function resolveNodeColor(node, groups) {
   if (node.color) return node.color;
   if (node.group) {
@@ -30541,6 +30740,7 @@ var init_GraphView = __esm({
     "use client";
     init_cn();
     init_atoms();
+    init_graphViewLayouts();
     GROUP_COLORS = [
       "#3b82f6",
       // blue-500
@@ -30571,11 +30771,13 @@ var init_GraphView = __esm({
       height: propHeight,
       className,
       showLabels = true,
-      zoomToFit = true
+      zoomToFit = true,
+      layout = "force"
     }) => {
       const { t } = hooks.useTranslate();
       const containerRef = React94.useRef(null);
       const animRef = React94.useRef(0);
+      const arrowMarkerId = React94.useId();
       const [simNodes, setSimNodes] = React94.useState([]);
       const [settled, setSettled] = React94.useState(false);
       const [hoveredId, setHoveredId] = React94.useState(null);
@@ -30632,6 +30834,22 @@ var init_GraphView = __esm({
             fy: 0
           };
         });
+        if (layout !== "force") {
+          const points = computeStaticLayout(layout, {
+            nodeIds: nodes.map((n) => n.id),
+            edges,
+            width: w,
+            height: h
+          });
+          const pointById = new Map(points.map((p) => [p.id, p]));
+          const laidOut = initialNodes.map((node) => {
+            const point = pointById.get(node.id);
+            return point ? { ...node, x: point.x, y: point.y } : node;
+          });
+          setSimNodes(laidOut);
+          setSettled(true);
+          return;
+        }
         let iterations = 0;
         const maxIterations = 120;
         let currentNodes = initialNodes;
@@ -30700,7 +30918,7 @@ var init_GraphView = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [nodes, edges, w, h, groups]);
+      }, [nodes, edges, w, h, groups, layout]);
       const viewBox = React94.useMemo(() => {
         if (!zoomToFit || !settled || simNodes.length === 0) {
           return `0 0 ${w} ${h}`;
@@ -30775,6 +30993,19 @@ var init_GraphView = __esm({
               viewBox,
               preserveAspectRatio: "xMidYMid meet",
               children: [
+                layout !== "force" && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "marker",
+                  {
+                    id: arrowMarkerId,
+                    viewBox: "0 0 10 10",
+                    refX: "9",
+                    refY: "5",
+                    markerWidth: "6",
+                    markerHeight: "6",
+                    orient: "auto-start-reverse",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L10,5 L0,10 z", fill: "currentColor" })
+                  }
+                ) }),
                 edges.map((edge, idx) => {
                   const source = nodeMap.get(edge.source);
                   const target = nodeMap.get(edge.target);
@@ -30789,8 +31020,10 @@ var init_GraphView = __esm({
                         x2: target.x,
                         y2: target.y,
                         stroke: edge.color ?? DEFAULT_EDGE_COLOR,
+                        color: edge.color ?? DEFAULT_EDGE_COLOR,
                         strokeWidth: 1.5,
-                        opacity: isHighlighted ? 0.8 : 0.15
+                        opacity: isHighlighted ? 0.8 : 0.15,
+                        markerEnd: layout !== "force" ? `url(#${arrowMarkerId})` : void 0
                       }
                     ),
                     showLabels && edge.label && /* @__PURE__ */ jsxRuntime.jsx(
@@ -55863,7 +56096,9 @@ function FlowCanvasInner({
   behaviorEntries,
   behaviorWires,
   userType = "builder",
-  themeManifest
+  themeManifest,
+  nodePositions,
+  onPositionsChange
 }) {
   const { t } = hooks.useTranslate();
   const NODE_TYPES2 = React94.useMemo(() => ({
@@ -55950,9 +56185,15 @@ function FlowCanvasInner({
   const [nodes, setNodes, onNodesChange] = react.useNodesState(activeNodes);
   const [edges, setEdges, onEdgesChange] = react.useEdgesState(activeEdges);
   const reactFlow = react.useReactFlow();
+  const savedPositionsRef = React94__namespace.default.useRef(nodePositions);
+  savedPositionsRef.current = nodePositions;
+  const nodesRef = React94__namespace.default.useRef(nodes);
+  nodesRef.current = nodes;
   React94.useEffect(() => {
     setEdges([]);
-    setNodes(activeNodes);
+    const saved = savedPositionsRef.current;
+    const merged = saved ? activeNodes.map((n) => saved[n.id] ? { ...n, position: saved[n.id] } : n) : activeNodes;
+    setNodes(merged);
     setEdges(activeEdges);
     requestAnimationFrame(() => {
       reactFlow.fitView({ duration: 300, padding: 0.25 });
@@ -56102,6 +56343,14 @@ function FlowCanvasInner({
       targetTraitName: tgtData.traitName
     });
   }, [nodes, onEventWire, eventBus]);
+  const handleNodeDragStop = React94.useCallback(() => {
+    if (!onPositionsChange) return;
+    const positions = {};
+    for (const n of nodesRef.current) {
+      positions[n.id] = { x: n.position.x, y: n.position.y };
+    }
+    onPositionsChange(positions);
+  }, [onPositionsChange]);
   const screenSizeKeys = ["mobile", "tablet", "laptop", "wide"];
   const traitCardSelectionValue = React94.useMemo(() => ({
     selectTransition: (sel) => {
@@ -56133,6 +56382,7 @@ function FlowCanvasInner({
               onNodeDoubleClick: handleNodeDoubleClick,
               onNodeClick: handleNodeClick,
               onConnect: handleConnect,
+              onNodeDragStop: handleNodeDragStop,
               minZoom: 0.1,
               maxZoom: 2,
               fitView: true,

package/dist/avl/index.d.cts

@@ -1655,6 +1655,24 @@ interface FlowCanvasProps {
      * originates from the synthesized `__design_system__` schema.
      */
     themeManifest?: ThemeDefinition;
+    /**
+     * Persisted node positions keyed by node id. When the node set changes
+     * (level/schema switch), any id present here overrides the computed layout
+     * position, restoring a user's manual drag arrangement. Node ids are unique
+     * per view level, so a single flat map covers overview + expanded.
+     */
+    nodePositions?: Record<string, {
+        x: number;
+        y: number;
+    }>;
+    /**
+     * Fired on node drag-stop with the full {id → position} map of the current
+     * node set, so the consumer can persist the arrangement across reloads.
+     */
+    onPositionsChange?: (positions: Record<string, {
+        x: number;
+        y: number;
+    }>) => void;
 }
 declare const FlowCanvas: React__default.FC<FlowCanvasProps>;
 

package/dist/avl/index.d.ts

@@ -1655,6 +1655,24 @@ interface FlowCanvasProps {
      * originates from the synthesized `__design_system__` schema.
      */
     themeManifest?: ThemeDefinition;
+    /**
+     * Persisted node positions keyed by node id. When the node set changes
+     * (level/schema switch), any id present here overrides the computed layout
+     * position, restoring a user's manual drag arrangement. Node ids are unique
+     * per view level, so a single flat map covers overview + expanded.
+     */
+    nodePositions?: Record<string, {
+        x: number;
+        y: number;
+    }>;
+    /**
+     * Fired on node drag-stop with the full {id → position} map of the current
+     * node set, so the consumer can persist the arrangement across reloads.
+     */
+    onPositionsChange?: (positions: Record<string, {
+        x: number;
+        y: number;
+    }>) => void;
 }
 declare const FlowCanvas: React__default.FC<FlowCanvasProps>;