@adecore/ui 0.39.0 → 0.40.1

package/dist/tabs/parts.js

@@ -1,5 +1,5 @@
 import { c as _c } from "react/compiler-runtime";
-import { Children, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Children, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { ChevronDown, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -21,7 +21,6 @@ const SelectionContext = createContext({
 const InMenuContext = createContext(false);
 /* The underline sits over the strip's border rather than above it, without a negative margin that would make the strip scroll. */
 const TAB = 'relative flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap text-xs font-medium text-text-muted hover:text-text data-[active]:text-text data-[disabled]:opacity-50 after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 data-[active]:after:bg-text';
-/* The button that opens the tabs that do not fit reads as one more tab, at the very end of the strip. */
 const MORE = clsx(TAB, 'ml-auto data-[popup-open]:text-text');
 /* A tab as a key in a bar, for tabs that share a toolbar with buttons and must not read as the tabs of a pane under it. */
 const PILL = 'relative flex h-7 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-xs font-medium text-text-muted hover:bg-surface-hover hover:text-text data-[active]:bg-surface-active data-[active]:text-text data-[disabled]:opacity-50 has-[button]:pr-1';
@@ -149,9 +148,8 @@ export function TabsRoot(t0) {
 }
 const sameIndices = (left, right) => left !== null && left.length === right.length && left.every((index, at) => index === right[at]);
 /*
- * The tabs that fit, and a menu at the end of the strip with the ones that do not. Every tab is measured
- * in a row nobody sees, so the strip knows what fits before it draws. The tabs are the direct children,
- * since the menu repeats what a tab holds.
+ * Every tab is measured in a row nobody sees, so the strip knows what fits before it draws. The tabs
+ * are the direct children, since the menu repeats what a tab holds.
  */
 export function TabsList(t0) {
   const $ = _c(48);
@@ -503,7 +501,7 @@ function _temp(child) {
   return isValidElement(child) && child.type === TabsTab;
 }
 export function TabsTab(t0) {
-  const $ = _c(52);
+  const $ = _c(46);
   let children;
   let className;
   let onClose;
@@ -535,7 +533,7 @@ export function TabsTab(t0) {
     t
   } = useTranslation("ui");
   const tab = STYLES[useContext(VariantContext)].tab;
-  if (pinned) {
+  if (pinned || onClose === undefined) {
     let t2;
     if ($[6] !== className || $[7] !== tab) {
       t2 = withClass(tab, className);
@@ -545,11 +543,12 @@ export function TabsTab(t0) {
     } else {
       t2 = $[8];
     }
-    let t3;
-    if ($[9] !== children || $[10] !== props || $[11] !== t2) {
-      t3 = /*#__PURE__*/_jsx(BaseTabs.Tab, {
+    const t3 = pinned ? "" : undefined;
+    let t4;
+    if ($[9] !== children || $[10] !== props || $[11] !== t2 || $[12] !== t3) {
+      t4 = /*#__PURE__*/_jsx(BaseTabs.Tab, {
         className: t2,
-        "data-pinned": "",
+        "data-pinned": t3,
         ...props,
         children: children
       });
@@ -557,61 +556,36 @@ export function TabsTab(t0) {
       $[10] = props;
       $[11] = t2;
       $[12] = t3;
+      $[13] = t4;
     } else {
-      t3 = $[12];
+      t4 = $[13];
     }
-    return t3;
-  }
-  if (onClose === undefined) {
-    let t2;
-    if ($[13] !== className || $[14] !== tab) {
-      t2 = withClass(tab, className);
-      $[13] = className;
-      $[14] = tab;
-      $[15] = t2;
-    } else {
-      t2 = $[15];
-    }
-    let t3;
-    if ($[16] !== children || $[17] !== props || $[18] !== t2) {
-      t3 = /*#__PURE__*/_jsx(BaseTabs.Tab, {
-        className: t2,
-        ...props,
-        children: children
-      });
-      $[16] = children;
-      $[17] = props;
-      $[18] = t2;
-      $[19] = t3;
-    } else {
-      t3 = $[19];
-    }
-    return t3;
+    return t4;
   }
   let onAuxClick;
   let onKeyDown;
   let onMouseDown;
   let rest;
-  if ($[20] !== props) {
+  if ($[14] !== props) {
     ({
       onKeyDown,
       onAuxClick,
       onMouseDown,
       ...rest
     } = props);
-    $[20] = props;
-    $[21] = onAuxClick;
-    $[22] = onKeyDown;
-    $[23] = onMouseDown;
-    $[24] = rest;
+    $[14] = props;
+    $[15] = onAuxClick;
+    $[16] = onKeyDown;
+    $[17] = onMouseDown;
+    $[18] = rest;
   } else {
-    onAuxClick = $[21];
-    onKeyDown = $[22];
-    onMouseDown = $[23];
-    rest = $[24];
+    onAuxClick = $[15];
+    onKeyDown = $[16];
+    onMouseDown = $[17];
+    rest = $[18];
   }
   let t2;
-  if ($[25] !== onClose || $[26] !== onKeyDown) {
+  if ($[19] !== onClose || $[20] !== onKeyDown) {
     t2 = e => {
       onKeyDown?.(e);
       if (!e.defaultPrevented && e.target === e.currentTarget && (e.key === "Delete" || e.key === "Backspace")) {
@@ -619,29 +593,29 @@ export function TabsTab(t0) {
         onClose();
       }
     };
-    $[25] = onClose;
-    $[26] = onKeyDown;
-    $[27] = t2;
+    $[19] = onClose;
+    $[20] = onKeyDown;
+    $[21] = t2;
   } else {
-    t2 = $[27];
+    t2 = $[21];
   }
   const handleKeyDown = t2;
   let t3;
-  if ($[28] !== onMouseDown) {
+  if ($[22] !== onMouseDown) {
     t3 = e_0 => {
       onMouseDown?.(e_0);
       if (e_0.button === 1) {
         e_0.preventDefault();
       }
     };
-    $[28] = onMouseDown;
-    $[29] = t3;
+    $[22] = onMouseDown;
+    $[23] = t3;
   } else {
-    t3 = $[29];
+    t3 = $[23];
   }
   const handleMouseDown = t3;
   let t4;
-  if ($[30] !== onAuxClick || $[31] !== onClose) {
+  if ($[24] !== onAuxClick || $[25] !== onClose) {
     t4 = e_1 => {
       onAuxClick?.(e_1);
       if (!e_1.defaultPrevented && e_1.button === 1) {
@@ -649,50 +623,50 @@ export function TabsTab(t0) {
         onClose();
       }
     };
-    $[30] = onAuxClick;
-    $[31] = onClose;
-    $[32] = t4;
+    $[24] = onAuxClick;
+    $[25] = onClose;
+    $[26] = t4;
   } else {
-    t4 = $[32];
+    t4 = $[26];
   }
   const handleAuxClick = t4;
   let t5;
-  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
     t5 = /*#__PURE__*/_jsx("div", {});
-    $[33] = t5;
+    $[27] = t5;
   } else {
-    t5 = $[33];
+    t5 = $[27];
   }
   let t6;
-  if ($[34] !== className || $[35] !== tab) {
+  if ($[28] !== className || $[29] !== tab) {
     t6 = withClass(tab, className);
-    $[34] = className;
-    $[35] = tab;
-    $[36] = t6;
+    $[28] = className;
+    $[29] = tab;
+    $[30] = t6;
   } else {
-    t6 = $[36];
+    t6 = $[30];
   }
   let t7;
-  if ($[37] !== t) {
+  if ($[31] !== t) {
     t7 = t("tabs.close");
-    $[37] = t;
-    $[38] = t7;
+    $[31] = t;
+    $[32] = t7;
   } else {
-    t7 = $[38];
+    t7 = $[32];
   }
   let t8;
-  if ($[39] !== onClose) {
+  if ($[33] !== onClose) {
     t8 = e_2 => {
       e_2.stopPropagation();
       onClose();
     };
-    $[39] = onClose;
-    $[40] = t8;
+    $[33] = onClose;
+    $[34] = t8;
   } else {
-    t8 = $[40];
+    t8 = $[34];
   }
   let t9;
-  if ($[41] !== t7 || $[42] !== t8) {
+  if ($[35] !== t7 || $[36] !== t8) {
     t9 = /*#__PURE__*/_jsx(IconButton, {
       icon: X,
       size: "2xs",
@@ -700,14 +674,14 @@ export function TabsTab(t0) {
       tabIndex: -1,
       onClick: t8
     });
-    $[41] = t7;
-    $[42] = t8;
-    $[43] = t9;
+    $[35] = t7;
+    $[36] = t8;
+    $[37] = t9;
   } else {
-    t9 = $[43];
+    t9 = $[37];
   }
   let t10;
-  if ($[44] !== children || $[45] !== handleAuxClick || $[46] !== handleKeyDown || $[47] !== handleMouseDown || $[48] !== rest || $[49] !== t6 || $[50] !== t9) {
+  if ($[38] !== children || $[39] !== handleAuxClick || $[40] !== handleKeyDown || $[41] !== handleMouseDown || $[42] !== rest || $[43] !== t6 || $[44] !== t9) {
     t10 = /*#__PURE__*/_jsxs(BaseTabs.Tab, {
       nativeButton: false,
       render: t5,
@@ -718,21 +692,21 @@ export function TabsTab(t0) {
       ...rest,
       children: [children, t9]
     });
-    $[44] = children;
-    $[45] = handleAuxClick;
-    $[46] = handleKeyDown;
-    $[47] = handleMouseDown;
-    $[48] = rest;
-    $[49] = t6;
-    $[50] = t9;
-    $[51] = t10;
+    $[38] = children;
+    $[39] = handleAuxClick;
+    $[40] = handleKeyDown;
+    $[41] = handleMouseDown;
+    $[42] = rest;
+    $[43] = t6;
+    $[44] = t9;
+    $[45] = t10;
   } else {
-    t10 = $[51];
+    t10 = $[45];
   }
   return t10;
 }
 export const TabsPanel = BaseTabs.Panel;
-/* How much a tab holds, after its label. Nothing at zero: an empty view needs no number to say so. */
+/* Nothing at zero: an empty view needs no number to say so. */
 export function TabsCount(t0) {
   const $ = _c(21);
   let className;

package/dist/testing/dedupe.js

@@ -2,11 +2,10 @@ import { existsSync, readdirSync, readFileSync, realpathSync } from 'node:fs';
 import { dirname, join, sep } from 'node:path';
 import { Glob, plugin } from 'bun';
 /*
- * A preload for `bun test` in an app that links a checkout of this library: what `resolve.dedupe`
- * does for Vite. The checkout has node_modules of its own, and a second React, i18next or Base UI
- * breaks every hook, every word and every compound part. Bun has no dedupe and its resolve hook never
- * sees a package import, so every file of these packages in the checkout loads as a stand-in for the
- * same file in the app's copy. Does nothing once the library is installed from the registry.
+ * What `resolve.dedupe` does for Vite, for `bun test` in an app that links a checkout: a second React,
+ * i18next or Base UI breaks every hook, word and compound part. Bun has no dedupe and its resolve hook
+ * never sees a package import, so each file of these packages in the checkout loads as a stand-in for
+ * the app's copy.
  *
  * CodeMirror and Lezer reject an extension, a facet or a node prop made by another copy, and the chat
  * views take both from the app; shiki is in the list for the highlighter an app hands them.
@@ -47,7 +46,6 @@ const checkoutFolders = () => {
   }
   return [library];
 };
-/* The packages a name of the list stands for in a folder: itself, or every package of the scope for `@scope/*`. */
 const namesIn = (folder, pattern) => {
   if (!pattern.endsWith('/*')) {
     return [pattern];
@@ -56,7 +54,7 @@ const namesIn = (folder, pattern) => {
   const path = join(folder, 'node_modules', scope);
   return existsSync(path) ? readdirSync(path).filter(entry => !entry.startsWith('.')).map(entry => `${scope}/${entry}`) : [];
 };
-/* The copy of a package that `from` resolves to, walking up the node_modules folders as Node does. */
+/* Walks up the node_modules folders as Node does. */
 const copyFrom = (from, name) => {
   for (let folder = from;; folder = dirname(folder)) {
     const candidate = join(folder, 'node_modules', name);

package/dist/tint.js

@@ -1,9 +1,7 @@
 /*
- * The custom properties that let what stands on a colored ground follow its color: the hover of a
- * button and a separator. The theme's utilities read `--surface-hover` and `--border` themselves
- * (`@theme inline`), so a host sets this on the colored element and its buttons and separators
- * take it. `--border` is mixed from `--border-strong`, since a property that reads itself is no
- * value at all.
+ * The theme's utilities read `--surface-hover` and `--border` themselves (`@theme inline`), so
+ * buttons and separators under the element take its color. `--border` mixes from `--border-strong`,
+ * since a property that reads itself is no value at all.
  */
 export function tintStyle(color, ground = 'var(--surface-raised)') {
   return {

package/dist/toast-store.js

@@ -1,16 +1,11 @@
 import { create } from 'zustand';
 // How long a toast that went well stays up; a failure waits for the person instead.
 export const SUCCESS_MS = 4000;
-// How long a deletion can still be taken back.
 export const UNDO_MS = 8000;
 // `setTimeout` fires at once past this, so a longer lifetime, `Infinity` too, is a toast that stays.
 const LONGEST_TIMER_MS = 2 ** 31 - 1;
-/* How far into its lifetime a toast is at `now`, held inside that lifetime. */
 export const elapsedOf = (deadline, now) => Math.min(Math.max(now - deadline.start, 0), deadline.end - deadline.start);
-/*
- * The one place an app says how something went that no surface on screen shows. A long action keeps
- * one id from progress to its outcome, so a person never watches two cards for one thing.
- */
+/* A long action keeps one id from progress to its outcome, so a person never watches two cards for one thing. */
 export const createToastStore = () => {
   const timers = new Map();
   let counter = 0;
@@ -19,10 +14,7 @@ export const createToastStore = () => {
       clearTimeout(timers.get(id));
       timers.delete(id);
     };
-    /*
-     * A toast that went well takes itself away, and so does the offer to undo; a failure and a running
-     * action stay, unless the toast names a lifetime of its own.
-     */
+    // A failure and a running action stay, unless the toast names a lifetime of its own.
     const schedule = (id, toast) => {
       stop(id);
       const {

package/dist/tree/use-tree-shift.js

@@ -4,11 +4,7 @@ import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDe
 import { jsx as _jsx } from "react/jsx-runtime";
 const HIDE_AFTER = 900;
 const NEAR_BOTTOM = 16;
-/*
- * Rows that are wider than the tree slide sideways together, by a shift every row reads from the
- * frame's `--adecore-tree-shift`, with a thin bar that shows while a person scrolls or nears it. A
- * shift instead of a scroll keeps every row's background and the vertical scroll where they are.
- */
+/* A shift every row reads from `--adecore-tree-shift` instead of a scroll keeps every row's background and the vertical scroll where they are. */
 export function useTreeShift(source, resetKey) {
   const $ = _c(12);
   const [frame, setFrame] = useState(null);
@@ -171,7 +167,7 @@ export function useTreeShift(source, resetKey) {
   }
   return t2;
 }
-/* The rows of `Tree.Root`: everything a row holds slides, so a row reaches as far as its last part. */
+/* Everything a row of `Tree.Root` holds slides, so a row reaches as far as its last part. */
 function _temp(need) {
   return need !== null;
 }

package/dist/useColumnResize.js

@@ -1,13 +1,12 @@
+const DRAG_ENDS = ['pointerup', 'pointercancel', 'lostpointercapture'];
 export const clampColumnSize = (options, size) => {
   const max = Math.max(options.min, options.max?.() ?? Number.MAX_SAFE_INTEGER);
   return Math.max(options.min, Math.min(Math.round(size), max));
 };
-/* Where the pointer sits on the axis this edge belongs to. */
 const along = (from, event) => from === 'left' || from === 'right' ? event.clientX : event.clientY;
 /*
- * One resizable column or row: a handle that drags the size its owner keeps. The handle takes the
- * pointer capture, so the drag survives leaving the few pixels it is wide, and `[data-resizing]` on
- * the column turns off any transition on that size for as long as it lasts.
+ * The handle takes the pointer capture, so the drag survives leaving the few pixels it is wide, and
+ * `[data-resizing]` on the column turns off any transition on that size for as long as it lasts.
  */
 export const useColumnResize = (ref, options) => {
   const startResize = event => {
@@ -26,9 +25,9 @@ export const useColumnResize = (ref, options) => {
     };
     const onUp = () => {
       handle.removeEventListener('pointermove', onMove);
-      handle.removeEventListener('pointerup', onUp);
-      handle.removeEventListener('pointercancel', onUp);
-      handle.removeEventListener('lostpointercapture', onUp);
+      for (const type of DRAG_ENDS) {
+        handle.removeEventListener(type, onUp);
+      }
       if (handle.hasPointerCapture(event.pointerId)) {
         handle.releasePointerCapture(event.pointerId);
       }
@@ -36,9 +35,9 @@ export const useColumnResize = (ref, options) => {
     };
     handle.setPointerCapture(event.pointerId);
     handle.addEventListener('pointermove', onMove);
-    handle.addEventListener('pointerup', onUp);
-    handle.addEventListener('pointercancel', onUp);
-    handle.addEventListener('lostpointercapture', onUp);
+    for (const type of DRAG_ENDS) {
+      handle.addEventListener(type, onUp);
+    }
   };
   return {
     startResize

package/dist/useNow.js

@@ -1,10 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-/*
- * The clock a surface reads to say how long something has been running. One timer for the whole
- * surface, ticking only while there is something to count, and starting at the time it was mounted
- * so a panel that comes back mid-session does not read zero for a second first.
- */
+/* Starts at the time it was mounted, so a panel that comes back mid-session does not read zero for a second first. */
 export const useNow = (intervalMs, t0) => {
   const $ = _c(4);
   const ticking = t0 === undefined ? true : t0;
@@ -31,10 +27,7 @@ export const useNow = (intervalMs, t0) => {
   useEffect(t1, t2);
   return now;
 };
-/*
- * A timer on one line of a long thread. The text is written straight into the node, because a chat
- * that re-renders every second while an agent works re-renders every row it is drawing with it.
- */
+/* Written straight into the node: a thread that re-renders every second re-renders every row it draws with it. */
 export const useTickingText = (render, t0) => {
   const $ = _c(6);
   const intervalMs = t0 === undefined ? 1000 : t0;

package/dist/workspace/DropPreview.js

@@ -1,11 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { dropPreviewPath } from './preview.js';
-/*
- * The outline `SplitView` draws where a drag would land, for an app with a drag layer of its own. It
- * fills its nearest positioned ancestor. One shape moves into the next as a transition of its path,
- * and the first shape after a null appears in place.
- */
+/* For an app with a drag layer of its own. It fills its nearest positioned ancestor; the first shape after a null appears in place. */
 import { jsx as _jsx } from "react/jsx-runtime";
 export function DropPreview(t0) {
   const $ = _c(10);

package/dist/workspace/preview.js

@@ -8,10 +8,7 @@ export const DROP_STROKE = 2;
 function coordinate(value) {
   return String(Math.round(value * 100) / 100 + 0);
 }
-/*
- * The preview for a split or a trade: the rectangle as a tab with no height, parked just inside its
- * top left corner so the corner keeps its radius. It is where a tab target grows out of the rectangle.
- */
+/* The tab with no height parks just inside the top left corner, so the corner keeps its radius and a tab target grows out of it. */
 export function rectDropPreview({
   x,
   y,
@@ -30,7 +27,7 @@ export function rectDropPreview({
     radius: TAB_RADIUS
   };
 }
-/* The preview for a tab: the tab and the body of the cell it lands in, `origin` being the cell's top left in the grid. */
+/* `origin` is the cell's top left in the grid. */
 export function tabDropPreview(drop, origin) {
   return {
     x: origin.x,
@@ -52,10 +49,8 @@ export function sameDropPreview(left, right) {
   return left.x === right.x && left.y === right.y && left.width === right.width && left.height === right.height && left.barHeight === right.barHeight && left.tabLeft === right.tabLeft && left.tabWidth === right.tabWidth && left.tabTop === right.tabTop && left.radius === right.radius;
 }
 /*
- * The outline of a tab grown into the body under it, as one closed path so no line runs between the
- * two. The commands are the same whatever the numbers are (an arc of radius 0 is a straight line), so
- * the browser can move one outline into another with a transition on `d`. `inset` is how far the
- * path runs inside the box, which is half the stroke, so the outer edge of the line is on the box.
+ * One closed path, so no line runs between tab and body. The commands are the same whatever the
+ * numbers (an arc of radius 0 is a straight line), so a transition on `d` can move one outline into another.
  */
 export function dropPreviewPath({
   x,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.39.0",
+  "version": "0.40.1",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
@@ -67,10 +67,10 @@
   "dependencies": {
     "@base-ui/react": "^1.9.0",
     "@pierre/trees": "1.0.0-beta.6",
-    "@tanstack/react-virtual": "^3.14.13",
+    "@tanstack/react-virtual": "^3.14.23",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.47.0",
-    "zustand": "^5.0.15"
+    "lucide-react": "^1.61.0",
+    "zustand": "^5.0.16"
   },
   "peerDependencies": {
     "i18next": "^26.4.2",
@@ -79,16 +79,16 @@
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.14.5",
-    "@types/bun": "^1.4.2",
+    "@happy-dom/global-registrator": "^21.0.4",
+    "@types/bun": "^1.4.4",
     "@types/opentype.js": "^1.3.10",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "i18next": "^26.4.2",
+    "i18next": "^26.5.11",
     "opentype.js": "2.0.0",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "react-i18next": "^17.0.15",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-i18next": "^17.1.9",
     "typescript": "^7.0.2"
   }
 }

package/src/AccentSwatches.tsx

@@ -11,26 +11,32 @@ export interface AccentSwatchesProps<Id extends string> {
     value: string | undefined;
     onValueChange(id: Id): void;
     label: string;
+
     /* Every color on offer, in the order of the list behind the featured ones. */
     accents: readonly { id: Id; color: string }[];
+
     /* The few drawn in the open, in the order they stand. */
     featured: readonly Id[];
+
     labelOf(id: Id): string;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
 
 /*
- * An accent, a few colors at a time. A palette is more than a settings row can carry, so the list
- * behind them holds all of them, the featured ones included; the trigger wears the chosen color
- * itself whenever that color is not one of the few. A value that is no accent at all picks nothing.
+ * The list behind the featured swatches holds every accent, the featured ones included; its trigger
+ * wears the chosen color whenever that is not one of the few. A value that is no accent picks nothing.
  */
 export function AccentSwatches<Id extends string>({ value, onValueChange, label, accents, featured, labelOf, className, ref }: AccentSwatchesProps<Id>) {
     const { t } = useTranslation('ui');
+
     const isFeatured = (id: string): boolean => featured.some((entry) => entry === id);
+
     const colorOf = (id: string): string | undefined => accents.find((entry) => entry.id === id)?.color;
+
     const shown = accents.filter((entry) => isFeatured(entry.id)).sort((a, b) => featured.indexOf(a.id) - featured.indexOf(b.id));
     const hidden = value !== undefined && !isFeatured(value) && colorOf(value) !== undefined ? value : null;
+
     return (
         <div ref={ref} className={clsx('flex items-center gap-2', className)} role="radiogroup" aria-label={label}>
             {shown.map((entry) => (

package/src/Banner.tsx

@@ -19,24 +19,18 @@ export interface BannerProps {
     icon: LucideIcon;
     tone: BannerTone;
     message: ReactNode;
+
     /* The buttons that answer the line. */
     children?: ReactNode;
-    /*
-     * `overlay` floats the glass strip centered along the top of the positioned parent; `inline` stands
-     * in the flow and fills its row. Under `overlay` a `className` replaces the overlay position instead
-     * of adding to it, so its utilities never meet the component's own.
-     */
+
+    /* Under `overlay` a `className` replaces the overlay position instead of adding to it, so its utilities never meet the component's own. */
     placement?: 'overlay' | 'inline';
+
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
 
-/*
- * The strip over a view: one line and the buttons that answer it. It is where anything that waits
- * for a person goes (a conflict, a failure, a request), because a corner toast is read after the fact
- * and a decision has to be where the eyes already are. One at a time: the slot is one row and the
- * caller picks what stands in it. Inline, it is a notice that belongs to the page it stands in.
- */
+/* Where anything that waits for a person goes: a corner toast is read after the fact, and a decision has to be where the eyes already are. */
 export function Banner({ icon, tone, message, children, placement = 'overlay', className, ref }: BannerProps) {
     const line = (
         <>

package/src/Button.tsx

@@ -7,8 +7,10 @@ export type { ButtonShape, ButtonSize, ButtonVariant } from './button-class.ts';
 export interface ButtonProps extends ComponentProps<'button'> {
     variant?: ButtonVariant;
     size?: ButtonSize;
+
     /* `pill` is 36 pixels tall and fully rounded, and ignores `size`. */
     shape?: ButtonShape;
+
     /* Makes it a link that looks like a button, a real anchor, so it opens the way links open. */
     href?: string;
 }
@@ -16,6 +18,7 @@ export interface ButtonProps extends ComponentProps<'button'> {
 /* Every button with a word in it. A button that is only an icon is an `IconButton`, which is a square, not a label. */
 export function Button({ variant = 'ghost', size = 'md', shape = 'default', className, href, type = 'button', ref, ...rest }: ButtonProps) {
     const classes = clsx(buttonClass(variant, size, shape), className);
+
     if (href) {
         return (
             <a
@@ -28,5 +31,6 @@ export function Button({ variant = 'ghost', size = 'md', shape = 'default', clas
             />
         );
     }
+
     return <button ref={ref} type={type} className={classes} {...rest} />;
 }