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

package/dist/{chunk-SHF57J7U.mjs → chunk-FDMD3IIN.mjs}

@@ -4,6 +4,9 @@ import {
   __spreadValues
 } from "./chunk-FWCSY2DS.mjs";
 
+// src/components/ui/Button.tsx
+import { forwardRef } from "react";
+
 // src/components/ui/ButtonChrome.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function ButtonChrome({ label, icon, sideIcon, split }) {
@@ -48,7 +51,7 @@ var shapeClass = {
   square: "ph-btn-square",
   wide: "ph-btn-wide"
 };
-function Button(_a) {
+var Button = forwardRef(function Button2(_a, ref) {
   var _b = _a, {
     variant = "secondary",
     size = "md",
@@ -57,9 +60,12 @@ function Button(_a) {
     split = false,
     icon,
     sideIcon,
+    loading = false,
+    loadingLabel,
     className,
     children,
-    type = "button"
+    type = "button",
+    disabled
   } = _b, props = __objRest(_b, [
     "variant",
     "size",
@@ -68,23 +74,32 @@ function Button(_a) {
     "split",
     "icon",
     "sideIcon",
+    "loading",
+    "loadingLabel",
     "className",
     "children",
-    "type"
+    "type",
+    "disabled"
   ]);
-  const usesLemonChrome = variant === "primary" || variant === "secondary";
-  const content = usesLemonChrome ? /* @__PURE__ */ jsx2(ButtonChrome, { label: children, icon, sideIcon, split }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-    icon != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-icon", children: icon }) : null,
-    children != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-label", children }) : null,
+  const usesLemonChrome = !["tertiary", "ghost", "link"].includes(variant);
+  const label = loadingLabel != null ? loadingLabel : children;
+  const leadingIcon = loading ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-spinner", "aria-hidden": true }) : icon;
+  const content = usesLemonChrome ? /* @__PURE__ */ jsx2(ButtonChrome, { label, icon: leadingIcon, sideIcon, split }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+    leadingIcon != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-icon", children: leadingIcon }) : null,
+    label != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-label", children: label }) : null,
     split ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-split-divider", "aria-hidden": true }) : null,
     sideIcon != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-side-icon", children: sideIcon }) : null
   ] });
   return /* @__PURE__ */ jsx2(
     "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],
@@ -96,11 +111,16 @@ function Button(_a) {
       children: content
     })
   );
-}
+});
+Button.displayName = "Button";
+
+// src/components/ui/Alert.tsx
+import { forwardRef as forwardRef5 } from "react";
 
 // src/components/icons/IconBase.tsx
+import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-function IconBase(_a) {
+var IconBase = forwardRef2(function IconBase2(_a, ref) {
   var _b = _a, {
     className,
     size,
@@ -108,7 +128,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",
@@ -116,41 +141,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__ */ jsx3(
     "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
+import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
-function createIconBase({ viewBox = "0 0 24 24", paths }) {
-  return function IconGlyph(props) {
-    return /* @__PURE__ */ jsx4(IconBase, __spreadProps(__spreadValues({ viewBox }, props), { children: paths }));
-  };
+function createIconBase({ name = "IconGlyph", viewBox = "0 0 24 24", paths }) {
+  const IconGlyph = forwardRef3(function IconGlyph2(props, ref) {
+    return /* @__PURE__ */ jsx4(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__ */ jsx4("path", { d, fill: "currentColor" })
   });
 }
 
 // src/components/icons/icons.tsx
+import { forwardRef as forwardRef4 } from "react";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var fill = (d) => /* @__PURE__ */ jsx5("path", { d, fill: "currentColor" });
 var IconAreaChart = createIconBase({
@@ -259,6 +298,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"
@@ -356,18 +401,158 @@ 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__ */ jsx5(
+    "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__ */ jsx5(
+    "path",
+    {
+      d: "M3 3v18h18V3H3zm2 7v9h14v-9H5zm1-4h2v1H6V6zm3 0h2v1H9V6z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+});
+var IconCommandCursor = createIconBase({
+  name: "IconCommandCursor",
+  paths: /* @__PURE__ */ jsx5(
+    "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__ */ jsx5(
+    "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__ */ jsx5(
+    "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__ */ jsx5(
+    "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__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("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__ */ jsx5(
+    "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__ */ jsx5(
+    "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__ */ jsx5(
+    "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 OLD_UI_ICONS = {
+  oldWindow: IconOldWindow,
+  commandCursor: IconCommandCursor,
+  dataReel: IconDataReel,
+  codePreview: IconCodePreview,
+  insightBoard: IconInsightBoard,
+  eventStream: IconEventStream,
+  featureGate: IconFeatureGate,
+  replayFrame: IconReplayFrame,
+  queryStack: IconQueryStack,
+  experimentSplit: IconExperimentSplit,
+  surveyCard: IconSurveyCard
+};
 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 = forwardRef4(function IconSpinner2(_a, ref) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx5(IconSync, __spreadValues({ className: cn("ph-icon-spin", className) }, props));
-}
-var PH_ICONS = {
+  return /* @__PURE__ */ jsx5(IconSync, __spreadValues({ ref, className: cn("ph-icon-spin", className) }, props));
+});
+IconSpinner.displayName = "IconSpinner";
+var CANONICAL_ICONS = {
   activity: IconActivity,
   areaChart: IconAreaChart,
   arrowDown: IconArrowDown,
@@ -382,74 +567,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 = forwardRef4(function IconByName2(_a, ref) {
   var _b = _a, { name } = _b, props = __objRest(_b, ["name"]);
   const Icon = PH_ICONS[name];
-  return /* @__PURE__ */ jsx5(Icon, __spreadValues({}, props));
-}
+  return /* @__PURE__ */ jsx5(Icon, __spreadValues({ ref }, props));
+});
+IconByName.displayName = "IconByName";
 
 // src/components/ui/Alert.tsx
 import { jsx as jsx6, jsxs as jsxs4 } from "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",
@@ -457,25 +668,43 @@ var statusClassMap = {
   warning: "ph-alert-warning",
   danger: "ph-alert-danger"
 };
-function Alert({
-  status = "info",
-  title,
-  description,
-  icon,
-  children,
-  className,
-  onDismiss
-}) {
+var Alert = forwardRef5(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__ */ jsxs4(
     "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__ */ jsx6(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color) }),
-        /* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
+        icon != null ? icon : /* @__PURE__ */ jsx6(Icon, { className: "ph-alert-icon mt-0.5 h-5 w-5 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
           title && /* @__PURE__ */ jsx6("p", { className: "font-semibold", children: title }),
           description && /* @__PURE__ */ jsx6("p", { className: "mt-1 text-sm text-ph-subtle", children: description }),
           children
@@ -485,17 +714,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__ */ jsx6("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx6("path", { d: "M18 6L6 18M6 6l12 12" }) })
+            className: "ph-alert-dismiss",
+            "aria-label": dismissLabel,
+            children: /* @__PURE__ */ jsx6(IconClose, { className: "h-4 w-4", "aria-hidden": true })
           }
         )
       ]
-    }
+    })
   );
-}
+});
+Alert.displayName = "Alert";
 
 // src/components/ui/Badge.tsx
+import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var variantMap = {
   brand: "ph-badge-brand",
@@ -510,66 +741,95 @@ var sizeMap = {
   sm: "text-[10px] px-1.5 py-0.5",
   md: ""
 };
-function Badge({
-  variant = "neutral",
-  size = "md",
-  children,
-  className
-}) {
+var Badge = forwardRef6(function Badge2(_a, ref) {
+  var _b = _a, {
+    variant = "neutral",
+    size = "md",
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "children",
+    "className"
+  ]);
   return /* @__PURE__ */ jsx7(
     "span",
-    {
+    __spreadProps(__spreadValues({
+      ref,
       className: cn(
         "ph-badge",
         variantMap[variant],
         sizeMap[size],
         className
-      ),
+      )
+    }, props), {
       children
-    }
+    })
   );
-}
+});
+Badge.displayName = "Badge";
 
 // src/components/ui/Card.tsx
+import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 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 = forwardRef7(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__ */ jsxs5(
     "div",
-    {
+    __spreadProps(__spreadValues({
+      ref,
       className: cn(
         "ph-card",
         variantMap2[variant],
+        interactive && "ph-card-interactive",
         className
-      ),
+      )
+    }, props), {
       children: [
-        media && /* @__PURE__ */ jsx8("div", { className: "-mx-6 -mt-6 mb-4", children: media }),
+        media && /* @__PURE__ */ jsx8("div", { className: "ph-card-media", children: media }),
         /* @__PURE__ */ jsxs5("div", { className: cn("ph-card-body", bodyClassName), children: [
-          title && /* @__PURE__ */ jsx8("h3", { className: "ph-card-title", children: title }),
+          title && /* @__PURE__ */ jsx8(Title2, { className: "ph-card-title", children: title }),
           description && /* @__PURE__ */ jsx8("p", { className: "text-sm text-ph-subtle", children: description }),
           children,
           actions && /* @__PURE__ */ jsx8("div", { className: "ph-card-actions", children: actions })
         ] }),
         footer && /* @__PURE__ */ jsx8("div", { className: "border-t border-ph-border px-6 py-4 text-xs text-ph-subtle", children: footer })
       ]
-    }
+    })
   );
-}
+});
+Card.displayName = "Card";
 
 // src/components/ui/Drawer.tsx
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -619,22 +879,270 @@ function Drawer({
 }
 
 // src/components/ui/Kbd.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "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__ */ jsx10("code", __spreadProps(__spreadValues({ className: cn("ph-kbd text-ph-ink", className) }, props), { children }));
+    return /* @__PURE__ */ jsx10("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__ */ jsx10("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__ */ jsx10("kbd", __spreadProps(__spreadValues({ className: cn("ph-shortcut", className) }, props), { children: content }));
+  return /* @__PURE__ */ jsx10("kbd", __spreadProps(__spreadValues({ className: cn("ph-shortcut-group ph-keycap", className), "aria-label": accessibleLabel }, props), { children: displayKeys.map((key, index) => /* @__PURE__ */ jsxs7("span", { className: "contents", children: [
+    index > 0 && separator != null ? /* @__PURE__ */ jsx10("span", { className: "ph-shortcut-separator", "aria-hidden": "true", children: separator }) : null,
+    /* @__PURE__ */ jsx10("span", { className: "ph-shortcut-key", "aria-hidden": accessibleLabel ? true : void 0, children: key })
+  ] }, index)) }));
+}
+function formatKey(key, platform) {
+  var _a;
+  if (typeof key !== "string") return key;
+  return (_a = platformLabels[platform][key.toLowerCase()]) != null ? _a : key;
+}
+function getShortcutLabel(keys) {
+  const labels = keys.map((key) => {
+    var _a;
+    if (typeof key !== "string" && typeof key !== "number") return null;
+    const value = String(key);
+    return (_a = spokenLabels[value]) != null ? _a : value;
+  });
+  return labels.every((label) => label != null) ? labels.join(" + ") : void 0;
+}
+
+// src/components/ui/Loader.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "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__ */ jsxs8(
+    "span",
+    __spreadProps(__spreadValues({
+      role: "status",
+      "aria-label": label,
+      className: cn("ph-loader", loaderSizeClass[size], className)
+    }, props), {
+      children: [
+        variant === "spinner" ? /* @__PURE__ */ jsx11("span", { className: "ph-loading", "aria-hidden": true }) : null,
+        variant === "dots" ? /* @__PURE__ */ jsxs8("span", { className: "ph-loading-dots", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx11("span", {}),
+          /* @__PURE__ */ jsx11("span", {}),
+          /* @__PURE__ */ jsx11("span", {})
+        ] }) : null,
+        variant === "pulse" ? /* @__PURE__ */ jsx11("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__ */ jsx11(
+    "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__ */ jsxs8("div", __spreadProps(__spreadValues({ className: cn("ph-loading-state", className), role: "status", "aria-label": label }, props), { children: [
+    /* @__PURE__ */ jsx11(Loader, { variant, size, label, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs8("div", { className: "ph-loading-state__copy", children: [
+      /* @__PURE__ */ jsx11("strong", { children: title }),
+      description ? /* @__PURE__ */ jsx11("span", { children: description }) : null
+    ] })
+  ] }));
+}
+
+// src/components/ui/AuthLayout.tsx
+import { useId } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "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__ */ jsxs9("div", __spreadProps(__spreadValues({ className: cn("ph-auth-layout", aside != null && "ph-auth-layout--split", className) }, props), { children: [
+    aside ? /* @__PURE__ */ jsx12("aside", { className: "ph-auth-layout__aside", children: aside }) : null,
+    /* @__PURE__ */ jsx12("div", { className: "ph-auth-layout__main", children: /* @__PURE__ */ jsxs9("div", { className: "ph-auth-layout__column", children: [
+      brand ? /* @__PURE__ */ jsx12("div", { className: "ph-auth-layout__brand", children: brand }) : null,
+      children,
+      footer ? /* @__PURE__ */ jsx12("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 = useId();
+  return /* @__PURE__ */ jsxs9("section", __spreadProps(__spreadValues({ className: cn("ph-auth-card", className), "aria-labelledby": titleId }, props), { children: [
+    /* @__PURE__ */ jsxs9("header", { className: "ph-auth-card__header", children: [
+      /* @__PURE__ */ jsx12("h1", { id: titleId, children: title }),
+      description ? /* @__PURE__ */ jsx12("p", { children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: "ph-auth-card__body", children }),
+    footer ? /* @__PURE__ */ jsx12("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__ */ jsx12("div", __spreadProps(__spreadValues({ className: cn("ph-auth-divider", className) }, props), { children: /* @__PURE__ */ jsx12("span", { children }) }));
+}
+
+// src/components/ui/SettingsLayout.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function SettingsNav(_a) {
+  var _b = _a, { groups, className } = _b, props = __objRest(_b, ["groups", "className"]);
+  return /* @__PURE__ */ jsx13("div", __spreadProps(__spreadValues({ className: cn("ph-settings-nav", className) }, props), { children: groups.map((group, index) => /* @__PURE__ */ jsxs10("div", { className: "ph-settings-nav__group", children: [
+    /* @__PURE__ */ jsx13("h3", { children: group.label }),
+    /* @__PURE__ */ jsx13("div", { className: "ph-settings-nav__items", children: group.items.map((item) => /* @__PURE__ */ jsxs10(
+      "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__ */ jsx13("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
+          /* @__PURE__ */ jsx13("span", { children: item.label }),
+          item.badge ? /* @__PURE__ */ jsx13("span", { className: "ph-settings-nav__badge", children: item.badge }) : null
+        ]
+      },
+      item.id
+    )) })
+  ] }, 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 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__ */ jsxs10("section", __spreadProps(__spreadValues({ className: cn("ph-settings-layout", className) }, props), { children: [
+    /* @__PURE__ */ jsxs10("header", { className: "ph-settings-layout__header", children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx13("h2", { children: title }),
+        description ? /* @__PURE__ */ jsx13("p", { children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsx13("div", { className: "ph-settings-layout__actions", children: actions }) : null
+    ] }),
+    /* @__PURE__ */ jsxs10("details", { className: "ph-settings-layout__mobile-nav", children: [
+      /* @__PURE__ */ jsxs10("summary", { children: [
+        /* @__PURE__ */ jsx13(IconTuning, { className: "h-4 w-4", "aria-hidden": true }),
+        "Settings menu"
+      ] }),
+      /* @__PURE__ */ jsx13("nav", { "aria-label": navigationLabel, children: navigation })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "ph-settings-layout__grid", children: [
+      /* @__PURE__ */ jsx13("aside", { className: "ph-settings-layout__sidebar", children: /* @__PURE__ */ jsx13("nav", { "aria-label": navigationLabel, children: navigation }) }),
+      /* @__PURE__ */ jsx13("div", { className: "ph-settings-layout__content", children })
+    ] })
+  ] }));
 }
 
 // src/components/ui/DropdownMenu.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import * as DropdownPrimitive from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var sizeClass2 = {
   xs: "ph-btn-xs",
   sm: "ph-btn-sm",
@@ -646,40 +1154,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__ */ jsx14(DropdownPrimitive.Portal, { children: /* @__PURE__ */ jsxs11(
+    DropdownPrimitive.Content,
+    {
+      className: cn("ph-dropdown-panel", panelClassName),
+      align,
+      side,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      avoidCollisions,
+      sticky: "partial",
+      children: [
+        children,
+        /* @__PURE__ */ jsx14(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__ */ jsxs7("details", __spreadProps(__spreadValues({ className: cn("relative", className) }, props), { children: [
-    /* @__PURE__ */ jsx11(
-      "summary",
-      {
-        className: "cursor-pointer list-none [&::-webkit-details-marker]:hidden",
-        "aria-label": ariaLabel,
-        children: trigger
-      }
-    ),
-    /* @__PURE__ */ jsx11("div", { className: dropdownPanelClass(align, panelClassName), children })
-  ] }));
+  return /* @__PURE__ */ jsx14("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ jsxs11(
+    DropdownPrimitive.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      modal,
+      children: [
+        /* @__PURE__ */ jsx14(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx14("button", { type: "button", className: "ph-dropdown-trigger", "aria-label": ariaLabel, children: trigger }) }),
+        /* @__PURE__ */ jsx14(
+          DropdownContent,
+          {
+            align,
+            side,
+            sideOffset,
+            alignOffset,
+            collisionPadding,
+            avoidCollisions,
+            panelClassName,
+            children
+          }
+        )
+      ]
+    }
+  ) }));
 }
 function DropdownButton(_a) {
   var _b = _a, {
@@ -691,10 +1254,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",
@@ -705,55 +1278,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__ */ jsx11(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
-  const trailing = sideIcon != null ? sideIcon : chevron;
-  return /* @__PURE__ */ jsxs7("details", __spreadProps(__spreadValues({ className: cn("relative", className) }, props), { children: [
-    /* @__PURE__ */ jsx11(
-      "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__ */ jsx11(ButtonChrome, { label, icon, sideIcon: trailing, split }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
-          icon != null ? /* @__PURE__ */ jsx11("span", { className: "ph-btn-icon", children: icon }) : null,
-          /* @__PURE__ */ jsx11("span", { className: "ph-btn-label", children: label }),
-          /* @__PURE__ */ jsx11("span", { className: "ph-btn-side-icon", children: trailing })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx11("div", { className: dropdownPanelClass(align, panelClassName), children })
-  ] }));
+  const trailing = sideIcon != null ? sideIcon : /* @__PURE__ */ jsx14(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
+  return /* @__PURE__ */ jsx14("div", __spreadProps(__spreadValues({ className: cn("ph-dropdown", className) }, props), { children: /* @__PURE__ */ jsxs11(
+    DropdownPrimitive.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      modal,
+      children: [
+        /* @__PURE__ */ jsx14(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx14(
+          "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__ */ jsx14(ButtonChrome, { label, icon, sideIcon: trailing, split })
+          }
+        ) }),
+        /* @__PURE__ */ jsx14(
+          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__ */ jsx14(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ jsx14(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      disabled,
+      className: cn("ph-dropdown-item w-full text-left", className)
+    }, props), {
+      children
+    })
+  ) });
+}
+function DropdownRadioGroup(props) {
+  return /* @__PURE__ */ jsx14(DropdownPrimitive.RadioGroup, __spreadValues({}, props));
+}
+function DropdownRadioItem(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs11(DropdownPrimitive.RadioItem, __spreadProps(__spreadValues({ className: cn("ph-dropdown-item ph-dropdown-radio-item", className) }, props), { children: [
+    /* @__PURE__ */ jsx14("span", { className: "ph-dropdown-item-indicator", "aria-hidden": true, children: /* @__PURE__ */ jsx14(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx14(IconCheck, { className: "h-3.5 w-3.5" }) }) }),
+    /* @__PURE__ */ jsx14("span", { children })
+  ] }));
+}
+
+// src/components/ui/Input.tsx
+import { forwardRef as forwardRef8, useId as useId3 } from "react";
+
+// src/components/ui/FormField.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx15, jsxs as jsxs12 } from "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__ */ jsx11("button", __spreadProps(__spreadValues({ type: "button", className: cn("ph-dropdown-item w-full text-left", className) }, props), { children }));
+  const generatedId = useId2();
+  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__ */ jsxs12("div", __spreadProps(__spreadValues({ className: cn("ph-field", className) }, props), { children: [
+    label ? /* @__PURE__ */ jsxs12(
+      "label",
+      {
+        htmlFor: id,
+        className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
+        children: [
+          label,
+          required ? /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: " *" }) : null
+        ]
+      }
+    ) : null,
+    typeof children === "function" ? children(controlProps) : children,
+    descriptionId ? /* @__PURE__ */ jsx15("p", { id: descriptionId, className: "mt-1 text-xs text-ph-subtle", children: helperText }) : null,
+    errorId ? /* @__PURE__ */ jsx15("p", { id: errorId, className: "mt-1 text-xs font-medium text-ph-danger", children: error }) : null
+  ] }));
 }
 
 // src/components/ui/Input.tsx
-import { useId } from "react";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "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 = forwardRef8(function Input2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -763,57 +1435,60 @@ function Input(_a) {
     size = "md",
     variant = "default",
     className,
-    wrapperClassName,
-    disabled
-  } = _b, props = __objRest(_b, [
-    "id",
-    "label",
-    "hideLabel",
-    "error",
-    "helperText",
-    "size",
-    "variant",
-    "className",
-    "wrapperClassName",
-    "disabled"
-  ]);
-  const autoId = useId();
-  const id = idProp != null ? idProp : autoId;
-  const hasError = Boolean(error);
-  return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ jsx12(
-      "label",
-      {
-        htmlFor: id,
-        className: cn(
-          "ph-label",
-          hideLabel && "sr-only",
-          disabled && "opacity-50"
-        ),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsx12(
-      "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__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
-    error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
-  ] });
-}
-function Select(_a) {
+    wrapperClassName,
+    disabled,
+    required,
+    "aria-describedby": ariaDescribedBy
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "hideLabel",
+    "error",
+    "helperText",
+    "size",
+    "variant",
+    "className",
+    "wrapperClassName",
+    "disabled",
+    "required",
+    "aria-describedby"
+  ]);
+  const autoId = useId3();
+  const id = idProp != null ? idProp : autoId;
+  const hasError = Boolean(error);
+  return /* @__PURE__ */ jsx16(
+    FormField,
+    {
+      controlId: id,
+      label,
+      hideLabel,
+      helperText,
+      error,
+      required,
+      disabled,
+      className: wrapperClassName,
+      children: (fieldProps) => /* @__PURE__ */ jsx16(
+        "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 = forwardRef8(function Select2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -824,7 +1499,9 @@ function Select(_a) {
     className,
     wrapperClassName,
     disabled,
-    children
+    children,
+    required,
+    "aria-describedby": ariaDescribedBy
   } = _b, props = __objRest(_b, [
     "id",
     "label",
@@ -835,42 +1512,34 @@ function Select(_a) {
     "className",
     "wrapperClassName",
     "disabled",
-    "children"
+    "children",
+    "required",
+    "aria-describedby"
   ]);
-  const autoId = useId();
+  const autoId = useId3();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ jsx12(
-      "label",
-      {
-        htmlFor: id,
-        className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsx12(
-      "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__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
-    error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
-  ] });
-}
-function Textarea(_a) {
+  return /* @__PURE__ */ jsx16(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ jsx16(
+    "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 = forwardRef8(function Textarea2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -880,7 +1549,9 @@ function Textarea(_a) {
     size = "md",
     className,
     wrapperClassName,
-    disabled
+    disabled,
+    required,
+    "aria-describedby": ariaDescribedBy
   } = _b, props = __objRest(_b, [
     "id",
     "label",
@@ -890,40 +1561,32 @@ function Textarea(_a) {
     "size",
     "className",
     "wrapperClassName",
-    "disabled"
+    "disabled",
+    "required",
+    "aria-describedby"
   ]);
-  const autoId = useId();
+  const autoId = useId3();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ jsx12(
-      "label",
-      {
-        htmlFor: id,
-        className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsx12(
-      "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__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
-    error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
-  ] });
-}
-function Checkbox(_a) {
+  return /* @__PURE__ */ jsx16(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ jsx16(
+    "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 = forwardRef8(function Checkbox2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -931,7 +1594,8 @@ function Checkbox(_a) {
     helperText,
     className,
     wrapperClassName,
-    disabled
+    disabled,
+    "aria-describedby": ariaDescribedBy
   } = _b, props = __objRest(_b, [
     "id",
     "label",
@@ -939,33 +1603,45 @@ function Checkbox(_a) {
     "helperText",
     "className",
     "wrapperClassName",
-    "disabled"
+    "disabled",
+    "aria-describedby"
   ]);
-  const autoId = useId();
+  const autoId = useId3();
   const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
-  return /* @__PURE__ */ jsxs8("div", { className: cn("ph-control-row", wrapperClassName), children: [
-    /* @__PURE__ */ jsx12(
-      "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__ */ jsx12("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
-    helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-xs text-ph-subtle", children: helperText }),
-    error && /* @__PURE__ */ jsx12("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__ */ jsxs13("div", { className: cn("ph-control-row", wrapperClassName), children: [
+    /* @__PURE__ */ jsxs13("span", { className: "ph-checkbox-wrap", children: [
+      /* @__PURE__ */ jsx16(
+        "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__ */ jsx16(IconCheck, { className: "ph-checkbox-icon", "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { className: "ph-control-copy", children: [
+      /* @__PURE__ */ jsx16("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
+      descriptionId ? /* @__PURE__ */ jsx16("p", { id: descriptionId, className: "text-xs text-ph-subtle", children: helperText }) : null,
+      errorId ? /* @__PURE__ */ jsx16("p", { id: errorId, className: "text-xs font-medium text-ph-danger", children: error }) : null
+    ] })
   ] });
-}
-function Radio(_a) {
+});
+Checkbox.displayName = "Checkbox";
+var Radio = forwardRef8(function Radio2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -979,22 +1655,24 @@ function Radio(_a) {
     "wrapperClassName",
     "disabled"
   ]);
-  const autoId = useId();
+  const autoId = useId3();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ jsxs8("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs13("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ jsx16(
       "input",
       __spreadValues({
+        ref,
         id,
         type: "radio",
         disabled,
         className: cn("ph-radio", disabled && "cursor-not-allowed", className)
       }, props)
     ),
-    /* @__PURE__ */ jsx12("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
+    /* @__PURE__ */ jsx16("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
   ] });
-}
-function Toggle(_a) {
+});
+Radio.displayName = "Radio";
+var Toggle = forwardRef8(function Toggle2(_a, ref) {
   var _b = _a, {
     id: idProp,
     label,
@@ -1008,13 +1686,14 @@ function Toggle(_a) {
     "wrapperClassName",
     "disabled"
   ]);
-  const autoId = useId();
+  const autoId = useId3();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ jsxs8("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
-    /* @__PURE__ */ jsx12("span", { className: disabled ? "opacity-60" : void 0, children: label }),
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs13("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ jsx16("span", { className: disabled ? "opacity-60" : void 0, children: label }),
+    /* @__PURE__ */ jsx16(
       "input",
       __spreadValues({
+        ref,
         id,
         type: "checkbox",
         role: "switch",
@@ -1023,9 +1702,11 @@ function Toggle(_a) {
       }, props)
     )
   ] });
-}
-function Range(_a) {
+});
+Toggle.displayName = "Toggle";
+var Range = forwardRef8(function Range2(_a, ref) {
   var _b = _a, {
+    id: idProp,
     label,
     minLabel,
     maxLabel,
@@ -1033,6 +1714,7 @@ function Range(_a) {
     wrapperClassName,
     className
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "minLabel",
     "maxLabel",
@@ -1040,35 +1722,55 @@ function Range(_a) {
     "wrapperClassName",
     "className"
   ]);
-  return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ jsx12("label", { className: "ph-label", children: label }),
-    /* @__PURE__ */ jsx12("input", __spreadValues({ type: "range", className: cn("ph-range", className) }, props)),
-    (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ jsxs8("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
-      /* @__PURE__ */ jsx12("span", { children: minLabel }),
-      /* @__PURE__ */ jsx12("span", { children: valueLabel }),
-      /* @__PURE__ */ jsx12("span", { children: maxLabel })
+  const autoId = useId3();
+  const id = idProp != null ? idProp : autoId;
+  return /* @__PURE__ */ jsxs13("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ jsx16("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ jsx16("input", __spreadValues({ ref, id, type: "range", className: cn("ph-range", className) }, props)),
+    (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ jsxs13("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
+      /* @__PURE__ */ jsx16("span", { children: minLabel }),
+      /* @__PURE__ */ jsx16("span", { children: valueLabel }),
+      /* @__PURE__ */ jsx16("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__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ jsx12("label", { className: "ph-label", children: label }),
-    /* @__PURE__ */ jsxs8("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__ */ jsx12("input", __spreadValues({ type: "file", className: cn("sr-only", className) }, props)),
+});
+Range.displayName = "Range";
+var FileUpload = forwardRef8(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 = useId3();
+  const id = idProp != null ? idProp : autoId;
+  return /* @__PURE__ */ jsxs13("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ jsx16("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ jsxs13("label", { htmlFor: id, className: "ph-file-upload", children: [
+      /* @__PURE__ */ jsx16("input", __spreadValues({ ref, id, type: "file", className: cn("sr-only", className) }, props)),
       prompt
     ] })
   ] });
-}
+});
+FileUpload.displayName = "FileUpload";
 
 // src/components/ui/Modal.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import * as Dialog from "@radix-ui/react-dialog";
+import { useRef } from "react";
+import { jsx as jsx17, jsxs as jsxs14 } from "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,
@@ -1079,50 +1781,67 @@ function Modal({
   footer,
   size = "md",
   className,
-  showCloseButton = true
+  showCloseButton = true,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
+  "aria-label": ariaLabel
 }) {
-  if (!open) return null;
-  return /* @__PURE__ */ jsx13("div", { className: "ph-modal-overlay", role: "presentation", onClick: onClose, children: /* @__PURE__ */ jsxs9(
-    "div",
+  const canDismiss = Boolean(onClose);
+  const restoreFocusRef = useRef(null);
+  return /* @__PURE__ */ jsx17(
+    Dialog.Root,
     {
-      role: "dialog",
-      "aria-modal": true,
-      className: cn(
-        "ph-modal-panel",
-        sizeMap4[size],
-        className
-      ),
-      onClick: (e) => e.stopPropagation(),
-      children: [
-        (title || showCloseButton) && /* @__PURE__ */ jsxs9("header", { className: "flex items-start justify-between gap-4", children: [
-          /* @__PURE__ */ jsxs9("div", { children: [
-            title && /* @__PURE__ */ jsx13("h3", { className: "text-lg font-bold text-ph-ink", children: title }),
-            description && /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-ph-subtle", children: description })
-          ] }),
-          showCloseButton && onClose && /* @__PURE__ */ jsx13(
-            "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__ */ jsx13(IconClose, { className: "h-5 w-5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx13("div", { className: "mt-4", children }),
-        footer && /* @__PURE__ */ jsx13("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__ */ jsxs14(Dialog.Portal, { children: [
+        /* @__PURE__ */ jsx17(Dialog.Overlay, { className: "ph-modal-overlay" }),
+        /* @__PURE__ */ jsxs14(
+          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__ */ jsx17(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
+              title || description || showCloseButton && canDismiss ? /* @__PURE__ */ jsxs14("header", { className: "ph-modal-header", children: [
+                /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
+                  title ? /* @__PURE__ */ jsx17(Dialog.Title, { className: "text-lg font-bold text-ph-ink", children: title }) : null,
+                  description ? /* @__PURE__ */ jsx17(Dialog.Description, { className: "mt-1 text-sm text-ph-subtle", children: description }) : null
+                ] }),
+                showCloseButton && canDismiss ? /* @__PURE__ */ jsx17(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx17("button", { type: "button", className: "ph-modal-close", "aria-label": "Close dialog", children: /* @__PURE__ */ jsx17(IconClose, { className: "h-5 w-5", "aria-hidden": true }) }) }) : null
+              ] }) : null,
+              /* @__PURE__ */ jsx17("div", { className: "ph-modal-body", children }),
+              footer ? /* @__PURE__ */ jsx17("div", { className: "ph-modal-footer", children: footer }) : null
+            ]
+          })
+        )
+      ] })
     }
-  ) });
+  );
 }
 
 // src/components/ui/Navigation.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function Breadcrumbs({ items, label = "Breadcrumb", className }) {
-  return /* @__PURE__ */ jsx14("nav", { "aria-label": label, className: cn("ph-breadcrumbs", className), children: items.map((item, index) => /* @__PURE__ */ jsxs10("span", { className: "contents", children: [
-    index > 0 ? /* @__PURE__ */ jsx14("span", { className: "ph-breadcrumb-sep", "aria-hidden": "true", children: "/" }) : null,
-    item.current || !item.href ? /* @__PURE__ */ jsx14("span", { className: "ph-breadcrumb-current", "aria-current": item.current ? "page" : void 0, children: item.label }) : /* @__PURE__ */ jsx14("a", { href: item.href, className: "ph-breadcrumb-link", children: item.label })
+  return /* @__PURE__ */ jsx18("nav", { "aria-label": label, className: cn("ph-breadcrumbs", className), children: items.map((item, index) => /* @__PURE__ */ jsxs15("span", { className: "contents", children: [
+    index > 0 ? /* @__PURE__ */ jsx18("span", { className: "ph-breadcrumb-sep", "aria-hidden": "true", children: "/" }) : null,
+    item.current || !item.href ? /* @__PURE__ */ jsx18("span", { className: "ph-breadcrumb-current", "aria-current": item.current ? "page" : void 0, children: item.label }) : /* @__PURE__ */ jsx18("a", { href: item.href, className: "ph-breadcrumb-link", children: item.label })
   ] }, `${item.label}-${index}`)) });
 }
 function Pagination({
@@ -1135,8 +1854,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__ */ jsxs10("nav", { "aria-label": label, className: cn("ph-pagination", className), children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs15("nav", { "aria-label": label, className: cn("ph-pagination", className), children: [
+    /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -1144,12 +1863,12 @@ function Pagination({
         disabled: page <= 1,
         "aria-label": "Previous page",
         onClick: () => onPageChange == null ? void 0 : onPageChange(page - 1),
-        children: /* @__PURE__ */ jsx14(IconChevronLeft, { className: "mx-auto h-4 w-4", "aria-hidden": true })
+        children: /* @__PURE__ */ jsx18(IconChevronLeft, { className: "mx-auto h-4 w-4", "aria-hidden": true })
       }
     ),
-    uniquePages.map((pageNumber, index) => /* @__PURE__ */ jsxs10("span", { className: "contents", children: [
-      !compact && index === uniquePages.length - 1 && pageNumber > 4 ? /* @__PURE__ */ jsx14("span", { className: "ph-pagination-ellipsis", "aria-hidden": "true", children: "..." }) : null,
-      /* @__PURE__ */ jsx14(
+    uniquePages.map((pageNumber, index) => /* @__PURE__ */ jsxs15("span", { className: "contents", children: [
+      !compact && index === uniquePages.length - 1 && pageNumber > 4 ? /* @__PURE__ */ jsx18("span", { className: "ph-pagination-ellipsis", "aria-hidden": "true", children: "..." }) : null,
+      /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -1160,7 +1879,7 @@ function Pagination({
         }
       )
     ] }, pageNumber)),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -1168,25 +1887,25 @@ function Pagination({
         disabled: page >= totalPages,
         "aria-label": "Next page",
         onClick: () => onPageChange == null ? void 0 : onPageChange(page + 1),
-        children: /* @__PURE__ */ jsx14(IconChevronRight, { className: "mx-auto h-4 w-4", "aria-hidden": true })
+        children: /* @__PURE__ */ jsx18(IconChevronRight, { className: "mx-auto h-4 w-4", "aria-hidden": true })
       }
     )
   ] });
 }
 
 // src/components/ui/Panel.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function Panel(_a) {
   var _b = _a, { title, description, children, className } = _b, props = __objRest(_b, ["title", "description", "children", "className"]);
-  return /* @__PURE__ */ jsxs11("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
-    title && /* @__PURE__ */ jsx15("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
-    description && /* @__PURE__ */ jsx15("p", { className: "text-sm text-ph-subtle", children: description }),
+  return /* @__PURE__ */ jsxs16("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
+    title && /* @__PURE__ */ jsx19("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
+    description && /* @__PURE__ */ jsx19("p", { className: "text-sm text-ph-subtle", children: description }),
     children
   ] }));
 }
 
 // src/components/ui/Rating.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function Rating(_a) {
   var _b = _a, {
     label,
@@ -1206,9 +1925,9 @@ function Rating(_a) {
     "wrapperClassName"
   ]);
   const stars = Array.from({ length: max }, (_, index) => index + 1);
-  return /* @__PURE__ */ jsxs12("div", { className: cn("ph-field", wrapperClassName), children: [
-    label && /* @__PURE__ */ jsx16("span", { className: "ph-label", children: label }),
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs17("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ jsx20("span", { className: "ph-label", children: label }),
+    /* @__PURE__ */ jsx20(
       "div",
       __spreadProps(__spreadValues({
         className: cn("ph-rating flex", className),
@@ -1218,7 +1937,7 @@ function Rating(_a) {
         children: stars.map((star) => {
           const active = star <= value;
           if (readOnly) {
-            return /* @__PURE__ */ jsx16(
+            return /* @__PURE__ */ jsx20(
               IconStar,
               {
                 className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border"),
@@ -1227,7 +1946,7 @@ function Rating(_a) {
               star
             );
           }
-          return /* @__PURE__ */ jsx16(
+          return /* @__PURE__ */ jsx20(
             "button",
             {
               type: "button",
@@ -1236,7 +1955,7 @@ function Rating(_a) {
               "aria-checked": active,
               "aria-label": `${star} out of ${max}`,
               onClick: () => onChange == null ? void 0 : onChange(star),
-              children: /* @__PURE__ */ jsx16(IconStar, { className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border") })
+              children: /* @__PURE__ */ jsx20(IconStar, { className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border") })
             },
             star
           );
@@ -1247,8 +1966,8 @@ function Rating(_a) {
 }
 
 // src/components/ui/SearchInput.tsx
-import { useId as useId2 } from "react";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useId as useId4 } from "react";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function SearchInput(_a) {
   var _b = _a, {
     id: idProp,
@@ -1269,12 +1988,12 @@ function SearchInput(_a) {
     "wrapperClassName",
     "placeholder"
   ]);
-  const autoId = useId2();
+  const autoId = useId4();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ jsxs13("div", { className: cn("relative", wrapperClassName), children: [
-    /* @__PURE__ */ jsx17("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
-    /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
-      shortcut != null ? /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs18("div", { className: cn("relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx21("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
+    /* @__PURE__ */ jsxs18("div", { className: "relative", children: [
+      shortcut != null ? /* @__PURE__ */ jsx21(
         "span",
         {
           className: "ph-shortcut pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-xs",
@@ -1282,7 +2001,7 @@ function SearchInput(_a) {
           children: shortcut
         }
       ) : null,
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx21(
         "input",
         __spreadValues({
           id,
@@ -1316,12 +2035,12 @@ function SearchGroup(_a) {
     "wrapperClassName",
     "className"
   ]);
-  const autoId = useId2();
+  const autoId = useId4();
   const id = idProp != null ? idProp : autoId;
-  return /* @__PURE__ */ jsxs13("div", { className: cn("ph-field", wrapperClassName), children: [
-    /* @__PURE__ */ jsx17("label", { htmlFor: id, className: "ph-label", children: label }),
-    /* @__PURE__ */ jsxs13("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
-      /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs18("div", { className: cn("ph-field", wrapperClassName), children: [
+    /* @__PURE__ */ jsx21("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ jsxs18("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
+      /* @__PURE__ */ jsx21(
         "input",
         __spreadValues({
           id,
@@ -1330,12 +2049,12 @@ function SearchGroup(_a) {
           className: cn("ph-input ph-input-group-field min-w-0 flex-1", className)
         }, props)
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx21(
         Button,
         {
           type: "submit",
           variant: "primary",
-          icon: /* @__PURE__ */ jsx17(IconSearch, { className: "h-4 w-4", "aria-hidden": true }),
+          icon: /* @__PURE__ */ jsx21(IconSearch, { className: "h-4 w-4", "aria-hidden": true }),
           className: "ph-search-group__submit",
           "aria-label": submitLabel
         }
@@ -1345,7 +2064,7 @@ function SearchGroup(_a) {
 }
 
 // src/components/ui/Table.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function Table({
   data,
   columns,
@@ -1356,15 +2075,15 @@ function Table({
   className,
   caption
 }) {
-  return /* @__PURE__ */ jsx18("div", { className: cn("ph-table-wrap", compact && "ph-table-compact", className), children: /* @__PURE__ */ jsxs14("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
-    caption && /* @__PURE__ */ jsx18("caption", { className: "sr-only", children: caption }),
-    /* @__PURE__ */ jsx18("thead", { children: /* @__PURE__ */ jsx18("tr", { children: columns.map((col) => /* @__PURE__ */ jsx18("th", { className: col.className, children: col.header }, col.key)) }) }),
-    /* @__PURE__ */ jsx18("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx18("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ jsx18("td", { className: col.className, children: col.cell(row) }, col.key)) }, i)) })
+  return /* @__PURE__ */ jsx22("div", { className: cn("ph-table-wrap", compact && "ph-table-compact", className), children: /* @__PURE__ */ jsxs19("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
+    caption && /* @__PURE__ */ jsx22("caption", { className: "sr-only", children: caption }),
+    /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsx22("tr", { children: columns.map((col) => /* @__PURE__ */ jsx22("th", { className: col.className, children: col.header }, col.key)) }) }),
+    /* @__PURE__ */ jsx22("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx22("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ jsx22("td", { className: col.className, children: col.cell(row) }, col.key)) }, i)) })
   ] }) });
 }
 
 // src/components/ui/Stat.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 var toneMap = {
   default: "text-ph-ink",
   brand: "text-ph-brand",
@@ -1381,16 +2100,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__ */ jsxs15("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
-    icon && /* @__PURE__ */ jsx19("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
-    /* @__PURE__ */ jsx19("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
-    /* @__PURE__ */ jsx19("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
-    footer && /* @__PURE__ */ jsx19("p", { className: "text-xs text-ph-subtle", children: footer })
+  return /* @__PURE__ */ jsxs20("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
+    icon && /* @__PURE__ */ jsx23("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
+    /* @__PURE__ */ jsx23("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
+    /* @__PURE__ */ jsx23("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
+    footer && /* @__PURE__ */ jsx23("p", { className: "text-xs text-ph-subtle", children: footer })
   ] }));
 }
 
 // src/components/ui/Toast.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "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" },
@@ -1406,33 +2125,33 @@ function Toast({
 }) {
   const config = statusConfig2[status];
   const Icon = config.icon;
-  return /* @__PURE__ */ jsxs16("div", { className: cn("ph-toast", config.bg, className), children: [
-    /* @__PURE__ */ jsx20(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color), "aria-hidden": true }),
-    /* @__PURE__ */ jsxs16("div", { className: "pr-8", children: [
-      /* @__PURE__ */ jsx20("div", { className: "font-semibold", children: title }),
-      description && /* @__PURE__ */ jsx20("p", { className: "mt-1 text-xs text-ph-subtle", children: description })
+  return /* @__PURE__ */ jsxs21("div", { className: cn("ph-toast", config.bg, className), children: [
+    /* @__PURE__ */ jsx24(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color), "aria-hidden": true }),
+    /* @__PURE__ */ jsxs21("div", { className: "pr-8", children: [
+      /* @__PURE__ */ jsx24("div", { className: "font-semibold", children: title }),
+      description && /* @__PURE__ */ jsx24("p", { className: "mt-1 text-xs text-ph-subtle", children: description })
     ] }),
-    onDismiss && /* @__PURE__ */ jsx20(
+    onDismiss && /* @__PURE__ */ jsx24(
       "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__ */ jsx20(IconClose, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx24(IconClose, { className: "h-4 w-4" })
       }
     )
   ] });
 }
 function ToastStack({ children, className }) {
-  return /* @__PURE__ */ jsx20("div", { className: cn("ph-toast-stack", className), children });
+  return /* @__PURE__ */ jsx24("div", { className: cn("ph-toast-stack", className), children });
 }
 
 // src/components/ui/Tabs.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, variant = "pill", className }) {
   if (variant === "underline") {
-    return /* @__PURE__ */ jsx21("div", { className: cn("flex gap-6 border-b border-ph-border", className), children: items.map((item) => /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx25("div", { className: cn("flex gap-6 border-b border-ph-border", className), children: items.map((item) => /* @__PURE__ */ jsx25(
       "button",
       {
         type: "button",
@@ -1446,7 +2165,7 @@ function Tabs({ items, value, onChange, variant = "pill", className }) {
       item.value
     )) });
   }
-  return /* @__PURE__ */ jsx21("div", { className: cn("ph-tabs-row inline-flex", className), children: items.map((item) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx25("div", { className: cn("ph-tabs-row inline-flex", className), children: items.map((item) => /* @__PURE__ */ jsx25(
     "button",
     {
       type: "button",
@@ -1645,6 +2364,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)));
@@ -1690,17 +2437,17 @@ function ThemeDomSync() {
 
 // src/components/ui/ThemeManager.tsx
 import { useLayoutEffect as useLayoutEffect2 } from "react";
-import { Fragment as Fragment5, jsx as jsx22 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx26 } from "react/jsx-runtime";
 function ThemeManager({ children }) {
   useLayoutEffect2(() => {
     persistTheme(readStoredTheme());
   }, []);
-  return /* @__PURE__ */ jsx22(Fragment5, { children });
+  return /* @__PURE__ */ jsx26(Fragment4, { children });
 }
 
 // src/components/ui/ThemeSwitcher.tsx
 import { useEffect, useState } from "react";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function ThemeSwitcher({ className }) {
   const [themeId, setThemeId] = useState("hedgehog-light");
   useEffect(() => {
@@ -1708,9 +2455,9 @@ function ThemeSwitcher({ className }) {
     persistTheme(id);
     setThemeId(id);
   }, []);
-  return /* @__PURE__ */ jsxs17("label", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx23("span", { className: "shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm", children: "Theme" }),
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs22("label", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx27("span", { className: "shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm", children: "Theme" }),
+    /* @__PURE__ */ jsx27(
       "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",
@@ -1721,7 +2468,7 @@ function ThemeSwitcher({ className }) {
           persistTheme(next);
           setThemeId(next);
         },
-        children: THEME_GROUPS.map((group) => /* @__PURE__ */ jsx23("optgroup", { label: group, children: THEMES.filter((theme) => theme.group === group).map((theme) => /* @__PURE__ */ jsx23("option", { value: theme.id, children: theme.name }, theme.id)) }, group))
+        children: THEME_GROUPS.map((group) => /* @__PURE__ */ jsx27("optgroup", { label: group, children: THEMES.filter((theme) => theme.group === group).map((theme) => /* @__PURE__ */ jsx27("option", { value: theme.id, children: theme.name }, theme.id)) }, group))
       }
     )
   ] });
@@ -1729,7 +2476,7 @@ function ThemeSwitcher({ className }) {
 
 // src/components/ui/Accordion.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function Accordion({
   items,
   allowMultiple = false,
@@ -1751,18 +2498,18 @@ function Accordion({
       return next;
     });
   };
-  return /* @__PURE__ */ jsx24("div", { className: cn("divide-y divide-ph-border rounded-xl border border-ph-border bg-ph-surface", className), children: items.map((item) => {
+  return /* @__PURE__ */ jsx28("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__ */ jsxs18("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
-      /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs23("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
+      /* @__PURE__ */ jsxs23(
         "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__ */ jsx24("span", { className: "font-semibold text-ph-ink", children: item.title }),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx28("span", { className: "font-semibold text-ph-ink", children: item.title }),
+            /* @__PURE__ */ jsx28(
               IconChevronDown,
               {
                 className: cn(
@@ -1774,14 +2521,14 @@ function Accordion({
           ]
         }
       ),
-      /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx28(
         "div",
         {
           className: cn(
             "grid transition-all duration-200",
             isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
           ),
-          children: /* @__PURE__ */ jsx24("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx24("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
+          children: /* @__PURE__ */ jsx28("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx28("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
         }
       )
     ] }, item.id);
@@ -1789,30 +2536,30 @@ function Accordion({
 }
 
 // src/components/ui/Stepper.tsx
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function Stepper({ steps, currentStep, className }) {
-  return /* @__PURE__ */ jsx25("div", { className: cn("flex items-start gap-2", className), children: steps.map((step, index) => {
+  return /* @__PURE__ */ jsx29("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__ */ jsxs19("div", { className: "flex flex-1 items-start gap-2", children: [
-      /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 flex-col items-center", children: [
-        /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsxs24("div", { className: "flex flex-1 items-start gap-2", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "flex flex-1 flex-col items-center", children: [
+        /* @__PURE__ */ jsx29(
           "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__ */ jsx25("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ jsx25("path", { d: "M5 13l4 4L19 7" }) }) : index + 1
+            children: isCompleted ? /* @__PURE__ */ jsx29(IconCheck, { className: "h-5 w-5", "aria-hidden": true }) : index + 1
           }
         ),
-        /* @__PURE__ */ jsxs19("div", { className: "mt-2 text-center", children: [
-          /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsxs24("div", { className: "mt-2 text-center", children: [
+          /* @__PURE__ */ jsx29(
             "p",
             {
               className: cn(
@@ -1823,10 +2570,10 @@ function Stepper({ steps, currentStep, className }) {
               children: step.label
             }
           ),
-          step.description && /* @__PURE__ */ jsx25("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: step.description })
+          step.description && /* @__PURE__ */ jsx29("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: step.description })
         ] })
       ] }),
-      index < steps.length - 1 && /* @__PURE__ */ jsx25(
+      index < steps.length - 1 && /* @__PURE__ */ jsx29(
         "div",
         {
           className: cn(
@@ -1840,16 +2587,16 @@ function Stepper({ steps, currentStep, className }) {
 }
 
 // src/components/ui/SegmentedControl.tsx
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 function SegmentedControl({ options, value, onChange, className }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       className: cn(
         "inline-flex rounded-lg bg-ph-muted p-1",
         className
       ),
-      children: options.map((option) => /* @__PURE__ */ jsxs20(
+      children: options.map((option) => /* @__PURE__ */ jsxs25(
         "button",
         {
           type: "button",
@@ -1859,7 +2606,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__ */ jsx26("span", { className: "h-4 w-4", children: option.icon }),
+            option.icon && /* @__PURE__ */ jsx30("span", { className: "h-4 w-4", children: option.icon }),
             option.label
           ]
         },
@@ -1870,8 +2617,8 @@ function SegmentedControl({ options, value, onChange, className }) {
 }
 
 // src/components/ui/CommandPalette.tsx
-import { useState as useState3, useEffect as useEffect2, useRef } from "react";
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useState as useState3, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 function CommandPalette({
   items,
   isOpen,
@@ -1881,7 +2628,7 @@ function CommandPalette({
 }) {
   const [query, setQuery] = useState3("");
   const [selectedIndex, setSelectedIndex] = useState3(0);
-  const inputRef = useRef(null);
+  const inputRef = useRef2(null);
   const filtered = items.filter(
     (item) => item.label.toLowerCase().includes(query.toLowerCase())
   );
@@ -1920,7 +2667,7 @@ function CommandPalette({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, filtered, selectedIndex, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx27("div", { className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm", children: /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsx31("div", { className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm", children: /* @__PURE__ */ jsxs26(
     "div",
     {
       className: cn(
@@ -1928,9 +2675,9 @@ function CommandPalette({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
-          /* @__PURE__ */ jsx27(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
-          /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
+          /* @__PURE__ */ jsx31(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
+          /* @__PURE__ */ jsx31(
             "input",
             {
               ref: inputRef,
@@ -1944,9 +2691,9 @@ function CommandPalette({
               className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
             }
           ),
-          /* @__PURE__ */ jsx27("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
+          /* @__PURE__ */ jsx31("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
         ] }),
-        /* @__PURE__ */ jsx27("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ jsx27("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx31("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ jsx31("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ jsxs26(
           "button",
           {
             type: "button",
@@ -1960,9 +2707,9 @@ function CommandPalette({
               index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
             ),
             children: [
-              item.icon && /* @__PURE__ */ jsx27("span", { className: "h-5 w-5", children: item.icon }),
-              /* @__PURE__ */ jsx27("span", { className: "flex-1", children: item.label }),
-              item.shortcut && /* @__PURE__ */ jsx27("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__ */ jsx31("span", { className: "h-5 w-5", children: item.icon }),
+              /* @__PURE__ */ jsx31("span", { className: "flex-1", children: item.label }),
+              item.shortcut && /* @__PURE__ */ jsx31("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
@@ -1974,7 +2721,7 @@ function CommandPalette({
 
 // src/components/ui/Calendar.tsx
 import { useState as useState4 } from "react";
-import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 function Calendar({ value, onChange, className }) {
   const [currentMonth, setCurrentMonth] = useState4(value || /* @__PURE__ */ new Date());
   const today = /* @__PURE__ */ new Date();
@@ -2016,42 +2763,44 @@ function Calendar({ value, onChange, className }) {
   for (let i = 1; i <= daysInMonth; i++) {
     days.push(i);
   }
-  return /* @__PURE__ */ jsxs22("div", { className: cn("w-[280px] rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", className), children: [
-    /* @__PURE__ */ jsxs22("div", { className: "mb-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs27("div", { className: cn("w-[280px] rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", className), children: [
+    /* @__PURE__ */ jsxs27("div", { className: "mb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx32(
         "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__ */ jsx28("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx28("path", { d: "M15 18l-6-6 6-6" }) })
+          children: /* @__PURE__ */ jsx32(IconChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ jsxs22("span", { className: "text-sm font-semibold text-ph-ink", children: [
+      /* @__PURE__ */ jsxs27("span", { className: "text-sm font-semibold text-ph-ink", children: [
         monthNames[month],
         " ",
         year
       ] }),
-      /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx32(
         "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__ */ jsx28("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx28("path", { d: "M9 18l6-6-6-6" }) })
+          children: /* @__PURE__ */ jsx32(IconChevronRight, { className: "h-5 w-5", "aria-hidden": true })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs22("div", { className: "grid grid-cols-7 gap-1", children: [
-      weekDays.map((day) => /* @__PURE__ */ jsx28("div", { className: "py-1 text-center text-xs font-medium text-ph-mutedtext", children: day }, day)),
-      days.map((day, index) => /* @__PURE__ */ jsx28("div", { className: "aspect-square", children: day && /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsxs27("div", { className: "grid grid-cols-7 gap-1", children: [
+      weekDays.map((day) => /* @__PURE__ */ jsx32("div", { className: "py-1 text-center text-xs font-medium text-ph-mutedtext", children: day }, day)),
+      days.map((day, index) => /* @__PURE__ */ jsx32("div", { className: "aspect-square", children: day && /* @__PURE__ */ jsx32(
         "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
         }
@@ -2062,10 +2811,10 @@ function Calendar({ value, onChange, className }) {
 
 // src/components/ui/HoverCard.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 function HoverCard({ trigger, children, className }) {
   const [isVisible, setIsVisible] = useState5(false);
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: "relative inline-block",
@@ -2073,7 +2822,7 @@ function HoverCard({ trigger, children, className }) {
       onMouseLeave: () => setIsVisible(false),
       children: [
         trigger,
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs28(
           "div",
           {
             className: cn(
@@ -2082,8 +2831,8 @@ function HoverCard({ trigger, children, className }) {
               className
             ),
             children: [
-              /* @__PURE__ */ jsx29("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__ */ jsx29("div", { className: "relative", children })
+              /* @__PURE__ */ jsx33("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__ */ jsx33("div", { className: "relative", children })
             ]
           }
         )
@@ -2093,9 +2842,9 @@ function HoverCard({ trigger, children, className }) {
 }
 
 // src/components/ui/EmptyState.tsx
-import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 function EmptyState({ icon, title, description, action, className }) {
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: cn(
@@ -2103,49 +2852,208 @@ function EmptyState({ icon, title, description, action, className }) {
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx30("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext", children: icon }),
-        /* @__PURE__ */ jsx30("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
-        description && /* @__PURE__ */ jsx30("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
-        action && /* @__PURE__ */ jsx30("div", { className: "mt-4", children: action })
+        icon && /* @__PURE__ */ jsx34("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext", children: icon }),
+        /* @__PURE__ */ jsx34("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
+        description && /* @__PURE__ */ jsx34("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
+        action && /* @__PURE__ */ jsx34("div", { className: "mt-4", children: action })
       ]
     }
   );
 }
 
 // src/components/ui/FilterChips.tsx
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
-function FilterChips({ chips, onToggle, onRemove, className }) {
-  return /* @__PURE__ */ jsx31("div", { className: cn("flex flex-wrap gap-2", className), children: chips.map((chip) => /* @__PURE__ */ jsxs25(
-    "button",
+import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+function FilterChips({
+  chips,
+  onToggle,
+  onRemove,
+  className,
+  "aria-label": ariaLabel = "Applied filters"
+}) {
+  return /* @__PURE__ */ jsx35("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__ */ jsxs30(Fragment5, { children: [
+      /* @__PURE__ */ jsx35("span", { className: "ph-filter-chip__label", children: chip.label }),
+      chip.value != null ? /* @__PURE__ */ jsx35("span", { className: "ph-filter-chip__value", children: chip.value }) : null
+    ] });
+    return /* @__PURE__ */ jsxs30(
+      "span",
+      {
+        className: cn("ph-filter-chip", chip.active && "ph-filter-chip--active"),
+        "data-state": chip.active ? "on" : "off",
+        children: [
+          onToggle ? /* @__PURE__ */ jsx35(
+            "button",
+            {
+              type: "button",
+              className: "ph-filter-chip__main",
+              "aria-pressed": Boolean(chip.active),
+              onClick: () => onToggle(chip.id),
+              children: content
+            }
+          ) : /* @__PURE__ */ jsx35("span", { className: "ph-filter-chip__main", children: content }),
+          chip.active && onRemove ? /* @__PURE__ */ jsx35(
+            "button",
+            {
+              type: "button",
+              className: "ph-filter-chip__remove",
+              "aria-label": `Remove ${label} filter`,
+              onClick: () => onRemove(chip.id),
+              children: /* @__PURE__ */ jsx35(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
+import { jsx as jsx36, jsxs as jsxs31 } from "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__ */ jsxs31("div", __spreadProps(__spreadValues({ className: cn("ph-filter-bar", className) }, props), { children: [
+    /* @__PURE__ */ jsxs31("div", { className: "ph-filter-bar__controls", role: "group", "aria-label": label, children: [
+      children,
+      onClear ? /* @__PURE__ */ jsx36("button", { type: "button", className: "ph-filter-bar__clear", onClick: onClear, children: clearLabel }) : null
+    ] }),
+    resultCount != null ? /* @__PURE__ */ jsx36("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__ */ jsx36(
+    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__ */ jsx31(
-          "span",
+      "aria-label": `${label}: ${accessibleValue}`,
+      align,
+      disabled,
+      className,
+      trigger: /* @__PURE__ */ jsxs31("span", { className: cn("ph-filter-menu-trigger", selected && "ph-filter-menu-trigger--active"), children: [
+        /* @__PURE__ */ jsx36(IconTuning, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        /* @__PURE__ */ jsx36("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        /* @__PURE__ */ jsx36("span", { className: "ph-filter-menu-trigger__value", children: displayValue })
+      ] }),
+      children: /* @__PURE__ */ jsx36(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ jsx36(
+        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__ */ jsx36(
+    DropdownMenu,
+    {
+      "aria-label": `${label}: ${selected ? getOptionText(selected) : "Choose sort order"}`,
+      align,
+      disabled,
+      className,
+      trigger: /* @__PURE__ */ jsxs31("span", { className: "ph-filter-menu-trigger ph-sort-menu-trigger", children: [
+        /* @__PURE__ */ jsx36(
+          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__ */ jsx31(IconClose, { className: "h-3 w-3" })
+            className: cn("h-3.5 w-3.5", direction === "ascending" && "rotate-180"),
+            "aria-hidden": true
           }
-        )
-      ]
-    },
-    chip.id
-  )) });
+        ),
+        /* @__PURE__ */ jsx36("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        selected ? /* @__PURE__ */ jsx36("span", { className: "ph-filter-menu-trigger__value", children: selected.label }) : null
+      ] }),
+      children: /* @__PURE__ */ jsx36(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ jsx36(
+        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
+import { jsx as jsx37, jsxs as jsxs32 } from "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__ */ jsxs32("div", __spreadProps(__spreadValues({ className: cn("ph-filter-controls", className) }, props), { children: [
+    /* @__PURE__ */ jsx37(FilterBar, __spreadProps(__spreadValues({}, barProps), { children })),
+    hasChips && chipsProps ? /* @__PURE__ */ jsx37(FilterChips, __spreadValues({}, chipsProps)) : emptyState != null ? emptyState : null
+  ] }));
 }
 
 // src/components/ui/CodeBlock.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 function CodeBlock({ code, language = "tsx", filename, className }) {
   const [copied, setCopied] = useState6(false);
   const handleCopy = async () => {
@@ -2153,17 +3061,17 @@ function CodeBlock({ code, language = "tsx", filename, className }) {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ jsxs26("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
-    (filename || language) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
-      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs26("div", { className: "flex gap-1.5", children: [
-          /* @__PURE__ */ jsx32("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
-          /* @__PURE__ */ jsx32("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
-          /* @__PURE__ */ jsx32("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
+  return /* @__PURE__ */ jsxs33("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
+    (filename || language) && /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs33("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ jsx38("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
+          /* @__PURE__ */ jsx38("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
+          /* @__PURE__ */ jsx38("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
         ] }),
-        filename && /* @__PURE__ */ jsx32("span", { className: "ml-2 text-xs text-white/60", children: filename })
+        filename && /* @__PURE__ */ jsx38("span", { className: "ml-2 text-xs text-white/60", children: filename })
       ] }),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx38(
         "button",
         {
           type: "button",
@@ -2173,35 +3081,35 @@ function CodeBlock({ code, language = "tsx", filename, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx32("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ jsx32("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
+    /* @__PURE__ */ jsx38("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ jsx38("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
   ] });
 }
 
 // src/components/ui/ComponentDocs.tsx
-import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false, className }) {
-  return /* @__PURE__ */ jsxs27("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
-    /* @__PURE__ */ jsxs27("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__ */ jsx33("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
-      /* @__PURE__ */ jsxs27("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__ */ jsx33("span", { className: "group-open:hidden", children: "Show" }),
-        /* @__PURE__ */ jsx33("span", { className: "hidden group-open:inline", children: "Hide" })
+  return /* @__PURE__ */ jsxs34("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
+    /* @__PURE__ */ jsxs34("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__ */ jsx39("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
+      /* @__PURE__ */ jsxs34("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__ */ jsx39("span", { className: "group-open:hidden", children: "Show" }),
+        /* @__PURE__ */ jsx39("span", { className: "hidden group-open:inline", children: "Hide" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx33("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ jsxs27("table", { className: "w-full text-left text-sm", children: [
-      /* @__PURE__ */ jsx33("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ jsxs27("tr", { children: [
-        /* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
-        /* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
-        /* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
-        /* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Use" })
+    /* @__PURE__ */ jsx39("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ jsxs34("table", { className: "w-full text-left text-sm", children: [
+      /* @__PURE__ */ jsx39("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ jsxs34("tr", { children: [
+        /* @__PURE__ */ jsx39("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
+        /* @__PURE__ */ jsx39("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
+        /* @__PURE__ */ jsx39("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
+        /* @__PURE__ */ jsx39("th", { className: "px-4 py-2 font-semibold", children: "Use" })
       ] }) }),
-      /* @__PURE__ */ jsx33("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
+      /* @__PURE__ */ jsx39("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
         var _a;
-        return /* @__PURE__ */ jsxs27("tr", { children: [
-          /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
-          /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
-          /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
-          /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
+        return /* @__PURE__ */ jsxs34("tr", { children: [
+          /* @__PURE__ */ jsx39("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
+          /* @__PURE__ */ jsx39("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
+          /* @__PURE__ */ jsx39("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
+          /* @__PURE__ */ jsx39("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
         ] }, row.name);
       }) })
     ] }) })
@@ -2210,7 +3118,7 @@ function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false,
 
 // src/components/ui/ShowcaseWrapper.tsx
 import { useState as useState7 } from "react";
-import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
 function ShowcaseWrapper({
   id,
   title,
@@ -2224,47 +3132,30 @@ function ShowcaseWrapper({
   var _a;
   const [showCode, setShowCode] = useState7(false);
   const fallbackId = (_a = titleIdMap[title]) != null ? _a : title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-  return /* @__PURE__ */ jsxs28("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
-    /* @__PURE__ */ jsxs28("div", { className: "ph-h2-rule mb-8", children: [
-      /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx34("h2", { children: title }),
-        /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs35("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
+    /* @__PURE__ */ jsxs35("div", { className: "ph-h2-rule mb-8", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx40("h2", { children: title }),
+        /* @__PURE__ */ jsx40(
           "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__ */ jsxs28(
-              "svg",
-              {
-                className: "h-5 w-5",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: [
-                  /* @__PURE__ */ jsx34("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
-                  /* @__PURE__ */ jsx34("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-                  /* @__PURE__ */ jsx34("line", { x1: "12", y1: "17", x2: "12", y2: "21" }),
-                  /* @__PURE__ */ jsx34("line", { x1: "6", y1: "8", x2: "6", y2: "8" }),
-                  /* @__PURE__ */ jsx34("line", { x1: "10", y1: "8", x2: "10", y2: "8" })
-                ]
-              }
-            )
+            "aria-label": showCode ? "Hide code" : "Show code",
+            children: /* @__PURE__ */ jsx40(IconCodePreview, { className: "h-5 w-5", "aria-hidden": true })
           }
         )
       ] }),
-      /* @__PURE__ */ jsx34("hr", {})
+      /* @__PURE__ */ jsx40("hr", {})
     ] }),
-    description && /* @__PURE__ */ jsx34("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
-    docs && /* @__PURE__ */ jsx34("div", { className: "mb-6", children: docs }),
-    /* @__PURE__ */ jsxs28(
+    description && /* @__PURE__ */ jsx40("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
+    docs && /* @__PURE__ */ jsx40("div", { className: "mb-6", children: docs }),
+    /* @__PURE__ */ jsxs35(
       "div",
       {
         className: cn(
@@ -2272,15 +3163,15 @@ function ShowcaseWrapper({
           showCode ? "lg:grid lg:grid-cols-[1fr,minmax(360px,420px)]" : "block"
         ),
         children: [
-          /* @__PURE__ */ jsx34("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx40("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
+          /* @__PURE__ */ jsx40(
             "div",
             {
               className: cn(
                 "transition-all duration-300",
                 showCode ? "block opacity-100" : "hidden opacity-0 lg:hidden"
               ),
-              children: /* @__PURE__ */ jsx34("div", { className: "sticky top-20", children: /* @__PURE__ */ jsx34(CodeBlock, { code, filename }) })
+              children: /* @__PURE__ */ jsx40("div", { className: "sticky top-20", children: /* @__PURE__ */ jsx40(CodeBlock, { code, filename }) })
             }
           )
         ]
@@ -2329,41 +3220,41 @@ var titleIdMap = {
 };
 
 // src/components/ui/CollapsibleSection.tsx
-import { useState as useState8 } from "react";
-import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
+import { useId as useId5, useState as useState8 } from "react";
+import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 function CollapsibleSection({ title, children, defaultOpen = true, id }) {
   const [isOpen, setIsOpen] = useState8(defaultOpen);
-  return /* @__PURE__ */ jsxs29("section", { id, className: "scroll-mt-20", children: [
-    /* @__PURE__ */ jsxs29(
+  const generatedId = useId5();
+  const contentId = `${id != null ? id : generatedId}-content`;
+  return /* @__PURE__ */ jsxs36("section", { id, className: "scroll-mt-20", children: [
+    /* @__PURE__ */ jsxs36(
       "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__ */ jsx35("span", { className: "text-lg font-bold text-ph-ink", children: title }),
-          /* @__PURE__ */ jsx35(
-            "svg",
+          /* @__PURE__ */ jsx41("span", { className: "text-lg font-bold text-ph-ink", children: title }),
+          /* @__PURE__ */ jsx41(
+            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__ */ jsx35("path", { d: "M6 9l6 6 6-6" })
+              "aria-hidden": true
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx41(
       "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"
@@ -2375,7 +3266,7 @@ function CollapsibleSection({ title, children, defaultOpen = true, id }) {
 }
 
 // src/components/ui/Typography.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var toneMap2 = {
   default: "text-ph-ink",
   muted: "text-ph-mutedtext",
@@ -2404,47 +3295,47 @@ function Display({
   truncate,
   className
 }) {
-  return /* @__PURE__ */ jsx36("h1", { className: textClass("text-4xl font-extrabold tracking-tight md:text-5xl", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("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__ */ jsx36("h1", { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("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__ */ jsx36("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
 }
 function H3({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx36("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
 }
 function H4({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx36("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
 }
 function H5({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx36("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
 }
 function P({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx36("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
 }
 function Small({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx36("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
 }
 function Caption({ children, tone = "muted", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx36("span", { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("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__ */ jsx36("span", { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("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__ */ jsx36("p", { className: textClass("text-lg leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("p", { className: textClass("text-lg leading-relaxed", tone, weight, truncate, className), children });
 }
 function Mono({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx36("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
 }
 function Label({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ jsx36("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ jsx42("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
 }
 
 // src/components/ui/Avatar.tsx
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
 var sizeMap5 = {
   xs: "h-8 w-8 text-[10px]",
   sm: "h-10 w-10 text-xs",
@@ -2476,8 +3367,8 @@ function Avatar(_a) {
     "badge",
     "className"
   ]);
-  return /* @__PURE__ */ jsxs30("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
-    /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs37("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
+    /* @__PURE__ */ jsx43(
       "div",
       {
         className: cn(
@@ -2488,7 +3379,7 @@ function Avatar(_a) {
         children: icon || label
       }
     ),
-    status && /* @__PURE__ */ jsx37(
+    status && /* @__PURE__ */ jsx43(
       "span",
       {
         className: cn(
@@ -2497,7 +3388,7 @@ function Avatar(_a) {
         )
       }
     ),
-    badge && /* @__PURE__ */ jsx37("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__ */ jsx43("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) {
@@ -2505,9 +3396,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__ */ jsxs30("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
+  return /* @__PURE__ */ jsxs37("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
     visible,
-    remaining > 0 && /* @__PURE__ */ jsx37(
+    remaining > 0 && /* @__PURE__ */ jsx43(
       Avatar,
       {
         label: `+${remaining}`,
@@ -2519,7 +3410,7 @@ function AvatarGroup(_a) {
 }
 
 // src/components/ui/Progress.tsx
-import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 var sizeMap6 = {
   sm: "h-1",
   md: "h-2",
@@ -2544,15 +3435,15 @@ function Progress(_a) {
     "className"
   ]);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs31("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
-    (label || showPercentage) && /* @__PURE__ */ jsxs31("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
-      label && /* @__PURE__ */ jsx38("span", { children: label }),
-      showPercentage && /* @__PURE__ */ jsxs31("span", { className: "tabular-nums", children: [
+  return /* @__PURE__ */ jsxs38("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
+    (label || showPercentage) && /* @__PURE__ */ jsxs38("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
+      label && /* @__PURE__ */ jsx44("span", { children: label }),
+      showPercentage && /* @__PURE__ */ jsxs38("span", { className: "tabular-nums", children: [
         Math.round(percentage),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx38("div", { className: cn("ph-progress", sizeMap6[size]), children: /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx44("div", { className: cn("ph-progress", sizeMap6[size]), children: /* @__PURE__ */ jsx44(
       "div",
       {
         className: cn("ph-progress-bar", color),
@@ -2567,7 +3458,7 @@ function Progress(_a) {
 }
 
 // src/components/ui/ChatBubble.tsx
-import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
 function ChatBubble(_a) {
   var _b = _a, {
     children,
@@ -2587,7 +3478,7 @@ function ChatBubble(_a) {
     "className"
   ]);
   const isSelf = variant === "self";
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs39(
     "div",
     __spreadProps(__spreadValues({
       className: cn(
@@ -2597,9 +3488,9 @@ function ChatBubble(_a) {
       )
     }, props), {
       children: [
-        avatar && /* @__PURE__ */ jsx39("div", { className: "shrink-0", children: avatar }),
-        /* @__PURE__ */ jsxs32("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
-          (name || time) && /* @__PURE__ */ jsxs32(
+        avatar && /* @__PURE__ */ jsx45("div", { className: "shrink-0", children: avatar }),
+        /* @__PURE__ */ jsxs39("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
+          (name || time) && /* @__PURE__ */ jsxs39(
             "header",
             {
               className: cn(
@@ -2607,12 +3498,12 @@ function ChatBubble(_a) {
                 isSelf && "flex-row-reverse justify-end"
               ),
               children: [
-                name && /* @__PURE__ */ jsx39("span", { className: "font-semibold text-ph-ink", children: name }),
-                time && /* @__PURE__ */ jsx39("span", { children: time })
+                name && /* @__PURE__ */ jsx45("span", { className: "font-semibold text-ph-ink", children: name }),
+                time && /* @__PURE__ */ jsx45("span", { children: time })
               ]
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx45(
             "div",
             {
               className: cn(
@@ -2622,7 +3513,7 @@ function ChatBubble(_a) {
               children
             }
           ),
-          footer && /* @__PURE__ */ jsx39("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
+          footer && /* @__PURE__ */ jsx45("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
         ] })
       ]
     })
@@ -2630,7 +3521,7 @@ function ChatBubble(_a) {
 }
 
 // src/components/ui/Terminal.tsx
-import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
 function Terminal(_a) {
   var _b = _a, {
     title = "sandbox",
@@ -2643,7 +3534,7 @@ function Terminal(_a) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs40(
     "div",
     __spreadProps(__spreadValues({
       className: cn(
@@ -2652,18 +3543,18 @@ function Terminal(_a) {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ jsxs33("header", { className: "flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3", children: [
-          /* @__PURE__ */ jsx40("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
-          /* @__PURE__ */ jsx40("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
-          /* @__PURE__ */ jsx40("div", { className: "h-3 w-3 rounded-full bg-emerald-400" }),
-          title && /* @__PURE__ */ jsx40("span", { className: "text-xs font-medium text-ph-mutedtext", children: title })
+        /* @__PURE__ */ jsxs40("header", { className: "flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3", children: [
+          /* @__PURE__ */ jsx46("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
+          /* @__PURE__ */ jsx46("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
+          /* @__PURE__ */ jsx46("div", { className: "h-3 w-3 rounded-full bg-emerald-400" }),
+          title && /* @__PURE__ */ jsx46("span", { className: "text-xs font-medium text-ph-mutedtext", children: title })
         ] }),
-        /* @__PURE__ */ jsx40("div", { className: "ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed", children: children || /* @__PURE__ */ jsx40(Fragment6, { children: lines == null ? void 0 : lines.map((line, i) => {
+        /* @__PURE__ */ jsx46("div", { className: "ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed", children: children || /* @__PURE__ */ jsx46(Fragment6, { 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__ */ jsxs33("span", { children: [
-            /* @__PURE__ */ jsx40("span", { className: color || "text-neutral-600", children: text }),
-            i < lines.length - 1 && /* @__PURE__ */ jsx40("br", {})
+          return /* @__PURE__ */ jsxs40("span", { children: [
+            /* @__PURE__ */ jsx46("span", { className: color || "text-neutral-600", children: text }),
+            i < lines.length - 1 && /* @__PURE__ */ jsx46("br", {})
           ] }, i);
         }) }) })
       ]
@@ -2672,7 +3563,7 @@ function Terminal(_a) {
 }
 
 // src/components/ui/Indicator.tsx
-import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
 var positionMap = {
   "top-right": "-right-[2px] -top-[2px]",
   "top-left": "-left-[2px] -top-[2px]",
@@ -2695,8 +3586,8 @@ function Indicator(_a) {
     "dot",
     "className"
   ]);
-  return /* @__PURE__ */ jsxs34("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex items-center justify-center", className) }, props), { children: [
-    dot ? /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs41("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex items-center justify-center", className) }, props), { children: [
+    dot ? /* @__PURE__ */ jsx47(
       "span",
       {
         className: cn(
@@ -2705,7 +3596,7 @@ function Indicator(_a) {
           positionMap[position]
         )
       }
-    ) : badge != null ? /* @__PURE__ */ jsx41(
+    ) : badge != null ? /* @__PURE__ */ jsx47(
       "span",
       {
         className: cn(
@@ -2721,7 +3612,7 @@ function Indicator(_a) {
 }
 
 // src/components/ui/Timeline.tsx
-import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
 function Timeline(_a) {
   var _b = _a, {
     events,
@@ -2732,15 +3623,15 @@ function Timeline(_a) {
     "alternate",
     "className"
   ]);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx48(
     "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__ */ jsxs35("li", { className: cn("relative flex gap-6", align), children: [
-          /* @__PURE__ */ jsx42(
+        return /* @__PURE__ */ jsxs42("li", { className: cn("relative flex gap-6", align), children: [
+          /* @__PURE__ */ jsx48(
             "div",
             {
               className: cn(
@@ -2750,12 +3641,12 @@ function Timeline(_a) {
               children: event.icon
             }
           ),
-          /* @__PURE__ */ jsxs35("article", { className: "flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", children: [
-            /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap items-baseline gap-3", children: [
-              /* @__PURE__ */ jsx42("h4", { className: "text-base font-semibold text-ph-ink", children: event.title }),
-              event.time && /* @__PURE__ */ jsx42("time", { className: "text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext", children: event.time })
+          /* @__PURE__ */ jsxs42("article", { className: "flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", children: [
+            /* @__PURE__ */ jsxs42("div", { className: "flex flex-wrap items-baseline gap-3", children: [
+              /* @__PURE__ */ jsx48("h4", { className: "text-base font-semibold text-ph-ink", children: event.title }),
+              event.time && /* @__PURE__ */ jsx48("time", { className: "text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext", children: event.time })
             ] }),
-            event.description && /* @__PURE__ */ jsx42("p", { className: "mt-2 text-sm text-ph-subtle", children: event.description })
+            event.description && /* @__PURE__ */ jsx48("p", { className: "mt-2 text-sm text-ph-subtle", children: event.description })
           ] })
         ] }, event.id);
       })
@@ -2791,6 +3682,7 @@ export {
   IconRobot,
   IconExclamation,
   IconErrorOutline,
+  IconInfo,
   IconCancel,
   IconCheckCircle,
   IconArrowUp,
@@ -2831,9 +3723,23 @@ export {
   IconToggle,
   IconRocket,
   IconTerminal,
+  IconOldWindow,
+  IconCommandCursor,
+  IconDataReel,
+  IconCodePreview,
+  IconInsightBoard,
+  IconEventStream,
+  IconFeatureGate,
+  IconReplayFrame,
+  IconQueryStack,
+  IconExperimentSplit,
+  IconSurveyCard,
+  OLD_UI_ICONS,
   IconActivity,
   IconFlask,
   IconSpinner,
+  CANONICAL_ICONS,
+  PH_ICON_ALIASES,
   PH_ICONS,
   IconByName,
   Alert,
@@ -2841,9 +3747,20 @@ export {
   Card,
   Drawer,
   Kbd,
+  Loader,
+  Skeleton,
+  LoadingState,
+  AuthLayout,
+  AuthCard,
+  AuthDivider,
+  SettingsNav,
+  SettingsLayout,
   DropdownMenu,
   DropdownButton,
   DropdownItem,
+  DropdownRadioGroup,
+  DropdownRadioItem,
+  FormField,
   Input,
   Select,
   Textarea,
@@ -2883,6 +3800,10 @@ export {
   HoverCard,
   EmptyState,
   FilterChips,
+  FilterBar,
+  FilterMenu,
+  SortMenu,
+  FilterControls,
   CodeBlock,
   ComponentDocs,
   ShowcaseWrapper,