@epilot/spark-ui 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/components/list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.cjs","names":["React","Skeleton"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = 'soft' | 'surface' | 'outline' | 'ghost'\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */\n  variant?: ListVariant\n}\n\nfunction List({ className, variant = 'soft', ...props }: ListProps) {\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft = separate cards → stack with a small gap (the gap IS the divider). ghost\n        // shares that same gap for spacing but no fill/border (see ListItem's chrome\n        // block, which has no ghost selector). surface/outline glue rows into one panel.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-0.5',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-0.5',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] w-full items-center gap-4 rounded-[inherit] px-4 py-3 text-left no-underline',\n        !skeleton && selected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n          // accent too, in ListItemTrailing; title + leading stay neutral).\n          'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n        ],\n      ),\n      children: skeleton ? <ListItemSkeleton /> : children,\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={cn(\n        // relative so has-[:focus-visible]:z-10 lifts the focused row's ring-offset above\n        // the stacked siblings instead of being clipped by the next item.\n        'relative has-[:focus-visible]:z-10',\n        // NEUTRAL container chrome per the list variant (group/list) — mirrors\n        // AccordionItem's group-data-[variant=X]/accordion: block (accordion.tsx); keep\n        // both in sync if this pattern changes. Radius = rounded-md (tracks the radius\n        // knob but never goes fully round). ghost matches none of these selectors on\n        // purpose — no fill/border, just the List root's gap (above) for spacing.\n        // soft: each row is its own borderless soft-tinted rounded card (root gap = divider).\n        'group-data-[variant=soft]/list:rounded-md group-data-[variant=soft]/list:bg-gray-a2',\n        // surface + outline share ONE glued-panel frame: sides on all, top on each (divider),\n        // first/last round the outer corners, last closes with border-b. surface fills it.\n        'group-data-[variant=surface]/list:bg-gray-2',\n        'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:border-gray-a6 group-data-[variant=surface]/list:first:rounded-t-md group-data-[variant=surface]/list:last:rounded-b-md group-data-[variant=surface]/list:last:border-b',\n        'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:border-gray-a6 group-data-[variant=outline]/list:first:rounded-t-md group-data-[variant=outline]/list:last:rounded-b-md group-data-[variant=outline]/list:last:border-b',\n        className,\n      )}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {row}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\nfunction ListItemLeading({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'span'>) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base font-bold text-gray-12',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nfunction ListItemSubline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (MaterialSymbol does) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // MaterialSymbol here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type { ListProps, ListItemProps, ListItemContentProps, ListVariant }\n"],"mappings":"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"}
+{"version":3,"file":"list.cjs","names":["React","Skeleton"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = 'soft' | 'surface' | 'outline' | 'ghost'\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */\n  variant?: ListVariant\n}\n\nfunction List({ className, variant = 'soft', ...props }: ListProps) {\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft = separate cards → stack with a small gap (the gap IS the divider). ghost\n        // shares that same gap for spacing but no fill/border (see ListItem's chrome\n        // block, which has no ghost selector). surface/outline glue rows into one panel.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-0.5',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-0.5',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] w-full items-center gap-4 rounded-[inherit] px-4 py-3 text-left no-underline',\n        !skeleton && selected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n          // accent too, in ListItemTrailing; title + leading stay neutral).\n          'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n        ],\n      ),\n      children: skeleton ? <ListItemSkeleton /> : children,\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={cn(\n        'relative has-focus-visible:z-10',\n        'group-data-[variant=soft]/list:rounded-md group-data-[variant=soft]/list:bg-gray-a2 dark:group-data-[variant=soft]/list:bg-gray-a3',\n        'group-data-[variant=surface]/list:bg-gray-2',\n        'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:border-gray-a6 group-data-[variant=surface]/list:first:rounded-t-md group-data-[variant=surface]/list:last:rounded-b-md group-data-[variant=surface]/list:last:border-b',\n        'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:border-gray-a6 group-data-[variant=outline]/list:first:rounded-t-md group-data-[variant=outline]/list:last:rounded-b-md group-data-[variant=outline]/list:last:border-b',\n        className,\n      )}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {row}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\nfunction ListItemLeading({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'span'>) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base font-bold text-gray-12',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nfunction ListItemSubline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (MaterialSymbol does) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // MaterialSymbol here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type { ListProps, ListItemProps, ListItemContentProps, ListVariant }\n"],"mappings":"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"}

package/dist/components/list.js

@@ -36,7 +36,7 @@ function ListItem({ className, children, recent, selected, skeleton, render, ...
 	});
 	return /* @__PURE__ */ jsx("li", {
 		"data-slot": "list-item",
-		className: cn("relative has-[:focus-visible]:z-10", "group-data-[variant=soft]/list:rounded-md group-data-[variant=soft]/list:bg-gray-a2", "group-data-[variant=surface]/list:bg-gray-2", "group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:border-gray-a6 group-data-[variant=surface]/list:first:rounded-t-md group-data-[variant=surface]/list:last:rounded-b-md group-data-[variant=surface]/list:last:border-b", "group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:border-gray-a6 group-data-[variant=outline]/list:first:rounded-t-md group-data-[variant=outline]/list:last:rounded-b-md group-data-[variant=outline]/list:last:border-b", className),
+		className: cn("relative has-focus-visible:z-10", "group-data-[variant=soft]/list:rounded-md group-data-[variant=soft]/list:bg-gray-a2 dark:group-data-[variant=soft]/list:bg-gray-a3", "group-data-[variant=surface]/list:bg-gray-2", "group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:border-gray-a6 group-data-[variant=surface]/list:first:rounded-t-md group-data-[variant=surface]/list:last:rounded-b-md group-data-[variant=surface]/list:last:border-b", "group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:border-gray-a6 group-data-[variant=outline]/list:first:rounded-t-md group-data-[variant=outline]/list:last:rounded-b-md group-data-[variant=outline]/list:last:border-b", className),
 		...props,
 		children: /* @__PURE__ */ jsx(ListItemContext.Provider, {
 			value: recentCtx,

package/dist/components/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":["React"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = 'soft' | 'surface' | 'outline' | 'ghost'\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */\n  variant?: ListVariant\n}\n\nfunction List({ className, variant = 'soft', ...props }: ListProps) {\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft = separate cards → stack with a small gap (the gap IS the divider). ghost\n        // shares that same gap for spacing but no fill/border (see ListItem's chrome\n        // block, which has no ghost selector). surface/outline glue rows into one panel.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-0.5',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-0.5',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] w-full items-center gap-4 rounded-[inherit] px-4 py-3 text-left no-underline',\n        !skeleton && selected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n          // accent too, in ListItemTrailing; title + leading stay neutral).\n          'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n        ],\n      ),\n      children: skeleton ? <ListItemSkeleton /> : children,\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={cn(\n        // relative so has-[:focus-visible]:z-10 lifts the focused row's ring-offset above\n        // the stacked siblings instead of being clipped by the next item.\n        'relative has-[:focus-visible]:z-10',\n        // NEUTRAL container chrome per the list variant (group/list) — mirrors\n        // AccordionItem's group-data-[variant=X]/accordion: block (accordion.tsx); keep\n        // both in sync if this pattern changes. Radius = rounded-md (tracks the radius\n        // knob but never goes fully round). ghost matches none of these selectors on\n        // purpose — no fill/border, just the List root's gap (above) for spacing.\n        // soft: each row is its own borderless soft-tinted rounded card (root gap = divider).\n        'group-data-[variant=soft]/list:rounded-md group-data-[variant=soft]/list:bg-gray-a2',\n        // surface + outline share ONE glued-panel frame: sides on all, top on each (divider),\n        // first/last round the outer corners, last closes with border-b. surface fills it.\n        'group-data-[variant=surface]/list:bg-gray-2',\n        'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:border-gray-a6 group-data-[variant=surface]/list:first:rounded-t-md group-data-[variant=surface]/list:last:rounded-b-md group-data-[variant=surface]/list:last:border-b',\n        'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:border-gray-a6 group-data-[variant=outline]/list:first:rounded-t-md group-data-[variant=outline]/list:last:rounded-b-md group-data-[variant=outline]/list:last:border-b',\n        className,\n      )}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {row}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\nfunction ListItemLeading({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'span'>) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base font-bold text-gray-12',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nfunction ListItemSubline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (MaterialSymbol does) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // MaterialSymbol here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type { ListProps, ListItemProps, ListItemContentProps, ListVariant }\n"],"mappings":"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"}
+{"version":3,"file":"list.js","names":["React"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = 'soft' | 'surface' | 'outline' | 'ghost'\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */\n  variant?: ListVariant\n}\n\nfunction List({ className, variant = 'soft', ...props }: ListProps) {\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft = separate cards → stack with a small gap (the gap IS the divider). ghost\n        // shares that same gap for spacing but no fill/border (see ListItem's chrome\n        // block, which has no ghost selector). surface/outline glue rows into one panel.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-0.5',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-0.5',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] w-full items-center gap-4 rounded-[inherit] px-4 py-3 text-left no-underline',\n        !skeleton && selected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n          // accent too, in ListItemTrailing; title + leading stay neutral).\n          'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n        ],\n      ),\n      children: skeleton ? <ListItemSkeleton /> : children,\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={cn(\n        'relative has-focus-visible:z-10',\n        'group-data-[variant=soft]/list:rounded-md group-data-[variant=soft]/list:bg-gray-a2 dark:group-data-[variant=soft]/list:bg-gray-a3',\n        'group-data-[variant=surface]/list:bg-gray-2',\n        'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:border-gray-a6 group-data-[variant=surface]/list:first:rounded-t-md group-data-[variant=surface]/list:last:rounded-b-md group-data-[variant=surface]/list:last:border-b',\n        'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:border-gray-a6 group-data-[variant=outline]/list:first:rounded-t-md group-data-[variant=outline]/list:last:rounded-b-md group-data-[variant=outline]/list:last:border-b',\n        className,\n      )}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {row}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\nfunction ListItemLeading({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'span'>) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base font-bold text-gray-12',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nfunction ListItemSubline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (MaterialSymbol does) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // MaterialSymbol here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type { ListProps, ListItemProps, ListItemContentProps, ListVariant }\n"],"mappings":"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"}

package/dist/components/metering-row.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { MaterialSymbolIconName } from "../icons/material-symbol.js";
-import { t as Tone } from "../tones-DyCkL71h.js";
+import { t as Tone } from "../tones-PXJGlSpe.js";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/metering-row.d.ts

package/dist/components/money-saved-block.cjs

@@ -51,7 +51,7 @@ const MoneySavedGaugeContent = ({ autarkyProgress, autarkyLabel, autarkyCaption
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				d: gaugeArcPath,
 				fill: "none",
-				stroke: "var(--gray-a5)",
+				stroke: "var(--neutral-a5)",
 				strokeWidth: gaugeStrokeWidth,
 				strokeLinecap: "round",
 				pathLength: 1

package/dist/components/money-saved-block.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"money-saved-block.cjs","names":["SectionTitle","StateValue","MaterialSymbol"],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--gray-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;EACG,CAAA;;AAIV,MAAM,qBAAqB,EAAE,eAA8C;AACzE,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EAAuB;EAAe,CAAA;;AAG9D,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,cAAD,EAAe,UAAwB,CAAA;;AAGhD,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,YAAD,EAAa,UAAsB,CAAA;;AAG5C,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EAAM,WAAU;YAAhB,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAyB,MAAK;GAAc,CAAA,EACtE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAgB;GAAgB,CAAA,CAC3C;;;AAIX,MAAM,4BAA4B,EAChC,eAGI;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EACZ;EACG,CAAA;;AAIV,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;AACJ,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;IACpC,CAAA,CACE;;EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA;EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAmC;GAAsB,CAAA;EACxE,EAAA,CAAA"}
+{"version":3,"file":"money-saved-block.cjs","names":["SectionTitle","StateValue","MaterialSymbol"],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--neutral-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;EACG,CAAA;;AAIV,MAAM,qBAAqB,EAAE,eAA8C;AACzE,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EAAuB;EAAe,CAAA;;AAG9D,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,cAAD,EAAe,UAAwB,CAAA;;AAGhD,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,YAAD,EAAa,UAAsB,CAAA;;AAG5C,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EAAM,WAAU;YAAhB,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAyB,MAAK;GAAc,CAAA,EACtE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAgB;GAAgB,CAAA,CAC3C;;;AAIX,MAAM,4BAA4B,EAChC,eAGI;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EACZ;EACG,CAAA;;AAIV,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;AACJ,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;IACpC,CAAA,CACE;;EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA;EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAmC;GAAsB,CAAA;EACxE,EAAA,CAAA"}

package/dist/components/money-saved-block.js

@@ -49,7 +49,7 @@ const MoneySavedGaugeContent = ({ autarkyProgress, autarkyLabel, autarkyCaption
 			children: [/* @__PURE__ */ jsx("path", {
 				d: gaugeArcPath,
 				fill: "none",
-				stroke: "var(--gray-a5)",
+				stroke: "var(--neutral-a5)",
 				strokeWidth: gaugeStrokeWidth,
 				strokeLinecap: "round",
 				pathLength: 1

package/dist/components/money-saved-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"money-saved-block.js","names":[],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--gray-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;AACJ,QACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;EACG,CAAA;;AAIV,MAAM,qBAAqB,EAAE,eAA8C;AACzE,QAAO,oBAAC,OAAD;EAAK,WAAU;EAAuB;EAAe,CAAA;;AAG9D,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,oBAAC,cAAD,EAAe,UAAwB,CAAA;;AAGhD,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,oBAAC,YAAD,EAAa,UAAsB,CAAA;;AAG5C,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,gBAAD;GAAgB,WAAU;GAAyB,MAAK;GAAc,CAAA,EACtE,oBAAC,QAAD;GAAM,WAAU;GAAgB;GAAgB,CAAA,CAC3C;;;AAIX,MAAM,4BAA4B,EAChC,eAGI;AACJ,QACE,oBAAC,OAAD;EAAK,WAAU;EACZ;EACG,CAAA;;AAIV,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;AACJ,QACE,qBAAA,UAAA,EAAA,UAAA;EACE,qBAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,CAAA,EACF,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;IACpC,CAAA,CACE;;EACN,oBAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA;EACP,oBAAC,QAAD;GAAM,WAAU;aAAmC;GAAsB,CAAA;EACxE,EAAA,CAAA"}
+{"version":3,"file":"money-saved-block.js","names":[],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--neutral-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;AACJ,QACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;EACG,CAAA;;AAIV,MAAM,qBAAqB,EAAE,eAA8C;AACzE,QAAO,oBAAC,OAAD;EAAK,WAAU;EAAuB;EAAe,CAAA;;AAG9D,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,oBAAC,cAAD,EAAe,UAAwB,CAAA;;AAGhD,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,oBAAC,YAAD,EAAa,UAAsB,CAAA;;AAG5C,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,gBAAD;GAAgB,WAAU;GAAyB,MAAK;GAAc,CAAA,EACtE,oBAAC,QAAD;GAAM,WAAU;GAAgB;GAAgB,CAAA,CAC3C;;;AAIX,MAAM,4BAA4B,EAChC,eAGI;AACJ,QACE,oBAAC,OAAD;EAAK,WAAU;EACZ;EACG,CAAA;;AAIV,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;AACJ,QACE,qBAAA,UAAA,EAAA,UAAA;EACE,qBAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,CAAA,EACF,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;IACpC,CAAA,CACE;;EACN,oBAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA;EACP,oBAAC,QAAD;GAAM,WAAU;aAAmC;GAAsB,CAAA;EACxE,EAAA,CAAA"}

package/dist/components/number-flow.d.ts

@@ -1,4 +1,4 @@
 "use client";
 
-import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-DSbucQ_K.js";
+import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-D9zsxH0-.js";
 export { Format, NumberFlowProps, NumberFlow as default };

package/dist/components/power-history-chart.cjs

@@ -1,6 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
@@ -33,7 +34,7 @@ const SERIES_COLORS = {
 	solar: "var(--orange-a9)",
 	grid: "var(--blue-9)",
 	battery: "var(--green-a9)",
-	consumption: "var(--gray-12)"
+	consumption: "var(--neutral-12)"
 };
 const PADDING_TOP = 20;
 const PADDING_BOTTOM = 28;
@@ -52,6 +53,7 @@ const tBisector = (0, _visx_vendor_d3_array.bisector)((d) => d.t);
 function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, labels, omitSeries, highlightAt, title, className, height = DEFAULT_HEIGHT }) {
 	const fmtTooltipX = formatTooltipX ?? formatX;
 	const containerRef = (0, react.useRef)(null);
+	const reducedMotion = require_hooks_use_reduced_motion.useReducedMotion();
 	const [width, setWidth] = (0, react.useState)(0);
 	const [hiddenSeries, setHiddenSeries] = (0, react.useState)(() => /* @__PURE__ */ new Set());
 	const omitted = (0, react.useMemo)(() => new Set(omitSeries), [omitSeries]);
@@ -206,13 +208,13 @@ function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, l
 								x2: plotRight,
 								y1: y,
 								y2: y,
-								stroke: "var(--gray-a4)",
+								stroke: "var(--neutral-a4)",
 								strokeWidth: 1
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 								x: Y_AXIS_GUTTER - 7,
 								y: y + 3,
 								textAnchor: "end",
-								fill: "var(--gray-a11)",
+								fill: "var(--neutral-a11)",
 								fontSize: 10,
 								children: require_utils_chart_scale.formatYAxisTick(tick)
 							})] }, `y-tick-${tick}`);
@@ -249,7 +251,7 @@ function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, l
 							x2: plotRight,
 							y1: yScale(0),
 							y2: yScale(0),
-							stroke: "var(--slate-a6)",
+							stroke: "var(--neutral-a6)",
 							strokeWidth: 1
 						}),
 						showHighlight && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
@@ -266,7 +268,7 @@ function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, l
 							x: xScale(tick),
 							y: height - PADDING_BOTTOM + 16,
 							textAnchor: "middle",
-							fill: "var(--gray-a11)",
+							fill: "var(--neutral-a11)",
 							fontSize: 10,
 							children: formatX(tick)
 						}, `x-tick-${tick}`)),
@@ -276,7 +278,7 @@ function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, l
 								x2: xScale(tooltipData.t),
 								y1: PADDING_TOP,
 								y2: height - PADDING_BOTTOM,
-								stroke: "var(--slate-a6)",
+								stroke: "var(--neutral-a6)",
 								strokeDasharray: "4 4",
 								pointerEvents: "none"
 							}),
@@ -318,7 +320,7 @@ function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, l
 						left: tooltipPos.left,
 						top: tooltipPos.top,
 						opacity: tooltipOpen && tooltipData ? 1 : 0,
-						transition: "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
+						transition: reducedMotion ? "opacity 140ms ease-out" : "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
 					},
 					children: tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_chart.ChartTooltipCard, {
 						label: fmtTooltipX(tooltipData.t),

package/dist/components/power-history-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"power-history-chart.cjs","names":["valueFormat","buildYAxisScale","useMeasuredSize","clampTooltipPosition","SectionTitle","SeriesLegend","formatYAxisTick","Area","curveMonotoneX","LinePath","ChartTooltipCard"],"sources":["../../src/components/power-history-chart.tsx"],"sourcesContent":["import { curveMonotoneX } from '@visx/curve'\nimport { localPoint } from '@visx/event'\nimport { scaleLinear } from '@visx/scale'\nimport { Area, LinePath } from '@visx/shape'\nimport { useTooltip } from '@visx/tooltip'\nimport { bisector } from '@visx/vendor/d3-array'\nimport * as React from 'react'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { buildYAxisScale, formatYAxisTick } from '../utils/chart-scale'\nimport { cn } from '../utils/cn'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport {\n  ChartTooltipCard,\n  type ChartTooltipRow,\n  clampTooltipPosition,\n  useMeasuredSize,\n} from './chart'\nimport { SeriesLegend, type SeriesLegendItem } from './series-legend'\nimport { SectionTitle } from './typography'\n\nexport interface PowerHistoryPoint {\n  /** Epoch milliseconds. */\n  t: number\n  solar: number\n  /** Signed: positive = import, negative = feed-in. */\n  grid: number\n  /** Signed: positive = discharge, negative = charge. */\n  battery: number\n  consumption: number\n}\n\nexport interface PowerHistoryChartProps {\n  data: PowerHistoryPoint[]\n  /** Axis/tooltip unit, e.g. \"kW\". */\n  unit: string\n  formatX: (t: number) => string\n  /** Tooltip time formatter. Defaults to `formatX`; use to keep the tooltip's\n   * full clock time when the axis ticks are compact (hour-only). */\n  formatTooltipX?: (t: number) => string\n  formatValue?: (value: number) => string\n  labels: {\n    solar: string\n    grid: string\n    battery: string\n    consumption: string\n  }\n  /** Series to drop entirely (no legend entry, area, or tooltip row). */\n  omitSeries?: readonly PowerHistorySeriesKey[]\n  /** Epoch ms to mark with the current-time dashed line (omit to hide). */\n  highlightAt?: number\n  title?: string\n  className?: string\n  height?: number\n}\n\nconst AREA_KEYS = ['solar', 'grid', 'battery'] as const\n\n// All toggleable series, in legend order. The areas (solar/grid/battery) plus\n// the consumption overlay line.\nconst SERIES_KEYS = ['solar', 'grid', 'battery', 'consumption'] as const\nexport type PowerHistorySeriesKey = (typeof SERIES_KEYS)[number]\ntype SeriesKey = PowerHistorySeriesKey\n\nconst SERIES_COLORS = {\n  solar: 'var(--orange-a9)',\n  grid: 'var(--blue-9)',\n  battery: 'var(--green-a9)',\n  consumption: 'var(--gray-12)',\n} as const\n\nconst PADDING_TOP = 20\nconst PADDING_BOTTOM = 28\nconst PADDING_RIGHT = 8\nconst Y_AXIS_GUTTER = 34\nconst X_TICK_COUNT = 6\nconst DEFAULT_HEIGHT = 260\n\nconst tBisector = bisector<PowerHistoryPoint, number>((d) => d.t)\n\n/**\n * Diverging \"power sources\" area chart over a continuous time axis: solar\n * (orange), grid (blue) and battery (green) areas around a zero baseline, with\n * consumption overlaid as a line. Negative values (grid feed-in, battery\n * charging) dip below zero. For instantaneous power (day view). A legend at the\n * top toggles each series on/off; the y-axis rescales to the visible ones. visx.\n */\nexport function PowerHistoryChart({\n  data,\n  unit,\n  formatX,\n  formatTooltipX,\n  formatValue,\n  labels,\n  omitSeries,\n  highlightAt,\n  title,\n  className,\n  height = DEFAULT_HEIGHT,\n}: PowerHistoryChartProps) {\n  const fmtTooltipX = formatTooltipX ?? formatX\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n  const [hiddenSeries, setHiddenSeries] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n  const omitted = useMemo(() => new Set<SeriesKey>(omitSeries), [omitSeries])\n\n  const toggleSeries = useCallback((id: string) => {\n    setHiddenSeries((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  const isHidden = useCallback(\n    (key: SeriesKey) => omitted.has(key) || hiddenSeries.has(key),\n    [hiddenSeries, omitted],\n  )\n\n  const {\n    showTooltip,\n    hideTooltip,\n    tooltipData,\n    tooltipLeft,\n    tooltipTop,\n    tooltipOpen,\n  } = useTooltip<PowerHistoryPoint>()\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 fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const tMin = data.length ? (data[0]?.t ?? 0) : 0\n  const tMax = data.length ? (data[data.length - 1]?.t ?? 0) : 0\n\n  const { yMin, yMax } = useMemo(() => {\n    let min = 0\n    let max = 0\n    for (const d of data) {\n      if (!isHidden('solar')) max = Math.max(max, d.solar)\n      if (!isHidden('consumption')) max = Math.max(max, d.consumption)\n      if (!isHidden('grid')) {\n        max = Math.max(max, d.grid)\n        min = Math.min(min, d.grid)\n      }\n      if (!isHidden('battery')) {\n        max = Math.max(max, d.battery)\n        min = Math.min(min, d.battery)\n      }\n    }\n    return { yMin: min, yMax: max }\n  }, [data, isHidden])\n\n  const {\n    ticks: yTicks,\n    min: lo,\n    max: hi,\n  } = useMemo(() => buildYAxisScale(yMin, yMax), [yMin, yMax])\n\n  const plotRight = Math.max(Y_AXIS_GUTTER, width - PADDING_RIGHT)\n\n  const xScale = useMemo(\n    () =>\n      scaleLinear<number>({\n        domain: [tMin, tMax === tMin ? tMin + 1 : tMax],\n        range: [Y_AXIS_GUTTER, plotRight],\n      }),\n    [tMin, tMax, plotRight],\n  )\n\n  const yScale = useMemo(\n    () =>\n      scaleLinear<number>({\n        domain: [lo, hi === lo ? lo + 1 : hi],\n        range: [height - PADDING_BOTTOM, PADDING_TOP],\n      }),\n    [lo, hi, height],\n  )\n\n  const xTicks = useMemo(() => {\n    if (tMax <= tMin) return [tMin]\n    return Array.from(\n      { length: X_TICK_COUNT },\n      (_, i) => tMin + (i / (X_TICK_COUNT - 1)) * (tMax - tMin),\n    )\n  }, [tMin, tMax])\n\n  const handleTooltip = useCallback(\n    (\n      event:\n        | React.TouchEvent<SVGRectElement>\n        | React.MouseEvent<SVGRectElement>,\n    ) => {\n      const point = localPoint(event)\n      if (!point || data.length === 0) return\n\n      const xMs = xScale.invert(point.x)\n      const index = tBisector.left(data, xMs, 1)\n      const d0 = data[index - 1]\n      const d1 = data[index]\n      if (!d0) return\n\n      const d = d1 && xMs - d0.t > d1.t - xMs ? d1 : d0\n      showTooltip({\n        tooltipData: d,\n        tooltipLeft: xScale(d.t),\n        tooltipTop: PADDING_TOP,\n      })\n    },\n    [data, showTooltip, xScale],\n  )\n\n  const legendItems: SeriesLegendItem[] = SERIES_KEYS.filter(\n    (key) => !omitted.has(key),\n  ).map((key) => ({\n    id: key,\n    label: labels[key],\n    color: SERIES_COLORS[key],\n  }))\n\n  const tooltipRows: ChartTooltipRow[] = tooltipData\n    ? SERIES_KEYS.filter((key) => !isHidden(key)).map((key) => ({\n        key,\n        label: labels[key],\n        color: SERIES_COLORS[key],\n        value: fmtValue(tooltipData[key]),\n      }))\n    : []\n\n  const showHighlight =\n    highlightAt !== undefined && highlightAt >= tMin && highlightAt <= tMax\n\n  const [tooltipRef, tooltipSize] = useMeasuredSize<HTMLDivElement>()\n  const tooltipPos = clampTooltipPosition({\n    anchorX: tooltipLeft ?? 0,\n    anchorY: tooltipTop ?? PADDING_TOP,\n    width,\n    height,\n    tipWidth: tooltipSize.width,\n    tipHeight: tooltipSize.height,\n    placement: 'beside',\n  })\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n      <SeriesLegend\n        items={legendItems}\n        hiddenIds={hiddenSeries}\n        onToggle={toggleSeries}\n      />\n      <span className=\"px-1 text-xs text-gray-light\">{unit}</span>\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && (\n          <svg width={width} height={height}>\n            <defs>\n              {AREA_KEYS.map((key) => (\n                <linearGradient\n                  key={key}\n                  id={`power-history-fill-${key}`}\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"0\"\n                  y2=\"1\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    stopColor={SERIES_COLORS[key]}\n                    stopOpacity={0.35}\n                  />\n                  <stop\n                    offset=\"100%\"\n                    stopColor={SERIES_COLORS[key]}\n                    stopOpacity={0.04}\n                  />\n                </linearGradient>\n              ))}\n            </defs>\n\n            {yTicks.map((tick) => {\n              const y = yScale(tick)\n              return (\n                <g key={`y-tick-${tick}`}>\n                  <line\n                    x1={Y_AXIS_GUTTER}\n                    x2={plotRight}\n                    y1={y}\n                    y2={y}\n                    stroke=\"var(--gray-a4)\"\n                    strokeWidth={1}\n                  />\n                  <text\n                    x={Y_AXIS_GUTTER - 7}\n                    y={y + 3}\n                    textAnchor=\"end\"\n                    fill=\"var(--gray-a11)\"\n                    fontSize={10}\n                  >\n                    {formatYAxisTick(tick)}\n                  </text>\n                </g>\n              )\n            })}\n\n            {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n              <Area<PowerHistoryPoint>\n                key={`area-${key}`}\n                data={data}\n                x={(d) => xScale(d.t)}\n                y0={yScale(0)}\n                y1={(d) => yScale(d[key])}\n                curve={curveMonotoneX}\n                fill={`url(#power-history-fill-${key})`}\n                stroke=\"transparent\"\n              />\n            ))}\n\n            {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n              <LinePath<PowerHistoryPoint>\n                key={`line-${key}`}\n                data={data}\n                x={(d) => xScale(d.t)}\n                y={(d) => yScale(d[key])}\n                curve={curveMonotoneX}\n                stroke={SERIES_COLORS[key]}\n                strokeWidth={1.5}\n                fill=\"none\"\n              />\n            ))}\n\n            {!isHidden('consumption') && (\n              <LinePath<PowerHistoryPoint>\n                data={data}\n                x={(d) => xScale(d.t)}\n                y={(d) => yScale(d.consumption)}\n                curve={curveMonotoneX}\n                stroke={SERIES_COLORS.consumption}\n                strokeWidth={1.5}\n                fill=\"none\"\n              />\n            )}\n\n            <line\n              x1={Y_AXIS_GUTTER}\n              x2={plotRight}\n              y1={yScale(0)}\n              y2={yScale(0)}\n              stroke=\"var(--slate-a6)\"\n              strokeWidth={1}\n            />\n\n            {showHighlight && (\n              <line\n                x1={xScale(highlightAt)}\n                x2={xScale(highlightAt)}\n                y1={PADDING_TOP}\n                y2={height - PADDING_BOTTOM}\n                stroke=\"var(--spark-a9)\"\n                strokeWidth={1.5}\n                strokeDasharray=\"5 4\"\n                pointerEvents=\"none\"\n              />\n            )}\n\n            {xTicks.map((tick) => (\n              <text\n                key={`x-tick-${tick}`}\n                x={xScale(tick)}\n                y={height - PADDING_BOTTOM + 16}\n                textAnchor=\"middle\"\n                fill=\"var(--gray-a11)\"\n                fontSize={10}\n              >\n                {formatX(tick)}\n              </text>\n            ))}\n\n            {tooltipOpen && tooltipData && (\n              <>\n                <line\n                  x1={xScale(tooltipData.t)}\n                  x2={xScale(tooltipData.t)}\n                  y1={PADDING_TOP}\n                  y2={height - PADDING_BOTTOM}\n                  stroke=\"var(--slate-a6)\"\n                  strokeDasharray=\"4 4\"\n                  pointerEvents=\"none\"\n                />\n                {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n                  <circle\n                    key={`dot-${key}`}\n                    cx={xScale(tooltipData.t)}\n                    cy={yScale(tooltipData[key])}\n                    r={3.5}\n                    fill={SERIES_COLORS[key]}\n                    stroke=\"white\"\n                    strokeWidth={1.5}\n                    pointerEvents=\"none\"\n                  />\n                ))}\n                {!isHidden('consumption') && (\n                  <circle\n                    cx={xScale(tooltipData.t)}\n                    cy={yScale(tooltipData.consumption)}\n                    r={3.5}\n                    fill={SERIES_COLORS.consumption}\n                    stroke=\"white\"\n                    strokeWidth={1.5}\n                    pointerEvents=\"none\"\n                  />\n                )}\n              </>\n            )}\n\n            <rect\n              x={Y_AXIS_GUTTER}\n              y={PADDING_TOP}\n              width={Math.max(0, plotRight - Y_AXIS_GUTTER)}\n              height={Math.max(0, height - PADDING_BOTTOM - PADDING_TOP)}\n              fill=\"transparent\"\n              onMouseMove={handleTooltip}\n              onMouseLeave={hideTooltip}\n              onTouchMove={handleTooltip}\n              onTouchEnd={hideTooltip}\n            />\n          </svg>\n        )}\n\n        <div\n          ref={tooltipRef}\n          className=\"pointer-events-none absolute z-10\"\n          style={{\n            left: tooltipPos.left,\n            top: tooltipPos.top,\n            opacity: tooltipOpen && tooltipData ? 1 : 0,\n            transition:\n              'left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out',\n          }}\n        >\n          {tooltipData && (\n            <ChartTooltipCard\n              label={fmtTooltipX(tooltipData.t)}\n              rows={tooltipRows}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"power-history-chart.cjs","names":["useReducedMotion","valueFormat","buildYAxisScale","useMeasuredSize","clampTooltipPosition","SectionTitle","SeriesLegend","formatYAxisTick","Area","curveMonotoneX","LinePath","ChartTooltipCard"],"sources":["../../src/components/power-history-chart.tsx"],"sourcesContent":["import { curveMonotoneX } from '@visx/curve'\nimport { localPoint } from '@visx/event'\nimport { scaleLinear } from '@visx/scale'\nimport { Area, LinePath } from '@visx/shape'\nimport { useTooltip } from '@visx/tooltip'\nimport { bisector } from '@visx/vendor/d3-array'\nimport * as React from 'react'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { buildYAxisScale, formatYAxisTick } from '../utils/chart-scale'\nimport { cn } from '../utils/cn'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport {\n  ChartTooltipCard,\n  type ChartTooltipRow,\n  clampTooltipPosition,\n  useMeasuredSize,\n} from './chart'\nimport { SeriesLegend, type SeriesLegendItem } from './series-legend'\nimport { SectionTitle } from './typography'\n\nexport interface PowerHistoryPoint {\n  /** Epoch milliseconds. */\n  t: number\n  solar: number\n  /** Signed: positive = import, negative = feed-in. */\n  grid: number\n  /** Signed: positive = discharge, negative = charge. */\n  battery: number\n  consumption: number\n}\n\nexport interface PowerHistoryChartProps {\n  data: PowerHistoryPoint[]\n  /** Axis/tooltip unit, e.g. \"kW\". */\n  unit: string\n  formatX: (t: number) => string\n  /** Tooltip time formatter. Defaults to `formatX`; use to keep the tooltip's\n   * full clock time when the axis ticks are compact (hour-only). */\n  formatTooltipX?: (t: number) => string\n  formatValue?: (value: number) => string\n  labels: {\n    solar: string\n    grid: string\n    battery: string\n    consumption: string\n  }\n  /** Series to drop entirely (no legend entry, area, or tooltip row). */\n  omitSeries?: readonly PowerHistorySeriesKey[]\n  /** Epoch ms to mark with the current-time dashed line (omit to hide). */\n  highlightAt?: number\n  title?: string\n  className?: string\n  height?: number\n}\n\nconst AREA_KEYS = ['solar', 'grid', 'battery'] as const\n\n// All toggleable series, in legend order. The areas (solar/grid/battery) plus\n// the consumption overlay line.\nconst SERIES_KEYS = ['solar', 'grid', 'battery', 'consumption'] as const\nexport type PowerHistorySeriesKey = (typeof SERIES_KEYS)[number]\ntype SeriesKey = PowerHistorySeriesKey\n\nconst SERIES_COLORS = {\n  solar: 'var(--orange-a9)',\n  grid: 'var(--blue-9)',\n  battery: 'var(--green-a9)',\n  consumption: 'var(--neutral-12)',\n} as const\n\nconst PADDING_TOP = 20\nconst PADDING_BOTTOM = 28\nconst PADDING_RIGHT = 8\nconst Y_AXIS_GUTTER = 34\nconst X_TICK_COUNT = 6\nconst DEFAULT_HEIGHT = 260\n\nconst tBisector = bisector<PowerHistoryPoint, number>((d) => d.t)\n\n/**\n * Diverging \"power sources\" area chart over a continuous time axis: solar\n * (orange), grid (blue) and battery (green) areas around a zero baseline, with\n * consumption overlaid as a line. Negative values (grid feed-in, battery\n * charging) dip below zero. For instantaneous power (day view). A legend at the\n * top toggles each series on/off; the y-axis rescales to the visible ones. visx.\n */\nexport function PowerHistoryChart({\n  data,\n  unit,\n  formatX,\n  formatTooltipX,\n  formatValue,\n  labels,\n  omitSeries,\n  highlightAt,\n  title,\n  className,\n  height = DEFAULT_HEIGHT,\n}: PowerHistoryChartProps) {\n  const fmtTooltipX = formatTooltipX ?? formatX\n  const containerRef = useRef<HTMLDivElement>(null)\n  const reducedMotion = useReducedMotion()\n  const [width, setWidth] = useState(0)\n  const [hiddenSeries, setHiddenSeries] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n  const omitted = useMemo(() => new Set<SeriesKey>(omitSeries), [omitSeries])\n\n  const toggleSeries = useCallback((id: string) => {\n    setHiddenSeries((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  const isHidden = useCallback(\n    (key: SeriesKey) => omitted.has(key) || hiddenSeries.has(key),\n    [hiddenSeries, omitted],\n  )\n\n  const {\n    showTooltip,\n    hideTooltip,\n    tooltipData,\n    tooltipLeft,\n    tooltipTop,\n    tooltipOpen,\n  } = useTooltip<PowerHistoryPoint>()\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 fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const tMin = data.length ? (data[0]?.t ?? 0) : 0\n  const tMax = data.length ? (data[data.length - 1]?.t ?? 0) : 0\n\n  const { yMin, yMax } = useMemo(() => {\n    let min = 0\n    let max = 0\n    for (const d of data) {\n      if (!isHidden('solar')) max = Math.max(max, d.solar)\n      if (!isHidden('consumption')) max = Math.max(max, d.consumption)\n      if (!isHidden('grid')) {\n        max = Math.max(max, d.grid)\n        min = Math.min(min, d.grid)\n      }\n      if (!isHidden('battery')) {\n        max = Math.max(max, d.battery)\n        min = Math.min(min, d.battery)\n      }\n    }\n    return { yMin: min, yMax: max }\n  }, [data, isHidden])\n\n  const {\n    ticks: yTicks,\n    min: lo,\n    max: hi,\n  } = useMemo(() => buildYAxisScale(yMin, yMax), [yMin, yMax])\n\n  const plotRight = Math.max(Y_AXIS_GUTTER, width - PADDING_RIGHT)\n\n  const xScale = useMemo(\n    () =>\n      scaleLinear<number>({\n        domain: [tMin, tMax === tMin ? tMin + 1 : tMax],\n        range: [Y_AXIS_GUTTER, plotRight],\n      }),\n    [tMin, tMax, plotRight],\n  )\n\n  const yScale = useMemo(\n    () =>\n      scaleLinear<number>({\n        domain: [lo, hi === lo ? lo + 1 : hi],\n        range: [height - PADDING_BOTTOM, PADDING_TOP],\n      }),\n    [lo, hi, height],\n  )\n\n  const xTicks = useMemo(() => {\n    if (tMax <= tMin) return [tMin]\n    return Array.from(\n      { length: X_TICK_COUNT },\n      (_, i) => tMin + (i / (X_TICK_COUNT - 1)) * (tMax - tMin),\n    )\n  }, [tMin, tMax])\n\n  const handleTooltip = useCallback(\n    (\n      event:\n        | React.TouchEvent<SVGRectElement>\n        | React.MouseEvent<SVGRectElement>,\n    ) => {\n      const point = localPoint(event)\n      if (!point || data.length === 0) return\n\n      const xMs = xScale.invert(point.x)\n      const index = tBisector.left(data, xMs, 1)\n      const d0 = data[index - 1]\n      const d1 = data[index]\n      if (!d0) return\n\n      const d = d1 && xMs - d0.t > d1.t - xMs ? d1 : d0\n      showTooltip({\n        tooltipData: d,\n        tooltipLeft: xScale(d.t),\n        tooltipTop: PADDING_TOP,\n      })\n    },\n    [data, showTooltip, xScale],\n  )\n\n  const legendItems: SeriesLegendItem[] = SERIES_KEYS.filter(\n    (key) => !omitted.has(key),\n  ).map((key) => ({\n    id: key,\n    label: labels[key],\n    color: SERIES_COLORS[key],\n  }))\n\n  const tooltipRows: ChartTooltipRow[] = tooltipData\n    ? SERIES_KEYS.filter((key) => !isHidden(key)).map((key) => ({\n        key,\n        label: labels[key],\n        color: SERIES_COLORS[key],\n        value: fmtValue(tooltipData[key]),\n      }))\n    : []\n\n  const showHighlight =\n    highlightAt !== undefined && highlightAt >= tMin && highlightAt <= tMax\n\n  const [tooltipRef, tooltipSize] = useMeasuredSize<HTMLDivElement>()\n  const tooltipPos = clampTooltipPosition({\n    anchorX: tooltipLeft ?? 0,\n    anchorY: tooltipTop ?? PADDING_TOP,\n    width,\n    height,\n    tipWidth: tooltipSize.width,\n    tipHeight: tooltipSize.height,\n    placement: 'beside',\n  })\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n      <SeriesLegend\n        items={legendItems}\n        hiddenIds={hiddenSeries}\n        onToggle={toggleSeries}\n      />\n      <span className=\"px-1 text-xs text-gray-light\">{unit}</span>\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && (\n          <svg width={width} height={height}>\n            <defs>\n              {AREA_KEYS.map((key) => (\n                <linearGradient\n                  key={key}\n                  id={`power-history-fill-${key}`}\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"0\"\n                  y2=\"1\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    stopColor={SERIES_COLORS[key]}\n                    stopOpacity={0.35}\n                  />\n                  <stop\n                    offset=\"100%\"\n                    stopColor={SERIES_COLORS[key]}\n                    stopOpacity={0.04}\n                  />\n                </linearGradient>\n              ))}\n            </defs>\n\n            {yTicks.map((tick) => {\n              const y = yScale(tick)\n              return (\n                <g key={`y-tick-${tick}`}>\n                  <line\n                    x1={Y_AXIS_GUTTER}\n                    x2={plotRight}\n                    y1={y}\n                    y2={y}\n                    stroke=\"var(--neutral-a4)\"\n                    strokeWidth={1}\n                  />\n                  <text\n                    x={Y_AXIS_GUTTER - 7}\n                    y={y + 3}\n                    textAnchor=\"end\"\n                    fill=\"var(--neutral-a11)\"\n                    fontSize={10}\n                  >\n                    {formatYAxisTick(tick)}\n                  </text>\n                </g>\n              )\n            })}\n\n            {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n              <Area<PowerHistoryPoint>\n                key={`area-${key}`}\n                data={data}\n                x={(d) => xScale(d.t)}\n                y0={yScale(0)}\n                y1={(d) => yScale(d[key])}\n                curve={curveMonotoneX}\n                fill={`url(#power-history-fill-${key})`}\n                stroke=\"transparent\"\n              />\n            ))}\n\n            {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n              <LinePath<PowerHistoryPoint>\n                key={`line-${key}`}\n                data={data}\n                x={(d) => xScale(d.t)}\n                y={(d) => yScale(d[key])}\n                curve={curveMonotoneX}\n                stroke={SERIES_COLORS[key]}\n                strokeWidth={1.5}\n                fill=\"none\"\n              />\n            ))}\n\n            {!isHidden('consumption') && (\n              <LinePath<PowerHistoryPoint>\n                data={data}\n                x={(d) => xScale(d.t)}\n                y={(d) => yScale(d.consumption)}\n                curve={curveMonotoneX}\n                stroke={SERIES_COLORS.consumption}\n                strokeWidth={1.5}\n                fill=\"none\"\n              />\n            )}\n\n            <line\n              x1={Y_AXIS_GUTTER}\n              x2={plotRight}\n              y1={yScale(0)}\n              y2={yScale(0)}\n              stroke=\"var(--neutral-a6)\"\n              strokeWidth={1}\n            />\n\n            {showHighlight && (\n              <line\n                x1={xScale(highlightAt)}\n                x2={xScale(highlightAt)}\n                y1={PADDING_TOP}\n                y2={height - PADDING_BOTTOM}\n                stroke=\"var(--spark-a9)\"\n                strokeWidth={1.5}\n                strokeDasharray=\"5 4\"\n                pointerEvents=\"none\"\n              />\n            )}\n\n            {xTicks.map((tick) => (\n              <text\n                key={`x-tick-${tick}`}\n                x={xScale(tick)}\n                y={height - PADDING_BOTTOM + 16}\n                textAnchor=\"middle\"\n                fill=\"var(--neutral-a11)\"\n                fontSize={10}\n              >\n                {formatX(tick)}\n              </text>\n            ))}\n\n            {tooltipOpen && tooltipData && (\n              <>\n                <line\n                  x1={xScale(tooltipData.t)}\n                  x2={xScale(tooltipData.t)}\n                  y1={PADDING_TOP}\n                  y2={height - PADDING_BOTTOM}\n                  stroke=\"var(--neutral-a6)\"\n                  strokeDasharray=\"4 4\"\n                  pointerEvents=\"none\"\n                />\n                {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n                  <circle\n                    key={`dot-${key}`}\n                    cx={xScale(tooltipData.t)}\n                    cy={yScale(tooltipData[key])}\n                    r={3.5}\n                    fill={SERIES_COLORS[key]}\n                    stroke=\"white\"\n                    strokeWidth={1.5}\n                    pointerEvents=\"none\"\n                  />\n                ))}\n                {!isHidden('consumption') && (\n                  <circle\n                    cx={xScale(tooltipData.t)}\n                    cy={yScale(tooltipData.consumption)}\n                    r={3.5}\n                    fill={SERIES_COLORS.consumption}\n                    stroke=\"white\"\n                    strokeWidth={1.5}\n                    pointerEvents=\"none\"\n                  />\n                )}\n              </>\n            )}\n\n            <rect\n              x={Y_AXIS_GUTTER}\n              y={PADDING_TOP}\n              width={Math.max(0, plotRight - Y_AXIS_GUTTER)}\n              height={Math.max(0, height - PADDING_BOTTOM - PADDING_TOP)}\n              fill=\"transparent\"\n              onMouseMove={handleTooltip}\n              onMouseLeave={hideTooltip}\n              onTouchMove={handleTooltip}\n              onTouchEnd={hideTooltip}\n            />\n          </svg>\n        )}\n\n        <div\n          ref={tooltipRef}\n          className=\"pointer-events-none absolute z-10\"\n          style={{\n            left: tooltipPos.left,\n            top: tooltipPos.top,\n            opacity: tooltipOpen && tooltipData ? 1 : 0,\n            transition: reducedMotion\n              ? 'opacity 140ms ease-out'\n              : 'left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out',\n          }}\n        >\n          {tooltipData && (\n            <ChartTooltipCard\n              label={fmtTooltipX(tooltipData.t)}\n              rows={tooltipRows}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/power-history-chart.js

@@ -1,4 +1,5 @@
 "use client";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import "../utils/chars.js";
 import { twoDecimalFormat } from "../utils/format.js";
@@ -30,7 +31,7 @@ const SERIES_COLORS = {
 	solar: "var(--orange-a9)",
 	grid: "var(--blue-9)",
 	battery: "var(--green-a9)",
-	consumption: "var(--gray-12)"
+	consumption: "var(--neutral-12)"
 };
 const PADDING_TOP = 20;
 const PADDING_BOTTOM = 28;
@@ -49,6 +50,7 @@ const tBisector = bisector((d) => d.t);
 function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, labels, omitSeries, highlightAt, title, className, height = DEFAULT_HEIGHT }) {
 	const fmtTooltipX = formatTooltipX ?? formatX;
 	const containerRef = useRef(null);
+	const reducedMotion = useReducedMotion();
 	const [width, setWidth] = useState(0);
 	const [hiddenSeries, setHiddenSeries] = useState(() => /* @__PURE__ */ new Set());
 	const omitted = useMemo(() => new Set(omitSeries), [omitSeries]);
@@ -203,13 +205,13 @@ function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, l
 								x2: plotRight,
 								y1: y,
 								y2: y,
-								stroke: "var(--gray-a4)",
+								stroke: "var(--neutral-a4)",
 								strokeWidth: 1
 							}), /* @__PURE__ */ jsx("text", {
 								x: Y_AXIS_GUTTER - 7,
 								y: y + 3,
 								textAnchor: "end",
-								fill: "var(--gray-a11)",
+								fill: "var(--neutral-a11)",
 								fontSize: 10,
 								children: formatYAxisTick(tick)
 							})] }, `y-tick-${tick}`);
@@ -246,7 +248,7 @@ function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, l
 							x2: plotRight,
 							y1: yScale(0),
 							y2: yScale(0),
-							stroke: "var(--slate-a6)",
+							stroke: "var(--neutral-a6)",
 							strokeWidth: 1
 						}),
 						showHighlight && /* @__PURE__ */ jsx("line", {
@@ -263,7 +265,7 @@ function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, l
 							x: xScale(tick),
 							y: height - PADDING_BOTTOM + 16,
 							textAnchor: "middle",
-							fill: "var(--gray-a11)",
+							fill: "var(--neutral-a11)",
 							fontSize: 10,
 							children: formatX(tick)
 						}, `x-tick-${tick}`)),
@@ -273,7 +275,7 @@ function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, l
 								x2: xScale(tooltipData.t),
 								y1: PADDING_TOP,
 								y2: height - PADDING_BOTTOM,
-								stroke: "var(--slate-a6)",
+								stroke: "var(--neutral-a6)",
 								strokeDasharray: "4 4",
 								pointerEvents: "none"
 							}),
@@ -315,7 +317,7 @@ function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, l
 						left: tooltipPos.left,
 						top: tooltipPos.top,
 						opacity: tooltipOpen && tooltipData ? 1 : 0,
-						transition: "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
+						transition: reducedMotion ? "opacity 140ms ease-out" : "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
 					},
 					children: tooltipData && /* @__PURE__ */ jsx(ChartTooltipCard, {
 						label: fmtTooltipX(tooltipData.t),