@almadar/ui 5.146.3 → 5.148.0

package/dist/{cn-DNkqAWZK.d.ts → cn-CWxxLkri.d.ts}

@@ -1,4 +1,5 @@
 import { OrbitalSchema, SExpr, Effect, OrbitalVerificationAPI, TraitStateSnapshot, EventPayload, BusEvent, VerificationCheck, BridgeHealth, VerificationSnapshot, VerificationSummary, TransitionTrace, ServerResponseTrace, CheckStatus, AssetLoadStatus } from '@almadar/core';
+import React__default from 'react';
 import { D as DrawableNode } from './paintDispatch-Cb_hQj4Y.js';
 import { ClassValue } from 'clsx';
 
@@ -34,7 +35,7 @@ type ContentSegment = {
  * Splits markdown into segments of plain markdown and fenced code blocks.
  * JSON/orb code blocks containing orbital schemas are tagged as 'orbital'.
  */
-declare function parseMarkdownWithCodeBlocks(content: string | undefined | null): ContentSegment[];
+declare function parseMarkdownWithCodeBlocks$1(content: string | undefined | null): ContentSegment[];
 /**
  * Parse content to extract all segments including quiz tags and code blocks.
  *
@@ -45,6 +46,95 @@ declare function parseMarkdownWithCodeBlocks(content: string | undefined | null)
  */
 declare function parseContentSegments(content: string | undefined | null): ContentSegment[];
 
+/**
+ * BloomQuizBlock Molecule Component
+ *
+ * Practice Q&A with Bloom's Taxonomy level badge. Emits `UI:ANSWER_BLOOM { index, level }`.
+ *
+ * Event Contract:
+ * - Emits: UI:ANSWER_BLOOM { index, level }
+ * - entityAware: false
+ */
+
+type BloomLevel = 'remember' | 'understand' | 'apply' | 'analyze' | 'evaluate' | 'create';
+interface BloomQuizBlockProps {
+    level: BloomLevel;
+    question: string;
+    answer: string;
+    /** Zero-based index (used in the emitted event payload) */
+    index?: number;
+    /** Whether the learner has already answered */
+    isAnswered?: boolean;
+    /** Event name emitted on first reveal (as `UI:<answerEvent>`). Defaults to 'ANSWER_BLOOM'. */
+    answerEvent?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const BloomQuizBlock: React__default.FC<BloomQuizBlockProps>;
+
+/**
+ * Utility for lesson-segment parsing: splits a markdown string into alternating
+ * markdown and fenced-code-block segments. Exported so SegmentRenderer and
+ * BloomQuizBlock can reuse without circular imports.
+ */
+type MarkdownSegment = {
+    type: 'markdown';
+    content: string;
+};
+type CodeSegment = {
+    type: 'code';
+    language: string;
+    content: string;
+    runnable?: boolean;
+};
+type MixedSegment = MarkdownSegment | CodeSegment;
+/** Splits markdown content into markdown and fenced-code-block segments. */
+declare function parseMarkdownWithCodeBlocks(content: string): MixedSegment[];
+
+/**
+ * parseLessonSegments — parses lesson markdown with embedded learning-science
+ * XML-style tags into a typed Segment array.
+ *
+ * Supported tags: <activate>, <connect>, <reflect>, <bloom level="...">,
+ * <question>/<answer>, <visualize type="..." description="..." />.
+ *
+ * Tags may be open (unclosed) — the parser falls back to consuming content
+ * until the next recognised tag, a section heading (`\n\n#`), or end-of-input.
+ */
+
+type InteractiveOrbitalType = 'algorithms' | 'math' | 'physics' | 'biology' | 'chemistry' | 'probability';
+type LessonSegment = MixedSegment | {
+    type: 'quiz';
+    question: string;
+    answer: string;
+} | {
+    type: 'activate';
+    question: string;
+} | {
+    type: 'connect';
+    content: string;
+} | {
+    type: 'reflect';
+    prompt: string;
+} | {
+    type: 'bloom';
+    level: BloomLevel;
+    question: string;
+    answer: string;
+} | {
+    type: 'visualization';
+    visualizationType: InteractiveOrbitalType;
+    description: string;
+};
+/** User progress state passed into SegmentRenderer. */
+interface LessonUserProgress {
+    activationResponse?: string;
+    reflectionNotes?: string[];
+    bloomAnswered?: Record<number, boolean>;
+}
+/** Parse a lesson string into typed segments. Returns `[]` when input is empty. */
+declare function parseLessonSegments(lesson: string | undefined): LessonSegment[];
+
 /**
  * Orbital State Machine Visualizer
  *
@@ -292,4 +382,4 @@ declare function clearVerification(): void;
  */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { parseMarkdownWithCodeBlocks as A, recordServerResponse as B, type ContentSegment as C, DEFAULT_CONFIG as D, type EntityDefinition as E, recordTransition as F, registerCheck as G, registerTraitSnapshot as H, renderStateMachineToDomData as I, renderStateMachineToSvg as J, subscribeToVerification as K, updateAssetStatus as L, updateBridgeHealth as M, updateCheck as N, waitForTransition as O, type RenderOptions as R, type StateDefinition as S, type TraitSnapshotGetter as T, type VisualizerConfig as V, type DomEntityBox as a, type DomLayoutData as b, type DomOutputsBox as c, type DomStateNode as d, type DomTransitionLabel as e, type DomTransitionPath as f, type StateMachineDefinition as g, type TransitionDefinition as h, bindCanvasCapture as i, bindEventBus as j, bindLastDrawables as k, bindTraitStateGetter as l, clearVerification as m, cn as n, extractOutputsFromTransitions as o, extractStateMachine as p, formatGuard as q, getAllChecks as r, getBridgeHealth as s, getEffectSummary as t, getSnapshot as u, getSummary as v, getTraitSnapshots as w, getTransitions as x, getTransitionsForTrait as y, parseContentSegments as z };
+export { parseMarkdownWithCodeBlocks as $, parseLessonSegments as A, parseMarkdownWithCodeBlocks$1 as B, type ContentSegment as C, DEFAULT_CONFIG as D, type EntityDefinition as E, recordServerResponse as F, recordTransition as G, registerCheck as H, registerTraitSnapshot as I, renderStateMachineToDomData as J, renderStateMachineToSvg as K, type LessonSegment as L, subscribeToVerification as M, updateAssetStatus as N, updateBridgeHealth as O, updateCheck as P, waitForTransition as Q, type RenderOptions as R, type StateDefinition as S, type TraitSnapshotGetter as T, type LessonUserProgress as U, type VisualizerConfig as V, type InteractiveOrbitalType as W, type BloomLevel as X, BloomQuizBlock as Y, type BloomQuizBlockProps as Z, type MixedSegment as _, type DomEntityBox as a, type DomLayoutData as b, type DomOutputsBox as c, type DomStateNode as d, type DomTransitionLabel as e, type DomTransitionPath as f, type StateMachineDefinition as g, type TransitionDefinition as h, bindCanvasCapture as i, bindEventBus as j, bindLastDrawables as k, bindTraitStateGetter as l, clearVerification as m, cn as n, extractOutputsFromTransitions as o, extractStateMachine as p, formatGuard as q, getAllChecks as r, getBridgeHealth as s, getEffectSummary as t, getSnapshot as u, getSummary as v, getTraitSnapshots as w, getTransitions as x, getTransitionsForTrait as y, parseContentSegments as z };

package/dist/components/index.cjs

@@ -8690,7 +8690,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]);
       React77.useEffect(() => {
@@ -8771,7 +8774,7 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_CELL_COLOR = "#e5e7eb";
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
-    TOP_PAD = 12;
+    TOP_PAD = 26;
     exports.AlgorithmCanvas = ({
       className,
       width = 600,
@@ -23756,6 +23759,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -23950,6 +23954,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(
+                exports.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(
+                exports.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(
               exports.Input,
               {
@@ -24032,6 +24065,36 @@ var init_FilterGroup = __esm({
                     className: "text-sm min-w-[100px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.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(
+                  exports.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(
                 exports.Input,
                 {
@@ -24150,6 +24213,38 @@ var init_FilterGroup = __esm({
                     className: "min-w-[130px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.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(
+                  exports.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(
                 exports.Input,
                 {
@@ -26299,7 +26394,12 @@ function daysAgo(n) {
   d.setDate(d.getDate() - n);
   return d;
 }
-var DEFAULT_PRESETS; exports.DateRangePicker = void 0;
+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; exports.DateRangePicker = void 0;
 var init_DateRangePicker = __esm({
   "components/core/molecules/DateRangePicker.tsx"() {
     "use client";
@@ -26309,32 +26409,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" }
     ];
     exports.DateRangePicker = ({
       from: fromProp,
@@ -26375,7 +26462,8 @@ var init_DateRangePicker = __esm({
       );
       const handlePreset = React77.useCallback(
         (preset) => {
-          const range = preset.range();
+          const range = resolvePresetRange(preset);
+          if (range === null) return;
           setFrom(range.from);
           setTo(range.to);
           setActivePreset(preset.value);
@@ -26383,8 +26471,12 @@ var init_DateRangePicker = __esm({
         },
         [emit]
       );
+      const renderablePresets = React77.useMemo(
+        () => presets.filter((p) => p.range !== void 0 || TOKEN_RANGES[p.value] !== void 0),
+        [presets]
+      );
       const presetButtons = React77.useMemo(
-        () => presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+        () => renderablePresets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
           exports.Button,
           {
             variant: activePreset === preset.value ? "primary" : "ghost",
@@ -26394,7 +26486,7 @@ var init_DateRangePicker = __esm({
           },
           preset.value
         )),
-        [presets, activePreset, handlePreset]
+        [renderablePresets, activePreset, handlePreset]
       );
       return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "sm", className: cn(className), children: [
         /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "md", align: "end", children: [
@@ -26421,7 +26513,7 @@ var init_DateRangePicker = __esm({
             )
           ] })
         ] }),
-        presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", wrap: true, children: presetButtons })
+        renderablePresets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", wrap: true, children: presetButtons })
       ] });
     };
     exports.DateRangePicker.displayName = "DateRangePicker";
@@ -29297,6 +29389,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) {
@@ -29311,6 +29605,7 @@ var init_GraphView = __esm({
     "use client";
     init_cn();
     init_atoms();
+    init_graphViewLayouts();
     GROUP_COLORS = [
       "#3b82f6",
       // blue-500
@@ -29341,11 +29636,13 @@ var init_GraphView = __esm({
       height: propHeight,
       className,
       showLabels = true,
-      zoomToFit = true
+      zoomToFit = true,
+      layout = "force"
     }) => {
       const { t } = hooks.useTranslate();
       const containerRef = React77.useRef(null);
       const animRef = React77.useRef(0);
+      const arrowMarkerId = React77.useId();
       const [simNodes, setSimNodes] = React77.useState([]);
       const [settled, setSettled] = React77.useState(false);
       const [hoveredId, setHoveredId] = React77.useState(null);
@@ -29402,6 +29699,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;
@@ -29470,7 +29783,7 @@ var init_GraphView = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [nodes, edges, w, h, groups]);
+      }, [nodes, edges, w, h, groups, layout]);
       const viewBox = React77.useMemo(() => {
         if (!zoomToFit || !settled || simNodes.length === 0) {
           return `0 0 ${w} ${h}`;
@@ -29545,6 +29858,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);
@@ -29559,8 +29885,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(
@@ -39351,7 +39679,7 @@ function parseLessonSegments(lesson) {
     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|freeform)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
+    '(?<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;