@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/lib/zoom.js

@@ -0,0 +1,314 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/cn.js";
+const ZOOM_STEP = 0.5;
+const MIN_SPAN = 2;
+const DRAG_THRESHOLD = 8;
+function clamp(value, low, high) {
+  return Math.max(low, Math.min(value, high));
+}
+function clampWindow(range, total, minSpan = MIN_SPAN) {
+  const maxIndex = Math.max(0, total - 1);
+  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 };
+  const limit = Math.min(minSpan, maxIndex);
+  let startIndex = clamp(Math.round(range.startIndex), 0, maxIndex);
+  let endIndex = clamp(Math.round(range.endIndex), 0, maxIndex);
+  if (endIndex < startIndex) [startIndex, endIndex] = [endIndex, startIndex];
+  if (endIndex - startIndex < limit) {
+    endIndex = Math.min(startIndex + limit, maxIndex);
+    startIndex = Math.max(0, endIndex - limit);
+  }
+  return { startIndex, endIndex };
+}
+function zoomWindow(range, total, factor, minSpan = MIN_SPAN, anchor) {
+  const maxIndex = Math.max(0, total - 1);
+  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 };
+  const current = clampWindow(range, total, minSpan);
+  const span = current.endIndex - current.startIndex;
+  const limit = Math.min(minSpan, maxIndex);
+  const raw = span * factor;
+  const nextSpan = clamp(factor < 1 ? Math.floor(raw) : Math.ceil(raw), limit, maxIndex);
+  const pivot = clamp(anchor ?? (current.startIndex + current.endIndex) / 2, 0, maxIndex);
+  const ratio = span > 0 ? (pivot - current.startIndex) / span : 0.5;
+  const startIndex = clamp(Math.round(pivot - ratio * nextSpan), 0, maxIndex - nextSpan);
+  return { startIndex, endIndex: startIndex + nextSpan };
+}
+function panWindow(range, total, delta) {
+  const maxIndex = Math.max(0, total - 1);
+  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 };
+  const current = clampWindow(range, total, 0);
+  const span = current.endIndex - current.startIndex;
+  const startIndex = clamp(current.startIndex + Math.round(delta), 0, maxIndex - span);
+  return { startIndex, endIndex: startIndex + span };
+}
+function useChartZoom({
+  data,
+  xDataKey,
+  minSpan = MIN_SPAN,
+  step = ZOOM_STEP,
+  onZoomChange
+}) {
+  const total = data.length;
+  const maxIndex = Math.max(0, total - 1);
+  const [range, setRange] = useState({ startIndex: 0, endIndex: maxIndex });
+  const committed = useRef(range);
+  useEffect(() => {
+    const whole = { startIndex: 0, endIndex: Math.max(0, data.length - 1) };
+    committed.current = whole;
+    setRange(whole);
+  }, [data.length]);
+  const commit = useCallback(
+    (next) => {
+      const clamped = clampWindow(next, total, minSpan);
+      const last = committed.current;
+      if (last.startIndex === clamped.startIndex && last.endIndex === clamped.endIndex) return;
+      committed.current = clamped;
+      setRange(clamped);
+      startTransition(() => onZoomChange?.(clamped));
+    },
+    [minSpan, onZoomChange, total]
+  );
+  const zoomIn = useCallback(
+    (anchor) => commit(zoomWindow(committed.current, total, step, minSpan, anchor)),
+    [commit, minSpan, step, total]
+  );
+  const zoomOut = useCallback(
+    (anchor) => commit(zoomWindow(committed.current, total, 1 / step, minSpan, anchor)),
+    [commit, minSpan, step, total]
+  );
+  const reset = useCallback(
+    () => commit({ startIndex: 0, endIndex: Math.max(0, total - 1) }),
+    [commit, total]
+  );
+  const panBy = useCallback(
+    (delta) => commit(panWindow(committed.current, total, delta)),
+    [commit, total]
+  );
+  const zoomTo = useCallback((next) => commit(next), [commit]);
+  const labelAt = useCallback(
+    (index) => {
+      if (!xDataKey) return String(index + 1);
+      const value = data[index]?.[xDataKey];
+      return value === null || value === void 0 ? String(index + 1) : String(value);
+    },
+    [data, xDataKey]
+  );
+  const deferred = useDeferredValue(range);
+  const visibleData = useMemo(
+    () => data.slice(deferred.startIndex, deferred.endIndex + 1),
+    [data, deferred.endIndex, deferred.startIndex]
+  );
+  const brushProps = useMemo(
+    () => ({ startIndex: range.startIndex, endIndex: range.endIndex, onChange: commit }),
+    [commit, range.endIndex, range.startIndex]
+  );
+  const isZoomed = range.startIndex > 0 || range.endIndex < maxIndex;
+  return useMemo(
+    () => ({
+      range,
+      visibleData,
+      isZoomed,
+      canZoomIn: range.endIndex - range.startIndex > Math.min(minSpan, maxIndex),
+      canZoomOut: isZoomed,
+      zoomIn,
+      zoomOut,
+      reset,
+      panBy,
+      zoomTo,
+      total,
+      labelAt,
+      brushProps
+    }),
+    [
+      brushProps,
+      isZoomed,
+      labelAt,
+      maxIndex,
+      minSpan,
+      panBy,
+      range,
+      reset,
+      total,
+      visibleData,
+      zoomIn,
+      zoomOut,
+      zoomTo
+    ]
+  );
+}
+function ChartZoomSurface({
+  zoom,
+  label,
+  enabled = true,
+  ref,
+  children
+}) {
+  const fallbackRef = useRef(null);
+  const surfaceRef = ref ?? fallbackRef;
+  const hintId = `chart-zoom-hint-${useId().replace(/:/g, "")}`;
+  const drag = useRef(null);
+  const [selection, setSelection] = useState(null);
+  const indexAt = useCallback(
+    (clientX) => {
+      const node = surfaceRef.current;
+      const box = node ? plotBox(node) : null;
+      if (!box) return void 0;
+      const fraction = clamp((clientX - box.left) / box.width, 0, 1);
+      return zoom.range.startIndex + fraction * (zoom.range.endIndex - zoom.range.startIndex);
+    },
+    [surfaceRef, zoom.range.endIndex, zoom.range.startIndex]
+  );
+  useEffect(() => {
+    const node = surfaceRef.current;
+    if (!node || !enabled) return;
+    const onWheel = (event) => {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      const anchor = indexAt(event.clientX);
+      if (event.deltaY < 0) zoom.zoomIn(anchor);
+      else zoom.zoomOut(anchor);
+    };
+    node.addEventListener("wheel", onWheel, { passive: false });
+    return () => node.removeEventListener("wheel", onWheel);
+  }, [enabled, indexAt, surfaceRef, zoom]);
+  const onPointerDown = (event) => {
+    if (!enabled || event.button !== 0) return;
+    drag.current = { pointerId: event.pointerId, originX: event.clientX };
+  };
+  const onPointerMove = (event) => {
+    const state = drag.current;
+    if (!state || state.pointerId !== event.pointerId) return;
+    const travelled = Math.abs(event.clientX - state.originX);
+    if (travelled < DRAG_THRESHOLD) return;
+    const node = surfaceRef.current;
+    const box = node ? plotBox(node) : null;
+    if (!node || !box) return;
+    if (!node.hasPointerCapture(event.pointerId)) node.setPointerCapture(event.pointerId);
+    const from = Math.min(state.originX, event.clientX);
+    setSelection({ start: from - box.left, width: travelled });
+  };
+  const endDrag = (event) => {
+    const state = drag.current;
+    drag.current = null;
+    setSelection(null);
+    const node = surfaceRef.current;
+    if (node?.hasPointerCapture(event.pointerId)) node.releasePointerCapture(event.pointerId);
+    if (!state || Math.abs(event.clientX - state.originX) < DRAG_THRESHOLD) return;
+    const from = indexAt(Math.min(state.originX, event.clientX));
+    const to = indexAt(Math.max(state.originX, event.clientX));
+    if (from === void 0 || to === void 0) return;
+    zoom.zoomTo({ startIndex: Math.floor(from), endIndex: Math.ceil(to) });
+  };
+  const onKeyDown = (event) => {
+    if (!enabled) return;
+    const span = zoom.range.endIndex - zoom.range.startIndex;
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        zoom.panBy(-1);
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        zoom.panBy(1);
+        break;
+      case "PageDown":
+        zoom.panBy(-Math.max(1, span));
+        break;
+      case "PageUp":
+        zoom.panBy(Math.max(1, span));
+        break;
+      case "Home":
+        zoom.panBy(-zoom.total);
+        break;
+      case "End":
+        zoom.panBy(zoom.total);
+        break;
+      case "+":
+      case "=":
+        zoom.zoomIn();
+        break;
+      case "-":
+      case "_":
+        zoom.zoomOut();
+        break;
+      case "0":
+        zoom.reset();
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
+  const shown = zoom.range.endIndex - zoom.range.startIndex + 1;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-full flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: surfaceRef,
+        role: "group",
+        "aria-label": `${label} \u2014 plot`,
+        "aria-describedby": enabled ? hintId : void 0,
+        tabIndex: enabled ? 0 : void 0,
+        onKeyDown,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        className: cn(
+          "relative flex min-h-0 w-full flex-1 flex-col rounded-(--radius-sm)",
+          // Vertical scrolling still belongs to the page; horizontal movement
+          // is the pan gesture, so the browser must not claim it first.
+          enabled && "touch-pan-y",
+          selection && "select-none"
+        ),
+        children: [
+          children,
+          selection && // Positioned with inline style rather than `start-`/`end-` classes,
+          // for the same reason the brush is: the axis being selected along is
+          // the DATA's, and a cartesian plot runs left-to-right under
+          // `dir="rtl"` too.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-y-0 z-(--z-rule) border-x border-(--rule-2) bg-(--ink)/8",
+              style: { left: selection.start, width: selection.width }
+            }
+          )
+        ]
+      }
+    ),
+    enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { id: hintId, className: "sr-only", children: "Arrow keys pan by one point, Page Up and Page Down by a screenful, Home and End jump to the ends. Plus and minus zoom, zero resets. Ctrl and the wheel zoom around the pointer, and dragging across the plot zooms to that span." }),
+      /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "sr-only", children: `Showing ${zoom.labelAt(zoom.range.startIndex)} to ${zoom.labelAt(
+        zoom.range.endIndex
+      )}, ${shown} of ${zoom.total} points` })
+    ] })
+  ] });
+}
+function plotBox(surface) {
+  const grid = surface.querySelector(".recharts-cartesian-grid");
+  const gridBox = grid?.getBoundingClientRect();
+  if (gridBox && gridBox.width > 0) return gridBox;
+  const svg = surface.querySelector("svg.recharts-surface");
+  const svgBox = svg?.getBoundingClientRect();
+  return svgBox && svgBox.width > 0 ? svgBox : null;
+}
+export {
+  ChartZoomSurface,
+  clampWindow,
+  panWindow,
+  useChartZoom,
+  zoomWindow
+};
+//# sourceMappingURL=zoom.js.map

package/dist/charts/lib/zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/zoom.tsx"],"sourcesContent":["'use client'\n\nimport {\n  startTransition,\n  useCallback,\n  useDeferredValue,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport { cn } from '../../lib/cn'\nimport type { ChartBrushRange } from './brush'\n\n/**\n * How far a single zoom step closes the window. Half is the step every map and\n * every chart toolbar has trained readers to expect from a `+`.\n */\nconst ZOOM_STEP = 0.5\n\n/** The fewest rows a zoom will leave on screen — the brush's floor, so the two agree. */\nconst MIN_SPAN = 2\n\n/**\n * How far the pointer has to travel before a press counts as a region\n * selection. Below this it is a click on the plot, which belongs to the tooltip\n * and to a series' own `isClickable`.\n */\nconst DRAG_THRESHOLD = 8\n\nfunction clamp(value: number, low: number, high: number): number {\n  return Math.max(low, Math.min(value, high))\n}\n\n/**\n * A range pulled back inside the data, with the minimum span enforced.\n *\n * Every other function here ends by calling this, so an inverted range, an\n * index past the end and a window narrower than `minSpan` all have exactly one\n * definition of what they become.\n */\nexport function clampWindow(\n  range: ChartBrushRange,\n  total: number,\n  minSpan: number = MIN_SPAN,\n): ChartBrushRange {\n  const maxIndex = Math.max(0, total - 1)\n  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 }\n\n  const limit = Math.min(minSpan, maxIndex)\n  let startIndex = clamp(Math.round(range.startIndex), 0, maxIndex)\n  let endIndex = clamp(Math.round(range.endIndex), 0, maxIndex)\n  if (endIndex < startIndex) [startIndex, endIndex] = [endIndex, startIndex]\n\n  if (endIndex - startIndex < limit) {\n    endIndex = Math.min(startIndex + limit, maxIndex)\n    startIndex = Math.max(0, endIndex - limit)\n  }\n\n  return { startIndex, endIndex }\n}\n\n/**\n * The window after one zoom step.\n *\n * `factor` below 1 closes the window and above 1 opens it. `anchor` is the row\n * index that must stay where it is on screen — the pointer's row for a wheel\n * zoom, the window's own centre for a button — because a zoom that re-centres\n * is a zoom that loses the point the reader was looking at.\n *\n * The span is floored when closing and ceiled when opening rather than rounded\n * in both directions, so a step always moves: rounding leaves a three-row\n * window stuck at three when the step is a half.\n */\nexport function zoomWindow(\n  range: ChartBrushRange,\n  total: number,\n  factor: number,\n  minSpan: number = MIN_SPAN,\n  anchor?: number,\n): ChartBrushRange {\n  const maxIndex = Math.max(0, total - 1)\n  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 }\n\n  const current = clampWindow(range, total, minSpan)\n  const span = current.endIndex - current.startIndex\n  const limit = Math.min(minSpan, maxIndex)\n  const raw = span * factor\n  const nextSpan = clamp(factor < 1 ? Math.floor(raw) : Math.ceil(raw), limit, maxIndex)\n\n  const pivot = clamp(anchor ?? (current.startIndex + current.endIndex) / 2, 0, maxIndex)\n  // Where the pivot sits across the window, 0 at the start and 1 at the end.\n  // Holding that fraction is what keeps the anchored row under the pointer.\n  const ratio = span > 0 ? (pivot - current.startIndex) / span : 0.5\n  const startIndex = clamp(Math.round(pivot - ratio * nextSpan), 0, maxIndex - nextSpan)\n\n  return { startIndex, endIndex: startIndex + nextSpan }\n}\n\n/**\n * The window slid along by `delta` rows, keeping its span.\n *\n * At either end it stops rather than shrinking. A pan that narrowed itself\n * against the edge would change the scale under the reader, which is a\n * different gesture from the one they made.\n */\nexport function panWindow(range: ChartBrushRange, total: number, delta: number): ChartBrushRange {\n  const maxIndex = Math.max(0, total - 1)\n  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 }\n\n  const current = clampWindow(range, total, 0)\n  const span = current.endIndex - current.startIndex\n  const startIndex = clamp(current.startIndex + Math.round(delta), 0, maxIndex - span)\n\n  return { startIndex, endIndex: startIndex + span }\n}\n\nexport interface ChartZoomOptions<TData extends Record<string, unknown>> {\n  /** The whole dataset. The window is expressed as indexes into it. */\n  data: TData[]\n  /** The row field behind a row's name, used by the spoken window description. */\n  xDataKey?: keyof TData & string\n  /** The fewest rows a zoom will leave on screen. */\n  minSpan?: number\n  /** The fraction of the window one zoom step keeps. */\n  step?: number\n  /** Fires whenever the window changes, from any of the four inputs. */\n  onZoomChange?: (range: ChartBrushRange) => void\n}\n\nexport interface ChartZoom<TData extends Record<string, unknown> = Record<string, unknown>> {\n  /** The rows on screen, as indexes into the whole dataset. */\n  range: ChartBrushRange\n  /** The rows the plot should draw. */\n  visibleData: TData[]\n  /** Whether anything is hidden — what \"reset zoom\" is enabled by. */\n  isZoomed: boolean\n  canZoomIn: boolean\n  canZoomOut: boolean\n  /** Closes the window one step around `anchor`, or around its own centre. */\n  zoomIn: (anchor?: number) => void\n  /** Opens the window one step around `anchor`, or around its own centre. */\n  zoomOut: (anchor?: number) => void\n  /** Back to the whole dataset. */\n  reset: () => void\n  /** Slides the window by a number of rows, keeping its span. */\n  panBy: (delta: number) => void\n  /** Jumps straight to a window — what a drag across the plot commits. */\n  zoomTo: (range: ChartBrushRange) => void\n  /** How many rows there are in total. */\n  total: number\n  /** A row's name, for an announcement or a label. */\n  labelAt: (index: number) => string\n  /** Spread onto `<ChartBrush>` to make it a controlled view of this window. */\n  brushProps: {\n    startIndex: number\n    endIndex: number\n    onChange: (range: ChartBrushRange) => void\n  }\n}\n\n/**\n * A windowed view of a chart's rows, driven by the toolbar, the wheel, a drag\n * across the plot, and the keyboard.\n *\n * ## How this composes with `<Chart.Brush>`\n *\n * They are two views of ONE window, not two windows. This hook owns\n * `{ startIndex, endIndex }`; the brush is rendered controlled from it through\n * `brushProps` and reports back through the same commit path the toolbar\n * buttons use. So dragging a brush handle moves the toolbar's idea of the\n * window, \"reset zoom\" snaps the handles back to the full range, and neither\n * part has to know the other exists.\n *\n * The alternative — a zoom window layered on top of a brushed slice — was\n * rejected because it needs a composition rule (\"zoom is relative to the\n * brush\") that nobody can predict from the call site, and because it makes\n * reset ambiguous: reset the zoom, the brush, or both.\n *\n * This is a superset of `useChartBrush`, so a chart that can carry a toolbar\n * uses it in place of that hook rather than running the two side by side.\n *\n * @example\n * const zoom = useChartZoom({ data, xDataKey: 'month' })\n * <ChartBrush data={data} config={config} {...zoom.brushProps} />\n */\nexport function useChartZoom<TData extends Record<string, unknown>>({\n  data,\n  xDataKey,\n  minSpan = MIN_SPAN,\n  step = ZOOM_STEP,\n  onZoomChange,\n}: ChartZoomOptions<TData>): ChartZoom<TData> {\n  const total = data.length\n  const maxIndex = Math.max(0, total - 1)\n\n  const [range, setRange] = useState<ChartBrushRange>({ startIndex: 0, endIndex: maxIndex })\n\n  // The committed window, mirrored in a ref so the commands below can stay\n  // stable across renders. The wheel listener is attached natively and would\n  // otherwise be torn down and re-attached on every step.\n  const committed = useRef(range)\n\n  useEffect(() => {\n    const whole = { startIndex: 0, endIndex: Math.max(0, data.length - 1) }\n    committed.current = whole\n    setRange(whole)\n  }, [data.length])\n\n  const commit = useCallback(\n    (next: ChartBrushRange) => {\n      const clamped = clampWindow(next, total, minSpan)\n      const last = committed.current\n      if (last.startIndex === clamped.startIndex && last.endIndex === clamped.endIndex) return\n\n      committed.current = clamped\n      setRange(clamped)\n      // The control that moved has to keep up with the pointer; the plot does\n      // not. Deferring lets React drop intermediate windows during a drag.\n      startTransition(() => onZoomChange?.(clamped))\n    },\n    [minSpan, onZoomChange, total],\n  )\n\n  const zoomIn = useCallback(\n    (anchor?: number) => commit(zoomWindow(committed.current, total, step, minSpan, anchor)),\n    [commit, minSpan, step, total],\n  )\n\n  const zoomOut = useCallback(\n    (anchor?: number) => commit(zoomWindow(committed.current, total, 1 / step, minSpan, anchor)),\n    [commit, minSpan, step, total],\n  )\n\n  const reset = useCallback(\n    () => commit({ startIndex: 0, endIndex: Math.max(0, total - 1) }),\n    [commit, total],\n  )\n\n  const panBy = useCallback(\n    (delta: number) => commit(panWindow(committed.current, total, delta)),\n    [commit, total],\n  )\n\n  const zoomTo = useCallback((next: ChartBrushRange) => commit(next), [commit])\n\n  const labelAt = useCallback(\n    (index: number) => {\n      if (!xDataKey) return String(index + 1)\n      const value = data[index]?.[xDataKey]\n      return value === null || value === undefined ? String(index + 1) : String(value)\n    },\n    [data, xDataKey],\n  )\n\n  // The slice runs on a deferred copy of the window, so the control that moved\n  // re-renders at pointer cadence and the plot at whatever it can manage.\n  const deferred = useDeferredValue(range)\n  const visibleData = useMemo(\n    () => data.slice(deferred.startIndex, deferred.endIndex + 1),\n    [data, deferred.endIndex, deferred.startIndex],\n  )\n\n  const brushProps = useMemo(\n    () => ({ startIndex: range.startIndex, endIndex: range.endIndex, onChange: commit }),\n    [commit, range.endIndex, range.startIndex],\n  )\n\n  const isZoomed = range.startIndex > 0 || range.endIndex < maxIndex\n\n  return useMemo(\n    () => ({\n      range,\n      visibleData,\n      isZoomed,\n      canZoomIn: range.endIndex - range.startIndex > Math.min(minSpan, maxIndex),\n      canZoomOut: isZoomed,\n      zoomIn,\n      zoomOut,\n      reset,\n      panBy,\n      zoomTo,\n      total,\n      labelAt,\n      brushProps,\n    }),\n    [\n      brushProps,\n      isZoomed,\n      labelAt,\n      maxIndex,\n      minSpan,\n      panBy,\n      range,\n      reset,\n      total,\n      visibleData,\n      zoomIn,\n      zoomOut,\n      zoomTo,\n    ],\n  )\n}\n\nexport interface ChartZoomSurfaceProps {\n  /** The window this surface drives. */\n  zoom: ChartZoom\n  /** Names the region for a screen reader — pass the figure's title. */\n  label: string\n  /**\n   * Off leaves the plot inert while the toolbar buttons keep working. Use it\n   * for a chart whose only control is export.\n   */\n  enabled?: boolean\n  /** The plot's box, handed out because the PNG export needs the measured one. */\n  ref?: RefObject<HTMLDivElement | null>\n  children: ReactNode\n}\n\n/**\n * The plot, made zoomable and pannable by pointer AND by keyboard.\n *\n * The keyboard half is not a nicety. A chart whose only zoom is a drag gesture\n * is a chart a keyboard user can watch and cannot operate, which is the exact\n * failure the brush was rewritten to fix — so the surface is focusable, carries\n * its instructions in an `aria-describedby` note, and announces the window it\n * moved to through a polite live region.\n *\n * Arrow keys pan by a row, `PageUp`/`PageDown` by a screenful, `Home`/`End`\n * jump to the ends, `+`/`-` zoom and `0` resets. `ArrowLeft` means EARLIER in\n * every writing direction, matching the brush: the rendering engine lays a\n * cartesian plot out left-to-right whatever `dir` says, so mirroring the keys\n * would put \"earlier\" on the side the data does not run to.\n *\n * The wheel is deliberately gated behind Ctrl or Cmd. A chart that swallowed a\n * plain wheel event traps the page's scroll under the pointer, which is the\n * single most complained-about behaviour in an embedded map.\n */\nexport function ChartZoomSurface({\n  zoom,\n  label,\n  enabled = true,\n  ref,\n  children,\n}: ChartZoomSurfaceProps) {\n  const fallbackRef = useRef<HTMLDivElement>(null)\n  const surfaceRef = ref ?? fallbackRef\n  const hintId = `chart-zoom-hint-${useId().replace(/:/g, '')}`\n\n  const drag = useRef<{ pointerId: number; originX: number } | null>(null)\n  const [selection, setSelection] = useState<{ start: number; width: number } | null>(null)\n\n  /** The row index under a client x, read from the plot's own measured box. */\n  const indexAt = useCallback(\n    (clientX: number): number | undefined => {\n      const node = surfaceRef.current\n      const box = node ? plotBox(node) : null\n      if (!box) return undefined\n      const fraction = clamp((clientX - box.left) / box.width, 0, 1)\n      return zoom.range.startIndex + fraction * (zoom.range.endIndex - zoom.range.startIndex)\n    },\n    [surfaceRef, zoom.range.endIndex, zoom.range.startIndex],\n  )\n\n  useEffect(() => {\n    const node = surfaceRef.current\n    if (!node || !enabled) return\n\n    // Attached natively rather than through `onWheel`, because React registers\n    // its wheel listener passively — `preventDefault` from a React handler is a\n    // console warning and a page that zooms anyway.\n    const onWheel = (event: WheelEvent) => {\n      if (!event.ctrlKey && !event.metaKey) return\n      event.preventDefault()\n      const anchor = indexAt(event.clientX)\n      if (event.deltaY < 0) zoom.zoomIn(anchor)\n      else zoom.zoomOut(anchor)\n    }\n\n    node.addEventListener('wheel', onWheel, { passive: false })\n    return () => node.removeEventListener('wheel', onWheel)\n  }, [enabled, indexAt, surfaceRef, zoom])\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!enabled || event.button !== 0) return\n    // No `preventDefault` here on purpose: it would cancel the compatibility\n    // mouse events the tooltip and a mark's own click handler run on.\n    drag.current = { pointerId: event.pointerId, originX: event.clientX }\n  }\n\n  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current\n    if (!state || state.pointerId !== event.pointerId) return\n\n    const travelled = Math.abs(event.clientX - state.originX)\n    if (travelled < DRAG_THRESHOLD) return\n\n    const node = surfaceRef.current\n    const box = node ? plotBox(node) : null\n    if (!node || !box) return\n\n    if (!node.hasPointerCapture(event.pointerId)) node.setPointerCapture(event.pointerId)\n\n    const from = Math.min(state.originX, event.clientX)\n    setSelection({ start: from - box.left, width: travelled })\n  }\n\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current\n    drag.current = null\n    setSelection(null)\n\n    const node = surfaceRef.current\n    if (node?.hasPointerCapture(event.pointerId)) node.releasePointerCapture(event.pointerId)\n    if (!state || Math.abs(event.clientX - state.originX) < DRAG_THRESHOLD) return\n\n    const from = indexAt(Math.min(state.originX, event.clientX))\n    const to = indexAt(Math.max(state.originX, event.clientX))\n    if (from === undefined || to === undefined) return\n\n    zoom.zoomTo({ startIndex: Math.floor(from), endIndex: Math.ceil(to) })\n  }\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!enabled) return\n    const span = zoom.range.endIndex - zoom.range.startIndex\n\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        zoom.panBy(-1)\n        break\n      case 'ArrowRight':\n      case 'ArrowUp':\n        zoom.panBy(1)\n        break\n      case 'PageDown':\n        zoom.panBy(-Math.max(1, span))\n        break\n      case 'PageUp':\n        zoom.panBy(Math.max(1, span))\n        break\n      case 'Home':\n        zoom.panBy(-zoom.total)\n        break\n      case 'End':\n        zoom.panBy(zoom.total)\n        break\n      case '+':\n      case '=':\n        zoom.zoomIn()\n        break\n      case '-':\n      case '_':\n        zoom.zoomOut()\n        break\n      case '0':\n        zoom.reset()\n        break\n      default:\n        return\n    }\n\n    event.preventDefault()\n  }\n\n  const shown = zoom.range.endIndex - zoom.range.startIndex + 1\n\n  return (\n    <div className=\"flex min-h-0 w-full flex-1 flex-col\">\n      <div\n        ref={surfaceRef}\n        role=\"group\"\n        aria-label={`${label} — plot`}\n        aria-describedby={enabled ? hintId : undefined}\n        tabIndex={enabled ? 0 : undefined}\n        onKeyDown={onKeyDown}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={endDrag}\n        onPointerCancel={endDrag}\n        className={cn(\n          'relative flex min-h-0 w-full flex-1 flex-col rounded-(--radius-sm)',\n          // Vertical scrolling still belongs to the page; horizontal movement\n          // is the pan gesture, so the browser must not claim it first.\n          enabled && 'touch-pan-y',\n          selection && 'select-none',\n        )}\n      >\n        {children}\n\n        {selection && (\n          // Positioned with inline style rather than `start-`/`end-` classes,\n          // for the same reason the brush is: the axis being selected along is\n          // the DATA's, and a cartesian plot runs left-to-right under\n          // `dir=\"rtl\"` too.\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute inset-y-0 z-(--z-rule) border-x border-(--rule-2) bg-(--ink)/8\"\n            style={{ left: selection.start, width: selection.width }}\n          />\n        )}\n      </div>\n\n      {enabled && (\n        <>\n          <p id={hintId} className=\"sr-only\">\n            Arrow keys pan by one point, Page Up and Page Down by a screenful, Home and End jump to\n            the ends. Plus and minus zoom, zero resets. Ctrl and the wheel zoom around the pointer,\n            and dragging across the plot zooms to that span.\n          </p>\n          <p aria-live=\"polite\" className=\"sr-only\">\n            {`Showing ${zoom.labelAt(zoom.range.startIndex)} to ${zoom.labelAt(\n              zoom.range.endIndex,\n            )}, ${shown} of ${zoom.total} points`}\n          </p>\n        </>\n      )}\n    </div>\n  )\n}\n\n/**\n * The measured box of the PLOT, not of the wrapper around it.\n *\n * The wrapper carries the toolbar row and the brush footer, and the plot's own\n * `<svg>` carries the axis gutter, so mapping a pointer through either is off\n * by enough to feel wrong at the ends of a drag. The grid is the one element\n * whose box IS the plot area, so it is tried first; the surface is the fallback\n * for a chart composed without `<Chart.Grid>`.\n */\nfunction plotBox(surface: HTMLElement): DOMRect | null {\n  const grid = surface.querySelector('.recharts-cartesian-grid')\n  const gridBox = grid?.getBoundingClientRect()\n  if (gridBox && gridBox.width > 0) return gridBox\n\n  const svg = surface.querySelector('svg.recharts-surface')\n  const svgBox = svg?.getBoundingClientRect()\n  return svgBox && svgBox.width > 0 ? svgBox : null\n}\n"],"mappings":"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","names":[]}

package/dist/components/AppShell/AppShell.d.ts

@@ -18,6 +18,20 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
      * longer answer "where is the content".
      */
     contentAs?: 'main' | 'div';
+    /**
+     * Names the sidebar landmark.
+     *
+     * Two `complementary` landmarks with the same name cannot be told apart, and
+     * a shell rendered inside another page — a preview, a screenshot harness —
+     * makes exactly that pair. It is also the only way a non-English app gets a
+     * landmark name its readers can read.
+     */
+    sidebarLabel?: string;
+    /** Names the navigation landmark inside the sidebar. */
+    navLabel?: string;
+    /** The drawer toggle, closed and open. */
+    openLabel?: string;
+    closeLabel?: string;
     children: ReactNode;
 }
 /**
@@ -33,6 +47,6 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
  *   <Card>…</Card>
  * </AppShell>
  */
-declare function AppShell({ sidebar, topbar, brand, contentAs: Content, children, className, ...rest }: AppShellProps): react.JSX.Element;
+declare function AppShell({ sidebar, topbar, brand, contentAs: Content, sidebarLabel, navLabel, openLabel, closeLabel, children, className, ...rest }: AppShellProps): react.JSX.Element;
 
 export { AppShell, type AppShellProps, AppShell as default };

package/dist/components/AppShell/AppShell.js

@@ -8,6 +8,10 @@ function AppShell({
   topbar,
   brand,
   contentAs: Content = "main",
+  sidebarLabel = "Sidebar",
+  navLabel = "Primary",
+  openLabel = "Open navigation",
+  closeLabel = "Close navigation",
   children,
   className,
   ...rest
@@ -32,7 +36,7 @@ function AppShell({
           "button",
           {
             type: "button",
-            "aria-label": "Close navigation",
+            "aria-label": closeLabel,
             onClick: () => setOpen(false),
             className: "fixed inset-0 z-(--z-scrim) bg-(--scrim) md:hidden"
           }
@@ -41,7 +45,7 @@ function AppShell({
           "aside",
           {
             id: sidebarId,
-            "aria-label": "Sidebar",
+            "aria-label": sidebarLabel,
             className: cn(
               "fixed inset-y-0 start-0 z-(--z-modal) flex w-60 flex-col border-e border-(--rule) bg-(--paper) transition-transform duration-(--duration-slow) ease-(--ease-out-expo)",
               // The drawer slides in from the edge reading STARTS at, so in an
@@ -54,7 +58,7 @@ function AppShell({
               /* @__PURE__ */ jsx(
                 "nav",
                 {
-                  "aria-label": "Primary",
+                  "aria-label": navLabel,
                   className: "flex flex-1 flex-col gap-1 overflow-y-auto p-3 scroll-slim",
                   children: sidebar
                 }
@@ -68,7 +72,7 @@ function AppShell({
               "button",
               {
                 type: "button",
-                "aria-label": open ? "Close navigation" : "Open navigation",
+                "aria-label": open ? closeLabel : openLabel,
                 "aria-expanded": open,
                 "aria-controls": sidebarId,
                 onClick: () => setOpen((previous) => !previous),

package/dist/components/AppShell/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["'use client'\n\nimport { Menu, X } from 'lucide-react'\nimport { useEffect, useId, useState } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Navigation content for the sidebar (e.g. a stack of `NavItem`s). */\n  sidebar: ReactNode\n  /** Optional content for the sticky topbar, laid out after the mobile toggle. */\n  topbar?: ReactNode\n  /** Optional brand lockup pinned to the top of the sidebar. */\n  brand?: ReactNode\n  /**\n   * Which element the content well renders as.\n   *\n   * `main` is right for the shell of an application, and is the default. A\n   * document may contain exactly one `main` landmark, so an AppShell rendered\n   * INSIDE another page — a preview on a documentation site, a screenshot\n   * harness — must pass `div`, or the page has two and assistive tech can no\n   * longer answer \"where is the content\".\n   */\n  contentAs?: 'main' | 'div'\n  children: ReactNode\n}\n\n/**\n * Two columns on a desktop, one column and a drawer on a phone.\n *\n * The drawer closes on Escape as well as on the scrim, because a drawer that\n * only closes by tapping outside it strands a keyboard user inside a menu they\n * cannot leave. The scrim is a `<button>` for the same reason — a `<div>` with\n * an `onClick` is not reachable by keyboard and not announced as anything.\n *\n * @example\n * <AppShell brand={<Wordmark />} sidebar={<NavItem href=\"/\">Home</NavItem>}>\n *   <Card>…</Card>\n * </AppShell>\n */\nexport function AppShell({\n  sidebar,\n  topbar,\n  brand,\n  contentAs: Content = 'main',\n  children,\n  className,\n  ...rest\n}: AppShellProps) {\n  const [open, setOpen] = useState(false)\n  const sidebarId = useId()\n\n  useEffect(() => {\n    if (!open) return\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') setOpen(false)\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [open])\n\n  return (\n    <div\n      className={cn('min-h-svh bg-(--paper) md:grid md:grid-cols-[15rem_1fr]', className)}\n      {...rest}\n    >\n      {open && (\n        <button\n          type=\"button\"\n          aria-label=\"Close navigation\"\n          onClick={() => setOpen(false)}\n          className=\"fixed inset-0 z-(--z-scrim) bg-(--scrim) md:hidden\"\n        />\n      )}\n\n      <aside\n        id={sidebarId}\n        aria-label=\"Sidebar\"\n        className={cn(\n          'fixed inset-y-0 start-0 z-(--z-modal) flex w-60 flex-col border-e border-(--rule) bg-(--paper) transition-transform duration-(--duration-slow) ease-(--ease-out-expo)',\n          // The drawer slides in from the edge reading STARTS at, so in an\n          // right-to-left document it comes from the right.\n          open ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full',\n          'md:static md:z-auto md:translate-x-0',\n        )}\n      >\n        {brand && (\n          <div className=\"flex h-14 items-center border-b border-(--rule) px-5\">{brand}</div>\n        )}\n        <nav\n          aria-label=\"Primary\"\n          className=\"flex flex-1 flex-col gap-1 overflow-y-auto p-3 scroll-slim\"\n        >\n          {sidebar}\n        </nav>\n      </aside>\n\n      <div className=\"flex min-w-0 flex-col\">\n        <header className=\"sticky top-0 z-(--z-sticky) flex h-14 items-center gap-3 border-b border-(--rule) bg-(--paper)/85 px-(--page-pad) backdrop-blur\">\n          <button\n            type=\"button\"\n            aria-label={open ? 'Close navigation' : 'Open navigation'}\n            aria-expanded={open}\n            aria-controls={sidebarId}\n            onClick={() => setOpen((previous) => !previous)}\n            className=\"-ms-2.5 grid size-11 place-items-center rounded-(--radius) text-(--ink-2) transition-colors duration-(--duration-fast) hover:text-(--ink) md:hidden\"\n          >\n            {open ? <X size={20} strokeWidth={1.5} aria-hidden /> : <Menu size={20} strokeWidth={1.5} aria-hidden />}\n          </button>\n          {topbar}\n        </header>\n\n        <Content className=\"mx-auto w-full max-w-(--w-page) px-(--page-pad) py-8\">{children}</Content>\n      </div>\n    </div>\n  )\n}\n\nexport default AppShell\n"],"mappings":";AAmEQ,cAQF,YARE;AAjER,SAAS,MAAM,SAAS;AACxB,SAAS,WAAW,OAAO,gBAAgB;AAE3C,SAAS,UAAU;AAmCZ,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,YAAY,MAAM;AAExB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,UAAyB;AACtC,UAAI,MAAM,QAAQ,SAAU,SAAQ,KAAK;AAAA,IAC3C;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,2DAA2D,SAAS;AAAA,MACjF,GAAG;AAAA,MAEH;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS,MAAM,QAAQ,KAAK;AAAA,YAC5B,WAAU;AAAA;AAAA,QACZ;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,cAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA;AAAA;AAAA,cAGA,OAAO,kBAAkB;AAAA,cACzB;AAAA,YACF;AAAA,YAEC;AAAA,uBACC,oBAAC,SAAI,WAAU,wDAAwD,iBAAM;AAAA,cAE/E;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAW;AAAA,kBACX,WAAU;AAAA,kBAET;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,qBAAC,SAAI,WAAU,yBACb;AAAA,+BAAC,YAAO,WAAU,mIAChB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY,OAAO,qBAAqB;AAAA,gBACxC,iBAAe;AAAA,gBACf,iBAAe;AAAA,gBACf,SAAS,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAAA,gBAC9C,WAAU;AAAA,gBAET,iBAAO,oBAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,IAAK,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,YACxG;AAAA,YACC;AAAA,aACH;AAAA,UAEA,oBAAC,WAAQ,WAAU,wDAAwD,UAAS;AAAA,WACtF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["'use client'\n\nimport { Menu, X } from 'lucide-react'\nimport { useEffect, useId, useState } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Navigation content for the sidebar (e.g. a stack of `NavItem`s). */\n  sidebar: ReactNode\n  /** Optional content for the sticky topbar, laid out after the mobile toggle. */\n  topbar?: ReactNode\n  /** Optional brand lockup pinned to the top of the sidebar. */\n  brand?: ReactNode\n  /**\n   * Which element the content well renders as.\n   *\n   * `main` is right for the shell of an application, and is the default. A\n   * document may contain exactly one `main` landmark, so an AppShell rendered\n   * INSIDE another page — a preview on a documentation site, a screenshot\n   * harness — must pass `div`, or the page has two and assistive tech can no\n   * longer answer \"where is the content\".\n   */\n  contentAs?: 'main' | 'div'\n  /**\n   * Names the sidebar landmark.\n   *\n   * Two `complementary` landmarks with the same name cannot be told apart, and\n   * a shell rendered inside another page — a preview, a screenshot harness —\n   * makes exactly that pair. It is also the only way a non-English app gets a\n   * landmark name its readers can read.\n   */\n  sidebarLabel?: string\n  /** Names the navigation landmark inside the sidebar. */\n  navLabel?: string\n  /** The drawer toggle, closed and open. */\n  openLabel?: string\n  closeLabel?: string\n  children: ReactNode\n}\n\n/**\n * Two columns on a desktop, one column and a drawer on a phone.\n *\n * The drawer closes on Escape as well as on the scrim, because a drawer that\n * only closes by tapping outside it strands a keyboard user inside a menu they\n * cannot leave. The scrim is a `<button>` for the same reason — a `<div>` with\n * an `onClick` is not reachable by keyboard and not announced as anything.\n *\n * @example\n * <AppShell brand={<Wordmark />} sidebar={<NavItem href=\"/\">Home</NavItem>}>\n *   <Card>…</Card>\n * </AppShell>\n */\nexport function AppShell({\n  sidebar,\n  topbar,\n  brand,\n  contentAs: Content = 'main',\n  sidebarLabel = 'Sidebar',\n  navLabel = 'Primary',\n  openLabel = 'Open navigation',\n  closeLabel = 'Close navigation',\n  children,\n  className,\n  ...rest\n}: AppShellProps) {\n  const [open, setOpen] = useState(false)\n  const sidebarId = useId()\n\n  useEffect(() => {\n    if (!open) return\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') setOpen(false)\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [open])\n\n  return (\n    <div\n      className={cn('min-h-svh bg-(--paper) md:grid md:grid-cols-[15rem_1fr]', className)}\n      {...rest}\n    >\n      {open && (\n        <button\n          type=\"button\"\n          aria-label={closeLabel}\n          onClick={() => setOpen(false)}\n          className=\"fixed inset-0 z-(--z-scrim) bg-(--scrim) md:hidden\"\n        />\n      )}\n\n      <aside\n        id={sidebarId}\n        aria-label={sidebarLabel}\n        className={cn(\n          'fixed inset-y-0 start-0 z-(--z-modal) flex w-60 flex-col border-e border-(--rule) bg-(--paper) transition-transform duration-(--duration-slow) ease-(--ease-out-expo)',\n          // The drawer slides in from the edge reading STARTS at, so in an\n          // right-to-left document it comes from the right.\n          open ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full',\n          'md:static md:z-auto md:translate-x-0',\n        )}\n      >\n        {brand && (\n          <div className=\"flex h-14 items-center border-b border-(--rule) px-5\">{brand}</div>\n        )}\n        <nav\n          aria-label={navLabel}\n          className=\"flex flex-1 flex-col gap-1 overflow-y-auto p-3 scroll-slim\"\n        >\n          {sidebar}\n        </nav>\n      </aside>\n\n      <div className=\"flex min-w-0 flex-col\">\n        <header className=\"sticky top-0 z-(--z-sticky) flex h-14 items-center gap-3 border-b border-(--rule) bg-(--paper)/85 px-(--page-pad) backdrop-blur\">\n          <button\n            type=\"button\"\n            aria-label={open ? closeLabel : openLabel}\n            aria-expanded={open}\n            aria-controls={sidebarId}\n            onClick={() => setOpen((previous) => !previous)}\n            className=\"-ms-2.5 grid size-11 place-items-center rounded-(--radius) text-(--ink-2) transition-colors duration-(--duration-fast) hover:text-(--ink) md:hidden\"\n          >\n            {open ? <X size={20} strokeWidth={1.5} aria-hidden /> : <Menu size={20} strokeWidth={1.5} aria-hidden />}\n          </button>\n          {topbar}\n        </header>\n\n        <Content className=\"mx-auto w-full max-w-(--w-page) px-(--page-pad) py-8\">{children}</Content>\n      </div>\n    </div>\n  )\n}\n\nexport default AppShell\n"],"mappings":";AAqFQ,cAQF,YARE;AAnFR,SAAS,MAAM,SAAS;AACxB,SAAS,WAAW,OAAO,gBAAgB;AAE3C,SAAS,UAAU;AAiDZ,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AAAA,EACrB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,YAAY,MAAM;AAExB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,UAAyB;AACtC,UAAI,MAAM,QAAQ,SAAU,SAAQ,KAAK;AAAA,IAC3C;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,2DAA2D,SAAS;AAAA,MACjF,GAAG;AAAA,MAEH;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,SAAS,MAAM,QAAQ,KAAK;AAAA,YAC5B,WAAU;AAAA;AAAA,QACZ;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA;AAAA;AAAA,cAGA,OAAO,kBAAkB;AAAA,cACzB;AAAA,YACF;AAAA,YAEC;AAAA,uBACC,oBAAC,SAAI,WAAU,wDAAwD,iBAAM;AAAA,cAE/E;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,WAAU;AAAA,kBAET;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,qBAAC,SAAI,WAAU,yBACb;AAAA,+BAAC,YAAO,WAAU,mIAChB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY,OAAO,aAAa;AAAA,gBAChC,iBAAe;AAAA,gBACf,iBAAe;AAAA,gBACf,SAAS,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAAA,gBAC9C,WAAU;AAAA,gBAET,iBAAO,oBAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,IAAK,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,YACxG;AAAA,YACC;AAAA,aACH;AAAA,UAEA,oBAAC,WAAQ,WAAU,wDAAwD,UAAS;AAAA,WACtF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/Article/Article.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface ArticleProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Rendered HTML from a Markdown or MDX pipeline.
+     *
+     * Trusted markup only. This sets `dangerouslySetInnerHTML`, so it must come
+     * from content you control — a repository's own posts, a CMS you author —
+     * and never from a reader. Untrusted Markdown has to be sanitised before it
+     * reaches here; that is a pipeline decision, not a component one, and a
+     * sanitiser bolted on inside a styling primitive would be the wrong place to
+     * make it and the easiest place to get it wrong.
+     */
+    html?: string;
+    /** The element to render. `article` by default; pass `div` for a fragment. */
+    as?: 'article' | 'div' | 'section';
+}
+/**
+ * The long-form reading surface.
+ *
+ * Everything a Markdown pipeline can emit — headings, prose, lists, tables,
+ * quotations, code, figures, footnotes, MathML — set in this system's type,
+ * colour and rules. The styles live in `article.css` rather than in a class
+ * string, because the input is not JSX: there is no component to hang a class
+ * on when the markup arrived as a string, so the contract has to be the element
+ * names themselves.
+ *
+ * That file is published on its own as `@misoto22/design/article.css`, so a
+ * site with its own Markdown pipeline can take the reading surface without
+ * taking the components — which is the case this exists for. Three sites
+ * hand-rolling a prose stylesheet is three prose stylesheets that drift.
+ *
+ * Composable either way: pass `html` for a rendered string, or children for
+ * real elements. A post that mixes the two — prose with a `Diagram` dropped
+ * into the middle — renders its blocks in order and gives each one an
+ * `Article`; a component inside keeps its own classes, because every rule in
+ * the layer is a bare element selector that a utility outranks.
+ *
+ * @example
+ * <Article html={renderedMarkdown} />
+ * @example
+ * <Article>
+ *   <h1>The White Reset</h1>
+ *   <p className="lead">A monochrome system for software and writing.</p>
+ *   <Diagram spec={spec} />
+ * </Article>
+ */
+declare function Article({ html, as: Comp, className, children, ...rest }: ArticleProps): react.JSX.Element;
+
+export { Article, type ArticleProps, Article as default };

package/dist/components/Article/Article.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+function Article({ html, as: Comp = "article", className, children, ...rest }) {
+  if (html !== void 0) {
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        "data-m22-article": true,
+        className,
+        dangerouslySetInnerHTML: { __html: html },
+        ...rest
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Comp, { "data-m22-article": true, className, ...rest, children });
+}
+var Article_default = Article;
+export {
+  Article,
+  Article_default as default
+};
+//# sourceMappingURL=Article.js.map

package/dist/components/Article/Article.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Article/Article.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport interface ArticleProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Rendered HTML from a Markdown or MDX pipeline.\n   *\n   * Trusted markup only. This sets `dangerouslySetInnerHTML`, so it must come\n   * from content you control — a repository's own posts, a CMS you author —\n   * and never from a reader. Untrusted Markdown has to be sanitised before it\n   * reaches here; that is a pipeline decision, not a component one, and a\n   * sanitiser bolted on inside a styling primitive would be the wrong place to\n   * make it and the easiest place to get it wrong.\n   */\n  html?: string\n  /** The element to render. `article` by default; pass `div` for a fragment. */\n  as?: 'article' | 'div' | 'section'\n}\n\n/**\n * The long-form reading surface.\n *\n * Everything a Markdown pipeline can emit — headings, prose, lists, tables,\n * quotations, code, figures, footnotes, MathML — set in this system's type,\n * colour and rules. The styles live in `article.css` rather than in a class\n * string, because the input is not JSX: there is no component to hang a class\n * on when the markup arrived as a string, so the contract has to be the element\n * names themselves.\n *\n * That file is published on its own as `@misoto22/design/article.css`, so a\n * site with its own Markdown pipeline can take the reading surface without\n * taking the components — which is the case this exists for. Three sites\n * hand-rolling a prose stylesheet is three prose stylesheets that drift.\n *\n * Composable either way: pass `html` for a rendered string, or children for\n * real elements. A post that mixes the two — prose with a `Diagram` dropped\n * into the middle — renders its blocks in order and gives each one an\n * `Article`; a component inside keeps its own classes, because every rule in\n * the layer is a bare element selector that a utility outranks.\n *\n * @example\n * <Article html={renderedMarkdown} />\n * @example\n * <Article>\n *   <h1>The White Reset</h1>\n *   <p className=\"lead\">A monochrome system for software and writing.</p>\n *   <Diagram spec={spec} />\n * </Article>\n */\nexport function Article({ html, as: Comp = 'article', className, children, ...rest }: ArticleProps) {\n  // One or the other, never both. The rhythm rules are child combinators, so a\n  // wrapper around the rendered string — even a `display: contents` one, which\n  // removes the box but not the DOM node — would take every heading and\n  // paragraph out of the article's direct children and cost them their\n  // spacing. A page with both is a page with two Articles, and it should say\n  // so.\n  if (html !== undefined) {\n    return (\n      <Comp\n        data-m22-article\n        className={className}\n        dangerouslySetInnerHTML={{ __html: html }}\n        {...rest}\n      />\n    )\n  }\n\n  return (\n    <Comp data-m22-article className={className} {...rest}>\n      {children}\n    </Comp>\n  )\n}\n\nexport default Article\n"],"mappings":"AAyDM;AATC,SAAS,QAAQ,EAAE,MAAM,IAAI,OAAO,WAAW,WAAW,UAAU,GAAG,KAAK,GAAiB;AAOlG,MAAI,SAAS,QAAW;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,oBAAgB;AAAA,QAChB;AAAA,QACA,yBAAyB,EAAE,QAAQ,KAAK;AAAA,QACvC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,SACE,oBAAC,QAAK,oBAAgB,MAAC,WAAuB,GAAG,MAC9C,UACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/Button/Button.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../lib/cn.js";
 import { Spinner } from "../Spinner/Spinner.js";
-const BASE = "inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius-pill) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none";
+const BASE = "inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none";
 const VARIANT = {
   primary: "bg-(--accent) text-(--accent-foreground) border border-(--accent) hover:opacity-85",
   secondary: "border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)",
@@ -23,7 +23,7 @@ const ICON_SIZE = {
 };
 const SPINNER_SIZE = { sm: "sm", md: "sm", lg: "md" };
 function Keycap({ glyph }) {
-  return /* @__PURE__ */ jsx("span", { className: "rounded-(--radius-pill) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55", children: glyph });
+  return /* @__PURE__ */ jsx("span", { className: "rounded-(--radius-sm) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55", children: glyph });
 }
 function Button(props) {
   const {

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Spinner } from '../Spinner/Spinner'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * The base every variant shares.\n *\n * A pill, and it does not move on hover. An earlier base lifted a pixel and\n * asked for a shadow the White Reset does not have — `--shadow` resolves to\n * `none`, so that hover state was invisible on every button in the system while\n * still costing a transition. Opacity carries the filled hover; the border\n * carries the outlined one.\n *\n * The transition names its properties rather than using `all`, so a layout\n * change (a width that grows when the label becomes \"Saving…\") is instant\n * instead of sliding.\n */\nconst BASE =\n  'inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius-pill) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none'\n\nconst VARIANT: Record<ButtonVariant, string> = {\n  primary: 'bg-(--accent) text-(--accent-foreground) border border-(--accent) hover:opacity-85',\n  secondary: 'border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)',\n  ghost: 'border border-transparent text-(--ink-2) hover:text-(--ink) hover:bg-(--stone)',\n  /* The one place chroma is allowed on a control, and only because the action\n     is destructive — that is a state, not a brand colour. */\n  danger: 'bg-(--danger) text-(--paper) border border-(--danger) hover:opacity-85',\n}\n\n/**\n * `min-h` rather than `h`, so a button that wraps to two lines grows instead of\n * clipping.\n *\n * The heights come from the density tokens rather than from a literal, so a\n * subtree marked `data-density=\"compact\"` shrinks its controls without a single\n * call site being told. At the default density `md` is 44px — the pointer\n * target WCAG 2.5.5 asks for.\n */\nconst SIZE: Record<ButtonSize, string> = {\n  sm: 'min-h-(--control-h-sm) px-(--control-px-sm) py-(--control-py-sm) text-[13px]',\n  md: 'min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm',\n  lg: 'min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px]',\n}\n\n/** Square, because an icon has no label to give the box its width. */\nconst ICON_SIZE: Record<ButtonSize, string> = {\n  sm: 'size-(--control-h-sm) p-0',\n  md: 'size-(--control-h-md) p-0',\n  lg: 'size-(--control-h-lg) p-0',\n}\n\nconst SPINNER_SIZE: Record<ButtonSize, 'sm' | 'md'> = { sm: 'sm', md: 'sm', lg: 'md' }\n\ninterface CommonProps {\n  children?: ReactNode\n  /**\n   * Which action this is. `primary` is the one thing the screen wants you to\n   * do, so there is at most one per view; `danger` is reserved for destructive\n   * actions and is the only place chroma is allowed on a control.\n   */\n  variant?: ButtonVariant\n  /** 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own. */\n  size?: ButtonSize\n  /** Optional mono keycap glyph rendered after the label (e.g. \"P\"). */\n  keycap?: string\n  /**\n   * Swaps the leading content for a spinner and blocks interaction. The label\n   * stays put — a button that empties out while it works loses its width, and\n   * the page reflows under the pointer that just clicked it.\n   */\n  loading?: boolean\n  /**\n   * Square control with no label. REQUIRES `aria-label`: an icon-only button\n   * with no accessible name is invisible to a screen reader, and this is the\n   * single most common way a design system ships an unusable control.\n   */\n  iconOnly?: boolean\n  /**\n   * Render the child element instead of a `<button>`, keeping these styles.\n   * Use it to hand the styling to a router's `Link` — `asChild` is what keeps\n   * this package free of any one router.\n   *\n   * The decoration slots (`keycap`, `loading`) are not injected into a slotted\n   * child; compose them inside it yourself.\n   *\n   * @example\n   * <Button asChild><Link href=\"/work\">Work</Link></Button>\n   */\n  asChild?: boolean\n  className?: string\n}\n\ntype ButtonAsLink = CommonProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & { href: string }\n\ntype ButtonAsButton = CommonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & { href?: undefined }\n\nexport type ButtonProps = ButtonAsLink | ButtonAsButton\n\nfunction Keycap({ glyph }: { glyph: string }) {\n  return (\n    <span className=\"rounded-(--radius-pill) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55\">\n      {glyph}\n    </span>\n  )\n}\n\n/**\n * The system's action.\n *\n * Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it\n * via `asChild`. No router is imported, so the package stays framework-agnostic\n * and a Next or React Router app wires its own `Link` at the call site.\n *\n * Server-component friendly: there is no client boundary here, so it renders in\n * a static page as well as an interactive one.\n *\n * @example\n * <Button variant=\"secondary\" keycap=\"P\">View projects</Button>\n * @example\n * <Button loading disabled>Saving…</Button>\n * @example\n * <Button iconOnly aria-label=\"Close\"><X size={16} /></Button>\n */\nexport function Button(props: ButtonProps) {\n  const {\n    children,\n    variant = 'primary',\n    size = 'md',\n    keycap,\n    loading = false,\n    iconOnly = false,\n    asChild = false,\n    className,\n  } = props\n\n  const cls = cn(BASE, VARIANT[variant], iconOnly ? ICON_SIZE[size] : SIZE[size], className)\n\n  // A filled ground needs a spinner in the inherited colour; an outlined one\n  // reads better against the page's own rule scale.\n  const spinnerTone = variant === 'primary' || variant === 'danger' ? 'current' : 'default'\n  const decoration = (\n    <>\n      {loading && <Spinner size={SPINNER_SIZE[size]} tone={spinnerTone} label={null} />}\n      {children}\n      {keycap && <Keycap glyph={keycap} />}\n    </>\n  )\n\n  if (asChild) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n    return (\n      <Slot className={cls} {...rest}>\n        {children}\n      </Slot>\n    )\n  }\n\n  if (props.href !== undefined) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, href, ...rest } = props\n    return (\n      <a\n        href={href}\n        className={cls}\n        // A link cannot be `disabled`; `aria-disabled` plus the pointer-events\n        // rule in BASE is the accessible equivalent.\n        aria-disabled={loading || undefined}\n        {...rest}\n      >\n        {decoration}\n      </a>\n    )\n  }\n\n  const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n  return (\n    <button\n      type={rest.type ?? 'button'}\n      aria-busy={loading || undefined}\n      disabled={rest.disabled || loading}\n      className={cls}\n      {...rest}\n    >\n      {decoration}\n    </button>\n  )\n}\n\nexport default Button\n"],"mappings":"AA0GI,SAyCA,UAzCA,KAyCA,YAzCA;AA1GJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,eAAe;AAkBxB,MAAM,OACJ;AAEF,MAAM,UAAyC;AAAA,EAC7C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA;AAAA;AAAA,EAGP,QAAQ;AACV;AAWA,MAAM,OAAmC;AAAA,EACvC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,YAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAgD,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AAiDrF,SAAS,OAAO,EAAE,MAAM,GAAsB;AAC5C,SACE,oBAAC,UAAK,WAAU,8FACb,iBACH;AAEJ;AAmBO,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,GAAG,MAAM,QAAQ,OAAO,GAAG,WAAW,UAAU,IAAI,IAAI,KAAK,IAAI,GAAG,SAAS;AAIzF,QAAM,cAAc,YAAY,aAAa,YAAY,WAAW,YAAY;AAChF,QAAM,aACJ,iCACG;AAAA,eAAW,oBAAC,WAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,aAAa,OAAO,MAAM;AAAA,IAC9E;AAAA,IACA,UAAU,oBAAC,UAAO,OAAO,QAAQ;AAAA,KACpC;AAGF,MAAI,SAAS;AACX,UAAM,EAAE,UAAUA,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,GAAGC,MAAK,IAAI;AAC7H,WACE,oBAAC,QAAK,WAAW,KAAM,GAAGA,OACvB,UACH;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,QAAW;AAC5B,UAAM,EAAE,UAAUR,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,MAAM,GAAGC,MAAK,IAAI;AACnI,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QAGX,iBAAe,WAAW;AAAA,QACzB,GAAGA;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,SAAS,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,KAAK,GAAG,KAAK,IAAI;AAC7H,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK,QAAQ;AAAA,MACnB,aAAW,WAAW;AAAA,MACtB,UAAU,KAAK,YAAY;AAAA,MAC3B,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;","names":["_c","_v","_s","_k","_l","_i","_a","_cn","rest"]}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Spinner } from '../Spinner/Spinner'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * The base every variant shares.\n *\n * It reads `--radius`, the CONTROL step, which is the same corner an `Input`,\n * a `Select` trigger and a `Textarea` draw. It used to be a pill, and a pill\n * beside an 8px field is two different ideas of what a control is — the one\n * inconsistency in the system that every reader noticed and none of the\n * component pages could explain. Everything on the control line now agrees,\n * and the capsule is kept for the things that genuinely are one: a badge, a\n * status pill, a segmented strip, a progress track.\n *\n * It does not move on hover. An earlier base lifted a pixel and asked for a\n * shadow the White Reset does not have — `--shadow` resolves to `none`, so that\n * hover state was invisible on every button in the system while still costing a\n * transition. Opacity carries the filled hover; the border carries the outlined\n * one.\n *\n * The transition names its properties rather than using `all`, so a layout\n * change (a width that grows when the label becomes \"Saving…\") is instant\n * instead of sliding.\n */\nconst BASE =\n  'inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none'\n\nconst VARIANT: Record<ButtonVariant, string> = {\n  primary: 'bg-(--accent) text-(--accent-foreground) border border-(--accent) hover:opacity-85',\n  secondary: 'border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)',\n  ghost: 'border border-transparent text-(--ink-2) hover:text-(--ink) hover:bg-(--stone)',\n  /* The one place chroma is allowed on a control, and only because the action\n     is destructive — that is a state, not a brand colour. */\n  danger: 'bg-(--danger) text-(--paper) border border-(--danger) hover:opacity-85',\n}\n\n/**\n * `min-h` rather than `h`, so a button that wraps to two lines grows instead of\n * clipping.\n *\n * The heights come from the density tokens rather than from a literal, so a\n * subtree marked `data-density=\"compact\"` shrinks its controls without a single\n * call site being told. At the default density `md` is 44px — the pointer\n * target WCAG 2.5.5 asks for.\n */\nconst SIZE: Record<ButtonSize, string> = {\n  sm: 'min-h-(--control-h-sm) px-(--control-px-sm) py-(--control-py-sm) text-[13px]',\n  md: 'min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm',\n  lg: 'min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px]',\n}\n\n/** Square, because an icon has no label to give the box its width. */\nconst ICON_SIZE: Record<ButtonSize, string> = {\n  sm: 'size-(--control-h-sm) p-0',\n  md: 'size-(--control-h-md) p-0',\n  lg: 'size-(--control-h-lg) p-0',\n}\n\nconst SPINNER_SIZE: Record<ButtonSize, 'sm' | 'md'> = { sm: 'sm', md: 'sm', lg: 'md' }\n\ninterface CommonProps {\n  children?: ReactNode\n  /**\n   * Which action this is. `primary` is the one thing the screen wants you to\n   * do, so there is at most one per view; `danger` is reserved for destructive\n   * actions and is the only place chroma is allowed on a control.\n   */\n  variant?: ButtonVariant\n  /** 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own. */\n  size?: ButtonSize\n  /** Optional mono keycap glyph rendered after the label (e.g. \"P\"). */\n  keycap?: string\n  /**\n   * Swaps the leading content for a spinner and blocks interaction. The label\n   * stays put — a button that empties out while it works loses its width, and\n   * the page reflows under the pointer that just clicked it.\n   */\n  loading?: boolean\n  /**\n   * Square control with no label. REQUIRES `aria-label`: an icon-only button\n   * with no accessible name is invisible to a screen reader, and this is the\n   * single most common way a design system ships an unusable control.\n   */\n  iconOnly?: boolean\n  /**\n   * Render the child element instead of a `<button>`, keeping these styles.\n   * Use it to hand the styling to a router's `Link` — `asChild` is what keeps\n   * this package free of any one router.\n   *\n   * The decoration slots (`keycap`, `loading`) are not injected into a slotted\n   * child; compose them inside it yourself.\n   *\n   * @example\n   * <Button asChild><Link href=\"/work\">Work</Link></Button>\n   */\n  asChild?: boolean\n  className?: string\n}\n\ntype ButtonAsLink = CommonProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & { href: string }\n\ntype ButtonAsButton = CommonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & { href?: undefined }\n\nexport type ButtonProps = ButtonAsLink | ButtonAsButton\n\nfunction Keycap({ glyph }: { glyph: string }) {\n  return (\n    <span className=\"rounded-(--radius-sm) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55\">\n      {glyph}\n    </span>\n  )\n}\n\n/**\n * The system's action.\n *\n * Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it\n * via `asChild`. No router is imported, so the package stays framework-agnostic\n * and a Next or React Router app wires its own `Link` at the call site.\n *\n * Server-component friendly: there is no client boundary here, so it renders in\n * a static page as well as an interactive one.\n *\n * @example\n * <Button variant=\"secondary\" keycap=\"P\">View projects</Button>\n * @example\n * <Button loading disabled>Saving…</Button>\n * @example\n * <Button iconOnly aria-label=\"Close\"><X size={16} /></Button>\n */\nexport function Button(props: ButtonProps) {\n  const {\n    children,\n    variant = 'primary',\n    size = 'md',\n    keycap,\n    loading = false,\n    iconOnly = false,\n    asChild = false,\n    className,\n  } = props\n\n  const cls = cn(BASE, VARIANT[variant], iconOnly ? ICON_SIZE[size] : SIZE[size], className)\n\n  // A filled ground needs a spinner in the inherited colour; an outlined one\n  // reads better against the page's own rule scale.\n  const spinnerTone = variant === 'primary' || variant === 'danger' ? 'current' : 'default'\n  const decoration = (\n    <>\n      {loading && <Spinner size={SPINNER_SIZE[size]} tone={spinnerTone} label={null} />}\n      {children}\n      {keycap && <Keycap glyph={keycap} />}\n    </>\n  )\n\n  if (asChild) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n    return (\n      <Slot className={cls} {...rest}>\n        {children}\n      </Slot>\n    )\n  }\n\n  if (props.href !== undefined) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, href, ...rest } = props\n    return (\n      <a\n        href={href}\n        className={cls}\n        // A link cannot be `disabled`; `aria-disabled` plus the pointer-events\n        // rule in BASE is the accessible equivalent.\n        aria-disabled={loading || undefined}\n        {...rest}\n      >\n        {decoration}\n      </a>\n    )\n  }\n\n  const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n  return (\n    <button\n      type={rest.type ?? 'button'}\n      aria-busy={loading || undefined}\n      disabled={rest.disabled || loading}\n      className={cls}\n      {...rest}\n    >\n      {decoration}\n    </button>\n  )\n}\n\nexport default Button\n"],"mappings":"AAkHI,SAyCA,UAzCA,KAyCA,YAzCA;AAlHJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,eAAe;AA0BxB,MAAM,OACJ;AAEF,MAAM,UAAyC;AAAA,EAC7C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA;AAAA;AAAA,EAGP,QAAQ;AACV;AAWA,MAAM,OAAmC;AAAA,EACvC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,YAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAgD,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AAiDrF,SAAS,OAAO,EAAE,MAAM,GAAsB;AAC5C,SACE,oBAAC,UAAK,WAAU,4FACb,iBACH;AAEJ;AAmBO,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,GAAG,MAAM,QAAQ,OAAO,GAAG,WAAW,UAAU,IAAI,IAAI,KAAK,IAAI,GAAG,SAAS;AAIzF,QAAM,cAAc,YAAY,aAAa,YAAY,WAAW,YAAY;AAChF,QAAM,aACJ,iCACG;AAAA,eAAW,oBAAC,WAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,aAAa,OAAO,MAAM;AAAA,IAC9E;AAAA,IACA,UAAU,oBAAC,UAAO,OAAO,QAAQ;AAAA,KACpC;AAGF,MAAI,SAAS;AACX,UAAM,EAAE,UAAUA,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,GAAGC,MAAK,IAAI;AAC7H,WACE,oBAAC,QAAK,WAAW,KAAM,GAAGA,OACvB,UACH;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,QAAW;AAC5B,UAAM,EAAE,UAAUR,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,MAAM,GAAGC,MAAK,IAAI;AACnI,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QAGX,iBAAe,WAAW;AAAA,QACzB,GAAGA;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,SAAS,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,KAAK,GAAG,KAAK,IAAI;AAC7H,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK,QAAQ;AAAA,MACnB,aAAW,WAAW;AAAA,MACtB,UAAU,KAAK,YAAY;AAAA,MAC3B,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;","names":["_c","_v","_s","_k","_l","_i","_a","_cn","rest"]}

package/dist/components/Calendar/Calendar.d.ts

@@ -23,6 +23,6 @@ type CalendarProps = DayPickerProps;
  * // A birth date: widen the years, since the default span is deliberately short.
  * <Calendar mode="single" startMonth={new Date(1920, 0)} endMonth={new Date()} />
  */
-declare function Calendar({ className, classNames, captionLayout, components, ...props }: CalendarProps): react.JSX.Element;
+declare function Calendar({ className, classNames, components, ...props }: CalendarProps): react.JSX.Element;
 
 export { Calendar, type CalendarProps, Calendar as default };