@xenide-io/the-old-ui-theme 0.3.2 → 0.4.3

package/dist/chunk-54ZR4VL5.mjs

@@ -0,0 +1,4641 @@
+import {
+  ButtonChrome,
+  DropdownMenu,
+  DropdownRadioGroup,
+  DropdownRadioItem,
+  IconArrowDown,
+  IconCancel,
+  IconCheck,
+  IconCheckCircle,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconClose,
+  IconCodePreview,
+  IconErrorOutline,
+  IconExclamation,
+  IconInfo,
+  IconSearch,
+  IconStar,
+  IconTuning,
+  cn
+} from "./chunk-G53YLHVE.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/components/ui/Button.tsx
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var variantClass = {
+  primary: "ph-btn-primary",
+  secondary: "ph-btn-secondary",
+  tertiary: "ph-btn-tertiary",
+  signal: "ph-btn-signal",
+  accent: "ph-btn-accent",
+  neutral: "ph-btn-neutral",
+  info: "ph-btn-info",
+  success: "ph-btn-success",
+  warning: "ph-btn-warning",
+  danger: "ph-btn-danger",
+  ghost: "ph-btn-ghost",
+  link: "ph-btn-link"
+};
+var sizeClass = {
+  xs: "ph-btn-xs",
+  sm: "ph-btn-sm",
+  md: "",
+  lg: "ph-btn-lg"
+};
+var shapeClass = {
+  default: "",
+  circle: "ph-btn-circle",
+  square: "ph-btn-square",
+  wide: "ph-btn-wide"
+};
+var Button = forwardRef(function Button2(_a, ref) {
+  var _b = _a, {
+    variant = "secondary",
+    size = "md",
+    shape = "default",
+    outline = false,
+    split = false,
+    icon,
+    sideIcon,
+    loading = false,
+    loadingLabel,
+    className,
+    children,
+    type = "button",
+    disabled
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "shape",
+    "outline",
+    "split",
+    "icon",
+    "sideIcon",
+    "loading",
+    "loadingLabel",
+    "className",
+    "children",
+    "type",
+    "disabled"
+  ]);
+  const usesLemonChrome = !["tertiary", "ghost", "link"].includes(variant);
+  const label = loadingLabel != null ? loadingLabel : children;
+  const leadingIcon = loading ? /* @__PURE__ */ jsx("span", { className: "ph-btn-spinner", "aria-hidden": true }) : icon;
+  const content = usesLemonChrome ? /* @__PURE__ */ jsx(ButtonChrome, { label, icon: leadingIcon, sideIcon, split }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    leadingIcon != null ? /* @__PURE__ */ jsx("span", { className: "ph-btn-icon", children: leadingIcon }) : null,
+    label != null ? /* @__PURE__ */ jsx("span", { className: "ph-btn-label", children: label }) : null,
+    split ? /* @__PURE__ */ jsx("span", { className: "ph-btn-split-divider", "aria-hidden": true }) : null,
+    sideIcon != null ? /* @__PURE__ */ jsx("span", { className: "ph-btn-side-icon", children: sideIcon }) : null
+  ] });
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      ref,
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      className: cn(
+        "ph-btn",
+        usesLemonChrome && "ph-btn-raised",
+        outline && "ph-btn-outline",
+        variantClass[variant],
+        sizeClass[size],
+        shapeClass[shape],
+        split && "ph-btn-split",
+        className
+      )
+    }, props), {
+      children: content
+    })
+  );
+});
+Button.displayName = "Button";
+
+// src/components/ui/Alert.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var statusConfig = {
+  info: { icon: IconInfo },
+  success: { icon: IconCheckCircle },
+  warning: { icon: IconExclamation },
+  danger: { icon: IconCancel }
+};
+var statusClassMap = {
+  info: "ph-alert-info",
+  success: "ph-alert-success",
+  warning: "ph-alert-warning",
+  danger: "ph-alert-danger"
+};
+var Alert = forwardRef2(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__ */ jsxs2(
+    "div",
+    __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__ */ jsx2(Icon, { className: "ph-alert-icon mt-0.5 h-5 w-5 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsx2("p", { className: "font-semibold", children: title }),
+          description && /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-ph-subtle", children: description }),
+          children
+        ] }),
+        onDismiss && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            className: "ph-alert-dismiss",
+            "aria-label": dismissLabel,
+            children: /* @__PURE__ */ jsx2(IconClose, { className: "h-4 w-4", "aria-hidden": true })
+          }
+        )
+      ]
+    })
+  );
+});
+Alert.displayName = "Alert";
+
+// src/components/ui/Badge.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var variantMap = {
+  brand: "ph-badge-brand",
+  neutral: "ph-badge-neutral",
+  success: "ph-badge-success",
+  warning: "ph-badge-warning",
+  danger: "ph-badge-danger",
+  info: "ph-badge-info",
+  outline: "ph-badge-outline"
+};
+var sizeMap = {
+  sm: "text-[10px] px-1.5 py-0.5",
+  md: ""
+};
+var Badge = forwardRef3(function Badge2(_a, ref) {
+  var _b = _a, {
+    variant = "neutral",
+    size = "md",
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx3(
+    "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 forwardRef4 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var variantMap2 = {
+  default: "",
+  outlined: "border-2 border-ph-border",
+  elevated: "ph-card-elevated",
+  highlighted: "ph-card-highlighted"
+};
+var Card = forwardRef4(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__ */ jsxs3(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "ph-card",
+        variantMap2[variant],
+        interactive && "ph-card-interactive",
+        className
+      )
+    }, props), {
+      children: [
+        media && /* @__PURE__ */ jsx4("div", { className: "ph-card-media", children: media }),
+        /* @__PURE__ */ jsxs3("div", { className: cn("ph-card-body", bodyClassName), children: [
+          title && /* @__PURE__ */ jsx4(Title2, { className: "ph-card-title", children: title }),
+          description && /* @__PURE__ */ jsx4("p", { className: "text-sm text-ph-subtle", children: description }),
+          children,
+          actions && /* @__PURE__ */ jsx4("div", { className: "ph-card-actions", children: actions })
+        ] }),
+        footer && /* @__PURE__ */ jsx4("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 Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var sideMap = {
+  left: "left-0 border-r",
+  right: "right-0 border-l"
+};
+var sizeMap2 = {
+  sm: "w-[min(100%,18rem)]",
+  md: "w-[min(100%,22rem)]",
+  lg: "w-[min(100%,30rem)]"
+};
+function Drawer({
+  open = false,
+  onClose,
+  title,
+  children,
+  footer,
+  side = "right",
+  size = "md",
+  className,
+  showCloseButton = true
+}) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("div", { className: "fixed inset-0 z-[120] bg-black/45 backdrop-blur-[2px]", role: "presentation", onClick: onClose }),
+    /* @__PURE__ */ jsxs4(
+      "aside",
+      {
+        className: cn(
+          "fixed inset-y-0 z-[130] flex flex-col overflow-y-auto border-ph-border bg-ph-surface shadow-ph-md",
+          sideMap[side],
+          sizeMap2[size],
+          className
+        ),
+        children: [
+          (title || showCloseButton) && /* @__PURE__ */ jsxs4("header", { className: "flex items-center justify-between border-b border-ph-border px-4 py-3", children: [
+            /* @__PURE__ */ jsx5("span", { className: "text-sm font-bold text-ph-ink", children: title }),
+            showCloseButton && onClose && /* @__PURE__ */ jsx5(Button, { variant: "ghost", className: "ph-btn-circle", onClick: onClose, "aria-label": "Close drawer", children: /* @__PURE__ */ jsx5(IconClose, { className: "h-5 w-5" }) })
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "flex-1", children }),
+          footer && /* @__PURE__ */ jsx5("footer", { className: "border-t border-ph-border px-4 py-3", children: footer })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Kbd.tsx
+import { jsx as jsx6, jsxs as jsxs5 } 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,
+    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__ */ jsx6("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__ */ jsx6("kbd", __spreadProps(__spreadValues({ className: cn("ph-keycap", className), "aria-label": accessibleLabel }, props), { children: displayKeys[0] }));
+  }
+  return /* @__PURE__ */ jsx6("kbd", __spreadProps(__spreadValues({ className: cn("ph-shortcut-group ph-keycap", className), "aria-label": accessibleLabel }, props), { children: displayKeys.map((key, index) => /* @__PURE__ */ jsxs5("span", { className: "contents", children: [
+    index > 0 && separator != null ? /* @__PURE__ */ jsx6("span", { className: "ph-shortcut-separator", "aria-hidden": "true", children: separator }) : null,
+    /* @__PURE__ */ jsx6("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 jsx7, jsxs as jsxs6 } 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__ */ jsxs6(
+    "span",
+    __spreadProps(__spreadValues({
+      role: "status",
+      "aria-label": label,
+      className: cn("ph-loader", loaderSizeClass[size], className)
+    }, props), {
+      children: [
+        variant === "spinner" ? /* @__PURE__ */ jsx7("span", { className: "ph-loading", "aria-hidden": true }) : null,
+        variant === "dots" ? /* @__PURE__ */ jsxs6("span", { className: "ph-loading-dots", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx7("span", {}),
+          /* @__PURE__ */ jsx7("span", {}),
+          /* @__PURE__ */ jsx7("span", {})
+        ] }) : null,
+        variant === "pulse" ? /* @__PURE__ */ jsx7("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__ */ jsx7(
+    "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__ */ jsxs6("div", __spreadProps(__spreadValues({ className: cn("ph-loading-state", className), role: "status", "aria-label": label }, props), { children: [
+    /* @__PURE__ */ jsx7(Loader, { variant, size, label, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs6("div", { className: "ph-loading-state__copy", children: [
+      /* @__PURE__ */ jsx7("strong", { children: title }),
+      description ? /* @__PURE__ */ jsx7("span", { children: description }) : null
+    ] })
+  ] }));
+}
+
+// src/components/ui/AuthLayout.tsx
+import { useId } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } 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__ */ jsxs7("div", __spreadProps(__spreadValues({ className: cn("ph-auth-layout", aside != null && "ph-auth-layout--split", className) }, props), { children: [
+    aside ? /* @__PURE__ */ jsx8("aside", { className: "ph-auth-layout__aside", children: aside }) : null,
+    /* @__PURE__ */ jsx8("div", { className: "ph-auth-layout__main", children: /* @__PURE__ */ jsxs7("div", { className: "ph-auth-layout__column", children: [
+      brand ? /* @__PURE__ */ jsx8("div", { className: "ph-auth-layout__brand", children: brand }) : null,
+      children,
+      footer ? /* @__PURE__ */ jsx8("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__ */ jsxs7("section", __spreadProps(__spreadValues({ className: cn("ph-auth-card", className), "aria-labelledby": titleId }, props), { children: [
+    /* @__PURE__ */ jsxs7("header", { className: "ph-auth-card__header", children: [
+      /* @__PURE__ */ jsx8("h1", { id: titleId, children: title }),
+      description ? /* @__PURE__ */ jsx8("p", { children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "ph-auth-card__body", children }),
+    footer ? /* @__PURE__ */ jsx8("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__ */ jsx8("div", __spreadProps(__spreadValues({ className: cn("ph-auth-divider", className) }, props), { children: /* @__PURE__ */ jsx8("span", { children }) }));
+}
+
+// src/components/ui/SettingsLayout.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function SettingsNav(_a) {
+  var _b = _a, { groups, className } = _b, props = __objRest(_b, ["groups", "className"]);
+  return /* @__PURE__ */ jsx9("div", __spreadProps(__spreadValues({ className: cn("ph-settings-nav", className) }, props), { children: groups.map((group, index) => /* @__PURE__ */ jsxs8("div", { className: "ph-settings-nav__group", children: [
+    /* @__PURE__ */ jsx9("h3", { children: group.label }),
+    /* @__PURE__ */ jsx9("div", { className: "ph-settings-nav__items", children: group.items.map((item) => /* @__PURE__ */ jsxs8(
+      "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__ */ jsx9("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
+          /* @__PURE__ */ jsx9("span", { children: item.label }),
+          item.badge ? /* @__PURE__ */ jsx9("span", { className: "ph-settings-nav__badge", children: item.badge }) : null
+        ]
+      },
+      item.id
+    )) })
+  ] }, index)) }));
+}
+function SettingsLayout(_a) {
+  var _b = _a, {
+    title,
+    description,
+    actions,
+    navigation,
+    navigationLabel = "Settings",
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "title",
+    "description",
+    "actions",
+    "navigation",
+    "navigationLabel",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs8("section", __spreadProps(__spreadValues({ className: cn("ph-settings-layout", className) }, props), { children: [
+    /* @__PURE__ */ jsxs8("header", { className: "ph-settings-layout__header", children: [
+      /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx9("h2", { children: title }),
+        description ? /* @__PURE__ */ jsx9("p", { children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsx9("div", { className: "ph-settings-layout__actions", children: actions }) : null
+    ] }),
+    /* @__PURE__ */ jsxs8("details", { className: "ph-settings-layout__mobile-nav", children: [
+      /* @__PURE__ */ jsxs8("summary", { children: [
+        /* @__PURE__ */ jsx9(IconTuning, { className: "h-4 w-4", "aria-hidden": true }),
+        "Settings menu"
+      ] }),
+      /* @__PURE__ */ jsx9("nav", { "aria-label": navigationLabel, children: navigation })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "ph-settings-layout__grid", children: [
+      /* @__PURE__ */ jsx9("aside", { className: "ph-settings-layout__sidebar", children: /* @__PURE__ */ jsx9("nav", { "aria-label": navigationLabel, children: navigation }) }),
+      /* @__PURE__ */ jsx9("div", { className: "ph-settings-layout__content", children })
+    ] })
+  ] }));
+}
+
+// src/components/ui/Input.tsx
+import { forwardRef as forwardRef5, useId as useId3 } from "react";
+
+// src/components/ui/FormField.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function FormField(_a) {
+  var _b = _a, {
+    controlId,
+    label,
+    hideLabel = false,
+    helperText,
+    error,
+    required = false,
+    disabled = false,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "controlId",
+    "label",
+    "hideLabel",
+    "helperText",
+    "error",
+    "required",
+    "disabled",
+    "children",
+    "className"
+  ]);
+  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__ */ jsxs9("div", __spreadProps(__spreadValues({ className: cn("ph-field", className) }, props), { children: [
+    label ? /* @__PURE__ */ jsxs9(
+      "label",
+      {
+        htmlFor: id,
+        className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
+        children: [
+          label,
+          required ? /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", children: " *" }) : null
+        ]
+      }
+    ) : null,
+    typeof children === "function" ? children(controlProps) : children,
+    descriptionId ? /* @__PURE__ */ jsx10("p", { id: descriptionId, className: "mt-1 text-xs text-ph-subtle", children: helperText }) : null,
+    errorId ? /* @__PURE__ */ jsx10("p", { id: errorId, className: "mt-1 text-xs font-medium text-ph-danger", children: error }) : null
+  ] }));
+}
+
+// src/components/ui/Input.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var sizeMap3 = {
+  sm: "ph-input-sm",
+  md: "",
+  lg: "ph-input-lg"
+};
+function joinIds(...ids) {
+  const value = ids.filter(Boolean).join(" ");
+  return value || void 0;
+}
+var Input = forwardRef5(function Input2(_a, ref) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    hideLabel = false,
+    error,
+    helperText,
+    size = "md",
+    variant = "default",
+    className,
+    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__ */ jsx11(
+    FormField,
+    {
+      controlId: id,
+      label,
+      hideLabel,
+      helperText,
+      error,
+      required,
+      disabled,
+      className: wrapperClassName,
+      children: (fieldProps) => /* @__PURE__ */ jsx11(
+        "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 = forwardRef5(function Select2(_a, ref) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    hideLabel = false,
+    error,
+    helperText,
+    size = "md",
+    className,
+    wrapperClassName,
+    disabled,
+    children,
+    required,
+    "aria-describedby": ariaDescribedBy
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "hideLabel",
+    "error",
+    "helperText",
+    "size",
+    "className",
+    "wrapperClassName",
+    "disabled",
+    "children",
+    "required",
+    "aria-describedby"
+  ]);
+  const autoId = useId3();
+  const id = idProp != null ? idProp : autoId;
+  const hasError = Boolean(error);
+  return /* @__PURE__ */ jsx11(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ jsx11(
+    "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 = forwardRef5(function Textarea2(_a, ref) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    hideLabel = false,
+    error,
+    helperText,
+    size = "md",
+    className,
+    wrapperClassName,
+    disabled,
+    required,
+    "aria-describedby": ariaDescribedBy
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "hideLabel",
+    "error",
+    "helperText",
+    "size",
+    "className",
+    "wrapperClassName",
+    "disabled",
+    "required",
+    "aria-describedby"
+  ]);
+  const autoId = useId3();
+  const id = idProp != null ? idProp : autoId;
+  const hasError = Boolean(error);
+  return /* @__PURE__ */ jsx11(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ jsx11(
+    "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 = forwardRef5(function Checkbox2(_a, ref) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    error,
+    helperText,
+    className,
+    wrapperClassName,
+    disabled,
+    "aria-describedby": ariaDescribedBy
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "error",
+    "helperText",
+    "className",
+    "wrapperClassName",
+    "disabled",
+    "aria-describedby"
+  ]);
+  const autoId = useId3();
+  const id = idProp != null ? idProp : autoId;
+  const hasError = Boolean(error);
+  const descriptionId = helperText && !hasError ? `${id}-description` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  return /* @__PURE__ */ jsxs10("div", { className: cn("ph-control-row", wrapperClassName), children: [
+    /* @__PURE__ */ jsxs10("span", { className: "ph-checkbox-wrap", children: [
+      /* @__PURE__ */ jsx11(
+        "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__ */ jsx11(IconCheck, { className: "ph-checkbox-icon", "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "ph-control-copy", children: [
+      /* @__PURE__ */ jsx11("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
+      descriptionId ? /* @__PURE__ */ jsx11("p", { id: descriptionId, className: "text-xs text-ph-subtle", children: helperText }) : null,
+      errorId ? /* @__PURE__ */ jsx11("p", { id: errorId, className: "text-xs font-medium text-ph-danger", children: error }) : null
+    ] })
+  ] });
+});
+Checkbox.displayName = "Checkbox";
+var Radio = forwardRef5(function Radio2(_a, ref) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    className,
+    wrapperClassName,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "className",
+    "wrapperClassName",
+    "disabled"
+  ]);
+  const autoId = useId3();
+  const id = idProp != null ? idProp : autoId;
+  return /* @__PURE__ */ jsxs10("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ jsx11(
+      "input",
+      __spreadValues({
+        ref,
+        id,
+        type: "radio",
+        disabled,
+        className: cn("ph-radio", disabled && "cursor-not-allowed", className)
+      }, props)
+    ),
+    /* @__PURE__ */ jsx11("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
+  ] });
+});
+Radio.displayName = "Radio";
+var Toggle = forwardRef5(function Toggle2(_a, ref) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    className,
+    wrapperClassName,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "className",
+    "wrapperClassName",
+    "disabled"
+  ]);
+  const autoId = useId3();
+  const id = idProp != null ? idProp : autoId;
+  return /* @__PURE__ */ jsxs10("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ jsx11("span", { className: disabled ? "opacity-60" : void 0, children: label }),
+    /* @__PURE__ */ jsx11(
+      "input",
+      __spreadValues({
+        ref,
+        id,
+        type: "checkbox",
+        role: "switch",
+        disabled,
+        className: cn("ph-toggle", disabled && "cursor-not-allowed", className)
+      }, props)
+    )
+  ] });
+});
+Toggle.displayName = "Toggle";
+var Range = forwardRef5(function Range2(_a, ref) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    minLabel,
+    maxLabel,
+    valueLabel,
+    wrapperClassName,
+    className
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "minLabel",
+    "maxLabel",
+    "valueLabel",
+    "wrapperClassName",
+    "className"
+  ]);
+  const autoId = useId3();
+  const id = idProp != null ? idProp : autoId;
+  return /* @__PURE__ */ jsxs10("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ jsx11("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ jsx11("input", __spreadValues({ ref, id, type: "range", className: cn("ph-range", className) }, props)),
+    (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ jsxs10("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
+      /* @__PURE__ */ jsx11("span", { children: minLabel }),
+      /* @__PURE__ */ jsx11("span", { children: valueLabel }),
+      /* @__PURE__ */ jsx11("span", { children: maxLabel })
+    ] })
+  ] });
+});
+Range.displayName = "Range";
+var FileUpload = forwardRef5(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__ */ jsxs10("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ jsx11("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ jsxs10("label", { htmlFor: id, className: "ph-file-upload", children: [
+      /* @__PURE__ */ jsx11("input", __spreadValues({ ref, id, type: "file", className: cn("sr-only", className) }, props)),
+      prompt
+    ] })
+  ] });
+});
+FileUpload.displayName = "FileUpload";
+
+// src/components/ui/Modal.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import { useRef } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } 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-none"
+};
+function Modal({
+  open = false,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+  className,
+  showCloseButton = true,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
+  "aria-label": ariaLabel
+}) {
+  const canDismiss = Boolean(onClose);
+  const restoreFocusRef = useRef(null);
+  return /* @__PURE__ */ jsx12(
+    Dialog.Root,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) onClose == null ? void 0 : onClose();
+      },
+      children: /* @__PURE__ */ jsxs11(Dialog.Portal, { children: [
+        /* @__PURE__ */ jsx12(Dialog.Overlay, { className: "ph-modal-overlay" }),
+        /* @__PURE__ */ jsxs11(
+          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__ */ jsx12(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
+              title || description || showCloseButton && canDismiss ? /* @__PURE__ */ jsxs11("header", { className: "ph-modal-header", children: [
+                /* @__PURE__ */ jsxs11("div", { className: "min-w-0", children: [
+                  title ? /* @__PURE__ */ jsx12(Dialog.Title, { className: "text-lg font-bold text-ph-ink", children: title }) : null,
+                  description ? /* @__PURE__ */ jsx12(Dialog.Description, { className: "mt-1 text-sm text-ph-subtle", children: description }) : null
+                ] }),
+                showCloseButton && canDismiss ? /* @__PURE__ */ jsx12(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx12("button", { type: "button", className: "ph-modal-close", "aria-label": "Close dialog", children: /* @__PURE__ */ jsx12(IconClose, { className: "h-5 w-5", "aria-hidden": true }) }) }) : null
+              ] }) : null,
+              /* @__PURE__ */ jsx12("div", { className: "ph-modal-body", children }),
+              footer ? /* @__PURE__ */ jsx12("div", { className: "ph-modal-footer", children: footer }) : null
+            ]
+          })
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/ui/Navigation.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function Breadcrumbs({ items, label = "Breadcrumb", className }) {
+  return /* @__PURE__ */ jsx13("nav", { "aria-label": label, className: cn("ph-breadcrumbs", className), children: items.map((item, index) => /* @__PURE__ */ jsxs12("span", { className: "contents", children: [
+    index > 0 ? /* @__PURE__ */ jsx13("span", { className: "ph-breadcrumb-sep", "aria-hidden": "true", children: "/" }) : null,
+    item.current || !item.href ? /* @__PURE__ */ jsx13("span", { className: "ph-breadcrumb-current", "aria-current": item.current ? "page" : void 0, children: item.label }) : /* @__PURE__ */ jsx13("a", { href: item.href, className: "ph-breadcrumb-link", children: item.label })
+  ] }, `${item.label}-${index}`)) });
+}
+function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  label = "Pagination",
+  compact = false,
+  className
+}) {
+  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__ */ jsxs12("nav", { "aria-label": label, className: cn("ph-pagination", className), children: [
+    /* @__PURE__ */ jsx13(
+      "button",
+      {
+        type: "button",
+        className: "ph-pagination-btn",
+        disabled: page <= 1,
+        "aria-label": "Previous page",
+        onClick: () => onPageChange == null ? void 0 : onPageChange(page - 1),
+        children: /* @__PURE__ */ jsx13(IconChevronLeft, { className: "mx-auto h-4 w-4", "aria-hidden": true })
+      }
+    ),
+    uniquePages.map((pageNumber, index) => /* @__PURE__ */ jsxs12("span", { className: "contents", children: [
+      !compact && index === uniquePages.length - 1 && pageNumber > 4 ? /* @__PURE__ */ jsx13("span", { className: "ph-pagination-ellipsis", "aria-hidden": "true", children: "..." }) : null,
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          className: cn("ph-pagination-btn", pageNumber === page && "ph-pagination-btn-active"),
+          "aria-current": pageNumber === page ? "page" : void 0,
+          onClick: () => onPageChange == null ? void 0 : onPageChange(pageNumber),
+          children: pageNumber
+        }
+      )
+    ] }, pageNumber)),
+    /* @__PURE__ */ jsx13(
+      "button",
+      {
+        type: "button",
+        className: "ph-pagination-btn",
+        disabled: page >= totalPages,
+        "aria-label": "Next page",
+        onClick: () => onPageChange == null ? void 0 : onPageChange(page + 1),
+        children: /* @__PURE__ */ jsx13(IconChevronRight, { className: "mx-auto h-4 w-4", "aria-hidden": true })
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Panel.tsx
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function Panel(_a) {
+  var _b = _a, { title, description, children, className } = _b, props = __objRest(_b, ["title", "description", "children", "className"]);
+  return /* @__PURE__ */ jsxs13("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
+    title && /* @__PURE__ */ jsx14("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
+    description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-ph-subtle", children: description }),
+    children
+  ] }));
+}
+
+// src/components/ui/Rating.tsx
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function Rating(_a) {
+  var _b = _a, {
+    label,
+    value = 0,
+    max = 5,
+    readOnly = true,
+    onChange,
+    className,
+    wrapperClassName
+  } = _b, props = __objRest(_b, [
+    "label",
+    "value",
+    "max",
+    "readOnly",
+    "onChange",
+    "className",
+    "wrapperClassName"
+  ]);
+  const stars = Array.from({ length: max }, (_, index) => index + 1);
+  return /* @__PURE__ */ jsxs14("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ jsx15("span", { className: "ph-label", children: label }),
+    /* @__PURE__ */ jsx15(
+      "div",
+      __spreadProps(__spreadValues({
+        className: cn("ph-rating flex", className),
+        role: readOnly ? "img" : "radiogroup",
+        "aria-label": label != null ? label : `Rating: ${value} out of ${max}`
+      }, props), {
+        children: stars.map((star) => {
+          const active = star <= value;
+          if (readOnly) {
+            return /* @__PURE__ */ jsx15(
+              IconStar,
+              {
+                className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border"),
+                "aria-hidden": true
+              },
+              star
+            );
+          }
+          return /* @__PURE__ */ jsx15(
+            "button",
+            {
+              type: "button",
+              className: "rounded p-0.5 transition hover:scale-105 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-brand",
+              role: "radio",
+              "aria-checked": active,
+              "aria-label": `${star} out of ${max}`,
+              onClick: () => onChange == null ? void 0 : onChange(star),
+              children: /* @__PURE__ */ jsx15(IconStar, { className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border") })
+            },
+            star
+          );
+        })
+      })
+    )
+  ] });
+}
+
+// src/components/ui/SearchInput.tsx
+import { useId as useId4 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+function SearchInput(_a) {
+  var _b = _a, {
+    id: idProp,
+    label = "Search",
+    hideLabel = false,
+    shortcut,
+    density = "default",
+    className,
+    wrapperClassName,
+    placeholder
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "hideLabel",
+    "shortcut",
+    "density",
+    "className",
+    "wrapperClassName",
+    "placeholder"
+  ]);
+  const autoId = useId4();
+  const id = idProp != null ? idProp : autoId;
+  return /* @__PURE__ */ jsxs15("div", { className: cn("relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx16("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
+    /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
+      shortcut != null ? /* @__PURE__ */ jsx16(
+        "span",
+        {
+          className: "ph-shortcut pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-xs",
+          "aria-hidden": true,
+          children: shortcut
+        }
+      ) : null,
+      /* @__PURE__ */ jsx16(
+        "input",
+        __spreadValues({
+          id,
+          type: "search",
+          placeholder,
+          "aria-label": hideLabel ? label : void 0,
+          className: cn(
+            "ph-input w-full",
+            density === "compact" && "max-w-xs !min-h-[2rem] py-1.5 text-sm",
+            shortcut != null && "pl-[3.25rem]",
+            className
+          )
+        }, props)
+      )
+    ] })
+  ] });
+}
+function SearchGroup(_a) {
+  var _b = _a, {
+    id: idProp,
+    label = "Search records",
+    submitLabel = "Search",
+    placeholder = "Persons, actions, flags\u2026",
+    wrapperClassName,
+    className
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "submitLabel",
+    "placeholder",
+    "wrapperClassName",
+    "className"
+  ]);
+  const autoId = useId4();
+  const id = idProp != null ? idProp : autoId;
+  return /* @__PURE__ */ jsxs15("div", { className: cn("ph-field", wrapperClassName), children: [
+    /* @__PURE__ */ jsx16("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ jsxs15("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
+      /* @__PURE__ */ jsx16(
+        "input",
+        __spreadValues({
+          id,
+          type: "search",
+          placeholder,
+          className: cn("ph-input ph-input-group-field min-w-0 flex-1", className)
+        }, props)
+      ),
+      /* @__PURE__ */ jsx16(
+        Button,
+        {
+          type: "submit",
+          variant: "primary",
+          icon: /* @__PURE__ */ jsx16(IconSearch, { className: "h-4 w-4", "aria-hidden": true }),
+          className: "ph-search-group__submit",
+          "aria-label": submitLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/ui/Table.tsx
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+function Table({
+  data,
+  columns,
+  zebra = false,
+  compact = false,
+  ribbon = false,
+  getRowStyle,
+  className,
+  caption
+}) {
+  return /* @__PURE__ */ jsx17("div", { className: cn("ph-table-wrap", compact && "ph-table-compact", className), children: /* @__PURE__ */ jsxs16("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
+    caption && /* @__PURE__ */ jsx17("caption", { className: "sr-only", children: caption }),
+    /* @__PURE__ */ jsx17("thead", { children: /* @__PURE__ */ jsx17("tr", { children: columns.map((col) => /* @__PURE__ */ jsx17("th", { className: col.className, children: col.header }, col.key)) }) }),
+    /* @__PURE__ */ jsx17("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx17("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ jsx17("td", { className: col.className, children: col.cell(row) }, col.key)) }, i)) })
+  ] }) });
+}
+
+// src/components/ui/Stat.tsx
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+var toneMap = {
+  default: "text-ph-ink",
+  brand: "text-ph-brand",
+  blue: "text-ph-blue",
+  purple: "text-ph-purple",
+  warning: "text-amber-900"
+};
+var statMap = {
+  default: "",
+  brand: "",
+  blue: "",
+  purple: "",
+  warning: "border-amber-200 bg-amber-50/70"
+};
+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__ */ jsxs17("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
+    icon && /* @__PURE__ */ jsx18("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
+    /* @__PURE__ */ jsx18("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
+    /* @__PURE__ */ jsx18("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
+    footer && /* @__PURE__ */ jsx18("p", { className: "text-xs text-ph-subtle", children: footer })
+  ] }));
+}
+
+// src/components/ui/Toast.tsx
+import { jsx as jsx19, jsxs as jsxs18 } 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" },
+  warning: { icon: IconExclamation, color: "text-ph-warning", bg: "ph-toast-warning" },
+  danger: { icon: IconCancel, color: "text-ph-danger", bg: "ph-toast-danger" }
+};
+function Toast({
+  status = "info",
+  title,
+  description,
+  onDismiss,
+  className
+}) {
+  const config = statusConfig2[status];
+  const Icon = config.icon;
+  return /* @__PURE__ */ jsxs18("div", { className: cn("ph-toast", config.bg, className), children: [
+    /* @__PURE__ */ jsx19(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color), "aria-hidden": true }),
+    /* @__PURE__ */ jsxs18("div", { className: "pr-8", children: [
+      /* @__PURE__ */ jsx19("div", { className: "font-semibold", children: title }),
+      description && /* @__PURE__ */ jsx19("p", { className: "mt-1 text-xs text-ph-subtle", children: description })
+    ] }),
+    onDismiss && /* @__PURE__ */ jsx19(
+      "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__ */ jsx19(IconClose, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+function ToastStack({ children, className }) {
+  return /* @__PURE__ */ jsx19("div", { className: cn("ph-toast-stack", className), children });
+}
+
+// src/components/ui/Tabs.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function Tabs({ items, value, onChange, variant = "pill", className }) {
+  if (variant === "underline") {
+    return /* @__PURE__ */ jsx20("div", { className: cn("flex gap-6 border-b border-ph-border", className), children: items.map((item) => /* @__PURE__ */ jsx20(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(item.value),
+        className: cn(
+          "-mb-px border-b-2 pb-2 text-sm font-semibold transition",
+          value === item.value ? "border-ph-brand text-ph-ink" : "border-transparent text-ph-mutedtext hover:text-ph-ink"
+        ),
+        children: item.label
+      },
+      item.value
+    )) });
+  }
+  return /* @__PURE__ */ jsx20("div", { className: cn("ph-tabs-row inline-flex", className), children: items.map((item) => /* @__PURE__ */ jsx20(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange(item.value),
+      className: cn("ph-tab", value === item.value && "ph-tab-active"),
+      children: item.label
+    },
+    item.value
+  )) });
+}
+
+// src/components/ui/ThemeDomSync.tsx
+import { useLayoutEffect } from "react";
+
+// src/themes/registry.ts
+var DEFAULT_THEME_ID = "hedgehog-light";
+var THEMES = [
+  {
+    id: "hedgehog-light",
+    name: "HedgeHog Light",
+    description: "Default Quill warm greys and orange Lemon chrome.",
+    colorScheme: "light",
+    group: "HedgeHog"
+  },
+  {
+    id: "hedgehog-dark",
+    name: "HedgeHog Dark",
+    description: "Dark app shell with HedgeHog orange accents.",
+    colorScheme: "dark",
+    group: "HedgeHog"
+  },
+  {
+    id: "catppuccin-light",
+    name: "Catppuccin Light",
+    description: "Catppuccin Latte \u2014 soft pastels and mauve accent.",
+    colorScheme: "light",
+    group: "Catppuccin"
+  },
+  {
+    id: "catppuccin-dark",
+    name: "Catppuccin Dark",
+    description: "Catppuccin Mocha \u2014 deep base and lavender peach.",
+    colorScheme: "dark",
+    group: "Catppuccin"
+  },
+  {
+    id: "sheets",
+    name: "Sheets",
+    description: "Spreadsheet green on office neutrals.",
+    colorScheme: "light",
+    group: "Productivity"
+  },
+  {
+    id: "sheets-dark",
+    name: "Sheets Dark",
+    description: "Dark shell with spreadsheet green accent.",
+    colorScheme: "dark",
+    group: "Productivity"
+  },
+  {
+    id: "note",
+    name: "Note",
+    description: "Notebook purple on lavender-white chrome.",
+    colorScheme: "light",
+    group: "Productivity"
+  },
+  {
+    id: "note-dark",
+    name: "Note Dark",
+    description: "Dark notebook purple \u2014 night reading mode.",
+    colorScheme: "dark",
+    group: "Productivity"
+  },
+  {
+    id: "presentation",
+    name: "Presentation",
+    description: "Orange-red on office neutrals.",
+    colorScheme: "light",
+    group: "Productivity"
+  },
+  {
+    id: "presentation-dark",
+    name: "Presentation Dark",
+    description: "Dark shell with orange-red accent.",
+    colorScheme: "dark",
+    group: "Productivity"
+  },
+  {
+    id: "socials",
+    name: "Socials",
+    description: "Meta blue accent on familiar social greys.",
+    colorScheme: "light",
+    group: "Social"
+  },
+  {
+    id: "socials-dark",
+    name: "Socials Dark",
+    description: "Social dark mode \u2014 #18191A base and Meta blue.",
+    colorScheme: "dark",
+    group: "Social"
+  },
+  {
+    id: "chats-light",
+    name: "Chats Light",
+    description: "Aubergine brand on clean workspace neutrals.",
+    colorScheme: "light",
+    group: "Chats"
+  },
+  {
+    id: "chats-dark",
+    name: "Chats Dark",
+    description: "Dark sidebar \u2014 #1A1D21 base and green highlights.",
+    colorScheme: "dark",
+    group: "Chats"
+  },
+  {
+    id: "xenide-light",
+    name: "Xenide Light",
+    description: "xenide.io light \u2014 Excel green + purple on neutral greys.",
+    colorScheme: "light",
+    group: "Xenide"
+  },
+  {
+    id: "xenide-dark",
+    name: "Xenide Dark",
+    description: "xenide.io dark \u2014 #0A0A0F base, emerald green + violet.",
+    colorScheme: "dark",
+    group: "Xenide"
+  },
+  {
+    id: "bikini-bottom",
+    name: "Bikini Bottom",
+    description: "SpongeBob palette \u2014 ocean canvas, readable surfaces, character accents.",
+    colorScheme: "light",
+    group: "Fun"
+  },
+  {
+    id: "bikini-bottom-dark",
+    name: "Bikini Bottom Dark",
+    description: "Bikini Bottom at night \u2014 deep ocean with neon character accents.",
+    colorScheme: "dark",
+    group: "Fun"
+  },
+  {
+    id: "turtletime",
+    name: "TurtleTime",
+    description: "Turtle mascot palette \u2014 shell orange, leaf green, and warm cream.",
+    colorScheme: "light",
+    group: "Fun"
+  },
+  {
+    id: "turtletime-dark",
+    name: "TurtleTime Dark",
+    description: "TurtleTime after dusk \u2014 dark olive shell with bright orange clock accents.",
+    colorScheme: "dark",
+    group: "Fun"
+  },
+  {
+    id: "github-light",
+    name: "GitHub Light",
+    description: "GitHub Primer \u2014 #f6f8fa canvas and emphasis blue accents.",
+    colorScheme: "light",
+    group: "GitHub"
+  },
+  {
+    id: "github-dark",
+    name: "GitHub Dark",
+    description: "GitHub dark dimmed \u2014 #0d1117 base and #4493f8 links.",
+    colorScheme: "dark",
+    group: "GitHub"
+  },
+  {
+    id: "rosepine-light",
+    name: "Ros\xE9 Pine Dawn",
+    description: "Ros\xE9 Pine Dawn \u2014 warm paper base with muted iris accents.",
+    colorScheme: "light",
+    group: "Ros\xE9 Pine"
+  },
+  {
+    id: "rosepine-dark",
+    name: "Ros\xE9 Pine",
+    description: "Ros\xE9 Pine Main \u2014 moonlit base with iris and love accents.",
+    colorScheme: "dark",
+    group: "Ros\xE9 Pine"
+  },
+  {
+    id: "notion",
+    name: "Notion",
+    description: "Notion light \u2014 warm off-white canvas, Notion blue accent, signature dark text.",
+    colorScheme: "light",
+    group: "Productivity"
+  },
+  {
+    id: "notion-dark",
+    name: "Notion Dark",
+    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)));
+function isThemeId(value) {
+  return THEMES.some((theme) => theme.id === value);
+}
+function getTheme(id) {
+  return THEMES.find((theme) => theme.id === id);
+}
+
+// src/themes/init-theme.ts
+var STORAGE_KEY = "ph-theme";
+var VALID_THEMES = THEMES.map((theme) => theme.id);
+var THEME_INIT_SCRIPT = `(function(){try{var k="${STORAGE_KEY}",d="${DEFAULT_THEME_ID}",v=${JSON.stringify(VALID_THEMES)},t=localStorage.getItem(k);if(t==="xenide")t="xenide-light";if(!t||v.indexOf(t)<0)t=d;document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","${DEFAULT_THEME_ID}")}})();`;
+function persistTheme(themeId) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (!isThemeId(themeId)) {
+    return;
+  }
+  document.documentElement.setAttribute("data-theme", themeId);
+  localStorage.setItem(STORAGE_KEY, themeId);
+}
+function readStoredTheme() {
+  if (typeof window === "undefined") {
+    return DEFAULT_THEME_ID;
+  }
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === "xenide") {
+    return "xenide-light";
+  }
+  return stored && isThemeId(stored) ? stored : DEFAULT_THEME_ID;
+}
+
+// src/components/ui/ThemeDomSync.tsx
+function ThemeDomSync() {
+  useLayoutEffect(() => {
+    persistTheme(readStoredTheme());
+  }, []);
+  return null;
+}
+
+// src/components/ui/ThemeManager.tsx
+import { useLayoutEffect as useLayoutEffect2 } from "react";
+import { Fragment as Fragment3, jsx as jsx21 } from "react/jsx-runtime";
+function ThemeManager({ children }) {
+  useLayoutEffect2(() => {
+    persistTheme(readStoredTheme());
+  }, []);
+  return /* @__PURE__ */ jsx21(Fragment3, { children });
+}
+
+// src/components/ui/ThemeSwitcher.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+function ThemeSwitcher({ className }) {
+  const [themeId, setThemeId] = useState("hedgehog-light");
+  useEffect(() => {
+    const id = readStoredTheme();
+    persistTheme(id);
+    setThemeId(id);
+  }, []);
+  return /* @__PURE__ */ jsxs19("label", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx22("span", { className: "shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm", children: "Theme" }),
+    /* @__PURE__ */ jsx22(
+      "select",
+      {
+        className: "ph-select max-w-[11rem] !min-h-[2rem] py-1 pl-2.5 pr-8 text-xs sm:max-w-[14rem] sm:text-sm",
+        value: themeId,
+        "aria-label": "Colour theme",
+        onChange: (event) => {
+          const next = event.target.value;
+          persistTheme(next);
+          setThemeId(next);
+        },
+        children: THEME_GROUPS.map((group) => /* @__PURE__ */ jsx22("optgroup", { label: group, children: THEMES.filter((theme) => theme.group === group).map((theme) => /* @__PURE__ */ jsx22("option", { value: theme.id, children: theme.name }, theme.id)) }, group))
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Accordion.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+function Accordion({
+  items,
+  allowMultiple = false,
+  defaultOpen = [],
+  className
+}) {
+  const [openItems, setOpenItems] = useState2(new Set(defaultOpen));
+  const toggleItem = (id) => {
+    setOpenItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        if (!allowMultiple) {
+          next.clear();
+        }
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsx23("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__ */ jsxs20("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
+      /* @__PURE__ */ jsxs20(
+        "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__ */ jsx23("span", { className: "font-semibold text-ph-ink", children: item.title }),
+            /* @__PURE__ */ jsx23(
+              IconChevronDown,
+              {
+                className: cn(
+                  "h-5 w-5 text-ph-mutedtext transition-transform duration-200",
+                  isOpen && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx23(
+        "div",
+        {
+          className: cn(
+            "grid transition-all duration-200",
+            isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          ),
+          children: /* @__PURE__ */ jsx23("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx23("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
+        }
+      )
+    ] }, item.id);
+  }) });
+}
+
+// src/components/ui/Stepper.tsx
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+function Stepper({ steps, currentStep, className }) {
+  return /* @__PURE__ */ jsx24("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__ */ jsxs21("div", { className: "flex flex-1 items-start gap-2", children: [
+      /* @__PURE__ */ jsxs21("div", { className: "flex flex-1 flex-col items-center", children: [
+        /* @__PURE__ */ jsx24(
+          "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-[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__ */ jsx24(IconCheck, { className: "h-5 w-5", "aria-hidden": true }) : index + 1
+          }
+        ),
+        /* @__PURE__ */ jsxs21("div", { className: "mt-2 text-center", children: [
+          /* @__PURE__ */ jsx24(
+            "p",
+            {
+              className: cn(
+                "text-sm font-semibold",
+                isCurrent && "text-ph-ink",
+                !isCurrent && "text-ph-mutedtext"
+              ),
+              children: step.label
+            }
+          ),
+          step.description && /* @__PURE__ */ jsx24("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: step.description })
+        ] })
+      ] }),
+      index < steps.length - 1 && /* @__PURE__ */ jsx24(
+        "div",
+        {
+          className: cn(
+            "mt-4 h-0.5 flex-1 rounded-full transition-colors",
+            isCompleted ? "bg-ph-success" : "bg-ph-border"
+          )
+        }
+      )
+    ] }, step.id);
+  }) });
+}
+
+// src/components/ui/SegmentedControl.tsx
+import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+function SegmentedControl({ options, value, onChange, className }) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: cn(
+        "inline-flex rounded-lg bg-ph-muted p-1",
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsxs22(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(option.value),
+          className: cn(
+            "relative flex items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all",
+            value === option.value ? "bg-ph-surface text-ph-ink shadow-ph" : "text-ph-subtle hover:text-ph-ink"
+          ),
+          children: [
+            option.icon && /* @__PURE__ */ jsx25("span", { className: "h-4 w-4", children: option.icon }),
+            option.label
+          ]
+        },
+        option.value
+      ))
+    }
+  );
+}
+
+// src/components/ui/CommandPalette.tsx
+import { useState as useState3, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+function CommandPalette({
+  items,
+  isOpen,
+  onClose,
+  placeholder = "Type a command or search...",
+  className
+}) {
+  const [query, setQuery] = useState3("");
+  const [selectedIndex, setSelectedIndex] = useState3(0);
+  const inputRef = useRef2(null);
+  const filtered = items.filter(
+    (item) => item.label.toLowerCase().includes(query.toLowerCase())
+  );
+  useEffect2(() => {
+    var _a;
+    if (isOpen) {
+      setQuery("");
+      setSelectedIndex(0);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen]);
+  useEffect2(() => {
+    const handleKeyDown = (e) => {
+      var _a;
+      if (!isOpen) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((i) => (i + 1) % filtered.length);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
+          break;
+        case "Enter":
+          e.preventDefault();
+          (_a = filtered[selectedIndex]) == null ? void 0 : _a.onSelect();
+          onClose();
+          break;
+        case "Escape":
+          onClose();
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, filtered, selectedIndex, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx26("div", { className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm", children: /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      className: cn(
+        "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
+          /* @__PURE__ */ jsx26(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
+          /* @__PURE__ */ jsx26(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: query,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setSelectedIndex(0);
+              },
+              placeholder,
+              className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
+            }
+          ),
+          /* @__PURE__ */ jsx26("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
+        ] }),
+        /* @__PURE__ */ jsx26("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ jsx26("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ jsxs23(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              item.onSelect();
+              onClose();
+            },
+            onMouseEnter: () => setSelectedIndex(index),
+            className: cn(
+              "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
+              index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
+            ),
+            children: [
+              item.icon && /* @__PURE__ */ jsx26("span", { className: "h-5 w-5", children: item.icon }),
+              /* @__PURE__ */ jsx26("span", { className: "flex-1", children: item.label }),
+              item.shortcut && /* @__PURE__ */ jsx26("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
+        )) })
+      ]
+    }
+  ) });
+}
+
+// src/components/ui/Calendar.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
+function Calendar({ value, onChange, className }) {
+  const [currentMonth, setCurrentMonth] = useState4(value || /* @__PURE__ */ new Date());
+  const today = /* @__PURE__ */ new Date();
+  const year = currentMonth.getFullYear();
+  const month = currentMonth.getMonth();
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const prevMonth = () => setCurrentMonth(new Date(year, month - 1, 1));
+  const nextMonth = () => setCurrentMonth(new Date(year, month + 1, 1));
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  const isSelected = (day) => {
+    if (!value) return false;
+    return value.getDate() === day && value.getMonth() === month && value.getFullYear() === year;
+  };
+  const isToday = (day) => {
+    return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
+  };
+  const handleSelect = (day) => {
+    onChange == null ? void 0 : onChange(new Date(year, month, day));
+  };
+  const days = [];
+  for (let i = 0; i < firstDay; i++) {
+    days.push(null);
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    days.push(i);
+  }
+  return /* @__PURE__ */ jsxs24("div", { className: cn("w-[280px] rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", className), children: [
+    /* @__PURE__ */ jsxs24("div", { className: "mb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx27(
+        "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__ */ jsx27(IconChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsxs24("span", { className: "text-sm font-semibold text-ph-ink", children: [
+        monthNames[month],
+        " ",
+        year
+      ] }),
+      /* @__PURE__ */ jsx27(
+        "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__ */ jsx27(IconChevronRight, { className: "h-5 w-5", "aria-hidden": true })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs24("div", { className: "grid grid-cols-7 gap-1", children: [
+      weekDays.map((day) => /* @__PURE__ */ jsx27("div", { className: "py-1 text-center text-xs font-medium text-ph-mutedtext", children: day }, day)),
+      days.map((day, index) => /* @__PURE__ */ jsx27("div", { className: "aspect-square", children: day && /* @__PURE__ */ jsx27(
+        "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-[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
+        }
+      ) }, index))
+    ] })
+  ] });
+}
+
+// src/components/ui/HoverCard.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+function HoverCard({ trigger, children, className }) {
+  const [isVisible, setIsVisible] = useState5(false);
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      className: "relative inline-block",
+      onMouseEnter: () => setIsVisible(true),
+      onMouseLeave: () => setIsVisible(false),
+      children: [
+        trigger,
+        /* @__PURE__ */ jsxs25(
+          "div",
+          {
+            className: cn(
+              "absolute left-1/2 top-full z-50 mt-2 w-64 -translate-x-1/2 rounded-lg border border-ph-border bg-ph-surface p-4 shadow-ph-md transition-all duration-150",
+              isVisible ? "visible translate-y-0 opacity-100" : "invisible -translate-y-1 opacity-0",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx28("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__ */ jsx28("div", { className: "relative", children })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui/EmptyState.tsx
+import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action, className }) {
+  return /* @__PURE__ */ jsxs26(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center rounded-xl border border-dashed border-ph-border bg-ph-muted/50 px-8 py-16 text-center",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx29("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext", children: icon }),
+        /* @__PURE__ */ jsx29("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
+        description && /* @__PURE__ */ jsx29("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
+        action && /* @__PURE__ */ jsx29("div", { className: "mt-4", children: action })
+      ]
+    }
+  );
+}
+
+// src/components/ui/FilterChips.tsx
+import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+function FilterChips({
+  chips,
+  onToggle,
+  onRemove,
+  className,
+  "aria-label": ariaLabel = "Applied filters"
+}) {
+  return /* @__PURE__ */ jsx30("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__ */ jsxs27(Fragment4, { children: [
+      /* @__PURE__ */ jsx30("span", { className: "ph-filter-chip__label", children: chip.label }),
+      chip.value != null ? /* @__PURE__ */ jsx30("span", { className: "ph-filter-chip__value", children: chip.value }) : null
+    ] });
+    return /* @__PURE__ */ jsxs27(
+      "span",
+      {
+        className: cn("ph-filter-chip", chip.active && "ph-filter-chip--active"),
+        "data-state": chip.active ? "on" : "off",
+        children: [
+          onToggle ? /* @__PURE__ */ jsx30(
+            "button",
+            {
+              type: "button",
+              className: "ph-filter-chip__main",
+              "aria-pressed": Boolean(chip.active),
+              onClick: () => onToggle(chip.id),
+              children: content
+            }
+          ) : /* @__PURE__ */ jsx30("span", { className: "ph-filter-chip__main", children: content }),
+          chip.active && onRemove ? /* @__PURE__ */ jsx30(
+            "button",
+            {
+              type: "button",
+              className: "ph-filter-chip__remove",
+              "aria-label": `Remove ${label} filter`,
+              onClick: () => onRemove(chip.id),
+              children: /* @__PURE__ */ jsx30(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 jsx31, jsxs as jsxs28 } 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__ */ jsxs28("div", __spreadProps(__spreadValues({ className: cn("ph-filter-bar", className) }, props), { children: [
+    /* @__PURE__ */ jsxs28("div", { className: "ph-filter-bar__controls", role: "group", "aria-label": label, children: [
+      children,
+      onClear ? /* @__PURE__ */ jsx31("button", { type: "button", className: "ph-filter-bar__clear", onClick: onClear, children: clearLabel }) : null
+    ] }),
+    resultCount != null ? /* @__PURE__ */ jsx31("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__ */ jsx31(
+    DropdownMenu,
+    {
+      "aria-label": `${label}: ${accessibleValue}`,
+      align,
+      disabled,
+      className,
+      trigger: /* @__PURE__ */ jsxs28("span", { className: cn("ph-filter-menu-trigger", selected && "ph-filter-menu-trigger--active"), children: [
+        /* @__PURE__ */ jsx31(IconTuning, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        /* @__PURE__ */ jsx31("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        /* @__PURE__ */ jsx31("span", { className: "ph-filter-menu-trigger__value", children: displayValue })
+      ] }),
+      children: /* @__PURE__ */ jsx31(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ jsx31(
+        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__ */ jsx31(
+    DropdownMenu,
+    {
+      "aria-label": `${label}: ${selected ? getOptionText(selected) : "Choose sort order"}`,
+      align,
+      disabled,
+      className,
+      trigger: /* @__PURE__ */ jsxs28("span", { className: "ph-filter-menu-trigger ph-sort-menu-trigger", children: [
+        /* @__PURE__ */ jsx31(
+          IconArrowDown,
+          {
+            className: cn("h-3.5 w-3.5", direction === "ascending" && "rotate-180"),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx31("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        selected ? /* @__PURE__ */ jsx31("span", { className: "ph-filter-menu-trigger__value", children: selected.label }) : null
+      ] }),
+      children: /* @__PURE__ */ jsx31(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ jsx31(
+        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 jsx32, jsxs as jsxs29 } 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__ */ jsxs29("div", __spreadProps(__spreadValues({ className: cn("ph-filter-controls", className) }, props), { children: [
+    /* @__PURE__ */ jsx32(FilterBar, __spreadProps(__spreadValues({}, barProps), { children })),
+    hasChips && chipsProps ? /* @__PURE__ */ jsx32(FilterChips, __spreadValues({}, chipsProps)) : emptyState != null ? emptyState : null
+  ] }));
+}
+
+// src/components/ui/CodeBlock.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
+function CodeBlock({ code, language = "tsx", filename, className }) {
+  const [copied, setCopied] = useState6(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs30("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
+    (filename || language) && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
+      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs30("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ jsx33("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
+          /* @__PURE__ */ jsx33("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
+          /* @__PURE__ */ jsx33("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
+        ] }),
+        filename && /* @__PURE__ */ jsx33("span", { className: "ml-2 text-xs text-white/60", children: filename })
+      ] }),
+      /* @__PURE__ */ jsx33(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: "text-xs text-white/60 transition hover:text-white",
+          children: copied ? "Copied!" : "Copy"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx33("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ jsx33("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
+  ] });
+}
+
+// src/components/ui/ComponentDocs.tsx
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
+function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false, className }) {
+  return /* @__PURE__ */ jsxs31("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
+    /* @__PURE__ */ jsxs31("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__ */ jsx34("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
+      /* @__PURE__ */ jsxs31("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__ */ jsx34("span", { className: "group-open:hidden", children: "Show" }),
+        /* @__PURE__ */ jsx34("span", { className: "hidden group-open:inline", children: "Hide" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx34("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ jsxs31("table", { className: "w-full text-left text-sm", children: [
+      /* @__PURE__ */ jsx34("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ jsxs31("tr", { children: [
+        /* @__PURE__ */ jsx34("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
+        /* @__PURE__ */ jsx34("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
+        /* @__PURE__ */ jsx34("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
+        /* @__PURE__ */ jsx34("th", { className: "px-4 py-2 font-semibold", children: "Use" })
+      ] }) }),
+      /* @__PURE__ */ jsx34("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
+        var _a, _b;
+        return /* @__PURE__ */ jsxs31("tr", { children: [
+          /* @__PURE__ */ jsx34("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
+          /* @__PURE__ */ jsx34("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
+          /* @__PURE__ */ jsx34("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
+          /* @__PURE__ */ jsx34("td", { className: "px-4 py-3 align-top text-ph-subtle", children: (_b = row.description) != null ? _b : /* @__PURE__ */ jsx34("span", { className: "text-ph-mutedtext", children: "\u2014" }) })
+        ] }, row.name);
+      }) })
+    ] }) })
+  ] });
+}
+
+// src/components/ui/ShowcaseWrapper.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
+function ShowcaseWrapper({
+  id,
+  title,
+  description,
+  docs,
+  code,
+  filename = "Example.tsx",
+  children,
+  className
+}) {
+  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__ */ jsxs32("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
+    /* @__PURE__ */ jsxs32("div", { className: "ph-h2-rule mb-8", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx35("h2", { children: title }),
+        /* @__PURE__ */ jsx35(
+          "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-[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",
+            "aria-label": showCode ? "Hide code" : "Show code",
+            children: /* @__PURE__ */ jsx35(IconCodePreview, { className: "h-5 w-5", "aria-hidden": true })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx35("hr", {})
+    ] }),
+    description && /* @__PURE__ */ jsx35("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
+    docs && /* @__PURE__ */ jsx35("div", { className: "mb-6", children: docs }),
+    /* @__PURE__ */ jsxs32(
+      "div",
+      {
+        className: cn(
+          "gap-6",
+          showCode ? "lg:grid lg:grid-cols-[1fr,minmax(360px,420px)]" : "block"
+        ),
+        children: [
+          /* @__PURE__ */ jsx35("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
+          /* @__PURE__ */ jsx35(
+            "div",
+            {
+              className: cn(
+                "transition-all duration-300",
+                showCode ? "block opacity-100" : "hidden opacity-0 lg:hidden"
+              ),
+              children: /* @__PURE__ */ jsx35("div", { className: "sticky top-20", children: /* @__PURE__ */ jsx35(CodeBlock, { code, filename }) })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var titleIdMap = {
+  "Icons": "icons",
+  "Colour tokens": "colors",
+  "Buttons": "buttons",
+  "Badges": "badges",
+  "Alerts": "alerts",
+  "Toasts": "toasts",
+  "Cards": "cards",
+  "Forms": "forms",
+  "Inputs & Forms": "forms",
+  "Tables": "tables",
+  "Accordion": "accordion",
+  "Calendar": "calendar",
+  "Hover Card": "hovercard",
+  "Modals": "modals",
+  "Drawers": "drawers",
+  "Navigation chrome": "navigation",
+  "Navigation utilities": "utilities",
+  "Stepper": "stepper",
+  "Command Palette": "command",
+  "Filter Chips": "filters",
+  "Empty State": "emptystate",
+  "Charts (PostHog-style)": "charts",
+  "Dashboard shells": "dashboard",
+  "Tabs": "tabs",
+  "Dropdowns": "dropdowns",
+  "Progress & loading": "progress",
+  "Tooltip": "tooltip",
+  "Avatars": "avatars",
+  "Stats & conversational UI": "stats",
+  "Timeline": "timeline",
+  "Countdown motif": "countdown",
+  "Keyboard glyphs": "kbd",
+  "Icon swap": "swap",
+  "Stacked surfaces": "stack",
+  "Diff slider": "diff",
+  "Badge hotspots": "indicator",
+  "Terminal capture": "code-mockup"
+};
+
+// src/components/ui/CollapsibleSection.tsx
+import { useId as useId5, useState as useState8 } from "react";
+import { jsx as jsx36, jsxs as jsxs33 } from "react/jsx-runtime";
+function CollapsibleSection({ title, children, defaultOpen = true, id }) {
+  const [isOpen, setIsOpen] = useState8(defaultOpen);
+  const generatedId = useId5();
+  const contentId = `${id != null ? id : generatedId}-content`;
+  return /* @__PURE__ */ jsxs33("section", { id, className: "scroll-mt-20", children: [
+    /* @__PURE__ */ jsxs33(
+      "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__ */ jsx36("span", { className: "text-lg font-bold text-ph-ink", children: title }),
+          /* @__PURE__ */ jsx36(
+            IconChevronDown,
+            {
+              className: cn(
+                "h-5 w-5 text-ph-subtle transition-transform duration-200",
+                isOpen && "rotate-180"
+              ),
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx36(
+      "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"
+        ),
+        children
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Typography.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+var toneMap2 = {
+  default: "text-ph-ink",
+  muted: "text-ph-mutedtext",
+  subtle: "text-ph-subtle",
+  brand: "text-ph-brand",
+  danger: "text-ph-danger",
+  success: "text-ph-success",
+  warning: "text-ph-warning",
+  info: "text-ph-info",
+  inherit: ""
+};
+var weightMap = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold",
+  extrabold: "font-extrabold"
+};
+function textClass(base, tone, weight, truncate, className) {
+  return cn(base, toneMap2[tone], weight && weightMap[weight], truncate && "truncate", className);
+}
+function Display({
+  children,
+  tone = "default",
+  weight,
+  truncate,
+  className
+}) {
+  return /* @__PURE__ */ jsx37("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__ */ jsx37("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__ */ jsx37("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
+}
+function H3({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx37("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
+}
+function H4({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx37("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
+}
+function H5({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx37("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
+}
+function P({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx37("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
+}
+function Small({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx37("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
+}
+function Caption({ children, tone = "muted", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx37("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__ */ jsx37("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__ */ jsx37("p", { className: textClass("text-lg leading-relaxed", tone, weight, truncate, className), children });
+}
+function Mono({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx37("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
+}
+function Label({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx37("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
+}
+
+// src/components/ui/Avatar.tsx
+import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
+var sizeMap5 = {
+  xs: "h-8 w-8 text-[10px]",
+  sm: "h-10 w-10 text-xs",
+  md: "h-12 w-12 text-base",
+  lg: "h-16 w-16 text-xl",
+  xl: "h-24 w-24 text-3xl"
+};
+var statusMap = {
+  online: "bg-emerald-500",
+  offline: "bg-ph-mutedtext",
+  away: "bg-amber-400",
+  busy: "bg-ph-danger"
+};
+function Avatar(_a) {
+  var _b = _a, {
+    label,
+    icon,
+    size = "md",
+    color = "bg-ph-brand text-white",
+    status,
+    badge,
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "icon",
+    "size",
+    "color",
+    "status",
+    "badge",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs34("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
+    /* @__PURE__ */ jsx38(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-full border border-ph-border font-bold shadow-ph",
+          sizeMap5[size],
+          color
+        ),
+        children: icon || label
+      }
+    ),
+    status && /* @__PURE__ */ jsx38(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-0 right-1 h-2.5 w-2.5 rounded-full border-2 border-white",
+          statusMap[status]
+        )
+      }
+    ),
+    badge && /* @__PURE__ */ jsx38("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) {
+  var _b = _a, { children, max, className } = _b, props = __objRest(_b, ["children", "max", "className"]);
+  const items = Array.isArray(children) ? children : [children];
+  const visible = max ? items.slice(0, max) : items;
+  const remaining = max ? items.length - max : 0;
+  return /* @__PURE__ */ jsxs34("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
+    visible,
+    remaining > 0 && /* @__PURE__ */ jsx38(
+      Avatar,
+      {
+        label: `+${remaining}`,
+        size: "md",
+        color: "bg-ph-toolbar text-ph-subtle"
+      }
+    )
+  ] }));
+}
+
+// src/components/ui/Progress.tsx
+import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
+var sizeMap6 = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+function Progress(_a) {
+  var _b = _a, {
+    value,
+    max = 100,
+    color = "bg-ph-brand",
+    label,
+    showPercentage = false,
+    size = "md",
+    className
+  } = _b, props = __objRest(_b, [
+    "value",
+    "max",
+    "color",
+    "label",
+    "showPercentage",
+    "size",
+    "className"
+  ]);
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ jsxs35("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
+    (label || showPercentage) && /* @__PURE__ */ jsxs35("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
+      label && /* @__PURE__ */ jsx39("span", { children: label }),
+      showPercentage && /* @__PURE__ */ jsxs35("span", { className: "tabular-nums", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx39("div", { className: cn("ph-progress", sizeMap6[size]), children: /* @__PURE__ */ jsx39(
+      "div",
+      {
+        className: cn("ph-progress-bar", color),
+        style: { width: `${percentage}%` },
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max
+      }
+    ) })
+  ] }));
+}
+
+// src/components/ui/ChatBubble.tsx
+import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
+function ChatBubble(_a) {
+  var _b = _a, {
+    children,
+    avatar,
+    name,
+    time,
+    variant = "from",
+    footer,
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "avatar",
+    "name",
+    "time",
+    "variant",
+    "footer",
+    "className"
+  ]);
+  const isSelf = variant === "self";
+  return /* @__PURE__ */ jsxs36(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "flex gap-3",
+        isSelf && "flex-row-reverse",
+        className
+      )
+    }, props), {
+      children: [
+        avatar && /* @__PURE__ */ jsx40("div", { className: "shrink-0", children: avatar }),
+        /* @__PURE__ */ jsxs36("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
+          (name || time) && /* @__PURE__ */ jsxs36(
+            "header",
+            {
+              className: cn(
+                "flex gap-2 text-xs text-ph-mutedtext",
+                isSelf && "flex-row-reverse justify-end"
+              ),
+              children: [
+                name && /* @__PURE__ */ jsx40("span", { className: "font-semibold text-ph-ink", children: name }),
+                time && /* @__PURE__ */ jsx40("span", { children: time })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx40(
+            "div",
+            {
+              className: cn(
+                "mt-2 inline-block text-left shadow-ph",
+                isSelf ? "ph-chat-self" : "ph-chat-from"
+              ),
+              children
+            }
+          ),
+          footer && /* @__PURE__ */ jsx40("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
+        ] })
+      ]
+    })
+  );
+}
+
+// src/components/ui/Terminal.tsx
+import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
+function Terminal(_a) {
+  var _b = _a, {
+    title = "sandbox",
+    lines,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "title",
+    "lines",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs37(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "overflow-hidden rounded-xl border border-ph-border shadow-ph-md",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxs37("header", { className: "flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3", children: [
+          /* @__PURE__ */ jsx41("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
+          /* @__PURE__ */ jsx41("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
+          /* @__PURE__ */ jsx41("div", { className: "h-3 w-3 rounded-full bg-emerald-400" }),
+          title && /* @__PURE__ */ jsx41("span", { className: "text-xs font-medium text-ph-mutedtext", children: title })
+        ] }),
+        /* @__PURE__ */ jsx41("div", { className: "ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed", children: children || /* @__PURE__ */ jsx41(Fragment5, { 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__ */ jsxs37("span", { children: [
+            /* @__PURE__ */ jsx41("span", { className: color || "text-neutral-600", children: text }),
+            i < lines.length - 1 && /* @__PURE__ */ jsx41("br", {})
+          ] }, i);
+        }) }) })
+      ]
+    })
+  );
+}
+
+// src/components/ui/Indicator.tsx
+import { jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
+var positionMap = {
+  "top-right": "-right-[2px] -top-[2px]",
+  "top-left": "-left-[2px] -top-[2px]",
+  "bottom-right": "-right-[2px] -bottom-[2px]",
+  "bottom-left": "-left-[2px] -bottom-[2px]"
+};
+function Indicator(_a) {
+  var _b = _a, {
+    children,
+    badge,
+    color = "bg-ph-brand",
+    position = "top-right",
+    dot = false,
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "badge",
+    "color",
+    "position",
+    "dot",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs38("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex items-center justify-center", className) }, props), { children: [
+    dot ? /* @__PURE__ */ jsx42(
+      "span",
+      {
+        className: cn(
+          "absolute z-10 h-2.5 w-2.5 rounded-full border-2 border-white",
+          color,
+          positionMap[position]
+        )
+      }
+    ) : badge != null ? /* @__PURE__ */ jsx42(
+      "span",
+      {
+        className: cn(
+          "absolute z-10 flex min-h-[22px] min-w-[22px] items-center justify-center rounded-full px-1 text-[11px] font-bold text-white",
+          color,
+          positionMap[position]
+        ),
+        children: badge
+      }
+    ) : null,
+    children
+  ] }));
+}
+
+// src/components/ui/Timeline.tsx
+import { jsx as jsx43, jsxs as jsxs39 } from "react/jsx-runtime";
+function Timeline(_a) {
+  var _b = _a, {
+    events,
+    alternate = false,
+    className
+  } = _b, props = __objRest(_b, [
+    "events",
+    "alternate",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx43(
+    "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__ */ jsxs39("li", { className: cn("relative flex gap-6", align), children: [
+          /* @__PURE__ */ jsx43(
+            "div",
+            {
+              className: cn(
+                "relative z-10 flex h-12 w-12 shrink-0 items-center justify-center rounded-full ring-8 ring-ph-muted shadow-md",
+                event.color || "bg-ph-brand text-white"
+              ),
+              children: event.icon
+            }
+          ),
+          /* @__PURE__ */ jsxs39("article", { className: "flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", children: [
+            /* @__PURE__ */ jsxs39("div", { className: "flex flex-wrap items-baseline gap-3", children: [
+              /* @__PURE__ */ jsx43("h4", { className: "text-base font-semibold text-ph-ink", children: event.title }),
+              event.time && /* @__PURE__ */ jsx43("time", { className: "text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext", children: event.time })
+            ] }),
+            event.description && /* @__PURE__ */ jsx43("p", { className: "mt-2 text-sm text-ph-subtle", children: event.description })
+          ] })
+        ] }, event.id);
+      })
+    })
+  );
+}
+
+// src/components/ui/Banner.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx44, jsxs as jsxs40 } from "react/jsx-runtime";
+var typeClass = {
+  info: "ph-banner-info",
+  success: "ph-banner-success",
+  warning: "ph-banner-warning",
+  danger: "ph-banner-danger",
+  ai: "ph-banner-ai"
+};
+var Banner = forwardRef6(function Banner2(_a, ref) {
+  var _b = _a, {
+    type = "info",
+    onClose,
+    action,
+    hideIcon = false,
+    square = false,
+    icon,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "type",
+    "onClose",
+    "action",
+    "hideIcon",
+    "square",
+    "icon",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx44(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      role: "alert",
+      className: cn(
+        "ph-banner",
+        typeClass[type],
+        square && "ph-banner--square",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsxs40("div", { className: "ph-banner__body", children: [
+        icon,
+        /* @__PURE__ */ jsx44("div", { className: "ph-banner__content", children }),
+        action && /* @__PURE__ */ jsx44("div", { className: "ph-banner__action", children: action }),
+        onClose && /* @__PURE__ */ jsx44("button", { type: "button", onClick: onClose, className: "ph-banner__close", "aria-label": "Dismiss", children: /* @__PURE__ */ jsx44("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx44("path", { d: "M4 4l8 8M12 4l-8 8" }) }) })
+      ] })
+    })
+  );
+});
+Banner.displayName = "Banner";
+
+// src/components/ui/Dialog.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx45, jsxs as jsxs41 } from "react/jsx-runtime";
+function Dialog2(_a) {
+  var _b = _a, {
+    isOpen: openProp,
+    onClose,
+    onConfirm,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    confirmProps,
+    cancelProps,
+    children,
+    title
+  } = _b, modalProps = __objRest(_b, [
+    "isOpen",
+    "onClose",
+    "onConfirm",
+    "confirmText",
+    "cancelText",
+    "confirmProps",
+    "cancelProps",
+    "children",
+    "title"
+  ]);
+  const [loading, setLoading] = useState9(false);
+  const isOpen = openProp != null ? openProp : true;
+  const handleConfirm = async () => {
+    if (!onConfirm) return;
+    setLoading(true);
+    try {
+      await onConfirm();
+    } finally {
+      setLoading(false);
+    }
+    onClose == null ? void 0 : onClose();
+  };
+  return /* @__PURE__ */ jsx45(
+    Modal,
+    __spreadProps(__spreadValues({
+      open: isOpen,
+      onClose,
+      title,
+      footer: /* @__PURE__ */ jsxs41("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx45(Button, __spreadProps(__spreadValues({ variant: "secondary" }, cancelProps), { onClick: onClose, children: cancelText })),
+        onConfirm && /* @__PURE__ */ jsx45(
+          Button,
+          __spreadProps(__spreadValues({
+            variant: "primary",
+            loading
+          }, confirmProps), {
+            onClick: handleConfirm,
+            children: confirmText
+          })
+        )
+      ] })
+    }, modalProps), {
+      children
+    })
+  );
+}
+Dialog2.displayName = "Dialog";
+
+// src/components/ui/Divider.tsx
+import { jsx as jsx46 } from "react/jsx-runtime";
+function Divider(_a) {
+  var _b = _a, {
+    vertical = false,
+    dashed = false,
+    thick = false,
+    label,
+    className
+  } = _b, props = __objRest(_b, [
+    "vertical",
+    "dashed",
+    "thick",
+    "label",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx46(
+    "div",
+    __spreadProps(__spreadValues({
+      role: "separator",
+      "aria-orientation": vertical ? "vertical" : "horizontal",
+      className: cn(
+        "ph-divider",
+        vertical && "ph-divider--vertical",
+        thick && "ph-divider--thick",
+        dashed && "ph-divider--dashed",
+        !!label && "ph-divider--with-label",
+        !className && (vertical ? "mx-2 self-stretch" : "my-2"),
+        className
+      )
+    }, props), {
+      children: label && /* @__PURE__ */ jsx46("span", { className: "ph-divider__label", children: label })
+    })
+  );
+}
+Divider.displayName = "Divider";
+
+// src/components/ui/Tag.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+var typeClass2 = {
+  default: "ph-tag-default",
+  primary: "ph-tag-primary",
+  success: "ph-tag-success",
+  warning: "ph-tag-warning",
+  danger: "ph-tag-danger",
+  info: "ph-tag-info",
+  muted: "ph-tag-muted",
+  highlight: "ph-tag-highlight"
+};
+var Tag = forwardRef7(function Tag2(_a, ref) {
+  var _b = _a, {
+    type = "default",
+    size = "md",
+    icon,
+    closable = false,
+    onClose,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "type",
+    "size",
+    "icon",
+    "closable",
+    "onClose",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs42(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "ph-tag",
+        typeClass2[type],
+        size === "sm" && "ph-tag-sm",
+        className
+      )
+    }, props), {
+      children: [
+        icon && /* @__PURE__ */ jsx47("span", { className: "ph-tag__icon", children: icon }),
+        /* @__PURE__ */ jsx47("span", { className: "ph-tag__text", children }),
+        closable && /* @__PURE__ */ jsx47(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose == null ? void 0 : onClose();
+            },
+            className: "ph-tag__close",
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsx47("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx47("path", { d: "M3 3l6 6M9 3l-6 6" }) })
+          }
+        )
+      ]
+    })
+  );
+});
+Tag.displayName = "Tag";
+
+// src/components/ui/ProgressCircle.tsx
+import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+function ProgressCircle(_a) {
+  var _b = _a, {
+    progress,
+    size = 40,
+    strokeWidth: sw,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "progress",
+    "size",
+    "strokeWidth",
+    "children",
+    "className"
+  ]);
+  const stroke = sw != null ? sw : size * 0.08;
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - Math.min(1, Math.max(0, progress)) * circumference;
+  return /* @__PURE__ */ jsxs43(
+    "span",
+    __spreadProps(__spreadValues({
+      className: cn("ph-progress-circle", className),
+      style: { width: size, height: size },
+      role: "progressbar",
+      "aria-valuenow": Math.round(progress * 100),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxs43("svg", { width: size, height: size, children: [
+          /* @__PURE__ */ jsx48(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: stroke,
+              opacity: 0.15
+            }
+          ),
+          /* @__PURE__ */ jsx48(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: stroke,
+              strokeDasharray: circumference,
+              strokeDashoffset: offset,
+              strokeLinecap: "round",
+              transform: `rotate(-90 ${size / 2} ${size / 2})`,
+              className: "ph-progress-circle__bar"
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ jsx48("span", { className: "ph-progress-circle__content", children })
+      ]
+    })
+  );
+}
+ProgressCircle.displayName = "ProgressCircle";
+
+// src/components/ui/Row.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
+var Row = forwardRef8(function Row2(_a, ref) {
+  var _b = _a, {
+    icon,
+    sideIcon,
+    status = "default",
+    fullWidth = false,
+    center = false,
+    size = "md",
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "icon",
+    "sideIcon",
+    "status",
+    "fullWidth",
+    "center",
+    "size",
+    "className",
+    "children"
+  ]);
+  const symbolic = children === null || children === void 0 || children === false;
+  return /* @__PURE__ */ jsx49(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "ph-row",
+        status !== "default" && `ph-row--${status}`,
+        fullWidth && "ph-row--full-width",
+        center && "ph-row--center",
+        size === "sm" && "ph-row--sm",
+        size === "lg" && "ph-row--lg",
+        symbolic && "ph-row--symbolic",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsxs44("div", { className: "ph-row__main", children: [
+        icon && /* @__PURE__ */ jsx49("span", { className: "ph-row__icon", children: icon }),
+        !symbolic && /* @__PURE__ */ jsx49("div", { className: "ph-row__content", children }),
+        sideIcon && /* @__PURE__ */ jsx49("span", { className: "ph-row__side-icon", children: sideIcon })
+      ] })
+    })
+  );
+});
+Row.displayName = "Row";
+
+// src/components/ui/Widget.tsx
+import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+function Widget({ title, onClose, actions, children, className }) {
+  return /* @__PURE__ */ jsxs45("div", { className: cn("ph-widget", className), children: [
+    /* @__PURE__ */ jsxs45("div", { className: "ph-widget__header", children: [
+      /* @__PURE__ */ jsx50("span", { className: "ph-widget__title", children: title }),
+      actions,
+      onClose && /* @__PURE__ */ jsx50("button", { type: "button", onClick: onClose, className: "ph-widget__close", "aria-label": "Close", children: /* @__PURE__ */ jsx50("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx50("path", { d: "M3 3l8 8M11 3l-8 8" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx50("div", { className: "ph-widget__content", children })
+  ] });
+}
+Widget.displayName = "Widget";
+
+// src/components/ui/Lettermark.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var Lettermark = forwardRef9(function Lettermark2(_a, ref) {
+  var _b = _a, {
+    name,
+    index,
+    outlined = false,
+    rounded = false,
+    size = "md",
+    className
+  } = _b, props = __objRest(_b, [
+    "name",
+    "index",
+    "outlined",
+    "rounded",
+    "size",
+    "className"
+  ]);
+  const letter = name ? typeof name === "number" ? String(Math.floor(name)) : String.fromCodePoint(name.codePointAt(0)).toLocaleUpperCase() : "?";
+  return /* @__PURE__ */ jsx51(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "ph-lettermark",
+        `ph-lettermark--${size}`,
+        typeof index === "number" && `ph-lettermark--v-${index % 8 + 1}`,
+        outlined && "ph-lettermark--outlined",
+        rounded && "ph-lettermark--rounded",
+        letter === "?" && "ph-lettermark--unknown",
+        className
+      ),
+      "aria-hidden": "true"
+    }, props), {
+      children: letter
+    })
+  );
+});
+Lettermark.displayName = "Lettermark";
+
+// src/components/ui/Splotch.tsx
+import { jsx as jsx52 } from "react/jsx-runtime";
+var colorMap = {
+  purple: "ph-splotch--purple",
+  blue: "ph-splotch--blue",
+  green: "ph-splotch--green",
+  black: "ph-splotch--black",
+  white: "ph-splotch--white",
+  orange: "ph-splotch--orange",
+  red: "ph-splotch--red",
+  yellow: "ph-splotch--yellow"
+};
+function Splotch(_a) {
+  var _b = _a, { color, className } = _b, props = __objRest(_b, ["color", "className"]);
+  return /* @__PURE__ */ jsx52(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn("ph-splotch", colorMap[color], className),
+      "aria-hidden": "true"
+    }, props), {
+      children: /* @__PURE__ */ jsx52("div", { className: "ph-splotch__paint" })
+    })
+  );
+}
+Splotch.displayName = "Splotch";
+
+// src/components/ui/Popover.tsx
+import { useState as useState10, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
+function Popover(_a) {
+  var _b = _a, {
+    trigger,
+    children,
+    open: controlledOpen,
+    onOpenChange,
+    placement = "bottom",
+    matchTriggerWidth = false,
+    padded = true,
+    className
+  } = _b, props = __objRest(_b, [
+    "trigger",
+    "children",
+    "open",
+    "onOpenChange",
+    "placement",
+    "matchTriggerWidth",
+    "padded",
+    "className"
+  ]);
+  var _a2;
+  const [internalOpen, setInternalOpen] = useState10(false);
+  const isOpen = controlledOpen != null ? controlledOpen : internalOpen;
+  const setOpen = onOpenChange != null ? onOpenChange : setInternalOpen;
+  const triggerRef = useRef3(null);
+  const panelRef = useRef3(null);
+  useEffect3(() => {
+    if (!isOpen) return;
+    const handleClick = (e) => {
+      if (triggerRef.current && !triggerRef.current.contains(e.target) && panelRef.current && !panelRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [isOpen, setOpen]);
+  return /* @__PURE__ */ jsxs46("div", __spreadProps(__spreadValues({ className: cn("ph-popover relative inline-flex", className) }, props), { children: [
+    /* @__PURE__ */ jsx53(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: () => setOpen(!isOpen),
+        className: "ph-popover__trigger",
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx53(
+      "div",
+      {
+        ref: panelRef,
+        className: cn(
+          "ph-popover__panel",
+          `ph-popover--${placement}`,
+          padded && "ph-popover__panel--padded",
+          matchTriggerWidth && "ph-popover__panel--match"
+        ),
+        style: matchTriggerWidth ? { width: (_a2 = triggerRef.current) == null ? void 0 : _a2.offsetWidth } : void 0,
+        children
+      }
+    )
+  ] }));
+}
+Popover.displayName = "Popover";
+
+// src/components/ui/LoadingBar.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+function LoadingBar(_a) {
+  var _b = _a, { active = true, className } = _b, props = __objRest(_b, ["active", "className"]);
+  return /* @__PURE__ */ jsx54(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "ph-loading-bar",
+        active && "ph-loading-bar--active",
+        className
+      ),
+      role: "progressbar",
+      "aria-label": "Loading"
+    }, props), {
+      children: /* @__PURE__ */ jsx54("div", { className: "ph-loading-bar__fill" })
+    })
+  );
+}
+LoadingBar.displayName = "LoadingBar";
+
+// src/components/ui/Link.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx55 } from "react/jsx-runtime";
+var Link = forwardRef10(function Link2(_a, ref) {
+  var _b = _a, {
+    className,
+    disabled = false,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "disabled",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx55(
+    "a",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "ph-link",
+        disabled && "ph-link--disabled pointer-events-none opacity-50",
+        className
+      ),
+      tabIndex: disabled ? -1 : void 0,
+      "aria-disabled": disabled || void 0
+    }, props), {
+      children
+    })
+  );
+});
+Link.displayName = "Link";
+
+// src/components/ui/Spinner.tsx
+import { jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
+function Spinner(_a) {
+  var _b = _a, { size = "sm", textColored = false, className } = _b, props = __objRest(_b, ["size", "textColored", "className"]);
+  return /* @__PURE__ */ jsx56(
+    "span",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "ph-spinner",
+        `ph-spinner--${size}`,
+        textColored && "ph-spinner--text-colored",
+        className
+      ),
+      role: "status",
+      "aria-label": "Loading"
+    }, props), {
+      children: /* @__PURE__ */ jsxs47("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "ph-spinner__svg", children: [
+        /* @__PURE__ */ jsx56("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", opacity: 0.2 }),
+        /* @__PURE__ */ jsx56("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+      ] })
+    })
+  );
+}
+Spinner.displayName = "Spinner";
+
+// src/components/ui/Snack.tsx
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx57, jsxs as jsxs48 } from "react/jsx-runtime";
+var Snack = forwardRef11(function Snack2(_a, ref) {
+  var _b = _a, {
+    type = "regular",
+    onClose,
+    wrap = false,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "type",
+    "onClose",
+    "wrap",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs48(
+    "span",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "ph-snack",
+        type === "pill" && "ph-snack--pill",
+        !wrap && "truncate",
+        className
+      ),
+      title: typeof children === "string" ? children : void 0
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx57("span", { className: "ph-snack__text", children }),
+        onClose && /* @__PURE__ */ jsx57(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose();
+            },
+            className: "ph-snack__close",
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsx57("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx57("path", { d: "M3 3l6 6M9 3l-6 6" }) })
+          }
+        )
+      ]
+    })
+  );
+});
+Snack.displayName = "Snack";
+
+// src/components/ui/Combobox.tsx
+import { useState as useState11, useRef as useRef4, useEffect as useEffect4 } from "react";
+import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
+function Combobox({
+  options,
+  value = [],
+  onChange,
+  placeholder = "Search...",
+  className,
+  disabled
+}) {
+  const [open, setOpen] = useState11(false);
+  const [search, setSearch] = useState11("");
+  const inputRef = useRef4(null);
+  const containerRef = useRef4(null);
+  const filtered = options.filter(
+    (o) => o.label.toLowerCase().includes(search.toLowerCase())
+  );
+  const selectedSet = new Set(value);
+  const toggle = (val) => {
+    const next = selectedSet.has(val) ? value.filter((v) => v !== val) : [...value, val];
+    onChange == null ? void 0 : onChange(next);
+  };
+  useEffect4(() => {
+    if (!open) return;
+    const handle = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [open]);
+  return /* @__PURE__ */ jsxs49("div", { ref: containerRef, className: cn("ph-combobox relative", className), children: [
+    /* @__PURE__ */ jsxs49("div", { className: "ph-combobox__input-wrap", children: [
+      value.length > 0 && /* @__PURE__ */ jsx58("div", { className: "ph-combobox__chips", children: value.map((v) => {
+        var _a, _b;
+        const opt = options.find((o) => o.value === v);
+        return /* @__PURE__ */ jsxs49("span", { className: "ph-combobox__chip", children: [
+          (_a = opt == null ? void 0 : opt.label) != null ? _a : v,
+          /* @__PURE__ */ jsx58(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggle(v),
+              className: "ph-combobox__chip-remove",
+              "aria-label": `Remove ${(_b = opt == null ? void 0 : opt.label) != null ? _b : v}`,
+              children: /* @__PURE__ */ jsx58("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx58("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+            }
+          )
+        ] }, v);
+      }) }),
+      /* @__PURE__ */ jsx58(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: search,
+          onChange: (e) => {
+            setSearch(e.target.value);
+            setOpen(true);
+          },
+          onFocus: () => setOpen(true),
+          placeholder: value.length === 0 ? placeholder : "",
+          disabled,
+          className: "ph-combobox__input"
+        }
+      )
+    ] }),
+    open && filtered.length > 0 && /* @__PURE__ */ jsx58("div", { className: "ph-combobox__dropdown", children: filtered.map((opt) => /* @__PURE__ */ jsxs49(
+      "button",
+      {
+        type: "button",
+        onClick: () => toggle(opt.value),
+        className: cn(
+          "ph-combobox__option",
+          selectedSet.has(opt.value) && "ph-combobox__option--selected"
+        ),
+        children: [
+          selectedSet.has(opt.value) && /* @__PURE__ */ jsx58("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx58("path", { d: "M2.5 6l2.5 2.5 4.5-5" }) }),
+          /* @__PURE__ */ jsx58("span", { children: opt.label })
+        ]
+      },
+      opt.value
+    )) })
+  ] });
+}
+Combobox.displayName = "Combobox";
+
+// src/components/ui/Autocomplete.tsx
+import { useState as useState12, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { jsx as jsx59, jsxs as jsxs50 } from "react/jsx-runtime";
+function Autocomplete(_a) {
+  var _b = _a, {
+    options,
+    onSelect,
+    className,
+    value: controlledValue,
+    onChange,
+    placeholder = "Type to search..."
+  } = _b, inputProps = __objRest(_b, [
+    "options",
+    "onSelect",
+    "className",
+    "value",
+    "onChange",
+    "placeholder"
+  ]);
+  const [open, setOpen] = useState12(false);
+  const [search, setSearch] = useState12("");
+  const [activeIndex, setActiveIndex] = useState12(-1);
+  const containerRef = useRef5(null);
+  const inputRef = useRef5(null);
+  const listRef = useRef5(null);
+  const filtered = options.filter(
+    (o) => o.label.toLowerCase().includes(search.toLowerCase())
+  );
+  const handleSelect = (opt) => {
+    setSearch(opt.label);
+    setOpen(false);
+    onSelect == null ? void 0 : onSelect(opt);
+  };
+  useEffect5(() => {
+    if (!open) {
+      setActiveIndex(-1);
+      return;
+    }
+    const handle = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "ArrowDown") {
+        setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+        e.preventDefault();
+      }
+      if (e.key === "ArrowUp") {
+        setActiveIndex((i) => Math.max(i - 1, 0));
+        e.preventDefault();
+      }
+      if (e.key === "Enter" && activeIndex >= 0) {
+        handleSelect(filtered[activeIndex]);
+        e.preventDefault();
+      }
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handle);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handle);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open, filtered, activeIndex]);
+  useEffect5(() => {
+    if (activeIndex >= 0 && listRef.current) {
+      const el = listRef.current.children[activeIndex];
+      el == null ? void 0 : el.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+  return /* @__PURE__ */ jsxs50("div", { ref: containerRef, className: cn("ph-autocomplete relative", className), children: [
+    /* @__PURE__ */ jsx59(
+      "input",
+      __spreadValues({
+        ref: inputRef,
+        type: "text",
+        value: search,
+        onChange: (e) => {
+          setSearch(e.target.value);
+          setOpen(true);
+          onChange == null ? void 0 : onChange(e);
+        },
+        onFocus: () => setOpen(true),
+        placeholder,
+        className: "ph-input w-full"
+      }, inputProps)
+    ),
+    open && filtered.length > 0 && /* @__PURE__ */ jsx59("div", { ref: listRef, className: "ph-autocomplete__dropdown", role: "listbox", children: filtered.map((opt, i) => /* @__PURE__ */ jsx59(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": i === activeIndex,
+        onMouseDown: () => handleSelect(opt),
+        onMouseEnter: () => setActiveIndex(i),
+        className: cn(
+          "ph-autocomplete__option",
+          i === activeIndex && "ph-autocomplete__option--active"
+        ),
+        children: opt.label
+      },
+      opt.value
+    )) })
+  ] });
+}
+Autocomplete.displayName = "Autocomplete";
+
+// src/components/ui/ContextMenu.tsx
+import { useState as useState13, useRef as useRef6, useEffect as useEffect6 } from "react";
+import { jsx as jsx60, jsxs as jsxs51 } from "react/jsx-runtime";
+function ContextMenu(_a) {
+  var _b = _a, { items, children, className } = _b, props = __objRest(_b, ["items", "children", "className"]);
+  const [open, setOpen] = useState13(false);
+  const [pos, setPos] = useState13({ x: 0, y: 0 });
+  const menuRef = useRef6(null);
+  useEffect6(() => {
+    if (!open) return;
+    const handle = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handle);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handle);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs51(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn("ph-context-menu", className),
+      onContextMenu: (e) => {
+        e.preventDefault();
+        setPos({ x: e.clientX, y: e.clientY });
+        setOpen(true);
+      }
+    }, props), {
+      children: [
+        children,
+        open && /* @__PURE__ */ jsx60(
+          "div",
+          {
+            ref: menuRef,
+            className: "ph-context-menu__panel",
+            style: { left: pos.x, top: pos.y },
+            children: items.map(
+              (item, i) => item.separator ? /* @__PURE__ */ jsx60("div", { className: "ph-context-menu__separator" }, i) : /* @__PURE__ */ jsxs51(
+                "button",
+                {
+                  type: "button",
+                  disabled: item.disabled,
+                  onClick: () => {
+                    var _a2;
+                    (_a2 = item.onClick) == null ? void 0 : _a2.call(item);
+                    setOpen(false);
+                  },
+                  className: "ph-context-menu__item",
+                  children: [
+                    item.icon && /* @__PURE__ */ jsx60("span", { className: "ph-context-menu__icon", children: item.icon }),
+                    /* @__PURE__ */ jsx60("span", { children: item.label })
+                  ]
+                },
+                i
+              )
+            )
+          }
+        )
+      ]
+    })
+  );
+}
+ContextMenu.displayName = "ContextMenu";
+
+// src/components/ui/Resizable.tsx
+import { useState as useState14, useRef as useRef7, useCallback } from "react";
+import { jsx as jsx61, jsxs as jsxs52 } from "react/jsx-runtime";
+function Resizable(_a) {
+  var _b = _a, {
+    left,
+    right,
+    defaultLeftWidth = 50,
+    minLeftWidth = 20,
+    minRightWidth = 20,
+    className
+  } = _b, props = __objRest(_b, [
+    "left",
+    "right",
+    "defaultLeftWidth",
+    "minLeftWidth",
+    "minRightWidth",
+    "className"
+  ]);
+  const [leftPercent, setLeftPercent] = useState14(defaultLeftWidth);
+  const dragging = useRef7(false);
+  const containerRef = useRef7(null);
+  const handleMouseDown = useCallback((e) => {
+    e.preventDefault();
+    dragging.current = true;
+    const startX = e.clientX;
+    const startPercent = leftPercent;
+    const handleMove = (ev) => {
+      if (!dragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const delta = (ev.clientX - startX) / rect.width * 100;
+      const newVal = Math.max(minLeftWidth, Math.min(100 - minRightWidth, startPercent + delta));
+      setLeftPercent(newVal);
+    };
+    const handleUp = () => {
+      dragging.current = false;
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleUp);
+    };
+    document.addEventListener("mousemove", handleMove);
+    document.addEventListener("mouseup", handleUp);
+  }, [leftPercent, minLeftWidth, minRightWidth]);
+  return /* @__PURE__ */ jsxs52(
+    "div",
+    __spreadProps(__spreadValues({
+      ref: containerRef,
+      className: cn("ph-resizable flex overflow-hidden", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx61("div", { className: "ph-resizable__left overflow-auto", style: { width: `${leftPercent}%` }, children: left }),
+        /* @__PURE__ */ jsx61(
+          "div",
+          {
+            className: "ph-resizable__handle cursor-col-resize shrink-0",
+            onMouseDown: handleMouseDown
+          }
+        ),
+        /* @__PURE__ */ jsx61("div", { className: "ph-resizable__right flex-1 overflow-auto", children: right })
+      ]
+    })
+  );
+}
+Resizable.displayName = "Resizable";
+
+// src/components/ui/ScrollArea.tsx
+import { useRef as useRef8, useState as useState15, useEffect as useEffect7 } from "react";
+import { jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
+function ScrollArea(_a) {
+  var _b = _a, {
+    children,
+    orientation = "vertical",
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "orientation",
+    "className"
+  ]);
+  const viewportRef = useRef8(null);
+  const [showTop, setShowTop] = useState15(false);
+  const [showBottom, setShowBottom] = useState15(false);
+  useEffect7(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    const update = () => {
+      setShowTop(el.scrollTop > 4);
+      setShowBottom(el.scrollTop < el.scrollHeight - el.clientHeight - 4);
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", update);
+      ro.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs53(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "ph-scroll-area relative overflow-hidden",
+        orientation === "horizontal" && "overflow-x-auto",
+        orientation === "both" && "overflow-auto",
+        className
+      )
+    }, props), {
+      children: [
+        showTop && /* @__PURE__ */ jsx62("div", { className: "ph-scroll-area__shadow-top" }),
+        /* @__PURE__ */ jsx62("div", { ref: viewportRef, className: "ph-scroll-area__viewport overflow-y-auto overscroll-contain", children }),
+        showBottom && /* @__PURE__ */ jsx62("div", { className: "ph-scroll-area__shadow-bottom" })
+      ]
+    })
+  );
+}
+ScrollArea.displayName = "ScrollArea";
+
+// src/components/ui/NumberField.tsx
+import { useState as useState16 } from "react";
+import { jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
+function NumberField(_a) {
+  var _b = _a, {
+    value: controlledValue,
+    onChange,
+    min,
+    max,
+    step = 1,
+    label,
+    className,
+    disabled,
+    defaultValue
+  } = _b, inputProps = __objRest(_b, [
+    "value",
+    "onChange",
+    "min",
+    "max",
+    "step",
+    "label",
+    "className",
+    "disabled",
+    "defaultValue"
+  ]);
+  const [internal, setInternal] = useState16(controlledValue != null ? controlledValue : 0);
+  const value = controlledValue != null ? controlledValue : internal;
+  const set = (v) => {
+    const clamped = Math.max(min != null ? min : -Infinity, Math.min(max != null ? max : Infinity, v));
+    setInternal(clamped);
+    onChange == null ? void 0 : onChange(clamped);
+  };
+  return /* @__PURE__ */ jsxs54("div", { className: cn("ph-number-field", className), children: [
+    label && /* @__PURE__ */ jsx63("label", { className: "ph-label", children: label }),
+    /* @__PURE__ */ jsxs54("div", { className: "ph-number-field__control", children: [
+      /* @__PURE__ */ jsx63(
+        "button",
+        {
+          type: "button",
+          disabled: disabled || min !== void 0 && value <= min,
+          onClick: () => set(value - step),
+          className: "ph-number-field__btn",
+          "aria-label": "Decrease",
+          children: /* @__PURE__ */ jsx63("svg", { width: "12", height: "2", viewBox: "0 0 12 2", fill: "currentColor", children: /* @__PURE__ */ jsx63("rect", { y: "0", width: "12", height: "2", rx: "1" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx63(
+        "input",
+        __spreadValues({
+          type: "number",
+          value,
+          onChange: (e) => set(Number(e.target.value)),
+          disabled,
+          min,
+          max,
+          step,
+          className: "ph-number-field__input"
+        }, inputProps)
+      ),
+      /* @__PURE__ */ jsx63(
+        "button",
+        {
+          type: "button",
+          disabled: disabled || max !== void 0 && value >= max,
+          onClick: () => set(value + step),
+          className: "ph-number-field__btn",
+          "aria-label": "Increase",
+          children: /* @__PURE__ */ jsx63("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx63("path", { d: "M6 2v8M2 6h8" }) })
+        }
+      )
+    ] })
+  ] });
+}
+NumberField.displayName = "NumberField";
+
+// src/components/ui/InputGroup.tsx
+import { jsx as jsx64 } from "react/jsx-runtime";
+function InputGroup(_a) {
+  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx64("div", __spreadProps(__spreadValues({ className: cn("ph-input-group", className) }, props), { children }));
+}
+InputGroup.displayName = "InputGroup";
+
+// src/components/ui/ButtonGroup.tsx
+import { jsx as jsx65 } from "react/jsx-runtime";
+function ButtonGroup(_a) {
+  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx65("div", __spreadProps(__spreadValues({ className: cn("ph-btn-group", className) }, props), { children }));
+}
+ButtonGroup.displayName = "ButtonGroup";
+
+// src/components/ui/Toggle.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx66, jsxs as jsxs55 } from "react/jsx-runtime";
+var ToggleButton = forwardRef12(function ToggleButton2(_a, ref) {
+  var _b = _a, {
+    pressed = false,
+    onPressedChange,
+    icon,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "pressed",
+    "onPressedChange",
+    "icon",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs55(
+    "button",
+    __spreadProps(__spreadValues({
+      ref,
+      type: "button",
+      "aria-pressed": pressed,
+      onClick: () => onPressedChange == null ? void 0 : onPressedChange(!pressed),
+      className: cn(
+        "ph-toggle-btn",
+        pressed && "ph-toggle-btn--pressed",
+        className
+      )
+    }, props), {
+      children: [
+        icon && /* @__PURE__ */ jsx66("span", { className: "ph-toggle-btn__icon", children: icon }),
+        children
+      ]
+    })
+  );
+});
+ToggleButton.displayName = "ToggleButton";
+function ToggleGroup({
+  type = "single",
+  value,
+  onValueChange,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx66("div", { className: cn("ph-toggle-group", className), role: "group", children });
+}
+ToggleGroup.displayName = "ToggleGroup";
+
+// src/components/ui/Menubar.tsx
+import { useState as useState17, useRef as useRef9, useEffect as useEffect8 } from "react";
+import { jsx as jsx67, jsxs as jsxs56 } from "react/jsx-runtime";
+function Menubar(_a) {
+  var _b = _a, { items, className } = _b, props = __objRest(_b, ["items", "className"]);
+  const [openIndex, setOpenIndex] = useState17(-1);
+  const barRef = useRef9(null);
+  useEffect8(() => {
+    if (openIndex < 0) return;
+    const handle = (e) => {
+      if (barRef.current && !barRef.current.contains(e.target)) {
+        setOpenIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [openIndex]);
+  return /* @__PURE__ */ jsx67("div", __spreadProps(__spreadValues({ ref: barRef, className: cn("ph-menubar", className) }, props), { children: items.map((item, i) => /* @__PURE__ */ jsxs56("div", { className: "ph-menubar__item", children: [
+    /* @__PURE__ */ jsx67(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpenIndex(openIndex === i ? -1 : i),
+        className: cn("ph-menubar__trigger", openIndex === i && "ph-menubar__trigger--open"),
+        children: item.label
+      }
+    ),
+    openIndex === i && item.items && /* @__PURE__ */ jsx67("div", { className: "ph-menubar__dropdown", children: item.items.map(
+      (sub, j) => sub.separator ? /* @__PURE__ */ jsx67("div", { className: "ph-menubar__separator" }, j) : /* @__PURE__ */ jsx67(
+        "button",
+        {
+          type: "button",
+          disabled: sub.disabled,
+          onClick: () => {
+            var _a2;
+            (_a2 = sub.onClick) == null ? void 0 : _a2.call(sub);
+            setOpenIndex(-1);
+          },
+          className: "ph-menubar__sub-item",
+          children: sub.label
+        },
+        j
+      )
+    ) })
+  ] }, i)) }));
+}
+Menubar.displayName = "Menubar";
+
+// src/components/ui/AlertDialog.tsx
+import { useState as useState18 } from "react";
+import { jsx as jsx68, jsxs as jsxs57 } from "react/jsx-runtime";
+function AlertDialog(_a) {
+  var _b = _a, {
+    isOpen: openProp,
+    onClose,
+    onConfirm,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    confirmProps,
+    cancelProps,
+    children,
+    title
+  } = _b, modalProps = __objRest(_b, [
+    "isOpen",
+    "onClose",
+    "onConfirm",
+    "confirmText",
+    "cancelText",
+    "confirmProps",
+    "cancelProps",
+    "children",
+    "title"
+  ]);
+  const [loading, setLoading] = useState18(false);
+  const isOpen = openProp != null ? openProp : true;
+  const handleConfirm = async () => {
+    if (!onConfirm) return;
+    setLoading(true);
+    try {
+      await onConfirm();
+    } finally {
+      setLoading(false);
+    }
+    onClose == null ? void 0 : onClose();
+  };
+  return /* @__PURE__ */ jsx68(
+    Modal,
+    __spreadProps(__spreadValues({
+      open: isOpen,
+      onClose,
+      title,
+      footer: /* @__PURE__ */ jsxs57("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx68(Button, __spreadProps(__spreadValues({ variant: "secondary" }, cancelProps), { onClick: onClose, children: cancelText })),
+        onConfirm && /* @__PURE__ */ jsx68(Button, __spreadProps(__spreadValues({ variant: "primary", loading }, confirmProps), { onClick: handleConfirm, children: confirmText }))
+      ] })
+    }, modalProps), {
+      children
+    })
+  );
+}
+AlertDialog.displayName = "AlertDialog";
+
+// src/components/ui/Dot.tsx
+import { jsx as jsx69 } from "react/jsx-runtime";
+var colorMap2 = {
+  green: "bg-ph-success",
+  yellow: "bg-ph-warning",
+  red: "bg-ph-danger",
+  blue: "bg-ph-info",
+  gray: "bg-ph-mutedtext"
+};
+function Dot(_a) {
+  var _b = _a, { color = "gray", size = "md", className } = _b, props = __objRest(_b, ["color", "size", "className"]);
+  return /* @__PURE__ */ jsx69(
+    "span",
+    __spreadValues({
+      className: cn(
+        "ph-dot inline-block shrink-0 rounded-full",
+        size === "sm" ? "h-1.5 w-1.5" : "h-2.5 w-2.5",
+        colorMap2[color],
+        className
+      ),
+      "aria-hidden": "true"
+    }, props)
+  );
+}
+Dot.displayName = "Dot";
+
+// src/components/ui/Collapsible.tsx
+import { useState as useState19 } from "react";
+import { jsx as jsx70, jsxs as jsxs58 } from "react/jsx-runtime";
+function Collapsible(_a) {
+  var _b = _a, {
+    trigger,
+    open: controlledOpen,
+    onOpenChange,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "trigger",
+    "open",
+    "onOpenChange",
+    "children",
+    "className"
+  ]);
+  const [internalOpen, setInternalOpen] = useState19(false);
+  const isOpen = controlledOpen != null ? controlledOpen : internalOpen;
+  const setOpen = onOpenChange != null ? onOpenChange : setInternalOpen;
+  return /* @__PURE__ */ jsxs58("div", __spreadProps(__spreadValues({ className: cn("ph-collapsible", className) }, props), { children: [
+    /* @__PURE__ */ jsxs58(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!isOpen),
+        className: "ph-collapsible__trigger",
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsx70(
+            "svg",
+            {
+              className: cn("ph-collapsible__chevron", isOpen && "ph-collapsible__chevron--open"),
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              children: /* @__PURE__ */ jsx70("path", { d: "M4 5l3 3 3-3" })
+            }
+          ),
+          trigger
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx70("div", { className: "ph-collapsible__content", children })
+  ] }));
+}
+Collapsible.displayName = "Collapsible";
+
+// src/components/ui/Metric.tsx
+import { jsx as jsx71, jsxs as jsxs59 } from "react/jsx-runtime";
+function Metric(_a) {
+  var _b = _a, {
+    value,
+    label,
+    badge,
+    trend,
+    icon,
+    className
+  } = _b, props = __objRest(_b, [
+    "value",
+    "label",
+    "badge",
+    "trend",
+    "icon",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs59("div", __spreadProps(__spreadValues({ className: cn("ph-metric", className) }, props), { children: [
+    /* @__PURE__ */ jsxs59("div", { className: "ph-metric__header", children: [
+      icon && /* @__PURE__ */ jsx71("span", { className: "ph-metric__icon", children: icon }),
+      /* @__PURE__ */ jsx71("span", { className: "ph-metric__label", children: label }),
+      badge && /* @__PURE__ */ jsx71("span", { className: "ph-metric__badge", children: badge })
+    ] }),
+    /* @__PURE__ */ jsx71("div", { className: "ph-metric__value", children: value }),
+    trend && /* @__PURE__ */ jsx71("div", { className: "ph-metric__trend", children: trend })
+  ] }));
+}
+Metric.displayName = "Metric";
+
+// src/components/ui/Chip.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx72, jsxs as jsxs60 } from "react/jsx-runtime";
+var Chip = forwardRef13(function Chip2(_a, ref) {
+  var _b = _a, {
+    selected = false,
+    onRemove,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "selected",
+    "onRemove",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs60(
+    "button",
+    __spreadProps(__spreadValues({
+      ref,
+      type: "button",
+      className: cn(
+        "ph-chip",
+        selected && "ph-chip--selected",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx72("span", { className: "ph-chip__text", children }),
+        onRemove && /* @__PURE__ */ jsx72(
+          "span",
+          {
+            role: "button",
+            tabIndex: -1,
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            className: "ph-chip__remove",
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsx72("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx72("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+          }
+        )
+      ]
+    })
+  );
+});
+Chip.displayName = "Chip";
+
+// src/components/ui/DataTable.tsx
+import { useState as useState20, useMemo } from "react";
+import { jsx as jsx73, jsxs as jsxs61 } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  data,
+  pageSize = 10,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  className
+}) {
+  const [search, setSearch] = useState20("");
+  const [sortKey, setSortKey] = useState20(null);
+  const [sortDir, setSortDir] = useState20("asc");
+  const [page, setPage] = useState20(0);
+  const filtered = useMemo(() => {
+    let items = data;
+    if (search) {
+      const q = search.toLowerCase();
+      items = items.filter(
+        (item) => Object.values(item).some((v) => String(v).toLowerCase().includes(q))
+      );
+    }
+    if (sortKey) {
+      items = [...items].sort((a, b) => {
+        const av = a[sortKey];
+        const bv = b[sortKey];
+        const cmp = av < bv ? -1 : av > bv ? 1 : 0;
+        return sortDir === "asc" ? cmp : -cmp;
+      });
+    }
+    return items;
+  }, [data, search, sortKey, sortDir]);
+  const totalPages = Math.ceil(filtered.length / pageSize);
+  const paged = filtered.slice(page * pageSize, (page + 1) * pageSize);
+  const handleSort = (key) => {
+    if (sortKey === key) {
+      setSortDir((d) => d === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  };
+  return /* @__PURE__ */ jsxs61("div", { className: cn("ph-data-table", className), children: [
+    searchable && /* @__PURE__ */ jsx73("div", { className: "ph-data-table__toolbar", children: /* @__PURE__ */ jsx73(
+      "input",
+      {
+        type: "text",
+        value: search,
+        onChange: (e) => {
+          setSearch(e.target.value);
+          setPage(0);
+        },
+        placeholder: searchPlaceholder,
+        className: "ph-input ph-input-sm"
+      }
+    ) }),
+    /* @__PURE__ */ jsx73("div", { className: "ph-table-wrap", children: /* @__PURE__ */ jsxs61("table", { className: "ph-table", children: [
+      /* @__PURE__ */ jsx73("thead", { children: /* @__PURE__ */ jsx73("tr", { children: columns.map((col) => /* @__PURE__ */ jsxs61(
+        "th",
+        {
+          className: cn(col.sortable && "cursor-pointer select-none", col.className),
+          onClick: () => col.sortable && handleSort(col.key),
+          children: [
+            col.label,
+            sortKey === col.key && /* @__PURE__ */ jsx73("span", { className: "ml-1 inline-block", children: sortDir === "asc" ? "\u2191" : "\u2193" })
+          ]
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsxs61("tbody", { children: [
+        paged.map((item, i) => /* @__PURE__ */ jsx73("tr", { children: columns.map((col) => /* @__PURE__ */ jsx73("td", { className: col.className, children: col.render ? col.render(item) : item[col.key] }, col.key)) }, i)),
+        paged.length === 0 && /* @__PURE__ */ jsx73("tr", { children: /* @__PURE__ */ jsx73("td", { colSpan: columns.length, className: "text-center text-ph-mutedtext py-8", children: "No results" }) })
+      ] })
+    ] }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxs61("div", { className: "ph-data-table__pagination", children: [
+      /* @__PURE__ */ jsx73("button", { disabled: page === 0, onClick: () => setPage((p) => p - 1), className: "ph-data-table__page-btn", children: "Previous" }),
+      /* @__PURE__ */ jsxs61("span", { className: "text-xs text-ph-mutedtext", children: [
+        "Page ",
+        page + 1,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx73("button", { disabled: page >= totalPages - 1, onClick: () => setPage((p) => p + 1), className: "ph-data-table__page-btn", children: "Next" })
+    ] })
+  ] });
+}
+DataTable.displayName = "DataTable";
+
+// src/components/ui/DatePicker.tsx
+import { useState as useState21, useMemo as useMemo2 } from "react";
+import { jsx as jsx74, jsxs as jsxs62 } from "react/jsx-runtime";
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function DatePicker(_a) {
+  var _b = _a, { value, onChange, className } = _b, props = __objRest(_b, ["value", "onChange", "className"]);
+  const [open, setOpen] = useState21(false);
+  const [viewDate, setViewDate] = useState21(value != null ? value : /* @__PURE__ */ new Date());
+  const selected = value;
+  const days = useMemo2(() => {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const first = new Date(year, month, 1).getDay();
+    const last = new Date(year, month + 1, 0).getDate();
+    const prevLast = new Date(year, month, 0).getDate();
+    const cells = [];
+    for (let i = first - 1; i >= 0; i--) cells.push({ day: prevLast - i, month: "prev" });
+    for (let d = 1; d <= last; d++) cells.push({ day: d, month: "current" });
+    const remaining = 42 - cells.length;
+    for (let d = 1; d <= remaining; d++) cells.push({ day: d, month: "next" });
+    return cells;
+  }, [viewDate]);
+  const isSelected = (d, m) => {
+    if (!selected || m !== "current") return false;
+    const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);
+    return date.toDateString() === selected.toDateString();
+  };
+  const selectDay = (d, m) => {
+    const month = m === "prev" ? viewDate.getMonth() - 1 : m === "next" ? viewDate.getMonth() + 1 : viewDate.getMonth();
+    const year = month < 0 ? viewDate.getFullYear() - 1 : month > 11 ? viewDate.getFullYear() + 1 : viewDate.getFullYear();
+    const adjustedMonth = (month % 12 + 12) % 12;
+    const date = new Date(year, adjustedMonth, d);
+    onChange == null ? void 0 : onChange(date);
+    setOpen(false);
+  };
+  const nav = (delta) => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + delta, 1));
+  return /* @__PURE__ */ jsxs62("div", { className: cn("ph-datepicker relative", className), children: [
+    /* @__PURE__ */ jsx74(
+      "input",
+      __spreadValues({
+        type: "text",
+        readOnly: true,
+        value: selected ? `${MONTHS[selected.getMonth()]} ${selected.getDate()}, ${selected.getFullYear()}` : "",
+        onFocus: () => setOpen(true),
+        placeholder: "Pick a date",
+        className: "ph-input w-full cursor-pointer"
+      }, props)
+    ),
+    open && /* @__PURE__ */ jsxs62("div", { className: "ph-datepicker__dropdown", children: [
+      /* @__PURE__ */ jsxs62("div", { className: "ph-datepicker__nav", children: [
+        /* @__PURE__ */ jsx74("button", { type: "button", onClick: () => nav(-1), className: "ph-datepicker__nav-btn", "aria-label": "Previous month", children: /* @__PURE__ */ jsx74("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx74("path", { d: "M7 3L4 6l3 3" }) }) }),
+        /* @__PURE__ */ jsxs62("span", { className: "ph-datepicker__nav-label", children: [
+          MONTHS[viewDate.getMonth()],
+          " ",
+          viewDate.getFullYear()
+        ] }),
+        /* @__PURE__ */ jsx74("button", { type: "button", onClick: () => nav(1), className: "ph-datepicker__nav-btn", "aria-label": "Next month", children: /* @__PURE__ */ jsx74("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx74("path", { d: "M5 3l3 3-3 3" }) }) })
+      ] }),
+      /* @__PURE__ */ jsxs62("div", { className: "ph-datepicker__grid", children: [
+        DAYS.map((d) => /* @__PURE__ */ jsx74("div", { className: "ph-datepicker__day-header", children: d }, d)),
+        days.map((d, i) => /* @__PURE__ */ jsx74(
+          "button",
+          {
+            type: "button",
+            disabled: d.month !== "current",
+            onClick: () => selectDay(d.day, d.month),
+            className: cn(
+              "ph-datepicker__day",
+              d.month !== "current" && "ph-datepicker__day--other",
+              isSelected(d.day, d.month) && "ph-datepicker__day--selected"
+            ),
+            children: d.day
+          },
+          i
+        ))
+      ] })
+    ] })
+  ] });
+}
+DatePicker.displayName = "DatePicker";
+
+// src/components/ui/AppLayout.tsx
+import { jsx as jsx75, jsxs as jsxs63 } from "react/jsx-runtime";
+function AppLayout({ sidebar, children, sidebarWidth = 240, className }) {
+  return /* @__PURE__ */ jsxs63(
+    "div",
+    {
+      className: cn("ph-app-layout grid min-h-screen", className),
+      style: { gridTemplateColumns: `${sidebarWidth}px minmax(0, 1fr)` },
+      children: [
+        /* @__PURE__ */ jsx75("aside", { className: "ph-app-layout__sidebar border-r border-ph-border bg-ph-surface overflow-y-auto", children: sidebar }),
+        /* @__PURE__ */ jsx75("main", { className: "ph-app-layout__content min-w-0 overflow-y-auto bg-ph-canvas", children })
+      ]
+    }
+  );
+}
+
+// src/components/ui/Sidebar.tsx
+import { jsx as jsx76, jsxs as jsxs64 } from "react/jsx-runtime";
+function Sidebar({ groups, className, header, footer, children, collapsed = false, onCollapse }) {
+  return /* @__PURE__ */ jsxs64("nav", { className: cn("ph-sidebar flex flex-col h-full", collapsed && "ph-sidebar--collapsed", className), children: [
+    header && /* @__PURE__ */ jsx76("div", { className: "ph-sidebar__header px-3 py-3 border-b border-ph-border-subtle", children: header }),
+    /* @__PURE__ */ jsx76("div", { className: "ph-sidebar__body flex-1 overflow-y-auto px-2 py-3 space-y-5", children: groups.map((group) => {
+      var _a;
+      return /* @__PURE__ */ jsxs64("div", { className: "ph-sidebar__group", children: [
+        group.label && !collapsed && /* @__PURE__ */ jsx76("h3", { className: "ph-sidebar__group-label px-2 mb-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext", children: group.label }),
+        /* @__PURE__ */ jsx76("div", { className: "ph-sidebar__items space-y-0.5", children: group.items.map((item) => /* @__PURE__ */ jsx76(SidebarItem, __spreadProps(__spreadValues({}, item), { collapsed }), item.label)) })
+      ] }, (_a = group.label) != null ? _a : "default");
+    }) }),
+    children,
+    footer && /* @__PURE__ */ jsx76("div", { className: "ph-sidebar__footer px-3 py-3 border-t border-ph-border-subtle", children: footer })
+  ] });
+}
+function SidebarItem({ label, icon, badge, active, href, onClick, collapsed }) {
+  const Comp = onClick ? "button" : "a";
+  return /* @__PURE__ */ jsxs64(
+    Comp,
+    {
+      type: onClick ? "button" : void 0,
+      href: onClick ? void 0 : href,
+      onClick,
+      className: cn(
+        "ph-sidebar__item flex items-center gap-2.5 w-full rounded-md px-2.5 py-2 text-sm text-left transition",
+        active ? "bg-ph-selected-bg text-ph-selected-text font-medium" : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
+        collapsed && "justify-center px-2"
+      ),
+      title: collapsed ? label : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx76("span", { className: cn("ph-sidebar__item-icon shrink-0 flex items-center justify-center", collapsed ? "w-5 h-5" : "w-4 h-4"), children: icon }),
+        !collapsed && /* @__PURE__ */ jsx76("span", { className: "ph-sidebar__item-label truncate flex-1", children: label }),
+        !collapsed && badge && /* @__PURE__ */ jsx76("span", { className: "ph-sidebar__item-badge shrink-0", children: badge })
+      ]
+    }
+  );
+}
+Sidebar.displayName = "Sidebar";
+
+export {
+  Button,
+  Alert,
+  Badge,
+  Card,
+  Drawer,
+  Kbd,
+  Loader,
+  Skeleton,
+  LoadingState,
+  AuthLayout,
+  AuthCard,
+  AuthDivider,
+  SettingsNav,
+  SettingsLayout,
+  FormField,
+  Input,
+  Select,
+  Textarea,
+  Checkbox,
+  Radio,
+  Toggle,
+  Range,
+  FileUpload,
+  Modal,
+  Breadcrumbs,
+  Pagination,
+  Panel,
+  Rating,
+  SearchInput,
+  SearchGroup,
+  Table,
+  Stat,
+  Toast,
+  ToastStack,
+  Tabs,
+  DEFAULT_THEME_ID,
+  THEMES,
+  THEME_GROUPS,
+  isThemeId,
+  getTheme,
+  THEME_INIT_SCRIPT,
+  persistTheme,
+  readStoredTheme,
+  ThemeDomSync,
+  ThemeManager,
+  ThemeSwitcher,
+  Accordion,
+  Stepper,
+  SegmentedControl,
+  CommandPalette,
+  Calendar,
+  HoverCard,
+  EmptyState,
+  FilterChips,
+  FilterBar,
+  FilterMenu,
+  SortMenu,
+  FilterControls,
+  CodeBlock,
+  ComponentDocs,
+  ShowcaseWrapper,
+  CollapsibleSection,
+  Display,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  P,
+  Small,
+  Caption,
+  Overline,
+  Lead,
+  Mono,
+  Label,
+  Avatar,
+  AvatarGroup,
+  Progress,
+  ChatBubble,
+  Terminal,
+  Indicator,
+  Timeline,
+  Banner,
+  Dialog2 as Dialog,
+  Divider,
+  Tag,
+  ProgressCircle,
+  Row,
+  Widget,
+  Lettermark,
+  Splotch,
+  Popover,
+  LoadingBar,
+  Link,
+  Spinner,
+  Snack,
+  Combobox,
+  Autocomplete,
+  ContextMenu,
+  Resizable,
+  ScrollArea,
+  NumberField,
+  InputGroup,
+  ButtonGroup,
+  ToggleButton,
+  ToggleGroup,
+  Menubar,
+  AlertDialog,
+  Dot,
+  Collapsible,
+  Metric,
+  Chip,
+  DataTable,
+  DatePicker,
+  AppLayout,
+  Sidebar
+};