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

package/dist/ui.js

@@ -914,7 +914,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",
@@ -926,31 +931,60 @@ 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",
-    __spreadProps(__spreadValues({
-      ref,
-      className: cn(
-        "ph-card",
-        variantMap2[variant],
-        interactive && "ph-card-interactive",
-        className
-      )
-    }, 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 })
-      ]
-    })
+  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";
 
@@ -1014,18 +1048,45 @@ function Kbd(_a) {
     "aria-label"
   ]);
   if (variant === "token") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", __spreadProps(__spreadValues({ className: cn("ph-code-token ph-kbd", className), "aria-label": ariaLabel }, props), { children }));
+    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), "aria-label": accessibleLabel }, props), { children: displayKeys[0] }));
+    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({ className: cn("ph-shortcut-group ph-keycap", className), "aria-label": accessibleLabel }, props), { children: displayKeys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "contents", children: [
-    index > 0 && separator != null ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ph-shortcut-separator", "aria-hidden": "true", children: separator }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ph-shortcut-key", "aria-hidden": accessibleLabel ? true : void 0, children: key })
-  ] }, index)) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "kbd",
+    __spreadProps(__spreadValues({
+      className: cn("ph-shortcut-group ph-keycap", className),
+      role: accessibleLabel ? "img" : void 0,
+      "aria-label": accessibleLabel
+    }, props), {
+      children: displayKeys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "contents", children: [
+        index > 0 && separator != null ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ph-shortcut-separator", "aria-hidden": "true", children: separator }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ph-shortcut-key", "aria-hidden": accessibleLabel ? true : void 0, children: key })
+      ] }, index))
+    })
+  );
 }
 function formatKey(key, platform) {
   var _a;
@@ -1159,7 +1220,7 @@ 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_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)("h3", { children: group.label }),
+    /* @__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",
       {
@@ -1491,6 +1552,7 @@ 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");
@@ -1523,7 +1585,7 @@ 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
   };
@@ -1565,6 +1627,7 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
     helperText,
     size = "md",
     variant = "default",
+    type = "text",
     className,
     wrapperClassName,
     disabled,
@@ -1578,6 +1641,7 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
     "helperText",
     "size",
     "variant",
+    "type",
     "className",
     "wrapperClassName",
     "disabled",
@@ -1587,6 +1651,8 @@ 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);
+  const isPassword = type === "password";
+  const [revealed, setRevealed] = (0, import_react10.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     FormField,
     {
@@ -1598,23 +1664,39 @@ var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
       required,
       disabled,
       className: wrapperClassName,
-      children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime15.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
+      ] })
     }
   );
 });
@@ -1752,7 +1834,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",
@@ -1912,6 +1994,7 @@ function Modal({
   footer,
   size = "md",
   className,
+  bodyClassName,
   customLayout = false,
   showCloseButton = true,
   closeOnOutsideClick = true,
@@ -1984,7 +2067,7 @@ function Modal({
                   }
                 ) }) : null
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ph-modal-body", children }),
+              /* @__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
             ] })
           })
@@ -2112,14 +2195,25 @@ function Table({
   compact = false,
   ribbon = false,
   getRowStyle,
+  getRowKey,
   className,
   caption
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("ph-table-wrap", compact && "ph-table-compact", className), 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) => /* @__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)) }, 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
@@ -2129,14 +2223,14 @@ var toneMap = {
   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"]);
@@ -2156,17 +2250,17 @@ 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",
@@ -2251,6 +2345,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(
@@ -2329,6 +2437,7 @@ function Accordion({
   className
 }) {
   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);
@@ -2343,41 +2452,58 @@ function Accordion({
       return next;
     });
   };
-  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), children: items.map((item) => {
-    const isOpen = openItems.has(item.id);
-    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),
-          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"
-                )
-              }
-            )
-          ]
-        }
+  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_runtime22.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_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);
-  }) });
+          /* @__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
@@ -2413,6 +2539,7 @@ function SegmentedControl({ options, value, onChange, className }) {
 
 // src/components/ui/CommandPalette.tsx
 var import_react16 = require("react");
+var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function CommandPalette({
   items,
@@ -2428,136 +2555,143 @@ function CommandPalette({
   const [query, setQuery] = (0, import_react16.useState)("");
   const [selectedIndex, setSelectedIndex] = (0, import_react16.useState)(0);
   const inputRef = (0, import_react16.useRef)(null);
-  const panelRef = (0, import_react16.useRef)(null);
-  const previousFocusRef = (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())
   );
+  const activeIndex = filtered.length ? Math.min(selectedIndex, filtered.length - 1) : 0;
+  const activeItem = filtered[activeIndex];
   (0, import_react16.useEffect)(() => {
-    var _a;
     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_react16.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;
+    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)(
-    "div",
+    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_runtime24.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_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",
+      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_runtime24.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_runtime24.jsx)("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.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_runtime24.jsx)("span", { 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", { 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
+              )) })
+            ]
+          }
+        )
+      ] })
     }
   );
 }
@@ -2565,46 +2699,142 @@ function CommandPalette({
 // src/components/ui/Calendar.tsx
 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_react17.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_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: [
@@ -2612,13 +2842,13 @@ function Calendar({ value, onChange, className }) {
         "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_runtime25.jsx)(IconChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.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
@@ -2627,27 +2857,56 @@ function Calendar({ value, onChange, className }) {
         "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_runtime25.jsx)(IconChevronRight, { className: "h-5 w-5", "aria-hidden": true })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "grid grid-cols-7 gap-1", children: [
-      weekDays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("div", { className: "aspect-square", children: day && /* @__PURE__ */ (0, import_jsx_runtime25.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);
+      })
     ] })
   ] });
 }
@@ -2663,31 +2922,15 @@ function TooltipProvider({
 }) {
   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({
@@ -2696,15 +2939,18 @@ function Tooltip({
   side = "top",
   align = "center",
   sideOffset = 7,
+  collisionPadding = 8,
   className,
   open,
   defaultOpen = false,
   onOpenChange,
-  delayDuration
+  delayDuration,
+  disableHoverableContent = false
 }) {
   const providerDelay = (0, import_react18.useContext)(TooltipDelayContext);
   const generatedId = (0, import_react18.useId)().replace(/:/g, "");
   const triggerRef = (0, import_react18.useRef)(null);
+  const contentRef = (0, import_react18.useRef)(null);
   const timerRef = (0, import_react18.useRef)(null);
   const [internalOpen, setInternalOpen] = (0, import_react18.useState)(defaultOpen);
   const [position, setPosition] = (0, import_react18.useState)(null);
@@ -2719,17 +2965,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();
@@ -2741,6 +2989,17 @@ function Tooltip({
     clearTimer();
     setOpen(false);
   }
+  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();
@@ -2750,7 +3009,7 @@ function Tooltip({
       window.removeEventListener("resize", reposition);
       window.removeEventListener("scroll", reposition, true);
     };
-  });
+  }, [isOpen, updatePosition]);
   (0, import_react18.useEffect)(() => () => clearTimer(), []);
   const describedBy = [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ");
   const trigger = (0, import_react18.cloneElement)(children, { "aria-describedby": describedBy });
@@ -2761,7 +3020,7 @@ function Tooltip({
         ref: triggerRef,
         className: "inline-flex",
         onMouseEnter: () => show(false),
-        onMouseLeave: hide,
+        onMouseLeave: hideFromTrigger,
         onFocusCapture: () => show(true),
         onBlurCapture: hide,
         onKeyDown: (event) => {
@@ -2770,19 +3029,26 @@ function Tooltip({
         children: trigger
       }
     ),
-    isOpen && position && typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
+    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_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
             }
           )
@@ -2805,7 +3071,7 @@ function EmptyState({ icon, title, description, action, className }) {
       ),
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
+        /* @__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 })
       ]
@@ -3174,7 +3440,12 @@ var titleIdMap = {
 // src/components/ui/CollapsibleSection.tsx
 var import_react21 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-function CollapsibleSection({ title, children, defaultOpen = true, id }) {
+function CollapsibleSection({
+  title,
+  children,
+  defaultOpen = true,
+  id
+}) {
   const [isOpen, setIsOpen] = (0, import_react21.useState)(defaultOpen);
   const generatedId = (0, import_react21.useId)();
   const contentId = `${id != null ? id : generatedId}-content`;
@@ -3207,6 +3478,9 @@ function CollapsibleSection({ title, children, defaultOpen = true, id }) {
       {
         id: contentId,
         "aria-hidden": !isOpen,
+        ref: (node) => {
+          if (node) node.toggleAttribute("inert", !isOpen);
+        },
         className: cn(
           "overflow-hidden transition-all duration-300",
           isOpen ? "max-h-[50000px] opacity-100" : "max-h-0 opacity-0"
@@ -3218,6 +3492,7 @@ function CollapsibleSection({ title, children, defaultOpen = true, id }) {
 }
 
 // src/components/ui/Typography.tsx
+var import_react22 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var toneMap2 = {
   default: "text-ph-ink",
@@ -3240,54 +3515,62 @@ 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_runtime35.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_runtime35.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_runtime35.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_runtime35.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_runtime35.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_runtime35.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_runtime35.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_runtime35.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_runtime35.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_runtime35.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_runtime35.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_runtime35.jsx)("p", { className: textClass("ph-lead", tone, weight, truncate, className), children });
-}
-function Mono({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsx)("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
-}
+var Display = (0, import_react22.forwardRef)(function Display2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h1", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-hero-title", tone, weight, truncate, className), children }));
+});
+var SectionTitle = (0, import_react22.forwardRef)(function SectionTitle2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-section-title", tone, weight, truncate, className), children }));
+});
+var H1 = (0, import_react22.forwardRef)(function H12(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h1", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children }));
+});
+var H2 = (0, import_react22.forwardRef)(function H22(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children }));
+});
+var H3 = (0, import_react22.forwardRef)(function H32(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children }));
+});
+var H4 = (0, import_react22.forwardRef)(function H42(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h4", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children }));
+});
+var H5 = (0, import_react22.forwardRef)(function H52(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h5", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-base font-semibold", tone, weight, truncate, className), children }));
+});
+var P = (0, import_react22.forwardRef)(function P2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children }));
+});
+var Small = (0, import_react22.forwardRef)(function Small2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children }));
+});
+var Caption = (0, import_react22.forwardRef)(function Caption2(_a, ref) {
+  var _b = _a, { children, tone = "muted", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children }));
+});
+var Overline = (0, import_react22.forwardRef)(function Overline2(_a, ref) {
+  var _b = _a, { children, tone = "muted", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children }));
+});
+var Lead = (0, import_react22.forwardRef)(function Lead2(_a, ref) {
+  var _b = _a, { children, tone = "subtle", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-lead", tone, weight, truncate, className), children }));
+});
+var Mono = (0, import_react22.forwardRef)(function Mono2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("code", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children }));
+});
+var Label = (0, import_react22.forwardRef)(function Label2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm font-medium", tone, weight, truncate, className), children }));
+});
 
 // src/components/ui/Avatar.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -3299,9 +3582,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) {
@@ -3337,8 +3620,10 @@ function Avatar(_a) {
     status && /* @__PURE__ */ (0, import_jsx_runtime36.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]
         )
       }
@@ -3365,6 +3650,7 @@ function AvatarGroup(_a) {
 }
 
 // src/components/ui/Progress.tsx
+var import_react23 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var sizeMap5 = {
   sm: "h-1",
@@ -3379,7 +3665,9 @@ function Progress(_a) {
     label,
     showPercentage = false,
     size = "md",
-    className
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
   } = _b, props = __objRest(_b, [
     "value",
     "max",
@@ -3387,12 +3675,17 @@ function Progress(_a) {
     "label",
     "showPercentage",
     "size",
-    "className"
+    "className",
+    "aria-label",
+    "aria-labelledby"
   ]);
-  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  const labelId = (0, import_react23.useId)();
+  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+  const safeValue = Number.isFinite(value) ? Math.min(safeMax, Math.max(0, value)) : 0;
+  const percentage = safeValue / safeMax * 100;
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
     (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { id: labelId, children: label }),
       showPercentage && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "tabular-nums", children: [
         Math.round(percentage),
         "%"
@@ -3404,18 +3697,20 @@ function Progress(_a) {
         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_react22 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var Link = (0, import_react22.forwardRef)(function Link2(_a, ref) {
+var Link = (0, import_react24.forwardRef)(function Link2(_a, ref) {
   var _b = _a, {
     className,
     disabled = false,
@@ -3495,9 +3790,9 @@ function Dot(_a) {
 Dot.displayName = "Dot";
 
 // src/components/ui/Chip.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var Chip = (0, import_react23.forwardRef)(function Chip2(_a, ref) {
+var Chip = (0, import_react25.forwardRef)(function Chip2(_a, ref) {
   var _b = _a, {
     selected = false,
     onRemove,