@epilot/spark-ui 0.20.0 → 0.20.2

package/dist/components/progress.js

@@ -19,7 +19,7 @@ const Progress = React$1.forwardRef(({ className, value, max = 100, size = "defa
 		role: "progressbar",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300",
+			className: "h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300 motion-reduce:transition-none",
 			style: { width: `${percentage}%` }
 		})
 	});

package/dist/components/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,QAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,WAAW,GACT,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"progress.js","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300 motion-reduce:transition-none\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,QAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,WAAW,GACT,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/components/radio-card-group.cjs

@@ -4,7 +4,7 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/radio-card-group.tsx
 const RadioCardGroupContext = react.createContext(void 0);
 const ARROW_STEP = {
@@ -57,7 +57,7 @@ const RadioCardGroup = react.forwardRef(({ value: valueProp, defaultValue, onVal
 			ref,
 			role: "radiogroup",
 			onKeyDown: handleKeyDown,
-			className: (0, cnfast.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*var(--radio-card-group-gap-steps,2))]", className),
+			className: (0, cn.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*var(--radio-card-group-gap-steps,2))]", className),
 			style: {
 				"--radio-card-group-gap-steps": gap,
 				...style
@@ -85,7 +85,7 @@ const RadioCardGroupItem = react.forwardRef(({ value, className, children, disab
 			onClick?.(event);
 			if (!event.defaultPrevented && !isDisabled) ctx.onValueChange(value);
 		},
-		className: (0, cnfast.cn)("h-12 w-full rounded-lg px-4 text-base font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", checked ? "border border-accent bg-base-accent-soft text-accent" : "border border-transparent bg-base-gray-soft text-gray hover:bg-gray-a3", className),
+		className: (0, cn.cn)("h-12 w-full rounded-lg px-4 text-base font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", checked ? "border border-accent bg-base-accent-soft text-accent" : "border border-transparent bg-base-gray-soft text-gray hover:bg-gray-a3", className),
 		...props,
 		children
 	});

package/dist/components/radio-card-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-card-group.cjs","names":["React"],"sources":["../../src/components/radio-card-group.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface RadioCardGroupContextValue {\n  value: string | undefined\n  onValueChange: (value: string) => void\n  disabled?: boolean\n  name: string\n}\n\nconst RadioCardGroupContext = React.createContext<\n  RadioCardGroupContextValue | undefined\n>(undefined)\n\nconst ARROW_STEP: Record<string, 1 | -1> = {\n  ArrowDown: 1,\n  ArrowRight: 1,\n  ArrowUp: -1,\n  ArrowLeft: -1,\n}\n\ninterface RadioCardGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Optional name used for ARIA grouping. Defaults to a generated id. */\n  name?: string\n  /** How many `--spark-layout-gap` units apart each card sits. */\n  gap?: number\n}\n\nconst RadioCardGroup = React.forwardRef<HTMLDivElement, RadioCardGroupProps>(\n  (\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      disabled,\n      name,\n      gap = 2,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedName = React.useId()\n    const [internalValue, setInternalValue] = React.useState<\n      string | undefined\n    >(defaultValue)\n    const isControlled = valueProp !== undefined\n    const value = isControlled ? valueProp : internalValue\n\n    const handleValueChange = React.useCallback(\n      (next: string) => {\n        if (!isControlled) setInternalValue(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const ctx = React.useMemo<RadioCardGroupContextValue>(\n      () => ({\n        value,\n        onValueChange: handleValueChange,\n        disabled,\n        name: name ?? generatedName,\n      }),\n      [value, handleValueChange, disabled, name, generatedName],\n    )\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const step = ARROW_STEP[event.key]\n      if (step === undefined && event.key !== 'Home' && event.key !== 'End')\n        return\n      const radios = [\n        ...event.currentTarget.querySelectorAll<HTMLButtonElement>(\n          '[role=\"radio\"]:not(:disabled)',\n        ),\n      ]\n      if (radios.length === 0) return\n      event.preventDefault()\n\n      let next = 0\n      if (event.key === 'End') {\n        next = radios.length - 1\n      } else if (step !== undefined) {\n        const current = radios.indexOf(\n          document.activeElement as HTMLButtonElement,\n        )\n        if (current !== -1) {\n          next = (current + step + radios.length) % radios.length\n        }\n      }\n      const target = radios[next]\n      if (!target) return\n      target.focus()\n      target.click()\n    }\n\n    return (\n      <RadioCardGroupContext.Provider value={ctx}>\n        {/* oxlint-disable-next-line jsx-a11y/interactive-supports-focus -- radiogroup is a composite: the tab stop belongs on the roving radios, not the container */}\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          onKeyDown={handleKeyDown}\n          className={cn(\n            'flex flex-col gap-[calc(var(--spark-layout-gap)*var(--radio-card-group-gap-steps,2))]',\n            className,\n          )}\n          style={\n            {\n              '--radio-card-group-gap-steps': gap,\n              ...style,\n            } as React.CSSProperties\n          }\n          {...props}\n        >\n          {children}\n        </div>\n      </RadioCardGroupContext.Provider>\n    )\n  },\n)\n\nRadioCardGroup.displayName = 'RadioCardGroup'\n\ninterface RadioCardGroupItemProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value'\n> {\n  value: string\n}\n\nconst RadioCardGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioCardGroupItemProps\n>(({ value, className, children, disabled, onClick, ...props }, ref) => {\n  const ctx = React.useContext(RadioCardGroupContext)\n  if (!ctx) {\n    throw new Error('RadioCardGroupItem must be used within a RadioCardGroup')\n  }\n\n  const checked = ctx.value === value\n  const isDisabled = disabled ?? ctx.disabled\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={checked}\n      data-state={checked ? 'checked' : 'unchecked'}\n      tabIndex={checked || ctx.value === undefined ? 0 : -1}\n      disabled={isDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented && !isDisabled) {\n          ctx.onValueChange(value)\n        }\n      }}\n      className={cn(\n        'h-12 w-full rounded-lg px-4 text-base font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        checked\n          ? 'border border-accent bg-base-accent-soft text-accent'\n          : 'border border-transparent bg-base-gray-soft text-gray hover:bg-gray-a3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n\nRadioCardGroupItem.displayName = 'RadioCardGroupItem'\n\nexport { RadioCardGroup, RadioCardGroupItem }\nexport type { RadioCardGroupProps, RadioCardGroupItemProps }\n"],"mappings":";;;;;;;;AAUA,MAAM,wBAAwBA,MAAM,cAElC,KAAA,CAAS;AAEX,MAAM,aAAqC;CACzC,WAAW;CACX,YAAY;CACZ,SAAS;CACT,WAAW;AACb;AAaA,MAAM,iBAAiBA,MAAM,YAEzB,EACE,OAAO,WACP,cACA,eACA,UACA,MACA,MAAM,GACN,WACA,OACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,gBAAgBA,MAAM,MAAM;CAClC,MAAM,CAAC,eAAe,oBAAoBA,MAAM,SAE9C,YAAY;CACd,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,QAAQ,eAAe,YAAY;CAEzC,MAAM,oBAAoBA,MAAM,aAC7B,SAAiB;EAChB,IAAI,CAAC,cAAc,iBAAiB,IAAI;EACxC,gBAAgB,IAAI;CACtB,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,MAAM,MAAMA,MAAM,eACT;EACL;EACA,eAAe;EACf;EACA,MAAM,QAAQ;CAChB,IACA;EAAC;EAAO;EAAmB;EAAU;EAAM;CAAa,CAC1D;CAEA,MAAM,iBAAiB,UAA+C;EACpE,MAAM,OAAO,WAAW,MAAM;EAC9B,IAAI,SAAS,KAAA,KAAa,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAC9D;EACF,MAAM,SAAS,CACb,GAAG,MAAM,cAAc,iBACrB,iCACF,CACF;EACA,IAAI,OAAO,WAAW,GAAG;EACzB,MAAM,eAAe;EAErB,IAAI,OAAO;EACX,IAAI,MAAM,QAAQ,OAChB,OAAO,OAAO,SAAS;OAClB,IAAI,SAAS,KAAA,GAAW;GAC7B,MAAM,UAAU,OAAO,QACrB,SAAS,aACX;GACA,IAAI,YAAY,IACd,QAAQ,UAAU,OAAO,OAAO,UAAU,OAAO;EAErD;EACA,MAAM,SAAS,OAAO;EACtB,IAAI,CAAC,QAAQ;EACb,OAAO,MAAM;EACb,OAAO,MAAM;CACf;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAsB,UAAvB;EAAgC,OAAO;YAErC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW;GACX,YAAA,GAAA,OAAA,IACE,yFACA,SACF;GACA,OACE;IACE,gCAAgC;IAChC,GAAG;GACL;GAEF,GAAI;GAEH;EACE,CAAA;CACyB,CAAA;AAEpC,CACF;AAEA,eAAe,cAAc;AAS7B,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,OAAO,WAAW,UAAU,UAAU,SAAS,GAAG,SAAS,QAAQ;CACtE,MAAM,MAAMA,MAAM,WAAW,qBAAqB;CAClD,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,yDAAyD;CAG3E,MAAM,UAAU,IAAI,UAAU;CAC9B,MAAM,aAAa,YAAY,IAAI;CAEnC,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACO;EACL,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY,UAAU,YAAY;EAClC,UAAU,WAAW,IAAI,UAAU,KAAA,IAAY,IAAI;EACnD,UAAU;EACV,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,oBAAoB,CAAC,YAC9B,IAAI,cAAc,KAAK;EAE3B;EACA,YAAA,GAAA,OAAA,IACE,qMACA,UACI,yDACA,0EACJ,SACF;EACA,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"radio-card-group.cjs","names":["React"],"sources":["../../src/components/radio-card-group.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface RadioCardGroupContextValue {\n  value: string | undefined\n  onValueChange: (value: string) => void\n  disabled?: boolean\n  name: string\n}\n\nconst RadioCardGroupContext = React.createContext<\n  RadioCardGroupContextValue | undefined\n>(undefined)\n\nconst ARROW_STEP: Record<string, 1 | -1> = {\n  ArrowDown: 1,\n  ArrowRight: 1,\n  ArrowUp: -1,\n  ArrowLeft: -1,\n}\n\ninterface RadioCardGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Optional name used for ARIA grouping. Defaults to a generated id. */\n  name?: string\n  /** How many `--spark-layout-gap` units apart each card sits. */\n  gap?: number\n}\n\nconst RadioCardGroup = React.forwardRef<HTMLDivElement, RadioCardGroupProps>(\n  (\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      disabled,\n      name,\n      gap = 2,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedName = React.useId()\n    const [internalValue, setInternalValue] = React.useState<\n      string | undefined\n    >(defaultValue)\n    const isControlled = valueProp !== undefined\n    const value = isControlled ? valueProp : internalValue\n\n    const handleValueChange = React.useCallback(\n      (next: string) => {\n        if (!isControlled) setInternalValue(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const ctx = React.useMemo<RadioCardGroupContextValue>(\n      () => ({\n        value,\n        onValueChange: handleValueChange,\n        disabled,\n        name: name ?? generatedName,\n      }),\n      [value, handleValueChange, disabled, name, generatedName],\n    )\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const step = ARROW_STEP[event.key]\n      if (step === undefined && event.key !== 'Home' && event.key !== 'End')\n        return\n      const radios = [\n        ...event.currentTarget.querySelectorAll<HTMLButtonElement>(\n          '[role=\"radio\"]:not(:disabled)',\n        ),\n      ]\n      if (radios.length === 0) return\n      event.preventDefault()\n\n      let next = 0\n      if (event.key === 'End') {\n        next = radios.length - 1\n      } else if (step !== undefined) {\n        const current = radios.indexOf(\n          document.activeElement as HTMLButtonElement,\n        )\n        if (current !== -1) {\n          next = (current + step + radios.length) % radios.length\n        }\n      }\n      const target = radios[next]\n      if (!target) return\n      target.focus()\n      target.click()\n    }\n\n    return (\n      <RadioCardGroupContext.Provider value={ctx}>\n        {/* oxlint-disable-next-line jsx-a11y/interactive-supports-focus -- radiogroup is a composite: the tab stop belongs on the roving radios, not the container */}\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          onKeyDown={handleKeyDown}\n          className={cn(\n            'flex flex-col gap-[calc(var(--spark-layout-gap)*var(--radio-card-group-gap-steps,2))]',\n            className,\n          )}\n          style={\n            {\n              '--radio-card-group-gap-steps': gap,\n              ...style,\n            } as React.CSSProperties\n          }\n          {...props}\n        >\n          {children}\n        </div>\n      </RadioCardGroupContext.Provider>\n    )\n  },\n)\n\nRadioCardGroup.displayName = 'RadioCardGroup'\n\ninterface RadioCardGroupItemProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value'\n> {\n  value: string\n}\n\nconst RadioCardGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioCardGroupItemProps\n>(({ value, className, children, disabled, onClick, ...props }, ref) => {\n  const ctx = React.useContext(RadioCardGroupContext)\n  if (!ctx) {\n    throw new Error('RadioCardGroupItem must be used within a RadioCardGroup')\n  }\n\n  const checked = ctx.value === value\n  const isDisabled = disabled ?? ctx.disabled\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={checked}\n      data-state={checked ? 'checked' : 'unchecked'}\n      tabIndex={checked || ctx.value === undefined ? 0 : -1}\n      disabled={isDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented && !isDisabled) {\n          ctx.onValueChange(value)\n        }\n      }}\n      className={cn(\n        'h-12 w-full rounded-lg px-4 text-base font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        checked\n          ? 'border border-accent bg-base-accent-soft text-accent'\n          : 'border border-transparent bg-base-gray-soft text-gray hover:bg-gray-a3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n\nRadioCardGroupItem.displayName = 'RadioCardGroupItem'\n\nexport { RadioCardGroup, RadioCardGroupItem }\nexport type { RadioCardGroupProps, RadioCardGroupItemProps }\n"],"mappings":";;;;;;;;AAUA,MAAM,wBAAwBA,MAAM,cAElC,KAAA,CAAS;AAEX,MAAM,aAAqC;CACzC,WAAW;CACX,YAAY;CACZ,SAAS;CACT,WAAW;AACb;AAaA,MAAM,iBAAiBA,MAAM,YAEzB,EACE,OAAO,WACP,cACA,eACA,UACA,MACA,MAAM,GACN,WACA,OACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,gBAAgBA,MAAM,MAAM;CAClC,MAAM,CAAC,eAAe,oBAAoBA,MAAM,SAE9C,YAAY;CACd,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,QAAQ,eAAe,YAAY;CAEzC,MAAM,oBAAoBA,MAAM,aAC7B,SAAiB;EAChB,IAAI,CAAC,cAAc,iBAAiB,IAAI;EACxC,gBAAgB,IAAI;CACtB,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,MAAM,MAAMA,MAAM,eACT;EACL;EACA,eAAe;EACf;EACA,MAAM,QAAQ;CAChB,IACA;EAAC;EAAO;EAAmB;EAAU;EAAM;CAAa,CAC1D;CAEA,MAAM,iBAAiB,UAA+C;EACpE,MAAM,OAAO,WAAW,MAAM;EAC9B,IAAI,SAAS,KAAA,KAAa,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAC9D;EACF,MAAM,SAAS,CACb,GAAG,MAAM,cAAc,iBACrB,iCACF,CACF;EACA,IAAI,OAAO,WAAW,GAAG;EACzB,MAAM,eAAe;EAErB,IAAI,OAAO;EACX,IAAI,MAAM,QAAQ,OAChB,OAAO,OAAO,SAAS;OAClB,IAAI,SAAS,KAAA,GAAW;GAC7B,MAAM,UAAU,OAAO,QACrB,SAAS,aACX;GACA,IAAI,YAAY,IACd,QAAQ,UAAU,OAAO,OAAO,UAAU,OAAO;EAErD;EACA,MAAM,SAAS,OAAO;EACtB,IAAI,CAAC,QAAQ;EACb,OAAO,MAAM;EACb,OAAO,MAAM;CACf;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAsB,UAAvB;EAAgC,OAAO;YAErC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW;GACX,YAAA,GAAA,GAAA,IACE,yFACA,SACF;GACA,OACE;IACE,gCAAgC;IAChC,GAAG;GACL;GAEF,GAAI;GAEH;EACE,CAAA;CACyB,CAAA;AAEpC,CACF;AAEA,eAAe,cAAc;AAS7B,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,OAAO,WAAW,UAAU,UAAU,SAAS,GAAG,SAAS,QAAQ;CACtE,MAAM,MAAMA,MAAM,WAAW,qBAAqB;CAClD,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,yDAAyD;CAG3E,MAAM,UAAU,IAAI,UAAU;CAC9B,MAAM,aAAa,YAAY,IAAI;CAEnC,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACO;EACL,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY,UAAU,YAAY;EAClC,UAAU,WAAW,IAAI,UAAU,KAAA,IAAY,IAAI;EACnD,UAAU;EACV,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,oBAAoB,CAAC,YAC9B,IAAI,cAAc,KAAK;EAE3B;EACA,YAAA,GAAA,GAAA,IACE,qMACA,UACI,yDACA,0EACJ,SACF;EACA,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC;AAED,mBAAmB,cAAc"}

package/dist/components/radio.cjs

@@ -7,14 +7,14 @@ react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_radio = require("@base-ui/react/radio");
 let _base_ui_react_radio_group = require("@base-ui/react/radio-group");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/radio.tsx
 function RadioGroup({ className, styleVariant, color, gap = 3, style, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio_group.RadioGroup, {
 		"data-slot": "radio-group",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0,
 		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
-		className: (0, cnfast.cn)("grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]", className),
+		className: (0, cn.cn)("grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]", className),
 		style: {
 			"--radio-group-gap-steps": gap,
 			...style
@@ -31,7 +31,7 @@ function Radio({ className, styleVariant, color, render, nativeButton, ...props
 		"data-accent-color": dataAccentColor,
 		nativeButton: nativeButton ?? render === void 0,
 		render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
-		className: (0, cnfast.cn)("peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)", "data-checked:border-(--spark-radio-ring,var(--spark-9))", className),
+		className: (0, cn.cn)("peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)", "data-checked:border-(--spark-radio-ring,var(--spark-9))", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio.Radio.Indicator, {
 			"data-slot": "radio-indicator",

package/dist/components/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs","names":["RadioGroupPrimitive","accentByColor","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;;;;AAsBA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,OACA,GAAG,SACe;CAKlB,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,YAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAOnD,YAAA,GAAA,OAAA,IACE,2EACA,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,MAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,OAAA,IAGE,iNAGA,qIACA,iFACA,6DACA,+IACA,2DACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,MAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}
+{"version":3,"file":"radio.cjs","names":["RadioGroupPrimitive","accentByColor","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;;;;AAsBA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,OACA,GAAG,SACe;CAKlB,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,YAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAOnD,YAAA,GAAA,GAAA,IACE,2EACA,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,MAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,GAAA,IAGE,iNAGA,qIACA,iFACA,6DACA,+IACA,2DACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,MAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}

package/dist/components/radio.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Radio as Radio$1 } from "@base-ui/react/radio";

package/dist/components/sankey-chart.cjs

@@ -6,8 +6,17 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _visx_group = require("@visx/group");
 let _visx_sankey = require("@visx/sankey");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/sankey-chart.tsx
+const SANKEY_CATEGORY_COLORS = {
+	solar: "var(--orange-a9)",
+	battery: "var(--green-a9)",
+	grid: "var(--blue-9)",
+	gridFeedIn: "var(--blue-7)",
+	home: "var(--spark-9)",
+	floor: "var(--neutral-a9)",
+	device: "var(--neutral-a8)"
+};
 const DEFAULT_HEIGHT = 260;
 const DEFAULT_NODE_WIDTH = 12;
 const DEFAULT_NODE_PADDING = 10;
@@ -22,7 +31,7 @@ function resolveNodeColor(node, categoryColors, defaultColor) {
 	if (node.category && categoryColors?.[node.category]) return categoryColors[node.category];
 	return defaultColor;
 }
-function SankeyChart({ nodes, links, categoryColors, defaultColor = DEFAULT_COLOR, valueSuffix, valueFormat, height = DEFAULT_HEIGHT, nodeWidth = DEFAULT_NODE_WIDTH, nodePadding = DEFAULT_NODE_PADDING, labelPadding = DEFAULT_LABEL_PADDING, keepAtDepthIds, title, className }) {
+function SankeyChart({ nodes, links, categoryColors = SANKEY_CATEGORY_COLORS, defaultColor = DEFAULT_COLOR, valueSuffix, valueFormat, height = DEFAULT_HEIGHT, nodeWidth = DEFAULT_NODE_WIDTH, nodePadding = DEFAULT_NODE_PADDING, labelPadding = DEFAULT_LABEL_PADDING, keepAtDepthIds, title, className }) {
 	const containerRef = (0, react.useRef)(null);
 	const [width, setWidth] = (0, react.useState)(0);
 	(0, react.useEffect)(() => {
@@ -74,7 +83,7 @@ function SankeyChart({ nodes, links, categoryColors, defaultColor = DEFAULT_COLO
 	const halfLabelStack = LABEL_STACK_HEIGHT / 2;
 	const labelWidth = Math.max(40, labelPadding - LABEL_GAP - 4);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, cnfast.cn)("flex w-full flex-col gap-2 py-2", className),
+		className: (0, cn.cn)("flex w-full flex-col gap-2 py-2", className),
 		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.SectionTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: containerRef,
 			className: "relative w-full",
@@ -110,7 +119,7 @@ function SankeyChart({ nodes, links, categoryColors, defaultColor = DEFAULT_COLO
 							})
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
 							className: "visx-sankey-nodes",
-							children: laidOut.nodes.map((node, index) => {
+							children: laidOut.nodes.map((node) => {
 								if (node.x0 === void 0 || node.x1 === void 0 || node.y0 === void 0 || node.y1 === void 0) return null;
 								const w = node.x1 - node.x0;
 								const h = node.y1 - node.y0;
@@ -122,7 +131,7 @@ function SankeyChart({ nodes, links, categoryColors, defaultColor = DEFAULT_COLO
 									height: Math.max(1, h),
 									fill,
 									rx: 2
-								}, `sankey-node-${index}`);
+								}, node.id);
 							})
 						})]
 					})
@@ -157,6 +166,7 @@ function SankeyChart({ nodes, links, categoryColors, defaultColor = DEFAULT_COLO
 	});
 }
 //#endregion
+exports.SANKEY_CATEGORY_COLORS = SANKEY_CATEGORY_COLORS;
 exports.SankeyChart = SankeyChart;
 
 //# sourceMappingURL=sankey-chart.cjs.map

package/dist/components/sankey-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sankey-chart.cjs","names":["SectionTitle","Sankey","Group","NumberFlow"],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\nconst LABEL_STACK_HEIGHT = 26\nconst DEFAULT_COLOR = 'var(--neutral-a9)'\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  keepAtDepthIds,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n  const halfLabelStack = LABEL_STACK_HEIGHT / 2\n  const labelWidth = Math.max(40, labelPadding - LABEL_GAP - 4)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <Sankey<SankeyDatumNode, SankeyDatumLink>\n            root={graph}\n            size={[innerWidth, innerHeight]}\n            nodeWidth={nodeWidth}\n            nodePadding={nodePadding}\n            nodeAlign={nodeAlign}\n            nodeId={(node) => node.id}\n            nodeSort={nodeSort}\n          >\n            {({ graph: laidOut, createPath }) => (\n              <>\n                <svg\n                  aria-hidden=\"true\"\n                  className=\"block\"\n                  height={height}\n                  width={width}\n                >\n                  <Group left={LEFT_INSET} top={TOP_INSET}>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node, index) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        return (\n                          <rect\n                            key={`sankey-node-${index}`}\n                            x={node.x0}\n                            y={node.y0}\n                            width={w}\n                            height={Math.max(1, h)}\n                            fill={fill}\n                            rx={2}\n                          />\n                        )\n                      })}\n                    </Group>\n                  </Group>\n                </svg>\n\n                <div className=\"pointer-events-none absolute inset-0 [-webkit-text-size-adjust:100%] [text-size-adjust:100%]\">\n                  {laidOut.nodes.map((node, index) => {\n                    if (\n                      node.x0 === undefined ||\n                      node.x1 === undefined ||\n                      node.y0 === undefined ||\n                      node.y1 === undefined\n                    ) {\n                      return null\n                    }\n\n                    const h = node.y1 - node.y0\n                    const nodeCenterY = TOP_INSET + node.y0 + h / 2\n                    const labelCenterY = Math.min(\n                      Math.max(nodeCenterY, halfLabelStack),\n                      height - halfLabelStack,\n                    )\n\n                    return (\n                      <div\n                        key={`sankey-label-${node.id ?? index}`}\n                        className=\"absolute flex -translate-y-1/2 flex-col items-start gap-1\"\n                        style={{\n                          left: LEFT_INSET + node.x1 + LABEL_GAP,\n                          top: labelCenterY,\n                          width: labelWidth,\n                        }}\n                      >\n                        <span className=\"text-[11px] leading-none font-semibold whitespace-nowrap text-gray\">\n                          {node.label}\n                        </span>\n                        <NumberFlow\n                          value={node.value ?? 0}\n                          {...(valueSuffix !== undefined && {\n                            suffix: valueSuffix,\n                          })}\n                          {...(valueFormat !== undefined && {\n                            format: valueFormat,\n                          })}\n                          className=\"block min-h-[10px] text-[10px] leading-none text-gray-light tabular-nums\"\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n              </>\n            )}\n          </Sankey>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart }\n"],"mappings":"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"}
+{"version":3,"file":"sankey-chart.cjs","names":["SectionTitle","Sankey","Group","NumberFlow"],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nconst SANKEY_CATEGORY_COLORS: Record<string, string> = {\n  solar: 'var(--orange-a9)',\n  battery: 'var(--green-a9)',\n  grid: 'var(--blue-9)',\n  gridFeedIn: 'var(--blue-7)',\n  home: 'var(--spark-9)',\n  floor: 'var(--neutral-a9)',\n  device: 'var(--neutral-a8)',\n}\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\nconst LABEL_STACK_HEIGHT = 26\nconst DEFAULT_COLOR = 'var(--neutral-a9)'\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors = SANKEY_CATEGORY_COLORS,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  keepAtDepthIds,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n  const halfLabelStack = LABEL_STACK_HEIGHT / 2\n  const labelWidth = Math.max(40, labelPadding - LABEL_GAP - 4)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <Sankey<SankeyDatumNode, SankeyDatumLink>\n            root={graph}\n            size={[innerWidth, innerHeight]}\n            nodeWidth={nodeWidth}\n            nodePadding={nodePadding}\n            nodeAlign={nodeAlign}\n            nodeId={(node) => node.id}\n            nodeSort={nodeSort}\n          >\n            {({ graph: laidOut, createPath }) => (\n              <>\n                <svg\n                  aria-hidden=\"true\"\n                  className=\"block\"\n                  height={height}\n                  width={width}\n                >\n                  <Group left={LEFT_INSET} top={TOP_INSET}>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            // oxlint-disable-next-line react/no-array-index-key -- stateless SVG paths; source/target pairs may repeat\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        return (\n                          <rect\n                            key={node.id}\n                            x={node.x0}\n                            y={node.y0}\n                            width={w}\n                            height={Math.max(1, h)}\n                            fill={fill}\n                            rx={2}\n                          />\n                        )\n                      })}\n                    </Group>\n                  </Group>\n                </svg>\n\n                <div className=\"pointer-events-none absolute inset-0 [-webkit-text-size-adjust:100%] [text-size-adjust:100%]\">\n                  {laidOut.nodes.map((node, index) => {\n                    if (\n                      node.x0 === undefined ||\n                      node.x1 === undefined ||\n                      node.y0 === undefined ||\n                      node.y1 === undefined\n                    ) {\n                      return null\n                    }\n\n                    const h = node.y1 - node.y0\n                    const nodeCenterY = TOP_INSET + node.y0 + h / 2\n                    const labelCenterY = Math.min(\n                      Math.max(nodeCenterY, halfLabelStack),\n                      height - halfLabelStack,\n                    )\n\n                    return (\n                      <div\n                        key={`sankey-label-${node.id ?? index}`}\n                        className=\"absolute flex -translate-y-1/2 flex-col items-start gap-1\"\n                        style={{\n                          left: LEFT_INSET + node.x1 + LABEL_GAP,\n                          top: labelCenterY,\n                          width: labelWidth,\n                        }}\n                      >\n                        <span className=\"text-[11px] leading-none font-semibold whitespace-nowrap text-gray\">\n                          {node.label}\n                        </span>\n                        <NumberFlow\n                          value={node.value ?? 0}\n                          {...(valueSuffix !== undefined && {\n                            suffix: valueSuffix,\n                          })}\n                          {...(valueFormat !== undefined && {\n                            format: valueFormat,\n                          })}\n                          className=\"block min-h-[10px] text-[10px] leading-none text-gray-light tabular-nums\"\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n              </>\n            )}\n          </Sankey>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart, SANKEY_CATEGORY_COLORS }\n"],"mappings":"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"}

package/dist/components/sankey-chart.d.cts

@@ -1,9 +1,10 @@
 "use client";
 
-import { Format } from "./number-flow.cjs";
+import { t as Format } from "../number-flow-Bch81ixZ.cjs";
 import { SankeyLink, SankeyNode } from "@visx/sankey";
 
 //#region src/components/sankey-chart.d.ts
+declare const SANKEY_CATEGORY_COLORS: Record<string, string>;
 interface SankeyChartNode {
   id: string;
   label: string;
@@ -61,5 +62,5 @@ declare function SankeyChart({
   className
 }: SankeyChartProps): React.ReactElement;
 //#endregion
-export { SankeyChart, SankeyChartLink, SankeyChartNode, SankeyChartProps, type SankeyLink, type SankeyNode };
+export { SANKEY_CATEGORY_COLORS, SankeyChart, SankeyChartLink, SankeyChartNode, SankeyChartProps, type SankeyLink, type SankeyNode };
 //# sourceMappingURL=sankey-chart.d.cts.map

package/dist/components/sankey-chart.d.ts

@@ -1,9 +1,10 @@
 "use client";
 
-import { Format } from "./number-flow.js";
+import { t as Format } from "../number-flow-Bch81ixZ.js";
 import { SankeyLink, SankeyNode } from "@visx/sankey";
 
 //#region src/components/sankey-chart.d.ts
+declare const SANKEY_CATEGORY_COLORS: Record<string, string>;
 interface SankeyChartNode {
   id: string;
   label: string;
@@ -61,5 +62,5 @@ declare function SankeyChart({
   className
 }: SankeyChartProps): React.ReactElement;
 //#endregion
-export { SankeyChart, SankeyChartLink, SankeyChartNode, SankeyChartProps, type SankeyLink, type SankeyNode };
+export { SANKEY_CATEGORY_COLORS, SankeyChart, SankeyChartLink, SankeyChartNode, SankeyChartProps, type SankeyLink, type SankeyNode };
 //# sourceMappingURL=sankey-chart.d.ts.map

package/dist/components/sankey-chart.js

@@ -7,6 +7,15 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Group } from "@visx/group";
 import { Sankey, sankeyJustify } from "@visx/sankey";
 //#region src/components/sankey-chart.tsx
+const SANKEY_CATEGORY_COLORS = {
+	solar: "var(--orange-a9)",
+	battery: "var(--green-a9)",
+	grid: "var(--blue-9)",
+	gridFeedIn: "var(--blue-7)",
+	home: "var(--spark-9)",
+	floor: "var(--neutral-a9)",
+	device: "var(--neutral-a8)"
+};
 const DEFAULT_HEIGHT = 260;
 const DEFAULT_NODE_WIDTH = 12;
 const DEFAULT_NODE_PADDING = 10;
@@ -21,7 +30,7 @@ function resolveNodeColor(node, categoryColors, defaultColor) {
 	if (node.category && categoryColors?.[node.category]) return categoryColors[node.category];
 	return defaultColor;
 }
-function SankeyChart({ nodes, links, categoryColors, defaultColor = DEFAULT_COLOR, valueSuffix, valueFormat, height = DEFAULT_HEIGHT, nodeWidth = DEFAULT_NODE_WIDTH, nodePadding = DEFAULT_NODE_PADDING, labelPadding = DEFAULT_LABEL_PADDING, keepAtDepthIds, title, className }) {
+function SankeyChart({ nodes, links, categoryColors = SANKEY_CATEGORY_COLORS, defaultColor = DEFAULT_COLOR, valueSuffix, valueFormat, height = DEFAULT_HEIGHT, nodeWidth = DEFAULT_NODE_WIDTH, nodePadding = DEFAULT_NODE_PADDING, labelPadding = DEFAULT_LABEL_PADDING, keepAtDepthIds, title, className }) {
 	const containerRef = useRef(null);
 	const [width, setWidth] = useState(0);
 	useEffect(() => {
@@ -109,7 +118,7 @@ function SankeyChart({ nodes, links, categoryColors, defaultColor = DEFAULT_COLO
 							})
 						}), /* @__PURE__ */ jsx(Group, {
 							className: "visx-sankey-nodes",
-							children: laidOut.nodes.map((node, index) => {
+							children: laidOut.nodes.map((node) => {
 								if (node.x0 === void 0 || node.x1 === void 0 || node.y0 === void 0 || node.y1 === void 0) return null;
 								const w = node.x1 - node.x0;
 								const h = node.y1 - node.y0;
@@ -121,7 +130,7 @@ function SankeyChart({ nodes, links, categoryColors, defaultColor = DEFAULT_COLO
 									height: Math.max(1, h),
 									fill,
 									rx: 2
-								}, `sankey-node-${index}`);
+								}, node.id);
 							})
 						})]
 					})
@@ -156,6 +165,6 @@ function SankeyChart({ nodes, links, categoryColors, defaultColor = DEFAULT_COLO
 	});
 }
 //#endregion
-export { SankeyChart };
+export { SANKEY_CATEGORY_COLORS, SankeyChart };
 
 //# sourceMappingURL=sankey-chart.js.map

package/dist/components/sankey-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\nconst LABEL_STACK_HEIGHT = 26\nconst DEFAULT_COLOR = 'var(--neutral-a9)'\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  keepAtDepthIds,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n  const halfLabelStack = LABEL_STACK_HEIGHT / 2\n  const labelWidth = Math.max(40, labelPadding - LABEL_GAP - 4)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <Sankey<SankeyDatumNode, SankeyDatumLink>\n            root={graph}\n            size={[innerWidth, innerHeight]}\n            nodeWidth={nodeWidth}\n            nodePadding={nodePadding}\n            nodeAlign={nodeAlign}\n            nodeId={(node) => node.id}\n            nodeSort={nodeSort}\n          >\n            {({ graph: laidOut, createPath }) => (\n              <>\n                <svg\n                  aria-hidden=\"true\"\n                  className=\"block\"\n                  height={height}\n                  width={width}\n                >\n                  <Group left={LEFT_INSET} top={TOP_INSET}>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node, index) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        return (\n                          <rect\n                            key={`sankey-node-${index}`}\n                            x={node.x0}\n                            y={node.y0}\n                            width={w}\n                            height={Math.max(1, h)}\n                            fill={fill}\n                            rx={2}\n                          />\n                        )\n                      })}\n                    </Group>\n                  </Group>\n                </svg>\n\n                <div className=\"pointer-events-none absolute inset-0 [-webkit-text-size-adjust:100%] [text-size-adjust:100%]\">\n                  {laidOut.nodes.map((node, index) => {\n                    if (\n                      node.x0 === undefined ||\n                      node.x1 === undefined ||\n                      node.y0 === undefined ||\n                      node.y1 === undefined\n                    ) {\n                      return null\n                    }\n\n                    const h = node.y1 - node.y0\n                    const nodeCenterY = TOP_INSET + node.y0 + h / 2\n                    const labelCenterY = Math.min(\n                      Math.max(nodeCenterY, halfLabelStack),\n                      height - halfLabelStack,\n                    )\n\n                    return (\n                      <div\n                        key={`sankey-label-${node.id ?? index}`}\n                        className=\"absolute flex -translate-y-1/2 flex-col items-start gap-1\"\n                        style={{\n                          left: LEFT_INSET + node.x1 + LABEL_GAP,\n                          top: labelCenterY,\n                          width: labelWidth,\n                        }}\n                      >\n                        <span className=\"text-[11px] leading-none font-semibold whitespace-nowrap text-gray\">\n                          {node.label}\n                        </span>\n                        <NumberFlow\n                          value={node.value ?? 0}\n                          {...(valueSuffix !== undefined && {\n                            suffix: valueSuffix,\n                          })}\n                          {...(valueFormat !== undefined && {\n                            format: valueFormat,\n                          })}\n                          className=\"block min-h-[10px] text-[10px] leading-none text-gray-light tabular-nums\"\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n              </>\n            )}\n          </Sankey>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart }\n"],"mappings":"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"}
+{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nconst SANKEY_CATEGORY_COLORS: Record<string, string> = {\n  solar: 'var(--orange-a9)',\n  battery: 'var(--green-a9)',\n  grid: 'var(--blue-9)',\n  gridFeedIn: 'var(--blue-7)',\n  home: 'var(--spark-9)',\n  floor: 'var(--neutral-a9)',\n  device: 'var(--neutral-a8)',\n}\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\nconst LABEL_STACK_HEIGHT = 26\nconst DEFAULT_COLOR = 'var(--neutral-a9)'\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors = SANKEY_CATEGORY_COLORS,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  keepAtDepthIds,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n  const halfLabelStack = LABEL_STACK_HEIGHT / 2\n  const labelWidth = Math.max(40, labelPadding - LABEL_GAP - 4)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <Sankey<SankeyDatumNode, SankeyDatumLink>\n            root={graph}\n            size={[innerWidth, innerHeight]}\n            nodeWidth={nodeWidth}\n            nodePadding={nodePadding}\n            nodeAlign={nodeAlign}\n            nodeId={(node) => node.id}\n            nodeSort={nodeSort}\n          >\n            {({ graph: laidOut, createPath }) => (\n              <>\n                <svg\n                  aria-hidden=\"true\"\n                  className=\"block\"\n                  height={height}\n                  width={width}\n                >\n                  <Group left={LEFT_INSET} top={TOP_INSET}>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            // oxlint-disable-next-line react/no-array-index-key -- stateless SVG paths; source/target pairs may repeat\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        return (\n                          <rect\n                            key={node.id}\n                            x={node.x0}\n                            y={node.y0}\n                            width={w}\n                            height={Math.max(1, h)}\n                            fill={fill}\n                            rx={2}\n                          />\n                        )\n                      })}\n                    </Group>\n                  </Group>\n                </svg>\n\n                <div className=\"pointer-events-none absolute inset-0 [-webkit-text-size-adjust:100%] [text-size-adjust:100%]\">\n                  {laidOut.nodes.map((node, index) => {\n                    if (\n                      node.x0 === undefined ||\n                      node.x1 === undefined ||\n                      node.y0 === undefined ||\n                      node.y1 === undefined\n                    ) {\n                      return null\n                    }\n\n                    const h = node.y1 - node.y0\n                    const nodeCenterY = TOP_INSET + node.y0 + h / 2\n                    const labelCenterY = Math.min(\n                      Math.max(nodeCenterY, halfLabelStack),\n                      height - halfLabelStack,\n                    )\n\n                    return (\n                      <div\n                        key={`sankey-label-${node.id ?? index}`}\n                        className=\"absolute flex -translate-y-1/2 flex-col items-start gap-1\"\n                        style={{\n                          left: LEFT_INSET + node.x1 + LABEL_GAP,\n                          top: labelCenterY,\n                          width: labelWidth,\n                        }}\n                      >\n                        <span className=\"text-[11px] leading-none font-semibold whitespace-nowrap text-gray\">\n                          {node.label}\n                        </span>\n                        <NumberFlow\n                          value={node.value ?? 0}\n                          {...(valueSuffix !== undefined && {\n                            suffix: valueSuffix,\n                          })}\n                          {...(valueFormat !== undefined && {\n                            format: valueFormat,\n                          })}\n                          className=\"block min-h-[10px] text-[10px] leading-none text-gray-light tabular-nums\"\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n              </>\n            )}\n          </Sankey>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart, SANKEY_CATEGORY_COLORS }\n"],"mappings":"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"}

package/dist/components/schedule-editor.cjs

@@ -4,35 +4,35 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/schedule-editor.tsx
 const ScheduleEditor = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 	ref,
-	className: (0, cnfast.cn)("flex flex-col gap-4 px-2", className),
+	className: (0, cn.cn)("flex flex-col gap-4 px-2", className),
 	...props
 }));
 ScheduleEditor.displayName = "ScheduleEditor";
 const ScheduleEditorHeader = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 	ref,
-	className: (0, cnfast.cn)("flex flex-col gap-1", className),
+	className: (0, cn.cn)("flex flex-col gap-1", className),
 	...props
 }));
 ScheduleEditorHeader.displayName = "ScheduleEditorHeader";
 const ScheduleEditorTitle = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 	ref,
-	className: (0, cnfast.cn)("text-base font-bold text-gray", className),
+	className: (0, cn.cn)("text-base font-bold text-gray", className),
 	...props
 }));
 ScheduleEditorTitle.displayName = "ScheduleEditorTitle";
 const ScheduleEditorDescription = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 	ref,
-	className: (0, cnfast.cn)("text-sm leading-5 text-gray-light", className),
+	className: (0, cn.cn)("text-sm leading-5 text-gray-light", className),
 	...props
 }));
 ScheduleEditorDescription.displayName = "ScheduleEditorDescription";
 const ScheduleEditorBody = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	ref,
-	className: (0, cnfast.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*4)]", className),
+	className: (0, cn.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*4)]", className),
 	...props
 }));
 ScheduleEditorBody.displayName = "ScheduleEditorBody";
@@ -41,20 +41,20 @@ ScheduleEditorBody.displayName = "ScheduleEditorBody";
 *  pattern. Override with `className` if you need a different arrangement. */
 const ScheduleEditorFooter = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
 	ref,
-	className: (0, cnfast.cn)("flex items-center justify-between gap-2 pt-2", className),
+	className: (0, cn.cn)("flex items-center justify-between gap-2 pt-2", className),
 	...props
 }));
 ScheduleEditorFooter.displayName = "ScheduleEditorFooter";
 /** Right-aligned cluster of footer actions (e.g. Cancel + Save). */
 const ScheduleEditorActions = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	ref,
-	className: (0, cnfast.cn)("ml-auto flex items-center gap-2", className),
+	className: (0, cn.cn)("ml-auto flex items-center gap-2", className),
 	...props
 }));
 ScheduleEditorActions.displayName = "ScheduleEditorActions";
 const ScheduleEditorField = react.forwardRef(({ children, className, hint, label, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 	ref,
-	className: (0, cnfast.cn)("flex flex-col gap-1.5", className),
+	className: (0, cn.cn)("flex flex-col gap-1.5", className),
 	...props,
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {

package/dist/components/schedule-editor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-editor.cjs","names":["React"],"sources":["../../src/components/schedule-editor.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst ScheduleEditor = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <section\n    ref={ref}\n    className={cn('flex flex-col gap-4 px-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditor.displayName = 'ScheduleEditor'\n\nconst ScheduleEditorHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    className={cn('flex flex-col gap-1', className)}\n    {...props}\n  />\n))\n\nScheduleEditorHeader.displayName = 'ScheduleEditorHeader'\n\nconst ScheduleEditorTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn('text-base font-bold text-gray', className)}\n    {...props}\n  />\n))\n\nScheduleEditorTitle.displayName = 'ScheduleEditorTitle'\n\nconst ScheduleEditorDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-sm leading-5 text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEditorDescription.displayName = 'ScheduleEditorDescription'\n\nconst ScheduleEditorBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*4)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEditorBody.displayName = 'ScheduleEditorBody'\n\n/** Footer slot. Default layout splits children into a `justify-between` row,\n *  which matches the common \"destructive on the left, primary on the right\"\n *  pattern. Override with `className` if you need a different arrangement. */\nconst ScheduleEditorFooter = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <footer\n    ref={ref}\n    className={cn('flex items-center justify-between gap-2 pt-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditorFooter.displayName = 'ScheduleEditorFooter'\n\n/** Right-aligned cluster of footer actions (e.g. Cancel + Save). */\nconst ScheduleEditorActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('ml-auto flex items-center gap-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditorActions.displayName = 'ScheduleEditorActions'\n\ninterface ScheduleEditorFieldProps extends Omit<\n  React.LabelHTMLAttributes<HTMLLabelElement>,\n  'children'\n> {\n  label: React.ReactNode\n  hint?: React.ReactNode\n  children: React.ReactNode\n}\n\nconst ScheduleEditorField = React.forwardRef<\n  HTMLLabelElement,\n  ScheduleEditorFieldProps\n>(({ children, className, hint, label, ...props }, ref) => (\n  <label\n    ref={ref}\n    className={cn('flex flex-col gap-1.5', className)}\n    {...props}\n  >\n    <span className=\"text-sm font-medium text-gray\">{label}</span>\n    {children}\n    {hint && <span className=\"text-xs text-gray-light\">{hint}</span>}\n  </label>\n))\n\nScheduleEditorField.displayName = 'ScheduleEditorField'\n\nexport {\n  ScheduleEditor,\n  ScheduleEditorActions,\n  ScheduleEditorBody,\n  ScheduleEditorDescription,\n  ScheduleEditorField,\n  ScheduleEditorFooter,\n  ScheduleEditorHeader,\n  ScheduleEditorTitle,\n}\n"],"mappings":";;;;;;;;AAGA,MAAM,iBAAiBA,MAAM,YAG1B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,WAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,4BAA4B,SAAS;CACnD,GAAI;AACL,CAAA,CACF;AAED,eAAe,cAAc;AAE7B,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,uBAAuB,SAAS;CAC9C,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,sBAAsBA,MAAM,YAG/B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,MAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;CACxD,GAAI;AACL,CAAA,CACF;AAED,oBAAoB,cAAc;AAElC,MAAM,4BAA4BA,MAAM,YAGrC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,0BAA0B,cAAc;AAExC,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;;;;AAKjC,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,gDAAgD,SAAS;CACvE,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;;AAGnC,MAAM,wBAAwBA,MAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,mCAAmC,SAAS;CAC1D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;AAWpC,MAAM,sBAAsBA,MAAM,YAG/B,EAAE,UAAU,WAAW,MAAM,OAAO,GAAG,SAAS,QACjD,iBAAA,GAAA,kBAAA,MAAC,SAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,yBAAyB,SAAS;CAChD,GAAI;WAHN;EAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAiC;EAAY,CAAA;EAC5D;EACA,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAA2B;EAAW,CAAA;CAC1D;EACR;AAED,oBAAoB,cAAc"}
+{"version":3,"file":"schedule-editor.cjs","names":["React"],"sources":["../../src/components/schedule-editor.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst ScheduleEditor = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <section\n    ref={ref}\n    className={cn('flex flex-col gap-4 px-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditor.displayName = 'ScheduleEditor'\n\nconst ScheduleEditorHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    className={cn('flex flex-col gap-1', className)}\n    {...props}\n  />\n))\n\nScheduleEditorHeader.displayName = 'ScheduleEditorHeader'\n\nconst ScheduleEditorTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn('text-base font-bold text-gray', className)}\n    {...props}\n  />\n))\n\nScheduleEditorTitle.displayName = 'ScheduleEditorTitle'\n\nconst ScheduleEditorDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-sm leading-5 text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEditorDescription.displayName = 'ScheduleEditorDescription'\n\nconst ScheduleEditorBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*4)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEditorBody.displayName = 'ScheduleEditorBody'\n\n/** Footer slot. Default layout splits children into a `justify-between` row,\n *  which matches the common \"destructive on the left, primary on the right\"\n *  pattern. Override with `className` if you need a different arrangement. */\nconst ScheduleEditorFooter = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <footer\n    ref={ref}\n    className={cn('flex items-center justify-between gap-2 pt-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditorFooter.displayName = 'ScheduleEditorFooter'\n\n/** Right-aligned cluster of footer actions (e.g. Cancel + Save). */\nconst ScheduleEditorActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('ml-auto flex items-center gap-2', className)}\n    {...props}\n  />\n))\n\nScheduleEditorActions.displayName = 'ScheduleEditorActions'\n\ninterface ScheduleEditorFieldProps extends Omit<\n  React.LabelHTMLAttributes<HTMLLabelElement>,\n  'children'\n> {\n  label: React.ReactNode\n  hint?: React.ReactNode\n  children: React.ReactNode\n}\n\nconst ScheduleEditorField = React.forwardRef<\n  HTMLLabelElement,\n  ScheduleEditorFieldProps\n>(({ children, className, hint, label, ...props }, ref) => (\n  <label\n    ref={ref}\n    className={cn('flex flex-col gap-1.5', className)}\n    {...props}\n  >\n    <span className=\"text-sm font-medium text-gray\">{label}</span>\n    {children}\n    {hint && <span className=\"text-xs text-gray-light\">{hint}</span>}\n  </label>\n))\n\nScheduleEditorField.displayName = 'ScheduleEditorField'\n\nexport {\n  ScheduleEditor,\n  ScheduleEditorActions,\n  ScheduleEditorBody,\n  ScheduleEditorDescription,\n  ScheduleEditorField,\n  ScheduleEditorFooter,\n  ScheduleEditorHeader,\n  ScheduleEditorTitle,\n}\n"],"mappings":";;;;;;;;AAGA,MAAM,iBAAiBA,MAAM,YAG1B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,WAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,4BAA4B,SAAS;CACnD,GAAI;AACL,CAAA,CACF;AAED,eAAe,cAAc;AAE7B,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,uBAAuB,SAAS;CAC9C,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,sBAAsBA,MAAM,YAG/B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,MAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,iCAAiC,SAAS;CACxD,GAAI;AACL,CAAA,CACF;AAED,oBAAoB,cAAc;AAElC,MAAM,4BAA4BA,MAAM,YAGrC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,0BAA0B,cAAc;AAExC,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,GAAA,IACE,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;;;;AAKjC,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,gDAAgD,SAAS;CACvE,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;;AAGnC,MAAM,wBAAwBA,MAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,mCAAmC,SAAS;CAC1D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;AAWpC,MAAM,sBAAsBA,MAAM,YAG/B,EAAE,UAAU,WAAW,MAAM,OAAO,GAAG,SAAS,QACjD,iBAAA,GAAA,kBAAA,MAAC,SAAD;CACO;CACL,YAAA,GAAA,GAAA,IAAc,yBAAyB,SAAS;CAChD,GAAI;WAHN;EAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAiC;EAAY,CAAA;EAC5D;EACA,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAA2B;EAAW,CAAA;CAC1D;EACR;AAED,oBAAoB,cAAc"}