@audere/ui 0.3.0

package/dist/index.js

@@ -0,0 +1,1350 @@
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend, BarChart, CartesianGrid, XAxis, YAxis, ReferenceLine, Bar, AreaChart, Area } from 'recharts';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { useState, useRef, useEffect } from 'react';
+import { useLocation, Link } from 'react-router';
+import { ChevronDown, LayoutGrid, Brain, CheckSquare, TrendingUp, MessageSquare, Home, Search, Bell, Grid, LineChart, LayoutDashboard } from 'lucide-react';
+
+// src/surface/Surface.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var surfaceVariants = cva(
+  "rounded-xl border border-border bg-card text-card-foreground shadow-sm",
+  {
+    variants: {
+      padding: {
+        none: "p-0",
+        sm: "p-4",
+        md: "p-6"
+      }
+    },
+    defaultVariants: {
+      padding: "none"
+    }
+  }
+);
+function Surface({ className, padding, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "surface",
+      className: cn(surfaceVariants({ padding }), className),
+      ...props
+    }
+  );
+}
+function DataTable({
+  columns,
+  rows
+}) {
+  return /* @__PURE__ */ jsx(Surface, { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left text-sm text-foreground", children: [
+    /* @__PURE__ */ jsx("thead", { className: "border-b border-border bg-muted/50 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        scope: "col",
+        className: "px-6 py-3",
+        children: column.header
+      },
+      String(column.key)
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsx(
+      "tr",
+      {
+        className: "border-b border-border/60 bg-card transition-colors hover:bg-muted/40",
+        children: columns.map((column) => /* @__PURE__ */ jsx("td", { className: "px-6 py-4", children: column.render ? column.render(row) : String(row[column.key]) }, String(column.key)))
+      },
+      row.id
+    )) })
+  ] }) });
+}
+function MetricTile({ label, value, helperText, trend }) {
+  return /* @__PURE__ */ jsxs(Surface, { padding: "sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold text-foreground", children: value })
+    ] }),
+    helperText ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: helperText }) : null,
+    trend ? /* @__PURE__ */ jsx("div", { className: "mt-3 text-xs", children: trend }) : null
+  ] });
+}
+var toneClasses = {
+  neutral: "",
+  warning: "border-l-4 border-l-amber-500",
+  success: "border-l-4 border-l-emerald-500"
+};
+function InsightCard({
+  title,
+  tone = "neutral",
+  icon,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Surface,
+    {
+      className: cn(tone !== "neutral" && toneClasses[tone]),
+      padding: "md",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+        icon ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted", children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("h4", { className: "mb-1 text-sm font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children })
+        ] })
+      ] })
+    }
+  );
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9 rounded-md"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function CrossAppNotificationsFeedV1({
+  panelTitle = "Cross-app Notifications",
+  listHeader = "Notifications",
+  items,
+  onMarkAllRead,
+  onItemClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Surface, { padding: "none", className: cn("overflow-hidden", className), children: [
+    panelTitle ? /* @__PURE__ */ jsx("div", { className: "border-b border-border px-5 py-4", children: /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold tracking-tight text-foreground", children: panelTitle }) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border px-5 py-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: listHeader }),
+      onMarkAllRead ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", className: "h-auto p-0 text-sm", onClick: onMarkAllRead, children: "Mark all as read" }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: " " })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border", role: "list", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex w-full gap-3 px-5 py-4 text-left transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          item.read && "opacity-90"
+        ),
+        onClick: () => onItemClick?.(item.id),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground", children: item.icon }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "block text-sm leading-snug text-foreground",
+                  !item.read ? "font-bold" : "font-normal text-muted-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: !item.read ? "font-bold" : "font-semibold", children: [
+                    item.appLabel,
+                    ":"
+                  ] }),
+                  " ",
+                  item.message
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "mt-1 flex items-center gap-1 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[11px]", children: "\u25F7" }),
+              item.timeAgo
+            ] })
+          ] })
+        ]
+      }
+    ) }, item.id)) })
+  ] });
+}
+function CrossAppNotificationsFeedV2({
+  panelTitle = "Cross-app Notifications",
+  listHeader = "Notifications",
+  items,
+  onMarkAllRead,
+  onItemClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Surface, { padding: "none", className: cn("overflow-hidden bg-muted/30", className), children: [
+    panelTitle ? /* @__PURE__ */ jsx("div", { className: "border-b border-border bg-card px-5 py-4", children: /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold tracking-tight text-foreground", children: panelTitle }) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border bg-card px-5 py-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: listHeader }),
+      onMarkAllRead ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", className: "h-auto p-0 text-sm", onClick: onMarkAllRead, children: "Mark all as read" }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2 p-3", children: items.map((item) => /* @__PURE__ */ jsx(
+      Surface,
+      {
+        padding: "none",
+        className: "border-border/80 bg-card shadow-none transition-colors hover:border-primary/25",
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full gap-3 px-4 py-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            onClick: () => onItemClick?.(item.id),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted", children: item.icon }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "block text-sm leading-snug",
+                      !item.read ? "font-bold text-foreground" : "font-normal text-muted-foreground"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { className: !item.read ? "font-bold" : "font-semibold text-foreground", children: [
+                        item.appLabel,
+                        ":"
+                      ] }),
+                      " ",
+                      item.message
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs text-muted-foreground", children: item.timeAgo })
+              ] })
+            ]
+          }
+        )
+      },
+      item.id
+    )) })
+  ] });
+}
+function CrossAppNotificationsFeedV3({
+  panelTitle = "Cross-app Notifications",
+  listHeader = "Notifications",
+  items,
+  onMarkAllRead,
+  onItemClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Surface, { padding: "none", className: cn("overflow-hidden", className), children: [
+    panelTitle ? /* @__PURE__ */ jsx("div", { className: "border-b border-border px-4 py-3", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold tracking-tight text-foreground", children: panelTitle }) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: listHeader }),
+      onMarkAllRead ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", className: "h-auto p-0 text-xs", onClick: onMarkAllRead, children: "Mark all read" }) : null
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border", role: "list", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center gap-2 px-4 py-2.5 text-left text-sm hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        onClick: () => onItemClick?.(item.id),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-[10px]", children: item.icon }),
+          /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink-0 text-[10px]", children: item.appLabel }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "min-w-0 flex-1 truncate",
+                !item.read ? "font-semibold text-foreground" : "font-normal text-muted-foreground"
+              ),
+              children: item.message
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: item.timeAgo })
+        ]
+      }
+    ) }, item.id)) })
+  ] });
+}
+function ChartContainer({
+  title,
+  className = "",
+  height = 280,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Surface, { className: cn("flex flex-col overflow-hidden", className), children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "px-6 pb-2 pt-4", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "flex-1 px-4 pb-4", style: { minHeight: height }, children })
+  ] });
+}
+var AUDERE_CHART_COLORS = [
+  "#0f172a",
+  // navy900
+  "#14b8a6",
+  // teal500
+  "#64748b",
+  // slate-500
+  "#0d9488",
+  // teal-600
+  "#94a3b8",
+  // slate-400
+  "#2dd4bf"
+  // teal-400
+];
+function SharedPieChart({
+  data,
+  title,
+  height = 280,
+  showLegend = true,
+  valueLabel = "Value"
+}) {
+  return /* @__PURE__ */ jsx(ChartContainer, { title, height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(PieChart, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data,
+        cx: "50%",
+        cy: "50%",
+        innerRadius: 60,
+        outerRadius: 90,
+        paddingAngle: 2,
+        dataKey: "value",
+        nameKey: "name",
+        label: ({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`,
+        labelLine: false,
+        children: data.map((_, index) => /* @__PURE__ */ jsx(
+          Cell,
+          {
+            fill: AUDERE_CHART_COLORS[index % AUDERE_CHART_COLORS.length],
+            stroke: "white",
+            strokeWidth: 2
+          },
+          `cell-${index}`
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        formatter: (value) => [value, valueLabel],
+        contentStyle: {
+          borderRadius: "8px",
+          border: "1px solid var(--border)",
+          backgroundColor: "var(--card)",
+          color: "var(--card-foreground)",
+          boxShadow: "0 1px 3px 0 rgb(15 23 42 / 0.08)",
+          fontSize: "12px"
+        },
+        labelStyle: { color: "var(--foreground)", fontWeight: 600 }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(
+      Legend,
+      {
+        verticalAlign: "bottom",
+        height: 36,
+        formatter: (value, entry) => /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          value,
+          entry?.payload?.payload?.value != null && ` (${entry.payload.payload.value})`
+        ] })
+      }
+    )
+  ] }) }) });
+}
+var DEFAULT_FILL = "#14b8a6";
+function SharedBarChart({
+  data,
+  dataKey,
+  valueKeys = ["value"],
+  title,
+  height = 260,
+  referenceLine,
+  fill = DEFAULT_FILL
+}) {
+  const colors = ["#14b8a6", "#0f172a", "#64748b", "#0d9488"];
+  return /* @__PURE__ */ jsx(ChartContainer, { title, height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+    BarChart,
+    {
+      data,
+      margin: { top: 8, right: 8, bottom: 8, left: 8 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey,
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dy: 8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dx: -8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            contentStyle: {
+              borderRadius: "8px",
+              border: "1px solid var(--border)",
+              backgroundColor: "var(--card)",
+              color: "var(--card-foreground)",
+              boxShadow: "0 1px 3px 0 rgb(15 23 42 / 0.08)",
+              fontSize: "12px"
+            },
+            cursor: { fill: "var(--muted)" }
+          }
+        ),
+        referenceLine != null && /* @__PURE__ */ jsx(
+          ReferenceLine,
+          {
+            y: referenceLine.value,
+            stroke: "#dc2626",
+            strokeDasharray: "4 4",
+            label: {
+              value: referenceLine.label ?? "Target",
+              position: "right",
+              fontSize: 11,
+              fill: "#64748b"
+            }
+          }
+        ),
+        valueKeys.map((key, idx) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: key,
+            fill: colors[idx % colors.length],
+            radius: [4, 4, 0, 0],
+            name: key.replace(/([A-Z])/g, " $1").trim()
+          },
+          key
+        ))
+      ]
+    }
+  ) }) });
+}
+var DEFAULT_FILL2 = "#0f172a";
+var SECONDARY_FILL = "#14b8a6";
+function SharedAreaChart({
+  data,
+  dataKey,
+  valueKey,
+  title,
+  height = 260,
+  secondaryValueKey,
+  fill = DEFAULT_FILL2
+}) {
+  return /* @__PURE__ */ jsx(ChartContainer, { title, height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      data,
+      margin: { top: 8, right: 8, bottom: 8, left: 8 },
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: "areaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: fill, stopOpacity: 0.35 }),
+            /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: fill, stopOpacity: 0 })
+          ] }),
+          secondaryValueKey && /* @__PURE__ */ jsxs("linearGradient", { id: "areaFillSecondary", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: SECONDARY_FILL, stopOpacity: 0.35 }),
+            /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: SECONDARY_FILL, stopOpacity: 0 })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey,
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dy: 8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dx: -8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            contentStyle: {
+              borderRadius: "8px",
+              border: "1px solid var(--border)",
+              backgroundColor: "var(--card)",
+              color: "var(--card-foreground)",
+              boxShadow: "0 1px 3px 0 rgb(15 23 42 / 0.08)",
+              fontSize: "12px"
+            }
+          }
+        ),
+        secondaryValueKey && /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: secondaryValueKey,
+            stroke: SECONDARY_FILL,
+            strokeWidth: 2,
+            fill: "url(#areaFillSecondary)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: valueKey,
+            stroke: fill,
+            strokeWidth: 2,
+            fill: "url(#areaFill)"
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+function formatValue(value, currency = "") {
+  const abs = Math.abs(value);
+  const sign = value < 0 ? "\u2212" : "";
+  if (abs >= 1e6) return `${sign}${currency}${(abs / 1e6).toFixed(1)}M`;
+  if (abs >= 1e3) return `${sign}${currency}${(abs / 1e3).toFixed(1)}k`;
+  return `${sign}${currency}${abs.toLocaleString()}`;
+}
+function CashflowChart({
+  data,
+  title,
+  height = 260,
+  currency = "\xA3"
+}) {
+  const series = data.map((d) => ({
+    ...d,
+    net: d.net ?? d.inflow - d.outflow
+  }));
+  return /* @__PURE__ */ jsx(ChartContainer, { title, height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      data: series,
+      margin: { top: 8, right: 8, bottom: 8, left: 8 },
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "cashflowNet", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: "#14b8a6", stopOpacity: 0.4 }),
+          /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: "#14b8a6", stopOpacity: 0 })
+        ] }) }),
+        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "period",
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dy: 8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dx: -8,
+            tickFormatter: (v) => formatValue(v, currency)
+          }
+        ),
+        /* @__PURE__ */ jsx(ReferenceLine, { y: 0, stroke: "#94a3b8", strokeDasharray: "2 2" }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            contentStyle: {
+              borderRadius: "8px",
+              border: "1px solid #e2e8f0",
+              boxShadow: "0 1px 3px 0 rgb(15 23 42 / 0.08)",
+              fontSize: "12px"
+            },
+            formatter: (value, name) => [
+              formatValue(Number(value), currency),
+              name === "inflow" ? "Inflow" : name === "outflow" ? "Outflow" : "Net"
+            ],
+            labelFormatter: (label) => `Period: ${label}`,
+            content: ({ active, payload, label }) => {
+              if (!active || !payload?.length || !label) return null;
+              const row = series.find((d) => d.period === label);
+              return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card px-3 py-2 text-card-foreground shadow-sm", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-xs font-semibold", children: label }),
+                row && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-0.5 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "Inflow: ",
+                    formatValue(row.inflow, currency)
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "Outflow: ",
+                    formatValue(row.outflow, currency)
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+                    "Net: ",
+                    formatValue(row.net ?? row.inflow - row.outflow, currency)
+                  ] })
+                ] })
+              ] });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: "net",
+            stroke: "#14b8a6",
+            strokeWidth: 2,
+            fill: "url(#cashflowNet)",
+            name: "net"
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+// src/theme/colors.ts
+var cssVarName = {
+  background: "--background",
+  foreground: "--foreground",
+  card: "--card",
+  cardForeground: "--card-foreground",
+  border: "--border",
+  muted: "--muted",
+  mutedForeground: "--muted-foreground",
+  primary: "--primary",
+  primaryForeground: "--primary-foreground",
+  destructive: "--destructive",
+  accent: "--accent",
+  sidebar: "--sidebar",
+  sidebarBorder: "--sidebar-border",
+  sidebarForeground: "--sidebar-foreground",
+  chart1: "--chart-1",
+  chart2: "--chart-2",
+  chart3: "--chart-3",
+  chart4: "--chart-4",
+  chart5: "--chart-5"
+};
+function cssVar(token) {
+  return `var(${cssVarName[token]})`;
+}
+
+// src/theme/spacing.ts
+var spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  "2xl": 32
+};
+
+// src/theme/typography.ts
+var typography = {
+  fontFamily: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif",
+  sizes: {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30
+  }
+};
+
+// src/theme/shadows.ts
+var shadows = {
+  subtle: "0 1px 2px 0 rgb(15 23 42 / 0.04)",
+  card: "0 1px 3px 0 rgb(15 23 42 / 0.08)",
+  popover: "0 10px 40px rgb(15 23 42 / 0.22)"
+};
+function TaskCard({
+  status,
+  title,
+  description,
+  footer,
+  actions
+}) {
+  const statusLabel = status === "done" ? "Completed" : status === "in-progress" ? "In Progress" : "To Do";
+  return /* @__PURE__ */ jsx(
+    Surface,
+    {
+      padding: "none",
+      className: "transition-colors hover:border-primary/30",
+      children: /* @__PURE__ */ jsxs("div", { className: "px-5 pb-5 pt-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground", children: statusLabel }),
+          actions
+        ] }),
+        /* @__PURE__ */ jsx("h3", { className: "mb-1 text-sm font-semibold leading-snug text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "mb-4 line-clamp-2 text-xs text-muted-foreground", children: description }) : null,
+        footer ? /* @__PURE__ */ jsx("div", { className: "mt-4 border-t border-border pt-4 text-xs text-muted-foreground", children: footer }) : null
+      ] })
+    }
+  );
+}
+function Checklist({ title, items }) {
+  return /* @__PURE__ */ jsxs(Surface, { padding: "none", children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between rounded-t-[inherit] border-b border-border bg-muted/50 px-4 py-3", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "p-2", children: items.map((item) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "group flex cursor-pointer items-start gap-3 rounded-md p-3 transition-colors hover:bg-muted/60",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mt-0.5 h-5 w-5 rounded-full border border-border group-hover:border-primary" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: item.status === "done" ? "text-sm font-medium text-muted-foreground line-through" : "text-sm font-medium text-foreground",
+                children: item.label
+              }
+            ),
+            item.meta ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: item.meta }) : null
+          ] })
+        ]
+      },
+      item.id
+    )) })
+  ] });
+}
+function ProgressTracker({ title, steps }) {
+  return /* @__PURE__ */ jsxs(Surface, { padding: "none", children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-2 pt-4", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: title }) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "space-y-6 px-4 pb-6 pt-2", children: /* @__PURE__ */ jsx("div", { className: "relative ml-3 space-y-6 border-l-2 border-border", children: steps.map((step) => /* @__PURE__ */ jsxs("div", { className: "relative pl-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "absolute -left-[9px] top-1 flex h-4 w-4 items-center justify-center rounded-full border-2 border-border bg-card", children: [
+        step.state === "complete" ? /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-primary" }) : null,
+        step.state === "current" ? /* @__PURE__ */ jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-primary/80" }) : null
+      ] }),
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-foreground", children: step.title }),
+      step.description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: step.description }) : null
+    ] }, step.id)) }) })
+  ] });
+}
+function AIActionCard({
+  title,
+  description,
+  badge,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Surface, { padding: "md", className: "overflow-hidden border-primary/20", children: [
+    badge ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center gap-2 text-sm font-semibold text-primary", children: badge }) : null,
+    /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-medium text-foreground", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "mb-6 max-w-3xl text-muted-foreground", children: description }),
+    children ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children }) : null
+  ] });
+}
+function AIInsightPanel({
+  title,
+  children,
+  headerAccessory
+}) {
+  return /* @__PURE__ */ jsxs(
+    Surface,
+    {
+      padding: "md",
+      className: "relative overflow-hidden bg-gradient-to-br from-primary/5 via-card to-card",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+          headerAccessory
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "leading-relaxed text-foreground", children })
+      ]
+    }
+  );
+}
+function AIChatPanel({ title, messages, footer, className }) {
+  return /* @__PURE__ */ jsxs(
+    Surface,
+    {
+      padding: "none",
+      className: cn("flex flex-col", className ?? "h-[400px]"),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between rounded-t-[inherit] border-b border-border bg-muted/40 p-4", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-4 overflow-y-auto p-4", children: messages.map((message) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: message.role === "assistant" ? "flex max-w-[85%] gap-3" : "ml-auto flex max-w-[85%] justify-end gap-3",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: message.role === "assistant" ? "rounded-2xl rounded-tl-sm border border-border bg-muted p-3 text-sm text-foreground" : "rounded-2xl rounded-tr-sm bg-primary p-3 text-sm text-primary-foreground",
+                children: message.content
+              }
+            )
+          },
+          message.id
+        )) }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border p-4", children: footer }) : null
+      ]
+    }
+  );
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-xl p-[3px] flex",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "data-[state=active]:bg-card dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+function PageHeader({
+  title,
+  description,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex flex-col gap-4 border-b border-border pb-8 sm:flex-row sm:items-start sm:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight text-foreground", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground", children: description }) : null
+        ] }),
+        actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+      ]
+    }
+  );
+}
+function Section({
+  title,
+  description,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-4", className), children: [
+    title || description ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      title ? /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold tracking-tight text-foreground", children: title }) : null,
+      description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+    ] }) : null,
+    children
+  ] });
+}
+function Toolbar({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/layout/constants.ts
+var audereShell = {
+  /** Sidebar column width (Tailwind `w-64`). */
+  sidebarWidthClass: "w-64",
+  /** Offset for main column beside fixed sidebar. */
+  mainGutterClass: "pl-64",
+  /** Max width of primary content well inside the shell. */
+  contentMaxWidthClass: "max-w-6xl",
+  /** Default padding around the content well. */
+  contentPaddingClass: "p-8 lg:p-12",
+  /** Full outer shell: page canvas + typography base. */
+  pageRootClass: "flex min-h-screen bg-muted/30 font-sans text-foreground antialiased",
+  /** Fixed sidebar track (border + background use sidebar tokens). */
+  asideTrackClass: "fixed inset-y-0 z-10 flex w-64 flex-shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground",
+  /** Sticky-style header strip above content. */
+  headerStripClass: "border-b border-border bg-card/80 backdrop-blur"
+};
+function AppLayout({ sidebar, header, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: audereShell.pageRootClass, children: [
+    /* @__PURE__ */ jsx("aside", { className: audereShell.asideTrackClass, children: sidebar }),
+    /* @__PURE__ */ jsxs("main", { className: cn("flex flex-1 flex-col", audereShell.mainGutterClass), children: [
+      /* @__PURE__ */ jsx("div", { className: audereShell.headerStripClass, children: header }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mx-auto flex flex-1",
+            audereShell.contentMaxWidthClass,
+            audereShell.contentPaddingClass
+          ),
+          children
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/layout/feeModelerSidebarTokens.ts
+var feeModelerSidebarTokens = {
+  /** Outer aside: deep navy rail */
+  /** z-40: stay above main content (cards, sticky toolbars) so nav clicks always register */
+  shell: "fixed inset-y-0 z-40 flex w-64 shrink-0 flex-col bg-slate-800 text-white",
+  /** Brand / top block above nav */
+  brandRegion: "border-b border-slate-700 p-5",
+  /** Scrollable nav region (everything above footer) */
+  navScroll: "min-h-0 flex-1 space-y-0.5 overflow-y-auto p-3",
+  /** flex column wrapper: scroll + footer */
+  navRoot: "flex min-h-0 flex-1 flex-col",
+  /** Optional “back” link row */
+  backLink: "mb-2 flex items-center gap-2 rounded-md px-3 py-2 text-xs font-medium text-slate-300 hover:bg-slate-700 hover:text-white",
+  /** Home (primary rail, same size as settings footer link) */
+  primaryRailLink: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+  primaryRailLinkInactive: "text-slate-300 hover:bg-slate-700 hover:text-white",
+  primaryRailLinkActive: "bg-teal-600 text-white",
+  /** Collapsible section header button */
+  sectionTrigger: "flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm font-semibold uppercase tracking-wider text-slate-300 hover:bg-slate-700/60",
+  /** Nested item under a section */
+  nestedLink: "flex items-center gap-2 rounded-md px-3 py-1.5 text-[14px] font-medium leading-snug transition-colors",
+  nestedLinkInactive: "text-slate-400 hover:bg-slate-700 hover:text-white",
+  nestedLinkActive: "bg-teal-600 text-white",
+  nestedIcon: "h-3.5 w-3.5 shrink-0 opacity-90",
+  primaryIcon: "h-4 w-4 shrink-0",
+  sectionChevron: "h-3.5 w-3.5 shrink-0 transition-transform",
+  /** Settings (and similar) pinned footer */
+  footerRegion: "shrink-0 border-t border-slate-700 p-3 pt-2"
+};
+function ChevronRight({ open }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn(feeModelerSidebarTokens.sectionChevron, open && "rotate-90"),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+function FeeModelerAppSidebar({
+  pathname,
+  navigate,
+  Link: Link2,
+  branding,
+  home,
+  settings,
+  groups,
+  isGroupVisible,
+  backLink,
+  openGroupId,
+  onOpenGroupChange,
+  belowSettings
+}) {
+  const visibleGroups = isGroupVisible ? groups.filter(isGroupVisible) : groups;
+  const HomeIcon = home.icon;
+  const SettingsIcon = settings.icon;
+  return /* @__PURE__ */ jsxs("aside", { className: feeModelerSidebarTokens.shell, children: [
+    /* @__PURE__ */ jsx("div", { className: feeModelerSidebarTokens.brandRegion, children: branding }),
+    /* @__PURE__ */ jsxs("nav", { className: feeModelerSidebarTokens.navRoot, children: [
+      /* @__PURE__ */ jsxs("div", { className: feeModelerSidebarTokens.navScroll, children: [
+        backLink ? /* @__PURE__ */ jsx(Link2, { to: backLink.to, className: feeModelerSidebarTokens.backLink, children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-3 w-3",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              "aria-hidden": true,
+              children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+            }
+          ),
+          backLink.label
+        ] }) }) : null,
+        /* @__PURE__ */ jsxs(
+          Link2,
+          {
+            to: home.path,
+            className: cn(
+              feeModelerSidebarTokens.primaryRailLink,
+              pathname === home.path ? feeModelerSidebarTokens.primaryRailLinkActive : feeModelerSidebarTokens.primaryRailLinkInactive
+            ),
+            children: [
+              /* @__PURE__ */ jsx(HomeIcon, { className: feeModelerSidebarTokens.primaryIcon }),
+              home.label
+            ]
+          }
+        ),
+        visibleGroups.map((group) => {
+          const isOpen = openGroupId === group.id;
+          const only = group.items.length === 1 ? group.items[0] : null;
+          if (only) {
+            const isActive = pathname === only.path;
+            const OnlyIcon = only.icon;
+            return /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(
+              Link2,
+              {
+                to: only.path,
+                className: cn(
+                  feeModelerSidebarTokens.sectionTrigger,
+                  "no-underline",
+                  isActive ? "bg-teal-600 text-white hover:bg-teal-600" : ""
+                ),
+                children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(OnlyIcon, { className: feeModelerSidebarTokens.nestedIcon }),
+                  /* @__PURE__ */ jsx("span", { children: group.label })
+                ] })
+              }
+            ) }, group.id);
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  if (isOpen) {
+                    onOpenGroupChange(null);
+                    return;
+                  }
+                  const first = group.items[0];
+                  if (first) {
+                    if (pathname !== first.path) {
+                      navigate(first.path);
+                    }
+                    onOpenGroupChange(group.id);
+                  }
+                },
+                className: feeModelerSidebarTokens.sectionTrigger,
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: group.label }),
+                  /* @__PURE__ */ jsx(ChevronRight, { open: isOpen })
+                ]
+              }
+            ),
+            isOpen && /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: group.items.map((item) => {
+              const isActive = pathname === item.path;
+              const Icon = item.icon;
+              return /* @__PURE__ */ jsxs(
+                Link2,
+                {
+                  to: item.path,
+                  className: cn(
+                    feeModelerSidebarTokens.nestedLink,
+                    isActive ? feeModelerSidebarTokens.nestedLinkActive : feeModelerSidebarTokens.nestedLinkInactive
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { className: feeModelerSidebarTokens.nestedIcon }),
+                    item.label
+                  ]
+                },
+                item.path
+              );
+            }) })
+          ] }, group.id);
+        })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: feeModelerSidebarTokens.footerRegion, children: [
+        /* @__PURE__ */ jsxs(
+          Link2,
+          {
+            to: settings.path,
+            className: cn(
+              feeModelerSidebarTokens.primaryRailLink,
+              pathname === settings.path ? feeModelerSidebarTokens.primaryRailLinkActive : feeModelerSidebarTokens.primaryRailLinkInactive
+            ),
+            children: [
+              /* @__PURE__ */ jsx(SettingsIcon, { className: feeModelerSidebarTokens.primaryIcon }),
+              settings.label
+            ]
+          }
+        ),
+        belowSettings ?? null
+      ] })
+    ] })
+  ] });
+}
+var PLATFORM_APPS = [
+  { name: "Audere Hub", path: "/hub", icon: LayoutGrid, iconBg: "bg-slate-700" },
+  { name: "CoachAI", path: "/coachai", icon: Brain, iconBg: "bg-teal-600" },
+  { name: "RoleAudit", path: "/roleaudit", icon: CheckSquare, iconBg: "bg-blue-600" },
+  { name: "FeeModeler", path: "/feemodeler", icon: TrendingUp, iconBg: "bg-indigo-600" },
+  { name: "Marketos", path: "/marketos", icon: MessageSquare, iconBg: "bg-violet-600" },
+  { name: "Finsight", path: "/finsight", icon: LayoutGrid, iconBg: "bg-emerald-600" },
+  { name: "Practice Evolution", path: "/home", icon: Home, iconBg: "bg-slate-600" }
+];
+function getCurrentApp(pathname) {
+  if (pathname.startsWith("/hub")) return PLATFORM_APPS[0];
+  if (pathname.startsWith("/marketos")) return PLATFORM_APPS[4];
+  if (pathname.startsWith("/finsight")) return PLATFORM_APPS[5];
+  if (pathname.startsWith("/home")) return PLATFORM_APPS[6];
+  if (pathname.startsWith("/roleaudit")) return PLATFORM_APPS[2];
+  if (pathname.startsWith("/feemodeler")) return PLATFORM_APPS[3];
+  if (pathname.startsWith("/coachai")) return PLATFORM_APPS[1];
+  return PLATFORM_APPS[0];
+}
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function AppSwitcher({ className }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const location = useLocation();
+  const current = getCurrentApp(location.pathname);
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const CurrentIcon = current.icon;
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn2("relative", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "flex items-center gap-2 h-9 px-3 rounded-md border border-slate-200 bg-white text-sm font-medium text-slate-800 hover:bg-slate-50 min-w-[140px] justify-between",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 truncate", children: [
+            /* @__PURE__ */ jsx("span", { className: cn2("flex h-5 w-5 shrink-0 items-center justify-center rounded text-white", current.iconBg), children: /* @__PURE__ */ jsx(CurrentIcon, { className: "h-3 w-3" }) }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: current.name })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: cn2("h-4 w-4 shrink-0 text-slate-400 transition-transform", open && "rotate-180") })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-full mt-1 w-64 rounded-lg border border-slate-200 bg-white py-1 shadow-lg z-50", children: PLATFORM_APPS.map((app) => {
+      const Icon = app.icon;
+      const isCurrent = app.path === current.path;
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: cn2("flex h-6 w-6 shrink-0 items-center justify-center rounded text-white", app.iconBg), children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: app.name })
+      ] });
+      return app.path.startsWith("#") ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: app.path,
+          className: cn2(
+            "flex items-center gap-3 px-3 py-2 text-sm rounded-md mx-1 transition-colors",
+            isCurrent ? "bg-teal-50 text-teal-800" : "text-slate-700 hover:bg-slate-50"
+          ),
+          children: content
+        },
+        app.name
+      ) : /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: app.path,
+          onClick: () => setOpen(false),
+          className: cn2(
+            "flex items-center gap-3 px-3 py-2 text-sm rounded-md mx-1 transition-colors",
+            isCurrent ? "bg-teal-50 text-teal-800" : "text-slate-700 hover:bg-slate-50"
+          ),
+          children: content
+        },
+        app.name
+      );
+    }) })
+  ] });
+}
+function WorkspaceSelector() {
+  return /* @__PURE__ */ jsx("div", { className: "border border-slate-200 rounded-lg w-64 bg-white shadow-sm", children: /* @__PURE__ */ jsxs("button", { className: "flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-slate-900 hover:bg-slate-50 rounded-lg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center text-xs font-bold text-slate-600", children: "AF" }),
+      /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-semibold text-slate-900", children: "Acme Financial" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500", children: "Enterprise Plan" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-slate-400" })
+  ] }) });
+}
+function TopNavigation() {
+  return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between border-b border-slate-100 bg-white px-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("span", { className: "text-base font-semibold tracking-tight text-slate-900", children: "Audere Hub" }) }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-slate-200" }),
+      /* @__PURE__ */ jsxs("button", { className: "flex items-center gap-2 text-sm font-medium text-slate-600 hover:text-slate-900", children: [
+        "Acme Financial ",
+        /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-slate-400" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center px-8", children: /* @__PURE__ */ jsxs("div", { className: "group flex h-9 w-full max-w-md items-center gap-2 rounded-md border border-slate-200 bg-slate-50 px-3 text-sm text-slate-500 ring-offset-white transition-colors hover:border-slate-300 focus-within:border-teal-500 focus-within:ring-2 focus-within:ring-teal-500 focus-within:ring-offset-2", children: [
+      /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-slate-400" }),
+      /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Search anything..." }),
+      /* @__PURE__ */ jsxs("kbd", { className: "hidden h-5 items-center gap-1 rounded border border-slate-200 bg-white px-1.5 font-mono text-[10px] font-medium text-slate-500 sm:flex", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
+        "K"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxs("button", { className: "text-slate-400 hover:text-slate-600 relative", children: [
+        /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsx("span", { className: "absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-slate-200 flex items-center justify-center text-xs font-medium text-slate-600 border border-slate-300 cursor-pointer", children: "JS" })
+    ] })
+  ] }) });
+}
+var PLATFORM_ITEMS = [
+  { name: "Hub", icon: Grid, active: true },
+  { name: "CoachAI", icon: Brain, active: false },
+  { name: "RoleAudit", icon: CheckSquare, active: false },
+  { name: "FeeModeler", icon: LineChart, active: false },
+  { name: "Marketos", icon: MessageSquare, active: false },
+  { name: "Finsight", icon: LayoutDashboard, active: false }
+];
+function PlatformSidebarMode() {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-900 p-6 shadow-sm flex flex-col justify-start", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-white mb-6", children: "Platform Mode" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 w-56", children: PLATFORM_ITEMS.map((item) => {
+      const Icon = item.icon;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex items-center gap-3 px-3 py-2 rounded-md text-sm cursor-pointer transition-colors ${item.active ? "bg-teal-500/10 text-teal-400 font-medium" : "text-slate-400 hover:bg-slate-800 hover:text-white"}`,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+            item.name
+          ]
+        },
+        item.name
+      );
+    }) })
+  ] });
+}
+
+export { AIActionCard, AIChatPanel, AIInsightPanel, AppLayout, AppSwitcher, Badge, Button, CashflowChart, ChartContainer, Checklist, CrossAppNotificationsFeedV1, CrossAppNotificationsFeedV2, CrossAppNotificationsFeedV3, DataTable, FeeModelerAppSidebar, Input, InsightCard, MetricTile, PageHeader, ProgressTracker, Section, SharedAreaChart, SharedBarChart, SharedPieChart, PlatformSidebarMode as SidebarNavigation, Surface, Tabs, TabsContent, TabsList, TabsTrigger, TaskCard, Toolbar, TopNavigation, WorkspaceSelector, audereShell, badgeVariants, buttonVariants, cssVar, cssVarName, feeModelerSidebarTokens, shadows, spacing, surfaceVariants, typography };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map