@rebasepro/app 0.17.3 → 0.18.1

package/dist/debug.js

@@ -0,0 +1,3631 @@
+// src/debug/UIStyleGuide.tsx
+import { Button, Container, IconButton, Paper, Trash2Icon, Typography } from "@rebasepro/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var UIStyleGuide = () => {
+  const typographyVariants = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "subtitle1",
+    "subtitle2",
+    "body1",
+    "body2",
+    "caption",
+    "label",
+    "button"
+  ];
+  const colors = ["primary", "secondary", "disabled", "error"];
+  const buttonVariants = ["filled", "text"];
+  const buttonColors = ["primary", "secondary", "text", "error", "neutral"];
+  const buttonSizes = ["small", "medium", "large", "xl", "2xl"];
+  const IconExample = () => /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 6v6m0 0v6m0-6h6m-6 0H6" }) });
+  return /* @__PURE__ */ jsxs(Container, { className: "py-10 max-w-5xl", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h2", gutterBottom: true, children: "Rebase UI Style Guide" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "secondary", className: "mb-8", children: "A showcase of all typography and button variants available in the @rebasepro/ui library." }),
+    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", gutterBottom: true, className: "border-b pb-2 mb-6", children: "Typography Variants" }),
+      /* @__PURE__ */ jsx(Paper, { className: "p-6 space-y-6", children: typographyVariants.map((variant) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-b border-surface-100 dark:border-surface-950 pb-4 last:border-0", children: [
+        /* @__PURE__ */ jsx("span", { className: "w-24 text-[10px] uppercase tracking-wider text-text-disabled font-mono", children: variant }),
+        /* @__PURE__ */ jsxs(Typography, { variant, component: "p", children: [
+          "The quick brown fox jumps over the lazy dog (",
+          variant,
+          ")"
+        ] })
+      ] }, variant)) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", gutterBottom: true, className: "border-b pb-2 mb-6", children: "Typography Colors" }),
+      /* @__PURE__ */ jsx(Paper, { className: "p-6 space-y-4", children: colors.map((color) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx("span", { className: "w-24 text-[10px] uppercase tracking-wider text-text-disabled font-mono", children: color }),
+        /* @__PURE__ */ jsxs(Typography, { color, children: [
+          'This text is rendered with color="',
+          color,
+          '"'
+        ] })
+      ] }, color)) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", gutterBottom: true, className: "border-b pb-2 mb-6", children: "Button Discovery" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-8", children: buttonVariants.map((variant) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "h6", gutterBottom: true, className: "capitalize mb-4", children: [
+          variant,
+          " Buttons"
+        ] }),
+        /* @__PURE__ */ jsx(Paper, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4", children: [
+          buttonColors.map((color) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { variant, color, children: color }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: color })
+          ] }, color)),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { variant, color: "primary", disabled: true, children: "Disabled" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "disabled" })
+          ] })
+        ] }) })
+      ] }, variant)) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", gutterBottom: true, className: "border-b pb-2 mb-6", children: "Button Sizes" }),
+      /* @__PURE__ */ jsx(Paper, { className: "p-6", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-end gap-6 text-center", children: buttonSizes.map((size) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Button, { size, color: "primary", children: size }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: size })
+      ] }, size)) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "mb-12", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", gutterBottom: true, className: "border-b pb-2 mb-6", children: "Icon Buttons" }),
+      /* @__PURE__ */ jsx(Paper, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-8 items-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx(IconButton, { color: "primary", children: /* @__PURE__ */ jsx(IconExample, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "primary" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx(IconButton, { color: "secondary", children: /* @__PURE__ */ jsx(IconExample, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "secondary" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx(IconButton, { size: "small", children: /* @__PURE__ */ jsx(IconExample, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "small" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx(IconButton, { disabled: true, children: /* @__PURE__ */ jsx(IconExample, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "disabled" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx(IconButton, { size: "small", color: "error", children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "delete" })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("section", { className: "mb-12", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center bg-surface-100 dark:bg-surface-950 p-8 rounded-xl border border-dashed border-surface-400", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: "Dark Mode Check" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "secondary", children: "Typography and buttons should adapt automatically." })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "filled", color: "neutral", startIcon: /* @__PURE__ */ jsx(IconExample, {}), children: "Sample Action" })
+    ] }) })
+  ] });
+};
+
+// src/debug/UIReferenceView.tsx
+import React10, { useState as useState8 } from "react";
+import {
+  Alert as Alert3,
+  AlertCircleIcon,
+  Avatar,
+  AppWindow,
+  BooleanSwitch,
+  Button as Button8,
+  Checkbox as Checkbox3,
+  ChevronDownIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  Chip as Chip7,
+  CircleUserIcon,
+  CircularProgress,
+  cls as cls10,
+  ColumnsIcon,
+  defaultBorderMixin as defaultBorderMixin5,
+  FileIcon,
+  FileTextIcon as FileTextIcon2,
+  FilterChip as FilterChip2,
+  FilterIcon,
+  FolderIcon,
+  IconButton as IconButton4,
+  iconSize as iconSize2,
+  KanbanIcon,
+  LayoutGridIcon as LayoutGridIcon2,
+  ListIcon as ListIcon2,
+  LoadingButton,
+  LogOutIcon,
+  Menu,
+  MenuItem,
+  MoonIcon,
+  MultiSelect,
+  MultiSelectItem,
+  PanelLeftIcon,
+  PencilIcon as PencilIcon2,
+  PlusIcon,
+  SearchBar as SearchBar4,
+  Select as Select5,
+  SelectItem as SelectItem5,
+  Separator as Separator5,
+  SettingsIcon as SettingsIcon2,
+  Skeleton as Skeleton6,
+  SunIcon,
+  SunMoonIcon,
+  Tab,
+  Table as Table2,
+  TableBody as TableBody2,
+  TableCell as TableCell2,
+  TableHeader as TableHeader2,
+  TableRow as TableRow2,
+  Tabs,
+  TagIcon,
+  TextField as TextField2,
+  Tooltip as Tooltip3,
+  Trash2Icon as Trash2Icon3,
+  TypeIcon,
+  Typography as Typography12,
+  UserIcon
+} from "@rebasepro/ui";
+
+// src/components/RebaseLogo.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function RebaseLogo({
+  width,
+  height,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: width ?? "100%",
+      height: height ?? "100%",
+      version: "1.1",
+      style,
+      className,
+      viewBox: "112.1405 1079.711 306.058 306.058",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx2("path", { fill: "#34b6d9", d: "M237.01 1087.234a56 56 0 0 1 56.07 0l83.819 48.473a56 56 0 0 1 27.965 48.477v97.108a56 56 0 0 1-27.965 48.477l-83.819 48.473a56 56 0 0 1-56.07 0l-83.818-48.473a56 56 0 0 1-27.965-48.477v-97.108a56 56 0 0 1 27.965-48.477Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#358fd8", d: "M264.64 1286.718c27.352 0 49.525 22.173 49.525 49.526 0 27.352-22.173 49.525-49.525 49.525-27.353 0-49.526-22.173-49.526-49.525Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#ff9197", d: "M174.941 1131.547c27.352 0 49.526 22.174 49.526 49.526s-22.174 49.526-49.526 49.526-49.526-22.174-49.526-49.526Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#358fd8", d: "M355.338 1131.547c27.352 0 49.526 22.174 49.526 49.526s-22.174 49.526-49.526 49.526-49.526-22.174-49.526-49.526Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fe9197", d: "M125.227 1196.44v-14.661c0-13.35 7.55-20.303 17.99-18.168l56.424 31.13 2.72 1.572 27.643 31.545 35.193 30.52q.173 1.522.229 3.013l-54.046-11.395-28.464-26.045Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#013afd", d: "M151.207 1328.696c-14.348-8.285-25.98-28.432-25.98-45v-35.214l11.299-.401c.614.866 34.062 48.973 34.606 49.656.394.495 22.156 40.224 34.409 62.328Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2c09d1", d: "m211.38 1249.996 30.436 6.417 9.53 9.1-2.926 15.797 16.939 30.08-14.049 6.672-35.072-10.288-33.83-61.32 9.09-.323Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2ac1cf", d: "M240.774 1380.37a34 34 0 0 1-1.304-.716l-16.141-9.319-49.383-74.238 29.211 7.839Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2c42d0", d: "m173.359 1219.393 9.557 4.558 28.464 26.045-19.883-3.865-12.782.453-31.643-13.936-15.11-11.819Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#8b66ed", d: "M257.113 1381.863c-4.336 2.13-10.043 1.783-16.34-1.493l-37.616-76.434 13.081 3.838Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2c09d1", d: "m145.888 1247.749 7.224-.257 23.615 41.804 11.98 1.728-24.421-43.544-.014-.383 10.725-.38 28.16 57.219-29.211-7.839-7.37-11.08Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2ac1cf", d: "M265.451 1311.554v53.1q0 .255-.004.505l-.25-.26-29.148-38.794-6.308-14.37 21.57 6.328 14.048-6.672Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fd485f", d: "m223.329 1370.335-17.788-10.27c-12.253-22.104-34.015-61.833-34.41-62.328-.543-.683-33.991-48.79-34.605-49.656l9.362-.332 20.688 37.269Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2d42d0", d: "m202.362 1196.313 37.108 21.424c13.11 7.57 23.953 25.043 25.727 40.641l-35.193-30.52Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2b0ad1", d: "M265.447 1365.16c-.095 6.58-2.056 11.56-5.304 14.604l-39.936-70.826 9.534 2.797 6.308 14.37 29.148 38.794Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fe9196", d: "M125.227 1240.59v-16.4l21.845 8.458 31.643 13.936-35.367 1.255Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#8b66ed", d: "m174.997 1246.716 7.411-.263 33.83 61.32-13.08-3.837Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2cc5d2", d: "m153.112 1247.492 11.16-.395.014.383 24.421 43.544-11.98-1.728Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fc4962", d: "M125.227 1224.19v-8.878l30.211-4.464 17.92 8.545-41.396 1.436 15.11 11.82Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fe475f", d: "M265.451 1292.508v18.84l-.092.043-16.939-30.08 2.927-15.799.214.206Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2d43cd", d: "M125.227 1215.312v-18.871l30.211 14.407Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2ac4d1", d: "M260.143 1379.764a12.5 12.5 0 0 1-3.03 2.099l-40.875-74.09 3.969 1.165Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fe475f", d: "M265.426 1261.391q.025.677.025 1.346v16.241l-13.89-13.26-.186-.36-.028.154-9.53-9.099Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#40b6d9", d: "M265.451 1278.978v13.53c-4.95-9.535-12.604-24.31-13.89-26.79Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#013afd", d: "M125.227 1248.482v-7.892l18.12 7.249Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fe9197", d: "M143.217 1163.611c2.517.515 5.203 1.558 7.99 3.168l48.434 27.963Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fec404", d: "m251.347 1265.512.028-.154.186.36Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#ccc", d: "M265.451 1311.347v.207l-.092-.163Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2fc7d5", d: "M383.274 1164.17a31 31 0 0 1-3.887 2.64l-2.59 1.495-95.242 18.988-50.727-18.022 25.55-32.892 63.642 26.919-61.075-31.394Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#320fdd", d: "m215.866 1112.967 18.535-16.15 5.766 32.704 16.212 6.858-25.551 32.892-57.218-19.484Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fd4a61", d: "m305.806 1094.328 73.58 42.482c7.16 4.134 10.748 9.55 10.757 14.968l-40.264-5.624-25.491-7.867-33.1-30.491-18.842-4.065Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fec504", d: "M388.516 1158.077c-1.145 2.145-2.892 4.205-5.242 6.093l-124.33-32.266 6.47-29.689 25.874 5.58 33.1 30.492Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#320fdd", d: "m179.744 1183.464-26.935-15.551 18.147-15.813 55.184 23.206-15.732 20.252Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#33b6d9", d: "m358.403 1178.925-52.998 30.599-44.794-17.995 89.572-18.117Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fd4a63", d: "m234.401 1096.817 12.723-11.087 19.395 11.42-7.574 34.754 61.075 31.394-79.853-33.777Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fe9197", d: "m152.809 1167.913-1.91-1.103c-10.42-6.016-13.273-14.747-8.558-22.25l56.907-27.791 15.854-3.136Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#8b69f1", d: "m305.405 1209.524-14.281 8.245c-5.252 3.032-11.697 4.954-18.462 5.767l-43.574-25.631 31.523-6.376Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#3015d8", d: "M252.294 1080.973c13.06-2.81 28.331-1.183 38.83 4.879l14.682 8.476-33.36 9.403-7.031-1.516 1.104-5.064-19.395-11.42Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2c0ace", d: "M239.162 1085.852c3.85-2.223 8.342-3.85 13.132-4.88l-37.192 32.66-15.854 3.137-56.907 27.791c1.777-2.828 4.63-5.482 8.559-7.75Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2fc7d5", d: "m229.088 1197.905-8.773 1.774-9.907-4.121 15.732-20.252 37.462 15.618Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#33b6d9", d: "M272.662 1223.536c-11.721 1.407-24.402-.515-33.5-5.767l-28.093-16.22 18.019-3.644Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fe9197", d: "m264.078 1190.828-.476.096-37.462-15.618 4.688-6.035 50.727 18.022ZM170.956 1152.1l2.654-2.313 57.218 19.484-4.688 6.035Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#30c3d9", d: "M390.143 1151.778c.01 2.125-.533 4.25-1.627 6.3l-38.637-11.924Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#ff4c60", d: "m211.07 1201.55-31.326-18.086 40.57 16.215Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2d08d0", d: "m376.798 1168.305-18.395 10.62-8.22-5.513Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2fc7d5", d: "M264.887 1262.737c0-16.568 11.632-36.715 25.98-45l40.425-23.339 11.932 35.4-25.718 46.274-26.284-2.855-1.382.145-1.411-.146-23.542.675Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#32abd6", d: "M383.486 1164.684c2.376-.909 4.642-1.382 6.752-1.446l-7.859 43.045-.292 5.18 8.911 13.519 5.344-41.78 4.102-15.889c2.942 3.164 4.667 8.084 4.667 14.466v91.585h-1.324c-1.104 3.308-34.555 60.887-34.486 61.007l-21.13 12.2 8.305-32.902-10.115 14.693 10.115-20.342 47.315-78.499-7.45 6.694-15.674 18.243 2.62-89.698.155-.059Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2eabd6", d: "m324.54 1360.214-33.672 19.44c-13.695 7.907-24.915 2.15-25.91-12.796l8.385-12.077 47.855-71.354 7.12-26.81 5.119-9.209.57 31.212-13.987 50.442 6.42-5.847-2.408 22.126.459 8.254Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#8b65f0", d: "M264.959 1366.858a33 33 0 0 1-.072-2.204v-88.582l24.953-2.71 26.235 2.554 1.43.156 10.813-19.454-7.12 26.81-47.855 71.353Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fd4861", d: "m378.764 1192.394 3.89-5.923c-1.987-.058-4.42 64.146-4.402 65.055.019.91-5.901 22.365-5.901 22.365l-17.658 29.778-14.983 14.696 9.72-45.149.036-1.115 6.455-7.894Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#32abd6", d: "m377.832 1167.529.229-.133.703 24.998-22.843 71.813-6.455 7.894.572-17.63-3.443-30.74Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#8c66ef", d: "m328.775 1297.488.034-.126 20.657-25.261-.036 1.115-9.72 45.15 14.983-14.697-13.8 22.045-16.86 19.627 2.407-22.126-6.42 5.847Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2c08d3", d: "m331.292 1194.398 27.203-15.705 5.51 13.714-20.781 37.391Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#300bd2", d: "m324.491 1353.595-.459-8.254 16.861-19.627 13.8-22.045 17.658-29.778 20.08-31.948 3.91-5.728 7.45-6.694-47.315 78.5-10.115 20.341-21.821 31.852Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2c08d3", d: "m333.437 1247.408 13.158-23.676 3.443 30.738-4.056 14.678-14.316 17.914 2.34-8.442Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#8b68ef", d: "M405.111 1273.364v10.332c0 16.568-11.632 36.715-25.98 45l-9.83 5.675c-.07-.12 33.382-57.7 34.486-61.007Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fec504", d: "M390.238 1163.238c4.109-.125 7.625 1.3 10.206 4.075l-4.102 15.89-5.344 41.779-8.91-13.518.291-5.18Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#300bd2", d: "m348.171 1346.57-23.631 13.644 31.936-46.545Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#348fd8", d: "M372.35 1273.891s5.921-21.455 5.902-22.365 2.415-65.113 4.402-65.055l-1.987 67.987 15.675-18.243-3.91 5.728Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#32abd6", d: "m358.495 1178.693 19.337-11.164-13.827 24.878Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#fd4861", d: "m331.391 1288.05.275-.988 14.316-17.914 4.056-14.678-.572 17.63-20.657 25.262Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#ccc", fillOpacity: ".579", d: "m378.06 1167.396 1.07-.617a31 31 0 0 1 4.158-2.019l-.634 21.71-3.89 5.924Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#2fc7d5", d: "M264.887 1276.072v-2.18l23.542-.676 1.411.146Z" }),
+        /* @__PURE__ */ jsx2("path", { fill: "#8b65f0", d: "m291.193 1273.502-1.353-.14 1.382-.145 24.853 2.7Z" })
+      ]
+    }
+  );
+}
+
+// src/debug/crm-dashboard/CrmDashboardDemo.tsx
+import { useState as useState4, useEffect, useMemo as useMemo3, useCallback as useCallback4 } from "react";
+import {
+  Typography as Typography8,
+  Button as Button7,
+  cls as cls6,
+  Card as Card5,
+  TextField,
+  Select as Select3,
+  SelectItem as SelectItem3,
+  RefreshCwIcon,
+  UserPlus,
+  XIcon as XIcon2,
+  CheckIcon,
+  MailIcon as MailIcon2,
+  PhoneIcon,
+  CalendarIcon as CalendarIcon2
+} from "@rebasepro/ui";
+
+// src/debug/crm-dashboard/DashboardMetrics.tsx
+import {
+  Typography as Typography2,
+  cls as cls2,
+  Card,
+  Skeleton,
+  UsersIcon,
+  DollarSignIcon,
+  AlertTriangleIcon,
+  TrendingUpIcon
+} from "@rebasepro/ui";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function DashboardMetrics({
+  loading,
+  insights,
+  totalInPipeline,
+  totalRevenue
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6", children: [
+    /* @__PURE__ */ jsx3(Card, { className: "p-4", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500", children: /* @__PURE__ */ jsx3(UsersIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx3(Typography2, { variant: "caption", color: "secondary", className: "uppercase tracking-[0.05em] text-[10px]", children: "In Pipeline" }),
+        loading ? /* @__PURE__ */ jsx3(Skeleton, { className: "h-7 w-12 mt-0.5" }) : /* @__PURE__ */ jsx3(Typography2, { variant: "h5", className: "tabular-nums mt-0.5", children: totalInPipeline })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx3(Card, { className: "p-4", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500", children: /* @__PURE__ */ jsx3(TrendingUpIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx3(Typography2, { variant: "caption", color: "secondary", className: "uppercase tracking-[0.05em] text-[10px]", children: "Active Clients" }),
+        loading ? /* @__PURE__ */ jsx3(Skeleton, { className: "h-7 w-12 mt-0.5" }) : /* @__PURE__ */ jsx3(Typography2, { variant: "h5", className: "tabular-nums mt-0.5", children: insights?.activeClients ?? 0 })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx3(Card, { className: "p-4", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500", children: /* @__PURE__ */ jsx3(DollarSignIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx3(Typography2, { variant: "caption", color: "secondary", className: "uppercase tracking-[0.05em] text-[10px]", children: "Revenue" }),
+        loading ? /* @__PURE__ */ jsx3(Skeleton, { className: "h-7 w-20 mt-0.5" }) : /* @__PURE__ */ jsxs3("div", { className: "flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-2 mt-0.5", children: [
+          /* @__PURE__ */ jsxs3(Typography2, { variant: "h5", className: "tabular-nums", children: [
+            "$",
+            totalRevenue.toLocaleString()
+          ] }),
+          insights && insights.contractedRevenue > 0 && /* @__PURE__ */ jsxs3(Typography2, { variant: "caption", color: "secondary", className: "text-[10px]", children: [
+            "($",
+            insights.contractedRevenue.toLocaleString(),
+            " confirmed)"
+          ] })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx3(Card, { className: "p-4", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx3("div", { className: cls2(
+        "flex items-center justify-center w-5 h-5",
+        insights && insights.overdueTaskCount > 0 ? "text-red-500" : "text-surface-400 dark:text-surface-500"
+      ), children: /* @__PURE__ */ jsx3(AlertTriangleIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx3(Typography2, { variant: "caption", color: "secondary", className: "uppercase tracking-[0.05em] text-[10px]", children: "Overdue Tasks" }),
+        loading ? /* @__PURE__ */ jsx3(Skeleton, { className: "h-7 w-8 mt-0.5" }) : /* @__PURE__ */ jsx3(Typography2, { variant: "h5", className: cls2(
+          "tabular-nums mt-0.5",
+          insights && insights.overdueTaskCount > 0 && "text-red-600 dark:text-red-400"
+        ), children: insights?.overdueTaskCount ?? 0 })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/debug/crm-dashboard/PipelineOverview.tsx
+import React from "react";
+import {
+  Typography as Typography3,
+  cls as cls3,
+  Card as Card2,
+  Button as Button2,
+  Skeleton as Skeleton2,
+  Tooltip,
+  Select,
+  SelectItem,
+  UsersIcon as UsersIcon2,
+  ChevronRightIcon,
+  SettingsIcon
+} from "@rebasepro/ui";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function PipelineOverview({
+  loading,
+  insights,
+  selectedPipelineId,
+  onPipelineChange,
+  onNavigate,
+  sortedStages,
+  activeStages,
+  closedStages,
+  totalInPipeline,
+  resolveColor: resolveColor2
+}) {
+  const useShortLabels = sortedStages.length > 6;
+  const needsScroll = sortedStages.length > 10;
+  return /* @__PURE__ */ jsxs4(Card2, { className: "p-4 mb-6", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs4(Typography3, { variant: "subtitle1", children: [
+          "Pipeline",
+          !loading && totalInPipeline > 0 ? ` (${totalInPipeline} clients)` : ""
+        ] }),
+        insights && insights.pipelines.length > 1 && /* @__PURE__ */ jsx4(
+          Select,
+          {
+            value: selectedPipelineId ?? "",
+            onValueChange: (v) => onPipelineChange(v),
+            size: "smallest",
+            renderValue: (v) => {
+              const selected = insights.pipelines.find((p) => p.id === v);
+              return selected ? selected.name : "Pipeline";
+            },
+            position: "popper",
+            children: insights.pipelines.map((p) => /* @__PURE__ */ jsx4(SelectItem, { value: p.id, children: p.name }, p.id))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx4(
+        Button2,
+        {
+          variant: "text",
+          size: "small",
+          onClick: () => {
+            onNavigate("/c/engagements");
+          },
+          endIcon: /* @__PURE__ */ jsx4(ChevronRightIcon, { className: "h-4 w-4" }),
+          children: "View All"
+        }
+      )
+    ] }),
+    loading ? /* @__PURE__ */ jsx4(Skeleton2, { className: "h-20 w-full rounded-lg" }) : insights && sortedStages.length === 0 ? (
+      /* No stages configured */
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center justify-center py-8", children: [
+        /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500 mb-3", children: /* @__PURE__ */ jsx4(SettingsIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx4(Typography3, { variant: "body2", color: "secondary", className: "mb-1", children: "No pipeline stages configured" }),
+        /* @__PURE__ */ jsx4(Typography3, { variant: "caption", color: "disabled", className: "mb-4 text-center", children: "Set up your pipeline stages in Settings \u2192 Pipeline Stages" }),
+        /* @__PURE__ */ jsx4(
+          Button2,
+          {
+            variant: "outlined",
+            size: "small",
+            onClick: () => onNavigate("/pipeline-builder"),
+            children: "Configure Stages"
+          }
+        )
+      ] })
+    ) : insights && totalInPipeline === 0 ? (
+      /* No clients in pipeline */
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center justify-center py-8", children: [
+        /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500 mb-3", children: /* @__PURE__ */ jsx4(UsersIcon2, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx4(Typography3, { variant: "body2", color: "secondary", className: "mb-1", children: "No clients in pipeline yet" }),
+        /* @__PURE__ */ jsx4(Typography3, { variant: "caption", color: "disabled", className: "mb-4", children: "Create your first client to get started." })
+      ] })
+    ) : insights ? (
+      /* Pipeline bar */
+      /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+        needsScroll && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx4("div", { className: "absolute left-0 top-0 bottom-0 w-6 bg-gradient-to-r from-white dark:from-surface-900 to-transparent z-10 pointer-events-none rounded-l-lg" }),
+          /* @__PURE__ */ jsx4("div", { className: "absolute right-0 top-0 bottom-0 w-6 bg-gradient-to-l from-white dark:from-surface-900 to-transparent z-10 pointer-events-none rounded-r-lg" })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: cls3(
+          "flex items-stretch gap-0",
+          needsScroll && "overflow-x-auto"
+        ), children: [
+          activeStages.map((stage, idx) => {
+            const isEmpty = stage.count === 0;
+            const widthPercent = totalInPipeline > 0 ? Math.max(8, stage.count / totalInPipeline * 100) : 100 / Math.max(activeStages.length, 1);
+            const stageColor = resolveColor2(stage.color);
+            const displayLabel = useShortLabels ? stage.shortLabel : stage.label;
+            return /* @__PURE__ */ jsxs4(React.Fragment, { children: [
+              idx > 0 && /* @__PURE__ */ jsx4("div", { className: "flex items-center shrink-0 text-surface-300 dark:text-surface-600 -mx-0.5", children: /* @__PURE__ */ jsx4(ChevronRightIcon, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsx4(Tooltip, { title: `${stage.label} \u2014 ${stage.count} client${stage.count !== 1 ? "s" : ""}`, children: /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  className: cls3(
+                    "flex flex-col items-center justify-center rounded-lg px-3 py-3 min-w-[72px] transition-colors duration-150 cursor-pointer",
+                    "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+                    isEmpty ? "bg-surface-50 dark:bg-surface-900/20" : "bg-surface-100/50 dark:bg-surface-900/60"
+                  ),
+                  style: { flex: `${widthPercent} 1 0%` },
+                  onClick: () => onNavigate(`/c/engagements?stage=${stage.stageKey}`),
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      Typography3,
+                      {
+                        variant: "h6",
+                        className: cls3(
+                          "tabular-nums leading-none font-semibold",
+                          isEmpty && "opacity-25"
+                        ),
+                        children: stage.count
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 mt-1.5", children: [
+                      /* @__PURE__ */ jsx4(
+                        "span",
+                        {
+                          className: "w-1.5 h-1.5 rounded-full shrink-0",
+                          style: {
+                            backgroundColor: stageColor,
+                            opacity: isEmpty ? 0.25 : 1
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        Typography3,
+                        {
+                          variant: "caption",
+                          color: "secondary",
+                          className: cls3(
+                            "whitespace-nowrap text-[11px]",
+                            isEmpty && "opacity-35"
+                          ),
+                          children: displayLabel
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) })
+            ] }, stage.stageKey);
+          }),
+          activeStages.length > 0 && closedStages.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex items-center shrink-0 mx-2", children: /* @__PURE__ */ jsx4("div", { className: "w-px h-8 bg-surface-200 dark:bg-surface-700" }) }),
+          closedStages.map((stage, idx) => {
+            const isEmpty = stage.count === 0;
+            const stageColor = resolveColor2(stage.color);
+            const displayLabel = useShortLabels ? stage.shortLabel : stage.label;
+            return /* @__PURE__ */ jsxs4(React.Fragment, { children: [
+              idx > 0 && /* @__PURE__ */ jsx4("div", { className: "flex items-center shrink-0 text-surface-300 dark:text-surface-600 -mx-0.5", children: /* @__PURE__ */ jsx4(ChevronRightIcon, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsx4(Tooltip, { title: `${stage.label} \u2014 ${stage.count} client${stage.count !== 1 ? "s" : ""}`, children: /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  className: cls3(
+                    "flex flex-col items-center justify-center rounded-lg px-3 py-3 min-w-[72px] transition-colors duration-150 cursor-pointer",
+                    "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+                    "opacity-60",
+                    isEmpty ? "bg-surface-50 dark:bg-surface-900/10" : "bg-surface-100/30 dark:bg-surface-900/30"
+                  ),
+                  style: { flex: "0 0 auto" },
+                  onClick: () => onNavigate(`/c/engagements?stage=${stage.stageKey}`),
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      Typography3,
+                      {
+                        variant: "h6",
+                        className: cls3(
+                          "tabular-nums leading-none font-semibold",
+                          isEmpty && "opacity-25"
+                        ),
+                        children: stage.count
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 mt-1.5", children: [
+                      /* @__PURE__ */ jsx4(
+                        "span",
+                        {
+                          className: "w-1.5 h-1.5 rounded-full shrink-0",
+                          style: {
+                            backgroundColor: stageColor,
+                            opacity: isEmpty ? 0.25 : 1
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        Typography3,
+                        {
+                          variant: "caption",
+                          color: "secondary",
+                          className: cls3(
+                            "whitespace-nowrap text-[11px]",
+                            isEmpty && "opacity-35"
+                          ),
+                          children: displayLabel
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) })
+            ] }, stage.stageKey);
+          })
+        ] })
+      ] })
+    ) : null
+  ] });
+}
+
+// src/debug/crm-dashboard/RecentActivity.tsx
+import React2 from "react";
+import {
+  Typography as Typography4,
+  Card as Card3,
+  Skeleton as Skeleton3,
+  Separator as Separator2,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button as Button3,
+  CircleDotIcon,
+  ArrowRightLeftIcon,
+  MailIcon,
+  FileTextIcon,
+  PenLineIcon,
+  VideoIcon,
+  MessageCircleIcon,
+  StickyNoteIcon,
+  ListPlusIcon,
+  CheckCircle2Icon,
+  WrenchIcon,
+  PinIcon
+} from "@rebasepro/ui";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var ACTIVITY_ICONS = {
+  incoming: /* @__PURE__ */ jsx5(CircleDotIcon, { className: "h-4 w-4 text-blue-500" }),
+  status_changed: /* @__PURE__ */ jsx5(ArrowRightLeftIcon, { className: "h-4 w-4 text-violet-500" }),
+  email_sent: /* @__PURE__ */ jsx5(MailIcon, { className: "h-4 w-4 text-sky-500" }),
+  agreements_sent: /* @__PURE__ */ jsx5(FileTextIcon, { className: "h-4 w-4 text-amber-500" }),
+  agreements_signed: /* @__PURE__ */ jsx5(PenLineIcon, { className: "h-4 w-4 text-emerald-500" }),
+  zoom_setup: /* @__PURE__ */ jsx5(VideoIcon, { className: "h-4 w-4 text-blue-600" }),
+  whatsapp_setup: /* @__PURE__ */ jsx5(MessageCircleIcon, { className: "h-4 w-4 text-green-500" }),
+  note: /* @__PURE__ */ jsx5(StickyNoteIcon, { className: "h-4 w-4 text-yellow-500" }),
+  task_created: /* @__PURE__ */ jsx5(ListPlusIcon, { className: "h-4 w-4 text-teal-500" }),
+  task_completed: /* @__PURE__ */ jsx5(CheckCircle2Icon, { className: "h-4 w-4 text-emerald-500" }),
+  manual_action: /* @__PURE__ */ jsx5(WrenchIcon, { className: "h-4 w-4 text-orange-500" })
+};
+function relativeTime(dateStr) {
+  const now = Date.now();
+  const then = new Date(dateStr).getTime();
+  const diffSec = Math.round((now - then) / 1e3);
+  if (diffSec < 60) return "just now";
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDay = Math.floor(diffHr / 24);
+  if (diffDay < 7) return `${diffDay}d ago`;
+  return new Date(dateStr).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+function RecentActivity({
+  activities,
+  activitiesLoading,
+  tasksMap,
+  onCompleteTask,
+  onViewEmail,
+  onOpenTask,
+  emailViewerOpen,
+  onEmailViewerOpenChange,
+  selectedEmail
+}) {
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsxs5(Card3, { className: "p-4 flex-1", children: [
+      /* @__PURE__ */ jsx5(Typography4, { variant: "subtitle1", className: "mb-3", children: "Recent Activity" }),
+      activitiesLoading ? /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx5(Skeleton3, { className: "h-5 w-5 rounded-full shrink-0" }),
+        /* @__PURE__ */ jsx5(Skeleton3, { className: "h-4 flex-1" })
+      ] }, i)) }) : activities.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "flex flex-col items-center py-6", children: /* @__PURE__ */ jsx5(Typography4, { variant: "body2", color: "secondary", children: "No recent activity" }) }) : /* @__PURE__ */ jsx5("div", { className: "flex flex-col", children: activities.map((activity, idx) => {
+        const actType = activity.values?.type;
+        const taskId = activity.values?.metadata?.taskId;
+        const relatedTask = taskId ? tasksMap.get(taskId) : null;
+        const isTaskActivity = actType === "task_created" || actType === "task_completed";
+        const isEmailActivity = actType === "email_sent";
+        return /* @__PURE__ */ jsxs5(React2.Fragment, { children: [
+          idx > 0 && /* @__PURE__ */ jsx5(Separator2, { orientation: "horizontal", className: "my-0" }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-2.5 py-2.5", children: [
+            /* @__PURE__ */ jsx5("span", { className: "shrink-0 mt-0.5 flex items-center", children: ACTIVITY_ICONS[actType] ?? /* @__PURE__ */ jsx5(PinIcon, { className: "h-4 w-4 text-surface-400 dark:text-surface-500" }) }),
+            /* @__PURE__ */ jsxs5("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx5(Typography4, { variant: "body2", className: "truncate leading-snug", children: activity.values?.description || actType || "Activity" }),
+              activity.values?.createdAt && /* @__PURE__ */ jsx5(Typography4, { variant: "caption", color: "secondary", className: "text-[10px]", children: relativeTime(activity.values.createdAt) }),
+              /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 mt-1 flex-wrap", children: [
+                isTaskActivity && relatedTask && relatedTask.values?.status !== "completed" && /* @__PURE__ */ jsx5(
+                  Button3,
+                  {
+                    variant: "text",
+                    size: "small",
+                    color: "primary",
+                    className: "text-emerald-600 dark:text-emerald-400 font-medium hover:underline p-0 h-auto min-w-0",
+                    onClick: () => onCompleteTask(activity),
+                    children: "Complete Task"
+                  }
+                ),
+                isEmailActivity && /* @__PURE__ */ jsx5(
+                  Button3,
+                  {
+                    variant: "text",
+                    size: "small",
+                    color: "primary",
+                    className: "font-medium hover:underline p-0 h-auto min-w-0",
+                    onClick: () => onViewEmail(activity),
+                    children: "View Sent Email"
+                  }
+                ),
+                isTaskActivity && taskId && /* @__PURE__ */ jsx5(
+                  Button3,
+                  {
+                    variant: "text",
+                    size: "small",
+                    color: "neutral",
+                    className: "font-medium hover:underline p-0 h-auto min-w-0 text-surface-500 hover:text-surface-700 dark:text-surface-400 dark:hover:text-surface-300",
+                    onClick: () => onOpenTask(activity),
+                    children: "Open Task"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }, activity.id);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs5(
+      Dialog,
+      {
+        open: emailViewerOpen,
+        onOpenChange: onEmailViewerOpenChange,
+        maxWidth: "xl",
+        children: [
+          /* @__PURE__ */ jsx5(DialogTitle, { children: selectedEmail?.subject || "Email" }),
+          /* @__PURE__ */ jsx5(DialogContent, { children: selectedEmail && /* @__PURE__ */ jsxs5("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs5(Typography4, { variant: "caption", color: "secondary", children: [
+              "To: ",
+              selectedEmail.to
+            ] }),
+            selectedEmail.html ? /* @__PURE__ */ jsx5(
+              "div",
+              {
+                className: "prose prose-sm dark:prose-invert max-w-none text-text-primary dark:text-text-primary-dark",
+                dangerouslySetInnerHTML: { __html: selectedEmail.html }
+              }
+            ) : /* @__PURE__ */ jsx5(Typography4, { variant: "body2", className: "whitespace-pre-wrap", children: selectedEmail.body }),
+            selectedEmail.mode === "simulated" && /* @__PURE__ */ jsx5(Typography4, { variant: "caption", color: "secondary", className: "italic mt-2 block", children: "Simulated \u2014 email was not actually sent." })
+          ] }) }),
+          /* @__PURE__ */ jsx5(DialogActions, { children: /* @__PURE__ */ jsx5(Button3, { variant: "text", onClick: () => onEmailViewerOpenChange(false), children: "Close" }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/debug/crm-dashboard/TasksView.tsx
+import { useState as useState2, useMemo, useCallback as useCallback2 } from "react";
+
+// src/debug/crm-dashboard/TaskFilters.tsx
+import {
+  Chip,
+  FilterChip,
+  SearchBar,
+  Select as Select2,
+  SelectItem as SelectItem2,
+  Typography as Typography5,
+  Button as Button4,
+  AlertTriangleIcon as AlertTriangleIcon2,
+  ListTodoIcon,
+  XIcon
+} from "@rebasepro/ui";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function TaskFilters({
+  quickFilter,
+  onQuickFilterChange,
+  stageFilter,
+  onStageFilterChange,
+  clientFilter,
+  onClientFilterChange,
+  searchText,
+  onSearchTextChange,
+  hasActiveFilter,
+  onClearAllFilters,
+  overdueTasks,
+  pendingTasks,
+  stageLabels: stageLabels2,
+  stageFilterOrder,
+  stageCounts,
+  activeClientIds,
+  clientsMap
+}) {
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500", children: /* @__PURE__ */ jsx6(ListTodoIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx6(Typography5, { variant: "subtitle1", children: "Tasks" }),
+        pendingTasks.length > 0 && /* @__PURE__ */ jsxs6(Chip, { size: "smallest", colorScheme: "blue", children: [
+          pendingTasks.length,
+          hasActiveFilter ? " shown" : " pending"
+        ] })
+      ] }),
+      overdueTasks.length > 0 && /* @__PURE__ */ jsxs6(Chip, { size: "smallest", colorScheme: "red", children: [
+        overdueTasks.length,
+        " overdue"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2 mb-3", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx6(
+          FilterChip,
+          {
+            active: quickFilter === "all" && !stageFilter && !clientFilter,
+            onClick: () => {
+              onQuickFilterChange("all");
+              onStageFilterChange(null);
+              onClientFilterChange(null);
+            },
+            size: "small",
+            children: "All"
+          }
+        ),
+        /* @__PURE__ */ jsxs6(
+          FilterChip,
+          {
+            active: quickFilter === "overdue",
+            onClick: () => {
+              onQuickFilterChange(quickFilter === "overdue" ? "all" : "overdue");
+            },
+            size: "small",
+            icon: /* @__PURE__ */ jsx6(AlertTriangleIcon2, { className: "h-3 w-3" }),
+            children: [
+              "Overdue",
+              overdueTasks.length > 0 ? ` (${overdueTasks.length})` : ""
+            ]
+          }
+        ),
+        hasActiveFilter && /* @__PURE__ */ jsx6(
+          Button4,
+          {
+            variant: "text",
+            size: "small",
+            color: "neutral",
+            className: "p-0 h-auto min-w-0 text-xs text-text-secondary dark:text-text-secondary-dark hover:text-primary dark:hover:text-primary-light",
+            onClick: onClearAllFilters,
+            startIcon: /* @__PURE__ */ jsx6(XIcon, { className: "h-3 w-3" }),
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6("div", { className: "flex-1", children: /* @__PURE__ */ jsx6(
+          SearchBar,
+          {
+            onTextSearch: (v) => {
+              onSearchTextChange(v || "");
+            },
+            placeholder: "Search tasks...",
+            size: "smallest",
+            className: "w-full"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs6(
+          Select2,
+          {
+            value: stageFilter || "__all__",
+            onValueChange: (v) => {
+              onStageFilterChange(v === "__all__" ? null : v);
+            },
+            placeholder: "Stage",
+            size: "smallest",
+            renderValue: (v) => {
+              if (!v || v === "__all__") return "Stage";
+              return stageLabels2[v] || "Stage";
+            },
+            position: "popper",
+            children: [
+              /* @__PURE__ */ jsx6(SelectItem2, { value: "__all__", children: "All stages" }),
+              stageFilterOrder.filter((stageId) => stageCounts[stageId] > 0).map((stageId) => /* @__PURE__ */ jsxs6(SelectItem2, { value: stageId, children: [
+                stageLabels2[stageId] || stageId,
+                stageCounts[stageId] > 0 ? ` (${stageCounts[stageId]})` : ""
+              ] }, stageId))
+            ]
+          }
+        ),
+        activeClientIds.length > 1 && /* @__PURE__ */ jsxs6(
+          Select2,
+          {
+            value: clientFilter || "__all__",
+            onValueChange: (v) => {
+              onClientFilterChange(v === "__all__" ? null : v);
+            },
+            placeholder: "All clients",
+            size: "smallest",
+            renderValue: (v) => {
+              if (!v || v === "__all__") return "Client";
+              const info = clientsMap.get(v);
+              return info?.name || "Client";
+            },
+            position: "popper",
+            children: [
+              /* @__PURE__ */ jsx6(SelectItem2, { value: "__all__", children: "All clients" }),
+              activeClientIds.map((cId) => {
+                const info = clientsMap.get(cId);
+                if (!info) return null;
+                return /* @__PURE__ */ jsx6(SelectItem2, { value: cId, children: info.name }, cId);
+              })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/debug/crm-dashboard/TaskTable.tsx
+import { useState, useCallback } from "react";
+import {
+  Typography as Typography6,
+  cls as cls4,
+  Card as Card4,
+  Chip as Chip2,
+  Skeleton as Skeleton4,
+  Checkbox,
+  Button as Button5,
+  CalendarIcon,
+  AlertTriangleIcon as AlertTriangleIcon3,
+  CheckCircle2Icon as CheckCircle2Icon2
+} from "@rebasepro/ui";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var resolutionDisplay = {
+  verified: { label: "Verified", colorScheme: "green" },
+  needs_followup: { label: "Needs Follow-up", colorScheme: "amber" },
+  suitable: { label: "Suitable", colorScheme: "green" },
+  not_a_fit: { label: "Not a Fit", colorScheme: "red" },
+  response_received: { label: "Response Received", colorScheme: "green" },
+  followup_sent: { label: "Follow-up Sent", colorScheme: "blue" },
+  prepared: { label: "Prepared", colorScheme: "green" },
+  invite_sent: { label: "Invite Sent", colorScheme: "green" },
+  agreement_ready: { label: "Agreement Ready", colorScheme: "green" },
+  signed: { label: "Signed", colorScheme: "green" },
+  reminder_sent: { label: "Reminder Sent", colorScheme: "blue" },
+  payment_confirmed: { label: "Payment Confirmed", colorScheme: "green" },
+  not_yet_received: { label: "Not Yet Received", colorScheme: "amber" },
+  sent: { label: "Sent", colorScheme: "green" },
+  confirmed: { label: "Confirmed", colorScheme: "green" },
+  not_yet: { label: "Not Yet", colorScheme: "amber" },
+  scheduled: { label: "Scheduled", colorScheme: "green" },
+  feedback_received: { label: "Feedback Received", colorScheme: "green" },
+  awaiting_response: { label: "Awaiting Response", colorScheme: "amber" },
+  archived: { label: "Archived", colorScheme: "green" },
+  done: { label: "Done", colorScheme: "green" }
+};
+function formatDueDate(dateStr) {
+  if (!dateStr) return null;
+  const d = new Date(dateStr);
+  if (isNaN(d.getTime())) return null;
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const target = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  const diffMs = target.getTime() - today.getTime();
+  const diffDays = Math.round(diffMs / (1e3 * 60 * 60 * 24));
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Tomorrow";
+  if (diffDays === -1) return "Yesterday";
+  if (diffDays < 0) return `${Math.abs(diffDays)}d overdue`;
+  if (diffDays <= 7) return `In ${diffDays}d`;
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+function isDueDateOverdue(dateStr) {
+  if (!dateStr) return false;
+  const d = new Date(dateStr);
+  if (isNaN(d.getTime())) return false;
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  return d < today;
+}
+function isDueDateSoon(dateStr) {
+  if (!dateStr) return false;
+  const d = new Date(dateStr);
+  if (isNaN(d.getTime())) return false;
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const diffMs = d.getTime() - today.getTime();
+  const diffDays = Math.round(diffMs / (1e3 * 60 * 60 * 24));
+  return diffDays >= 0 && diffDays <= 2;
+}
+function TaskTable({
+  tasks,
+  loading,
+  pendingTasks,
+  visiblePendingTasks,
+  hasMorePending,
+  onLoadMorePending,
+  pendingCount,
+  togglingIds,
+  onToggleTask,
+  onOpenTask,
+  onOpenClient,
+  clientsMap,
+  stageLabels: stageLabels2,
+  recentlyToggledIds,
+  completedTasks,
+  completedLoaded,
+  loadingCompleted,
+  completedHasMore,
+  onExpandCompleted,
+  onLoadMoreCompleted
+}) {
+  const renderTaskRow = useCallback((task) => {
+    const isCompleted = task.values?.status === "completed";
+    const isToggling = togglingIds.has(task.id);
+    const dueLabel = formatDueDate(task.values?.dueDate);
+    const overdue = !isCompleted && isDueDateOverdue(task.values?.dueDate);
+    const soon = !isCompleted && isDueDateSoon(task.values?.dueDate);
+    const stageName = task.values?.stageId ? stageLabels2[task.values.stageId] : null;
+    const clientInfo = task.values?.clientId ? clientsMap.get(task.values.clientId) : null;
+    const clientName = clientInfo?.name || null;
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: cls4(
+          "group flex items-start gap-3 py-2.5 px-3 rounded-md transition-colors duration-150 cursor-pointer",
+          "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+          isCompleted && "opacity-60",
+          overdue && "border-l-2 border-l-red-500 rounded-l-none",
+          soon && !overdue && "border-l-2 border-l-amber-450 rounded-l-none"
+        ),
+        onClick: () => onOpenTask(task.id),
+        children: [
+          /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: "pt-0.5 shrink-0",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx7(
+                Checkbox,
+                {
+                  checked: isCompleted,
+                  size: "small",
+                  onCheckedChange: () => {
+                    if (!isToggling) onToggleTask(task.id, task.values?.status);
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+              /* @__PURE__ */ jsx7(
+                Typography6,
+                {
+                  variant: "body2",
+                  className: cls4(
+                    "leading-snug",
+                    isCompleted && "line-through text-text-disabled dark:text-text-disabled-dark"
+                  ),
+                  children: task.values?.title || "Untitled Task"
+                }
+              ),
+              task.values?.priority === "high" && /* @__PURE__ */ jsx7(Chip2, { colorScheme: "red", size: "smallest", children: "High" })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 mt-1 flex-wrap", children: [
+              dueLabel && /* @__PURE__ */ jsxs7("span", { className: cls4(
+                "inline-flex items-center gap-1 text-[11px]",
+                overdue && "text-red-600 dark:text-red-400 font-medium",
+                soon && !overdue && "text-amber-600 dark:text-amber-400 font-medium",
+                !overdue && !soon && "text-text-secondary dark:text-text-secondary-dark"
+              ), children: [
+                overdue ? /* @__PURE__ */ jsx7(AlertTriangleIcon3, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx7(CalendarIcon, { className: "h-3 w-3" }),
+                dueLabel
+              ] }),
+              clientName && task.values?.clientId && /* @__PURE__ */ jsxs7(
+                Typography6,
+                {
+                  variant: "body2",
+                  className: cls4(
+                    "inline-flex items-center gap-1 text-primary hover:text-primary-dark",
+                    "dark:text-primary-light dark:hover:text-primary",
+                    "hover:underline cursor-pointer text-[11px]"
+                  ),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onOpenClient(task.values.clientId);
+                  },
+                  children: [
+                    (() => {
+                      const clientPic = clientInfo?.picture;
+                      const clientInitial = (clientName || "?")[0].toUpperCase();
+                      return clientPic ? /* @__PURE__ */ jsx7("img", { src: clientPic, alt: "", className: "w-4 h-4 rounded-full object-cover shrink-0" }) : /* @__PURE__ */ jsx7("div", { className: "w-4 h-4 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 dark:text-surface-400 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx7("span", { className: "text-[9px] font-semibold", children: clientInitial }) });
+                    })(),
+                    clientName
+                  ]
+                }
+              ),
+              stageName && /* @__PURE__ */ jsx7(Chip2, { size: "smallest", colorScheme: "cyan", outlined: true, children: stageName }),
+              isCompleted && task.values?.resolution && resolutionDisplay[task.values.resolution] && /* @__PURE__ */ jsx7(
+                Chip2,
+                {
+                  size: "smallest",
+                  colorScheme: resolutionDisplay[task.values.resolution].colorScheme,
+                  children: resolutionDisplay[task.values.resolution].label
+                }
+              )
+            ] })
+          ] })
+        ]
+      },
+      task.id
+    );
+  }, [togglingIds, onToggleTask, onOpenTask, onOpenClient, clientsMap, recentlyToggledIds, stageLabels2]);
+  if (loading) {
+    return /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-3", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 py-2 px-3", children: [
+      /* @__PURE__ */ jsx7(Skeleton4, { width: 18, height: 18 }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex-1 space-y-1", children: [
+        /* @__PURE__ */ jsx7(Skeleton4, { width: 200, height: 16 }),
+        /* @__PURE__ */ jsx7(Skeleton4, { width: 120, height: 12 })
+      ] })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsx7("div", { className: "flex-1 overflow-y-auto", children: tasks.length === 0 ? /* @__PURE__ */ jsxs7(Card4, { className: "flex flex-col items-center justify-center py-10 px-6 text-center mt-2 border-dashed", children: [
+    /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500 mb-3", children: /* @__PURE__ */ jsx7(CheckCircle2Icon2, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx7(Typography6, { variant: "subtitle2", className: "mb-1", children: "All clear!" }),
+    /* @__PURE__ */ jsx7(Typography6, { variant: "body2", color: "secondary", children: "No tasks at the moment. New tasks will show up here automatically." })
+  ] }) : /* @__PURE__ */ jsxs7("div", { className: "space-y-4", children: [
+    pendingTasks.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "space-y-0.5", children: [
+      visiblePendingTasks.map(renderTaskRow),
+      hasMorePending && /* @__PURE__ */ jsx7("div", { className: "pt-2", children: /* @__PURE__ */ jsxs7(
+        Button5,
+        {
+          variant: "text",
+          size: "small",
+          color: "primary",
+          className: "w-full justify-center",
+          onClick: onLoadMorePending,
+          children: [
+            "Load more (",
+            pendingCount - visiblePendingTasks.length,
+            " remaining)"
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx7(
+      CompletedSection,
+      {
+        tasks: completedTasks,
+        renderTaskRow,
+        onExpand: onExpandCompleted,
+        onLoadMore: onLoadMoreCompleted,
+        loading: loadingCompleted,
+        hasMore: completedHasMore
+      }
+    )
+  ] }) });
+}
+function CompletedSection({
+  tasks,
+  renderTaskRow,
+  onExpand,
+  onLoadMore,
+  loading,
+  hasMore
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const handleToggle = () => {
+    const willExpand = !expanded;
+    setExpanded(willExpand);
+    if (willExpand) onExpand();
+  };
+  return /* @__PURE__ */ jsxs7("div", { children: [
+    /* @__PURE__ */ jsx7(
+      Button5,
+      {
+        variant: "text",
+        size: "small",
+        color: "neutral",
+        className: "w-full justify-between hover:bg-surface-accent-100 dark:hover:bg-surface-800 px-3 py-1.5 h-auto text-left",
+        onClick: handleToggle,
+        endIcon: /* @__PURE__ */ jsx7(
+          "svg",
+          {
+            className: cls4(
+              "h-3 w-3 text-text-secondary dark:text-text-secondary-dark transition-transform duration-150",
+              expanded && "rotate-90"
+            ),
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx7("polyline", { points: "9 18 15 12 9 6" })
+          }
+        ),
+        children: /* @__PURE__ */ jsxs7(
+          Typography6,
+          {
+            variant: "caption",
+            color: "secondary",
+            className: "font-semibold uppercase tracking-wider text-[10px]",
+            children: [
+              "Completed",
+              tasks.length > 0 ? ` (${tasks.length}${hasMore ? "+" : ""})` : ""
+            ]
+          }
+        )
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx7("div", { className: "mt-1 space-y-0.5", children: loading && tasks.length === 0 ? /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-3 py-3", children: [
+      /* @__PURE__ */ jsx7(Skeleton4, { width: 18, height: 18 }),
+      /* @__PURE__ */ jsx7(Skeleton4, { width: 200, height: 16 })
+    ] }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      tasks.map(renderTaskRow),
+      hasMore && /* @__PURE__ */ jsx7("div", { className: "pt-2", children: /* @__PURE__ */ jsx7(
+        Button5,
+        {
+          variant: "text",
+          size: "small",
+          color: "primary",
+          className: "w-full justify-center",
+          onClick: onLoadMore,
+          disabled: loading,
+          children: loading ? "Loading..." : "Load more completed"
+        }
+      ) })
+    ] }) })
+  ] });
+}
+
+// src/debug/crm-dashboard/TasksView.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var PENDING_PAGE_SIZE = 50;
+function isDueDateOverdue2(dateStr) {
+  if (!dateStr) return false;
+  const d = new Date(dateStr);
+  if (isNaN(d.getTime())) return false;
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  return d < today;
+}
+function TasksView({
+  loading,
+  tasks,
+  togglingIds,
+  onToggleTask,
+  onOpenTask,
+  onOpenClient,
+  clientsMap,
+  pipelineStages,
+  recentlyToggledIds,
+  completedTasks,
+  completedLoaded,
+  loadingCompleted,
+  completedHasMore,
+  onExpandCompleted,
+  onLoadMoreCompleted
+}) {
+  const stageLabels2 = useMemo(
+    () => Object.fromEntries(
+      pipelineStages.map((s) => [s.values?.stageKey, s.values?.label])
+    ),
+    [pipelineStages]
+  );
+  const stageFilterOrder = useMemo(
+    () => pipelineStages.map((s) => s.values?.stageKey).filter(Boolean),
+    [pipelineStages]
+  );
+  const [quickFilter, setQuickFilter] = useState2("all");
+  const [stageFilter, setStageFilter] = useState2(null);
+  const [clientFilter, setClientFilter] = useState2(null);
+  const [searchText, setSearchText] = useState2("");
+  const [visiblePendingCount, setVisiblePendingCount] = useState2(PENDING_PAGE_SIZE);
+  const overdueTasks = useMemo(
+    () => tasks.filter(
+      (t) => t.values?.status === "pending" && !recentlyToggledIds.has(t.id) && isDueDateOverdue2(t.values?.dueDate)
+    ),
+    [tasks, recentlyToggledIds]
+  );
+  const activeClientIds = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    tasks.forEach((t) => {
+      if (t.values?.clientId) ids.add(t.values.clientId);
+    });
+    return Array.from(ids).sort((a, b) => {
+      const na = clientsMap.get(a)?.name || "";
+      const nb = clientsMap.get(b)?.name || "";
+      return na.localeCompare(nb);
+    });
+  }, [tasks, clientsMap]);
+  const stageCounts = useMemo(() => {
+    const counts = {};
+    tasks.forEach((t) => {
+      if (t.values?.status === "pending" && t.values?.stageId) {
+        counts[t.values.stageId] = (counts[t.values.stageId] || 0) + 1;
+      }
+    });
+    return counts;
+  }, [tasks]);
+  const filteredPendingTasks = useMemo(() => {
+    let filtered = tasks.filter(
+      (t) => t.values?.status === "pending" || t.values?.status === "completed" && recentlyToggledIds.has(t.id)
+    );
+    if (quickFilter === "overdue") {
+      filtered = filtered.filter(
+        (t) => isDueDateOverdue2(t.values?.dueDate) || recentlyToggledIds.has(t.id)
+      );
+    }
+    if (stageFilter) {
+      filtered = filtered.filter(
+        (t) => t.values?.stageId === stageFilter || recentlyToggledIds.has(t.id)
+      );
+    }
+    if (clientFilter) {
+      filtered = filtered.filter(
+        (t) => t.values?.clientId === clientFilter || recentlyToggledIds.has(t.id)
+      );
+    }
+    if (searchText.trim()) {
+      const q = searchText.trim().toLowerCase();
+      filtered = filtered.filter((t) => {
+        const title = (t.values?.title || "").toLowerCase();
+        const desc = (t.values?.description || "").toLowerCase();
+        const clientName = t.values?.clientId ? (clientsMap.get(t.values.clientId)?.name || "").toLowerCase() : "";
+        return title.includes(q) || desc.includes(q) || clientName.includes(q);
+      });
+    }
+    return filtered;
+  }, [tasks, recentlyToggledIds, quickFilter, stageFilter, clientFilter, searchText, clientsMap]);
+  const visiblePendingTasks = useMemo(
+    () => filteredPendingTasks.slice(0, visiblePendingCount),
+    [filteredPendingTasks, visiblePendingCount]
+  );
+  const hasMorePending = filteredPendingTasks.length > visiblePendingCount;
+  const pendingCount = filteredPendingTasks.length;
+  const handleClearAllFilters = useCallback2(() => {
+    setQuickFilter("all");
+    setStageFilter(null);
+    setClientFilter(null);
+    setSearchText("");
+  }, []);
+  const hasActiveFilter = quickFilter !== "all" || stageFilter !== null || clientFilter !== null || searchText !== "";
+  return /* @__PURE__ */ jsx8("div", { className: "flex flex-col h-full bg-white dark:bg-surface-900", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-4 overflow-y-auto flex-1", children: [
+    /* @__PURE__ */ jsx8(
+      TaskFilters,
+      {
+        quickFilter,
+        onQuickFilterChange: setQuickFilter,
+        stageFilter,
+        onStageFilterChange: setStageFilter,
+        clientFilter,
+        onClientFilterChange: setClientFilter,
+        searchText,
+        onSearchTextChange: setSearchText,
+        hasActiveFilter,
+        onClearAllFilters: handleClearAllFilters,
+        overdueTasks,
+        pendingTasks: tasks.filter((t) => t.values?.status === "pending" && !recentlyToggledIds.has(t.id)),
+        stageLabels: stageLabels2,
+        stageFilterOrder,
+        stageCounts,
+        activeClientIds,
+        clientsMap
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      TaskTable,
+      {
+        tasks,
+        loading,
+        pendingTasks: filteredPendingTasks,
+        visiblePendingTasks,
+        hasMorePending,
+        onLoadMorePending: () => setVisiblePendingCount((prev) => prev + PENDING_PAGE_SIZE),
+        pendingCount,
+        togglingIds,
+        onToggleTask,
+        onOpenTask,
+        onOpenClient,
+        clientsMap,
+        stageLabels: stageLabels2,
+        recentlyToggledIds,
+        completedTasks,
+        completedLoaded,
+        loadingCompleted,
+        completedHasMore,
+        onExpandCompleted,
+        onLoadMoreCompleted
+      }
+    )
+  ] }) });
+}
+
+// src/debug/crm-dashboard/CalendarWidget.tsx
+import { useState as useState3, useMemo as useMemo2, useCallback as useCallback3 } from "react";
+import {
+  Typography as Typography7,
+  cls as cls5,
+  Chip as Chip3,
+  Skeleton as Skeleton5,
+  IconButton as IconButton2,
+  Separator as Separator3,
+  Button as Button6,
+  ChevronLeftIcon,
+  ChevronRightIcon as ChevronRightIcon2
+} from "@rebasepro/ui";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function endOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function toDateKey(date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function isBeforeToday(date) {
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d < today;
+}
+var stageLabels = {
+  incoming: "Incoming",
+  email_sent: "Intro Email",
+  discovery_call: "Discovery",
+  agreements: "Agreements",
+  onboarding: "Onboarding",
+  active: "Active",
+  delivered: "Delivered",
+  completed: "Done"
+};
+function buildCalendarGrid(viewDate) {
+  const today = /* @__PURE__ */ new Date();
+  const first = startOfMonth(viewDate);
+  const last = endOfMonth(viewDate);
+  let startDay = first.getDay() - 1;
+  if (startDay < 0) startDay = 6;
+  const days = [];
+  for (let i = startDay - 1; i >= 0; i--) {
+    const d = new Date(first);
+    d.setDate(d.getDate() - (i + 1));
+    days.push({
+      date: d,
+      isCurrentMonth: false,
+      isToday: isSameDay(d, today),
+      dateKey: toDateKey(d)
+    });
+  }
+  for (let d = 1; d <= last.getDate(); d++) {
+    const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);
+    days.push({
+      date,
+      isCurrentMonth: true,
+      isToday: isSameDay(date, today),
+      dateKey: toDateKey(date)
+    });
+  }
+  while (days.length % 7 !== 0) {
+    const d = new Date(last);
+    d.setDate(d.getDate() + (days.length - (startDay + last.getDate())) + 1);
+    days.push({
+      date: d,
+      isCurrentMonth: false,
+      isToday: isSameDay(d, today),
+      dateKey: toDateKey(d)
+    });
+  }
+  return days;
+}
+var DAY_HEADERS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function CalendarWidget({ loading, tasks, onOpenTask }) {
+  const [viewDate, setViewDate] = useState3(() => /* @__PURE__ */ new Date());
+  const [selectedDay, setSelectedDay] = useState3(null);
+  const tasksByDate = useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const task of tasks) {
+      if (!task.values?.dueDate) continue;
+      const d = new Date(task.values.dueDate);
+      const key = toDateKey(d);
+      if (!map.has(key)) map.set(key, []);
+      map.get(key).push(task);
+    }
+    return map;
+  }, [tasks]);
+  const calendarDays = useMemo2(() => buildCalendarGrid(viewDate), [viewDate]);
+  const goToPrevMonth = useCallback3(() => {
+    setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
+    setSelectedDay(null);
+  }, []);
+  const goToNextMonth = useCallback3(() => {
+    setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
+    setSelectedDay(null);
+  }, []);
+  const goToToday = useCallback3(() => {
+    const today = /* @__PURE__ */ new Date();
+    setViewDate(new Date(today.getFullYear(), today.getMonth(), 1));
+    setSelectedDay(toDateKey(today));
+  }, []);
+  const selectedDayTasks = useMemo2(() => {
+    if (!selectedDay) return [];
+    return tasksByDate.get(selectedDay) || [];
+  }, [selectedDay, tasksByDate]);
+  return /* @__PURE__ */ jsxs9("div", { children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsx9(Typography7, { variant: "subtitle1", children: "Calendar" }),
+      /* @__PURE__ */ jsx9(
+        Button6,
+        {
+          variant: "text",
+          size: "small",
+          color: "primary",
+          className: "p-0 h-auto min-w-0",
+          onClick: goToToday,
+          children: "Today"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx9(
+        IconButton2,
+        {
+          size: "smallest",
+          "aria-label": "Previous month",
+          onClick: goToPrevMonth,
+          children: /* @__PURE__ */ jsx9(ChevronLeftIcon, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs9(Typography7, { variant: "body2", className: "font-semibold", children: [
+        MONTH_NAMES[viewDate.getMonth()],
+        " ",
+        viewDate.getFullYear()
+      ] }),
+      /* @__PURE__ */ jsx9(
+        IconButton2,
+        {
+          size: "smallest",
+          "aria-label": "Next month",
+          onClick: goToNextMonth,
+          children: /* @__PURE__ */ jsx9(ChevronRightIcon2, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    loading ? /* @__PURE__ */ jsx9(Skeleton5, { className: "h-48 w-full rounded-lg" }) : /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-7 mb-1", children: DAY_HEADERS.map((d) => /* @__PURE__ */ jsx9("div", { className: "text-center py-1", children: /* @__PURE__ */ jsx9(Typography7, { variant: "caption", color: "secondary", className: "text-[10px] font-semibold uppercase tracking-wider", children: d }) }, d)) }),
+      /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-7 gap-0.5", children: calendarDays.map((day) => {
+        const dayTasks = tasksByDate.get(day.dateKey) || [];
+        const hasTasks = dayTasks.length > 0;
+        const isSelected = selectedDay === day.dateKey;
+        const pendingCount = dayTasks.filter((t) => t.values.status === "pending").length;
+        const completedCount = dayTasks.filter((t) => t.values.status === "completed").length;
+        const hasOverdue = dayTasks.some(
+          (t) => t.values.status === "pending" && isBeforeToday(new Date(t.values.dueDate))
+        );
+        return /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            onClick: () => setSelectedDay(isSelected ? null : day.dateKey),
+            className: cls5(
+              "flex flex-col items-center justify-center py-1.5 rounded-md transition-colors duration-100 focus:outline-none",
+              day.isCurrentMonth ? "text-text-primary dark:text-text-primary-dark" : "text-surface-300 dark:text-surface-650",
+              day.isToday && !isSelected && "ring-1 ring-primary/50",
+              isSelected ? "bg-primary/10 dark:bg-primary/15 ring-1 ring-primary/60" : "hover:bg-surface-100 dark:hover:bg-surface-800",
+              hasTasks && "cursor-pointer"
+            ),
+            children: [
+              /* @__PURE__ */ jsx9(
+                Typography7,
+                {
+                  variant: "caption",
+                  color: "inherit",
+                  className: cls5(
+                    "leading-none tabular-nums text-[11px]",
+                    day.isToday && "font-semibold text-primary dark:text-primary-light"
+                  ),
+                  children: day.date.getDate()
+                }
+              ),
+              hasTasks ? /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-0.5 mt-1 h-[5px]", children: [
+                hasOverdue && /* @__PURE__ */ jsx9("span", { className: "w-[5px] h-[5px] rounded-full bg-red-500" }),
+                pendingCount > 0 && !hasOverdue && /* @__PURE__ */ jsx9("span", { className: "w-[5px] h-[5px] rounded-full bg-primary" }),
+                completedCount > 0 && /* @__PURE__ */ jsx9("span", { className: "w-[5px] h-[5px] rounded-full bg-emerald-500" })
+              ] }) : /* @__PURE__ */ jsx9("div", { className: "h-[5px] mt-1" })
+            ]
+          },
+          day.dateKey
+        );
+      }) }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3 mt-3 mb-1 px-1", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx9("span", { className: "w-[5px] h-[5px] rounded-full bg-primary" }),
+          /* @__PURE__ */ jsx9(Typography7, { variant: "caption", color: "secondary", className: "text-[10px]", children: "Pending" })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx9("span", { className: "w-[5px] h-[5px] rounded-full bg-red-500" }),
+          /* @__PURE__ */ jsx9(Typography7, { variant: "caption", color: "secondary", className: "text-[10px]", children: "Overdue" })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx9("span", { className: "w-[5px] h-[5px] rounded-full bg-emerald-500" }),
+          /* @__PURE__ */ jsx9(Typography7, { variant: "caption", color: "secondary", className: "text-[10px]", children: "Done" })
+        ] })
+      ] }),
+      selectedDay && /* @__PURE__ */ jsxs9("div", { className: "mt-2", children: [
+        /* @__PURE__ */ jsx9(Separator3, { orientation: "horizontal", className: "mb-2" }),
+        selectedDayTasks.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "py-3 text-center", children: /* @__PURE__ */ jsx9(Typography7, { variant: "caption", color: "secondary", children: "No tasks on this day" }) }) : /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs9(Typography7, { variant: "caption", color: "secondary", className: "mb-1 px-1", children: [
+            selectedDayTasks.length,
+            " task",
+            selectedDayTasks.length !== 1 ? "s" : "",
+            " \u2014 ",
+            (/* @__PURE__ */ new Date(selectedDay + "T00:00:00")).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" })
+          ] }),
+          selectedDayTasks.map((task) => {
+            const isPending = task.values.status === "pending";
+            const isOverdue = isPending && isBeforeToday(new Date(task.values.dueDate));
+            return /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                onClick: () => onOpenTask(task.id),
+                className: cls5(
+                  "flex items-start gap-2 px-2 py-1.5 rounded-md text-left w-full",
+                  "hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors duration-100 focus:outline-none"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx9(
+                    "span",
+                    {
+                      className: cls5(
+                        "w-1.5 h-1.5 rounded-full mt-1.5 shrink-0",
+                        isOverdue ? "bg-red-500" : isPending ? "bg-primary" : "bg-emerald-500"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsx9(Typography7, { variant: "body2", className: "truncate leading-snug", children: task.values.title }),
+                    /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+                      task.values.client?.name && /* @__PURE__ */ jsx9(Typography7, { variant: "caption", color: "secondary", className: "truncate text-[10px]", children: task.values.client.name }),
+                      task.values.stageId && /* @__PURE__ */ jsx9(Typography7, { variant: "caption", color: "disabled", className: "truncate text-[10px]", children: stageLabels[task.values.stageId] || task.values.stageId })
+                    ] })
+                  ] }),
+                  task.values.priority === "high" && /* @__PURE__ */ jsx9(Chip3, { colorScheme: "red", size: "smallest", children: "High" })
+                ]
+              },
+              task.id
+            );
+          })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/debug/crm-dashboard/CrmDashboardDemo.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var COLOR_MAP = {
+  blue: "#3b82f6",
+  indigo: "#6366f1",
+  purple: "#8b5cf6",
+  yellow: "#eab308",
+  teal: "#14b8a6",
+  green: "#22c55e",
+  orange: "#f97316",
+  gray: "#6b7280",
+  red: "#ef4444",
+  pink: "#ec4899",
+  sky: "#0ea5e9",
+  amber: "#f59e0b"
+};
+function resolveColor(colorName) {
+  return COLOR_MAP[colorName] ?? COLOR_MAP.gray;
+}
+var STAGE_LABELS = {
+  incoming: "Incoming",
+  email_sent: "Intro Email",
+  discovery_call: "Discovery",
+  agreements: "Agreements",
+  onboarding: "Onboarding",
+  active: "Active",
+  delivered: "Delivered",
+  completed: "Done"
+};
+var PIPELINES = [
+  { id: "main", name: "Main Sales Pipeline", isDefault: true, color: "blue" },
+  { id: "partnerships", name: "Partnerships Funnel", isDefault: false, color: "indigo" }
+];
+var INITIAL_STAGES = {
+  main: [
+    { stageKey: "incoming", label: "Incoming", shortLabel: "Inbound", color: "blue", icon: "inbox", sortOrder: 1, isTerminal: false, isLostStage: false },
+    { stageKey: "email_sent", label: "Intro Email", shortLabel: "Intro", color: "indigo", icon: "mail", sortOrder: 2, isTerminal: false, isLostStage: false },
+    { stageKey: "discovery_call", label: "Discovery", shortLabel: "Disco", color: "purple", icon: "phone", sortOrder: 3, isTerminal: false, isLostStage: false },
+    { stageKey: "agreements", label: "Agreements", shortLabel: "Contracts", color: "yellow", icon: "file-text", sortOrder: 4, isTerminal: false, isLostStage: false },
+    { stageKey: "onboarding", label: "Onboarding", shortLabel: "Onboard", color: "teal", icon: "user-check", sortOrder: 5, isTerminal: false, isLostStage: false },
+    { stageKey: "active", label: "Active", shortLabel: "Active", color: "green", icon: "activity", sortOrder: 6, isTerminal: false, isLostStage: false },
+    { stageKey: "delivered", label: "Delivered", shortLabel: "Done", color: "orange", icon: "check-circle", sortOrder: 7, isTerminal: true, isLostStage: false },
+    { stageKey: "completed", label: "Done", shortLabel: "Closed", color: "red", icon: "archive", sortOrder: 8, isTerminal: true, isLostStage: true }
+  ],
+  partnerships: [
+    { stageKey: "incoming", label: "Outreach", shortLabel: "Outbound", color: "blue", icon: "send", sortOrder: 1, isTerminal: false, isLostStage: false },
+    { stageKey: "discovery_call", label: "First Meeting", shortLabel: "Meet", color: "purple", icon: "users", sortOrder: 2, isTerminal: false, isLostStage: false },
+    { stageKey: "agreements", label: "Proposal", shortLabel: "Prop", color: "yellow", icon: "file", sortOrder: 3, isTerminal: false, isLostStage: false },
+    { stageKey: "active", label: "Partnered", shortLabel: "Live", color: "green", icon: "handshake", sortOrder: 4, isTerminal: true, isLostStage: false }
+  ]
+};
+var INITIAL_CLIENTS = [
+  { id: "client-1", name: "Alice Johnson", email: "alice@johnson.com", phone: "+1 (555) 0192", stage: "discovery_call" },
+  { id: "client-2", name: "Bob Smith", email: "bob@smith.co", phone: "+1 (555) 0143", stage: "email_sent" },
+  { id: "client-3", name: "Carol White", email: "carol@whitecorp.com", phone: "+1 (555) 0188", stage: "agreements" },
+  { id: "client-4", name: "David Brown", email: "david.b@brown.net", phone: "+1 (555) 0177", stage: "onboarding" },
+  { id: "client-5", name: "Eva Green", email: "eva@greenllc.com", phone: "+1 (555) 0165", stage: "active" },
+  { id: "client-6", name: "Frank Miller", email: "frank@miller.org", phone: "+1 (555) 0112", stage: "completed" }
+];
+var INITIAL_TASKS = [
+  {
+    id: "task-1",
+    values: {
+      title: "Schedule discovery call",
+      status: "pending",
+      resolution: null,
+      dueDate: new Date(Date.now() + 864e5).toISOString().split("T")[0],
+      stageId: "discovery_call",
+      clientId: "client-1",
+      priority: "high",
+      description: "Set up a 30-min Zoom call to discuss requirements and partnership scope.",
+      notes: "Alice is in EST timezone, prefers morning slots.",
+      createdAt: new Date(Date.now() - 1728e5).toISOString()
+    }
+  },
+  {
+    id: "task-2",
+    values: {
+      title: "Draft partnership agreement",
+      status: "pending",
+      resolution: null,
+      dueDate: new Date(Date.now() - 1728e5).toISOString().split("T")[0],
+      // overdue
+      stageId: "agreements",
+      clientId: "client-3",
+      priority: "high",
+      description: "Draft enterprise contract incorporating customized SLA definitions.",
+      notes: "Carol requested special uptime guarantees in Appendix A.",
+      createdAt: new Date(Date.now() - 3456e5).toISOString()
+    }
+  },
+  {
+    id: "task-3",
+    values: {
+      title: "Send onboarding checklist",
+      status: "pending",
+      resolution: null,
+      dueDate: new Date(Date.now() + 1728e5).toISOString().split("T")[0],
+      stageId: "onboarding",
+      clientId: "client-4",
+      priority: "medium",
+      description: "Assemble welcome packet, Slack community invite link, and environment setup guidelines.",
+      notes: "Must carbon copy David's CTO on all setup emails.",
+      createdAt: new Date(Date.now() - 864e5).toISOString()
+    }
+  },
+  {
+    id: "task-4",
+    values: {
+      title: "Follow up on intro email",
+      status: "pending",
+      resolution: null,
+      dueDate: new Date(Date.now() - 864e5).toISOString().split("T")[0],
+      // overdue
+      stageId: "email_sent",
+      clientId: "client-2",
+      priority: "medium",
+      description: "Check if Bob had time to review the technical proposal sent last week.",
+      notes: "Call if no email response by Friday.",
+      createdAt: new Date(Date.now() - 2592e5).toISOString()
+    }
+  },
+  {
+    id: "task-5",
+    values: {
+      title: "Review deliverables and request feedback",
+      status: "pending",
+      resolution: null,
+      dueDate: new Date(Date.now() + 432e6).toISOString().split("T")[0],
+      stageId: "active",
+      clientId: "client-5",
+      priority: "low",
+      description: "Schedule final demo review, submit deliverables reports, and email feedback questionnaire.",
+      notes: "",
+      createdAt: new Date(Date.now() - 864e5).toISOString()
+    }
+  }
+];
+var INITIAL_COMPLETED_TASKS = [
+  {
+    id: "task-comp-1",
+    values: {
+      title: "Review inbound request form",
+      status: "completed",
+      resolution: "verified",
+      dueDate: new Date(Date.now() - 2592e5).toISOString().split("T")[0],
+      stageId: "incoming",
+      clientId: "client-1",
+      priority: "medium",
+      description: "Analyze initial request details submitted via web form.",
+      notes: "",
+      createdAt: new Date(Date.now() - 3456e5).toISOString()
+    }
+  },
+  {
+    id: "task-comp-2",
+    values: {
+      title: "Send pricing brochure",
+      status: "completed",
+      resolution: "sent",
+      dueDate: new Date(Date.now() - 1728e5).toISOString().split("T")[0],
+      stageId: "email_sent",
+      clientId: "client-2",
+      priority: "medium",
+      description: "Send standard PDF booklet outlining custom packages and service tiers.",
+      notes: "",
+      createdAt: new Date(Date.now() - 2592e5).toISOString()
+    }
+  }
+];
+var INITIAL_ACTIVITIES = [
+  {
+    id: "act-1",
+    values: {
+      type: "email_sent",
+      description: "Intro Email sent to Bob Smith",
+      createdAt: new Date(Date.now() - 36e5).toISOString(),
+      metadata: {
+        subject: "Welcome to Rebase \u2014 Pricing Tiers & Guidelines",
+        body: "Hi Bob,\n\nThanks for your interest in Rebase! I have attached our standard pricing sheet and product documentation for your review.\n\nLet's schedule a brief 15-minute call next week to answer any questions you might have.\n\nBest regards,\nFrancesco",
+        to: "bob@smith.co",
+        mode: "simulated"
+      }
+    }
+  },
+  {
+    id: "act-2",
+    values: {
+      type: "agreements_sent",
+      description: "Agreements sent to Carol White",
+      createdAt: new Date(Date.now() - 144e5).toISOString(),
+      metadata: {
+        taskId: "task-2",
+        taskTitle: "Draft partnership agreement"
+      }
+    }
+  },
+  {
+    id: "act-3",
+    values: {
+      type: "incoming",
+      description: "Incoming lead Alice Johnson created",
+      createdAt: new Date(Date.now() - 864e5).toISOString()
+    }
+  },
+  {
+    id: "act-4",
+    values: {
+      type: "note",
+      description: "Added a note for David Brown: 'Prefers Slack for communications'",
+      createdAt: new Date(Date.now() - 1728e5).toISOString()
+    }
+  }
+];
+function getGreeting() {
+  const hour = (/* @__PURE__ */ new Date()).getHours();
+  if (hour < 12) return "Good morning";
+  if (hour < 18) return "Good afternoon";
+  return "Good evening";
+}
+function getFormattedDate() {
+  return (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
+    weekday: "long",
+    month: "long",
+    day: "numeric"
+  });
+}
+function CrmDashboardDemo() {
+  const [loading, setLoading] = useState4(true);
+  const [activitiesLoading, setActivitiesLoading] = useState4(true);
+  const [clients, setClients] = useState4(INITIAL_CLIENTS);
+  const [tasks, setTasks] = useState4(INITIAL_TASKS);
+  const [completedTasks, setCompletedTasks] = useState4(INITIAL_COMPLETED_TASKS);
+  const [activities, setActivities] = useState4(INITIAL_ACTIVITIES);
+  const [selectedPipelineId, setSelectedPipelineId] = useState4("main");
+  const [toastMessage, setToastMessage] = useState4(null);
+  const [activeSideEntity, setActiveSideEntity] = useState4(null);
+  const [emailViewerOpen, setEmailViewerOpen] = useState4(false);
+  const [selectedEmail, setSelectedEmail] = useState4(null);
+  const [newClientName, setNewClientName] = useState4("");
+  const [newClientEmail, setNewClientEmail] = useState4("");
+  const [newClientPhone, setNewClientPhone] = useState4("");
+  const [newClientStage, setNewClientStage] = useState4("incoming");
+  const [togglingIds, setTogglingIds] = useState4(/* @__PURE__ */ new Set());
+  const [recentlyToggledIds, setRecentlyToggledIds] = useState4(/* @__PURE__ */ new Set());
+  const [completedLoaded, setCompletedLoaded] = useState4(false);
+  const [loadingCompleted, setLoadingCompleted] = useState4(false);
+  useEffect(() => {
+    const timer1 = setTimeout(() => setLoading(false), 450);
+    const timer2 = setTimeout(() => setActivitiesLoading(false), 600);
+    return () => {
+      clearTimeout(timer1);
+      clearTimeout(timer2);
+    };
+  }, []);
+  const showToast = useCallback4((msg) => {
+    setToastMessage(msg);
+    const timer = setTimeout(() => setToastMessage(null), 3e3);
+    return () => clearTimeout(timer);
+  }, []);
+  const handleExpandCompleted = useCallback4(() => {
+    if (completedLoaded) return;
+    setLoadingCompleted(true);
+    setTimeout(() => {
+      setCompletedLoaded(true);
+      setLoadingCompleted(false);
+    }, 300);
+  }, [completedLoaded]);
+  const handleLoadMoreCompleted = useCallback4(() => {
+    setLoadingCompleted(true);
+    setTimeout(() => {
+      setLoadingCompleted(false);
+      showToast("Loaded additional completed tasks.");
+    }, 300);
+  }, [showToast]);
+  const handlePipelineChange = useCallback4((pipelineId) => {
+    setSelectedPipelineId(pipelineId);
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      showToast(`Switched to ${PIPELINES.find((p) => p.id === pipelineId)?.name}`);
+    }, 200);
+  }, [showToast]);
+  const clientsMap = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    clients.forEach((c) => map.set(c.id, { name: c.name }));
+    return map;
+  }, [clients]);
+  const tasksMap = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    tasks.forEach((t) => map.set(t.id, t));
+    completedTasks.forEach((t) => map.set(t.id, t));
+    return map;
+  }, [tasks, completedTasks]);
+  const handleToggleTask = useCallback4((taskId, currentStatus) => {
+    setTogglingIds((prev) => new Set(prev).add(taskId));
+    setTimeout(() => {
+      if (currentStatus === "pending") {
+        const task = tasks.find((t) => t.id === taskId);
+        if (task) {
+          setTasks((prev) => prev.filter((t) => t.id !== taskId));
+          const completedTask = {
+            ...task,
+            values: { ...task.values, status: "completed", resolution: "done" }
+          };
+          setCompletedTasks((prev) => [completedTask, ...prev]);
+          const newAct = {
+            id: `act-${Date.now()}`,
+            values: {
+              type: "task_completed",
+              description: `Task completed: "${task.values.title}"`,
+              createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+              metadata: {
+                taskId: task.id,
+                taskTitle: task.values.title
+              }
+            }
+          };
+          setActivities((prev) => [newAct, ...prev]);
+          showToast(`Completed task: "${task.values.title}"`);
+        }
+      } else {
+        const task = completedTasks.find((t) => t.id === taskId);
+        if (task) {
+          setCompletedTasks((prev) => prev.filter((t) => t.id !== taskId));
+          const pendingTask = {
+            ...task,
+            values: { ...task.values, status: "pending", resolution: null }
+          };
+          setTasks((prev) => [pendingTask, ...prev]);
+          const newAct = {
+            id: `act-${Date.now()}`,
+            values: {
+              type: "task_created",
+              description: `Task re-opened: "${task.values.title}"`,
+              createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+              metadata: {
+                taskId: task.id,
+                taskTitle: task.values.title
+              }
+            }
+          };
+          setActivities((prev) => [newAct, ...prev]);
+          showToast(`Re-opened task: "${task.values.title}"`);
+        }
+      }
+      setTogglingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(taskId);
+        return next;
+      });
+    }, 200);
+  }, [tasks, completedTasks, showToast]);
+  const handleCompleteTaskFromActivity = useCallback4((activity) => {
+    const taskId = activity.values?.metadata?.taskId;
+    if (taskId) {
+      handleToggleTask(taskId, "pending");
+    }
+  }, [handleToggleTask]);
+  const handleViewEmail = useCallback4((activity) => {
+    if (activity.values?.metadata?.subject) {
+      setSelectedEmail({
+        to: activity.values.metadata.to || "",
+        subject: activity.values.metadata.subject,
+        body: activity.values.metadata.body || "",
+        html: activity.values.metadata.html || "",
+        mode: activity.values.metadata.mode || "simulated"
+      });
+      setEmailViewerOpen(true);
+    }
+  }, []);
+  const handleOpenTask = useCallback4((activity) => {
+    const taskId = activity.values?.metadata?.taskId;
+    if (taskId) {
+      setActiveSideEntity({ type: "task", id: taskId });
+    }
+  }, []);
+  const openTaskDrawer = useCallback4((taskId) => {
+    setActiveSideEntity({ type: "task", id: taskId });
+  }, []);
+  const openClientDrawer = useCallback4((clientId) => {
+    setActiveSideEntity({ type: "client", id: clientId });
+  }, []);
+  const openNewClientDrawer = useCallback4(() => {
+    setActiveSideEntity({ type: "new_client" });
+  }, []);
+  const handleCreateClient = () => {
+    if (!newClientName.trim()) return;
+    const newId = `client-${Date.now()}`;
+    const newClient = {
+      id: newId,
+      name: newClientName,
+      email: newClientEmail || `${newClientName.toLowerCase().replace(/\s+/g, ".")}@example.com`,
+      phone: newClientPhone || "+1 (555) 0100",
+      stage: newClientStage
+    };
+    setClients((prev) => [...prev, newClient]);
+    const newTask = {
+      id: `task-${Date.now()}`,
+      values: {
+        title: `Complete discovery onboarding for ${newClientName}`,
+        status: "pending",
+        resolution: null,
+        dueDate: new Date(Date.now() + 2592e5).toISOString().split("T")[0],
+        // 3 days from now
+        stageId: newClientStage,
+        clientId: newId,
+        priority: "medium",
+        description: `Initial welcome packet and service review task for ${newClientName}.`,
+        notes: "",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      }
+    };
+    setTasks((prev) => [newTask, ...prev]);
+    const newAct = {
+      id: `act-${Date.now()}`,
+      values: {
+        type: "incoming",
+        description: `New client "${newClientName}" registered in "${STAGE_LABELS[newClientStage] || newClientStage}"`,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      }
+    };
+    setActivities((prev) => [newAct, ...prev]);
+    showToast(`Created client "${newClientName}"`);
+    setNewClientName("");
+    setNewClientEmail("");
+    setNewClientPhone("");
+    setNewClientStage("incoming");
+    setActiveSideEntity(null);
+  };
+  const handleNavigate = useCallback4((path) => {
+    if (path.includes("stage=")) {
+      showToast(`Stage link clicked: simulated filtering.`);
+    } else {
+      showToast(`Simulated navigation to: ${path}`);
+    }
+  }, [showToast]);
+  const activeStagesData = useMemo3(() => {
+    const stagesList = INITIAL_STAGES[selectedPipelineId] || [];
+    return stagesList.map((s) => {
+      const count = clients.filter((c) => c.stage === s.stageKey).length;
+      return { ...s, count };
+    });
+  }, [clients, selectedPipelineId]);
+  const sortedStages = useMemo3(() => {
+    return [...activeStagesData].sort((a, b) => a.sortOrder - b.sortOrder);
+  }, [activeStagesData]);
+  const activeStagesList = useMemo3(
+    () => sortedStages.filter((s) => !s.isTerminal && !s.isLostStage),
+    [sortedStages]
+  );
+  const closedStagesList = useMemo3(
+    () => sortedStages.filter((s) => s.isTerminal || s.isLostStage),
+    [sortedStages]
+  );
+  const totalInPipeline = useMemo3(() => {
+    return clients.filter((c) => c.stage !== "completed").length;
+  }, [clients]);
+  const insights = useMemo3(() => {
+    const activeClients = clients.filter((c) => c.stage !== "completed" && c.stage !== "delivered").length;
+    const overdueTaskCount = tasks.filter((t) => {
+      if (t.values.status !== "pending") return false;
+      if (!t.values.dueDate) return false;
+      return new Date(t.values.dueDate) < new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth(), (/* @__PURE__ */ new Date()).getDate());
+    }).length;
+    return {
+      pipelines: PIPELINES,
+      activeClients,
+      potentialRevenue: activeClients * 2500,
+      contractedRevenue: clients.filter((c) => c.stage === "completed" || c.stage === "active").length * 8e3,
+      overdueTaskCount
+    };
+  }, [clients, tasks]);
+  const totalRevenue = insights.contractedRevenue + insights.potentialRevenue;
+  const renderDrawerTask = (taskId) => {
+    const task = tasksMap.get(taskId || "");
+    if (!task) return /* @__PURE__ */ jsx10(Typography8, { variant: "body2", color: "secondary", children: "Task not found." });
+    const isCompleted = task.values.status === "completed";
+    const clientInfo = task.values.clientId ? clients.find((c) => c.id === task.values.clientId) : null;
+    const stageName = task.values.stageId ? STAGE_LABELS[task.values.stageId] : "None";
+    return /* @__PURE__ */ jsxs10("div", { className: "flex-1 space-y-4", children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider font-semibold block mb-1", children: "Task Title" }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-2.5", children: [
+          /* @__PURE__ */ jsx10("span", { className: "pt-1", children: /* @__PURE__ */ jsx10(
+            "input",
+            {
+              type: "checkbox",
+              checked: isCompleted,
+              onChange: () => handleToggleTask(task.id, task.values.status),
+              className: "h-4 w-4 rounded border-surface-300 text-primary focus:ring-primary"
+            }
+          ) }),
+          /* @__PURE__ */ jsx10(Typography8, { variant: "h6", className: isCompleted ? "line-through text-text-disabled dark:text-text-disabled-dark" : "text-text-primary dark:text-text-primary-dark", children: task.values.title })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-4 py-2 border-y border-surface-200 dark:border-surface-700", children: [
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider block", children: "Due Date" }),
+          /* @__PURE__ */ jsxs10(Typography8, { variant: "body2", className: "font-medium mt-0.5 inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx10(CalendarIcon2, { className: "h-3.5 w-3.5 text-surface-400" }),
+            task.values.dueDate || "No due date"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider block", children: "Priority" }),
+          /* @__PURE__ */ jsx10(Typography8, { variant: "body2", className: "font-medium mt-0.5", children: task.values.priority === "high" ? /* @__PURE__ */ jsx10("span", { className: "text-red-500 font-semibold uppercase text-xs", children: "High" }) : task.values.priority === "medium" ? /* @__PURE__ */ jsx10("span", { className: "text-amber-500 font-semibold uppercase text-xs", children: "Medium" }) : /* @__PURE__ */ jsx10("span", { className: "text-surface-450 dark:text-surface-500 uppercase text-xs", children: "Low" }) })
+        ] })
+      ] }),
+      clientInfo && /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider font-semibold block mb-1", children: "Related Client" }),
+        /* @__PURE__ */ jsx10(
+          Card5,
+          {
+            className: "p-3 hover:bg-surface-accent-100 dark:hover:bg-surface-800 cursor-pointer transition-colors duration-150",
+            onClick: () => openClientDrawer(clientInfo.id),
+            children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2.5", children: [
+              /* @__PURE__ */ jsx10("div", { className: "w-8 h-8 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center font-semibold", children: clientInfo.name[0].toUpperCase() }),
+              /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx10(Typography8, { variant: "body2", className: "font-medium truncate", children: clientInfo.name }),
+                /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "truncate text-[11px] block", children: clientInfo.email })
+              ] })
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider block mb-0.5", children: "Pipeline Stage" }),
+        /* @__PURE__ */ jsx10(Typography8, { variant: "body2", className: "font-medium", children: stageName })
+      ] }),
+      task.values.description && /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider block mb-0.5", children: "Description" }),
+        /* @__PURE__ */ jsx10("div", { className: "p-3 bg-surface-50 dark:bg-surface-900 rounded-md border border-surface-200 dark:border-surface-700", children: /* @__PURE__ */ jsx10(Typography8, { variant: "body2", className: "whitespace-pre-wrap text-text-primary dark:text-text-primary-dark", children: task.values.description }) })
+      ] }),
+      task.values.notes && /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider block mb-0.5", children: "Notes" }),
+        /* @__PURE__ */ jsxs10(Typography8, { variant: "body2", color: "secondary", className: "italic whitespace-pre-wrap", children: [
+          "\u201C",
+          task.values.notes,
+          "\u201D"
+        ] })
+      ] })
+    ] });
+  };
+  const renderDrawerClient = (clientId) => {
+    const client = clients.find((c) => c.id === clientId);
+    if (!client) return /* @__PURE__ */ jsx10(Typography8, { variant: "body2", color: "secondary", children: "Client not found." });
+    const clientTasks = tasks.filter((t) => t.values.clientId === client.id);
+    const stageName = STAGE_LABELS[client.stage] || client.stage;
+    return /* @__PURE__ */ jsxs10("div", { className: "flex-1 space-y-4", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx10("div", { className: "w-12 h-12 rounded-full bg-primary/10 text-primary dark:text-primary-light flex items-center justify-center text-xl font-semibold", children: client.name[0].toUpperCase() }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx10(Typography8, { variant: "h6", className: "truncate", children: client.name }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1.5 mt-0.5", children: [
+            /* @__PURE__ */ jsx10("span", { className: "w-2 h-2 rounded-full bg-green-500" }),
+            /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", children: stageName })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "space-y-2.5 py-3 border-y border-surface-200 dark:border-surface-700", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-surface-600 dark:text-surface-300", children: [
+          /* @__PURE__ */ jsx10(MailIcon2, { className: "h-4 w-4 text-surface-400" }),
+          /* @__PURE__ */ jsx10(Typography8, { variant: "body2", children: client.email })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-surface-600 dark:text-surface-300", children: [
+          /* @__PURE__ */ jsx10(PhoneIcon, { className: "h-4 w-4 text-surface-400" }),
+          /* @__PURE__ */ jsx10(Typography8, { variant: "body2", children: client.phone })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider font-semibold block mb-2", children: "Pending Client Tasks" }),
+        clientTasks.length === 0 ? /* @__PURE__ */ jsx10(Typography8, { variant: "body2", color: "secondary", className: "italic", children: "No pending tasks for this client." }) : /* @__PURE__ */ jsx10("div", { className: "space-y-1.5", children: clientTasks.map((t) => /* @__PURE__ */ jsx10(
+          Card5,
+          {
+            className: "p-2.5 hover:bg-surface-accent-100 dark:hover:bg-surface-800 cursor-pointer transition-colors duration-150",
+            onClick: () => openTaskDrawer(t.id),
+            children: /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx10(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: t.values.status === "completed",
+                  onChange: (e) => {
+                    e.stopPropagation();
+                    handleToggleTask(t.id, t.values.status);
+                  },
+                  className: "h-3.5 w-3.5 mt-0.5 rounded border-surface-300 text-primary"
+                }
+              ),
+              /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx10(Typography8, { variant: "body2", className: "truncate font-medium leading-snug", children: t.values.title }),
+                t.values.dueDate && /* @__PURE__ */ jsxs10(Typography8, { variant: "caption", color: "secondary", className: "text-[10px] block mt-0.5", children: [
+                  "Due: ",
+                  t.values.dueDate
+                ] })
+              ] })
+            ] })
+          },
+          t.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "pt-2", children: [
+        /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider font-semibold block mb-2", children: "Quick Actions" }),
+        /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsx10(
+            Button7,
+            {
+              variant: "outlined",
+              size: "small",
+              onClick: () => {
+                const newAct = {
+                  id: `act-${Date.now()}`,
+                  values: {
+                    type: "zoom_setup",
+                    description: `Scheduled discovery meeting with ${client.name}`,
+                    createdAt: (/* @__PURE__ */ new Date()).toISOString()
+                  }
+                };
+                setActivities((prev) => [newAct, ...prev]);
+                showToast("Simulated action: Call scheduled");
+              },
+              children: "Schedule Call"
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            Button7,
+            {
+              variant: "outlined",
+              size: "small",
+              onClick: () => {
+                const newAct = {
+                  id: `act-${Date.now()}`,
+                  values: {
+                    type: "email_sent",
+                    description: `Email sent to ${client.name}`,
+                    createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+                    metadata: {
+                      subject: "Following up on discovery call",
+                      body: `Hi ${client.name.split(" ")[0]},
+
+Just wanted to follow up and see if you had any questions on the brochure.
+
+Best,
+Francesco`,
+                      to: client.email,
+                      mode: "simulated"
+                    }
+                  }
+                };
+                setActivities((prev) => [newAct, ...prev]);
+                showToast("Simulated action: Email sent");
+              },
+              children: "Send Email"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  };
+  const renderDrawerNewClient = () => {
+    return /* @__PURE__ */ jsxs10("div", { className: "flex-1 flex flex-col justify-between", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx10(Typography8, { variant: "subtitle1", className: "mb-2", children: "New Lead Details" }),
+        /* @__PURE__ */ jsx10(
+          TextField,
+          {
+            label: "Client Name",
+            required: true,
+            value: newClientName,
+            onChange: (e) => setNewClientName(e.target.value),
+            placeholder: "e.g. George Clark"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          TextField,
+          {
+            label: "Email Address",
+            value: newClientEmail,
+            onChange: (e) => setNewClientEmail(e.target.value),
+            placeholder: "e.g. george@clark.com"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          TextField,
+          {
+            label: "Phone Number",
+            value: newClientPhone,
+            onChange: (e) => setNewClientPhone(e.target.value),
+            placeholder: "e.g. +1 (555) 0122"
+          }
+        ),
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider block mb-1", children: "Pipeline Stage" }),
+          /* @__PURE__ */ jsx10(
+            Select3,
+            {
+              value: newClientStage,
+              onValueChange: (v) => setNewClientStage(v),
+              size: "small",
+              renderValue: (v) => STAGE_LABELS[v] || v,
+              position: "popper",
+              children: Object.entries(STAGE_LABELS).map(([key, val]) => /* @__PURE__ */ jsx10(SelectItem3, { value: key, children: val }, key))
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 pt-6 border-t border-surface-200 dark:border-surface-700 mt-6", children: [
+        /* @__PURE__ */ jsx10(
+          Button7,
+          {
+            variant: "outlined",
+            color: "neutral",
+            className: "flex-1",
+            onClick: () => setActiveSideEntity(null),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          Button7,
+          {
+            variant: "filled",
+            color: "primary",
+            className: "flex-1",
+            onClick: handleCreateClient,
+            disabled: !newClientName.trim(),
+            children: "Create"
+          }
+        )
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: "relative w-full border rounded-xl bg-surface-50 dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-sm flex flex-row", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex-1 flex flex-col p-4 md:p-6 transition-all duration-300", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex flex-col sm:flex-row sm:items-end justify-between mb-6 gap-4", children: [
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx10(Typography8, { variant: "h4", className: "tracking-tight", children: getGreeting() }),
+          /* @__PURE__ */ jsxs10(Typography8, { variant: "body2", color: "secondary", className: "mt-0.5", children: [
+            getFormattedDate(),
+            " \u2014 here's your crm overview."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx10(
+            Button7,
+            {
+              variant: "text",
+              color: "primary",
+              size: "small",
+              onClick: () => {
+                setLoading(true);
+                setActivitiesLoading(true);
+                setTimeout(() => {
+                  setLoading(false);
+                  setActivitiesLoading(false);
+                  showToast("Data refreshed.");
+                }, 300);
+              },
+              disabled: loading,
+              startIcon: /* @__PURE__ */ jsx10(RefreshCwIcon, { className: cls6("h-4 w-4", loading && "animate-spin") }),
+              children: "Refresh"
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            Button7,
+            {
+              variant: "filled",
+              color: "primary",
+              size: "small",
+              onClick: openNewClientDrawer,
+              startIcon: /* @__PURE__ */ jsx10(UserPlus, { className: "h-4 w-4" }),
+              children: "New Client"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx10(
+        DashboardMetrics,
+        {
+          loading,
+          insights,
+          totalInPipeline,
+          totalRevenue
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        PipelineOverview,
+        {
+          loading,
+          insights,
+          selectedPipelineId,
+          onPipelineChange: handlePipelineChange,
+          onNavigate: handleNavigate,
+          sortedStages,
+          activeStages: activeStagesList,
+          closedStages: closedStagesList,
+          totalInPipeline,
+          resolveColor
+        }
+      ),
+      /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-6 mt-2", children: [
+        /* @__PURE__ */ jsx10(Card5, { className: "p-4 flex flex-col h-[400px]", children: /* @__PURE__ */ jsx10(
+          TasksView,
+          {
+            loading,
+            tasks,
+            togglingIds,
+            onToggleTask: handleToggleTask,
+            onOpenTask: openTaskDrawer,
+            onOpenClient: openClientDrawer,
+            clientsMap,
+            pipelineStages: sortedStages,
+            recentlyToggledIds,
+            completedTasks,
+            completedLoaded,
+            loadingCompleted,
+            completedHasMore: false,
+            onExpandCompleted: handleExpandCompleted,
+            onLoadMoreCompleted: handleLoadMoreCompleted
+          }
+        ) }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-6", children: [
+          /* @__PURE__ */ jsx10(Card5, { className: "p-4 h-auto", children: /* @__PURE__ */ jsx10(
+            CalendarWidget,
+            {
+              loading,
+              tasks: tasks.concat(completedTasks),
+              onOpenTask: openTaskDrawer
+            }
+          ) }),
+          /* @__PURE__ */ jsx10(
+            RecentActivity,
+            {
+              activities,
+              activitiesLoading,
+              tasksMap,
+              onCompleteTask: handleCompleteTaskFromActivity,
+              onViewEmail: handleViewEmail,
+              onOpenTask: handleOpenTask,
+              emailViewerOpen,
+              onEmailViewerOpenChange: setEmailViewerOpen,
+              selectedEmail
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: cls6(
+      "fixed top-0 right-0 bottom-0 w-full sm:w-[420px] bg-white dark:bg-surface-900 border-l border-surface-200 dark:border-surface-700 shadow-2xl z-40 transition-transform duration-300 ease-in-out flex flex-col",
+      activeSideEntity ? "translate-x-0" : "translate-x-full"
+    ), children: [
+      /* @__PURE__ */ jsxs10("div", { className: "p-4 flex items-center justify-between border-b border-surface-200 dark:border-surface-800", children: [
+        /* @__PURE__ */ jsx10(Typography8, { variant: "subtitle1", className: "font-semibold uppercase tracking-wider text-[10px] color-secondary", children: activeSideEntity?.type === "task" ? "Task Details" : activeSideEntity?.type === "client" ? "Client profile" : "Create Lead" }),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            onClick: () => setActiveSideEntity(null),
+            className: "p-1 rounded-md text-surface-400 hover:text-surface-700 hover:bg-surface-100 dark:hover:bg-surface-800 focus:outline-none",
+            children: /* @__PURE__ */ jsx10(XIcon2, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex-1 overflow-y-auto p-5 flex flex-col", children: [
+        activeSideEntity?.type === "task" && renderDrawerTask(activeSideEntity.id),
+        activeSideEntity?.type === "client" && renderDrawerClient(activeSideEntity.id),
+        activeSideEntity?.type === "new_client" && renderDrawerNewClient()
+      ] })
+    ] }),
+    activeSideEntity && /* @__PURE__ */ jsx10(
+      "div",
+      {
+        onClick: () => setActiveSideEntity(null),
+        className: "fixed inset-0 bg-black/20 dark:bg-black/50 z-30 transition-opacity duration-300"
+      }
+    ),
+    /* @__PURE__ */ jsx10("div", { className: cls6(
+      "absolute bottom-4 left-4 z-50 transition-all duration-300 transform",
+      toastMessage ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0 pointer-events-none"
+    ), children: toastMessage && /* @__PURE__ */ jsxs10("div", { className: "px-4 py-3 bg-surface-900 dark:bg-surface-50 text-white dark:text-surface-900 text-xs font-medium rounded-lg shadow-lg flex items-center gap-2 border border-surface-800 dark:border-surface-200", children: [
+      /* @__PURE__ */ jsx10(CheckIcon, { className: "h-4 w-4 text-green-500" }),
+      /* @__PURE__ */ jsx10("span", { children: toastMessage })
+    ] }) })
+  ] });
+}
+
+// src/debug/collection-views/CollectionTableDemo.tsx
+import { useState as useState5, useMemo as useMemo4 } from "react";
+import {
+  Typography as Typography9,
+  Chip as Chip4,
+  cls as cls7,
+  defaultBorderMixin as defaultBorderMixin2,
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  SearchBar as SearchBar2,
+  IconButton as IconButton3,
+  Tooltip as Tooltip2,
+  Checkbox as Checkbox2,
+  iconSize,
+  Select as Select4,
+  SelectItem as SelectItem4,
+  Trash2Icon as Trash2Icon2,
+  PencilIcon,
+  ArrowUpDownIcon,
+  ArrowUpIcon,
+  ArrowDownIcon
+} from "@rebasepro/ui";
+
+// src/debug/collection-views/sample_data.ts
+var STATUS_CONFIG = {
+  backlog: { label: "Backlog", color: "gray" },
+  in_progress: { label: "In Progress", color: "blue" },
+  in_review: { label: "In Review", color: "purple" },
+  done: { label: "Done", color: "green" }
+};
+var PRIORITY_CONFIG = {
+  low: { label: "Low", color: "gray" },
+  medium: { label: "Medium", color: "yellow" },
+  high: { label: "High", color: "orange" },
+  critical: { label: "Critical", color: "red" }
+};
+var SAMPLE_PROJECTS = [
+  { id: "proj-1", name: "Website Redesign", description: "Complete overhaul of the marketing website with new brand guidelines", status: "in_progress", priority: "high", assignee: "Alice Johnson", tags: ["frontend", "design"], dueDate: new Date(Date.now() + 7 * 864e5).toISOString().split("T")[0], progress: 65, createdAt: new Date(Date.now() - 14 * 864e5).toISOString() },
+  { id: "proj-2", name: "API Rate Limiting", description: "Implement token-bucket rate limiting across all public endpoints", status: "in_review", priority: "critical", assignee: "Bob Smith", tags: ["backend", "security"], dueDate: new Date(Date.now() + 2 * 864e5).toISOString().split("T")[0], progress: 90, createdAt: new Date(Date.now() - 10 * 864e5).toISOString() },
+  { id: "proj-3", name: "Mobile Push Notifications", description: "Add support for push notifications on iOS and Android clients", status: "backlog", priority: "medium", assignee: "Carol White", tags: ["mobile", "backend"], dueDate: new Date(Date.now() + 21 * 864e5).toISOString().split("T")[0], progress: 0, createdAt: new Date(Date.now() - 3 * 864e5).toISOString() },
+  { id: "proj-4", name: "Dashboard Analytics", description: "Build real-time analytics dashboard with charts and KPI widgets", status: "in_progress", priority: "high", assignee: "David Brown", tags: ["frontend", "data"], dueDate: new Date(Date.now() + 5 * 864e5).toISOString().split("T")[0], progress: 40, createdAt: new Date(Date.now() - 7 * 864e5).toISOString() },
+  { id: "proj-5", name: "User Onboarding Flow", description: "Multi-step onboarding wizard with progress tracking and email triggers", status: "done", priority: "medium", assignee: "Eva Green", tags: ["frontend", "ux"], dueDate: new Date(Date.now() - 2 * 864e5).toISOString().split("T")[0], progress: 100, createdAt: new Date(Date.now() - 21 * 864e5).toISOString() },
+  { id: "proj-6", name: "Database Migration v3", description: "Migrate from PostgreSQL 14 to 16 with zero-downtime strategy", status: "backlog", priority: "low", assignee: "Frank Miller", tags: ["backend", "infrastructure"], dueDate: new Date(Date.now() + 30 * 864e5).toISOString().split("T")[0], progress: 0, createdAt: new Date(Date.now() - 1 * 864e5).toISOString() },
+  { id: "proj-7", name: "SSO Integration", description: "SAML 2.0 and OIDC single sign-on for enterprise customers", status: "in_progress", priority: "critical", assignee: "Alice Johnson", tags: ["backend", "security", "enterprise"], dueDate: new Date(Date.now() + 3 * 864e5).toISOString().split("T")[0], progress: 75, createdAt: new Date(Date.now() - 12 * 864e5).toISOString() },
+  { id: "proj-8", name: "E2E Test Suite", description: "Playwright-based end-to-end tests covering critical user journeys", status: "in_review", priority: "medium", assignee: "Bob Smith", tags: ["testing", "devops"], dueDate: new Date(Date.now() + 1 * 864e5).toISOString().split("T")[0], progress: 85, createdAt: new Date(Date.now() - 8 * 864e5).toISOString() },
+  { id: "proj-9", name: "Billing System Upgrade", description: "Stripe integration upgrade with metered billing and invoice PDF generation", status: "done", priority: "high", assignee: "Carol White", tags: ["backend", "payments"], dueDate: new Date(Date.now() - 5 * 864e5).toISOString().split("T")[0], progress: 100, createdAt: new Date(Date.now() - 28 * 864e5).toISOString() },
+  { id: "proj-10", name: "Dark Mode Polish", description: "Audit and fix all remaining dark mode inconsistencies across the app", status: "backlog", priority: "low", assignee: "David Brown", tags: ["frontend", "design"], dueDate: new Date(Date.now() + 14 * 864e5).toISOString().split("T")[0], progress: 0, createdAt: new Date(Date.now() - 2 * 864e5).toISOString() }
+];
+
+// src/debug/collection-views/CollectionTableDemo.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function CollectionTableDemo() {
+  const [searchTerm, setSearchTerm] = useState5("");
+  const [sortField, setSortField] = useState5("name");
+  const [sortDirection, setSortDirection] = useState5("asc");
+  const [selectedIds, setSelectedIds] = useState5(/* @__PURE__ */ new Set());
+  const [statusFilter, setStatusFilter] = useState5("all");
+  const filteredAndSorted = useMemo4(() => {
+    let results = SAMPLE_PROJECTS.filter((p) => {
+      const matchesSearch = !searchTerm || p.name.toLowerCase().includes(searchTerm.toLowerCase()) || p.assignee.toLowerCase().includes(searchTerm.toLowerCase());
+      const matchesStatus = statusFilter === "all" || p.status === statusFilter;
+      return matchesSearch && matchesStatus;
+    });
+    results = [...results].sort((a, b) => {
+      const cmp = String(a[sortField]).localeCompare(String(b[sortField]));
+      return sortDirection === "asc" ? cmp : -cmp;
+    });
+    return results;
+  }, [searchTerm, sortField, sortDirection, statusFilter]);
+  const toggleSort = (field) => {
+    if (sortField === field) setSortDirection((d) => d === "asc" ? "desc" : "asc");
+    else {
+      setSortField(field);
+      setSortDirection("asc");
+    }
+  };
+  const toggleSelect = (id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const toggleSelectAll = (checked) => {
+    setSelectedIds(checked ? new Set(filteredAndSorted.map((p) => p.id)) : /* @__PURE__ */ new Set());
+  };
+  const allSelected = filteredAndSorted.length > 0 && filteredAndSorted.every((p) => selectedIds.has(p.id));
+  const SortIcon = ({ field }) => {
+    if (sortField !== field) return /* @__PURE__ */ jsx11(ArrowUpDownIcon, { size: 12, className: "text-surface-400" });
+    return sortDirection === "asc" ? /* @__PURE__ */ jsx11(ArrowUpIcon, { size: 12, className: "text-primary" }) : /* @__PURE__ */ jsx11(ArrowDownIcon, { size: 12, className: "text-primary" });
+  };
+  return /* @__PURE__ */ jsxs11("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3 flex-wrap", children: [
+      /* @__PURE__ */ jsx11(SearchBar2, { onTextSearch: (term) => setSearchTerm(term ?? ""), placeholder: "Search projects\u2026", size: "small" }),
+      /* @__PURE__ */ jsxs11(Select4, { value: statusFilter, onValueChange: setStatusFilter, size: "small", placeholder: "Status", children: [
+        /* @__PURE__ */ jsx11(SelectItem4, { value: "all", children: "All Statuses" }),
+        Object.entries(STATUS_CONFIG).map(([key, { label }]) => /* @__PURE__ */ jsx11(SelectItem4, { value: key, children: label }, key))
+      ] }),
+      selectedIds.size > 0 && /* @__PURE__ */ jsxs11(Typography9, { variant: "caption", color: "secondary", children: [
+        selectedIds.size,
+        " selected"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: cls7("rounded-lg border overflow-hidden", defaultBorderMixin2), children: [
+      /* @__PURE__ */ jsxs11(Table, { className: "w-full", children: [
+        /* @__PURE__ */ jsxs11(TableHeader, { children: [
+          /* @__PURE__ */ jsx11(TableCell, { header: true, style: { width: "40px" }, children: /* @__PURE__ */ jsx11(Checkbox2, { checked: allSelected, onCheckedChange: toggleSelectAll, size: "small" }) }),
+          /* @__PURE__ */ jsx11(TableCell, { header: true, children: /* @__PURE__ */ jsxs11("button", { onClick: () => toggleSort("name"), className: "flex items-center gap-1 cursor-pointer", children: [
+            /* @__PURE__ */ jsx11(Typography9, { variant: "caption", className: "font-semibold", children: "Name" }),
+            /* @__PURE__ */ jsx11(SortIcon, { field: "name" })
+          ] }) }),
+          /* @__PURE__ */ jsx11(TableCell, { header: true, children: /* @__PURE__ */ jsxs11("button", { onClick: () => toggleSort("status"), className: "flex items-center gap-1 cursor-pointer", children: [
+            /* @__PURE__ */ jsx11(Typography9, { variant: "caption", className: "font-semibold", children: "Status" }),
+            /* @__PURE__ */ jsx11(SortIcon, { field: "status" })
+          ] }) }),
+          /* @__PURE__ */ jsx11(TableCell, { header: true, children: /* @__PURE__ */ jsxs11("button", { onClick: () => toggleSort("priority"), className: "flex items-center gap-1 cursor-pointer", children: [
+            /* @__PURE__ */ jsx11(Typography9, { variant: "caption", className: "font-semibold", children: "Priority" }),
+            /* @__PURE__ */ jsx11(SortIcon, { field: "priority" })
+          ] }) }),
+          /* @__PURE__ */ jsx11(TableCell, { header: true, children: /* @__PURE__ */ jsx11(Typography9, { variant: "caption", className: "font-semibold", children: "Assignee" }) }),
+          /* @__PURE__ */ jsx11(TableCell, { header: true, children: /* @__PURE__ */ jsx11(Typography9, { variant: "caption", className: "font-semibold", children: "Tags" }) }),
+          /* @__PURE__ */ jsx11(TableCell, { header: true, children: /* @__PURE__ */ jsxs11("button", { onClick: () => toggleSort("dueDate"), className: "flex items-center gap-1 cursor-pointer", children: [
+            /* @__PURE__ */ jsx11(Typography9, { variant: "caption", className: "font-semibold", children: "Due Date" }),
+            /* @__PURE__ */ jsx11(SortIcon, { field: "dueDate" })
+          ] }) }),
+          /* @__PURE__ */ jsx11(TableCell, { header: true, style: { width: "80px" }, children: /* @__PURE__ */ jsx11(Typography9, { variant: "caption", className: "font-semibold", children: "Actions" }) })
+        ] }),
+        /* @__PURE__ */ jsx11(TableBody, { children: filteredAndSorted.map((project) => /* @__PURE__ */ jsxs11(TableRow, { className: cls7(selectedIds.has(project.id) && "bg-primary/[0.03] dark:bg-primary/[0.06]"), children: [
+          /* @__PURE__ */ jsx11(TableCell, { style: { width: "40px" }, children: /* @__PURE__ */ jsx11(Checkbox2, { checked: selectedIds.has(project.id), onCheckedChange: () => toggleSelect(project.id), size: "small" }) }),
+          /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsxs11("div", { children: [
+            /* @__PURE__ */ jsx11(Typography9, { variant: "body2", className: "font-medium", children: project.name }),
+            /* @__PURE__ */ jsx11(Typography9, { variant: "caption", color: "secondary", className: "line-clamp-1", children: project.description })
+          ] }) }),
+          /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsx11(Chip4, { colorScheme: STATUS_CONFIG[project.status].color, size: "small", children: STATUS_CONFIG[project.status].label }) }),
+          /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsx11(Chip4, { colorScheme: PRIORITY_CONFIG[project.priority].color, size: "smallest", outlined: true, children: PRIORITY_CONFIG[project.priority].label }) }),
+          /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx11("div", { className: "w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center text-[10px] font-semibold shrink-0", children: project.assignee[0] }),
+            /* @__PURE__ */ jsx11(Typography9, { variant: "body2", className: "truncate", children: project.assignee })
+          ] }) }),
+          /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-1", children: project.tags.map((tag) => /* @__PURE__ */ jsx11(Chip4, { size: "smallest", colorScheme: "cyan", children: tag }, tag)) }) }),
+          /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsx11(Typography9, { variant: "body2", className: "font-mono text-xs", children: project.dueDate }) }),
+          /* @__PURE__ */ jsx11(TableCell, { style: { width: "80px" }, children: /* @__PURE__ */ jsxs11("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx11(Tooltip2, { title: "Edit", asChild: true, children: /* @__PURE__ */ jsx11(IconButton3, { size: "smallest", children: /* @__PURE__ */ jsx11(PencilIcon, { size: iconSize.smallest }) }) }),
+            /* @__PURE__ */ jsx11(Tooltip2, { title: "Delete", asChild: true, children: /* @__PURE__ */ jsx11(IconButton3, { size: "smallest", children: /* @__PURE__ */ jsx11(Trash2Icon2, { size: iconSize.smallest }) }) })
+          ] }) })
+        ] }, project.id)) })
+      ] }),
+      filteredAndSorted.length === 0 && /* @__PURE__ */ jsx11("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx11(Typography9, { variant: "label", color: "secondary", children: "No projects match your filters" }) })
+    ] }),
+    /* @__PURE__ */ jsxs11(Typography9, { variant: "caption", color: "secondary", children: [
+      filteredAndSorted.length,
+      " of ",
+      SAMPLE_PROJECTS.length,
+      " projects"
+    ] })
+  ] });
+}
+
+// src/debug/collection-views/CardViewDemo.tsx
+import { useState as useState6, useMemo as useMemo5 } from "react";
+import {
+  Card as Card6,
+  Typography as Typography10,
+  Chip as Chip5,
+  cls as cls8,
+  defaultBorderMixin as defaultBorderMixin3,
+  SearchBar as SearchBar3,
+  ToggleButtonGroup,
+  LayoutGridIcon,
+  ListIcon,
+  FolderKanbanIcon
+} from "@rebasepro/ui";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function CardViewDemo() {
+  const [searchTerm, setSearchTerm] = useState6("");
+  const [cardSize, setCardSize] = useState6("md");
+  const filtered = useMemo5(() => {
+    if (!searchTerm) return SAMPLE_PROJECTS;
+    const lower = searchTerm.toLowerCase();
+    return SAMPLE_PROJECTS.filter(
+      (p) => p.name.toLowerCase().includes(lower) || p.assignee.toLowerCase().includes(lower) || p.tags.some((t) => t.toLowerCase().includes(lower))
+    );
+  }, [searchTerm]);
+  const gridClass = useMemo5(() => {
+    switch (cardSize) {
+      case "sm":
+        return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5";
+      case "md":
+        return "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
+      case "lg":
+        return "grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+    }
+  }, [cardSize]);
+  return /* @__PURE__ */ jsxs12("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3 flex-wrap", children: [
+      /* @__PURE__ */ jsx12(SearchBar3, { onTextSearch: (term) => setSearchTerm(term ?? ""), placeholder: "Search cards\u2026", size: "small" }),
+      /* @__PURE__ */ jsx12(ToggleButtonGroup, { value: cardSize, onValueChange: setCardSize, options: [
+        { value: "sm", label: "Small", icon: /* @__PURE__ */ jsx12(LayoutGridIcon, { size: 14 }) },
+        { value: "md", label: "Medium", icon: /* @__PURE__ */ jsx12(ListIcon, { size: 14 }) },
+        { value: "lg", label: "Large", icon: /* @__PURE__ */ jsx12(FolderKanbanIcon, { size: 14 }) }
+      ] }),
+      /* @__PURE__ */ jsxs12(Typography10, { variant: "caption", color: "secondary", className: "ml-auto", children: [
+        filtered.length,
+        " projects"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: cls8("grid gap-4", gridClass), children: filtered.map((project) => /* @__PURE__ */ jsx12(ProjectCard, { project, compact: cardSize === "sm" }, project.id)) }),
+    filtered.length === 0 && /* @__PURE__ */ jsx12("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx12(Typography10, { variant: "label", color: "secondary", children: "No projects match your search" }) })
+  ] });
+}
+function ProjectCard({ project, compact }) {
+  const statusCfg = STATUS_CONFIG[project.status];
+  const priorityCfg = PRIORITY_CONFIG[project.priority];
+  const isOverdue = new Date(project.dueDate) < /* @__PURE__ */ new Date() && project.status !== "done";
+  return /* @__PURE__ */ jsxs12(Card6, { className: cls8("cursor-pointer overflow-hidden group relative", "transition-all duration-200", "hover:shadow-lg hover:-translate-y-0.5"), children: [
+    /* @__PURE__ */ jsxs12("div", { className: cls8("relative overflow-hidden bg-surface-100 dark:bg-surface-900", compact ? "h-20" : "aspect-[5/2]"), children: [
+      /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 opacity-20 transition-all duration-300", style: { background: `linear-gradient(90deg, var(--color-primary) ${project.progress}%, transparent ${project.progress}%)` } }),
+      /* @__PURE__ */ jsxs12("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-1", children: [
+        /* @__PURE__ */ jsx12(FolderKanbanIcon, { size: compact ? 20 : 28, className: "text-surface-400 dark:text-surface-500" }),
+        !compact && /* @__PURE__ */ jsxs12(Typography10, { variant: "caption", color: "secondary", className: "font-mono text-[10px]", children: [
+          project.progress,
+          "% complete"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-200" }),
+      /* @__PURE__ */ jsx12("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ jsx12(Chip5, { colorScheme: priorityCfg.color, size: "smallest", outlined: true, children: priorityCfg.label }) })
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: compact ? "p-2" : "p-3", children: [
+      /* @__PURE__ */ jsx12(Typography10, { variant: "caption", color: "disabled", className: "font-mono truncate block text-[10px]", children: project.id }),
+      /* @__PURE__ */ jsx12("div", { className: "truncate my-1", children: /* @__PURE__ */ jsx12(Typography10, { variant: compact ? "caption" : "body2", className: "font-medium", children: project.name }) }),
+      !compact && /* @__PURE__ */ jsx12(Typography10, { variant: "caption", color: "secondary", className: "line-clamp-2 mb-2", children: project.description }),
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+        /* @__PURE__ */ jsx12(Chip5, { colorScheme: statusCfg.color, size: "smallest", children: statusCfg.label }),
+        !compact && project.tags.slice(0, 2).map((tag) => /* @__PURE__ */ jsx12(Chip5, { size: "smallest", colorScheme: "cyan", className: "!text-[10px]", children: tag }, tag)),
+        !compact && project.tags.length > 2 && /* @__PURE__ */ jsxs12("span", { className: "text-[10px] text-surface-400", children: [
+          "+",
+          project.tags.length - 2
+        ] })
+      ] }),
+      !compact && /* @__PURE__ */ jsxs12("div", { className: cls8("flex items-center justify-between mt-2 pt-2 border-t", defaultBorderMixin3), children: [
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx12("div", { className: "w-5 h-5 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center text-[9px] font-semibold", children: project.assignee[0] }),
+          /* @__PURE__ */ jsx12(Typography10, { variant: "caption", color: "secondary", className: "truncate max-w-[100px]", children: project.assignee })
+        ] }),
+        /* @__PURE__ */ jsx12(Typography10, { variant: "caption", className: cls8("font-mono text-[10px]", isOverdue ? "text-red-500 font-semibold" : "text-surface-400"), children: project.dueDate })
+      ] })
+    ] })
+  ] });
+}
+
+// src/debug/collection-views/KanbanBoardDemo.tsx
+import { useState as useState7, useCallback as useCallback5, useMemo as useMemo6 } from "react";
+import { Typography as Typography11, Chip as Chip6, cls as cls9, defaultBorderMixin as defaultBorderMixin4, KanbanView, Alert as Alert2, FolderKanbanIcon as FolderKanbanIcon2 } from "@rebasepro/ui";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var STATUS_COLUMNS = ["backlog", "in_progress", "in_review", "done"];
+var COLUMN_LABELS = { backlog: "Backlog", in_progress: "In Progress", in_review: "In Review", done: "Done" };
+var COLUMN_COLORS = { backlog: "#6b7280", in_progress: "#3b82f6", in_review: "#8b5cf6", done: "#22c55e" };
+function KanbanProjectCard({ item, isDragging, isGroupedOver, style }) {
+  const project = item.data;
+  const priorityCfg = PRIORITY_CONFIG[project.priority];
+  const isOverdue = new Date(project.dueDate) < /* @__PURE__ */ new Date() && project.status !== "done";
+  const backgroundColor = useMemo6(() => {
+    if (isDragging) return "bg-surface-100 dark:bg-surface-800";
+    if (isGroupedOver) return "bg-surface-200 dark:bg-surface-700";
+    return "bg-white dark:bg-surface-800 hover:bg-surface-50 dark:hover:bg-surface-700";
+  }, [isDragging, isGroupedOver]);
+  const borderColor = useMemo6(() => isDragging ? "ring-2 ring-primary" : "", [isDragging]);
+  return /* @__PURE__ */ jsx13("div", { style, className: "py-1", "data-testid": item.id, children: /* @__PURE__ */ jsxs13("div", { className: cls9("group/card p-2 flex items-start border rounded-lg cursor-pointer transition-all duration-200", defaultBorderMixin4, borderColor, backgroundColor, "hover:shadow-sm"), children: [
+    /* @__PURE__ */ jsx13("div", { className: "w-10 h-10 rounded-md shrink-0 mr-2 bg-surface-100 dark:bg-surface-900 flex items-center justify-center", children: /* @__PURE__ */ jsx13(FolderKanbanIcon2, { size: 16, className: "text-surface-400" }) }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx13("div", { className: "line-clamp-2 text-sm font-medium", children: project.name }),
+      /* @__PURE__ */ jsx13("div", { className: "text-xs text-surface-500 mt-1 line-clamp-2 opacity-80", children: project.description }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1 mt-1.5 flex-wrap", children: [
+        /* @__PURE__ */ jsx13(Chip6, { colorScheme: priorityCfg.color, size: "smallest", outlined: true, className: "!text-[10px] !leading-tight !py-0", children: priorityCfg.label }),
+        project.tags.slice(0, 2).map((tag) => /* @__PURE__ */ jsx13(Chip6, { size: "smallest", colorScheme: "cyan", className: "!text-[10px] !leading-tight !py-0 max-w-[80px] truncate", children: tag }, tag))
+      ] }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mt-1.5", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center text-[8px] font-semibold", children: project.assignee[0] }),
+          /* @__PURE__ */ jsx13(Typography11, { variant: "caption", color: "secondary", className: "truncate max-w-[80px] text-[10px]", children: project.assignee })
+        ] }),
+        /* @__PURE__ */ jsx13(Typography11, { variant: "caption", className: cls9("font-mono text-[10px]", isOverdue ? "text-red-500 font-semibold" : "text-surface-400"), children: project.dueDate })
+      ] })
+    ] })
+  ] }) });
+}
+function KanbanBoardDemo() {
+  const [boardData, setBoardData] = useState7(() => SAMPLE_PROJECTS.map((p) => ({ id: p.id, data: p })));
+  const [columns, setColumns] = useState7(STATUS_COLUMNS);
+  const assignColumn = useCallback5((item) => item.data.status, []);
+  const handleItemsReorder = useCallback5((items, moveInfo) => {
+    const updatedItems = items.map((item) => {
+      if (moveInfo && item.id === moveInfo.itemId && moveInfo.sourceColumn !== moveInfo.targetColumn) {
+        return { ...item, data: { ...item.data, status: moveInfo.targetColumn, progress: moveInfo.targetColumn === "done" ? 100 : item.data.progress } };
+      }
+      return item;
+    });
+    setBoardData(updatedItems);
+  }, []);
+  const handleColumnReorder = useCallback5((reordered) => setColumns(reordered), []);
+  const columnLoadingState = useMemo6(() => {
+    const state = {};
+    for (const col of columns) {
+      const count = boardData.filter((item) => item.data.status === col).length;
+      state[col] = { loading: false, hasMore: false, itemCount: count, totalCount: count };
+    }
+    return state;
+  }, [boardData, columns]);
+  return /* @__PURE__ */ jsxs13("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx13(Alert2, { color: "info", size: "small", children: "Drag and drop cards between columns to change status. Columns are also reorderable." }),
+    /* @__PURE__ */ jsx13("div", { className: cls9("rounded-lg border overflow-hidden", defaultBorderMixin4), style: { height: 520 }, children: /* @__PURE__ */ jsx13(
+      KanbanView,
+      {
+        data: boardData,
+        columns,
+        columnLabels: COLUMN_LABELS,
+        columnColors: COLUMN_COLORS,
+        assignColumn,
+        allowColumnReorder: true,
+        onColumnReorder: handleColumnReorder,
+        onItemsReorder: handleItemsReorder,
+        ItemComponent: KanbanProjectCard,
+        columnLoadingState
+      }
+    ) })
+  ] });
+}
+
+// src/debug/UIReferenceView.tsx
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var SECTIONS = [
+  { id: "drawer", label: "Drawer", icon: PanelLeftIcon },
+  { id: "appbar", label: "App Bar", icon: AppWindow },
+  { id: "tabs", label: "Tabs", icon: ListIcon2 },
+  { id: "editor-sidebar", label: "Editor Sidebar", icon: ColumnsIcon },
+  { id: "empty-states", label: "Empty States", icon: FileIcon },
+  { id: "typography", label: "Typography", icon: TypeIcon },
+  { id: "buttons", label: "Buttons", icon: PlusIcon },
+  { id: "inputs", label: "Form Inputs", icon: FileTextIcon2 },
+  { id: "chips-alerts", label: "Chips & Alerts", icon: AlertCircleIcon },
+  { id: "users", label: "Management", icon: UserIcon },
+  { id: "user-dialog", label: "Form Dialog", icon: CircleUserIcon },
+  { id: "crm-dashboard", label: "CRM Dashboard", icon: LayoutGridIcon2 },
+  { id: "collection-table", label: "Collection Table", icon: ListIcon2 },
+  { id: "card-view", label: "Card View", icon: LayoutGridIcon2 },
+  { id: "kanban-board", label: "Kanban Board", icon: KanbanIcon }
+];
+function UIReferenceView() {
+  const [activeSection, setActiveSection] = useState8("drawer");
+  const scrollContainerRef = React10.useRef(null);
+  const scrollTo = (id) => {
+    const el = document.getElementById(id);
+    const container = scrollContainerRef.current;
+    if (el && container) {
+      const offsetTop = el.offsetTop - container.offsetTop;
+      container.scrollTo({ top: offsetTop, behavior: "smooth" });
+    }
+    setActiveSection(id);
+  };
+  return /* @__PURE__ */ jsxs14("div", { className: "flex w-full", children: [
+    /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col sticky top-0 h-screen grow-0 shrink-0 w-[232px] border-r", defaultBorderMixin5), children: [
+      /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: [
+        /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx14(RebaseLogo, { width: "28px", height: "28px" }) }),
+        /* @__PURE__ */ jsx14(Typography12, { variant: "subtitle1", noWrap: true, className: "truncate", children: "UI Ref" })
+      ] }),
+      /* @__PURE__ */ jsx14("div", { className: "mt-3 flex-grow overflow-scroll no-scrollbar", children: /* @__PURE__ */ jsxs14("div", { className: "my-2 mx-2 flex flex-col", children: [
+        /* @__PURE__ */ jsxs14("div", { className: cls10("pl-4 pr-2 py-1 flex flex-row items-center transition-colors cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-700/50 rounded-t-lg bg-surface-50 dark:bg-surface-950/30"), children: [
+          /* @__PURE__ */ jsx14(ChevronDownIcon, { size: iconSize2.smallest, className: "text-surface-500 dark:text-surface-400 transition-transform duration-200 mr-1" }),
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "font-medium flex-grow line-clamp-1", children: "SECTIONS" })
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: "overflow-hidden bg-surface-50 dark:bg-surface-950/30 rounded-b-lg", children: SECTIONS.map((s) => {
+          const IconComponent = s.icon;
+          return /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsxs14(
+            "div",
+            {
+              onClick: () => scrollTo(s.id),
+              className: cls10(
+                "rounded-lg truncate group/nav",
+                "hover:bg-primary/5 dark:hover:bg-primary/5 text-text-primary dark:text-surface-200 hover:text-surface-900 dark:hover:text-white",
+                "flex flex-row items-center",
+                "pr-4 h-10",
+                "font-medium text-xs cursor-pointer",
+                activeSection === s.id ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary" : ""
+              ),
+              children: [
+                /* @__PURE__ */ jsx14("div", { className: cls10("shrink-0 flex items-center justify-center w-[56px] h-[40px] text-surface-500 dark:text-text-secondary-dark transition-colors duration-150 group-hover/nav:text-primary", activeSection === s.id && "text-primary dark:text-primary"), children: /* @__PURE__ */ jsx14(IconComponent, { size: iconSize2.small }) }),
+                /* @__PURE__ */ jsx14("div", { className: "text-text-primary dark:text-surface-200 opacity-100 font-inherit truncate space-x-2", children: s.label.toUpperCase() })
+              ]
+            }
+          ) }, s.id);
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsx14("div", { className: cls10("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: cls10(
+        "flex flex-row items-center rounded-lg cursor-pointer",
+        "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+        "transition-colors duration-150",
+        "py-2"
+      ), children: [
+        /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx14(ChevronsLeftIcon, { size: iconSize2.small }) }),
+        /* @__PURE__ */ jsx14(Typography12, { variant: "body2", className: "text-surface-500 dark:text-surface-400 select-none whitespace-nowrap", children: "Collapse" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { ref: scrollContainerRef, className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs14(SectionBlock, { id: "drawer", title: "Drawer \u2014 DefaultDrawer.tsx", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "The drawer wraps ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "DrawerLogo" }),
+          ", scrollable ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "DrawerNavigationGroup" }),
+          "s, and ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "DrawerToggle" }),
+          ". Two visual states: collapsed (icon only, 72px) and expanded (280px)."
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex gap-6 flex-wrap", children: [
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collapsed (72px)" }),
+            /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col h-72 relative w-[72px] border rounded-lg overflow-hidden bg-white dark:bg-surface-900", defaultBorderMixin5), children: [
+              /* @__PURE__ */ jsx14("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx14(RebaseLogo, { width: "28px", height: "28px" }) }) }),
+              /* @__PURE__ */ jsx14("div", { className: "mt-3 flex-grow overflow-hidden", children: /* @__PURE__ */ jsx14("div", { className: "my-2 mx-2 flex flex-col", children: /* @__PURE__ */ jsx14("div", { className: "overflow-hidden rounded-lg bg-surface-50 dark:bg-surface-950/30", children: [/* @__PURE__ */ jsx14(FolderIcon, { size: iconSize2.small }, "folder"), /* @__PURE__ */ jsx14(UserIcon, { size: iconSize2.small }, "user"), /* @__PURE__ */ jsx14(TagIcon, { size: iconSize2.small }, "tag")].map((icon, i) => /* @__PURE__ */ jsx14("div", { className: "rounded-lg truncate hover:bg-primary/5 dark:hover:bg-primary/5 flex flex-row items-center h-10", children: /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark", children: icon }) }, i)) }) }) }),
+              /* @__PURE__ */ jsx14("div", { className: cls10("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin5), children: /* @__PURE__ */ jsx14("div", { className: "flex flex-row items-center rounded-lg cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-800 transition-colors duration-150 py-2", children: /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx14(ChevronsRightIcon, { size: iconSize2.small }) }) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Expanded (280px)" }),
+            /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col h-72 relative w-[280px] border rounded-lg overflow-hidden bg-white dark:bg-surface-900", defaultBorderMixin5), children: [
+              /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: [
+                /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx14(RebaseLogo, { width: "28px", height: "28px" }) }),
+                /* @__PURE__ */ jsx14("div", { className: "flex flex-row items-center overflow-hidden transition-all duration-200 ease-in-out opacity-100 w-full ml-1", children: /* @__PURE__ */ jsx14(Typography12, { variant: "subtitle1", noWrap: true, className: "truncate", children: "Rebase" }) })
+              ] }),
+              /* @__PURE__ */ jsx14("div", { className: "mt-3 flex-grow overflow-hidden", children: /* @__PURE__ */ jsxs14("div", { className: "my-2 mx-2 flex flex-col", children: [
+                /* @__PURE__ */ jsxs14("div", { className: "pl-4 pr-2 py-1 flex flex-row items-center transition-colors cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-700/50 rounded-t-lg bg-surface-50 dark:bg-surface-950/30", children: [
+                  /* @__PURE__ */ jsx14(ChevronDownIcon, { size: iconSize2.smallest, className: "text-surface-500 dark:text-surface-400 mr-1" }),
+                  /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "font-medium flex-grow line-clamp-1", children: "CONTENT" })
+                ] }),
+                /* @__PURE__ */ jsx14("div", { className: "overflow-hidden bg-surface-50 dark:bg-surface-950/30 rounded-b-lg", children: [
+                  {
+                    label: "Posts",
+                    icon: /* @__PURE__ */ jsx14(FolderIcon, { size: iconSize2.small }),
+                    active: true
+                  },
+                  {
+                    label: "Authors",
+                    icon: /* @__PURE__ */ jsx14(UserIcon, { size: iconSize2.small }),
+                    active: false
+                  },
+                  {
+                    label: "Tags",
+                    icon: /* @__PURE__ */ jsx14(TagIcon, { size: iconSize2.small }),
+                    active: false
+                  }
+                ].map(({ label, icon, active }) => /* @__PURE__ */ jsxs14("div", { className: cls10(
+                  "rounded-lg truncate hover:bg-primary/5 dark:hover:bg-primary/5 text-text-primary dark:text-surface-200 hover:text-surface-900 dark:hover:text-white flex flex-row items-center pr-4 h-10 font-medium text-xs cursor-pointer",
+                  active ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary" : ""
+                ), children: [
+                  /* @__PURE__ */ jsx14("div", { className: cls10("shrink-0 flex items-center justify-center w-[56px] h-[40px] transition-colors duration-150", active ? "text-primary dark:text-primary" : "text-surface-500 dark:text-text-secondary-dark"), children: icon }),
+                  /* @__PURE__ */ jsx14("div", { className: "text-text-primary dark:text-surface-200 font-inherit truncate", children: label.toUpperCase() })
+                ] }, label)) })
+              ] }) }),
+              /* @__PURE__ */ jsx14("div", { className: cls10("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center rounded-lg cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-800 transition-colors duration-150 py-2", children: [
+                /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx14(ChevronsLeftIcon, { size: iconSize2.small }) }),
+                /* @__PURE__ */ jsx14("div", { className: "overflow-hidden transition-all duration-200 ease-in-out opacity-100 w-auto", children: /* @__PURE__ */ jsx14(Typography12, { variant: "body2", className: "text-surface-500 dark:text-surface-400 select-none whitespace-nowrap", children: "Collapse" }) })
+              ] }) })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { id: "appbar", title: "App Bar \u2014 DefaultAppBar.tsx", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "Fixed at top (",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "h-16 absolute top-0" }),
+          "). Contains breadcrumbs (caption + body2), Content/Studio pill toggle, theme menu, and user avatar menu via ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Menu" }),
+          "."
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: cls10("w-full h-16 flex flex-row gap-2 px-4 items-center border rounded-lg relative", defaultBorderMixin5), children: [
+          /* @__PURE__ */ jsx14("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-row gap-2 items-center", children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: "/" }),
+            /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center gap-2 whitespace-nowrap", children: [
+              /* @__PURE__ */ jsx14(Typography12, { variant: "body2", children: "Posts" }),
+              /* @__PURE__ */ jsx14("span", { className: "text-xs text-surface-accent-500 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-700 px-1 py-0 rounded", children: "42" })
+            ] }),
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: "/" }),
+            /* @__PURE__ */ jsx14("div", { className: "flex flex-row items-center gap-2 whitespace-nowrap", children: /* @__PURE__ */ jsx14(Typography12, { variant: "body2", children: "My Post" }) })
+          ] }) }),
+          /* @__PURE__ */ jsx14("div", { className: "grow" }),
+          /* @__PURE__ */ jsxs14("div", { className: cls10("mr-2 hidden sm:flex bg-surface-100 dark:bg-surface-950 rounded-lg p-0.5 border", defaultBorderMixin5), children: [
+            /* @__PURE__ */ jsx14("button", { className: cls10("px-3 py-1 text-xs font-semibold rounded-md transition-all", "bg-white dark:bg-surface-900 shadow-sm text-primary dark:text-primary-400"), children: "Content" }),
+            /* @__PURE__ */ jsx14("button", { className: cls10("px-3 py-1 text-xs font-semibold rounded-md transition-all", "text-surface-500 hover:text-surface-900 dark:hover:text-white"), children: "Studio" })
+          ] }),
+          /* @__PURE__ */ jsxs14(Menu, { trigger: /* @__PURE__ */ jsx14(IconButton4, { color: "inherit", children: /* @__PURE__ */ jsx14(MoonIcon, {}) }), children: [
+            /* @__PURE__ */ jsxs14(MenuItem, { children: [
+              /* @__PURE__ */ jsx14(MoonIcon, { size: iconSize2.smallest }),
+              " Dark"
+            ] }),
+            /* @__PURE__ */ jsxs14(MenuItem, { children: [
+              /* @__PURE__ */ jsx14(SunIcon, { size: iconSize2.smallest }),
+              " Light"
+            ] }),
+            /* @__PURE__ */ jsxs14(MenuItem, { children: [
+              /* @__PURE__ */ jsx14(SunMoonIcon, { size: iconSize2.smallest }),
+              " System"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs14(Menu, { trigger: /* @__PURE__ */ jsx14(Avatar, { children: "A" }), children: [
+            /* @__PURE__ */ jsxs14("div", { className: "px-4 py-2 mb-2", children: [
+              /* @__PURE__ */ jsx14(Typography12, { variant: "body1", color: "secondary", children: "Alice Johnson" }),
+              /* @__PURE__ */ jsx14(Typography12, { variant: "body2", color: "secondary", children: "alice@example.com" })
+            ] }),
+            /* @__PURE__ */ jsxs14(MenuItem, { children: [
+              /* @__PURE__ */ jsx14(SettingsIcon2, {}),
+              " Account Settings"
+            ] }),
+            /* @__PURE__ */ jsxs14(MenuItem, { children: [
+              /* @__PURE__ */ jsx14(LogOutIcon, {}),
+              " Log Out"
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { id: "tabs", title: "Tabs \u2014 Tabs.tsx", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "All editor components use ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: 'variant="boxy"' }),
+          " tabs for sidebar navigation. The boxy variant provides a segmented, flat tab bar that integrates tightly with editor chrome."
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-6", children: [
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'variant="default"' }),
+            /* @__PURE__ */ jsxs14(Tabs, { value: "tab1", onValueChange: () => {
+            }, children: [
+              /* @__PURE__ */ jsx14(Tab, { value: "tab1", children: "Schema" }),
+              /* @__PURE__ */ jsx14(Tab, { value: "tab2", children: "Snippets" }),
+              /* @__PURE__ */ jsx14(Tab, { value: "tab3", children: "History" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'variant="boxy" (Editor Standard)' }),
+            /* @__PURE__ */ jsxs14("div", { className: cls10("border rounded-lg overflow-hidden w-[320px]", defaultBorderMixin5), children: [
+              /* @__PURE__ */ jsxs14(Tabs, { value: "schema", onValueChange: () => {
+              }, variant: "boxy", className: "border-b border-surface-200 dark:border-surface-950", children: [
+                /* @__PURE__ */ jsx14(Tab, { value: "schema", children: "Schema" }),
+                /* @__PURE__ */ jsx14(Tab, { value: "snippets", children: "Snippets" }),
+                /* @__PURE__ */ jsx14(Tab, { value: "history", children: "History" })
+              ] }),
+              /* @__PURE__ */ jsxs14("div", { className: cls10("p-3 border-b flex justify-between items-center bg-surface-50 dark:bg-surface-900", defaultBorderMixin5), children: [
+                /* @__PURE__ */ jsx14(Typography12, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "TABLES" }),
+                /* @__PURE__ */ jsx14(IconButton4, { size: "small", children: /* @__PURE__ */ jsx14(SettingsIcon2, { size: iconSize2.smallest }) })
+              ] }),
+              /* @__PURE__ */ jsx14("div", { className: "p-2 h-24", children: /* @__PURE__ */ jsx14(Typography12, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark italic p-2", children: "Tab content area\u2026" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Toolbar Tabs (boxy, inline with controls)" }),
+            /* @__PURE__ */ jsxs14("div", { className: cls10("border rounded-lg overflow-hidden flex items-center justify-between pr-2 bg-white dark:bg-surface-950", defaultBorderMixin5), children: [
+              /* @__PURE__ */ jsxs14("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxs14(Tabs, { value: "query1", onValueChange: () => {
+                }, variant: "boxy", className: "w-[unset] flex-shrink-0", children: [
+                  /* @__PURE__ */ jsxs14(Tab, { value: "query1", className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx14("svg", { className: "w-3.5 h-3.5 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" }) }),
+                    "Query 1"
+                  ] }),
+                  /* @__PURE__ */ jsxs14(Tab, { value: "query2", className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx14("svg", { className: "w-3.5 h-3.5 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" }) }),
+                    "Query 2"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx14(IconButton4, { size: "small", className: "ml-2 flex-shrink-0", children: /* @__PURE__ */ jsx14(PlusIcon, {}) })
+              ] }),
+              /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx14(Button8, { variant: "text", size: "small", children: "Explain" }),
+                /* @__PURE__ */ jsx14("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950" }),
+                /* @__PURE__ */ jsx14(Button8, { size: "small", color: "primary", children: "Run" })
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { id: "editor-sidebar", title: "Editor Sidebar \u2014 Harmonized Pattern", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "All studio editor components (SQL, JS, RLS, Collection) share the same underlying sidebar foundation:",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: 'Tabs variant="boxy"' }),
+          " at top (optional) \u2192 section header with uppercase label \u2192 scrollable list. While SQL/JS/RLS use dense tree entries, the Collection Schema Editor uses larger items (",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "px-3 py-2" }),
+          ", ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "text-sm" }),
+          ") suitable for primary navigation."
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex gap-6 flex-wrap", children: [
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "SQL Editor Sidebar" }),
+            /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden", defaultBorderMixin5), children: [
+              /* @__PURE__ */ jsxs14(Tabs, { value: "schema", onValueChange: () => {
+              }, variant: "boxy", className: "border-b border-surface-200 dark:border-surface-950", children: [
+                /* @__PURE__ */ jsx14(Tab, { value: "schema", children: "Schema" }),
+                /* @__PURE__ */ jsx14(Tab, { value: "snippets", children: "Snippets" }),
+                /* @__PURE__ */ jsx14(Tab, { value: "history", children: "History" })
+              ] }),
+              /* @__PURE__ */ jsxs14("div", { className: cls10("p-3 border-b flex justify-between items-center bg-surface-50 dark:bg-surface-900", defaultBorderMixin5), children: [
+                /* @__PURE__ */ jsx14(Typography12, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-secondary dark:text-text-secondary-dark", children: "TABLES" }),
+                /* @__PURE__ */ jsx14(IconButton4, { size: "small", children: /* @__PURE__ */ jsx14(SettingsIcon2, { size: iconSize2.smallest }) })
+              ] }),
+              /* @__PURE__ */ jsx14("div", { className: "flex-grow overflow-y-auto no-scrollbar p-1", children: /* @__PURE__ */ jsxs14("div", { className: "mb-2", children: [
+                /* @__PURE__ */ jsxs14("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors", children: [
+                  /* @__PURE__ */ jsx14("svg", { className: "w-3 h-3 mr-1 rotate-90", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx14("path", { d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" }) }),
+                  /* @__PURE__ */ jsx14(Typography12, { variant: "body2", className: "text-text-primary dark:text-text-primary-dark font-medium text-xs", children: "public" })
+                ] }),
+                /* @__PURE__ */ jsx14("div", { className: "ml-3 mt-1 space-y-1", children: ["users", "posts", "comments"].map((t) => /* @__PURE__ */ jsxs14("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors group", children: [
+                  /* @__PURE__ */ jsx14("svg", { className: "w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled dark:text-text-disabled-dark", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }),
+                  /* @__PURE__ */ jsx14(Typography12, { variant: "body2", className: "text-text-secondary dark:text-text-secondary-dark text-xs truncate", children: t })
+                ] }, t)) })
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "RLS Editor Sidebar" }),
+            /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden", defaultBorderMixin5), children: [
+              /* @__PURE__ */ jsxs14(Tabs, { value: "tables", onValueChange: () => {
+              }, variant: "boxy", className: "border-b border-surface-200 dark:border-surface-950", children: [
+                /* @__PURE__ */ jsx14(Tab, { value: "tables", children: "Tables" }),
+                /* @__PURE__ */ jsx14(Tab, { value: "info", children: "Info" })
+              ] }),
+              /* @__PURE__ */ jsxs14("div", { className: cls10("p-3 border-b flex justify-between items-center bg-surface-50 dark:bg-surface-900", defaultBorderMixin5), children: [
+                /* @__PURE__ */ jsx14(Typography12, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "RLS" }),
+                /* @__PURE__ */ jsx14(IconButton4, { size: "small", children: /* @__PURE__ */ jsx14(SettingsIcon2, { size: iconSize2.smallest }) })
+              ] }),
+              /* @__PURE__ */ jsx14("div", { className: "flex-grow overflow-y-auto no-scrollbar p-1", children: /* @__PURE__ */ jsxs14("div", { className: "mb-2", children: [
+                /* @__PURE__ */ jsxs14("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors", children: [
+                  /* @__PURE__ */ jsx14("svg", { className: "w-3 h-3 mr-1 rotate-90", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx14("path", { d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" }) }),
+                  /* @__PURE__ */ jsx14(Typography12, { variant: "body2", className: "text-text-primary dark:text-text-primary-dark font-medium text-xs", children: "public" })
+                ] }),
+                /* @__PURE__ */ jsx14("div", { className: "ml-3 mt-1 space-y-0.5", children: [{
+                  name: "users",
+                  enabled: true
+                }, {
+                  name: "posts",
+                  enabled: true
+                }, {
+                  name: "sessions",
+                  enabled: false
+                }].map((t) => /* @__PURE__ */ jsxs14("div", { className: cls10("flex items-center p-1 cursor-pointer rounded transition-colors", t.name === "users" ? "bg-primary/10 text-primary dark:bg-primary/20" : "hover:bg-surface-100 dark:hover:bg-surface-900 text-text-secondary"), children: [
+                  /* @__PURE__ */ jsx14("svg", { className: "w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }),
+                  /* @__PURE__ */ jsx14(Typography12, { variant: "body2", className: "text-xs truncate flex-1", children: t.name }),
+                  /* @__PURE__ */ jsx14("div", { className: cls10("w-1.5 h-1.5 rounded-full shrink-0", t.enabled ? "bg-green-500" : "bg-orange-400 opacity-50") })
+                ] }, t.name)) })
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collection Editor Sidebar" }),
+            /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden bg-white dark:bg-surface-950", defaultBorderMixin5), children: [
+              /* @__PURE__ */ jsxs14("div", { className: cls10("p-3 border-b flex justify-between items-center bg-surface-50 dark:bg-surface-900", defaultBorderMixin5), children: [
+                /* @__PURE__ */ jsx14(Typography12, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "COLLECTIONS" }),
+                /* @__PURE__ */ jsx14(IconButton4, { size: "small", children: /* @__PURE__ */ jsx14(PlusIcon, { size: iconSize2.smallest }) })
+              ] }),
+              /* @__PURE__ */ jsx14("div", { className: "flex-grow overflow-y-auto no-scrollbar p-2 space-y-0.5", children: [{ name: "Authors" }, {
+                name: "Posts",
+                selected: true
+              }, { name: "Tags" }].map((c) => /* @__PURE__ */ jsxs14("div", { className: cls10("flex items-center gap-3 px-3 py-2 cursor-pointer rounded-md text-sm transition-colors", c.selected ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light" : "hover:bg-surface-100 dark:hover:bg-surface-900 text-text-secondary dark:text-text-secondary-dark"), children: [
+                /* @__PURE__ */ jsx14(FolderIcon, { size: iconSize2.small, className: cls10(c.selected ? "text-primary dark:text-primary-light" : "text-text-secondary dark:text-text-secondary-dark") }),
+                /* @__PURE__ */ jsx14("span", { className: "truncate flex-1", children: c.name })
+              ] }, c.name)) })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { id: "empty-states", title: "Empty States \u2014 Canonical Pattern", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "All empty / placeholder states share the same layout: a centered ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "flex-col" }),
+          " container with ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: 'Typography variant="label"' }),
+          " for the message and a ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Button" }),
+          " with ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "AddIcon" }),
+          " for the primary action. Sources: ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "CollectionPropertiesEditorForm" }),
+          ", ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "CollectionsStudioView" }),
+          ", ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "CollectionStudioView" }),
+          "."
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex gap-6 flex-wrap", children: [
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Property Editor (no selection)" }),
+            /* @__PURE__ */ jsx14("div", { className: cls10("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
+              /* @__PURE__ */ jsx14(Typography12, { variant: "label", className: "text-center px-4", children: "Select a property to edit it" }),
+              /* @__PURE__ */ jsxs14(Button8, { children: [
+                /* @__PURE__ */ jsx14(PlusIcon, {}),
+                "Add new property"
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Property Editor (empty collection)" }),
+            /* @__PURE__ */ jsx14("div", { className: cls10("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
+              /* @__PURE__ */ jsx14(Typography12, { variant: "label", className: "text-center px-4", children: "Now you can add your first property" }),
+              /* @__PURE__ */ jsxs14(Button8, { children: [
+                /* @__PURE__ */ jsx14(PlusIcon, {}),
+                "Add new property"
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collection ListIcon (no selection)" }),
+            /* @__PURE__ */ jsx14("div", { className: cls10("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
+              /* @__PURE__ */ jsx14(Typography12, { variant: "label", className: "text-center px-4", children: "Select a collection or create a new one to start editing" }),
+              /* @__PURE__ */ jsxs14(Button8, { children: [
+                /* @__PURE__ */ jsx14(PlusIcon, {}),
+                "Add new collection"
+              ] })
+            ] }) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { id: "typography", title: "Typography", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "All variants from ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Typography" }),
+          ". Colors: primary (default), secondary, disabled, error."
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: "flex flex-col gap-3", children: ["h1", "h2", "h3", "h4", "h5", "h6", "lead", "subtitle1", "subtitle2", "body1", "body2", "caption", "label", "button"].map((v) => /* @__PURE__ */ jsxs14("div", { className: cls10("flex items-baseline gap-4 border-b pb-3 last:border-0", defaultBorderMixin5), children: [
+          /* @__PURE__ */ jsx14("span", { className: "w-24 shrink-0 text-xs text-surface-400 font-mono", children: v }),
+          /* @__PURE__ */ jsx14(Typography12, { variant: v, component: "p", children: "The quick brown fox jumps over the lazy dog" })
+        ] }, v)) }),
+        /* @__PURE__ */ jsx14("div", { className: "flex gap-4 flex-wrap mt-4", children: ["primary", "secondary", "disabled", "error"].map((c) => /* @__PURE__ */ jsxs14(Typography12, { color: c, children: [
+          'color="',
+          c,
+          '"'
+        ] }, c)) }),
+        /* @__PURE__ */ jsxs14("div", { className: cls10("mt-8 pt-6 border-t", defaultBorderMixin5), children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "subtitle2", className: "block mb-1", children: "Data tiers" }),
+          /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "block mb-5 max-w-[65ch]", children: [
+            "For values that are looked up rather than read: a field name, a measurement, a headline figure. ",
+            /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "mono" }),
+            " and",
+            " ",
+            /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "stat" }),
+            " both carry",
+            " ",
+            /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "tabular-nums" }),
+            ", so a column of them keeps its decimal points aligned and a live counter does not jitter as its digits change width."
+          ] }),
+          /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap items-start gap-x-12 gap-y-5", children: [
+            ["Region", "europe-west1"],
+            ["Took", "32.2s"],
+            ["Last run", "16/08/2026, 05:30:32"]
+          ].map(([label, value]) => /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "micro", component: "div", color: "secondary", className: "block", children: label }),
+            /* @__PURE__ */ jsx14(Typography12, { variant: "mono", component: "div", className: "block mt-1 text-sm", children: value })
+          ] }, label)) }),
+          /* @__PURE__ */ jsxs14("div", { className: "mt-6", children: [
+            /* @__PURE__ */ jsx14("span", { className: "text-xs text-surface-400 font-mono", children: "stat" }),
+            /* @__PURE__ */ jsx14(Typography12, { variant: "stat", component: "div", className: "block mt-1", children: "1,284" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx14(SectionBlock, { id: "buttons", title: "Buttons", children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-6", children: [
+        ["filled", "text"].map((variant) => /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsxs14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: [
+            'variant="',
+            variant,
+            '"'
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap gap-3 items-center", children: [
+            ["primary", "secondary", "text", "error", "neutral"].map((color) => /* @__PURE__ */ jsx14(Button8, { variant, color, children: color.charAt(0).toUpperCase() + color.slice(1) }, color)),
+            /* @__PURE__ */ jsx14(Button8, { variant, disabled: true, children: "Disabled" })
+          ] })
+        ] }, variant)),
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "sizes" }),
+          /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap items-end gap-3", children: ["small", "medium", "large", "xl", "2xl"].map((s) => /* @__PURE__ */ jsx14(Button8, { size: s, children: s.charAt(0).toUpperCase() + s.slice(1) }, s)) })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "IconButton \u2014 sizes" }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap gap-3 items-end", children: [
+            [
+              { s: "smallest", icon: /* @__PURE__ */ jsx14(PencilIcon2, { size: 14 }) },
+              { s: "small", icon: /* @__PURE__ */ jsx14(PencilIcon2, { size: 16 }) },
+              { s: "medium", icon: /* @__PURE__ */ jsx14(PencilIcon2, { size: 20 }) },
+              { s: "large", icon: /* @__PURE__ */ jsx14(PencilIcon2, { size: 24 }) }
+            ].map(({ s, icon }) => /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsx14(IconButton4, { size: s, children: icon }),
+              /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: s.charAt(0).toUpperCase() + s.slice(1) })
+            ] }, s)),
+            /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsx14(IconButton4, { disabled: true, children: /* @__PURE__ */ jsx14(Trash2Icon3, { size: 20 }) }),
+              /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: "Disabled" })
+            ] }),
+            /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsx14(IconButton4, { variant: "filled", children: /* @__PURE__ */ jsx14(PlusIcon, { size: 20 }) }),
+              /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: "Filled" })
+            ] }),
+            /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsx14(IconButton4, { shape: "square", children: /* @__PURE__ */ jsx14(SettingsIcon2, { size: 20 }) }),
+              /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: "Square" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "LoadingButton" }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap gap-3", children: [
+            /* @__PURE__ */ jsx14(LoadingButton, { loading: true, children: "Saving\u2026" }),
+            /* @__PURE__ */ jsx14(LoadingButton, { loading: false, children: "Idle" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx14(SectionBlock, { id: "inputs", title: "Form Inputs", children: /* @__PURE__ */ jsxs14("div", { className: "grid grid-cols-12 gap-4", children: [
+        /* @__PURE__ */ jsxs14("div", { className: "col-span-12 sm:col-span-6", children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "TextField" }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx14(TextField2, { label: "Default", placeholder: "Type something\u2026" }),
+            /* @__PURE__ */ jsx14(TextField2, { label: "With value", value: "Filled value", onChange: () => {
+            } }),
+            /* @__PURE__ */ jsx14(TextField2, { label: "Error state", error: true, value: "Bad value", onChange: () => {
+            } }),
+            /* @__PURE__ */ jsx14(TextField2, { label: "Disabled", disabled: true, value: "Read only", onChange: () => {
+            } }),
+            /* @__PURE__ */ jsx14(TextField2, { size: "medium", label: "Medium", placeholder: "Placeholder under the label" }),
+            /* @__PURE__ */ jsx14(TextField2, { size: "small", label: "Small", placeholder: "Placeholder under the label" }),
+            /* @__PURE__ */ jsx14(TextField2, { size: "smallest", label: "Smallest", value: "Filled value", onChange: () => {
+            } })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Select" }),
+            /* @__PURE__ */ jsxs14(Select5, { label: "Status", value: "published", onValueChange: () => {
+            }, children: [
+              /* @__PURE__ */ jsx14(SelectItem5, { value: "draft", children: "Draft" }),
+              /* @__PURE__ */ jsx14(SelectItem5, { value: "published", children: "Published" }),
+              /* @__PURE__ */ jsx14(SelectItem5, { value: "archived", children: "Archived" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "MultiSelect" }),
+            /* @__PURE__ */ jsxs14(MultiSelect, { label: "Roles", value: ["admin", "editor"], onValueChange: () => {
+            }, children: [
+              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "admin", children: "Admin" }),
+              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "editor", children: "Editor" }),
+              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "viewer", children: "Viewer" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block font-mono", children: "Checkbox" }),
+          /* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+            /* @__PURE__ */ jsx14(Checkbox3, { checked: true, onCheckedChange: () => {
+            } }),
+            /* @__PURE__ */ jsx14("span", { children: "Checked" })
+          ] }),
+          /* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+            /* @__PURE__ */ jsx14(Checkbox3, { checked: false, onCheckedChange: () => {
+            } }),
+            /* @__PURE__ */ jsx14("span", { children: "Unchecked" })
+          ] }),
+          /* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx14(Checkbox3, { checked: true, disabled: true }),
+            /* @__PURE__ */ jsx14("span", { children: "Disabled" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block font-mono", children: "BooleanSwitch" }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx14(BooleanSwitch, { value: true, onValueChange: () => {
+            } }),
+            /* @__PURE__ */ jsx14("span", { children: "On" })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx14(BooleanSwitch, { value: false, onValueChange: () => {
+            } }),
+            /* @__PURE__ */ jsx14("span", { children: "Off" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "col-span-12", children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "SearchBar" }),
+          /* @__PURE__ */ jsx14(SearchBar4, { placeholder: "Search entities\u2026" })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "col-span-12", children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Skeleton" }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex gap-4 items-center flex-wrap", children: [
+            /* @__PURE__ */ jsx14(Skeleton6, { className: "w-10 h-10 rounded-full" }),
+            /* @__PURE__ */ jsx14(Skeleton6, { className: "w-48 h-4 rounded" }),
+            /* @__PURE__ */ jsx14(Skeleton6, { className: "w-32 h-8 rounded-md" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { id: "chips-alerts", title: "Chips & Alerts", children: [
+        /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 colorScheme" }),
+        /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-2 mb-4", children: ["blue", "teal", "red", "green", "yellow", "orange", "purple", "pink", "cyan", "indigo", "violet", "fuchsia", "rose", "emerald", "gray"].map((s) => /* @__PURE__ */ jsx14(Chip7, { colorScheme: s, children: s }, s)) }),
+        /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 sizes" }),
+        /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-2 items-center mb-4", children: ["smallest", "small", "medium", "large"].map((sz) => /* @__PURE__ */ jsx14(Chip7, { colorScheme: "blue", size: sz, children: sz }, sz)) }),
+        /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 outlined, error, clickable, icon" }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap gap-2 items-center mb-4", children: [
+          /* @__PURE__ */ jsx14(Chip7, { colorScheme: "red", outlined: true, children: "Outlined Red" }),
+          /* @__PURE__ */ jsx14(Chip7, { colorScheme: "blue", outlined: true, children: "Outlined Blue" }),
+          /* @__PURE__ */ jsx14(Chip7, { error: true, children: "Error" }),
+          /* @__PURE__ */ jsx14(Chip7, { error: true, outlined: true, children: "Error Outlined" }),
+          /* @__PURE__ */ jsx14(Chip7, { onClick: () => {
+          }, children: "Clickable" }),
+          /* @__PURE__ */ jsx14(Chip7, { icon: /* @__PURE__ */ jsx14(TagIcon, { size: 12 }), colorScheme: "teal", children: "With Icon" }),
+          /* @__PURE__ */ jsx14(Chip7, { children: "Default (no scheme)" }),
+          /* @__PURE__ */ jsx14(Chip7, { outlined: true, children: "Default Outlined" })
+        ] }),
+        /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "FilterChip" }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap gap-2 items-center mb-6", children: [
+          /* @__PURE__ */ jsx14(FilterChip2, { active: true, children: "Active" }),
+          /* @__PURE__ */ jsx14(FilterChip2, { children: "Inactive" }),
+          /* @__PURE__ */ jsx14(FilterChip2, { icon: /* @__PURE__ */ jsx14(FilterIcon, { size: 12 }), active: true, children: "With Icon" }),
+          /* @__PURE__ */ jsx14(FilterChip2, { size: "small", children: "Small" }),
+          /* @__PURE__ */ jsx14(FilterChip2, { disabled: true, children: "Disabled" })
+        ] }),
+        /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Alert \u2014 color variants" }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx14(Alert3, { color: "info", children: "Info \u2014 informational message" }),
+          /* @__PURE__ */ jsx14(Alert3, { color: "success", children: "Success \u2014 operation completed" }),
+          /* @__PURE__ */ jsx14(Alert3, { color: "warning", children: "Warning \u2014 attention required" }),
+          /* @__PURE__ */ jsx14(Alert3, { color: "error", children: "Error \u2014 something went wrong" })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "mt-4", children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Separator" }),
+          /* @__PURE__ */ jsx14("div", { children: "Above" }),
+          /* @__PURE__ */ jsx14(Separator5, { orientation: "horizontal" }),
+          /* @__PURE__ */ jsx14("div", { children: "Below" })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "mt-4", children: [
+          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "CircularProgress" }),
+          /* @__PURE__ */ jsx14("div", { className: "flex gap-6 items-center", children: ["small", "medium", "large"].map((s) => /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ jsx14(CircularProgress, { size: s }),
+            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: s })
+          ] }, s)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { id: "users", title: "Management Screen \u2014 Alert + Table + Chip", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "Canonical layout for an admin management screen: an ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Alert" }),
+          " with an ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "action" }),
+          ", a header row, and a plain ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Table" }),
+          " with ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Chip" }),
+          "s. Illustrative mock \u2014 not tied to a specific screen."
+        ] }),
+        /* @__PURE__ */ jsx14(
+          Alert3,
+          {
+            color: "warning",
+            outerClassName: "mb-4",
+            action: /* @__PURE__ */ jsx14(Button8, { children: "Make me admin" }),
+            children: "No admin users exist. You can make yourself an admin."
+          }
+        ),
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center mt-12", children: [
+          /* @__PURE__ */ jsx14(Typography12, { gutterBottom: true, variant: "h4", className: "grow", component: "h4", children: "Users" }),
+          /* @__PURE__ */ jsx14(Button8, { startIcon: /* @__PURE__ */ jsx14(PlusIcon, {}), children: "Add user" })
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs14(Table2, { className: "w-full", children: [
+          /* @__PURE__ */ jsxs14(TableHeader2, { children: [
+            /* @__PURE__ */ jsx14(TableCell2, { header: true, className: "truncate w-16" }),
+            /* @__PURE__ */ jsx14(TableCell2, { header: true, children: "Email" }),
+            /* @__PURE__ */ jsx14(TableCell2, { header: true, children: "Name" }),
+            /* @__PURE__ */ jsx14(TableCell2, { header: true, children: "Roles" })
+          ] }),
+          /* @__PURE__ */ jsx14(TableBody2, { children: [
+            {
+              uid: "1",
+              email: "alice@example.com",
+              displayName: "Alice Johnson",
+              roles: [{
+                id: "admin",
+                name: "Admin",
+                isAdmin: true
+              }]
+            },
+            {
+              uid: "2",
+              email: "bob@example.com",
+              displayName: "Bob Smith",
+              roles: [{
+                id: "editor",
+                name: "Editor",
+                isAdmin: false
+              }]
+            },
+            {
+              uid: "3",
+              email: "carol@example.com",
+              displayName: "Carol White",
+              roles: []
+            }
+          ].map((user) => /* @__PURE__ */ jsxs14(TableRow2, { children: [
+            /* @__PURE__ */ jsx14(TableCell2, { style: { width: "64px" }, children: /* @__PURE__ */ jsx14(Tooltip3, { asChild: true, title: "Delete this user", children: /* @__PURE__ */ jsx14(IconButton4, { size: "small", children: /* @__PURE__ */ jsx14(Trash2Icon3, {}) }) }) }),
+            /* @__PURE__ */ jsx14(TableCell2, { children: user.email }),
+            /* @__PURE__ */ jsx14(TableCell2, { className: "font-medium", children: user.displayName }),
+            /* @__PURE__ */ jsx14(TableCell2, { children: /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-2", children: user.roles.map((role) => /* @__PURE__ */ jsx14(Chip7, { colorScheme: role.isAdmin ? "purple" : "blue", size: "small", children: role.name }, role.id)) }) })
+          ] }, user.uid)) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { id: "user-dialog", title: "Form Dialog \u2014 grid + MultiSelect + LoadingButton", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "Canonical form-in-a-card layout: ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "grid grid-cols-12 gap-4" }),
+          " for the fields, a ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "MultiSelect" }),
+          ", and a ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "LoadingButton" }),
+          " to submit. Illustrative mock \u2014 not tied to a specific screen."
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: `rounded-lg border w-full max-w-xl ${defaultBorderMixin5}`, children: [
+          /* @__PURE__ */ jsx14("div", { className: "px-6 pt-6 pb-2", children: /* @__PURE__ */ jsx14(Typography12, { variant: "h4", children: "User" }) }),
+          /* @__PURE__ */ jsx14("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs14("div", { className: "grid grid-cols-12 gap-4", children: [
+            /* @__PURE__ */ jsx14("div", { className: "col-span-12", children: /* @__PURE__ */ jsx14(TextField2, { name: "displayName", required: true, value: "Alice Johnson", onChange: () => {
+            }, label: "Name" }) }),
+            /* @__PURE__ */ jsx14("div", { className: "col-span-12", children: /* @__PURE__ */ jsx14(TextField2, { required: true, name: "email", value: "alice@example.com", onChange: () => {
+            }, label: "Email", disabled: true }) }),
+            /* @__PURE__ */ jsx14("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs14(MultiSelect, { className: "w-full", label: "Roles", value: ["admin"], onValueChange: () => {
+            }, children: [
+              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "admin", children: "Admin" }),
+              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "editor", children: "Editor" }),
+              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "viewer", children: "Viewer" })
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-end gap-2 px-6 pb-6", children: [
+            /* @__PURE__ */ jsx14(Button8, { variant: "text", children: "Cancel" }),
+            /* @__PURE__ */ jsx14(LoadingButton, { variant: "filled", loading: false, children: "Update" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { wide: true, id: "crm-dashboard", title: "CRM Dashboard \u2014 CrmDashboardDemo", children: [
+        /* @__PURE__ */ jsx14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: "A real-world showcase of a complex dashboard home page incorporating Rebase design language." }),
+        /* @__PURE__ */ jsx14("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx14(CrmDashboardDemo, {}) })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { wide: true, id: "collection-table", title: "Collection Table", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "Sample data collection rendered as a sortable, searchable, filterable table with row selection. Uses ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Table" }),
+          ", ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Chip" }),
+          ",",
+          " ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "SearchBar" }),
+          ", ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Select" }),
+          ",",
+          " ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Checkbox" }),
+          "."
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: "w-full", children: /* @__PURE__ */ jsx14(CollectionTableDemo, {}) })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { wide: true, id: "card-view", title: "Card View", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "Grid of entity cards with thumbnail area, progress bar, status/priority chips, and assignee. Uses ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Card" }),
+          ", ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Chip" }),
+          ",",
+          " ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "ToggleButtonGroup" }),
+          ", ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "SearchBar" }),
+          "."
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: "w-full", children: /* @__PURE__ */ jsx14(CardViewDemo, {}) })
+      ] }),
+      /* @__PURE__ */ jsxs14(SectionBlock, { wide: true, id: "kanban-board", title: "Kanban Board", children: [
+        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+          "Drag-and-drop kanban board with four status columns. Uses ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "KanbanView" }),
+          ", ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "BoardItem" }),
+          ",",
+          " ",
+          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "BoardItemViewProps" }),
+          "."
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx14(KanbanBoardDemo, {}) })
+      ] })
+    ] })
+  ] });
+}
+function SectionBlock({ id, title, wide, children }) {
+  return (
+    // `max-w-5xl` and `border-b` used to share this element, and they cannot.
+    // Several mocks here are app-scale and intrinsically wider than 64rem
+    // (the CRM dashboard reaches 1483px), so the section's own rule stopped
+    // at 1264px while its content ran past it — every such section read as a
+    // broken edge.
+    //
+    // Split instead: the SECTION spans the column, so its rule always
+    // reaches its own edges; the CONTENT keeps a measure, so a form column
+    // never stretches to 700px on a wide monitor. `wide` opts the app-scale
+    // mocks out of the measure — they pair it with `overflow-x-auto` so they
+    // scroll inside themselves rather than pushing the page.
+    /* @__PURE__ */ jsx14("section", { id, className: cls10("px-6 py-8 border-b scroll-mt-0", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: wide ? void 0 : "max-w-5xl", children: [
+      /* @__PURE__ */ jsx14(Typography12, { variant: "h5", className: "mb-1", children: title }),
+      /* @__PURE__ */ jsx14("div", { className: "mt-4", children })
+    ] }) })
+  );
+}
+export {
+  CrmDashboardDemo,
+  UIReferenceView,
+  UIStyleGuide
+};