@web-my-money/blocks 1.0.0

package/dist/app.js

@@ -0,0 +1,1293 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/app.ts
+var app_exports = {};
+__export(app_exports, {
+  ActivityFeed: () => ActivityFeed,
+  AppBrand: () => AppBrand,
+  AppShell: () => AppShell,
+  AppearanceSettings: () => AppearanceSettings,
+  BrandFrame: () => BrandFrame,
+  DashboardHeader: () => DashboardHeader,
+  DataSummaryCards: () => DataSummaryCards,
+  DataTable: () => DataTable,
+  EmptyState: () => EmptyState,
+  GlassPanel: () => GlassPanel,
+  KPIRow: () => KPIRow,
+  LayoutToggle: () => LayoutToggle,
+  LightboxGallery: () => LightboxGallery,
+  NotificationBanner: () => NotificationBanner,
+  PageHeader: () => PageHeader,
+  PageHeaderBanner: () => PageHeaderBanner,
+  SidebarNavigation: () => SidebarNavigation,
+  StatCard: () => StatCard,
+  SubTabs: () => SubTabs,
+  Thumbnail: () => Thumbnail,
+  useActionRunner: () => useActionRunner,
+  useLayoutPreference: () => useLayoutPreference,
+  useOptimisticAction: () => useOptimisticAction
+});
+module.exports = __toCommonJS(app_exports);
+
+// src/notification-banner/index.tsx
+var React = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
+var import_lucide_react = require("lucide-react");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/notification-banner/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var variantConfig = {
+  info: { icon: import_lucide_react.Info, classes: "bg-primary/10 border-primary/20", iconClass: "text-primary" },
+  success: { icon: import_lucide_react.CheckCircle2, classes: "bg-emerald-500/10 border-emerald-500/20", iconClass: "text-emerald-500" },
+  warning: { icon: import_lucide_react.AlertTriangle, classes: "bg-amber-500/10 border-amber-500/20", iconClass: "text-amber-500" },
+  danger: { icon: import_lucide_react.AlertCircle, classes: "bg-destructive/10 border-destructive/20", iconClass: "text-destructive" },
+  brand: { icon: import_lucide_react.Info, classes: "border-0", iconClass: "text-white" }
+};
+function NotificationBanner({
+  variant = "info",
+  message,
+  action,
+  dismissible = true,
+  onDismiss,
+  visible = true,
+  className
+}) {
+  const [open, setOpen] = React.useState(true);
+  const show = visible && open;
+  const dismiss = () => {
+    setOpen(false);
+    onDismiss?.();
+  };
+  const cfg = variantConfig[variant];
+  const Icon = cfg.icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: show && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      transition: { duration: 0.2, ease: "easeInOut" },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: cn(
+            "relative flex items-center justify-center gap-3 px-4 py-2.5 text-sm border-b",
+            variant === "brand" ? "text-white" : "text-foreground",
+            cfg.classes,
+            className
+          ),
+          style: variant === "brand" ? { background: "var(--gradient-primary, var(--primary))" } : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: 15, className: cn("shrink-0", cfg.iconClass) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: cn("text-center", variant === "brand" ? "text-white" : "text-foreground/90"), children: [
+              message,
+              action && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                " ",
+                action.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "a",
+                  {
+                    href: action.href,
+                    className: cn(
+                      "underline underline-offset-2 font-medium ml-1",
+                      variant === "brand" ? "text-white/90 hover:text-white" : "text-primary hover:text-primary/80"
+                    ),
+                    children: action.label
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    onClick: action.onClick,
+                    className: cn(
+                      "underline underline-offset-2 font-medium ml-1",
+                      variant === "brand" ? "text-white/90 hover:text-white" : "text-primary hover:text-primary/80"
+                    ),
+                    children: action.label
+                  }
+                )
+              ] })
+            ] }),
+            dismissible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                onClick: dismiss,
+                "aria-label": "Dismiss",
+                className: cn(
+                  "absolute right-3 rounded p-1 transition-colors",
+                  variant === "brand" ? "text-white/70 hover:text-white hover:bg-white/10" : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { size: 14 })
+              }
+            )
+          ]
+        }
+      )
+    },
+    "banner"
+  ) });
+}
+
+// src/stat-card/index.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function inferStatus(delta) {
+  if (!delta) return "flat";
+  if (delta.startsWith("+") || !delta.startsWith("-") && parseFloat(delta) > 0) return "up";
+  if (delta.startsWith("-") || parseFloat(delta) < 0) return "down";
+  return "flat";
+}
+var statusColors = {
+  success: "text-emerald-500",
+  warning: "text-amber-500",
+  danger: "text-red-500",
+  info: "text-primary"
+};
+function StatCard({
+  title,
+  value,
+  delta,
+  deltaLabel,
+  icon,
+  chart,
+  status,
+  className
+}) {
+  const trend = inferStatus(delta);
+  const deltaColor = status ? statusColors[status] : trend === "up" ? "text-emerald-500" : trend === "down" ? "text-red-500" : "text-muted-foreground";
+  const TrendIcon = trend === "up" ? import_lucide_react2.TrendingUp : trend === "down" ? import_lucide_react2.TrendingDown : import_lucide_react2.Minus;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative flex flex-col gap-3 rounded-xl border bg-card p-5 overflow-hidden",
+        "border-border",
+        className
+      ),
+      style: { boxShadow: "var(--shadow-card)" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-x-0 top-0 h-px opacity-60",
+            style: { background: "var(--gradient-primary, var(--primary))" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider truncate", children: title }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "shrink-0 text-muted-foreground/60", children: icon })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-3xl font-bold text-foreground tracking-tight tabular-nums", children: typeof value === "number" ? value.toLocaleString() : value }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-end justify-between gap-2 mt-auto", children: [
+          delta ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("flex items-center gap-1 text-xs font-medium", deltaColor), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TrendIcon, { size: 13, strokeWidth: 2.5 }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: delta }),
+            deltaLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground font-normal", children: deltaLabel })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {}),
+          chart && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "shrink-0", children: chart })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/page-header/index.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function PageHeader({
+  title,
+  description,
+  breadcrumb,
+  actions,
+  below,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "header",
+    {
+      className: cn(
+        "flex flex-col gap-4 pb-6 border-b border-border",
+        className
+      ),
+      children: [
+        breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ol", { className: "flex items-center gap-1 flex-wrap", children: breadcrumb.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: "flex items-center gap-1", children: [
+          i > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.ChevronRight, { size: 12, className: "text-muted-foreground/50" }),
+          item.href ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "a",
+            {
+              href: item.href,
+              className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-muted-foreground", children: item.label })
+        ] }, i)) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "text-2xl font-bold tracking-tight text-foreground", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-muted-foreground max-w-xl", children: description })
+          ] }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center gap-2 flex-wrap", children: actions })
+        ] }),
+        below && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: below })
+      ]
+    }
+  );
+}
+
+// src/empty-state/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  secondaryAction,
+  variant = "page",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center text-center",
+        variant === "page" ? "min-h-[360px] justify-center px-6 py-20" : "rounded-xl border border-border border-dashed bg-card/50 px-6 py-12",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: "mb-5 flex h-14 w-14 items-center justify-center rounded-xl border border-border bg-muted/40 text-muted-foreground",
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-base font-semibold text-foreground mb-2", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-muted-foreground max-w-xs mb-6", children: description }),
+        (action || secondaryAction) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col sm:flex-row items-center gap-3", children: [
+          action,
+          secondaryAction
+        ] })
+      ]
+    }
+  );
+}
+
+// src/dashboard-header/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function DashboardHeader({
+  pageTitle,
+  notificationsCount = 0,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "header",
+    {
+      className: cn(
+        "flex h-14 lg:h-[60px] items-center gap-4 border-b bg-muted/20 px-6 justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "font-semibold text-lg", children: pageTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-4", children: [
+          notificationsCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "h-5 w-5 rounded-full bg-primary/20 aspect-square text-[10px] font-bold flex items-center justify-center", children: notificationsCount }) }),
+          actions
+        ] })
+      ]
+    }
+  );
+}
+
+// src/data-summary-cards/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function DataSummaryCards({
+  metrics,
+  columns = 4,
+  className
+}) {
+  const gridCols = {
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-2 lg:grid-cols-4"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("grid gap-4", gridCols[columns], className), children: metrics.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: "rounded-xl bg-card p-4 text-card-foreground ring-1 ring-foreground/10",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm font-medium text-muted-foreground", children: item.title }),
+          item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-4 w-4 rounded bg-muted-foreground/20" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-2xl font-bold", children: item.value }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: item.description })
+      ]
+    },
+    i
+  )) });
+}
+
+// src/data-table/index.tsx
+var React2 = __toESM(require("react"));
+var import_pagination = require("@web-my-money/primitives/pagination");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DataTable({
+  title,
+  columns,
+  rows,
+  activeBadgeLabel = "Active",
+  className,
+  pageSize,
+  page: controlledPage,
+  onPageChange
+}) {
+  const [uncontrolledPage, setUncontrolledPage] = React2.useState(1);
+  const page = controlledPage ?? uncontrolledPage;
+  const pageCount = pageSize ? Math.max(1, Math.ceil(rows.length / pageSize)) : 1;
+  const visibleRows = pageSize ? rows.slice((page - 1) * pageSize, page * pageSize) : rows;
+  const setPage = (next) => {
+    setUncontrolledPage(next);
+    onPageChange?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("rounded-md border", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "p-4 border-b bg-muted/10 font-medium text-lg", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { className: "border-b bg-muted/20", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "th",
+        {
+          className: cn(
+            "font-medium p-4",
+            i === 0 ? "text-left" : i === columns.length - 1 ? "text-right" : "text-left"
+          ),
+          children: col
+        },
+        col
+      )) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: visibleRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "tr",
+        {
+          className: "border-b last:border-0 hover:bg-muted/10 transition-colors",
+          children: row.cells.map((cell, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "td",
+            {
+              className: cn(
+                "p-4",
+                i === 0 ? "font-medium" : i === columns.length - 1 ? "text-right font-medium" : "text-muted-foreground"
+              ),
+              children: i === 1 && row.isActive ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-primary/10 text-primary", children: activeBadgeLabel }) : cell
+            },
+            i
+          ))
+        },
+        row.id
+      )) })
+    ] }) }),
+    pageSize && pageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-center border-t p-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_pagination.PaginationBar, { page, pageCount, onPageChange: setPage }) })
+  ] });
+}
+
+// src/sidebar-navigation/index.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SidebarNavigation({
+  appName,
+  userName,
+  menuItems,
+  footer,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "aside",
+    {
+      className: cn(
+        "w-64 border-r bg-muted/20 h-screen hidden md:flex flex-col",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-14 border-b flex items-center px-4 font-bold text-lg", children: appName }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { className: "flex-1 overflow-auto py-4 px-2 space-y-2", children: menuItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "a",
+          {
+            href: item.href ?? "#",
+            className: cn(
+              "flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer transition-colors",
+              item.active ? "bg-primary/10 text-primary" : "hover:bg-muted text-muted-foreground"
+            ),
+            children: [
+              item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "h-4 w-4 mr-3 rounded",
+                    item.active ? "bg-primary/50" : "bg-muted-foreground/30"
+                  )
+                }
+              ),
+              item.label
+            ]
+          },
+          i
+        )) }),
+        (userName || footer) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "p-4 border-t text-sm font-medium", children: footer ?? userName })
+      ]
+    }
+  );
+}
+
+// src/kpi-row/index.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function inferTrend(delta) {
+  if (!delta) return "flat";
+  if (delta.startsWith("+") || parseFloat(delta) > 0) return "up";
+  if (delta.startsWith("-") || parseFloat(delta) < 0) return "down";
+  return "flat";
+}
+var deltaColorMap = {
+  up: "text-emerald-500",
+  down: "text-red-500",
+  flat: "text-muted-foreground"
+};
+var statusColorMap = {
+  success: "text-emerald-500",
+  warning: "text-amber-500",
+  danger: "text-red-500",
+  neutral: "text-muted-foreground"
+};
+function KPIRow({ items, dividers = true, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: cn(
+        "grid w-full rounded-xl border border-border bg-card",
+        `grid-cols-${Math.min(items.length, 4)} sm:grid-cols-${items.length}`,
+        className
+      ),
+      style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
+      children: items.map((item, i) => {
+        const trend = inferTrend(item.delta);
+        const deltaColor = item.status ? statusColorMap[item.status] : deltaColorMap[trend];
+        const TrendIcon = trend === "up" ? import_lucide_react4.TrendingUp : trend === "down" ? import_lucide_react4.TrendingDown : import_lucide_react4.Minus;
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-1 px-5 py-4",
+              dividers && i < items.length - 1 && "border-r border-border"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground truncate", children: item.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-2xl font-bold tabular-nums text-foreground", children: [
+                item.prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-lg font-medium text-muted-foreground", children: item.prefix }),
+                typeof item.value === "number" ? item.value.toLocaleString() : item.value,
+                item.suffix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-lg font-medium text-muted-foreground ml-0.5", children: item.suffix })
+              ] }),
+              item.delta && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("flex items-center gap-1 text-xs font-medium", deltaColor), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TrendIcon, { size: 11, strokeWidth: 2.5, "aria-hidden": true }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: item.delta }),
+                item.deltaLabel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-normal text-muted-foreground", children: item.deltaLabel })
+              ] })
+            ]
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+// src/activity-feed/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var typeDot = {
+  task: "bg-primary",
+  comment: "bg-sky-500",
+  alert: "bg-amber-500",
+  success: "bg-emerald-500",
+  info: "bg-muted-foreground",
+  user: "bg-violet-500"
+};
+function getInitials(text) {
+  if (!text) return "?";
+  const w = text.trim().split(/\s+/);
+  return w.length === 1 ? w[0].slice(0, 2).toUpperCase() : (w[0][0] + w[w.length - 1][0]).toUpperCase();
+}
+function ActivityFeed({
+  items,
+  timeline = true,
+  compact = false,
+  className,
+  emptyMessage = "No activity yet."
+}) {
+  if (!items.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("py-10 text-center text-sm text-muted-foreground", className), children: emptyMessage });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: cn("flex flex-col", compact ? "gap-1" : "gap-0", className), children: items.map((item, i) => {
+    const dotColor = item.dotColor ?? typeDot[item.type ?? "info"];
+    const isLast = i === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: cn("relative flex gap-4", compact ? "py-2 px-1" : "py-3 px-1"), children: [
+      timeline && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center shrink-0", style: { width: 28 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("mt-0.5 size-2.5 rounded-full ring-2 ring-background shrink-0", dotColor) }),
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mt-1 w-px flex-1 bg-border", style: { minHeight: compact ? 16 : 24 } })
+      ] }),
+      !timeline && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mt-0.5 shrink-0 inline-flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground overflow-hidden", children: item.icon ?? (item.avatar ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: item.avatar, alt: item.initials ?? "", className: "size-full object-cover" }) : getInitials(item.initials ?? item.title)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: cn("text-sm font-medium text-foreground leading-snug", compact && "text-xs"), children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground whitespace-nowrap", children: item.timestamp })
+        ] }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground line-clamp-2", children: item.description }),
+        item.meta && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-1 text-[11px] text-muted-foreground/70", children: item.meta })
+      ] })
+    ] }, item.id);
+  }) });
+}
+
+// src/app-shell/index.tsx
+var React3 = __toESM(require("react"));
+var import_lucide_react5 = require("lucide-react");
+var import_dropdown_menu = require("@web-my-money/primitives/dropdown-menu");
+
+// src/app-brand/index.tsx
+var import_jsx_runtime11 = (
+  // Mini-logo placeholder — first letter on a primary chip.
+  require("react/jsx-runtime")
+);
+var MARK_SIZE = { sm: "size-6 text-xs", md: "size-7 text-sm" };
+var TITLE_SIZE = { sm: "text-[13px]", md: "text-sm" };
+function AppBrand({
+  appName,
+  prefix = "WMM",
+  logo,
+  subtitle,
+  badge,
+  href,
+  collapsed = false,
+  size = "md",
+  renderLink,
+  className
+}) {
+  const mark = logo ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "span",
+    {
+      className: cn(
+        "grid shrink-0 place-items-center rounded-lg bg-primary font-bold text-primary-foreground",
+        MARK_SIZE[size]
+      ),
+      "aria-hidden": true,
+      children: appName.slice(0, 1)
+    }
+  );
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex items-center gap-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "grid shrink-0 place-items-center [&_svg]:h-auto", children: mark }),
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex min-w-0 flex-col leading-tight", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: cn("truncate font-semibold tracking-tight", TITLE_SIZE[size]), children: [
+          prefix && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-muted-foreground", children: [
+            prefix,
+            " "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-primary", children: appName })
+        ] }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: subtitle })
+      ] }),
+      badge != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "border-l border-border pl-2 text-sm font-semibold text-muted-foreground", children: badge })
+    ] })
+  ] });
+  const cls = cn("inline-flex items-center", className);
+  if (href && renderLink) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: renderLink({ href, className: cls, children: inner }) });
+  if (href)
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("a", { href, className: cls, children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cls, children: inner });
+}
+
+// src/app-shell/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var railW = "w-14";
+var openW = "w-56";
+var LAYOUT_KEY = "wmm-app-layout";
+function isGroup(n) {
+  return Array.isArray(n.items) && !("href" in n) && !("onClick" in n) && !("icon" in n) && !("badge" in n) && !("shortLabel" in n) && !("external" in n);
+}
+function toGroups(nav) {
+  if (!nav.length) return [];
+  return isGroup(nav[0]) ? nav : [{ items: nav }];
+}
+function allItems(groups) {
+  return groups.flatMap((g) => g.items);
+}
+function withActive(item, pathname) {
+  if (item.active !== void 0 || !pathname || !item.href) return item;
+  const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+  return active ? { ...item, active } : item;
+}
+var LayoutContext = React3.createContext(null);
+function useLayoutPreference(defaultLayout = "sidebar") {
+  const [layout, setLayoutState] = React3.useState(defaultLayout);
+  React3.useEffect(() => {
+    try {
+      const saved = window.localStorage.getItem(LAYOUT_KEY);
+      if (saved === "sidebar" || saved === "top") setLayoutState(saved);
+    } catch {
+    }
+  }, []);
+  const setLayout = React3.useCallback((l) => {
+    setLayoutState(l);
+    try {
+      window.localStorage.setItem(LAYOUT_KEY, l);
+    } catch {
+    }
+  }, []);
+  return [layout, setLayout];
+}
+function LayoutToggle({ className }) {
+  const ctx = React3.useContext(LayoutContext);
+  if (!ctx) return null;
+  const next = ctx.layout === "sidebar" ? "top" : "sidebar";
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: () => ctx.setLayout(next),
+      className: cn(
+        "inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        className
+      ),
+      "aria-label": `Switch to ${next} layout`,
+      title: `Switch to ${next} layout`,
+      children: ctx.layout === "sidebar" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.PanelTop, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.PanelLeft, { className: "size-4" })
+    }
+  );
+}
+function SidebarNavRow({
+  item,
+  collapsed,
+  renderLink,
+  onNavigate,
+  nested
+}) {
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "span",
+    {
+      className: cn(
+        "flex items-center gap-2.5 rounded-md px-2.5 py-2 text-[13px] font-medium transition-colors",
+        item.active ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+        collapsed && "justify-center px-0",
+        nested && !collapsed && "ml-3.5 py-1.5"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "grid size-[15px] shrink-0 place-items-center [&_svg]:size-[15px]", children: item.icon }),
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex-1 truncate", children: [
+          item.label,
+          item.external && " \u2197"
+        ] }),
+        !collapsed && item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rounded bg-danger/20 px-1.5 py-px text-[10px] font-semibold text-danger", children: item.badge })
+      ]
+    }
+  );
+  const cls = "block";
+  if (item.href && item.external)
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: item.href, target: "_blank", rel: "noopener noreferrer", className: cls, onClick: onNavigate, children: inner });
+  if (item.href && renderLink) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderLink({ href: item.href, className: cls, children: inner }) });
+  if (item.href)
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: item.href, className: cls, onClick: onNavigate, children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: cn(cls, "w-full text-left"), onClick: () => {
+    item.onClick?.();
+    onNavigate?.();
+  }, children: inner });
+}
+function SectionHeader({
+  group,
+  open,
+  onToggle
+}) {
+  if (!group.collapsible) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-2.5 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground", children: group.label });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      className: "flex w-full items-center gap-1 px-2.5 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground transition-colors hover:text-foreground",
+      children: [
+        open ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronDown, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronRight, { className: "size-3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1 text-left", children: group.label })
+      ]
+    }
+  );
+}
+function TopLink({
+  item,
+  renderLink
+}) {
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-[13px] font-medium transition-colors [&_svg]:size-4",
+        item.active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+      ),
+      children: [
+        item.icon,
+        item.label,
+        item.external && " \u2197",
+        item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rounded bg-danger/20 px-1.5 text-[10px] font-semibold text-danger", children: item.badge })
+      ]
+    }
+  );
+  if (item.href && item.external)
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: item.href, target: "_blank", rel: "noopener noreferrer", children: inner });
+  if (item.href && renderLink) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderLink({ href: item.href, children: inner }) });
+  if (item.href) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: item.href, children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", onClick: item.onClick, children: inner });
+}
+function TopDropdown({
+  label,
+  items,
+  renderLink
+}) {
+  const hasBadge = items.some((i) => i.badge != null && i.badge !== 0);
+  const anyActive = items.some((i) => i.active);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_dropdown_menu.DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      import_dropdown_menu.DropdownMenuTrigger,
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-[13px] font-medium transition-colors hover:bg-muted hover:text-foreground",
+          anyActive ? "text-foreground" : "text-muted-foreground"
+        ),
+        children: [
+          label,
+          hasBadge && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "size-1.5 rounded-full bg-primary", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ChevronDown, { className: "size-3.5 opacity-50" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_dropdown_menu.DropdownMenuContent, { align: "start", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      import_dropdown_menu.DropdownMenuItem,
+      {
+        className: cn(item.active && "text-primary"),
+        onClick: item.onClick,
+        render: item.href ? item.external ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: item.href, target: "_blank", rel: "noopener noreferrer" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: item.href }) : void 0,
+        children: [
+          item.icon,
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex-1", children: [
+            item.label,
+            item.external && " \u2197"
+          ] }),
+          item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rounded bg-danger/20 px-1.5 text-[10px] font-semibold text-danger", children: item.badge })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+function AppShell({
+  appName,
+  brandPrefix,
+  logo,
+  brandSubtitle,
+  brandBadge,
+  nav,
+  mobileTabs,
+  user,
+  headerActions,
+  sidebarFooter,
+  layout: layoutProp,
+  defaultLayout = "sidebar",
+  onLayoutChange,
+  pathname,
+  contained = false,
+  defaultCollapsed = false,
+  renderLink,
+  children,
+  className
+}) {
+  const [uncontrolled, setUncontrolled] = useLayoutPreference(defaultLayout);
+  const layout = layoutProp ?? uncontrolled;
+  const setLayout = React3.useCallback(
+    (l) => {
+      onLayoutChange?.(l);
+      if (layoutProp === void 0) setUncontrolled(l);
+    },
+    [onLayoutChange, layoutProp, setUncontrolled]
+  );
+  const layoutCtx = React3.useMemo(() => ({ layout, setLayout }), [layout, setLayout]);
+  const [collapsed, setCollapsed] = React3.useState(defaultCollapsed);
+  const [drawer, setDrawer] = React3.useState(false);
+  const [open, setOpen] = React3.useState({});
+  const groups = React3.useMemo(() => {
+    const gs = toGroups(nav);
+    return gs.map((g) => ({ ...g, items: g.items.map((it) => withActive(it, pathname)) }));
+  }, [nav, pathname]);
+  const flat = React3.useMemo(() => allItems(groups), [groups]);
+  const tabs = (mobileTabs ?? flat).slice(0, 5);
+  const brand = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    AppBrand,
+    {
+      appName,
+      prefix: brandPrefix,
+      logo,
+      subtitle: brandSubtitle,
+      badge: brandBadge,
+      renderLink
+    }
+  );
+  const isOpen = (g, i) => !g.collapsible || (open[g.label ?? String(i)] ?? g.defaultOpen ?? true);
+  const SidebarBody = ({ isCollapsed, onNavigate }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex h-12 items-center gap-2 border-b border-border px-3", isCollapsed && "justify-center px-0"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AppBrand, { appName, prefix: brandPrefix, logo, subtitle: brandSubtitle, collapsed: isCollapsed, renderLink, href: "/" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setCollapsed((c) => !c),
+          className: "ml-auto hidden rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground md:inline-flex",
+          "aria-label": "Toggle sidebar",
+          children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.PanelLeft, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.PanelLeftClose, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { className: "flex-1 space-y-0.5 overflow-y-auto p-2", children: groups.map((g, gi) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn(gi > 0 && !g.label && "mt-1"), children: [
+      g.label && !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        SectionHeader,
+        {
+          group: g,
+          open: isOpen(g, gi),
+          onToggle: () => setOpen((o) => ({ ...o, [g.label ?? String(gi)]: !isOpen(g, gi) }))
+        }
+      ),
+      isOpen(g, gi) && g.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(React3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarNavRow, { item, collapsed: isCollapsed, renderLink, onNavigate }),
+        !isCollapsed && item.items?.map((sub, si) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarNavRow, { item: withActive(sub, pathname), renderLink, onNavigate, nested: true }, si))
+      ] }, i))
+    ] }, g.label ?? gi)) }),
+    (sidebarFooter || user) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "border-t border-border p-2", children: [
+      sidebarFooter,
+      user && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("mt-1", isCollapsed && "flex justify-center"), children: user })
+    ] })
+  ] });
+  const MobileDrawer = () => drawer ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fixed inset-0 z-50 md:hidden", role: "dialog", "aria-modal": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-0 bg-black/50", onClick: () => setDrawer(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "absolute inset-y-0 left-0 w-[80vw] max-w-xs border-r border-border bg-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setDrawer(false),
+          className: "absolute right-2 top-2 rounded-md p-1.5 text-muted-foreground hover:bg-muted",
+          "aria-label": "Close menu",
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.X, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarBody, { isCollapsed: false, onNavigate: () => setDrawer(false) })
+    ] })
+  ] }) : null;
+  const BottomTabs = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "nav",
+    {
+      className: "fixed inset-x-0 bottom-0 z-40 flex h-14 items-stretch border-t border-border bg-card md:hidden",
+      style: { paddingBottom: "env(safe-area-inset-bottom)" },
+      children: tabs.map((item, i) => {
+        const content = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: cn("flex h-full flex-1 flex-col items-center justify-center gap-0.5", item.active ? "text-primary" : "text-muted-foreground"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "grid size-5 place-items-center [&_svg]:size-5", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] font-medium leading-none", children: item.shortLabel ?? item.label })
+        ] });
+        return item.href && item.external ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: item.href, target: "_blank", rel: "noopener noreferrer", className: "flex-1", children: content }, i) : item.href && renderLink ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(React3.Fragment, { children: renderLink({ href: item.href, className: "flex-1", children: content }) }, i) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: item.href, className: "flex-1", children: content }, i) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "flex-1", onClick: item.onClick, children: content }, i);
+      })
+    }
+  );
+  const MobileTopBar = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-3 md:hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", onClick: () => setDrawer(true), className: "rounded-md p-1.5 text-muted-foreground hover:bg-muted", "aria-label": "Open menu", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Menu, { className: "size-5" }) }),
+    brand,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ml-auto flex items-center gap-1", children: headerActions })
+  ] });
+  if (layout === "top") {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LayoutContext.Provider, { value: layoutCtx, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex min-h-screen flex-col bg-background text-foreground", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: "sticky top-0 z-40 hidden h-14 shrink-0 items-center gap-1 border-b border-border bg-card/95 px-4 backdrop-blur md:flex", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "shrink-0", children: brand }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { className: "ml-4 flex items-center gap-0.5", children: groups.map(
+          (g, gi) => g.label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TopDropdown, { label: g.label, items: g.items, renderLink }, gi) : g.items.map(
+            (item, i) => item.items ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TopDropdown, { label: item.label, items: item.items, renderLink }, `${gi}-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TopLink, { item, renderLink }, `${gi}-${i}`)
+          )
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ml-auto flex items-center gap-2", children: [
+          headerActions,
+          user
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MobileTopBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MobileDrawer, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("main", { className: "flex-1 overflow-y-auto pb-20 md:pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn(contained ? "mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8" : "p-4 sm:p-6"), children }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BottomTabs, {})
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LayoutContext.Provider, { value: layoutCtx, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex h-screen overflow-hidden bg-background text-foreground", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("aside", { className: cn("hidden shrink-0 border-r border-border transition-[width] duration-200 md:block", collapsed ? railW : openW), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarBody, { isCollapsed: collapsed }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MobileDrawer, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MobileTopBar, {}),
+      headerActions && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("header", { className: "hidden h-12 shrink-0 items-center border-b border-border px-4 md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ml-auto flex items-center gap-2", children: headerActions }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("main", { className: "flex-1 overflow-y-auto pb-20 md:pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn(contained ? "mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8" : "p-4 sm:p-6"), children }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BottomTabs, {})
+    ] })
+  ] }) });
+}
+
+// src/sub-tabs/index.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function SubTabs({
+  items,
+  value,
+  onChange,
+  className,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      className: cn("inline-flex rounded-lg border border-border bg-card p-0.5", className),
+      children: items.map((it) => {
+        const selected = value === it.id;
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": selected,
+            onClick: () => onChange(it.id),
+            className: cn(
+              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm transition-colors [&_svg]:size-4",
+              selected ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              it.icon,
+              it.label
+            ]
+          },
+          it.id
+        );
+      })
+    }
+  );
+}
+
+// src/page-header-banner/index.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function PageHeaderBanner({
+  title,
+  subtitle,
+  actions,
+  gradient = true,
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: cn(
+        "mb-6 flex flex-col gap-4 rounded-xl border border-border p-6 sm:mb-8 sm:flex-row sm:items-center sm:p-8",
+        className
+      ),
+      style: gradient ? {
+        background: "linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--accent) 5%, transparent))"
+      } : { background: "var(--card)" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-w-0 items-center gap-4", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "grid size-12 shrink-0 place-items-center rounded-xl bg-primary/15 text-primary [&_svg]:size-6", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h1", { className: "font-heading text-2xl font-bold tracking-tight text-foreground sm:text-3xl", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
+          ] })
+        ] }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex shrink-0 items-center gap-2 sm:ml-auto", children: actions })
+      ]
+    }
+  );
+}
+
+// src/glass-panel/index.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function GlassPanel({ strong, glow, className, style, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: cn("rounded-2xl border", className),
+      style: {
+        background: strong ? "var(--glass-bg-strong, rgba(255,255,255,0.08))" : "var(--glass-bg, rgba(255,255,255,0.04))",
+        borderColor: "var(--glass-border, var(--border))",
+        backdropFilter: "var(--glass-blur, blur(20px))",
+        WebkitBackdropFilter: "var(--glass-blur, blur(20px))",
+        boxShadow: glow ? "var(--shadow-glow)" : "var(--shadow-elevated, 0 8px 32px rgba(0,0,0,0.2))",
+        ...style
+      },
+      ...props
+    }
+  );
+}
+
+// src/brand-frame/index.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var POS = {
+  "top-right": "top-4 right-4",
+  "bottom-right": "bottom-4 right-4",
+  center: "inset-0 flex items-center justify-center"
+};
+function BrandFrame({
+  watermark,
+  watermarkPosition = "top-right",
+  watermarkOpacity = 0.06,
+  glow = false,
+  glass = false,
+  animated = false,
+  header,
+  backdrop,
+  className,
+  children,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-2xl border border-border",
+        glass ? "backdrop-blur-xl" : "bg-card",
+        className
+      ),
+      style: {
+        ...glass ? { background: "var(--glass-bg, color-mix(in srgb, var(--card) 70%, transparent))" } : null,
+        ...glow ? { boxShadow: "var(--shadow-glow, 0 4px 24px color-mix(in srgb, var(--primary) 28%, transparent))" } : null,
+        ...style
+      },
+      ...props,
+      children: [
+        animated && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-wmm-fx": true,
+            className: "pointer-events-none absolute inset-x-0 top-0 h-px",
+            style: {
+              background: "var(--gradient-primary, linear-gradient(90deg, var(--primary), var(--accent)))",
+              backgroundSize: "200% 100%",
+              animation: "wmm-shimmer 3s linear infinite"
+            }
+          }
+        ),
+        backdrop && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pointer-events-none absolute inset-0", children: backdrop }),
+        watermark && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: cn("pointer-events-none absolute", POS[watermarkPosition]),
+            style: { opacity: watermarkOpacity },
+            children: watermark
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative", children: [
+          header && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center justify-between gap-3 border-b border-border px-5 py-3", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "p-5", children })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/use-action-runner.ts
+var React4 = __toESM(require("react"));
+var import_toast = require("@web-my-money/primitives/toast");
+function useActionRunner() {
+  const toast = (0, import_toast.useToast)();
+  const [pending, setPending] = React4.useState(false);
+  const run = React4.useCallback(
+    async (action, options = {}) => {
+      setPending(true);
+      try {
+        const result = await action();
+        if (result.ok) {
+          if (options.successMessage) {
+            const title = typeof options.successMessage === "function" ? options.successMessage(result.data) : options.successMessage;
+            toast.add({
+              title,
+              actionProps: options.undo ? {
+                children: options.undo.label ?? "Undo",
+                onClick: () => {
+                  void options.undo.action();
+                }
+              } : void 0
+            });
+          }
+          options.onSuccess?.(result.data);
+        } else {
+          const title = typeof options.errorMessage === "function" ? options.errorMessage(result.error) : options.errorMessage ?? result.error;
+          toast.add({ title, type: "error" });
+          options.onError?.(result.error);
+        }
+        return result;
+      } finally {
+        setPending(false);
+        options.onSettled?.();
+      }
+    },
+    [toast]
+  );
+  return { run, pending };
+}
+
+// src/use-optimistic-action.ts
+var React5 = __toESM(require("react"));
+function useOptimisticAction(state, reducer) {
+  const [optimisticState, setOptimistic] = React5.useOptimistic(state, reducer);
+  const [isPending, startTransition] = React5.useTransition();
+  const apply = React5.useCallback(
+    (optimisticValue, action, onResult) => {
+      startTransition(async () => {
+        setOptimistic(optimisticValue);
+        const result = await action();
+        onResult?.(result);
+      });
+    },
+    [setOptimistic]
+  );
+  return [optimisticState, apply, isPending];
+}
+
+// src/lightbox/index.tsx
+var React6 = __toESM(require("react"));
+var import_lightbox = require("@web-my-money/primitives/lightbox");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Thumbnail({ image, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-slot": "thumbnail",
+      onClick,
+      className: cn(
+        "group relative aspect-square overflow-hidden rounded-lg border border-border outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "img",
+        {
+          src: image.thumbnailSrc ?? image.src,
+          alt: image.alt ?? "",
+          className: "size-full object-cover transition-transform duration-200 group-hover:scale-105",
+          loading: "lazy"
+        }
+      )
+    }
+  );
+}
+function LightboxGallery({ images, className, gridClassName }) {
+  const [openIndex, setOpenIndex] = React6.useState(null);
+  const hasImages = images.length > 0;
+  const active = openIndex !== null ? images[openIndex] : null;
+  const goTo = (dir) => {
+    setOpenIndex((i) => {
+      if (i === null) return i;
+      return (i + dir + images.length) % images.length;
+    });
+  };
+  if (!hasImages) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { "data-slot": "lightbox-gallery", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", gridClassName), children: images.map((image, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Thumbnail, { image, onClick: () => setOpenIndex(i) }, image.src)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lightbox.Lightbox, { open: openIndex !== null, onOpenChange: (open) => !open && setOpenIndex(null), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lightbox.LightboxContent, { children: active && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lightbox.LightboxNavButton, { direction: "prev", onClick: () => goTo(-1) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lightbox.LightboxNavButton, { direction: "next", onClick: () => goTo(1) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lightbox.LightboxImage, { src: active.src, alt: active.alt ?? "" }),
+      active.caption && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lightbox.LightboxCaption, { children: active.caption }),
+      images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-xs text-white/60", "aria-live": "polite", children: [
+        (openIndex ?? 0) + 1,
+        " / ",
+        images.length
+      ] })
+    ] }) }) })
+  ] });
+}
+
+// src/appearance-settings/index.tsx
+var import_react = require("@web-my-money/tokens/react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function AppearanceSettings({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("space-y-6", className), "data-slot": "appearance-settings", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between gap-4", "data-slot": "appearance-settings-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm font-medium text-foreground", children: "Theme" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-xs text-muted-foreground", children: "Light, dark, or the WMM brand theme." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react.ThemeToggle, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between gap-4", "data-slot": "appearance-settings-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm font-medium text-foreground", children: "Text size" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-xs text-muted-foreground", children: "Scales the whole interface." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react.FontSizeToggle, {})
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActivityFeed,
+  AppBrand,
+  AppShell,
+  AppearanceSettings,
+  BrandFrame,
+  DashboardHeader,
+  DataSummaryCards,
+  DataTable,
+  EmptyState,
+  GlassPanel,
+  KPIRow,
+  LayoutToggle,
+  LightboxGallery,
+  NotificationBanner,
+  PageHeader,
+  PageHeaderBanner,
+  SidebarNavigation,
+  StatCard,
+  SubTabs,
+  Thumbnail,
+  useActionRunner,
+  useLayoutPreference,
+  useOptimisticAction
+});