@almadar/ui 5.146.3 → 5.148.0

package/dist/runtime/index.cjs

@@ -11940,7 +11940,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]);
       React85.useEffect(() => {
@@ -13503,7 +13506,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,
@@ -24914,6 +24917,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -25108,6 +25112,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,
               {
@@ -25190,6 +25223,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,
                 {
@@ -25308,6 +25371,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,
                 {
@@ -27207,7 +27302,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";
@@ -27217,32 +27317,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,
@@ -27283,7 +27370,8 @@ var init_DateRangePicker = __esm({
       );
       const handlePreset = React85.useCallback(
         (preset) => {
-          const range = preset.range();
+          const range = resolvePresetRange(preset);
+          if (range === null) return;
           setFrom(range.from);
           setTo(range.to);
           setActivePreset(preset.value);
@@ -27291,8 +27379,12 @@ var init_DateRangePicker = __esm({
         },
         [emit]
       );
+      const renderablePresets = React85.useMemo(
+        () => presets.filter((p) => p.range !== void 0 || TOKEN_RANGES[p.value] !== void 0),
+        [presets]
+      );
       const presetButtons = React85.useMemo(
-        () => presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+        () => renderablePresets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
             variant: activePreset === preset.value ? "primary" : "ghost",
@@ -27302,7 +27394,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: [
@@ -27329,7 +27421,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";
@@ -27771,6 +27863,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) {
@@ -27785,6 +28079,7 @@ var init_GraphView = __esm({
     "use client";
     init_cn();
     init_atoms();
+    init_graphViewLayouts();
     GROUP_COLORS = [
       "#3b82f6",
       // blue-500
@@ -27815,11 +28110,13 @@ var init_GraphView = __esm({
       height: propHeight,
       className,
       showLabels = true,
-      zoomToFit = true
+      zoomToFit = true,
+      layout = "force"
     }) => {
       const { t } = hooks.useTranslate();
       const containerRef = React85.useRef(null);
       const animRef = React85.useRef(0);
+      const arrowMarkerId = React85.useId();
       const [simNodes, setSimNodes] = React85.useState([]);
       const [settled, setSettled] = React85.useState(false);
       const [hoveredId, setHoveredId] = React85.useState(null);
@@ -27876,6 +28173,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;
@@ -27944,7 +28257,7 @@ var init_GraphView = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [nodes, edges, w, h, groups]);
+      }, [nodes, edges, w, h, groups, layout]);
       const viewBox = React85.useMemo(() => {
         if (!zoomToFit || !settled || simNodes.length === 0) {
           return `0 0 ${w} ${h}`;
@@ -28019,6 +28332,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);
@@ -28033,8 +28359,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(