@xenide-io/the-old-ui-theme 0.9.18 → 0.11.0

package/dist/ui.js

@@ -61,6 +61,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var ui_exports = {};
 __export(ui_exports, {
   Accordion: () => Accordion,
+  AiWritingIllustration: () => AiWritingIllustration,
   Alert: () => Alert,
   AuthCard: () => AuthCard,
   AuthDivider: () => AuthDivider,
@@ -69,6 +70,7 @@ __export(ui_exports, {
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
   BarChart: () => BarChart,
+  BrandSpinner: () => BrandSpinner,
   Button: () => Button,
   ButtonChrome: () => ButtonChrome,
   Calendar: () => Calendar,
@@ -103,12 +105,17 @@ __export(ui_exports, {
   Icon: () => IconBase,
   IconByName: () => IconByName,
   Input: () => Input,
+  IntegrationBridgeIllustration: () => IntegrationBridgeIllustration,
   Kbd: () => Kbd,
   Label: () => Label,
   Lead: () => Lead,
   Link: () => Link,
   Loader: () => Loader,
   LoadingState: () => LoadingState,
+  MarketingHeader: () => MarketingHeader,
+  MarketingLink: () => MarketingLink,
+  MarketingMotionControl: () => MarketingMotionControl,
+  MarketingReveal: () => MarketingReveal,
   Modal: () => Modal,
   Mono: () => Mono,
   Overline: () => Overline,
@@ -252,13 +259,441 @@ var Button = (0, import_react.forwardRef)(function Button2(_a, ref) {
 });
 Button.displayName = "Button";
 
+// src/components/ui/Marketing.tsx
+var import_react2 = require("react");
+var import_iconoir_react = require("iconoir-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function MarketingHeader(_a) {
+  var _b = _a, {
+    brand,
+    navigation,
+    actions,
+    className
+  } = _b, props = __objRest(_b, [
+    "brand",
+    "navigation",
+    "actions",
+    "className"
+  ]);
+  const [scrolled, setScrolled] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    const onScroll = () => setScrolled(window.scrollY > 4);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "header",
+    __spreadProps(__spreadValues({}, props), {
+      "data-scrolled": scrolled ? "true" : "false",
+      className: cn("marketing-header", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "marketing-header__inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "marketing-header__brand", children: brand }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "nav",
+          {
+            className: "marketing-header__navigation",
+            "aria-label": "Product navigation",
+            children: navigation
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "marketing-header__actions", children: actions })
+      ] })
+    })
+  );
+}
+function MarketingLink(_a) {
+  var _b = _a, {
+    variant = "secondary",
+    icon,
+    sideIcon,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "icon",
+    "sideIcon",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "a",
+    __spreadProps(__spreadValues({}, props), {
+      className: cn(
+        "ph-btn ph-btn-raised marketing-button",
+        `ph-btn-${variant}`,
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonChrome, { label: children, icon, sideIcon })
+    })
+  );
+}
+function MarketingMotionControl() {
+  const [paused, setPaused] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    document.documentElement.toggleAttribute("data-marketing-paused", paused);
+    return () => document.documentElement.removeAttribute("data-marketing-paused");
+  }, [paused]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: "marketing-motion-control",
+      onClick: () => setPaused((value) => !value),
+      "aria-pressed": paused,
+      "aria-label": paused ? "Play landing animations" : "Pause landing animations",
+      children: [
+        paused ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_iconoir_react.Play, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_iconoir_react.Pause, { className: "h-4 w-4", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: paused ? "Play motion" : "Pause motion" })
+      ]
+    }
+  );
+}
+function MarketingReveal(_a) {
+  var _b = _a, {
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className"
+  ]);
+  const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const element = ref.current;
+    if (!element || !window.IntersectionObserver || window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+      return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        element.classList.add("marketing-reveal--entered");
+        observer.disconnect();
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", __spreadProps(__spreadValues({}, props), { ref, className: cn("marketing-reveal", className), children }));
+}
+
+// src/components/ui/MarketingIllustrations.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function AiWritingIllustration({
+  title,
+  prompt,
+  before,
+  after
+}) {
+  const id = (0, import_react3.useId)().replaceAll(":", "");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 560 370",
+      className: "h-auto w-full",
+      role: "img",
+      "aria-label": `${title}: use /ai and Shelly AI to draft and polish writing`,
+      "data-marketing-art": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("radialGradient", { id: `${id}-glow`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { stopColor: "var(--ph-accent)", stopOpacity: ".2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "1", stopColor: "var(--ph-accent)", stopOpacity: "0" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: `${id}-paper`, x2: "1", y2: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { stopColor: "var(--ph-surface)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "1", stopColor: "var(--ph-muted)" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ellipse", { cx: "280", cy: "198", rx: "260", ry: "168", fill: `url(#${id}-glow)` }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { className: "marketing-svg-float", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "rect",
+            {
+              x: "18",
+              y: "28",
+              width: "524",
+              height: "300",
+              rx: "20",
+              fill: `url(#${id}-paper)`,
+              stroke: "var(--ph-border)"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 76h524", stroke: "var(--ph-border)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("image", { href: "/shelly-icon.svg", x: "36", y: "40", width: "24", height: "24" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "text",
+            {
+              x: "70",
+              y: "57",
+              fontSize: "16",
+              fontWeight: "700",
+              fill: "var(--ph-text-primary)",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: "434", y: "57", fontSize: "12", fill: "var(--ph-text-secondary)", children: "Shelly AI" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "rect",
+            {
+              x: "38",
+              y: "94",
+              width: "484",
+              height: "42",
+              rx: "10",
+              fill: "var(--ph-canvas)",
+              stroke: "var(--ph-selected-border)"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: "54", y: "121", fontSize: "16", fill: "var(--ph-text-primary)", children: prompt }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { className: "marketing-svg-draft", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "text",
+              {
+                x: "46",
+                y: "171",
+                fontSize: "12",
+                fontWeight: "700",
+                fill: "var(--ph-text-secondary)",
+                children: "YOUR DRAFT"
+              }
+            ),
+            before.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "text",
+              {
+                x: "46",
+                y: 205 + index * 26,
+                fontSize: "16",
+                fill: "var(--ph-text-secondary)",
+                children: line
+              },
+              index
+            ))
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "path",
+            {
+              className: "marketing-svg-thread",
+              d: "M265 175v102",
+              stroke: "var(--ph-accent)",
+              strokeWidth: "2",
+              strokeDasharray: "4 7"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { className: "marketing-svg-polished", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "text",
+              {
+                x: "294",
+                y: "171",
+                fontSize: "12",
+                fontWeight: "700",
+                fill: "var(--ph-accent)",
+                children: "POLISHED WITH SHELLY"
+              }
+            ),
+            after.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "text",
+              {
+                x: "294",
+                y: 205 + index * 26,
+                fontSize: "16",
+                fill: "var(--ph-text-primary)",
+                children: line
+              },
+              index
+            )),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "path",
+              {
+                d: "m302 294 5 5 10-11",
+                fill: "none",
+                stroke: "var(--ph-success)",
+                strokeWidth: "3",
+                strokeLinecap: "round"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: "328", y: "300", fontSize: "12", fill: "var(--ph-text-secondary)", children: "Ready to keep working" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { className: "marketing-svg-spark", fill: "var(--ph-accent)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m520 12 3 10 10 3-10 3-3 10-3-10-10-3 10-3z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m25 310 2 7 7 2-7 2-2 7-2-7-7-2 7-2z" })
+        ] })
+      ]
+    }
+  );
+}
+function IntegrationBridgeIllustration({
+  appName,
+  appIcon,
+  recordLabel,
+  calendar = false
+}) {
+  const id = (0, import_react3.useId)().replaceAll(":", "");
+  const rows = calendar ? ["Client catch-up", "10:00 \u2013 11:00", "Meeting notes"] : ["Client", "Project", recordLabel];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 600 350",
+      className: "h-auto w-full",
+      role: "img",
+      "aria-label": calendar ? "Choose a calendar event to prefill a TurtleTime entry" : `Shelly Bridge matches connected records with ${appName}`,
+      "data-marketing-art": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("radialGradient", { id: `${id}-bridge`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { stopColor: "var(--ph-blue)", stopOpacity: ".17" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "1", stopColor: "var(--ph-blue)", stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "ellipse",
+          {
+            cx: "300",
+            cy: "185",
+            rx: "280",
+            ry: "160",
+            fill: `url(#${id}-bridge)`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { className: "marketing-svg-float", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "rect",
+            {
+              x: "18",
+              y: "55",
+              width: "230",
+              height: "240",
+              rx: "18",
+              fill: "var(--ph-surface)",
+              stroke: "var(--ph-border)"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "rect",
+            {
+              x: "352",
+              y: "55",
+              width: "230",
+              height: "240",
+              rx: "18",
+              fill: "var(--ph-surface)",
+              stroke: "var(--ph-border)"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "text",
+            {
+              x: "38",
+              y: "92",
+              fontSize: "17",
+              fontWeight: "700",
+              fill: "var(--ph-text-primary)",
+              children: calendar ? "Calendar events" : "Connected tools"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("image", { href: appIcon, x: "370", y: "72", width: "28", height: "28" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "text",
+            {
+              x: "410",
+              y: "93",
+              fontSize: "17",
+              fontWeight: "700",
+              fill: "var(--ph-text-primary)",
+              children: appName
+            }
+          ),
+          rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "rect",
+              {
+                x: "36",
+                y: 119 + index * 48,
+                width: "194",
+                height: "36",
+                rx: "8",
+                fill: "var(--ph-muted)"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "text",
+              {
+                x: "50",
+                y: 142 + index * 48,
+                fontSize: "14",
+                fill: "var(--ph-text-secondary)",
+                children: row
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "rect",
+              {
+                x: "370",
+                y: 119 + index * 48,
+                width: "194",
+                height: "36",
+                rx: "8",
+                fill: "var(--ph-muted)"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "text",
+              {
+                x: "384",
+                y: 142 + index * 48,
+                fontSize: "14",
+                fill: "var(--ph-text-primary)",
+                children: calendar && index === 1 ? "1 hour, ready to review" : row
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "path",
+              {
+                className: "marketing-svg-thread",
+                d: `M248 ${137 + index * 48}h104`,
+                stroke: "var(--ph-accent)",
+                strokeWidth: "2",
+                strokeDasharray: "5 8"
+              }
+            )
+          ] }, row))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { className: "marketing-svg-polished", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "circle",
+            {
+              cx: "300",
+              cy: "185",
+              r: "27",
+              fill: "var(--ph-canvas)",
+              stroke: "var(--ph-selected-border)"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("image", { href: "/shelly-icon.svg", x: "280", y: "165", width: "40", height: "40" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "text",
+            {
+              x: "300",
+              y: "331",
+              textAnchor: "middle",
+              fontSize: "13",
+              fill: "var(--ph-text-secondary)",
+              children: calendar ? "Prefill details \xB7 review \xB7 save the entry" : "Shelly Bridge \xB7 match the records you want to connect"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
 // src/components/ui/Alert.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // src/components/icons/IconBase.tsx
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var IconBase = (0, import_react2.forwardRef)(function IconBase2(_a, ref) {
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var IconBase = (0, import_react4.forwardRef)(function IconBase2(_a, ref) {
   var _b = _a, {
     className,
     size,
@@ -287,7 +722,7 @@ var IconBase = (0, import_react2.forwardRef)(function IconBase2(_a, ref) {
     "aria-labelledby"
   ]);
   const hasAccessibleName = Boolean(ariaLabel || ariaLabelledBy);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -309,11 +744,11 @@ var IconBase = (0, import_react2.forwardRef)(function IconBase2(_a, ref) {
 IconBase.displayName = "IconBase";
 
 // src/components/icons/createIconBase.tsx
-var import_react3 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function createIconBase({ name = "IconGlyph", viewBox = "0 0 24 24", paths }) {
-  const IconGlyph = (0, import_react3.forwardRef)(function IconGlyph2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconBase, __spreadProps(__spreadValues({ ref, viewBox }, props), { children: paths }));
+  const IconGlyph = (0, import_react5.forwardRef)(function IconGlyph2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconBase, __spreadProps(__spreadValues({ ref, viewBox }, props), { children: paths }));
   });
   IconGlyph.displayName = name;
   return IconGlyph;
@@ -322,14 +757,14 @@ function createIconBasePath(d, viewBox = "0 0 24 24", name) {
   return createIconBase({
     name,
     viewBox,
-    paths: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d, fill: "currentColor" })
+    paths: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d, fill: "currentColor" })
   });
 }
 
 // src/components/icons/icons.tsx
-var import_react4 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var fill = (d) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d, fill: "currentColor" });
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var fill = (d) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d, fill: "currentColor" });
 var IconAreaChart = createIconBase({
   paths: fill("M3 20V7l4 3 5-7 5 4h4v13Zm5-3 4-5.5 7 5.45V9h-2.7l-3.9-3.125-4.95 6.95L5 11v3.6Z")
 });
@@ -370,7 +805,7 @@ var IconFlare = createIconBase({
   )
 });
 var IconSelectEvents = createIconBase({
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     fill("M17.5 9L16.56 6.94L14.5 6L16.56 5.06L17.5 3L18.44 5.06L20.5 6L18.44 6.94L17.5 9Z"),
     fill("M6 12.5L6.94 14.56L9 15.5L6.94 16.44L6 18.5L5.06 16.44L3 15.5L5.06 14.56L6 12.5Z"),
     fill("M6 9L5.06 6.94L3 6L5.06 5.06L6 3L6.94 5.06L9 6L6.94 6.94L6 9Z"),
@@ -428,9 +863,9 @@ var IconRobot = createIconBase({
   )
 });
 var IconExclamation = createIconBase({
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { fill: "currentColor", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m12 21c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m10 3h4v12h-4z" })
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { fill: "currentColor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "m12 21c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "m10 3h4v12h-4z" })
   ] })
 });
 var IconErrorOutline = createIconBase({
@@ -464,7 +899,7 @@ var IconChevronLeft = createIconBasePath("M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10
 var IconChevronRight = createIconBasePath("M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z");
 var IconChevronDown = createIconBasePath("M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z");
 var IconSubArrowRight = createIconBase({
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { transform: "translate(4 5.5)", children: fill("M2 0H0V10H12.01V13L16 9L12.01 5V8H2V0Z") })
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { transform: "translate(4 5.5)", children: fill("M2 0H0V10H12.01V13L16 9L12.01 5V8H2V0Z") })
 });
 var IconSearch = createIconBasePath(
   "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
@@ -543,7 +978,7 @@ var IconRocket = createIconBasePath(
 );
 var IconTerminal = createIconBase({
   name: "IconTerminal",
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M3 4v16h18V4H3zm2 2h14v12H5V6zm2 2.2L10.8 12 7 15.8 8.4 17.2l5.2-5.2-5.2-5.2L7 8.2zM13 17h5v-2h-5v2z",
@@ -555,7 +990,7 @@ var IconTerminal = createIconBase({
 });
 var IconOldWindow = createIconBase({
   name: "IconOldWindow",
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M3 3v18h18V3H3zm2 7v9h14v-9H5zm1-4h2v1H6V6zm3 0h2v1H9V6z",
@@ -567,7 +1002,7 @@ var IconOldWindow = createIconBase({
 });
 var IconCommandCursor = createIconBase({
   name: "IconCommandCursor",
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M4 3v18h16V3H4zm2 2h12v14H6V5zm1.5 3.5L11 12l-3.5 3.5L9 17l5-5-5-5-1.5 1.5zM13 17h4v-2h-4v2z",
@@ -579,7 +1014,7 @@ var IconCommandCursor = createIconBase({
 });
 var IconDataReel = createIconBase({
   name: "IconDataReel",
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M3 5v14h18V5H3zm2 2h14v10H5V7zm3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm8 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM10 11h4v1.5h-4V11z",
@@ -591,7 +1026,7 @@ var IconDataReel = createIconBase({
 });
 var IconCodePreview = createIconBase({
   name: "IconCodePreview",
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M3 3v15h18V3H3zm2 2h14v11H5V5zm3.5 2L5 10.5 8.5 14l1.4-1.4-2.1-2.1 2.1-2.1L8.5 7zm7 0-1.4 1.4 2.1 2.1-2.1 2.1 1.4 1.4 3.5-3.5L15.5 7zM9 20h6v2H9v-2z",
@@ -603,7 +1038,7 @@ var IconCodePreview = createIconBase({
 });
 var IconInsightBoard = createIconBase({
   name: "IconInsightBoard",
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M3 3v18h18V3H3zm2 2h14v3H5V5zm0 5h6v9H5v-9zm8 0h6v4h-6v-4zm0 6h6v3h-6v-3zM6 6h2v1H6V6zm3 0h2v1H9V6z",
@@ -615,14 +1050,14 @@ var IconInsightBoard = createIconBase({
 });
 var IconEventStream = createIconBase({
   name: "IconEventStream",
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M5 4h2v16H5V4z", fill: "currentColor", opacity: "0.45" }),
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5 4h2v16H5V4z", fill: "currentColor", opacity: "0.45" }),
     fill("M6 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 8a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm5-6h10v2H11V5zm0 8h7v2h-7v-2zm0 5h10v2H11v-2z")
   ] })
 });
 var IconFeatureGate = createIconBase({
   name: "IconFeatureGate",
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M4 3h2v18H4V3zm3 2h12l-3 4 3 4H7V5zm4 1-2.2 4H12l-1 4 4.2-5H12l1-3h-2z",
@@ -634,7 +1069,7 @@ var IconFeatureGate = createIconBase({
 });
 var IconReplayFrame = createIconBase({
   name: "IconReplayFrame",
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M3 3v18h18V3H3zm2 2h14v11H5V5zm5 2v7l6-3.5L10 7zm-5 11h9v1H5v-1zm11 0h3v1h-3v-1z",
@@ -658,7 +1093,7 @@ var IconExperimentSplit = createIconBase({
 });
 var IconSurveyCard = createIconBase({
   name: "IconSurveyCard",
-  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  paths: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M3 3v18h18V3H3zm2 2h14v14H5V5zm2 2h7v2H7V7zm0 4h4v2H7v-2zm7-.4-2.5 2.5-1-1-1.4 1.4 2.4 2.4 3.9-3.9-1.4-1.4zM7 16h10v1H7v-1z",
@@ -674,9 +1109,9 @@ var IconActivity = createIconBasePath(
 var IconFlask = createIconBasePath(
   "M19.8 18.4L14 10.67V6.5l1.35-1.35c.39-.39.39-1.02 0-1.41L14.65 2.7a.9959.9959 0 0 0-1.41 0L9.35 6.54c-.39.39-.39 1.02 0 1.41L10.7 9.3v4.17L4.2 18.4C3.53 19.07 4.04 20.25 5 20.25h14c.96 0 1.47-1.18.8-1.85zM6.91 18.25l5.09-5.09 5.09 5.09H6.91z"
 );
-var IconSpinner = (0, import_react4.forwardRef)(function IconSpinner2(_a, ref) {
+var IconSpinner = (0, import_react6.forwardRef)(function IconSpinner2(_a, ref) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSync, __spreadValues({ ref, className: cn("ph-icon-spin", className) }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSync, __spreadValues({ ref, className: cn("ph-icon-spin", className) }, props));
 });
 IconSpinner.displayName = "IconSpinner";
 var CANONICAL_ICONS = {
@@ -774,15 +1209,15 @@ for (const [name, Icon] of Object.entries(CANONICAL_ICONS)) {
     namedIcon.displayName = `Icon${name[0].toUpperCase()}${name.slice(1)}`;
   }
 }
-var IconByName = (0, import_react4.forwardRef)(function IconByName2(_a, ref) {
+var IconByName = (0, import_react6.forwardRef)(function IconByName2(_a, ref) {
   var _b = _a, { name } = _b, props = __objRest(_b, ["name"]);
   const Icon = PH_ICONS[name];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, __spreadValues({ ref }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, __spreadValues({ ref }, props));
 });
 IconByName.displayName = "IconByName";
 
 // src/components/ui/Alert.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var statusConfig = {
   info: { icon: IconInfo },
   success: { icon: IconCheckCircle },
@@ -795,7 +1230,7 @@ var statusClassMap = {
   warning: "ph-alert-warning",
   danger: "ph-alert-danger"
 };
-var Alert = (0, import_react5.forwardRef)(function Alert2(_a, ref) {
+var Alert = (0, import_react7.forwardRef)(function Alert2(_a, ref) {
   var _b = _a, {
     status = "info",
     title,
@@ -821,7 +1256,7 @@ var Alert = (0, import_react5.forwardRef)(function Alert2(_a, ref) {
   ]);
   const config = statusConfig[status];
   const Icon = config.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       ref,
@@ -830,20 +1265,20 @@ var Alert = (0, import_react5.forwardRef)(function Alert2(_a, ref) {
       className: cn("ph-alert", statusClassMap[status], className)
     }, props), {
       children: [
-        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "ph-alert-icon mt-0.5 h-5 w-5 shrink-0", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "font-semibold", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-1 text-sm text-ph-subtle", children: description }),
+        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: "ph-alert-icon mt-0.5 h-5 w-5 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "font-semibold", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "mt-1 text-sm text-ph-subtle", children: description }),
           children
         ] }),
-        onDismiss && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        onDismiss && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
             type: "button",
             onClick: onDismiss,
             className: "ph-alert-dismiss",
             "aria-label": dismissLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconClose, { className: "h-4 w-4", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconClose, { className: "h-4 w-4", "aria-hidden": true })
           }
         )
       ]
@@ -853,8 +1288,8 @@ var Alert = (0, import_react5.forwardRef)(function Alert2(_a, ref) {
 Alert.displayName = "Alert";
 
 // src/components/ui/Badge.tsx
-var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var variantMap = {
   brand: "ph-badge-brand",
   neutral: "ph-badge-neutral",
@@ -868,7 +1303,7 @@ var sizeMap = {
   sm: "text-[10px] px-1.5 py-0.5",
   md: ""
 };
-var Badge = (0, import_react6.forwardRef)(function Badge2(_a, ref) {
+var Badge = (0, import_react8.forwardRef)(function Badge2(_a, ref) {
   var _b = _a, {
     variant = "neutral",
     size = "md",
@@ -880,7 +1315,7 @@ var Badge = (0, import_react6.forwardRef)(function Badge2(_a, ref) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "span",
     __spreadProps(__spreadValues({
       ref,
@@ -898,15 +1333,15 @@ var Badge = (0, import_react6.forwardRef)(function Badge2(_a, ref) {
 Badge.displayName = "Badge";
 
 // src/components/ui/Card.tsx
-var import_react7 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var variantMap2 = {
   default: "",
   outlined: "border-2 border-ph-border",
   elevated: "ph-card-elevated",
   highlighted: "ph-card-highlighted"
 };
-var Card = (0, import_react7.forwardRef)(function Card2(_a, ref) {
+var Card = (0, import_react9.forwardRef)(function Card2(_a, ref) {
   var _b = _a, {
     children,
     title,
@@ -950,18 +1385,18 @@ var Card = (0, import_react7.forwardRef)(function Card2(_a, ref) {
     (interactive || isLink || isButton) && "ph-card-interactive",
     className
   );
-  const cardContent = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    media && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ph-card-media", children: media }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("ph-card-body", bodyClassName), children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Title3, { className: "ph-card-title", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-ph-subtle", children: description }),
+  const cardContent = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    media && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ph-card-media", children: media }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("ph-card-body", bodyClassName), children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Title3, { className: "ph-card-title", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-ph-subtle", children: description }),
       children,
-      actions && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ph-card-actions", children: actions })
+      actions && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ph-card-actions", children: actions })
     ] }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "border-t border-ph-border px-6 py-4 text-xs text-ph-subtle", children: footer })
+    footer && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "border-t border-ph-border px-6 py-4 text-xs text-ph-subtle", children: footer })
   ] });
   if (isLink) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "a",
       __spreadProps(__spreadValues({
         ref,
@@ -976,7 +1411,7 @@ var Card = (0, import_react7.forwardRef)(function Card2(_a, ref) {
     );
   }
   if (isButton) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       __spreadProps(__spreadValues({
         ref,
@@ -988,12 +1423,12 @@ var Card = (0, import_react7.forwardRef)(function Card2(_a, ref) {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadProps(__spreadValues({ ref, className: cardClassName }, props), { children: cardContent }));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", __spreadProps(__spreadValues({ ref, className: cardClassName }, props), { children: cardContent }));
 });
 Card.displayName = "Card";
 
 // src/components/ui/Kbd.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var platformLabels = {
   text: {
     command: "Command",
@@ -1052,7 +1487,7 @@ function Kbd(_a) {
     "aria-label"
   ]);
   if (variant === "token") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "code",
       __spreadProps(__spreadValues({
         className: cn("ph-code-token ph-kbd", className),
@@ -1067,7 +1502,7 @@ function Kbd(_a) {
   const displayKeys = sourceKeys.map((key) => formatKey(key, platform));
   const accessibleLabel = ariaLabel != null ? ariaLabel : getShortcutLabel(displayKeys);
   if (variant === "key") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "kbd",
       __spreadProps(__spreadValues({
         className: cn("ph-keycap", className),
@@ -1078,16 +1513,16 @@ function Kbd(_a) {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "kbd",
     __spreadProps(__spreadValues({
       className: cn("ph-shortcut-group ph-keycap", className),
       role: accessibleLabel ? "img" : void 0,
       "aria-label": accessibleLabel
     }, props), {
-      children: displayKeys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "contents", children: [
-        index > 0 && separator != null ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ph-shortcut-separator", "aria-hidden": "true", children: separator }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ph-shortcut-key", "aria-hidden": accessibleLabel ? true : void 0, children: key })
+      children: displayKeys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "contents", children: [
+        index > 0 && separator != null ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-shortcut-separator", "aria-hidden": "true", children: separator }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-shortcut-key", "aria-hidden": accessibleLabel ? true : void 0, children: key })
       ] }, index))
     })
   );
@@ -1108,7 +1543,7 @@ function getShortcutLabel(keys) {
 }
 
 // src/components/ui/Loader.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var loaderSizeClass = {
   sm: "ph-loader-sm",
   md: "ph-loader-md",
@@ -1134,7 +1569,7 @@ function Loader(_a) {
     "label",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "span",
     __spreadProps(__spreadValues({
       role: "status",
@@ -1142,20 +1577,20 @@ function Loader(_a) {
       className: cn("ph-loader", loaderSizeClass[size], className)
     }, props), {
       children: [
-        variant === "spinner" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ph-loading", "aria-hidden": true }) : null,
-        variant === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ph-loading-dots", "aria-hidden": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {})
+        variant === "spinner" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ph-loading", "aria-hidden": true }) : null,
+        variant === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "ph-loading-dots", "aria-hidden": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", {})
         ] }) : null,
-        variant === "pulse" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ph-loading-pulse", "aria-hidden": true }) : null
+        variant === "pulse" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ph-loading-pulse", "aria-hidden": true }) : null
       ]
     })
   );
 }
 function Skeleton(_a) {
   var _b = _a, { shape = "text", className } = _b, props = __objRest(_b, ["shape", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "span",
     __spreadValues({
       className: cn("ph-skeleton", skeletonShapeClass[shape], className),
@@ -1179,53 +1614,67 @@ function LoadingState(_a) {
     "size",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-loading-state", className), role: "status", "aria-label": label }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loader, { variant, size, label, "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ph-loading-state__copy", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-loading-state", className), role: "status", "aria-label": label }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Loader, { variant, size, label, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ph-loading-state__copy", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("strong", { children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: description }) : null
     ] })
   ] }));
 }
 
 // src/components/ui/AuthLayout.tsx
-var import_react8 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function AuthLayout(_a) {
   var _b = _a, { brand, footer, aside, children, className } = _b, props = __objRest(_b, ["brand", "footer", "aside", "children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-auth-layout", aside != null && "ph-auth-layout--split", className) }, props), { children: [
-    aside ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("aside", { className: "ph-auth-layout__aside", children: aside }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ph-auth-layout__main", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ph-auth-layout__column", children: [
-      brand ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ph-auth-layout__brand", children: brand }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-auth-layout", aside != null && "ph-auth-layout--split", className) }, props), { children: [
+    aside ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("aside", { className: "ph-auth-layout__aside", children: aside }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ph-auth-layout__main", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ph-auth-layout__column", children: [
+      brand ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ph-auth-layout__brand", children: brand }) : null,
       children,
-      footer ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("footer", { className: "ph-auth-layout__footer", children: footer }) : null
+      footer ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("footer", { className: "ph-auth-layout__footer", children: footer }) : null
     ] }) })
   ] }));
 }
 function AuthCard(_a) {
   var _b = _a, { title, description, footer, children, className } = _b, props = __objRest(_b, ["title", "description", "footer", "children", "className"]);
-  const titleId = (0, import_react8.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", __spreadProps(__spreadValues({ className: cn("ph-auth-card", className), "aria-labelledby": titleId }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className: "ph-auth-card__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { id: titleId, children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: description }) : null
+  const titleId = (0, import_react10.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", __spreadProps(__spreadValues({ className: cn("ph-auth-card", className), "aria-labelledby": titleId }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("header", { className: "ph-auth-card__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h1", { id: titleId, children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ph-auth-card__body", children }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("footer", { className: "ph-auth-card__footer", children: footer }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ph-auth-card__body", children }),
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("footer", { className: "ph-auth-card__footer", children: footer }) : null
   ] }));
 }
 function AuthDivider(_a) {
   var _b = _a, { children = "or continue with", className } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-auth-divider", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children }) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-auth-divider", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children }) }));
+}
+
+// src/lib/suite-analytics.ts
+var SUITE_ANALYTICS_EVENT = "shellstack:analytics";
+function trackSuiteEvent(event, properties) {
+  if (typeof window === "undefined" || !event) return;
+  try {
+    window.dispatchEvent(
+      new CustomEvent(SUITE_ANALYTICS_EVENT, {
+        detail: { event, properties }
+      })
+    );
+  } catch (e) {
+  }
 }
 
 // src/components/ui/SettingsLayout.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function SettingsNav(_a) {
   var _b = _a, { groups, className } = _b, props = __objRest(_b, ["groups", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-settings-nav", className) }, props), { children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ph-settings-nav__group", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "ph-settings-nav__heading", children: group.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ph-settings-nav__items", children: group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-settings-nav", className) }, props), { children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ph-settings-nav__group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "ph-settings-nav__heading", children: group.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ph-settings-nav__items", children: group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "a",
       {
         href: item.href,
@@ -1236,10 +1685,11 @@ function SettingsNav(_a) {
           item.active && "ph-settings-nav__item--active"
         ),
         "aria-current": item.active ? "page" : void 0,
+        onClick: () => trackSuiteEvent("Tab Viewed", { tab: item.id }),
         children: [
-          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: item.label }),
-          item.badge ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ph-settings-nav__badge", children: item.badge }) : null
+          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: item.label }),
+          item.badge ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ph-settings-nav__badge", children: item.badge }) : null
         ]
       },
       item.id
@@ -1264,31 +1714,31 @@ function SettingsLayout(_a) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", __spreadProps(__spreadValues({ className: cn("ph-settings-layout", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: "ph-settings-layout__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", __spreadProps(__spreadValues({ className: cn("ph-settings-layout", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("header", { className: "ph-settings-layout__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: description }) : null
       ] }),
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ph-settings-layout__actions", children: actions }) : null
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ph-settings-layout__actions", children: actions }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("details", { className: "ph-settings-layout__mobile-nav", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("summary", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconTuning, { className: "h-4 w-4", "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("details", { className: "ph-settings-layout__mobile-nav", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("summary", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconTuning, { className: "h-4 w-4", "aria-hidden": true }),
         "Settings menu"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { "aria-label": navigationLabel, children: navigation })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("nav", { "aria-label": navigationLabel, children: navigation })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ph-settings-layout__grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("aside", { className: "ph-settings-layout__sidebar", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { "aria-label": navigationLabel, children: navigation }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ph-settings-layout__content", children })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ph-settings-layout__grid", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("aside", { className: "ph-settings-layout__sidebar", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("nav", { "aria-label": navigationLabel, children: navigation }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ph-settings-layout__content", children })
     ] })
   ] }));
 }
 
 // src/components/ui/DropdownMenu.tsx
 var DropdownPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var sizeClass2 = {
   xs: "ph-btn-xs",
   sm: "ph-btn-sm",
@@ -1310,7 +1760,7 @@ function DropdownContent({
   avoidCollisions = true,
   panelClassName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     DropdownPrimitive.Content,
     {
       className: cn("ph-dropdown-panel", panelClassName),
@@ -1323,7 +1773,7 @@ function DropdownContent({
       sticky: "partial",
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           DropdownPrimitive.Arrow,
           {
             className: "ph-dropdown-arrow",
@@ -1375,7 +1825,7 @@ function DropdownMenu(_a) {
     "modal",
     "disabled"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     DropdownPrimitive.Root,
     {
       open,
@@ -1383,7 +1833,7 @@ function DropdownMenu(_a) {
       onOpenChange,
       modal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             type: "button",
@@ -1394,7 +1844,7 @@ function DropdownMenu(_a) {
             children: trigger
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           DropdownContent,
           {
             align,
@@ -1459,8 +1909,8 @@ function DropdownButton(_a) {
     "modal",
     "disabled"
   ]);
-  const trailing = sideIcon != null ? sideIcon : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  const trailing = sideIcon != null ? sideIcon : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     DropdownPrimitive.Root,
     {
       open,
@@ -1468,7 +1918,7 @@ function DropdownButton(_a) {
       onOpenChange,
       modal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             type: "button",
@@ -1481,7 +1931,7 @@ function DropdownButton(_a) {
               split && "ph-btn-split"
             ),
             "aria-label": ariaLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               ButtonChrome,
               {
                 label,
@@ -1492,7 +1942,7 @@ function DropdownButton(_a) {
             )
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           DropdownContent,
           {
             align,
@@ -1519,7 +1969,7 @@ function DropdownItem(_a) {
     "children",
     "disabled"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "button",
     __spreadProps(__spreadValues({
       type: "button",
@@ -1531,7 +1981,7 @@ function DropdownItem(_a) {
   ) });
 }
 function DropdownRadioGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.RadioGroup, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownPrimitive.RadioGroup, __spreadValues({}, props));
 }
 function DropdownRadioItem(_a) {
   var _b = _a, {
@@ -1541,26 +1991,26 @@ function DropdownRadioItem(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     DropdownPrimitive.RadioItem,
     __spreadProps(__spreadValues({
       className: cn("ph-dropdown-item ph-dropdown-radio-item", className)
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ph-dropdown-item-indicator", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconCheck, { className: "h-3.5 w-3.5" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ph-dropdown-item-indicator", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconCheck, { className: "h-3.5 w-3.5" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children })
       ]
     })
   );
 }
 
 // src/components/ui/Input.tsx
-var import_react10 = require("react");
-var import_iconoir_react = require("iconoir-react");
+var import_react12 = require("react");
+var import_iconoir_react2 = require("iconoir-react");
 
 // src/components/ui/FormField.tsx
-var import_react9 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function FormField(_a) {
   var _b = _a, {
     controlId,
@@ -1583,7 +2033,7 @@ function FormField(_a) {
     "children",
     "className"
   ]);
-  const generatedId = (0, import_react9.useId)();
+  const generatedId = (0, import_react11.useId)();
   const id = controlId != null ? controlId : generatedId;
   const descriptionId = helperText && !error ? `${id}-description` : void 0;
   const errorId = error ? `${id}-error` : void 0;
@@ -1593,26 +2043,26 @@ function FormField(_a) {
     "aria-errormessage": errorId,
     "aria-invalid": error ? true : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-field", className) }, props), { children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-field", className) }, props), { children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "label",
       {
         htmlFor: id,
         className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
         children: [
           label,
-          required ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
+          required ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
         ]
       }
     ) : null,
     typeof children === "function" ? children(controlProps) : children,
-    descriptionId ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { id: descriptionId, className: "mt-1 text-xs text-ph-subtle", children: helperText }) : null,
-    errorId ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { id: errorId, className: "mt-1 text-xs font-medium text-ph-danger", children: error }) : null
+    descriptionId ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: descriptionId, className: "mt-1 text-xs text-ph-subtle", children: helperText }) : null,
+    errorId ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: errorId, className: "mt-1 text-xs font-medium text-ph-danger", children: error }) : null
   ] }));
 }
 
 // src/components/ui/Input.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var sizeMap2 = {
   sm: "ph-input-sm",
   md: "",
@@ -1622,7 +2072,7 @@ function joinIds(...ids) {
   const value = ids.filter(Boolean).join(" ");
   return value || void 0;
 }
-var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
+var Input = (0, import_react12.forwardRef)(function Input2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1652,12 +2102,12 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
     "required",
     "aria-describedby"
   ]);
-  const autoId = (0, import_react10.useId)();
+  const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
   const isPassword = type === "password";
-  const [revealed, setRevealed] = (0, import_react10.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const [revealed, setRevealed] = (0, import_react12.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     FormField,
     {
       controlId: id,
@@ -1668,8 +2118,8 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
       required,
       disabled,
       className: wrapperClassName,
-      children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "input",
           __spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
             ref,
@@ -1688,7 +2138,7 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
             )
           }), props)
         ),
-        isPassword ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        isPassword ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -1696,8 +2146,8 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
             "aria-label": revealed ? "Hide password" : "Show password",
             "aria-pressed": revealed,
             disabled,
-            className: "absolute inset-y-0 right-0 flex w-10 items-center justify-center rounded-r-[var(--ph-radius-control)] text-ph-mutedtext transition-colors hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
-            children: revealed ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_iconoir_react.EyeClosed, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_iconoir_react.Eye, { className: "h-4 w-4", "aria-hidden": true })
+            className: "ph-field-icon-button",
+            children: revealed ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_iconoir_react2.EyeClosed, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_iconoir_react2.Eye, { className: "h-4 w-4", "aria-hidden": true })
           }
         ) : null
       ] })
@@ -1705,7 +2155,7 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
   );
 });
 Input.displayName = "Input";
-var Select = (0, import_react10.forwardRef)(function Select2(_a, ref) {
+var Select = (0, import_react12.forwardRef)(function Select2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1733,10 +2183,10 @@ var Select = (0, import_react10.forwardRef)(function Select2(_a, ref) {
     "required",
     "aria-describedby"
   ]);
-  const autoId = (0, import_react10.useId)();
+  const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "select",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
       ref,
@@ -1756,7 +2206,7 @@ var Select = (0, import_react10.forwardRef)(function Select2(_a, ref) {
   ) });
 });
 Select.displayName = "Select";
-var Textarea = (0, import_react10.forwardRef)(function Textarea2(_a, ref) {
+var Textarea = (0, import_react12.forwardRef)(function Textarea2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1782,10 +2232,10 @@ var Textarea = (0, import_react10.forwardRef)(function Textarea2(_a, ref) {
     "required",
     "aria-describedby"
   ]);
-  const autoId = (0, import_react10.useId)();
+  const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "textarea",
     __spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
       ref,
@@ -1803,7 +2253,7 @@ var Textarea = (0, import_react10.forwardRef)(function Textarea2(_a, ref) {
   ) });
 });
 Textarea.displayName = "Textarea";
-var Checkbox = (0, import_react10.forwardRef)(function Checkbox2(_a, ref) {
+var Checkbox = (0, import_react12.forwardRef)(function Checkbox2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1823,14 +2273,14 @@ var Checkbox = (0, import_react10.forwardRef)(function Checkbox2(_a, ref) {
     "disabled",
     "aria-describedby"
   ]);
-  const autoId = (0, import_react10.useId)();
+  const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
   const descriptionId = helperText && !hasError ? `${id}-description` : void 0;
   const errorId = error ? `${id}-error` : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("ph-control-row", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ph-checkbox-wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("ph-control-row", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ph-checkbox-wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "input",
         __spreadValues({
           ref,
@@ -1848,17 +2298,17 @@ var Checkbox = (0, import_react10.forwardRef)(function Checkbox2(_a, ref) {
           )
         }, props)
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconCheck, { className: "ph-checkbox-icon", "aria-hidden": true })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconCheck, { className: "ph-checkbox-icon", "aria-hidden": true })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ph-control-copy", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
-      descriptionId ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { id: descriptionId, className: "text-xs text-ph-subtle", children: helperText }) : null,
-      errorId ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { id: errorId, className: "text-xs font-medium text-ph-danger", children: error }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ph-control-copy", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
+      descriptionId ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { id: descriptionId, className: "text-xs text-ph-subtle", children: helperText }) : null,
+      errorId ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { id: errorId, className: "text-xs font-medium text-ph-danger", children: error }) : null
     ] })
   ] });
 });
 Checkbox.displayName = "Checkbox";
-var Radio = (0, import_react10.forwardRef)(function Radio2(_a, ref) {
+var Radio = (0, import_react12.forwardRef)(function Radio2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1872,10 +2322,10 @@ var Radio = (0, import_react10.forwardRef)(function Radio2(_a, ref) {
     "wrapperClassName",
     "disabled"
   ]);
-  const autoId = (0, import_react10.useId)();
+  const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "input",
       __spreadValues({
         ref,
@@ -1885,11 +2335,11 @@ var Radio = (0, import_react10.forwardRef)(function Radio2(_a, ref) {
         className: cn("ph-radio", disabled && "cursor-not-allowed", className)
       }, props)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
   ] });
 });
 Radio.displayName = "Radio";
-var Toggle = (0, import_react10.forwardRef)(function Toggle2(_a, ref) {
+var Toggle = (0, import_react12.forwardRef)(function Toggle2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1903,11 +2353,11 @@ var Toggle = (0, import_react10.forwardRef)(function Toggle2(_a, ref) {
     "wrapperClassName",
     "disabled"
   ]);
-  const autoId = (0, import_react10.useId)();
+  const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: disabled ? "opacity-60" : void 0, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: disabled ? "opacity-60" : void 0, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "input",
       __spreadValues({
         ref,
@@ -1921,7 +2371,7 @@ var Toggle = (0, import_react10.forwardRef)(function Toggle2(_a, ref) {
   ] });
 });
 Toggle.displayName = "Toggle";
-var Range = (0, import_react10.forwardRef)(function Range2(_a, ref) {
+var Range = (0, import_react12.forwardRef)(function Range2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1939,20 +2389,20 @@ var Range = (0, import_react10.forwardRef)(function Range2(_a, ref) {
     "wrapperClassName",
     "className"
   ]);
-  const autoId = (0, import_react10.useId)();
+  const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", __spreadValues({ ref, id, type: "range", className: cn("ph-range", className) }, props)),
-    (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: minLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: valueLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: maxLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", __spreadValues({ ref, id, type: "range", className: cn("ph-range", className) }, props)),
+    (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: minLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: valueLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: maxLabel })
     ] })
   ] });
 });
 Range.displayName = "Range";
-var FileUpload = (0, import_react10.forwardRef)(function FileUpload2(_a, ref) {
+var FileUpload = (0, import_react12.forwardRef)(function FileUpload2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1966,12 +2416,12 @@ var FileUpload = (0, import_react10.forwardRef)(function FileUpload2(_a, ref) {
     "wrapperClassName",
     "className"
   ]);
-  const autoId = (0, import_react10.useId)();
+  const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { htmlFor: id, className: "ph-file-upload", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", __spreadValues({ ref, id, type: "file", className: cn("sr-only", className) }, props)),
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { htmlFor: id, className: "ph-file-upload", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", __spreadValues({ ref, id, type: "file", className: cn("sr-only", className) }, props)),
       prompt
     ] })
   ] });
@@ -1980,8 +2430,8 @@ FileUpload.displayName = "FileUpload";
 
 // src/components/ui/Modal.tsx
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
-var import_react11 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var sizeMap3 = {
   sm: "max-w-sm",
   md: "max-w-lg",
@@ -2011,16 +2461,16 @@ function Modal({
   "aria-labelledby": ariaLabelledBy
 }) {
   const canDismiss = Boolean(onClose);
-  const restoreFocusRef = (0, import_react11.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const restoreFocusRef = (0, import_react13.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Dialog.Root,
     {
       open,
       onOpenChange: (nextOpen) => {
         if (!nextOpen) onClose == null ? void 0 : onClose();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Dialog.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Dialog.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Dialog.Overlay,
           {
             "data-test": dataTest,
@@ -2028,7 +2478,7 @@ function Modal({
             style: zIndex ? { zIndex } : void 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Dialog.Content,
           __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
             id,
@@ -2051,28 +2501,28 @@ function Modal({
             onPointerDownOutside: (event) => {
               if (!canDismiss || !closeOnOutsideClick) event.preventDefault();
             },
-            children: customLayout ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
+            children: customLayout ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
               children
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-              title ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
-              title || description || showCloseButton && canDismiss ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: "ph-modal-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "min-w-0", children: [
-                  title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Dialog.Title, { className: "text-lg font-bold text-ph-ink", children: title }) : null,
-                  description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Dialog.Description, { className: "mt-1 text-sm text-ph-subtle", children: description }) : null
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+              title ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
+              title || description || showCloseButton && canDismiss ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("header", { className: "ph-modal-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "min-w-0", children: [
+                  title ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Title, { className: "text-lg font-bold text-ph-ink", children: title }) : null,
+                  description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Description, { className: "mt-1 text-sm text-ph-subtle", children: description }) : null
                 ] }),
-                showCloseButton && canDismiss ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                showCloseButton && canDismiss ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "button",
                   {
                     type: "button",
                     className: "ph-modal-close",
                     "aria-label": "Close dialog",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconClose, { className: "h-5 w-5", "aria-hidden": true })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconClose, { className: "h-5 w-5", "aria-hidden": true })
                   }
                 ) }) : null
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cn("ph-modal-body", bodyClassName), children }),
-              footer ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ph-modal-footer", children: footer }) : null
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("ph-modal-body", bodyClassName), children }),
+              footer ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "ph-modal-footer", children: footer }) : null
             ] })
           })
         )
@@ -2082,19 +2532,19 @@ function Modal({
 }
 
 // src/components/ui/Panel.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Panel(_a) {
   var _b = _a, { title, description, children, className } = _b, props = __objRest(_b, ["title", "description", "children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-ph-subtle", children: description }),
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-lg font-semibold tracking-tight text-ph-ink", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-ph-subtle", children: description }),
     children
   ] }));
 }
 
 // src/components/ui/SearchInput.tsx
-var import_react12 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function SearchInput(_a) {
   var _b = _a, {
     id: idProp,
@@ -2115,12 +2565,12 @@ function SearchInput(_a) {
     "wrapperClassName",
     "placeholder"
   ]);
-  const autoId = (0, import_react12.useId)();
+  const autoId = (0, import_react14.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
-      shortcut != null ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", children: [
+      shortcut != null ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "span",
         {
           className: "ph-shortcut pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-xs",
@@ -2128,7 +2578,7 @@ function SearchInput(_a) {
           children: shortcut
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         __spreadValues({
           id,
@@ -2162,12 +2612,12 @@ function SearchGroup(_a) {
     "wrapperClassName",
     "className"
   ]);
-  const autoId = (0, import_react12.useId)();
+  const autoId = (0, import_react14.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         __spreadValues({
           id,
@@ -2176,12 +2626,12 @@ function SearchGroup(_a) {
           className: cn("ph-input ph-input-group-field min-w-0 flex-1", className)
         }, props)
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         Button,
         {
           type: "submit",
           variant: "primary",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconSearch, { className: "h-4 w-4", "aria-hidden": true }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconSearch, { className: "h-4 w-4", "aria-hidden": true }),
           className: "ph-search-group__submit",
           "aria-label": submitLabel
         }
@@ -2191,7 +2641,7 @@ function SearchGroup(_a) {
 }
 
 // src/components/ui/Table.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function Table({
   data,
   columns,
@@ -2201,27 +2651,47 @@ function Table({
   getRowStyle,
   getRowKey,
   className,
-  caption
+  tableClassName,
+  variant = "default",
+  caption,
+  emptyState = "No data available."
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
-      className: cn("ph-table-wrap", compact && "ph-table-compact", className),
+      className: cn(
+        variant === "report" ? "ph-table-report-wrap" : "ph-table-wrap",
+        compact && "ph-table-compact",
+        className
+      ),
+      role: "region",
+      "aria-label": caption != null ? caption : "Data table",
       tabIndex: 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
-        caption && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("caption", { className: "sr-only", children: caption }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("th", { className: col.className, children: col.header }, col.key)) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { children: data.map((row, i) => {
-          var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: col.className, children: col.cell(row) }, col.key)) }, (_a = getRowKey == null ? void 0 : getRowKey(row, i)) != null ? _a : i);
-        }) })
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "table",
+        {
+          className: cn(
+            variant === "report" ? "ph-table-report" : "ph-table",
+            zebra && "ph-table-zebra",
+            ribbon && "ph-table--ribbon",
+            tableClassName
+          ),
+          children: [
+            caption && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("caption", { className: "sr-only", children: caption }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("th", { scope: "col", className: col.className, children: col.header }, col.key)) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { children: data.length === 0 ? emptyState === null ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { colSpan: columns.length, className: "ph-table-empty", children: emptyState }) }) : data.map((row, i) => {
+              var _a;
+              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: col.className, children: col.cell(row) }, col.key)) }, (_a = getRowKey == null ? void 0 : getRowKey(row, i)) != null ? _a : i);
+            }) })
+          ]
+        }
+      )
     }
   );
 }
 
 // src/components/ui/Stat.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var toneMap = {
   default: "text-ph-ink",
   brand: "text-ph-brand",
@@ -2238,16 +2708,16 @@ var statMap = {
 };
 function Stat(_a) {
   var _b = _a, { icon, label, value, footer, tone = "default", className } = _b, props = __objRest(_b, ["icon", "label", "value", "footer", "tone", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs text-ph-subtle", children: footer })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-xs text-ph-subtle", children: footer })
   ] }));
 }
 
 // src/components/ui/ThemeDomSync.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // src/themes/registry.ts
 var DEFAULT_THEME_ID = "hedgehog-light";
@@ -2396,25 +2866,25 @@ function readStoredTheme() {
 
 // src/components/ui/ThemeDomSync.tsx
 function ThemeDomSync() {
-  (0, import_react13.useLayoutEffect)(() => {
+  (0, import_react15.useLayoutEffect)(() => {
     persistTheme(readStoredTheme());
   }, []);
   return null;
 }
 
 // src/components/ui/ThemeSwitcher.tsx
-var import_react14 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ThemeSwitcher({ className }) {
-  const [themeId, setThemeId] = (0, import_react14.useState)(DEFAULT_THEME_ID);
-  (0, import_react14.useEffect)(() => {
+  const [themeId, setThemeId] = (0, import_react16.useState)(DEFAULT_THEME_ID);
+  (0, import_react16.useEffect)(() => {
     const id = readStoredTheme();
     persistTheme(id);
     setThemeId(id);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm", children: "Theme" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm", children: "Theme" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "select",
       {
         className: "ph-select max-w-[11rem] !min-h-[2rem] py-1 pl-2.5 pr-8 text-xs sm:max-w-[14rem] sm:text-sm",
@@ -2425,23 +2895,23 @@ function ThemeSwitcher({ className }) {
           persistTheme(next);
           setThemeId(next);
         },
-        children: THEME_GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("optgroup", { label: group, children: THEMES.filter((theme) => theme.group === group).map((theme) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: theme.id, children: theme.name }, theme.id)) }, group))
+        children: THEME_GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("optgroup", { label: group, children: THEMES.filter((theme) => theme.group === group).map((theme) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: theme.id, children: theme.name }, theme.id)) }, group))
       }
     )
   ] });
 }
 
 // src/components/ui/Accordion.tsx
-var import_react15 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Accordion({
   items,
   allowMultiple = false,
   defaultOpen = [],
   className
 }) {
-  const [openItems, setOpenItems] = (0, import_react15.useState)(new Set(defaultOpen));
-  const idPrefix = (0, import_react15.useId)();
+  const [openItems, setOpenItems] = (0, import_react17.useState)(new Set(defaultOpen));
+  const idPrefix = (0, import_react17.useId)();
   const toggleItem = (id) => {
     setOpenItems((prev) => {
       const next = new Set(prev);
@@ -2456,28 +2926,25 @@ function Accordion({
       return next;
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
-      className: cn(
-        "divide-y divide-ph-border rounded-xl border border-ph-border bg-ph-surface",
-        className
-      ),
+      className: cn("ph-accordion", className),
       children: items.map((item) => {
         const isOpen = openItems.has(item.id);
         const contentId = `accordion-${idPrefix}-${item.id}-content`;
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ph-accordion__item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "button",
             {
               type: "button",
               onClick: () => toggleItem(item.id),
               "aria-expanded": isOpen,
               "aria-controls": contentId,
-              className: "flex w-full items-center justify-between px-5 py-4 text-left transition hover:bg-ph-muted",
+              className: "ph-accordion__trigger",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "font-semibold text-ph-ink", children: item.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-semibold text-ph-ink", children: item.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   IconChevronDown,
                   {
                     className: cn(
@@ -2489,7 +2956,7 @@ function Accordion({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               id: contentId,
@@ -2498,10 +2965,10 @@ function Accordion({
                 if (node) node.toggleAttribute("inert", !isOpen);
               },
               className: cn(
-                "grid transition-all duration-200",
+                "grid transition-[grid-template-rows] duration-200",
                 isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
             }
           )
         ] }, item.id);
@@ -2511,27 +2978,68 @@ function Accordion({
 }
 
 // src/components/ui/SegmentedControl.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function SegmentedControl({ options, value, onChange, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var import_react18 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const itemRefs = (0, import_react18.useRef)([]);
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const handleKeyDown = (event, index) => {
+    var _a;
+    let nextIndex;
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        nextIndex = (index - 1 + options.length) % options.length;
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        nextIndex = (index + 1) % options.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = options.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const nextOption = options[nextIndex];
+    if (!nextOption) return;
+    onChange(nextOption.value);
+    (_a = itemRefs.current[nextIndex]) == null ? void 0 : _a.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
-      className: cn(
-        "inline-flex rounded-lg bg-ph-muted p-1",
-        className
-      ),
-      children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      className: cn("ph-segmented-control", className),
+      children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         "button",
         {
+          ref: (node) => {
+            itemRefs.current[index] = node;
+          },
           type: "button",
-          "aria-pressed": value === option.value,
+          role: "radio",
+          "aria-checked": value === option.value,
+          tabIndex: selectedIndex === index || selectedIndex < 0 && index === 0 ? 0 : -1,
           onClick: () => onChange(option.value),
+          onKeyDown: (event) => handleKeyDown(event, index),
           className: cn(
-            "relative flex min-h-11 items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all sm:min-h-9",
-            value === option.value ? "bg-ph-surface text-ph-ink shadow-ph" : "text-ph-subtle hover:text-ph-ink"
+            "ph-segmented-control__item",
+            value === option.value && "ph-segmented-control__item--selected"
           ),
           children: [
-            option.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "h-4 w-4", children: option.icon }),
+            option.icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-4 w-4", "aria-hidden": true, children: option.icon }),
             option.label
           ]
         },
@@ -2542,9 +3050,9 @@ function SegmentedControl({ options, value, onChange, className }) {
 }
 
 // src/components/ui/CommandPalette.tsx
-var import_react16 = require("react");
+var import_react19 = require("react");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function CommandPalette({
   items,
   isOpen,
@@ -2556,27 +3064,27 @@ function CommandPalette({
   inputId,
   inputDataTest
 }) {
-  const [query, setQuery] = (0, import_react16.useState)("");
-  const [selectedIndex, setSelectedIndex] = (0, import_react16.useState)(0);
-  const inputRef = (0, import_react16.useRef)(null);
-  const listboxRef = (0, import_react16.useRef)(null);
-  const restoreFocusRef = (0, import_react16.useRef)(null);
-  const generatedId = (0, import_react16.useId)();
+  const [query, setQuery] = (0, import_react19.useState)("");
+  const [selectedIndex, setSelectedIndex] = (0, import_react19.useState)(0);
+  const inputRef = (0, import_react19.useRef)(null);
+  const listboxRef = (0, import_react19.useRef)(null);
+  const restoreFocusRef = (0, import_react19.useRef)(null);
+  const generatedId = (0, import_react19.useId)();
   const listboxId = `${id != null ? id : `command-palette-${generatedId}`}-listbox`;
   const filtered = items.filter(
     (item) => item.label.toLowerCase().includes(query.toLowerCase())
   );
   const activeIndex = filtered.length ? Math.min(selectedIndex, filtered.length - 1) : 0;
   const activeItem = filtered[activeIndex];
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isOpen) return;
     setQuery("");
     setSelectedIndex(0);
   }, [isOpen]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setSelectedIndex((current) => Math.min(current, Math.max(filtered.length - 1, 0)));
   }, [filtered.length]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     var _a, _b;
     if (!isOpen || !activeItem) return;
     (_b = (_a = listboxRef.current) == null ? void 0 : _a.querySelectorAll('[role="option"]')[activeIndex]) == null ? void 0 : _b.scrollIntoView({ block: "nearest" });
@@ -2605,29 +3113,26 @@ function CommandPalette({
         return;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Dialog2.Root,
     {
       open: isOpen,
       onOpenChange: (nextOpen) => {
         if (!nextOpen) onClose();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Dialog2.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Dialog2.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Dialog2.Overlay,
           {
             id,
             "data-test": dataTest,
-            className: "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+            className: "ph-command-palette__overlay"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Dialog2.Content,
           {
-            className: cn(
-              "fixed left-1/2 top-[20vh] z-50 w-full max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
-              className
-            ),
+            className: cn("ph-command-palette", className),
             onOpenAutoFocus: (event) => {
               var _a;
               restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -2640,10 +3145,10 @@ function CommandPalette({
               (_a = restoreFocusRef.current) == null ? void 0 : _a.focus();
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Dialog2.Title, { className: "sr-only", children: "Command palette" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Dialog2.Title, { className: "sr-only", children: "Command palette" }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ph-command-palette__search", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "input",
                   {
                     ref: inputRef,
@@ -2666,9 +3171,9 @@ function CommandPalette({
                     className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("kbd", { "aria-hidden": "true", className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("kbd", { "aria-hidden": "true", className: "ph-keycap", children: "ESC" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: listboxRef, id: listboxId, role: "listbox", "aria-label": "Commands", className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { role: "status", className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: listboxRef, id: listboxId, role: "listbox", "aria-label": "Commands", className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { role: "status", className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
                 "div",
                 {
                   id: `command-${item.id}`,
@@ -2681,13 +3186,13 @@ function CommandPalette({
                   },
                   onMouseEnter: () => setSelectedIndex(index),
                   className: cn(
-                    "flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
-                    index === activeIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
+                    "ph-command-palette__option",
+                    index === activeIndex ? "ph-command-palette__option--selected" : "text-ph-subtle"
                   ),
                   children: [
-                    item.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true", className: "h-5 w-5", children: item.icon }),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex-1", children: item.label }),
-                    item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("kbd", { "aria-hidden": "true", className: "rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext", children: item.shortcut })
+                    item.icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", className: "h-5 w-5", children: item.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "flex-1", children: item.label }),
+                    item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("kbd", { "aria-hidden": "true", className: "ph-keycap text-ph-mutedtext", children: item.shortcut })
                   ]
                 },
                 item.id
@@ -2701,8 +3206,8 @@ function CommandPalette({
 }
 
 // src/components/ui/Calendar.tsx
-var import_react17 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var monthNames = [
   "January",
   "February",
@@ -2759,19 +3264,19 @@ function dateLabel(date) {
   return `${fullWeekDays[date.getDay()]}, ${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
 }
 function Calendar({ value, onChange, className }) {
-  const [currentMonth, setCurrentMonth] = (0, import_react17.useState)(() => startOfMonth(value != null ? value : /* @__PURE__ */ new Date()));
-  const [focusedDate, setFocusedDate] = (0, import_react17.useState)(() => startOfDay(value != null ? value : /* @__PURE__ */ new Date()));
-  const gridRef = (0, import_react17.useRef)(null);
-  const shouldFocusDateRef = (0, import_react17.useRef)(false);
-  const monthLabelId = (0, import_react17.useId)();
+  const [currentMonth, setCurrentMonth] = (0, import_react20.useState)(() => startOfMonth(value != null ? value : /* @__PURE__ */ new Date()));
+  const [focusedDate, setFocusedDate] = (0, import_react20.useState)(() => startOfDay(value != null ? value : /* @__PURE__ */ new Date()));
+  const gridRef = (0, import_react20.useRef)(null);
+  const shouldFocusDateRef = (0, import_react20.useRef)(false);
+  const monthLabelId = (0, import_react20.useId)();
   const today = startOfDay(/* @__PURE__ */ new Date());
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!value) return;
     const nextDate = startOfDay(value);
     setCurrentMonth(startOfMonth(nextDate));
     setFocusedDate(nextDate);
   }, [value]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     var _a, _b;
     if (!shouldFocusDateRef.current) return;
     (_b = (_a = gridRef.current) == null ? void 0 : _a.querySelector(`[data-date="${dateKey(focusedDate)}"]`)) == null ? void 0 : _b.focus();
@@ -2840,36 +3345,36 @@ function Calendar({ value, onChange, className }) {
   while (days.length < 42) {
     days.push(null);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("w-[280px] rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("ph-calendar w-[280px] p-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "button",
         {
           type: "button",
           onClick: () => changeMonth(-1),
           "aria-label": "Previous month",
-          className: "rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink",
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
+          className: "ph-calendar__nav",
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { id: monthLabelId, "aria-live": "polite", className: "text-sm font-semibold text-ph-ink", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { id: monthLabelId, "aria-live": "polite", className: "text-sm font-semibold text-ph-ink", children: [
         monthNames[month],
         " ",
         year
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "button",
         {
           type: "button",
           onClick: () => changeMonth(1),
           "aria-label": "Next month",
-          className: "rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink",
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconChevronRight, { className: "h-5 w-5", "aria-hidden": true })
+          className: "ph-calendar__nav",
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconChevronRight, { className: "h-5 w-5", "aria-hidden": true })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: gridRef, role: "grid", "aria-labelledby": monthLabelId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { role: "row", className: "grid grid-cols-7 gap-1", children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref: gridRef, role: "grid", "aria-labelledby": monthLabelId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "row", className: "grid grid-cols-7 gap-1", children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "div",
         {
           role: "columnheader",
@@ -2882,14 +3387,14 @@ function Calendar({ value, onChange, className }) {
       Array.from({ length: 6 }, (_, week) => {
         const weekDates = days.slice(week * 7, week * 7 + 7);
         if (weekDates.length === 0 || weekDates.every((date) => !date)) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { role: "row", className: "grid grid-cols-7 gap-1", children: weekDates.map(
-          (date, day) => date ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "row", className: "grid grid-cols-7 gap-1", children: weekDates.map(
+          (date, day) => date ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "div",
             {
               role: "gridcell",
               "aria-selected": value ? isSameDay(value, date) : false,
               className: "aspect-square",
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2900,15 +3405,15 @@ function Calendar({ value, onChange, className }) {
                   onClick: () => handleSelect(date),
                   onKeyDown: (event) => handleDayKeyDown(event, date),
                   className: cn(
-                    "flex h-full w-full items-center justify-center rounded-lg text-sm transition-colors",
-                    value && isSameDay(value, date) ? "bg-ph-brand font-semibold text-[var(--ph-on-accent)] shadow-ph" : isSameDay(today, date) ? "bg-ph-muted font-semibold text-ph-brand ring-1 ring-ph-brand/30" : "text-ph-ink hover:bg-ph-muted"
+                    "ph-calendar__day",
+                    value && isSameDay(value, date) ? "ph-calendar__day--selected" : isSameDay(today, date) ? "ph-calendar__day--today" : void 0
                   ),
                   children: date.getDate()
                 }
               )
             },
             dateKey(date)
-          ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { role: "gridcell", "aria-hidden": "true", className: "aspect-square" }, `empty-${week}-${day}`)
+          ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "gridcell", "aria-hidden": "true", className: "aspect-square" }, `empty-${week}-${day}`)
         ) }, week);
       })
     ] })
@@ -2916,15 +3421,15 @@ function Calendar({ value, onChange, className }) {
 }
 
 // src/components/ui/Tooltip.tsx
-var import_react18 = require("react");
+var import_react21 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var TooltipDelayContext = (0, import_react18.createContext)(0);
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var TooltipDelayContext = (0, import_react21.createContext)(0);
 function TooltipProvider({
   children,
   delayDuration = 0
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipDelayContext.Provider, { value: delayDuration, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipDelayContext.Provider, { value: delayDuration, children });
 }
 function tooltipPosition(trigger, content, side, align, offset, collisionPadding) {
   const horizontal = align === "start" ? trigger.left : align === "end" ? trigger.right : trigger.left + trigger.width / 2;
@@ -2951,13 +3456,13 @@ function Tooltip({
   delayDuration,
   disableHoverableContent = false
 }) {
-  const providerDelay = (0, import_react18.useContext)(TooltipDelayContext);
-  const generatedId = (0, import_react18.useId)().replace(/:/g, "");
-  const triggerRef = (0, import_react18.useRef)(null);
-  const contentRef = (0, import_react18.useRef)(null);
-  const timerRef = (0, import_react18.useRef)(null);
-  const [internalOpen, setInternalOpen] = (0, import_react18.useState)(defaultOpen);
-  const [position, setPosition] = (0, import_react18.useState)(null);
+  const providerDelay = (0, import_react21.useContext)(TooltipDelayContext);
+  const generatedId = (0, import_react21.useId)().replace(/:/g, "");
+  const triggerRef = (0, import_react21.useRef)(null);
+  const contentRef = (0, import_react21.useRef)(null);
+  const timerRef = (0, import_react21.useRef)(null);
+  const [internalOpen, setInternalOpen] = (0, import_react21.useState)(defaultOpen);
+  const [position, setPosition] = (0, import_react21.useState)(null);
   const isOpen = open != null ? open : internalOpen;
   const triggerId = children.props.id;
   const tooltipId = triggerId ? `${triggerId}-tooltip` : `ph-tooltip-${generatedId}`;
@@ -2969,7 +3474,7 @@ function Tooltip({
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = null;
   }
-  const updatePosition = (0, import_react18.useCallback)(() => {
+  const updatePosition = (0, import_react21.useCallback)(() => {
     if (!triggerRef.current || !contentRef.current) return;
     setPosition(
       tooltipPosition(
@@ -3001,10 +3506,10 @@ function Tooltip({
     clearTimer();
     timerRef.current = setTimeout(() => setOpen(false), 100);
   }
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     if (isOpen) updatePosition();
   }, [isOpen, updatePosition]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!isOpen) return;
     const reposition = () => updatePosition();
     window.addEventListener("resize", reposition);
@@ -3014,11 +3519,11 @@ function Tooltip({
       window.removeEventListener("scroll", reposition, true);
     };
   }, [isOpen, updatePosition]);
-  (0, import_react18.useEffect)(() => () => clearTimer(), []);
+  (0, import_react21.useEffect)(() => () => clearTimer(), []);
   const describedBy = [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ");
-  const trigger = (0, import_react18.cloneElement)(children, { "aria-describedby": describedBy });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  const trigger = (0, import_react21.cloneElement)(children, { "aria-describedby": describedBy });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "span",
       {
         ref: triggerRef,
@@ -3034,12 +3539,12 @@ function Tooltip({
       }
     ),
     isOpen && typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "span",
         {
           style: __spreadProps(__spreadValues({ position: "fixed" }, position), { visibility: position ? void 0 : "hidden" }),
           className: "pointer-events-none z-[200]",
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "span",
             {
               ref: contentRef,
@@ -3064,27 +3569,27 @@ function Tooltip({
 }
 
 // src/components/ui/EmptyState.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function EmptyState({ icon, title, description, action, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       className: cn(
-        "flex flex-col items-center justify-center rounded-xl border border-dashed border-ph-border bg-ph-muted/50 px-8 py-16 text-center",
+        "ph-empty-state",
         className
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "text-base font-semibold text-ph-ink", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
-        action && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mt-4", children: action })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ph-empty-state__icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "text-base font-semibold text-ph-ink", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mt-4", children: action })
       ]
     }
   );
 }
 
 // src/components/ui/FilterChips.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function FilterChips({
   chips,
   onToggle,
@@ -3092,20 +3597,20 @@ function FilterChips({
   className,
   "aria-label": ariaLabel = "Applied filters"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("ph-filter-chips", className), role: "group", "aria-label": ariaLabel, children: chips.map((chip) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("ph-filter-chips", className), role: "group", "aria-label": ariaLabel, children: chips.map((chip) => {
     var _a;
     const label = (_a = chip.removeLabel) != null ? _a : getChipText(chip);
-    const content = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ph-filter-chip__label", children: chip.label }),
-      chip.value != null ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ph-filter-chip__value", children: chip.value }) : null
+    const content = /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ph-filter-chip__label", children: chip.label }),
+      chip.value != null ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ph-filter-chip__value", children: chip.value }) : null
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       "span",
       {
         className: cn("ph-filter-chip", chip.active && "ph-filter-chip--active"),
         "data-state": chip.active ? "on" : "off",
         children: [
-          onToggle ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          onToggle ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "button",
             {
               type: "button",
@@ -3114,15 +3619,15 @@ function FilterChips({
               onClick: () => onToggle(chip.id),
               children: content
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ph-filter-chip__main", children: content }),
-          chip.active && onRemove ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ph-filter-chip__main", children: content }),
+          chip.active && onRemove ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "button",
             {
               type: "button",
               className: "ph-filter-chip__remove",
               "aria-label": `Remove ${label} filter`,
               onClick: () => onRemove(chip.id),
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconClose, { className: "h-3 w-3", "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconClose, { className: "h-3 w-3", "aria-hidden": true })
             }
           ) : null
         ]
@@ -3138,7 +3643,7 @@ function getChipText(chip) {
 }
 
 // src/components/ui/FilterBar.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function FilterBar(_a) {
   var _b = _a, {
     children,
@@ -3155,12 +3660,12 @@ function FilterBar(_a) {
     "resultCount",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-bar", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ph-filter-bar__controls", role: "group", "aria-label": label, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-bar", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ph-filter-bar__controls", role: "group", "aria-label": label, children: [
       children,
-      onClear ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: "ph-filter-bar__clear", onClick: onClear, children: clearLabel }) : null
+      onClear ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", className: "ph-filter-bar__clear", onClick: onClear, children: clearLabel }) : null
     ] }),
-    resultCount != null ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("output", { className: "ph-filter-bar__results", "aria-live": "polite", children: resultCount }) : null
+    resultCount != null ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("output", { className: "ph-filter-bar__results", "aria-live": "polite", children: resultCount }) : null
   ] }));
 }
 function FilterMenu({
@@ -3177,19 +3682,19 @@ function FilterMenu({
   const selected = options.find((option) => option.value === value);
   const displayValue = (_a = selected == null ? void 0 : selected.label) != null ? _a : placeholder;
   const accessibleValue = selected ? getOptionText(selected) : String(placeholder);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     DropdownMenu,
     {
       "aria-label": `${label}: ${accessibleValue}`,
       align,
       disabled,
       className,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: cn("ph-filter-menu-trigger", selected && "ph-filter-menu-trigger--active"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconTuning, { className: "h-3.5 w-3.5", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ph-filter-menu-trigger__value", children: displayValue })
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: cn("ph-filter-menu-trigger", selected && "ph-filter-menu-trigger--active"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconTuning, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ph-filter-menu-trigger__value", children: displayValue })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         DropdownRadioItem,
         {
           value: option.value,
@@ -3213,25 +3718,25 @@ function SortMenu({
   className
 }) {
   const selected = options.find((option) => option.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     DropdownMenu,
     {
       "aria-label": `${label}: ${selected ? getOptionText(selected) : "Choose sort order"}`,
       align,
       disabled,
       className,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "ph-filter-menu-trigger ph-sort-menu-trigger", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "ph-filter-menu-trigger ph-sort-menu-trigger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           IconArrowDown,
           {
             className: cn("h-3.5 w-3.5", direction === "ascending" && "rotate-180"),
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
-        selected ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ph-filter-menu-trigger__value", children: selected.label }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        selected ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ph-filter-menu-trigger__value", children: selected.label }) : null
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         DropdownRadioItem,
         {
           value: option.value,
@@ -3251,7 +3756,7 @@ function getOptionText(option) {
 }
 
 // src/components/ui/FilterControls.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function FilterControls(_a) {
   var _b = _a, {
     children,
@@ -3267,71 +3772,73 @@ function FilterControls(_a) {
     "className"
   ]);
   const hasChips = Boolean(chipsProps == null ? void 0 : chipsProps.chips.length);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-controls", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FilterBar, __spreadProps(__spreadValues({}, barProps), { children })),
-    hasChips && chipsProps ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FilterChips, __spreadValues({}, chipsProps)) : emptyState != null ? emptyState : null
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-controls", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FilterBar, __spreadProps(__spreadValues({}, barProps), { children })),
+    hasChips && chipsProps ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FilterChips, __spreadValues({}, chipsProps)) : emptyState != null ? emptyState : null
   ] }));
 }
 
 // src/components/ui/CodeBlock.tsx
-var import_react19 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function CodeBlock({ code, language = "tsx", filename, className }) {
-  const [copied, setCopied] = (0, import_react19.useState)(false);
+  const [copied, setCopied] = (0, import_react22.useState)(false);
   const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
+    try {
+      await navigator.clipboard.writeText(code);
+    } catch (e) {
+      return;
+    }
+    trackSuiteEvent("Link Copied", {
+      kind: "code",
+      copy_kind: "code_block",
+      label: filename != null ? filename : language
+    });
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
-    (filename || language) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
-        ] }),
-        filename && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ml-2 text-xs text-white/60", children: filename })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("ph-code-block", className), children: [
+    (filename || language) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xs text-white/60", children: filename != null ? filename : language }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "button",
         {
           type: "button",
           onClick: handleCopy,
-          className: "text-xs text-white/60 transition hover:text-white",
+          className: "ph-code-block__copy",
           children: copied ? "Copied!" : "Copy"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
   ] });
 }
 
 // src/components/ui/ComponentDocs.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-4 border-b border-ph-border px-4 py-3 transition hover:bg-ph-muted/60 [&::-webkit-details-marker]:hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "rounded-full border border-ph-border bg-ph-surface px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext transition group-open:bg-ph-brand group-open:text-white", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "group-open:hidden", children: "Show" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "hidden group-open:inline", children: "Hide" })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-4 border-b border-ph-border px-4 py-3 transition hover:bg-ph-muted/60 [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "rounded-full border border-ph-border bg-ph-surface px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext transition group-open:bg-ph-brand group-open:text-white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "group-open:hidden", children: "Show" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hidden group-open:inline", children: "Hide" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("table", { className: "w-full text-left text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Use" })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("table", { className: "w-full text-left text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Use" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
         var _a, _b;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-4 py-3 align-top text-ph-subtle", children: (_b = row.description) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-ph-mutedtext", children: "\u2014" }) })
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: "px-4 py-3 align-top text-ph-subtle", children: (_b = row.description) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-ph-mutedtext", children: "\u2014" }) })
         ] }, row.name);
       }) })
     ] }) })
@@ -3339,8 +3846,8 @@ function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false,
 }
 
 // src/components/ui/ShowcaseWrapper.tsx
-var import_react20 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function ShowcaseWrapper({
   id,
   title,
@@ -3352,32 +3859,32 @@ function ShowcaseWrapper({
   className
 }) {
   var _a;
-  const [showCode, setShowCode] = (0, import_react20.useState)(false);
+  const [showCode, setShowCode] = (0, import_react23.useState)(false);
   const fallbackId = (_a = titleIdMap[title]) != null ? _a : title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ph-h2-rule mb-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ph-h2-rule mb-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "button",
           {
             type: "button",
             onClick: () => setShowCode(!showCode),
             className: cn(
-              "flex h-10 w-10 items-center justify-center rounded-full border transition-all",
-              showCode ? "border-ph-brand bg-ph-brand text-[var(--ph-on-accent)] shadow-lg shadow-ph-brand/25" : "border-ph-border bg-ph-surface text-ph-subtle hover:border-ph-brand hover:text-ph-brand"
+              "ph-showcase-toggle flex h-10 w-10 items-center justify-center rounded-full border transition-colors",
+              showCode ? "border-ph-brand bg-ph-brand text-[var(--ph-on-accent)] shadow-[var(--ph-shadow-control)]" : "border-ph-border bg-ph-surface text-ph-subtle hover:border-ph-brand hover:text-ph-brand"
             ),
             title: showCode ? "Hide code" : "Show code",
             "aria-label": showCode ? "Hide code" : "Show code",
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconCodePreview, { className: "h-5 w-5", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(IconCodePreview, { className: "h-5 w-5", "aria-hidden": true })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("hr", {})
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("hr", {})
     ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
-    docs && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mb-6", children: docs }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
+    docs && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mb-6", children: docs }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
       {
         className: cn(
@@ -3385,15 +3892,15 @@ function ShowcaseWrapper({
           showCode ? "lg:grid lg:grid-cols-[1fr,minmax(360px,420px)]" : "block"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "div",
             {
               className: cn(
-                "transition-all duration-300",
+                "transition-opacity duration-200",
                 showCode ? "block opacity-100" : "hidden opacity-0 lg:hidden"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "sticky top-20", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CodeBlock, { code, filename }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "sticky top-20", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CodeBlock, { code, filename }) })
             }
           )
         ]
@@ -3442,29 +3949,29 @@ var titleIdMap = {
 };
 
 // src/components/ui/CollapsibleSection.tsx
-var import_react21 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function CollapsibleSection({
   title,
   children,
   defaultOpen = true,
   id
 }) {
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(defaultOpen);
-  const generatedId = (0, import_react21.useId)();
+  const [isOpen, setIsOpen] = (0, import_react24.useState)(defaultOpen);
+  const generatedId = (0, import_react24.useId)();
   const contentId = `${id != null ? id : generatedId}-content`;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { id, className: "scroll-mt-20", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { id, className: "scroll-mt-20", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "button",
       {
         type: "button",
         onClick: () => setIsOpen(!isOpen),
         "aria-expanded": isOpen,
         "aria-controls": contentId,
-        className: "mb-6 flex w-full items-center justify-between rounded-lg border border-ph-border bg-ph-muted px-5 py-4 text-left transition hover:bg-ph-muted/80",
+        className: "ph-collapsible-trigger mb-6",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-lg font-bold text-ph-ink", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-lg font-bold text-ph-ink", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             IconChevronDown,
             {
               className: cn(
@@ -3477,7 +3984,7 @@ function CollapsibleSection({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "div",
       {
         id: contentId,
@@ -3486,18 +3993,18 @@ function CollapsibleSection({
           if (node) node.toggleAttribute("inert", !isOpen);
         },
         className: cn(
-          "overflow-hidden transition-all duration-300",
-          isOpen ? "max-h-[50000px] opacity-100" : "max-h-0 opacity-0"
+          "grid transition-[grid-template-rows,opacity] duration-200",
+          isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
         ),
-        children
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "overflow-hidden", children })
       }
     )
   ] });
 }
 
 // src/components/ui/Typography.tsx
-var import_react22 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var toneMap2 = {
   default: "text-ph-ink",
   muted: "text-ph-mutedtext",
@@ -3519,65 +4026,66 @@ var weightMap = {
 function textClass(base, tone, weight, truncate, className) {
   return cn(base, toneMap2[tone], weight && weightMap[weight], truncate && "truncate", className);
 }
-var Display = (0, import_react22.forwardRef)(function Display2(_a, ref) {
+var Display = (0, import_react25.forwardRef)(function Display2(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h1", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-hero-title", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h1", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-hero-title", tone, weight, truncate, className), children }));
 });
-var SectionTitle = (0, import_react22.forwardRef)(function SectionTitle2(_a, ref) {
+var SectionTitle = (0, import_react25.forwardRef)(function SectionTitle2(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-section-title", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h2", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-section-title", tone, weight, truncate, className), children }));
 });
-var H1 = (0, import_react22.forwardRef)(function H12(_a, ref) {
+var H1 = (0, import_react25.forwardRef)(function H12(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h1", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h1", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-page-title font-bold", tone, weight, truncate, className), children }));
 });
-var H2 = (0, import_react22.forwardRef)(function H22(_a, ref) {
+var H2 = (0, import_react25.forwardRef)(function H22(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h2", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-2xl font-semibold tracking-tight", tone, weight, truncate, className), children }));
 });
-var H3 = (0, import_react22.forwardRef)(function H32(_a, ref) {
+var H3 = (0, import_react25.forwardRef)(function H32(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children }));
 });
-var H4 = (0, import_react22.forwardRef)(function H42(_a, ref) {
+var H4 = (0, import_react25.forwardRef)(function H42(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h4", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h4", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children }));
 });
-var H5 = (0, import_react22.forwardRef)(function H52(_a, ref) {
+var H5 = (0, import_react25.forwardRef)(function H52(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h5", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-base font-semibold", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h5", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-base font-semibold", tone, weight, truncate, className), children }));
 });
-var P = (0, import_react22.forwardRef)(function P2(_a, ref) {
+var P = (0, import_react25.forwardRef)(function P2(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children }));
 });
-var Small = (0, import_react22.forwardRef)(function Small2(_a, ref) {
+var Small = (0, import_react25.forwardRef)(function Small2(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children }));
 });
-var Caption = (0, import_react22.forwardRef)(function Caption2(_a, ref) {
+var Caption = (0, import_react25.forwardRef)(function Caption2(_a, ref) {
   var _b = _a, { children, tone = "muted", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-xs font-medium", tone, weight, truncate, className), children }));
 });
-var Overline = (0, import_react22.forwardRef)(function Overline2(_a, ref) {
+var Overline = (0, import_react25.forwardRef)(function Overline2(_a, ref) {
   var _b = _a, { children, tone = "muted", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-[0.08em]", tone, weight, truncate, className), children }));
 });
-var Lead = (0, import_react22.forwardRef)(function Lead2(_a, ref) {
+var Lead = (0, import_react25.forwardRef)(function Lead2(_a, ref) {
   var _b = _a, { children, tone = "subtle", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-lead", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-lead", tone, weight, truncate, className), children }));
 });
-var Mono = (0, import_react22.forwardRef)(function Mono2(_a, ref) {
+var Mono = (0, import_react25.forwardRef)(function Mono2(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("code", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("code", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children }));
 });
-var Label = (0, import_react22.forwardRef)(function Label2(_a, ref) {
+var Label = (0, import_react25.forwardRef)(function Label2(_a, ref) {
   var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm font-medium", tone, weight, truncate, className), children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("label", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm font-medium", tone, weight, truncate, className), children }));
 });
 
 // src/components/ui/Avatar.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var sizeMap4 = {
   xs: "h-8 w-8 text-[10px]",
   sm: "h-10 w-10 text-xs",
@@ -3596,7 +4104,7 @@ function Avatar(_a) {
     label,
     icon,
     size = "md",
-    color = "bg-ph-brand text-white",
+    color = "bg-ph-brand text-[var(--ph-on-accent)]",
     status,
     badge,
     className
@@ -3609,19 +4117,19 @@ function Avatar(_a) {
     "badge",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "div",
       {
         className: cn(
-          "flex items-center justify-center rounded-full border border-ph-border font-bold shadow-ph",
+          "ph-avatar flex items-center justify-center rounded-full border border-ph-border font-bold",
           sizeMap4[size],
           color
         ),
         children: icon || label
       }
     ),
-    status && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    status && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "span",
       {
         role: "img",
@@ -3632,17 +4140,17 @@ function Avatar(_a) {
         )
       }
     ),
-    badge && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-white", children: badge })
+    badge && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-[var(--ph-on-accent)]", children: badge })
   ] }));
 }
 function AvatarGroup(_a) {
   var _b = _a, { children, max, className } = _b, props = __objRest(_b, ["children", "max", "className"]);
-  const items = Array.isArray(children) ? children : [children];
+  const items = import_react26.Children.toArray(children);
   const visible = max ? items.slice(0, max) : items;
   const remaining = max ? items.length - max : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
     visible,
-    remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Avatar,
       {
         label: `+${remaining}`,
@@ -3654,8 +4162,8 @@ function AvatarGroup(_a) {
 }
 
 // src/components/ui/Progress.tsx
-var import_react23 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var sizeMap5 = {
   sm: "h-1",
   md: "h-2",
@@ -3683,19 +4191,19 @@ function Progress(_a) {
     "aria-label",
     "aria-labelledby"
   ]);
-  const labelId = (0, import_react23.useId)();
+  const labelId = (0, import_react27.useId)();
   const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
   const safeValue = Number.isFinite(value) ? Math.min(safeMax, Math.max(0, value)) : 0;
   const percentage = safeValue / safeMax * 100;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
-    (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { id: labelId, children: label }),
-      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "tabular-nums", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
+    (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { id: labelId, children: label }),
+      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "tabular-nums", children: [
         Math.round(percentage),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("ph-progress", sizeMap5[size]), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("ph-progress", sizeMap5[size]), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "div",
       {
         className: cn("ph-progress-bar", color),
@@ -3712,9 +4220,9 @@ function Progress(_a) {
 }
 
 // src/components/ui/Link.tsx
-var import_react24 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var Link = (0, import_react24.forwardRef)(function Link2(_a, ref) {
+var import_react28 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var Link = (0, import_react28.forwardRef)(function Link2(_a, ref) {
   var _b = _a, {
     className,
     disabled = false,
@@ -3724,7 +4232,7 @@ var Link = (0, import_react24.forwardRef)(function Link2(_a, ref) {
     "disabled",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "a",
     __spreadProps(__spreadValues({
       ref,
@@ -3743,10 +4251,10 @@ var Link = (0, import_react24.forwardRef)(function Link2(_a, ref) {
 Link.displayName = "Link";
 
 // src/components/ui/Spinner.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function Spinner(_a) {
   var _b = _a, { size = "sm", textColored = false, className } = _b, props = __objRest(_b, ["size", "textColored", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "span",
     __spreadProps(__spreadValues({
       className: cn(
@@ -3758,17 +4266,295 @@ function Spinner(_a) {
       role: "status",
       "aria-label": "Loading"
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "ph-spinner__svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", opacity: 0.2 }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "ph-spinner__svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", opacity: 0.2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
       ] })
     })
   );
 }
 Spinner.displayName = "Spinner";
 
+// src/components/ui/BrandSpinner.tsx
+var import_react29 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var sizes = { sm: 20, md: 40, lg: 56 };
+var reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+function subscribeMotion(onChange) {
+  var _a;
+  const media = (_a = window.matchMedia) == null ? void 0 : _a.call(window, reducedMotionQuery);
+  media == null ? void 0 : media.addEventListener("change", onChange);
+  return () => media == null ? void 0 : media.removeEventListener("change", onChange);
+}
+function readReducedMotion() {
+  var _a, _b;
+  return (_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, reducedMotionQuery).matches) != null ? _b : false;
+}
+function BrandSpinner(_a) {
+  var _b = _a, {
+    variant = "ring",
+    size = "md",
+    label = "Loading",
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "label",
+    "className"
+  ]);
+  const gradientId = `ph-spinner-${(0, import_react29.useId)().replace(/:/g, "")}`;
+  const reducedMotion = (0, import_react29.useSyncExternalStore)(
+    subscribeMotion,
+    readReducedMotion,
+    () => true
+  );
+  const dimension = sizes[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      role: "status",
+      "aria-label": label,
+      "data-test": "app-spinner",
+      className: cn(
+        "inline-flex shrink-0",
+        variant !== "orbit" && "text-ph-brand",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "svg",
+        {
+          width: dimension,
+          height: dimension,
+          viewBox: variant === "ring" ? "0 0 24 24" : "0 0 40 40",
+          "aria-hidden": true,
+          className: variant === "timer" || variant === "ring" ? "animate-spin motion-reduce:animate-none" : void 0,
+          children: variant === "ring" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "10",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                opacity: "0.2"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "path",
+              {
+                d: "M12 2a10 10 0 0 1 10 10",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                strokeLinecap: "round"
+              }
+            )
+          ] }) : variant === "timer" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: "currentColor",
+                strokeOpacity: "0.18",
+                strokeWidth: "2.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeDasharray: "24 70"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx: "20", cy: "5", r: "2.25", fill: "currentColor" })
+          ] }) : variant === "columns" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "rect",
+              {
+                x: "9",
+                y: "16",
+                width: "6",
+                height: "14",
+                rx: "2",
+                fill: "currentColor",
+                fillOpacity: "0.35",
+                className: "ph-brand-spinner__column"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "rect",
+              {
+                x: "17",
+                y: "11",
+                width: "6",
+                height: "19",
+                rx: "2",
+                fill: "currentColor",
+                className: "ph-brand-spinner__column",
+                style: { animationDelay: "0.14s" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "rect",
+              {
+                x: "25",
+                y: "14",
+                width: "6",
+                height: "16",
+                rx: "2",
+                fill: "currentColor",
+                fillOpacity: "0.55",
+                className: "ph-brand-spinner__column",
+                style: { animationDelay: "0.28s" }
+              }
+            )
+          ] }) : variant === "orbit" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+              "linearGradient",
+              {
+                id: gradientId,
+                x1: "0%",
+                y1: "0%",
+                x2: "100%",
+                y2: "100%",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { offset: "0%", stopColor: "#1877f2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { offset: "100%", stopColor: "#ebbcba" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: `url(#${gradientId})`,
+                strokeOpacity: "0.25",
+                strokeWidth: "2"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("g", { className: "origin-[20px_20px] animate-spin motion-reduce:animate-none", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "15",
+                fill: "none",
+                stroke: `url(#${gradientId})`,
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeDasharray: "22 72"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("g", { className: "origin-[20px_20px] animate-[spin_1.6s_linear_infinite_reverse] motion-reduce:animate-none", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "9",
+                fill: "none",
+                stroke: "#ebbcba",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeDasharray: "12 45",
+                strokeOpacity: "0.9"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "circle",
+              {
+                cx: "20",
+                cy: "20",
+                r: "2.5",
+                fill: "#1877f2",
+                className: "animate-pulse motion-reduce:animate-none"
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("g", { children: [
+              !reducedMotion ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "0 20 20",
+                  to: "360 20 20",
+                  dur: "2.4s",
+                  repeatCount: "indefinite"
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "circle",
+                {
+                  cx: "20",
+                  cy: "20",
+                  r: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeOpacity: "0.2",
+                  strokeWidth: "1.5",
+                  strokeDasharray: "3 5"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("g", { children: [
+              !reducedMotion ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "360 20 20",
+                  to: "0 20 20",
+                  dur: "1.1s",
+                  repeatCount: "indefinite"
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "circle",
+                {
+                  cx: "20",
+                  cy: "20",
+                  r: "11",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeDasharray: "18 52"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "path",
+              {
+                d: "M16 14h8v12a1 1 0 0 1-1.4.9L20 25.5l-2.6 1.4A1 1 0 0 1 16 26V14z",
+                fill: "currentColor",
+                fillOpacity: "0.85",
+                className: "animate-pulse motion-reduce:animate-none"
+              }
+            )
+          ] })
+        }
+      )
+    })
+  );
+}
+
 // src/components/ui/Dot.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var colorMap = {
   green: "bg-ph-success",
   yellow: "bg-ph-warning",
@@ -3778,7 +4564,7 @@ var colorMap = {
 };
 function Dot(_a) {
   var _b = _a, { color = "gray", size = "md", className } = _b, props = __objRest(_b, ["color", "size", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "span",
     __spreadValues({
       className: cn(
@@ -3794,9 +4580,9 @@ function Dot(_a) {
 Dot.displayName = "Dot";
 
 // src/components/ui/Chip.tsx
-var import_react25 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var Chip = (0, import_react25.forwardRef)(function Chip2(_a, ref) {
+var import_react30 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Chip = (0, import_react30.forwardRef)(function Chip2(_a, ref) {
   var _b = _a, {
     selected = false,
     onRemove,
@@ -3815,18 +4601,18 @@ var Chip = (0, import_react25.forwardRef)(function Chip2(_a, ref) {
   );
   if (onRemove) {
     const removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove";
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: chipClassName, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: chipClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         __spreadProps(__spreadValues({
           ref,
           type: "button",
           className: "min-w-0 bg-transparent p-0 text-inherit"
         }, props), {
-          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ph-chip__text", children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ph-chip__text", children })
         })
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
           type: "button",
@@ -3834,26 +4620,26 @@ var Chip = (0, import_react25.forwardRef)(function Chip2(_a, ref) {
           disabled: props.disabled,
           className: "ph-chip__remove",
           "aria-label": removeLabel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M2 2l6 6M8 2l-6 6" }) })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "button",
     __spreadProps(__spreadValues({
       ref,
       type: "button",
       className: chipClassName
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ph-chip__text", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ph-chip__text", children })
     })
   );
 });
 Chip.displayName = "Chip";
 
 // src/lib/chart/use-ph-chart-tokens.ts
-var import_react26 = require("react");
+var import_react31 = require("react");
 var DEFAULT_TOKENS = {
   series: ["#1d4aff", "#621da6", "#42827e", "#ce0e74", "#f14f58", "#529a0a", "#fe729e"],
   muted: "hsl(220 9% 90%)",
@@ -3884,20 +4670,20 @@ function readTokens() {
   };
 }
 function useChartTokens() {
-  const [tokens, setTokens] = (0, import_react26.useState)(DEFAULT_TOKENS);
-  (0, import_react26.useEffect)(() => {
+  const [tokens, setTokens] = (0, import_react31.useState)(DEFAULT_TOKENS);
+  (0, import_react31.useEffect)(() => {
     setTokens(readTokens());
   }, []);
   return tokens;
 }
 
 // src/components/ui/Charts.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function percent(value, total) {
   return total > 0 ? Math.round(value / total * 100) : 0;
 }
 function EmptyChart() {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm text-ph-subtle", children: "No data for this period." });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-sm text-ph-subtle", children: "No data for this period." });
 }
 function sliceColour(slice, index, series) {
   var _a;
@@ -3907,7 +4693,7 @@ function DonutChart({ slices, label, formatValue, className }) {
   const { series } = useChartTokens();
   const visible = slices.filter((slice) => slice.value > 0);
   const total = visible.reduce((sum, slice) => sum + slice.value, 0);
-  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EmptyChart, {});
+  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(EmptyChart, {});
   const stops = visible.map((slice, index) => {
     const colour = sliceColour(slice, index, series);
     const before = visible.slice(0, index).reduce((sum, item) => sum + item.value, 0);
@@ -3915,15 +4701,15 @@ function DonutChart({ slices, label, formatValue, className }) {
     const end = (before + slice.value) / total * 360;
     return `${colour} ${start}deg ${end}deg`;
   }).join(", ");
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "div",
       {
         role: "img",
         "aria-label": label,
         className: "relative h-36 w-36 shrink-0 rounded-full",
         style: { background: `conic-gradient(${stops})` },
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "span",
           {
             className: "absolute inset-[22%] rounded-full bg-ph-surface ring-1 ring-ph-border",
@@ -3932,14 +4718,14 @@ function DonutChart({ slices, label, formatValue, className }) {
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: "min-w-0 w-full flex-1 space-y-2", children: visible.map((slice, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: "min-w-0 w-full flex-1 space-y-2", children: visible.map((slice, index) => {
       const colour = sliceColour(slice, index, series);
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate", children: slice.label })
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate", children: slice.label })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
       ] }, slice.label);
     }) })
   ] });
@@ -3948,15 +4734,15 @@ function BarChart({ items, formatValue, className }) {
   const { series } = useChartTokens();
   const visible = items.filter((item) => item.value > 0);
   const max = Math.max(...visible.map((item) => item.value), 1);
-  if (!visible.length) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EmptyChart, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: cn("space-y-3", className), children: visible.map((item, index) => {
+  if (!visible.length) return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(EmptyChart, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: cn("space-y-3", className), children: visible.map((item, index) => {
     const colour = sliceColour(item, index, series);
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate text-ph-subtle", children: item.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU") })
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate text-ph-subtle", children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "div",
         {
           className: "h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none",
@@ -3978,15 +4764,15 @@ function StackedBarChart({
   const { series } = useChartTokens();
   const visible = slices.filter((slice) => slice.value > 0);
   const total = visible.reduce((sum, slice) => sum + slice.value, 0);
-  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EmptyChart, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("space-y-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(EmptyChart, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "div",
       {
         role: "img",
         "aria-label": label,
         className: "flex h-3 overflow-hidden rounded-full bg-ph-muted ring-1 ring-ph-border",
-        children: visible.map((slice, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        children: visible.map((slice, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "span",
           {
             className: "h-full",
@@ -3999,14 +4785,14 @@ function StackedBarChart({
         ))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: "space-y-2", children: visible.map((slice, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: "space-y-2", children: visible.map((slice, index) => {
       const colour = sliceColour(slice, index, series);
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate", children: slice.label })
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate", children: slice.label })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
       ] }, slice.label);
     }) })
   ] });
@@ -4014,6 +4800,7 @@ function StackedBarChart({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
+  AiWritingIllustration,
   Alert,
   AuthCard,
   AuthDivider,
@@ -4022,6 +4809,7 @@ function StackedBarChart({
   AvatarGroup,
   Badge,
   BarChart,
+  BrandSpinner,
   Button,
   ButtonChrome,
   Calendar,
@@ -4056,12 +4844,17 @@ function StackedBarChart({
   Icon,
   IconByName,
   Input,
+  IntegrationBridgeIllustration,
   Kbd,
   Label,
   Lead,
   Link,
   Loader,
   LoadingState,
+  MarketingHeader,
+  MarketingLink,
+  MarketingMotionControl,
+  MarketingReveal,
   Modal,
   Mono,
   Overline,