@xenide-io/the-old-ui-theme 0.2.9 → 0.3.0

package/dist/ui.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/ui/index.ts
@@ -51,6 +61,9 @@ var ui_exports = {};
 __export(ui_exports, {
   Accordion: () => Accordion,
   Alert: () => Alert,
+  AuthCard: () => AuthCard,
+  AuthDivider: () => AuthDivider,
+  AuthLayout: () => AuthLayout,
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
@@ -71,9 +84,15 @@ __export(ui_exports, {
   DropdownButton: () => DropdownButton,
   DropdownItem: () => DropdownItem,
   DropdownMenu: () => DropdownMenu,
+  DropdownRadioGroup: () => DropdownRadioGroup,
+  DropdownRadioItem: () => DropdownRadioItem,
   EmptyState: () => EmptyState,
   FileUpload: () => FileUpload,
+  FilterBar: () => FilterBar,
   FilterChips: () => FilterChips,
+  FilterControls: () => FilterControls,
+  FilterMenu: () => FilterMenu,
+  FormField: () => FormField,
   H1: () => H1,
   H2: () => H2,
   H3: () => H3,
@@ -87,6 +106,8 @@ __export(ui_exports, {
   Kbd: () => Kbd,
   Label: () => Label,
   Lead: () => Lead,
+  Loader: () => Loader,
+  LoadingState: () => LoadingState,
   Modal: () => Modal,
   Mono: () => Mono,
   Overline: () => Overline,
@@ -101,8 +122,12 @@ __export(ui_exports, {
   SearchInput: () => SearchInput,
   SegmentedControl: () => SegmentedControl,
   Select: () => Select,
+  SettingsLayout: () => SettingsLayout,
+  SettingsNav: () => SettingsNav,
   ShowcaseWrapper: () => ShowcaseWrapper,
+  Skeleton: () => Skeleton,
   Small: () => Small,
+  SortMenu: () => SortMenu,
   Stat: () => Stat,
   Stepper: () => Stepper,
   Table: () => Table,
@@ -119,6 +144,9 @@ __export(ui_exports, {
 });
 module.exports = __toCommonJS(ui_exports);
 
+// src/components/ui/Button.tsx
+var import_react = require("react");
+
 // src/components/ui/ButtonChrome.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function ButtonChrome({ label, icon, sideIcon, split }) {
@@ -163,7 +191,7 @@ var shapeClass = {
   square: "ph-btn-square",
   wide: "ph-btn-wide"
 };
-function Button(_a) {
+var Button = (0, import_react.forwardRef)(function Button2(_a, ref) {
   var _b = _a, {
     variant = "secondary",
     size = "md",
@@ -172,9 +200,12 @@ function Button(_a) {
     split = false,
     icon,
     sideIcon,
+    loading = false,
+    loadingLabel,
     className,
     children,
-    type = "button"
+    type = "button",
+    disabled
   } = _b, props = __objRest(_b, [
     "variant",
     "size",
@@ -183,23 +214,32 @@ function Button(_a) {
     "split",
     "icon",
     "sideIcon",
+    "loading",
+    "loadingLabel",
     "className",
     "children",
-    "type"
+    "type",
+    "disabled"
   ]);
-  const usesLemonChrome = variant === "primary" || variant === "secondary";
-  const content = usesLemonChrome ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonChrome, { label: children, icon, sideIcon, split }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    icon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ph-btn-icon", children: icon }) : null,
-    children != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ph-btn-label", children }) : null,
+  const usesLemonChrome = !["tertiary", "ghost", "link"].includes(variant);
+  const label = loadingLabel != null ? loadingLabel : children;
+  const leadingIcon = loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ph-btn-spinner", "aria-hidden": true }) : icon;
+  const content = usesLemonChrome ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonChrome, { label, icon: leadingIcon, sideIcon, split }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    leadingIcon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ph-btn-icon", children: leadingIcon }) : null,
+    label != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ph-btn-label", children: label }) : null,
     split ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ph-btn-split-divider", "aria-hidden": true }) : null,
     sideIcon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ph-btn-side-icon", children: sideIcon }) : null
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     __spreadProps(__spreadValues({
+      ref,
       type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
       className: cn(
         "ph-btn",
+        usesLemonChrome && "ph-btn-raised",
         outline && "ph-btn-outline",
         variantClass[variant],
         sizeClass[size],
@@ -211,11 +251,16 @@ function Button(_a) {
       children: content
     })
   );
-}
+});
+Button.displayName = "Button";
+
+// src/components/ui/Alert.tsx
+var import_react5 = require("react");
 
 // src/components/icons/IconBase.tsx
+var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function IconBase(_a) {
+var IconBase = (0, import_react2.forwardRef)(function IconBase2(_a, ref) {
   var _b = _a, {
     className,
     size,
@@ -223,7 +268,12 @@ function IconBase(_a) {
     viewBox = "0 0 24 24",
     fill: fill2 = "none",
     xmlns = "http://www.w3.org/2000/svg",
-    focusable = "false"
+    focusable = "false",
+    style,
+    role,
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
   } = _b, props = __objRest(_b, [
     "className",
     "size",
@@ -231,41 +281,55 @@ function IconBase(_a) {
     "viewBox",
     "fill",
     "xmlns",
-    "focusable"
+    "focusable",
+    "style",
+    "role",
+    "aria-hidden",
+    "aria-label",
+    "aria-labelledby"
   ]);
-  var _a2;
-  const dimensionProps = size != null ? { width: size, height: size } : {};
+  const hasAccessibleName = Boolean(ariaLabel || ariaLabelledBy);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",
-    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-      className: cn("ph-icon", className)
-    }, dimensionProps), {
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("ph-icon", className),
       viewBox,
       fill: fill2,
       xmlns,
       focusable,
-      "aria-hidden": (_a2 = props["aria-hidden"]) != null ? _a2 : true
-    }), props), {
+      role: role != null ? role : hasAccessibleName ? "img" : void 0,
+      "aria-hidden": ariaHidden != null ? ariaHidden : hasAccessibleName ? void 0 : true,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      style: __spreadValues({ width: size, height: size }, style)
+    }, props), {
       children
     })
   );
-}
+});
+IconBase.displayName = "IconBase";
 
 // src/components/icons/createIconBase.tsx
+var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function createIconBase({ viewBox = "0 0 24 24", paths }) {
-  return function IconGlyph(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconBase, __spreadProps(__spreadValues({ viewBox }, props), { children: paths }));
-  };
+function createIconBase({ name = "IconGlyph", viewBox = "0 0 24 24", paths }) {
+  const IconGlyph = (0, import_react3.forwardRef)(function IconGlyph2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconBase, __spreadProps(__spreadValues({ ref, viewBox }, props), { children: paths }));
+  });
+  IconGlyph.displayName = name;
+  return IconGlyph;
 }
-function createIconBasePath(d, viewBox = "0 0 24 24") {
+function createIconBasePath(d, viewBox = "0 0 24 24", name) {
   return createIconBase({
+    name,
     viewBox,
     paths: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d, fill: "currentColor" })
   });
 }
 
 // src/components/icons/icons.tsx
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var fill = (d) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d, fill: "currentColor" });
 var IconAreaChart = createIconBase({
@@ -374,6 +438,12 @@ var IconErrorOutline = createIconBase({
     "m11 15h2v2h-2zm0-8h2v6h-2zm.99-5c-5.52 0-9.99 4.48-9.99 10s4.47 10 9.99 10c5.53 0 10.01-4.48 10.01-10s-4.48-10-10.01-10zm.01 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   )
 });
+var IconInfo = createIconBase({
+  name: "IconInfo",
+  paths: fill(
+    "M11 10h2v7h-2v-7zm0-3h2v2h-2V7zm1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  )
+});
 var IconCancel = createIconBase({
   paths: fill(
     "m12 2c-5.53 0-10 4.47-10 10s4.47 10 10 10 10-4.47 10-10-4.47-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13-3.59 3.59-3.59-3.59-1.41 1.41 3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59z"
@@ -471,18 +541,145 @@ var IconToggle = createIconBasePath(
 var IconRocket = createIconBasePath(
   "M9.19 6.35c-2.04 2.29-3.44 5.58-3.57 5.89L2 10.69l4.05-4.05c.47-.47 1.15-.68 1.81-.55l1.33 1.26zm5.45 8.67l-1.33-1.26c-.66-.13-1.34.08-1.81.55L2 18.31l3.62 3.57c.31-.13 3.6-1.53 5.89-3.57 1.53-1.72 2.52-3.76 2.87-5.02zM12 2c-1.1 0-2 .9-2 2v1.09c2.84.48 5 2.94 5 5.91 0 2.97-2.16 5.43-5 5.91V20c0 1.1.9 2 2 2s2-.9 2-2v-1.09c-2.84-.48-5-2.94-5-5.91 0-2.97 2.16-5.43 5-5.91V4c0-1.1-.9-2-2-2z"
 );
-var IconTerminal = createIconBasePath("M20 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z");
+var IconTerminal = createIconBase({
+  name: "IconTerminal",
+  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "M3 4v16h18V4H3zm2 2h14v12H5V6zm2 2.2L10.8 12 7 15.8 8.4 17.2l5.2-5.2-5.2-5.2L7 8.2zM13 17h5v-2h-5v2z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+});
+var IconOldWindow = createIconBase({
+  name: "IconOldWindow",
+  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "M3 3v18h18V3H3zm2 7v9h14v-9H5zm1-4h2v1H6V6zm3 0h2v1H9V6z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+});
+var IconCommandCursor = createIconBase({
+  name: "IconCommandCursor",
+  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "M4 3v18h16V3H4zm2 2h12v14H6V5zm1.5 3.5L11 12l-3.5 3.5L9 17l5-5-5-5-1.5 1.5zM13 17h4v-2h-4v2z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+});
+var IconDataReel = createIconBase({
+  name: "IconDataReel",
+  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "M3 5v14h18V5H3zm2 2h14v10H5V7zm3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm8 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM10 11h4v1.5h-4V11z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+});
+var IconCodePreview = createIconBase({
+  name: "IconCodePreview",
+  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "M3 3v15h18V3H3zm2 2h14v11H5V5zm3.5 2L5 10.5 8.5 14l1.4-1.4-2.1-2.1 2.1-2.1L8.5 7zm7 0-1.4 1.4 2.1 2.1-2.1 2.1 1.4 1.4 3.5-3.5L15.5 7zM9 20h6v2H9v-2z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+});
+var IconInsightBoard = createIconBase({
+  name: "IconInsightBoard",
+  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "M3 3v18h18V3H3zm2 2h14v3H5V5zm0 5h6v9H5v-9zm8 0h6v4h-6v-4zm0 6h6v3h-6v-3zM6 6h2v1H6V6zm3 0h2v1H9V6z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+});
+var IconEventStream = createIconBase({
+  name: "IconEventStream",
+  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M5 4h2v16H5V4z", fill: "currentColor", opacity: "0.45" }),
+    fill("M6 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 8a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm5-6h10v2H11V5zm0 8h7v2h-7v-2zm0 5h10v2H11v-2z")
+  ] })
+});
+var IconFeatureGate = createIconBase({
+  name: "IconFeatureGate",
+  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "M4 3h2v18H4V3zm3 2h12l-3 4 3 4H7V5zm4 1-2.2 4H12l-1 4 4.2-5H12l1-3h-2z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+});
+var IconReplayFrame = createIconBase({
+  name: "IconReplayFrame",
+  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "M3 3v18h18V3H3zm2 2h14v11H5V5zm5 2v7l6-3.5L10 7zm-5 11h9v1H5v-1zm11 0h3v1h-3v-1z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+});
+var IconQueryStack = createIconBase({
+  name: "IconQueryStack",
+  paths: fill(
+    "M4 5c0-1.66 3.58-3 8-3s8 1.34 8 3-3.58 3-8 3-8-1.34-8-3zm0 3v3c0 1.66 3.58 3 8 3 .7 0 1.38-.04 2-.12V11.8c-.64.13-1.31.2-2 .2-4.42 0-8-1.34-8-3zm0 6v3c0 1.66 3.58 3 8 3 .7 0 1.38-.04 2-.12v-2.08c-.64.13-1.31.2-2 .2-4.42 0-8-1.34-8-3zm12-1 5 4-5 4v-3h-4v-2h4v-3z"
+  )
+});
+var IconExperimentSplit = createIconBase({
+  name: "IconExperimentSplit",
+  paths: fill(
+    "M5 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm14 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM5 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm1-6h2c0 2.2 1.8 4 4 4h2.17A3 3 0 0 1 19 11v2a3 3 0 0 1-4.83-2H12a6 6 0 0 1-6-6v4zm0 4a6 6 0 0 0 6-6h2a8 8 0 0 1-8 8v-2z"
+  )
+});
+var IconSurveyCard = createIconBase({
+  name: "IconSurveyCard",
+  paths: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "M3 3v18h18V3H3zm2 2h14v14H5V5zm2 2h7v2H7V7zm0 4h4v2H7v-2zm7-.4-2.5 2.5-1-1-1.4 1.4 2.4 2.4 3.9-3.9-1.4-1.4zM7 16h10v1H7v-1z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+});
 var IconActivity = createIconBasePath(
   "M22 12h-4l-3 9L9 3l-3 9H2v2h6.76l2.24-6.72L15 15l2.24-6.72L19 14h3v-2z"
 );
 var IconFlask = createIconBasePath(
   "M19.8 18.4L14 10.67V6.5l1.35-1.35c.39-.39.39-1.02 0-1.41L14.65 2.7a.9959.9959 0 0 0-1.41 0L9.35 6.54c-.39.39-.39 1.02 0 1.41L10.7 9.3v4.17L4.2 18.4C3.53 19.07 4.04 20.25 5 20.25h14c.96 0 1.47-1.18.8-1.85zM6.91 18.25l5.09-5.09 5.09 5.09H6.91z"
 );
-function IconSpinner(_a) {
+var IconSpinner = (0, import_react4.forwardRef)(function IconSpinner2(_a, ref) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSync, __spreadValues({ className: cn("ph-icon-spin", className) }, props));
-}
-var PH_ICONS = {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSync, __spreadValues({ ref, className: cn("ph-icon-spin", className) }, props));
+});
+IconSpinner.displayName = "IconSpinner";
+var CANONICAL_ICONS = {
   activity: IconActivity,
   areaChart: IconAreaChart,
   arrowDown: IconArrowDown,
@@ -497,74 +694,100 @@ var PH_ICONS = {
   chevronDown: IconChevronDown,
   chevronLeft: IconChevronLeft,
   chevronRight: IconChevronRight,
-  clipboard: IconClipboardEdit,
+  clipboardEdit: IconClipboardEdit,
   close: IconClose,
+  codePreview: IconCodePreview,
   cohort: IconCohort,
+  commandCursor: IconCommandCursor,
   copy: IconCopy,
   cumulativeChart: IconCumulativeChart,
+  dataReel: IconDataReel,
   database: IconDatabase,
   download: IconDownload,
   edit: IconEdit,
   errorOutline: IconErrorOutline,
+  eventStream: IconEventStream,
   exclamation: IconExclamation,
+  experimentSplit: IconExperimentSplit,
+  featureGate: IconFeatureGate,
   flag: IconFlag,
   flare: IconFlare,
   flask: IconFlask,
   gift: IconGift,
-  grid: IconGridView,
+  gridView: IconGridView,
   handClick: IconHandClick,
   home: IconHome,
-  info: IconErrorOutline,
+  info: IconInfo,
+  insightBoard: IconInsightBoard,
   layers: IconLayers,
-  list: IconListView,
+  listView: IconListView,
   logout: IconLogout,
   mail: IconMail,
   moon: IconMoon,
+  oldWindow: IconOldWindow,
   panelRight: IconPanelRight,
   person: IconPerson,
-  play: IconPlayCircle,
+  playCircle: IconPlayCircle,
   plus: IconPlus,
   premium: IconPremium,
   queryEditor: IconQueryEditor,
+  queryStack: IconQueryStack,
   radar: IconRadar,
   recording: IconRecording,
+  replayFrame: IconReplayFrame,
   robot: IconRobot,
   rocket: IconRocket,
   save: IconSave,
   search: IconSearch,
   selectEvents: IconSelectEvents,
-  settings: IconTuning,
   shoppingCart: IconShoppingCart,
   spinner: IconSpinner,
   star: IconStar,
   subArrowRight: IconSubArrowRight,
   sun: IconSun,
+  surveyCard: IconSurveyCard,
   surveys: IconSurveys,
   sync: IconSync,
   tableChart: IconTableChart,
   terminal: IconTerminal,
   toggle: IconToggle,
   trash: IconTrash,
-  trendingUp: IconArrowUp,
+  tuning: IconTuning,
   upload: IconUpload,
   volume: IconVolume,
-  volumeOff: IconVolumeOff,
+  volumeOff: IconVolumeOff
+};
+var PH_ICON_ALIASES = {
+  clipboard: IconClipboardEdit,
+  grid: IconGridView,
+  list: IconListView,
+  play: IconPlayCircle,
+  settings: IconTuning,
+  trendingUp: IconArrowUp,
   warning: IconExclamation,
   xCircle: IconCancel
 };
-function IconByName(_a) {
+var PH_ICONS = __spreadValues(__spreadValues({}, CANONICAL_ICONS), PH_ICON_ALIASES);
+for (const [name, Icon] of Object.entries(CANONICAL_ICONS)) {
+  const namedIcon = Icon;
+  if (!namedIcon.displayName || namedIcon.displayName === "IconGlyph") {
+    namedIcon.displayName = `Icon${name[0].toUpperCase()}${name.slice(1)}`;
+  }
+}
+var IconByName = (0, import_react4.forwardRef)(function IconByName2(_a, ref) {
   var _b = _a, { name } = _b, props = __objRest(_b, ["name"]);
   const Icon = PH_ICONS[name];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, __spreadValues({}, props));
-}
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, __spreadValues({ ref }, props));
+});
+IconByName.displayName = "IconByName";
 
 // src/components/ui/Alert.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var statusConfig = {
-  info: { icon: IconErrorOutline, color: "text-ph-info" },
-  success: { icon: IconCheckCircle, color: "text-ph-success" },
-  warning: { icon: IconExclamation, color: "text-ph-warning" },
-  danger: { icon: IconCancel, color: "text-ph-danger" }
+  info: { icon: IconInfo },
+  success: { icon: IconCheckCircle },
+  warning: { icon: IconExclamation },
+  danger: { icon: IconCancel }
 };
 var statusClassMap = {
   info: "ph-alert-info",
@@ -572,25 +795,43 @@ var statusClassMap = {
   warning: "ph-alert-warning",
   danger: "ph-alert-danger"
 };
-function Alert({
-  status = "info",
-  title,
-  description,
-  icon,
-  children,
-  className,
-  onDismiss
-}) {
+var Alert = (0, import_react5.forwardRef)(function Alert2(_a, ref) {
+  var _b = _a, {
+    status = "info",
+    title,
+    description,
+    icon,
+    children,
+    className,
+    onDismiss,
+    live,
+    dismissLabel = "Dismiss notification",
+    role
+  } = _b, props = __objRest(_b, [
+    "status",
+    "title",
+    "description",
+    "icon",
+    "children",
+    "className",
+    "onDismiss",
+    "live",
+    "dismissLabel",
+    "role"
+  ]);
   const config = statusConfig[status];
   const Icon = config.icon;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
-    {
-      role: "alert",
-      className: cn("ph-alert", statusClassMap[status], className),
+    __spreadProps(__spreadValues({
+      ref,
+      role: role != null ? role : live === "assertive" ? "alert" : live === "polite" ? "status" : void 0,
+      "aria-live": live,
+      className: cn("ph-alert", statusClassMap[status], className)
+    }, props), {
       children: [
-        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1", children: [
+        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "ph-alert-icon mt-0.5 h-5 w-5 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "min-w-0 flex-1", children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "font-semibold", children: title }),
           description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-1 text-sm text-ph-subtle", children: description }),
           children
@@ -600,17 +841,19 @@ function Alert({
           {
             type: "button",
             onClick: onDismiss,
-            className: "shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink",
-            "aria-label": "Dismiss",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
+            className: "ph-alert-dismiss",
+            "aria-label": dismissLabel,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconClose, { className: "h-4 w-4", "aria-hidden": true })
           }
         )
       ]
-    }
+    })
   );
-}
+});
+Alert.displayName = "Alert";
 
 // src/components/ui/Badge.tsx
+var import_react6 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var variantMap = {
   brand: "ph-badge-brand",
@@ -625,66 +868,95 @@ var sizeMap = {
   sm: "text-[10px] px-1.5 py-0.5",
   md: ""
 };
-function Badge({
-  variant = "neutral",
-  size = "md",
-  children,
-  className
-}) {
+var Badge = (0, import_react6.forwardRef)(function Badge2(_a, ref) {
+  var _b = _a, {
+    variant = "neutral",
+    size = "md",
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "children",
+    "className"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "span",
-    {
+    __spreadProps(__spreadValues({
+      ref,
       className: cn(
         "ph-badge",
         variantMap[variant],
         sizeMap[size],
         className
-      ),
+      )
+    }, props), {
       children
-    }
+    })
   );
-}
+});
+Badge.displayName = "Badge";
 
 // src/components/ui/Card.tsx
+var import_react7 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var variantMap2 = {
-  default: "bg-ph-surface",
-  outlined: "border-2 border-ph-border bg-ph-surface",
-  elevated: "bg-ph-surface shadow-ph-md",
-  highlighted: "border border-ph-brand/35 bg-orange-50/40 shadow-ph"
+  default: "",
+  outlined: "border-2 border-ph-border",
+  elevated: "ph-card-elevated",
+  highlighted: "ph-card-highlighted"
 };
-function Card({
-  children,
-  title,
-  description,
-  actions,
-  footer,
-  media,
-  variant = "default",
-  className,
-  bodyClassName
-}) {
+var Card = (0, import_react7.forwardRef)(function Card2(_a, ref) {
+  var _b = _a, {
+    children,
+    title,
+    description,
+    actions,
+    footer,
+    media,
+    variant = "default",
+    className,
+    bodyClassName,
+    interactive = false,
+    titleAs: Title2 = "h3"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "title",
+    "description",
+    "actions",
+    "footer",
+    "media",
+    "variant",
+    "className",
+    "bodyClassName",
+    "interactive",
+    "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: "-mx-6 -mt-6 mb-4", children: media }),
+        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)("h3", { className: "ph-card-title", children: title }),
+          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 })
       ]
-    }
+    })
   );
-}
+});
+Card.displayName = "Card";
 
 // src/components/ui/Drawer.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -735,21 +1007,269 @@ function Drawer({
 
 // src/components/ui/Kbd.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var platformLabels = {
+  text: {
+    command: "Command",
+    cmd: "Command",
+    option: "Option",
+    alt: "Alt",
+    control: "Control",
+    ctrl: "Control",
+    shift: "Shift"
+  },
+  mac: {
+    command: "\u2318",
+    cmd: "\u2318",
+    option: "\u2325",
+    alt: "\u2325",
+    control: "\u2303",
+    ctrl: "\u2303",
+    shift: "\u21E7"
+  },
+  windows: {
+    command: "Win",
+    cmd: "Win",
+    option: "Alt",
+    alt: "Alt",
+    control: "Ctrl",
+    ctrl: "Ctrl",
+    shift: "Shift"
+  }
+};
+var spokenLabels = {
+  "\u2318": "Command",
+  "\u2325": "Option",
+  "\u2303": "Control",
+  "\u21E7": "Shift",
+  "\u21B5": "Enter",
+  "\u23CE": "Enter",
+  "\u232B": "Backspace",
+  "\u238B": "Escape"
+};
 function Kbd(_a) {
-  var _b = _a, { variant = "shortcut", keys, children, className } = _b, props = __objRest(_b, ["variant", "keys", "children", "className"]);
+  var _b = _a, {
+    variant = "shortcut",
+    keys,
+    platform = "text",
+    separator,
+    children,
+    className,
+    "aria-label": ariaLabel
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "keys",
+    "platform",
+    "separator",
+    "children",
+    "className",
+    "aria-label"
+  ]);
   if (variant === "token") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", __spreadProps(__spreadValues({ className: cn("ph-kbd text-ph-ink", className) }, props), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", __spreadProps(__spreadValues({ className: cn("ph-code-token ph-kbd", className), "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_runtime10.jsx)("kbd", __spreadProps(__spreadValues({ className: cn("ph-keycap", className), "aria-label": accessibleLabel }, props), { children: displayKeys[0] }));
   }
-  const content = (keys == null ? void 0 : keys.length) ? keys.join(" ") : normalizeShortcut(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("kbd", __spreadProps(__spreadValues({ className: cn("ph-shortcut", className) }, props), { children: content }));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)("span", { className: "contents", children: [
+    index > 0 && separator != null ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ph-shortcut-separator", "aria-hidden": "true", children: separator }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ph-shortcut-key", "aria-hidden": accessibleLabel ? true : void 0, children: key })
+  ] }, index)) }));
 }
-function normalizeShortcut(children) {
-  if (typeof children !== "string") return children;
-  return children.replace(/\bCommand\b|\bCmd\b/g, "\u2318").replace(/\bOption\b|\bAlt\b/g, "\u2325").replace(/\bShift\b/g, "\u21E7").replace(/\bControl\b|\bCtrl\b/g, "\u2303");
+function formatKey(key, platform) {
+  var _a;
+  if (typeof key !== "string") return key;
+  return (_a = platformLabels[platform][key.toLowerCase()]) != null ? _a : key;
+}
+function getShortcutLabel(keys) {
+  const labels = keys.map((key) => {
+    var _a;
+    if (typeof key !== "string" && typeof key !== "number") return null;
+    const value = String(key);
+    return (_a = spokenLabels[value]) != null ? _a : value;
+  });
+  return labels.every((label) => label != null) ? labels.join(" + ") : void 0;
 }
 
-// src/components/ui/DropdownMenu.tsx
+// src/components/ui/Loader.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var loaderSizeClass = {
+  sm: "ph-loader-sm",
+  md: "ph-loader-md",
+  lg: "ph-loader-lg"
+};
+var skeletonShapeClass = {
+  title: "ph-skeleton-title",
+  text: "ph-skeleton-text",
+  "short-text": "ph-skeleton-text-short",
+  avatar: "ph-skeleton-avatar",
+  button: "ph-skeleton-button",
+  block: "ph-skeleton-block"
+};
+function Loader(_a) {
+  var _b = _a, {
+    variant = "spinner",
+    size = "md",
+    label = "Loading",
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "label",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "span",
+    __spreadProps(__spreadValues({
+      role: "status",
+      "aria-label": label,
+      className: cn("ph-loader", loaderSizeClass[size], className)
+    }, props), {
+      children: [
+        variant === "spinner" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-loading", "aria-hidden": true }) : null,
+        variant === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "ph-loading-dots", "aria-hidden": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", {})
+        ] }) : null,
+        variant === "pulse" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-loading-pulse", "aria-hidden": true }) : null
+      ]
+    })
+  );
+}
+function Skeleton(_a) {
+  var _b = _a, { shape = "text", className } = _b, props = __objRest(_b, ["shape", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "span",
+    __spreadValues({
+      className: cn("ph-skeleton", skeletonShapeClass[shape], className),
+      "aria-hidden": "true"
+    }, props)
+  );
+}
+function LoadingState(_a) {
+  var _b = _a, {
+    label = "Loading",
+    title = "Loading",
+    description,
+    variant = "spinner",
+    size = "lg",
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "title",
+    "description",
+    "variant",
+    "size",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-loading-state", className), role: "status", "aria-label": label }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loader, { variant, size, label, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ph-loading-state__copy", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: description }) : null
+    ] })
+  ] }));
+}
+
+// src/components/ui/AuthLayout.tsx
+var import_react8 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function AuthLayout(_a) {
+  var _b = _a, { brand, footer, aside, children, className } = _b, props = __objRest(_b, ["brand", "footer", "aside", "children", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-auth-layout", aside != null && "ph-auth-layout--split", className) }, props), { children: [
+    aside ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("aside", { className: "ph-auth-layout__aside", children: aside }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ph-auth-layout__main", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ph-auth-layout__column", children: [
+      brand ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ph-auth-layout__brand", children: brand }) : null,
+      children,
+      footer ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("footer", { className: "ph-auth-layout__footer", children: footer }) : null
+    ] }) })
+  ] }));
+}
+function AuthCard(_a) {
+  var _b = _a, { title, description, footer, children, className } = _b, props = __objRest(_b, ["title", "description", "footer", "children", "className"]);
+  const titleId = (0, import_react8.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", __spreadProps(__spreadValues({ className: cn("ph-auth-card", className), "aria-labelledby": titleId }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: "ph-auth-card__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h1", { id: titleId, children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ph-auth-card__body", children }),
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("footer", { className: "ph-auth-card__footer", children: footer }) : null
+  ] }));
+}
+function AuthDivider(_a) {
+  var _b = _a, { children = "or continue with", className } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-auth-divider", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children }) }));
+}
+
+// src/components/ui/SettingsLayout.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function SettingsNav(_a) {
+  var _b = _a, { groups, className } = _b, props = __objRest(_b, ["groups", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-settings-nav", className) }, props), { children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ph-settings-nav__group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { children: group.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ph-settings-nav__items", children: group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "a",
+      {
+        href: item.href,
+        className: cn("ph-settings-nav__item", item.active && "ph-settings-nav__item--active"),
+        "aria-current": item.active ? "page" : void 0,
+        children: [
+          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: item.label }),
+          item.badge ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ph-settings-nav__badge", children: item.badge }) : null
+        ]
+      },
+      item.id
+    )) })
+  ] }, index)) }));
+}
+function SettingsLayout(_a) {
+  var _b = _a, {
+    title,
+    description,
+    actions,
+    navigation,
+    navigationLabel = "Settings",
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "title",
+    "description",
+    "actions",
+    "navigation",
+    "navigationLabel",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", __spreadProps(__spreadValues({ className: cn("ph-settings-layout", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("header", { className: "ph-settings-layout__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ph-settings-layout__actions", children: actions }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("details", { className: "ph-settings-layout__mobile-nav", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("summary", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconTuning, { className: "h-4 w-4", "aria-hidden": true }),
+        "Settings menu"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { "aria-label": navigationLabel, children: navigation })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ph-settings-layout__grid", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("aside", { className: "ph-settings-layout__sidebar", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { "aria-label": navigationLabel, children: navigation }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ph-settings-layout__content", children })
+    ] })
+  ] }));
+}
+
+// src/components/ui/DropdownMenu.tsx
+var DropdownPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var sizeClass2 = {
   xs: "ph-btn-xs",
   sm: "ph-btn-sm",
@@ -761,40 +1281,95 @@ var variantClass2 = {
   secondary: "ph-btn-secondary",
   accent: "ph-btn-accent"
 };
-function dropdownPanelClass(align, panelClassName) {
-  return cn(
-    "ph-dropdown-panel absolute top-full z-50 mt-0",
-    align === "end" ? "right-0" : "left-0",
-    panelClassName
-  );
+function DropdownContent({
+  children,
+  align = "start",
+  side = "bottom",
+  sideOffset = 7,
+  alignOffset = 0,
+  collisionPadding = 8,
+  avoidCollisions = true,
+  panelClassName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    DropdownPrimitive.Content,
+    {
+      className: cn("ph-dropdown-panel", panelClassName),
+      align,
+      side,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      avoidCollisions,
+      sticky: "partial",
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Arrow, { className: "ph-dropdown-arrow", width: 12, height: 6 })
+      ]
+    }
+  ) });
 }
 function DropdownMenu(_a) {
   var _b = _a, {
     trigger,
     children,
-    align = "start",
+    align,
+    side,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    avoidCollisions,
     className,
     panelClassName,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    open,
+    defaultOpen,
+    onOpenChange,
+    modal = false,
+    disabled
   } = _b, props = __objRest(_b, [
     "trigger",
     "children",
     "align",
+    "side",
+    "sideOffset",
+    "alignOffset",
+    "collisionPadding",
+    "avoidCollisions",
     "className",
     "panelClassName",
-    "aria-label"
+    "aria-label",
+    "open",
+    "defaultOpen",
+    "onOpenChange",
+    "modal",
+    "disabled"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("details", __spreadProps(__spreadValues({ className: cn("relative", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      "summary",
-      {
-        className: "cursor-pointer list-none [&::-webkit-details-marker]:hidden",
-        "aria-label": ariaLabel,
-        children: trigger
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: dropdownPanelClass(align, panelClassName), children })
-  ] }));
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    DropdownPrimitive.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      modal,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "ph-dropdown-trigger", "aria-label": ariaLabel, children: trigger }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          DropdownContent,
+          {
+            align,
+            side,
+            sideOffset,
+            alignOffset,
+            collisionPadding,
+            avoidCollisions,
+            panelClassName,
+            children
+          }
+        )
+      ]
+    }
+  ) }));
 }
 function DropdownButton(_a) {
   var _b = _a, {
@@ -806,10 +1381,20 @@ function DropdownButton(_a) {
     icon,
     sideIcon,
     children,
-    align = "start",
+    align,
+    side,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    avoidCollisions,
     className,
     panelClassName,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    open,
+    defaultOpen,
+    onOpenChange,
+    modal = false,
+    disabled
   } = _b, props = __objRest(_b, [
     "label",
     "variant",
@@ -820,55 +1405,154 @@ function DropdownButton(_a) {
     "sideIcon",
     "children",
     "align",
+    "side",
+    "sideOffset",
+    "alignOffset",
+    "collisionPadding",
+    "avoidCollisions",
     "className",
     "panelClassName",
-    "aria-label"
+    "aria-label",
+    "open",
+    "defaultOpen",
+    "onOpenChange",
+    "modal",
+    "disabled"
   ]);
-  const usesLemonChrome = variant === "primary" || variant === "secondary";
-  const chevron = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
-  const trailing = sideIcon != null ? sideIcon : chevron;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("details", __spreadProps(__spreadValues({ className: cn("relative", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      "summary",
-      {
-        className: cn(
-          "ph-btn cursor-pointer list-none [&::-webkit-details-marker]:hidden",
-          variantClass2[variant],
-          outline && "ph-btn-outline",
-          sizeClass2[size],
-          split && "ph-btn-split"
-        ),
-        "aria-label": ariaLabel != null ? ariaLabel : label,
-        children: usesLemonChrome ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ButtonChrome, { label, icon, sideIcon: trailing, split }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          icon != null ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-btn-icon", children: icon }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-btn-label", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-btn-side-icon", children: trailing })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: dropdownPanelClass(align, panelClassName), children })
-  ] }));
+  const trailing = sideIcon != null ? sideIcon : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    DropdownPrimitive.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      modal,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: cn(
+              "ph-btn ph-btn-raised ph-dropdown-button",
+              variantClass2[variant],
+              outline && "ph-btn-outline",
+              sizeClass2[size],
+              split && "ph-btn-split"
+            ),
+            "aria-label": ariaLabel,
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ButtonChrome, { label, icon, sideIcon: trailing, split })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          DropdownContent,
+          {
+            align,
+            side,
+            sideOffset,
+            alignOffset,
+            collisionPadding,
+            avoidCollisions,
+            panelClassName,
+            children
+          }
+        )
+      ]
+    }
+  ) }));
 }
 function DropdownItem(_a) {
+  var _b = _a, { className, children, disabled } = _b, props = __objRest(_b, ["className", "children", "disabled"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      disabled,
+      className: cn("ph-dropdown-item w-full text-left", className)
+    }, props), {
+      children
+    })
+  ) });
+}
+function DropdownRadioGroup(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.RadioGroup, __spreadValues({}, props));
+}
+function DropdownRadioItem(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DropdownPrimitive.RadioItem, __spreadProps(__spreadValues({ className: cn("ph-dropdown-item ph-dropdown-radio-item", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ph-dropdown-item-indicator", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconCheck, { className: "h-3.5 w-3.5" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children })
+  ] }));
+}
+
+// src/components/ui/Input.tsx
+var import_react10 = require("react");
+
+// src/components/ui/FormField.tsx
+var import_react9 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function FormField(_a) {
   var _b = _a, {
-    className,
-    children
+    controlId,
+    label,
+    hideLabel = false,
+    helperText,
+    error,
+    required = false,
+    disabled = false,
+    children,
+    className
   } = _b, props = __objRest(_b, [
-    "className",
-    "children"
+    "controlId",
+    "label",
+    "hideLabel",
+    "helperText",
+    "error",
+    "required",
+    "disabled",
+    "children",
+    "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", __spreadProps(__spreadValues({ type: "button", className: cn("ph-dropdown-item w-full text-left", className) }, props), { children }));
+  const generatedId = (0, import_react9.useId)();
+  const id = controlId != null ? controlId : generatedId;
+  const descriptionId = helperText && !error ? `${id}-description` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const controlProps = {
+    id,
+    "aria-describedby": descriptionId,
+    "aria-errormessage": errorId,
+    "aria-invalid": error ? true : void 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-field", className) }, props), { children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "label",
+      {
+        htmlFor: id,
+        className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
+        children: [
+          label,
+          required ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
+        ]
+      }
+    ) : null,
+    typeof children === "function" ? children(controlProps) : children,
+    descriptionId ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { id: descriptionId, className: "mt-1 text-xs text-ph-subtle", children: helperText }) : null,
+    errorId ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { id: errorId, className: "mt-1 text-xs font-medium text-ph-danger", children: error }) : null
+  ] }));
 }
 
 // src/components/ui/Input.tsx
-var import_react = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var sizeMap3 = {
   sm: "ph-input-sm",
   md: "",
   lg: "ph-input-lg"
 };
-function Input(_a) {
+function joinIds(...ids) {
+  const value = ids.filter(Boolean).join(" ");
+  return value || void 0;
+}
+var Input = (0, import_react10.forwardRef)(function Input2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -879,7 +1563,9 @@ function Input(_a) {
     variant = "default",
     className,
     wrapperClassName,
-    disabled
+    disabled,
+    required,
+    "aria-describedby": ariaDescribedBy
   } = _b, props = __objRest(_b, [
     "id",
     "label",
@@ -890,45 +1576,46 @@ function Input(_a) {
     "variant",
     "className",
     "wrapperClassName",
-    "disabled"
+    "disabled",
+    "required",
+    "aria-describedby"
   ]);
-  const autoId = (0, import_react.useId)();
+  const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "label",
-      {
-        htmlFor: id,
-        className: cn(
-          "ph-label",
-          hideLabel && "sr-only",
-          disabled && "opacity-50"
-        ),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "input",
-      __spreadValues({
-        id,
-        disabled,
-        "aria-invalid": hasError || void 0,
-        className: cn(
-          "ph-input w-full",
-          sizeMap3[size],
-          variant === "ghost" && "ph-input-ghost",
-          hasError && "ph-input-error",
-          disabled && "cursor-not-allowed opacity-60",
-          className
-        )
-      }, props)
-    ),
-    helperText && !hasError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
-  ] });
-}
-function Select(_a) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    FormField,
+    {
+      controlId: id,
+      label,
+      hideLabel,
+      helperText,
+      error,
+      required,
+      disabled,
+      className: wrapperClassName,
+      children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "input",
+        __spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
+          ref,
+          disabled,
+          required,
+          "aria-describedby": joinIds(ariaDescribedBy, fieldProps["aria-describedby"]),
+          className: cn(
+            "ph-input w-full",
+            sizeMap3[size],
+            variant === "ghost" && "ph-input-ghost",
+            hasError && "ph-input-error",
+            disabled && "cursor-not-allowed opacity-60",
+            className
+          )
+        }), props)
+      )
+    }
+  );
+});
+Input.displayName = "Input";
+var Select = (0, import_react10.forwardRef)(function Select2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -939,7 +1626,9 @@ function Select(_a) {
     className,
     wrapperClassName,
     disabled,
-    children
+    children,
+    required,
+    "aria-describedby": ariaDescribedBy
   } = _b, props = __objRest(_b, [
     "id",
     "label",
@@ -950,42 +1639,34 @@ function Select(_a) {
     "className",
     "wrapperClassName",
     "disabled",
-    "children"
+    "children",
+    "required",
+    "aria-describedby"
   ]);
-  const autoId = (0, import_react.useId)();
+  const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "label",
-      {
-        htmlFor: id,
-        className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "select",
-      __spreadProps(__spreadValues({
-        id,
-        disabled,
-        "aria-invalid": hasError || void 0,
-        className: cn(
-          "ph-select w-full",
-          sizeMap3[size],
-          hasError && "border-ph-danger focus:border-ph-danger focus:ring-ph-danger/20",
-          disabled && "cursor-not-allowed opacity-60",
-          className
-        )
-      }, props), {
-        children
-      })
-    ),
-    helperText && !hasError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
-  ] });
-}
-function Textarea(_a) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "select",
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
+      ref,
+      disabled,
+      required,
+      "aria-describedby": joinIds(ariaDescribedBy, fieldProps["aria-describedby"]),
+      className: cn(
+        "ph-select w-full",
+        sizeMap3[size],
+        hasError && "ph-input-error",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      )
+    }), props), {
+      children
+    })
+  ) });
+});
+Select.displayName = "Select";
+var Textarea = (0, import_react10.forwardRef)(function Textarea2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -995,50 +1676,44 @@ function Textarea(_a) {
     size = "md",
     className,
     wrapperClassName,
-    disabled
+    disabled,
+    required,
+    "aria-describedby": ariaDescribedBy
   } = _b, props = __objRest(_b, [
     "id",
     "label",
     "hideLabel",
     "error",
-    "helperText",
-    "size",
-    "className",
-    "wrapperClassName",
-    "disabled"
-  ]);
-  const autoId = (0, import_react.useId)();
-  const id = idProp != null ? idProp : autoId;
-  const hasError = Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "label",
-      {
-        htmlFor: id,
-        className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "textarea",
-      __spreadValues({
-        id,
-        disabled,
-        "aria-invalid": hasError || void 0,
-        className: cn(
-          "ph-textarea w-full",
-          sizeMap3[size],
-          hasError && "border-ph-danger focus:border-ph-danger focus:ring-ph-danger/20",
-          disabled && "cursor-not-allowed opacity-60",
-          className
-        )
-      }, props)
-    ),
-    helperText && !hasError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
-  ] });
-}
-function Checkbox(_a) {
+    "helperText",
+    "size",
+    "className",
+    "wrapperClassName",
+    "disabled",
+    "required",
+    "aria-describedby"
+  ]);
+  const autoId = (0, import_react10.useId)();
+  const id = idProp != null ? idProp : autoId;
+  const hasError = Boolean(error);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "textarea",
+    __spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
+      ref,
+      disabled,
+      required,
+      "aria-describedby": joinIds(ariaDescribedBy, fieldProps["aria-describedby"]),
+      className: cn(
+        "ph-textarea w-full",
+        sizeMap3[size],
+        hasError && "ph-input-error",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      )
+    }), props)
+  ) });
+});
+Textarea.displayName = "Textarea";
+var Checkbox = (0, import_react10.forwardRef)(function Checkbox2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1046,7 +1721,8 @@ function Checkbox(_a) {
     helperText,
     className,
     wrapperClassName,
-    disabled
+    disabled,
+    "aria-describedby": ariaDescribedBy
   } = _b, props = __objRest(_b, [
     "id",
     "label",
@@ -1054,33 +1730,45 @@ function Checkbox(_a) {
     "helperText",
     "className",
     "wrapperClassName",
-    "disabled"
+    "disabled",
+    "aria-describedby"
   ]);
-  const autoId = (0, import_react.useId)();
+  const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-control-row", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "input",
-      __spreadValues({
-        id,
-        type: "checkbox",
-        disabled,
-        "aria-invalid": hasError || void 0,
-        className: cn(
-          "ph-checkbox",
-          hasError && "border-ph-danger",
-          disabled && "cursor-not-allowed opacity-60",
-          className
-        )
-      }, props)
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
-    helperText && !hasError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 text-xs text-ph-subtle", children: helperText }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 text-xs font-medium text-ph-danger", children: error })
+  const descriptionId = helperText && !hasError ? `${id}-description` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("ph-control-row", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "ph-checkbox-wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "input",
+        __spreadValues({
+          ref,
+          id,
+          type: "checkbox",
+          disabled,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": joinIds(ariaDescribedBy, descriptionId),
+          "aria-errormessage": errorId,
+          className: cn(
+            "ph-checkbox",
+            hasError && "border-ph-danger",
+            disabled && "cursor-not-allowed opacity-60",
+            className
+          )
+        }, props)
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconCheck, { className: "ph-checkbox-icon", "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ph-control-copy", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
+      descriptionId ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: descriptionId, className: "text-xs text-ph-subtle", children: helperText }) : null,
+      errorId ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: errorId, className: "text-xs font-medium text-ph-danger", children: error }) : null
+    ] })
   ] });
-}
-function Radio(_a) {
+});
+Checkbox.displayName = "Checkbox";
+var Radio = (0, import_react10.forwardRef)(function Radio2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1094,22 +1782,24 @@ function Radio(_a) {
     "wrapperClassName",
     "disabled"
   ]);
-  const autoId = (0, import_react.useId)();
+  const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "input",
       __spreadValues({
+        ref,
         id,
         type: "radio",
         disabled,
         className: cn("ph-radio", disabled && "cursor-not-allowed", className)
       }, props)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
   ] });
-}
-function Toggle(_a) {
+});
+Radio.displayName = "Radio";
+var Toggle = (0, import_react10.forwardRef)(function Toggle2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1123,13 +1813,14 @@ function Toggle(_a) {
     "wrapperClassName",
     "disabled"
   ]);
-  const autoId = (0, import_react.useId)();
+  const autoId = (0, import_react10.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: disabled ? "opacity-60" : void 0, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: disabled ? "opacity-60" : void 0, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "input",
       __spreadValues({
+        ref,
         id,
         type: "checkbox",
         role: "switch",
@@ -1138,9 +1829,11 @@ function Toggle(_a) {
       }, props)
     )
   ] });
-}
-function Range(_a) {
+});
+Toggle.displayName = "Toggle";
+var Range = (0, import_react10.forwardRef)(function Range2(_a, ref) {
   var _b = _a, {
+    id: idProp,
     label,
     minLabel,
     maxLabel,
@@ -1148,6 +1841,7 @@ function Range(_a) {
     wrapperClassName,
     className
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "minLabel",
     "maxLabel",
@@ -1155,35 +1849,55 @@ function Range(_a) {
     "wrapperClassName",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "ph-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", __spreadValues({ type: "range", className: cn("ph-range", className) }, props)),
-    (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: minLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: valueLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: maxLabel })
+  const autoId = (0, import_react10.useId)();
+  const id = idProp != null ? idProp : autoId;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", __spreadValues({ ref, id, type: "range", className: cn("ph-range", className) }, props)),
+    (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: minLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: valueLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: maxLabel })
     ] })
   ] });
-}
-function FileUpload(_a) {
-  var _b = _a, { label, prompt = "Drop file or browse", wrapperClassName, className } = _b, props = __objRest(_b, ["label", "prompt", "wrapperClassName", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "ph-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex cursor-pointer items-center gap-3 rounded-lg border border-dashed border-ph-border bg-ph-surface px-4 py-6 text-sm text-ph-subtle transition hover:bg-ph-muted/60", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", __spreadValues({ type: "file", className: cn("sr-only", className) }, props)),
+});
+Range.displayName = "Range";
+var FileUpload = (0, import_react10.forwardRef)(function FileUpload2(_a, ref) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    prompt = "Drop file or browse",
+    wrapperClassName,
+    className
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "prompt",
+    "wrapperClassName",
+    "className"
+  ]);
+  const autoId = (0, import_react10.useId)();
+  const id = idProp != null ? idProp : autoId;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { htmlFor: id, className: "ph-file-upload", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", __spreadValues({ ref, id, type: "file", className: cn("sr-only", className) }, props)),
       prompt
     ] })
   ] });
-}
+});
+FileUpload.displayName = "FileUpload";
 
 // src/components/ui/Modal.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+var import_react11 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var sizeMap4 = {
   sm: "max-w-sm",
   md: "max-w-lg",
   lg: "max-w-2xl",
   xl: "max-w-4xl",
-  full: "max-w-[calc(100%-2rem)]"
+  full: "max-w-none"
 };
 function Modal({
   open = false,
@@ -1194,50 +1908,67 @@ function Modal({
   footer,
   size = "md",
   className,
-  showCloseButton = true
+  showCloseButton = true,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
+  "aria-label": ariaLabel
 }) {
-  if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ph-modal-overlay", role: "presentation", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    "div",
+  const canDismiss = Boolean(onClose);
+  const restoreFocusRef = (0, import_react11.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    Dialog.Root,
     {
-      role: "dialog",
-      "aria-modal": true,
-      className: cn(
-        "ph-modal-panel",
-        sizeMap4[size],
-        className
-      ),
-      onClick: (e) => e.stopPropagation(),
-      children: [
-        (title || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("header", { className: "flex items-start justify-between gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "text-lg font-bold text-ph-ink", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 text-sm text-ph-subtle", children: description })
-          ] }),
-          showCloseButton && onClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: onClose,
-              className: "shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink",
-              "aria-label": "Close",
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconClose, { className: "h-5 w-5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-4", children }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-6 flex justify-end gap-2 border-t border-ph-border pt-5", children: footer })
-      ]
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) onClose == null ? void 0 : onClose();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Dialog.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Overlay, { className: "ph-modal-overlay" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          Dialog.Content,
+          __spreadProps(__spreadValues({
+            className: cn("ph-modal-panel", sizeMap4[size], className),
+            "aria-label": ariaLabel
+          }, description ? {} : { "aria-describedby": void 0 }), {
+            onOpenAutoFocus: () => {
+              restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            },
+            onCloseAutoFocus: (event) => {
+              var _a;
+              event.preventDefault();
+              (_a = restoreFocusRef.current) == null ? void 0 : _a.focus();
+            },
+            onEscapeKeyDown: (event) => {
+              if (!canDismiss || !closeOnEscape) event.preventDefault();
+            },
+            onPointerDownOutside: (event) => {
+              if (!canDismiss || !closeOnOutsideClick) event.preventDefault();
+            },
+            children: [
+              title ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
+              title || description || showCloseButton && canDismiss ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("header", { className: "ph-modal-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "min-w-0", children: [
+                  title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Title, { className: "text-lg font-bold text-ph-ink", children: title }) : null,
+                  description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Description, { className: "mt-1 text-sm text-ph-subtle", children: description }) : null
+                ] }),
+                showCloseButton && canDismiss ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ph-modal-close", "aria-label": "Close dialog", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconClose, { className: "h-5 w-5", "aria-hidden": true }) }) }) : null
+              ] }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ph-modal-body", children }),
+              footer ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ph-modal-footer", children: footer }) : null
+            ]
+          })
+        )
+      ] })
     }
-  ) });
+  );
 }
 
 // src/components/ui/Navigation.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Breadcrumbs({ items, label = "Breadcrumb", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("nav", { "aria-label": label, className: cn("ph-breadcrumbs", className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "contents", children: [
-    index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ph-breadcrumb-sep", "aria-hidden": "true", children: "/" }) : null,
-    item.current || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ph-breadcrumb-current", "aria-current": item.current ? "page" : void 0, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { href: item.href, className: "ph-breadcrumb-link", children: item.label })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("nav", { "aria-label": label, className: cn("ph-breadcrumbs", className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "contents", children: [
+    index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ph-breadcrumb-sep", "aria-hidden": "true", children: "/" }) : null,
+    item.current || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ph-breadcrumb-current", "aria-current": item.current ? "page" : void 0, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { href: item.href, className: "ph-breadcrumb-link", children: item.label })
   ] }, `${item.label}-${index}`)) });
 }
 function Pagination({
@@ -1250,8 +1981,8 @@ function Pagination({
 }) {
   const pages = compact ? [Math.max(1, page - 1), page, Math.min(totalPages, page + 1)] : [1, 2, 3, totalPages];
   const uniquePages = Array.from(new Set(pages)).filter((n) => n >= 1 && n <= totalPages);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("nav", { "aria-label": label, className: cn("ph-pagination", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("nav", { "aria-label": label, className: cn("ph-pagination", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         type: "button",
@@ -1259,12 +1990,12 @@ function Pagination({
         disabled: page <= 1,
         "aria-label": "Previous page",
         onClick: () => onPageChange == null ? void 0 : onPageChange(page - 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconChevronLeft, { className: "mx-auto h-4 w-4", "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconChevronLeft, { className: "mx-auto h-4 w-4", "aria-hidden": true })
       }
     ),
-    uniquePages.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "contents", children: [
-      !compact && index === uniquePages.length - 1 && pageNumber > 4 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ph-pagination-ellipsis", "aria-hidden": "true", children: "..." }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    uniquePages.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "contents", children: [
+      !compact && index === uniquePages.length - 1 && pageNumber > 4 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ph-pagination-ellipsis", "aria-hidden": "true", children: "..." }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
@@ -1275,7 +2006,7 @@ function Pagination({
         }
       )
     ] }, pageNumber)),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         type: "button",
@@ -1283,25 +2014,25 @@ function Pagination({
         disabled: page >= totalPages,
         "aria-label": "Next page",
         onClick: () => onPageChange == null ? void 0 : onPageChange(page + 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconChevronRight, { className: "mx-auto h-4 w-4", "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconChevronRight, { className: "mx-auto h-4 w-4", "aria-hidden": true })
       }
     )
   ] });
 }
 
 // src/components/ui/Panel.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Panel(_a) {
   var _b = _a, { title, description, children, className } = _b, props = __objRest(_b, ["title", "description", "children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-ph-subtle", children: description }),
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-ph-subtle", children: description }),
     children
   ] }));
 }
 
 // src/components/ui/Rating.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Rating(_a) {
   var _b = _a, {
     label,
@@ -1321,9 +2052,9 @@ function Rating(_a) {
     "wrapperClassName"
   ]);
   const stars = Array.from({ length: max }, (_, index) => index + 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ph-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ph-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       __spreadProps(__spreadValues({
         className: cn("ph-rating flex", className),
@@ -1333,7 +2064,7 @@ function Rating(_a) {
         children: stars.map((star) => {
           const active = star <= value;
           if (readOnly) {
-            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               IconStar,
               {
                 className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border"),
@@ -1342,7 +2073,7 @@ function Rating(_a) {
               star
             );
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "button",
             {
               type: "button",
@@ -1351,7 +2082,7 @@ function Rating(_a) {
               "aria-checked": active,
               "aria-label": `${star} out of ${max}`,
               onClick: () => onChange == null ? void 0 : onChange(star),
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconStar, { className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border") })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconStar, { className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border") })
             },
             star
           );
@@ -1362,8 +2093,8 @@ function Rating(_a) {
 }
 
 // src/components/ui/SearchInput.tsx
-var import_react2 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function SearchInput(_a) {
   var _b = _a, {
     id: idProp,
@@ -1384,12 +2115,12 @@ function SearchInput(_a) {
     "wrapperClassName",
     "placeholder"
   ]);
-  const autoId = (0, import_react2.useId)();
+  const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
-      shortcut != null ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
+      shortcut != null ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "span",
         {
           className: "ph-shortcut pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-xs",
@@ -1397,7 +2128,7 @@ function SearchInput(_a) {
           children: shortcut
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "input",
         __spreadValues({
           id,
@@ -1431,12 +2162,12 @@ function SearchGroup(_a) {
     "wrapperClassName",
     "className"
   ]);
-  const autoId = (0, import_react2.useId)();
+  const autoId = (0, import_react12.useId)();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "input",
         __spreadValues({
           id,
@@ -1445,12 +2176,12 @@ function SearchGroup(_a) {
           className: cn("ph-input ph-input-group-field min-w-0 flex-1", className)
         }, props)
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Button,
         {
           type: "submit",
           variant: "primary",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconSearch, { className: "h-4 w-4", "aria-hidden": true }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconSearch, { className: "h-4 w-4", "aria-hidden": true }),
           className: "ph-search-group__submit",
           "aria-label": submitLabel
         }
@@ -1460,7 +2191,7 @@ function SearchGroup(_a) {
 }
 
 // src/components/ui/Table.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Table({
   data,
   columns,
@@ -1471,15 +2202,15 @@ function Table({
   className,
   caption
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("ph-table-wrap", compact && "ph-table-compact", className), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
-    caption && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("caption", { className: "sr-only", children: caption }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("th", { className: col.className, children: col.header }, col.key)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tbody", { children: data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("td", { className: col.className, children: col.cell(row) }, col.key)) }, i)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("ph-table-wrap", compact && "ph-table-compact", className), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
+    caption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("caption", { className: "sr-only", children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: col.className, children: col.header }, col.key)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { children: data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: col.className, children: col.cell(row) }, col.key)) }, i)) })
   ] }) });
 }
 
 // src/components/ui/Stat.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var toneMap = {
   default: "text-ph-ink",
   brand: "text-ph-brand",
@@ -1496,16 +2227,16 @@ var statMap = {
 };
 function Stat(_a) {
   var _b = _a, { icon, label, value, footer, tone = "default", className } = _b, props = __objRest(_b, ["icon", "label", "value", "footer", "tone", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xs text-ph-subtle", children: footer })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xs text-ph-subtle", children: footer })
   ] }));
 }
 
 // src/components/ui/Toast.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var statusConfig2 = {
   info: { icon: IconErrorOutline, color: "text-ph-info", bg: "ph-toast-info" },
   success: { icon: IconCheckCircle, color: "text-ph-success", bg: "ph-toast-success" },
@@ -1521,33 +2252,33 @@ function Toast({
 }) {
   const config = statusConfig2[status];
   const Icon = config.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("ph-toast", config.bg, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color), "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "pr-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "font-semibold", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-1 text-xs text-ph-subtle", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("ph-toast", config.bg, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color), "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "pr-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "font-semibold", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "mt-1 text-xs text-ph-subtle", children: description })
     ] }),
-    onDismiss && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    onDismiss && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "button",
       {
         type: "button",
         "aria-label": `Dismiss ${title}`,
         className: "absolute right-2 top-2 ph-btn ph-btn-ghost ph-btn-xs ph-btn-circle",
         onClick: onDismiss,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconClose, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconClose, { className: "h-4 w-4" })
       }
     )
   ] });
 }
 function ToastStack({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("ph-toast-stack", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("ph-toast-stack", className), children });
 }
 
 // src/components/ui/Tabs.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Tabs({ items, value, onChange, variant = "pill", className }) {
   if (variant === "underline") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("flex gap-6 border-b border-ph-border", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex gap-6 border-b border-ph-border", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "button",
       {
         type: "button",
@@ -1561,7 +2292,7 @@ function Tabs({ items, value, onChange, variant = "pill", className }) {
       item.value
     )) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("ph-tabs-row inline-flex", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("ph-tabs-row inline-flex", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "button",
     {
       type: "button",
@@ -1574,7 +2305,7 @@ function Tabs({ items, value, onChange, variant = "pill", className }) {
 }
 
 // src/components/ui/ThemeDomSync.tsx
-var import_react3 = require("react");
+var import_react13 = require("react");
 
 // src/themes/registry.ts
 var DEFAULT_THEME_ID = "hedgehog-light";
@@ -1760,6 +2491,34 @@ var THEMES = [
     description: "Notion dark mode \u2014 dark charcoal canvas with blue accent and clean typography.",
     colorScheme: "dark",
     group: "Productivity"
+  },
+  {
+    id: "deepsea-light",
+    name: "Tokyo Night Day",
+    description: "Tokyo Night Day \u2014 soft bluish greys with vivid blue and purple accents.",
+    colorScheme: "light",
+    group: "Tokyo Night"
+  },
+  {
+    id: "deepsea-dark",
+    name: "Tokyo Night",
+    description: "Tokyo Night \u2014 #1a1b26 base with signature blue, cyan, and purple.",
+    colorScheme: "dark",
+    group: "Tokyo Night"
+  },
+  {
+    id: "kraken-light",
+    name: "Kraken Light",
+    description: "Medium-inspired warm paper, editorial black actions, and classic publication yellow.",
+    colorScheme: "light",
+    group: "Kraken"
+  },
+  {
+    id: "kraken-dark",
+    name: "Kraken Dark",
+    description: "Medium-inspired night reading canvas with white actions and classic publication yellow.",
+    colorScheme: "dark",
+    group: "Kraken"
   }
 ];
 var THEME_GROUPS = Array.from(new Set(THEMES.map((theme) => theme.group)));
@@ -1794,35 +2553,35 @@ function readStoredTheme() {
 
 // src/components/ui/ThemeDomSync.tsx
 function ThemeDomSync() {
-  (0, import_react3.useLayoutEffect)(() => {
+  (0, import_react13.useLayoutEffect)(() => {
     persistTheme(readStoredTheme());
   }, []);
   return null;
 }
 
 // src/components/ui/ThemeManager.tsx
-var import_react4 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ThemeManager({ children }) {
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     persistTheme(readStoredTheme());
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children });
 }
 
 // src/components/ui/ThemeSwitcher.tsx
-var import_react5 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function ThemeSwitcher({ className }) {
-  const [themeId, setThemeId] = (0, import_react5.useState)("hedgehog-light");
-  (0, import_react5.useEffect)(() => {
+  const [themeId, setThemeId] = (0, import_react15.useState)("hedgehog-light");
+  (0, import_react15.useEffect)(() => {
     const id = readStoredTheme();
     persistTheme(id);
     setThemeId(id);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm", children: "Theme" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm", children: "Theme" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "select",
       {
         className: "ph-select max-w-[11rem] !min-h-[2rem] py-1 pl-2.5 pr-8 text-xs sm:max-w-[14rem] sm:text-sm",
@@ -1833,22 +2592,22 @@ function ThemeSwitcher({ className }) {
           persistTheme(next);
           setThemeId(next);
         },
-        children: THEME_GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("optgroup", { label: group, children: THEMES.filter((theme) => theme.group === group).map((theme) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: theme.id, children: theme.name }, theme.id)) }, group))
+        children: THEME_GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("optgroup", { label: group, children: THEMES.filter((theme) => theme.group === group).map((theme) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: theme.id, children: theme.name }, theme.id)) }, group))
       }
     )
   ] });
 }
 
 // src/components/ui/Accordion.tsx
-var import_react6 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Accordion({
   items,
   allowMultiple = false,
   defaultOpen = [],
   className
 }) {
-  const [openItems, setOpenItems] = (0, import_react6.useState)(new Set(defaultOpen));
+  const [openItems, setOpenItems] = (0, import_react16.useState)(new Set(defaultOpen));
   const toggleItem = (id) => {
     setOpenItems((prev) => {
       const next = new Set(prev);
@@ -1863,18 +2622,18 @@ function Accordion({
       return next;
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("divide-y divide-ph-border rounded-xl border border-ph-border bg-ph-surface", className), children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime24.jsxs)("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime24.jsx)("span", { className: "font-semibold text-ph-ink", children: item.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-semibold text-ph-ink", children: item.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               IconChevronDown,
               {
                 className: cn(
@@ -1886,14 +2645,14 @@ function Accordion({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
           className: cn(
             "grid transition-all duration-200",
             isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
         }
       )
     ] }, item.id);
@@ -1901,30 +2660,30 @@ function Accordion({
 }
 
 // src/components/ui/Stepper.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Stepper({ steps, currentStep, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex items-start gap-2", className), children: steps.map((step, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("flex items-start gap-2", className), children: steps.map((step, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isPending = index > currentStep;
     const isError = step.status === "error";
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-1 items-start gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-1 flex-col items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-1 items-start gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-1 flex-col items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
             className: cn(
               "flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-colors",
-              isCompleted && "bg-ph-success text-white",
-              isCurrent && !isError && "bg-ph-brand text-white ring-4 ring-ph-brand/20",
-              isCurrent && isError && "bg-ph-danger text-white",
+              isCompleted && "bg-ph-success text-[var(--ph-on-success)]",
+              isCurrent && !isError && "bg-ph-brand text-[var(--ph-on-accent)] ring-4 ring-ph-brand/20",
+              isCurrent && isError && "bg-ph-danger text-[var(--ph-on-danger)]",
               isPending && "bg-ph-muted text-ph-mutedtext"
             ),
-            children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M5 13l4 4L19 7" }) }) : index + 1
+            children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconCheck, { className: "h-5 w-5", "aria-hidden": true }) : index + 1
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mt-2 text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-2 text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "p",
             {
               className: cn(
@@ -1935,10 +2694,10 @@ function Stepper({ steps, currentStep, className }) {
               children: step.label
             }
           ),
-          step.description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: step.description })
+          step.description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: step.description })
         ] })
       ] }),
-      index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "div",
         {
           className: cn(
@@ -1952,16 +2711,16 @@ function Stepper({ steps, currentStep, className }) {
 }
 
 // src/components/ui/SegmentedControl.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function SegmentedControl({ options, value, onChange, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: cn(
         "inline-flex rounded-lg bg-ph-muted p-1",
         className
       ),
-      children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "button",
         {
           type: "button",
@@ -1971,7 +2730,7 @@ function SegmentedControl({ options, value, onChange, className }) {
             value === option.value ? "bg-ph-surface text-ph-ink shadow-ph" : "text-ph-subtle hover:text-ph-ink"
           ),
           children: [
-            option.icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "h-4 w-4", children: option.icon }),
+            option.icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-4 w-4", children: option.icon }),
             option.label
           ]
         },
@@ -1982,8 +2741,8 @@ function SegmentedControl({ options, value, onChange, className }) {
 }
 
 // src/components/ui/CommandPalette.tsx
-var import_react7 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function CommandPalette({
   items,
   isOpen,
@@ -1991,13 +2750,13 @@ function CommandPalette({
   placeholder = "Type a command or search...",
   className
 }) {
-  const [query, setQuery] = (0, import_react7.useState)("");
-  const [selectedIndex, setSelectedIndex] = (0, import_react7.useState)(0);
-  const inputRef = (0, import_react7.useRef)(null);
+  const [query, setQuery] = (0, import_react17.useState)("");
+  const [selectedIndex, setSelectedIndex] = (0, import_react17.useState)(0);
+  const inputRef = (0, import_react17.useRef)(null);
   const filtered = items.filter(
     (item) => item.label.toLowerCase().includes(query.toLowerCase())
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     var _a;
     if (isOpen) {
       setQuery("");
@@ -2005,7 +2764,7 @@ function CommandPalette({
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     }
   }, [isOpen]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const handleKeyDown = (e) => {
       var _a;
       if (!isOpen) return;
@@ -2032,7 +2791,7 @@ function CommandPalette({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, filtered, selectedIndex, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       className: cn(
@@ -2040,9 +2799,9 @@ function CommandPalette({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "input",
             {
               ref: inputRef,
@@ -2056,9 +2815,9 @@ function CommandPalette({
               className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime31.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_runtime27.jsx)("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsxs)(
           "button",
           {
             type: "button",
@@ -2072,9 +2831,9 @@ function CommandPalette({
               index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
             ),
             children: [
-              item.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-5 w-5", children: item.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "flex-1", children: item.label }),
-              item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime27.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.icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "h-5 w-5", children: item.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex-1", children: item.label }),
+              item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime31.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
@@ -2085,10 +2844,10 @@ function CommandPalette({
 }
 
 // src/components/ui/Calendar.tsx
-var import_react8 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Calendar({ value, onChange, className }) {
-  const [currentMonth, setCurrentMonth] = (0, import_react8.useState)(value || /* @__PURE__ */ new Date());
+  const [currentMonth, setCurrentMonth] = (0, import_react18.useState)(value || /* @__PURE__ */ new Date());
   const today = /* @__PURE__ */ new Date();
   const year = currentMonth.getFullYear();
   const month = currentMonth.getMonth();
@@ -2128,42 +2887,44 @@ function Calendar({ value, onChange, className }) {
   for (let i = 1; i <= daysInMonth; i++) {
     days.push(i);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           type: "button",
           onClick: prevMonth,
+          "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_runtime28.jsx)("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M15 18l-6-6 6-6" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "text-sm font-semibold text-ph-ink", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-sm font-semibold text-ph-ink", children: [
         monthNames[month],
         " ",
         year
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           type: "button",
           onClick: nextMonth,
+          "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_runtime28.jsx)("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M9 18l6-6-6-6" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconChevronRight, { className: "h-5 w-5", "aria-hidden": true })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grid grid-cols-7 gap-1", children: [
-      weekDays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)("div", { className: "aspect-square", children: day && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "grid grid-cols-7 gap-1", children: [
+      weekDays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)("div", { className: "aspect-square", children: day && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           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-white 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"
+            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"
           ),
           children: day
         }
@@ -2173,11 +2934,11 @@ function Calendar({ value, onChange, className }) {
 }
 
 // src/components/ui/HoverCard.tsx
-var import_react9 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function HoverCard({ trigger, children, className }) {
-  const [isVisible, setIsVisible] = (0, import_react9.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  const [isVisible, setIsVisible] = (0, import_react19.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       className: "relative inline-block",
@@ -2185,7 +2946,7 @@ function HoverCard({ trigger, children, className }) {
       onMouseLeave: () => setIsVisible(false),
       children: [
         trigger,
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "div",
           {
             className: cn(
@@ -2194,8 +2955,8 @@ function HoverCard({ trigger, children, className }) {
               className
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 border-l border-t border-ph-border bg-ph-surface" }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "relative", children })
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 border-l border-t border-ph-border bg-ph-surface" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "relative", children })
             ]
           }
         )
@@ -2205,9 +2966,9 @@ function HoverCard({ trigger, children, className }) {
 }
 
 // src/components/ui/EmptyState.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function EmptyState({ icon, title, description, action, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       className: cn(
@@ -2215,67 +2976,226 @@ function EmptyState({ icon, title, description, action, className }) {
         className
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
-        action && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-4", children: action })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-4", children: action })
       ]
     }
   );
 }
 
 // src/components/ui/FilterChips.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-function FilterChips({ chips, onToggle, onRemove, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("flex flex-wrap gap-2", className), children: chips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-    "button",
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function FilterChips({
+  chips,
+  onToggle,
+  onRemove,
+  className,
+  "aria-label": ariaLabel = "Applied filters"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("ph-filter-chips", className), role: "group", "aria-label": ariaLabel, children: chips.map((chip) => {
+    var _a;
+    const label = (_a = chip.removeLabel) != null ? _a : getChipText(chip);
+    const content = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ph-filter-chip__label", children: chip.label }),
+      chip.value != null ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ph-filter-chip__value", children: chip.value }) : null
+    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      "span",
+      {
+        className: cn("ph-filter-chip", chip.active && "ph-filter-chip--active"),
+        "data-state": chip.active ? "on" : "off",
+        children: [
+          onToggle ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ph-filter-chip__main",
+              "aria-pressed": Boolean(chip.active),
+              onClick: () => onToggle(chip.id),
+              children: content
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ph-filter-chip__main", children: content }),
+          chip.active && onRemove ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ph-filter-chip__remove",
+              "aria-label": `Remove ${label} filter`,
+              onClick: () => onRemove(chip.id),
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(IconClose, { className: "h-3 w-3", "aria-hidden": true })
+            }
+          ) : null
+        ]
+      },
+      chip.id
+    );
+  }) });
+}
+function getChipText(chip) {
+  const label = typeof chip.label === "string" || typeof chip.label === "number" ? String(chip.label) : chip.id;
+  const value = typeof chip.value === "string" || typeof chip.value === "number" ? String(chip.value) : null;
+  return value ? `${label}: ${value}` : label;
+}
+
+// src/components/ui/FilterBar.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function FilterBar(_a) {
+  var _b = _a, {
+    children,
+    label = "Filters and sorting",
+    onClear,
+    clearLabel = "Clear all",
+    resultCount,
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "label",
+    "onClear",
+    "clearLabel",
+    "resultCount",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-bar", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ph-filter-bar__controls", role: "group", "aria-label": label, children: [
+      children,
+      onClear ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: "ph-filter-bar__clear", onClick: onClear, children: clearLabel }) : null
+    ] }),
+    resultCount != null ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("output", { className: "ph-filter-bar__results", "aria-live": "polite", children: resultCount }) : null
+  ] }));
+}
+function FilterMenu({
+  label,
+  value,
+  options,
+  onValueChange,
+  placeholder = "Any",
+  align = "start",
+  disabled,
+  className
+}) {
+  var _a;
+  const selected = options.find((option) => option.value === value);
+  const displayValue = (_a = selected == null ? void 0 : selected.label) != null ? _a : placeholder;
+  const accessibleValue = selected ? getOptionText(selected) : String(placeholder);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    DropdownMenu,
     {
-      type: "button",
-      onClick: () => onToggle(chip.id),
-      className: cn(
-        "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
-        chip.active ? "bg-ph-brand text-white" : "bg-ph-muted text-ph-subtle hover:bg-ph-border hover:text-ph-ink"
-      ),
-      children: [
-        chip.label,
-        chip.active && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "span",
+      "aria-label": `${label}: ${accessibleValue}`,
+      align,
+      disabled,
+      className,
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: cn("ph-filter-menu-trigger", selected && "ph-filter-menu-trigger--active"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconTuning, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-menu-trigger__value", children: displayValue })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        DropdownRadioItem,
+        {
+          value: option.value,
+          textValue: getOptionText(option),
+          disabled: option.disabled,
+          children: option.label
+        },
+        option.value
+      )) })
+    }
+  );
+}
+function SortMenu({
+  label,
+  value,
+  options,
+  onValueChange,
+  direction = "descending",
+  align = "end",
+  disabled,
+  className
+}) {
+  const selected = options.find((option) => option.value === value);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    DropdownMenu,
+    {
+      "aria-label": `${label}: ${selected ? getOptionText(selected) : "Choose sort order"}`,
+      align,
+      disabled,
+      className,
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "ph-filter-menu-trigger ph-sort-menu-trigger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          IconArrowDown,
           {
-            onClick: (e) => {
-              e.stopPropagation();
-              onRemove(chip.id);
-            },
-            className: "ml-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full hover:bg-white/20",
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconClose, { className: "h-3 w-3" })
+            className: cn("h-3.5 w-3.5", direction === "ascending" && "rotate-180"),
+            "aria-hidden": true
           }
-        )
-      ]
-    },
-    chip.id
-  )) });
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        selected ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-menu-trigger__value", children: selected.label }) : null
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        DropdownRadioItem,
+        {
+          value: option.value,
+          textValue: getOptionText(option),
+          disabled: option.disabled,
+          children: option.label
+        },
+        option.value
+      )) })
+    }
+  );
+}
+function getOptionText(option) {
+  if (option.textValue) return option.textValue;
+  if (typeof option.label === "string" || typeof option.label === "number") return String(option.label);
+  return option.value;
+}
+
+// src/components/ui/FilterControls.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function FilterControls(_a) {
+  var _b = _a, {
+    children,
+    barProps,
+    chipsProps,
+    emptyState,
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "barProps",
+    "chipsProps",
+    "emptyState",
+    "className"
+  ]);
+  const hasChips = Boolean(chipsProps == null ? void 0 : chipsProps.chips.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-controls", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterBar, __spreadProps(__spreadValues({}, barProps), { children })),
+    hasChips && chipsProps ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterChips, __spreadValues({}, chipsProps)) : emptyState != null ? emptyState : null
+  ] }));
 }
 
 // src/components/ui/CodeBlock.tsx
-var import_react10 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function CodeBlock({ code, language = "tsx", filename, className }) {
-  const [copied, setCopied] = (0, import_react10.useState)(false);
+  const [copied, setCopied] = (0, import_react20.useState)(false);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(code);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
-    (filename || language) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
+    (filename || language) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
         ] }),
-        filename && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ml-2 text-xs text-white/60", children: filename })
+        filename && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ml-2 text-xs text-white/60", children: filename })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "button",
         {
           type: "button",
@@ -2285,35 +3205,35 @@ function CodeBlock({ code, language = "tsx", filename, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
   ] });
 }
 
 // src/components/ui/ComponentDocs.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-4 border-b border-ph-border px-4 py-3 transition hover:bg-ph-muted/60 [&::-webkit-details-marker]:hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "rounded-full border border-ph-border bg-ph-surface px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext transition group-open:bg-ph-brand group-open:text-white", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "group-open:hidden", children: "Show" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "hidden group-open:inline", children: "Hide" })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-4 border-b border-ph-border px-4 py-3 transition hover:bg-ph-muted/60 [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "rounded-full border border-ph-border bg-ph-surface px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext transition group-open:bg-ph-brand group-open:text-white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "group-open:hidden", children: "Show" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "hidden group-open:inline", children: "Hide" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("table", { className: "w-full text-left text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Use" })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("table", { className: "w-full text-left text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Use" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
         var _a;
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
         ] }, row.name);
       }) })
     ] }) })
@@ -2321,8 +3241,8 @@ function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false,
 }
 
 // src/components/ui/ShowcaseWrapper.tsx
-var import_react11 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function ShowcaseWrapper({
   id,
   title,
@@ -2334,49 +3254,32 @@ function ShowcaseWrapper({
   className
 }) {
   var _a;
-  const [showCode, setShowCode] = (0, import_react11.useState)(false);
+  const [showCode, setShowCode] = (0, import_react21.useState)(false);
   const fallbackId = (_a = titleIdMap[title]) != null ? _a : title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ph-h2-rule mb-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h2", { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "ph-h2-rule mb-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h2", { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "button",
           {
             type: "button",
             onClick: () => setShowCode(!showCode),
             className: cn(
               "flex h-10 w-10 items-center justify-center rounded-full border transition-all",
-              showCode ? "border-ph-brand bg-ph-brand text-white shadow-lg shadow-ph-brand/25" : "border-ph-border bg-ph-surface text-ph-subtle hover:border-ph-brand hover:text-ph-brand"
+              showCode ? "border-ph-brand bg-ph-brand text-[var(--ph-on-accent)] shadow-lg shadow-ph-brand/25" : "border-ph-border bg-ph-surface text-ph-subtle hover:border-ph-brand hover:text-ph-brand"
             ),
             title: showCode ? "Hide code" : "Show code",
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-              "svg",
-              {
-                className: "h-5 w-5",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "17", x2: "12", y2: "21" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "6", y1: "8", x2: "6", y2: "8" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "10", y1: "8", x2: "10", y2: "8" })
-                ]
-              }
-            )
+            "aria-label": showCode ? "Hide code" : "Show code",
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconCodePreview, { className: "h-5 w-5", "aria-hidden": true })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("hr", {})
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("hr", {})
     ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
-    docs && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mb-6", children: docs }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
+    docs && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mb-6", children: docs }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
         className: cn(
@@ -2384,15 +3287,15 @@ function ShowcaseWrapper({
           showCode ? "lg:grid lg:grid-cols-[1fr,minmax(360px,420px)]" : "block"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "div",
             {
               className: cn(
                 "transition-all duration-300",
                 showCode ? "block opacity-100" : "hidden opacity-0 lg:hidden"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "sticky top-20", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CodeBlock, { code, filename }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "sticky top-20", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CodeBlock, { code, filename }) })
             }
           )
         ]
@@ -2441,41 +3344,41 @@ var titleIdMap = {
 };
 
 // src/components/ui/CollapsibleSection.tsx
-var import_react12 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function CollapsibleSection({ title, children, defaultOpen = true, id }) {
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(defaultOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("section", { id, className: "scroll-mt-20", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(defaultOpen);
+  const generatedId = (0, import_react22.useId)();
+  const contentId = `${id != null ? id : generatedId}-content`;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("section", { id, className: "scroll-mt-20", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "button",
       {
         type: "button",
         onClick: () => setIsOpen(!isOpen),
+        "aria-expanded": isOpen,
+        "aria-controls": contentId,
         className: "mb-6 flex w-full items-center justify-between rounded-lg border border-ph-border bg-ph-muted px-5 py-4 text-left transition hover:bg-ph-muted/80",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-lg font-bold text-ph-ink", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            "svg",
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-lg font-bold text-ph-ink", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            IconChevronDown,
             {
               className: cn(
                 "h-5 w-5 text-ph-subtle transition-transform duration-200",
                 isOpen && "rotate-180"
               ),
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M6 9l6 6 6-6" })
+              "aria-hidden": true
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "div",
       {
+        id: contentId,
+        "aria-hidden": !isOpen,
         className: cn(
           "overflow-hidden transition-all duration-300",
           isOpen ? "max-h-[50000px] opacity-100" : "max-h-0 opacity-0"
@@ -2487,7 +3390,7 @@ function CollapsibleSection({ title, children, defaultOpen = true, id }) {
 }
 
 // src/components/ui/Typography.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var toneMap2 = {
   default: "text-ph-ink",
   muted: "text-ph-mutedtext",
@@ -2516,47 +3419,47 @@ function Display({
   truncate,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h1", { className: textClass("text-4xl font-extrabold tracking-tight md:text-5xl", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h1", { className: textClass("text-4xl font-extrabold tracking-tight md:text-5xl", tone, weight, truncate, className), children });
 }
 function H1({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h1", { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime36.jsx)("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime36.jsx)("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime36.jsx)("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime36.jsx)("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime36.jsx)("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime36.jsx)("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime36.jsx)("span", { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime36.jsx)("span", { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime36.jsx)("p", { className: textClass("text-lg leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: textClass("text-lg leading-relaxed", tone, weight, truncate, className), children });
 }
 function Mono({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime36.jsx)("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
 }
 
 // src/components/ui/Avatar.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var sizeMap5 = {
   xs: "h-8 w-8 text-[10px]",
   sm: "h-10 w-10 text-xs",
@@ -2588,8 +3491,8 @@ function Avatar(_a) {
     "badge",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "div",
       {
         className: cn(
@@ -2600,7 +3503,7 @@ function Avatar(_a) {
         children: icon || label
       }
     ),
-    status && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    status && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "span",
       {
         className: cn(
@@ -2609,7 +3512,7 @@ function Avatar(_a) {
         )
       }
     ),
-    badge && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-white", children: badge })
+    badge && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-white", children: badge })
   ] }));
 }
 function AvatarGroup(_a) {
@@ -2617,9 +3520,9 @@ function AvatarGroup(_a) {
   const items = Array.isArray(children) ? children : [children];
   const visible = max ? items.slice(0, max) : items;
   const remaining = max ? items.length - max : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
     visible,
-    remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Avatar,
       {
         label: `+${remaining}`,
@@ -2631,7 +3534,7 @@ function AvatarGroup(_a) {
 }
 
 // src/components/ui/Progress.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var sizeMap6 = {
   sm: "h-1",
   md: "h-2",
@@ -2656,15 +3559,15 @@ function Progress(_a) {
     "className"
   ]);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
-    (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: label }),
-      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "tabular-nums", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
+    (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: label }),
+      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "tabular-nums", children: [
         Math.round(percentage),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn("ph-progress", sizeMap6[size]), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("ph-progress", sizeMap6[size]), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "div",
       {
         className: cn("ph-progress-bar", color),
@@ -2679,7 +3582,7 @@ function Progress(_a) {
 }
 
 // src/components/ui/ChatBubble.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function ChatBubble(_a) {
   var _b = _a, {
     children,
@@ -2699,7 +3602,7 @@ function ChatBubble(_a) {
     "className"
   ]);
   const isSelf = variant === "self";
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       className: cn(
@@ -2709,9 +3612,9 @@ function ChatBubble(_a) {
       )
     }, props), {
       children: [
-        avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "shrink-0", children: avatar }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
-          (name || time) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        avatar && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "shrink-0", children: avatar }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
+          (name || time) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
             "header",
             {
               className: cn(
@@ -2719,12 +3622,12 @@ function ChatBubble(_a) {
                 isSelf && "flex-row-reverse justify-end"
               ),
               children: [
-                name && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "font-semibold text-ph-ink", children: name }),
-                time && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: time })
+                name && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "font-semibold text-ph-ink", children: name }),
+                time && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: time })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "div",
             {
               className: cn(
@@ -2734,7 +3637,7 @@ function ChatBubble(_a) {
               children
             }
           ),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
+          footer && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
         ] })
       ]
     })
@@ -2742,7 +3645,7 @@ function ChatBubble(_a) {
 }
 
 // src/components/ui/Terminal.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Terminal(_a) {
   var _b = _a, {
     title = "sandbox",
@@ -2755,7 +3658,7 @@ function Terminal(_a) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       className: cn(
@@ -2764,18 +3667,18 @@ function Terminal(_a) {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("header", { className: "flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-3 w-3 rounded-full bg-emerald-400" }),
-          title && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xs font-medium text-ph-mutedtext", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("header", { className: "flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-3 w-3 rounded-full bg-emerald-400" }),
+          title && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs font-medium text-ph-mutedtext", children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed", children: children || /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: lines == null ? void 0 : lines.map((line, i) => {
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed", children: children || /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: lines == null ? void 0 : lines.map((line, i) => {
           const text = typeof line === "string" ? line : line.text;
           const color = typeof line === "string" ? void 0 : line.color;
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: color || "text-neutral-600", children: text }),
-            i < lines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("br", {})
+          return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: color || "text-neutral-600", children: text }),
+            i < lines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("br", {})
           ] }, i);
         }) }) })
       ]
@@ -2784,7 +3687,7 @@ function Terminal(_a) {
 }
 
 // src/components/ui/Indicator.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var positionMap = {
   "top-right": "-right-[2px] -top-[2px]",
   "top-left": "-left-[2px] -top-[2px]",
@@ -2807,8 +3710,8 @@ function Indicator(_a) {
     "dot",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex items-center justify-center", className) }, props), { children: [
-    dot ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex items-center justify-center", className) }, props), { children: [
+    dot ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "span",
       {
         className: cn(
@@ -2817,7 +3720,7 @@ function Indicator(_a) {
           positionMap[position]
         )
       }
-    ) : badge != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    ) : badge != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "span",
       {
         className: cn(
@@ -2833,7 +3736,7 @@ function Indicator(_a) {
 }
 
 // src/components/ui/Timeline.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Timeline(_a) {
   var _b = _a, {
     events,
@@ -2844,15 +3747,15 @@ function Timeline(_a) {
     "alternate",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "ol",
     __spreadProps(__spreadValues({
       className: cn("relative space-y-8", className)
     }, props), {
       children: events.map((event, idx) => {
         const align = alternate && idx % 2 !== 0 ? "lg:flex-row-reverse" : "";
-        return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: cn("relative flex gap-6", align), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("li", { className: cn("relative flex gap-6", align), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "div",
             {
               className: cn(
@@ -2862,12 +3765,12 @@ function Timeline(_a) {
               children: event.icon
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("article", { className: "flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-wrap items-baseline gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "text-base font-semibold text-ph-ink", children: event.title }),
-              event.time && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("time", { className: "text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext", children: event.time })
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("article", { className: "flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-wrap items-baseline gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h4", { className: "text-base font-semibold text-ph-ink", children: event.title }),
+              event.time && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("time", { className: "text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext", children: event.time })
             ] }),
-            event.description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "mt-2 text-sm text-ph-subtle", children: event.description })
+            event.description && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-2 text-sm text-ph-subtle", children: event.description })
           ] })
         ] }, event.id);
       })
@@ -2878,6 +3781,9 @@ function Timeline(_a) {
 0 && (module.exports = {
   Accordion,
   Alert,
+  AuthCard,
+  AuthDivider,
+  AuthLayout,
   Avatar,
   AvatarGroup,
   Badge,
@@ -2898,9 +3804,15 @@ function Timeline(_a) {
   DropdownButton,
   DropdownItem,
   DropdownMenu,
+  DropdownRadioGroup,
+  DropdownRadioItem,
   EmptyState,
   FileUpload,
+  FilterBar,
   FilterChips,
+  FilterControls,
+  FilterMenu,
+  FormField,
   H1,
   H2,
   H3,
@@ -2914,6 +3826,8 @@ function Timeline(_a) {
   Kbd,
   Label,
   Lead,
+  Loader,
+  LoadingState,
   Modal,
   Mono,
   Overline,
@@ -2928,8 +3842,12 @@ function Timeline(_a) {
   SearchInput,
   SegmentedControl,
   Select,
+  SettingsLayout,
+  SettingsNav,
   ShowcaseWrapper,
+  Skeleton,
   Small,
+  SortMenu,
   Stat,
   Stepper,
   Table,