@xenide-io/the-old-ui-theme 0.5.4 → 0.6.0

package/dist/chunk-3G43JEI3.mjs

@@ -0,0 +1,2564 @@
+import {
+  ButtonChrome,
+  DropdownMenu,
+  DropdownRadioGroup,
+  DropdownRadioItem,
+  IconArrowDown,
+  IconCancel,
+  IconCheck,
+  IconCheckCircle,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconClose,
+  IconCodePreview,
+  IconExclamation,
+  IconInfo,
+  IconSearch,
+  IconTuning,
+  cn
+} from "./chunk-E5ZBQYEX.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/Kbd.tsx
+import { jsx as jsx5, jsxs as jsxs4 } 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__ */ jsx5("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__ */ jsx5("kbd", __spreadProps(__spreadValues({ className: cn("ph-keycap", className), "aria-label": accessibleLabel }, props), { children: displayKeys[0] }));
+  }
+  return /* @__PURE__ */ jsx5("kbd", __spreadProps(__spreadValues({ className: cn("ph-shortcut-group ph-keycap", className), "aria-label": accessibleLabel }, props), { children: displayKeys.map((key, index) => /* @__PURE__ */ jsxs4("span", { className: "contents", children: [
+    index > 0 && separator != null ? /* @__PURE__ */ jsx5("span", { className: "ph-shortcut-separator", "aria-hidden": "true", children: separator }) : null,
+    /* @__PURE__ */ jsx5("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 jsx6, jsxs as jsxs5 } 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__ */ jsxs5(
+    "span",
+    __spreadProps(__spreadValues({
+      role: "status",
+      "aria-label": label,
+      className: cn("ph-loader", loaderSizeClass[size], className)
+    }, props), {
+      children: [
+        variant === "spinner" ? /* @__PURE__ */ jsx6("span", { className: "ph-loading", "aria-hidden": true }) : null,
+        variant === "dots" ? /* @__PURE__ */ jsxs5("span", { className: "ph-loading-dots", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx6("span", {}),
+          /* @__PURE__ */ jsx6("span", {}),
+          /* @__PURE__ */ jsx6("span", {})
+        ] }) : null,
+        variant === "pulse" ? /* @__PURE__ */ jsx6("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__ */ jsx6(
+    "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__ */ jsxs5("div", __spreadProps(__spreadValues({ className: cn("ph-loading-state", className), role: "status", "aria-label": label }, props), { children: [
+    /* @__PURE__ */ jsx6(Loader, { variant, size, label, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs5("div", { className: "ph-loading-state__copy", children: [
+      /* @__PURE__ */ jsx6("strong", { children: title }),
+      description ? /* @__PURE__ */ jsx6("span", { children: description }) : null
+    ] })
+  ] }));
+}
+
+// src/components/ui/AuthLayout.tsx
+import { useId } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } 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__ */ jsxs6("div", __spreadProps(__spreadValues({ className: cn("ph-auth-layout", aside != null && "ph-auth-layout--split", className) }, props), { children: [
+    aside ? /* @__PURE__ */ jsx7("aside", { className: "ph-auth-layout__aside", children: aside }) : null,
+    /* @__PURE__ */ jsx7("div", { className: "ph-auth-layout__main", children: /* @__PURE__ */ jsxs6("div", { className: "ph-auth-layout__column", children: [
+      brand ? /* @__PURE__ */ jsx7("div", { className: "ph-auth-layout__brand", children: brand }) : null,
+      children,
+      footer ? /* @__PURE__ */ jsx7("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__ */ jsxs6("section", __spreadProps(__spreadValues({ className: cn("ph-auth-card", className), "aria-labelledby": titleId }, props), { children: [
+    /* @__PURE__ */ jsxs6("header", { className: "ph-auth-card__header", children: [
+      /* @__PURE__ */ jsx7("h1", { id: titleId, children: title }),
+      description ? /* @__PURE__ */ jsx7("p", { children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "ph-auth-card__body", children }),
+    footer ? /* @__PURE__ */ jsx7("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__ */ jsx7("div", __spreadProps(__spreadValues({ className: cn("ph-auth-divider", className) }, props), { children: /* @__PURE__ */ jsx7("span", { children }) }));
+}
+
+// src/components/ui/SettingsLayout.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function SettingsNav(_a) {
+  var _b = _a, { groups, className } = _b, props = __objRest(_b, ["groups", "className"]);
+  return /* @__PURE__ */ jsx8("div", __spreadProps(__spreadValues({ className: cn("ph-settings-nav", className) }, props), { children: groups.map((group, index) => /* @__PURE__ */ jsxs7("div", { className: "ph-settings-nav__group", children: [
+    /* @__PURE__ */ jsx8("h3", { children: group.label }),
+    /* @__PURE__ */ jsx8("div", { className: "ph-settings-nav__items", children: group.items.map((item) => /* @__PURE__ */ jsxs7(
+      "a",
+      {
+        href: item.href,
+        id: `settings-nav-${item.id}`,
+        "data-test": `settings-nav-${item.id}`,
+        className: cn(
+          "ph-settings-nav__item",
+          item.active && "ph-settings-nav__item--active"
+        ),
+        "aria-current": item.active ? "page" : void 0,
+        children: [
+          item.icon ? /* @__PURE__ */ jsx8("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
+          /* @__PURE__ */ jsx8("span", { children: item.label }),
+          item.badge ? /* @__PURE__ */ jsx8("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__ */ jsxs7("section", __spreadProps(__spreadValues({ className: cn("ph-settings-layout", className) }, props), { children: [
+    /* @__PURE__ */ jsxs7("header", { className: "ph-settings-layout__header", children: [
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx8("h2", { children: title }),
+        description ? /* @__PURE__ */ jsx8("p", { children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsx8("div", { className: "ph-settings-layout__actions", children: actions }) : null
+    ] }),
+    /* @__PURE__ */ jsxs7("details", { className: "ph-settings-layout__mobile-nav", children: [
+      /* @__PURE__ */ jsxs7("summary", { children: [
+        /* @__PURE__ */ jsx8(IconTuning, { className: "h-4 w-4", "aria-hidden": true }),
+        "Settings menu"
+      ] }),
+      /* @__PURE__ */ jsx8("nav", { "aria-label": navigationLabel, children: navigation })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "ph-settings-layout__grid", children: [
+      /* @__PURE__ */ jsx8("aside", { className: "ph-settings-layout__sidebar", children: /* @__PURE__ */ jsx8("nav", { "aria-label": navigationLabel, children: navigation }) }),
+      /* @__PURE__ */ jsx8("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 jsx9, jsxs as jsxs8 } 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__ */ jsxs8("div", __spreadProps(__spreadValues({ className: cn("ph-field", className) }, props), { children: [
+    label ? /* @__PURE__ */ jsxs8(
+      "label",
+      {
+        htmlFor: id,
+        className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
+        children: [
+          label,
+          required ? /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: " *" }) : null
+        ]
+      }
+    ) : null,
+    typeof children === "function" ? children(controlProps) : children,
+    descriptionId ? /* @__PURE__ */ jsx9("p", { id: descriptionId, className: "mt-1 text-xs text-ph-subtle", children: helperText }) : null,
+    errorId ? /* @__PURE__ */ jsx9("p", { id: errorId, className: "mt-1 text-xs font-medium text-ph-danger", children: error }) : null
+  ] }));
+}
+
+// src/components/ui/Input.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var sizeMap2 = {
+  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__ */ jsx10(
+    FormField,
+    {
+      controlId: id,
+      label,
+      hideLabel,
+      helperText,
+      error,
+      required,
+      disabled,
+      className: wrapperClassName,
+      children: (fieldProps) => /* @__PURE__ */ jsx10(
+        "input",
+        __spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
+          ref,
+          disabled,
+          required,
+          "aria-describedby": joinIds(ariaDescribedBy, fieldProps["aria-describedby"]),
+          className: cn(
+            "ph-input w-full",
+            sizeMap2[size],
+            variant === "ghost" && "ph-input-ghost",
+            hasError && "ph-input-error",
+            disabled && "cursor-not-allowed opacity-60",
+            className
+          )
+        }), props)
+      )
+    }
+  );
+});
+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__ */ jsx10(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ jsx10(
+    "select",
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
+      ref,
+      disabled,
+      required,
+      "aria-describedby": joinIds(ariaDescribedBy, fieldProps["aria-describedby"]),
+      className: cn(
+        "ph-select w-full",
+        sizeMap2[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__ */ jsx10(FormField, { controlId: id, label, hideLabel, helperText, error, required, disabled, className: wrapperClassName, children: (fieldProps) => /* @__PURE__ */ jsx10(
+    "textarea",
+    __spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
+      ref,
+      disabled,
+      required,
+      "aria-describedby": joinIds(ariaDescribedBy, fieldProps["aria-describedby"]),
+      className: cn(
+        "ph-textarea w-full",
+        sizeMap2[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__ */ jsxs9("div", { className: cn("ph-control-row", wrapperClassName), children: [
+    /* @__PURE__ */ jsxs9("span", { className: "ph-checkbox-wrap", children: [
+      /* @__PURE__ */ jsx10(
+        "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__ */ jsx10(IconCheck, { className: "ph-checkbox-icon", "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "ph-control-copy", children: [
+      /* @__PURE__ */ jsx10("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
+      descriptionId ? /* @__PURE__ */ jsx10("p", { id: descriptionId, className: "text-xs text-ph-subtle", children: helperText }) : null,
+      errorId ? /* @__PURE__ */ jsx10("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__ */ jsxs9("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ jsx10(
+      "input",
+      __spreadValues({
+        ref,
+        id,
+        type: "radio",
+        disabled,
+        className: cn("ph-radio", disabled && "cursor-not-allowed", className)
+      }, props)
+    ),
+    /* @__PURE__ */ jsx10("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__ */ jsxs9("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
+    /* @__PURE__ */ jsx10("span", { className: disabled ? "opacity-60" : void 0, children: label }),
+    /* @__PURE__ */ jsx10(
+      "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__ */ jsxs9("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ jsx10("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ jsx10("input", __spreadValues({ ref, id, type: "range", className: cn("ph-range", className) }, props)),
+    (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
+      /* @__PURE__ */ jsx10("span", { children: minLabel }),
+      /* @__PURE__ */ jsx10("span", { children: valueLabel }),
+      /* @__PURE__ */ jsx10("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__ */ jsxs9("div", { className: cn("ph-field", wrapperClassName), children: [
+    label && /* @__PURE__ */ jsx10("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ jsxs9("label", { htmlFor: id, className: "ph-file-upload", children: [
+      /* @__PURE__ */ jsx10("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 { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var sizeMap3 = {
+  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,
+  customLayout = false,
+  showCloseButton = true,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
+  dataTest,
+  panelDataTest,
+  zIndex,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const canDismiss = Boolean(onClose);
+  const restoreFocusRef = useRef(null);
+  return /* @__PURE__ */ jsx11(
+    Dialog.Root,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) onClose == null ? void 0 : onClose();
+      },
+      children: /* @__PURE__ */ jsxs10(Dialog.Portal, { children: [
+        /* @__PURE__ */ jsx11(
+          Dialog.Overlay,
+          {
+            "data-test": dataTest,
+            className: "ph-modal-overlay",
+            style: zIndex ? { zIndex } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          Dialog.Content,
+          __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
+            id,
+            "data-test": panelDataTest,
+            className: cn("ph-modal-panel", sizeMap3[size], className)
+          }, ariaLabel ? { "aria-label": ariaLabel } : {}), ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {}), {
+            style: zIndex ? { zIndex } : void 0
+          }), 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: customLayout ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
+              /* @__PURE__ */ jsx11(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
+              children
+            ] }) : /* @__PURE__ */ jsxs10(Fragment2, { children: [
+              title ? null : /* @__PURE__ */ jsx11(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
+              title || description || showCloseButton && canDismiss ? /* @__PURE__ */ jsxs10("header", { className: "ph-modal-header", children: [
+                /* @__PURE__ */ jsxs10("div", { className: "min-w-0", children: [
+                  title ? /* @__PURE__ */ jsx11(Dialog.Title, { className: "text-lg font-bold text-ph-ink", children: title }) : null,
+                  description ? /* @__PURE__ */ jsx11(Dialog.Description, { className: "mt-1 text-sm text-ph-subtle", children: description }) : null
+                ] }),
+                showCloseButton && canDismiss ? /* @__PURE__ */ jsx11(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ph-modal-close",
+                    "aria-label": "Close dialog",
+                    children: /* @__PURE__ */ jsx11(IconClose, { className: "h-5 w-5", "aria-hidden": true })
+                  }
+                ) }) : null
+              ] }) : null,
+              /* @__PURE__ */ jsx11("div", { className: "ph-modal-body", children }),
+              footer ? /* @__PURE__ */ jsx11("div", { className: "ph-modal-footer", children: footer }) : null
+            ] })
+          })
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/ui/Panel.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function Panel(_a) {
+  var _b = _a, { title, description, children, className } = _b, props = __objRest(_b, ["title", "description", "children", "className"]);
+  return /* @__PURE__ */ jsxs11("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
+    title && /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
+    description && /* @__PURE__ */ jsx12("p", { className: "text-sm text-ph-subtle", children: description }),
+    children
+  ] }));
+}
+
+// src/components/ui/SearchInput.tsx
+import { useId as useId4 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } 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__ */ jsxs12("div", { className: cn("relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx13("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
+    /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+      shortcut != null ? /* @__PURE__ */ jsx13(
+        "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__ */ jsx13(
+        "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__ */ jsxs12("div", { className: cn("ph-field", wrapperClassName), children: [
+    /* @__PURE__ */ jsx13("label", { htmlFor: id, className: "ph-label", children: label }),
+    /* @__PURE__ */ jsxs12("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
+      /* @__PURE__ */ jsx13(
+        "input",
+        __spreadValues({
+          id,
+          type: "search",
+          placeholder,
+          className: cn("ph-input ph-input-group-field min-w-0 flex-1", className)
+        }, props)
+      ),
+      /* @__PURE__ */ jsx13(
+        Button,
+        {
+          type: "submit",
+          variant: "primary",
+          icon: /* @__PURE__ */ jsx13(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 jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function Table({
+  data,
+  columns,
+  zebra = false,
+  compact = false,
+  ribbon = false,
+  getRowStyle,
+  className,
+  caption
+}) {
+  return /* @__PURE__ */ jsx14("div", { className: cn("ph-table-wrap", compact && "ph-table-compact", className), children: /* @__PURE__ */ jsxs13("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
+    caption && /* @__PURE__ */ jsx14("caption", { className: "sr-only", children: caption }),
+    /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { children: columns.map((col) => /* @__PURE__ */ jsx14("th", { className: col.className, children: col.header }, col.key)) }) }),
+    /* @__PURE__ */ jsx14("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx14("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ jsx14("td", { className: col.className, children: col.cell(row) }, col.key)) }, i)) })
+  ] }) });
+}
+
+// src/components/ui/Stat.tsx
+import { jsx as jsx15, jsxs as jsxs14 } 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__ */ jsxs14("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
+    icon && /* @__PURE__ */ jsx15("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
+    /* @__PURE__ */ jsx15("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
+    /* @__PURE__ */ jsx15("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
+    footer && /* @__PURE__ */ jsx15("p", { className: "text-xs text-ph-subtle", children: footer })
+  ] }));
+}
+
+// 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: "note",
+    name: "Note Light",
+    description: "Notebook purple on lavender-white chrome.",
+    colorScheme: "light",
+    group: "Note"
+  },
+  {
+    id: "note-dark",
+    name: "Note Dark",
+    description: "Dark notebook purple \u2014 night reading mode.",
+    colorScheme: "dark",
+    group: "Note"
+  },
+  {
+    id: "turtletime",
+    name: "TurtleTime Light",
+    description: "Turtle mascot palette \u2014 shell orange, leaf green, and warm cream.",
+    colorScheme: "light",
+    group: "TurtleTime"
+  },
+  {
+    id: "turtletime-dark",
+    name: "TurtleTime Dark",
+    description: "TurtleTime after dusk \u2014 dark olive shell with bright orange clock accents.",
+    colorScheme: "dark",
+    group: "TurtleTime"
+  },
+  {
+    id: "rosepine-light",
+    name: "Ros\xE9 Pine Light",
+    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 Dark",
+    description: "Ros\xE9 Pine Main \u2014 moonlit base with iris and love accents.",
+    colorScheme: "dark",
+    group: "Ros\xE9 Pine"
+  },
+  {
+    id: "kraken-light",
+    name: "Kraken Light",
+    description: "Medium-inspired warm paper, editorial black actions, and publication yellow.",
+    colorScheme: "light",
+    group: "Kraken"
+  },
+  {
+    id: "kraken-dark",
+    name: "Kraken Dark",
+    description: "Medium-inspired night reading canvas with white actions and publication yellow.",
+    colorScheme: "dark",
+    group: "Kraken"
+  },
+  {
+    id: "deepsea-light",
+    name: "Tokyo 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: "malibu-light",
+    name: "Malibu Light",
+    description: "Sun-bleached GTA San Andreas palette with hot pink, sunset orange, and lime signals.",
+    colorScheme: "light",
+    group: "Malibu"
+  },
+  {
+    id: "malibu-dark",
+    name: "Malibu Dark",
+    description: "Deep plum command deck with hot pink, lime, cyan, and sunset signals.",
+    colorScheme: "dark",
+    group: "Malibu"
+  }
+];
+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||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);
+  return stored && isThemeId(stored) ? stored : DEFAULT_THEME_ID;
+}
+
+// src/components/ui/ThemeDomSync.tsx
+function ThemeDomSync() {
+  useLayoutEffect(() => {
+    persistTheme(readStoredTheme());
+  }, []);
+  return null;
+}
+
+// src/components/ui/ThemeSwitcher.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+function ThemeSwitcher({ className }) {
+  const [themeId, setThemeId] = useState(DEFAULT_THEME_ID);
+  useEffect(() => {
+    const id = readStoredTheme();
+    persistTheme(id);
+    setThemeId(id);
+  }, []);
+  return /* @__PURE__ */ jsxs15("label", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx16("span", { className: "shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm", children: "Theme" }),
+    /* @__PURE__ */ jsx16(
+      "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__ */ jsx16("optgroup", { label: group, children: THEMES.filter((theme) => theme.group === group).map((theme) => /* @__PURE__ */ jsx16("option", { value: theme.id, children: theme.name }, theme.id)) }, group))
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Accordion.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx17, jsxs as jsxs16 } 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__ */ jsx17("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__ */ jsxs16("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
+      /* @__PURE__ */ jsxs16(
+        "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__ */ jsx17("span", { className: "font-semibold text-ph-ink", children: item.title }),
+            /* @__PURE__ */ jsx17(
+              IconChevronDown,
+              {
+                className: cn(
+                  "h-5 w-5 text-ph-mutedtext transition-transform duration-200",
+                  isOpen && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          className: cn(
+            "grid transition-all duration-200",
+            isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          ),
+          children: /* @__PURE__ */ jsx17("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx17("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
+        }
+      )
+    ] }, item.id);
+  }) });
+}
+
+// src/components/ui/SegmentedControl.tsx
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+function SegmentedControl({ options, value, onChange, className }) {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: cn(
+        "inline-flex rounded-lg bg-ph-muted p-1",
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsxs17(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": value === option.value,
+          onClick: () => onChange(option.value),
+          className: cn(
+            "relative flex min-h-11 items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all sm:min-h-9",
+            value === option.value ? "bg-ph-surface text-ph-ink shadow-ph" : "text-ph-subtle hover:text-ph-ink"
+          ),
+          children: [
+            option.icon && /* @__PURE__ */ jsx18("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 jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+function CommandPalette({
+  items,
+  isOpen,
+  onClose,
+  placeholder = "Type a command or search...",
+  className,
+  id,
+  dataTest,
+  inputId,
+  inputDataTest
+}) {
+  const [query, setQuery] = useState3("");
+  const [selectedIndex, setSelectedIndex] = useState3(0);
+  const inputRef = useRef2(null);
+  const panelRef = useRef2(null);
+  const previousFocusRef = useRef2(null);
+  const filtered = items.filter(
+    (item) => item.label.toLowerCase().includes(query.toLowerCase())
+  );
+  useEffect2(() => {
+    var _a;
+    if (!isOpen) return;
+    previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    setQuery("");
+    setSelectedIndex(0);
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    return () => {
+      var _a2;
+      return (_a2 = previousFocusRef.current) == null ? void 0 : _a2.focus();
+    };
+  }, [isOpen]);
+  useEffect2(() => {
+    const handleKeyDown = (e) => {
+      var _a, _b;
+      if (!isOpen) return;
+      switch (e.key) {
+        case "ArrowDown":
+          if (!filtered.length) break;
+          e.preventDefault();
+          setSelectedIndex((i) => (i + 1) % filtered.length);
+          break;
+        case "ArrowUp":
+          if (!filtered.length) break;
+          e.preventDefault();
+          setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
+          break;
+        case "Enter":
+          e.preventDefault();
+          (_a = filtered[selectedIndex]) == null ? void 0 : _a.onSelect();
+          onClose();
+          break;
+        case "Escape":
+          onClose();
+          break;
+        case "Tab": {
+          const focusable = (_b = panelRef.current) == null ? void 0 : _b.querySelectorAll(
+            'input, button, [href], [tabindex]:not([tabindex="-1"])'
+          );
+          if (!(focusable == null ? void 0 : focusable.length)) break;
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+          break;
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, filtered, selectedIndex, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      id,
+      "data-test": dataTest,
+      className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm",
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs18(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Command palette",
+          className: cn(
+            "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
+              /* @__PURE__ */ jsx19(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
+              /* @__PURE__ */ jsx19(
+                "input",
+                {
+                  ref: inputRef,
+                  id: inputId,
+                  "data-test": inputDataTest,
+                  type: "text",
+                  "aria-label": "Search commands",
+                  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__ */ jsx19("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
+            ] }),
+            /* @__PURE__ */ jsx19("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ jsxs18(
+              "button",
+              {
+                type: "button",
+                id: `command-${item.id}`,
+                "data-test": `command-${item.id}`,
+                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__ */ jsx19("span", { className: "h-5 w-5", children: item.icon }),
+                  /* @__PURE__ */ jsx19("span", { className: "flex-1", children: item.label }),
+                  item.shortcut && /* @__PURE__ */ jsx19("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 jsx20, jsxs as jsxs19 } 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__ */ jsxs19("div", { className: cn("w-[280px] rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", className), children: [
+    /* @__PURE__ */ jsxs19("div", { className: "mb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx20(
+        "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__ */ jsx20(IconChevronLeft, { className: "h-5 w-5", "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsxs19("span", { className: "text-sm font-semibold text-ph-ink", children: [
+        monthNames[month],
+        " ",
+        year
+      ] }),
+      /* @__PURE__ */ jsx20(
+        "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__ */ jsx20(IconChevronRight, { className: "h-5 w-5", "aria-hidden": true })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "grid grid-cols-7 gap-1", children: [
+      weekDays.map((day) => /* @__PURE__ */ jsx20("div", { className: "py-1 text-center text-xs font-medium text-ph-mutedtext", children: day }, day)),
+      days.map((day, index) => /* @__PURE__ */ jsx20("div", { className: "aspect-square", children: day && /* @__PURE__ */ jsx20(
+        "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/EmptyState.tsx
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action, className }) {
+  return /* @__PURE__ */ jsxs20(
+    "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__ */ jsx21("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext", children: icon }),
+        /* @__PURE__ */ jsx21("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
+        description && /* @__PURE__ */ jsx21("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
+        action && /* @__PURE__ */ jsx21("div", { className: "mt-4", children: action })
+      ]
+    }
+  );
+}
+
+// src/components/ui/FilterChips.tsx
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+function FilterChips({
+  chips,
+  onToggle,
+  onRemove,
+  className,
+  "aria-label": ariaLabel = "Applied filters"
+}) {
+  return /* @__PURE__ */ jsx22("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__ */ jsxs21(Fragment3, { children: [
+      /* @__PURE__ */ jsx22("span", { className: "ph-filter-chip__label", children: chip.label }),
+      chip.value != null ? /* @__PURE__ */ jsx22("span", { className: "ph-filter-chip__value", children: chip.value }) : null
+    ] });
+    return /* @__PURE__ */ jsxs21(
+      "span",
+      {
+        className: cn("ph-filter-chip", chip.active && "ph-filter-chip--active"),
+        "data-state": chip.active ? "on" : "off",
+        children: [
+          onToggle ? /* @__PURE__ */ jsx22(
+            "button",
+            {
+              type: "button",
+              className: "ph-filter-chip__main",
+              "aria-pressed": Boolean(chip.active),
+              onClick: () => onToggle(chip.id),
+              children: content
+            }
+          ) : /* @__PURE__ */ jsx22("span", { className: "ph-filter-chip__main", children: content }),
+          chip.active && onRemove ? /* @__PURE__ */ jsx22(
+            "button",
+            {
+              type: "button",
+              className: "ph-filter-chip__remove",
+              "aria-label": `Remove ${label} filter`,
+              onClick: () => onRemove(chip.id),
+              children: /* @__PURE__ */ jsx22(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 jsx23, jsxs as jsxs22 } 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__ */ jsxs22("div", __spreadProps(__spreadValues({ className: cn("ph-filter-bar", className) }, props), { children: [
+    /* @__PURE__ */ jsxs22("div", { className: "ph-filter-bar__controls", role: "group", "aria-label": label, children: [
+      children,
+      onClear ? /* @__PURE__ */ jsx23("button", { type: "button", className: "ph-filter-bar__clear", onClick: onClear, children: clearLabel }) : null
+    ] }),
+    resultCount != null ? /* @__PURE__ */ jsx23("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__ */ jsx23(
+    DropdownMenu,
+    {
+      "aria-label": `${label}: ${accessibleValue}`,
+      align,
+      disabled,
+      className,
+      trigger: /* @__PURE__ */ jsxs22("span", { className: cn("ph-filter-menu-trigger", selected && "ph-filter-menu-trigger--active"), children: [
+        /* @__PURE__ */ jsx23(IconTuning, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        /* @__PURE__ */ jsx23("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        /* @__PURE__ */ jsx23("span", { className: "ph-filter-menu-trigger__value", children: displayValue })
+      ] }),
+      children: /* @__PURE__ */ jsx23(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ jsx23(
+        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__ */ jsx23(
+    DropdownMenu,
+    {
+      "aria-label": `${label}: ${selected ? getOptionText(selected) : "Choose sort order"}`,
+      align,
+      disabled,
+      className,
+      trigger: /* @__PURE__ */ jsxs22("span", { className: "ph-filter-menu-trigger ph-sort-menu-trigger", children: [
+        /* @__PURE__ */ jsx23(
+          IconArrowDown,
+          {
+            className: cn("h-3.5 w-3.5", direction === "ascending" && "rotate-180"),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx23("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        selected ? /* @__PURE__ */ jsx23("span", { className: "ph-filter-menu-trigger__value", children: selected.label }) : null
+      ] }),
+      children: /* @__PURE__ */ jsx23(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ jsx23(
+        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 jsx24, jsxs as jsxs23 } 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__ */ jsxs23("div", __spreadProps(__spreadValues({ className: cn("ph-filter-controls", className) }, props), { children: [
+    /* @__PURE__ */ jsx24(FilterBar, __spreadProps(__spreadValues({}, barProps), { children })),
+    hasChips && chipsProps ? /* @__PURE__ */ jsx24(FilterChips, __spreadValues({}, chipsProps)) : emptyState != null ? emptyState : null
+  ] }));
+}
+
+// src/components/ui/CodeBlock.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+function CodeBlock({ code, language = "tsx", filename, className }) {
+  const [copied, setCopied] = useState5(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs24("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
+    (filename || language) && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ jsx25("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
+          /* @__PURE__ */ jsx25("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
+          /* @__PURE__ */ jsx25("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
+        ] }),
+        filename && /* @__PURE__ */ jsx25("span", { className: "ml-2 text-xs text-white/60", children: filename })
+      ] }),
+      /* @__PURE__ */ jsx25(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: "text-xs text-white/60 transition hover:text-white",
+          children: copied ? "Copied!" : "Copy"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx25("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ jsx25("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
+  ] });
+}
+
+// src/components/ui/ComponentDocs.tsx
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false, className }) {
+  return /* @__PURE__ */ jsxs25("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
+    /* @__PURE__ */ jsxs25("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__ */ jsx26("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
+      /* @__PURE__ */ jsxs25("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__ */ jsx26("span", { className: "group-open:hidden", children: "Show" }),
+        /* @__PURE__ */ jsx26("span", { className: "hidden group-open:inline", children: "Hide" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx26("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ jsxs25("table", { className: "w-full text-left text-sm", children: [
+      /* @__PURE__ */ jsx26("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ jsxs25("tr", { children: [
+        /* @__PURE__ */ jsx26("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
+        /* @__PURE__ */ jsx26("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
+        /* @__PURE__ */ jsx26("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
+        /* @__PURE__ */ jsx26("th", { className: "px-4 py-2 font-semibold", children: "Use" })
+      ] }) }),
+      /* @__PURE__ */ jsx26("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
+        var _a, _b;
+        return /* @__PURE__ */ jsxs25("tr", { children: [
+          /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
+          /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
+          /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
+          /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 align-top text-ph-subtle", children: (_b = row.description) != null ? _b : /* @__PURE__ */ jsx26("span", { className: "text-ph-mutedtext", children: "\u2014" }) })
+        ] }, row.name);
+      }) })
+    ] }) })
+  ] });
+}
+
+// src/components/ui/ShowcaseWrapper.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+function ShowcaseWrapper({
+  id,
+  title,
+  description,
+  docs,
+  code,
+  filename = "Example.tsx",
+  children,
+  className
+}) {
+  var _a;
+  const [showCode, setShowCode] = useState6(false);
+  const fallbackId = (_a = titleIdMap[title]) != null ? _a : title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  return /* @__PURE__ */ jsxs26("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
+    /* @__PURE__ */ jsxs26("div", { className: "ph-h2-rule mb-8", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx27("h2", { children: title }),
+        /* @__PURE__ */ jsx27(
+          "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__ */ jsx27(IconCodePreview, { className: "h-5 w-5", "aria-hidden": true })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx27("hr", {})
+    ] }),
+    description && /* @__PURE__ */ jsx27("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
+    docs && /* @__PURE__ */ jsx27("div", { className: "mb-6", children: docs }),
+    /* @__PURE__ */ jsxs26(
+      "div",
+      {
+        className: cn(
+          "gap-6",
+          showCode ? "lg:grid lg:grid-cols-[1fr,minmax(360px,420px)]" : "block"
+        ),
+        children: [
+          /* @__PURE__ */ jsx27("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
+          /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: cn(
+                "transition-all duration-300",
+                showCode ? "block opacity-100" : "hidden opacity-0 lg:hidden"
+              ),
+              children: /* @__PURE__ */ jsx27("div", { className: "sticky top-20", children: /* @__PURE__ */ jsx27(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 useState7 } from "react";
+import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+function CollapsibleSection({ title, children, defaultOpen = true, id }) {
+  const [isOpen, setIsOpen] = useState7(defaultOpen);
+  const generatedId = useId5();
+  const contentId = `${id != null ? id : generatedId}-content`;
+  return /* @__PURE__ */ jsxs27("section", { id, className: "scroll-mt-20", children: [
+    /* @__PURE__ */ jsxs27(
+      "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__ */ jsx28("span", { className: "text-lg font-bold text-ph-ink", children: title }),
+          /* @__PURE__ */ jsx28(
+            IconChevronDown,
+            {
+              className: cn(
+                "h-5 w-5 text-ph-subtle transition-transform duration-200",
+                isOpen && "rotate-180"
+              ),
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx28(
+      "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 jsx29 } 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__ */ jsx29("h1", { className: textClass("ph-hero-title", tone, weight, truncate, className), children });
+}
+function SectionTitle({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx29("h2", { className: textClass("ph-section-title", tone, weight, truncate, className), children });
+}
+function H1({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx29("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__ */ jsx29("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
+}
+function H3({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx29("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
+}
+function H4({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx29("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
+}
+function H5({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx29("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
+}
+function P({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx29("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
+}
+function Small({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx29("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
+}
+function Caption({ children, tone = "muted", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx29("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__ */ jsx29("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__ */ jsx29("p", { className: textClass("ph-lead", tone, weight, truncate, className), children });
+}
+function Mono({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx29("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
+}
+function Label({ children, tone = "default", weight, truncate, className }) {
+  return /* @__PURE__ */ jsx29("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
+}
+
+// src/components/ui/Avatar.tsx
+import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
+var sizeMap4 = {
+  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__ */ jsxs28("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
+    /* @__PURE__ */ jsx30(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-full border border-ph-border font-bold shadow-ph",
+          sizeMap4[size],
+          color
+        ),
+        children: icon || label
+      }
+    ),
+    status && /* @__PURE__ */ jsx30(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-0 right-1 h-2.5 w-2.5 rounded-full border-2 border-white",
+          statusMap[status]
+        )
+      }
+    ),
+    badge && /* @__PURE__ */ jsx30("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__ */ jsxs28("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
+    visible,
+    remaining > 0 && /* @__PURE__ */ jsx30(
+      Avatar,
+      {
+        label: `+${remaining}`,
+        size: "md",
+        color: "bg-ph-toolbar text-ph-subtle"
+      }
+    )
+  ] }));
+}
+
+// src/components/ui/Progress.tsx
+import { jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
+var sizeMap5 = {
+  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__ */ jsxs29("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
+    (label || showPercentage) && /* @__PURE__ */ jsxs29("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
+      label && /* @__PURE__ */ jsx31("span", { children: label }),
+      showPercentage && /* @__PURE__ */ jsxs29("span", { className: "tabular-nums", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx31("div", { className: cn("ph-progress", sizeMap5[size]), children: /* @__PURE__ */ jsx31(
+      "div",
+      {
+        className: cn("ph-progress-bar", color),
+        style: { width: `${percentage}%` },
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max
+      }
+    ) })
+  ] }));
+}
+
+// src/components/ui/Link.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Link = forwardRef6(function Link2(_a, ref) {
+  var _b = _a, {
+    className,
+    disabled = false,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "disabled",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx32(
+    "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 jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
+function Spinner(_a) {
+  var _b = _a, { size = "sm", textColored = false, className } = _b, props = __objRest(_b, ["size", "textColored", "className"]);
+  return /* @__PURE__ */ jsx33(
+    "span",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "ph-spinner",
+        `ph-spinner--${size}`,
+        textColored && "ph-spinner--text-colored",
+        className
+      ),
+      role: "status",
+      "aria-label": "Loading"
+    }, props), {
+      children: /* @__PURE__ */ jsxs30("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "ph-spinner__svg", children: [
+        /* @__PURE__ */ jsx33("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", opacity: 0.2 }),
+        /* @__PURE__ */ jsx33("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+      ] })
+    })
+  );
+}
+Spinner.displayName = "Spinner";
+
+// src/components/ui/Dot.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+var colorMap = {
+  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__ */ jsx34(
+    "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",
+        colorMap[color],
+        className
+      ),
+      "aria-hidden": "true"
+    }, props)
+  );
+}
+Dot.displayName = "Dot";
+
+// src/components/ui/Chip.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+var Chip = forwardRef7(function Chip2(_a, ref) {
+  var _b = _a, {
+    selected = false,
+    onRemove,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "selected",
+    "onRemove",
+    "children",
+    "className"
+  ]);
+  const chipClassName = cn(
+    "ph-chip",
+    selected && "ph-chip--selected",
+    className
+  );
+  if (onRemove) {
+    const removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove";
+    return /* @__PURE__ */ jsxs31("span", { className: chipClassName, children: [
+      /* @__PURE__ */ jsx35(
+        "button",
+        __spreadProps(__spreadValues({
+          ref,
+          type: "button",
+          className: "min-w-0 bg-transparent p-0 text-inherit"
+        }, props), {
+          children: /* @__PURE__ */ jsx35("span", { className: "ph-chip__text", children })
+        })
+      ),
+      /* @__PURE__ */ jsx35(
+        "button",
+        {
+          type: "button",
+          onClick: onRemove,
+          disabled: props.disabled,
+          className: "ph-chip__remove",
+          "aria-label": removeLabel,
+          children: /* @__PURE__ */ jsx35("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx35("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx35(
+    "button",
+    __spreadProps(__spreadValues({
+      ref,
+      type: "button",
+      className: chipClassName
+    }, props), {
+      children: /* @__PURE__ */ jsx35("span", { className: "ph-chip__text", children })
+    })
+  );
+});
+Chip.displayName = "Chip";
+
+export {
+  Button,
+  Alert,
+  Badge,
+  Card,
+  Kbd,
+  Loader,
+  Skeleton,
+  LoadingState,
+  AuthLayout,
+  AuthCard,
+  AuthDivider,
+  SettingsNav,
+  SettingsLayout,
+  FormField,
+  Input,
+  Select,
+  Textarea,
+  Checkbox,
+  Radio,
+  Toggle,
+  Range,
+  FileUpload,
+  Modal,
+  Panel,
+  SearchInput,
+  SearchGroup,
+  Table,
+  Stat,
+  DEFAULT_THEME_ID,
+  THEMES,
+  THEME_GROUPS,
+  isThemeId,
+  getTheme,
+  THEME_INIT_SCRIPT,
+  persistTheme,
+  readStoredTheme,
+  ThemeDomSync,
+  ThemeSwitcher,
+  Accordion,
+  SegmentedControl,
+  CommandPalette,
+  Calendar,
+  EmptyState,
+  FilterChips,
+  FilterBar,
+  FilterMenu,
+  SortMenu,
+  FilterControls,
+  CodeBlock,
+  ComponentDocs,
+  ShowcaseWrapper,
+  CollapsibleSection,
+  Display,
+  SectionTitle,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  P,
+  Small,
+  Caption,
+  Overline,
+  Lead,
+  Mono,
+  Label,
+  Avatar,
+  AvatarGroup,
+  Progress,
+  Link,
+  Spinner,
+  Dot,
+  Chip
+};