@eifi1/ui-kit 0.51.4 → 0.51.6

package/src/components/tile-radio.tsx

@@ -138,10 +138,8 @@ const TILE_BASE =
   FOCUS_RING +
   " focus-visible:ring-offset-2 focus-visible:ring-offset-surface " +
   "disabled:cursor-not-allowed disabled:opacity-50";
-const TILE_IDLE =
-  "border-subtle bg-surface hover:border-strong hover:bg-hover";
-const TILE_SELECTED =
-  "border-[var(--text-primary)] bg-surface ring-1 ring-[var(--text-primary)]";
+const TILE_IDLE = "border-subtle bg-surface hover:border-strong hover:bg-hover";
+const TILE_SELECTED = "border-[var(--text-primary)] bg-surface ring-1 ring-[var(--text-primary)]";
 /** A locked tile: the disabled look without `disabled` — dimmed, a not-allowed cursor. */
 const TILE_LOCKED = "cursor-not-allowed opacity-50";
 /** …and no hover offer on an idle one, which cannot be chosen. Not on the selected
@@ -180,15 +178,11 @@ export function TileRadioGroup<T extends string>({
   const noteId = useId();
   const reasonId = useId();
   const s = TILE_SIZE[size];
-  const checkedIndex =
-    checked === undefined ? -1 : items.findIndex((it) => it.key === checked);
+  const checkedIndex = checked === undefined ? -1 : items.findIndex((it) => it.key === checked);
   // The ONE tab stop: the checked tile, else the first that can be reached — the APG
   // rule, so Tab into a group with nothing checked still lands somewhere. A locked
   // tile is reachable: landing on it is how its reason is read.
-  const tabStop =
-    checkedIndex >= 0 && !isOff(items[checkedIndex])
-      ? checkedIndex
-      : items.findIndex((it) => !isOff(it));
+  const tabStop = checkedIndex >= 0 && !isOff(items[checkedIndex]) ? checkedIndex : items.findIndex((it) => !isOff(it));
 
   const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {
     // Left and right are VISUAL directions: in a right-to-left page the row runs the
@@ -269,19 +263,12 @@ export function TileRadioGroup<T extends string>({
               tileClassName?.(item, selected),
             )}
           >
-            {item.key === null ? (
-              <Ban aria-hidden className={cn(s.glyph, "text-muted")} />
-            ) : (
-              renderTile(item, selected)
-            )}
+            {item.key === null ? <Ban aria-hidden className={cn(s.glyph, "text-muted")} /> : renderTile(item, selected)}
             {item.note && (
               <>
                 {/* A dot rather than a dimmed tile: dimming reads as "disabled", and a
                     tile with a note is entirely available. */}
-                <span
-                  aria-hidden
-                  className="absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]"
-                />
+                <span aria-hidden className="absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]" />
                 {/* `hidden` still serves as a description: aria-describedby reads
                     hidden text, which is what keeps it out of the layout. */}
                 <span id={`${noteId}-${i}`} hidden>

package/src/components/time-input.tsx

@@ -35,11 +35,10 @@ import { cn } from "../lib/cn";
  * at the site"), a {@link FieldHint} rides the label line. `showCount` is typed out — a
  * time has no length worth counting.
  */
-export interface TimeInputProps
-  extends Omit<
-    InputProps,
-    "type" | "value" | "defaultValue" | "min" | "max" | "step" | "variant" | "showCount" | "countLabels"
-  > {
+export interface TimeInputProps extends Omit<
+  InputProps,
+  "type" | "value" | "defaultValue" | "min" | "max" | "step" | "variant" | "showCount" | "countLabels"
+> {
   /** `"HH:mm"` (or `"HH:mm:ss"` with a sub-minute `step`); `""` is "no time". */
   value: string;
   /** The normalised value on every change the browser reports — which for a time

package/src/components/toast.tsx

@@ -140,8 +140,7 @@ const privately = (node: ReactNode) => <span data-private="">{node}</span>;
  * whitespace-free class token.
  */
 const ID_CLASS = "kit-toast-id-";
-const idClass = (id: ToastId) =>
-  `${ID_CLASS}${typeof id === "number" ? "n" : "s"}-${encodeURIComponent(String(id))}`;
+const idClass = (id: ToastId) => `${ID_CLASS}${typeof id === "number" ? "n" : "s"}-${encodeURIComponent(String(id))}`;
 
 /** The id {@link idClass} stamped on a toast element, or null for a toast the kit did
  *  not make (an app still calling sonner directly). */
@@ -284,13 +283,7 @@ export const toast = Object.assign(
 
 /* ── The Toaster ─────────────────────────────────────────────────────────── */
 
-export type ToastPosition =
-  | "top-left"
-  | "top-center"
-  | "top-right"
-  | "bottom-left"
-  | "bottom-center"
-  | "bottom-right";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 
 export type ToastSwipeDirection = "top" | "right" | "bottom" | "left";
 
@@ -381,9 +374,7 @@ const ALL_DIRECTIONS: ToastSwipeDirection[] = ["top", "right", "bottom", "left"]
 
 /** Light or dark, as the `.dark` class on `<html>` says right now. */
 function readDocumentTheme(): "light" | "dark" {
-  return typeof document !== "undefined" && document.documentElement.classList.contains("dark")
-    ? "dark"
-    : "light";
+  return typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light";
 }
 
 function subscribeDocumentTheme(onChange: () => void): () => void {

package/src/components/toggle-group.tsx

@@ -37,8 +37,7 @@ export interface ToggleOption<T extends string> {
  * worse than one that does not compile.
  */
 export interface ToggleGroupBaseProps<T extends string>
-  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children">,
-    FieldHelpProps {
+  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children">, FieldHelpProps {
   options: ToggleOption<T>[];
   className?: string;
   /** Applied to every option button (e.g. to tune height/rounding to match
@@ -354,9 +353,7 @@ export interface ToggleGroupClearableProps<T extends string> extends ToggleGroup
 
 /** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group
  *  can actually emit `null` — no existing caller has a `null` to handle. */
-export type ToggleGroupProps<T extends string> =
-  | ToggleGroupRequiredProps<T>
-  | ToggleGroupClearableProps<T>;
+export type ToggleGroupProps<T extends string> = ToggleGroupRequiredProps<T> | ToggleGroupClearableProps<T>;
 
 /**
  * Overloaded rather than typed by the union alone (keksdose, "Gaps found adopting
@@ -542,9 +539,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
           field && CHROME_SEGMENT[size],
           // In the strip placement: a 22px group under a 20px strip — STRIP_SEGMENT.
           strip && STRIP_SEGMENT[size],
-          active
-            ? "bg-inverse text-inverse"
-            : "text-secondary hover:bg-hover",
+          active ? "bg-inverse text-inverse" : "text-secondary hover:bg-hover",
           // No hover fill on a group that cannot be changed — a segment that
           // lights up under the pointer is an offer, and there is none here. Not on
           // the chosen segment: its fill IS its state, and its inverse text would
@@ -578,7 +573,12 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
       aria-labelledby={labelled && ariaLabelAttr === undefined ? labelId : rest["aria-labelledby"]}
       aria-invalid={hasError || rest["aria-invalid"] || undefined}
       aria-describedby={
-        [rest["aria-describedby"], hintAsCaption !== undefined && hintCaptionId, hasCaption && captionId, hasError && errorId]
+        [
+          rest["aria-describedby"],
+          hintAsCaption !== undefined && hintCaptionId,
+          hasCaption && captionId,
+          hasError && errorId,
+        ]
           .filter(Boolean)
           .join(" ") || undefined
       }

package/src/components/toggle-legend.tsx

@@ -26,13 +26,7 @@ import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-ch
  * Kept here, beside the legend's own mark, and read by `SeriesChart` from here — so
  * the key under a chart and the lines on it cannot disagree.
  */
-export const STROKE_PATTERNS: readonly (string | undefined)[] = [
-  undefined,
-  "5 4",
-  "1 3",
-  "9 3 2 3",
-  "9 3 2 3 2 3",
-];
+export const STROKE_PATTERNS: readonly (string | undefined)[] = [undefined, "5 4", "1 3", "9 3 2 3", "9 3 2 3 2 3"];
 
 /** The dash array for the nth pattern, wrapping past the fifth. */
 export function strokeDash(order: number): string | undefined {
@@ -79,8 +73,7 @@ export function toggleHidden(hidden: ReadonlySet<string>, key: string): Readonly
  * A caller that places its legend itself and wants it kept beside the chart at every
  * size overrides with `large:col-auto large:basis-auto`.
  */
-const UNDER_THE_CHART_AT_LARGE =
-  "large:order-last large:col-span-full large:basis-full large:[*:has(>&)]:flex-wrap";
+const UNDER_THE_CHART_AT_LARGE = "large:order-last large:col-span-full large:basis-full large:[*:has(>&)]:flex-wrap";
 
 /** A vertical legend's entries from Large up: across, wrapping — it is under the chart
  *  now (see {@link UNDER_THE_CHART_AT_LARGE}), where a column of entries would be a
@@ -284,10 +277,7 @@ export function StaticLegend({
       {entries.map((entry) => (
         <Item
           key={entry.key}
-          className={cn(
-            "flex items-center gap-1.5 text-caption text-secondary",
-            entry.align === "end" && "ms-auto",
-          )}
+          className={cn("flex items-center gap-1.5 text-caption text-secondary", entry.align === "end" && "ms-auto")}
         >
           <LegendMark entry={entry} off={false} />
           {entry.label}
@@ -335,9 +325,7 @@ export function LegendColumn({ children, className }: { children: ReactNode; cla
 export function LegendGroup({ title, children }: { title: ReactNode; children: ReactNode }) {
   return (
     <div className="flex min-w-0 flex-col items-start gap-1">
-      <span className="text-micro font-semibold uppercase tracking-wide text-muted">
-        {title}
-      </span>
+      <span className="text-micro font-semibold uppercase tracking-wide text-muted">{title}</span>
       <div className="flex flex-col items-start gap-y-0.5">{children}</div>
     </div>
   );

package/src/components/tooltip.tsx

@@ -382,14 +382,7 @@ export function Tooltip({
   if (isEmptyLabel(label)) return <>{children}</>;
   if (portal === true) {
     return (
-      <PortalTooltip
-        label={label}
-        side={side}
-        className={className}
-        redact={redact}
-        tap={tap}
-        {...rest}
-      >
+      <PortalTooltip label={label} side={side} className={className} redact={redact} tap={tap} {...rest}>
         {children}
       </PortalTooltip>
     );
@@ -413,7 +406,6 @@ export function Tooltip({
   );
 }
 
-
 /** The pointer handlers a caller may hand {@link Tooltip} that the trigger also needs:
  *  both run, the trigger's first. (The mouse and focus handlers are the trigger's alone,
  *  as they have always been.) */
@@ -731,9 +723,7 @@ function InPlaceTooltip({
       {/* In place the bubble is always there to point at; portalled or lazy, only while up. */}
       {describedBy(children, clipped || lazy ? (open ? id : undefined) : dismissed ? undefined : id)}
       {clipped ? (
-        open && (
-          <PortalBubble triggerRef={triggerRef} id={id} label={label} side={side} dir={dir} redact={redact} />
-        )
+        open && <PortalBubble triggerRef={triggerRef} id={id} label={label} side={side} dir={dir} redact={redact} />
       ) : lazy ? (
         // keksdose F6: the in-place slot and classes, the portalled lifetime. Mounted only
         // while up, so it is visible whenever it exists.
@@ -795,11 +785,7 @@ function describedBy(children: ReactNode, id: string | undefined): ReactNode {
  *  it has nothing to say — `""`, `null`, `undefined`, `false` from a `&&` guard. A
  *  numeric `0` is a real label and stays one. */
 function isEmptyLabel(label: ReactNode): boolean {
-  return (
-    label == null ||
-    label === false ||
-    (typeof label === "string" && label.trim() === "")
-  );
+  return label == null || label === false || (typeof label === "string" && label.trim() === "");
 }
 
 const TOOLTIP_GAP = 4;
@@ -878,10 +864,7 @@ function useViewportClamp(
   // new label, side or direction — is not measured yet, and renders clipped until it is.
   const [placement, setPlacement] = useState<Placement>(UNPLACED);
   const measured =
-    placement.for !== null &&
-    placement.for.side === side &&
-    placement.for.label === label &&
-    placement.for.dir === dir;
+    placement.for !== null && placement.for.side === side && placement.for.label === label && placement.for.dir === dir;
   useLayoutEffect(() => {
     const el = bubbleRef.current;
     if (!active || !el) {
@@ -939,10 +922,7 @@ const portalTransformBySide: Record<PhysicalSide, string> = {
 
 /** Anchor point (viewport px) for the tooltip on the given side of `r`. Paired
  *  with {@link portalTransformBySide}, which shifts the box onto that point. */
-function tooltipAnchor(
-  r: AnchorRect,
-  side: PhysicalSide,
-): { left: number; top: number } {
+function tooltipAnchor(r: AnchorRect, side: PhysicalSide): { left: number; top: number } {
   switch (side) {
     case "right":
       return { left: r.right + TOOLTIP_GAP, top: r.top + r.height / 2 };
@@ -980,12 +960,7 @@ const opposite: Record<PhysicalSide, PhysicalSide> = {
 };
 
 /** Whether the bubble clears the viewport edge on `side` of the trigger. */
-function roomOn(
-  r: AnchorRect,
-  side: PhysicalSide,
-  size: TooltipSize,
-  viewport: TooltipViewport,
-): boolean {
+function roomOn(r: AnchorRect, side: PhysicalSide, size: TooltipSize, viewport: TooltipViewport): boolean {
   switch (side) {
     case "left":
       return r.left - TOOLTIP_GAP - size.width >= TOOLTIP_MARGIN;
@@ -1045,10 +1020,7 @@ export function placeTooltip(
   size: TooltipSize,
   viewport: TooltipViewport,
 ): TooltipPlacement {
-  const chosen =
-    roomOn(r, side, size, viewport) || !roomOn(r, opposite[side], size, viewport)
-      ? side
-      : opposite[side];
+  const chosen = roomOn(r, side, size, viewport) || !roomOn(r, opposite[side], size, viewport) ? side : opposite[side];
   const point = tooltipAnchor(r, chosen);
   const box =
     chosen === "left"
@@ -1065,16 +1037,7 @@ export function placeTooltip(
   };
 }
 
-function PortalTooltip({
-  label,
-  side,
-  className,
-  redact,
-  tap,
-  children,
-  ref,
-  ...rest
-}: TooltipVariantProps) {
+function PortalTooltip({ label, side, className, redact, tap, children, ref, ...rest }: TooltipVariantProps) {
   const { triggerRef, setTrigger } = useTriggerRef(ref);
   // The trigger's reading direction, read when the bubble is asked for (an event, not a
   // render): it resolves `start` / `end`, and the portalled bubble — which has left the
@@ -1103,9 +1066,7 @@ function PortalTooltip({
       >
         {describedBy(children, open ? id : undefined)}
       </span>
-      {open && (
-        <PortalBubble triggerRef={triggerRef} id={id} label={label} side={side} dir={dir} redact={redact} />
-      )}
+      {open && <PortalBubble triggerRef={triggerRef} id={id} label={label} side={side} dir={dir} redact={redact} />}
     </>
   );
 }

package/src/components/translation-review-editor.tsx

@@ -147,9 +147,7 @@ export function TranslationReviewEditor({
     const trimmedNote = note.trim() || null;
     // Approving says the text is right as it stands: there is no wording to suggest.
     const sent = verdict === "APPROVED" ? null : suggestion.trim() || null;
-    void run(verdict === "APPROVED" ? "approve" : "flag", () =>
-      onSave(reviewWrite(row, verdict, trimmedNote, sent)),
-    );
+    void run(verdict === "APPROVED" ? "approve" : "flag", () => onSave(reviewWrite(row, verdict, trimmedNote, sent)));
   };
 
   return (
@@ -212,7 +210,9 @@ export function TranslationReviewEditor({
       {/* Read-only: what the reviewer said, as text — the fields are for saying it. */}
       {!editable && review?.verdict === "NEEDS_CHANGE" && (review.suggestion || review.note) && (
         <div className="space-y-2">
-          {review.suggestion && <Then label={missing ? labels.translation : labels.suggestion} text={review.suggestion} />}
+          {review.suggestion && (
+            <Then label={missing ? labels.translation : labels.suggestion} text={review.suggestion} />
+          )}
           {review.note && <Then label={labels.note} text={review.note} />}
         </div>
       )}

package/src/components/translation-review-parts.tsx

@@ -173,7 +173,13 @@ export interface TranslationLocaleTabsProps {
  * strip's caret saying it goes on (`overflowCue`). Nothing for a single locale:
  * a strip with one tab is a heading that looks clickable.
  */
-export function TranslationLocaleTabs({ locales, active, onChange, className, labels: labelsProp }: TranslationLocaleTabsProps) {
+export function TranslationLocaleTabs({
+  locales,
+  active,
+  onChange,
+  className,
+  labels: labelsProp,
+}: TranslationLocaleTabsProps) {
   const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
   if (locales.length < 2) return null;
   return (

package/src/components/translation-review.tsx

@@ -324,7 +324,6 @@ export interface TranslationReviewPanelProps {
   labels?: LabelOverride<TranslationReviewLabels>;
 }
 
-
 /**
  * How many rows the groups may render at once on a wide screen before they start folded
  * ({@link TranslationReviewPanelProps.defaultGroupsOpen}): two of the default 50-row pages.
@@ -432,7 +431,10 @@ function TextCell({ row, labels, clamp }: { row: TranslationRow; labels: Transla
   return row.text === "" ? (
     <span className="italic text-muted">{labels.missingText}</span>
   ) : (
-    <span lang={row.locale} className={cn("whitespace-pre-line break-words", clamp && "line-clamp-3 large:line-clamp-none")}>
+    <span
+      lang={row.locale}
+      className={cn("whitespace-pre-line break-words", clamp && "line-clamp-3 large:line-clamp-none")}
+    >
       {row.text}
     </span>
   );
@@ -670,7 +672,12 @@ export function TranslationReviewPanel({
   ): Promise<boolean> => {
     if (!onSave || targets.length === 0) return false;
     const save = onSave;
-    const ok = await run(key, () => save(targets.map((r) => reviewWrite(r, "APPROVED")), { origin, toasted: undoOn }));
+    const ok = await run(key, () =>
+      save(
+        targets.map((r) => reviewWrite(r, "APPROVED")),
+        { origin, toasted: undoOn },
+      ),
+    );
     if (ok && undoOn) sayDone(targets, description);
     return ok;
   };
@@ -764,9 +771,7 @@ export function TranslationReviewPanel({
     {
       key: "reference",
       header: referenceLabel,
-      cell: (r) => (
-        <span className="line-clamp-3 whitespace-pre-line break-words text-secondary">{r.reference}</span>
-      ),
+      cell: (r) => <span className="line-clamp-3 whitespace-pre-line break-words text-secondary">{r.reference}</span>,
       mobileHidden: true,
     },
     {
@@ -805,11 +810,9 @@ export function TranslationReviewPanel({
         name: (r) => r.key,
         tooltipSide: "start",
         actions: (r) =>
-          translationReviewSwipePlan(
-            { end: ["approve", ...(binding.end ?? []), ...(binding.start ?? [])] },
-            r,
-            { canClear: onClear !== undefined },
-          ).end.map((id): RowAction => {
+          translationReviewSwipePlan({ end: ["approve", ...(binding.end ?? []), ...(binding.start ?? [])] }, r, {
+            canClear: onClear !== undefined,
+          }).end.map((id): RowAction => {
             const swipe = swipeAction(r, id);
             // `edit` only opens the editor, whose own Save is the commit.
             const writes = id !== "edit";
@@ -1230,11 +1233,7 @@ export function TranslationReviewPanel({
         </BulkActionBar>
       )}
 
-      {groups && groups.length > 0 ? (
-        <div className="space-y-3">{groups.map(groupSection)}</div>
-      ) : (
-        table(visible)
-      )}
+      {groups && groups.length > 0 ? <div className="space-y-3">{groups.map(groupSection)}</div> : table(visible)}
     </div>
   );
 }

package/src/components/tree-view.tsx

@@ -153,9 +153,7 @@ export function TreeRow({
       style={{ paddingInlineStart: ROW_PAD + depth * indent, ...style }}
       className={cn(
         "relative flex min-h-8 items-center gap-1.5 rounded pe-2 text-sm",
-        selected
-          ? "bg-active font-medium text-primary"
-          : "text-secondary",
+        selected ? "bg-active font-medium text-primary" : "text-secondary",
         className,
       )}
     >
@@ -183,12 +181,18 @@ export function TreeRow({
             e.stopPropagation();
             onToggle();
           }}
-          className={cn("flex size-4 shrink-0 items-center justify-center rounded text-muted outline-none hover:text-primary", FOCUS_RING)}
+          className={cn(
+            "flex size-4 shrink-0 items-center justify-center rounded text-muted outline-none hover:text-primary",
+            FOCUS_RING,
+          )}
         >
           {chevron}
         </button>
       ) : expandable ? (
-        <span data-tree-toggle="" className="flex size-4 shrink-0 cursor-pointer items-center justify-center text-muted">
+        <span
+          data-tree-toggle=""
+          className="flex size-4 shrink-0 cursor-pointer items-center justify-center text-muted"
+        >
           {chevron}
         </span>
       ) : (
@@ -203,9 +207,7 @@ export function TreeRow({
             {label}
           </span>
           {trailing !== undefined && trailing !== null && (
-            <span className="ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-muted">
-              {trailing}
-            </span>
+            <span className="ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-muted">{trailing}</span>
           )}
         </>
       )}
@@ -215,8 +217,10 @@ export function TreeRow({
 
 /* ── TreeView ────────────────────────────────────────────────────────────── */
 
-export interface TreeViewProps<T = unknown>
-  extends Omit<ComponentPropsWithRef<"ul">, "onSelect" | "children" | "defaultValue"> {
+export interface TreeViewProps<T = unknown> extends Omit<
+  ComponentPropsWithRef<"ul">,
+  "onSelect" | "children" | "defaultValue"
+> {
   items: readonly TreeNode<T>[];
   /** Open nodes, controlled. */
   expanded?: readonly string[];
@@ -285,14 +289,8 @@ export function TreeView<T = unknown>({
   onClick,
   ...rest
 }: TreeViewProps<T>) {
-  const [expandedList, setExpandedOwn] = useControllable<readonly string[]>(
-    expandedProp,
-    defaultExpanded ?? [],
-  );
-  const [selected, setSelectedOwn] = useControllable<string | null>(
-    selectedProp,
-    defaultSelected ?? null,
-  );
+  const [expandedList, setExpandedOwn] = useControllable<readonly string[]>(expandedProp, defaultExpanded ?? []);
+  const [selected, setSelectedOwn] = useControllable<string | null>(selectedProp, defaultSelected ?? null);
   const expandedSet = useMemo(() => new Set(expandedList), [expandedList]);
   const [loading, setLoading] = useState<ReadonlySet<string>>(() => new Set());
   const [focusedId, setFocusedId] = useState<string | null>(null);
@@ -327,8 +325,7 @@ export function TreeView<T = unknown>({
     while (cur && !visibleIds.has(cur)) cur = byId.get(cur)?.parentId ?? null;
     return cur;
   };
-  const tabbable =
-    nearestVisible(focusedId) ?? nearestVisible(selected) ?? visible[0]?.node.id ?? null;
+  const tabbable = nearestVisible(focusedId) ?? nearestVisible(selected) ?? visible[0]?.node.id ?? null;
 
   useEffect(() => {
     const id = pendingFocus.current;

package/src/components/treemap.tsx

@@ -111,6 +111,44 @@ export interface TreemapProps extends Omit<ComponentPropsWithoutRef<"div">, "chi
    * so a caller colouring a legend beside the map is guaranteed the same list.
    */
   colors?: readonly string[];
+  /**
+   * How tiles are parted (0.51.6, keksdose dev #642, Marcel: "The borders do not look
+   * nice when changing from tile to tile. Can this be uniform black?" — and then, on the
+   * contrast rule that would go with it: follow the contrast setting).
+   *
+   * - `"auto"` (default): `"uniform"` at Standard contrast, `"contrast"` while More
+   *   contrast is in force (`<html data-contrast="more">`: the reader chose it, or chose
+   *   System on a device that asks for more). Followed live.
+   * - `"uniform"`: one 2px gutter in the page's ground colour (`--bg-page`, near-black
+   *   in the dark theme) round every tile, and nothing else. Tiles always abut, so the
+   *   gutter parts them; each tile is named by its label.
+   * - `"contrast"`: the 0.49 rule. The gutter is the card's colour (`--bg-surface`),
+   *   and a tile whose hue is under 3:1 against the card gets a 1px ink edge inside it
+   *   (WCAG 1.4.11, `useChartEdge`). In the dark theme that ink is light, so some tiles
+   *   carry a white outline and their neighbours none — the unevenness #642 saw, and
+   *   the price of the edge for a reader who asked for it.
+   */
+  edges?: TreemapEdges;
+}
+
+/** {@link TreemapProps.edges}. */
+export type TreemapEdges = "auto" | "uniform" | "contrast";
+
+// `<html data-contrast>`, followed live: what `edges="auto"` keys on. Read here rather
+// than through theme/contrast, whose store would come into the chart entry with it.
+function subscribeContrast(onChange: () => void): () => void {
+  if (typeof MutationObserver === "undefined" || typeof document === "undefined") return () => {};
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-contrast"] });
+  return () => observer.disconnect();
+}
+const readMoreContrast = () =>
+  typeof document !== "undefined" && document.documentElement.getAttribute("data-contrast") === "more";
+
+/** The edges a tile draws: `auto` resolved against the contrast in force. */
+function useTileEdges(edges: TreemapEdges): "uniform" | "contrast" {
+  const more = useSyncExternalStore(subscribeContrast, readMoreContrast, () => false);
+  return edges === "auto" ? (more ? "contrast" : "uniform") : edges;
 }
 
 // ── The categorical ramp, as concrete hex ──────────────────────────────────
@@ -218,6 +256,8 @@ export interface TreemapCellProps {
    *  the label stands in the tile's top RIGHT corner and is shaped right-to-left, so a
    *  clipped name ends in its ellipsis on the reading end. Default `ltr`. */
   dir?: Direction;
+  /** See {@link TreemapProps.edges}. Default `auto`. */
+  edges?: TreemapEdges;
 }
 
 /**
@@ -245,11 +285,13 @@ export function TreemapCell({
   redactNames,
   nodeNote,
   dir = "ltr",
+  edges: edgesProp = "auto",
 }: TreemapCellProps) {
   // Before the early return: a hook has to run on every render of the cell.
   const tokenHex = useChartTokenHex();
   const { scale } = useTextSize();
   const edgeFor = useChartEdge();
+  const edges = useTileEdges(edgesProp);
   // Depth 0 is recharts' synthetic root, which spans the whole chart.
   if (!depth) return null;
   // Whole pixels: a rect on a half pixel renders its edge across two half-lit
@@ -261,9 +303,10 @@ export function TreemapCell({
   const tileFill = fill ?? "var(--chart-1)";
   const measured = measurableFill(tileFill, tokenHex);
   const ink = labelColor ?? (measured ? textOn(measured) : "currentColor");
-  // A tile in a hue under 3:1 against the card gets a 1px ink edge inside the gutter
-  // (WCAG 1.4.11, anyplot's rule); a hue that clears it stays bare.
-  const edge = measured ? edgeFor(measured) : undefined;
+  // `contrast`: a tile in a hue under 3:1 against the card gets a 1px ink edge inside
+  // the gutter (WCAG 1.4.11, anyplot's rule); a hue that clears it stays bare.
+  // `uniform`: no per-tile edge; every tile is parted by the same gutter.
+  const edge = edges === "contrast" && measured ? edgeFor(measured) : undefined;
   // The halo only on an OPAQUE fill we could measure. A translucent fill (a
   // `color-mix(… transparent)`) composited twice — once as the tile, once as the halo
   // over it — draws a darker ring round every glyph, which read as doubled text on the
@@ -279,8 +322,7 @@ export function TreemapCell({
   // 29px down and an 11px glyph hangs ~2px below it, so 36 leaves the same ~5px under
   // the note that the label keeps under itself at the 20px floor.
   const rawNote = id != null && nodeNote ? nodeNote(id) : undefined;
-  const note =
-    label != null && rawNote != null && ph >= 36 * scale ? fitLabel(rawNote, pw, noteSize) : null;
+  const note = label != null && rawNote != null && ph >= 36 * scale ? fitLabel(rawNote, pw, noteSize) : null;
   // The label's START edge, 6px in from the tile's. The tiles themselves are laid out
   // physically (the plot is not mirrored, see `ChartContainer`) and the chart's SVG is
   // pinned `ltr`, so the direction is set on each <text> explicitly: `start` is then
@@ -310,15 +352,16 @@ export function TreemapCell({
       // for as long as the tile has keyboard focus.
       className={activate ? "outline-none [&:focus-visible>rect]:stroke-[var(--brand)]" : undefined}
     >
-      {/* The 2px gutter is the card showing through, not a white grid — on a dark
-          surface white lines glare harder than the tiles. */}
+      {/* The 2px gutter: the page's ground (`uniform`, the same dark line round every
+          tile in the dark theme) or the card showing through (`contrast`). Never a white
+          grid: on a dark surface white lines glare harder than the tiles. */}
       <rect
         x={px}
         y={py}
         width={pw}
         height={ph}
         fill={tileFill}
-        stroke="var(--bg-surface)"
+        stroke={edges === "contrast" ? "var(--bg-surface)" : "var(--bg-page)"}
         strokeWidth={2}
         rx={3}
       />
@@ -428,6 +471,7 @@ export function Treemap({
   nodeNote,
   maxTiles,
   colors,
+  edges = "auto",
   style,
   ...rest
 }: TreemapProps) {
@@ -482,7 +526,13 @@ export function Treemap({
         fill="var(--chart-1)"
         isAnimationActive={false}
         content={
-          <TreemapCell onNodeClick={onNodeClick} redactNames={redactNames} nodeNote={nodeNote} dir={dir} />
+          <TreemapCell
+            onNodeClick={onNodeClick}
+            redactNames={redactNames}
+            nodeNote={nodeNote}
+            dir={dir}
+            edges={edges}
+          />
         }
       >
         <ChartTooltip content={<Content hideLabel valueFormatter={format} />} />