@eifi1/ui-kit 0.11.0 → 0.13.0

package/src/components/authed-image.tsx

@@ -0,0 +1,190 @@
+import { useState } from "react";
+import type { ImgHTMLAttributes, ReactNode } from "react";
+import { ImageOff } from "lucide-react";
+
+import { cn } from "../lib/cn";
+import { useKitLabels } from "../i18n/kit-labels";
+import { SKELETON_CLASS } from "./skeleton";
+import { useAuthedSrc } from "../hooks/use-authed-src";
+import type { AuthedFetcher, UseAuthedSrcResult } from "../hooks/use-authed-src";
+
+/** The two states an image can be in besides "there". */
+export interface AuthedImageLabels {
+  /** Read out while the bytes are on their way (the skeleton itself is silent). */
+  loading: string;
+  /** Shown, small, in place of an image that could not be fetched or decoded. */
+  loadError: string;
+  /** The failed tile's accessible name, given the image's alt. */
+  failedImage: (alt: string) => string;
+}
+
+export const DEFAULT_AUTHED_IMAGE_LABELS: AuthedImageLabels = {
+  loading: "Loading image…",
+  loadError: "Image couldn’t be loaded",
+  failedImage: (alt) => `${alt}: image couldn’t be loaded`,
+};
+
+export interface AuthedImageProps
+  extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children"> {
+  /** The image's URL — an API path when a {@link fetcher} is given. */
+  src: string | null | undefined;
+  /** Required: an image without a text alternative is a gap a reader falls into.
+   *  `""` for a purely decorative one. */
+  alt: string;
+  /** The app's authenticated GET (see {@link useAuthedSrc}). Left out, `src` is loaded
+   *  by the browser as usual and this is an `<img>` with loading and error states. */
+  fetcher?: AuthedFetcher | null;
+  /** Classes for the box around the image (the placeholders fill it). */
+  wrapperClassName?: string;
+  /**
+   * Wrap the image in a link to itself, opening in a new tab — kastlan's
+   * `AuthedImage` did, because an object URL is the only address of a protected image
+   * a browser tab can open. The link's href is the `blob:` URL, never the API path.
+   */
+  link?: boolean;
+  /** Replaces the default skeleton while loading. */
+  loadingFallback?: ReactNode;
+  /** Replaces the default "couldn't load" tile. */
+  errorFallback?: ReactNode;
+  labels?: Partial<AuthedImageLabels>;
+}
+
+/**
+ * An image with a loading state, an error state and — given a `fetcher` — the app's
+ * authentication. Replaces kastlan's `shared/components/authed-image.tsx`, which
+ * rendered NOTHING until the blob arrived and nothing at all if it never did: a card
+ * with a photo slot either had the photo or was silently shorter.
+ *
+ * Two failures are one state here: the fetch failing (401, 404, offline) and the
+ * browser failing to decode what arrived (`onError` on the `<img>`, e.g. a PDF served
+ * where an image was expected).
+ */
+export function AuthedImage({
+  src,
+  alt,
+  fetcher,
+  wrapperClassName,
+  className,
+  link,
+  loadingFallback,
+  errorFallback,
+  labels: labelsProp,
+  onLoad,
+  onError,
+  ...rest
+}: AuthedImageProps) {
+  const labels = useKitLabels("authedImage", DEFAULT_AUTHED_IMAGE_LABELS, labelsProp);
+  const fetched = useAuthedSrc(src, { fetcher });
+  return (
+    <ImageStates
+      fetched={fetched}
+      alt={alt}
+      labels={labels}
+      className={className}
+      wrapperClassName={wrapperClassName}
+      link={link}
+      loadingFallback={loadingFallback}
+      errorFallback={errorFallback}
+      imgProps={rest}
+      onLoad={onLoad}
+      onError={onError}
+    />
+  );
+}
+
+/**
+ * The rendering half of {@link AuthedImage}, for a caller that already holds a
+ * {@link useAuthedSrc} result (the lightbox needs the object URL for its download link
+ * as well). Internal to the package.
+ */
+export function ImageStates({
+  fetched,
+  alt,
+  labels,
+  className,
+  wrapperClassName,
+  link,
+  loadingFallback,
+  errorFallback,
+  imgProps,
+  onLoad,
+  onError,
+}: {
+  fetched: UseAuthedSrcResult;
+  alt: string;
+  labels: AuthedImageLabels;
+  className?: string;
+  wrapperClassName?: string;
+  link?: boolean;
+  loadingFallback?: ReactNode;
+  errorFallback?: ReactNode;
+  imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children" | "onLoad" | "onError">;
+  onLoad?: ImgHTMLAttributes<HTMLImageElement>["onLoad"];
+  onError?: ImgHTMLAttributes<HTMLImageElement>["onError"];
+}) {
+  // Decode state, per src: keyed so a new picture starts over rather than inheriting
+  // the previous one's "loaded" or "broken".
+  const [decode, setDecode] = useState<{ src: string | null; state: "loaded" | "error" } | null>(null);
+  const decoded = decode && decode.src === fetched.src ? decode.state : "pending";
+  const failed = fetched.status === "error" || decoded === "error";
+  const waiting = !failed && (fetched.status === "loading" || (fetched.src !== null && decoded === "pending"));
+
+  const img = fetched.src !== null && !failed && (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- load/error are resource events, not interactions
+    <img
+      {...imgProps}
+      src={fetched.src}
+      alt={alt}
+      onLoad={(e) => {
+        setDecode({ src: fetched.src, state: "loaded" });
+        onLoad?.(e);
+      }}
+      onError={(e) => {
+        setDecode({ src: fetched.src, state: "error" });
+        onError?.(e);
+      }}
+      className={cn(
+        // Kept in the tree while it decodes (the browser needs it there to load at
+        // all), but invisible, so the skeleton is what shows.
+        decoded === "pending" && "opacity-0",
+        className,
+      )}
+    />
+  );
+
+  return (
+    <span
+      data-image-state={failed ? "error" : waiting ? "loading" : fetched.status === "idle" ? "idle" : "ready"}
+      className={cn("relative block overflow-hidden", wrapperClassName)}
+      aria-busy={waiting || undefined}
+    >
+      {link && img && fetched.src ? (
+        <a href={fetched.src} target="_blank" rel="noreferrer noopener" className="block h-full w-full">
+          {img}
+        </a>
+      ) : (
+        img
+      )}
+      {waiting &&
+        (loadingFallback ?? (
+          <span className={cn(SKELETON_CLASS, "absolute inset-0 block rounded-none")}>
+            <span className="sr-only">{labels.loading}</span>
+          </span>
+        ))}
+      {failed &&
+        (errorFallback ?? (
+          <span
+            // `role="img"` with the alt as its name: the picture that failed still
+            // occupies its place in the reading order, and "couldn't be loaded" is
+            // the one fact a reader needs about it.
+            role="img"
+            aria-label={alt ? labels.failedImage(alt) : labels.loadError}
+            className="flex h-full min-h-16 w-full flex-col items-center justify-center gap-1 bg-[var(--bg-hover)] p-2 text-center text-xs text-[var(--text-muted)]"
+          >
+            <ImageOff aria-hidden className="size-5 shrink-0" />
+            <span aria-hidden className="line-clamp-2">{labels.loadError}</span>
+          </span>
+        ))}
+    </span>
+  );
+}

package/src/components/breadcrumbs.tsx

@@ -2,7 +2,8 @@ import { Fragment, useEffect, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, useKitLink } from "../i18n/kit-labels";
+import { pickLinkRenderer, RenderedKitLink } from "./text-link";
 
 export interface BreadcrumbsLabels {
   /** The `nav` landmark's name — what a screen reader lists it as. */
@@ -35,7 +36,8 @@ export interface BreadcrumbLinkProps {
 
 export interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
   items: BreadcrumbItem[];
-  /** Your router's link. Default `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */
+  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app
+   *  `href`), then `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */
   renderLink?: (props: BreadcrumbLinkProps) => ReactElement;
   /**
    * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing
@@ -78,6 +80,7 @@ export function Breadcrumbs({
   ...rest
 }: BreadcrumbsProps) {
   const labels = useKitLabels("breadcrumbs", DEFAULT_BREADCRUMBS_LABELS, labelsProp);
+  const kitLink = useKitLink();
   const [expanded, setExpanded] = useState(false);
   // The "…" button vanishes when pressed; focus goes to the first crumb it revealed,
   // not back to the top of the document.
@@ -121,8 +124,11 @@ export function Breadcrumbs({
             );
           } else if (item.href !== undefined) {
             const props: BreadcrumbLinkProps = { href: item.href, className: linkClass, children: item.label };
+            const kit = pickLinkRenderer<BreadcrumbLinkProps>(undefined, kitLink, item.href);
             content = renderLink ? (
               renderLink(props)
+            ) : kit ? (
+              <RenderedKitLink render={kit} props={props} />
             ) : (
               <a href={props.href} className={props.className}>
                 {props.children}

package/src/components/bulk-action-bar.tsx

@@ -99,8 +99,16 @@ export interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<"div">
   open?: boolean;
   /** Clear the selection / leave selection mode. */
   onClear: () => void;
-  /** The actions: buttons (`IconButton size="lg"` on a phone, `Button` from md up),
-   *  in the caller's order. They are the toolbar's arrow-key stops, after the clear. */
+  /**
+   * The actions: buttons (`IconButton size="lg"` on a phone, `Button` from md up),
+   * in the caller's order. They are the toolbar's arrow-key stops, after the clear.
+   *
+   * LINKS rove too (keksdose F8): a `<Button href>` — "View report", which navigates
+   * rather than acts — is an `<a href>`, and it is one more arrow-key stop in its place
+   * among the buttons, not a second Tab stop beside the toolbar's one. A disabled
+   * `<Button href disabled>` has no `href` and is skipped, as a disabled button is. Any
+   * other focusable of your own joins with `data-toolbar-item`.
+   */
   children?: ReactNode;
   /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per
    *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */
@@ -135,7 +143,12 @@ const FLOATING_STYLE: CSSProperties = {
 
 /** What the arrow keys walk: the toolbar's enabled controls. Matched by element, not by
  *  `tabindex`, because the roving below sets every one but the current to `-1` — a
- *  custom control joins with `data-toolbar-item`. */
+ *  custom control joins with `data-toolbar-item`.
+ *
+ *  `a[href]` is here on purpose (keksdose F8, a "View report" `Button href` in the bar):
+ *  a link in a toolbar is a toolbar item like any other, and left out it would keep its
+ *  own Tab stop, so Tab would stop twice in a bar that promises one. `[href]` rather than `a`: the kit's disabled link is an `<a>`
+ *  WITHOUT one, and is skipped as a disabled button is. */
 const ITEMS =
   "button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]";
 

package/src/components/button-group.tsx

@@ -1,6 +1,8 @@
 import type { ComponentPropsWithoutRef, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
 import { buttonClasses, type ButtonSize, type ButtonVariant } from "./ui";
+import { useKitLink } from "../i18n/kit-labels";
+import { pickLinkRenderer } from "./text-link";
 
 // Every class below is spelled out in full rather than assembled from parts: the
 // consumer's Tailwind build finds classes by scanning this package's source as text,
@@ -147,7 +149,8 @@ export interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<"a">
   /** The member for the page you are on: `aria-current="page"` and the "on" look of a
    *  pressed member, so a link row reads as a segmented switch between pages. */
   current?: boolean;
-  /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}. */
+  /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}.
+   *  Default: the `<UiKitProvider linkComponent>`, then `<a>`. */
   renderLink?: (props: ButtonGroupLinkRenderProps) => ReactElement;
   className?: string;
   children: ReactNode;
@@ -174,6 +177,7 @@ export function ButtonGroupLink({
   children,
   ...rest
 }: ButtonGroupLinkProps) {
+  const kitLink = useKitLink();
   const props: ButtonGroupLinkRenderProps = {
     ...rest,
     href,
@@ -181,7 +185,8 @@ export function ButtonGroupLink({
     className: buttonClasses(variant, { size, className: cn(current && LINK_CURRENT, className) }),
     children,
   };
-  if (renderLink) return <RenderedGroupLink render={renderLink} {...props} />;
+  const render = pickLinkRenderer(renderLink, kitLink, href);
+  if (render) return <RenderedGroupLink render={render} {...props} />;
   const { children: content, ...anchor } = props;
   return <a {...anchor}>{content}</a>;
 }

package/src/components/calendar-heatmap.tsx

@@ -4,6 +4,8 @@ import { cn } from "../lib/cn";
 import { dirOf, horizontalStep } from "../lib/direction";
 import { addMonthsClamped, localeWeekStart, parseIsoDate, toLocalIso } from "../lib/dates";
 import { useKitLabels, useKitLocale, useKitWeekStart } from "../i18n/kit-labels";
+import { lerpHex, textOn } from "../theme/chart-palette";
+import { parseHex } from "../theme/color";
 import { Tooltip } from "./tooltip";
 import type { WeekDay } from "./mini-calendar";
 
@@ -103,6 +105,39 @@ export interface CalendarHeatmapProps extends Omit<ComponentPropsWithoutRef<"div
   /** 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.
@@ -131,6 +166,26 @@ const EMPTY_FILL = "color-mix(in oklab, var(--text-primary) 8%, var(--bg-surface
 
 const weekdayIndex = (d: Date, weekStart: WeekDay) => (d.getDay() - weekStart + 7) % 7;
 
+/** Where the window ends for an {@link CalendarHeatmapProps.anchor}, kept in `[from, to]`.
+ *  `latestData` is the latest ISO date carrying a value, or `""`. */
+export function heatmapWindowEnd(
+  from: string,
+  to: string,
+  anchor: string,
+  latestData: string,
+  today: string = toLocalIso(new Date()),
+): string {
+  let end: string;
+  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;
+  // ISO dates sort as strings, so the clamp is plain comparison.
+  if (end > to) end = to;
+  if (end < from) end = from;
+  return end;
+}
+
 /** The step a value falls on: 0 for nothing, else 1…levels by its share of `max`. */
 export function heatmapLevel(value: number, max: number, levels: number): number {
   if (!(value > 0) || !(max > 0) || levels < 1) return 0;
@@ -159,7 +214,9 @@ function levelFill(level: number, levels: number, color: string): string {
  * 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
@@ -178,6 +235,11 @@ export function CalendarHeatmap({
   max: maxProp,
   levels = 4,
   color = "var(--brand)",
+  colorFrom,
+  colorTo,
+  fill: fillProp,
+  emptyColor,
+  anchor = "to",
   maxDays,
   legend = true,
   locale: localeProp,
@@ -202,9 +264,16 @@ export function CalendarHeatmap({
 
   // The window, trimmed from the FRONT: the days a person looks for are the recent
   // ones, and a cap that kept the oldest would end the calendar before today.
+  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: Date[] = [];
     if (!start || !end || end < start) return { days: list, dropped: 0 };
     const cursor = new Date(end);
@@ -216,7 +285,7 @@ export function CalendarHeatmap({
     const first = list[0];
     const trimmed = first ? Math.round((first.getTime() - start.getTime()) / 86_400_000) : 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]) : "";
@@ -341,13 +410,43 @@ export function CalendarHeatmap({
   };
 
   const legendLevels = Array.from({ length: levels + 1 }, (_, l) => l);
+  const empty = emptyColor ?? EMPTY_FILL;
+  const continuous = colorFrom !== undefined && colorTo !== undefined;
+  const hexRamp = continuous && parseHex(colorFrom) != null && parseHex(colorTo) != null;
+
+  /** A day's fill, and the ink its number is set in (`"month"`). */
+  const paint = (value: number, level: number): { fill: string; ink: string } => {
+    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})`;
+      // Measured where the fill is a colour; a mix of references cannot be measured,
+      // and the page's own text colour is the safe answer there.
+      const measured = textOn(fill);
+      return { fill, ink: measured === "currentColor" ? "var(--text-primary)" : measured };
+    }
+    // Light text once the fill is the stronger half of the mix — `--bg-surface` is the
+    // colour the scale is mixed INTO, so it is the one that contrasts with its far end
+    // on either theme.
+    const strong = levelPercent(level, levels) >= 45;
+    return {
+      fill: levelFill(level, levels, color),
+      ink: strong ? "var(--bg-surface)" : "var(--text-primary)",
+    };
+  };
+  // The legend's swatches: a value that lands on each step (the top one on `max`).
+  const legendFill = (l: number) => paint(((max > 0 ? max : 1) * l) / levels, l).fill;
 
   const cell = (d: Date, wrapClass: string, cellClass: string, withNumber: boolean) => {
     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);
@@ -355,10 +454,6 @@ export function CalendarHeatmap({
       ? tooltip({ iso, date: d, value, hasData: raw !== undefined, level, formattedDate, formattedValue })
       : name;
     const isSelected = selected === iso;
-    // Light text once the fill is the stronger half of the mix — `--bg-surface` is the
-    // colour the scale is mixed INTO, so it is the one that contrasts with its far end
-    // on either theme.
-    const strong = level > 0 && levelPercent(level, levels) >= 45;
     const shared = {
       role: "gridcell",
       "data-day": iso,
@@ -370,7 +465,7 @@ export 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)]",
@@ -493,7 +588,7 @@ export function CalendarHeatmap({
               key={l}
               data-legend-level={l}
               className="size-2.5 rounded-sm"
-              style={{ background: levelFill(l, levels, color) }}
+              style={{ background: legendFill(l) }}
             />
           ))}
           <span className="ms-0.5">{labels.more}</span>

package/src/components/chart.tsx

@@ -8,7 +8,7 @@
 // The value on show is the *structure*: config-driven colors injected as CSS
 // vars, muted axis/grid styling, and a polished tooltip/legend — the things
 // that make shadcn charts read as "designed" rather than "default Recharts".
-import { createContext, useContext, useId, useRef } from "react";
+import { createContext, useContext, useId, useLayoutEffect, useRef, useState } from "react";
 import type { ComponentProps, CSSProperties, ReactNode, RefObject } from "react";
 import {
   Legend as RechartsLegend,
@@ -263,7 +263,7 @@ export function ChartTooltipContent({
   // `ChartTooltip` keeps null values (so they can print "—"), which also keeps the
   // series a legend toggle switched off with `hide`; those go here instead.
   const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);
-  if (!active || !items?.length) return null;
+  const visible = Boolean(active && items?.length);
   // Recharts anchors the tooltip at coordinate.x inside the full (scrolled) chart
   // width; subtract the container's scrollLeft to get its on-screen x, then flip
   // left if the tooltip's own width would run past the visible right edge.
@@ -272,16 +272,27 @@ export function ChartTooltipContent({
   // `ChartContainer`), but an RTL scroller counts `scrollLeft` from its right edge —
   // 0 at the start, negative going left — so there the content's left edge sits
   // `scrollWidth - clientWidth + scrollLeft` px to the left of the visible one.
-  let flip = false;
-  const boundary = boundaryRef?.current;
-  if (boundary && coordinate?.x != null) {
+  //
+  // Measured in a layout effect (the DOM is not readable during render), so it commits
+  // before paint. `payload` and `label` are deps because they change the tooltip's own
+  // width, and recharts hands a fresh `payload` on every tooltip render, so a scroll
+  // followed by any re-render is re-measured just as it was when this ran in render.
+  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 (
     <div
       ref={tipRef}

package/src/components/chip.tsx

@@ -5,7 +5,8 @@ import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
 import { FIELD_INVALID } from "./ui";
-import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink, useKitLocale } from "../i18n/kit-labels";
+import { pickLinkRenderer } from "./text-link";
 
 /**
  * A chip: a compact pill carrying one value.
@@ -384,7 +385,8 @@ export 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.
@@ -455,6 +457,7 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
   ref,
 ) {
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { remove: removeLabel });
+  const kitLink = useKitLink();
   const s = SIZE[size];
   const interactive = !!href || !!onClick;
   // One radius for every rounded piece — the pill, the body inside a split pill, the ×
@@ -570,10 +573,11 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
       className: remove ? inner : look,
       children: body,
     };
-    const link = renderLink ? (
+    const render = pickLinkRenderer(renderLink, kitLink, href);
+    const link = render ? (
       // Through a component rather than called here, so the forwarded ref arrives as
       // an ordinary prop of an element and is never handed to a function mid-render.
-      <RenderedLink render={renderLink} {...linkProps} />
+      <RenderedLink render={render} {...linkProps} />
     ) : (
       <a
         ref={ref as React.Ref<HTMLAnchorElement>}
@@ -617,6 +621,9 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
   }
 
   return (
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are
+       the roving-focus hooks, live only when the container passes `role` and `tabIndex`
+       (ChipInput does); the role is a prop, so the rule cannot see it. */
     <span
       ref={ref as React.Ref<HTMLSpanElement>}
       className={look}
@@ -889,6 +896,9 @@ export function ChipInput({
           {label}
         </label>
       )}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- a
+          pointer convenience that widens the input's hit area to the whole field; the
+          keyboard path is the <input> itself, which is in the tab order. */}
       <div
         // `relative` so the live region below can be `sr-only` without escaping to the
         // initial containing block and inflating the document height.