@xenide-io/the-old-ui-theme 0.7.0 → 0.9.0

package/dist/index.js

@@ -176,6 +176,7 @@ __export(src_exports, {
   IconVolume: () => IconVolume,
   IconVolumeOff: () => IconVolumeOff,
   Input: () => Input,
+  Kbd: () => Kbd,
   Label: () => Label,
   Lead: () => Lead,
   Link: () => Link,
@@ -207,6 +208,8 @@ __export(src_exports, {
   THEME_INIT_SCRIPT: () => THEME_INIT_SCRIPT,
   Table: () => Table,
   Textarea: () => Textarea,
+  ThemeDomSync: () => ThemeDomSync,
+  ThemeSwitcher: () => ThemeSwitcher,
   Toggle: () => Toggle,
   Tooltip: () => Tooltip,
   TooltipProvider: () => TooltipProvider,
@@ -1008,7 +1011,12 @@ var Card = (0, import_react7.forwardRef)(function Card2(_a, ref) {
     className,
     bodyClassName,
     interactive = false,
-    titleAs: Title2 = "h3"
+    href,
+    onClick,
+    target,
+    rel,
+    type,
+    titleAs: Title3 = "h3"
   } = _b, props = __objRest(_b, [
     "children",
     "title",
@@ -1020,36 +1028,180 @@ var Card = (0, import_react7.forwardRef)(function Card2(_a, ref) {
     "className",
     "bodyClassName",
     "interactive",
+    "href",
+    "onClick",
+    "target",
+    "rel",
+    "type",
     "titleAs"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    "div",
+  const isLink = href !== void 0;
+  const isButton = onClick !== void 0 && !isLink;
+  const cardClassName = cn(
+    "ph-card",
+    variantMap2[variant],
+    (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 }),
+      children,
+      actions && /* @__PURE__ */ (0, import_jsx_runtime8.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 })
+  ] });
+  if (isLink) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "a",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cardClassName,
+        href,
+        target,
+        rel,
+        onClick
+      }, props), {
+        children: cardContent
+      })
+    );
+  }
+  if (isButton) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        type: type != null ? type : "button",
+        className: cardClassName,
+        onClick
+      }, props), {
+        children: cardContent
+      })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.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 platformLabels = {
+  text: {
+    command: "Command",
+    cmd: "Command",
+    option: "Option",
+    alt: "Alt",
+    control: "Control",
+    ctrl: "Control",
+    shift: "Shift"
+  },
+  mac: {
+    command: "\u2318",
+    cmd: "\u2318",
+    option: "\u2325",
+    alt: "\u2325",
+    control: "\u2303",
+    ctrl: "\u2303",
+    shift: "\u21E7"
+  },
+  windows: {
+    command: "Win",
+    cmd: "Win",
+    option: "Alt",
+    alt: "Alt",
+    control: "Ctrl",
+    ctrl: "Ctrl",
+    shift: "Shift"
+  }
+};
+var spokenLabels = {
+  "\u2318": "Command",
+  "\u2325": "Option",
+  "\u2303": "Control",
+  "\u21E7": "Shift",
+  "\u21B5": "Enter",
+  "\u23CE": "Enter",
+  "\u232B": "Backspace",
+  "\u238B": "Escape"
+};
+function Kbd(_a) {
+  var _b = _a, {
+    variant = "shortcut",
+    keys,
+    platform = "text",
+    separator,
+    children,
+    className,
+    "aria-label": ariaLabel
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "keys",
+    "platform",
+    "separator",
+    "children",
+    "className",
+    "aria-label"
+  ]);
+  if (variant === "token") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "code",
+      __spreadProps(__spreadValues({
+        className: cn("ph-code-token ph-kbd", className),
+        role: ariaLabel ? "img" : void 0,
+        "aria-label": ariaLabel
+      }, props), {
+        children
+      })
+    );
+  }
+  const sourceKeys = (keys == null ? void 0 : keys.length) ? keys : children != null ? [children] : [];
+  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)(
+      "kbd",
+      __spreadProps(__spreadValues({
+        className: cn("ph-keycap", className),
+        role: accessibleLabel ? "img" : void 0,
+        "aria-label": accessibleLabel
+      }, props), {
+        children: displayKeys[0]
+      })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "kbd",
     __spreadProps(__spreadValues({
-      ref,
-      className: cn(
-        "ph-card",
-        variantMap2[variant],
-        interactive && "ph-card-interactive",
-        className
-      )
+      className: cn("ph-shortcut-group ph-keycap", className),
+      role: accessibleLabel ? "img" : void 0,
+      "aria-label": accessibleLabel
     }, props), {
-      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)(Title2, { className: "ph-card-title", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime8.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 })
-        ] }),
-        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 })
-      ]
+      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 })
+      ] }, index))
     })
   );
-});
-Card.displayName = "Card";
+}
+function formatKey(key, platform) {
+  var _a;
+  if (typeof key !== "string") return key;
+  return (_a = platformLabels[platform][key.toLowerCase()]) != null ? _a : key;
+}
+function getShortcutLabel(keys) {
+  const labels = keys.map((key) => {
+    var _a;
+    if (typeof key !== "string" && typeof key !== "number") return null;
+    const value = String(key);
+    return (_a = spokenLabels[value]) != null ? _a : value;
+  });
+  return labels.every((label) => label != null) ? labels.join(" + ") : void 0;
+}
 
 // src/components/ui/Loader.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var loaderSizeClass = {
   sm: "ph-loader-sm",
   md: "ph-loader-md",
@@ -1075,7 +1227,7 @@ function Loader(_a) {
     "label",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "span",
     __spreadProps(__spreadValues({
       role: "status",
@@ -1083,20 +1235,20 @@ function Loader(_a) {
       className: cn("ph-loader", loaderSizeClass[size], className)
     }, props), {
       children: [
-        variant === "spinner" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ph-loading", "aria-hidden": true }) : null,
-        variant === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ph-loading-dots", "aria-hidden": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {})
+        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", {})
         ] }) : null,
-        variant === "pulse" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ph-loading-pulse", "aria-hidden": true }) : null
+        variant === "pulse" ? /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "span",
     __spreadValues({
       className: cn("ph-skeleton", skeletonShapeClass[shape], className),
@@ -1120,53 +1272,53 @@ function LoadingState(_a) {
     "size",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-loading-state", className), role: "status", "aria-label": label }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loader, { variant, size, label, "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ph-loading-state__copy", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: description }) : null
+  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
     ] })
   ] }));
 }
 
 // src/components/ui/AuthLayout.tsx
 var import_react8 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = 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_runtime10.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-auth-layout", aside != null && "ph-auth-layout--split", className) }, props), { children: [
-    aside ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("aside", { className: "ph-auth-layout__aside", children: aside }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ph-auth-layout__main", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ph-auth-layout__column", children: [
-      brand ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ph-auth-layout__brand", children: brand }) : null,
+  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,
       children,
-      footer ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("footer", { className: "ph-auth-layout__footer", children: footer }) : null
+      footer ? /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime10.jsxs)("section", __spreadProps(__spreadValues({ className: cn("ph-auth-card", className), "aria-labelledby": titleId }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("header", { className: "ph-auth-card__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { id: titleId, children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: description }) : null
+  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
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ph-auth-card__body", children }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("footer", { className: "ph-auth-card__footer", children: footer }) : 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
   ] }));
 }
 function AuthDivider(_a) {
   var _b = _a, { children = "or continue with", className } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-auth-divider", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children }) }));
+  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 }) }));
 }
 
 // src/components/ui/SettingsLayout.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function SettingsNav(_a) {
   var _b = _a, { groups, className } = _b, props = __objRest(_b, ["groups", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-settings-nav", className) }, props), { children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ph-settings-nav__group", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { children: group.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ph-settings-nav__items", children: group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  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)(
       "a",
       {
         href: item.href,
@@ -1178,9 +1330,9 @@ function SettingsNav(_a) {
         ),
         "aria-current": item.active ? "page" : void 0,
         children: [
-          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: item.label }),
-          item.badge ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-settings-nav__badge", children: item.badge }) : null
+          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.id
@@ -1205,31 +1357,31 @@ function SettingsLayout(_a) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", __spreadProps(__spreadValues({ className: cn("ph-settings-layout", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className: "ph-settings-layout__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: description }) : null
+  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
       ] }),
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ph-settings-layout__actions", children: actions }) : null
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ph-settings-layout__actions", children: actions }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("details", { className: "ph-settings-layout__mobile-nav", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("summary", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconTuning, { className: "h-4 w-4", "aria-hidden": true }),
+    /* @__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 }),
         "Settings menu"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("nav", { "aria-label": navigationLabel, children: navigation })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { "aria-label": navigationLabel, children: navigation })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ph-settings-layout__grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("aside", { className: "ph-settings-layout__sidebar", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("nav", { "aria-label": navigationLabel, children: navigation }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ph-settings-layout__content", children })
+    /* @__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 })
     ] })
   ] }));
 }
 
 // src/components/ui/DropdownMenu.tsx
 var DropdownPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var sizeClass2 = {
   xs: "ph-btn-xs",
   sm: "ph-btn-sm",
@@ -1251,7 +1403,7 @@ function DropdownContent({
   avoidCollisions = true,
   panelClassName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     DropdownPrimitive.Content,
     {
       className: cn("ph-dropdown-panel", panelClassName),
@@ -1264,7 +1416,7 @@ function DropdownContent({
       sticky: "partial",
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           DropdownPrimitive.Arrow,
           {
             className: "ph-dropdown-arrow",
@@ -1316,7 +1468,7 @@ function DropdownMenu(_a) {
     "modal",
     "disabled"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     DropdownPrimitive.Root,
     {
       open,
@@ -1324,7 +1476,7 @@ function DropdownMenu(_a) {
       onOpenChange,
       modal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             type: "button",
@@ -1335,7 +1487,7 @@ function DropdownMenu(_a) {
             children: trigger
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           DropdownContent,
           {
             align,
@@ -1400,8 +1552,8 @@ function DropdownButton(_a) {
     "modal",
     "disabled"
   ]);
-  const trailing = sideIcon != null ? sideIcon : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  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)(
     DropdownPrimitive.Root,
     {
       open,
@@ -1409,7 +1561,7 @@ function DropdownButton(_a) {
       onOpenChange,
       modal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             type: "button",
@@ -1422,7 +1574,7 @@ function DropdownButton(_a) {
               split && "ph-btn-split"
             ),
             "aria-label": ariaLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               ButtonChrome,
               {
                 label,
@@ -1433,7 +1585,7 @@ function DropdownButton(_a) {
             )
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           DropdownContent,
           {
             align,
@@ -1460,7 +1612,7 @@ function DropdownItem(_a) {
     "children",
     "disabled"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     __spreadProps(__spreadValues({
       type: "button",
@@ -1472,7 +1624,7 @@ function DropdownItem(_a) {
   ) });
 }
 function DropdownRadioGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownPrimitive.RadioGroup, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPrimitive.RadioGroup, __spreadValues({}, props));
 }
 function DropdownRadioItem(_a) {
   var _b = _a, {
@@ -1482,14 +1634,14 @@ function DropdownRadioItem(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     DropdownPrimitive.RadioItem,
     __spreadProps(__spreadValues({
       className: cn("ph-dropdown-item ph-dropdown-radio-item", className)
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ph-dropdown-item-indicator", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconCheck, { className: "h-3.5 w-3.5" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { 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 })
       ]
     })
   );
@@ -1497,10 +1649,11 @@ function DropdownRadioItem(_a) {
 
 // src/components/ui/Input.tsx
 var import_react10 = require("react");
+var import_iconoir_react = require("iconoir-react");
 
 // src/components/ui/FormField.tsx
 var import_react9 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function FormField(_a) {
   var _b = _a, {
     controlId,
@@ -1529,30 +1682,30 @@ function FormField(_a) {
   const errorId = error ? `${id}-error` : void 0;
   const controlProps = {
     id,
-    "aria-describedby": descriptionId,
+    "aria-describedby": errorId != null ? errorId : descriptionId,
     "aria-errormessage": errorId,
     "aria-invalid": error ? true : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-field", className) }, props), { children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-field", className) }, props), { children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "label",
       {
         htmlFor: id,
         className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
         children: [
           label,
-          required ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
+          required ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
         ]
       }
     ) : null,
     typeof children === "function" ? children(controlProps) : children,
-    descriptionId ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { id: descriptionId, className: "mt-1 text-xs text-ph-subtle", children: helperText }) : null,
-    errorId ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { id: errorId, className: "mt-1 text-xs font-medium text-ph-danger", children: error }) : null
+    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
   ] }));
 }
 
 // src/components/ui/Input.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var sizeMap2 = {
   sm: "ph-input-sm",
   md: "",
@@ -1571,6 +1724,7 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
     helperText,
     size = "md",
     variant = "default",
+    type = "text",
     className,
     wrapperClassName,
     disabled,
@@ -1584,6 +1738,7 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
     "helperText",
     "size",
     "variant",
+    "type",
     "className",
     "wrapperClassName",
     "disabled",
@@ -1593,7 +1748,9 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
   const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const isPassword = type === "password";
+  const [revealed, setRevealed] = (0, import_react10.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     FormField,
     {
       controlId: id,
@@ -1604,23 +1761,39 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
       required,
       disabled,
       className: wrapperClassName,
-      children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        "input",
-        __spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
-          ref,
-          disabled,
-          required,
-          "aria-describedby": joinIds(ariaDescribedBy, fieldProps["aria-describedby"]),
-          className: cn(
-            "ph-input w-full",
-            sizeMap2[size],
-            variant === "ghost" && "ph-input-ghost",
-            hasError && "ph-input-error",
-            disabled && "cursor-not-allowed opacity-60",
-            className
-          )
-        }), props)
-      )
+      children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          __spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
+            ref,
+            type: isPassword && revealed ? "text" : type,
+            disabled,
+            required,
+            "aria-describedby": joinIds(ariaDescribedBy, fieldProps["aria-describedby"]),
+            className: cn(
+              "ph-input w-full",
+              isPassword && "pr-10",
+              sizeMap2[size],
+              variant === "ghost" && "ph-input-ghost",
+              hasError && "ph-input-error",
+              disabled && "cursor-not-allowed opacity-60",
+              className
+            )
+          }), props)
+        ),
+        isPassword ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setRevealed((current) => !current),
+            "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 })
+          }
+        ) : null
+      ] })
     }
   );
 });
@@ -1656,7 +1829,7 @@ var Select = (0, import_react10.forwardRef)(function Select2(_a, ref) {
   const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  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)(
     "select",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
       ref,
@@ -1705,7 +1878,7 @@ var Textarea = (0, import_react10.forwardRef)(function Textarea2(_a, ref) {
   const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  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)(
     "textarea",
     __spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
       ref,
@@ -1748,9 +1921,9 @@ var Checkbox = (0, import_react10.forwardRef)(function Checkbox2(_a, ref) {
   const hasError = Boolean(error);
   const descriptionId = helperText && !hasError ? `${id}-description` : void 0;
   const errorId = error ? `${id}-error` : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("ph-control-row", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "ph-checkbox-wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  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)(
         "input",
         __spreadValues({
           ref,
@@ -1758,7 +1931,7 @@ var Checkbox = (0, import_react10.forwardRef)(function Checkbox2(_a, ref) {
           type: "checkbox",
           disabled,
           "aria-invalid": hasError || void 0,
-          "aria-describedby": joinIds(ariaDescribedBy, descriptionId),
+          "aria-describedby": joinIds(ariaDescribedBy, descriptionId, errorId),
           "aria-errormessage": errorId,
           className: cn(
             "ph-checkbox",
@@ -1768,12 +1941,12 @@ var Checkbox = (0, import_react10.forwardRef)(function Checkbox2(_a, ref) {
           )
         }, props)
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconCheck, { className: "ph-checkbox-icon", "aria-hidden": true })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconCheck, { className: "ph-checkbox-icon", "aria-hidden": true })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ph-control-copy", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
-      descriptionId ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { id: descriptionId, className: "text-xs text-ph-subtle", children: helperText }) : null,
-      errorId ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { id: errorId, className: "text-xs font-medium text-ph-danger", children: error }) : null
+    /* @__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
     ] })
   ] });
 });
@@ -1794,8 +1967,8 @@ var Radio = (0, import_react10.forwardRef)(function Radio2(_a, ref) {
   ]);
   const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "input",
       __spreadValues({
         ref,
@@ -1805,7 +1978,7 @@ var Radio = (0, import_react10.forwardRef)(function Radio2(_a, ref) {
         className: cn("ph-radio", disabled && "cursor-not-allowed", className)
       }, props)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
   ] });
 });
 Radio.displayName = "Radio";
@@ -1825,9 +1998,9 @@ var Toggle = (0, import_react10.forwardRef)(function Toggle2(_a, ref) {
   ]);
   const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: disabled ? "opacity-60" : void 0, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  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)(
       "input",
       __spreadValues({
         ref,
@@ -1861,13 +2034,13 @@ var Range = (0, import_react10.forwardRef)(function Range2(_a, ref) {
   ]);
   const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", __spreadValues({ ref, id, type: "range", className: cn("ph-range", className) }, props)),
-    (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: minLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: valueLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: maxLabel })
+  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 })
     ] })
   ] });
 });
@@ -1888,10 +2061,10 @@ var FileUpload = (0, import_react10.forwardRef)(function FileUpload2(_a, ref) {
   ]);
   const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { htmlFor: id, className: "ph-file-upload", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", __spreadValues({ ref, id, type: "file", className: cn("sr-only", className) }, props)),
+  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)),
       prompt
     ] })
   ] });
@@ -1901,7 +2074,7 @@ FileUpload.displayName = "FileUpload";
 // src/components/ui/Modal.tsx
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
 var import_react11 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var sizeMap3 = {
   sm: "max-w-sm",
   md: "max-w-lg",
@@ -1918,6 +2091,7 @@ function Modal({
   footer,
   size = "md",
   className,
+  bodyClassName,
   customLayout = false,
   showCloseButton = true,
   closeOnOutsideClick = true,
@@ -1931,15 +2105,15 @@ function Modal({
 }) {
   const canDismiss = Boolean(onClose);
   const restoreFocusRef = (0, import_react11.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Dialog.Root,
     {
       open,
       onOpenChange: (nextOpen) => {
         if (!nextOpen) onClose == null ? void 0 : onClose();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Dialog.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Dialog.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Dialog.Overlay,
           {
             "data-test": dataTest,
@@ -1947,7 +2121,7 @@ function Modal({
             style: zIndex ? { zIndex } : void 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Dialog.Content,
           __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
             id,
@@ -1970,28 +2144,28 @@ function Modal({
             onPointerDownOutside: (event) => {
               if (!canDismiss || !closeOnOutsideClick) event.preventDefault();
             },
-            children: customLayout ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
+            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
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-              title ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
-              title || description || showCloseButton && canDismiss ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: "ph-modal-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "min-w-0", children: [
-                  title ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Title, { className: "text-lg font-bold text-ph-ink", children: title }) : null,
-                  description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Description, { className: "mt-1 text-sm text-ph-subtle", children: description }) : null
+            ] }) : /* @__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
                 ] }),
-                showCloseButton && canDismiss ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                showCloseButton && canDismiss ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     type: "button",
                     className: "ph-modal-close",
                     "aria-label": "Close dialog",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconClose, { className: "h-5 w-5", "aria-hidden": true })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconClose, { className: "h-5 w-5", "aria-hidden": true })
                   }
                 ) }) : null
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ph-modal-body", children }),
-              footer ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ph-modal-footer", children: footer }) : 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
             ] })
           })
         )
@@ -2001,19 +2175,19 @@ function Modal({
 }
 
 // src/components/ui/Panel.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = 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_runtime16.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-ph-subtle", children: description }),
+  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 }),
     children
   ] }));
 }
 
 // src/components/ui/SearchInput.tsx
 var import_react12 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function SearchInput(_a) {
   var _b = _a, {
     id: idProp,
@@ -2036,10 +2210,10 @@ function SearchInput(_a) {
   ]);
   const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
-      shortcut != null ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  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)(
         "span",
         {
           className: "ph-shortcut pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-xs",
@@ -2047,7 +2221,7 @@ function SearchInput(_a) {
           children: shortcut
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         __spreadValues({
           id,
@@ -2067,7 +2241,7 @@ function SearchInput(_a) {
 }
 
 // src/components/ui/Table.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Table({
   data,
   columns,
@@ -2075,58 +2249,72 @@ function Table({
   compact = false,
   ribbon = false,
   getRowStyle,
+  getRowKey,
   className,
   caption
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("ph-table-wrap", compact && "ph-table-compact", className), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
-    caption && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("caption", { className: "sr-only", children: caption }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("th", { className: col.className, children: col.header }, col.key)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tbody", { children: data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("td", { className: col.className, children: col.cell(row) }, col.key)) }, i)) })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      className: cn("ph-table-wrap", compact && "ph-table-compact", className),
+      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);
+        }) })
+      ] })
+    }
+  );
 }
 
 // src/components/ui/Stat.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var toneMap = {
   default: "text-ph-ink",
   brand: "text-ph-brand",
   blue: "text-ph-blue",
   purple: "text-ph-purple",
-  warning: "text-amber-900"
+  warning: "text-ph-warning"
 };
 var statMap = {
   default: "",
   brand: "",
   blue: "",
   purple: "",
-  warning: "border-amber-200 bg-amber-50/70"
+  warning: "border-[color:color-mix(in_srgb,var(--ph-warning)_30%,var(--ph-border))] bg-[color:color-mix(in_srgb,var(--ph-warning)_10%,var(--ph-surface))]"
 };
 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_runtime19.jsxs)("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xs text-ph-subtle", children: footer })
+  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 })
   ] }));
 }
 
+// src/components/ui/ThemeDomSync.tsx
+var import_react13 = require("react");
+
 // src/themes/registry.ts
 var DEFAULT_THEME_ID = "hedgehog-light";
 var THEMES = [
   {
     id: "hedgehog-light",
-    name: "HedgeHog Light",
+    name: "Hedgehog Light",
     description: "Default Quill warm greys and orange Lemon chrome.",
     colorScheme: "light",
-    group: "HedgeHog"
+    group: "Hedgehog"
   },
   {
     id: "hedgehog-dark",
-    name: "HedgeHog Dark",
+    name: "Hedgehog Dark",
     description: "Dark app shell with HedgeHog orange accents.",
     colorScheme: "dark",
-    group: "HedgeHog"
+    group: "Hedgehog"
   },
   {
     id: "note",
@@ -2211,6 +2399,20 @@ var THEMES = [
     description: "Deep plum command deck with hot pink, lime, cyan, and sunset signals.",
     colorScheme: "dark",
     group: "Malibu"
+  },
+  {
+    id: "microsoft-light",
+    name: "Microsoft Light",
+    description: "Office Fluent light neutrals on white with the signature brand blue.",
+    colorScheme: "light",
+    group: "Microsoft"
+  },
+  {
+    id: "microsoft-dark",
+    name: "Microsoft Dark",
+    description: "Office Fluent dark chrome with a bright brand-blue accent.",
+    colorScheme: "dark",
+    group: "Microsoft"
   }
 ];
 var THEME_GROUPS = Array.from(
@@ -2245,16 +2447,54 @@ function readStoredTheme() {
   return stored && isThemeId(stored) ? stored : DEFAULT_THEME_ID;
 }
 
+// src/components/ui/ThemeDomSync.tsx
+function ThemeDomSync() {
+  (0, import_react13.useLayoutEffect)(() => {
+    persistTheme(readStoredTheme());
+  }, []);
+  return null;
+}
+
+// src/components/ui/ThemeSwitcher.tsx
+var import_react14 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function ThemeSwitcher({ className }) {
+  const [themeId, setThemeId] = (0, import_react14.useState)(DEFAULT_THEME_ID);
+  (0, import_react14.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)(
+      "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",
+        value: themeId,
+        "aria-label": "Colour theme",
+        onChange: (event) => {
+          const next = event.target.value;
+          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))
+      }
+    )
+  ] });
+}
+
 // src/components/ui/Accordion.tsx
-var import_react13 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Accordion({
   items,
   allowMultiple = false,
   defaultOpen = [],
   className
 }) {
-  const [openItems, setOpenItems] = (0, import_react13.useState)(new Set(defaultOpen));
+  const [openItems, setOpenItems] = (0, import_react15.useState)(new Set(defaultOpen));
+  const idPrefix = (0, import_react15.useId)();
   const toggleItem = (id) => {
     setOpenItems((prev) => {
       const next = new Set(prev);
@@ -2269,54 +2509,71 @@ function Accordion({
       return next;
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("divide-y divide-ph-border rounded-xl border border-ph-border bg-ph-surface", className), children: items.map((item) => {
-    const isOpen = openItems.has(item.id);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-        "button",
-        {
-          type: "button",
-          onClick: () => toggleItem(item.id),
-          className: "flex w-full items-center justify-between px-5 py-4 text-left transition hover:bg-ph-muted",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "font-semibold text-ph-ink", children: item.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              IconChevronDown,
-              {
-                className: cn(
-                  "h-5 w-5 text-ph-mutedtext transition-transform duration-200",
-                  isOpen && "rotate-180"
-                )
-              }
-            )
-          ]
-        }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "div",
+    {
+      className: cn(
+        "divide-y divide-ph-border rounded-xl border border-ph-border bg-ph-surface",
+        className
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        "div",
-        {
-          className: cn(
-            "grid transition-all duration-200",
-            isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      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)(
+            "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",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "font-semibold text-ph-ink", children: item.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  IconChevronDown,
+                  {
+                    className: cn(
+                      "h-5 w-5 text-ph-mutedtext transition-transform duration-200",
+                      isOpen && "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
-        }
-      )
-    ] }, item.id);
-  }) });
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "div",
+            {
+              id: contentId,
+              "aria-hidden": !isOpen,
+              ref: (node) => {
+                if (node) node.toggleAttribute("inert", !isOpen);
+              },
+              className: cn(
+                "grid transition-all 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 }) })
+            }
+          )
+        ] }, item.id);
+      })
+    }
+  );
 }
 
 // src/components/ui/SegmentedControl.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function SegmentedControl({ options, value, onChange, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       className: cn(
         "inline-flex rounded-lg bg-ph-muted p-1",
         className
       ),
-      children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "button",
         {
           type: "button",
@@ -2327,7 +2584,7 @@ function SegmentedControl({ options, value, onChange, className }) {
             value === option.value ? "bg-ph-surface text-ph-ink shadow-ph" : "text-ph-subtle hover:text-ph-ink"
           ),
           children: [
-            option.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "h-4 w-4", children: option.icon }),
+            option.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "h-4 w-4", children: option.icon }),
             option.label
           ]
         },
@@ -2338,8 +2595,9 @@ function SegmentedControl({ options, value, onChange, className }) {
 }
 
 // src/components/ui/CommandPalette.tsx
-var import_react14 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function CommandPalette({
   items,
   isOpen,
@@ -2351,269 +2609,385 @@ function CommandPalette({
   inputId,
   inputDataTest
 }) {
-  const [query, setQuery] = (0, import_react14.useState)("");
-  const [selectedIndex, setSelectedIndex] = (0, import_react14.useState)(0);
-  const inputRef = (0, import_react14.useRef)(null);
-  const panelRef = (0, import_react14.useRef)(null);
-  const previousFocusRef = (0, import_react14.useRef)(null);
+  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 listboxId = `${id != null ? id : `command-palette-${generatedId}`}-listbox`;
   const filtered = items.filter(
     (item) => item.label.toLowerCase().includes(query.toLowerCase())
   );
-  (0, import_react14.useEffect)(() => {
-    var _a;
+  const activeIndex = filtered.length ? Math.min(selectedIndex, filtered.length - 1) : 0;
+  const activeItem = filtered[activeIndex];
+  (0, import_react16.useEffect)(() => {
     if (!isOpen) return;
-    previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     setQuery("");
     setSelectedIndex(0);
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
-    return () => {
-      var _a2;
-      return (_a2 = previousFocusRef.current) == null ? void 0 : _a2.focus();
-    };
   }, [isOpen]);
-  (0, import_react14.useEffect)(() => {
-    const handleKeyDown = (e) => {
-      var _a, _b;
-      if (!isOpen) return;
-      switch (e.key) {
-        case "ArrowDown":
-          if (!filtered.length) break;
-          e.preventDefault();
-          setSelectedIndex((i) => (i + 1) % filtered.length);
-          break;
-        case "ArrowUp":
-          if (!filtered.length) break;
-          e.preventDefault();
-          setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
-          break;
-        case "Enter":
-          e.preventDefault();
-          (_a = filtered[selectedIndex]) == null ? void 0 : _a.onSelect();
-          onClose();
-          break;
-        case "Escape":
-          onClose();
-          break;
-        case "Tab": {
-          const focusable = (_b = panelRef.current) == null ? void 0 : _b.querySelectorAll(
-            'input, button, [href], [tabindex]:not([tabindex="-1"])'
-          );
-          if (!(focusable == null ? void 0 : focusable.length)) break;
-          const first = focusable[0];
-          const last = focusable[focusable.length - 1];
-          if (e.shiftKey && document.activeElement === first) {
-            e.preventDefault();
-            last.focus();
-          } else if (!e.shiftKey && document.activeElement === last) {
-            e.preventDefault();
-            first.focus();
-          }
-          break;
-        }
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, filtered, selectedIndex, onClose]);
-  if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    "div",
+  (0, import_react16.useEffect)(() => {
+    setSelectedIndex((current) => Math.min(current, Math.max(filtered.length - 1, 0)));
+  }, [filtered.length]);
+  (0, import_react16.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" });
+  }, [activeIndex, activeItem, isOpen]);
+  const handleInputKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        if (!filtered.length) return;
+        event.preventDefault();
+        setSelectedIndex((current) => (current + 1) % filtered.length);
+        return;
+      case "ArrowUp":
+        if (!filtered.length) return;
+        event.preventDefault();
+        setSelectedIndex(
+          (current) => (current - 1 + filtered.length) % filtered.length
+        );
+        return;
+      case "Enter":
+        if (!activeItem) return;
+        event.preventDefault();
+        activeItem.onSelect();
+        onClose();
+        return;
+      default:
+        return;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    Dialog2.Root,
     {
-      id,
-      "data-test": dataTest,
-      className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm",
-      onMouseDown: (event) => {
-        if (event.target === event.currentTarget) onClose();
+      open: isOpen,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) onClose();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-        "div",
-        {
-          ref: panelRef,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": "Command palette",
-          className: cn(
-            "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
-            className
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                "input",
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Dialog2.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          Dialog2.Overlay,
+          {
+            id,
+            "data-test": dataTest,
+            className: "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime24.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
+            ),
+            onOpenAutoFocus: (event) => {
+              var _a;
+              restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+              event.preventDefault();
+              (_a = inputRef.current) == null ? void 0 : _a.focus();
+            },
+            onCloseAutoFocus: (event) => {
+              var _a;
+              event.preventDefault();
+              (_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)(
+                  "input",
+                  {
+                    ref: inputRef,
+                    id: inputId,
+                    "data-test": inputDataTest,
+                    type: "text",
+                    role: "combobox",
+                    "aria-label": "Search commands",
+                    "aria-autocomplete": "list",
+                    "aria-controls": listboxId,
+                    "aria-expanded": "true",
+                    "aria-activedescendant": activeItem ? `command-${activeItem.id}` : void 0,
+                    value: query,
+                    onChange: (event) => {
+                      setQuery(event.target.value);
+                      setSelectedIndex(0);
+                    },
+                    onKeyDown: handleInputKeyDown,
+                    placeholder,
+                    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_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)(
+                "div",
                 {
-                  ref: inputRef,
-                  id: inputId,
-                  "data-test": inputDataTest,
-                  type: "text",
-                  "aria-label": "Search commands",
-                  value: query,
-                  onChange: (e) => {
-                    setQuery(e.target.value);
-                    setSelectedIndex(0);
+                  id: `command-${item.id}`,
+                  "data-test": `command-${item.id}`,
+                  role: "option",
+                  "aria-selected": index === activeIndex,
+                  onClick: () => {
+                    item.onSelect();
+                    onClose();
                   },
-                  placeholder,
-                  className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("kbd", { 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_runtime22.jsx)("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-              "button",
-              {
-                type: "button",
-                id: `command-${item.id}`,
-                "data-test": `command-${item.id}`,
-                onClick: () => {
-                  item.onSelect();
-                  onClose();
+                  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"
+                  ),
+                  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 })
+                  ]
                 },
-                onMouseEnter: () => setSelectedIndex(index),
-                className: cn(
-                  "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
-                  index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
-                ),
-                children: [
-                  item.icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "h-5 w-5", children: item.icon }),
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex-1", children: item.label }),
-                  item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("kbd", { className: "rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext", children: item.shortcut })
-                ]
-              },
-              item.id
-            )) })
-          ]
-        }
-      )
+                item.id
+              )) })
+            ]
+          }
+        )
+      ] })
     }
   );
 }
 
 // src/components/ui/Calendar.tsx
-var import_react15 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var monthNames = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var fullWeekDays = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday"
+];
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function isSameDay(first, second) {
+  return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate();
+}
+function addDays(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+}
+function addMonths(date, amount) {
+  const targetMonth = new Date(date.getFullYear(), date.getMonth() + amount, 1);
+  const lastDay = new Date(
+    targetMonth.getFullYear(),
+    targetMonth.getMonth() + 1,
+    0
+  ).getDate();
+  return new Date(
+    targetMonth.getFullYear(),
+    targetMonth.getMonth(),
+    Math.min(date.getDate(), lastDay)
+  );
+}
+function dateKey(date) {
+  return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+}
+function dateLabel(date) {
+  return `${fullWeekDays[date.getDay()]}, ${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
+}
 function Calendar({ value, onChange, className }) {
-  const [currentMonth, setCurrentMonth] = (0, import_react15.useState)(value || /* @__PURE__ */ new Date());
-  const today = /* @__PURE__ */ new Date();
+  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 today = startOfDay(/* @__PURE__ */ new Date());
+  (0, import_react17.useEffect)(() => {
+    if (!value) return;
+    const nextDate = startOfDay(value);
+    setCurrentMonth(startOfMonth(nextDate));
+    setFocusedDate(nextDate);
+  }, [value]);
+  (0, import_react17.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();
+    shouldFocusDateRef.current = false;
+  }, [currentMonth, focusedDate]);
   const year = currentMonth.getFullYear();
   const month = currentMonth.getMonth();
-  const firstDay = new Date(year, month, 1).getDay();
-  const daysInMonth = new Date(year, month + 1, 0).getDate();
-  const prevMonth = () => setCurrentMonth(new Date(year, month - 1, 1));
-  const nextMonth = () => setCurrentMonth(new Date(year, month + 1, 1));
-  const monthNames = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December"
-  ];
-  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-  const isSelected = (day) => {
-    if (!value) return false;
-    return value.getDate() === day && value.getMonth() === month && value.getFullYear() === year;
+  const changeMonth = (amount) => {
+    const nextDate = addMonths(focusedDate, amount);
+    setFocusedDate(nextDate);
+    setCurrentMonth(startOfMonth(nextDate));
   };
-  const isToday = (day) => {
-    return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
+  const moveFocus = (nextDate) => {
+    shouldFocusDateRef.current = true;
+    setFocusedDate(nextDate);
+    setCurrentMonth(startOfMonth(nextDate));
   };
-  const handleSelect = (day) => {
-    onChange == null ? void 0 : onChange(new Date(year, month, day));
+  const handleSelect = (date) => {
+    setFocusedDate(date);
+    onChange == null ? void 0 : onChange(startOfDay(date));
   };
-  const days = [];
-  for (let i = 0; i < firstDay; i++) {
-    days.push(null);
+  const handleDayKeyDown = (event, date) => {
+    let nextDate;
+    switch (event.key) {
+      case "ArrowLeft":
+        nextDate = addDays(date, -1);
+        break;
+      case "ArrowRight":
+        nextDate = addDays(date, 1);
+        break;
+      case "ArrowUp":
+        nextDate = addDays(date, -7);
+        break;
+      case "ArrowDown":
+        nextDate = addDays(date, 7);
+        break;
+      case "Home":
+        nextDate = addDays(date, -date.getDay());
+        break;
+      case "End":
+        nextDate = addDays(date, 6 - date.getDay());
+        break;
+      case "PageUp":
+        nextDate = addMonths(date, event.shiftKey ? -12 : -1);
+        break;
+      case "PageDown":
+        nextDate = addMonths(date, event.shiftKey ? 12 : 1);
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        handleSelect(date);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    moveFocus(nextDate);
+  };
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const days = Array.from({ length: firstDay }, () => null);
+  for (let day = 1; day <= daysInMonth; day++) {
+    days.push(new Date(year, month, day));
   }
-  for (let i = 1; i <= daysInMonth; i++) {
-    days.push(i);
+  while (days.length < 42) {
+    days.push(null);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  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)(
         "button",
         {
           type: "button",
-          onClick: prevMonth,
+          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_runtime23.jsx)(IconChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "text-sm font-semibold text-ph-ink", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { id: monthLabelId, "aria-live": "polite", className: "text-sm font-semibold text-ph-ink", children: [
         monthNames[month],
         " ",
         year
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "button",
         {
           type: "button",
-          onClick: nextMonth,
+          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_runtime23.jsx)(IconChevronRight, { className: "h-5 w-5", "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconChevronRight, { className: "h-5 w-5", "aria-hidden": true })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "grid grid-cols-7 gap-1", children: [
-      weekDays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "py-1 text-center text-xs font-medium text-ph-mutedtext", children: day }, day)),
-      days.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "aspect-square", children: day && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        "button",
+    /* @__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)(
+        "div",
         {
-          type: "button",
-          onClick: () => handleSelect(day),
-          className: cn(
-            "flex h-full w-full items-center justify-center rounded-lg text-sm transition-colors",
-            isSelected(day) ? "bg-ph-brand font-semibold text-[var(--ph-on-accent)] shadow-ph" : isToday(day) ? "bg-ph-muted font-semibold text-ph-brand ring-1 ring-ph-brand/30" : "text-ph-ink hover:bg-ph-muted"
-          ),
+          role: "columnheader",
+          "aria-label": fullWeekDays[index],
+          className: "py-1 text-center text-xs font-medium text-ph-mutedtext",
           children: day
-        }
-      ) }, index))
+        },
+        day
+      )) }),
+      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)(
+            "div",
+            {
+              role: "gridcell",
+              "aria-selected": value ? isSameDay(value, date) : false,
+              className: "aspect-square",
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-date": dateKey(date),
+                  "aria-label": dateLabel(date),
+                  "aria-current": isSameDay(today, date) ? "date" : void 0,
+                  tabIndex: isSameDay(focusedDate, date) ? 0 : -1,
+                  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"
+                  ),
+                  children: date.getDate()
+                }
+              )
+            },
+            dateKey(date)
+          ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { role: "gridcell", "aria-hidden": "true", className: "aspect-square" }, `empty-${week}-${day}`)
+        ) }, week);
+      })
     ] })
   ] });
 }
 
 // src/components/ui/Tooltip.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var TooltipDelayContext = (0, import_react16.createContext)(0);
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var TooltipDelayContext = (0, import_react18.createContext)(0);
 function TooltipProvider({
   children,
   delayDuration = 0
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipDelayContext.Provider, { value: delayDuration, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipDelayContext.Provider, { value: delayDuration, children });
 }
-function tooltipPosition(trigger, side, align, offset) {
+function tooltipPosition(trigger, content, side, align, offset, collisionPadding) {
   const horizontal = align === "start" ? trigger.left : align === "end" ? trigger.right : trigger.left + trigger.width / 2;
   const vertical = align === "start" ? trigger.top : align === "end" ? trigger.bottom : trigger.top + trigger.height / 2;
-  if (side === "top")
-    return {
-      left: horizontal,
-      top: trigger.top - offset,
-      transform: "translate(-50%, -100%)"
-    };
-  if (side === "bottom")
-    return {
-      left: horizontal,
-      top: trigger.bottom + offset,
-      transform: "translate(-50%, 0)"
-    };
-  if (side === "left")
-    return {
-      left: trigger.left - offset,
-      top: vertical,
-      transform: "translate(-100%, -50%)"
-    };
+  const position = side === "top" ? { left: horizontal - content.width / 2, top: trigger.top - offset - content.height } : side === "bottom" ? { left: horizontal - content.width / 2, top: trigger.bottom + offset } : side === "left" ? { left: trigger.left - offset - content.width, top: vertical - content.height / 2 } : { left: trigger.right + offset, top: vertical - content.height / 2 };
+  const maxLeft = Math.max(collisionPadding, window.innerWidth - content.width - collisionPadding);
+  const maxTop = Math.max(collisionPadding, window.innerHeight - content.height - collisionPadding);
   return {
-    left: trigger.right + offset,
-    top: vertical,
-    transform: "translate(0, -50%)"
+    left: Math.min(Math.max(position.left, collisionPadding), maxLeft),
+    top: Math.min(Math.max(position.top, collisionPadding), maxTop)
   };
 }
 function Tooltip({
@@ -2622,18 +2996,21 @@ function Tooltip({
   side = "top",
   align = "center",
   sideOffset = 7,
+  collisionPadding = 8,
   className,
   open,
   defaultOpen = false,
   onOpenChange,
-  delayDuration
+  delayDuration,
+  disableHoverableContent = false
 }) {
-  const providerDelay = (0, import_react16.useContext)(TooltipDelayContext);
-  const generatedId = (0, import_react16.useId)().replace(/:/g, "");
-  const triggerRef = (0, import_react16.useRef)(null);
-  const timerRef = (0, import_react16.useRef)(null);
-  const [internalOpen, setInternalOpen] = (0, import_react16.useState)(defaultOpen);
-  const [position, setPosition] = (0, import_react16.useState)(null);
+  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 isOpen = open != null ? open : internalOpen;
   const triggerId = children.props.id;
   const tooltipId = triggerId ? `${triggerId}-tooltip` : `ph-tooltip-${generatedId}`;
@@ -2645,17 +3022,19 @@ function Tooltip({
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = null;
   }
-  function updatePosition() {
-    if (!triggerRef.current) return;
+  const updatePosition = (0, import_react18.useCallback)(() => {
+    if (!triggerRef.current || !contentRef.current) return;
     setPosition(
       tooltipPosition(
         triggerRef.current.getBoundingClientRect(),
+        contentRef.current.getBoundingClientRect(),
         side,
         align,
-        sideOffset
+        sideOffset,
+        collisionPadding
       )
     );
-  }
+  }, [align, collisionPadding, side, sideOffset]);
   function show(immediate) {
     clearTimer();
     updatePosition();
@@ -2667,7 +3046,18 @@ function Tooltip({
     clearTimer();
     setOpen(false);
   }
-  (0, import_react16.useEffect)(() => {
+  function hideFromTrigger() {
+    if (disableHoverableContent) {
+      hide();
+      return;
+    }
+    clearTimer();
+    timerRef.current = setTimeout(() => setOpen(false), 100);
+  }
+  (0, import_react18.useLayoutEffect)(() => {
+    if (isOpen) updatePosition();
+  }, [isOpen, updatePosition]);
+  (0, import_react18.useEffect)(() => {
     if (!isOpen) return;
     const reposition = () => updatePosition();
     window.addEventListener("resize", reposition);
@@ -2676,18 +3066,18 @@ function Tooltip({
       window.removeEventListener("resize", reposition);
       window.removeEventListener("scroll", reposition, true);
     };
-  });
-  (0, import_react16.useEffect)(() => () => clearTimer(), []);
+  }, [isOpen, updatePosition]);
+  (0, import_react18.useEffect)(() => () => clearTimer(), []);
   const describedBy = [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ");
-  const trigger = (0, import_react16.cloneElement)(children, { "aria-describedby": describedBy });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  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)(
       "span",
       {
         ref: triggerRef,
         className: "inline-flex",
         onMouseEnter: () => show(false),
-        onMouseLeave: hide,
+        onMouseLeave: hideFromTrigger,
         onFocusCapture: () => show(true),
         onBlurCapture: hide,
         onKeyDown: (event) => {
@@ -2696,19 +3086,26 @@ function Tooltip({
         children: trigger
       }
     ),
-    isOpen && position && typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    isOpen && typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "span",
         {
-          style: __spreadValues({ position: "fixed" }, position),
+          style: __spreadProps(__spreadValues({ position: "fixed" }, position), { visibility: position ? void 0 : "hidden" }),
           className: "pointer-events-none z-[200]",
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "span",
             {
+              ref: contentRef,
               id: tooltipId,
               role: "tooltip",
               "data-side": side,
-              className: cn("ph-tooltip-content", className),
+              className: cn(
+                "ph-tooltip-content",
+                !disableHoverableContent && "pointer-events-auto",
+                className
+              ),
+              onMouseEnter: disableHoverableContent ? void 0 : clearTimer,
+              onMouseLeave: disableHoverableContent ? void 0 : hide,
               children: content
             }
           )
@@ -2720,9 +3117,9 @@ function Tooltip({
 }
 
 // src/components/ui/EmptyState.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function EmptyState({ icon, title, description, action, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       className: cn(
@@ -2730,17 +3127,17 @@ function EmptyState({ icon, title, description, action, className }) {
         className
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
-        action && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mt-4", children: action })
+        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 })
       ]
     }
   );
 }
 
 // src/components/ui/FilterChips.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function FilterChips({
   chips,
   onToggle,
@@ -2748,20 +3145,20 @@ function FilterChips({
   className,
   "aria-label": ariaLabel = "Applied filters"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("ph-filter-chips", className), role: "group", "aria-label": ariaLabel, children: chips.map((chip) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ph-filter-chip__label", children: chip.label }),
-      chip.value != null ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ph-filter-chip__value", children: chip.value }) : null
+    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
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime26.jsx)(
+          onToggle ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "button",
             {
               type: "button",
@@ -2770,15 +3167,15 @@ function FilterChips({
               onClick: () => onToggle(chip.id),
               children: content
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ph-filter-chip__main", children: content }),
-          chip.active && onRemove ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ph-filter-chip__main", children: content }),
+          chip.active && onRemove ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "button",
             {
               type: "button",
               className: "ph-filter-chip__remove",
               "aria-label": `Remove ${label} filter`,
               onClick: () => onRemove(chip.id),
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconClose, { className: "h-3 w-3", "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconClose, { className: "h-3 w-3", "aria-hidden": true })
             }
           ) : null
         ]
@@ -2794,7 +3191,7 @@ function getChipText(chip) {
 }
 
 // src/components/ui/FilterBar.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function FilterBar(_a) {
   var _b = _a, {
     children,
@@ -2811,12 +3208,12 @@ function FilterBar(_a) {
     "resultCount",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-bar", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ph-filter-bar__controls", role: "group", "aria-label": label, children: [
+  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: [
       children,
-      onClear ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { type: "button", className: "ph-filter-bar__clear", onClick: onClear, children: clearLabel }) : null
+      onClear ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: "ph-filter-bar__clear", onClick: onClear, children: clearLabel }) : null
     ] }),
-    resultCount != null ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("output", { className: "ph-filter-bar__results", "aria-live": "polite", children: resultCount }) : null
+    resultCount != null ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("output", { className: "ph-filter-bar__results", "aria-live": "polite", children: resultCount }) : null
   ] }));
 }
 function FilterMenu({
@@ -2833,19 +3230,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_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     DropdownMenu,
     {
       "aria-label": `${label}: ${accessibleValue}`,
       align,
       disabled,
       className,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: cn("ph-filter-menu-trigger", selected && "ph-filter-menu-trigger--active"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconTuning, { className: "h-3.5 w-3.5", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ph-filter-menu-trigger__value", children: displayValue })
+      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 })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         DropdownRadioItem,
         {
           value: option.value,
@@ -2869,25 +3266,25 @@ function SortMenu({
   className
 }) {
   const selected = options.find((option) => option.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     DropdownMenu,
     {
       "aria-label": `${label}: ${selected ? getOptionText(selected) : "Choose sort order"}`,
       align,
       disabled,
       className,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "ph-filter-menu-trigger ph-sort-menu-trigger", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "ph-filter-menu-trigger ph-sort-menu-trigger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           IconArrowDown,
           {
             className: cn("h-3.5 w-3.5", direction === "ascending" && "rotate-180"),
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
-        selected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ph-filter-menu-trigger__value", children: selected.label }) : null
+        /* @__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
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         DropdownRadioItem,
         {
           value: option.value,
@@ -2907,7 +3304,8 @@ function getOptionText(option) {
 }
 
 // src/components/ui/Typography.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var toneMap2 = {
   default: "text-ph-ink",
   muted: "text-ph-mutedtext",
@@ -2929,57 +3327,65 @@ var weightMap = {
 function textClass(base, tone, weight, truncate, className) {
   return cn(base, toneMap2[tone], weight && weightMap[weight], truncate && "truncate", className);
 }
-function Display({
-  children,
-  tone = "default",
-  weight,
-  truncate,
-  className
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h1", { className: textClass("ph-hero-title", tone, weight, truncate, className), children });
-}
-function SectionTitle({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: textClass("ph-section-title", tone, weight, truncate, className), children });
-}
-function H1({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h1", { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children });
-}
-function H2({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
-}
-function H3({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
-}
-function H4({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
-}
-function H5({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
-}
-function P({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
-}
-function Small({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
-}
-function Caption({ children, tone = "muted", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children });
-}
-function Overline({ children, tone = "muted", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children });
-}
-function Lead({ children, tone = "subtle", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: textClass("ph-lead", tone, weight, truncate, className), children });
-}
-function Mono({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
-}
-function Label({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
-}
+var Display = (0, import_react19.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_runtime30.jsx)("h1", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-hero-title", tone, weight, truncate, className), children }));
+});
+var SectionTitle = (0, import_react19.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_runtime30.jsx)("h2", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-section-title", tone, weight, truncate, className), children }));
+});
+var H1 = (0, import_react19.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_runtime30.jsx)("h1", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children }));
+});
+var H2 = (0, import_react19.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_runtime30.jsx)("h2", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children }));
+});
+var H3 = (0, import_react19.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_runtime30.jsx)("h3", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children }));
+});
+var H4 = (0, import_react19.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_runtime30.jsx)("h4", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children }));
+});
+var H5 = (0, import_react19.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_runtime30.jsx)("h5", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-base font-semibold", tone, weight, truncate, className), children }));
+});
+var P = (0, import_react19.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_runtime30.jsx)("p", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children }));
+});
+var Small = (0, import_react19.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_runtime30.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children }));
+});
+var Caption = (0, import_react19.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_runtime30.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children }));
+});
+var Overline = (0, import_react19.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_runtime30.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children }));
+});
+var Lead = (0, import_react19.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_runtime30.jsx)("p", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-lead", tone, weight, truncate, className), children }));
+});
+var Mono = (0, import_react19.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_runtime30.jsx)("code", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children }));
+});
+var Label = (0, import_react19.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_runtime30.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_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var sizeMap4 = {
   xs: "h-8 w-8 text-[10px]",
   sm: "h-10 w-10 text-xs",
@@ -2988,9 +3394,9 @@ var sizeMap4 = {
   xl: "h-24 w-24 text-3xl"
 };
 var statusMap = {
-  online: "bg-emerald-500",
+  online: "bg-ph-success",
   offline: "bg-ph-mutedtext",
-  away: "bg-amber-400",
+  away: "bg-ph-warning",
   busy: "bg-ph-danger"
 };
 function Avatar(_a) {
@@ -3011,8 +3417,8 @@ function Avatar(_a) {
     "badge",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {
         className: cn(
@@ -3023,16 +3429,18 @@ function Avatar(_a) {
         children: icon || label
       }
     ),
-    status && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    status && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "span",
       {
+        role: "img",
+        "aria-label": `${status} status`,
         className: cn(
-          "absolute bottom-0 right-1 h-2.5 w-2.5 rounded-full border-2 border-white",
+          "absolute bottom-0 right-1 h-2.5 w-2.5 rounded-full border-2 border-ph-surface",
           statusMap[status]
         )
       }
     ),
-    badge && /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime31.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 })
   ] }));
 }
 function AvatarGroup(_a) {
@@ -3040,9 +3448,9 @@ function AvatarGroup(_a) {
   const items = Array.isArray(children) ? children : [children];
   const visible = max ? items.slice(0, max) : items;
   const remaining = max ? items.length - max : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
     visible,
-    remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Avatar,
       {
         label: `+${remaining}`,
@@ -3054,7 +3462,8 @@ function AvatarGroup(_a) {
 }
 
 // src/components/ui/Progress.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var sizeMap5 = {
   sm: "h-1",
   md: "h-2",
@@ -3068,7 +3477,9 @@ function Progress(_a) {
     label,
     showPercentage = false,
     size = "md",
-    className
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
   } = _b, props = __objRest(_b, [
     "value",
     "max",
@@ -3076,35 +3487,42 @@ function Progress(_a) {
     "label",
     "showPercentage",
     "size",
-    "className"
+    "className",
+    "aria-label",
+    "aria-labelledby"
   ]);
-  const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
-    (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: label }),
-      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "tabular-nums", children: [
+  const labelId = (0, import_react20.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_runtime32.jsxs)("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
+    (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { id: labelId, children: label }),
+      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "tabular-nums", children: [
         Math.round(percentage),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("ph-progress", sizeMap5[size]), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("ph-progress", sizeMap5[size]), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         className: cn("ph-progress-bar", color),
         style: { width: `${percentage}%` },
         role: "progressbar",
-        "aria-valuenow": value,
+        "aria-valuenow": safeValue,
         "aria-valuemin": 0,
-        "aria-valuemax": max
+        "aria-valuemax": safeMax,
+        "aria-label": label ? void 0 : ariaLabel != null ? ariaLabel : "Progress",
+        "aria-labelledby": label ? ariaLabelledBy != null ? ariaLabelledBy : labelId : ariaLabelledBy
       }
     ) })
   ] }));
 }
 
 // src/components/ui/Link.tsx
-var import_react17 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Link = (0, import_react17.forwardRef)(function Link2(_a, ref) {
+var import_react21 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Link = (0, import_react21.forwardRef)(function Link2(_a, ref) {
   var _b = _a, {
     className,
     disabled = false,
@@ -3114,7 +3532,7 @@ var Link = (0, import_react17.forwardRef)(function Link2(_a, ref) {
     "disabled",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "a",
     __spreadProps(__spreadValues({
       ref,
@@ -3133,10 +3551,10 @@ var Link = (0, import_react17.forwardRef)(function Link2(_a, ref) {
 Link.displayName = "Link";
 
 // src/components/ui/Spinner.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = 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_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "span",
     __spreadProps(__spreadValues({
       className: cn(
@@ -3148,9 +3566,9 @@ function Spinner(_a) {
       role: "status",
       "aria-label": "Loading"
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", opacity: 0.2 }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", opacity: 0.2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
       ] })
     })
   );
@@ -3158,7 +3576,7 @@ function Spinner(_a) {
 Spinner.displayName = "Spinner";
 
 // src/components/ui/Dot.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var colorMap = {
   green: "bg-ph-success",
   yellow: "bg-ph-warning",
@@ -3168,7 +3586,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_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "span",
     __spreadValues({
       className: cn(
@@ -3184,9 +3602,9 @@ function Dot(_a) {
 Dot.displayName = "Dot";
 
 // src/components/ui/Chip.tsx
-var import_react18 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var Chip = (0, import_react18.forwardRef)(function Chip2(_a, ref) {
+var import_react22 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Chip = (0, import_react22.forwardRef)(function Chip2(_a, ref) {
   var _b = _a, {
     selected = false,
     onRemove,
@@ -3205,18 +3623,18 @@ var Chip = (0, import_react18.forwardRef)(function Chip2(_a, ref) {
   );
   if (onRemove) {
     const removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove";
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: chipClassName, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: chipClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         __spreadProps(__spreadValues({
           ref,
           type: "button",
           className: "min-w-0 bg-transparent p-0 text-inherit"
         }, props), {
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ph-chip__text", children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-chip__text", children })
         })
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           type: "button",
@@ -3224,19 +3642,19 @@ var Chip = (0, import_react18.forwardRef)(function Chip2(_a, ref) {
           disabled: props.disabled,
           className: "ph-chip__remove",
           "aria-label": removeLabel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("path", { d: "M2 2l6 6M8 2l-6 6" }) })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "button",
     __spreadProps(__spreadValues({
       ref,
       type: "button",
       className: chipClassName
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ph-chip__text", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-chip__text", children })
     })
   );
 });
@@ -3359,6 +3777,7 @@ Chip.displayName = "Chip";
   IconVolume,
   IconVolumeOff,
   Input,
+  Kbd,
   Label,
   Lead,
   Link,
@@ -3390,6 +3809,8 @@ Chip.displayName = "Chip";
   THEME_INIT_SCRIPT,
   Table,
   Textarea,
+  ThemeDomSync,
+  ThemeSwitcher,
   Toggle,
   Tooltip,
   TooltipProvider,