@acronis-platform/ui-react 4.0.0 → 4.1.0

package/dist/components/ui/confidence-cone/confidence-cone.js.map

@@ -1 +1 @@
-{"version":3,"file":"confidence-cone.js","sources":["../../../../src/components/ui/confidence-cone/confidence-cone.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Area,\n  CartesianGrid,\n  ComposedChart,\n  Line,\n  ReferenceArea,\n  ReferenceLine,\n  Text,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAxisDomain,\n  resolveAnimation,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  CHART_LABEL_FONT_SIZE,\n  type ChartConfig,\n  type ChartPalette,\n  type ChartLegendContentProps,\n  type ChartTooltipContentProps,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n} from '../chart';\n\n// A forecast confidence-cone: a solid line over the known/actual period, a\n// dashed line over the forecast period, and a shaded band (the \"cone\") between\n// a lower and upper bound that typically widens with the horizon — visualizing\n// growing uncertainty. Built on the shared Chart primitives; no new tokens\n// (series colors are caller-supplied via `config`). The whole metric renders in\n// one hue — actual and forecast differ by line style, not color — so the cone\n// band and the forecast line both reuse the actual series' color.\n\n// Each series' band is a synthetic `[lower, upper]` range field per row that a\n// recharts <Area> shades; kept out of the tooltip/legend (see the filters\n// below). One band per series, so the key carries the series' actual key — the\n// whole `__cone` prefix is reserved.\nconst BAND_PREFIX = '__cone';\nconst bandKeyFor = (actualKey: string) => `${BAND_PREFIX}:${actualKey}`;\n\n/**\n * Drop every synthetic cone-band range series from a recharts tooltip/legend\n * payload, keeping the real actual/forecast series (and their order). Applied to\n * both the default tooltip and any caller-supplied `tooltipContent`, so no band\n * surfaces regardless of which path renders or how many series are plotted.\n */\nexport function dropConeBand<T extends { dataKey?: unknown }>(\n  payload: readonly T[] | undefined\n): T[] | undefined {\n  return payload?.filter(\n    (item) =>\n      !(\n        typeof item.dataKey === 'string' && item.dataKey.startsWith(BAND_PREFIX)\n      )\n  );\n}\n\n/**\n * Reduce a legend payload to the metrics the chart plots — one entry per series.\n * A series' actual, forecast and cone are three recharts series painting a\n * single metric in a single hue, so the legend names each metric once, with its\n * actual series' swatch, instead of listing line styles as separate series.\n */\nexport function keepMetricSeries<T extends { dataKey?: unknown }>(\n  payload: readonly T[] | undefined,\n  actualKeys: readonly string[]\n): T[] | undefined {\n  return payload?.filter(\n    (item) =>\n      typeof item.dataKey === 'string' && actualKeys.includes(item.dataKey)\n  );\n}\n\n/**\n * Wrap a caller-supplied `tooltipContent` so the synthetic cone band is stripped\n * from the payload before it renders, while preserving recharts' own mount\n * semantics — a function is mounted via `createElement` (its own component\n * identity + hook state), an element via `cloneElement`. This mirrors what the\n * pass-through charts get by handing `content` straight to recharts, so a\n * function-form tooltip keeps its state across re-renders here too. The returned\n * component is a stable content type (memoize it on `tooltipContent`).\n */\ntype TooltipContentType = NonNullable<\n  React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<\n  TooltipContentType,\n  (...args: never[]) => unknown\n>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\nexport function createConeTooltip(tooltipContent: TooltipContentType) {\n  return function ConeTooltip(props: TooltipRenderProps) {\n    const merged = {\n      ...props,\n      payload: dropConeBand(props.payload),\n    } as TooltipRenderProps;\n    return typeof tooltipContent === 'function'\n      ? React.createElement(\n          tooltipContent as React.FunctionComponent<TooltipRenderProps>,\n          merged\n        )\n      : React.cloneElement(tooltipContent, merged);\n  };\n}\n\n/**\n * One plotted metric: its actual / forecast columns and, optionally, the two\n * bound columns that shade its cone. Omit `lowerKey`/`upperKey` for a band-less\n * metric — a solid line handing off to a bare dashed projection.\n */\nexport interface ConfidenceConeSeries {\n  /** Field for the known/actual values — drawn as a solid line with a filled area. */\n  actualKey: string;\n  /** Field for the projected values — drawn as a dashed line. */\n  forecastKey: string;\n  /** Field for the cone's lower bound. Omit (with `upperKey`) for no cone. */\n  lowerKey?: string;\n  /** Field for the cone's upper bound. Omit (with `lowerKey`) for no cone. */\n  upperKey?: string;\n}\n\n/**\n * The x values of the projected period — every row carrying a forecast value for\n * at least one series, in data order. The first is the hand-off point (where the\n * shaded region and divider start); the whole set drives the forecast tick\n * styling, matched by value so tick `interval` can't skew it the way a tick\n * index would. Exported for unit tests; not part of the package's public API.\n */\nexport function forecastPeriodX(\n  data: ReadonlyArray<Record<string, string | number | null | undefined>>,\n  series: readonly ConfidenceConeSeries[],\n  xKey: string\n): Array<string | number | null | undefined> {\n  return data\n    .filter((row) =>\n      series.some(({ forecastKey }) => typeof row[forecastKey] === 'number')\n    )\n    .map((row) => row[xKey]);\n}\n\n/**\n * Build the X-axis tick renderer that sets the projected columns apart: italic,\n * in the metric's hue. Styled inline rather than through the `fill` attribute\n * recharts hands every tick, so the accent survives the class-based tick color\n * a chart theme may apply. A custom tick owns its own text, so the caller's\n * `xTickFormatter` is applied here — recharts only applies it to default ticks.\n * Exported for unit tests; not part of the package's public API.\n */\nexport function createForecastTick(\n  forecastX: ReadonlySet<string | number | null | undefined>,\n  color: string,\n  tickFormatter?: CartesianChartProps['xTickFormatter']\n) {\n  return function ForecastTick({\n    payload,\n    index,\n    ...tickProps\n  }: {\n    payload?: { value?: string | number };\n    index?: number;\n  }) {\n    const value = payload?.value;\n    return (\n      <Text\n        {...tickProps}\n        style={\n          value != null && forecastX.has(value)\n            ? { fontStyle: 'italic', fill: color }\n            : undefined\n        }\n      >\n        {tickFormatter && value != null ? tickFormatter(value, index) : value}\n      </Text>\n    );\n  };\n}\n\n/** A dashed horizontal threshold on the value axis. */\nexport interface ConfidenceConeReferenceLine {\n  /** Position on the value (Y) axis. */\n  value: number;\n  /** Optional caption rendered at the line's right end. */\n  label?: string;\n}\n\n/**\n * Every prop except the one-form-or-the-other requirement `ConfidenceConeProps`\n * layers on below. Exported so the stories can type their `Meta` on a single\n * object shape — Storybook can't split a union's required args between `meta.args`\n * and a story's. Not re-exported from `index.ts`; not part of the public API.\n */\nexport interface ConfidenceConeBaseProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps,\n    ChartAnimationProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /**\n   * Row-per-point data — the shared x dimension plus each series' actual /\n   * forecast / bound fields. Rows are naturally sparse (a point has either an\n   * actual or a forecast + bounds), so missing fields are allowed. Avoid fields\n   * starting with `__cone` — that prefix is reserved for the internal\n   * prediction-band series.\n   */\n  data: ReadonlyArray<Record<string, string | number | null | undefined>>;\n  /**\n   * Per-series map of `label` / `icon` / `tone` for the actual + forecast lines\n   * (imported from the shared `Chart` primitives). Series take their colour from\n   * the container's `palette`; each entry maps a key to a `label` and an optional\n   * `tone`. Each metric renders in one hue: its cone band and forecast line both\n   * reuse its actual series' color — actual and forecast differ by line style,\n   * not hue.\n   */\n  config: ChartConfig;\n  /** Category / time axis key (the shared dimension across rows). */\n  xKey: string;\n  /**\n   * Plot several metrics against one shared axis — each with its own actual /\n   * forecast / bound fields and its own hue (from `config[actualKey]`). Takes\n   * precedence over the single-series `actualKey`/`forecastKey`/`lowerKey`/\n   * `upperKey` shorthand below; pass one form or the other, not both. One of the\n   * two forms is required.\n   */\n  series?: readonly ConfidenceConeSeries[];\n  /**\n   * Single-series shorthand — field for the known/actual values, drawn as a\n   * solid line with a filled area. Required (with `forecastKey`) unless `series`\n   * is set, which supersedes it.\n   */\n  actualKey?: string;\n  /**\n   * Single-series shorthand — field for the projected values, drawn as a dashed\n   * line. Required (with `actualKey`) unless `series` is set, which supersedes\n   * it.\n   */\n  forecastKey?: string;\n  /** Field for the cone's lower bound. Omit (with `upperKey`) for no cone. */\n  lowerKey?: string;\n  /** Field for the cone's upper bound. Omit (with `lowerKey`) for no cone. */\n  upperKey?: string;\n  /**\n   * How the known/actual period is drawn: a filled `area` under the line (the\n   * default), or a bare `line` — for a chart where the cone is the only shaded\n   * region, or where several metrics' fills would muddy each other.\n   */\n  actualType?: 'area' | 'line';\n  /** Stroke width of the actual + forecast lines. */\n  strokeWidth?: number;\n  /**\n   * Mark each data point: a filled dot on the observed values, a hollow one on\n   * the projection — so a point reads as measured or predicted at a glance.\n   */\n  showDots?: boolean;\n  /**\n   * Italicize the X-axis ticks over the forecast period and paint them in the\n   * first series' hue, so the projected columns read as projected even when the\n   * shaded region is off.\n   */\n  styleForecastTicks?: boolean;\n  /**\n   * One or more dashed horizontal thresholds on the value axis — e.g. a target\n   * or a capacity limit. Pass a single object or an array to draw several.\n   */\n  referenceLine?: ConfidenceConeReferenceLine | ConfidenceConeReferenceLine[];\n  /**\n   * Set off the forecast period from the actuals with a dashed divider at the\n   * hand-off point (the first row with a forecast value) and a subtle shaded\n   * band over the forecast region.\n   */\n  showForecastRegion?: boolean;\n  showLegend?: boolean;\n}\n\n/**\n * Which columns to plot has to be spelled out one way or the other: the `series`\n * array, or the flat `actualKey` + `forecastKey` shorthand. Expressed as a union\n * so a chart with neither is a compile error rather than a silent plot of axes\n * and nothing else. Both forms together stay legal — `series` wins (see\n * `plotted`), which is what the multi-series stories rely on to clear the args\n * table.\n */\nexport type ConfidenceConeProps = ConfidenceConeBaseProps &\n  (\n    | { series: readonly ConfidenceConeSeries[] }\n    | { actualKey: string; forecastKey: string }\n  );\n\nconst ConfidenceCone = React.forwardRef<HTMLDivElement, ConfidenceConeProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      xKey,\n      series,\n      actualKey,\n      forecastKey,\n      lowerKey,\n      upperKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      actualType = 'area',\n      strokeWidth = 2,\n      showDots = false,\n      styleForecastTicks = false,\n      referenceLine,\n      showForecastRegion = true,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      ...props\n    },\n    ref\n  ) => {\n    // The flat *Key props are the single-series shorthand for `series`.\n    const plotted = React.useMemo<readonly ConfidenceConeSeries[]>(() => {\n      if (series?.length) return series;\n      if (!actualKey || !forecastKey) return [];\n      return [{ actualKey, forecastKey, lowerKey, upperKey }];\n    }, [series, actualKey, forecastKey, lowerKey, upperKey]);\n\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // Memoized so recharts sees a stable content type across renders — a fresh\n    // wrapper each render would remount the caller's tooltip and reset its state.\n    const customTooltip = React.useMemo(\n      () => (tooltipContent ? createConeTooltip(tooltipContent) : undefined),\n      [tooltipContent]\n    );\n\n    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    // One hue per metric. Each cone and forecast line already paints with its own\n    // series' actual color; re-pointing that series' forecast key's `--color-*`\n    // at it too means nothing downstream — a custom tooltip, a caller's\n    // `var(--color-<forecastKey>)` — can reintroduce a second color.\n    const seriesConfig = React.useMemo(() => {\n      let next: ChartConfig | undefined;\n      for (const { actualKey: aKey, forecastKey: fKey } of plotted) {\n        const actual = config[aKey];\n        const forecast = config[fKey];\n        if (!actual || !forecast) continue;\n        next ??= { ...config };\n        next[fKey] = {\n          label: forecast.label,\n          icon: forecast.icon,\n          tone: { sameAs: aKey },\n        };\n      }\n      return next ?? config;\n    }, [config, plotted]);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    // Augment each row with one `[lower, upper]` band tuple per coned series for\n    // its Area to shade. Rows missing a numeric bound are left un-coned (the\n    // band breaks there); a series without bounds gets no band at all.\n    const chartData = data.map((row) => {\n      const next: Record<string, unknown> = { ...row };\n      for (const {\n        actualKey: aKey,\n        lowerKey: lKey,\n        upperKey: uKey,\n      } of plotted) {\n        if (!lKey || !uKey) continue;\n        const lower = row[lKey];\n        const upper = row[uKey];\n        next[bandKeyFor(aKey)] =\n          typeof lower === 'number' && typeof upper === 'number'\n            ? [lower, upper]\n            : undefined;\n      }\n      return next;\n    });\n\n    const forecastX = forecastPeriodX(data, plotted, xKey);\n    // Set the projected period off from the actuals with a shaded band + a\n    // divider at the hand-off.\n    const forecastStart = showForecastRegion ? forecastX[0] : undefined;\n    const lastX = data[data.length - 1]?.[xKey];\n\n    const renderForecastTick = createForecastTick(\n      new Set(forecastX),\n      `var(--color-${plotted[0]?.actualKey})`,\n      xTickFormatter\n    );\n\n    const referenceLines = referenceLine\n      ? Array.isArray(referenceLine)\n        ? referenceLine\n        : [referenceLine]\n      : [];\n\n    // Everything from here to the `return` is lifted out of the returned tree\n    // only to keep it readable as a flat list of chart children. Nothing in\n    // recharts forces the `render*` helpers to be plain functions: axes and\n    // series register themselves with the chart's store, and `<Cell>` is the\n    // only child still looked up by element type — a component wrapper renders\n    // fine (see AreaChart's `AreaFillGradients`). They stay functions because\n    // they are declared inside the render body, where a component would get a\n    // fresh element type on every render and remount its subtree.\n\n    const renderAxes = () => (\n      <>\n        <XAxis\n          dataKey={xKey}\n          type=\"category\"\n          hide={!showXAxis}\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickFormatter={xTickFormatter}\n          tick={styleForecastTicks ? renderForecastTick : undefined}\n          angle={xAxisAngle}\n          interval={xAxisInterval}\n          textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n          height={xAxisHeight}\n          label={xAxisTitle}\n        />\n        <YAxis\n          type=\"number\"\n          hide={!showYAxis}\n          tickLine={false}\n          axisLine={false}\n          unit={yUnit}\n          tickFormatter={yTickFormatter}\n          tickCount={yAxisTickCount}\n          domain={yDomain}\n          width={yAxisLabel ? 72 : undefined}\n          label={yAxisTitle}\n        />\n      </>\n    );\n\n    // Set the forecast region off from the actuals (behind everything).\n    const renderForecastRegion = () => (\n      <>\n        {forecastStart != null && lastX != null && (\n          <ReferenceArea\n            x1={forecastStart}\n            x2={lastX}\n            fill=\"var(--ui-background-surface-secondary)\"\n            fillOpacity={0.5}\n            ifOverflow=\"extendDomain\"\n          />\n        )}\n        {forecastStart != null && (\n          <ReferenceLine\n            x={forecastStart}\n            stroke=\"var(--ui-border-on-surface-border)\"\n            strokeDasharray=\"4 4\"\n          />\n        )}\n      </>\n    );\n\n    const renderThreshold = (\n      threshold: ConfidenceConeReferenceLine,\n      index: number\n    ) => (\n      <ReferenceLine\n        key={`${threshold.label ?? 'threshold'}-${index}`}\n        y={threshold.value}\n        stroke=\"var(--ui-text-on-surface-secondary)\"\n        strokeDasharray=\"4 4\"\n        // extendDomain so a threshold beyond the data max stays visible.\n        ifOverflow=\"extendDomain\"\n        label={\n          threshold.label\n            ? {\n                value: threshold.label,\n                position: 'insideTopRight',\n                fill: 'var(--ui-text-on-surface-secondary)',\n                fontSize: CHART_LABEL_FONT_SIZE,\n              }\n            : undefined\n        }\n      />\n    );\n\n    const renderTooltip = () =>\n      customTooltip ? (\n        // Strips the synthetic band before the caller's tooltip sees it — the\n        // `__cone` series feeds the Area, not the tooltip.\n        <ChartTooltip content={customTooltip} />\n      ) : (\n        <ChartTooltip\n          content={(tp) => (\n            <ChartTooltipContent\n              active={tp.active}\n              label={tp.label}\n              // The synthetic band feeds the Area, not the tooltip.\n              payload={\n                dropConeBand(tp.payload) as ChartTooltipContentProps['payload']\n              }\n            />\n          )}\n        />\n      );\n\n    const renderLegend = () => (\n      <ChartLegend\n        content={(lp) => (\n          <ChartLegendContent\n            verticalAlign={lp.verticalAlign}\n            payload={\n              keepMetricSeries(\n                lp.payload,\n                plotted.map((s) => s.actualKey)\n              ) as ChartLegendContentProps['payload']\n            }\n          />\n        )}\n      />\n    );\n\n    // One color per metric — actual and forecast differ by line style, not hue\n    // — so a cone reuses its series' actual color.\n    const renderConeBand = ({\n      actualKey: aKey,\n      lowerKey: lKey,\n      upperKey: uKey,\n    }: ConfidenceConeSeries) =>\n      lKey && uKey ? (\n        <Area\n          key={bandKeyFor(aKey)}\n          // The band paints in the same hue, at the same opacity, as the\n          // actual series' own area, so nothing on the rendered path tells\n          // the two apart. recharts forwards `data-*` onto the path it\n          // draws; the tests select the band through this.\n          data-slot=\"confidence-cone-band\"\n          dataKey={bandKeyFor(aKey)}\n          type=\"monotone\"\n          stroke=\"none\"\n          fill={`var(--color-${aKey})`}\n          fillOpacity={0.15}\n          connectNulls={false}\n          dot={false}\n          activeDot={false}\n          {...animation}\n          legendType=\"none\"\n          tooltipType=\"none\"\n        />\n      ) : null;\n\n    const renderActualMark = ({ actualKey: aKey }: ConfidenceConeSeries) => {\n      // An area and a line take the same props here; only the region under the\n      // curve (and the mark recharts draws) differ. A `Line` gets no fill at\n      // all — `fillOpacity: 0` would also erase its dots.\n      const ActualMark = actualType === 'line' ? Line : Area;\n      const areaFill =\n        actualType === 'line'\n          ? undefined\n          : { fill: `var(--color-${aKey})`, fillOpacity: 0.15 };\n      // Observed points read as measured: LineChart's dot geometry (r 3, 2px\n      // ring) filled with the metric hue. The ring is that same hue, so the\n      // mark is solid — and wide enough against the 2px line not to read as a\n      // mere thickening of it. `fillOpacity: 1` is load-bearing: recharts\n      // merges the parent mark's own presentation props into every dot it\n      // draws, so an `<Area>`'s 0.15 would otherwise wash the dot out to a halo.\n      const dot = showDots\n        ? {\n            r: 3,\n            fill: `var(--color-${aKey})`,\n            fillOpacity: 1,\n            stroke: `var(--color-${aKey})`,\n            strokeWidth: 2,\n          }\n        : false;\n      return (\n        <ActualMark\n          key={aKey}\n          dataKey={aKey}\n          type=\"monotone\"\n          stroke={`var(--color-${aKey})`}\n          strokeWidth={strokeWidth}\n          {...areaFill}\n          dot={dot}\n          activeDot={showDots ? { r: 5 } : false}\n          connectNulls\n          {...animation}\n          // The legend names the metric once, so it carries the swatch that\n          // stands for the whole series rather than the actual line's style.\n          legendType=\"rect\"\n        />\n      );\n    };\n\n    const renderForecastLine = ({\n      actualKey: aKey,\n      forecastKey: fKey,\n    }: ConfidenceConeSeries) => {\n      // Projected points read as predicted: the same LineChart dot, inverted —\n      // the metric's hue as the ring, the surface color as the fill, so the\n      // dashed line doesn't show through the middle. (LineChart leaves the fill\n      // to recharts, whose `Line` defaults it to `#fff`; the token is that same\n      // white in the light theme and also holds up in the dark one.)\n      // `strokeDasharray: 'none'` is load-bearing: recharts merges the parent\n      // mark's presentation props into every dot, so this line's `5 5` would\n      // otherwise break each dot's ring into two arcs.\n      const dot = showDots\n        ? {\n            r: 3,\n            fill: 'var(--ui-background-surface-primary)',\n            stroke: `var(--color-${aKey})`,\n            strokeWidth: 2,\n            strokeDasharray: 'none',\n          }\n        : false;\n      return (\n        <Line\n          key={fKey}\n          dataKey={fKey}\n          type=\"monotone\"\n          stroke={`var(--color-${aKey})`}\n          strokeWidth={strokeWidth}\n          strokeDasharray=\"5 5\"\n          dot={dot}\n          // Paired with `dot` the way every other chart does it — left unset,\n          // the projection would keep recharts' default active dot while the\n          // actuals had none (and a different radius when on).\n          activeDot={showDots ? { r: 5 } : false}\n          connectNulls\n          {...animation}\n        />\n      );\n    };\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={seriesConfig}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <ComposedChart data={chartData as readonly unknown[]}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            {renderAxes()}\n            {renderForecastRegion()}\n            {referenceLines.map(renderThreshold)}\n            {showTooltip && renderTooltip()}\n            {showLegend && renderLegend()}\n            {/* Every cone renders before any line, so the lines draw on top of\n                all of them. */}\n            {plotted.map(renderConeBand)}\n            {plotted.map(renderActualMark)}\n            {plotted.map(renderForecastLine)}\n          </ComposedChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nConfidenceCone.displayName = 'ConfidenceCone';\n\nexport { ConfidenceCone };\n"],"names":["BAND_PREFIX","bandKeyFor","actualKey","dropConeBand","payload","item","keepMetricSeries","actualKeys","createConeTooltip","tooltipContent","props","merged","React","forecastPeriodX","data","series","xKey","row","forecastKey","createForecastTick","forecastX","color","tickFormatter","index","tickProps","value","jsx","Text","ConfidenceCone","className","config","palette","lowerKey","upperKey","xAxisLabel","yAxisLabel","yUnit","actualType","strokeWidth","showDots","styleForecastTicks","referenceLine","showForecastRegion","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","animate","animationDuration","animationBegin","animationEasing","ref","plotted","animation","resolveAnimation","customTooltip","xAxisTitle","resolveXAxisTitle","yAxisTitle","resolveYAxisTitle","yDomain","resolveAxisDomain","seriesConfig","next","aKey","fKey","actual","forecast","xAxisHeight","resolveXAxisHeight","chartData","lKey","uKey","lower","upper","forecastStart","lastX","_a","renderForecastTick","_b","referenceLines","renderAxes","jsxs","Fragment","XAxis","resolveRotatedTickAnchor","YAxis","renderForecastRegion","ReferenceArea","ReferenceLine","renderThreshold","threshold","CHART_LABEL_FONT_SIZE","renderTooltip","ChartTooltip","tp","ChartTooltipContent","renderLegend","ChartLegend","lp","ChartLegendContent","s","renderConeBand","Area","renderActualMark","ActualMark","Line","areaFill","dot","renderForecastLine","cn","ChartContainer","ComposedChart","CartesianGrid"],"mappings":"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"}
+{"version":3,"file":"confidence-cone.js","names":[],"sources":["../../../../src/components/ui/confidence-cone/confidence-cone.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Area,\n  CartesianGrid,\n  ComposedChart,\n  Line,\n  ReferenceArea,\n  ReferenceLine,\n  Text,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAxisDomain,\n  resolveAnimation,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  CHART_LABEL_FONT_SIZE,\n  type ChartConfig,\n  type ChartPalette,\n  type ChartLegendContentProps,\n  type ChartTooltipContentProps,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n} from '../chart';\n\n// A forecast confidence-cone: a solid line over the known/actual period, a\n// dashed line over the forecast period, and a shaded band (the \"cone\") between\n// a lower and upper bound that typically widens with the horizon — visualizing\n// growing uncertainty. Built on the shared Chart primitives; no new tokens\n// (series colors are caller-supplied via `config`). The whole metric renders in\n// one hue — actual and forecast differ by line style, not color — so the cone\n// band and the forecast line both reuse the actual series' color.\n\n// Each series' band is a synthetic `[lower, upper]` range field per row that a\n// recharts <Area> shades; kept out of the tooltip/legend (see the filters\n// below). One band per series, so the key carries the series' actual key — the\n// whole `__cone` prefix is reserved.\nconst BAND_PREFIX = '__cone';\nconst bandKeyFor = (actualKey: string) => `${BAND_PREFIX}:${actualKey}`;\n\n/**\n * Drop every synthetic cone-band range series from a recharts tooltip/legend\n * payload, keeping the real actual/forecast series (and their order). Applied to\n * both the default tooltip and any caller-supplied `tooltipContent`, so no band\n * surfaces regardless of which path renders or how many series are plotted.\n */\nexport function dropConeBand<T extends { dataKey?: unknown }>(\n  payload: readonly T[] | undefined\n): T[] | undefined {\n  return payload?.filter(\n    (item) =>\n      !(\n        typeof item.dataKey === 'string' && item.dataKey.startsWith(BAND_PREFIX)\n      )\n  );\n}\n\n/**\n * Reduce a legend payload to the metrics the chart plots — one entry per series.\n * A series' actual, forecast and cone are three recharts series painting a\n * single metric in a single hue, so the legend names each metric once, with its\n * actual series' swatch, instead of listing line styles as separate series.\n */\nexport function keepMetricSeries<T extends { dataKey?: unknown }>(\n  payload: readonly T[] | undefined,\n  actualKeys: readonly string[]\n): T[] | undefined {\n  return payload?.filter(\n    (item) =>\n      typeof item.dataKey === 'string' && actualKeys.includes(item.dataKey)\n  );\n}\n\n/**\n * Wrap a caller-supplied `tooltipContent` so the synthetic cone band is stripped\n * from the payload before it renders, while preserving recharts' own mount\n * semantics — a function is mounted via `createElement` (its own component\n * identity + hook state), an element via `cloneElement`. This mirrors what the\n * pass-through charts get by handing `content` straight to recharts, so a\n * function-form tooltip keeps its state across re-renders here too. The returned\n * component is a stable content type (memoize it on `tooltipContent`).\n */\ntype TooltipContentType = NonNullable<\n  React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<\n  TooltipContentType,\n  (...args: never[]) => unknown\n>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\nexport function createConeTooltip(tooltipContent: TooltipContentType) {\n  return function ConeTooltip(props: TooltipRenderProps) {\n    const merged = {\n      ...props,\n      payload: dropConeBand(props.payload),\n    } as TooltipRenderProps;\n    return typeof tooltipContent === 'function'\n      ? React.createElement(\n          tooltipContent as React.FunctionComponent<TooltipRenderProps>,\n          merged\n        )\n      : React.cloneElement(tooltipContent, merged);\n  };\n}\n\n/**\n * One plotted metric: its actual / forecast columns and, optionally, the two\n * bound columns that shade its cone. Omit `lowerKey`/`upperKey` for a band-less\n * metric — a solid line handing off to a bare dashed projection.\n */\nexport interface ConfidenceConeSeries {\n  /** Field for the known/actual values — drawn as a solid line with a filled area. */\n  actualKey: string;\n  /** Field for the projected values — drawn as a dashed line. */\n  forecastKey: string;\n  /** Field for the cone's lower bound. Omit (with `upperKey`) for no cone. */\n  lowerKey?: string;\n  /** Field for the cone's upper bound. Omit (with `lowerKey`) for no cone. */\n  upperKey?: string;\n}\n\n/**\n * The x values of the projected period — every row carrying a forecast value for\n * at least one series, in data order. The first is the hand-off point (where the\n * shaded region and divider start); the whole set drives the forecast tick\n * styling, matched by value so tick `interval` can't skew it the way a tick\n * index would. Exported for unit tests; not part of the package's public API.\n */\nexport function forecastPeriodX(\n  data: ReadonlyArray<Record<string, string | number | null | undefined>>,\n  series: readonly ConfidenceConeSeries[],\n  xKey: string\n): Array<string | number | null | undefined> {\n  return data\n    .filter((row) =>\n      series.some(({ forecastKey }) => typeof row[forecastKey] === 'number')\n    )\n    .map((row) => row[xKey]);\n}\n\n/**\n * Build the X-axis tick renderer that sets the projected columns apart: italic,\n * in the metric's hue. Styled inline rather than through the `fill` attribute\n * recharts hands every tick, so the accent survives the class-based tick color\n * a chart theme may apply. A custom tick owns its own text, so the caller's\n * `xTickFormatter` is applied here — recharts only applies it to default ticks.\n * Exported for unit tests; not part of the package's public API.\n */\nexport function createForecastTick(\n  forecastX: ReadonlySet<string | number | null | undefined>,\n  color: string,\n  tickFormatter?: CartesianChartProps['xTickFormatter']\n) {\n  return function ForecastTick({\n    payload,\n    index,\n    ...tickProps\n  }: {\n    payload?: { value?: string | number };\n    index?: number;\n  }) {\n    const value = payload?.value;\n    return (\n      <Text\n        {...tickProps}\n        style={\n          value != null && forecastX.has(value)\n            ? { fontStyle: 'italic', fill: color }\n            : undefined\n        }\n      >\n        {tickFormatter && value != null ? tickFormatter(value, index) : value}\n      </Text>\n    );\n  };\n}\n\n/** A dashed horizontal threshold on the value axis. */\nexport interface ConfidenceConeReferenceLine {\n  /** Position on the value (Y) axis. */\n  value: number;\n  /** Optional caption rendered at the line's right end. */\n  label?: string;\n}\n\n/**\n * Every prop except the one-form-or-the-other requirement `ConfidenceConeProps`\n * layers on below. Exported so the stories can type their `Meta` on a single\n * object shape — Storybook can't split a union's required args between `meta.args`\n * and a story's. Not re-exported from `index.ts`; not part of the public API.\n */\nexport interface ConfidenceConeBaseProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps,\n    ChartAnimationProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /**\n   * Row-per-point data — the shared x dimension plus each series' actual /\n   * forecast / bound fields. Rows are naturally sparse (a point has either an\n   * actual or a forecast + bounds), so missing fields are allowed. Avoid fields\n   * starting with `__cone` — that prefix is reserved for the internal\n   * prediction-band series.\n   */\n  data: ReadonlyArray<Record<string, string | number | null | undefined>>;\n  /**\n   * Per-series map of `label` / `icon` / `tone` for the actual + forecast lines\n   * (imported from the shared `Chart` primitives). Series take their colour from\n   * the container's `palette`; each entry maps a key to a `label` and an optional\n   * `tone`. Each metric renders in one hue: its cone band and forecast line both\n   * reuse its actual series' color — actual and forecast differ by line style,\n   * not hue.\n   */\n  config: ChartConfig;\n  /** Category / time axis key (the shared dimension across rows). */\n  xKey: string;\n  /**\n   * Plot several metrics against one shared axis — each with its own actual /\n   * forecast / bound fields and its own hue (from `config[actualKey]`). Takes\n   * precedence over the single-series `actualKey`/`forecastKey`/`lowerKey`/\n   * `upperKey` shorthand below; pass one form or the other, not both. One of the\n   * two forms is required.\n   */\n  series?: readonly ConfidenceConeSeries[];\n  /**\n   * Single-series shorthand — field for the known/actual values, drawn as a\n   * solid line with a filled area. Required (with `forecastKey`) unless `series`\n   * is set, which supersedes it.\n   */\n  actualKey?: string;\n  /**\n   * Single-series shorthand — field for the projected values, drawn as a dashed\n   * line. Required (with `actualKey`) unless `series` is set, which supersedes\n   * it.\n   */\n  forecastKey?: string;\n  /** Field for the cone's lower bound. Omit (with `upperKey`) for no cone. */\n  lowerKey?: string;\n  /** Field for the cone's upper bound. Omit (with `lowerKey`) for no cone. */\n  upperKey?: string;\n  /**\n   * How the known/actual period is drawn: a filled `area` under the line (the\n   * default), or a bare `line` — for a chart where the cone is the only shaded\n   * region, or where several metrics' fills would muddy each other.\n   */\n  actualType?: 'area' | 'line';\n  /** Stroke width of the actual + forecast lines. */\n  strokeWidth?: number;\n  /**\n   * Mark each data point: a filled dot on the observed values, a hollow one on\n   * the projection — so a point reads as measured or predicted at a glance.\n   */\n  showDots?: boolean;\n  /**\n   * Italicize the X-axis ticks over the forecast period and paint them in the\n   * first series' hue, so the projected columns read as projected even when the\n   * shaded region is off.\n   */\n  styleForecastTicks?: boolean;\n  /**\n   * One or more dashed horizontal thresholds on the value axis — e.g. a target\n   * or a capacity limit. Pass a single object or an array to draw several.\n   */\n  referenceLine?: ConfidenceConeReferenceLine | ConfidenceConeReferenceLine[];\n  /**\n   * Set off the forecast period from the actuals with a dashed divider at the\n   * hand-off point (the first row with a forecast value) and a subtle shaded\n   * band over the forecast region.\n   */\n  showForecastRegion?: boolean;\n  showLegend?: boolean;\n}\n\n/**\n * Which columns to plot has to be spelled out one way or the other: the `series`\n * array, or the flat `actualKey` + `forecastKey` shorthand. Expressed as a union\n * so a chart with neither is a compile error rather than a silent plot of axes\n * and nothing else. Both forms together stay legal — `series` wins (see\n * `plotted`), which is what the multi-series stories rely on to clear the args\n * table.\n */\nexport type ConfidenceConeProps = ConfidenceConeBaseProps &\n  (\n    | { series: readonly ConfidenceConeSeries[] }\n    | { actualKey: string; forecastKey: string }\n  );\n\nconst ConfidenceCone = React.forwardRef<HTMLDivElement, ConfidenceConeProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      xKey,\n      series,\n      actualKey,\n      forecastKey,\n      lowerKey,\n      upperKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      actualType = 'area',\n      strokeWidth = 2,\n      showDots = false,\n      styleForecastTicks = false,\n      referenceLine,\n      showForecastRegion = true,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      ...props\n    },\n    ref\n  ) => {\n    // The flat *Key props are the single-series shorthand for `series`.\n    const plotted = React.useMemo<readonly ConfidenceConeSeries[]>(() => {\n      if (series?.length) return series;\n      if (!actualKey || !forecastKey) return [];\n      return [{ actualKey, forecastKey, lowerKey, upperKey }];\n    }, [series, actualKey, forecastKey, lowerKey, upperKey]);\n\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // Memoized so recharts sees a stable content type across renders — a fresh\n    // wrapper each render would remount the caller's tooltip and reset its state.\n    const customTooltip = React.useMemo(\n      () => (tooltipContent ? createConeTooltip(tooltipContent) : undefined),\n      [tooltipContent]\n    );\n\n    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    // One hue per metric. Each cone and forecast line already paints with its own\n    // series' actual color; re-pointing that series' forecast key's `--color-*`\n    // at it too means nothing downstream — a custom tooltip, a caller's\n    // `var(--color-<forecastKey>)` — can reintroduce a second color.\n    const seriesConfig = React.useMemo(() => {\n      let next: ChartConfig | undefined;\n      for (const { actualKey: aKey, forecastKey: fKey } of plotted) {\n        const actual = config[aKey];\n        const forecast = config[fKey];\n        if (!actual || !forecast) continue;\n        next ??= { ...config };\n        next[fKey] = {\n          label: forecast.label,\n          icon: forecast.icon,\n          tone: { sameAs: aKey },\n        };\n      }\n      return next ?? config;\n    }, [config, plotted]);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    // Augment each row with one `[lower, upper]` band tuple per coned series for\n    // its Area to shade. Rows missing a numeric bound are left un-coned (the\n    // band breaks there); a series without bounds gets no band at all.\n    const chartData = data.map((row) => {\n      const next: Record<string, unknown> = { ...row };\n      for (const {\n        actualKey: aKey,\n        lowerKey: lKey,\n        upperKey: uKey,\n      } of plotted) {\n        if (!lKey || !uKey) continue;\n        const lower = row[lKey];\n        const upper = row[uKey];\n        next[bandKeyFor(aKey)] =\n          typeof lower === 'number' && typeof upper === 'number'\n            ? [lower, upper]\n            : undefined;\n      }\n      return next;\n    });\n\n    const forecastX = forecastPeriodX(data, plotted, xKey);\n    // Set the projected period off from the actuals with a shaded band + a\n    // divider at the hand-off.\n    const forecastStart = showForecastRegion ? forecastX[0] : undefined;\n    const lastX = data[data.length - 1]?.[xKey];\n\n    const renderForecastTick = createForecastTick(\n      new Set(forecastX),\n      `var(--color-${plotted[0]?.actualKey})`,\n      xTickFormatter\n    );\n\n    const referenceLines = referenceLine\n      ? Array.isArray(referenceLine)\n        ? referenceLine\n        : [referenceLine]\n      : [];\n\n    // Everything from here to the `return` is lifted out of the returned tree\n    // only to keep it readable as a flat list of chart children. Nothing in\n    // recharts forces the `render*` helpers to be plain functions: axes and\n    // series register themselves with the chart's store, and `<Cell>` is the\n    // only child still looked up by element type — a component wrapper renders\n    // fine (see AreaChart's `AreaFillGradients`). They stay functions because\n    // they are declared inside the render body, where a component would get a\n    // fresh element type on every render and remount its subtree.\n\n    const renderAxes = () => (\n      <>\n        <XAxis\n          dataKey={xKey}\n          type=\"category\"\n          hide={!showXAxis}\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickFormatter={xTickFormatter}\n          tick={styleForecastTicks ? renderForecastTick : undefined}\n          angle={xAxisAngle}\n          interval={xAxisInterval}\n          textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n          height={xAxisHeight}\n          label={xAxisTitle}\n        />\n        <YAxis\n          type=\"number\"\n          hide={!showYAxis}\n          tickLine={false}\n          axisLine={false}\n          unit={yUnit}\n          tickFormatter={yTickFormatter}\n          tickCount={yAxisTickCount}\n          domain={yDomain}\n          width={yAxisLabel ? 72 : undefined}\n          label={yAxisTitle}\n        />\n      </>\n    );\n\n    // Set the forecast region off from the actuals (behind everything).\n    const renderForecastRegion = () => (\n      <>\n        {forecastStart != null && lastX != null && (\n          <ReferenceArea\n            x1={forecastStart}\n            x2={lastX}\n            fill=\"var(--ui-background-surface-secondary)\"\n            fillOpacity={0.5}\n            ifOverflow=\"extendDomain\"\n          />\n        )}\n        {forecastStart != null && (\n          <ReferenceLine\n            x={forecastStart}\n            stroke=\"var(--ui-border-on-surface-border)\"\n            strokeDasharray=\"4 4\"\n          />\n        )}\n      </>\n    );\n\n    const renderThreshold = (\n      threshold: ConfidenceConeReferenceLine,\n      index: number\n    ) => (\n      <ReferenceLine\n        key={`${threshold.label ?? 'threshold'}-${index}`}\n        y={threshold.value}\n        stroke=\"var(--ui-text-on-surface-secondary)\"\n        strokeDasharray=\"4 4\"\n        // extendDomain so a threshold beyond the data max stays visible.\n        ifOverflow=\"extendDomain\"\n        label={\n          threshold.label\n            ? {\n                value: threshold.label,\n                position: 'insideTopRight',\n                fill: 'var(--ui-text-on-surface-secondary)',\n                fontSize: CHART_LABEL_FONT_SIZE,\n              }\n            : undefined\n        }\n      />\n    );\n\n    const renderTooltip = () =>\n      customTooltip ? (\n        // Strips the synthetic band before the caller's tooltip sees it — the\n        // `__cone` series feeds the Area, not the tooltip.\n        <ChartTooltip content={customTooltip} />\n      ) : (\n        <ChartTooltip\n          content={(tp) => (\n            <ChartTooltipContent\n              active={tp.active}\n              label={tp.label}\n              // The synthetic band feeds the Area, not the tooltip.\n              payload={\n                dropConeBand(tp.payload) as ChartTooltipContentProps['payload']\n              }\n            />\n          )}\n        />\n      );\n\n    const renderLegend = () => (\n      <ChartLegend\n        content={(lp) => (\n          <ChartLegendContent\n            verticalAlign={lp.verticalAlign}\n            payload={\n              keepMetricSeries(\n                lp.payload,\n                plotted.map((s) => s.actualKey)\n              ) as ChartLegendContentProps['payload']\n            }\n          />\n        )}\n      />\n    );\n\n    // One color per metric — actual and forecast differ by line style, not hue\n    // — so a cone reuses its series' actual color.\n    const renderConeBand = ({\n      actualKey: aKey,\n      lowerKey: lKey,\n      upperKey: uKey,\n    }: ConfidenceConeSeries) =>\n      lKey && uKey ? (\n        <Area\n          key={bandKeyFor(aKey)}\n          // The band paints in the same hue, at the same opacity, as the\n          // actual series' own area, so nothing on the rendered path tells\n          // the two apart. recharts forwards `data-*` onto the path it\n          // draws; the tests select the band through this.\n          data-slot=\"confidence-cone-band\"\n          dataKey={bandKeyFor(aKey)}\n          type=\"monotone\"\n          stroke=\"none\"\n          fill={`var(--color-${aKey})`}\n          fillOpacity={0.15}\n          connectNulls={false}\n          dot={false}\n          activeDot={false}\n          {...animation}\n          legendType=\"none\"\n          tooltipType=\"none\"\n        />\n      ) : null;\n\n    const renderActualMark = ({ actualKey: aKey }: ConfidenceConeSeries) => {\n      // An area and a line take the same props here; only the region under the\n      // curve (and the mark recharts draws) differ. A `Line` gets no fill at\n      // all — `fillOpacity: 0` would also erase its dots.\n      const ActualMark = actualType === 'line' ? Line : Area;\n      const areaFill =\n        actualType === 'line'\n          ? undefined\n          : { fill: `var(--color-${aKey})`, fillOpacity: 0.15 };\n      // Observed points read as measured: LineChart's dot geometry (r 3, 2px\n      // ring) filled with the metric hue. The ring is that same hue, so the\n      // mark is solid — and wide enough against the 2px line not to read as a\n      // mere thickening of it. `fillOpacity: 1` is load-bearing: recharts\n      // merges the parent mark's own presentation props into every dot it\n      // draws, so an `<Area>`'s 0.15 would otherwise wash the dot out to a halo.\n      const dot = showDots\n        ? {\n            r: 3,\n            fill: `var(--color-${aKey})`,\n            fillOpacity: 1,\n            stroke: `var(--color-${aKey})`,\n            strokeWidth: 2,\n          }\n        : false;\n      return (\n        <ActualMark\n          key={aKey}\n          dataKey={aKey}\n          type=\"monotone\"\n          stroke={`var(--color-${aKey})`}\n          strokeWidth={strokeWidth}\n          {...areaFill}\n          dot={dot}\n          activeDot={showDots ? { r: 5 } : false}\n          connectNulls\n          {...animation}\n          // The legend names the metric once, so it carries the swatch that\n          // stands for the whole series rather than the actual line's style.\n          legendType=\"rect\"\n        />\n      );\n    };\n\n    const renderForecastLine = ({\n      actualKey: aKey,\n      forecastKey: fKey,\n    }: ConfidenceConeSeries) => {\n      // Projected points read as predicted: the same LineChart dot, inverted —\n      // the metric's hue as the ring, the surface color as the fill, so the\n      // dashed line doesn't show through the middle. (LineChart leaves the fill\n      // to recharts, whose `Line` defaults it to `#fff`; the token is that same\n      // white in the light theme and also holds up in the dark one.)\n      // `strokeDasharray: 'none'` is load-bearing: recharts merges the parent\n      // mark's presentation props into every dot, so this line's `5 5` would\n      // otherwise break each dot's ring into two arcs.\n      const dot = showDots\n        ? {\n            r: 3,\n            fill: 'var(--ui-background-surface-primary)',\n            stroke: `var(--color-${aKey})`,\n            strokeWidth: 2,\n            strokeDasharray: 'none',\n          }\n        : false;\n      return (\n        <Line\n          key={fKey}\n          dataKey={fKey}\n          type=\"monotone\"\n          stroke={`var(--color-${aKey})`}\n          strokeWidth={strokeWidth}\n          strokeDasharray=\"5 5\"\n          dot={dot}\n          // Paired with `dot` the way every other chart does it — left unset,\n          // the projection would keep recharts' default active dot while the\n          // actuals had none (and a different radius when on).\n          activeDot={showDots ? { r: 5 } : false}\n          connectNulls\n          {...animation}\n        />\n      );\n    };\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={seriesConfig}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <ComposedChart data={chartData as readonly unknown[]}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            {renderAxes()}\n            {renderForecastRegion()}\n            {referenceLines.map(renderThreshold)}\n            {showTooltip && renderTooltip()}\n            {showLegend && renderLegend()}\n            {/* Every cone renders before any line, so the lines draw on top of\n                all of them. */}\n            {plotted.map(renderConeBand)}\n            {plotted.map(renderActualMark)}\n            {plotted.map(renderForecastLine)}\n          </ComposedChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nConfidenceCone.displayName = 'ConfidenceCone';\n\nexport { ConfidenceCone };\n"],"mappings":"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"}

package/dist/components/ui/data-table/data-table-bulk-actions-bar.js

@@ -1,38 +1,33 @@
-import { jsxs as n, jsx as e, Fragment as a } from "react/jsx-runtime";
-import { isBulkSelectionActive as m } from "./data-table-selection.js";
-import { Button as d } from "../button/button.js";
-function x({
-  table: s,
-  children: r,
-  selectedLabel: l = (t) => `${t} item${t === 1 ? "" : "s"} selected:`,
-  clearLabel: o = "Deselect",
-  loadedLabel: i
-}) {
-  const t = s.getSelectedRowModel().rows.length, c = m(s);
-  return /* @__PURE__ */ n("div", { className: "flex items-center gap-4", children: [
-    /* @__PURE__ */ e(
-      "fieldset",
-      {
-        disabled: !c,
-        className: "m-0 flex min-w-0 items-center gap-4 border-0 p-0",
-        children: r
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "ms-auto flex items-center gap-2", children: c ? /* @__PURE__ */ n(a, { children: [
-      /* @__PURE__ */ e("span", { className: "text-sm", children: l(t) }),
-      /* @__PURE__ */ e(
-        d,
-        {
-          variant: "ghost",
-          className: "h-8",
-          onClick: () => s.resetRowSelection(),
-          children: o
-        }
-      )
-    ] }) : i !== void 0 && /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: i }) })
-  ] });
+import { Button as e } from "../button/button.js";
+import { isBulkSelectionActive as t } from "./data-table-selection.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ui/data-table/data-table-bulk-actions-bar.tsx
+function a({ table: a, children: o, selectedLabel: s = (e) => `${e} item${e === 1 ? "" : "s"} selected:`, clearLabel: c = "Deselect", loadedLabel: l }) {
+	let u = a.getSelectedRowModel().rows.length, d = t(a);
+	return /* @__PURE__ */ i("div", {
+		className: "flex items-center gap-4",
+		children: [/* @__PURE__ */ r("fieldset", {
+			disabled: !d,
+			className: "m-0 flex min-w-0 items-center gap-4 border-0 p-0",
+			children: o
+		}), /* @__PURE__ */ r("div", {
+			className: "ms-auto flex items-center gap-2",
+			children: d ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+				className: "text-sm",
+				children: s(u)
+			}), /* @__PURE__ */ r(e, {
+				variant: "ghost",
+				className: "h-8",
+				onClick: () => a.resetRowSelection(),
+				children: c
+			})] }) : l !== void 0 && /* @__PURE__ */ r("span", {
+				className: "text-sm text-muted-foreground",
+				children: l
+			})
+		})]
+	});
 }
-export {
-  x as DataTableBulkActionsBar
-};
-//# sourceMappingURL=data-table-bulk-actions-bar.js.map
+//#endregion
+export { a as DataTableBulkActionsBar };
+
+//# sourceMappingURL=data-table-bulk-actions-bar.js.map

package/dist/components/ui/data-table/data-table-bulk-actions-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-bulk-actions-bar.js","sources":["../../../../src/components/ui/data-table/data-table-bulk-actions-bar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Table } from '@tanstack/react-table';\n\nimport { Button } from '../button';\nimport { isBulkSelectionActive } from './data-table-selection';\n\ninterface DataTableBulkActionsBarProps<TData> {\n  table: Table<TData>;\n  /**\n   * Bulk actions offered for the current selection — rendered leading, ahead\n   * of the trailing summary/Deselect control. Wrapped in a native `<fieldset\n   * disabled>` while nothing is selected, so every nested control (a `Button`\n   * renders a plain `<button>`) picks up the disabled state and styling for\n   * free — no per-action wiring needed. Each action reads the selection off\n   * the same `table` instance (`table.getSelectedRowModel().rows`).\n   */\n  children?: ReactNode;\n  /** Builds the trailing selection summary from the selected-row count. */\n  selectedLabel?: (count: number) => string;\n  /** Label of the trailing control that clears the selection. */\n  clearLabel?: string;\n  /**\n   * Trailing summary shown in place of the selection summary while nothing is\n   * selected — e.g. `\"25 of 1250 items loaded\"`. Omit to render nothing in\n   * that state.\n   */\n  loadedLabel?: ReactNode;\n}\n\n// Thin TanStack adapter: reads the selected-row count off\n// `table.getSelectedRowModel()` and routes Deselect back through\n// `table.resetRowSelection()`. It owns no state of its own.\n//\n// Always mounted (unlike a bar that appears/disappears with selection) — it\n// just toggles between two states (Figma 5916-11286 disabled / 5916-11991\n// enabled), on the same `isBulkSelectionActive` threshold that hides the\n// per-row actions column: with nothing selected, the leading actions are\n// disabled and the trailing side shows `loadedLabel`; once at least one row\n// is selected — including exactly one — the actions enable and the trailing\n// side switches to the selection summary + Deselect.\nexport function DataTableBulkActionsBar<TData>({\n  table,\n  children,\n  selectedLabel = (count) => `${count} item${count === 1 ? '' : 's'} selected:`,\n  clearLabel = 'Deselect',\n  loadedLabel,\n}: DataTableBulkActionsBarProps<TData>) {\n  const selectedCount = table.getSelectedRowModel().rows.length;\n  const hasSelection = isBulkSelectionActive(table);\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      <fieldset\n        disabled={!hasSelection}\n        className=\"m-0 flex min-w-0 items-center gap-4 border-0 p-0\"\n      >\n        {children}\n      </fieldset>\n      <div className=\"ms-auto flex items-center gap-2\">\n        {hasSelection ? (\n          <>\n            <span className=\"text-sm\">{selectedLabel(selectedCount)}</span>\n            <Button\n              variant=\"ghost\"\n              className=\"h-8\"\n              onClick={() => table.resetRowSelection()}\n            >\n              {clearLabel}\n            </Button>\n          </>\n        ) : (\n          loadedLabel !== undefined && (\n            <span className=\"text-sm text-muted-foreground\">{loadedLabel}</span>\n          )\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTableBulkActionsBar","table","children","selectedLabel","count","clearLabel","loadedLabel","selectedCount","hasSelection","isBulkSelectionActive","jsxs","jsx","Fragment","Button"],"mappings":";;;AAwCO,SAASA,EAA+B;AAAA,EAC7C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB,CAACC,MAAU,GAAGA,CAAK,QAAQA,MAAU,IAAI,KAAK,GAAG;AAAA,EACjE,YAAAC,IAAa;AAAA,EACb,aAAAC;AACF,GAAwC;AACtC,QAAMC,IAAgBN,EAAM,oBAAA,EAAsB,KAAK,QACjDO,IAAeC,EAAsBR,CAAK;AAEhD,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,CAACH;AAAA,QACX,WAAU;AAAA,QAET,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAS,EAAC,OAAA,EAAI,WAAU,mCACZ,cACC,gBAAAD,EAAAE,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAR,EAAcI,CAAa,GAAE;AAAA,MACxD,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,MAAMZ,EAAM,kBAAA;AAAA,UAEpB,UAAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF,IAEAC,MAAgB,UACd,gBAAAK,EAAC,UAAK,WAAU,iCAAiC,aAAY,EAAA,CAGnE;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"data-table-bulk-actions-bar.js","names":[],"sources":["../../../../src/components/ui/data-table/data-table-bulk-actions-bar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Table } from '@tanstack/react-table';\n\nimport { Button } from '../button';\nimport { isBulkSelectionActive } from './data-table-selection';\n\ninterface DataTableBulkActionsBarProps<TData> {\n  table: Table<TData>;\n  /**\n   * Bulk actions offered for the current selection — rendered leading, ahead\n   * of the trailing summary/Deselect control. Wrapped in a native `<fieldset\n   * disabled>` while nothing is selected, so every nested control (a `Button`\n   * renders a plain `<button>`) picks up the disabled state and styling for\n   * free — no per-action wiring needed. Each action reads the selection off\n   * the same `table` instance (`table.getSelectedRowModel().rows`).\n   */\n  children?: ReactNode;\n  /** Builds the trailing selection summary from the selected-row count. */\n  selectedLabel?: (count: number) => string;\n  /** Label of the trailing control that clears the selection. */\n  clearLabel?: string;\n  /**\n   * Trailing summary shown in place of the selection summary while nothing is\n   * selected — e.g. `\"25 of 1250 items loaded\"`. Omit to render nothing in\n   * that state.\n   */\n  loadedLabel?: ReactNode;\n}\n\n// Thin TanStack adapter: reads the selected-row count off\n// `table.getSelectedRowModel()` and routes Deselect back through\n// `table.resetRowSelection()`. It owns no state of its own.\n//\n// Always mounted (unlike a bar that appears/disappears with selection) — it\n// just toggles between two states (Figma 5916-11286 disabled / 5916-11991\n// enabled), on the same `isBulkSelectionActive` threshold that hides the\n// per-row actions column: with nothing selected, the leading actions are\n// disabled and the trailing side shows `loadedLabel`; once at least one row\n// is selected — including exactly one — the actions enable and the trailing\n// side switches to the selection summary + Deselect.\nexport function DataTableBulkActionsBar<TData>({\n  table,\n  children,\n  selectedLabel = (count) => `${count} item${count === 1 ? '' : 's'} selected:`,\n  clearLabel = 'Deselect',\n  loadedLabel,\n}: DataTableBulkActionsBarProps<TData>) {\n  const selectedCount = table.getSelectedRowModel().rows.length;\n  const hasSelection = isBulkSelectionActive(table);\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      <fieldset\n        disabled={!hasSelection}\n        className=\"m-0 flex min-w-0 items-center gap-4 border-0 p-0\"\n      >\n        {children}\n      </fieldset>\n      <div className=\"ms-auto flex items-center gap-2\">\n        {hasSelection ? (\n          <>\n            <span className=\"text-sm\">{selectedLabel(selectedCount)}</span>\n            <Button\n              variant=\"ghost\"\n              className=\"h-8\"\n              onClick={() => table.resetRowSelection()}\n            >\n              {clearLabel}\n            </Button>\n          </>\n        ) : (\n          loadedLabel !== undefined && (\n            <span className=\"text-sm text-muted-foreground\">{loadedLabel}</span>\n          )\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAwCA,SAAgB,EAA+B,EAC7C,UACA,aACA,oBAAiB,MAAU,GAAG,EAAM,OAAO,MAAU,IAAI,KAAK,IAAI,aAClE,gBAAa,YACb,kBACsC;CACtC,IAAM,IAAgB,EAAM,oBAAoB,CAAC,CAAC,KAAK,QACjD,IAAe,EAAsB,CAAK;CAEhD,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,YAAD;GACE,UAAU,CAAC;GACX,WAAU;GAET;EACO,CAAA,GACV,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAAW,UAAA,EAAc,CAAa;GAAQ,CAAA,GAC9D,kBAAC,GAAD;IACE,SAAQ;IACR,WAAU;IACV,eAAe,EAAM,kBAAkB;IAEtC,UAAA;GACK,CAAA,CACR,EAAA,CAAA,IAEF,MAAgB,KAAA,KACd,kBAAC,QAAD;IAAM,WAAU;IAAiC,UAAA;GAAkB,CAAA;EAGpE,CAAA,CACF;;AAET"}

package/dist/components/ui/data-table/data-table-column-header.js

@@ -1,39 +1,24 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { ArrowUpIcon as l, ArrowDownIcon as u, ArrowsDownUpIcon as d } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as s } from "../../../lib/utils.js";
-function p({
-  column: o,
-  title: t,
-  sortLabel: a = (r) => `Sort by ${r}`,
-  className: i,
-  ...n
-}) {
-  if (!o.getCanSort())
-    return /* @__PURE__ */ e("div", { className: s(i), children: t });
-  const r = o.getIsSorted();
-  return /* @__PURE__ */ c(
-    "button",
-    {
-      type: "button",
-      onClick: () => o.toggleSorting(),
-      "aria-label": a(t),
-      className: s(
-        // -ms-2 px-2 keeps the label flush at the cell padding while giving the
-        // toggle a comfortable click target; the hover/press tint lives on the
-        // `<th>` itself (see data-table.tsx), not this inner button, and uses
-        // the kit-wide 3px focus ring (Figma stroke/width-3 + radius/radius-4).
-        "-ms-2 inline-flex h-8 cursor-pointer select-none items-center gap-[var(--ui-table-header-gap)] rounded-sm px-2 text-sm font-semibold focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0",
-        i
-      ),
-      ...n,
-      children: [
-        /* @__PURE__ */ e("span", { children: t }),
-        r === "asc" ? /* @__PURE__ */ e(l, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : r === "desc" ? /* @__PURE__ */ e(u, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : /* @__PURE__ */ e(d, { className: "text-[var(--ui-table-header-sort-icon-color-inactive)]" })
-      ]
-    }
-  );
+import { cn as e } from "../../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { ArrowDownIcon as r, ArrowUpIcon as i, ArrowsDownUpIcon as a } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/data-table/data-table-column-header.tsx
+function o({ column: o, title: s, sortLabel: c = (e) => `Sort by ${e}`, className: l, ...u }) {
+	if (!o.getCanSort()) return /* @__PURE__ */ t("div", {
+		className: e(l),
+		children: s
+	});
+	let d = o.getIsSorted();
+	return /* @__PURE__ */ n("button", {
+		type: "button",
+		onClick: () => o.toggleSorting(),
+		"aria-label": c(s),
+		className: e("-ms-2 inline-flex h-8 cursor-pointer select-none items-center gap-[var(--ui-table-header-gap)] rounded-sm px-2 text-sm font-semibold focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0", l),
+		...u,
+		children: [/* @__PURE__ */ t("span", { children: s }), d === "asc" ? /* @__PURE__ */ t(i, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : d === "desc" ? /* @__PURE__ */ t(r, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : /* @__PURE__ */ t(a, { className: "text-[var(--ui-table-header-sort-icon-color-inactive)]" })]
+	});
 }
-export {
-  p as DataTableColumnHeader
-};
-//# sourceMappingURL=data-table-column-header.js.map
+//#endregion
+export { o as DataTableColumnHeader };
+
+//# sourceMappingURL=data-table-column-header.js.map

package/dist/components/ui/data-table/data-table-column-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/ui/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Column } from '@tanstack/react-table';\nimport {\n  ArrowDownIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  column: Column<TData, TValue>;\n  title: string;\n  /**\n   * Builds the accessible label of the sort toggle from the column title.\n   * Override to localize.\n   */\n  sortLabel?: (title: string) => string;\n}\n\n// Single-click sortable column header — matches the Table primitive's sortable\n// `TableHead`: one click toggles the sort (ascending → descending → unsorted) via\n// TanStack's `column.toggleSorting()`. The trailing icon shows the state with the\n// same `--ui-table-header-sort-icon-*` tokens — an up arrow (ascending) or down\n// arrow (descending) in the active blue, or the muted up/down arrows when\n// unsorted. (Column hiding lives behind the settings column's cog trigger —\n// `DataTableViewOptions` inside a `TableSettingsCell` — not a per-header menu,\n// so sorting is a single click.)\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  sortLabel = (t) => `Sort by ${t}`,\n  className,\n  ...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  if (!column.getCanSort()) {\n    return <div className={cn(className)}>{title}</div>;\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => column.toggleSorting()}\n      aria-label={sortLabel(title)}\n      className={cn(\n        // -ms-2 px-2 keeps the label flush at the cell padding while giving the\n        // toggle a comfortable click target; the hover/press tint lives on the\n        // `<th>` itself (see data-table.tsx), not this inner button, and uses\n        // the kit-wide 3px focus ring (Figma stroke/width-3 + radius/radius-4).\n        '-ms-2 inline-flex h-8 cursor-pointer select-none items-center gap-[var(--ui-table-header-gap)] rounded-sm px-2 text-sm font-semibold focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <span>{title}</span>\n      {sorted === 'asc' ? (\n        <ArrowUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n      ) : sorted === 'desc' ? (\n        <ArrowDownIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n      ) : (\n        <ArrowsDownUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-inactive)]\" />\n      )}\n    </button>\n  );\n}\n"],"names":["DataTableColumnHeader","column","title","sortLabel","t","className","props","cn","sorted","jsxs","jsx","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon"],"mappings":";;;AA6BO,SAASA,EAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY,CAACC,MAAM,WAAWA,CAAC;AAAA,EAC/B,WAAAC;AAAA,EACA,GAAGC;AACL,GAA8C;AAC5C,MAAI,CAACL,EAAO;AACV,6BAAQ,OAAA,EAAI,WAAWM,EAAGF,CAAS,GAAI,UAAAH,GAAM;AAG/C,QAAMM,IAASP,EAAO,YAAA;AAEtB,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMR,EAAO,cAAA;AAAA,MACtB,cAAYE,EAAUD,CAAK;AAAA,MAC3B,WAAWK;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAM,UAAAR,EAAA,CAAM;AAAA,QACZM,MAAW,QACV,gBAAAE,EAACC,GAAA,EAAY,WAAU,wDAAuD,IAC5EH,MAAW,SACb,gBAAAE,EAACE,KAAc,WAAU,uDAAA,CAAuD,IAEhF,gBAAAF,EAACG,GAAA,EAAiB,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI7F;"}
+{"version":3,"file":"data-table-column-header.js","names":[],"sources":["../../../../src/components/ui/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Column } from '@tanstack/react-table';\nimport {\n  ArrowDownIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  column: Column<TData, TValue>;\n  title: string;\n  /**\n   * Builds the accessible label of the sort toggle from the column title.\n   * Override to localize.\n   */\n  sortLabel?: (title: string) => string;\n}\n\n// Single-click sortable column header — matches the Table primitive's sortable\n// `TableHead`: one click toggles the sort (ascending → descending → unsorted) via\n// TanStack's `column.toggleSorting()`. The trailing icon shows the state with the\n// same `--ui-table-header-sort-icon-*` tokens — an up arrow (ascending) or down\n// arrow (descending) in the active blue, or the muted up/down arrows when\n// unsorted. (Column hiding lives behind the settings column's cog trigger —\n// `DataTableViewOptions` inside a `TableSettingsCell` — not a per-header menu,\n// so sorting is a single click.)\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  sortLabel = (t) => `Sort by ${t}`,\n  className,\n  ...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  if (!column.getCanSort()) {\n    return <div className={cn(className)}>{title}</div>;\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => column.toggleSorting()}\n      aria-label={sortLabel(title)}\n      className={cn(\n        // -ms-2 px-2 keeps the label flush at the cell padding while giving the\n        // toggle a comfortable click target; the hover/press tint lives on the\n        // `<th>` itself (see data-table.tsx), not this inner button, and uses\n        // the kit-wide 3px focus ring (Figma stroke/width-3 + radius/radius-4).\n        '-ms-2 inline-flex h-8 cursor-pointer select-none items-center gap-[var(--ui-table-header-gap)] rounded-sm px-2 text-sm font-semibold focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <span>{title}</span>\n      {sorted === 'asc' ? (\n        <ArrowUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n      ) : sorted === 'desc' ? (\n        <ArrowDownIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n      ) : (\n        <ArrowsDownUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-inactive)]\" />\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;;AA6BA,SAAgB,EAAqC,EACnD,WACA,UACA,gBAAa,MAAM,WAAW,KAC9B,cACA,GAAG,KACyC;CAC5C,IAAI,CAAC,EAAO,WAAW,GACrB,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;EAAI,UAAA;CAAW,CAAA;CAGpD,IAAM,IAAS,EAAO,YAAY;CAElC,OACE,kBAAC,UAAD;EACE,MAAK;EACL,eAAe,EAAO,cAAc;EACpC,cAAY,EAAU,CAAK;EAC3B,WAAW,EAKT,+SACA,CACF;EACA,GAAI;EAZN,UAAA,CAcE,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,GAClB,MAAW,QACV,kBAAC,GAAD,EAAa,WAAU,uDAAwD,CAAA,IAC7E,MAAW,SACb,kBAAC,GAAD,EAAe,WAAU,uDAAwD,CAAA,IAEjF,kBAAC,GAAD,EAAkB,WAAU,yDAA0D,CAAA,CAElF;;AAEZ"}

package/dist/components/ui/data-table/data-table-expand-trigger.js

@@ -1,47 +1,24 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as c from "react";
-import { ChevronDownIcon as d } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as t } from "../../../lib/utils.js";
-function p({
-  row: e,
-  collapseLabel: o = "Collapse row",
-  expandLabel: n = "Expand row",
-  className: i,
-  ...l
-}, s) {
-  if (!e.getCanExpand()) return null;
-  const r = e.getIsExpanded();
-  return /* @__PURE__ */ a(
-    "button",
-    {
-      ref: s,
-      type: "button",
-      onClick: e.getToggleExpandedHandler(),
-      "aria-label": r ? o : n,
-      "aria-expanded": r,
-      className: t(
-        // Lives in a data cell, so it tints from the data-cell tokens; the focus
-        // ring matches the kit-wide 3px treatment (Figma stroke/width-3).
-        "inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
-        i
-      ),
-      ...l,
-      children: /* @__PURE__ */ a(
-        d,
-        {
-          className: t(
-            "transition-transform",
-            !r && "ltr:-rotate-90 rtl:rotate-90"
-          )
-        }
-      )
-    }
-  );
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { ChevronDownIcon as r } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/data-table/data-table-expand-trigger.tsx
+function i({ row: t, collapseLabel: i = "Collapse row", expandLabel: a = "Expand row", className: o, ...s }, c) {
+	if (!t.getCanExpand()) return null;
+	let l = t.getIsExpanded();
+	return /* @__PURE__ */ n("button", {
+		ref: c,
+		type: "button",
+		onClick: t.getToggleExpandedHandler(),
+		"aria-label": l ? i : a,
+		"aria-expanded": l,
+		className: e("inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0", o),
+		...s,
+		children: /* @__PURE__ */ n(r, { className: e("transition-transform", !l && "ltr:-rotate-90 rtl:rotate-90") })
+	});
 }
-const m = c.forwardRef(
-  p
-);
-export {
-  m as DataTableExpandTrigger
-};
-//# sourceMappingURL=data-table-expand-trigger.js.map
+var a = t.forwardRef(i);
+//#endregion
+export { a as DataTableExpandTrigger };
+
+//# sourceMappingURL=data-table-expand-trigger.js.map

package/dist/components/ui/data-table/data-table-expand-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-expand-trigger.js","sources":["../../../../src/components/ui/data-table/data-table-expand-trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Row } from '@tanstack/react-table';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableExpandTriggerProps<TData>\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** The row this trigger toggles. */\n  row: Row<TData>;\n  /** Accessible name while the row is expanded. Override to localize. */\n  collapseLabel?: string;\n  /** Accessible name while the row is collapsed. Override to localize. */\n  expandLabel?: string;\n}\n\n// A chevron toggle button wired to a row's expansion state, meant to live inside\n// a column's `cell` render function so the expand affordance sits in a real\n// column (like the Vue2 `type=\"expand\"` column) instead of requiring a\n// whole-row click. Reads the row's own `getCanExpand`/`getIsExpanded` and calls\n// `toggleExpanded()` — the underlying expand state model is unchanged. Renders\n// nothing when the row can't expand.\nfunction DataTableExpandTriggerImpl<TData>(\n  {\n    row,\n    collapseLabel = 'Collapse row',\n    expandLabel = 'Expand row',\n    className,\n    ...props\n  }: DataTableExpandTriggerProps<TData>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  if (!row.getCanExpand()) return null;\n\n  const expanded = row.getIsExpanded();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={row.getToggleExpandedHandler()}\n      aria-label={expanded ? collapseLabel : expandLabel}\n      aria-expanded={expanded}\n      className={cn(\n        // Lives in a data cell, so it tints from the data-cell tokens; the focus\n        // ring matches the kit-wide 3px treatment (Figma stroke/width-3).\n        'inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n        className={cn(\n          'transition-transform',\n          !expanded && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      />\n    </button>\n  );\n}\n\n// `forwardRef` erases the generic; re-cast so callers keep `DataTableExpandTrigger<TData>`.\nexport const DataTableExpandTrigger = React.forwardRef(\n  DataTableExpandTriggerImpl\n) as <TData>(\n  props: DataTableExpandTriggerProps<TData> & {\n    ref?: React.Ref<HTMLButtonElement>;\n  }\n) => React.ReactElement | null;\n"],"names":["DataTableExpandTriggerImpl","row","collapseLabel","expandLabel","className","props","ref","expanded","jsx","cn","ChevronDownIcon","DataTableExpandTrigger","React"],"mappings":";;;;AAsBA,SAASA,EACP;AAAA,EACE,KAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,MAAI,CAACL,EAAI,aAAA,EAAgB,QAAO;AAEhC,QAAMM,IAAWN,EAAI,cAAA;AAErB,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,SAASL,EAAI,yBAAA;AAAA,MACb,cAAYM,IAAWL,IAAgBC;AAAA,MACvC,iBAAeI;AAAA,MACf,WAAWE;AAAA;AAAA;AAAA,QAGT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACA,CAACF,KAAY;AAAA,UAAA;AAAA,QACf;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAGO,MAAMI,IAAyBC,EAAM;AAAA,EAC1CZ;AACF;"}
+{"version":3,"file":"data-table-expand-trigger.js","names":[],"sources":["../../../../src/components/ui/data-table/data-table-expand-trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Row } from '@tanstack/react-table';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableExpandTriggerProps<TData>\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** The row this trigger toggles. */\n  row: Row<TData>;\n  /** Accessible name while the row is expanded. Override to localize. */\n  collapseLabel?: string;\n  /** Accessible name while the row is collapsed. Override to localize. */\n  expandLabel?: string;\n}\n\n// A chevron toggle button wired to a row's expansion state, meant to live inside\n// a column's `cell` render function so the expand affordance sits in a real\n// column (like the Vue2 `type=\"expand\"` column) instead of requiring a\n// whole-row click. Reads the row's own `getCanExpand`/`getIsExpanded` and calls\n// `toggleExpanded()` — the underlying expand state model is unchanged. Renders\n// nothing when the row can't expand.\nfunction DataTableExpandTriggerImpl<TData>(\n  {\n    row,\n    collapseLabel = 'Collapse row',\n    expandLabel = 'Expand row',\n    className,\n    ...props\n  }: DataTableExpandTriggerProps<TData>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  if (!row.getCanExpand()) return null;\n\n  const expanded = row.getIsExpanded();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={row.getToggleExpandedHandler()}\n      aria-label={expanded ? collapseLabel : expandLabel}\n      aria-expanded={expanded}\n      className={cn(\n        // Lives in a data cell, so it tints from the data-cell tokens; the focus\n        // ring matches the kit-wide 3px treatment (Figma stroke/width-3).\n        'inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n        className={cn(\n          'transition-transform',\n          !expanded && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      />\n    </button>\n  );\n}\n\n// `forwardRef` erases the generic; re-cast so callers keep `DataTableExpandTrigger<TData>`.\nexport const DataTableExpandTrigger = React.forwardRef(\n  DataTableExpandTriggerImpl\n) as <TData>(\n  props: DataTableExpandTriggerProps<TData> & {\n    ref?: React.Ref<HTMLButtonElement>;\n  }\n) => React.ReactElement | null;\n"],"mappings":";;;;;AAsBA,SAAS,EACP,EACE,QACA,mBAAgB,gBAChB,iBAAc,cACd,cACA,GAAG,KAEL,GACA;CACA,IAAI,CAAC,EAAI,aAAa,GAAG,OAAO;CAEhC,IAAM,IAAW,EAAI,cAAc;CAEnC,OACE,kBAAC,UAAD;EACO;EACL,MAAK;EACL,SAAS,EAAI,yBAAyB;EACtC,cAAY,IAAW,IAAgB;EACvC,iBAAe;EACf,WAAW,EAGT,gXACA,CACF;EACA,GAAI;EAEJ,UAAA,kBAAC,GAAD,EACE,WAAW,EACT,wBACA,CAAC,KAAY,8BACf,EACD,CAAA;CACK,CAAA;AAEZ;AAGA,IAAa,IAAyB,EAAM,WAC1C,CACF"}