@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/usage-meter/usage-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usage-meter.js","names":[],"sources":["../../src/usage-meter/usage-meter.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { Badge } from \"../badge/badge.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useCountTo } from \"../lib/count-to.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { FILL, live, retarget, SMOOTH, type Live } from \"../lib/spring-tween.js\";\nimport { useSvgId } from \"../lib/svg-id.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * UsageMeter: a fixed allowance, such as storage or seats, when people need to\n * see what takes the space and how close they are to the limit.\n *\n * The segments grow into place from the left once the meter is seen, each a\n * beat after the one before. After that every change re-flows them: a segment\n * that grows pushes the ones after it along in the same frame. The bar spans\n * the limit, or everything used once that is more; past the limit the overflow\n * keeps its colours but is struck through with a hatch, and a marker shows\n * where the limit was, so \"over\" never rests on colour alone. The headline and\n * every legend value count to their new number, and the status mark swaps its\n * words and icon while its width follows.\n *\n * Hover previews a category, focus previews it too, and a press pins it until\n * pressed again or Escape. The legend is the keyboard path: arrow keys move\n * between categories. The bar names every amount for assistive technology,\n * and a change of status (almost full, over, back under) is announced.\n *\n * Plain DOM and CSS; one small spring tween writes the segments straight to\n * their elements.\n */\nexport interface UsageMeterSegment {\n  /** Stable identity. Keep it the same while the value changes, so the segment re-flows instead of being replaced. */\n  id: string;\n  label: string;\n  value: number;\n}\n\nexport interface UsageMeterProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** What is measured, such as \"Workspace storage\". */\n  label: string;\n  /** Used amounts in display order. Up to four read clearly. */\n  segments: UsageMeterSegment[];\n  /** The plan limit, in the same unit as the segments. */\n  limit: number;\n  /** Unit after each number, such as \"GB\". */\n  unit?: string;\n  /** Digits after the decimal point. @default 1 */\n  decimals?: number;\n  /** Name of the unused share. @default \"Free\" */\n  freeLabel?: string;\n  /** Name of the share past the limit. @default \"Over limit\" */\n  overLabel?: string;\n  /** Share of the limit at which the meter warns that it is almost full. @default 0.9 */\n  warnAt?: number;\n  /**\n   * The state as the caller (usually the backend) reads it, overriding the one\n   * `warnAt` and the limit would give. `ok` and `warn` look as the meter's own\n   * under-limit and almost-full states; `full` is the allowance used up\n   * (\"Limit reached\"); `exhausted` is nothing left to draw on at all (\"None\n   * left\"). Left out, the meter works it out itself.\n   *\n   * The bar and legend agree with it: under `full` or `exhausted` the free\n   * share is shown as none (the bar fills, the free item reads 0), and past\n   * the limit `ok` and `warn` give way to the meter's own over state, since\n   * the hatch already says over.\n   */\n  status?: UsageMeterStatus;\n  /**\n   * The product's words for the status, such as \"Credits paused\". They replace\n   * the badge's words (including \"Unlimited\"), the status in the bar's name and\n   * the announcement; the tone and icon still follow the status.\n   */\n  statusLabel?: string;\n  /**\n   * No limit: the bar shows each category's share of what is used, with no\n   * free share, limit marker or overflow, and the badge reads \"Unlimited\"\n   * unless `statusLabel` is set. `limit`, `warnAt` and `status` are ignored.\n   */\n  unlimited?: boolean;\n}\n\n/**\n * A status the caller can impose: under the limit, almost full, allowance used\n * up, and nothing left at all.\n */\nexport type UsageMeterStatus = \"ok\" | \"warn\" | \"full\" | \"exhausted\";\n\ntype Status = \"ok\" | \"near\" | \"over\" | \"full\" | \"exhausted\";\n\n/** The imposed status as `data-status` names it: `warn` is the meter's own `near`. */\nconst IMPOSED: Record<UsageMeterStatus, Status> = {\n  ok: \"ok\",\n  warn: \"near\",\n  full: \"full\",\n  exhausted: \"exhausted\",\n};\n\n/** A segment stops two pixels short of the next, so neighbours read apart without an outline. */\nconst GAP = 2;\n/** Stagger of each segment's first growth. */\nconst STAGGER_MS = 70;\nconst formats = new Map<number, Intl.NumberFormat>();\nfunction numberFormat(decimals: number) {\n  let format = formats.get(decimals);\n  if (!format) {\n    format = new Intl.NumberFormat(\"en-US\", {\n      minimumFractionDigits: decimals,\n      maximumFractionDigits: decimals,\n    });\n    formats.set(decimals, format);\n  }\n  return format;\n}\n\n/** A number that counts to each new value on the smooth spring. useCountTo counts whole steps, so decimals are counted in units of the last place. */\nfunction Count({ value, decimals }: { value: number; decimals: number }) {\n  const scale = 10 ** decimals;\n  const shown = useCountTo(Math.round(value * scale));\n  return <>{numberFormat(decimals).format(shown / scale)}</>;\n}\n\nfunction AlertCircleIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-3.5\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 8v4M12 16h.01\" />\n    </svg>\n  );\n}\n\nfunction AlertTriangleIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-3.5\"\n    >\n      <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n      <path d=\"M12 9v4M12 17h.01\" />\n    </svg>\n  );\n}\n\nexport const UsageMeter = forwardRef<HTMLDivElement, UsageMeterProps>(function UsageMeter(\n  {\n    label,\n    segments,\n    limit,\n    unit = \"\",\n    decimals = 1,\n    freeLabel = \"Free\",\n    overLabel = \"Over limit\",\n    warnAt = 0.9,\n    status: imposed,\n    statusLabel,\n    unlimited = false,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const root = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, root), [ref]);\n  const bar = useRef<HTMLDivElement>(null);\n  const track = useRef<HTMLDivElement>(null);\n  const marker = useRef<HTMLSpanElement>(null);\n  const overflow = useRef<SVGSVGElement>(null);\n  const legend = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const hatchId = `hatch${useSvgId()}`;\n\n  const round = (value: number) => Math.round(value * 10 ** decimals) / 10 ** decimals;\n  const total = round(segments.reduce((sum, segment) => sum + segment.value, 0));\n  const over = round(Math.max(0, total - limit));\n  // What the numbers say (it decides the free or over share), and what the meter shows (it may be imposed).\n  const past = !unlimited && total > limit;\n  // Past the limit an imposed calm status would contradict the hatch, so the numbers win.\n  const calm = imposed === \"ok\" || imposed === \"warn\";\n  const status: Status = unlimited\n    ? \"ok\"\n    : imposed && !(past && calm)\n      ? IMPOSED[imposed]\n      : past\n        ? \"over\"\n        : total >= limit * warnAt\n          ? \"near\"\n          : \"ok\";\n  // An imposed used-up status under the limit: no free share, and the bar spans what is used.\n  const capped = !unlimited && !past && (status === \"full\" || status === \"exhausted\");\n  const ceiling = capped ? total : limit;\n  const free = round(Math.max(0, ceiling - total));\n  const danger = status === \"over\" || status === \"full\" || status === \"exhausted\";\n  const format = (value: number) =>\n    `${numberFormat(decimals).format(value)}${unit ? ` ${unit}` : \"\"}`;\n  const limitText = format(limit).replace(/\\.0+(?= |$)/, \"\");\n\n  // Seen: the segments grow once a good part of the meter is in view.\n  const [ready, setReady] = useState(false);\n  useEffect(() => {\n    const node = root.current;\n    if (!node || prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setReady(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setReady(true);\n      },\n      { threshold: 0.4 },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  // One live value per segment id, kept across renders so a changed value springs from where it is.\n  const [amounts] = useState(() => new Map<string, Live>());\n  // Unlimited, the bar spans what is used: the limit springs to nothing and is never \"over\".\n  // Used up, the bar spans what is used: the limit springs to the total and nothing is \"over\".\n  const shownLimit = useRef(live(unlimited ? 0 : ceiling));\n  const width = useRef(0);\n  const bounded = useRef(!unlimited && !capped);\n  // Before the paint effects below, which read it.\n  useIsomorphicLayoutEffect(() => {\n    bounded.current = !unlimited && !capped;\n  });\n\n  /** One writer: every segment's place and length, the limit marker and the overflow hatch. */\n  const paint = useCallback(() => {\n    const frame = track.current;\n    if (!frame) return;\n    const w = width.current;\n    const nodes = frame.querySelectorAll<HTMLElement>(\"[data-segment]\");\n    let used = 0;\n    for (const node of nodes) used += amounts.get(node.dataset.segment!)?.value ?? 0;\n    const limitNow = shownLimit.current.value;\n    // The bar spans the limit, or everything used once that is more; both follow their springs, so crossing the limit is continuous.\n    const span = Math.max(limitNow, used, 1e-6);\n    let start = 0;\n    for (const node of nodes) {\n      const amount = amounts.get(node.dataset.segment!)?.value ?? 0;\n      const x = (start / span) * w;\n      const size = (amount / span) * w;\n      const rest = w - x - size;\n      const scale = w ? Math.max(0, size - Math.min(GAP, size, Math.max(0, rest))) / w : 0;\n      node.style.transform = `translateX(${x.toFixed(2)}px) scaleX(${scale.toFixed(4)})`;\n      start += amount;\n    }\n    const limitX = Math.round((limitNow / span) * w);\n    if (marker.current) marker.current.style.translate = `${limitX}px 0`;\n    if (overflow.current) overflow.current.style.clipPath = `inset(0 0 0 ${limitX + GAP}px)`;\n    if (bar.current) {\n      if (bounded.current && used > limitNow) bar.current.setAttribute(\"data-over\", \"\");\n      else bar.current.removeAttribute(\"data-over\");\n    }\n  }, [amounts]);\n\n  useIsomorphicLayoutEffect(() => {\n    const node = track.current;\n    if (!node) return;\n    const read = () => {\n      width.current = node.clientWidth;\n      paint();\n    };\n    read();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(read);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [paint]);\n  useIsomorphicLayoutEffect(paint);\n\n  // Segments grow into place once seen, left to right; later changes re-flow every segment on one spring each.\n  const values = segments.map((segment) => `${segment.id}:${segment.value}`).join(\"|\");\n  const revealed = useRef(false);\n  const latest = useRef(segments);\n  useIsomorphicLayoutEffect(() => {\n    latest.current = segments;\n  });\n  useEffect(() => {\n    if (!ready) return;\n    const first = !revealed.current;\n    revealed.current = true;\n    latest.current.forEach((segment, index) => {\n      let amount = amounts.get(segment.id);\n      if (!amount) {\n        amount = live(0);\n        amounts.set(segment.id, amount);\n      }\n      retarget(amount, segment.value, first ? FILL : SMOOTH, paint, first ? index * STAGGER_MS : 0);\n    });\n    // `values` stands for every segment id and value.\n  }, [values, ready, paint, amounts]);\n  useEffect(() => {\n    retarget(shownLimit.current, unlimited ? 0 : ceiling, SMOOTH, paint);\n  }, [ceiling, unlimited, paint]);\n  useEffect(() => {\n    const bound = shownLimit.current;\n    return () => {\n      for (const amount of amounts.values()) amount.stop();\n      bound.stop();\n    };\n  }, [amounts]);\n\n  // Hover previews a category, focus previews it too, and a press pins it until pressed again or Escape.\n  const [hovered, setHovered] = useState<string | null>(null);\n  const [focused, setFocused] = useState<string | null>(null);\n  const [pinned, setPinned] = useState<string | null>(null);\n  const [roving, setRoving] = useState(0);\n  const items = [\n    ...segments.map((segment) => ({ id: segment.id, label: segment.label, value: segment.value })),\n    // Unlimited has no free share to name.\n    ...(unlimited\n      ? []\n      : [{ id: \"free\", label: past ? overLabel : freeLabel, value: past ? over : free }]),\n  ];\n  // The list can shrink under the roving item (unlimited drops the free share), so keep it in range.\n  const rove = Math.min(roving, Math.max(0, items.length - 1));\n  const active = hovered ?? focused ?? pinned;\n  const activeItem = items.find((item) => item.id === active) ?? null;\n\n  const idAt = (clientX: number) => {\n    const rect = track.current?.getBoundingClientRect();\n    if (!rect?.width) return null;\n    const at =\n      ((clientX - rect.left) / rect.width) * (unlimited ? total : Math.max(ceiling, total));\n    // Past the limit the hatch stands for the overage, so pointing there highlights it rather than the category beneath.\n    if (!unlimited && at > ceiling) return \"free\";\n    let end = 0;\n    for (const segment of segments) {\n      end += segment.value;\n      if (at <= end) return segment.id;\n    }\n    return unlimited ? null : \"free\";\n  };\n  const onTrackMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.pointerType === \"mouse\") setHovered(idAt(event.clientX));\n  };\n  const onTrackTap = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.pointerType === \"mouse\") return;\n    const id = idAt(event.clientX);\n    setPinned((current) => (current === id ? null : id));\n  };\n  const onLegendKey = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"Escape\") {\n      if (pinned || focused) {\n        event.preventDefault();\n        setPinned(null);\n        setFocused(null);\n      }\n      return;\n    }\n    const next = (\n      {\n        ArrowRight: rove + 1,\n        ArrowDown: rove + 1,\n        ArrowLeft: rove - 1,\n        ArrowUp: rove - 1,\n        Home: 0,\n        End: items.length - 1,\n      } as Record<string, number>\n    )[event.key];\n    if (next === undefined || !items.length) return;\n    event.preventDefault();\n    const index = (next + items.length) % items.length;\n    setRoving(index);\n    legend.current?.querySelectorAll<HTMLButtonElement>(\"button\")[index]?.focus();\n  };\n\n  const headline = ready ? (activeItem ? activeItem.value : total) : 0;\n  // Unlimited never shows the share, and a zero limit has none.\n  const share =\n    activeItem && !unlimited && limit > 0 ? Math.round((activeItem.value / limit) * 100) : 0;\n  const caption = !activeItem\n    ? unlimited\n      ? `${unit} used · no limit`\n      : `${unit} of ${limitText} used`\n    : activeItem.id === \"free\"\n      ? `${unit} ${past ? \"over the limit\" : \"free\"}`\n      : unlimited\n        ? `${unit} in ${activeItem.label}`\n        : `${unit} in ${activeItem.label} · ${share}% of plan`;\n  const badge =\n    statusLabel ??\n    (unlimited\n      ? \"Unlimited\"\n      : status === \"over\"\n        ? `${format(over)} over`\n        : status === \"near\"\n          ? \"Almost full\"\n          : status === \"full\"\n            ? \"Limit reached\"\n            : status === \"exhausted\"\n              ? \"None left\"\n              : `${format(free)} free`);\n  const breakdown = segments\n    .map((segment) => `${segment.label} ${format(segment.value)}`)\n    .join(\", \");\n  // statusLabel is the status in words wherever the meter states it: badge, bar name and announcement.\n  const labelled = statusLabel ? ` ${statusLabel}.` : \"\";\n  const summary = unlimited\n    ? `${label}: ${format(total)} used, no limit. ${breakdown}.${labelled}`\n    : `${label}: ${format(total)} of ${limitText} used. ${breakdown}. ${\n        status === \"over\"\n          ? `Over the limit by ${format(over)}.`\n          : `${format(free)} free${\n              statusLabel\n                ? \"\"\n                : status === \"near\"\n                  ? \", almost full\"\n                  : status === \"full\"\n                    ? \", limit reached\"\n                    : status === \"exhausted\"\n                      ? \", none left\"\n                      : \"\"\n            }.`\n      }${labelled}`;\n\n  // Status changes are announced, and so is a growing overage; routine changes inside a status stay quiet.\n  const notice = `${unlimited ? \"unlimited\" : status === \"over\" ? `over:${over}` : status}|${statusLabel ?? \"\"}`;\n  const [announced, setAnnounced] = useState({ notice, message: \"\" });\n  if (announced.notice !== notice) {\n    setAnnounced({\n      notice,\n      message: unlimited\n        ? `No limit.${labelled}`\n        : status === \"over\"\n          ? `Over the plan limit by ${format(over)}.${labelled}`\n          : statusLabel\n            ? `${statusLabel}. ${format(free)} free.`\n            : status === \"near\"\n              ? `Almost full. ${format(free)} free.`\n              : status === \"full\"\n                ? \"Limit reached.\"\n                : status === \"exhausted\"\n                  ? \"None left.\"\n                  : `Under the limit. ${format(free)} free.`,\n    });\n  }\n\n  return (\n    <div\n      ref={refs}\n      {...props}\n      role=\"group\"\n      aria-labelledby={titleId}\n      data-slot=\"usage-meter\"\n      data-status={status}\n      data-unlimited={unlimited || undefined}\n      className={cn(\"usage-meter\", className)}\n    >\n      <div className=\"flex min-h-7 min-w-0 items-center justify-between gap-3\">\n        <span id={titleId} className=\"min-w-0 text-base font-medium text-foreground text-balance\">\n          {label}\n        </span>\n        <Badge\n          tone={danger ? \"danger\" : status === \"near\" ? \"warning\" : \"neutral\"}\n          shape=\"pill\"\n          size=\"lg\"\n          icon={\n            danger ? <AlertTriangleIcon /> : status === \"near\" ? <AlertCircleIcon /> : undefined\n          }\n        >\n          {badge}\n        </Badge>\n      </div>\n      <p className=\"m-0 flex min-w-0 items-baseline gap-2\">\n        <span className=\"sr-only\">\n          {unlimited ? `${format(total)} used, no limit` : `${format(total)} of ${limitText} used`}\n        </span>\n        <span\n          data-slot=\"usage-meter-amount\"\n          aria-hidden=\"true\"\n          className=\"flex-none font-display text-h2 font-medium tabular-nums\"\n        >\n          <Count value={headline} decimals={decimals} />\n        </span>\n        <span aria-hidden=\"true\" className=\"min-w-0 flex-1 text-sm text-text-secondary\">\n          <SwapText swapKey={caption} className=\"block truncate\">\n            {caption}\n          </SwapText>\n        </span>\n      </p>\n      <div ref={bar} className=\"usage-meter-bar\" data-slot=\"usage-meter-bar\">\n        <div\n          ref={track}\n          role=\"img\"\n          aria-label={summary}\n          data-active={active ?? undefined}\n          onPointerMove={onTrackMove}\n          onPointerLeave={() => setHovered(null)}\n          onPointerUp={onTrackTap}\n          className=\"usage-meter-track\"\n        >\n          {segments.map((segment, index) => (\n            <span\n              key={segment.id}\n              data-segment={segment.id}\n              data-index={index}\n              data-highlight={active ? (active === segment.id ? \"on\" : \"off\") : undefined}\n              className=\"usage-meter-segment\"\n            />\n          ))}\n          {/* Past the limit the bar is struck through: the overflow keeps its colours, hatched so it reads as over without colour. */}\n          {unlimited ? null : (\n            <svg\n              ref={overflow}\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              data-highlight={active ? (active === \"free\" ? \"on\" : \"off\") : undefined}\n              className=\"usage-meter-overflow\"\n            >\n              <defs>\n                <pattern\n                  id={hatchId}\n                  width={6}\n                  height={6}\n                  patternUnits=\"userSpaceOnUse\"\n                  patternTransform=\"rotate(45)\"\n                >\n                  <rect width={2.5} height={6} className=\"usage-meter-hatch\" />\n                </pattern>\n              </defs>\n              <rect width=\"100%\" height=\"100%\" className=\"usage-meter-over-tint\" />\n              <rect width=\"100%\" height=\"100%\" fill={`url(#${hatchId})`} />\n            </svg>\n          )}\n        </div>\n        {unlimited ? null : <span ref={marker} aria-hidden=\"true\" className=\"usage-meter-limit\" />}\n      </div>\n      <div\n        ref={legend}\n        role=\"group\"\n        aria-label={`${label} by category`}\n        onKeyDown={onLegendKey}\n        className=\"usage-meter-legend\"\n      >\n        {items.map((item, index) => {\n          const warning = item.id === \"free\" && past;\n          return (\n            <button\n              key={item.id}\n              type=\"button\"\n              data-slot=\"usage-meter-item\"\n              data-highlight={active ? (active === item.id ? \"on\" : \"off\") : undefined}\n              aria-pressed={pinned === item.id}\n              aria-label={`${item.label}, ${format(item.value)}`}\n              tabIndex={index === rove ? 0 : -1}\n              onClick={() => {\n                setRoving(index);\n                setPinned((current) => (current === item.id ? null : item.id));\n              }}\n              onFocus={(event) => {\n                setRoving(index);\n                if (event.currentTarget.matches(\":focus-visible\")) setFocused(item.id);\n              }}\n              onBlur={() => setFocused(null)}\n              onPointerEnter={(event) => {\n                if (event.pointerType === \"mouse\") setHovered(item.id);\n              }}\n              onPointerLeave={(event) => {\n                if (event.pointerType === \"mouse\") setHovered(null);\n              }}\n              className=\"usage-meter-item\"\n            >\n              <span className=\"flex min-w-0 max-w-full items-center gap-2 text-sm text-text-secondary\">\n                <span aria-hidden=\"true\" className=\"usage-meter-key\">\n                  <SwapText\n                    swapKey={warning ? \"alert\" : \"swatch\"}\n                    motion=\"glyph\"\n                    className=\"grid place-items-center\"\n                  >\n                    {warning ? (\n                      <span className=\"text-destructive-strong\">\n                        <AlertTriangleIcon />\n                      </span>\n                    ) : (\n                      <span\n                        data-index={item.id === \"free\" ? \"free\" : index}\n                        className=\"usage-meter-swatch\"\n                      />\n                    )}\n                  </SwapText>\n                </span>\n                <span className=\"min-w-0 flex-1\">\n                  <SwapText swapKey={item.label} className=\"block truncate\">\n                    {item.label}\n                  </SwapText>\n                </span>\n              </span>\n              <span\n                aria-hidden=\"true\"\n                className=\"flex items-baseline gap-1 ps-5 text-base font-medium text-foreground tabular-nums\"\n              >\n                <Count value={item.value} decimals={decimals} />\n                {unit ? (\n                  <span className=\"text-sm font-normal text-text-secondary\">{unit}</span>\n                ) : null}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n      <p className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n        {announced.message}\n      </p>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/waffle-chart/index.d.ts

@@ -0,0 +1,2 @@
+import { WaffleCategory, WaffleChart, WaffleChartProps } from "./waffle-chart.js";
+export { type WaffleCategory, WaffleChart, type WaffleChartProps };

package/dist/waffle-chart/index.js

@@ -0,0 +1,2 @@
+import { WaffleChart } from "./waffle-chart.js";
+export { WaffleChart };

package/dist/waffle-chart/waffle-chart.d.ts

@@ -0,0 +1,57 @@
+//#region src/waffle-chart/waffle-chart.d.ts
+/**
+ * WaffleChart: parts of a whole as countable squares. Every cell is one share of
+ * the total (a 10 by 10 grid is one cell per percent), filled column by column
+ * from the bottom-left corner like a glass filling up.
+ *
+ * The cells cascade in once the chart is a third in view. New data hands cells
+ * to categories while moving as few as possible: each cell that changes category
+ * travels to its new place (dipping as it flies) and changes colour on the same
+ * stagger. Hovering a cell, a legend row or arrowing through the grid lifts that
+ * category and dims the rest; the legend shares count to their new values.
+ * Neutral categories differ in shape as well as lightness (square, round,
+ * framed), so colour is never the only channel.
+ *
+ * Plain CSS transitions place the cells, with nothing measured: a cell's place is
+ * two unitless numbers and its size comes from the width of the grid.
+ */
+export interface WaffleCategory {
+  /** Stable identity. Cells keep following their category when the data changes, so a new dataset flows instead of repainting. */
+  key: string;
+  /** Name in the legend, the tooltip and the data table. */
+  label: string;
+  /** Raw amount. Shares are computed from the total; negatives count as zero. */
+  value: number;
+  /** Any CSS colour. Defaults to chart-1 for the accent, chart-2 to chart-4 for the next three, then neutral steps. */
+  color?: string;
+}
+export interface WaffleChartProps {
+  /** Categories in fill order. The first fills from the bottom-left corner, column by column. */
+  data: WaffleCategory[];
+  /** What the whole is, such as "Electricity generation, 2023". Names the chart for assistive technology. */
+  label: string;
+  /** Unit after each raw value in the tooltip and table, such as "TWh". */
+  unit?: string;
+  formatValue?: (value: number, category: WaffleCategory) => string;
+  /** @default 10 */
+  rows?: number;
+  /** rows times columns cells make the whole; 10 by 10 is one cell per percent. @default 10 */
+  columns?: number;
+  /** The category painted in chart-1. Pass null to keep every category on its own step. Defaults to the first category. */
+  accentKey?: string | null;
+  /** Controlled pinned category. Others dim while one is pinned. */
+  activeKey?: string | null;
+  defaultActiveKey?: string | null;
+  onActiveChange?: (key: string | null) => void;
+  /** The category list beside or below the grid, with shares that count to their new value. @default true */
+  legend?: boolean;
+  /** Decimal places for shares. @default 0 */
+  decimals?: number;
+  /** @default "No data" */
+  emptyLabel?: string;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+export declare const WaffleChart: import("react").ForwardRefExoticComponent<WaffleChartProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=waffle-chart.d.ts.map

package/dist/waffle-chart/waffle-chart.js

@@ -0,0 +1,426 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { useCountTo } from "../lib/count-to.js";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/waffle-chart/waffle-chart.tsx
+/** Space between cells, in pixels; the same number is in the waffle-chart-grid utility. */
+const GAP = 3;
+/** Lightness steps for categories past the four series colours; they alternate so neighbours differ. */
+const SHADES = [
+	40,
+	20,
+	30,
+	14
+];
+/** The colour-free second channel. */
+const SHAPES = [
+	"square",
+	"round",
+	"framed"
+];
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const GROUPED = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+/** Whole cells per category by largest remainder, so the counts always add up to the grid. */
+function allocate(data, total, cells) {
+	if (total <= 0) return data.map(() => 0);
+	const exact = data.map((item) => Math.max(0, item.value) / total * cells);
+	const counts = exact.map(Math.floor);
+	let left = cells - counts.reduce((sum, count) => sum + count, 0);
+	const order = exact.map((value, index) => ({
+		index,
+		rest: value - Math.floor(value)
+	})).sort((a, b) => b.rest - a.rest);
+	for (let k = 0; left > 0 && k < order.length; k++, left--) counts[order[k].index]++;
+	return counts;
+}
+/**
+* Hands cells to categories while moving as few as possible: each category keeps the cells it already had,
+* surplus cells join the categories that grew, and every block takes its cells in their previous order so paths never cross.
+*/
+function reassign(previous, data, counts) {
+	const bySlot = [...previous].sort((a, b) => a.slot - b.slot);
+	const kept = /* @__PURE__ */ new Map();
+	const pool = [];
+	const want = new Map(data.map((item, index) => [item.key, counts[index]]));
+	for (const cell of bySlot) {
+		const list = cell.key !== null ? kept.get(cell.key) ?? [] : [];
+		if (cell.key !== null && list.length < (want.get(cell.key) ?? 0)) {
+			list.push(cell);
+			kept.set(cell.key, list);
+		} else pool.push(cell);
+	}
+	const next = [];
+	let slot = 0;
+	data.forEach((item, index) => {
+		const own = kept.get(item.key) ?? [];
+		while (own.length < counts[index] && pool.length) own.push(pool.shift());
+		own.sort((a, b) => a.slot - b.slot).forEach((cell) => next.push({
+			id: cell.id,
+			key: item.key,
+			slot: slot++
+		}));
+	});
+	pool.forEach((cell) => next.push({
+		id: cell.id,
+		key: null,
+		slot: slot++
+	}));
+	return next.sort((a, b) => a.id - b.id);
+}
+/** A share that counts to its new value and holds its width with tabular figures. */
+function Share({ value, decimals }) {
+	const scale = 10 ** decimals;
+	const shown = useCountTo(Math.round(value * scale));
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [(shown / scale).toFixed(decimals), "%"] });
+}
+const WaffleChart = forwardRef(function WaffleChart({ data, label, unit = "", formatValue, rows = 10, columns = 10, accentKey, activeKey, defaultActiveKey = null, onActiveChange, legend = true, decimals = 0, emptyLabel = "No data", className }, ref) {
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const board = useRef(null);
+	const grid = useRef(null);
+	const tip = useRef(null);
+	const count = Math.max(1, rows * columns);
+	const total = data.reduce((sum, item) => sum + Math.max(0, item.value), 0);
+	const empty = !data.length || total <= 0;
+	const accent = accentKey === void 0 ? data[0]?.key ?? null : accentKey;
+	const signature = `${count}|${data.map((item) => `${item.key}:${item.value}`).join(",")}`;
+	const counts = useMemo(() => allocate(data, total, count), [signature]);
+	const [layout, setLayout] = useState(() => ({
+		cells: reassign(Array.from({ length: count }, (_, id) => ({
+			id,
+			key: null,
+			slot: id
+		})), data, counts),
+		moved: /* @__PURE__ */ new Set(),
+		version: 0
+	}));
+	const [seen, setSeen] = useState(signature);
+	if (seen !== signature) {
+		setSeen(signature);
+		const base = Array.from({ length: count }, (_, id) => layout.cells[id] ?? {
+			id,
+			key: null,
+			slot: id
+		});
+		const next = reassign(base, data, counts);
+		setLayout({
+			cells: next,
+			moved: new Set(next.filter((cell) => base[cell.id].slot !== cell.slot || base[cell.id].key !== cell.key).map((cell) => cell.id)),
+			version: layout.version + 1
+		});
+	}
+	const { cells, moved, version } = layout;
+	const [shown, setShown] = useState(false);
+	useEffect(() => {
+		const node = figure.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setShown(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setShown(true);
+		}, { threshold: .35 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const [ownPinned, setOwnPinned] = useState(defaultActiveKey);
+	const pinned = activeKey !== void 0 ? activeKey : ownPinned;
+	const pin = (key) => {
+		if (activeKey === void 0) setOwnPinned(key);
+		onActiveChange?.(key);
+	};
+	const [reading, setReading] = useState(null);
+	const [preview, setPreview] = useState(null);
+	const focusKey = reading?.key ?? preview ?? pinned;
+	const active = focusKey && data.some((item) => item.key === focusKey) ? focusKey : null;
+	const rank = (key) => data.filter((entry) => entry.key !== accent).findIndex((entry) => entry.key === key);
+	const colorOf = (key) => {
+		const item = data.find((entry) => entry.key === key);
+		if (!item) return "transparent";
+		if (item.color) return item.color;
+		if (key === accent) return "var(--color-chart-1)";
+		const at = rank(key);
+		return at < 3 ? `var(--color-chart-${at + 2})` : `color-mix(in oklab, var(--color-foreground) ${SHADES[(at - 3) % SHADES.length]}%, var(--color-surface))`;
+	};
+	const shapeOf = (key) => key === null || key === accent || rank(key) < 0 ? "square" : SHAPES[rank(key) % SHAPES.length];
+	const place = (slot) => ({
+		x: Math.floor(slot / rows),
+		y: rows - 1 - slot % rows
+	});
+	const filled = cells.filter((cell) => cell.key !== null).length;
+	const bubble = reading ? data.find((item) => item.key === reading.key) ?? null : null;
+	const shownBefore = useRef(false);
+	useIsomorphicLayoutEffect(() => {
+		const node = tip.current;
+		const box = grid.current?.getBoundingClientRect();
+		const host = board.current?.getBoundingClientRect();
+		if (!reading || !node || !box?.width || !host) {
+			shownBefore.current = false;
+			return;
+		}
+		const side = (box.width - GAP * (columns - 1)) / columns;
+		const { x, y } = place(reading.slot);
+		const cx = box.left - host.left + x * (side + GAP) + side / 2;
+		const cy = box.top - host.top + y * (side + GAP);
+		const tw = node.offsetWidth;
+		const th = node.offsetHeight;
+		let top = cy - th - 10;
+		if (top < 0) top = cy + side + 10;
+		if (!shownBefore.current) node.style.transition = "none";
+		node.style.translate = `${clamp(cx - tw / 2, 0, Math.max(0, host.width - tw))}px ${clamp(top, 0, Math.max(0, host.height - th))}px`;
+		if (!shownBefore.current) {
+			node.offsetWidth;
+			node.style.transition = "";
+		}
+		shownBefore.current = true;
+	});
+	const slotAt = (clientX, clientY) => {
+		const box = grid.current?.getBoundingClientRect();
+		if (!box?.width) return null;
+		const side = (box.width - GAP * (columns - 1)) / columns;
+		const col = clamp(Math.floor((clientX - box.left) / (side + GAP)), 0, columns - 1);
+		const row = clamp(Math.floor((clientY - box.top) / (side + GAP)), 0, rows - 1);
+		return col * rows + (rows - 1 - row);
+	};
+	const readingAt = (slot) => {
+		if (slot === null) return null;
+		const cell = cells.find((item) => item.slot === slot);
+		return cell?.key ? {
+			key: cell.key,
+			slot
+		} : null;
+	};
+	const show = (next) => setReading((now) => now?.slot === next?.slot ? now : next);
+	const onPointerMove = (event) => {
+		if (event.pointerType === "mouse" || event.buttons) show(readingAt(slotAt(event.clientX, event.clientY)));
+	};
+	const onPointerDown = (event) => {
+		if (event.pointerType !== "mouse") event.currentTarget.setPointerCapture?.(event.pointerId);
+		show(readingAt(slotAt(event.clientX, event.clientY)));
+	};
+	const onKeyDown = (event) => {
+		if (empty) return;
+		if (event.key === "Escape" && reading) {
+			event.preventDefault();
+			setReading(null);
+			return;
+		}
+		const at = reading?.slot ?? 0;
+		const col = Math.floor(at / rows);
+		const row = at % rows;
+		const blocks = counts.map((size, index) => ({
+			start: counts.slice(0, index).reduce((sum, value) => sum + value, 0),
+			size
+		})).filter((block) => block.size > 0);
+		const block = Math.max(0, blocks.findIndex((item) => at >= item.start && at < item.start + item.size));
+		const move = {
+			ArrowUp: () => col * rows + Math.min(rows - 1, row + 1),
+			ArrowDown: () => col * rows + Math.max(0, row - 1),
+			ArrowRight: () => Math.min(columns - 1, col + 1) * rows + row,
+			ArrowLeft: () => Math.max(0, col - 1) * rows + row,
+			PageDown: () => blocks[Math.min(blocks.length - 1, block + 1)].start,
+			PageUp: () => at > blocks[block].start ? blocks[block].start : blocks[Math.max(0, block - 1)].start,
+			Home: () => 0,
+			End: () => filled - 1
+		}[event.key];
+		if (!move) return;
+		event.preventDefault();
+		show(readingAt(clamp(reading ? move() : 0, 0, Math.max(0, filled - 1))));
+	};
+	const suffix = unit ? ` ${unit}` : "";
+	const format = (value, item) => `${formatValue ? formatValue(value, item) : GROUPED.format(value)}${suffix}`;
+	const share = (item) => total > 0 ? Math.max(0, item.value) / total * 100 : 0;
+	const describe = (item) => `${item.label}, ${share(item).toFixed(decimals)}%, ${format(item.value, item)}`;
+	const summary = empty ? `${label}. ${emptyLabel}.` : `${label}. ${data.map((item) => `${item.label} ${share(item).toFixed(decimals)}%`).join(", ")}.`;
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		"data-slot": "waffle-chart",
+		"aria-label": label,
+		"data-legend": legend || void 0,
+		"data-scrubbing": reading !== null || void 0,
+		className: cn("waffle-chart box-border font-sans text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: board,
+				className: "relative min-w-0",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						ref: grid,
+						"data-slot": "waffle-chart-grid",
+						"data-active": active ? "" : void 0,
+						role: empty ? void 0 : "slider",
+						tabIndex: empty ? void 0 : 0,
+						"aria-label": empty ? void 0 : `${label}, explore cells`,
+						"aria-valuemin": empty ? void 0 : 1,
+						"aria-valuemax": empty ? void 0 : Math.max(1, filled),
+						"aria-valuenow": empty ? void 0 : (reading?.slot ?? 0) + 1,
+						"aria-valuetext": empty ? void 0 : bubble ? describe(bubble) : summary,
+						"aria-hidden": empty || void 0,
+						className: "waffle-chart-grid",
+						style: {
+							"--c": columns,
+							"--r": rows
+						},
+						onPointerMove,
+						onPointerDown,
+						onPointerUp: (event) => {
+							if (event.pointerType !== "mouse") setReading(null);
+						},
+						onPointerCancel: () => setReading(null),
+						onPointerLeave: (event) => {
+							if (event.pointerType === "mouse") setReading(null);
+						},
+						onKeyDown,
+						onBlur: () => setReading(null),
+						onFocus: (event) => {
+							if (event.currentTarget.matches(":focus-visible") && !empty) setReading((now) => now ?? readingAt(0));
+						},
+						children: cells.map((cell) => {
+							const { x, y } = place(cell.slot);
+							return /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-cell": cell.slot,
+								"data-shown": shown || void 0,
+								"data-on": cell.key !== null && cell.key === active || void 0,
+								"data-cursor": reading?.slot === cell.slot || void 0,
+								"data-empty": cell.key === null || void 0,
+								"data-shape": shapeOf(cell.key),
+								"data-hop": moved.has(cell.id) && shown ? version % 2 ? "a" : "b" : void 0,
+								className: "waffle-chart-cell",
+								style: {
+									"--x": x,
+									"--y": y,
+									"--series": colorOf(cell.key),
+									"--delay": `${Math.round(cell.slot / count * 320)}ms`
+								}
+							}, cell.id);
+						})
+					}),
+					empty ? null : /* @__PURE__ */ jsxs("div", {
+						ref: tip,
+						"aria-hidden": "true",
+						"data-slot": "waffle-chart-tooltip",
+						className: "line-chart-tooltip",
+						children: [/* @__PURE__ */ jsxs("p", {
+							className: "m-0 flex min-w-0 items-center gap-2 text-sm",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									"data-shape": shapeOf(bubble?.key ?? null),
+									style: { "--series": colorOf(bubble?.key ?? null) },
+									className: "chart-key-swatch"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 flex-1 truncate text-text-secondary",
+									children: bubble?.label ?? ""
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "ms-2 flex-none font-medium tabular-nums",
+									children: bubble ? `${share(bubble).toFixed(decimals)}%` : ""
+								})
+							]
+						}), /* @__PURE__ */ jsx("p", {
+							className: "m-0 ms-4.5 whitespace-nowrap text-xs tabular-nums text-muted-foreground",
+							children: bubble ? format(bubble.value, bubble) : ""
+						})]
+					}),
+					empty ? /* @__PURE__ */ jsx("p", {
+						className: "m-0 grid min-h-40 place-items-center text-sm text-muted-foreground",
+						children: emptyLabel
+					}) : null
+				]
+			}),
+			legend && !empty ? /* @__PURE__ */ jsx("ul", {
+				"aria-label": `${label}, categories`,
+				onPointerLeave: () => setPreview(null),
+				className: "waffle-chart-legend",
+				children: data.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": pinned === item.key,
+					"data-on": active === item.key || void 0,
+					"data-dim": active !== null && active !== item.key || void 0,
+					className: "chart-key",
+					onClick: () => pin(pinned === item.key ? null : item.key),
+					onPointerEnter: (event) => {
+						if (event.pointerType === "mouse") setPreview(item.key);
+					},
+					onFocus: (event) => {
+						if (event.currentTarget.matches(":focus-visible")) setPreview(item.key);
+					},
+					onBlur: () => setPreview(null),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							"data-shape": shapeOf(item.key),
+							style: { "--series": colorOf(item.key) },
+							className: "chart-key-swatch"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate",
+							children: item.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "min-w-13 text-end text-base font-medium tabular-nums text-foreground",
+							children: /* @__PURE__ */ jsx(Share, {
+								value: share(item),
+								decimals
+							})
+						})
+					]
+				}) }, item.key))
+			}) : null,
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				children: summary
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: bubble ? describe(bubble) : ""
+			}),
+			empty ? null : /* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				children: /* @__PURE__ */ jsxs("table", { children: [
+					/* @__PURE__ */ jsx("caption", { children: label }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Category"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Value"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Share"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Cells"
+						})
+					] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: data.map((item, index) => /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "row",
+							children: item.label
+						}),
+						/* @__PURE__ */ jsx("td", { children: format(item.value, item) }),
+						/* @__PURE__ */ jsxs("td", { children: [share(item).toFixed(decimals), "%"] }),
+						/* @__PURE__ */ jsx("td", { children: counts[index] })
+					] }, item.key)) })
+				] })
+			})
+		]
+	});
+});
+//#endregion
+export { WaffleChart };
+
+//# sourceMappingURL=waffle-chart.js.map