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

package/dist/chunk-SBBKXV35.mjs

@@ -1,4620 +0,0 @@
-import {
-  ButtonChrome,
-  DropdownMenu,
-  DropdownRadioGroup,
-  DropdownRadioItem,
-  IconArrowDown,
-  IconCancel,
-  IconCheck,
-  IconCheckCircle,
-  IconChevronDown,
-  IconChevronLeft,
-  IconChevronRight,
-  IconClose,
-  IconCodePreview,
-  IconErrorOutline,
-  IconExclamation,
-  IconInfo,
-  IconSearch,
-  IconStar,
-  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/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,
-        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__ */ 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 { Fragment as Fragment3, 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,
-  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__ */ jsx12(
-    Dialog.Root,
-    {
-      open,
-      onOpenChange: (nextOpen) => {
-        if (!nextOpen) onClose == null ? void 0 : onClose();
-      },
-      children: /* @__PURE__ */ jsxs11(Dialog.Portal, { children: [
-        /* @__PURE__ */ jsx12(
-          Dialog.Overlay,
-          {
-            "data-test": dataTest,
-            className: "ph-modal-overlay",
-            style: zIndex ? { zIndex } : void 0
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          Dialog.Content,
-          __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
-            id,
-            "data-test": panelDataTest,
-            className: cn("ph-modal-panel", sizeMap4[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__ */ jsxs11(Fragment3, { children: [
-              /* @__PURE__ */ jsx12(Dialog.Title, { className: "sr-only", children: ariaLabel != null ? ariaLabel : "Dialog" }),
-              children
-            ] }) : /* @__PURE__ */ jsxs11(Fragment3, { 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: "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/ThemeManager.tsx
-import { useLayoutEffect as useLayoutEffect2 } from "react";
-import { Fragment as Fragment4, jsx as jsx21 } from "react/jsx-runtime";
-function ThemeManager({ children }) {
-  useLayoutEffect2(() => {
-    persistTheme(readStoredTheme());
-  }, []);
-  return /* @__PURE__ */ jsx21(Fragment4, { 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(DEFAULT_THEME_ID);
-  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",
-          "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__ */ 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,
-  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__ */ jsx26(
-    "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__ */ jsxs23(
-        "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__ */ 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,
-                  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__ */ 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",
-                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__ */ 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 Fragment5, 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(Fragment5, { 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 Fragment6, 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(Fragment6, { children: lines == null ? void 0 : lines.map((line, i) => {
-          const text = typeof line === "string" ? line : line.text;
-          const color = typeof line === "string" ? void 0 : line.color;
-          return /* @__PURE__ */ 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"
-  ]);
-  const chipClassName = cn(
-    "ph-chip",
-    selected && "ph-chip--selected",
-    className
-  );
-  if (onRemove) {
-    const removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove";
-    return /* @__PURE__ */ jsxs60("span", { className: chipClassName, children: [
-      /* @__PURE__ */ jsx72(
-        "button",
-        __spreadProps(__spreadValues({
-          ref,
-          type: "button",
-          className: "min-w-0 bg-transparent p-0 text-inherit"
-        }, props), {
-          children: /* @__PURE__ */ jsx72("span", { className: "ph-chip__text", children })
-        })
-      ),
-      /* @__PURE__ */ jsx72(
-        "button",
-        {
-          type: "button",
-          onClick: onRemove,
-          disabled: props.disabled,
-          className: "ph-chip__remove",
-          "aria-label": removeLabel,
-          children: /* @__PURE__ */ jsx72("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx72("path", { d: "M2 2l6 6M8 2l-6 6" }) })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx72(
-    "button",
-    __spreadProps(__spreadValues({
-      ref,
-      type: "button",
-      className: chipClassName
-    }, props), {
-      children: /* @__PURE__ */ jsx72("span", { className: "ph-chip__text", children })
-    })
-  );
-});
-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
-};