@epilot/spark-ui 0.20.0 → 0.20.2

package/dist/components/pill.js

@@ -1,8 +1,8 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
-import { Close } from "@epilot/spark-icons";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
+import { Close } from "@epilot/spark-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/pill.tsx
 /**
@@ -39,7 +39,7 @@ const Pill = React$1.forwardRef(function Pill({ className, children, styleVarian
 		"data-accent-color": color ? accentByColor[color] : void 0,
 		...interaction,
 		ref,
-		className: cn("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--color-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))", "shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover,var(--color-gray-a4))", disabled && "pointer-events-none opacity-50", className),
+		className: cn("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", "shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover,var(--neutral-a4))", disabled && "pointer-events-none opacity-50", className),
 		...props,
 		children: [children, removable ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "sr-only",
@@ -51,7 +51,7 @@ const Pill = React$1.forwardRef(function Pill({ className, children, styleVarian
 				event.stopPropagation();
 				onRemove?.(event);
 			},
-			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--color-gray-a4)) motion-reduce:transition-none",
+			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--neutral-a4)) motion-reduce:transition-none",
 			children: /* @__PURE__ */ jsx(Close, { className: "[--spark-icon-size:14px]" })
 		})] }) : null]
 	});

package/dist/components/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","names":["React"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      {...interaction}\n      ref={ref}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--color-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))',\n        'shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable &&\n          'cursor-pointer hover:bg-(--spark-style-bg-hover,var(--color-gray-a4))',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--color-gray-a4)) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,OAAOA,QAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,WAAW,GACT,0FACA,mIACA,kGACA,aACE,iIACF,aACE,yEACF,YAAY,kCACZ,SACF;EACA,GAAI;YAnBN,CAqBG,UACA,YACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,oBAAC,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"pill.js","names":["React"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      {...interaction}\n      ref={ref}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n        'shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable &&\n          'cursor-pointer hover:bg-(--spark-style-bg-hover,var(--neutral-a4))',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--neutral-a4)) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,OAAOA,QAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,WAAW,GACT,0FACA,4GACA,kGACA,aACE,iIACF,aACE,sEACF,YAAY,kCACZ,SACF;EACA,GAAI;YAnBN,CAqBG,UACA,YACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,oBAAC,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/popover.cjs

@@ -7,7 +7,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
 let _base_ui_react_use_render = require("@base-ui/react/use-render");
 let _base_ui_react_popover = require("@base-ui/react/popover");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/popover.tsx
 const PopoverAnchorContext = react.createContext(null);
 function Popover(props) {
@@ -56,7 +56,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, side, ali
 			sideOffset,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Popup, {
 				"data-slot": "popover-content",
-				className: (0, cnfast.cn)("z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
+				className: (0, cn.cn)("z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
 				...props
 			})
 		})

package/dist/components/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n  props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,uBAAuBA,MAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,MAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,MAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,qBAAqB,UAAtB;EAAsC;YACpC,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,KAJcD,MAAM,WAAW,oBAIpB,GAAG;EACd,QAAA,GAAA,2BAAA,YACE,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AASA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,MAAM,WAAW,oBAAoB;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,QAAlB;EAAoC;YAClC,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACJ;GACM;aAEZ,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,aAAU;IACV,YAAA,GAAA,OAAA,IACE,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}
+{"version":3,"file":"popover.cjs","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n  props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,uBAAuBA,MAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,MAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,MAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,qBAAqB,UAAtB;EAAsC;YACpC,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,KAJcD,MAAM,WAAW,oBAIpB,GAAG;EACd,QAAA,GAAA,2BAAA,YACE,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AASA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,MAAM,WAAW,oBAAoB;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,QAAlB;EAAoC;YAClC,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACJ;GACM;aAEZ,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,aAAU;IACV,YAAA,GAAA,GAAA,IACE,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}

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

@@ -0,0 +1,498 @@
+"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");
+const require_utils_chart_scale = require("../utils/chart-scale.cjs");
+const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
+const require_components_chart = require("./chart.cjs");
+const require_components_series_legend = require("./series-legend.cjs");
+const require_components_typography = require("./typography.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _visx_event = require("@visx/event");
+let _visx_scale = require("@visx/scale");
+let _visx_shape = require("@visx/shape");
+let _visx_curve = require("@visx/curve");
+let _visx_tooltip = require("@visx/tooltip");
+let _visx_vendor_d3_array = require("@visx/vendor/d3-array");
+let cn = require("cn");
+//#region src/components/power-history-chart.tsx
+const AREA_KEYS = [
+	"solar",
+	"grid",
+	"battery"
+];
+const SERIES_KEYS = [
+	"solar",
+	"grid",
+	"battery",
+	"consumption"
+];
+const SERIES_COLORS = {
+	solar: "var(--orange-a9)",
+	grid: "var(--blue-9)",
+	battery: "var(--green-a9)",
+	consumption: "var(--neutral-12)"
+};
+const PADDING_TOP = 20;
+const PADDING_BOTTOM = 28;
+const PADDING_RIGHT = 8;
+const X_TICK_COUNT = 6;
+const DEFAULT_HEIGHT = 260;
+const DETAILED_X_AXIS_THRESHOLD = 360 * 60 * 1e3;
+const tBisector = (0, _visx_vendor_d3_array.bisector)((d) => d.t);
+function touchDistance(a, b) {
+	return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+}
+function touchMidpoint(a, b) {
+	return {
+		clientX: (a.clientX + b.clientX) / 2,
+		clientY: (a.clientY + b.clientY) / 2
+	};
+}
+/**
+* Diverging "power sources" area chart over a continuous time axis: solar
+* (orange), grid (blue) and battery (green) areas around a zero baseline, with
+* consumption overlaid as a line. Negative values (grid feed-in, battery
+* charging) dip below zero. For instantaneous power (day view). A legend at the
+* top toggles each series on/off; the y-axis rescales to the visible ones. visx.
+*/
+function PowerHistoryChart({ data, unit, formatX, formatTooltipX, formatValue, labels, omitSeries, highlightAt, title, className, height = DEFAULT_HEIGHT, zoomable = false, zoomResetLabel, zoomDomain, onZoomDomainChange }) {
+	const plotClipId = react.useId();
+	const fmtTooltipX = formatTooltipX ?? formatX;
+	const containerRef = (0, react.useRef)(null);
+	const reducedMotion = require_hooks_use_reduced_motion.useReducedMotion();
+	const [width, setWidth] = (0, react.useState)(0);
+	const [hiddenSeries, setHiddenSeries] = (0, react.useState)(() => /* @__PURE__ */ new Set());
+	const omitted = (0, react.useMemo)(() => new Set(omitSeries), [omitSeries]);
+	const toggleSeries = (0, react.useCallback)((id) => {
+		setHiddenSeries((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	const isHidden = (0, react.useCallback)((key) => omitted.has(key) || hiddenSeries.has(key), [hiddenSeries, omitted]);
+	const { showTooltip, hideTooltip, tooltipData, tooltipLeft, tooltipTop, tooltipOpen } = (0, _visx_tooltip.useTooltip)();
+	(0, react.useEffect)(() => {
+		const element = containerRef.current;
+		if (!element) return;
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			setWidth(entry.contentRect.width);
+		});
+		resizeObserver.observe(element);
+		return () => resizeObserver.disconnect();
+	}, []);
+	const fmtValue = (value) => formatValue ? formatValue(value) : `${require_utils_format.twoDecimalFormat.format(value)} ${unit}`;
+	const tMin = data.length ? data[0]?.t ?? 0 : 0;
+	const tMax = data.length ? data[data.length - 1]?.t ?? 0 : 0;
+	const zoom = require_hooks_use_chart_zoom.useChartZoom({
+		enabled: zoomable,
+		fullDomain: (0, react.useMemo)(() => {
+			if (data.length === 0) return null;
+			return [tMin, tMax];
+		}, [
+			data.length,
+			tMin,
+			tMax
+		]),
+		zoomDomain,
+		onZoomDomainChange
+	});
+	const viewMin = zoom.zoomWindow?.[0] ?? tMin;
+	const viewMax = zoom.zoomWindow?.[1] ?? tMax;
+	const visibleData = (0, react.useMemo)(() => data.filter((d) => d.t >= viewMin && d.t <= viewMax), [
+		data,
+		viewMin,
+		viewMax
+	]);
+	const { yMin, yMax } = (0, react.useMemo)(() => {
+		let min = 0;
+		let max = 0;
+		for (const d of visibleData) {
+			if (!isHidden("solar")) max = Math.max(max, d.solar);
+			if (!isHidden("consumption")) max = Math.max(max, d.consumption);
+			if (!isHidden("grid")) {
+				max = Math.max(max, d.grid);
+				min = Math.min(min, d.grid);
+			}
+			if (!isHidden("battery")) {
+				max = Math.max(max, d.battery);
+				min = Math.min(min, d.battery);
+			}
+		}
+		return {
+			yMin: min,
+			yMax: max
+		};
+	}, [visibleData, isHidden]);
+	const { ticks: yTicks, min: lo, max: hi } = (0, react.useMemo)(() => require_utils_chart_scale.buildYAxisScale(yMin, yMax), [yMin, yMax]);
+	const displayedYDomain = require_hooks_use_chart_zoom.useAnimatedChartDomain([lo, hi], {
+		animateChanges: zoom.isPinching,
+		reducedMotion
+	});
+	const gutter = (0, react.useMemo)(() => require_utils_chart_scale.measureYAxisGutter(yTicks, require_utils_chart_scale.formatYAxisTick), [yTicks]);
+	const plotRight = Math.max(gutter, width - PADDING_RIGHT);
+	const xScale = (0, react.useMemo)(() => (0, _visx_scale.scaleLinear)({
+		domain: [viewMin, viewMax === viewMin ? viewMin + 1 : viewMax],
+		range: [gutter, plotRight]
+	}), [
+		viewMin,
+		viewMax,
+		plotRight,
+		gutter
+	]);
+	const plotHeight = Math.max(0, height - PADDING_BOTTOM - PADDING_TOP);
+	const plotWidth = Math.max(0, plotRight - gutter);
+	const yScale = (0, react.useMemo)(() => (0, _visx_scale.scaleLinear)({
+		domain: [displayedYDomain[0], displayedYDomain[1] === displayedYDomain[0] ? displayedYDomain[0] + 1 : displayedYDomain[1]],
+		range: [height - PADDING_BOTTOM, PADDING_TOP]
+	}), [displayedYDomain, height]);
+	const xTicks = (0, react.useMemo)(() => require_utils_chart_time_ticks.buildTimeTicks(viewMin, viewMax, X_TICK_COUNT), [viewMin, viewMax]);
+	const formatAxisX = zoom.isZoomed && viewMax - viewMin <= DETAILED_X_AXIS_THRESHOLD ? fmtTooltipX : formatX;
+	const domainXFromEvent = (0, react.useCallback)((event) => {
+		const point = (0, _visx_event.localPoint)(event);
+		if (!point) return null;
+		return xScale.invert(point.x);
+	}, [xScale]);
+	const handleTooltip = (0, react.useCallback)((event) => {
+		if (zoom.isBrushing || zoom.isPanning) return;
+		const point = (0, _visx_event.localPoint)(event);
+		if (!point || data.length === 0) return;
+		const xMs = xScale.invert(point.x);
+		const index = tBisector.left(data, xMs, 1);
+		const d0 = data[index - 1];
+		const d1 = data[index];
+		if (!d0) return;
+		const d = d1 && xMs - d0.t > d1.t - xMs ? d1 : d0;
+		showTooltip({
+			tooltipData: d,
+			tooltipLeft: xScale(d.t),
+			tooltipTop: PADDING_TOP
+		});
+	}, [
+		data,
+		showTooltip,
+		xScale,
+		zoom.isBrushing,
+		zoom.isPanning
+	]);
+	const legendItems = SERIES_KEYS.filter((key) => !omitted.has(key)).map((key) => ({
+		id: key,
+		label: labels[key],
+		color: SERIES_COLORS[key]
+	}));
+	const tooltipRows = tooltipData ? SERIES_KEYS.filter((key) => !isHidden(key)).map((key) => ({
+		key,
+		label: labels[key],
+		color: SERIES_COLORS[key],
+		value: fmtValue(tooltipData[key])
+	})) : [];
+	const showHighlight = highlightAt !== void 0 && highlightAt >= viewMin && highlightAt <= viewMax;
+	const [tooltipRef, tooltipSize] = require_components_chart.useMeasuredSize();
+	const tooltipPos = require_components_chart.clampTooltipPosition({
+		anchorX: tooltipLeft ?? 0,
+		anchorY: tooltipTop ?? PADDING_TOP,
+		width,
+		height,
+		tipWidth: tooltipSize.width,
+		tipHeight: tooltipSize.height,
+		placement: "beside"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, cn.cn)("flex w-full flex-col gap-2", className),
+		children: [
+			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.SectionTitle, { children: title }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_series_legend.SeriesLegend, {
+				items: legendItems,
+				hiddenIds: hiddenSeries,
+				onToggle: toggleSeries
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "px-1 text-xs text-gray-light",
+				children: unit
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: containerRef,
+				className: "relative w-full",
+				style: { height },
+				children: [
+					width > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						width,
+						height,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("defs", { children: [AREA_KEYS.map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+								id: `power-history-fill-${key}`,
+								x1: "0",
+								y1: "0",
+								x2: "0",
+								y2: "1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+									offset: "0%",
+									stopColor: SERIES_COLORS[key],
+									stopOpacity: .35
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+									offset: "100%",
+									stopColor: SERIES_COLORS[key],
+									stopOpacity: .04
+								})]
+							}, key)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
+								id: plotClipId,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+									height: plotHeight,
+									width: plotWidth,
+									x: gutter,
+									y: PADDING_TOP
+								})
+							})] }),
+							yTicks.map((tick) => {
+								const y = yScale(tick);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+									x1: gutter,
+									x2: plotRight,
+									y1: y,
+									y2: y,
+									stroke: "var(--neutral-a4)",
+									strokeWidth: 1
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+									x: gutter - 7,
+									y: y + 3,
+									textAnchor: "end",
+									fill: "var(--neutral-a11)",
+									fontSize: 10,
+									children: require_utils_chart_scale.formatYAxisTick(tick)
+								})] }, `y-tick-${tick}`);
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+								clipPath: `url(#${plotClipId})`,
+								"data-testid": "chart-plot-clip",
+								children: [
+									AREA_KEYS.filter((key) => !isHidden(key)).map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.Area, {
+										data,
+										x: (d) => xScale(d.t),
+										y0: yScale(0),
+										y1: (d) => yScale(d[key]),
+										curve: _visx_curve.curveMonotoneX,
+										fill: `url(#power-history-fill-${key})`,
+										stroke: "transparent"
+									}, `area-${key}`)),
+									AREA_KEYS.filter((key) => !isHidden(key)).map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.LinePath, {
+										data,
+										x: (d) => xScale(d.t),
+										y: (d) => yScale(d[key]),
+										curve: _visx_curve.curveMonotoneX,
+										stroke: SERIES_COLORS[key],
+										strokeWidth: 1.5,
+										fill: "none"
+									}, `line-${key}`)),
+									!isHidden("consumption") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.LinePath, {
+										data,
+										x: (d) => xScale(d.t),
+										y: (d) => yScale(d.consumption),
+										curve: _visx_curve.curveMonotoneX,
+										stroke: SERIES_COLORS.consumption,
+										strokeWidth: 1.5,
+										fill: "none"
+									})
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+								x1: gutter,
+								x2: plotRight,
+								y1: yScale(0),
+								y2: yScale(0),
+								stroke: "var(--neutral-a6)",
+								strokeWidth: 1
+							}),
+							showHighlight && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+								x1: xScale(highlightAt),
+								x2: xScale(highlightAt),
+								y1: PADDING_TOP,
+								y2: height - PADDING_BOTTOM,
+								stroke: "var(--spark-a9)",
+								strokeWidth: 1.5,
+								strokeDasharray: "5 4",
+								pointerEvents: "none"
+							}),
+							xTicks.map((tick, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+								x: xScale(tick),
+								y: height - PADDING_BOTTOM + 16,
+								textAnchor: index === 0 ? "start" : index === xTicks.length - 1 ? "end" : "middle",
+								fill: "var(--neutral-a11)",
+								fontSize: 10,
+								children: formatAxisX(tick)
+							}, `x-tick-${tick}`)),
+							tooltipOpen && tooltipData && !zoom.isBrushing && !zoom.isPanning && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+									x1: xScale(tooltipData.t),
+									x2: xScale(tooltipData.t),
+									y1: PADDING_TOP,
+									y2: height - PADDING_BOTTOM,
+									stroke: "var(--neutral-a6)",
+									strokeDasharray: "4 4",
+									pointerEvents: "none"
+								}),
+								AREA_KEYS.filter((key) => !isHidden(key)).map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+									cx: xScale(tooltipData.t),
+									cy: yScale(tooltipData[key]),
+									r: 3.5,
+									fill: SERIES_COLORS[key],
+									stroke: "white",
+									strokeWidth: 1.5,
+									pointerEvents: "none"
+								}, `dot-${key}`)),
+								!isHidden("consumption") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+									cx: xScale(tooltipData.t),
+									cy: yScale(tooltipData.consumption),
+									r: 3.5,
+									fill: SERIES_COLORS.consumption,
+									stroke: "white",
+									strokeWidth: 1.5,
+									pointerEvents: "none"
+								})
+							] }),
+							zoom.brushBand && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+								"data-testid": "chart-brush-band",
+								x: Math.min(xScale(zoom.brushBand[0]), xScale(zoom.brushBand[1])),
+								y: PADDING_TOP,
+								width: Math.abs(xScale(zoom.brushBand[1]) - xScale(zoom.brushBand[0])),
+								height: plotHeight,
+								fill: "var(--spark-a4)",
+								pointerEvents: "none"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+								x: gutter,
+								y: PADDING_TOP,
+								width: plotWidth,
+								height: plotHeight,
+								fill: "transparent",
+								style: zoomable ? { touchAction: "pan-y" } : void 0,
+								onMouseLeave: () => {
+									if (!zoom.isBrushing) hideTooltip();
+								},
+								onMouseMove: (event) => {
+									if (zoom.isBrushing) {
+										const domainX = domainXFromEvent(event);
+										if (domainX != null) zoom.onPointerMove(domainX);
+										return;
+									}
+									handleTooltip(event);
+								},
+								onPointerDown: (event) => {
+									if (!zoomable || event.pointerType === "touch") return;
+									if (event.button !== 0) return;
+									const domainX = domainXFromEvent(event);
+									if (domainX == null) return;
+									event.currentTarget.setPointerCapture?.(event.pointerId);
+									hideTooltip();
+									zoom.onPointerDown(domainX);
+								},
+								onPointerMove: (event) => {
+									if (!zoomable) return;
+									const domainX = domainXFromEvent(event);
+									if (domainX != null) zoom.onPointerMove(domainX);
+								},
+								onPointerUp: (event) => {
+									if (!zoomable) return;
+									const domainX = domainXFromEvent(event);
+									if (domainX != null) zoom.onPointerUp(domainX);
+									else zoom.onPointerCancel();
+								},
+								onPointerCancel: () => {
+									zoom.onPointerCancel();
+								},
+								onDoubleClick: () => {
+									if (zoomable) zoom.onDoubleClick();
+								},
+								onTouchStart: (event) => {
+									if (!zoomable) return;
+									if (event.touches.length === 2) {
+										const [a, b] = [event.touches[0], event.touches[1]];
+										if (!a || !b) return;
+										const point = (0, _visx_event.localPoint)(event.currentTarget, touchMidpoint(a, b));
+										if (!point) return;
+										const midpoint = Math.min(1, Math.max(0, (point.x - gutter) / plotWidth));
+										zoom.onPinchStart(touchDistance(a, b), midpoint);
+										hideTooltip();
+										return;
+									}
+									if (event.touches.length === 1 && zoom.isZoomed) {
+										const point = (0, _visx_event.localPoint)(event);
+										if (!point) return;
+										zoom.onPanStart({
+											x: (point.x - gutter) / plotWidth,
+											y: (point.y - PADDING_TOP) / plotHeight
+										});
+										hideTooltip();
+									}
+								},
+								onTouchMove: (event) => {
+									if (zoomable && event.touches.length === 2) {
+										const [a, b] = [event.touches[0], event.touches[1]];
+										if (!a || !b) return;
+										const point = (0, _visx_event.localPoint)(event.currentTarget, touchMidpoint(a, b));
+										if (!point) return;
+										const midpoint = Math.min(1, Math.max(0, (point.x - gutter) / plotWidth));
+										zoom.onPinchMove(touchDistance(a, b), midpoint);
+										return;
+									}
+									if (event.touches.length === 1 && zoom.isZoomed) {
+										const point = (0, _visx_event.localPoint)(event);
+										if (!point) return;
+										zoom.onPanMove({
+											x: (point.x - gutter) / plotWidth,
+											y: (point.y - PADDING_TOP) / plotHeight
+										});
+										return;
+									}
+									if (event.touches.length === 1) handleTooltip(event);
+								},
+								onTouchEnd: (event) => {
+									if (zoomable && event.touches.length < 2) zoom.onPinchEnd();
+									if (event.touches.length === 0) {
+										if (zoomable) zoom.onPanEnd();
+										if (zoomable) zoom.onTap();
+										hideTooltip();
+									}
+								},
+								onTouchCancel: () => {
+									zoom.onPinchEnd();
+									zoom.onPanEnd();
+								}
+							})
+						]
+					}),
+					zoom.isZoomed && zoomResetLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_chart.ChartZoomResetButton, {
+						label: zoomResetLabel,
+						onReset: zoom.resetZoom
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: tooltipRef,
+						className: "pointer-events-none absolute z-10",
+						style: {
+							left: tooltipPos.left,
+							top: tooltipPos.top,
+							opacity: tooltipOpen && tooltipData && !zoom.isPanning && !zoom.isBrushing ? 1 : 0,
+							transition: reducedMotion ? "opacity 140ms ease-out" : "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
+						},
+						children: tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_chart.ChartTooltipCard, {
+							label: fmtTooltipX(tooltipData.t),
+							rows: tooltipRows
+						})
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+exports.PowerHistoryChart = PowerHistoryChart;
+
+//# sourceMappingURL=power-history-chart.cjs.map