@epilot/spark-ui 0.15.1 → 0.16.0

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 type { ContainerRadius } from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = SparkCardVariant\ntype ListRadius = ContainerRadius\n\n// Rounds only the first/last row of a run, regardless of variant — harmless on ghost\n// (nothing painted to clip). Keyed on `data-radius` alone: unlike fill (below), rounding\n// doesn't depend on variant/color, so no compound group-data selector is needed.\nconst radiusRowClasses: Record<ListRadius, string> = {\n  none: 'group-data-[radius=none]/list:first:rounded-t-none group-data-[radius=none]/list:last:rounded-b-none',\n  sm: 'group-data-[radius=sm]/list:first:rounded-t-sm group-data-[radius=sm]/list:last:rounded-b-sm',\n  md: 'group-data-[radius=md]/list:first:rounded-t-md group-data-[radius=md]/list:last:rounded-b-md',\n  lg: 'group-data-[radius=lg]/list:first:rounded-t-lg group-data-[radius=lg]/list:last:rounded-b-lg',\n  xl: 'group-data-[radius=xl]/list:first:rounded-t-xl group-data-[radius=xl]/list:last:rounded-b-xl',\n  '2xl':\n    'group-data-[radius=2xl]/list:first:rounded-t-2xl group-data-[radius=2xl]/list:last:rounded-b-2xl',\n  '3xl':\n    'group-data-[radius=3xl]/list:first:rounded-t-3xl group-data-[radius=3xl]/list:last:rounded-b-3xl',\n  full: 'group-data-[radius=full]/list:first:rounded-t-full group-data-[radius=full]/list:last:rounded-b-full',\n}\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  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `md`, today's fixed behaviour. */\n  radius?: ListRadius\n  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost` only). */\n  gap?: number\n}\n\nfunction List({\n  className,\n  variant = 'soft',\n  color = 'neutral',\n  radius = 'md',\n  gap = 0.5,\n  style,\n  ...props\n}: ListProps) {\n  // Fill/border-colour needs BOTH axes at once (e.g. \"soft, tinted with accent\"), which a\n  // single group-data selector can't express and chaining two on the same named group\n  // can't either (that generates a descendant match between two *different* ancestors,\n  // not one ancestor bearing both attributes). Resolving the pair to one value up front\n  // sidesteps it entirely — see the `data-look` selectors on ListItem below.\n  const look = color === 'accent' ? `${variant}-accent` : variant\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      data-look={look}\n      data-radius={radius}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft/solid = separate rows → stack with a small gap (the gap IS the divider).\n        // ghost shares that same gap for spacing but no fill/border (see ListItem's\n        // chrome block, which has no ghost selector). surface/outline glue rows into one\n        // panel with no gap at all.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        className,\n      )}\n      style={\n        {\n          '--list-gap-steps': gap,\n          // solid's fill inverts far enough that the row's own ink must invert with it\n          // (unlike soft/surface/outline's translucent tints, where the default ink\n          // stays legible regardless of colour) — matches Card's own solid recipe,\n          // where fg and fg-muted both collapse to the one contrast-guaranteed step.\n          ...(variant === 'solid' && {\n            '--list-item-fg':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-contrast)',\n            '--list-item-fg-muted':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-contrast)',\n          }),\n          ...style,\n        } as React.CSSProperties\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  // Only a ListItemLeading actually marked `interactive` (a Checkbox/Radio/Button) needs\n  // to move outside `render`'s element, and only when `render` is literally an <a>/\n  // <button> — nesting a focusable control inside another interactive element is invalid\n  // HTML and double-fires clicks. A `render` of anything else (a `<Card/>`, say) has no\n  // such conflict: it isn't natively interactive itself, so a control inside it is valid,\n  // unduplicated HTML, and hoisting would only pull the control outside whatever that\n  // element paints (its fill, border, rounded corner) for no reason. A plain icon\n  // (interactive unset) is the same story from the other side — either way, Leading stays\n  // inside the row by default, so the whole visual row remains one click/tap target.\n  const rendersAnchorOrButton =\n    React.isValidElement(render) &&\n    (render.type === 'a' || render.type === 'button')\n  const childArray = skeleton ? undefined : React.Children.toArray(children)\n  const leadingChild = childArray?.find(\n    (child): child is React.ReactElement<ListItemLeadingProps> =>\n      React.isValidElement(child) && child.type === ListItemLeading,\n  )\n  const hoistLeading =\n    rendersAnchorOrButton && Boolean(leadingChild?.props.interactive)\n  const leading = hoistLeading ? leadingChild : undefined\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] items-center gap-4 py-3 text-left no-underline',\n        hoistLeading ? 'min-w-0 flex-1 pr-4' : 'w-full rounded-[inherit] px-4',\n        // not hoisted → this row IS the whole visual item (no outer <li> chrome), so\n        // selection tint lives here, same as a row with no leading slot at all.\n        !hoistLeading && !skeleton && selected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          'disabled:pointer-events-none disabled:opacity-50',\n          hoistLeading\n            ? // the custom focus ring is drawn on the outer <li> (has-focus-visible,\n              // below) so it wraps the leading control too — but the browser's own\n              // default outline still targets whichever element actually has focus,\n              // which is this one, so it has to be suppressed here specifically.\n              'focus-visible:outline-hidden'\n            : [\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              ],\n        ],\n      ),\n      children: skeleton ? (\n        <ListItemSkeleton />\n      ) : hoistLeading ? (\n        childArray?.filter((child) => child !== leadingChild)\n      ) : (\n        children\n      ),\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={cn(\n        'relative has-focus-visible:z-10',\n        hoistLeading && [\n          'flex min-w-0 items-center gap-4 pl-4',\n          !skeleton && selected && 'bg-spark-a3',\n          interactive && [\n            // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n            // accent too, in ListItemTrailing; title + leading stay neutral). The click\n            // target itself is `row`, so focus-visible (unlike hover) has to be read off\n            // a descendant via has() — it never lands on this <li> directly.\n            'cursor-pointer',\n            'hover:bg-spark-a3 has-focus-visible:bg-spark-a3',\n            'has-focus-visible:ring-2 has-focus-visible:ring-offset-2',\n          ],\n        ],\n        // soft/solid rows sit in a gapped stack, not a glued panel, but still read as one\n        // rounded group: only the first/last row round the outer corners. surface/\n        // outline glue rows into one bordered panel instead — border SIDES are variant-\n        // only (no colour axis), so they stay on data-variant; fill and border COLOUR\n        // depend on variant *and* colour together, so those live on data-look instead\n        // (see the comment on `look` in List, above).\n        'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t 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:last:border-b',\n        'group-data-[look=soft]/list:bg-gray-a2 dark:group-data-[look=soft]/list:bg-gray-a3',\n        // arbitrary-var form, not the bg-spark-a3 utility: identical colour, but avoids a\n        // literal substring collision with the unconditional selection/hover tint below,\n        // which a couple of tests distinguish with a plain className.includes check.\n        'group-data-[look=soft-accent]/list:bg-(--spark-a3)',\n        'group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-2',\n        'group-data-[look=surface-accent]/list:border-spark-a6 group-data-[look=surface-accent]/list:bg-(--spark-surface)',\n        'group-data-[look=outline]/list:border-gray-a6',\n        'group-data-[look=outline-accent]/list:border-spark-a6',\n        'group-data-[look=solid]/list:bg-(--neutral-1)',\n        'group-data-[look=solid-accent]/list:bg-spark-9',\n        Object.values(radiusRowClasses),\n        className,\n      )}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {leading}\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\ninterface ListItemLeadingProps extends React.ComponentProps<'div'> {\n  /**\n   * Set when this slot holds a focusable control (Checkbox, Radio, Button). ListItem\n   * then hoists it outside `render`'s element — nesting a real control inside the row's\n   * own <a>/<button> is invalid HTML and double-fires clicks. Leave unset for decorative\n   * content (an icon): it stays inside the row, so the whole visual row is one\n   * click/tap target, same as a row with no leading slot at all.\n   */\n  interactive?: boolean\n}\n\nfunction ListItemLeading({\n  className,\n  interactive: _interactive,\n  ...props\n}: ListItemLeadingProps) {\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(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\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-(--list-item-fg,var(--neutral-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(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\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 {\n  ListProps,\n  ListItemProps,\n  ListItemContentProps,\n  ListItemLeadingProps,\n  ListVariant,\n  ListRadius,\n}\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 type { ContainerRadius } from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = SparkCardVariant\ntype ListRadius = ContainerRadius\n\n// Rounds only the first/last row of a run, regardless of variant — harmless on ghost\n// (nothing painted to clip). Keyed on `data-list-radius` alone: unlike fill (below),\n// rounding doesn't depend on variant/color, so no compound group-data selector is needed.\n// Named `list-radius`, not `radius`: the global Roundness knob (Theme) also writes a\n// bare `data-radius` via an unscoped `[data-radius=...]` selector in spark-default.css —\n// `none`/`full` are spelled the same in both scales, so a plain `data-radius` here would\n// collide and let List silently override the app-wide knob for its whole subtree.\nconst radiusRowClasses: Record<ListRadius, string> = {\n  none: 'group-data-[list-radius=none]/list:first:rounded-t-none group-data-[list-radius=none]/list:last:rounded-b-none',\n  sm: 'group-data-[list-radius=sm]/list:first:rounded-t-sm group-data-[list-radius=sm]/list:last:rounded-b-sm',\n  md: 'group-data-[list-radius=md]/list:first:rounded-t-md group-data-[list-radius=md]/list:last:rounded-b-md',\n  lg: 'group-data-[list-radius=lg]/list:first:rounded-t-lg group-data-[list-radius=lg]/list:last:rounded-b-lg',\n  xl: 'group-data-[list-radius=xl]/list:first:rounded-t-xl group-data-[list-radius=xl]/list:last:rounded-b-xl',\n  '2xl':\n    'group-data-[list-radius=2xl]/list:first:rounded-t-2xl group-data-[list-radius=2xl]/list:last:rounded-b-2xl',\n  '3xl':\n    'group-data-[list-radius=3xl]/list:first:rounded-t-3xl group-data-[list-radius=3xl]/list:last:rounded-b-3xl',\n  full: 'group-data-[list-radius=full]/list:first:rounded-t-full group-data-[list-radius=full]/list:last:rounded-b-full',\n}\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  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */\n  radius?: ListRadius\n  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost` only). */\n  gap?: number\n}\n\nfunction List({\n  className,\n  variant = 'soft',\n  color = 'neutral',\n  radius = 'lg',\n  gap = 0.5,\n  style,\n  ...props\n}: ListProps) {\n  // Fill/border-colour needs BOTH axes at once (e.g. \"soft, tinted with accent\"), which a\n  // single group-data selector can't express and chaining two on the same named group\n  // can't either (that generates a descendant match between two *different* ancestors,\n  // not one ancestor bearing both attributes). Resolving the pair to one value up front\n  // sidesteps it entirely — see the `data-look` selectors on ListItem below.\n  const look = color === 'accent' ? `${variant}-accent` : variant\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      data-look={look}\n      data-list-radius={radius}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft/solid = separate rows → stack with a small gap (the gap IS the divider).\n        // ghost shares that same gap for spacing but no fill/border (see ListItem's\n        // chrome block, which has no ghost selector). surface/outline glue rows into one\n        // panel with no gap at all.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        className,\n      )}\n      style={\n        {\n          '--list-gap-steps': gap,\n          // solid's fill inverts far enough that the row's own ink must invert with it\n          // (unlike soft/surface/outline's translucent tints, where the default ink\n          // stays legible regardless of colour) — matches Card's own solid recipe,\n          // where fg and fg-muted both collapse to the one contrast-guaranteed step.\n          ...(variant === 'solid' && {\n            '--list-item-fg':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-contrast)',\n            '--list-item-fg-muted':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-contrast)',\n          }),\n          ...style,\n        } as React.CSSProperties\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  // Only a ListItemLeading actually marked `interactive` (a Checkbox/Radio/Button) needs\n  // to move outside `render`'s element, and only when `render` is literally an <a>/\n  // <button> — nesting a focusable control inside another interactive element is invalid\n  // HTML and double-fires clicks. A `render` of anything else (a `<Card/>`, say) has no\n  // such conflict: it isn't natively interactive itself, so a control inside it is valid,\n  // unduplicated HTML, and hoisting would only pull the control outside whatever that\n  // element paints (its fill, border, rounded corner) for no reason. A plain icon\n  // (interactive unset) is the same story from the other side — either way, Leading stays\n  // inside the row by default, so the whole visual row remains one click/tap target.\n  const rendersAnchorOrButton =\n    React.isValidElement(render) &&\n    (render.type === 'a' || render.type === 'button')\n  const childArray = skeleton ? undefined : React.Children.toArray(children)\n  const leadingChild = childArray?.find(\n    (child): child is React.ReactElement<ListItemLeadingProps> =>\n      React.isValidElement(child) && child.type === ListItemLeading,\n  )\n  const hoistLeading =\n    rendersAnchorOrButton && Boolean(leadingChild?.props.interactive)\n  const leading = hoistLeading ? leadingChild : undefined\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] items-center gap-4 py-3 text-left no-underline',\n        hoistLeading ? 'min-w-0 flex-1 pr-4' : 'w-full rounded-[inherit] px-4',\n        // not hoisted → this row IS the whole visual item (no outer <li> chrome), so\n        // selection tint lives here, same as a row with no leading slot at all.\n        !hoistLeading && !skeleton && selected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          'disabled:pointer-events-none disabled:opacity-50',\n          hoistLeading\n            ? // the custom focus ring is drawn on the outer <li> (has-focus-visible,\n              // below) so it wraps the leading control too — but the browser's own\n              // default outline still targets whichever element actually has focus,\n              // which is this one, so it has to be suppressed here specifically.\n              'focus-visible:outline-hidden'\n            : [\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              ],\n        ],\n      ),\n      children: skeleton ? (\n        <ListItemSkeleton />\n      ) : hoistLeading ? (\n        childArray?.filter((child) => child !== leadingChild)\n      ) : (\n        children\n      ),\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={cn(\n        'relative has-focus-visible:z-10',\n        hoistLeading && [\n          'flex min-w-0 items-center gap-4 pl-4',\n          !skeleton && selected && 'bg-spark-a3',\n          interactive && [\n            // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n            // accent too, in ListItemTrailing; title + leading stay neutral). The click\n            // target itself is `row`, so focus-visible (unlike hover) has to be read off\n            // a descendant via has() — it never lands on this <li> directly.\n            'cursor-pointer',\n            'hover:bg-spark-a3 has-focus-visible:bg-spark-a3',\n            'has-focus-visible:ring-2 has-focus-visible:ring-offset-2',\n          ],\n        ],\n        // soft/solid rows sit in a gapped stack, not a glued panel, but still read as one\n        // rounded group: only the first/last row round the outer corners. surface/\n        // outline glue rows into one bordered panel instead — border SIDES are variant-\n        // only (no colour axis), so they stay on data-variant; fill and border COLOUR\n        // depend on variant *and* colour together, so those live on data-look instead\n        // (see the comment on `look` in List, above).\n        'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t 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:last:border-b',\n        'group-data-[look=soft]/list:bg-gray-a2 dark:group-data-[look=soft]/list:bg-gray-a3',\n        // arbitrary-var form, not the bg-spark-a3 utility: identical colour, but avoids a\n        // literal substring collision with the unconditional selection/hover tint below,\n        // which a couple of tests distinguish with a plain className.includes check.\n        'group-data-[look=soft-accent]/list:bg-(--spark-a3)',\n        'group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-2',\n        'group-data-[look=surface-accent]/list:border-spark-a6 group-data-[look=surface-accent]/list:bg-(--spark-surface)',\n        'group-data-[look=outline]/list:border-gray-a6',\n        'group-data-[look=outline-accent]/list:border-spark-a6',\n        'group-data-[look=solid]/list:bg-(--neutral-1)',\n        'group-data-[look=solid-accent]/list:bg-spark-9',\n        Object.values(radiusRowClasses),\n        className,\n      )}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {leading}\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\ninterface ListItemLeadingProps extends React.ComponentProps<'div'> {\n  /**\n   * Set when this slot holds a focusable control (Checkbox, Radio, Button). ListItem\n   * then hoists it outside `render`'s element — nesting a real control inside the row's\n   * own <a>/<button> is invalid HTML and double-fires clicks. Leave unset for decorative\n   * content (an icon): it stays inside the row, so the whole visual row is one\n   * click/tap target, same as a row with no leading slot at all.\n   */\n  interactive?: boolean\n}\n\nfunction ListItemLeading({\n  className,\n  interactive: _interactive,\n  ...props\n}: ListItemLeadingProps) {\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(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\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-(--list-item-fg,var(--neutral-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(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\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 {\n  ListProps,\n  ListItemProps,\n  ListItemContentProps,\n  ListItemLeadingProps,\n  ListVariant,\n  ListRadius,\n}\n"],"mappings":"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"}

package/dist/components/marker.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "default" | "separator" | "border" | null | undefined;
+  variant?: "separator" | "default" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/marker.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "default" | "separator" | "border" | null | undefined;
+  variant?: "separator" | "default" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/message-scroller.cjs

@@ -1,9 +1,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_components_button = require("./button.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_lib_message_animations = require("../lib/message-animations.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/message-scroller.js

@@ -1,8 +1,8 @@
 "use client";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
 import { Button } from "./button.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { MESSAGE_ANIMATIONS } from "../lib/message-animations.js";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/page-header.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "styleVariant" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "styleVariant" | "color" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/page-header.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "styleVariant" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "styleVariant" | "color" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

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

@@ -1,7 +1,6 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.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");
@@ -9,6 +8,7 @@ const require_utils_chart_scale = require("../utils/chart-scale.cjs");
 const require_components_chart = require("./chart.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

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

@@ -1,13 +1,13 @@
 "use client";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import "../utils/chars.js";
 import { twoDecimalFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

package/dist/components/power-history.cjs

@@ -1,10 +1,10 @@
 "use client";
-const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_line_chart = require("./line-chart.cjs");
+const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/power-history.tsx

package/dist/components/power-history.js

@@ -1,10 +1,10 @@
 "use client";
-import { useContainerWidth } from "../hooks/use-container-width.js";
 import "../utils/chars.js";
 import { oneDecimalFormat } from "../utils/format.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
 import { LineChart } from "./line-chart.js";
+import { useContainerWidth } from "../hooks/use-container-width.js";
 import { useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/power-history.tsx

package/dist/components/power-network.cjs

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_number_flow = require("./number-flow.cjs");
 const require_components_skeleton = require("./skeleton.cjs");
@@ -363,7 +363,7 @@ function PowerSource({ id: idProp, watts, icon, variant = "neutral", className,
 			className: "mt-1 text-sm leading-none font-medium"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: setElement,
-			className: (0, cnfast.cn)("relative flex aspect-square items-center justify-center rounded-circle border p-4 shadow-sm", isColored ? variantStyles.activeClassName : "border-gray bg-gray-a3 shadow-gray-a4 saturate-0"),
+			className: (0, cnfast.cn)("relative flex aspect-square items-center justify-center rounded-full border p-4 shadow-sm", isColored ? variantStyles.activeClassName : "border-gray bg-gray-a3 shadow-gray-a4 saturate-0"),
 			children: [showRing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 				className: "pointer-events-none absolute inset-0 size-full -rotate-90",
 				viewBox: "0 0 100 100",
@@ -388,7 +388,7 @@ function SourceSkeleton({ anchorRef }) {
 		className: "flex flex-col items-center justify-center gap-1",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "h-3.5 w-10" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: anchorRef,
-			className: "flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
+			className: "flex aspect-square animate-pulse items-center justify-center rounded-full border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-7" })
 		})]
 	});
@@ -420,7 +420,7 @@ function PowerDevice({ id: idProp, watts, icon, className }) {
 		className: (0, cnfast.cn)("flex flex-col items-center justify-center gap-1", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: setElement,
-			className: "flex aspect-square items-center justify-center rounded-circle border border-gray bg-gray-a1 p-4",
+			className: "flex aspect-square items-center justify-center rounded-full border border-gray bg-gray-a1 p-4",
 			children: icon
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_number_flow, {
 			value: watts,
@@ -434,7 +434,7 @@ function DeviceSkeleton({ anchorRef }) {
 		className: "flex flex-col items-center justify-center gap-1",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: anchorRef,
-			className: "flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
+			className: "flex aspect-square animate-pulse items-center justify-center rounded-full border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-5" })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "h-3.5 w-10" })]
 	});
@@ -533,7 +533,7 @@ function HomeSection({ anchorRef, autarky, className, watts }) {
 				strokeDasharray: `${progressLength} ${circumference}`
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "absolute inset-0 flex flex-col items-center justify-center rounded-circle border border-gray-a5 shadow-sm shadow-gray-a1",
+			className: "absolute inset-0 flex flex-col items-center justify-center rounded-full border border-gray-a5 shadow-sm shadow-gray-a1",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
 				className: "text-[14px]",
 				name: "home"
@@ -548,7 +548,7 @@ function HomeSection({ anchorRef, autarky, className, watts }) {
 function HomeSkeleton({ anchorRef, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: anchorRef,
-		className: (0, cnfast.cn)("mx-auto size-[78px] animate-pulse rounded-circle border border-gray motion-reduce:animate-none", className)
+		className: (0, cnfast.cn)("mx-auto size-[78px] animate-pulse rounded-full border border-gray motion-reduce:animate-none", className)
 	});
 }
 //#endregion

package/dist/components/power-network.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"power-network.cjs","names":["useReducedMotion","SectionTitle","NumberFlow","Skeleton","MaterialSymbol"],"sources":["../../src/components/power-network.tsx"],"sourcesContent":["import {\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport NumberFlow from './number-flow'\nimport { Skeleton } from './skeleton'\nimport { SectionTitle } from './typography'\n\n// --- Variants -----------------------------------------------------------\n\nexport type PowerSourceVariant = 'grid' | 'solar' | 'battery' | 'neutral'\n\ninterface SourceVariantStyles {\n  activeClassName: string\n  flowStroke: string\n  initialDashGap: number\n}\n\nconst SOURCE_VARIANTS: Record<PowerSourceVariant, SourceVariantStyles> = {\n  grid: {\n    activeClassName: 'border-blue-a9 bg-blue-a1 shadow-blue-a4',\n    flowStroke: 'var(--blue-11)',\n    initialDashGap: 10,\n  },\n  solar: {\n    activeClassName: 'border-orange-a9 bg-orange-a1 shadow-orange-a3',\n    flowStroke: 'var(--orange-a9)',\n    initialDashGap: 5,\n  },\n  battery: {\n    activeClassName: 'border-green-a9 bg-green-a1 shadow-green-a3',\n    flowStroke: 'var(--green-a9)',\n    initialDashGap: 7,\n  },\n  neutral: {\n    activeClassName: 'border-gray-a9 bg-gray-a1 shadow-gray-a3',\n    flowStroke: 'var(--neutral-a9)',\n    initialDashGap: 9,\n  },\n}\n\nconst DEVICE_FLOW_STROKE = 'var(--neutral-a9)'\nconst DEVICE_INITIAL_DASH_GAP = 9\n\n// Drawn under every connector and revealed when nothing flows, so a 0 W node\n// still reads as wired up and online rather than disconnected.\nconst IDLE_STROKE = 'var(--neutral-a6)'\nconst SKELETON_STROKE = 'var(--neutral-a6)'\nconst STROKE_WIDTH = 2\nconst STRAIGHT_TOLERANCE_PX = 3\nconst SOURCE_HOME_OFFSET_STEP_PX = 10\nconst DEVICE_HOME_OFFSET_STEP_PX = 10\n\n// --- Flow animation parameters ------------------------------------------\n\nconst FLOW_DASH_SOLID = 1\nconst FLOW_GAP_MAX = 14\nconst FLOW_GAP_MIN = 5\nconst FLOW_SPEED_MIN = 10\nconst FLOW_SPEED_MAX = 56\nconst FLOW_SMOOTHING = 5.5\n\ninterface FlowVisual {\n  gap: number\n  speed: number\n  opacity: number\n}\n\ninterface FlowAnimationState extends FlowVisual {\n  offset: number\n}\n\n// --- Context ------------------------------------------------------------\n\ntype NodeKind = 'source' | 'device' | 'home'\n\ninterface RegisteredNode {\n  id: string\n  kind: NodeKind\n  variant?: PowerSourceVariant\n  watts: number\n  element: HTMLDivElement | null\n}\n\ninterface PowerNetworkContextValue {\n  loading: boolean\n  register: (node: RegisteredNode) => void\n  unregister: (id: string) => void\n  totalSourceWatts: number\n}\n\nconst PowerNetworkContext = createContext<PowerNetworkContextValue | null>(null)\n\nfunction usePowerNetwork(): PowerNetworkContextValue {\n  const ctx = useContext(PowerNetworkContext)\n  if (!ctx) {\n    throw new Error(\n      'Power network sub-components must be used inside <PowerNetworkDiagram>.',\n    )\n  }\n  return ctx\n}\n\n// --- Geometry helpers ---------------------------------------------------\n\ninterface Point {\n  x: number\n  y: number\n}\n\nfunction anchorTop(rect: DOMRect, containerRect: DOMRect): Point {\n  return {\n    x: rect.left + rect.width / 2 - containerRect.left,\n    y: rect.top - containerRect.top,\n  }\n}\n\nfunction anchorBottom(rect: DOMRect, containerRect: DOMRect): Point {\n  return {\n    x: rect.left + rect.width / 2 - containerRect.left,\n    y: rect.bottom - containerRect.top,\n  }\n}\n\nfunction buildAdaptivePath(from: Point, to: Point): string {\n  if (Math.abs(from.x - to.x) < STRAIGHT_TOLERANCE_PX) {\n    return `M ${from.x} ${from.y} L ${to.x} ${to.y}`\n  }\n  const dy = to.y - from.y\n  const c1y = from.y + dy * 0.56\n  const c2y = to.y - dy * 0.58\n  return `M ${from.x} ${from.y} C ${from.x} ${c1y} ${to.x} ${c2y} ${to.x} ${to.y}`\n}\n\n// --- PowerNetworkDiagram ------------------------------------------------\n\nexport interface PowerNetworkDiagramProps {\n  title?: string\n  loading?: boolean\n  className?: string\n  children?: ReactNode\n}\n\ninterface ConnectorPath {\n  id: string\n  d: string\n  kind: NodeKind\n  variant?: PowerSourceVariant\n  reversed: boolean\n}\n\nfunction connectorPathsEqual(a: ConnectorPath[], b: ConnectorPath[]): boolean {\n  if (a.length !== b.length) return false\n  for (let i = 0; i < a.length; i++) {\n    const ap = a[i]\n    const bp = b[i]\n    if (!ap || !bp) return false\n    if (\n      ap.id !== bp.id ||\n      ap.d !== bp.d ||\n      ap.variant !== bp.variant ||\n      ap.kind !== bp.kind ||\n      ap.reversed !== bp.reversed\n    ) {\n      return false\n    }\n  }\n  return true\n}\n\nexport function PowerNetworkDiagram({\n  title,\n  loading = false,\n  className,\n  children,\n}: PowerNetworkDiagramProps): ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const reducedMotion = useReducedMotion()\n  const [nodes, setNodes] = useState<Map<string, RegisteredNode>>(\n    () => new Map(),\n  )\n  const [connectorPaths, setConnectorPaths] = useState<ConnectorPath[]>([])\n  const connectorPathsRef = useRef<ConnectorPath[]>([])\n  const flowPathRefs = useRef<Record<string, SVGPathElement | null>>({})\n  const idlePathRefs = useRef<Record<string, SVGPathElement | null>>({})\n  const currentFlowVisualsRef = useRef<Record<string, FlowAnimationState>>({})\n  const targetFlowVisualsRef = useRef<Record<string, FlowVisual>>({})\n\n  const register = useCallback((node: RegisteredNode) => {\n    setNodes((prev) => {\n      const existing = prev.get(node.id)\n      if (\n        existing &&\n        existing.kind === node.kind &&\n        existing.variant === node.variant &&\n        existing.watts === node.watts &&\n        existing.element === node.element\n      ) {\n        return prev\n      }\n      const next = new Map(prev)\n      next.set(node.id, node)\n      return next\n    })\n  }, [])\n\n  const unregister = useCallback((id: string) => {\n    setNodes((prev) => {\n      if (!prev.has(id)) return prev\n      const next = new Map(prev)\n      next.delete(id)\n      return next\n    })\n  }, [])\n\n  const totalSourceWatts = useMemo(() => {\n    let total = 0\n    for (const node of nodes.values()) {\n      if (node.kind === 'source') total += node.watts\n    }\n    return total\n  }, [nodes])\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    let homeNode: RegisteredNode | undefined\n    const sources: RegisteredNode[] = []\n    const devices: RegisteredNode[] = []\n    for (const node of nodes.values()) {\n      if (node.kind === 'home') {\n        homeNode = node\n      } else if (node.element) {\n        if (node.kind === 'source') sources.push(node)\n        else devices.push(node)\n      }\n    }\n\n    const updatePaths = () => {\n      if (!homeNode || !homeNode.element) {\n        setConnectorPaths((prev) => (prev.length === 0 ? prev : []))\n        return\n      }\n      const containerRect = container.getBoundingClientRect()\n      const homeRect = homeNode.element.getBoundingClientRect()\n      const homeTop = anchorTop(homeRect, containerRect)\n      const homeBottom = anchorBottom(homeRect, containerRect)\n      const next: ConnectorPath[] = []\n\n      const sourceCount = sources.length\n      const deviceCount = devices.length\n\n      sources.forEach((source, index) => {\n        if (!source.element) return\n        const from = anchorBottom(\n          source.element.getBoundingClientRect(),\n          containerRect,\n        )\n        const offsetX =\n          SOURCE_HOME_OFFSET_STEP_PX * (index - (sourceCount - 1) / 2)\n        const to = { x: homeTop.x + offsetX, y: homeTop.y }\n        next.push({\n          id: source.id,\n          d: buildAdaptivePath(from, to),\n          kind: 'source',\n          variant: source.variant,\n          reversed: source.watts < 0,\n        })\n      })\n\n      devices.forEach((device, index) => {\n        if (!device.element) return\n        const to = anchorTop(\n          device.element.getBoundingClientRect(),\n          containerRect,\n        )\n        const offsetX =\n          DEVICE_HOME_OFFSET_STEP_PX * (index - (deviceCount - 1) / 2)\n        const from = { x: homeBottom.x + offsetX, y: homeBottom.y }\n        next.push({\n          id: device.id,\n          d: buildAdaptivePath(from, to),\n          kind: 'device',\n          reversed: false,\n        })\n      })\n\n      setConnectorPaths((prev) =>\n        connectorPathsEqual(prev, next) ? prev : next,\n      )\n    }\n\n    updatePaths()\n\n    const resizeObserver = new ResizeObserver(updatePaths)\n    resizeObserver.observe(container)\n    for (const node of nodes.values()) {\n      if (node.element) resizeObserver.observe(node.element)\n    }\n    window.addEventListener('resize', updatePaths)\n\n    return () => {\n      resizeObserver.disconnect()\n      window.removeEventListener('resize', updatePaths)\n    }\n  }, [nodes])\n\n  useEffect(() => {\n    connectorPathsRef.current = connectorPaths\n  }, [connectorPaths])\n\n  useEffect(() => {\n    const targets: Record<string, FlowVisual> = {}\n    const homeWatts = totalSourceWatts\n    for (const node of nodes.values()) {\n      if (node.kind === 'home') continue\n      const watts = node.watts\n      const relative =\n        homeWatts > 0\n          ? Math.max(0, Math.min(1, Math.abs(watts) / homeWatts))\n          : 0\n      targets[node.id] = {\n        gap: FLOW_GAP_MAX - (FLOW_GAP_MAX - FLOW_GAP_MIN) * relative,\n        speed: FLOW_SPEED_MIN + (FLOW_SPEED_MAX - FLOW_SPEED_MIN) * relative,\n        opacity: Math.abs(watts) > 0 ? 1 : 0,\n      }\n    }\n    targetFlowVisualsRef.current = targets\n  }, [nodes, totalSourceWatts])\n\n  useEffect(() => {\n    if (loading || reducedMotion) return\n    let frameId = 0\n    let lastFrameTime = performance.now()\n\n    const animate = (now: number) => {\n      const deltaSeconds = Math.max(0.001, (now - lastFrameTime) / 1000)\n      lastFrameTime = now\n      const smoothing = 1 - Math.exp(-FLOW_SMOOTHING * deltaSeconds)\n\n      for (const connectorPath of connectorPathsRef.current) {\n        const id = connectorPath.id\n        const target = targetFlowVisualsRef.current[id]\n        const pathElement = flowPathRefs.current[id]\n        if (!target || !pathElement) continue\n\n        const current = currentFlowVisualsRef.current[id] ?? {\n          gap: target.gap,\n          offset: 0,\n          speed: target.speed,\n          opacity: target.opacity,\n        }\n\n        current.gap += (target.gap - current.gap) * smoothing\n        current.speed += (target.speed - current.speed) * smoothing\n        current.opacity += (target.opacity - current.opacity) * smoothing\n\n        const dashCycle = FLOW_DASH_SOLID + Math.max(0.001, current.gap)\n        const direction = connectorPath.reversed ? 1 : -1\n        const nextOffset =\n          current.offset + direction * current.speed * deltaSeconds\n        const wrappedOffset = ((nextOffset % dashCycle) + dashCycle) % dashCycle\n        current.offset = wrappedOffset - dashCycle\n\n        pathElement.setAttribute(\n          'stroke-dasharray',\n          `${FLOW_DASH_SOLID} ${current.gap.toFixed(3)}`,\n        )\n        pathElement.setAttribute('stroke-dashoffset', current.offset.toFixed(3))\n        pathElement.setAttribute('opacity', current.opacity.toFixed(3))\n        idlePathRefs.current[id]?.setAttribute(\n          'opacity',\n          (1 - current.opacity).toFixed(3),\n        )\n\n        currentFlowVisualsRef.current[id] = current\n      }\n\n      frameId = window.requestAnimationFrame(animate)\n    }\n\n    frameId = window.requestAnimationFrame(animate)\n    return () => window.cancelAnimationFrame(frameId)\n  }, [loading, reducedMotion])\n\n  // Reduced motion: freeze the marching dashes but keep the dash gap tracking\n  // live magnitude, and let opacity fade in/out via the CSS transition on each\n  // flow path (see the flow <path> style below).\n  useEffect(() => {\n    if (loading || !reducedMotion) return\n    for (const connectorPath of connectorPathsRef.current) {\n      const target = targetFlowVisualsRef.current[connectorPath.id]\n      const pathElement = flowPathRefs.current[connectorPath.id]\n      if (!target || !pathElement) continue\n      pathElement.setAttribute(\n        'stroke-dasharray',\n        `${FLOW_DASH_SOLID} ${target.gap.toFixed(3)}`,\n      )\n      pathElement.setAttribute('stroke-dashoffset', '0')\n      pathElement.setAttribute('opacity', target.opacity.toFixed(3))\n      idlePathRefs.current[connectorPath.id]?.setAttribute(\n        'opacity',\n        (1 - target.opacity).toFixed(3),\n      )\n    }\n  }, [loading, reducedMotion, nodes, totalSourceWatts])\n\n  const contextValue = useMemo<PowerNetworkContextValue>(\n    () => ({ loading, register, unregister, totalSourceWatts }),\n    [loading, register, unregister, totalSourceWatts],\n  )\n\n  return (\n    <PowerNetworkContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        className={cn('@container relative flex flex-col', className)}\n      >\n        {title && <SectionTitle>{title}</SectionTitle>}\n        {connectorPaths.length > 0 && (\n          <svg className=\"pointer-events-none absolute inset-0 size-full\">\n            {connectorPaths.map((path) => {\n              if (loading) {\n                return (\n                  <path\n                    key={path.id}\n                    d={path.d}\n                    fill=\"none\"\n                    stroke={SKELETON_STROKE}\n                    strokeWidth={STROKE_WIDTH}\n                    strokeLinecap=\"round\"\n                  />\n                )\n              }\n\n              const flowStroke =\n                path.kind === 'source' && path.variant\n                  ? SOURCE_VARIANTS[path.variant].flowStroke\n                  : DEVICE_FLOW_STROKE\n              const initialDashGap =\n                path.kind === 'source' && path.variant\n                  ? SOURCE_VARIANTS[path.variant].initialDashGap\n                  : DEVICE_INITIAL_DASH_GAP\n\n              return (\n                <g key={path.id}>\n                  <path\n                    d={path.d}\n                    fill=\"none\"\n                    stroke={IDLE_STROKE}\n                    strokeWidth={STROKE_WIDTH}\n                    strokeLinecap=\"round\"\n                    ref={(el) => {\n                      idlePathRefs.current[path.id] = el\n                    }}\n                    opacity={1}\n                    style={\n                      reducedMotion\n                        ? { transition: 'opacity 300ms ease' }\n                        : undefined\n                    }\n                  />\n                  <path\n                    d={path.d}\n                    fill=\"none\"\n                    stroke={flowStroke}\n                    strokeWidth={STROKE_WIDTH}\n                    strokeLinecap=\"round\"\n                    ref={(el) => {\n                      flowPathRefs.current[path.id] = el\n                    }}\n                    strokeDasharray={`${FLOW_DASH_SOLID} ${initialDashGap}`}\n                    strokeDashoffset={0}\n                    opacity={0}\n                    style={\n                      reducedMotion\n                        ? { transition: 'opacity 300ms ease' }\n                        : undefined\n                    }\n                  />\n                </g>\n              )\n            })}\n          </svg>\n        )}\n        <div className=\"flex flex-col gap-y-14\">{children}</div>\n      </div>\n    </PowerNetworkContext.Provider>\n  )\n}\n\n// --- Row containers -----------------------------------------------------\n\nexport interface PowerNetworkRowProps {\n  className?: string\n  children?: ReactNode\n}\n\nexport function PowerNetworkSources({\n  className,\n  children,\n}: PowerNetworkRowProps): ReactElement {\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function PowerNetworkDevices({\n  className,\n  children,\n}: PowerNetworkRowProps): ReactElement {\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\n// --- PowerSource --------------------------------------------------------\n\nexport interface PowerSourceProps {\n  id?: string\n  watts: number\n  icon: ReactNode\n  variant?: PowerSourceVariant\n  className?: string\n  /**\n   * Optional 0–100 progress (e.g. battery SoC). When set, a thin colored arc\n   * is drawn around the icon circle as a non-intrusive indicator.\n   */\n  progress?: number\n  /** Keeps the variant colors at 0 W, for a source that is online but idle. */\n  standby?: boolean\n}\n\nexport function PowerSource({\n  id: idProp,\n  watts,\n  icon,\n  variant = 'neutral',\n  className,\n  progress,\n  standby = false,\n}: PowerSourceProps): ReactElement {\n  const autoId = useId()\n  const id = idProp ?? autoId\n  const { register, unregister, loading } = usePowerNetwork()\n  const [element, setElement] = useState<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    if (!element) return\n    register({ id, kind: 'source', variant, watts, element })\n  }, [element, register, id, variant, watts])\n\n  useEffect(() => {\n    return () => unregister(id)\n  }, [unregister, id])\n\n  if (loading) {\n    return <SourceSkeleton anchorRef={setElement} />\n  }\n\n  const isActive = watts !== 0\n  const isColored = isActive || standby\n  const variantStyles = SOURCE_VARIANTS[variant]\n  const clampedProgress =\n    progress == null ? null : Math.max(0, Math.min(100, progress))\n  const showRing = clampedProgress != null\n  const RING_RADIUS = 48\n  const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS\n  const ringDash =\n    clampedProgress != null ? (clampedProgress / 100) * RING_CIRCUMFERENCE : 0\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center gap-1 transition-opacity duration-500',\n        !isColored && 'opacity-45',\n        className,\n      )}\n    >\n      <NumberFlow\n        value={Math.abs(watts)}\n        suffix=\"W\"\n        className=\"mt-1 text-sm leading-none font-medium\"\n      />\n      <div\n        ref={setElement}\n        className={cn(\n          'relative flex aspect-square items-center justify-center rounded-circle border p-4 shadow-sm',\n          isColored\n            ? variantStyles.activeClassName\n            : 'border-gray bg-gray-a3 shadow-gray-a4 saturate-0',\n        )}\n      >\n        {showRing && (\n          <svg\n            className=\"pointer-events-none absolute inset-0 size-full -rotate-90\"\n            viewBox=\"0 0 100 100\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"50\"\n              cy=\"50\"\n              r={RING_RADIUS}\n              fill=\"none\"\n              stroke={variantStyles.flowStroke}\n              strokeWidth=\"4\"\n              strokeLinecap=\"round\"\n              strokeDasharray={`${ringDash} ${RING_CIRCUMFERENCE}`}\n              opacity={isColored ? 1 : 0.5}\n            />\n          </svg>\n        )}\n        {icon}\n      </div>\n    </div>\n  )\n}\n\nfunction SourceSkeleton({\n  anchorRef,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n}): ReactElement {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-1\">\n      <Skeleton className=\"h-3.5 w-10\" />\n      <div\n        ref={anchorRef}\n        className=\"flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none\"\n      >\n        <div className=\"size-7\" />\n      </div>\n    </div>\n  )\n}\n\n// --- PowerDevice --------------------------------------------------------\n\nexport interface PowerDeviceProps {\n  id?: string\n  watts: number\n  icon: ReactNode\n  className?: string\n}\n\nexport function PowerDevice({\n  id: idProp,\n  watts,\n  icon,\n  className,\n}: PowerDeviceProps): ReactElement {\n  const autoId = useId()\n  const id = idProp ?? autoId\n  const { register, unregister, loading } = usePowerNetwork()\n  const [element, setElement] = useState<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    if (!element) return\n    register({ id, kind: 'device', watts, element })\n  }, [element, register, id, watts])\n\n  useEffect(() => {\n    return () => unregister(id)\n  }, [unregister, id])\n\n  if (loading) {\n    return <DeviceSkeleton anchorRef={setElement} />\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center gap-1',\n        className,\n      )}\n    >\n      <div\n        ref={setElement}\n        className=\"flex aspect-square items-center justify-center rounded-circle border border-gray bg-gray-a1 p-4\"\n      >\n        {icon}\n      </div>\n      <NumberFlow\n        value={watts}\n        suffix=\"W\"\n        className=\"text-sm font-medium tabular-nums\"\n      />\n    </div>\n  )\n}\n\nfunction DeviceSkeleton({\n  anchorRef,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n}): ReactElement {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-1\">\n      <div\n        ref={anchorRef}\n        className=\"flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none\"\n      >\n        <div className=\"size-5\" />\n      </div>\n      <Skeleton className=\"h-3.5 w-10\" />\n    </div>\n  )\n}\n\n// --- PowerNetworkHome ---------------------------------------------------\n\nexport interface PowerNetworkHomeProps {\n  /** Override total power. Defaults to the sum of registered source watts. */\n  watts?: number\n  /** Self-sufficiency ratio in 0..1. Renders a green ring when provided. */\n  autarky?: number\n  className?: string\n}\n\nexport function PowerNetworkHome({\n  watts,\n  autarky,\n  className,\n}: PowerNetworkHomeProps): ReactElement {\n  const autoId = useId()\n  const { register, unregister, loading, totalSourceWatts } = usePowerNetwork()\n  const [element, setElement] = useState<HTMLDivElement | null>(null)\n  const effectiveWatts = watts ?? totalSourceWatts\n\n  useEffect(() => {\n    if (!element) return\n    register({ id: autoId, kind: 'home', watts: effectiveWatts, element })\n  }, [element, register, autoId, effectiveWatts])\n\n  useEffect(() => {\n    return () => unregister(autoId)\n  }, [unregister, autoId])\n\n  if (loading) {\n    return <HomeSkeleton anchorRef={setElement} className={className} />\n  }\n\n  return (\n    <HomeSection\n      anchorRef={setElement}\n      autarky={autarky ?? null}\n      watts={effectiveWatts}\n      className={className}\n    />\n  )\n}\n\nfunction HomeSection({\n  anchorRef,\n  autarky,\n  className,\n  watts,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n  autarky: number | null\n  className?: string\n  watts: number\n}): ReactElement {\n  const reducedMotion = useReducedMotion()\n  const targetAutarky =\n    autarky == null ? 0 : Math.max(0, Math.min(100, autarky * 100))\n  const [animatedAutarky, setAnimatedAutarky] = useState(targetAutarky)\n  const animatedAutarkyRef = useRef(animatedAutarky)\n  const nodeSize = 78\n  const ringStrokeWidth = 2\n  const radius = (nodeSize - ringStrokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const progressLength = (animatedAutarky / 100) * circumference\n\n  useEffect(() => {\n    animatedAutarkyRef.current = animatedAutarky\n  }, [animatedAutarky])\n\n  useEffect(() => {\n    if (reducedMotion) {\n      animatedAutarkyRef.current = targetAutarky\n      setAnimatedAutarky(targetAutarky)\n      return\n    }\n\n    let frameId = 0\n    let lastTime = performance.now()\n\n    const animate = (now: number) => {\n      const deltaSeconds = Math.max(0.001, (now - lastTime) / 1000)\n      lastTime = now\n      const smoothing = 1 - Math.exp(-7 * deltaSeconds)\n      const next =\n        animatedAutarkyRef.current +\n        (targetAutarky - animatedAutarkyRef.current) * smoothing\n\n      animatedAutarkyRef.current = next\n      setAnimatedAutarky(next)\n\n      if (Math.abs(targetAutarky - next) > 0.05) {\n        frameId = window.requestAnimationFrame(animate)\n      } else {\n        animatedAutarkyRef.current = targetAutarky\n        setAnimatedAutarky(targetAutarky)\n      }\n    }\n\n    frameId = window.requestAnimationFrame(animate)\n    return () => window.cancelAnimationFrame(frameId)\n  }, [targetAutarky, reducedMotion])\n\n  return (\n    <div\n      ref={anchorRef}\n      className={cn('relative mx-auto size-[78px]', className)}\n    >\n      {autarky != null && (\n        <svg\n          className=\"absolute inset-0 size-full -rotate-90\"\n          viewBox={`0 0 ${nodeSize} ${nodeSize}`}\n        >\n          <circle\n            cx={nodeSize / 2}\n            cy={nodeSize / 2}\n            r={radius}\n            fill=\"none\"\n            stroke=\"var(--neutral-a5)\"\n            strokeWidth={ringStrokeWidth}\n          />\n          {progressLength > 0 && (\n            <circle\n              cx={nodeSize / 2}\n              cy={nodeSize / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"var(--green-a9)\"\n              strokeLinecap=\"round\"\n              strokeWidth={ringStrokeWidth}\n              strokeDasharray={`${progressLength} ${circumference}`}\n            />\n          )}\n        </svg>\n      )}\n      <div className=\"absolute inset-0 flex flex-col items-center justify-center rounded-circle border border-gray-a5 shadow-sm shadow-gray-a1\">\n        <MaterialSymbol className=\"text-[14px]\" name=\"home\" />\n        <NumberFlow\n          value={watts}\n          suffix=\"W\"\n          className=\"mt-1 text-sm leading-none font-medium\"\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction HomeSkeleton({\n  anchorRef,\n  className,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n  className?: string\n}): ReactElement {\n  return (\n    <div\n      ref={anchorRef}\n      className={cn(\n        'mx-auto size-[78px] animate-pulse rounded-circle border border-gray motion-reduce:animate-none',\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"power-network.cjs","names":["useReducedMotion","SectionTitle","NumberFlow","Skeleton","MaterialSymbol"],"sources":["../../src/components/power-network.tsx"],"sourcesContent":["import {\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport NumberFlow from './number-flow'\nimport { Skeleton } from './skeleton'\nimport { SectionTitle } from './typography'\n\n// --- Variants -----------------------------------------------------------\n\nexport type PowerSourceVariant = 'grid' | 'solar' | 'battery' | 'neutral'\n\ninterface SourceVariantStyles {\n  activeClassName: string\n  flowStroke: string\n  initialDashGap: number\n}\n\nconst SOURCE_VARIANTS: Record<PowerSourceVariant, SourceVariantStyles> = {\n  grid: {\n    activeClassName: 'border-blue-a9 bg-blue-a1 shadow-blue-a4',\n    flowStroke: 'var(--blue-11)',\n    initialDashGap: 10,\n  },\n  solar: {\n    activeClassName: 'border-orange-a9 bg-orange-a1 shadow-orange-a3',\n    flowStroke: 'var(--orange-a9)',\n    initialDashGap: 5,\n  },\n  battery: {\n    activeClassName: 'border-green-a9 bg-green-a1 shadow-green-a3',\n    flowStroke: 'var(--green-a9)',\n    initialDashGap: 7,\n  },\n  neutral: {\n    activeClassName: 'border-gray-a9 bg-gray-a1 shadow-gray-a3',\n    flowStroke: 'var(--neutral-a9)',\n    initialDashGap: 9,\n  },\n}\n\nconst DEVICE_FLOW_STROKE = 'var(--neutral-a9)'\nconst DEVICE_INITIAL_DASH_GAP = 9\n\n// Drawn under every connector and revealed when nothing flows, so a 0 W node\n// still reads as wired up and online rather than disconnected.\nconst IDLE_STROKE = 'var(--neutral-a6)'\nconst SKELETON_STROKE = 'var(--neutral-a6)'\nconst STROKE_WIDTH = 2\nconst STRAIGHT_TOLERANCE_PX = 3\nconst SOURCE_HOME_OFFSET_STEP_PX = 10\nconst DEVICE_HOME_OFFSET_STEP_PX = 10\n\n// --- Flow animation parameters ------------------------------------------\n\nconst FLOW_DASH_SOLID = 1\nconst FLOW_GAP_MAX = 14\nconst FLOW_GAP_MIN = 5\nconst FLOW_SPEED_MIN = 10\nconst FLOW_SPEED_MAX = 56\nconst FLOW_SMOOTHING = 5.5\n\ninterface FlowVisual {\n  gap: number\n  speed: number\n  opacity: number\n}\n\ninterface FlowAnimationState extends FlowVisual {\n  offset: number\n}\n\n// --- Context ------------------------------------------------------------\n\ntype NodeKind = 'source' | 'device' | 'home'\n\ninterface RegisteredNode {\n  id: string\n  kind: NodeKind\n  variant?: PowerSourceVariant\n  watts: number\n  element: HTMLDivElement | null\n}\n\ninterface PowerNetworkContextValue {\n  loading: boolean\n  register: (node: RegisteredNode) => void\n  unregister: (id: string) => void\n  totalSourceWatts: number\n}\n\nconst PowerNetworkContext = createContext<PowerNetworkContextValue | null>(null)\n\nfunction usePowerNetwork(): PowerNetworkContextValue {\n  const ctx = useContext(PowerNetworkContext)\n  if (!ctx) {\n    throw new Error(\n      'Power network sub-components must be used inside <PowerNetworkDiagram>.',\n    )\n  }\n  return ctx\n}\n\n// --- Geometry helpers ---------------------------------------------------\n\ninterface Point {\n  x: number\n  y: number\n}\n\nfunction anchorTop(rect: DOMRect, containerRect: DOMRect): Point {\n  return {\n    x: rect.left + rect.width / 2 - containerRect.left,\n    y: rect.top - containerRect.top,\n  }\n}\n\nfunction anchorBottom(rect: DOMRect, containerRect: DOMRect): Point {\n  return {\n    x: rect.left + rect.width / 2 - containerRect.left,\n    y: rect.bottom - containerRect.top,\n  }\n}\n\nfunction buildAdaptivePath(from: Point, to: Point): string {\n  if (Math.abs(from.x - to.x) < STRAIGHT_TOLERANCE_PX) {\n    return `M ${from.x} ${from.y} L ${to.x} ${to.y}`\n  }\n  const dy = to.y - from.y\n  const c1y = from.y + dy * 0.56\n  const c2y = to.y - dy * 0.58\n  return `M ${from.x} ${from.y} C ${from.x} ${c1y} ${to.x} ${c2y} ${to.x} ${to.y}`\n}\n\n// --- PowerNetworkDiagram ------------------------------------------------\n\nexport interface PowerNetworkDiagramProps {\n  title?: string\n  loading?: boolean\n  className?: string\n  children?: ReactNode\n}\n\ninterface ConnectorPath {\n  id: string\n  d: string\n  kind: NodeKind\n  variant?: PowerSourceVariant\n  reversed: boolean\n}\n\nfunction connectorPathsEqual(a: ConnectorPath[], b: ConnectorPath[]): boolean {\n  if (a.length !== b.length) return false\n  for (let i = 0; i < a.length; i++) {\n    const ap = a[i]\n    const bp = b[i]\n    if (!ap || !bp) return false\n    if (\n      ap.id !== bp.id ||\n      ap.d !== bp.d ||\n      ap.variant !== bp.variant ||\n      ap.kind !== bp.kind ||\n      ap.reversed !== bp.reversed\n    ) {\n      return false\n    }\n  }\n  return true\n}\n\nexport function PowerNetworkDiagram({\n  title,\n  loading = false,\n  className,\n  children,\n}: PowerNetworkDiagramProps): ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const reducedMotion = useReducedMotion()\n  const [nodes, setNodes] = useState<Map<string, RegisteredNode>>(\n    () => new Map(),\n  )\n  const [connectorPaths, setConnectorPaths] = useState<ConnectorPath[]>([])\n  const connectorPathsRef = useRef<ConnectorPath[]>([])\n  const flowPathRefs = useRef<Record<string, SVGPathElement | null>>({})\n  const idlePathRefs = useRef<Record<string, SVGPathElement | null>>({})\n  const currentFlowVisualsRef = useRef<Record<string, FlowAnimationState>>({})\n  const targetFlowVisualsRef = useRef<Record<string, FlowVisual>>({})\n\n  const register = useCallback((node: RegisteredNode) => {\n    setNodes((prev) => {\n      const existing = prev.get(node.id)\n      if (\n        existing &&\n        existing.kind === node.kind &&\n        existing.variant === node.variant &&\n        existing.watts === node.watts &&\n        existing.element === node.element\n      ) {\n        return prev\n      }\n      const next = new Map(prev)\n      next.set(node.id, node)\n      return next\n    })\n  }, [])\n\n  const unregister = useCallback((id: string) => {\n    setNodes((prev) => {\n      if (!prev.has(id)) return prev\n      const next = new Map(prev)\n      next.delete(id)\n      return next\n    })\n  }, [])\n\n  const totalSourceWatts = useMemo(() => {\n    let total = 0\n    for (const node of nodes.values()) {\n      if (node.kind === 'source') total += node.watts\n    }\n    return total\n  }, [nodes])\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    let homeNode: RegisteredNode | undefined\n    const sources: RegisteredNode[] = []\n    const devices: RegisteredNode[] = []\n    for (const node of nodes.values()) {\n      if (node.kind === 'home') {\n        homeNode = node\n      } else if (node.element) {\n        if (node.kind === 'source') sources.push(node)\n        else devices.push(node)\n      }\n    }\n\n    const updatePaths = () => {\n      if (!homeNode || !homeNode.element) {\n        setConnectorPaths((prev) => (prev.length === 0 ? prev : []))\n        return\n      }\n      const containerRect = container.getBoundingClientRect()\n      const homeRect = homeNode.element.getBoundingClientRect()\n      const homeTop = anchorTop(homeRect, containerRect)\n      const homeBottom = anchorBottom(homeRect, containerRect)\n      const next: ConnectorPath[] = []\n\n      const sourceCount = sources.length\n      const deviceCount = devices.length\n\n      sources.forEach((source, index) => {\n        if (!source.element) return\n        const from = anchorBottom(\n          source.element.getBoundingClientRect(),\n          containerRect,\n        )\n        const offsetX =\n          SOURCE_HOME_OFFSET_STEP_PX * (index - (sourceCount - 1) / 2)\n        const to = { x: homeTop.x + offsetX, y: homeTop.y }\n        next.push({\n          id: source.id,\n          d: buildAdaptivePath(from, to),\n          kind: 'source',\n          variant: source.variant,\n          reversed: source.watts < 0,\n        })\n      })\n\n      devices.forEach((device, index) => {\n        if (!device.element) return\n        const to = anchorTop(\n          device.element.getBoundingClientRect(),\n          containerRect,\n        )\n        const offsetX =\n          DEVICE_HOME_OFFSET_STEP_PX * (index - (deviceCount - 1) / 2)\n        const from = { x: homeBottom.x + offsetX, y: homeBottom.y }\n        next.push({\n          id: device.id,\n          d: buildAdaptivePath(from, to),\n          kind: 'device',\n          reversed: false,\n        })\n      })\n\n      setConnectorPaths((prev) =>\n        connectorPathsEqual(prev, next) ? prev : next,\n      )\n    }\n\n    updatePaths()\n\n    const resizeObserver = new ResizeObserver(updatePaths)\n    resizeObserver.observe(container)\n    for (const node of nodes.values()) {\n      if (node.element) resizeObserver.observe(node.element)\n    }\n    window.addEventListener('resize', updatePaths)\n\n    return () => {\n      resizeObserver.disconnect()\n      window.removeEventListener('resize', updatePaths)\n    }\n  }, [nodes])\n\n  useEffect(() => {\n    connectorPathsRef.current = connectorPaths\n  }, [connectorPaths])\n\n  useEffect(() => {\n    const targets: Record<string, FlowVisual> = {}\n    const homeWatts = totalSourceWatts\n    for (const node of nodes.values()) {\n      if (node.kind === 'home') continue\n      const watts = node.watts\n      const relative =\n        homeWatts > 0\n          ? Math.max(0, Math.min(1, Math.abs(watts) / homeWatts))\n          : 0\n      targets[node.id] = {\n        gap: FLOW_GAP_MAX - (FLOW_GAP_MAX - FLOW_GAP_MIN) * relative,\n        speed: FLOW_SPEED_MIN + (FLOW_SPEED_MAX - FLOW_SPEED_MIN) * relative,\n        opacity: Math.abs(watts) > 0 ? 1 : 0,\n      }\n    }\n    targetFlowVisualsRef.current = targets\n  }, [nodes, totalSourceWatts])\n\n  useEffect(() => {\n    if (loading || reducedMotion) return\n    let frameId = 0\n    let lastFrameTime = performance.now()\n\n    const animate = (now: number) => {\n      const deltaSeconds = Math.max(0.001, (now - lastFrameTime) / 1000)\n      lastFrameTime = now\n      const smoothing = 1 - Math.exp(-FLOW_SMOOTHING * deltaSeconds)\n\n      for (const connectorPath of connectorPathsRef.current) {\n        const id = connectorPath.id\n        const target = targetFlowVisualsRef.current[id]\n        const pathElement = flowPathRefs.current[id]\n        if (!target || !pathElement) continue\n\n        const current = currentFlowVisualsRef.current[id] ?? {\n          gap: target.gap,\n          offset: 0,\n          speed: target.speed,\n          opacity: target.opacity,\n        }\n\n        current.gap += (target.gap - current.gap) * smoothing\n        current.speed += (target.speed - current.speed) * smoothing\n        current.opacity += (target.opacity - current.opacity) * smoothing\n\n        const dashCycle = FLOW_DASH_SOLID + Math.max(0.001, current.gap)\n        const direction = connectorPath.reversed ? 1 : -1\n        const nextOffset =\n          current.offset + direction * current.speed * deltaSeconds\n        const wrappedOffset = ((nextOffset % dashCycle) + dashCycle) % dashCycle\n        current.offset = wrappedOffset - dashCycle\n\n        pathElement.setAttribute(\n          'stroke-dasharray',\n          `${FLOW_DASH_SOLID} ${current.gap.toFixed(3)}`,\n        )\n        pathElement.setAttribute('stroke-dashoffset', current.offset.toFixed(3))\n        pathElement.setAttribute('opacity', current.opacity.toFixed(3))\n        idlePathRefs.current[id]?.setAttribute(\n          'opacity',\n          (1 - current.opacity).toFixed(3),\n        )\n\n        currentFlowVisualsRef.current[id] = current\n      }\n\n      frameId = window.requestAnimationFrame(animate)\n    }\n\n    frameId = window.requestAnimationFrame(animate)\n    return () => window.cancelAnimationFrame(frameId)\n  }, [loading, reducedMotion])\n\n  // Reduced motion: freeze the marching dashes but keep the dash gap tracking\n  // live magnitude, and let opacity fade in/out via the CSS transition on each\n  // flow path (see the flow <path> style below).\n  useEffect(() => {\n    if (loading || !reducedMotion) return\n    for (const connectorPath of connectorPathsRef.current) {\n      const target = targetFlowVisualsRef.current[connectorPath.id]\n      const pathElement = flowPathRefs.current[connectorPath.id]\n      if (!target || !pathElement) continue\n      pathElement.setAttribute(\n        'stroke-dasharray',\n        `${FLOW_DASH_SOLID} ${target.gap.toFixed(3)}`,\n      )\n      pathElement.setAttribute('stroke-dashoffset', '0')\n      pathElement.setAttribute('opacity', target.opacity.toFixed(3))\n      idlePathRefs.current[connectorPath.id]?.setAttribute(\n        'opacity',\n        (1 - target.opacity).toFixed(3),\n      )\n    }\n  }, [loading, reducedMotion, nodes, totalSourceWatts])\n\n  const contextValue = useMemo<PowerNetworkContextValue>(\n    () => ({ loading, register, unregister, totalSourceWatts }),\n    [loading, register, unregister, totalSourceWatts],\n  )\n\n  return (\n    <PowerNetworkContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        className={cn('@container relative flex flex-col', className)}\n      >\n        {title && <SectionTitle>{title}</SectionTitle>}\n        {connectorPaths.length > 0 && (\n          <svg className=\"pointer-events-none absolute inset-0 size-full\">\n            {connectorPaths.map((path) => {\n              if (loading) {\n                return (\n                  <path\n                    key={path.id}\n                    d={path.d}\n                    fill=\"none\"\n                    stroke={SKELETON_STROKE}\n                    strokeWidth={STROKE_WIDTH}\n                    strokeLinecap=\"round\"\n                  />\n                )\n              }\n\n              const flowStroke =\n                path.kind === 'source' && path.variant\n                  ? SOURCE_VARIANTS[path.variant].flowStroke\n                  : DEVICE_FLOW_STROKE\n              const initialDashGap =\n                path.kind === 'source' && path.variant\n                  ? SOURCE_VARIANTS[path.variant].initialDashGap\n                  : DEVICE_INITIAL_DASH_GAP\n\n              return (\n                <g key={path.id}>\n                  <path\n                    d={path.d}\n                    fill=\"none\"\n                    stroke={IDLE_STROKE}\n                    strokeWidth={STROKE_WIDTH}\n                    strokeLinecap=\"round\"\n                    ref={(el) => {\n                      idlePathRefs.current[path.id] = el\n                    }}\n                    opacity={1}\n                    style={\n                      reducedMotion\n                        ? { transition: 'opacity 300ms ease' }\n                        : undefined\n                    }\n                  />\n                  <path\n                    d={path.d}\n                    fill=\"none\"\n                    stroke={flowStroke}\n                    strokeWidth={STROKE_WIDTH}\n                    strokeLinecap=\"round\"\n                    ref={(el) => {\n                      flowPathRefs.current[path.id] = el\n                    }}\n                    strokeDasharray={`${FLOW_DASH_SOLID} ${initialDashGap}`}\n                    strokeDashoffset={0}\n                    opacity={0}\n                    style={\n                      reducedMotion\n                        ? { transition: 'opacity 300ms ease' }\n                        : undefined\n                    }\n                  />\n                </g>\n              )\n            })}\n          </svg>\n        )}\n        <div className=\"flex flex-col gap-y-14\">{children}</div>\n      </div>\n    </PowerNetworkContext.Provider>\n  )\n}\n\n// --- Row containers -----------------------------------------------------\n\nexport interface PowerNetworkRowProps {\n  className?: string\n  children?: ReactNode\n}\n\nexport function PowerNetworkSources({\n  className,\n  children,\n}: PowerNetworkRowProps): ReactElement {\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function PowerNetworkDevices({\n  className,\n  children,\n}: PowerNetworkRowProps): ReactElement {\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\n// --- PowerSource --------------------------------------------------------\n\nexport interface PowerSourceProps {\n  id?: string\n  watts: number\n  icon: ReactNode\n  variant?: PowerSourceVariant\n  className?: string\n  /**\n   * Optional 0–100 progress (e.g. battery SoC). When set, a thin colored arc\n   * is drawn around the icon circle as a non-intrusive indicator.\n   */\n  progress?: number\n  /** Keeps the variant colors at 0 W, for a source that is online but idle. */\n  standby?: boolean\n}\n\nexport function PowerSource({\n  id: idProp,\n  watts,\n  icon,\n  variant = 'neutral',\n  className,\n  progress,\n  standby = false,\n}: PowerSourceProps): ReactElement {\n  const autoId = useId()\n  const id = idProp ?? autoId\n  const { register, unregister, loading } = usePowerNetwork()\n  const [element, setElement] = useState<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    if (!element) return\n    register({ id, kind: 'source', variant, watts, element })\n  }, [element, register, id, variant, watts])\n\n  useEffect(() => {\n    return () => unregister(id)\n  }, [unregister, id])\n\n  if (loading) {\n    return <SourceSkeleton anchorRef={setElement} />\n  }\n\n  const isActive = watts !== 0\n  const isColored = isActive || standby\n  const variantStyles = SOURCE_VARIANTS[variant]\n  const clampedProgress =\n    progress == null ? null : Math.max(0, Math.min(100, progress))\n  const showRing = clampedProgress != null\n  const RING_RADIUS = 48\n  const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS\n  const ringDash =\n    clampedProgress != null ? (clampedProgress / 100) * RING_CIRCUMFERENCE : 0\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center gap-1 transition-opacity duration-500',\n        !isColored && 'opacity-45',\n        className,\n      )}\n    >\n      <NumberFlow\n        value={Math.abs(watts)}\n        suffix=\"W\"\n        className=\"mt-1 text-sm leading-none font-medium\"\n      />\n      <div\n        ref={setElement}\n        className={cn(\n          'relative flex aspect-square items-center justify-center rounded-full border p-4 shadow-sm',\n          isColored\n            ? variantStyles.activeClassName\n            : 'border-gray bg-gray-a3 shadow-gray-a4 saturate-0',\n        )}\n      >\n        {showRing && (\n          <svg\n            className=\"pointer-events-none absolute inset-0 size-full -rotate-90\"\n            viewBox=\"0 0 100 100\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"50\"\n              cy=\"50\"\n              r={RING_RADIUS}\n              fill=\"none\"\n              stroke={variantStyles.flowStroke}\n              strokeWidth=\"4\"\n              strokeLinecap=\"round\"\n              strokeDasharray={`${ringDash} ${RING_CIRCUMFERENCE}`}\n              opacity={isColored ? 1 : 0.5}\n            />\n          </svg>\n        )}\n        {icon}\n      </div>\n    </div>\n  )\n}\n\nfunction SourceSkeleton({\n  anchorRef,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n}): ReactElement {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-1\">\n      <Skeleton className=\"h-3.5 w-10\" />\n      <div\n        ref={anchorRef}\n        className=\"flex aspect-square animate-pulse items-center justify-center rounded-full border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none\"\n      >\n        <div className=\"size-7\" />\n      </div>\n    </div>\n  )\n}\n\n// --- PowerDevice --------------------------------------------------------\n\nexport interface PowerDeviceProps {\n  id?: string\n  watts: number\n  icon: ReactNode\n  className?: string\n}\n\nexport function PowerDevice({\n  id: idProp,\n  watts,\n  icon,\n  className,\n}: PowerDeviceProps): ReactElement {\n  const autoId = useId()\n  const id = idProp ?? autoId\n  const { register, unregister, loading } = usePowerNetwork()\n  const [element, setElement] = useState<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    if (!element) return\n    register({ id, kind: 'device', watts, element })\n  }, [element, register, id, watts])\n\n  useEffect(() => {\n    return () => unregister(id)\n  }, [unregister, id])\n\n  if (loading) {\n    return <DeviceSkeleton anchorRef={setElement} />\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center gap-1',\n        className,\n      )}\n    >\n      <div\n        ref={setElement}\n        className=\"flex aspect-square items-center justify-center rounded-full border border-gray bg-gray-a1 p-4\"\n      >\n        {icon}\n      </div>\n      <NumberFlow\n        value={watts}\n        suffix=\"W\"\n        className=\"text-sm font-medium tabular-nums\"\n      />\n    </div>\n  )\n}\n\nfunction DeviceSkeleton({\n  anchorRef,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n}): ReactElement {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-1\">\n      <div\n        ref={anchorRef}\n        className=\"flex aspect-square animate-pulse items-center justify-center rounded-full border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none\"\n      >\n        <div className=\"size-5\" />\n      </div>\n      <Skeleton className=\"h-3.5 w-10\" />\n    </div>\n  )\n}\n\n// --- PowerNetworkHome ---------------------------------------------------\n\nexport interface PowerNetworkHomeProps {\n  /** Override total power. Defaults to the sum of registered source watts. */\n  watts?: number\n  /** Self-sufficiency ratio in 0..1. Renders a green ring when provided. */\n  autarky?: number\n  className?: string\n}\n\nexport function PowerNetworkHome({\n  watts,\n  autarky,\n  className,\n}: PowerNetworkHomeProps): ReactElement {\n  const autoId = useId()\n  const { register, unregister, loading, totalSourceWatts } = usePowerNetwork()\n  const [element, setElement] = useState<HTMLDivElement | null>(null)\n  const effectiveWatts = watts ?? totalSourceWatts\n\n  useEffect(() => {\n    if (!element) return\n    register({ id: autoId, kind: 'home', watts: effectiveWatts, element })\n  }, [element, register, autoId, effectiveWatts])\n\n  useEffect(() => {\n    return () => unregister(autoId)\n  }, [unregister, autoId])\n\n  if (loading) {\n    return <HomeSkeleton anchorRef={setElement} className={className} />\n  }\n\n  return (\n    <HomeSection\n      anchorRef={setElement}\n      autarky={autarky ?? null}\n      watts={effectiveWatts}\n      className={className}\n    />\n  )\n}\n\nfunction HomeSection({\n  anchorRef,\n  autarky,\n  className,\n  watts,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n  autarky: number | null\n  className?: string\n  watts: number\n}): ReactElement {\n  const reducedMotion = useReducedMotion()\n  const targetAutarky =\n    autarky == null ? 0 : Math.max(0, Math.min(100, autarky * 100))\n  const [animatedAutarky, setAnimatedAutarky] = useState(targetAutarky)\n  const animatedAutarkyRef = useRef(animatedAutarky)\n  const nodeSize = 78\n  const ringStrokeWidth = 2\n  const radius = (nodeSize - ringStrokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const progressLength = (animatedAutarky / 100) * circumference\n\n  useEffect(() => {\n    animatedAutarkyRef.current = animatedAutarky\n  }, [animatedAutarky])\n\n  useEffect(() => {\n    if (reducedMotion) {\n      animatedAutarkyRef.current = targetAutarky\n      setAnimatedAutarky(targetAutarky)\n      return\n    }\n\n    let frameId = 0\n    let lastTime = performance.now()\n\n    const animate = (now: number) => {\n      const deltaSeconds = Math.max(0.001, (now - lastTime) / 1000)\n      lastTime = now\n      const smoothing = 1 - Math.exp(-7 * deltaSeconds)\n      const next =\n        animatedAutarkyRef.current +\n        (targetAutarky - animatedAutarkyRef.current) * smoothing\n\n      animatedAutarkyRef.current = next\n      setAnimatedAutarky(next)\n\n      if (Math.abs(targetAutarky - next) > 0.05) {\n        frameId = window.requestAnimationFrame(animate)\n      } else {\n        animatedAutarkyRef.current = targetAutarky\n        setAnimatedAutarky(targetAutarky)\n      }\n    }\n\n    frameId = window.requestAnimationFrame(animate)\n    return () => window.cancelAnimationFrame(frameId)\n  }, [targetAutarky, reducedMotion])\n\n  return (\n    <div\n      ref={anchorRef}\n      className={cn('relative mx-auto size-[78px]', className)}\n    >\n      {autarky != null && (\n        <svg\n          className=\"absolute inset-0 size-full -rotate-90\"\n          viewBox={`0 0 ${nodeSize} ${nodeSize}`}\n        >\n          <circle\n            cx={nodeSize / 2}\n            cy={nodeSize / 2}\n            r={radius}\n            fill=\"none\"\n            stroke=\"var(--neutral-a5)\"\n            strokeWidth={ringStrokeWidth}\n          />\n          {progressLength > 0 && (\n            <circle\n              cx={nodeSize / 2}\n              cy={nodeSize / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"var(--green-a9)\"\n              strokeLinecap=\"round\"\n              strokeWidth={ringStrokeWidth}\n              strokeDasharray={`${progressLength} ${circumference}`}\n            />\n          )}\n        </svg>\n      )}\n      <div className=\"absolute inset-0 flex flex-col items-center justify-center rounded-full border border-gray-a5 shadow-sm shadow-gray-a1\">\n        <MaterialSymbol className=\"text-[14px]\" name=\"home\" />\n        <NumberFlow\n          value={watts}\n          suffix=\"W\"\n          className=\"mt-1 text-sm leading-none font-medium\"\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction HomeSkeleton({\n  anchorRef,\n  className,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n  className?: string\n}): ReactElement {\n  return (\n    <div\n      ref={anchorRef}\n      className={cn(\n        'mx-auto size-[78px] animate-pulse rounded-full border border-gray motion-reduce:animate-none',\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;AA6BA,MAAM,kBAAmE;CACvE,MAAM;EACJ,iBAAiB;EACjB,YAAY;EACZ,gBAAgB;CAClB;CACA,OAAO;EACL,iBAAiB;EACjB,YAAY;EACZ,gBAAgB;CAClB;CACA,SAAS;EACP,iBAAiB;EACjB,YAAY;EACZ,gBAAgB;CAClB;CACA,SAAS;EACP,iBAAiB;EACjB,YAAY;EACZ,gBAAgB;CAClB;AACF;AAEA,MAAM,qBAAqB;AAC3B,MAAM,0BAA0B;AAIhC,MAAM,cAAc;AACpB,MAAM,kBAAkB;AACxB,MAAM,eAAe;AACrB,MAAM,wBAAwB;AAC9B,MAAM,6BAA6B;AACnC,MAAM,6BAA6B;AAInC,MAAM,kBAAkB;AACxB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AAgCvB,MAAM,uBAAA,GAAA,MAAA,eAAqE,IAAI;AAE/E,SAAS,kBAA4C;CACnD,MAAM,OAAA,GAAA,MAAA,YAAiB,mBAAmB;CAC1C,IAAI,CAAC,KACH,MAAM,IAAI,MACR,yEACF;CAEF,OAAO;AACT;AASA,SAAS,UAAU,MAAe,eAA+B;CAC/D,OAAO;EACL,GAAG,KAAK,OAAO,KAAK,QAAQ,IAAI,cAAc;EAC9C,GAAG,KAAK,MAAM,cAAc;CAC9B;AACF;AAEA,SAAS,aAAa,MAAe,eAA+B;CAClE,OAAO;EACL,GAAG,KAAK,OAAO,KAAK,QAAQ,IAAI,cAAc;EAC9C,GAAG,KAAK,SAAS,cAAc;CACjC;AACF;AAEA,SAAS,kBAAkB,MAAa,IAAmB;CACzD,IAAI,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC,IAAI,uBAC5B,OAAO,KAAK,KAAK,EAAE,GAAG,KAAK,EAAE,KAAK,GAAG,EAAE,GAAG,GAAG;CAE/C,MAAM,KAAK,GAAG,IAAI,KAAK;CACvB,MAAM,MAAM,KAAK,IAAI,KAAK;CAC1B,MAAM,MAAM,GAAG,IAAI,KAAK;CACxB,OAAO,KAAK,KAAK,EAAE,GAAG,KAAK,EAAE,KAAK,KAAK,EAAE,GAAG,IAAI,GAAG,GAAG,EAAE,GAAG,IAAI,GAAG,GAAG,EAAE,GAAG,GAAG;AAC/E;AAmBA,SAAS,oBAAoB,GAAoB,GAA6B;CAC5E,IAAI,EAAE,WAAW,EAAE,QAAQ,OAAO;CAClC,KAAK,IAAI,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK;EACjC,MAAM,KAAK,EAAE;EACb,MAAM,KAAK,EAAE;EACb,IAAI,CAAC,MAAM,CAAC,IAAI,OAAO;EACvB,IACE,GAAG,OAAO,GAAG,MACb,GAAG,MAAM,GAAG,KACZ,GAAG,YAAY,GAAG,WAClB,GAAG,SAAS,GAAG,QACf,GAAG,aAAa,GAAG,UAEnB,OAAO;CAEX;CACA,OAAO;AACT;AAEA,SAAgB,oBAAoB,EAClC,OACA,UAAU,OACV,WACA,YACyC;CACzC,MAAM,gBAAA,GAAA,MAAA,QAAsC,IAAI;CAChD,MAAM,gBAAgBA,iCAAAA,iBAAiB;CACvC,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,gCACN,IAAI,IAAI,CAChB;CACA,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,UAA+C,CAAC,CAAC;CACxE,MAAM,qBAAA,GAAA,MAAA,QAA4C,CAAC,CAAC;CACpD,MAAM,gBAAA,GAAA,MAAA,QAA6D,CAAC,CAAC;CACrE,MAAM,gBAAA,GAAA,MAAA,QAA6D,CAAC,CAAC;CACrE,MAAM,yBAAA,GAAA,MAAA,QAAmE,CAAC,CAAC;CAC3E,MAAM,wBAAA,GAAA,MAAA,QAA0D,CAAC,CAAC;CAElE,MAAM,YAAA,GAAA,MAAA,cAAwB,SAAyB;EACrD,UAAU,SAAS;GACjB,MAAM,WAAW,KAAK,IAAI,KAAK,EAAE;GACjC,IACE,YACA,SAAS,SAAS,KAAK,QACvB,SAAS,YAAY,KAAK,WAC1B,SAAS,UAAU,KAAK,SACxB,SAAS,YAAY,KAAK,SAE1B,OAAO;GAET,MAAM,OAAO,IAAI,IAAI,IAAI;GACzB,KAAK,IAAI,KAAK,IAAI,IAAI;GACtB,OAAO;EACT,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,cAAA,GAAA,MAAA,cAA0B,OAAe;EAC7C,UAAU,SAAS;GACjB,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,OAAO;GAC1B,MAAM,OAAO,IAAI,IAAI,IAAI;GACzB,KAAK,OAAO,EAAE;GACd,OAAO;EACT,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAA,GAAA,MAAA,eAAiC;EACrC,IAAI,QAAQ;EACZ,KAAK,MAAM,QAAQ,MAAM,OAAO,GAC9B,IAAI,KAAK,SAAS,UAAU,SAAS,KAAK;EAE5C,OAAO;CACT,GAAG,CAAC,KAAK,CAAC;CAEV,CAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,WAAW;EAEhB,IAAI;EACJ,MAAM,UAA4B,CAAC;EACnC,MAAM,UAA4B,CAAC;EACnC,KAAK,MAAM,QAAQ,MAAM,OAAO,GAC9B,IAAI,KAAK,SAAS,QAChB,WAAW;OACN,IAAI,KAAK,SACd,IAAI,KAAK,SAAS,UAAU,QAAQ,KAAK,IAAI;OACxC,QAAQ,KAAK,IAAI;EAI1B,MAAM,oBAAoB;GACxB,IAAI,CAAC,YAAY,CAAC,SAAS,SAAS;IAClC,mBAAmB,SAAU,KAAK,WAAW,IAAI,OAAO,CAAC,CAAE;IAC3D;GACF;GACA,MAAM,gBAAgB,UAAU,sBAAsB;GACtD,MAAM,WAAW,SAAS,QAAQ,sBAAsB;GACxD,MAAM,UAAU,UAAU,UAAU,aAAa;GACjD,MAAM,aAAa,aAAa,UAAU,aAAa;GACvD,MAAM,OAAwB,CAAC;GAE/B,MAAM,cAAc,QAAQ;GAC5B,MAAM,cAAc,QAAQ;GAE5B,QAAQ,SAAS,QAAQ,UAAU;IACjC,IAAI,CAAC,OAAO,SAAS;IACrB,MAAM,OAAO,aACX,OAAO,QAAQ,sBAAsB,GACrC,aACF;IACA,MAAM,UACJ,8BAA8B,SAAS,cAAc,KAAK;IAC5D,MAAM,KAAK;KAAE,GAAG,QAAQ,IAAI;KAAS,GAAG,QAAQ;IAAE;IAClD,KAAK,KAAK;KACR,IAAI,OAAO;KACX,GAAG,kBAAkB,MAAM,EAAE;KAC7B,MAAM;KACN,SAAS,OAAO;KAChB,UAAU,OAAO,QAAQ;IAC3B,CAAC;GACH,CAAC;GAED,QAAQ,SAAS,QAAQ,UAAU;IACjC,IAAI,CAAC,OAAO,SAAS;IACrB,MAAM,KAAK,UACT,OAAO,QAAQ,sBAAsB,GACrC,aACF;IACA,MAAM,UACJ,8BAA8B,SAAS,cAAc,KAAK;IAC5D,MAAM,OAAO;KAAE,GAAG,WAAW,IAAI;KAAS,GAAG,WAAW;IAAE;IAC1D,KAAK,KAAK;KACR,IAAI,OAAO;KACX,GAAG,kBAAkB,MAAM,EAAE;KAC7B,MAAM;KACN,UAAU;IACZ,CAAC;GACH,CAAC;GAED,mBAAmB,SACjB,oBAAoB,MAAM,IAAI,IAAI,OAAO,IAC3C;EACF;EAEA,YAAY;EAEZ,MAAM,iBAAiB,IAAI,eAAe,WAAW;EACrD,eAAe,QAAQ,SAAS;EAChC,KAAK,MAAM,QAAQ,MAAM,OAAO,GAC9B,IAAI,KAAK,SAAS,eAAe,QAAQ,KAAK,OAAO;EAEvD,OAAO,iBAAiB,UAAU,WAAW;EAE7C,aAAa;GACX,eAAe,WAAW;GAC1B,OAAO,oBAAoB,UAAU,WAAW;EAClD;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,CAAA,GAAA,MAAA,iBAAgB;EACd,kBAAkB,UAAU;CAC9B,GAAG,CAAC,cAAc,CAAC;CAEnB,CAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,UAAsC,CAAC;EAC7C,MAAM,YAAY;EAClB,KAAK,MAAM,QAAQ,MAAM,OAAO,GAAG;GACjC,IAAI,KAAK,SAAS,QAAQ;GAC1B,MAAM,QAAQ,KAAK;GACnB,MAAM,WACJ,YAAY,IACR,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,IAAI,SAAS,CAAC,IACpD;GACN,QAAQ,KAAK,MAAM;IACjB,KAAK,gBAAgB,eAAe,gBAAgB;IACpD,OAAO,kBAAkB,iBAAiB,kBAAkB;IAC5D,SAAS,KAAK,IAAI,KAAK,IAAI,IAAI,IAAI;GACrC;EACF;EACA,qBAAqB,UAAU;CACjC,GAAG,CAAC,OAAO,gBAAgB,CAAC;CAE5B,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,WAAW,eAAe;EAC9B,IAAI,UAAU;EACd,IAAI,gBAAgB,YAAY,IAAI;EAEpC,MAAM,WAAW,QAAgB;GAC/B,MAAM,eAAe,KAAK,IAAI,OAAQ,MAAM,iBAAiB,GAAI;GACjE,gBAAgB;GAChB,MAAM,YAAY,IAAI,KAAK,IAAI,OAAkB,YAAY;GAE7D,KAAK,MAAM,iBAAiB,kBAAkB,SAAS;IACrD,MAAM,KAAK,cAAc;IACzB,MAAM,SAAS,qBAAqB,QAAQ;IAC5C,MAAM,cAAc,aAAa,QAAQ;IACzC,IAAI,CAAC,UAAU,CAAC,aAAa;IAE7B,MAAM,UAAU,sBAAsB,QAAQ,OAAO;KACnD,KAAK,OAAO;KACZ,QAAQ;KACR,OAAO,OAAO;KACd,SAAS,OAAO;IAClB;IAEA,QAAQ,QAAQ,OAAO,MAAM,QAAQ,OAAO;IAC5C,QAAQ,UAAU,OAAO,QAAQ,QAAQ,SAAS;IAClD,QAAQ,YAAY,OAAO,UAAU,QAAQ,WAAW;IAExD,MAAM,YAAY,kBAAkB,KAAK,IAAI,MAAO,QAAQ,GAAG;IAC/D,MAAM,YAAY,cAAc,WAAW,IAAI;IAI/C,QAAQ,WAFN,QAAQ,SAAS,YAAY,QAAQ,QAAQ,gBACV,YAAa,aAAa,YAC9B;IAEjC,YAAY,aACV,oBACA,GAAG,gBAAgB,GAAG,QAAQ,IAAI,QAAQ,CAAC,GAC7C;IACA,YAAY,aAAa,qBAAqB,QAAQ,OAAO,QAAQ,CAAC,CAAC;IACvE,YAAY,aAAa,WAAW,QAAQ,QAAQ,QAAQ,CAAC,CAAC;IAC9D,aAAa,QAAQ,KAAK,aACxB,YACC,IAAI,QAAQ,SAAS,QAAQ,CAAC,CACjC;IAEA,sBAAsB,QAAQ,MAAM;GACtC;GAEA,UAAU,OAAO,sBAAsB,OAAO;EAChD;EAEA,UAAU,OAAO,sBAAsB,OAAO;EAC9C,aAAa,OAAO,qBAAqB,OAAO;CAClD,GAAG,CAAC,SAAS,aAAa,CAAC;CAK3B,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,WAAW,CAAC,eAAe;EAC/B,KAAK,MAAM,iBAAiB,kBAAkB,SAAS;GACrD,MAAM,SAAS,qBAAqB,QAAQ,cAAc;GAC1D,MAAM,cAAc,aAAa,QAAQ,cAAc;GACvD,IAAI,CAAC,UAAU,CAAC,aAAa;GAC7B,YAAY,aACV,oBACA,GAAG,gBAAgB,GAAG,OAAO,IAAI,QAAQ,CAAC,GAC5C;GACA,YAAY,aAAa,qBAAqB,GAAG;GACjD,YAAY,aAAa,WAAW,OAAO,QAAQ,QAAQ,CAAC,CAAC;GAC7D,aAAa,QAAQ,cAAc,KAAK,aACtC,YACC,IAAI,OAAO,SAAS,QAAQ,CAAC,CAChC;EACF;CACF,GAAG;EAAC;EAAS;EAAe;EAAO;CAAgB,CAAC;CAEpD,MAAM,gBAAA,GAAA,MAAA,gBACG;EAAE;EAAS;EAAU;EAAY;CAAiB,IACzD;EAAC;EAAS;EAAU;EAAY;CAAgB,CAClD;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,oBAAoB,UAArB;EAA8B,OAAO;YACnC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,KAAK;GACL,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;aAF9D;IAIG,SAAS,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,cAAD,EAAA,UAAe,MAAoB,CAAA;IAC5C,eAAe,SAAS,KACvB,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAU;eACZ,eAAe,KAAK,SAAS;MAC5B,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;OAEE,GAAG,KAAK;OACR,MAAK;OACL,QAAQ;OACR,aAAa;OACb,eAAc;MACf,GANM,KAAK,EAMX;MAIL,MAAM,aACJ,KAAK,SAAS,YAAY,KAAK,UAC3B,gBAAgB,KAAK,SAAS,aAC9B;MACN,MAAM,iBACJ,KAAK,SAAS,YAAY,KAAK,UAC3B,gBAAgB,KAAK,SAAS,iBAC9B;MAEN,OACE,iBAAA,GAAA,kBAAA,MAAC,KAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,GAAG,KAAK;OACR,MAAK;OACL,QAAQ;OACR,aAAa;OACb,eAAc;OACd,MAAM,OAAO;QACX,aAAa,QAAQ,KAAK,MAAM;OAClC;OACA,SAAS;OACT,OACE,gBACI,EAAE,YAAY,qBAAqB,IACnC,KAAA;MAEP,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,GAAG,KAAK;OACR,MAAK;OACL,QAAQ;OACR,aAAa;OACb,eAAc;OACd,MAAM,OAAO;QACX,aAAa,QAAQ,KAAK,MAAM;OAClC;OACA,iBAAiB,GAAG,gBAAgB,GAAG;OACvC,kBAAkB;OAClB,SAAS;OACT,OACE,gBACI,EAAE,YAAY,qBAAqB,IACnC,KAAA;MAEP,CAAA,CACA,EAAA,GAnCK,KAAK,EAmCV;KAEP,CAAC;IACE,CAAA;IAEP,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAU;KAA0B;IAAc,CAAA;GACpD;;CACuB,CAAA;AAElC;AASA,SAAgB,oBAAoB,EAClC,WACA,YACqC;CACrC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,mEACA,SACF;EAEC;CACE,CAAA;AAET;AAEA,SAAgB,oBAAoB,EAClC,WACA,YACqC;CACrC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,mEACA,SACF;EAEC;CACE,CAAA;AAET;AAmBA,SAAgB,YAAY,EAC1B,IAAI,QACJ,OACA,MACA,UAAU,WACV,WACA,UACA,UAAU,SACuB;CACjC,MAAM,UAAA,GAAA,MAAA,OAAe;CACrB,MAAM,KAAK,UAAU;CACrB,MAAM,EAAE,UAAU,YAAY,YAAY,gBAAgB;CAC1D,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAA8C,IAAI;CAElE,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,CAAC,SAAS;EACd,SAAS;GAAE;GAAI,MAAM;GAAU;GAAS;GAAO;EAAQ,CAAC;CAC1D,GAAG;EAAC;EAAS;EAAU;EAAI;EAAS;CAAK,CAAC;CAE1C,CAAA,GAAA,MAAA,iBAAgB;EACd,aAAa,WAAW,EAAE;CAC5B,GAAG,CAAC,YAAY,EAAE,CAAC;CAEnB,IAAI,SACF,OAAO,iBAAA,GAAA,kBAAA,KAAC,gBAAD,EAAgB,WAAW,WAAa,CAAA;CAIjD,MAAM,YADW,UAAU,KACG;CAC9B,MAAM,gBAAgB,gBAAgB;CACtC,MAAM,kBACJ,YAAY,OAAO,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,QAAQ,CAAC;CAC/D,MAAM,WAAW,mBAAmB;CACpC,MAAM,cAAc;CACpB,MAAM,qBAAqB,IAAI,KAAK,KAAK;CACzC,MAAM,WACJ,mBAAmB,OAAQ,kBAAkB,MAAO,qBAAqB;CAE3E,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,mFACA,CAAC,aAAa,cACd,SACF;YALF,CAOE,iBAAA,GAAA,kBAAA,KAACC,gCAAD;GACE,OAAO,KAAK,IAAI,KAAK;GACrB,QAAO;GACP,WAAU;EACX,CAAA,GACD,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,KAAK;GACL,YAAA,GAAA,OAAA,IACE,6FACA,YACI,cAAc,kBACd,kDACN;aAPF,CASG,YACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,WAAU;IACV,SAAQ;IACR,eAAY;cAEZ,iBAAA,GAAA,kBAAA,KAAC,UAAD;KACE,IAAG;KACH,IAAG;KACH,GAAG;KACH,MAAK;KACL,QAAQ,cAAc;KACtB,aAAY;KACZ,eAAc;KACd,iBAAiB,GAAG,SAAS,GAAG;KAChC,SAAS,YAAY,IAAI;IAC1B,CAAA;GACE,CAAA,GAEN,IACE;IACF;;AAET;AAEA,SAAS,eAAe,EACtB,aAGe;CACf,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,UAAD,EAAU,WAAU,aAAc,CAAA,GAClC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,KAAK;GACL,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,SAAU,CAAA;EACtB,CAAA,CACF;;AAET;AAWA,SAAgB,YAAY,EAC1B,IAAI,QACJ,OACA,MACA,aACiC;CACjC,MAAM,UAAA,GAAA,MAAA,OAAe;CACrB,MAAM,KAAK,UAAU;CACrB,MAAM,EAAE,UAAU,YAAY,YAAY,gBAAgB;CAC1D,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAA8C,IAAI;CAElE,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,CAAC,SAAS;EACd,SAAS;GAAE;GAAI,MAAM;GAAU;GAAO;EAAQ,CAAC;CACjD,GAAG;EAAC;EAAS;EAAU;EAAI;CAAK,CAAC;CAEjC,CAAA,GAAA,MAAA,iBAAgB;EACd,aAAa,WAAW,EAAE;CAC5B,GAAG,CAAC,YAAY,EAAE,CAAC;CAEnB,IAAI,SACF,OAAO,iBAAA,GAAA,kBAAA,KAAC,gBAAD,EAAgB,WAAW,WAAa,CAAA;CAGjD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,mDACA,SACF;YAJF,CAME,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,KAAK;GACL,WAAU;aAET;EACE,CAAA,GACL,iBAAA,GAAA,kBAAA,KAACD,gCAAD;GACE,OAAO;GACP,QAAO;GACP,WAAU;EACX,CAAA,CACE;;AAET;AAEA,SAAS,eAAe,EACtB,aAGe;CACf,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,KAAK;GACL,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,SAAU,CAAA;EACtB,CAAA,GACL,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,UAAD,EAAU,WAAU,aAAc,CAAA,CAC/B;;AAET;AAYA,SAAgB,iBAAiB,EAC/B,OACA,SACA,aACsC;CACtC,MAAM,UAAA,GAAA,MAAA,OAAe;CACrB,MAAM,EAAE,UAAU,YAAY,SAAS,qBAAqB,gBAAgB;CAC5E,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAA8C,IAAI;CAClE,MAAM,iBAAiB,SAAS;CAEhC,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,CAAC,SAAS;EACd,SAAS;GAAE,IAAI;GAAQ,MAAM;GAAQ,OAAO;GAAgB;EAAQ,CAAC;CACvE,GAAG;EAAC;EAAS;EAAU;EAAQ;CAAc,CAAC;CAE9C,CAAA,GAAA,MAAA,iBAAgB;EACd,aAAa,WAAW,MAAM;CAChC,GAAG,CAAC,YAAY,MAAM,CAAC;CAEvB,IAAI,SACF,OAAO,iBAAA,GAAA,kBAAA,KAAC,cAAD;EAAc,WAAW;EAAuB;CAAY,CAAA;CAGrE,OACE,iBAAA,GAAA,kBAAA,KAAC,aAAD;EACE,WAAW;EACX,SAAS,WAAW;EACpB,OAAO;EACI;CACZ,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,SACA,WACA,SAMe;CACf,MAAM,gBAAgBH,iCAAAA,iBAAiB;CACvC,MAAM,gBACJ,WAAW,OAAO,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,UAAU,GAAG,CAAC;CAChE,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAA+B,aAAa;CACpE,MAAM,sBAAA,GAAA,MAAA,QAA4B,eAAe;CACjD,MAAM,WAAW;CACjB,MAAM,kBAAkB;CACxB,MAAM,UAAU,WAAW,mBAAmB;CAC9C,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,iBAAkB,kBAAkB,MAAO;CAEjD,CAAA,GAAA,MAAA,iBAAgB;EACd,mBAAmB,UAAU;CAC/B,GAAG,CAAC,eAAe,CAAC;CAEpB,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,eAAe;GACjB,mBAAmB,UAAU;GAC7B,mBAAmB,aAAa;GAChC;EACF;EAEA,IAAI,UAAU;EACd,IAAI,WAAW,YAAY,IAAI;EAE/B,MAAM,WAAW,QAAgB;GAC/B,MAAM,eAAe,KAAK,IAAI,OAAQ,MAAM,YAAY,GAAI;GAC5D,WAAW;GACX,MAAM,YAAY,IAAI,KAAK,IAAI,KAAK,YAAY;GAChD,MAAM,OACJ,mBAAmB,WAClB,gBAAgB,mBAAmB,WAAW;GAEjD,mBAAmB,UAAU;GAC7B,mBAAmB,IAAI;GAEvB,IAAI,KAAK,IAAI,gBAAgB,IAAI,IAAI,KACnC,UAAU,OAAO,sBAAsB,OAAO;QACzC;IACL,mBAAmB,UAAU;IAC7B,mBAAmB,aAAa;GAClC;EACF;EAEA,UAAU,OAAO,sBAAsB,OAAO;EAC9C,aAAa,OAAO,qBAAqB,OAAO;CAClD,GAAG,CAAC,eAAe,aAAa,CAAC;CAEjC,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,KAAK;EACL,YAAA,GAAA,OAAA,IAAc,gCAAgC,SAAS;YAFzD,CAIG,WAAW,QACV,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,SAAS,GAAG;aAF9B,CAIE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,WAAW;IACf,IAAI,WAAW;IACf,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;GACd,CAAA,GACA,iBAAiB,KAChB,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,WAAW;IACf,IAAI,WAAW;IACf,GAAG;IACH,MAAK;IACL,QAAO;IACP,eAAc;IACd,aAAa;IACb,iBAAiB,GAAG,eAAe,GAAG;GACvC,CAAA,CAEA;MAEP,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACI,8BAAAA,gBAAD;IAAgB,WAAU;IAAc,MAAK;GAAQ,CAAA,GACrD,iBAAA,GAAA,kBAAA,KAACF,gCAAD;IACE,OAAO;IACP,QAAO;IACP,WAAU;GACX,CAAA,CACE;IACF;;AAET;AAEA,SAAS,aAAa,EACpB,WACA,aAIe;CACf,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,KAAK;EACL,YAAA,GAAA,OAAA,IACE,gGACA,SACF;CACD,CAAA;AAEL"}

package/dist/components/power-network.js

@@ -1,7 +1,7 @@
 "use client";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { SectionTitle } from "./typography.js";
 import NumberFlow from "./number-flow.js";
 import { Skeleton } from "./skeleton.js";
@@ -362,7 +362,7 @@ function PowerSource({ id: idProp, watts, icon, variant = "neutral", className,
 			className: "mt-1 text-sm leading-none font-medium"
 		}), /* @__PURE__ */ jsxs("div", {
 			ref: setElement,
-			className: cn("relative flex aspect-square items-center justify-center rounded-circle border p-4 shadow-sm", isColored ? variantStyles.activeClassName : "border-gray bg-gray-a3 shadow-gray-a4 saturate-0"),
+			className: cn("relative flex aspect-square items-center justify-center rounded-full border p-4 shadow-sm", isColored ? variantStyles.activeClassName : "border-gray bg-gray-a3 shadow-gray-a4 saturate-0"),
 			children: [showRing && /* @__PURE__ */ jsx("svg", {
 				className: "pointer-events-none absolute inset-0 size-full -rotate-90",
 				viewBox: "0 0 100 100",
@@ -387,7 +387,7 @@ function SourceSkeleton({ anchorRef }) {
 		className: "flex flex-col items-center justify-center gap-1",
 		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-10" }), /* @__PURE__ */ jsx("div", {
 			ref: anchorRef,
-			className: "flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
+			className: "flex aspect-square animate-pulse items-center justify-center rounded-full border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
 			children: /* @__PURE__ */ jsx("div", { className: "size-7" })
 		})]
 	});
@@ -419,7 +419,7 @@ function PowerDevice({ id: idProp, watts, icon, className }) {
 		className: cn("flex flex-col items-center justify-center gap-1", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: setElement,
-			className: "flex aspect-square items-center justify-center rounded-circle border border-gray bg-gray-a1 p-4",
+			className: "flex aspect-square items-center justify-center rounded-full border border-gray bg-gray-a1 p-4",
 			children: icon
 		}), /* @__PURE__ */ jsx(NumberFlow, {
 			value: watts,
@@ -433,7 +433,7 @@ function DeviceSkeleton({ anchorRef }) {
 		className: "flex flex-col items-center justify-center gap-1",
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: anchorRef,
-			className: "flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
+			className: "flex aspect-square animate-pulse items-center justify-center rounded-full border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
 			children: /* @__PURE__ */ jsx("div", { className: "size-5" })
 		}), /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-10" })]
 	});
@@ -532,7 +532,7 @@ function HomeSection({ anchorRef, autarky, className, watts }) {
 				strokeDasharray: `${progressLength} ${circumference}`
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "absolute inset-0 flex flex-col items-center justify-center rounded-circle border border-gray-a5 shadow-sm shadow-gray-a1",
+			className: "absolute inset-0 flex flex-col items-center justify-center rounded-full border border-gray-a5 shadow-sm shadow-gray-a1",
 			children: [/* @__PURE__ */ jsx(MaterialSymbol, {
 				className: "text-[14px]",
 				name: "home"
@@ -547,7 +547,7 @@ function HomeSection({ anchorRef, autarky, className, watts }) {
 function HomeSkeleton({ anchorRef, className }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref: anchorRef,
-		className: cn("mx-auto size-[78px] animate-pulse rounded-circle border border-gray motion-reduce:animate-none", className)
+		className: cn("mx-auto size-[78px] animate-pulse rounded-full border border-gray motion-reduce:animate-none", className)
 	});
 }
 //#endregion