@eifi1/ui-kit 0.11.0 → 0.13.0

package/dist/components/calculator.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CalculatorLabels } from '../i18n/kit-labels.js';
+import { C as CalculatorLabels } from '../kit-labels-Mz8zZHIF.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -7,7 +7,6 @@ import './popover.js';
 import './chip.js';
 import 'lucide-react';
 import './field-sync.js';
-import './ui.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -19,6 +18,7 @@ import '../search/search-index.js';
 import './month-picker.js';
 import './page-contents.js';
 import './series-chart-labels.js';
+import './pie-chart-labels.js';
 import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
@@ -29,17 +29,28 @@ import './tile-radio.js';
 import './icon-picker.js';
 import './dialog-frame.js';
 import './modal.js';
-import './file-button.js';
+import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import '../feedback/feedback-attachment.js';
 import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
 import './confirm-dialog.js';
 import './floating-panel.js';
-import './copy-button.js';
 import './bulk-action-bar.js';
 import './list.js';
 import './breadcrumbs.js';
 import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
 
 /** Screen-reader names for the calculator panel's own controls — any part of the
  *  kit's `calculator` namespace. Once three optional keys of its own; widened, not

package/dist/components/calendar-heatmap.d.ts

@@ -87,6 +87,39 @@ interface CalendarHeatmapProps extends Omit<ComponentPropsWithoutRef<"div">, "on
     /** The scale's colour, as any CSS colour. Default `var(--brand)`; each step is this
      *  mixed into `--bg-surface`, so the ramp follows the theme. */
     color?: string;
+    /**
+     * A CONTINUOUS scale from `colorFrom` (the smallest value) to `colorTo` (the busiest
+     * day), instead of `levels` steps of `color` — keksdose's palette-store ramp,
+     * `seqLow` → `seqHigh`. Both are needed; `color` is then unused. Two `#rrggbb`
+     * colours are interpolated in JS, so the fill is a concrete hex and the day number's
+     * ink (in `"month"`) is MEASURED against it; anything else (a `var()`) is mixed with
+     * `color-mix()`. `levels` still sets `data-level` and the legend's swatch count.
+     */
+    colorFrom?: string;
+    colorTo?: string;
+    /**
+     * A fill of the caller's own for a day with a value: handed the value and the
+     * scale's `max`, returns any CSS colour. Wins over `color` and `colorFrom`/`colorTo`.
+     * Also paints the legend, at `max × level / levels`.
+     */
+    fill?: (value: number, max: number) => string;
+    /** The fill of a day with no value (or a value of 0). Default: a wash of the text
+     *  colour over the surface, which reads as a cell on both themes. */
+    emptyColor?: string;
+    /**
+     * Where the window ENDS — the day `maxDays` counts back from, and the last one drawn:
+     *
+     * - `"to"` (default): on `to`.
+     * - `"today"`: on today.
+     * - `"latest"`: on the last day that can carry a figure — today, or a later day that
+     *   actually has a value. A window running into the future (a report's "all" preset
+     *   ends a year ahead) then spends its cells on the days a person is looking for,
+     *   not on a year of empty ones.
+     * - a `"YYYY-MM-DD"`: on that day.
+     *
+     * Always kept inside `from`…`to`.
+     */
+    anchor?: "to" | "today" | "latest" | (string & {});
     /**
      * The most days to draw. A longer window keeps its LATEST `maxDays` and says how many
      * it left out (`labels.truncated`) rather than silently ending. Default: no cap.
@@ -101,6 +134,9 @@ interface CalendarHeatmapProps extends Omit<ComponentPropsWithoutRef<"div">, "on
     labels?: Partial<CalendarHeatmapLabels>;
     className?: string;
 }
+/** Where the window ends for an {@link CalendarHeatmapProps.anchor}, kept in `[from, to]`.
+ *  `latestData` is the latest ISO date carrying a value, or `""`. */
+declare function heatmapWindowEnd(from: string, to: string, anchor: string, latestData: string, today?: string): string;
 /** The step a value falls on: 0 for nothing, else 1…levels by its share of `max`. */
 declare function heatmapLevel(value: number, max: number, levels: number): number;
 /**
@@ -113,12 +149,14 @@ declare function heatmapLevel(value: number, max: number, levels: number): numbe
  * the other way round, mirrored in RTL — PageUp/PageDown move a month and Home/End go
  * to the window's first/last day. Each cell is named with its whole date AND its value,
  * because the colour is not something a screen reader can say, and carries
- * `data-day="YYYY-MM-DD"` as its identity for tests and for the host.
+ * `data-day="YYYY-MM-DD"` as its identity for tests and for the host. Note that in
+ * `"weeks"` the cells are in DOM order by WEEKDAY ROW (all Mondays, then all
+ * Tuesdays…), not by date — query by `data-day`, not by position.
  *
  * The tooltip is portalled (a year of squares always sits in a sideways scroller) and
  * `data-private` unless `sensitive={false}`. Cell size in `"weeks"` is the CSS variable
  * `--heatmap-cell` (default `0.75rem`): `style={{ "--heatmap-cell": "1rem" }}`.
  */
-declare function CalendarHeatmap({ data, from, to, layout, selected, onSelect, formatValue: formatValueProp, tooltip, sensitive, max: maxProp, levels, color, maxDays, legend, locale: localeProp, weekStartsOn, labels: labelsProp, className, "aria-label": ariaLabel, ...rest }: CalendarHeatmapProps): react.JSX.Element;
+declare function CalendarHeatmap({ data, from, to, layout, selected, onSelect, formatValue: formatValueProp, tooltip, sensitive, max: maxProp, levels, color, colorFrom, colorTo, fill: fillProp, emptyColor, anchor, maxDays, legend, locale: localeProp, weekStartsOn, labels: labelsProp, className, "aria-label": ariaLabel, ...rest }: CalendarHeatmapProps): react.JSX.Element;
 
-export { CalendarHeatmap, type CalendarHeatmapDatum, type CalendarHeatmapDay, type CalendarHeatmapLabels, type CalendarHeatmapProps, DEFAULT_CALENDAR_HEATMAP_LABELS, heatmapLevel };
+export { CalendarHeatmap, type CalendarHeatmapDatum, type CalendarHeatmapDay, type CalendarHeatmapLabels, type CalendarHeatmapProps, DEFAULT_CALENDAR_HEATMAP_LABELS, heatmapLevel, heatmapWindowEnd };

package/dist/components/calendar-heatmap.js

@@ -5,6 +5,8 @@ import { cn } from "../lib/cn.js";
 import { dirOf, horizontalStep } from "../lib/direction.js";
 import { addMonthsClamped, localeWeekStart, parseIsoDate, toLocalIso } from "../lib/dates.js";
 import { useKitLabels, useKitLocale, useKitWeekStart } from "../i18n/kit-labels.js";
+import { lerpHex, textOn } from "../theme/chart-palette.js";
+import { parseHex } from "../theme/color.js";
 import { Tooltip } from "./tooltip.js";
 const DEFAULT_CALENDAR_HEATMAP_LABELS = {
   grid: "Daily values",
@@ -21,6 +23,16 @@ const DAY_NAME_FORMAT = {
 };
 const EMPTY_FILL = "color-mix(in oklab, var(--text-primary) 8%, var(--bg-surface))";
 const weekdayIndex = (d, weekStart) => (d.getDay() - weekStart + 7) % 7;
+function heatmapWindowEnd(from, to, anchor, latestData, today = toLocalIso(/* @__PURE__ */ new Date())) {
+  let end;
+  if (anchor === "today") end = today;
+  else if (anchor === "latest") end = latestData > today ? latestData : today;
+  else if (anchor === "to" || !parseIsoDate(anchor)) end = to;
+  else end = anchor;
+  if (end > to) end = to;
+  if (end < from) end = from;
+  return end;
+}
 function heatmapLevel(value, max, levels) {
   if (!(value > 0) || !(max > 0) || levels < 1) return 0;
   return Math.min(levels, Math.max(1, Math.ceil(value / max * levels)));
@@ -46,6 +58,11 @@ function CalendarHeatmap({
   max: maxProp,
   levels = 4,
   color = "var(--brand)",
+  colorFrom,
+  colorTo,
+  fill: fillProp,
+  emptyColor,
+  anchor = "to",
   maxDays,
   legend = true,
   locale: localeProp,
@@ -66,9 +83,15 @@ function CalendarHeatmap({
     for (const p of data) m.set(p.date, (m.get(p.date) ?? 0) + p.value);
     return m;
   }, [data]);
+  const latestData = useMemo(() => {
+    let latest = "";
+    for (const [iso, v] of values) if (v !== 0 && iso > latest) latest = iso;
+    return latest;
+  }, [values]);
+  const windowEnd = heatmapWindowEnd(from, to, anchor, latestData);
   const { days, dropped } = useMemo(() => {
     const start = parseIsoDate(from);
-    const end = parseIsoDate(to);
+    const end = parseIsoDate(windowEnd);
     const list = [];
     if (!start || !end || end < start) return { days: list, dropped: 0 };
     const cursor = new Date(end);
@@ -80,7 +103,7 @@ function CalendarHeatmap({
     const first = list[0];
     const trimmed = first ? Math.round((first.getTime() - start.getTime()) / 864e5) : 0;
     return { days: list, dropped: Math.max(0, trimmed) };
-  }, [from, to, maxDays]);
+  }, [from, windowEnd, maxDays]);
   const firstIso = days.length ? toLocalIso(days[0]) : "";
   const lastIso = days.length ? toLocalIso(days[days.length - 1]) : "";
   const max = useMemo(() => {
@@ -182,18 +205,35 @@ function CalendarHeatmap({
     setActiveIso(iso);
   };
   const legendLevels = Array.from({ length: levels + 1 }, (_, l) => l);
+  const empty = emptyColor ?? EMPTY_FILL;
+  const continuous = colorFrom !== void 0 && colorTo !== void 0;
+  const hexRamp = continuous && parseHex(colorFrom) != null && parseHex(colorTo) != null;
+  const paint = (value, level) => {
+    if (level === 0) return { fill: empty, ink: "var(--text-primary)" };
+    if (fillProp || continuous) {
+      const t = max > 0 ? Math.min(1, Math.max(0, value / max)) : 1;
+      const fill = fillProp ? fillProp(value, max) : hexRamp ? lerpHex(colorFrom, colorTo, t) : `color-mix(in oklab, ${colorTo} ${Math.round(t * 100)}%, ${colorFrom})`;
+      const measured = textOn(fill);
+      return { fill, ink: measured === "currentColor" ? "var(--text-primary)" : measured };
+    }
+    const strong = levelPercent(level, levels) >= 45;
+    return {
+      fill: levelFill(level, levels, color),
+      ink: strong ? "var(--bg-surface)" : "var(--text-primary)"
+    };
+  };
+  const legendFill = (l) => paint((max > 0 ? max : 1) * l / levels, l).fill;
   const cell = (d, wrapClass, cellClass, withNumber) => {
     const iso = toLocalIso(d);
     const raw = values.get(iso);
     const value = raw ?? 0;
     const level = heatmapLevel(value, max, levels);
-    const fill = levelFill(level, levels, color);
+    const { fill, ink } = paint(value, level);
     const formattedDate = formatDay(d);
     const formattedValue = formatValue(value);
     const name = labels.day(formattedDate, formattedValue);
     const label = tooltip ? tooltip({ iso, date: d, value, hasData: raw !== void 0, level, formattedDate, formattedValue }) : name;
     const isSelected = selected === iso;
-    const strong = level > 0 && levelPercent(level, levels) >= 45;
     const shared = {
       role: "gridcell",
       "data-day": iso,
@@ -205,7 +245,7 @@ function CalendarHeatmap({
       onFocus: () => {
         if (iso !== activeIso) setActiveIso(iso);
       },
-      style: { background: fill, color: strong ? "var(--bg-surface)" : "var(--text-primary)" },
+      style: { background: fill, color: ink },
       className: cn(
         cellClass,
         isSelected && "ring-2 ring-[var(--text-primary)]",
@@ -279,7 +319,7 @@ function CalendarHeatmap({
         {
           "data-legend-level": l,
           className: "size-2.5 rounded-sm",
-          style: { background: levelFill(l, levels, color) }
+          style: { background: legendFill(l) }
         },
         l
       )),
@@ -290,6 +330,7 @@ function CalendarHeatmap({
 export {
   CalendarHeatmap,
   DEFAULT_CALENDAR_HEATMAP_LABELS,
-  heatmapLevel
+  heatmapLevel,
+  heatmapWindowEnd
 };
 //# sourceMappingURL=calendar-heatmap.js.map

package/dist/components/calendar-heatmap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/calendar-heatmap.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, horizontalStep } from \"../lib/direction\";\nimport { addMonthsClamped, localeWeekStart, parseIsoDate, toLocalIso } from \"../lib/dates\";\nimport { useKitLabels, useKitLocale, useKitWeekStart } from \"../i18n/kit-labels\";\nimport { Tooltip } from \"./tooltip\";\nimport type { WeekDay } from \"./mini-calendar\";\n\n/**\n * Every string the heatmap speaks — the `calendarHeatmap` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. Dates and\n * values arrive already formatted (in `locale`, and through `formatValue`), so the\n * functions only arrange them.\n */\nexport interface CalendarHeatmapLabels {\n  /** Accessible name of the grid. */\n  grid: string;\n  /**\n   * One day: its accessible name, and the tooltip unless `tooltip` is given. `date`\n   * is the whole date in `locale` (\"Monday, 14 September 2026\"), `value` the day's\n   * figure through `formatValue`.\n   */\n  day: (date: string, value: string) => string;\n  /** The two ends of the legend's scale. */\n  less: string;\n  more: string;\n  /** `maxDays` cut the window: how many of its earliest days are not drawn. */\n  truncated: (count: number) => string;\n}\n\n/** English defaults, exported as the `calendarHeatmap` namespace of `UiKitLabels`. */\nexport const DEFAULT_CALENDAR_HEATMAP_LABELS: CalendarHeatmapLabels = {\n  grid: \"Daily values\",\n  day: (date, value) => `${date}: ${value}`,\n  less: \"Less\",\n  more: \"More\",\n  truncated: (count) =>\n    `Showing the most recent days; ${count} earlier ${count === 1 ? \"day is\" : \"days are\"} not shown.`,\n};\n\n/** One day's figure. Several entries for one date are added up. */\nexport interface CalendarHeatmapDatum {\n  /** \"YYYY-MM-DD\". */\n  date: string;\n  value: number;\n}\n\n/** What `tooltip` is told about the day under the pointer. */\nexport interface CalendarHeatmapDay {\n  iso: string;\n  date: Date;\n  /** The day's figure; `0` when `data` has no entry for it (see `hasData`). */\n  value: number;\n  hasData: boolean;\n  /** `0` = empty … `levels` = the busiest. */\n  level: number;\n  /** The whole date in `locale`. */\n  formattedDate: string;\n  /** `value` through `formatValue`. */\n  formattedValue: string;\n}\n\n/**\n * `onSelect` is omitted from the `<div>` attributes for the reason `MiniCalendar` gives:\n * the DOM event of that name is a text-selection event, and this one answers with a date.\n */\nexport interface CalendarHeatmapProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  data: readonly CalendarHeatmapDatum[];\n  /** The window, inclusive, as \"YYYY-MM-DD\". */\n  from: string;\n  to: string;\n  /**\n   * `\"weeks\"` (default): the contribution-graph shape — one COLUMN per week, the\n   * weekdays down the side, month names along the top; a year fits in ~53 small\n   * squares and scrolls sideways where it does not. `\"month\"`: a 7-column calendar\n   * with day numbers in large square cells, for a single month on a phone (switch on\n   * `useMediaQuery` and narrow `from`/`to` to the month).\n   */\n  layout?: \"weeks\" | \"month\";\n  /** The day shown as selected (\"YYYY-MM-DD\"). */\n  selected?: string;\n  /** Makes each day a button: a click (or Enter/Space) selects it — a drill-down into\n   *  that day's rows, a day panel. Without it the days are focusable but inert. */\n  onSelect?: (iso: string) => void;\n  /** How a value is written in the tooltip and the day's name. Default: `Intl.NumberFormat`\n   *  in `locale`. Pass a currency formatter for money. */\n  formatValue?: (value: number) => string;\n  /** Tooltip content for a day. Default: `labels.day(date, value)`. */\n  tooltip?: (day: CalendarHeatmapDay) => ReactNode;\n  /**\n   * Tag each tooltip `data-private`, so the host's demo-mode rule blurs it (the\n   * attribute `Tooltip redact` and `StatTile sensitive` carry). ON by default: a heatmap\n   * is almost always the user's own figures, and a missing tag is silent — the grid\n   * looks anonymous and the bubble spells the amount out on hover.\n   */\n  sensitive?: boolean;\n  /** The value that reaches the top of the scale. Default: the largest value ON SCREEN,\n   *  so a peak outside the window does not wash the drawn days out to empty. */\n  max?: number;\n  /** How many non-empty intensity steps. Default 4. */\n  levels?: number;\n  /** The scale's colour, as any CSS colour. Default `var(--brand)`; each step is this\n   *  mixed into `--bg-surface`, so the ramp follows the theme. */\n  color?: string;\n  /**\n   * The most days to draw. A longer window keeps its LATEST `maxDays` and says how many\n   * it left out (`labels.truncated`) rather than silently ending. Default: no cap.\n   */\n  maxDays?: number;\n  /** Draw the Less … More legend. Default `true`. */\n  legend?: boolean;\n  /** BCP 47 tag for the dates, month and weekday names and numbers. */\n  locale?: string;\n  /** `0` = Sunday … `6` = Saturday. Default: the provider's, else the locale's. */\n  weekStartsOn?: WeekDay;\n  labels?: Partial<CalendarHeatmapLabels>;\n  className?: string;\n}\n\nconst DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {\n  weekday: \"long\",\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n};\n\n/** The empty day: a wash of the text colour, like `--bg-hover`, so it reads as a cell\n *  on both themes without claiming any value. */\nconst EMPTY_FILL = \"color-mix(in oklab, var(--text-primary) 8%, var(--bg-surface))\";\n\nconst weekdayIndex = (d: Date, weekStart: WeekDay) => (d.getDay() - weekStart + 7) % 7;\n\n/** The step a value falls on: 0 for nothing, else 1…levels by its share of `max`. */\nexport function heatmapLevel(value: number, max: number, levels: number): number {\n  if (!(value > 0) || !(max > 0) || levels < 1) return 0;\n  return Math.min(levels, Math.max(1, Math.ceil((value / max) * levels)));\n}\n\n/** How much of `color` a step mixes into the surface: 20% for the first step, 100% for\n *  the last — the floor keeps the smallest value visibly apart from an empty day. */\nfunction levelPercent(level: number, levels: number): number {\n  if (levels <= 1) return 100;\n  return Math.round(20 + (80 * (level - 1)) / (levels - 1));\n}\n\nfunction levelFill(level: number, levels: number, color: string): string {\n  if (level === 0) return EMPTY_FILL;\n  return `color-mix(in oklab, ${color} ${levelPercent(level, levels)}%, var(--bg-surface))`;\n}\n\n/**\n * Days as a grid of shaded squares — how much happened on each, at a glance\n * (a contribution graph, a spending calendar).\n *\n * **Every day is a cell you can reach.** The grid is a `role=\"grid\"` with ONE tab\n * stop (the roving tabindex, as in `MiniCalendar`); the arrows move by the grid's own\n * geometry — in `\"weeks\"` ↑/↓ are the previous/next day and ←/→ a week, in `\"month\"`\n * the other way round, mirrored in RTL — PageUp/PageDown move a month and Home/End go\n * to the window's first/last day. Each cell is named with its whole date AND its value,\n * because the colour is not something a screen reader can say, and carries\n * `data-day=\"YYYY-MM-DD\"` as its identity for tests and for the host.\n *\n * The tooltip is portalled (a year of squares always sits in a sideways scroller) and\n * `data-private` unless `sensitive={false}`. Cell size in `\"weeks\"` is the CSS variable\n * `--heatmap-cell` (default `0.75rem`): `style={{ \"--heatmap-cell\": \"1rem\" }}`.\n */\nexport function CalendarHeatmap({\n  data,\n  from,\n  to,\n  layout = \"weeks\",\n  selected,\n  onSelect,\n  formatValue: formatValueProp,\n  tooltip,\n  sensitive = true,\n  max: maxProp,\n  levels = 4,\n  color = \"var(--brand)\",\n  maxDays,\n  legend = true,\n  locale: localeProp,\n  weekStartsOn,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: CalendarHeatmapProps) {\n  const labels = useKitLabels(\"calendarHeatmap\", DEFAULT_CALENDAR_HEATMAP_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const providerWeekStart = useKitWeekStart();\n  const weekStart: WeekDay = weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale);\n  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const formatValue = formatValueProp ?? ((v: number) => numberFormat.format(v));\n\n  const values = useMemo(() => {\n    const m = new Map<string, number>();\n    for (const p of data) m.set(p.date, (m.get(p.date) ?? 0) + p.value);\n    return m;\n  }, [data]);\n\n  // The window, trimmed from the FRONT: the days a person looks for are the recent\n  // ones, and a cap that kept the oldest would end the calendar before today.\n  const { days, dropped } = useMemo(() => {\n    const start = parseIsoDate(from);\n    const end = parseIsoDate(to);\n    const list: Date[] = [];\n    if (!start || !end || end < start) return { days: list, dropped: 0 };\n    const cursor = new Date(end);\n    const cap = maxDays && maxDays > 0 ? maxDays : Infinity;\n    while (cursor >= start && list.length < cap) {\n      list.unshift(new Date(cursor));\n      cursor.setDate(cursor.getDate() - 1);\n    }\n    const first = list[0];\n    const trimmed = first ? Math.round((first.getTime() - start.getTime()) / 86_400_000) : 0;\n    return { days: list, dropped: Math.max(0, trimmed) };\n  }, [from, to, maxDays]);\n\n  const firstIso = days.length ? toLocalIso(days[0]) : \"\";\n  const lastIso = days.length ? toLocalIso(days[days.length - 1]) : \"\";\n\n  const max = useMemo(() => {\n    if (maxProp !== undefined) return maxProp;\n    let m = 0;\n    for (const d of days) m = Math.max(m, values.get(toLocalIso(d)) ?? 0);\n    return m;\n  }, [maxProp, days, values]);\n\n  const clampIso = (iso: string) => (iso < firstIso ? firstIso : iso > lastIso ? lastIso : iso);\n\n  // The roving tab stop: the selected day, else the latest one.\n  const [activeState, setActiveIso] = useState(() => selected || lastIso);\n  const [lastSelected, setLastSelected] = useState(selected);\n  if (lastSelected !== selected) {\n    setLastSelected(selected);\n    if (selected) setActiveIso(selected);\n  }\n  const activeIso = days.length ? clampIso(activeState || lastIso) : \"\";\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const scrollerRef = useRef<HTMLDivElement>(null);\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const iso = pendingFocus.current;\n    if (!iso) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-day=\"${iso}\"]`)?.focus();\n  });\n\n  // Open the sideways scroller on the latest weeks, not the oldest. In RTL the end is\n  // on the left, where browsers count scrollLeft down from 0.\n  //\n  // And KEEP it there while the box changes size — a sidebar or a contents rail that\n  // appears after mount narrows the scroller, which leaves scrollLeft where it was and\n  // so shows older weeks than it opened on. The pin holds only while the view sits at\n  // the end: a user who scrolls back through the year unpins it, and a resize then\n  // leaves their position alone. (Scrolling back to the end pins it again.)\n  useLayoutEffect(() => {\n    const el = scrollerRef.current;\n    if (!el || layout !== \"weeks\") return;\n    const toEnd = () => {\n      el.scrollLeft = dirOf(el) === \"rtl\" ? -el.scrollWidth : el.scrollWidth;\n    };\n    toEnd();\n    if (typeof ResizeObserver === \"undefined\") return;\n    // |scrollLeft| covers both directions: 0 → max in LTR, 0 → -max in RTL.\n    let pinned = true;\n    const onScroll = () => {\n      pinned = Math.abs(el.scrollLeft) >= el.scrollWidth - el.clientWidth - 1;\n    };\n    const ro = new ResizeObserver(() => {\n      if (pinned) toEnd();\n    });\n    el.addEventListener(\"scroll\", onScroll, { passive: true });\n    ro.observe(el);\n    return () => {\n      ro.disconnect();\n      el.removeEventListener(\"scroll\", onScroll);\n    };\n  }, [layout, firstIso, lastIso]);\n\n  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);\n\n  const weekdayLabels = useMemo(() => {\n    const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(ref);\n      d.setDate(ref.getDate() + i);\n      return {\n        short: d.toLocaleDateString(locale, { weekday: \"short\" }),\n        long: d.toLocaleDateString(locale, { weekday: \"long\" }),\n      };\n    });\n  }, [locale, weekStart]);\n\n  const lead = days.length ? weekdayIndex(days[0], weekStart) : 0;\n  const weekCount = Math.ceil((lead + days.length) / 7);\n  /** The day at position `i` of the week-aligned sequence (blanks before the first). */\n  const dayAt = (i: number): Date | null => (i >= lead && i - lead < days.length ? days[i - lead] : null);\n\n  const move = (e: KeyboardEvent<HTMLElement>) => {\n    const current = parseIsoDate(activeIso);\n    if (!current) return;\n    const next = new Date(current);\n    const step = horizontalStep(e.key, e.currentTarget);\n    // In \"weeks\" a row is a weekday, so sideways is a week and up/down is a day.\n    const across = layout === \"weeks\" ? 7 : 1;\n    const down = layout === \"weeks\" ? 1 : 7;\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        next.setDate(next.getDate() + step * across);\n        break;\n      case \"ArrowUp\":\n        next.setDate(next.getDate() - down);\n        break;\n      case \"ArrowDown\":\n        next.setDate(next.getDate() + down);\n        break;\n      case \"PageUp\":\n        next.setTime(addMonthsClamped(next, -1).getTime());\n        break;\n      case \"PageDown\":\n        next.setTime(addMonthsClamped(next, 1).getTime());\n        break;\n      case \"Home\":\n        next.setTime(days[0].getTime());\n        break;\n      case \"End\":\n        next.setTime(days[days.length - 1].getTime());\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    const iso = clampIso(toLocalIso(next));\n    if (iso === activeIso) return;\n    pendingFocus.current = iso;\n    setActiveIso(iso);\n  };\n\n  const legendLevels = Array.from({ length: levels + 1 }, (_, l) => l);\n\n  const cell = (d: Date, wrapClass: string, cellClass: string, withNumber: boolean) => {\n    const iso = toLocalIso(d);\n    const raw = values.get(iso);\n    const value = raw ?? 0;\n    const level = heatmapLevel(value, max, levels);\n    const fill = levelFill(level, levels, color);\n    const formattedDate = formatDay(d);\n    const formattedValue = formatValue(value);\n    const name = labels.day(formattedDate, formattedValue);\n    const label = tooltip\n      ? tooltip({ iso, date: d, value, hasData: raw !== undefined, level, formattedDate, formattedValue })\n      : name;\n    const isSelected = selected === iso;\n    // Light text once the fill is the stronger half of the mix — `--bg-surface` is the\n    // colour the scale is mixed INTO, so it is the one that contrasts with its far end\n    // on either theme.\n    const strong = level > 0 && levelPercent(level, levels) >= 45;\n    const shared = {\n      role: \"gridcell\",\n      \"data-day\": iso,\n      \"data-level\": level,\n      tabIndex: iso === activeIso ? 0 : -1,\n      \"aria-label\": name,\n      \"aria-selected\": onSelect ? isSelected : undefined,\n      onKeyDown: move,\n      onFocus: () => {\n        if (iso !== activeIso) setActiveIso(iso);\n      },\n      style: { background: fill, color: strong ? \"var(--bg-surface)\" : \"var(--text-primary)\" },\n      className: cn(\n        cellClass,\n        isSelected && \"ring-2 ring-[var(--text-primary)]\",\n        onSelect && \"cursor-pointer hover:ring-1 hover:ring-[var(--brand)]\",\n      ),\n    } as const;\n    const inner = withNumber ? (\n      <span aria-hidden className=\"text-[11px] leading-none tabular-nums\">\n        {numberFormat.format(d.getDate())}\n      </span>\n    ) : null;\n    return (\n      <Tooltip key={iso} label={label} portal redact={sensitive} role=\"none\" className={wrapClass}>\n        {onSelect ? (\n          <button type=\"button\" {...shared} onClick={() => onSelect(iso)}>\n            {inner}\n          </button>\n        ) : (\n          <div {...shared}>{inner}</div>\n        )}\n      </Tooltip>\n    );\n  };\n\n  const gridName = ariaLabel ?? labels.grid;\n  let body: ReactNode;\n  if (layout === \"weeks\") {\n    const columns = { gridTemplateColumns: `var(--heatmap-label, 2rem) repeat(${weekCount}, var(--heatmap-cell, 0.75rem))` } as CSSProperties;\n    const cellSize = \"size-[var(--heatmap-cell,0.75rem)]\";\n    // A month's name over the first column that holds its 1st — or over the first\n    // column, when the window opens far enough before the next month for it to fit.\n    const monthLabels = Array.from({ length: weekCount }, (_, w) => {\n      for (let r = 0; r < 7; r++) {\n        const d = dayAt(w * 7 + r);\n        if (d && (d.getDate() === 1 || (w === 0 && r === lead && d.getDate() <= 14))) {\n          return d.toLocaleDateString(locale, { month: \"short\" });\n        }\n      }\n      return \"\";\n    });\n    body = (\n      <div ref={scrollerRef} className=\"overflow-x-auto pb-1\">\n        <div ref={gridRef} role=\"grid\" aria-label={gridName} className=\"inline-grid gap-0.5\">\n          {/* Decoration: every cell's name already carries its month. */}\n          <div aria-hidden className=\"grid gap-0.5 text-[10px] leading-3 text-[var(--text-muted)]\" style={columns}>\n            <span />\n            {monthLabels.map((m, w) => (\n              <span key={w} className=\"overflow-visible whitespace-nowrap\">\n                {m}\n              </span>\n            ))}\n          </div>\n          {Array.from({ length: 7 }, (_, r) => (\n            <div key={r} role=\"row\" className=\"grid gap-0.5\" style={columns}>\n              <div\n                role=\"rowheader\"\n                aria-label={weekdayLabels[r].long}\n                className=\"overflow-hidden pe-1 text-[10px] leading-3 text-[var(--text-muted)]\"\n              >\n                {/* Every other weekday, as a contribution graph does: seven labels\n                    at this size are a smear. The name is there for all seven. */}\n                {r % 2 === 1 ? weekdayLabels[r].short : \"\"}\n              </div>\n              {Array.from({ length: weekCount }, (_, w) => {\n                const d = dayAt(w * 7 + r);\n                return d ? (\n                  cell(d, cellSize, cn(cellSize, \"block rounded-sm\"), false)\n                ) : (\n                  <div key={`pad-${w}`} role=\"gridcell\" className={cellSize} />\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  } else {\n    const rows = Array.from({ length: weekCount }, (_, w) => w);\n    body = (\n      <div ref={gridRef} role=\"grid\" aria-label={gridName} className=\"grid gap-1\">\n        <div role=\"row\" className=\"grid grid-cols-7 gap-1\">\n          {weekdayLabels.map((w, i) => (\n            <div\n              key={i}\n              role=\"columnheader\"\n              aria-label={w.long}\n              className=\"pb-0.5 text-center text-[10px] uppercase tracking-wide text-[var(--text-muted)]\"\n            >\n              {w.short}\n            </div>\n          ))}\n        </div>\n        {rows.map((w) => (\n          <div key={w} role=\"row\" className=\"grid grid-cols-7 gap-1\">\n            {Array.from({ length: 7 }, (_, c) => {\n              const d = dayAt(w * 7 + c);\n              return d ? (\n                cell(d, \"aspect-square w-full\", \"flex h-full w-full items-center justify-center rounded\", true)\n              ) : (\n                <div key={`pad-${c}`} role=\"gridcell\" className=\"aspect-square\" />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cn(\"min-w-0\", className)}>\n      {dropped > 0 && (\n        <div className=\"mb-2 text-xs text-[var(--text-muted)]\">{labels.truncated(dropped)}</div>\n      )}\n      {body}\n      {legend && (\n        <div aria-hidden className=\"mt-2 flex items-center justify-end gap-1 text-[10px] text-[var(--text-muted)]\">\n          <span className=\"me-0.5\">{labels.less}</span>\n          {legendLevels.map((l) => (\n            <span\n              key={l}\n              data-legend-level={l}\n              className=\"size-2.5 rounded-sm\"\n              style={{ background: levelFill(l, levels, color) }}\n            />\n          ))}\n          <span className=\"ms-0.5\">{labels.more}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["_"]}
+{"version":3,"sources":["../../src/components/calendar-heatmap.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, horizontalStep } from \"../lib/direction\";\nimport { addMonthsClamped, localeWeekStart, parseIsoDate, toLocalIso } from \"../lib/dates\";\nimport { useKitLabels, useKitLocale, useKitWeekStart } from \"../i18n/kit-labels\";\nimport { lerpHex, textOn } from \"../theme/chart-palette\";\nimport { parseHex } from \"../theme/color\";\nimport { Tooltip } from \"./tooltip\";\nimport type { WeekDay } from \"./mini-calendar\";\n\n/**\n * Every string the heatmap speaks — the `calendarHeatmap` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. Dates and\n * values arrive already formatted (in `locale`, and through `formatValue`), so the\n * functions only arrange them.\n */\nexport interface CalendarHeatmapLabels {\n  /** Accessible name of the grid. */\n  grid: string;\n  /**\n   * One day: its accessible name, and the tooltip unless `tooltip` is given. `date`\n   * is the whole date in `locale` (\"Monday, 14 September 2026\"), `value` the day's\n   * figure through `formatValue`.\n   */\n  day: (date: string, value: string) => string;\n  /** The two ends of the legend's scale. */\n  less: string;\n  more: string;\n  /** `maxDays` cut the window: how many of its earliest days are not drawn. */\n  truncated: (count: number) => string;\n}\n\n/** English defaults, exported as the `calendarHeatmap` namespace of `UiKitLabels`. */\nexport const DEFAULT_CALENDAR_HEATMAP_LABELS: CalendarHeatmapLabels = {\n  grid: \"Daily values\",\n  day: (date, value) => `${date}: ${value}`,\n  less: \"Less\",\n  more: \"More\",\n  truncated: (count) =>\n    `Showing the most recent days; ${count} earlier ${count === 1 ? \"day is\" : \"days are\"} not shown.`,\n};\n\n/** One day's figure. Several entries for one date are added up. */\nexport interface CalendarHeatmapDatum {\n  /** \"YYYY-MM-DD\". */\n  date: string;\n  value: number;\n}\n\n/** What `tooltip` is told about the day under the pointer. */\nexport interface CalendarHeatmapDay {\n  iso: string;\n  date: Date;\n  /** The day's figure; `0` when `data` has no entry for it (see `hasData`). */\n  value: number;\n  hasData: boolean;\n  /** `0` = empty … `levels` = the busiest. */\n  level: number;\n  /** The whole date in `locale`. */\n  formattedDate: string;\n  /** `value` through `formatValue`. */\n  formattedValue: string;\n}\n\n/**\n * `onSelect` is omitted from the `<div>` attributes for the reason `MiniCalendar` gives:\n * the DOM event of that name is a text-selection event, and this one answers with a date.\n */\nexport interface CalendarHeatmapProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  data: readonly CalendarHeatmapDatum[];\n  /** The window, inclusive, as \"YYYY-MM-DD\". */\n  from: string;\n  to: string;\n  /**\n   * `\"weeks\"` (default): the contribution-graph shape — one COLUMN per week, the\n   * weekdays down the side, month names along the top; a year fits in ~53 small\n   * squares and scrolls sideways where it does not. `\"month\"`: a 7-column calendar\n   * with day numbers in large square cells, for a single month on a phone (switch on\n   * `useMediaQuery` and narrow `from`/`to` to the month).\n   */\n  layout?: \"weeks\" | \"month\";\n  /** The day shown as selected (\"YYYY-MM-DD\"). */\n  selected?: string;\n  /** Makes each day a button: a click (or Enter/Space) selects it — a drill-down into\n   *  that day's rows, a day panel. Without it the days are focusable but inert. */\n  onSelect?: (iso: string) => void;\n  /** How a value is written in the tooltip and the day's name. Default: `Intl.NumberFormat`\n   *  in `locale`. Pass a currency formatter for money. */\n  formatValue?: (value: number) => string;\n  /** Tooltip content for a day. Default: `labels.day(date, value)`. */\n  tooltip?: (day: CalendarHeatmapDay) => ReactNode;\n  /**\n   * Tag each tooltip `data-private`, so the host's demo-mode rule blurs it (the\n   * attribute `Tooltip redact` and `StatTile sensitive` carry). ON by default: a heatmap\n   * is almost always the user's own figures, and a missing tag is silent — the grid\n   * looks anonymous and the bubble spells the amount out on hover.\n   */\n  sensitive?: boolean;\n  /** The value that reaches the top of the scale. Default: the largest value ON SCREEN,\n   *  so a peak outside the window does not wash the drawn days out to empty. */\n  max?: number;\n  /** How many non-empty intensity steps. Default 4. */\n  levels?: number;\n  /** The scale's colour, as any CSS colour. Default `var(--brand)`; each step is this\n   *  mixed into `--bg-surface`, so the ramp follows the theme. */\n  color?: string;\n  /**\n   * A CONTINUOUS scale from `colorFrom` (the smallest value) to `colorTo` (the busiest\n   * day), instead of `levels` steps of `color` — keksdose's palette-store ramp,\n   * `seqLow` → `seqHigh`. Both are needed; `color` is then unused. Two `#rrggbb`\n   * colours are interpolated in JS, so the fill is a concrete hex and the day number's\n   * ink (in `\"month\"`) is MEASURED against it; anything else (a `var()`) is mixed with\n   * `color-mix()`. `levels` still sets `data-level` and the legend's swatch count.\n   */\n  colorFrom?: string;\n  colorTo?: string;\n  /**\n   * A fill of the caller's own for a day with a value: handed the value and the\n   * scale's `max`, returns any CSS colour. Wins over `color` and `colorFrom`/`colorTo`.\n   * Also paints the legend, at `max × level / levels`.\n   */\n  fill?: (value: number, max: number) => string;\n  /** The fill of a day with no value (or a value of 0). Default: a wash of the text\n   *  colour over the surface, which reads as a cell on both themes. */\n  emptyColor?: string;\n  /**\n   * Where the window ENDS — the day `maxDays` counts back from, and the last one drawn:\n   *\n   * - `\"to\"` (default): on `to`.\n   * - `\"today\"`: on today.\n   * - `\"latest\"`: on the last day that can carry a figure — today, or a later day that\n   *   actually has a value. A window running into the future (a report's \"all\" preset\n   *   ends a year ahead) then spends its cells on the days a person is looking for,\n   *   not on a year of empty ones.\n   * - a `\"YYYY-MM-DD\"`: on that day.\n   *\n   * Always kept inside `from`…`to`.\n   */\n  anchor?: \"to\" | \"today\" | \"latest\" | (string & {});\n  /**\n   * The most days to draw. A longer window keeps its LATEST `maxDays` and says how many\n   * it left out (`labels.truncated`) rather than silently ending. Default: no cap.\n   */\n  maxDays?: number;\n  /** Draw the Less … More legend. Default `true`. */\n  legend?: boolean;\n  /** BCP 47 tag for the dates, month and weekday names and numbers. */\n  locale?: string;\n  /** `0` = Sunday … `6` = Saturday. Default: the provider's, else the locale's. */\n  weekStartsOn?: WeekDay;\n  labels?: Partial<CalendarHeatmapLabels>;\n  className?: string;\n}\n\nconst DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {\n  weekday: \"long\",\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n};\n\n/** The empty day: a wash of the text colour, like `--bg-hover`, so it reads as a cell\n *  on both themes without claiming any value. */\nconst EMPTY_FILL = \"color-mix(in oklab, var(--text-primary) 8%, var(--bg-surface))\";\n\nconst weekdayIndex = (d: Date, weekStart: WeekDay) => (d.getDay() - weekStart + 7) % 7;\n\n/** Where the window ends for an {@link CalendarHeatmapProps.anchor}, kept in `[from, to]`.\n *  `latestData` is the latest ISO date carrying a value, or `\"\"`. */\nexport function heatmapWindowEnd(\n  from: string,\n  to: string,\n  anchor: string,\n  latestData: string,\n  today: string = toLocalIso(new Date()),\n): string {\n  let end: string;\n  if (anchor === \"today\") end = today;\n  else if (anchor === \"latest\") end = latestData > today ? latestData : today;\n  else if (anchor === \"to\" || !parseIsoDate(anchor)) end = to;\n  else end = anchor;\n  // ISO dates sort as strings, so the clamp is plain comparison.\n  if (end > to) end = to;\n  if (end < from) end = from;\n  return end;\n}\n\n/** The step a value falls on: 0 for nothing, else 1…levels by its share of `max`. */\nexport function heatmapLevel(value: number, max: number, levels: number): number {\n  if (!(value > 0) || !(max > 0) || levels < 1) return 0;\n  return Math.min(levels, Math.max(1, Math.ceil((value / max) * levels)));\n}\n\n/** How much of `color` a step mixes into the surface: 20% for the first step, 100% for\n *  the last — the floor keeps the smallest value visibly apart from an empty day. */\nfunction levelPercent(level: number, levels: number): number {\n  if (levels <= 1) return 100;\n  return Math.round(20 + (80 * (level - 1)) / (levels - 1));\n}\n\nfunction levelFill(level: number, levels: number, color: string): string {\n  if (level === 0) return EMPTY_FILL;\n  return `color-mix(in oklab, ${color} ${levelPercent(level, levels)}%, var(--bg-surface))`;\n}\n\n/**\n * Days as a grid of shaded squares — how much happened on each, at a glance\n * (a contribution graph, a spending calendar).\n *\n * **Every day is a cell you can reach.** The grid is a `role=\"grid\"` with ONE tab\n * stop (the roving tabindex, as in `MiniCalendar`); the arrows move by the grid's own\n * geometry — in `\"weeks\"` ↑/↓ are the previous/next day and ←/→ a week, in `\"month\"`\n * the other way round, mirrored in RTL — PageUp/PageDown move a month and Home/End go\n * to the window's first/last day. Each cell is named with its whole date AND its value,\n * because the colour is not something a screen reader can say, and carries\n * `data-day=\"YYYY-MM-DD\"` as its identity for tests and for the host. Note that in\n * `\"weeks\"` the cells are in DOM order by WEEKDAY ROW (all Mondays, then all\n * Tuesdays…), not by date — query by `data-day`, not by position.\n *\n * The tooltip is portalled (a year of squares always sits in a sideways scroller) and\n * `data-private` unless `sensitive={false}`. Cell size in `\"weeks\"` is the CSS variable\n * `--heatmap-cell` (default `0.75rem`): `style={{ \"--heatmap-cell\": \"1rem\" }}`.\n */\nexport function CalendarHeatmap({\n  data,\n  from,\n  to,\n  layout = \"weeks\",\n  selected,\n  onSelect,\n  formatValue: formatValueProp,\n  tooltip,\n  sensitive = true,\n  max: maxProp,\n  levels = 4,\n  color = \"var(--brand)\",\n  colorFrom,\n  colorTo,\n  fill: fillProp,\n  emptyColor,\n  anchor = \"to\",\n  maxDays,\n  legend = true,\n  locale: localeProp,\n  weekStartsOn,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: CalendarHeatmapProps) {\n  const labels = useKitLabels(\"calendarHeatmap\", DEFAULT_CALENDAR_HEATMAP_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const providerWeekStart = useKitWeekStart();\n  const weekStart: WeekDay = weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale);\n  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const formatValue = formatValueProp ?? ((v: number) => numberFormat.format(v));\n\n  const values = useMemo(() => {\n    const m = new Map<string, number>();\n    for (const p of data) m.set(p.date, (m.get(p.date) ?? 0) + p.value);\n    return m;\n  }, [data]);\n\n  // The window, trimmed from the FRONT: the days a person looks for are the recent\n  // ones, and a cap that kept the oldest would end the calendar before today.\n  const latestData = useMemo(() => {\n    let latest = \"\";\n    for (const [iso, v] of values) if (v !== 0 && iso > latest) latest = iso;\n    return latest;\n  }, [values]);\n  const windowEnd = heatmapWindowEnd(from, to, anchor, latestData);\n\n  const { days, dropped } = useMemo(() => {\n    const start = parseIsoDate(from);\n    const end = parseIsoDate(windowEnd);\n    const list: Date[] = [];\n    if (!start || !end || end < start) return { days: list, dropped: 0 };\n    const cursor = new Date(end);\n    const cap = maxDays && maxDays > 0 ? maxDays : Infinity;\n    while (cursor >= start && list.length < cap) {\n      list.unshift(new Date(cursor));\n      cursor.setDate(cursor.getDate() - 1);\n    }\n    const first = list[0];\n    const trimmed = first ? Math.round((first.getTime() - start.getTime()) / 86_400_000) : 0;\n    return { days: list, dropped: Math.max(0, trimmed) };\n  }, [from, windowEnd, maxDays]);\n\n  const firstIso = days.length ? toLocalIso(days[0]) : \"\";\n  const lastIso = days.length ? toLocalIso(days[days.length - 1]) : \"\";\n\n  const max = useMemo(() => {\n    if (maxProp !== undefined) return maxProp;\n    let m = 0;\n    for (const d of days) m = Math.max(m, values.get(toLocalIso(d)) ?? 0);\n    return m;\n  }, [maxProp, days, values]);\n\n  const clampIso = (iso: string) => (iso < firstIso ? firstIso : iso > lastIso ? lastIso : iso);\n\n  // The roving tab stop: the selected day, else the latest one.\n  const [activeState, setActiveIso] = useState(() => selected || lastIso);\n  const [lastSelected, setLastSelected] = useState(selected);\n  if (lastSelected !== selected) {\n    setLastSelected(selected);\n    if (selected) setActiveIso(selected);\n  }\n  const activeIso = days.length ? clampIso(activeState || lastIso) : \"\";\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const scrollerRef = useRef<HTMLDivElement>(null);\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const iso = pendingFocus.current;\n    if (!iso) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-day=\"${iso}\"]`)?.focus();\n  });\n\n  // Open the sideways scroller on the latest weeks, not the oldest. In RTL the end is\n  // on the left, where browsers count scrollLeft down from 0.\n  //\n  // And KEEP it there while the box changes size — a sidebar or a contents rail that\n  // appears after mount narrows the scroller, which leaves scrollLeft where it was and\n  // so shows older weeks than it opened on. The pin holds only while the view sits at\n  // the end: a user who scrolls back through the year unpins it, and a resize then\n  // leaves their position alone. (Scrolling back to the end pins it again.)\n  useLayoutEffect(() => {\n    const el = scrollerRef.current;\n    if (!el || layout !== \"weeks\") return;\n    const toEnd = () => {\n      el.scrollLeft = dirOf(el) === \"rtl\" ? -el.scrollWidth : el.scrollWidth;\n    };\n    toEnd();\n    if (typeof ResizeObserver === \"undefined\") return;\n    // |scrollLeft| covers both directions: 0 → max in LTR, 0 → -max in RTL.\n    let pinned = true;\n    const onScroll = () => {\n      pinned = Math.abs(el.scrollLeft) >= el.scrollWidth - el.clientWidth - 1;\n    };\n    const ro = new ResizeObserver(() => {\n      if (pinned) toEnd();\n    });\n    el.addEventListener(\"scroll\", onScroll, { passive: true });\n    ro.observe(el);\n    return () => {\n      ro.disconnect();\n      el.removeEventListener(\"scroll\", onScroll);\n    };\n  }, [layout, firstIso, lastIso]);\n\n  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);\n\n  const weekdayLabels = useMemo(() => {\n    const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(ref);\n      d.setDate(ref.getDate() + i);\n      return {\n        short: d.toLocaleDateString(locale, { weekday: \"short\" }),\n        long: d.toLocaleDateString(locale, { weekday: \"long\" }),\n      };\n    });\n  }, [locale, weekStart]);\n\n  const lead = days.length ? weekdayIndex(days[0], weekStart) : 0;\n  const weekCount = Math.ceil((lead + days.length) / 7);\n  /** The day at position `i` of the week-aligned sequence (blanks before the first). */\n  const dayAt = (i: number): Date | null => (i >= lead && i - lead < days.length ? days[i - lead] : null);\n\n  const move = (e: KeyboardEvent<HTMLElement>) => {\n    const current = parseIsoDate(activeIso);\n    if (!current) return;\n    const next = new Date(current);\n    const step = horizontalStep(e.key, e.currentTarget);\n    // In \"weeks\" a row is a weekday, so sideways is a week and up/down is a day.\n    const across = layout === \"weeks\" ? 7 : 1;\n    const down = layout === \"weeks\" ? 1 : 7;\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        next.setDate(next.getDate() + step * across);\n        break;\n      case \"ArrowUp\":\n        next.setDate(next.getDate() - down);\n        break;\n      case \"ArrowDown\":\n        next.setDate(next.getDate() + down);\n        break;\n      case \"PageUp\":\n        next.setTime(addMonthsClamped(next, -1).getTime());\n        break;\n      case \"PageDown\":\n        next.setTime(addMonthsClamped(next, 1).getTime());\n        break;\n      case \"Home\":\n        next.setTime(days[0].getTime());\n        break;\n      case \"End\":\n        next.setTime(days[days.length - 1].getTime());\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    const iso = clampIso(toLocalIso(next));\n    if (iso === activeIso) return;\n    pendingFocus.current = iso;\n    setActiveIso(iso);\n  };\n\n  const legendLevels = Array.from({ length: levels + 1 }, (_, l) => l);\n  const empty = emptyColor ?? EMPTY_FILL;\n  const continuous = colorFrom !== undefined && colorTo !== undefined;\n  const hexRamp = continuous && parseHex(colorFrom) != null && parseHex(colorTo) != null;\n\n  /** A day's fill, and the ink its number is set in (`\"month\"`). */\n  const paint = (value: number, level: number): { fill: string; ink: string } => {\n    if (level === 0) return { fill: empty, ink: \"var(--text-primary)\" };\n    if (fillProp || continuous) {\n      const t = max > 0 ? Math.min(1, Math.max(0, value / max)) : 1;\n      const fill = fillProp\n        ? fillProp(value, max)\n        : hexRamp\n          ? lerpHex(colorFrom!, colorTo!, t)\n          : `color-mix(in oklab, ${colorTo} ${Math.round(t * 100)}%, ${colorFrom})`;\n      // Measured where the fill is a colour; a mix of references cannot be measured,\n      // and the page's own text colour is the safe answer there.\n      const measured = textOn(fill);\n      return { fill, ink: measured === \"currentColor\" ? \"var(--text-primary)\" : measured };\n    }\n    // Light text once the fill is the stronger half of the mix — `--bg-surface` is the\n    // colour the scale is mixed INTO, so it is the one that contrasts with its far end\n    // on either theme.\n    const strong = levelPercent(level, levels) >= 45;\n    return {\n      fill: levelFill(level, levels, color),\n      ink: strong ? \"var(--bg-surface)\" : \"var(--text-primary)\",\n    };\n  };\n  // The legend's swatches: a value that lands on each step (the top one on `max`).\n  const legendFill = (l: number) => paint(((max > 0 ? max : 1) * l) / levels, l).fill;\n\n  const cell = (d: Date, wrapClass: string, cellClass: string, withNumber: boolean) => {\n    const iso = toLocalIso(d);\n    const raw = values.get(iso);\n    const value = raw ?? 0;\n    const level = heatmapLevel(value, max, levels);\n    const { fill, ink } = paint(value, level);\n    const formattedDate = formatDay(d);\n    const formattedValue = formatValue(value);\n    const name = labels.day(formattedDate, formattedValue);\n    const label = tooltip\n      ? tooltip({ iso, date: d, value, hasData: raw !== undefined, level, formattedDate, formattedValue })\n      : name;\n    const isSelected = selected === iso;\n    const shared = {\n      role: \"gridcell\",\n      \"data-day\": iso,\n      \"data-level\": level,\n      tabIndex: iso === activeIso ? 0 : -1,\n      \"aria-label\": name,\n      \"aria-selected\": onSelect ? isSelected : undefined,\n      onKeyDown: move,\n      onFocus: () => {\n        if (iso !== activeIso) setActiveIso(iso);\n      },\n      style: { background: fill, color: ink },\n      className: cn(\n        cellClass,\n        isSelected && \"ring-2 ring-[var(--text-primary)]\",\n        onSelect && \"cursor-pointer hover:ring-1 hover:ring-[var(--brand)]\",\n      ),\n    } as const;\n    const inner = withNumber ? (\n      <span aria-hidden className=\"text-[11px] leading-none tabular-nums\">\n        {numberFormat.format(d.getDate())}\n      </span>\n    ) : null;\n    return (\n      <Tooltip key={iso} label={label} portal redact={sensitive} role=\"none\" className={wrapClass}>\n        {onSelect ? (\n          <button type=\"button\" {...shared} onClick={() => onSelect(iso)}>\n            {inner}\n          </button>\n        ) : (\n          <div {...shared}>{inner}</div>\n        )}\n      </Tooltip>\n    );\n  };\n\n  const gridName = ariaLabel ?? labels.grid;\n  let body: ReactNode;\n  if (layout === \"weeks\") {\n    const columns = { gridTemplateColumns: `var(--heatmap-label, 2rem) repeat(${weekCount}, var(--heatmap-cell, 0.75rem))` } as CSSProperties;\n    const cellSize = \"size-[var(--heatmap-cell,0.75rem)]\";\n    // A month's name over the first column that holds its 1st — or over the first\n    // column, when the window opens far enough before the next month for it to fit.\n    const monthLabels = Array.from({ length: weekCount }, (_, w) => {\n      for (let r = 0; r < 7; r++) {\n        const d = dayAt(w * 7 + r);\n        if (d && (d.getDate() === 1 || (w === 0 && r === lead && d.getDate() <= 14))) {\n          return d.toLocaleDateString(locale, { month: \"short\" });\n        }\n      }\n      return \"\";\n    });\n    body = (\n      <div ref={scrollerRef} className=\"overflow-x-auto pb-1\">\n        <div ref={gridRef} role=\"grid\" aria-label={gridName} className=\"inline-grid gap-0.5\">\n          {/* Decoration: every cell's name already carries its month. */}\n          <div aria-hidden className=\"grid gap-0.5 text-[10px] leading-3 text-[var(--text-muted)]\" style={columns}>\n            <span />\n            {monthLabels.map((m, w) => (\n              <span key={w} className=\"overflow-visible whitespace-nowrap\">\n                {m}\n              </span>\n            ))}\n          </div>\n          {Array.from({ length: 7 }, (_, r) => (\n            <div key={r} role=\"row\" className=\"grid gap-0.5\" style={columns}>\n              <div\n                role=\"rowheader\"\n                aria-label={weekdayLabels[r].long}\n                className=\"overflow-hidden pe-1 text-[10px] leading-3 text-[var(--text-muted)]\"\n              >\n                {/* Every other weekday, as a contribution graph does: seven labels\n                    at this size are a smear. The name is there for all seven. */}\n                {r % 2 === 1 ? weekdayLabels[r].short : \"\"}\n              </div>\n              {Array.from({ length: weekCount }, (_, w) => {\n                const d = dayAt(w * 7 + r);\n                return d ? (\n                  cell(d, cellSize, cn(cellSize, \"block rounded-sm\"), false)\n                ) : (\n                  <div key={`pad-${w}`} role=\"gridcell\" className={cellSize} />\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  } else {\n    const rows = Array.from({ length: weekCount }, (_, w) => w);\n    body = (\n      <div ref={gridRef} role=\"grid\" aria-label={gridName} className=\"grid gap-1\">\n        <div role=\"row\" className=\"grid grid-cols-7 gap-1\">\n          {weekdayLabels.map((w, i) => (\n            <div\n              key={i}\n              role=\"columnheader\"\n              aria-label={w.long}\n              className=\"pb-0.5 text-center text-[10px] uppercase tracking-wide text-[var(--text-muted)]\"\n            >\n              {w.short}\n            </div>\n          ))}\n        </div>\n        {rows.map((w) => (\n          <div key={w} role=\"row\" className=\"grid grid-cols-7 gap-1\">\n            {Array.from({ length: 7 }, (_, c) => {\n              const d = dayAt(w * 7 + c);\n              return d ? (\n                cell(d, \"aspect-square w-full\", \"flex h-full w-full items-center justify-center rounded\", true)\n              ) : (\n                <div key={`pad-${c}`} role=\"gridcell\" className=\"aspect-square\" />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cn(\"min-w-0\", className)}>\n      {dropped > 0 && (\n        <div className=\"mb-2 text-xs text-[var(--text-muted)]\">{labels.truncated(dropped)}</div>\n      )}\n      {body}\n      {legend && (\n        <div aria-hidden className=\"mt-2 flex items-center justify-end gap-1 text-[10px] text-[var(--text-muted)]\">\n          <span className=\"me-0.5\">{labels.less}</span>\n          {legendLevels.map((l) => (\n            <span\n              key={l}\n              data-legend-level={l}\n              className=\"size-2.5 rounded-sm\"\n              style={{ background: legendFill(l) }}\n            />\n          ))}\n          <span className=\"ms-0.5\">{labels.more}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["_"]}

package/dist/components/chart.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useId, useRef } from "react";
+import { createContext, useContext, useId, useLayoutEffect, useRef, useState } from "react";
 import {
   Legend as RechartsLegend,
   ResponsiveContainer,
@@ -99,15 +99,21 @@ function ChartTooltipContent({
   const config = useChart();
   const tipRef = useRef(null);
   const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);
-  if (!active || !items?.length) return null;
-  let flip = false;
-  const boundary = boundaryRef?.current;
-  if (boundary && coordinate?.x != null) {
+  const visible = Boolean(active && items?.length);
+  const [flip, setFlip] = useState(false);
+  const x = coordinate?.x;
+  useLayoutEffect(() => {
+    const boundary = boundaryRef?.current;
+    if (!visible || !boundary || x == null) {
+      setFlip(false);
+      return;
+    }
     const offset = isRtl(boundary) ? boundary.scrollWidth - boundary.clientWidth + boundary.scrollLeft : boundary.scrollLeft;
-    const visibleX = coordinate.x - offset;
+    const visibleX = x - offset;
     const tipWidth = tipRef.current?.offsetWidth ?? 160;
-    flip = visibleX + tipWidth + 12 > boundary.clientWidth;
-  }
+    setFlip(visibleX + tipWidth + 12 > boundary.clientWidth);
+  }, [visible, x, boundaryRef, payload, label]);
+  if (!visible || !items) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/dist/components/chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/chart.tsx"],"sourcesContent":["// shadcn/ui chart kit — vendored (MIT) and adapted for this app:\n//  - Recharts 3 instead of 2\n//  - the original keys its styling off shadcn theme tokens (--muted-foreground,\n//    --border, bg-background …). This app has no shadcn token layer, so those\n//    are mapped onto this kit's own tokens (--text-muted, --border, --bg-surface\n//    …), which follow the active palette preset and flip with the theme by\n//    themselves — hence no `dark:` variants anywhere below.\n// The value on show is the *structure*: config-driven colors injected as CSS\n// vars, muted axis/grid styling, and a polished tooltip/legend — the things\n// that make shadcn charts read as \"designed\" rather than \"default Recharts\".\nimport { createContext, useContext, useId, useRef } from \"react\";\nimport type { ComponentProps, CSSProperties, ReactNode, RefObject } from \"react\";\nimport {\n  Legend as RechartsLegend,\n  ResponsiveContainer,\n  Tooltip as RechartsTooltip,\n} from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { isRtl } from \"../lib/direction\";\n\nexport interface ChartSeriesConfig {\n  label: ReactNode;\n  color: string;\n}\n\nexport type ChartConfig = Record<string, ChartSeriesConfig>;\n\nconst ChartContext = createContext<ChartConfig | null>(null);\n\nexport function useChart(): ChartConfig {\n  const ctx = useContext(ChartContext);\n  if (!ctx) throw new Error(\"useChart must be used within a <ChartContainer />\");\n  return ctx;\n}\n\ninterface ChartContainerProps extends ComponentProps<\"div\"> {\n  config: ChartConfig;\n  children: ComponentProps<typeof ResponsiveContainer>[\"children\"];\n}\n\n/**\n * The shell every chart in the kit is drawn inside.\n *\n * **The plot is not mirrored in RTL.** An x axis is a number line or a timeline, and\n * both run left-to-right in Hebrew and Arabic charts as much as in English ones; a\n * time axis flipped to run right-to-left is the surprise, not the courtesy. So no\n * `reversed` on any axis, and the SVG is pinned to `direction: ltr` — without that it\n * inherits the page's `rtl`, which flips what `text-anchor: end` means, and the tick\n * labels of a left-hand y axis are drawn INTO the plot instead of beside it. Text\n * inside the SVG still shapes by its own script; only the anchoring is physical.\n * The HTML around the plot — legend, tooltip, the zoom reset button — follows the\n * page's direction like any other markup. A consumer who does want a mirrored\n * category axis passes `reversed` on its own `XAxis`.\n */\nexport function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps) {\n  const uid = useId();\n  // The id is pasted into an UNQUOTED `[data-chart=…]` selector below, so it has to be\n  // a CSS identifier: one stray space or `#` and the browser discards the whole rule,\n  // taking every series colour with it — silently, because an invalid rule is not an\n  // error anywhere. `useId()` gives `:r0:`, and a consumer-supplied id gives whatever\n  // they typed, so both are filtered rather than just the colons.\n  const chartId = `chart-${(id ?? uid).replace(/[^A-Za-z0-9_-]/g, \"\")}`;\n  return (\n    <ChartContext.Provider value={config}>\n      <div\n        data-chart={chartId}\n        className={cn(\n          // touch-pan-y lets a vertical finger drag still scroll the page while\n          // a horizontal drag is handed to recharts for tooltip scrubbing,\n          // instead of the page scrolling underneath the gesture (feedback #292).\n          \"flex w-full touch-pan-y justify-center text-xs\",\n          // physical anchoring for the unmirrored plot (see the doc comment above)\n          \"[&_.recharts-surface]:[direction:ltr]\",\n          // muted axis labels + gridlines; one class each, since the tokens\n          // already carry the light/dark values\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-[var(--text-muted)]\",\n          \"[&_.recharts-cartesian-grid_line]:stroke-[var(--border)]/70\",\n          // hairline hover cursor instead of the heavy default\n          \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--border-strong)]\",\n          \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--bg-hover)]\",\n          // kill the focus outlines & white sector strokes Recharts adds\n          \"[&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n          \"[&_.recharts-layer]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          {children}\n        </ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/**\n * A config key, which becomes the tail of a custom-property NAME.\n *\n * `dangerouslySetInnerHTML` means what it says: nothing below is escaped by React, and\n * a `ChartConfig` is not necessarily written by hand — kastlan builds one from category\n * rows in its database, so these keys are user data. A key containing `}` closes this\n * rule, and whatever follows it in that key becomes a NEW rule — one that applies to\n * the whole document rather than to this one chart.\n */\nconst CSS_IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;\n\n/**\n * A config colour, which becomes a declaration VALUE.\n *\n * Every form a palette actually produces: both hex spellings, the functional notations\n * — with the argument list restricted to the characters those functions can legally\n * contain, so no `;`, no `}` and no nested `url(` — and `var(--token)`, which is what\n * this kit's own `paletteFor`/`CHART_COLORS` return. `var()`'s optional FALLBACK is\n * deliberately not accepted: its second argument is an arbitrary value, i.e. the same\n * hole in a shape that looks safe.\n */\nconst CSS_COLOR =\n  /^(?:#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6}|(?:rgba?|hsla?)\\([0-9A-Za-z.,%/ -]*\\)|var\\(--[A-Za-z0-9_-]+\\))$/;\n\n/**\n * The colour an entry is painted with, or `undefined` when the style block refuses it.\n *\n * The one gate both sides go through: {@link ChartStyle} emits exactly these, and the\n * legend and tooltip swatches show exactly these. They used to read `config[key].color`\n * directly, so an entry the style block had skipped still showed its configured colour\n * in the key — a swatch promising a colour the series was never painted in.\n */\nfunction paintedColor(key: string, entry: ChartSeriesConfig | undefined): string | undefined {\n  if (!entry?.color) return undefined;\n  return CSS_IDENT.test(key) && CSS_COLOR.test(entry.color) ? entry.color : undefined;\n}\n\n// Inject each series colour as a `--color-<key>` custom property scoped to this\n// chart, so chart JSX can refer to `var(--color-total)` and the legend/tooltip\n// stay in sync from one source of truth.\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n  const entries = Object.entries(config).filter(([key, c]) => {\n    if (!c.color) return false;\n    // Skipping the entry costs that one series its `var(--color-…)` and leaves the rest\n    // of the chart painted; emitting it unchecked costs the page. The warning is so the\n    // consumer finds out from their console rather than from a colourless bar.\n    if (!CSS_IDENT.test(key)) {\n      console.warn(`[ui-kit] chart config key is not a CSS identifier, skipped: ${key}`);\n      return false;\n    }\n    if (!CSS_COLOR.test(c.color)) {\n      console.warn(`[ui-kit] chart config colour for \"${key}\" is not a colour, skipped: ${c.color}`);\n      return false;\n    }\n    return true;\n  });\n  if (!entries.length) return null;\n  const css = `[data-chart=${id}] {\\n${entries\n    .map(([key, c]) => `  --color-${key}: ${c.color};`)\n    .join(\"\\n\")}\\n}`;\n  return <style dangerouslySetInnerHTML={{ __html: css }} />;\n}\n\n/**\n * recharts' `Tooltip`, with `filterNull` defaulting to **false**.\n *\n * recharts drops every payload entry whose value is `null`/`undefined` before the\n * content sees it, so the missing-value path {@link ChartTooltipContent} documents —\n * the em dash, `formatValue(undefined)` — never ran under the default: a series with a\n * gap at the cursor simply vanished from the tooltip, which reads as \"this series does\n * not exist here\" rather than \"it has no value here\". Kept, the entry prints \"—\".\n *\n * The other half of that filter — dropping series drawn with `hide` — is redone by\n * `ChartTooltipContent` itself (honouring `includeHidden`), so a legend toggle still\n * takes a series out of the tooltip. Pass `filterNull` to get recharts' behaviour back.\n */\nexport function ChartTooltip(props: ComponentProps<typeof RechartsTooltip>) {\n  return <RechartsTooltip filterNull={false} {...props} />;\n}\nexport const ChartLegend = RechartsLegend;\n\ninterface TooltipPayloadItem {\n  dataKey?: string | number;\n  name?: string | number;\n  value?: number | string;\n  color?: string;\n  /** A series drawn with `hide` — dropped here, see {@link ChartTooltip}. */\n  hide?: boolean;\n  payload?: Record<string, unknown>;\n}\n\n/**\n * What a series has no value for at this point: a gap in a history, a projection that\n * has not happened yet, a field that did not exist at an earlier capture.\n *\n * An em dash rather than an empty cell, so the row still lines up with its siblings and\n * the reader can see that the series WAS asked and had nothing, rather than wondering\n * whether it was dropped. It is a mark, not a word, so there is nothing here to\n * translate and no label prop to resolve; a caller who wants words passes\n * `formatValue`, which is handed the `undefined` and decides.\n */\nconst NO_VALUE = \"—\";\n\n/**\n * The number this payload item carries, or `undefined` when it carries none.\n *\n * This was `item.value ?? 0`, so every one of the absences above printed a confident\n * \"0\" that appears nowhere in the data — a fabricated figure in a tooltip, which is the\n * one place a reader goes to check an exact number. keksdose found it and wrapped the\n * component rather than trust it. `\"\"` and a non-numeric string are the same absence\n * spelled differently (recharts hands a string value straight through from the data),\n * and are answered the same way.\n */\nfunction tooltipValue(value: number | string | undefined): number | undefined {\n  if (value == null || value === \"\") return undefined;\n  const n = typeof value === \"string\" ? Number(value) : value;\n  return Number.isFinite(n) ? n : undefined;\n}\n\ninterface ChartTooltipContentProps {\n  active?: boolean;\n  payload?: TooltipPayloadItem[];\n  label?: string | number;\n  indicator?: \"dot\" | \"line\";\n  hideLabel?: boolean;\n  labelFormatter?: (label: string | number) => ReactNode;\n  /** Formats one series' value for display. NOT called when the series has no value at\n   *  this point — {@link ChartTooltipContentProps.formatValue} is the one that is. */\n  valueFormatter?: (value: number) => ReactNode;\n  /** Formats one series' value INCLUDING its absence: handed `undefined` for a gap, a\n   *  projection that has not happened yet, or a field that did not exist at an earlier\n   *  capture, and whatever it returns is rendered as-is. Only the caller knows whether\n   *  that absence reads as a dash, a \"not yet\" or a genuine zero, so this is how it\n   *  says. Supplying it wins over `valueFormatter` for every value.\n   *\n   *  It sits NEXT to `valueFormatter` rather than widening it because that prop's\n   *  parameter is contextually typed at every call site there is — `(v) => money(v)` —\n   *  so widening it to `number | undefined` is a compile error in all three consuming\n   *  apps, which is a breaking change this module does not get to make by itself. */\n  formatValue?: (value: number | undefined) => ReactNode;\n  /** Cursor position within the chart, injected by recharts. Used with\n   *  {@link boundaryRef} to decide whether to flip the tooltip. */\n  coordinate?: { x?: number; y?: number };\n  /** When set, the tooltip flips to the LEFT of the cursor if it would otherwise\n   *  spill past the right edge of this (usually horizontally-scrolling) container\n   *  — e.g. a wide chart whose rightmost bars sat off-screen (feedback #77). */\n  boundaryRef?: RefObject<HTMLElement | null>;\n  /** Injected by recharts: keep series drawn with `hide` in the tooltip. */\n  includeHidden?: boolean;\n}\n\nexport function ChartTooltipContent({\n  active,\n  payload,\n  label,\n  indicator = \"dot\",\n  hideLabel = false,\n  labelFormatter,\n  valueFormatter,\n  formatValue,\n  coordinate,\n  boundaryRef,\n  includeHidden = false,\n}: ChartTooltipContentProps) {\n  const config = useChart();\n  const tipRef = useRef<HTMLDivElement>(null);\n  // `ChartTooltip` keeps null values (so they can print \"—\"), which also keeps the\n  // series a legend toggle switched off with `hide`; those go here instead.\n  const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);\n  if (!active || !items?.length) return null;\n  // Recharts anchors the tooltip at coordinate.x inside the full (scrolled) chart\n  // width; subtract the container's scrollLeft to get its on-screen x, then flip\n  // left if the tooltip's own width would run past the visible right edge.\n  //\n  // Both the cursor and the flip are PHYSICAL (the plot is never mirrored, see\n  // `ChartContainer`), but an RTL scroller counts `scrollLeft` from its right edge —\n  // 0 at the start, negative going left — so there the content's left edge sits\n  // `scrollWidth - clientWidth + scrollLeft` px to the left of the visible one.\n  let flip = false;\n  const boundary = boundaryRef?.current;\n  if (boundary && coordinate?.x != null) {\n    const offset = isRtl(boundary)\n      ? boundary.scrollWidth - boundary.clientWidth + boundary.scrollLeft\n      : boundary.scrollLeft;\n    const visibleX = coordinate.x - offset;\n    const tipWidth = tipRef.current?.offsetWidth ?? 160;\n    flip = visibleX + tipWidth + 12 > boundary.clientWidth;\n  }\n  return (\n    <div\n      ref={tipRef}\n      style={boundaryRef ? { transform: flip ? \"translateX(calc(-100% - 12px))\" : \"translateX(12px)\" } : undefined}\n      className=\"min-w-[9rem] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl\"\n    >\n      {!hideLabel && label != null && (\n        <div className=\"mb-1.5 font-medium text-[var(--text-primary)]\">\n          {labelFormatter ? labelFormatter(label) : label}\n        </div>\n      )}\n      <div className=\"grid gap-1.5\">\n        {items.map((item, i) => {\n          // Bars/lines/areas identify a series by dataKey; pies/treemaps key off\n          // `name` (the nameKey value). Prefer whichever the config knows.\n          const dk = item.dataKey != null ? String(item.dataKey) : undefined;\n          const nm = item.name != null ? String(item.name) : undefined;\n          const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : (dk ?? nm ?? String(i));\n          const series = config[cfgKey];\n          const fill = typeof item.payload?.fill === \"string\" ? item.payload.fill : undefined;\n          // The data point's own `fill` before recharts' `item.color`: a treemap tile,\n          // or a bar with a per-cell colour, IS the colour the reader is pointing at,\n          // while `item.color` is the series-wide one — every tile's swatch came out\n          // `--chart-1` whatever colour the tile was.\n          const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? \"#64748b\";\n          const name = series?.label ?? nm ?? cfgKey;\n          const raw = tooltipValue(item.value);\n          let shown: ReactNode;\n          if (formatValue) shown = formatValue(raw);\n          else if (raw == null) shown = NO_VALUE;\n          else shown = valueFormatter ? valueFormatter(raw) : raw;\n          return (\n            <div key={`${cfgKey}-${i}`} className=\"flex items-center gap-2\">\n              <span\n                className={cn(\n                  \"shrink-0 rounded-[2px]\",\n                  indicator === \"dot\" ? \"h-2.5 w-2.5 rounded-full\" : \"h-2.5 w-1\",\n                )}\n                style={{ backgroundColor: color }}\n              />\n              <span className=\"text-[var(--text-muted)]\">{name}</span>\n              <span data-private className=\"ms-auto font-mono font-medium tabular-nums text-[var(--text-primary)]\">\n                {shown}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\ninterface LegendPayloadItem {\n  value?: string;\n  dataKey?: string | number;\n  color?: string;\n}\n\ninterface ChartLegendContentProps {\n  payload?: LegendPayloadItem[];\n  onItemClick?: (key: string) => void;\n  /**\n   * TOGGLE mode (recommended): the series currently switched off. Each entry is a\n   * toggle button — pressed while its series is shown — and a hidden one is drawn\n   * faded with its label struck through. Several can be off at once; pair with\n   * `toggleHidden(hidden, key)` in `onItemClick` and `hide` on the chart's series.\n   */\n  hiddenKeys?: ReadonlySet<string> | readonly string[];\n  /**\n   * ISOLATE mode: the one series shown in full, every other entry dimmed. Kept for\n   * the charts built on it; a legend where each entry switches its own series is\n   * what readers expect from a legend, so prefer `hiddenKeys`.\n   */\n  activeKey?: string | null;\n}\n\nexport function ChartLegendContent({\n  payload,\n  onItemClick,\n  hiddenKeys,\n  activeKey,\n}: ChartLegendContentProps) {\n  const hidden = hiddenKeys ? new Set(hiddenKeys) : null;\n  const config = useChart();\n  if (!payload?.length) return null;\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3\">\n      {payload.map((item, i) => {\n        const dk = item.dataKey != null ? String(item.dataKey) : undefined;\n        const vv = item.value != null ? String(item.value) : undefined;\n        const cfgKey = dk && config[dk] ? dk : vv && config[vv] ? vv : (dk ?? vv ?? String(i));\n        const series = config[cfgKey];\n        const color = paintedColor(cfgKey, series) ?? item.color ?? \"#64748b\";\n        const label = series?.label ?? vv ?? cfgKey;\n        const off = hidden?.has(cfgKey) ?? false;\n        const dimmed = off || (activeKey != null && activeKey !== cfgKey);\n        const className = cn(\n          \"flex items-center gap-1.5 text-[var(--text-secondary)] transition-opacity\",\n          onItemClick ? \"cursor-pointer hover:opacity-80\" : \"cursor-default\",\n          dimmed && \"opacity-40\",\n        );\n        const swatch = (\n          <span\n            aria-hidden\n            className=\"h-2.5 w-2.5 shrink-0 rounded-[3px]\"\n            style={{ backgroundColor: color } as CSSProperties}\n          />\n        );\n        // A legend with no `onItemClick` is a KEY, not a control — and that is every\n        // legend in kastlan, where this rendered N focusable buttons per chart that did\n        // nothing when activated. A keyboard user paid the tab stops for all of them,\n        // and a screen reader announced each one as a button, promising an action there\n        // was none of. The interactive branch is unchanged.\n        return onItemClick ? (\n          <button\n            key={`${cfgKey}-${i}`}\n            type=\"button\"\n            onClick={() => onItemClick(cfgKey)}\n            // Toggles report their state: in toggle mode pressed = the series is shown;\n            // in isolate mode pressed = the isolated one. With neither supplied the\n            // legend knows nothing about state, and a pressed=\"false\" it cannot vouch\n            // for would lie — so it says nothing.\n            aria-pressed={\n              hidden ? !off : activeKey === undefined ? undefined : activeKey === cfgKey\n            }\n            className={className}\n          >\n            {swatch}\n            <span className={cn(off && \"line-through\")}>{label}</span>\n          </button>\n        ) : (\n          <span key={`${cfgKey}-${i}`} className={className}>\n            {swatch}\n            {label}\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/chart.tsx"],"sourcesContent":["// shadcn/ui chart kit — vendored (MIT) and adapted for this app:\n//  - Recharts 3 instead of 2\n//  - the original keys its styling off shadcn theme tokens (--muted-foreground,\n//    --border, bg-background …). This app has no shadcn token layer, so those\n//    are mapped onto this kit's own tokens (--text-muted, --border, --bg-surface\n//    …), which follow the active palette preset and flip with the theme by\n//    themselves — hence no `dark:` variants anywhere below.\n// The value on show is the *structure*: config-driven colors injected as CSS\n// vars, muted axis/grid styling, and a polished tooltip/legend — the things\n// that make shadcn charts read as \"designed\" rather than \"default Recharts\".\nimport { createContext, useContext, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentProps, CSSProperties, ReactNode, RefObject } from \"react\";\nimport {\n  Legend as RechartsLegend,\n  ResponsiveContainer,\n  Tooltip as RechartsTooltip,\n} from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { isRtl } from \"../lib/direction\";\n\nexport interface ChartSeriesConfig {\n  label: ReactNode;\n  color: string;\n}\n\nexport type ChartConfig = Record<string, ChartSeriesConfig>;\n\nconst ChartContext = createContext<ChartConfig | null>(null);\n\nexport function useChart(): ChartConfig {\n  const ctx = useContext(ChartContext);\n  if (!ctx) throw new Error(\"useChart must be used within a <ChartContainer />\");\n  return ctx;\n}\n\ninterface ChartContainerProps extends ComponentProps<\"div\"> {\n  config: ChartConfig;\n  children: ComponentProps<typeof ResponsiveContainer>[\"children\"];\n}\n\n/**\n * The shell every chart in the kit is drawn inside.\n *\n * **The plot is not mirrored in RTL.** An x axis is a number line or a timeline, and\n * both run left-to-right in Hebrew and Arabic charts as much as in English ones; a\n * time axis flipped to run right-to-left is the surprise, not the courtesy. So no\n * `reversed` on any axis, and the SVG is pinned to `direction: ltr` — without that it\n * inherits the page's `rtl`, which flips what `text-anchor: end` means, and the tick\n * labels of a left-hand y axis are drawn INTO the plot instead of beside it. Text\n * inside the SVG still shapes by its own script; only the anchoring is physical.\n * The HTML around the plot — legend, tooltip, the zoom reset button — follows the\n * page's direction like any other markup. A consumer who does want a mirrored\n * category axis passes `reversed` on its own `XAxis`.\n */\nexport function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps) {\n  const uid = useId();\n  // The id is pasted into an UNQUOTED `[data-chart=…]` selector below, so it has to be\n  // a CSS identifier: one stray space or `#` and the browser discards the whole rule,\n  // taking every series colour with it — silently, because an invalid rule is not an\n  // error anywhere. `useId()` gives `:r0:`, and a consumer-supplied id gives whatever\n  // they typed, so both are filtered rather than just the colons.\n  const chartId = `chart-${(id ?? uid).replace(/[^A-Za-z0-9_-]/g, \"\")}`;\n  return (\n    <ChartContext.Provider value={config}>\n      <div\n        data-chart={chartId}\n        className={cn(\n          // touch-pan-y lets a vertical finger drag still scroll the page while\n          // a horizontal drag is handed to recharts for tooltip scrubbing,\n          // instead of the page scrolling underneath the gesture (feedback #292).\n          \"flex w-full touch-pan-y justify-center text-xs\",\n          // physical anchoring for the unmirrored plot (see the doc comment above)\n          \"[&_.recharts-surface]:[direction:ltr]\",\n          // muted axis labels + gridlines; one class each, since the tokens\n          // already carry the light/dark values\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-[var(--text-muted)]\",\n          \"[&_.recharts-cartesian-grid_line]:stroke-[var(--border)]/70\",\n          // hairline hover cursor instead of the heavy default\n          \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--border-strong)]\",\n          \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--bg-hover)]\",\n          // kill the focus outlines & white sector strokes Recharts adds\n          \"[&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n          \"[&_.recharts-layer]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          {children}\n        </ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/**\n * A config key, which becomes the tail of a custom-property NAME.\n *\n * `dangerouslySetInnerHTML` means what it says: nothing below is escaped by React, and\n * a `ChartConfig` is not necessarily written by hand — kastlan builds one from category\n * rows in its database, so these keys are user data. A key containing `}` closes this\n * rule, and whatever follows it in that key becomes a NEW rule — one that applies to\n * the whole document rather than to this one chart.\n */\nconst CSS_IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;\n\n/**\n * A config colour, which becomes a declaration VALUE.\n *\n * Every form a palette actually produces: both hex spellings, the functional notations\n * — with the argument list restricted to the characters those functions can legally\n * contain, so no `;`, no `}` and no nested `url(` — and `var(--token)`, which is what\n * this kit's own `paletteFor`/`CHART_COLORS` return. `var()`'s optional FALLBACK is\n * deliberately not accepted: its second argument is an arbitrary value, i.e. the same\n * hole in a shape that looks safe.\n */\nconst CSS_COLOR =\n  /^(?:#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6}|(?:rgba?|hsla?)\\([0-9A-Za-z.,%/ -]*\\)|var\\(--[A-Za-z0-9_-]+\\))$/;\n\n/**\n * The colour an entry is painted with, or `undefined` when the style block refuses it.\n *\n * The one gate both sides go through: {@link ChartStyle} emits exactly these, and the\n * legend and tooltip swatches show exactly these. They used to read `config[key].color`\n * directly, so an entry the style block had skipped still showed its configured colour\n * in the key — a swatch promising a colour the series was never painted in.\n */\nfunction paintedColor(key: string, entry: ChartSeriesConfig | undefined): string | undefined {\n  if (!entry?.color) return undefined;\n  return CSS_IDENT.test(key) && CSS_COLOR.test(entry.color) ? entry.color : undefined;\n}\n\n// Inject each series colour as a `--color-<key>` custom property scoped to this\n// chart, so chart JSX can refer to `var(--color-total)` and the legend/tooltip\n// stay in sync from one source of truth.\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n  const entries = Object.entries(config).filter(([key, c]) => {\n    if (!c.color) return false;\n    // Skipping the entry costs that one series its `var(--color-…)` and leaves the rest\n    // of the chart painted; emitting it unchecked costs the page. The warning is so the\n    // consumer finds out from their console rather than from a colourless bar.\n    if (!CSS_IDENT.test(key)) {\n      console.warn(`[ui-kit] chart config key is not a CSS identifier, skipped: ${key}`);\n      return false;\n    }\n    if (!CSS_COLOR.test(c.color)) {\n      console.warn(`[ui-kit] chart config colour for \"${key}\" is not a colour, skipped: ${c.color}`);\n      return false;\n    }\n    return true;\n  });\n  if (!entries.length) return null;\n  const css = `[data-chart=${id}] {\\n${entries\n    .map(([key, c]) => `  --color-${key}: ${c.color};`)\n    .join(\"\\n\")}\\n}`;\n  return <style dangerouslySetInnerHTML={{ __html: css }} />;\n}\n\n/**\n * recharts' `Tooltip`, with `filterNull` defaulting to **false**.\n *\n * recharts drops every payload entry whose value is `null`/`undefined` before the\n * content sees it, so the missing-value path {@link ChartTooltipContent} documents —\n * the em dash, `formatValue(undefined)` — never ran under the default: a series with a\n * gap at the cursor simply vanished from the tooltip, which reads as \"this series does\n * not exist here\" rather than \"it has no value here\". Kept, the entry prints \"—\".\n *\n * The other half of that filter — dropping series drawn with `hide` — is redone by\n * `ChartTooltipContent` itself (honouring `includeHidden`), so a legend toggle still\n * takes a series out of the tooltip. Pass `filterNull` to get recharts' behaviour back.\n */\nexport function ChartTooltip(props: ComponentProps<typeof RechartsTooltip>) {\n  return <RechartsTooltip filterNull={false} {...props} />;\n}\nexport const ChartLegend = RechartsLegend;\n\ninterface TooltipPayloadItem {\n  dataKey?: string | number;\n  name?: string | number;\n  value?: number | string;\n  color?: string;\n  /** A series drawn with `hide` — dropped here, see {@link ChartTooltip}. */\n  hide?: boolean;\n  payload?: Record<string, unknown>;\n}\n\n/**\n * What a series has no value for at this point: a gap in a history, a projection that\n * has not happened yet, a field that did not exist at an earlier capture.\n *\n * An em dash rather than an empty cell, so the row still lines up with its siblings and\n * the reader can see that the series WAS asked and had nothing, rather than wondering\n * whether it was dropped. It is a mark, not a word, so there is nothing here to\n * translate and no label prop to resolve; a caller who wants words passes\n * `formatValue`, which is handed the `undefined` and decides.\n */\nconst NO_VALUE = \"—\";\n\n/**\n * The number this payload item carries, or `undefined` when it carries none.\n *\n * This was `item.value ?? 0`, so every one of the absences above printed a confident\n * \"0\" that appears nowhere in the data — a fabricated figure in a tooltip, which is the\n * one place a reader goes to check an exact number. keksdose found it and wrapped the\n * component rather than trust it. `\"\"` and a non-numeric string are the same absence\n * spelled differently (recharts hands a string value straight through from the data),\n * and are answered the same way.\n */\nfunction tooltipValue(value: number | string | undefined): number | undefined {\n  if (value == null || value === \"\") return undefined;\n  const n = typeof value === \"string\" ? Number(value) : value;\n  return Number.isFinite(n) ? n : undefined;\n}\n\ninterface ChartTooltipContentProps {\n  active?: boolean;\n  payload?: TooltipPayloadItem[];\n  label?: string | number;\n  indicator?: \"dot\" | \"line\";\n  hideLabel?: boolean;\n  labelFormatter?: (label: string | number) => ReactNode;\n  /** Formats one series' value for display. NOT called when the series has no value at\n   *  this point — {@link ChartTooltipContentProps.formatValue} is the one that is. */\n  valueFormatter?: (value: number) => ReactNode;\n  /** Formats one series' value INCLUDING its absence: handed `undefined` for a gap, a\n   *  projection that has not happened yet, or a field that did not exist at an earlier\n   *  capture, and whatever it returns is rendered as-is. Only the caller knows whether\n   *  that absence reads as a dash, a \"not yet\" or a genuine zero, so this is how it\n   *  says. Supplying it wins over `valueFormatter` for every value.\n   *\n   *  It sits NEXT to `valueFormatter` rather than widening it because that prop's\n   *  parameter is contextually typed at every call site there is — `(v) => money(v)` —\n   *  so widening it to `number | undefined` is a compile error in all three consuming\n   *  apps, which is a breaking change this module does not get to make by itself. */\n  formatValue?: (value: number | undefined) => ReactNode;\n  /** Cursor position within the chart, injected by recharts. Used with\n   *  {@link boundaryRef} to decide whether to flip the tooltip. */\n  coordinate?: { x?: number; y?: number };\n  /** When set, the tooltip flips to the LEFT of the cursor if it would otherwise\n   *  spill past the right edge of this (usually horizontally-scrolling) container\n   *  — e.g. a wide chart whose rightmost bars sat off-screen (feedback #77). */\n  boundaryRef?: RefObject<HTMLElement | null>;\n  /** Injected by recharts: keep series drawn with `hide` in the tooltip. */\n  includeHidden?: boolean;\n}\n\nexport function ChartTooltipContent({\n  active,\n  payload,\n  label,\n  indicator = \"dot\",\n  hideLabel = false,\n  labelFormatter,\n  valueFormatter,\n  formatValue,\n  coordinate,\n  boundaryRef,\n  includeHidden = false,\n}: ChartTooltipContentProps) {\n  const config = useChart();\n  const tipRef = useRef<HTMLDivElement>(null);\n  // `ChartTooltip` keeps null values (so they can print \"—\"), which also keeps the\n  // series a legend toggle switched off with `hide`; those go here instead.\n  const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);\n  const visible = Boolean(active && items?.length);\n  // Recharts anchors the tooltip at coordinate.x inside the full (scrolled) chart\n  // width; subtract the container's scrollLeft to get its on-screen x, then flip\n  // left if the tooltip's own width would run past the visible right edge.\n  //\n  // Both the cursor and the flip are PHYSICAL (the plot is never mirrored, see\n  // `ChartContainer`), but an RTL scroller counts `scrollLeft` from its right edge —\n  // 0 at the start, negative going left — so there the content's left edge sits\n  // `scrollWidth - clientWidth + scrollLeft` px to the left of the visible one.\n  //\n  // Measured in a layout effect (the DOM is not readable during render), so it commits\n  // before paint. `payload` and `label` are deps because they change the tooltip's own\n  // width, and recharts hands a fresh `payload` on every tooltip render, so a scroll\n  // followed by any re-render is re-measured just as it was when this ran in render.\n  const [flip, setFlip] = useState(false);\n  const x = coordinate?.x;\n  useLayoutEffect(() => {\n    const boundary = boundaryRef?.current;\n    if (!visible || !boundary || x == null) {\n      setFlip(false);\n      return;\n    }\n    const offset = isRtl(boundary)\n      ? boundary.scrollWidth - boundary.clientWidth + boundary.scrollLeft\n      : boundary.scrollLeft;\n    const visibleX = x - offset;\n    const tipWidth = tipRef.current?.offsetWidth ?? 160;\n    setFlip(visibleX + tipWidth + 12 > boundary.clientWidth);\n  }, [visible, x, boundaryRef, payload, label]);\n  if (!visible || !items) return null;\n  return (\n    <div\n      ref={tipRef}\n      style={boundaryRef ? { transform: flip ? \"translateX(calc(-100% - 12px))\" : \"translateX(12px)\" } : undefined}\n      className=\"min-w-[9rem] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl\"\n    >\n      {!hideLabel && label != null && (\n        <div className=\"mb-1.5 font-medium text-[var(--text-primary)]\">\n          {labelFormatter ? labelFormatter(label) : label}\n        </div>\n      )}\n      <div className=\"grid gap-1.5\">\n        {items.map((item, i) => {\n          // Bars/lines/areas identify a series by dataKey; pies/treemaps key off\n          // `name` (the nameKey value). Prefer whichever the config knows.\n          const dk = item.dataKey != null ? String(item.dataKey) : undefined;\n          const nm = item.name != null ? String(item.name) : undefined;\n          const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : (dk ?? nm ?? String(i));\n          const series = config[cfgKey];\n          const fill = typeof item.payload?.fill === \"string\" ? item.payload.fill : undefined;\n          // The data point's own `fill` before recharts' `item.color`: a treemap tile,\n          // or a bar with a per-cell colour, IS the colour the reader is pointing at,\n          // while `item.color` is the series-wide one — every tile's swatch came out\n          // `--chart-1` whatever colour the tile was.\n          const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? \"#64748b\";\n          const name = series?.label ?? nm ?? cfgKey;\n          const raw = tooltipValue(item.value);\n          let shown: ReactNode;\n          if (formatValue) shown = formatValue(raw);\n          else if (raw == null) shown = NO_VALUE;\n          else shown = valueFormatter ? valueFormatter(raw) : raw;\n          return (\n            <div key={`${cfgKey}-${i}`} className=\"flex items-center gap-2\">\n              <span\n                className={cn(\n                  \"shrink-0 rounded-[2px]\",\n                  indicator === \"dot\" ? \"h-2.5 w-2.5 rounded-full\" : \"h-2.5 w-1\",\n                )}\n                style={{ backgroundColor: color }}\n              />\n              <span className=\"text-[var(--text-muted)]\">{name}</span>\n              <span data-private className=\"ms-auto font-mono font-medium tabular-nums text-[var(--text-primary)]\">\n                {shown}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\ninterface LegendPayloadItem {\n  value?: string;\n  dataKey?: string | number;\n  color?: string;\n}\n\ninterface ChartLegendContentProps {\n  payload?: LegendPayloadItem[];\n  onItemClick?: (key: string) => void;\n  /**\n   * TOGGLE mode (recommended): the series currently switched off. Each entry is a\n   * toggle button — pressed while its series is shown — and a hidden one is drawn\n   * faded with its label struck through. Several can be off at once; pair with\n   * `toggleHidden(hidden, key)` in `onItemClick` and `hide` on the chart's series.\n   */\n  hiddenKeys?: ReadonlySet<string> | readonly string[];\n  /**\n   * ISOLATE mode: the one series shown in full, every other entry dimmed. Kept for\n   * the charts built on it; a legend where each entry switches its own series is\n   * what readers expect from a legend, so prefer `hiddenKeys`.\n   */\n  activeKey?: string | null;\n}\n\nexport function ChartLegendContent({\n  payload,\n  onItemClick,\n  hiddenKeys,\n  activeKey,\n}: ChartLegendContentProps) {\n  const hidden = hiddenKeys ? new Set(hiddenKeys) : null;\n  const config = useChart();\n  if (!payload?.length) return null;\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3\">\n      {payload.map((item, i) => {\n        const dk = item.dataKey != null ? String(item.dataKey) : undefined;\n        const vv = item.value != null ? String(item.value) : undefined;\n        const cfgKey = dk && config[dk] ? dk : vv && config[vv] ? vv : (dk ?? vv ?? String(i));\n        const series = config[cfgKey];\n        const color = paintedColor(cfgKey, series) ?? item.color ?? \"#64748b\";\n        const label = series?.label ?? vv ?? cfgKey;\n        const off = hidden?.has(cfgKey) ?? false;\n        const dimmed = off || (activeKey != null && activeKey !== cfgKey);\n        const className = cn(\n          \"flex items-center gap-1.5 text-[var(--text-secondary)] transition-opacity\",\n          onItemClick ? \"cursor-pointer hover:opacity-80\" : \"cursor-default\",\n          dimmed && \"opacity-40\",\n        );\n        const swatch = (\n          <span\n            aria-hidden\n            className=\"h-2.5 w-2.5 shrink-0 rounded-[3px]\"\n            style={{ backgroundColor: color } as CSSProperties}\n          />\n        );\n        // A legend with no `onItemClick` is a KEY, not a control — and that is every\n        // legend in kastlan, where this rendered N focusable buttons per chart that did\n        // nothing when activated. A keyboard user paid the tab stops for all of them,\n        // and a screen reader announced each one as a button, promising an action there\n        // was none of. The interactive branch is unchanged.\n        return onItemClick ? (\n          <button\n            key={`${cfgKey}-${i}`}\n            type=\"button\"\n            onClick={() => onItemClick(cfgKey)}\n            // Toggles report their state: in toggle mode pressed = the series is shown;\n            // in isolate mode pressed = the isolated one. With neither supplied the\n            // legend knows nothing about state, and a pressed=\"false\" it cannot vouch\n            // for would lie — so it says nothing.\n            aria-pressed={\n              hidden ? !off : activeKey === undefined ? undefined : activeKey === cfgKey\n            }\n            className={className}\n          >\n            {swatch}\n            <span className={cn(off && \"line-through\")}>{label}</span>\n          </button>\n        ) : (\n          <span key={`${cfgKey}-${i}`} className={className}>\n            {swatch}\n            {label}\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/chip.d.ts

@@ -166,7 +166,8 @@ type ChipProps = ChipBaseProps & ({
     /**
      * Renders the link for `href` — pass your router's `<Link>` here, since a
      * plain `<a>` reloads a single-page app (keksdose's account-menu admin pill).
-     * Default: `<a>`. Ignored without `href`.
+     * Default: the `<UiKitProvider linkComponent>`, then `<a>`. Ignored without
+     * `href`.
      *
      * A render function rather than an `as={Link}`, for three reasons. It is the
      * API `StatTile` already has (`renderLink`), so a consumer learns it once.