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

package/dist/index.js

@@ -1,8 +1,37 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -226,19 +255,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__ */ (0, import_jsx_runtime2.jsx)(ButtonChrome, { label: children, icon, sideIcon, split }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     icon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ph-btn-icon", children: icon }) : null,
@@ -248,7 +288,7 @@ function Button({
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
-    {
+    __spreadProps(__spreadValues({
       type,
       className: cn(
         "ph-btn",
@@ -258,39 +298,48 @@ function Button({
         shapeClass[shape],
         split && "ph-btn-split",
         className
-      ),
-      ...props,
+      )
+    }, props), {
       children: content
-    }
+    })
   );
 }
 
 // src/components/icons/IconBase.tsx
 var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)(
     "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
-    }
+    })
   );
 }
 
@@ -298,7 +347,7 @@ function IconBase({
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function createIconBase({ viewBox = "0 0 24 24", paths }) {
   return function IconGlyph(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconBase, { viewBox, ...props, children: paths });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconBase, __spreadProps(__spreadValues({ viewBox }, props), { children: paths }));
   };
 }
 function createIconBasePath(d, viewBox = "0 0 24 24") {
@@ -521,8 +570,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__ */ (0, import_jsx_runtime5.jsx)(IconSync, { className: cn("ph-icon-spin", className), ...props });
+function IconSpinner(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSync, __spreadValues({ className: cn("ph-icon-spin", className) }, props));
 }
 var PH_ICONS = {
   activity: IconActivity,
@@ -594,9 +644,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__ */ (0, import_jsx_runtime5.jsx)(Icon, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, __spreadValues({}, props));
 }
 
 // src/components/ui/Alert.tsx
@@ -630,7 +681,7 @@ function Alert({
       role: "alert",
       className: cn("ph-alert", statusClassMap[status], className),
       children: [
-        icon ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color) }),
+        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1", children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "font-semibold", children: title }),
           description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-1 text-sm text-ph-subtle", children: description }),
@@ -776,12 +827,13 @@ function Drawer({
 
 // src/components/ui/Kbd.tsx
 var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsx)("code", { className: cn("ph-kbd text-ph-ink", className), ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsx)("kbd", { className: cn("ph-shortcut", className), ...props, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("kbd", __spreadProps(__spreadValues({ className: cn("ph-shortcut", className) }, props), { children: content }));
 }
 function normalizeShortcut(children) {
   if (typeof children !== "string") return children;
@@ -808,16 +860,23 @@ function dropdownPanelClass(align, panelClassName) {
     panelClassName
   );
 }
-function DropdownMenu({
-  trigger,
-  children,
-  align = "start",
-  className,
-  panelClassName,
-  "aria-label": ariaLabel,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("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__ */ (0, import_jsx_runtime11.jsxs)("details", __spreadProps(__spreadValues({ className: cn("relative", className) }, props), { children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "summary",
       {
@@ -827,27 +886,40 @@ function DropdownMenu({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
-  const trailing = sideIcon ?? chevron;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("details", { className: cn("relative", className), ...props, children: [
+  const trailing = sideIcon != null ? sideIcon : chevron;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("details", __spreadProps(__spreadValues({ className: cn("relative", className) }, props), { children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "summary",
       {
@@ -858,7 +930,7 @@ function DropdownButton({
           sizeClass2[size],
           split && "ph-btn-split"
         ),
-        "aria-label": ariaLabel ?? label,
+        "aria-label": ariaLabel != null ? ariaLabel : label,
         children: usesLemonChrome ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ButtonChrome, { label, icon, sideIcon: trailing, split }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           icon != null ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-btn-icon", children: icon }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ph-btn-label", children: label }),
@@ -867,14 +939,17 @@ function DropdownButton({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: dropdownPanelClass(align, panelClassName), children })
-  ] });
+  ] }));
 }
-function DropdownItem({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("button", __spreadProps(__spreadValues({ type: "button", className: cn("ph-dropdown-item w-full text-left", className) }, props), { children }));
 }
 
 // src/components/ui/Input.tsx
@@ -885,21 +960,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 = (0, import_react.useId)();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -916,7 +1002,7 @@ function Input({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "input",
-      {
+      __spreadValues({
         id,
         disabled,
         "aria-invalid": hasError || void 0,
@@ -927,29 +1013,39 @@ function Input({
           hasError && "ph-input-error",
           disabled && "cursor-not-allowed opacity-60",
           className
-        ),
-        ...props
-      }
+        )
+      }, props)
     ),
     helperText && !hasError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
     error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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 = (0, import_react.useId)();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -962,7 +1058,7 @@ function Select({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "select",
-      {
+      __spreadProps(__spreadValues({
         id,
         disabled,
         "aria-invalid": hasError || void 0,
@@ -972,29 +1068,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__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
     error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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 = (0, import_react.useId)();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -1007,7 +1113,7 @@ function Textarea({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "textarea",
-      {
+      __spreadValues({
         id,
         disabled,
         "aria-invalid": hasError || void 0,
@@ -1017,31 +1123,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__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
     error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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 = (0, import_react.useId)();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   const hasError = Boolean(error);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-control-row", wrapperClassName), children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "input",
-      {
+      __spreadValues({
         id,
         type: "checkbox",
         disabled,
@@ -1051,76 +1164,92 @@ function Checkbox({
           hasError && "border-ph-danger",
           disabled && "cursor-not-allowed opacity-60",
           className
-        ),
-        ...props
-      }
+        )
+      }, props)
     ),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
     helperText && !hasError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 text-xs text-ph-subtle", children: helperText }),
     error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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 = (0, import_react.useId)();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "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__ */ (0, import_jsx_runtime12.jsx)("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 = (0, import_react.useId)();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: disabled ? "opacity-60" : void 0, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "ph-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "range", className: cn("ph-range", className), ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", __spreadValues({ type: "range", className: cn("ph-range", className) }, props)),
     (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: minLabel }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: valueLabel }),
@@ -1128,11 +1257,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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "ph-label", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("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__ */ (0, import_jsx_runtime12.jsx)("input", { type: "file", className: cn("sr-only", className), ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", __spreadValues({ type: "file", className: cn("sr-only", className) }, props)),
       prompt
     ] })
   ] });
@@ -1253,36 +1383,45 @@ function Pagination({
 
 // src/components/ui/Panel.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function Panel({ title, description, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("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__ */ (0, import_jsx_runtime15.jsxs)("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
     description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-ph-subtle", children: description }),
     children
-  ] });
+  ] }));
 }
 
 // src/components/ui/Rating.tsx
 var import_jsx_runtime16 = require("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__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ph-label", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "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) {
@@ -1309,7 +1448,7 @@ function Rating({
             star
           );
         })
-      }
+      })
     )
   ] });
 }
@@ -1317,19 +1456,28 @@ function Rating({
 // src/components/ui/SearchInput.tsx
 var import_react2 = require("react");
 var import_jsx_runtime17 = require("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 = (0, import_react2.useId)();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
@@ -1343,7 +1491,7 @@ function SearchInput({
       ) : null,
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "input",
-        {
+        __spreadValues({
           id,
           type: "search",
           placeholder,
@@ -1353,36 +1501,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 = (0, import_react2.useId)();
-  const id = idProp ?? autoId;
+  const id = idProp != null ? idProp : autoId;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("ph-field", wrapperClassName), children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: id, className: "ph-label", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "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__ */ (0, import_jsx_runtime17.jsx)(
         Button,
@@ -1433,13 +1586,14 @@ var statMap = {
   purple: "",
   warning: "border-amber-200 bg-amber-50/70"
 };
-function Stat({ icon, label, value, footer, tone = "default", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("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__ */ (0, import_jsx_runtime19.jsxs)("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
     footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xs text-ph-subtle", children: footer })
-  ] });
+  ] }));
 }
 
 // src/components/ui/Toast.tsx
@@ -2234,12 +2388,15 @@ function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false,
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Use" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.defaultValue ?? "-" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
-      ] }, row.name)) })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
+        ] }, row.name);
+      }) })
     ] }) })
   ] });
 }
@@ -2257,9 +2414,10 @@ function ShowcaseWrapper({
   children,
   className
 }) {
+  var _a;
   const [showCode, setShowCode] = (0, import_react11.useState)(false);
-  const fallbackId = titleIdMap[title] ?? title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("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__ */ (0, import_jsx_runtime34.jsxs)("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ph-h2-rule mb-8", children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h2", { children: title }),
@@ -2493,17 +2651,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__ */ (0, import_jsx_runtime37.jsxs)("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__ */ (0, import_jsx_runtime37.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "div",
       {
@@ -2525,13 +2691,14 @@ function Avatar({
       }
     ),
     badge && /* @__PURE__ */ (0, import_jsx_runtime37.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({ 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__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("-space-x-3 flex rtl:space-x-reverse", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
     visible,
     remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Avatar,
@@ -2541,7 +2708,7 @@ function AvatarGroup({ children, max, className, ...props }) {
         color: "bg-ph-toolbar text-ph-subtle"
       }
     )
-  ] });
+  ] }));
 }
 
 // src/components/ui/Progress.tsx
@@ -2551,18 +2718,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__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("w-full", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
     (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: label }),
       showPercentage && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "tabular-nums", children: [
@@ -2581,31 +2756,39 @@ function Progress({
         "aria-valuemax": max
       }
     ) })
-  ] });
+  ] }));
 }
 
 // src/components/ui/ChatBubble.tsx
 var import_jsx_runtime39 = require("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__ */ (0, import_jsx_runtime39.jsxs)(
     "div",
-    {
+    __spreadProps(__spreadValues({
       className: cn(
         "flex gap-3",
         isSelf && "flex-row-reverse",
         className
-      ),
-      ...props,
+      )
+    }, props), {
       children: [
         avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "shrink-0", children: avatar }),
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
@@ -2635,27 +2818,32 @@ function ChatBubble({
           footer && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
         ] })
       ]
-    }
+    })
   );
 }
 
 // src/components/ui/Terminal.tsx
 var import_jsx_runtime40 = require("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__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
-    {
+    __spreadProps(__spreadValues({
       className: cn(
         "overflow-hidden rounded-xl border border-ph-border shadow-ph-md",
         className
-      ),
-      ...props,
+      )
+    }, props), {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
@@ -2672,7 +2860,7 @@ function Terminal({
           ] }, i);
         }) }) })
       ]
-    }
+    })
   );
 }
 
@@ -2684,16 +2872,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__ */ (0, import_jsx_runtime41.jsxs)("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__ */ (0, import_jsx_runtime41.jsxs)("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex items-center justify-center", className) }, props), { children: [
     dot ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "span",
       {
@@ -2715,22 +2910,26 @@ function Indicator({
       }
     ) : null,
     children
-  ] });
+  ] }));
 }
 
 // src/components/ui/Timeline.tsx
 var import_jsx_runtime42 = require("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__ */ (0, import_jsx_runtime42.jsx)(
     "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__ */ (0, import_jsx_runtime42.jsxs)("li", { className: cn("relative flex gap-6", align), children: [
@@ -2753,12 +2952,13 @@ function Timeline({
           ] })
         ] }, event.id);
       })
-    }
+    })
   );
 }
 
 // src/components/charts/ph-insight-charts.tsx
 var import_react15 = require("react");
+var import_chart = require("chart.js");
 var import_react_chartjs_2 = require("react-chartjs-2");
 
 // src/lib/chart/with-alpha.ts
@@ -3113,7 +3313,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];
@@ -3128,12 +3328,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] = (0, import_react13.useState)(FALLBACK_CHART_TOKENS);
+  const tokensRef = (0, import_react13.useRef)(FALLBACK_CHART_TOKENS);
   (0, import_react13.useEffect)(() => {
     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);
@@ -3167,7 +3379,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) {
@@ -3230,7 +3442,7 @@ function CanvasTrendLineChart({
   }, []);
   const resolved = (0, import_react14.useMemo)(() => resolveDisplayedSeries(series, theme.colors), [series, theme.colors]);
   const draw = (0, import_react14.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) {
@@ -3258,15 +3470,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 = (0, import_d3_scale.scalePoint)().domain(labelList).range([plotLeft, plotLeft + plotWidth]).padding(0.5);
     const [y0, y1] = yDomainForSeries(resolved);
     const yScale = (0, import_d3_scale.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;
@@ -3288,7 +3500,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;
@@ -3322,10 +3534,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";
@@ -3379,7 +3591,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]);
@@ -3389,7 +3601,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];
@@ -3489,9 +3701,31 @@ function CanvasTrendLineChart({
 // src/components/charts/ph-insight-charts.tsx
 var import_jsx_runtime44 = require("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;
+  import_chart.Chart.register(
+    import_chart.CategoryScale,
+    import_chart.LinearScale,
+    import_chart.RadialLinearScale,
+    import_chart.BarController,
+    import_chart.BarElement,
+    import_chart.DoughnutController,
+    import_chart.PolarAreaController,
+    import_chart.ArcElement,
+    import_chart.Title,
+    import_chart.Tooltip,
+    import_chart.Legend
+  );
+  chartJsRegistered = true;
+}
 function useClientMounted() {
   const [mounted, setMounted] = (0, import_react15.useState)(false);
-  (0, import_react15.useEffect)(() => setMounted(true), []);
+  (0, import_react15.useEffect)(() => {
+    setMounted(true);
+    registerChartJs();
+  }, []);
   return mounted;
 }
 function ChartSkeleton({ className = "h-[280px]" }) {
@@ -3548,7 +3782,7 @@ function InsightVerticalBarChart() {
   if (!mounted) {
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartSkeleton, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_chartjs_2.Bar, { data: config.data, options: config.options }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_chartjs_2.Bar, { data: config.data, options: config.options, redraw: false }) });
 }
 function InsightHorizontalBarChart() {
   const mounted = useClientMounted();
@@ -3557,7 +3791,7 @@ function InsightHorizontalBarChart() {
   if (!mounted) {
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartSkeleton, { className: "h-[320px]" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative h-[320px] w-full min-h-[260px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_chartjs_2.Bar, { data: config.data, options: config.options }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative h-[320px] w-full min-h-[260px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_chartjs_2.Bar, { data: config.data, options: config.options, redraw: false }) });
 }
 function InsightStackedBarChart() {
   const mounted = useClientMounted();
@@ -3566,7 +3800,7 @@ function InsightStackedBarChart() {
   if (!mounted) {
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartSkeleton, { className: "h-[300px]" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative h-[300px] w-full min-h-[240px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_chartjs_2.Bar, { data: config.data, options: config.options }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative h-[300px] w-full min-h-[240px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_chartjs_2.Bar, { data: config.data, options: config.options, redraw: false }) });
 }
 function InsightDoughnutChart() {
   const mounted = useClientMounted();
@@ -3575,7 +3809,7 @@ function InsightDoughnutChart() {
   if (!mounted) {
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartSkeleton, { className: "h-[260px]" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative mx-auto h-[260px] w-full max-w-[280px] min-h-[220px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_chartjs_2.Doughnut, { data: config.data, options: config.options }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative mx-auto h-[260px] w-full max-w-[280px] min-h-[220px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_chartjs_2.Doughnut, { data: config.data, options: config.options, redraw: false }) });
 }
 function InsightPolarAreaChart() {
   const mounted = useClientMounted();
@@ -3584,13 +3818,14 @@ function InsightPolarAreaChart() {
   if (!mounted) {
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartSkeleton, { className: "h-[280px]" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative mx-auto h-[280px] w-full max-w-[320px] min-h-[240px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_chartjs_2.PolarArea, { data: config.data, options: config.options }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative mx-auto h-[280px] w-full max-w-[320px] min-h-[240px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_chartjs_2.PolarArea, { data: config.data, options: config.options, redraw: false }) });
 }
 
 // src/components/dashboard/DashboardWell.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-function DashboardWell({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("ph-dashboard-well", className), ...props });
+function DashboardWell(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", __spreadValues({ className: cn("ph-dashboard-well", className) }, props));
 }
 
 // src/components/dashboard/DashboardToolbar.tsx
@@ -3611,78 +3846,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__ */ (0, import_jsx_runtime47.jsx)("div", { className: cn(presetClass[preset], className), ...props });
+function DashboardGrid(_a) {
+  var _b = _a, {
+    preset = "insights",
+    className
+  } = _b, props = __objRest(_b, [
+    "preset",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", __spreadValues({ className: cn(presetClass[preset], className) }, props));
 }
 
 // src/components/dashboard/DashboardFiltersBar.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-function DashboardFiltersBar({ className, ...props }) {
+function DashboardFiltersBar(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "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
 var import_jsx_runtime49 = require("react/jsx-runtime");
-function DashboardKpiCard({ label, value, footer, icon, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("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__ */ (0, import_jsx_runtime49.jsxs)("article", __spreadProps(__spreadValues({ className: cn("ph-stat", className) }, props), { children: [
     icon != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-2 [&>svg]:h-7 [&>svg]:w-7", children: icon }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ph-stat-label", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ph-stat-val", children: value }),
     footer != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "mt-1 text-xs text-ph-subtle", children: footer }) : null,
     children
-  ] });
+  ] }));
 }
 
 // src/components/dashboard/DashboardInsightPlaceholder.tsx
 var import_jsx_runtime50 = require("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__ */ (0, import_jsx_runtime50.jsx)(
     "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__ */ (0, import_jsx_runtime50.jsx)("span", { className: "font-medium text-ph-subtle group-hover:text-ph-ink", children: label })
-    }
+    })
   );
 }
 
 // src/components/dashboard/InsightShell.tsx
 var import_jsx_runtime51 = require("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__ */ (0, import_jsx_runtime51.jsxs)("article", { className: cn("ph-insight-shell flex-row", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("article", __spreadProps(__spreadValues({ className: cn("ph-insight-shell flex-row", className) }, props), { children: [
     ribbon != null ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "div",
       {
@@ -3692,7 +3941,7 @@ function InsightShell({
       }
     ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-3 p-4", bodyClassName), children })
-  ] });
+  ] }));
 }
 
 // src/components/dashboard/InsightShellHeader.tsx
@@ -3722,7 +3971,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__ */ (0, import_jsx_runtime53.jsx)("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);
@@ -3737,17 +3989,22 @@ function MiniTrendBars({
 
 // src/components/dashboard/InsightMiniCard.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-function InsightMiniCard({
-  title,
-  subtitle,
-  heights,
-  ribbonColour,
-  ...shellProps
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(InsightShell, { ribbonColour, ...shellProps, children: [
+function InsightMiniCard(_a) {
+  var _b = _a, {
+    title,
+    subtitle,
+    heights,
+    ribbonColour
+  } = _b, shellProps = __objRest(_b, [
+    "title",
+    "subtitle",
+    "heights",
+    "ribbonColour"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(InsightShell, __spreadProps(__spreadValues({ ribbonColour }, shellProps), { children: [
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(InsightShellHeader, { title, subtitle }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(MiniTrendBars, { heights })
-  ] });
+  ] }));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {