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

package/dist/{chunk-YB4TBWHV.mjs → chunk-2EO5VCXP.mjs}

@@ -773,8 +773,10 @@ var Badge = forwardRef6(function Badge2(_a, ref) {
 Badge.displayName = "Badge";
 
 // src/components/ui/Card.tsx
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import {
+  forwardRef as forwardRef7
+} from "react";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var variantMap2 = {
   default: "",
   outlined: "border-2 border-ph-border",
@@ -793,7 +795,12 @@ var Card = forwardRef7(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",
@@ -805,31 +812,60 @@ var Card = forwardRef7(function Card2(_a, ref) {
     "className",
     "bodyClassName",
     "interactive",
+    "href",
+    "onClick",
+    "target",
+    "rel",
+    "type",
     "titleAs"
   ]);
-  return /* @__PURE__ */ jsxs5(
-    "div",
-    __spreadProps(__spreadValues({
-      ref,
-      className: cn(
-        "ph-card",
-        variantMap2[variant],
-        interactive && "ph-card-interactive",
-        className
-      )
-    }, props), {
-      children: [
-        media && /* @__PURE__ */ jsx8("div", { className: "ph-card-media", children: media }),
-        /* @__PURE__ */ jsxs5("div", { className: cn("ph-card-body", bodyClassName), children: [
-          title && /* @__PURE__ */ jsx8(Title2, { className: "ph-card-title", children: title }),
-          description && /* @__PURE__ */ jsx8("p", { className: "text-sm text-ph-subtle", children: description }),
-          children,
-          actions && /* @__PURE__ */ jsx8("div", { className: "ph-card-actions", children: actions })
-        ] }),
-        footer && /* @__PURE__ */ jsx8("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__ */ jsxs5(Fragment3, { children: [
+    media && /* @__PURE__ */ jsx8("div", { className: "ph-card-media", children: media }),
+    /* @__PURE__ */ jsxs5("div", { className: cn("ph-card-body", bodyClassName), children: [
+      title && /* @__PURE__ */ jsx8(Title3, { className: "ph-card-title", children: title }),
+      description && /* @__PURE__ */ jsx8("p", { className: "text-sm text-ph-subtle", children: description }),
+      children,
+      actions && /* @__PURE__ */ jsx8("div", { className: "ph-card-actions", children: actions })
+    ] }),
+    footer && /* @__PURE__ */ jsx8("div", { className: "border-t border-ph-border px-6 py-4 text-xs text-ph-subtle", children: footer })
+  ] });
+  if (isLink) {
+    return /* @__PURE__ */ jsx8(
+      "a",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cardClassName,
+        href,
+        target,
+        rel,
+        onClick
+      }, props), {
+        children: cardContent
+      })
+    );
+  }
+  if (isButton) {
+    return /* @__PURE__ */ jsx8(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        type: type != null ? type : "button",
+        className: cardClassName,
+        onClick
+      }, props), {
+        children: cardContent
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx8("div", __spreadProps(__spreadValues({ ref, className: cardClassName }, props), { children: cardContent }));
 });
 Card.displayName = "Card";
 
@@ -893,18 +929,45 @@ function Kbd(_a) {
     "aria-label"
   ]);
   if (variant === "token") {
-    return /* @__PURE__ */ jsx9("code", __spreadProps(__spreadValues({ className: cn("ph-code-token ph-kbd", className), "aria-label": ariaLabel }, props), { children }));
+    return /* @__PURE__ */ jsx9(
+      "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__ */ jsx9("kbd", __spreadProps(__spreadValues({ className: cn("ph-keycap", className), "aria-label": accessibleLabel }, props), { children: displayKeys[0] }));
+    return /* @__PURE__ */ jsx9(
+      "kbd",
+      __spreadProps(__spreadValues({
+        className: cn("ph-keycap", className),
+        role: accessibleLabel ? "img" : void 0,
+        "aria-label": accessibleLabel
+      }, props), {
+        children: displayKeys[0]
+      })
+    );
   }
-  return /* @__PURE__ */ jsx9("kbd", __spreadProps(__spreadValues({ className: cn("ph-shortcut-group ph-keycap", className), "aria-label": accessibleLabel }, props), { children: displayKeys.map((key, index) => /* @__PURE__ */ jsxs6("span", { className: "contents", children: [
-    index > 0 && separator != null ? /* @__PURE__ */ jsx9("span", { className: "ph-shortcut-separator", "aria-hidden": "true", children: separator }) : null,
-    /* @__PURE__ */ jsx9("span", { className: "ph-shortcut-key", "aria-hidden": accessibleLabel ? true : void 0, children: key })
-  ] }, index)) }));
+  return /* @__PURE__ */ jsx9(
+    "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__ */ jsxs6("span", { className: "contents", children: [
+        index > 0 && separator != null ? /* @__PURE__ */ jsx9("span", { className: "ph-shortcut-separator", "aria-hidden": "true", children: separator }) : null,
+        /* @__PURE__ */ jsx9("span", { className: "ph-shortcut-key", "aria-hidden": accessibleLabel ? true : void 0, children: key })
+      ] }, index))
+    })
+  );
 }
 function formatKey(key, platform) {
   var _a;
@@ -1038,7 +1101,7 @@ import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function SettingsNav(_a) {
   var _b = _a, { groups, className } = _b, props = __objRest(_b, ["groups", "className"]);
   return /* @__PURE__ */ jsx12("div", __spreadProps(__spreadValues({ className: cn("ph-settings-nav", className) }, props), { children: groups.map((group, index) => /* @__PURE__ */ jsxs9("div", { className: "ph-settings-nav__group", children: [
-    /* @__PURE__ */ jsx12("h3", { children: group.label }),
+    /* @__PURE__ */ jsx12("p", { className: "ph-settings-nav__heading", children: group.label }),
     /* @__PURE__ */ jsx12("div", { className: "ph-settings-nav__items", children: group.items.map((item) => /* @__PURE__ */ jsxs9(
       "a",
       {
@@ -1369,7 +1432,8 @@ function DropdownRadioItem(_a) {
 }
 
 // src/components/ui/Input.tsx
-import { forwardRef as forwardRef8, useId as useId3 } from "react";
+import { forwardRef as forwardRef8, useId as useId3, useState } from "react";
+import { Eye, EyeClosed } from "iconoir-react";
 
 // src/components/ui/FormField.tsx
 import { useId as useId2 } from "react";
@@ -1402,7 +1466,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
   };
@@ -1444,6 +1508,7 @@ var Input = forwardRef8(function Input2(_a, ref) {
     helperText,
     size = "md",
     variant = "default",
+    type = "text",
     className,
     wrapperClassName,
     disabled,
@@ -1457,6 +1522,7 @@ var Input = forwardRef8(function Input2(_a, ref) {
     "helperText",
     "size",
     "variant",
+    "type",
     "className",
     "wrapperClassName",
     "disabled",
@@ -1466,6 +1532,8 @@ var Input = forwardRef8(function Input2(_a, ref) {
   const autoId = useId3();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
+  const isPassword = type === "password";
+  const [revealed, setRevealed] = useState(false);
   return /* @__PURE__ */ jsx15(
     FormField,
     {
@@ -1477,23 +1545,39 @@ var Input = forwardRef8(function Input2(_a, ref) {
       required,
       disabled,
       className: wrapperClassName,
-      children: (fieldProps) => /* @__PURE__ */ jsx15(
-        "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__ */ jsxs12("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx15(
+          "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__ */ jsx15(
+          "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__ */ jsx15(EyeClosed, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ jsx15(Eye, { className: "h-4 w-4", "aria-hidden": true })
+          }
+        ) : null
+      ] })
     }
   );
 });
@@ -1631,7 +1715,7 @@ var Checkbox = forwardRef8(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",
@@ -1774,7 +1858,7 @@ FileUpload.displayName = "FileUpload";
 // src/components/ui/Modal.tsx
 import * as Dialog from "@radix-ui/react-dialog";
 import { useRef } from "react";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var sizeMap3 = {
   sm: "max-w-sm",
   md: "max-w-lg",
@@ -1791,6 +1875,7 @@ function Modal({
   footer,
   size = "md",
   className,
+  bodyClassName,
   customLayout = false,
   showCloseButton = true,
   closeOnOutsideClick = true,
@@ -1843,10 +1928,10 @@ function Modal({
             onPointerDownOutside: (event) => {
               if (!canDismiss || !closeOnOutsideClick) event.preventDefault();
             },
-            children: customLayout ? /* @__PURE__ */ jsxs13(Fragment3, { children: [
+            children: customLayout ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
               /* @__PURE__ */ jsx16(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
               children
-            ] }) : /* @__PURE__ */ jsxs13(Fragment3, { children: [
+            ] }) : /* @__PURE__ */ jsxs13(Fragment4, { children: [
               title ? null : /* @__PURE__ */ jsx16(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
               title || description || showCloseButton && canDismiss ? /* @__PURE__ */ jsxs13("header", { className: "ph-modal-header", children: [
                 /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
@@ -1863,7 +1948,7 @@ function Modal({
                   }
                 ) }) : null
               ] }) : null,
-              /* @__PURE__ */ jsx16("div", { className: "ph-modal-body", children }),
+              /* @__PURE__ */ jsx16("div", { className: cn("ph-modal-body", bodyClassName), children }),
               footer ? /* @__PURE__ */ jsx16("div", { className: "ph-modal-footer", children: footer }) : null
             ] })
           })
@@ -1991,14 +2076,25 @@ function Table({
   compact = false,
   ribbon = false,
   getRowStyle,
+  getRowKey,
   className,
   caption
 }) {
-  return /* @__PURE__ */ jsx19("div", { className: cn("ph-table-wrap", compact && "ph-table-compact", className), children: /* @__PURE__ */ jsxs16("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
-    caption && /* @__PURE__ */ jsx19("caption", { className: "sr-only", children: caption }),
-    /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { children: columns.map((col) => /* @__PURE__ */ jsx19("th", { className: col.className, children: col.header }, col.key)) }) }),
-    /* @__PURE__ */ jsx19("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx19("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ jsx19("td", { className: col.className, children: col.cell(row) }, col.key)) }, i)) })
-  ] }) });
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: cn("ph-table-wrap", compact && "ph-table-compact", className),
+      tabIndex: 0,
+      children: /* @__PURE__ */ jsxs16("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
+        caption && /* @__PURE__ */ jsx19("caption", { className: "sr-only", children: caption }),
+        /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { children: columns.map((col) => /* @__PURE__ */ jsx19("th", { className: col.className, children: col.header }, col.key)) }) }),
+        /* @__PURE__ */ jsx19("tbody", { children: data.map((row, i) => {
+          var _a;
+          return /* @__PURE__ */ jsx19("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ jsx19("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
@@ -2008,14 +2104,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"]);
@@ -2035,17 +2131,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",
@@ -2130,6 +2226,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(
@@ -2173,10 +2283,10 @@ function ThemeDomSync() {
 }
 
 // src/components/ui/ThemeSwitcher.tsx
-import { useEffect, useState } from "react";
+import { useEffect, useState as useState2 } from "react";
 import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function ThemeSwitcher({ className }) {
-  const [themeId, setThemeId] = useState(DEFAULT_THEME_ID);
+  const [themeId, setThemeId] = useState2(DEFAULT_THEME_ID);
   useEffect(() => {
     const id = readStoredTheme();
     persistTheme(id);
@@ -2202,7 +2312,7 @@ function ThemeSwitcher({ className }) {
 }
 
 // src/components/ui/Accordion.tsx
-import { useState as useState2 } from "react";
+import { useId as useId5, useState as useState3 } from "react";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function Accordion({
   items,
@@ -2210,7 +2320,8 @@ function Accordion({
   defaultOpen = [],
   className
 }) {
-  const [openItems, setOpenItems] = useState2(new Set(defaultOpen));
+  const [openItems, setOpenItems] = useState3(new Set(defaultOpen));
+  const idPrefix = useId5();
   const toggleItem = (id) => {
     setOpenItems((prev) => {
       const next = new Set(prev);
@@ -2225,41 +2336,58 @@ function Accordion({
       return next;
     });
   };
-  return /* @__PURE__ */ jsx22("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__ */ jsxs19("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
-      /* @__PURE__ */ jsxs19(
-        "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__ */ jsx22("span", { className: "font-semibold text-ph-ink", children: item.title }),
-            /* @__PURE__ */ jsx22(
-              IconChevronDown,
-              {
-                className: cn(
-                  "h-5 w-5 text-ph-mutedtext transition-transform duration-200",
-                  isOpen && "rotate-180"
-                )
-              }
-            )
-          ]
-        }
+  return /* @__PURE__ */ jsx22(
+    "div",
+    {
+      className: cn(
+        "divide-y divide-ph-border rounded-xl border border-ph-border bg-ph-surface",
+        className
       ),
-      /* @__PURE__ */ jsx22(
-        "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__ */ jsxs19("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
+          /* @__PURE__ */ jsxs19(
+            "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__ */ jsx22("span", { className: "font-semibold text-ph-ink", children: item.title }),
+                /* @__PURE__ */ jsx22(
+                  IconChevronDown,
+                  {
+                    className: cn(
+                      "h-5 w-5 text-ph-mutedtext transition-transform duration-200",
+                      isOpen && "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
           ),
-          children: /* @__PURE__ */ jsx22("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx22("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
-        }
-      )
-    ] }, item.id);
-  }) });
+          /* @__PURE__ */ jsx22(
+            "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__ */ jsx22("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx22("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
+            }
+          )
+        ] }, item.id);
+      })
+    }
+  );
 }
 
 // src/components/ui/SegmentedControl.tsx
@@ -2294,7 +2422,8 @@ function SegmentedControl({ options, value, onChange, className }) {
 }
 
 // src/components/ui/CommandPalette.tsx
-import { useState as useState3, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useId as useId6, useRef as useRef2, useState as useState4 } from "react";
+import * as Dialog2 from "@radix-ui/react-dialog";
 import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function CommandPalette({
   items,
@@ -2307,186 +2436,289 @@ function CommandPalette({
   inputId,
   inputDataTest
 }) {
-  const [query, setQuery] = useState3("");
-  const [selectedIndex, setSelectedIndex] = useState3(0);
+  const [query, setQuery] = useState4("");
+  const [selectedIndex, setSelectedIndex] = useState4(0);
   const inputRef = useRef2(null);
-  const panelRef = useRef2(null);
-  const previousFocusRef = useRef2(null);
+  const listboxRef = useRef2(null);
+  const restoreFocusRef = useRef2(null);
+  const generatedId = useId6();
+  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];
   useEffect2(() => {
-    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]);
   useEffect2(() => {
-    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]);
+  useEffect2(() => {
+    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__ */ jsx24(
-    "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__ */ jsxs21(
-        "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__ */ jsxs21("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
-              /* @__PURE__ */ jsx24(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
-              /* @__PURE__ */ jsx24(
-                "input",
+      children: /* @__PURE__ */ jsxs21(Dialog2.Portal, { children: [
+        /* @__PURE__ */ jsx24(
+          Dialog2.Overlay,
+          {
+            id,
+            "data-test": dataTest,
+            className: "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+          }
+        ),
+        /* @__PURE__ */ jsxs21(
+          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__ */ jsx24(Dialog2.Title, { className: "sr-only", children: "Command palette" }),
+              /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
+                /* @__PURE__ */ jsx24(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
+                /* @__PURE__ */ jsx24(
+                  "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__ */ jsx24("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__ */ jsx24("div", { ref: listboxRef, id: listboxId, role: "listbox", "aria-label": "Commands", className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ jsx24("div", { role: "status", className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ jsxs21(
+                "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__ */ jsx24("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
-            ] }),
-            /* @__PURE__ */ jsx24("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ jsx24("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ jsxs21(
-              "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__ */ jsx24("span", { "aria-hidden": "true", className: "h-5 w-5", children: item.icon }),
+                    /* @__PURE__ */ jsx24("span", { className: "flex-1", children: item.label }),
+                    item.shortcut && /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "h-5 w-5", children: item.icon }),
-                  /* @__PURE__ */ jsx24("span", { className: "flex-1", children: item.label }),
-                  item.shortcut && /* @__PURE__ */ jsx24("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
-import { useState as useState4 } from "react";
+import { useEffect as useEffect3, useId as useId7, useRef as useRef3, useState as useState5 } from "react";
 import { jsx as jsx25, jsxs as jsxs22 } from "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] = useState4(value || /* @__PURE__ */ new Date());
-  const today = /* @__PURE__ */ new Date();
+  const [currentMonth, setCurrentMonth] = useState5(() => startOfMonth(value != null ? value : /* @__PURE__ */ new Date()));
+  const [focusedDate, setFocusedDate] = useState5(() => startOfDay(value != null ? value : /* @__PURE__ */ new Date()));
+  const gridRef = useRef3(null);
+  const shouldFocusDateRef = useRef3(false);
+  const monthLabelId = useId7();
+  const today = startOfDay(/* @__PURE__ */ new Date());
+  useEffect3(() => {
+    if (!value) return;
+    const nextDate = startOfDay(value);
+    setCurrentMonth(startOfMonth(nextDate));
+    setFocusedDate(nextDate);
+  }, [value]);
+  useEffect3(() => {
+    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__ */ jsxs22("div", { className: cn("w-[280px] rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", className), children: [
     /* @__PURE__ */ jsxs22("div", { className: "mb-4 flex items-center justify-between", children: [
@@ -2494,13 +2726,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__ */ jsx25(IconChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ jsxs22("span", { className: "text-sm font-semibold text-ph-ink", children: [
+      /* @__PURE__ */ jsxs22("span", { id: monthLabelId, "aria-live": "polite", className: "text-sm font-semibold text-ph-ink", children: [
         monthNames[month],
         " ",
         year
@@ -2509,27 +2741,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__ */ jsx25(IconChevronRight, { className: "h-5 w-5", "aria-hidden": true })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs22("div", { className: "grid grid-cols-7 gap-1", children: [
-      weekDays.map((day) => /* @__PURE__ */ jsx25("div", { className: "py-1 text-center text-xs font-medium text-ph-mutedtext", children: day }, day)),
-      days.map((day, index) => /* @__PURE__ */ jsx25("div", { className: "aspect-square", children: day && /* @__PURE__ */ jsx25(
-        "button",
+    /* @__PURE__ */ jsxs22("div", { ref: gridRef, role: "grid", "aria-labelledby": monthLabelId, children: [
+      /* @__PURE__ */ jsx25("div", { role: "row", className: "grid grid-cols-7 gap-1", children: weekDays.map((day, index) => /* @__PURE__ */ jsx25(
+        "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__ */ jsx25("div", { role: "row", className: "grid grid-cols-7 gap-1", children: weekDates.map(
+          (date, day) => date ? /* @__PURE__ */ jsx25(
+            "div",
+            {
+              role: "gridcell",
+              "aria-selected": value ? isSameDay(value, date) : false,
+              className: "aspect-square",
+              children: /* @__PURE__ */ jsx25(
+                "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__ */ jsx25("div", { role: "gridcell", "aria-hidden": "true", className: "aspect-square" }, `empty-${week}-${day}`)
+        ) }, week);
+      })
     ] })
   ] });
 }
@@ -2538,14 +2799,16 @@ function Calendar({ value, onChange, className }) {
 import {
   cloneElement,
   createContext,
+  useCallback,
   useContext,
-  useEffect as useEffect3,
-  useId as useId5,
-  useRef as useRef3,
-  useState as useState5
+  useEffect as useEffect4,
+  useId as useId8,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef4,
+  useState as useState6
 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 var TooltipDelayContext = createContext(0);
 function TooltipProvider({
   children,
@@ -2553,31 +2816,15 @@ function TooltipProvider({
 }) {
   return /* @__PURE__ */ jsx26(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({
@@ -2586,18 +2833,21 @@ function Tooltip({
   side = "top",
   align = "center",
   sideOffset = 7,
+  collisionPadding = 8,
   className,
   open,
   defaultOpen = false,
   onOpenChange,
-  delayDuration
+  delayDuration,
+  disableHoverableContent = false
 }) {
   const providerDelay = useContext(TooltipDelayContext);
-  const generatedId = useId5().replace(/:/g, "");
-  const triggerRef = useRef3(null);
-  const timerRef = useRef3(null);
-  const [internalOpen, setInternalOpen] = useState5(defaultOpen);
-  const [position, setPosition] = useState5(null);
+  const generatedId = useId8().replace(/:/g, "");
+  const triggerRef = useRef4(null);
+  const contentRef = useRef4(null);
+  const timerRef = useRef4(null);
+  const [internalOpen, setInternalOpen] = useState6(defaultOpen);
+  const [position, setPosition] = useState6(null);
   const isOpen = open != null ? open : internalOpen;
   const triggerId = children.props.id;
   const tooltipId = triggerId ? `${triggerId}-tooltip` : `ph-tooltip-${generatedId}`;
@@ -2609,17 +2859,19 @@ function Tooltip({
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = null;
   }
-  function updatePosition() {
-    if (!triggerRef.current) return;
+  const updatePosition = 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();
@@ -2631,7 +2883,18 @@ function Tooltip({
     clearTimer();
     setOpen(false);
   }
-  useEffect3(() => {
+  function hideFromTrigger() {
+    if (disableHoverableContent) {
+      hide();
+      return;
+    }
+    clearTimer();
+    timerRef.current = setTimeout(() => setOpen(false), 100);
+  }
+  useLayoutEffect2(() => {
+    if (isOpen) updatePosition();
+  }, [isOpen, updatePosition]);
+  useEffect4(() => {
     if (!isOpen) return;
     const reposition = () => updatePosition();
     window.addEventListener("resize", reposition);
@@ -2640,18 +2903,18 @@ function Tooltip({
       window.removeEventListener("resize", reposition);
       window.removeEventListener("scroll", reposition, true);
     };
-  });
-  useEffect3(() => () => clearTimer(), []);
+  }, [isOpen, updatePosition]);
+  useEffect4(() => () => clearTimer(), []);
   const describedBy = [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ");
   const trigger = cloneElement(children, { "aria-describedby": describedBy });
-  return /* @__PURE__ */ jsxs23(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment5, { children: [
     /* @__PURE__ */ jsx26(
       "span",
       {
         ref: triggerRef,
         className: "inline-flex",
         onMouseEnter: () => show(false),
-        onMouseLeave: hide,
+        onMouseLeave: hideFromTrigger,
         onFocusCapture: () => show(true),
         onBlurCapture: hide,
         onKeyDown: (event) => {
@@ -2660,19 +2923,26 @@ function Tooltip({
         children: trigger
       }
     ),
-    isOpen && position && typeof document !== "undefined" ? createPortal(
+    isOpen && typeof document !== "undefined" ? createPortal(
       /* @__PURE__ */ jsx26(
         "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__ */ jsx26(
             "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
             }
           )
@@ -2695,7 +2965,7 @@ function EmptyState({ icon, title, description, action, className }) {
       ),
       children: [
         icon && /* @__PURE__ */ jsx27("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext", children: icon }),
-        /* @__PURE__ */ jsx27("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
+        /* @__PURE__ */ jsx27("h2", { className: "text-base font-semibold text-ph-ink", children: title }),
         description && /* @__PURE__ */ jsx27("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
         action && /* @__PURE__ */ jsx27("div", { className: "mt-4", children: action })
       ]
@@ -2704,7 +2974,7 @@ function EmptyState({ icon, title, description, action, className }) {
 }
 
 // src/components/ui/FilterChips.tsx
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function FilterChips({
   chips,
   onToggle,
@@ -2715,7 +2985,7 @@ function FilterChips({
   return /* @__PURE__ */ jsx28("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__ */ jsxs25(Fragment5, { children: [
+    const content = /* @__PURE__ */ jsxs25(Fragment6, { children: [
       /* @__PURE__ */ jsx28("span", { className: "ph-filter-chip__label", children: chip.label }),
       chip.value != null ? /* @__PURE__ */ jsx28("span", { className: "ph-filter-chip__value", children: chip.value }) : null
     ] });
@@ -2894,10 +3164,10 @@ function FilterControls(_a) {
 }
 
 // src/components/ui/CodeBlock.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
 function CodeBlock({ code, language = "tsx", filename, className }) {
-  const [copied, setCopied] = useState6(false);
+  const [copied, setCopied] = useState7(false);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(code);
     setCopied(true);
@@ -2959,7 +3229,7 @@ function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false,
 }
 
 // src/components/ui/ShowcaseWrapper.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 function ShowcaseWrapper({
   id,
@@ -2972,7 +3242,7 @@ function ShowcaseWrapper({
   className
 }) {
   var _a;
-  const [showCode, setShowCode] = useState7(false);
+  const [showCode, setShowCode] = useState8(false);
   const fallbackId = (_a = titleIdMap[title]) != null ? _a : title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
   return /* @__PURE__ */ jsxs30("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
     /* @__PURE__ */ jsxs30("div", { className: "ph-h2-rule mb-8", children: [
@@ -3062,11 +3332,16 @@ var titleIdMap = {
 };
 
 // src/components/ui/CollapsibleSection.tsx
-import { useId as useId6, useState as useState8 } from "react";
+import { useId as useId9, useState as useState9 } from "react";
 import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
-function CollapsibleSection({ title, children, defaultOpen = true, id }) {
-  const [isOpen, setIsOpen] = useState8(defaultOpen);
-  const generatedId = useId6();
+function CollapsibleSection({
+  title,
+  children,
+  defaultOpen = true,
+  id
+}) {
+  const [isOpen, setIsOpen] = useState9(defaultOpen);
+  const generatedId = useId9();
   const contentId = `${id != null ? id : generatedId}-content`;
   return /* @__PURE__ */ jsxs31("section", { id, className: "scroll-mt-20", children: [
     /* @__PURE__ */ jsxs31(
@@ -3097,6 +3372,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"
@@ -3108,6 +3386,7 @@ function CollapsibleSection({ title, children, defaultOpen = true, id }) {
 }
 
 // src/components/ui/Typography.tsx
+import { forwardRef as forwardRef9 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var toneMap2 = {
   default: "text-ph-ink",
@@ -3130,54 +3409,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__ */ jsx35("h1", { className: textClass("ph-hero-title", tone, weight, truncate, className), children });
-}
-function SectionTitle({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx35("h2", { className: textClass("ph-section-title", tone, weight, truncate, className), children });
-}
-function H1({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx35("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__ */ jsx35("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
-}
-function H3({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx35("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
-}
-function H4({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx35("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
-}
-function H5({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx35("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
-}
-function P({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx35("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
-}
-function Small({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx35("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
-}
-function Caption({ children, tone = "muted", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx35("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__ */ jsx35("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__ */ jsx35("p", { className: textClass("ph-lead", tone, weight, truncate, className), children });
-}
-function Mono({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx35("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
-}
-function Label({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx35("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
-}
+var Display = forwardRef9(function Display2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("h1", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-hero-title", tone, weight, truncate, className), children }));
+});
+var SectionTitle = forwardRef9(function SectionTitle2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("h2", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-section-title", tone, weight, truncate, className), children }));
+});
+var H1 = forwardRef9(function H12(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("h1", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children }));
+});
+var H2 = forwardRef9(function H22(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("h2", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children }));
+});
+var H3 = forwardRef9(function H32(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("h3", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children }));
+});
+var H4 = forwardRef9(function H42(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("h4", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children }));
+});
+var H5 = forwardRef9(function H52(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("h5", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-base font-semibold", tone, weight, truncate, className), children }));
+});
+var P = forwardRef9(function P2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("p", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children }));
+});
+var Small = forwardRef9(function Small2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children }));
+});
+var Caption = forwardRef9(function Caption2(_a, ref) {
+  var _b = _a, { children, tone = "muted", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children }));
+});
+var Overline = forwardRef9(function Overline2(_a, ref) {
+  var _b = _a, { children, tone = "muted", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("span", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children }));
+});
+var Lead = forwardRef9(function Lead2(_a, ref) {
+  var _b = _a, { children, tone = "subtle", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("p", __spreadProps(__spreadValues({ ref }, props), { className: textClass("ph-lead", tone, weight, truncate, className), children }));
+});
+var Mono = forwardRef9(function Mono2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("code", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children }));
+});
+var Label = forwardRef9(function Label2(_a, ref) {
+  var _b = _a, { children, tone = "default", weight, truncate, className } = _b, props = __objRest(_b, ["children", "tone", "weight", "truncate", "className"]);
+  return /* @__PURE__ */ jsx35("label", __spreadProps(__spreadValues({ ref }, props), { className: textClass("text-sm font-medium", tone, weight, truncate, className), children }));
+});
 
 // src/components/ui/Avatar.tsx
 import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -3189,9 +3476,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) {
@@ -3227,8 +3514,10 @@ function Avatar(_a) {
     status && /* @__PURE__ */ jsx36(
       "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]
         )
       }
@@ -3255,6 +3544,7 @@ function AvatarGroup(_a) {
 }
 
 // src/components/ui/Progress.tsx
+import { useId as useId10 } from "react";
 import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 var sizeMap5 = {
   sm: "h-1",
@@ -3269,7 +3559,9 @@ function Progress(_a) {
     label,
     showPercentage = false,
     size = "md",
-    className
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
   } = _b, props = __objRest(_b, [
     "value",
     "max",
@@ -3277,12 +3569,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 = useId10();
+  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__ */ jsxs33("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
     (label || showPercentage) && /* @__PURE__ */ jsxs33("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
-      label && /* @__PURE__ */ jsx37("span", { children: label }),
+      label && /* @__PURE__ */ jsx37("span", { id: labelId, children: label }),
       showPercentage && /* @__PURE__ */ jsxs33("span", { className: "tabular-nums", children: [
         Math.round(percentage),
         "%"
@@ -3294,18 +3591,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
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef10 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
-var Link = forwardRef9(function Link2(_a, ref) {
+var Link = forwardRef10(function Link2(_a, ref) {
   var _b = _a, {
     className,
     disabled = false,
@@ -3385,9 +3684,9 @@ function Dot(_a) {
 Dot.displayName = "Dot";
 
 // src/components/ui/Chip.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
-var Chip = forwardRef10(function Chip2(_a, ref) {
+var Chip = forwardRef11(function Chip2(_a, ref) {
   var _b = _a, {
     selected = false,
     onRemove,
@@ -3445,6 +3744,7 @@ Chip.displayName = "Chip";
 
 export {
   ButtonChrome,
+  cn,
   Button,
   IconBase,
   createIconBase,