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

package/dist/ui.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -61,25 +62,39 @@ var ui_exports = {};
 __export(ui_exports, {
   Accordion: () => Accordion,
   Alert: () => Alert,
+  AlertDialog: () => AlertDialog,
+  AppLayout: () => AppLayout,
   AuthCard: () => AuthCard,
   AuthDivider: () => AuthDivider,
   AuthLayout: () => AuthLayout,
+  Autocomplete: () => Autocomplete,
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
+  Banner: () => Banner,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   ButtonChrome: () => ButtonChrome,
+  ButtonGroup: () => ButtonGroup,
   Calendar: () => Calendar,
   Caption: () => Caption,
   Card: () => Card,
   ChatBubble: () => ChatBubble,
   Checkbox: () => Checkbox,
+  Chip: () => Chip,
   CodeBlock: () => CodeBlock,
+  Collapsible: () => Collapsible,
   CollapsibleSection: () => CollapsibleSection,
+  Combobox: () => Combobox,
   CommandPalette: () => CommandPalette,
   ComponentDocs: () => ComponentDocs,
+  ContextMenu: () => ContextMenu,
+  DataTable: () => DataTable,
+  DatePicker: () => DatePicker,
+  Dialog: () => Dialog2,
   Display: () => Display,
+  Divider: () => Divider,
+  Dot: () => Dot,
   Drawer: () => Drawer,
   DropdownButton: () => DropdownButton,
   DropdownItem: () => DropdownItem,
@@ -103,21 +118,33 @@ __export(ui_exports, {
   IconByName: () => IconByName,
   Indicator: () => Indicator,
   Input: () => Input,
+  InputGroup: () => InputGroup,
   Kbd: () => Kbd,
   Label: () => Label,
   Lead: () => Lead,
+  Lettermark: () => Lettermark,
+  Link: () => Link,
   Loader: () => Loader,
+  LoadingBar: () => LoadingBar,
   LoadingState: () => LoadingState,
+  Menubar: () => Menubar,
+  Metric: () => Metric,
   Modal: () => Modal,
   Mono: () => Mono,
+  NumberField: () => NumberField,
   Overline: () => Overline,
   P: () => P,
   Pagination: () => Pagination,
   Panel: () => Panel,
+  Popover: () => Popover,
   Progress: () => Progress,
+  ProgressCircle: () => ProgressCircle,
   Radio: () => Radio,
   Range: () => Range,
   Rating: () => Rating,
+  Resizable: () => Resizable,
+  Row: () => Row,
+  ScrollArea: () => ScrollArea,
   SearchGroup: () => SearchGroup,
   SearchInput: () => SearchInput,
   SegmentedControl: () => SegmentedControl,
@@ -125,13 +152,18 @@ __export(ui_exports, {
   SettingsLayout: () => SettingsLayout,
   SettingsNav: () => SettingsNav,
   ShowcaseWrapper: () => ShowcaseWrapper,
+  Sidebar: () => Sidebar,
   Skeleton: () => Skeleton,
   Small: () => Small,
+  Snack: () => Snack,
   SortMenu: () => SortMenu,
+  Spinner: () => Spinner,
+  Splotch: () => Splotch,
   Stat: () => Stat,
   Stepper: () => Stepper,
   Table: () => Table,
   Tabs: () => Tabs,
+  Tag: () => Tag,
   Terminal: () => Terminal,
   Textarea: () => Textarea,
   ThemeDomSync: () => ThemeDomSync,
@@ -140,7 +172,12 @@ __export(ui_exports, {
   Timeline: () => Timeline,
   Toast: () => Toast,
   ToastStack: () => ToastStack,
-  Toggle: () => Toggle
+  Toggle: () => Toggle,
+  ToggleButton: () => ToggleButton,
+  ToggleGroup: () => ToggleGroup,
+  Tooltip: () => Tooltip,
+  TooltipProvider: () => TooltipProvider,
+  Widget: () => Widget
 });
 module.exports = __toCommonJS(ui_exports);
 
@@ -2965,10 +3002,151 @@ function HoverCard({ trigger, children, className }) {
   );
 }
 
-// src/components/ui/EmptyState.tsx
+// src/components/ui/Tooltip.tsx
+var import_react20 = require("react");
+var import_react_dom = require("react-dom");
 var import_jsx_runtime34 = require("react/jsx-runtime");
+var TooltipDelayContext = (0, import_react20.createContext)(0);
+function TooltipProvider({
+  children,
+  delayDuration = 0
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipDelayContext.Provider, { value: delayDuration, children });
+}
+function tooltipPosition(trigger, side, align, offset) {
+  const horizontal = align === "start" ? trigger.left : align === "end" ? trigger.right : trigger.left + trigger.width / 2;
+  const vertical = align === "start" ? trigger.top : align === "end" ? trigger.bottom : trigger.top + trigger.height / 2;
+  if (side === "top")
+    return {
+      left: horizontal,
+      top: trigger.top - offset,
+      transform: "translate(-50%, -100%)"
+    };
+  if (side === "bottom")
+    return {
+      left: horizontal,
+      top: trigger.bottom + offset,
+      transform: "translate(-50%, 0)"
+    };
+  if (side === "left")
+    return {
+      left: trigger.left - offset,
+      top: vertical,
+      transform: "translate(-100%, -50%)"
+    };
+  return {
+    left: trigger.right + offset,
+    top: vertical,
+    transform: "translate(0, -50%)"
+  };
+}
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 7,
+  className,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  delayDuration
+}) {
+  const providerDelay = (0, import_react20.useContext)(TooltipDelayContext);
+  const generatedId = (0, import_react20.useId)().replace(/:/g, "");
+  const triggerRef = (0, import_react20.useRef)(null);
+  const timerRef = (0, import_react20.useRef)(null);
+  const [internalOpen, setInternalOpen] = (0, import_react20.useState)(defaultOpen);
+  const [position, setPosition] = (0, import_react20.useState)(null);
+  const isOpen = open != null ? open : internalOpen;
+  const triggerId = children.props.id;
+  const tooltipId = triggerId ? `${triggerId}-tooltip` : `ph-tooltip-${generatedId}`;
+  function setOpen(next) {
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange == null ? void 0 : onOpenChange(next);
+  }
+  function clearTimer() {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }
+  function updatePosition() {
+    if (!triggerRef.current) return;
+    setPosition(
+      tooltipPosition(
+        triggerRef.current.getBoundingClientRect(),
+        side,
+        align,
+        sideOffset
+      )
+    );
+  }
+  function show(immediate) {
+    clearTimer();
+    updatePosition();
+    const delay = immediate ? 0 : delayDuration != null ? delayDuration : providerDelay;
+    if (!delay) setOpen(true);
+    else timerRef.current = setTimeout(() => setOpen(true), delay);
+  }
+  function hide() {
+    clearTimer();
+    setOpen(false);
+  }
+  (0, import_react20.useEffect)(() => {
+    if (!isOpen) return;
+    const reposition = () => updatePosition();
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    return () => {
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    };
+  });
+  (0, import_react20.useEffect)(() => () => clearTimer(), []);
+  const describedBy = [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ");
+  const trigger = (0, import_react20.cloneElement)(children, { "aria-describedby": describedBy });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "span",
+      {
+        ref: triggerRef,
+        className: "inline-flex",
+        onMouseEnter: () => show(false),
+        onMouseLeave: hide,
+        onFocusCapture: () => show(true),
+        onBlurCapture: hide,
+        onKeyDown: (event) => {
+          if (event.key === "Escape") hide();
+        },
+        children: trigger
+      }
+    ),
+    isOpen && position && typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        "span",
+        {
+          style: __spreadValues({ position: "fixed" }, position),
+          className: "pointer-events-none z-[200]",
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "span",
+            {
+              id: tooltipId,
+              role: "tooltip",
+              "data-side": side,
+              className: cn("ph-tooltip-content", className),
+              children: content
+            }
+          )
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+
+// src/components/ui/EmptyState.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function EmptyState({ icon, title, description, action, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       className: cn(
@@ -2976,17 +3154,17 @@ function EmptyState({ icon, title, description, action, className }) {
         className
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
-        action && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-4", children: action })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mt-4", children: action })
       ]
     }
   );
 }
 
 // src/components/ui/FilterChips.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function FilterChips({
   chips,
   onToggle,
@@ -2994,20 +3172,20 @@ function FilterChips({
   className,
   "aria-label": ariaLabel = "Applied filters"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("ph-filter-chips", className), role: "group", "aria-label": ariaLabel, children: chips.map((chip) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("ph-filter-chips", className), role: "group", "aria-label": ariaLabel, children: chips.map((chip) => {
     var _a;
     const label = (_a = chip.removeLabel) != null ? _a : getChipText(chip);
-    const content = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ph-filter-chip__label", children: chip.label }),
-      chip.value != null ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ph-filter-chip__value", children: chip.value }) : null
+    const content = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-chip__label", children: chip.label }),
+      chip.value != null ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-chip__value", children: chip.value }) : null
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "span",
       {
         className: cn("ph-filter-chip", chip.active && "ph-filter-chip--active"),
         "data-state": chip.active ? "on" : "off",
         children: [
-          onToggle ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          onToggle ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "button",
             {
               type: "button",
@@ -3016,15 +3194,15 @@ function FilterChips({
               onClick: () => onToggle(chip.id),
               children: content
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ph-filter-chip__main", children: content }),
-          chip.active && onRemove ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-chip__main", children: content }),
+          chip.active && onRemove ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "button",
             {
               type: "button",
               className: "ph-filter-chip__remove",
               "aria-label": `Remove ${label} filter`,
               onClick: () => onRemove(chip.id),
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(IconClose, { className: "h-3 w-3", "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconClose, { className: "h-3 w-3", "aria-hidden": true })
             }
           ) : null
         ]
@@ -3040,7 +3218,7 @@ function getChipText(chip) {
 }
 
 // src/components/ui/FilterBar.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function FilterBar(_a) {
   var _b = _a, {
     children,
@@ -3057,12 +3235,12 @@ function FilterBar(_a) {
     "resultCount",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-bar", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ph-filter-bar__controls", role: "group", "aria-label": label, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-bar", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ph-filter-bar__controls", role: "group", "aria-label": label, children: [
       children,
-      onClear ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: "ph-filter-bar__clear", onClick: onClear, children: clearLabel }) : null
+      onClear ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", className: "ph-filter-bar__clear", onClick: onClear, children: clearLabel }) : null
     ] }),
-    resultCount != null ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("output", { className: "ph-filter-bar__results", "aria-live": "polite", children: resultCount }) : null
+    resultCount != null ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("output", { className: "ph-filter-bar__results", "aria-live": "polite", children: resultCount }) : null
   ] }));
 }
 function FilterMenu({
@@ -3079,19 +3257,19 @@ function FilterMenu({
   const selected = options.find((option) => option.value === value);
   const displayValue = (_a = selected == null ? void 0 : selected.label) != null ? _a : placeholder;
   const accessibleValue = selected ? getOptionText(selected) : String(placeholder);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     DropdownMenu,
     {
       "aria-label": `${label}: ${accessibleValue}`,
       align,
       disabled,
       className,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: cn("ph-filter-menu-trigger", selected && "ph-filter-menu-trigger--active"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconTuning, { className: "h-3.5 w-3.5", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-menu-trigger__value", children: displayValue })
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: cn("ph-filter-menu-trigger", selected && "ph-filter-menu-trigger--active"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconTuning, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ph-filter-menu-trigger__value", children: displayValue })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         DropdownRadioItem,
         {
           value: option.value,
@@ -3115,25 +3293,25 @@ function SortMenu({
   className
 }) {
   const selected = options.find((option) => option.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     DropdownMenu,
     {
       "aria-label": `${label}: ${selected ? getOptionText(selected) : "Choose sort order"}`,
       align,
       disabled,
       className,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "ph-filter-menu-trigger ph-sort-menu-trigger", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "ph-filter-menu-trigger ph-sort-menu-trigger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           IconArrowDown,
           {
             className: cn("h-3.5 w-3.5", direction === "ascending" && "rotate-180"),
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
-        selected ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ph-filter-menu-trigger__value", children: selected.label }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ph-filter-menu-trigger__label", children: label }),
+        selected ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ph-filter-menu-trigger__value", children: selected.label }) : null
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         DropdownRadioItem,
         {
           value: option.value,
@@ -3153,7 +3331,7 @@ function getOptionText(option) {
 }
 
 // src/components/ui/FilterControls.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function FilterControls(_a) {
   var _b = _a, {
     children,
@@ -3169,33 +3347,33 @@ function FilterControls(_a) {
     "className"
   ]);
   const hasChips = Boolean(chipsProps == null ? void 0 : chipsProps.chips.length);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-controls", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterBar, __spreadProps(__spreadValues({}, barProps), { children })),
-    hasChips && chipsProps ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterChips, __spreadValues({}, chipsProps)) : emptyState != null ? emptyState : null
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-filter-controls", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FilterBar, __spreadProps(__spreadValues({}, barProps), { children })),
+    hasChips && chipsProps ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FilterChips, __spreadValues({}, chipsProps)) : emptyState != null ? emptyState : null
   ] }));
 }
 
 // src/components/ui/CodeBlock.tsx
-var import_react20 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function CodeBlock({ code, language = "tsx", filename, className }) {
-  const [copied, setCopied] = (0, import_react20.useState)(false);
+  const [copied, setCopied] = (0, import_react21.useState)(false);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(code);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
-    (filename || language) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
+    (filename || language) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
         ] }),
-        filename && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ml-2 text-xs text-white/60", children: filename })
+        filename && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ml-2 text-xs text-white/60", children: filename })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
@@ -3205,35 +3383,35 @@ function CodeBlock({ code, language = "tsx", filename, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
   ] });
 }
 
 // src/components/ui/ComponentDocs.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-4 border-b border-ph-border px-4 py-3 transition hover:bg-ph-muted/60 [&::-webkit-details-marker]:hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "rounded-full border border-ph-border bg-ph-surface px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext transition group-open:bg-ph-brand group-open:text-white", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "group-open:hidden", children: "Show" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "hidden group-open:inline", children: "Hide" })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-4 border-b border-ph-border px-4 py-3 transition hover:bg-ph-muted/60 [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "rounded-full border border-ph-border bg-ph-surface px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext transition group-open:bg-ph-brand group-open:text-white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "group-open:hidden", children: "Show" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "hidden group-open:inline", children: "Hide" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("table", { className: "w-full text-left text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Use" })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("table", { className: "w-full text-left text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Use" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
         var _a;
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
         ] }, row.name);
       }) })
     ] }) })
@@ -3241,8 +3419,8 @@ function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false,
 }
 
 // src/components/ui/ShowcaseWrapper.tsx
-var import_react21 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function ShowcaseWrapper({
   id,
   title,
@@ -3254,13 +3432,13 @@ function ShowcaseWrapper({
   className
 }) {
   var _a;
-  const [showCode, setShowCode] = (0, import_react21.useState)(false);
+  const [showCode, setShowCode] = (0, import_react22.useState)(false);
   const fallbackId = (_a = titleIdMap[title]) != null ? _a : title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "ph-h2-rule mb-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h2", { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ph-h2-rule mb-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "button",
           {
             type: "button",
@@ -3271,15 +3449,15 @@ function ShowcaseWrapper({
             ),
             title: showCode ? "Hide code" : "Show code",
             "aria-label": showCode ? "Hide code" : "Show code",
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconCodePreview, { className: "h-5 w-5", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(IconCodePreview, { className: "h-5 w-5", "aria-hidden": true })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("hr", {})
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("hr", {})
     ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
-    docs && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mb-6", children: docs }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
+    docs && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mb-6", children: docs }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
       {
         className: cn(
@@ -3287,15 +3465,15 @@ function ShowcaseWrapper({
           showCode ? "lg:grid lg:grid-cols-[1fr,minmax(360px,420px)]" : "block"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "div",
             {
               className: cn(
                 "transition-all duration-300",
                 showCode ? "block opacity-100" : "hidden opacity-0 lg:hidden"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "sticky top-20", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CodeBlock, { code, filename }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "sticky top-20", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CodeBlock, { code, filename }) })
             }
           )
         ]
@@ -3344,14 +3522,14 @@ var titleIdMap = {
 };
 
 // src/components/ui/CollapsibleSection.tsx
-var import_react22 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function CollapsibleSection({ title, children, defaultOpen = true, id }) {
-  const [isOpen, setIsOpen] = (0, import_react22.useState)(defaultOpen);
-  const generatedId = (0, import_react22.useId)();
+  const [isOpen, setIsOpen] = (0, import_react23.useState)(defaultOpen);
+  const generatedId = (0, import_react23.useId)();
   const contentId = `${id != null ? id : generatedId}-content`;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("section", { id, className: "scroll-mt-20", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("section", { id, className: "scroll-mt-20", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "button",
       {
         type: "button",
@@ -3360,8 +3538,8 @@ function CollapsibleSection({ title, children, defaultOpen = true, id }) {
         "aria-controls": contentId,
         className: "mb-6 flex w-full items-center justify-between rounded-lg border border-ph-border bg-ph-muted px-5 py-4 text-left transition hover:bg-ph-muted/80",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-lg font-bold text-ph-ink", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-lg font-bold text-ph-ink", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             IconChevronDown,
             {
               className: cn(
@@ -3374,7 +3552,7 @@ function CollapsibleSection({ title, children, defaultOpen = true, id }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "div",
       {
         id: contentId,
@@ -3390,7 +3568,7 @@ function CollapsibleSection({ title, children, defaultOpen = true, id }) {
 }
 
 // src/components/ui/Typography.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var toneMap2 = {
   default: "text-ph-ink",
   muted: "text-ph-mutedtext",
@@ -3419,47 +3597,47 @@ function Display({
   truncate,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h1", { className: textClass("text-4xl font-extrabold tracking-tight md:text-5xl", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h1", { className: textClass("text-4xl font-extrabold tracking-tight md:text-5xl", tone, weight, truncate, className), children });
 }
 function H1({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h1", { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h1", { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children });
 }
 function H2({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
 }
 function H3({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
 }
 function H4({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
 }
 function H5({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
 }
 function P({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
 }
 function Small({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
 }
 function Caption({ children, tone = "muted", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children });
 }
 function Overline({ children, tone = "muted", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children });
 }
 function Lead({ children, tone = "subtle", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: textClass("text-lg leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: textClass("text-lg leading-relaxed", tone, weight, truncate, className), children });
 }
 function Mono({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
 }
 function Label({ children, tone = "default", weight, truncate, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
 }
 
 // src/components/ui/Avatar.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var sizeMap5 = {
   xs: "h-8 w-8 text-[10px]",
   sm: "h-10 w-10 text-xs",
@@ -3491,8 +3669,8 @@ function Avatar(_a) {
     "badge",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "div",
       {
         className: cn(
@@ -3503,7 +3681,7 @@ function Avatar(_a) {
         children: icon || label
       }
     ),
-    status && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    status && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "span",
       {
         className: cn(
@@ -3512,7 +3690,7 @@ function Avatar(_a) {
         )
       }
     ),
-    badge && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-white", children: badge })
+    badge && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-white", children: badge })
   ] }));
 }
 function AvatarGroup(_a) {
@@ -3520,9 +3698,9 @@ function AvatarGroup(_a) {
   const items = Array.isArray(children) ? children : [children];
   const visible = max ? items.slice(0, max) : items;
   const remaining = max ? items.length - max : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
     visible,
-    remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Avatar,
       {
         label: `+${remaining}`,
@@ -3534,7 +3712,7 @@ function AvatarGroup(_a) {
 }
 
 // src/components/ui/Progress.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var sizeMap6 = {
   sm: "h-1",
   md: "h-2",
@@ -3559,15 +3737,15 @@ function Progress(_a) {
     "className"
   ]);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
-    (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: label }),
-      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "tabular-nums", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
+    (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: label }),
+      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "tabular-nums", children: [
         Math.round(percentage),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("ph-progress", sizeMap6[size]), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("ph-progress", sizeMap6[size]), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "div",
       {
         className: cn("ph-progress-bar", color),
@@ -3582,7 +3760,7 @@ function Progress(_a) {
 }
 
 // src/components/ui/ChatBubble.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function ChatBubble(_a) {
   var _b = _a, {
     children,
@@ -3602,7 +3780,7 @@ function ChatBubble(_a) {
     "className"
   ]);
   const isSelf = variant === "self";
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       className: cn(
@@ -3612,9 +3790,9 @@ function ChatBubble(_a) {
       )
     }, props), {
       children: [
-        avatar && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "shrink-0", children: avatar }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
-          (name || time) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        avatar && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "shrink-0", children: avatar }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
+          (name || time) && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
             "header",
             {
               className: cn(
@@ -3622,12 +3800,12 @@ function ChatBubble(_a) {
                 isSelf && "flex-row-reverse justify-end"
               ),
               children: [
-                name && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "font-semibold text-ph-ink", children: name }),
-                time && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: time })
+                name && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "font-semibold text-ph-ink", children: name }),
+                time && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: time })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "div",
             {
               className: cn(
@@ -3637,7 +3815,7 @@ function ChatBubble(_a) {
               children
             }
           ),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
+          footer && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
         ] })
       ]
     })
@@ -3645,7 +3823,7 @@ function ChatBubble(_a) {
 }
 
 // src/components/ui/Terminal.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Terminal(_a) {
   var _b = _a, {
     title = "sandbox",
@@ -3658,7 +3836,7 @@ function Terminal(_a) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       className: cn(
@@ -3667,18 +3845,18 @@ function Terminal(_a) {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("header", { className: "flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-3 w-3 rounded-full bg-emerald-400" }),
-          title && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs font-medium text-ph-mutedtext", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("header", { className: "flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "h-3 w-3 rounded-full bg-emerald-400" }),
+          title && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium text-ph-mutedtext", children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed", children: children || /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: lines == null ? void 0 : lines.map((line, i) => {
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed", children: children || /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: lines == null ? void 0 : lines.map((line, i) => {
           const text = typeof line === "string" ? line : line.text;
           const color = typeof line === "string" ? void 0 : line.color;
-          return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: color || "text-neutral-600", children: text }),
-            i < lines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("br", {})
+          return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: color || "text-neutral-600", children: text }),
+            i < lines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("br", {})
           ] }, i);
         }) }) })
       ]
@@ -3687,7 +3865,7 @@ function Terminal(_a) {
 }
 
 // src/components/ui/Indicator.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var positionMap = {
   "top-right": "-right-[2px] -top-[2px]",
   "top-left": "-left-[2px] -top-[2px]",
@@ -3710,8 +3888,8 @@ function Indicator(_a) {
     "dot",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex items-center justify-center", className) }, props), { children: [
-    dot ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex items-center justify-center", className) }, props), { children: [
+    dot ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "span",
       {
         className: cn(
@@ -3720,7 +3898,7 @@ function Indicator(_a) {
           positionMap[position]
         )
       }
-    ) : badge != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    ) : badge != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "span",
       {
         className: cn(
@@ -3736,7 +3914,7 @@ function Indicator(_a) {
 }
 
 // src/components/ui/Timeline.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Timeline(_a) {
   var _b = _a, {
     events,
@@ -3747,15 +3925,15 @@ function Timeline(_a) {
     "alternate",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "ol",
     __spreadProps(__spreadValues({
       className: cn("relative space-y-8", className)
     }, props), {
       children: events.map((event, idx) => {
         const align = alternate && idx % 2 !== 0 ? "lg:flex-row-reverse" : "";
-        return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("li", { className: cn("relative flex gap-6", align), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("li", { className: cn("relative flex gap-6", align), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "div",
             {
               className: cn(
@@ -3765,41 +3943,1671 @@ function Timeline(_a) {
               children: event.icon
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("article", { className: "flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-wrap items-baseline gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h4", { className: "text-base font-semibold text-ph-ink", children: event.title }),
-              event.time && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("time", { className: "text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext", children: event.time })
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("article", { className: "flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-wrap items-baseline gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h4", { className: "text-base font-semibold text-ph-ink", children: event.title }),
+              event.time && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("time", { className: "text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext", children: event.time })
             ] }),
-            event.description && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-2 text-sm text-ph-subtle", children: event.description })
+            event.description && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "mt-2 text-sm text-ph-subtle", children: event.description })
           ] })
         ] }, event.id);
       })
     })
   );
 }
+
+// src/components/ui/Banner.tsx
+var import_react24 = require("react");
+var import_jsx_runtime50 = require("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 = (0, import_react24.forwardRef)(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__ */ (0, import_jsx_runtime50.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      role: "alert",
+      className: cn(
+        "ph-banner",
+        typeClass[type],
+        square && "ph-banner--square",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "ph-banner__body", children: [
+        icon,
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ph-banner__content", children }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ph-banner__action", children: action }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { type: "button", onClick: onClose, className: "ph-banner__close", "aria-label": "Dismiss", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) }) })
+      ] })
+    })
+  );
+});
+Banner.displayName = "Banner";
+
+// src/components/ui/Dialog.tsx
+var import_react25 = require("react");
+var import_jsx_runtime51 = require("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] = (0, import_react25.useState)(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__ */ (0, import_jsx_runtime51.jsx)(
+    Modal,
+    __spreadProps(__spreadValues({
+      open: isOpen,
+      onClose,
+      title,
+      footer: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, __spreadProps(__spreadValues({ variant: "secondary" }, cancelProps), { onClick: onClose, children: cancelText })),
+        onConfirm && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          Button,
+          __spreadProps(__spreadValues({
+            variant: "primary",
+            loading
+          }, confirmProps), {
+            onClick: handleConfirm,
+            children: confirmText
+          })
+        )
+      ] })
+    }, modalProps), {
+      children
+    })
+  );
+}
+Dialog2.displayName = "Dialog";
+
+// src/components/ui/Divider.tsx
+var import_jsx_runtime52 = require("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__ */ (0, import_jsx_runtime52.jsx)(
+    "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__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ph-divider__label", children: label })
+    })
+  );
+}
+Divider.displayName = "Divider";
+
+// src/components/ui/Tag.tsx
+var import_react26 = require("react");
+var import_jsx_runtime53 = require("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 = (0, import_react26.forwardRef)(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__ */ (0, import_jsx_runtime53.jsxs)(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "ph-tag",
+        typeClass2[type],
+        size === "sm" && "ph-tag-sm",
+        className
+      )
+    }, props), {
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "ph-tag__icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "ph-tag__text", children }),
+        closable && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose == null ? void 0 : onClose();
+            },
+            className: "ph-tag__close",
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("path", { d: "M3 3l6 6M9 3l-6 6" }) })
+          }
+        )
+      ]
+    })
+  );
+});
+Tag.displayName = "Tag";
+
+// src/components/ui/ProgressCircle.tsx
+var import_jsx_runtime54 = require("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__ */ (0, import_jsx_runtime54.jsxs)(
+    "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__ */ (0, import_jsx_runtime54.jsxs)("svg", { width: size, height: size, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: stroke,
+              opacity: 0.15
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            "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__ */ (0, import_jsx_runtime54.jsx)("span", { className: "ph-progress-circle__content", children })
+      ]
+    })
+  );
+}
+ProgressCircle.displayName = "ProgressCircle";
+
+// src/components/ui/Row.tsx
+var import_react27 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var Row = (0, import_react27.forwardRef)(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__ */ (0, import_jsx_runtime55.jsx)(
+    "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__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ph-row__main", children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ph-row__icon", children: icon }),
+        !symbolic && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ph-row__content", children }),
+        sideIcon && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ph-row__side-icon", children: sideIcon })
+      ] })
+    })
+  );
+});
+Row.displayName = "Row";
+
+// src/components/ui/Widget.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function Widget({ title, onClose, actions, children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cn("ph-widget", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ph-widget__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ph-widget__title", children: title }),
+      actions,
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("button", { type: "button", onClick: onClose, className: "ph-widget__close", "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M3 3l8 8M11 3l-8 8" }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ph-widget__content", children })
+  ] });
+}
+Widget.displayName = "Widget";
+
+// src/components/ui/Lettermark.tsx
+var import_react28 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var Lettermark = (0, import_react28.forwardRef)(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__ */ (0, import_jsx_runtime57.jsx)(
+    "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
+var import_jsx_runtime58 = require("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__ */ (0, import_jsx_runtime58.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn("ph-splotch", colorMap[color], className),
+      "aria-hidden": "true"
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ph-splotch__paint" })
+    })
+  );
+}
+Splotch.displayName = "Splotch";
+
+// src/components/ui/Popover.tsx
+var import_react29 = require("react");
+var import_jsx_runtime59 = require("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] = (0, import_react29.useState)(false);
+  const isOpen = controlledOpen != null ? controlledOpen : internalOpen;
+  const setOpen = onOpenChange != null ? onOpenChange : setInternalOpen;
+  const triggerRef = (0, import_react29.useRef)(null);
+  const panelRef = (0, import_react29.useRef)(null);
+  (0, import_react29.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime59.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-popover relative inline-flex", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: () => setOpen(!isOpen),
+        className: "ph-popover__trigger",
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      "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
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function LoadingBar(_a) {
+  var _b = _a, { active = true, className } = _b, props = __objRest(_b, ["active", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "ph-loading-bar",
+        active && "ph-loading-bar--active",
+        className
+      ),
+      role: "progressbar",
+      "aria-label": "Loading"
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ph-loading-bar__fill" })
+    })
+  );
+}
+LoadingBar.displayName = "LoadingBar";
+
+// src/components/ui/Link.tsx
+var import_react30 = require("react");
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var Link = (0, import_react30.forwardRef)(function Link2(_a, ref) {
+  var _b = _a, {
+    className,
+    disabled = false,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "disabled",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    "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
+var import_jsx_runtime62 = require("react/jsx-runtime");
+function Spinner(_a) {
+  var _b = _a, { size = "sm", textColored = false, className } = _b, props = __objRest(_b, ["size", "textColored", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    "span",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "ph-spinner",
+        `ph-spinner--${size}`,
+        textColored && "ph-spinner--text-colored",
+        className
+      ),
+      role: "status",
+      "aria-label": "Loading"
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "ph-spinner__svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", opacity: 0.2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+      ] })
+    })
+  );
+}
+Spinner.displayName = "Spinner";
+
+// src/components/ui/Snack.tsx
+var import_react31 = require("react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var Snack = (0, import_react31.forwardRef)(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__ */ (0, import_jsx_runtime63.jsxs)(
+    "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__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ph-snack__text", children }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose();
+            },
+            className: "ph-snack__close",
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("path", { d: "M3 3l6 6M9 3l-6 6" }) })
+          }
+        )
+      ]
+    })
+  );
+});
+Snack.displayName = "Snack";
+
+// src/components/ui/Combobox.tsx
+var import_react32 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+function Combobox({
+  options,
+  value = [],
+  onChange,
+  placeholder = "Search...",
+  className,
+  disabled
+}) {
+  const [open, setOpen] = (0, import_react32.useState)(false);
+  const [search, setSearch] = (0, import_react32.useState)("");
+  const inputRef = (0, import_react32.useRef)(null);
+  const containerRef = (0, import_react32.useRef)(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);
+  };
+  (0, import_react32.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime64.jsxs)("div", { ref: containerRef, className: cn("ph-combobox relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "ph-combobox__input-wrap", children: [
+      value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "ph-combobox__chips", children: value.map((v) => {
+        var _a, _b;
+        const opt = options.find((o) => o.value === v);
+        return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "ph-combobox__chip", children: [
+          (_a = opt == null ? void 0 : opt.label) != null ? _a : v,
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            "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__ */ (0, import_jsx_runtime64.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+            }
+          )
+        ] }, v);
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        "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__ */ (0, import_jsx_runtime64.jsx)("div", { className: "ph-combobox__dropdown", children: filtered.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+      "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__ */ (0, import_jsx_runtime64.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M2.5 6l2.5 2.5 4.5-5" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: opt.label })
+        ]
+      },
+      opt.value
+    )) })
+  ] });
+}
+Combobox.displayName = "Combobox";
+
+// src/components/ui/Autocomplete.tsx
+var import_react33 = require("react");
+var import_jsx_runtime65 = require("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] = (0, import_react33.useState)(false);
+  const [search, setSearch] = (0, import_react33.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react33.useState)(-1);
+  const containerRef = (0, import_react33.useRef)(null);
+  const inputRef = (0, import_react33.useRef)(null);
+  const listRef = (0, import_react33.useRef)(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);
+  };
+  (0, import_react33.useEffect)(() => {
+    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]);
+  (0, import_react33.useEffect)(() => {
+    if (activeIndex >= 0 && listRef.current) {
+      const el = listRef.current.children[activeIndex];
+      el == null ? void 0 : el.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ref: containerRef, className: cn("ph-autocomplete relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "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__ */ (0, import_jsx_runtime65.jsx)("div", { ref: listRef, className: "ph-autocomplete__dropdown", role: "listbox", children: filtered.map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "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
+var import_react34 = require("react");
+var import_jsx_runtime66 = require("react/jsx-runtime");
+function ContextMenu(_a) {
+  var _b = _a, { items, children, className } = _b, props = __objRest(_b, ["items", "children", "className"]);
+  const [open, setOpen] = (0, import_react34.useState)(false);
+  const [pos, setPos] = (0, import_react34.useState)({ x: 0, y: 0 });
+  const menuRef = (0, import_react34.useRef)(null);
+  (0, import_react34.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime66.jsxs)(
+    "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__ */ (0, import_jsx_runtime66.jsx)(
+          "div",
+          {
+            ref: menuRef,
+            className: "ph-context-menu__panel",
+            style: { left: pos.x, top: pos.y },
+            children: items.map(
+              (item, i) => item.separator ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "ph-context-menu__separator" }, i) : /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+                "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__ */ (0, import_jsx_runtime66.jsx)("span", { className: "ph-context-menu__icon", children: item.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: item.label })
+                  ]
+                },
+                i
+              )
+            )
+          }
+        )
+      ]
+    })
+  );
+}
+ContextMenu.displayName = "ContextMenu";
+
+// src/components/ui/Resizable.tsx
+var import_react35 = require("react");
+var import_jsx_runtime67 = require("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] = (0, import_react35.useState)(defaultLeftWidth);
+  const dragging = (0, import_react35.useRef)(false);
+  const containerRef = (0, import_react35.useRef)(null);
+  const handleMouseDown = (0, import_react35.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__ */ (0, import_jsx_runtime67.jsxs)(
+    "div",
+    __spreadProps(__spreadValues({
+      ref: containerRef,
+      className: cn("ph-resizable flex overflow-hidden", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "ph-resizable__left overflow-auto", style: { width: `${leftPercent}%` }, children: left }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          "div",
+          {
+            className: "ph-resizable__handle cursor-col-resize shrink-0",
+            onMouseDown: handleMouseDown
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "ph-resizable__right flex-1 overflow-auto", children: right })
+      ]
+    })
+  );
+}
+Resizable.displayName = "Resizable";
+
+// src/components/ui/ScrollArea.tsx
+var import_react36 = require("react");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+function ScrollArea(_a) {
+  var _b = _a, {
+    children,
+    orientation = "vertical",
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "orientation",
+    "className"
+  ]);
+  const viewportRef = (0, import_react36.useRef)(null);
+  const [showTop, setShowTop] = (0, import_react36.useState)(false);
+  const [showBottom, setShowBottom] = (0, import_react36.useState)(false);
+  (0, import_react36.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime68.jsxs)(
+    "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__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ph-scroll-area__shadow-top" }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ref: viewportRef, className: "ph-scroll-area__viewport overflow-y-auto overscroll-contain", children }),
+        showBottom && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ph-scroll-area__shadow-bottom" })
+      ]
+    })
+  );
+}
+ScrollArea.displayName = "ScrollArea";
+
+// src/components/ui/NumberField.tsx
+var import_react37 = require("react");
+var import_jsx_runtime69 = require("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] = (0, import_react37.useState)(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__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("ph-number-field", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("label", { className: "ph-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ph-number-field__control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: disabled || min !== void 0 && value <= min,
+          onClick: () => set(value - step),
+          className: "ph-number-field__btn",
+          "aria-label": "Decrease",
+          children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("svg", { width: "12", height: "2", viewBox: "0 0 12 2", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("rect", { y: "0", width: "12", height: "2", rx: "1" }) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        "input",
+        __spreadValues({
+          type: "number",
+          value,
+          onChange: (e) => set(Number(e.target.value)),
+          disabled,
+          min,
+          max,
+          step,
+          className: "ph-number-field__input"
+        }, inputProps)
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: disabled || max !== void 0 && value >= max,
+          onClick: () => set(value + step),
+          className: "ph-number-field__btn",
+          "aria-label": "Increase",
+          children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M6 2v8M2 6h8" }) })
+        }
+      )
+    ] })
+  ] });
+}
+NumberField.displayName = "NumberField";
+
+// src/components/ui/InputGroup.tsx
+var import_jsx_runtime70 = require("react/jsx-runtime");
+function InputGroup(_a) {
+  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-input-group", className) }, props), { children }));
+}
+InputGroup.displayName = "InputGroup";
+
+// src/components/ui/ButtonGroup.tsx
+var import_jsx_runtime71 = require("react/jsx-runtime");
+function ButtonGroup(_a) {
+  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", __spreadProps(__spreadValues({ className: cn("ph-btn-group", className) }, props), { children }));
+}
+ButtonGroup.displayName = "ButtonGroup";
+
+// src/components/ui/Toggle.tsx
+var import_react38 = require("react");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var ToggleButton = (0, import_react38.forwardRef)(function ToggleButton2(_a, ref) {
+  var _b = _a, {
+    pressed = false,
+    onPressedChange,
+    icon,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "pressed",
+    "onPressedChange",
+    "icon",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+    "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__ */ (0, import_jsx_runtime72.jsx)("span", { className: "ph-toggle-btn__icon", children: icon }),
+        children
+      ]
+    })
+  );
+});
+ToggleButton.displayName = "ToggleButton";
+function ToggleGroup({
+  type = "single",
+  value,
+  onValueChange,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: cn("ph-toggle-group", className), role: "group", children });
+}
+ToggleGroup.displayName = "ToggleGroup";
+
+// src/components/ui/Menubar.tsx
+var import_react39 = require("react");
+var import_jsx_runtime73 = require("react/jsx-runtime");
+function Menubar(_a) {
+  var _b = _a, { items, className } = _b, props = __objRest(_b, ["items", "className"]);
+  const [openIndex, setOpenIndex] = (0, import_react39.useState)(-1);
+  const barRef = (0, import_react39.useRef)(null);
+  (0, import_react39.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime73.jsx)("div", __spreadProps(__spreadValues({ ref: barRef, className: cn("ph-menubar", className) }, props), { children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ph-menubar__item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      "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__ */ (0, import_jsx_runtime73.jsx)("div", { className: "ph-menubar__dropdown", children: item.items.map(
+      (sub, j) => sub.separator ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "ph-menubar__separator" }, j) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        "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
+var import_react40 = require("react");
+var import_jsx_runtime74 = require("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] = (0, import_react40.useState)(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__ */ (0, import_jsx_runtime74.jsx)(
+    Modal,
+    __spreadProps(__spreadValues({
+      open: isOpen,
+      onClose,
+      title,
+      footer: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Button, __spreadProps(__spreadValues({ variant: "secondary" }, cancelProps), { onClick: onClose, children: cancelText })),
+        onConfirm && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Button, __spreadProps(__spreadValues({ variant: "primary", loading }, confirmProps), { onClick: handleConfirm, children: confirmText }))
+      ] })
+    }, modalProps), {
+      children
+    })
+  );
+}
+AlertDialog.displayName = "AlertDialog";
+
+// src/components/ui/Dot.tsx
+var import_jsx_runtime75 = require("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__ */ (0, import_jsx_runtime75.jsx)(
+    "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
+var import_react41 = require("react");
+var import_jsx_runtime76 = require("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] = (0, import_react41.useState)(false);
+  const isOpen = controlledOpen != null ? controlledOpen : internalOpen;
+  const setOpen = onOpenChange != null ? onOpenChange : setInternalOpen;
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-collapsible", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!isOpen),
+        className: "ph-collapsible__trigger",
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+            "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__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M4 5l3 3 3-3" })
+            }
+          ),
+          trigger
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "ph-collapsible__content", children })
+  ] }));
+}
+Collapsible.displayName = "Collapsible";
+
+// src/components/ui/Metric.tsx
+var import_jsx_runtime77 = require("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__ */ (0, import_jsx_runtime77.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-metric", className) }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "ph-metric__header", children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "ph-metric__icon", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "ph-metric__label", children: label }),
+      badge && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "ph-metric__badge", children: badge })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "ph-metric__value", children: value }),
+    trend && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "ph-metric__trend", children: trend })
+  ] }));
+}
+Metric.displayName = "Metric";
+
+// src/components/ui/Chip.tsx
+var import_react42 = require("react");
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var Chip = (0, import_react42.forwardRef)(function Chip2(_a, ref) {
+  var _b = _a, {
+    selected = false,
+    onRemove,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "selected",
+    "onRemove",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    "button",
+    __spreadProps(__spreadValues({
+      ref,
+      type: "button",
+      className: cn(
+        "ph-chip",
+        selected && "ph-chip--selected",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ph-chip__text", children }),
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          "span",
+          {
+            role: "button",
+            tabIndex: -1,
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            className: "ph-chip__remove",
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+          }
+        )
+      ]
+    })
+  );
+});
+Chip.displayName = "Chip";
+
+// src/components/ui/DataTable.tsx
+var import_react43 = require("react");
+var import_jsx_runtime79 = require("react/jsx-runtime");
+function DataTable({
+  columns,
+  data,
+  pageSize = 10,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  className
+}) {
+  const [search, setSearch] = (0, import_react43.useState)("");
+  const [sortKey, setSortKey] = (0, import_react43.useState)(null);
+  const [sortDir, setSortDir] = (0, import_react43.useState)("asc");
+  const [page, setPage] = (0, import_react43.useState)(0);
+  const filtered = (0, import_react43.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__ */ (0, import_jsx_runtime79.jsxs)("div", { className: cn("ph-data-table", className), children: [
+    searchable && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "ph-data-table__toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      "input",
+      {
+        type: "text",
+        value: search,
+        onChange: (e) => {
+          setSearch(e.target.value);
+          setPage(0);
+        },
+        placeholder: searchPlaceholder,
+        className: "ph-input ph-input-sm"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "ph-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("table", { className: "ph-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+        "th",
+        {
+          className: cn(col.sortable && "cursor-pointer select-none", col.className),
+          onClick: () => col.sortable && handleSort(col.key),
+          children: [
+            col.label,
+            sortKey === col.key && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "ml-1 inline-block", children: sortDir === "asc" ? "\u2191" : "\u2193" })
+          ]
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("tbody", { children: [
+        paged.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("td", { className: col.className, children: col.render ? col.render(item) : item[col.key] }, col.key)) }, i)),
+        paged.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("td", { colSpan: columns.length, className: "text-center text-ph-mutedtext py-8", children: "No results" }) })
+      ] })
+    ] }) }),
+    totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "ph-data-table__pagination", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("button", { disabled: page === 0, onClick: () => setPage((p) => p - 1), className: "ph-data-table__page-btn", children: "Previous" }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "text-xs text-ph-mutedtext", children: [
+        "Page ",
+        page + 1,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("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
+var import_react44 = require("react");
+var import_jsx_runtime80 = require("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] = (0, import_react44.useState)(false);
+  const [viewDate, setViewDate] = (0, import_react44.useState)(value != null ? value : /* @__PURE__ */ new Date());
+  const selected = value;
+  const days = (0, import_react44.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime80.jsxs)("div", { className: cn("ph-datepicker relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      "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__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "ph-datepicker__dropdown", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "ph-datepicker__nav", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("button", { type: "button", onClick: () => nav(-1), className: "ph-datepicker__nav-btn", "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "M7 3L4 6l3 3" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "ph-datepicker__nav-label", children: [
+          MONTHS[viewDate.getMonth()],
+          " ",
+          viewDate.getFullYear()
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("button", { type: "button", onClick: () => nav(1), className: "ph-datepicker__nav-btn", "aria-label": "Next month", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "M5 3l3 3-3 3" }) }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "ph-datepicker__grid", children: [
+        DAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "ph-datepicker__day-header", children: d }, d)),
+        days.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          "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
+var import_jsx_runtime81 = require("react/jsx-runtime");
+function AppLayout({ sidebar, children, sidebarWidth = 240, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+    "div",
+    {
+      className: cn("ph-app-layout grid min-h-screen", className),
+      style: { gridTemplateColumns: `${sidebarWidth}px minmax(0, 1fr)` },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("aside", { className: "ph-app-layout__sidebar border-r border-ph-border bg-ph-surface overflow-y-auto", children: sidebar }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("main", { className: "ph-app-layout__content min-w-0 overflow-y-auto bg-ph-canvas", children })
+      ]
+    }
+  );
+}
+
+// src/components/ui/Sidebar.tsx
+var import_jsx_runtime82 = require("react/jsx-runtime");
+function Sidebar({ groups, className, header, footer, collapsed = false, onCollapse }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("nav", { className: cn("ph-sidebar flex flex-col h-full", collapsed && "ph-sidebar--collapsed", className), children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "ph-sidebar__header px-3 py-3 border-b border-ph-border-subtle", children: header }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "ph-sidebar__body flex-1 overflow-y-auto px-2 py-3 space-y-5", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "ph-sidebar__group", children: [
+      !collapsed && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("h3", { className: "ph-sidebar__group-label px-2 mb-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext", children: group.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "ph-sidebar__items space-y-0.5", children: group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SidebarItem, __spreadProps(__spreadValues({}, item), { collapsed }), item.label)) })
+    ] }, group.label)) }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "ph-sidebar__footer px-3 py-3 border-t border-ph-border-subtle", children: footer })
+  ] });
+}
+function SidebarItem({ label, icon, badge, active, onClick, collapsed }) {
+  const Comp = onClick ? "button" : "a";
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+    Comp,
+    {
+      type: onClick ? "button" : void 0,
+      href: onClick ? void 0 : void 0,
+      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__ */ (0, import_jsx_runtime82.jsx)("span", { className: "ph-sidebar__item-icon shrink-0 w-4 h-4 flex items-center justify-center", children: icon }),
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "ph-sidebar__item-label truncate flex-1", children: label }),
+        !collapsed && badge && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "ph-sidebar__item-badge shrink-0", children: badge })
+      ]
+    }
+  );
+}
+Sidebar.displayName = "Sidebar";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
   Alert,
+  AlertDialog,
+  AppLayout,
   AuthCard,
   AuthDivider,
   AuthLayout,
+  Autocomplete,
   Avatar,
   AvatarGroup,
   Badge,
+  Banner,
   Breadcrumbs,
   Button,
   ButtonChrome,
+  ButtonGroup,
   Calendar,
   Caption,
   Card,
   ChatBubble,
   Checkbox,
+  Chip,
   CodeBlock,
+  Collapsible,
   CollapsibleSection,
+  Combobox,
   CommandPalette,
   ComponentDocs,
+  ContextMenu,
+  DataTable,
+  DatePicker,
+  Dialog,
   Display,
+  Divider,
+  Dot,
   Drawer,
   DropdownButton,
   DropdownItem,
@@ -3823,21 +5631,33 @@ function Timeline(_a) {
   IconByName,
   Indicator,
   Input,
+  InputGroup,
   Kbd,
   Label,
   Lead,
+  Lettermark,
+  Link,
   Loader,
+  LoadingBar,
   LoadingState,
+  Menubar,
+  Metric,
   Modal,
   Mono,
+  NumberField,
   Overline,
   P,
   Pagination,
   Panel,
+  Popover,
   Progress,
+  ProgressCircle,
   Radio,
   Range,
   Rating,
+  Resizable,
+  Row,
+  ScrollArea,
   SearchGroup,
   SearchInput,
   SegmentedControl,
@@ -3845,13 +5665,18 @@ function Timeline(_a) {
   SettingsLayout,
   SettingsNav,
   ShowcaseWrapper,
+  Sidebar,
   Skeleton,
   Small,
+  Snack,
   SortMenu,
+  Spinner,
+  Splotch,
   Stat,
   Stepper,
   Table,
   Tabs,
+  Tag,
   Terminal,
   Textarea,
   ThemeDomSync,
@@ -3860,5 +5685,10 @@ function Timeline(_a) {
   Timeline,
   Toast,
   ToastStack,
-  Toggle
+  Toggle,
+  ToggleButton,
+  ToggleGroup,
+  Tooltip,
+  TooltipProvider,
+  Widget
 });