@almadar/ui 5.146.3 → 5.148.0

package/dist/lib/index.d.ts

@@ -1,6 +1,7 @@
-export { C as ContentSegment, D as DEFAULT_CONFIG, a as DomEntityBox, b as DomLayoutData, c as DomOutputsBox, d as DomStateNode, e as DomTransitionLabel, f as DomTransitionPath, E as EntityDefinition, R as RenderOptions, S as StateDefinition, g as StateMachineDefinition, T as TraitSnapshotGetter, h as TransitionDefinition, V as VisualizerConfig, i as bindCanvasCapture, j as bindEventBus, k as bindLastDrawables, l as bindTraitStateGetter, m as clearVerification, n as cn, o as extractOutputsFromTransitions, p as extractStateMachine, q as formatGuard, r as getAllChecks, s as getBridgeHealth, t as getEffectSummary, u as getSnapshot, v as getSummary, w as getTraitSnapshots, x as getTransitions, y as getTransitionsForTrait, z as parseContentSegments, A as parseMarkdownWithCodeBlocks, B as recordServerResponse, F as recordTransition, G as registerCheck, H as registerTraitSnapshot, I as renderStateMachineToDomData, J as renderStateMachineToSvg, K as subscribeToVerification, L as updateAssetStatus, M as updateBridgeHealth, N as updateCheck, O as waitForTransition } from '../cn-DNkqAWZK.js';
+export { C as ContentSegment, D as DEFAULT_CONFIG, a as DomEntityBox, b as DomLayoutData, c as DomOutputsBox, d as DomStateNode, e as DomTransitionLabel, f as DomTransitionPath, E as EntityDefinition, L as LessonSegment, R as RenderOptions, S as StateDefinition, g as StateMachineDefinition, T as TraitSnapshotGetter, h as TransitionDefinition, V as VisualizerConfig, i as bindCanvasCapture, j as bindEventBus, k as bindLastDrawables, l as bindTraitStateGetter, m as clearVerification, n as cn, o as extractOutputsFromTransitions, p as extractStateMachine, q as formatGuard, r as getAllChecks, s as getBridgeHealth, t as getEffectSummary, u as getSnapshot, v as getSummary, w as getTraitSnapshots, x as getTransitions, y as getTransitionsForTrait, z as parseContentSegments, A as parseLessonSegments, B as parseMarkdownWithCodeBlocks, F as recordServerResponse, G as recordTransition, H as registerCheck, I as registerTraitSnapshot, J as renderStateMachineToDomData, K as renderStateMachineToSvg, M as subscribeToVerification, N as updateAssetStatus, O as updateBridgeHealth, P as updateCheck, Q as waitForTransition } from '../cn-CWxxLkri.js';
 import { FieldValue, EntityRow, EventPayload } from '@almadar/core';
 export { AssetLoadStatus, BridgeHealth, CheckStatus, EffectTrace, EventLogEntry, OrbitalVerificationAPI, ServerResponseTrace, TraitStateSnapshot, TransitionTrace, VerificationCheck, VerificationSnapshot, VerificationSummary } from '@almadar/core';
+import 'react';
 import '../paintDispatch-Cb_hQj4Y.js';
 import 'clsx';
 

package/dist/lib/index.js

@@ -1636,6 +1636,109 @@ function parseContentSegments(content) {
   return segments;
 }
 
+// lib/lessonSegmentUtils.ts
+function parseMarkdownWithCodeBlocks2(content) {
+  const segments = [];
+  const codeBlockRegex = /```([^\n\r]*)\r?\n([\s\S]*?)```/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = codeBlockRegex.exec(content)) !== null) {
+    const before = content.slice(lastIndex, match.index);
+    if (before.trim()) {
+      segments.push({ type: "markdown", content: before });
+    }
+    const tokens = match[1].trim().split(/\s+/).filter(Boolean);
+    let rawLanguage = tokens[0] ?? "text";
+    const suffixRunnable = rawLanguage.endsWith("-runnable");
+    const runnable = suffixRunnable || tokens.includes("run");
+    const baseLanguage = suffixRunnable ? rawLanguage.slice(0, -"-runnable".length) || "text" : rawLanguage;
+    segments.push({ type: "code", language: baseLanguage, content: match[2].trim(), runnable });
+    lastIndex = codeBlockRegex.lastIndex;
+  }
+  const remaining = content.slice(lastIndex);
+  if (remaining.trim()) {
+    segments.push({ type: "markdown", content: remaining });
+  }
+  return segments;
+}
+
+// lib/parseLessonSegments.ts
+function extractTagContent(content, tagName) {
+  const closedTagRegex = new RegExp(`<${tagName}>([\\s\\S]*?)<\\/${tagName}>`, "i");
+  const closedMatch = content.match(closedTagRegex);
+  if (closedMatch) {
+    return { content: closedMatch[1].trim(), fullMatch: closedMatch[0] };
+  }
+  const unclosedTagRegex = new RegExp(
+    `<${tagName}>([\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$)`,
+    "i"
+  );
+  const unclosedMatch = content.match(unclosedTagRegex);
+  if (unclosedMatch) {
+    return { content: unclosedMatch[1].trim(), fullMatch: unclosedMatch[0] };
+  }
+  return null;
+}
+function parseLessonSegments(lesson) {
+  if (!lesson) return [];
+  let content = lesson.replace(/<prq>[\s\S]*?<\/prq>/gi, "").trim();
+  const segments = [];
+  const activateResult = extractTagContent(content, "activate");
+  if (activateResult) {
+    segments.push({ type: "activate", question: activateResult.content });
+    content = content.replace(activateResult.fullMatch, "").trim();
+  }
+  const connectResult = extractTagContent(content, "connect");
+  if (connectResult) {
+    segments.push({ type: "connect", content: connectResult.content });
+    content = content.replace(connectResult.fullMatch, "").trim();
+  }
+  const tagRegex = new RegExp(
+    '(?<reflect><reflect>(?<reflectClosed>[\\s\\S]*?)<\\/reflect>)|(?<reflectUnclosed><reflect>(?<reflectOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<bloom><bloom\\s+level="(?<bloomLevel>remember|understand|apply|analyze|evaluate|create)">(?<bloomClosed>[\\s\\S]*?)<\\/bloom>)|(?<bloomUnclosed><bloom\\s+level="(?<bloomLevelUn>remember|understand|apply|analyze|evaluate|create)">(?<bloomOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<quiz><question>(?<quizQuestion>[\\s\\S]*?)<\\/question>\\s*<answer>(?<quizAnswer>[\\s\\S]*?)<\\/answer>)|(?<visualize><visualize\\s+type="(?<vizType>algorithms|math|physics|biology|chemistry|probability)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
+    "gi"
+  );
+  let lastIndex = 0;
+  let match;
+  while ((match = tagRegex.exec(content)) !== null) {
+    const before = content.slice(lastIndex, match.index);
+    if (before.trim()) {
+      segments.push(...parseMarkdownWithCodeBlocks2(before));
+    }
+    const g = match.groups ?? {};
+    if (g.reflect || g.reflectUnclosed) {
+      const prompt = (g.reflectClosed ?? g.reflectOpen ?? "").trim();
+      if (prompt) segments.push({ type: "reflect", prompt });
+    } else if (g.bloom || g.bloomUnclosed) {
+      const level = g.bloomLevel ?? g.bloomLevelUn;
+      const bloomContent = g.bloomClosed ?? g.bloomOpen ?? "";
+      if (level && bloomContent) {
+        const qMatch = bloomContent.match(/<question>([\s\S]*?)<\/question>/i);
+        const aMatch = bloomContent.match(/<answer>([\s\S]*?)<\/answer>/i);
+        if (qMatch && aMatch) {
+          segments.push({ type: "bloom", level, question: qMatch[1].trim(), answer: aMatch[1].trim() });
+        } else if (qMatch) {
+          segments.push({ type: "bloom", level, question: qMatch[1].trim(), answer: "(Answer not provided)" });
+        } else {
+          const clean = bloomContent.replace(/^\*\*Question\s*\d*:?\*\*\s*/i, "").replace(/^\*\*Q\d*:?\*\*\s*/i, "").trim();
+          if (clean) segments.push({ type: "bloom", level, question: clean, answer: "(See answers section below)" });
+        }
+      }
+    } else if (g.quiz) {
+      segments.push({ type: "quiz", question: g.quizQuestion.trim(), answer: g.quizAnswer.trim() });
+    } else if (g.visualize) {
+      segments.push({
+        type: "visualization",
+        visualizationType: g.vizType,
+        description: g.vizDesc ?? ""
+      });
+    }
+    lastIndex = tagRegex.lastIndex;
+  }
+  const remaining = content.slice(lastIndex);
+  if (remaining.trim()) segments.push(...parseMarkdownWithCodeBlocks2(remaining));
+  return segments;
+}
+
 // lib/jazari/layout.ts
 var GEAR_RADIUS = 35;
 var GEAR_SPACING = 130;
@@ -1921,4 +2024,4 @@ var JAZARI_COLORS = {
   darkBg: "#1a1a2e"
 };
 
-export { ApiError, DEFAULT_CONFIG, JAZARI_COLORS, apiClient, arrowheadPath, bindCanvasCapture, bindEventBus, bindLastDrawables, bindTraitStateGetter, brainIconPath, clearDebugEvents, clearEntityProvider, clearGuardHistory, clearTicks, clearTraits, clearVerification, cn, compareCellValues, computeJazariLayout, debug, debugCollision, debugError, debugGameState, debugGroup, debugGroupEnd, debugInput, debugPhysics, debugTable, debugTime, debugTimeEnd, debugWarn, eightPointedStarPath, extractOutputsFromTransitions, extractStateMachine, formatDate, formatDateTime, formatGuard, formatNestedFieldLabel, formatTime, formatValue, gearTeethPath, getAllChecks, getAllTicks, getAllTraits, getBridgeHealth, getDebugEvents, getEffectSummary, getEntitiesByType, getEntityById, getEntitySnapshot, getEventsBySource, getEventsByType, getGuardEvaluationsForTrait, getGuardHistory, getNestedValue, getRecentEvents, getRecentGuardEvaluations, getSnapshot, getSummary, getTick, getTrait, getTraitSnapshots, getTransitions, getTransitionsForTrait, humanizeEnumValue, humanizeFieldName, initDebugShortcut, isDebugEnabled, lockIconPath, logDebugEvent, logEffectExecuted, logError, logEventFired, logInfo, logStateChange, logWarning, onDebugToggle, parseContentSegments, parseMarkdownWithCodeBlocks, pipeIconPath, recordGuardEvaluation, recordServerResponse, recordTransition, registerCheck, registerTick, registerTrait, registerTraitSnapshot, renderStateMachineToDomData, renderStateMachineToSvg, setDebugEnabled, setEntityProvider, setTickActive, sortRows, subscribeToDebugEvents, subscribeToGuardChanges, subscribeToTickChanges, subscribeToTraitChanges, subscribeToVerification, toggleDebug, unregisterTick, unregisterTrait, updateAssetStatus, updateBridgeHealth, updateCheck, updateGuardResult, updateTickExecution, updateTraitState, waitForTransition };
+export { ApiError, DEFAULT_CONFIG, JAZARI_COLORS, apiClient, arrowheadPath, bindCanvasCapture, bindEventBus, bindLastDrawables, bindTraitStateGetter, brainIconPath, clearDebugEvents, clearEntityProvider, clearGuardHistory, clearTicks, clearTraits, clearVerification, cn, compareCellValues, computeJazariLayout, debug, debugCollision, debugError, debugGameState, debugGroup, debugGroupEnd, debugInput, debugPhysics, debugTable, debugTime, debugTimeEnd, debugWarn, eightPointedStarPath, extractOutputsFromTransitions, extractStateMachine, formatDate, formatDateTime, formatGuard, formatNestedFieldLabel, formatTime, formatValue, gearTeethPath, getAllChecks, getAllTicks, getAllTraits, getBridgeHealth, getDebugEvents, getEffectSummary, getEntitiesByType, getEntityById, getEntitySnapshot, getEventsBySource, getEventsByType, getGuardEvaluationsForTrait, getGuardHistory, getNestedValue, getRecentEvents, getRecentGuardEvaluations, getSnapshot, getSummary, getTick, getTrait, getTraitSnapshots, getTransitions, getTransitionsForTrait, humanizeEnumValue, humanizeFieldName, initDebugShortcut, isDebugEnabled, lockIconPath, logDebugEvent, logEffectExecuted, logError, logEventFired, logInfo, logStateChange, logWarning, onDebugToggle, parseContentSegments, parseLessonSegments, parseMarkdownWithCodeBlocks, pipeIconPath, recordGuardEvaluation, recordServerResponse, recordTransition, registerCheck, registerTick, registerTrait, registerTraitSnapshot, renderStateMachineToDomData, renderStateMachineToSvg, setDebugEnabled, setEntityProvider, setTickActive, sortRows, subscribeToDebugEvents, subscribeToGuardChanges, subscribeToTickChanges, subscribeToTraitChanges, subscribeToVerification, toggleDebug, unregisterTick, unregisterTrait, updateAssetStatus, updateBridgeHealth, updateCheck, updateGuardResult, updateTickExecution, updateTraitState, waitForTransition };

package/dist/providers/index.cjs

@@ -11853,7 +11853,10 @@ var init_LearningCanvas = __esm({
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
+          if (shape.type !== "text") drawShape(ctx, shape, width, height);
+        }
+        for (const shape of shapes) {
+          if (shape.type === "text") drawShape(ctx, shape, width, height);
         }
       }, [width, height, backgroundColor, shapes]);
       React87.useEffect(() => {
@@ -13799,7 +13802,7 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_CELL_COLOR = "#e5e7eb";
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
-    TOP_PAD = 12;
+    TOP_PAD = 26;
     AlgorithmCanvas = ({
       className,
       width = 600,
@@ -25405,6 +25408,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -25599,6 +25603,35 @@ var init_FilterGroup = __esm({
                   onClear: () => handleFilterSelect(`${filter.field}_to`, null)
                 }
               )
+            ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.from")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.to")
+                }
+              )
             ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
@@ -25681,6 +25714,36 @@ var init_FilterGroup = __esm({
                     className: "text-sm min-w-[100px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
@@ -25799,6 +25862,38 @@ var init_FilterGroup = __esm({
                     className: "min-w-[130px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
@@ -27698,7 +27793,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";
@@ -27708,32 +27808,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,
@@ -27774,7 +27861,8 @@ var init_DateRangePicker = __esm({
       );
       const handlePreset = React87.useCallback(
         (preset) => {
-          const range = preset.range();
+          const range = resolvePresetRange(preset);
+          if (range === null) return;
           setFrom(range.from);
           setTo(range.to);
           setActivePreset(preset.value);
@@ -27782,8 +27870,12 @@ var init_DateRangePicker = __esm({
         },
         [emit]
       );
+      const renderablePresets = React87.useMemo(
+        () => presets.filter((p) => p.range !== void 0 || TOKEN_RANGES[p.value] !== void 0),
+        [presets]
+      );
       const presetButtons = React87.useMemo(
-        () => presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+        () => renderablePresets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
             variant: activePreset === preset.value ? "primary" : "ghost",
@@ -27793,7 +27885,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: [
@@ -27820,7 +27912,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";
@@ -28262,6 +28354,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 layoutTree(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 layoutTree(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) {
@@ -28276,6 +28570,7 @@ var init_GraphView = __esm({
     "use client";
     init_cn();
     init_atoms();
+    init_graphViewLayouts();
     GROUP_COLORS = [
       "#3b82f6",
       // blue-500
@@ -28306,11 +28601,13 @@ var init_GraphView = __esm({
       height: propHeight,
       className,
       showLabels = true,
-      zoomToFit = true
+      zoomToFit = true,
+      layout = "force"
     }) => {
       const { t } = hooks.useTranslate();
       const containerRef = React87.useRef(null);
       const animRef = React87.useRef(0);
+      const arrowMarkerId = React87.useId();
       const [simNodes, setSimNodes] = React87.useState([]);
       const [settled, setSettled] = React87.useState(false);
       const [hoveredId, setHoveredId] = React87.useState(null);
@@ -28367,6 +28664,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;
@@ -28435,7 +28748,7 @@ var init_GraphView = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [nodes, edges, w, h, groups]);
+      }, [nodes, edges, w, h, groups, layout]);
       const viewBox = React87.useMemo(() => {
         if (!zoomToFit || !settled || simNodes.length === 0) {
           return `0 0 ${w} ${h}`;
@@ -28510,6 +28823,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);
@@ -28524,8 +28850,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(