@xenide-io/the-old-ui-theme 0.2.4 → 0.2.6

package/dist/index.mjs

@@ -1,3 +1,9 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
 // src/components/ui/ButtonChrome.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function ButtonChrome({ label, icon, sideIcon, split }) {
@@ -42,19 +48,30 @@ var shapeClass = {
   square: "ph-btn-square",
   wide: "ph-btn-wide"
 };
-function Button({
-  variant = "secondary",
-  size = "md",
-  shape = "default",
-  outline = false,
-  split = false,
-  icon,
-  sideIcon,
-  className,
-  children,
-  type = "button",
-  ...props
-}) {
+function Button(_a) {
+  var _b = _a, {
+    variant = "secondary",
+    size = "md",
+    shape = "default",
+    outline = false,
+    split = false,
+    icon,
+    sideIcon,
+    className,
+    children,
+    type = "button"
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "shape",
+    "outline",
+    "split",
+    "icon",
+    "sideIcon",
+    "className",
+    "children",
+    "type"
+  ]);
   const usesLemonChrome = variant === "primary" || variant === "secondary";
   const content = usesLemonChrome ? /* @__PURE__ */ jsx2(ButtonChrome, { label: children, icon, sideIcon, split }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
     icon != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-icon", children: icon }) : null,
@@ -64,7 +81,7 @@ function Button({
   ] });
   return /* @__PURE__ */ jsx2(
     "button",
-    {
+    __spreadProps(__spreadValues({
       type,
       className: cn(
         "ph-btn",
@@ -74,39 +91,48 @@ function Button({
         shapeClass[shape],
         split && "ph-btn-split",
         className
-      ),
-      ...props,
+      )
+    }, props), {
       children: content
-    }
+    })
   );
 }
 
 // src/components/icons/IconBase.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-function IconBase({
-  className,
-  size,
-  children,
-  viewBox = "0 0 24 24",
-  fill: fill2 = "none",
-  xmlns = "http://www.w3.org/2000/svg",
-  focusable = "false",
-  ...props
-}) {
+function IconBase(_a) {
+  var _b = _a, {
+    className,
+    size,
+    children,
+    viewBox = "0 0 24 24",
+    fill: fill2 = "none",
+    xmlns = "http://www.w3.org/2000/svg",
+    focusable = "false"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "size",
+    "children",
+    "viewBox",
+    "fill",
+    "xmlns",
+    "focusable"
+  ]);
+  var _a2;
   const dimensionProps = size != null ? { width: size, height: size } : {};
   return /* @__PURE__ */ jsx3(
     "svg",
-    {
-      className: cn("ph-icon", className),
-      ...dimensionProps,
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+      className: cn("ph-icon", className)
+    }, dimensionProps), {
       viewBox,
       fill: fill2,
       xmlns,
       focusable,
-      "aria-hidden": props["aria-hidden"] ?? true,
-      ...props,
+      "aria-hidden": (_a2 = props["aria-hidden"]) != null ? _a2 : true
+    }), props), {
       children
-    }
+    })
   );
 }
 
@@ -114,7 +140,7 @@ function IconBase({
 import { jsx as jsx4 } from "react/jsx-runtime";
 function createIconBase({ viewBox = "0 0 24 24", paths }) {
   return function IconGlyph(props) {
-    return /* @__PURE__ */ jsx4(IconBase, { viewBox, ...props, children: paths });
+    return /* @__PURE__ */ jsx4(IconBase, __spreadProps(__spreadValues({ viewBox }, props), { children: paths }));
   };
 }
 function createIconBasePath(d, viewBox = "0 0 24 24") {
@@ -337,8 +363,9 @@ var IconActivity = createIconBasePath(
 var IconFlask = createIconBasePath(
   "M19.8 18.4L14 10.67V6.5l1.35-1.35c.39-.39.39-1.02 0-1.41L14.65 2.7a.9959.9959 0 0 0-1.41 0L9.35 6.54c-.39.39-.39 1.02 0 1.41L10.7 9.3v4.17L4.2 18.4C3.53 19.07 4.04 20.25 5 20.25h14c.96 0 1.47-1.18.8-1.85zM6.91 18.25l5.09-5.09 5.09 5.09H6.91z"
 );
-function IconSpinner({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(IconSync, { className: cn("ph-icon-spin", className), ...props });
+function IconSpinner(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx5(IconSync, __spreadValues({ className: cn("ph-icon-spin", className) }, props));
 }
 var PH_ICONS = {
   activity: IconActivity,
@@ -410,9 +437,10 @@ var PH_ICONS = {
   warning: IconExclamation,
   xCircle: IconCancel
 };
-function IconByName({ name, ...props }) {
+function IconByName(_a) {
+  var _b = _a, { name } = _b, props = __objRest(_b, ["name"]);
   const Icon = PH_ICONS[name];
-  return /* @__PURE__ */ jsx5(Icon, { ...props });
+  return /* @__PURE__ */ jsx5(Icon, __spreadValues({}, props));
 }
 
 // src/components/ui/Alert.tsx
@@ -446,7 +474,7 @@ function Alert({
       role: "alert",
       className: cn("ph-alert", statusClassMap[status], className),
       children: [
-        icon ?? /* @__PURE__ */ jsx6(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color) }),
+        icon != null ? icon : /* @__PURE__ */ jsx6(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color) }),
         /* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
           title && /* @__PURE__ */ jsx6("p", { className: "font-semibold", children: title }),
           description && /* @__PURE__ */ jsx6("p", { className: "mt-1 text-sm text-ph-subtle", children: description }),
@@ -592,12 +620,13 @@ function Drawer({
 
 // src/components/ui/Kbd.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-function Kbd({ variant = "shortcut", keys, children, className, ...props }) {
+function Kbd(_a) {
+  var _b = _a, { variant = "shortcut", keys, children, className } = _b, props = __objRest(_b, ["variant", "keys", "children", "className"]);
   if (variant === "token") {
-    return /* @__PURE__ */ jsx10("code", { className: cn("ph-kbd text-ph-ink", className), ...props, children });
+    return /* @__PURE__ */ jsx10("code", __spreadProps(__spreadValues({ className: cn("ph-kbd text-ph-ink", className) }, props), { children }));
   }
   const content = (keys == null ? void 0 : keys.length) ? keys.join(" ") : normalizeShortcut(children);
-  return /* @__PURE__ */ jsx10("kbd", { className: cn("ph-shortcut", className), ...props, children: content });
+  return /* @__PURE__ */ jsx10("kbd", __spreadProps(__spreadValues({ className: cn("ph-shortcut", className) }, props), { children: content }));
 }
 function normalizeShortcut(children) {
   if (typeof children !== "string") return children;
@@ -624,16 +653,23 @@ function dropdownPanelClass(align, panelClassName) {
     panelClassName
   );
 }
-function DropdownMenu({
-  trigger,
-  children,
-  align = "start",
-  className,
-  panelClassName,
-  "aria-label": ariaLabel,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs7("details", { className: cn("relative", className), ...props, children: [
+function DropdownMenu(_a) {
+  var _b = _a, {
+    trigger,
+    children,
+    align = "start",
+    className,
+    panelClassName,
+    "aria-label": ariaLabel
+  } = _b, props = __objRest(_b, [
+    "trigger",
+    "children",
+    "align",
+    "className",
+    "panelClassName",
+    "aria-label"
+  ]);
+  return /* @__PURE__ */ jsxs7("details", __spreadProps(__spreadValues({ className: cn("relative", className) }, props), { children: [
     /* @__PURE__ */ jsx11(
       "summary",
       {
@@ -643,27 +679,40 @@ function DropdownMenu({
       }
     ),
     /* @__PURE__ */ jsx11("div", { className: dropdownPanelClass(align, panelClassName), children })
-  ] });
-}
-function DropdownButton({
-  label,
-  variant = "secondary",
-  outline = false,
-  size = "md",
-  split = false,
-  icon,
-  sideIcon,
-  children,
-  align = "start",
-  className,
-  panelClassName,
-  "aria-label": ariaLabel,
-  ...props
-}) {
+  ] }));
+}
+function DropdownButton(_a) {
+  var _b = _a, {
+    label,
+    variant = "secondary",
+    outline = false,
+    size = "md",
+    split = false,
+    icon,
+    sideIcon,
+    children,
+    align = "start",
+    className,
+    panelClassName,
+    "aria-label": ariaLabel
+  } = _b, props = __objRest(_b, [
+    "label",
+    "variant",
+    "outline",
+    "size",
+    "split",
+    "icon",
+    "sideIcon",
+    "children",
+    "align",
+    "className",
+    "panelClassName",
+    "aria-label"
+  ]);
   const usesLemonChrome = variant === "primary" || variant === "secondary";
   const chevron = /* @__PURE__ */ jsx11(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
-  const trailing = sideIcon ?? chevron;
-  return /* @__PURE__ */ jsxs7("details", { className: cn("relative", className), ...props, children: [
+  const trailing = sideIcon != null ? sideIcon : chevron;
+  return /* @__PURE__ */ jsxs7("details", __spreadProps(__spreadValues({ className: cn("relative", className) }, props), { children: [
     /* @__PURE__ */ jsx11(
       "summary",
       {
@@ -674,7 +723,7 @@ function DropdownButton({
           sizeClass2[size],
           split && "ph-btn-split"
         ),
-        "aria-label": ariaLabel ?? label,
+        "aria-label": ariaLabel != null ? ariaLabel : label,
         children: usesLemonChrome ? /* @__PURE__ */ jsx11(ButtonChrome, { label, icon, sideIcon: trailing, split }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
           icon != null ? /* @__PURE__ */ jsx11("span", { className: "ph-btn-icon", children: icon }) : null,
           /* @__PURE__ */ jsx11("span", { className: "ph-btn-label", children: label }),
@@ -683,14 +732,17 @@ function DropdownButton({
       }
     ),
     /* @__PURE__ */ jsx11("div", { className: dropdownPanelClass(align, panelClassName), children })
-  ] });
+  ] }));
 }
-function DropdownItem({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx11("button", { type: "button", className: cn("ph-dropdown-item w-full text-left", className), ...props, children });
+function DropdownItem(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx11("button", __spreadProps(__spreadValues({ type: "button", className: cn("ph-dropdown-item w-full text-left", className) }, props), { children }));
 }
 
 // src/components/ui/Input.tsx
@@ -701,21 +753,32 @@ var sizeMap3 = {
   md: "",
   lg: "ph-input-lg"
 };
-function Input({
-  id: idProp,
-  label,
-  hideLabel = false,
-  error,
-  helperText,
-  size = "md",
-  variant = "default",
-  className,
-  wrapperClassName,
-  disabled,
-  ...props
-}) {
+function Input(_a) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    hideLabel = false,
+    error,
+    helperText,
+    size = "md",
+    variant = "default",
+    className,
+    wrapperClassName,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "hideLabel",
+    "error",
+    "helperText",
+    "size",
+    "variant",
+    "className",
+    "wrapperClassName",
+    "disabled"
+  ]);
   const autoId = useId();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
   return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ jsx12(
@@ -732,7 +795,7 @@ function Input({
     ),
     /* @__PURE__ */ jsx12(
       "input",
-      {
+      __spreadValues({
         id,
         disabled,
         "aria-invalid": hasError || void 0,
@@ -743,29 +806,39 @@ function Input({
           hasError && "ph-input-error",
           disabled && "cursor-not-allowed opacity-60",
           className
-        ),
-        ...props
-      }
+        )
+      }, props)
     ),
     helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
     error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
   ] });
 }
-function Select({
-  id: idProp,
-  label,
-  hideLabel = false,
-  error,
-  helperText,
-  size = "md",
-  className,
-  wrapperClassName,
-  disabled,
-  children,
-  ...props
-}) {
+function Select(_a) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    hideLabel = false,
+    error,
+    helperText,
+    size = "md",
+    className,
+    wrapperClassName,
+    disabled,
+    children
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "hideLabel",
+    "error",
+    "helperText",
+    "size",
+    "className",
+    "wrapperClassName",
+    "disabled",
+    "children"
+  ]);
   const autoId = useId();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
   return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ jsx12(
@@ -778,7 +851,7 @@ function Select({
     ),
     /* @__PURE__ */ jsx12(
       "select",
-      {
+      __spreadProps(__spreadValues({
         id,
         disabled,
         "aria-invalid": hasError || void 0,
@@ -788,29 +861,39 @@ function Select({
           hasError && "border-ph-danger focus:border-ph-danger focus:ring-ph-danger/20",
           disabled && "cursor-not-allowed opacity-60",
           className
-        ),
-        ...props,
+        )
+      }, props), {
         children
-      }
+      })
     ),
     helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
     error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
   ] });
 }
-function Textarea({
-  id: idProp,
-  label,
-  hideLabel = false,
-  error,
-  helperText,
-  size = "md",
-  className,
-  wrapperClassName,
-  disabled,
-  ...props
-}) {
+function Textarea(_a) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    hideLabel = false,
+    error,
+    helperText,
+    size = "md",
+    className,
+    wrapperClassName,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "hideLabel",
+    "error",
+    "helperText",
+    "size",
+    "className",
+    "wrapperClassName",
+    "disabled"
+  ]);
   const autoId = useId();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
   return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ jsx12(
@@ -823,7 +906,7 @@ function Textarea({
     ),
     /* @__PURE__ */ jsx12(
       "textarea",
-      {
+      __spreadValues({
         id,
         disabled,
         "aria-invalid": hasError || void 0,
@@ -833,31 +916,38 @@ function Textarea({
           hasError && "border-ph-danger focus:border-ph-danger focus:ring-ph-danger/20",
           disabled && "cursor-not-allowed opacity-60",
           className
-        ),
-        ...props
-      }
+        )
+      }, props)
     ),
     helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
     error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
   ] });
 }
-function Checkbox({
-  id: idProp,
-  label,
-  error,
-  helperText,
-  className,
-  wrapperClassName,
-  disabled,
-  ...props
-}) {
+function Checkbox(_a) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    error,
+    helperText,
+    className,
+    wrapperClassName,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "error",
+    "helperText",
+    "className",
+    "wrapperClassName",
+    "disabled"
+  ]);
   const autoId = useId();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
   return /* @__PURE__ */ jsxs8("div", { className: cn("ph-control-row", wrapperClassName), children: [
     /* @__PURE__ */ jsx12(
       "input",
-      {
+      __spreadValues({
         id,
         type: "checkbox",
         disabled,
@@ -867,76 +957,92 @@ function Checkbox({
           hasError && "border-ph-danger",
           disabled && "cursor-not-allowed opacity-60",
           className
-        ),
-        ...props
-      }
+        )
+      }, props)
     ),
     /* @__PURE__ */ jsx12("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
     helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-xs text-ph-subtle", children: helperText }),
     error && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-xs font-medium text-ph-danger", children: error })
   ] });
 }
-function Radio({
-  id: idProp,
-  label,
-  className,
-  wrapperClassName,
-  disabled,
-  ...props
-}) {
+function Radio(_a) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    className,
+    wrapperClassName,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "className",
+    "wrapperClassName",
+    "disabled"
+  ]);
   const autoId = useId();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   return /* @__PURE__ */ jsxs8("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
     /* @__PURE__ */ jsx12(
       "input",
-      {
+      __spreadValues({
         id,
         type: "radio",
         disabled,
-        className: cn("ph-radio", disabled && "cursor-not-allowed", className),
-        ...props
-      }
+        className: cn("ph-radio", disabled && "cursor-not-allowed", className)
+      }, props)
     ),
     /* @__PURE__ */ jsx12("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
   ] });
 }
-function Toggle({
-  id: idProp,
-  label,
-  className,
-  wrapperClassName,
-  disabled,
-  ...props
-}) {
+function Toggle(_a) {
+  var _b = _a, {
+    id: idProp,
+    label,
+    className,
+    wrapperClassName,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "className",
+    "wrapperClassName",
+    "disabled"
+  ]);
   const autoId = useId();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   return /* @__PURE__ */ jsxs8("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
     /* @__PURE__ */ jsx12("span", { className: disabled ? "opacity-60" : void 0, children: label }),
     /* @__PURE__ */ jsx12(
       "input",
-      {
+      __spreadValues({
         id,
         type: "checkbox",
         role: "switch",
         disabled,
-        className: cn("ph-toggle", disabled && "cursor-not-allowed", className),
-        ...props
-      }
+        className: cn("ph-toggle", disabled && "cursor-not-allowed", className)
+      }, props)
     )
   ] });
 }
-function Range({
-  label,
-  minLabel,
-  maxLabel,
-  valueLabel,
-  wrapperClassName,
-  className,
-  ...props
-}) {
+function Range(_a) {
+  var _b = _a, {
+    label,
+    minLabel,
+    maxLabel,
+    valueLabel,
+    wrapperClassName,
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "minLabel",
+    "maxLabel",
+    "valueLabel",
+    "wrapperClassName",
+    "className"
+  ]);
   return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ jsx12("label", { className: "ph-label", children: label }),
-    /* @__PURE__ */ jsx12("input", { type: "range", className: cn("ph-range", className), ...props }),
+    /* @__PURE__ */ jsx12("input", __spreadValues({ type: "range", className: cn("ph-range", className) }, props)),
     (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ jsxs8("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
       /* @__PURE__ */ jsx12("span", { children: minLabel }),
       /* @__PURE__ */ jsx12("span", { children: valueLabel }),
@@ -944,11 +1050,12 @@ function Range({
     ] })
   ] });
 }
-function FileUpload({ label, prompt = "Drop file or browse", wrapperClassName, className, ...props }) {
+function FileUpload(_a) {
+  var _b = _a, { label, prompt = "Drop file or browse", wrapperClassName, className } = _b, props = __objRest(_b, ["label", "prompt", "wrapperClassName", "className"]);
   return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ jsx12("label", { className: "ph-label", children: label }),
     /* @__PURE__ */ jsxs8("label", { className: "flex cursor-pointer items-center gap-3 rounded-lg border border-dashed border-ph-border bg-ph-surface px-4 py-6 text-sm text-ph-subtle transition hover:bg-ph-muted/60", children: [
-      /* @__PURE__ */ jsx12("input", { type: "file", className: cn("sr-only", className), ...props }),
+      /* @__PURE__ */ jsx12("input", __spreadValues({ type: "file", className: cn("sr-only", className) }, props)),
       prompt
     ] })
   ] });
@@ -1069,36 +1176,45 @@ function Pagination({
 
 // src/components/ui/Panel.tsx
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-function Panel({ title, description, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs11("div", { className: cn("ph-panel", className), ...props, children: [
+function Panel(_a) {
+  var _b = _a, { title, description, children, className } = _b, props = __objRest(_b, ["title", "description", "children", "className"]);
+  return /* @__PURE__ */ jsxs11("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
     title && /* @__PURE__ */ jsx15("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
     description && /* @__PURE__ */ jsx15("p", { className: "text-sm text-ph-subtle", children: description }),
     children
-  ] });
+  ] }));
 }
 
 // src/components/ui/Rating.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-function Rating({
-  label,
-  value = 0,
-  max = 5,
-  readOnly = true,
-  onChange,
-  className,
-  wrapperClassName,
-  ...props
-}) {
+function Rating(_a) {
+  var _b = _a, {
+    label,
+    value = 0,
+    max = 5,
+    readOnly = true,
+    onChange,
+    className,
+    wrapperClassName
+  } = _b, props = __objRest(_b, [
+    "label",
+    "value",
+    "max",
+    "readOnly",
+    "onChange",
+    "className",
+    "wrapperClassName"
+  ]);
   const stars = Array.from({ length: max }, (_, index) => index + 1);
   return /* @__PURE__ */ jsxs12("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ jsx16("span", { className: "ph-label", children: label }),
     /* @__PURE__ */ jsx16(
       "div",
-      {
+      __spreadProps(__spreadValues({
         className: cn("ph-rating flex", className),
         role: readOnly ? "img" : "radiogroup",
-        "aria-label": label ?? `Rating: ${value} out of ${max}`,
-        ...props,
+        "aria-label": label != null ? label : `Rating: ${value} out of ${max}`
+      }, props), {
         children: stars.map((star) => {
           const active = star <= value;
           if (readOnly) {
@@ -1125,7 +1241,7 @@ function Rating({
             star
           );
         })
-      }
+      })
     )
   ] });
 }
@@ -1133,19 +1249,28 @@ function Rating({
 // src/components/ui/SearchInput.tsx
 import { useId as useId2 } from "react";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
-function SearchInput({
-  id: idProp,
-  label = "Search",
-  hideLabel = false,
-  shortcut,
-  density = "default",
-  className,
-  wrapperClassName,
-  placeholder,
-  ...props
-}) {
+function SearchInput(_a) {
+  var _b = _a, {
+    id: idProp,
+    label = "Search",
+    hideLabel = false,
+    shortcut,
+    density = "default",
+    className,
+    wrapperClassName,
+    placeholder
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "hideLabel",
+    "shortcut",
+    "density",
+    "className",
+    "wrapperClassName",
+    "placeholder"
+  ]);
   const autoId = useId2();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   return /* @__PURE__ */ jsxs13("div", { className: cn("relative", wrapperClassName), children: [
     /* @__PURE__ */ jsx17("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
     /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
@@ -1159,7 +1284,7 @@ function SearchInput({
       ) : null,
       /* @__PURE__ */ jsx17(
         "input",
-        {
+        __spreadValues({
           id,
           type: "search",
           placeholder,
@@ -1169,36 +1294,41 @@ function SearchInput({
             density === "compact" && "max-w-xs !min-h-[2rem] py-1.5 text-sm",
             shortcut != null && "pl-[3.25rem]",
             className
-          ),
-          ...props
-        }
+          )
+        }, props)
       )
     ] })
   ] });
 }
-function SearchGroup({
-  id: idProp,
-  label = "Search records",
-  submitLabel = "Search",
-  placeholder = "Persons, actions, flags\u2026",
-  wrapperClassName,
-  className,
-  ...props
-}) {
+function SearchGroup(_a) {
+  var _b = _a, {
+    id: idProp,
+    label = "Search records",
+    submitLabel = "Search",
+    placeholder = "Persons, actions, flags\u2026",
+    wrapperClassName,
+    className
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "submitLabel",
+    "placeholder",
+    "wrapperClassName",
+    "className"
+  ]);
   const autoId = useId2();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   return /* @__PURE__ */ jsxs13("div", { className: cn("ph-field", wrapperClassName), children: [
     /* @__PURE__ */ jsx17("label", { htmlFor: id, className: "ph-label", children: label }),
     /* @__PURE__ */ jsxs13("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
       /* @__PURE__ */ jsx17(
         "input",
-        {
+        __spreadValues({
           id,
           type: "search",
           placeholder,
-          className: cn("ph-input ph-input-group-field min-w-0 flex-1", className),
-          ...props
-        }
+          className: cn("ph-input ph-input-group-field min-w-0 flex-1", className)
+        }, props)
       ),
       /* @__PURE__ */ jsx17(
         Button,
@@ -1249,13 +1379,14 @@ var statMap = {
   purple: "",
   warning: "border-amber-200 bg-amber-50/70"
 };
-function Stat({ icon, label, value, footer, tone = "default", className, ...props }) {
-  return /* @__PURE__ */ jsxs15("article", { className: cn("ph-stat", statMap[tone], className), ...props, children: [
+function Stat(_a) {
+  var _b = _a, { icon, label, value, footer, tone = "default", className } = _b, props = __objRest(_b, ["icon", "label", "value", "footer", "tone", "className"]);
+  return /* @__PURE__ */ jsxs15("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
     icon && /* @__PURE__ */ jsx19("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
     /* @__PURE__ */ jsx19("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
     /* @__PURE__ */ jsx19("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
     footer && /* @__PURE__ */ jsx19("p", { className: "text-xs text-ph-subtle", children: footer })
-  ] });
+  ] }));
 }
 
 // src/components/ui/Toast.tsx
@@ -2050,12 +2181,15 @@ function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false,
         /* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
         /* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Use" })
       ] }) }),
-      /* @__PURE__ */ jsx33("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => /* @__PURE__ */ jsxs27("tr", { children: [
-        /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
-        /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
-        /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.defaultValue ?? "-" }),
-        /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
-      ] }, row.name)) })
+      /* @__PURE__ */ jsx33("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
+        var _a;
+        return /* @__PURE__ */ jsxs27("tr", { children: [
+          /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
+          /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
+          /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
+          /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
+        ] }, row.name);
+      }) })
     ] }) })
   ] });
 }
@@ -2073,9 +2207,10 @@ function ShowcaseWrapper({
   children,
   className
 }) {
+  var _a;
   const [showCode, setShowCode] = useState7(false);
-  const fallbackId = titleIdMap[title] ?? title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-  return /* @__PURE__ */ jsxs28("section", { id: id ?? fallbackId, className: cn("scroll-mt-20", className), children: [
+  const fallbackId = (_a = titleIdMap[title]) != null ? _a : title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  return /* @__PURE__ */ jsxs28("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
     /* @__PURE__ */ jsxs28("div", { className: "ph-h2-rule mb-8", children: [
       /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx34("h2", { children: title }),
@@ -2309,17 +2444,25 @@ var statusMap = {
   away: "bg-amber-400",
   busy: "bg-ph-danger"
 };
-function Avatar({
-  label,
-  icon,
-  size = "md",
-  color = "bg-ph-brand text-white",
-  status,
-  badge,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs30("div", { className: cn("relative inline-flex shrink-0", className), ...props, children: [
+function Avatar(_a) {
+  var _b = _a, {
+    label,
+    icon,
+    size = "md",
+    color = "bg-ph-brand text-white",
+    status,
+    badge,
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "icon",
+    "size",
+    "color",
+    "status",
+    "badge",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs30("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
     /* @__PURE__ */ jsx37(
       "div",
       {
@@ -2341,13 +2484,14 @@ function Avatar({
       }
     ),
     badge && /* @__PURE__ */ jsx37("span", { className: "absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-white", children: badge })
-  ] });
+  ] }));
 }
-function AvatarGroup({ children, max, className, ...props }) {
+function AvatarGroup(_a) {
+  var _b = _a, { children, max, className } = _b, props = __objRest(_b, ["children", "max", "className"]);
   const items = Array.isArray(children) ? children : [children];
   const visible = max ? items.slice(0, max) : items;
   const remaining = max ? items.length - max : 0;
-  return /* @__PURE__ */ jsxs30("div", { className: cn("-space-x-3 flex rtl:space-x-reverse", className), ...props, children: [
+  return /* @__PURE__ */ jsxs30("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
     visible,
     remaining > 0 && /* @__PURE__ */ jsx37(
       Avatar,
@@ -2357,7 +2501,7 @@ function AvatarGroup({ children, max, className, ...props }) {
         color: "bg-ph-toolbar text-ph-subtle"
       }
     )
-  ] });
+  ] }));
 }
 
 // src/components/ui/Progress.tsx
@@ -2367,18 +2511,26 @@ var sizeMap6 = {
   md: "h-2",
   lg: "h-3"
 };
-function Progress({
-  value,
-  max = 100,
-  color = "bg-ph-brand",
-  label,
-  showPercentage = false,
-  size = "md",
-  className,
-  ...props
-}) {
+function Progress(_a) {
+  var _b = _a, {
+    value,
+    max = 100,
+    color = "bg-ph-brand",
+    label,
+    showPercentage = false,
+    size = "md",
+    className
+  } = _b, props = __objRest(_b, [
+    "value",
+    "max",
+    "color",
+    "label",
+    "showPercentage",
+    "size",
+    "className"
+  ]);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs31("div", { className: cn("w-full", className), ...props, children: [
+  return /* @__PURE__ */ jsxs31("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
     (label || showPercentage) && /* @__PURE__ */ jsxs31("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
       label && /* @__PURE__ */ jsx38("span", { children: label }),
       showPercentage && /* @__PURE__ */ jsxs31("span", { className: "tabular-nums", children: [
@@ -2397,31 +2549,39 @@ function Progress({
         "aria-valuemax": max
       }
     ) })
-  ] });
+  ] }));
 }
 
 // src/components/ui/ChatBubble.tsx
 import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
-function ChatBubble({
-  children,
-  avatar,
-  name,
-  time,
-  variant = "from",
-  footer,
-  className,
-  ...props
-}) {
+function ChatBubble(_a) {
+  var _b = _a, {
+    children,
+    avatar,
+    name,
+    time,
+    variant = "from",
+    footer,
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "avatar",
+    "name",
+    "time",
+    "variant",
+    "footer",
+    "className"
+  ]);
   const isSelf = variant === "self";
   return /* @__PURE__ */ jsxs32(
     "div",
-    {
+    __spreadProps(__spreadValues({
       className: cn(
         "flex gap-3",
         isSelf && "flex-row-reverse",
         className
-      ),
-      ...props,
+      )
+    }, props), {
       children: [
         avatar && /* @__PURE__ */ jsx39("div", { className: "shrink-0", children: avatar }),
         /* @__PURE__ */ jsxs32("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
@@ -2451,27 +2611,32 @@ function ChatBubble({
           footer && /* @__PURE__ */ jsx39("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
         ] })
       ]
-    }
+    })
   );
 }
 
 // src/components/ui/Terminal.tsx
 import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
-function Terminal({
-  title = "sandbox",
-  lines,
-  children,
-  className,
-  ...props
-}) {
+function Terminal(_a) {
+  var _b = _a, {
+    title = "sandbox",
+    lines,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "title",
+    "lines",
+    "children",
+    "className"
+  ]);
   return /* @__PURE__ */ jsxs33(
     "div",
-    {
+    __spreadProps(__spreadValues({
       className: cn(
         "overflow-hidden rounded-xl border border-ph-border shadow-ph-md",
         className
-      ),
-      ...props,
+      )
+    }, props), {
       children: [
         /* @__PURE__ */ jsxs33("header", { className: "flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3", children: [
           /* @__PURE__ */ jsx40("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
@@ -2488,7 +2653,7 @@ function Terminal({
           ] }, i);
         }) }) })
       ]
-    }
+    })
   );
 }
 
@@ -2500,16 +2665,23 @@ var positionMap = {
   "bottom-right": "-right-[2px] -bottom-[2px]",
   "bottom-left": "-left-[2px] -bottom-[2px]"
 };
-function Indicator({
-  children,
-  badge,
-  color = "bg-ph-brand",
-  position = "top-right",
-  dot = false,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs34("div", { className: cn("relative inline-flex items-center justify-center", className), ...props, children: [
+function Indicator(_a) {
+  var _b = _a, {
+    children,
+    badge,
+    color = "bg-ph-brand",
+    position = "top-right",
+    dot = false,
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "badge",
+    "color",
+    "position",
+    "dot",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs34("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex items-center justify-center", className) }, props), { children: [
     dot ? /* @__PURE__ */ jsx41(
       "span",
       {
@@ -2531,22 +2703,26 @@ function Indicator({
       }
     ) : null,
     children
-  ] });
+  ] }));
 }
 
 // src/components/ui/Timeline.tsx
 import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
-function Timeline({
-  events,
-  alternate = false,
-  className,
-  ...props
-}) {
+function Timeline(_a) {
+  var _b = _a, {
+    events,
+    alternate = false,
+    className
+  } = _b, props = __objRest(_b, [
+    "events",
+    "alternate",
+    "className"
+  ]);
   return /* @__PURE__ */ jsx42(
     "ol",
-    {
-      className: cn("relative space-y-8", className),
-      ...props,
+    __spreadProps(__spreadValues({
+      className: cn("relative space-y-8", className)
+    }, props), {
       children: events.map((event, idx) => {
         const align = alternate && idx % 2 !== 0 ? "lg:flex-row-reverse" : "";
         return /* @__PURE__ */ jsxs35("li", { className: cn("relative flex gap-6", align), children: [
@@ -2569,12 +2745,26 @@ function Timeline({
           ] })
         ] }, event.id);
       })
-    }
+    })
   );
 }
 
 // src/components/charts/ph-insight-charts.tsx
 import { useEffect as useEffect5, useMemo as useMemo2, useState as useState11 } from "react";
+import {
+  ArcElement,
+  BarController,
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  DoughnutController,
+  Legend,
+  LinearScale,
+  PolarAreaController,
+  RadialLinearScale,
+  Title,
+  Tooltip
+} from "chart.js";
 import { Bar, Doughnut, PolarArea } from "react-chartjs-2";
 
 // src/lib/chart/with-alpha.ts
@@ -2910,7 +3100,7 @@ function buildPolarAreaDemo(tokens) {
 }
 
 // src/lib/chart/use-ph-chart-tokens.ts
-import { useEffect as useEffect3, useState as useState9 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState9 } from "react";
 
 // src/lib/chart/ph-chart-tokens.ts
 var FALLBACK_CHART_TOKENS = {
@@ -2929,7 +3119,7 @@ function readChartTokens(root) {
   if (typeof document === "undefined") {
     return FALLBACK_CHART_TOKENS;
   }
-  const el = root ?? document.documentElement;
+  const el = root != null ? root : document.documentElement;
   const series = [1, 2, 3, 4, 5, 6, 7].map((index) => {
     const raw = readCssVar(el, `--ph-data-${index}`);
     return raw !== "" ? raw : FALLBACK_CHART_TOKENS.series[index - 1];
@@ -2944,12 +3134,24 @@ function readChartTokens(root) {
 }
 
 // src/lib/chart/use-ph-chart-tokens.ts
+function tokensEqual(a, b) {
+  if (a.series.length !== b.series.length) return false;
+  for (let i = 0; i < a.series.length; i++) {
+    if (a.series[i] !== b.series[i]) return false;
+  }
+  return a.grid === b.grid && a.text === b.text && a.textMuted === b.textMuted && a.surface === b.surface && a.borderStrong === b.borderStrong && a.accent === b.accent;
+}
 function useChartTokens() {
   const [tokens, setTokens] = useState9(FALLBACK_CHART_TOKENS);
+  const tokensRef = useRef2(FALLBACK_CHART_TOKENS);
   useEffect3(() => {
     const root = document.documentElement;
     const refresh = () => {
-      setTokens(readChartTokens(root));
+      const next = readChartTokens(root);
+      if (!tokensEqual(tokensRef.current, next)) {
+        tokensRef.current = next;
+        setTokens(next);
+      }
     };
     refresh();
     const observer = new MutationObserver(refresh);
@@ -2972,7 +3174,7 @@ function buildHogChartTheme(tokens) {
 
 // src/lib/hog-charts-lite/CanvasTrendLineChart.tsx
 import { scaleLinear, scalePoint } from "d3-scale";
-import { useCallback, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState10 } from "react";
+import { useCallback, useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState10 } from "react";
 import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
 var HOG_LITE_DEFAULT_MARGINS = { top: 16, right: 16, bottom: 32, left: 48 };
 function resolveDisplayedSeries(series, palette) {
@@ -2983,7 +3185,7 @@ function resolveDisplayedSeries(series, palette) {
   return visible.map((s, visibleIndex) => {
     const hasExplicit = s.color != null && String(s.color).trim() !== "";
     const resolvedColor = hasExplicit ? String(s.color).trim() : palette[visibleIndex % palette.length];
-    return { ...s, resolvedColor };
+    return __spreadProps(__spreadValues({}, s), { resolvedColor });
   });
 }
 function yDomainForSeries(resolved) {
@@ -3027,8 +3229,8 @@ function CanvasTrendLineChart({
   showCrosshair = true,
   className = ""
 }) {
-  const containerRef = useRef2(null);
-  const canvasRef = useRef2(null);
+  const containerRef = useRef3(null);
+  const canvasRef = useRef3(null);
   const [size, setSize] = useState10({ width: 0, height: 0 });
   const [hoverIndex, setHoverIndex] = useState10(null);
   useEffect4(() => {
@@ -3046,7 +3248,7 @@ function CanvasTrendLineChart({
   }, []);
   const resolved = useMemo(() => resolveDisplayedSeries(series, theme.colors), [series, theme.colors]);
   const draw = useCallback(() => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const canvas = canvasRef.current;
     const container = containerRef.current;
     if (!canvas || !container) {
@@ -3074,15 +3276,15 @@ function CanvasTrendLineChart({
     if (plotWidth <= 4 || plotHeight <= 4) {
       return;
     }
-    const bg = theme.backgroundColor ?? "#ffffff";
+    const bg = (_a = theme.backgroundColor) != null ? _a : "#ffffff";
     ctx.fillStyle = bg;
     ctx.fillRect(0, 0, cssW, cssH);
     const labelList = [...labels];
     const xScale = scalePoint().domain(labelList).range([plotLeft, plotLeft + plotWidth]).padding(0.5);
     const [y0, y1] = yDomainForSeries(resolved);
     const yScale = scaleLinear().domain([y0, y1]).nice().range([plotTop + plotHeight, plotTop]);
-    const axisColor = theme.axisColor ?? "#666";
-    const gridColor = theme.gridColor ?? "rgba(0,0,0,0.08)";
+    const axisColor = (_b = theme.axisColor) != null ? _b : "#666";
+    const gridColor = (_c = theme.gridColor) != null ? _c : "rgba(0,0,0,0.08)";
     if (showGrid) {
       const ticks = yScale.ticks(6);
       ctx.strokeStyle = gridColor;
@@ -3104,7 +3306,7 @@ function CanvasTrendLineChart({
       if (s.overlay || !s.fill) {
         continue;
       }
-      const opacity = s.fill.opacity ?? 0.45;
+      const opacity = (_d = s.fill.opacity) != null ? _d : 0.45;
       const baseline = yScale(0);
       ctx.save();
       ctx.globalAlpha = opacity;
@@ -3138,10 +3340,10 @@ function CanvasTrendLineChart({
       ctx.restore();
     }
     for (const s of resolved) {
-      if ((_a = s.visibility) == null ? void 0 : _a.excluded) {
+      if ((_e = s.visibility) == null ? void 0 : _e.excluded) {
         continue;
       }
-      const pattern = ((_b = s.stroke) == null ? void 0 : _b.pattern) ?? [];
+      const pattern = (_g = (_f = s.stroke) == null ? void 0 : _f.pattern) != null ? _g : [];
       ctx.strokeStyle = s.resolvedColor;
       ctx.lineWidth = 2;
       ctx.lineJoin = "round";
@@ -3195,7 +3397,7 @@ function CanvasTrendLineChart({
     if (hi != null && hi >= 0 && hi < labels.length && showCrosshair) {
       const cx = xAt(hi);
       if (cx != null) {
-        const cross = theme.crosshairColor ?? gridColor;
+        const cross = (_h = theme.crosshairColor) != null ? _h : gridColor;
         ctx.strokeStyle = cross;
         ctx.lineWidth = 1;
         ctx.setLineDash([4, 4]);
@@ -3205,7 +3407,7 @@ function CanvasTrendLineChart({
         ctx.stroke();
         ctx.setLineDash([]);
         for (const s of resolved) {
-          if (s.overlay || ((_c = s.visibility) == null ? void 0 : _c.excluded)) {
+          if (s.overlay || ((_i = s.visibility) == null ? void 0 : _i.excluded)) {
             continue;
           }
           const v = s.data[hi];
@@ -3305,9 +3507,31 @@ function CanvasTrendLineChart({
 // src/components/charts/ph-insight-charts.tsx
 import { jsx as jsx44 } from "react/jsx-runtime";
 var DEMO_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var chartJsRegistered = false;
+function registerChartJs() {
+  if (chartJsRegistered) return;
+  if (typeof window === "undefined") return;
+  ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    RadialLinearScale,
+    BarController,
+    BarElement,
+    DoughnutController,
+    PolarAreaController,
+    ArcElement,
+    Title,
+    Tooltip,
+    Legend
+  );
+  chartJsRegistered = true;
+}
 function useClientMounted() {
   const [mounted, setMounted] = useState11(false);
-  useEffect5(() => setMounted(true), []);
+  useEffect5(() => {
+    setMounted(true);
+    registerChartJs();
+  }, []);
   return mounted;
 }
 function ChartSkeleton({ className = "h-[280px]" }) {
@@ -3364,7 +3588,7 @@ function InsightVerticalBarChart() {
   if (!mounted) {
     return /* @__PURE__ */ jsx44(ChartSkeleton, {});
   }
-  return /* @__PURE__ */ jsx44("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options }) });
+  return /* @__PURE__ */ jsx44("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options, redraw: false }) });
 }
 function InsightHorizontalBarChart() {
   const mounted = useClientMounted();
@@ -3373,7 +3597,7 @@ function InsightHorizontalBarChart() {
   if (!mounted) {
     return /* @__PURE__ */ jsx44(ChartSkeleton, { className: "h-[320px]" });
   }
-  return /* @__PURE__ */ jsx44("div", { className: "relative h-[320px] w-full min-h-[260px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options }) });
+  return /* @__PURE__ */ jsx44("div", { className: "relative h-[320px] w-full min-h-[260px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options, redraw: false }) });
 }
 function InsightStackedBarChart() {
   const mounted = useClientMounted();
@@ -3382,7 +3606,7 @@ function InsightStackedBarChart() {
   if (!mounted) {
     return /* @__PURE__ */ jsx44(ChartSkeleton, { className: "h-[300px]" });
   }
-  return /* @__PURE__ */ jsx44("div", { className: "relative h-[300px] w-full min-h-[240px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options }) });
+  return /* @__PURE__ */ jsx44("div", { className: "relative h-[300px] w-full min-h-[240px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options, redraw: false }) });
 }
 function InsightDoughnutChart() {
   const mounted = useClientMounted();
@@ -3391,7 +3615,7 @@ function InsightDoughnutChart() {
   if (!mounted) {
     return /* @__PURE__ */ jsx44(ChartSkeleton, { className: "h-[260px]" });
   }
-  return /* @__PURE__ */ jsx44("div", { className: "relative mx-auto h-[260px] w-full max-w-[280px] min-h-[220px]", children: /* @__PURE__ */ jsx44(Doughnut, { data: config.data, options: config.options }) });
+  return /* @__PURE__ */ jsx44("div", { className: "relative mx-auto h-[260px] w-full max-w-[280px] min-h-[220px]", children: /* @__PURE__ */ jsx44(Doughnut, { data: config.data, options: config.options, redraw: false }) });
 }
 function InsightPolarAreaChart() {
   const mounted = useClientMounted();
@@ -3400,13 +3624,14 @@ function InsightPolarAreaChart() {
   if (!mounted) {
     return /* @__PURE__ */ jsx44(ChartSkeleton, { className: "h-[280px]" });
   }
-  return /* @__PURE__ */ jsx44("div", { className: "relative mx-auto h-[280px] w-full max-w-[320px] min-h-[240px]", children: /* @__PURE__ */ jsx44(PolarArea, { data: config.data, options: config.options }) });
+  return /* @__PURE__ */ jsx44("div", { className: "relative mx-auto h-[280px] w-full max-w-[320px] min-h-[240px]", children: /* @__PURE__ */ jsx44(PolarArea, { data: config.data, options: config.options, redraw: false }) });
 }
 
 // src/components/dashboard/DashboardWell.tsx
 import { jsx as jsx45 } from "react/jsx-runtime";
-function DashboardWell({ className, ...props }) {
-  return /* @__PURE__ */ jsx45("div", { className: cn("ph-dashboard-well", className), ...props });
+function DashboardWell(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx45("div", __spreadValues({ className: cn("ph-dashboard-well", className) }, props));
 }
 
 // src/components/dashboard/DashboardToolbar.tsx
@@ -3427,78 +3652,92 @@ var presetClass = {
   insights: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
   dense: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
 };
-function DashboardGrid({
-  preset = "insights",
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx47("div", { className: cn(presetClass[preset], className), ...props });
+function DashboardGrid(_a) {
+  var _b = _a, {
+    preset = "insights",
+    className
+  } = _b, props = __objRest(_b, [
+    "preset",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx47("div", __spreadValues({ className: cn(presetClass[preset], className) }, props));
 }
 
 // src/components/dashboard/DashboardFiltersBar.tsx
 import { jsx as jsx48 } from "react/jsx-runtime";
-function DashboardFiltersBar({ className, ...props }) {
+function DashboardFiltersBar(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx48(
     "div",
-    {
+    __spreadValues({
       className: cn(
         "flex flex-wrap items-center gap-2 rounded-[var(--ph-radius-app)] border border-solid bg-ph-surface px-3 py-2 text-sm text-ph-subtle [border-color:var(--ph-border-control)]",
         "[box-shadow:var(--ph-chrome-inset-face-top),var(--ph-chrome-inset-face-bottom),var(--ph-shadow-elevation-3000)]",
         className
-      ),
-      ...props
-    }
+      )
+    }, props)
   );
 }
 
 // src/components/dashboard/DashboardKpiCard.tsx
 import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
-function DashboardKpiCard({ label, value, footer, icon, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs38("article", { className: cn("ph-stat", className), ...props, children: [
+function DashboardKpiCard(_a) {
+  var _b = _a, { label, value, footer, icon, className, children } = _b, props = __objRest(_b, ["label", "value", "footer", "icon", "className", "children"]);
+  return /* @__PURE__ */ jsxs38("article", __spreadProps(__spreadValues({ className: cn("ph-stat", className) }, props), { children: [
     icon != null ? /* @__PURE__ */ jsx49("div", { className: "mb-2 [&>svg]:h-7 [&>svg]:w-7", children: icon }) : null,
     /* @__PURE__ */ jsx49("div", { className: "ph-stat-label", children: label }),
     /* @__PURE__ */ jsx49("div", { className: "ph-stat-val", children: value }),
     footer != null ? /* @__PURE__ */ jsx49("p", { className: "mt-1 text-xs text-ph-subtle", children: footer }) : null,
     children
-  ] });
+  ] }));
 }
 
 // src/components/dashboard/DashboardInsightPlaceholder.tsx
 import { jsx as jsx50 } from "react/jsx-runtime";
-function DashboardInsightPlaceholder({
-  label = "Add insight",
-  className,
-  children,
-  type = "button",
-  ...props
-}) {
+function DashboardInsightPlaceholder(_a) {
+  var _b = _a, {
+    label = "Add insight",
+    className,
+    children,
+    type = "button"
+  } = _b, props = __objRest(_b, [
+    "label",
+    "className",
+    "children",
+    "type"
+  ]);
   return /* @__PURE__ */ jsx50(
     "button",
-    {
+    __spreadProps(__spreadValues({
       type,
       "aria-label": label,
       className: cn(
         "ph-dashboard-placeholder group text-left outline-none transition",
         "focus-visible:ring-2 focus-visible:ring-ph-brand focus-visible:ring-offset-2",
         className
-      ),
-      ...props,
+      )
+    }, props), {
       children: children != null ? children : /* @__PURE__ */ jsx50("span", { className: "font-medium text-ph-subtle group-hover:text-ph-ink", children: label })
-    }
+    })
   );
 }
 
 // src/components/dashboard/InsightShell.tsx
 import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
-function InsightShell({
-  ribbonColour,
-  bodyClassName,
-  className,
-  children,
-  ...props
-}) {
+function InsightShell(_a) {
+  var _b = _a, {
+    ribbonColour,
+    bodyClassName,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "ribbonColour",
+    "bodyClassName",
+    "className",
+    "children"
+  ]);
   const ribbon = ribbonColour != null && String(ribbonColour).trim() !== "" ? String(ribbonColour).trim() : null;
-  return /* @__PURE__ */ jsxs39("article", { className: cn("ph-insight-shell flex-row", className), ...props, children: [
+  return /* @__PURE__ */ jsxs39("article", __spreadProps(__spreadValues({ className: cn("ph-insight-shell flex-row", className) }, props), { children: [
     ribbon != null ? /* @__PURE__ */ jsx51(
       "div",
       {
@@ -3508,7 +3747,7 @@ function InsightShell({
       }
     ) : null,
     /* @__PURE__ */ jsx51("div", { className: cn("flex min-w-0 flex-1 flex-col gap-3 p-4", bodyClassName), children })
-  ] });
+  ] }));
 }
 
 // src/components/dashboard/InsightShellHeader.tsx
@@ -3538,7 +3777,10 @@ function MiniTrendBars({
   seriesResolver,
   className
 }) {
-  const resolveSeries = seriesResolver ?? ((i) => DEFAULT_SERIES_CYCLE[i % DEFAULT_SERIES_CYCLE.length] ?? 1);
+  const resolveSeries = seriesResolver != null ? seriesResolver : ((i) => {
+    var _a;
+    return (_a = DEFAULT_SERIES_CYCLE[i % DEFAULT_SERIES_CYCLE.length]) != null ? _a : 1;
+  });
   return /* @__PURE__ */ jsx53("div", { className: cn("flex items-end gap-0.5", rowClassName, className), children: heights.map((raw, i) => {
     const pct = clampPct(raw);
     const series = resolveSeries(i, pct);
@@ -3553,17 +3795,22 @@ function MiniTrendBars({
 
 // src/components/dashboard/InsightMiniCard.tsx
 import { jsx as jsx54, jsxs as jsxs41 } from "react/jsx-runtime";
-function InsightMiniCard({
-  title,
-  subtitle,
-  heights,
-  ribbonColour,
-  ...shellProps
-}) {
-  return /* @__PURE__ */ jsxs41(InsightShell, { ribbonColour, ...shellProps, children: [
+function InsightMiniCard(_a) {
+  var _b = _a, {
+    title,
+    subtitle,
+    heights,
+    ribbonColour
+  } = _b, shellProps = __objRest(_b, [
+    "title",
+    "subtitle",
+    "heights",
+    "ribbonColour"
+  ]);
+  return /* @__PURE__ */ jsxs41(InsightShell, __spreadProps(__spreadValues({ ribbonColour }, shellProps), { children: [
     /* @__PURE__ */ jsx54(InsightShellHeader, { title, subtitle }),
     /* @__PURE__ */ jsx54(MiniTrendBars, { heights })
-  ] });
+  ] }));
 }
 export {
   Accordion,