@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/treemap/treemap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"treemap.js","names":[],"sources":["../../src/treemap/treemap.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { REVEAL, SWELL, tween } from \"../lib/spring-tween.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Treemap: a hierarchy of parts, such as revenue by region, country and plan,\n * when sizes matter more than exact comparisons. Tiles are laid out by the\n * squarified algorithm (rows along the short side, each closed when another tile\n * would make the worst aspect ratio worse), two levels at a time: the branches\n * of the node in view, each holding its own children under a header.\n *\n * Tiles grow in a quick wave from the largest the first time the chart is seen.\n * Pressing a branch (or Enter) zooms into it: the tile grows to fill the view and\n * its children open inside it; Escape or a breadcrumb zooms back out, the view\n * shrinking into its tile. New data moves every tile from where it is on screen.\n * Hovering or the arrow keys read a tile in a tooltip, and the rest of its branch\n * steps back. An optional second measure (growth, say) shades tiles in steps.\n *\n * Tiles are absolutely placed and sized each frame by one small spring tween, so\n * their text never scales while they grow or shrink.\n */\nexport interface TreemapNode {\n  /** Stable identity, unique in the tree. A tile that survives a data change morphs to its new size. */\n  id: string;\n  label: string;\n  /** Leaf size. A branch's size is the sum of its children. */\n  value?: number;\n  /** Optional second measure for shading, such as growth. A branch uses the size weighted mean of its children. */\n  color?: number;\n  children?: TreemapNode[];\n}\n\nexport interface TreemapProps {\n  /** The root. Its label names the whole in the first breadcrumb. */\n  data: TreemapNode;\n  /** What the whole is, such as \"Revenue\". Names the chart for assistive technology. */\n  label: string;\n  formatValue?: (value: number) => string;\n  /** Names the shading measure in the tooltip and scale, such as \"Growth\". Tiles take the hue of their top level branch and grow deeper with the measure. Leave it out to draw every tile at one depth. */\n  colorLabel?: string;\n  formatColor?: (value: number) => string;\n  /** Range of the colour measure. Defaults to the range of the leaves. */\n  colorDomain?: [number, number];\n  /** Controlled id of the node that fills the view. */\n  focus?: string;\n  defaultFocus?: string;\n  onFocusChange?: (id: string) => void;\n  /** Height of the tiles in pixels. @default 420 */\n  height?: number;\n  /** @default \"No data yet\" */\n  emptyLabel?: string;\n  /** Extra classes for the root. Merged last. */\n  className?: string;\n}\n\ntype Rect = { x: number; y: number; w: number; h: number };\ntype Flat = { id: string; label: string; value: number; color: number | null; depth: number; parent: string | null; children: string[]; path: string[] };\ntype Drawn = Rect & { o: number };\n\n/** Top level branches take chart-1 to chart-4 in order; a fifth and beyond stay neutral rather than reuse a hue. */\nconst hueOf = (index: number) => (index < 0 ? \"var(--color-chart-1)\" : index < 4 ? `var(--color-chart-${index + 1})` : \"var(--color-foreground)\");\n/** The gap between tiles, the padding of a branch, the height of a branch header, the gap to the tooltip, and the shading steps. */\nconst GAP = 2;\nconst PAD = 3;\nconst HEADER = 22;\nconst TIP = 14;\nconst STEPS = 5;\nconst GROUPED = new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 1 });\nconst PERCENT = new Intl.NumberFormat(\"en-US\", { style: \"percent\", maximumFractionDigits: 1 });\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\nconst mix = (a: number, b: number, t: number) => a + (b - a) * t;\nconst inset = (r: Rect, top: number, side: number): Rect => ({ x: r.x + side, y: r.y + top, w: Math.max(0, r.w - side * 2), h: Math.max(0, r.h - top - side) });\n\nfunction flatten(root: TreemapNode) {\n  const flat = new Map<string, Flat>();\n  const visit = (node: TreemapNode, depth: number, parent: string | null, path: string[]): { value: number; weighted: number; colored: number } => {\n    const kids = node.children ?? [];\n    let value = 0;\n    let weighted = 0;\n    let colored = 0;\n    if (kids.length) {\n      for (const kid of kids) {\n        const r = visit(kid, depth + 1, node.id, depth === 0 ? [] : [...path, node.label]);\n        value += r.value;\n        weighted += r.weighted;\n        colored += r.colored;\n      }\n    } else {\n      value = Math.max(0, node.value ?? 0);\n      if (node.color !== undefined && Number.isFinite(node.color)) {\n        weighted = node.color * value;\n        colored = value;\n      }\n    }\n    flat.set(node.id, {\n      id: node.id,\n      label: node.label,\n      value,\n      color: colored ? weighted / colored : null,\n      depth,\n      parent,\n      children: kids.map((kid) => kid.id),\n      path: depth === 0 ? [node.label] : [...path, node.label],\n    });\n    return { value, weighted, colored };\n  };\n  visit(root, 0, null, []);\n  return flat;\n}\n\n/** Squarified layout: rows of tiles along the short side, each row closed when adding a tile would make the worst aspect ratio worse. */\nfunction squarify(items: { id: string; value: number }[], rect: Rect, out: Map<string, Rect>) {\n  const list = items.filter((item) => item.value > 0).sort((a, b) => b.value - a.value);\n  const total = list.reduce((sum, item) => sum + item.value, 0);\n  if (!total || rect.w <= 0 || rect.h <= 0) {\n    for (const item of items) out.set(item.id, { x: rect.x, y: rect.y, w: 0, h: 0 });\n    return;\n  }\n  const scale = (rect.w * rect.h) / total;\n  let { x, y, w, h } = rect;\n  let i = 0;\n  const worst = (row: number[], side: number) => {\n    const sum = row.reduce((a, b) => a + b, 0);\n    return Math.max((side * side * Math.max(...row)) / (sum * sum), (sum * sum) / (side * side * Math.min(...row)));\n  };\n  while (i < list.length) {\n    const side = Math.min(w, h);\n    const row: number[] = [list[i]!.value * scale];\n    let j = i + 1;\n    while (j < list.length) {\n      const next = [...row, list[j]!.value * scale];\n      if (worst(next, side) > worst(row, side)) break;\n      row.push(list[j]!.value * scale);\n      j++;\n    }\n    const sum = row.reduce((a, b) => a + b, 0);\n    if (w >= h) {\n      const cw = sum / h;\n      let cy = y;\n      for (let k = i; k < j; k++) {\n        const th = (list[k]!.value * scale) / cw;\n        out.set(list[k]!.id, { x, y: cy, w: cw, h: th });\n        cy += th;\n      }\n      x += cw;\n      w -= cw;\n    } else {\n      const rh = sum / w;\n      let cx = x;\n      for (let k = i; k < j; k++) {\n        const tw = (list[k]!.value * scale) / rh;\n        out.set(list[k]!.id, { x: cx, y, w: tw, h: rh });\n        cx += tw;\n      }\n      y += rh;\n      h -= rh;\n    }\n    i = j;\n  }\n  for (const item of items) if (!out.has(item.id)) out.set(item.id, { x: rect.x, y: rect.y, w: 0, h: 0 });\n}\n\n/** Rects of every descendant when `focus` fills the view: its children fill the view, and each branch holds its own children under a header. */\nfunction layoutFrom(flat: Map<string, Flat>, focus: string, view: Rect) {\n  const out = new Map<string, Rect>();\n  const nest = (id: string, rect: Rect, top: boolean) => {\n    const node = flat.get(id)!;\n    if (!node.children.length) return;\n    const room = top ? rect : inset(rect, rect.h > 48 && rect.w > 64 ? HEADER : PAD, PAD);\n    const placed = new Map<string, Rect>();\n    squarify(node.children.map((child) => ({ id: child, value: flat.get(child)!.value })), room, placed);\n    for (const [child, r] of placed) {\n      const gapped = { x: r.x + GAP / 2, y: r.y + GAP / 2, w: Math.max(0, r.w - GAP), h: Math.max(0, r.h - GAP) };\n      out.set(child, gapped);\n      nest(child, gapped, false);\n    }\n  };\n  nest(focus, view, true);\n  return out;\n}\n/** The affine map that carries rect `from` onto rect `to`, applied to `r`. */\nconst carry = (r: Rect, from: Rect, to: Rect): Rect => {\n  const sx = to.w / (from.w || 1);\n  const sy = to.h / (from.h || 1);\n  return { x: to.x + (r.x - from.x) * sx, y: to.y + (r.y - from.y) * sy, w: r.w * sx, h: r.h * sy };\n};\n\nexport const Treemap = forwardRef<HTMLElement, TreemapProps>(function Treemap(\n  {\n    data,\n    label,\n    formatValue = (value) => GROUPED.format(value),\n    colorLabel,\n    formatColor = (value) => GROUPED.format(value),\n    colorDomain,\n    focus,\n    defaultFocus,\n    onFocusChange,\n    height = 420,\n    emptyLabel = \"No data yet\",\n    className,\n  },\n  ref,\n) {\n  const figure = useRef<HTMLElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, figure), [ref]);\n  const stage = useRef<HTMLDivElement>(null);\n  const tip = useRef<HTMLDivElement>(null);\n  const tiles = useRef(new Map<string, HTMLDivElement>());\n\n  const signature = JSON.stringify(data);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const flat = useMemo(() => flatten(data), [signature]);\n  const root = flat.get(data.id)!;\n  const nodes = useMemo(() => [...flat.values()].filter((node) => node.depth > 0), [flat]);\n  const [ownFocus, setOwnFocus] = useState(defaultFocus ?? data.id);\n  const wanted = flat.get(focus ?? ownFocus);\n  const center = wanted && wanted.children.length ? wanted : root;\n  const zoomTo = (id: string) => {\n    if (focus === undefined) setOwnFocus(id);\n    onFocusChange?.(id);\n  };\n  const [active, setActive] = useState<string | null>(null);\n  const [pointer, setPointer] = useState<{ x: number; y: number } | null>(null);\n\n  const [width, setWidth] = useState(0);\n  useIsomorphicLayoutEffect(() => {\n    const node = stage.current;\n    if (!node || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => setWidth(node.clientWidth));\n    observer.observe(node);\n    setWidth(node.clientWidth);\n    return () => observer.disconnect();\n  }, []);\n  const view = useMemo<Rect>(() => ({ x: 0, y: 0, w: width, h: height }), [width, height]);\n  const target = useMemo(() => layoutFrom(flat, center.id, view), [flat, center.id, view]);\n  const levelOf = (node: Flat) => node.depth - center.depth;\n\n  // Colour scale: a few steps of the branch's hue from light to strong, so shade reads as more.\n  const leaves = nodes.filter((node) => !node.children.length && node.color !== null);\n  const [lo, hi] = colorDomain ?? (leaves.length ? [Math.min(...leaves.map((node) => node.color!)), Math.max(...leaves.map((node) => node.color!))] : [0, 1]);\n  const colored = colorLabel !== undefined && leaves.length > 0;\n  const shade = (value: number | null) => {\n    if (!colored || value === null) return 34;\n    const t = clamp((value - lo) / (hi - lo || 1), 0, 1);\n    return Math.round(14 + (Math.round(t * (STEPS - 1)) / (STEPS - 1)) * 44);\n  };\n  const branchOf = useMemo(() => {\n    const map = new Map<string, number>();\n    root.children.forEach((id, index) => {\n      const walk = (at: string) => {\n        map.set(at, index);\n        flat.get(at)?.children.forEach(walk);\n      };\n      walk(id);\n    });\n    return map;\n  }, [flat, root]);\n\n  // Every tile keeps its on screen rect; a spring carries it to the new layout. Tiles entering or leaving ride the same zoom as the tile they belong to.\n  const drawn = useRef(new Map<string, Drawn>());\n  const levels = useRef(new Map<string, number>());\n  const lastFocus = useRef<{ id: string; layout: Map<string, Rect> } | null>(null);\n  const nodesRef = useRef(nodes);\n  useIsomorphicLayoutEffect(() => {\n    nodesRef.current = nodes;\n  });\n  const paint = useCallback(() => {\n    for (const node of nodesRef.current) {\n      const el = tiles.current.get(node.id);\n      const d = drawn.current.get(node.id);\n      if (!el) continue;\n      if (!d || d.o < 0.01 || d.w < 0.5 || d.h < 0.5) {\n        el.style.visibility = \"hidden\";\n        el.style.pointerEvents = \"none\";\n        continue;\n      }\n      el.style.visibility = \"visible\";\n      el.style.transform = `translate3d(${d.x.toFixed(2)}px, ${d.y.toFixed(2)}px, 0)`;\n      el.style.width = `${d.w.toFixed(2)}px`;\n      el.style.height = `${d.h.toFixed(2)}px`;\n      el.style.opacity = d.o.toFixed(3);\n      el.style.pointerEvents = d.o > 0.6 ? \"auto\" : \"none\";\n      el.dataset.level = String(levels.current.get(node.id) ?? 0);\n      el.dataset.room = d.w > 64 && d.h > 38 ? (d.h > 54 ? \"full\" : \"name\") : \"none\";\n    }\n  }, []);\n  useIsomorphicLayoutEffect(paint);\n\n  // The wave starts once a quarter of the chart is in view.\n  const [inView, setInView] = useState(false);\n  useEffect(() => {\n    const node = figure.current;\n    if (!node || prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setInView(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setInView(true);\n      },\n      { threshold: 0.25 },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  const shown = inView && width > 0;\n  useEffect(() => {\n    if (!shown) return;\n    const prev = lastFocus.current;\n    const isUnder = (id: string, ancestor: string) => {\n      for (let at: Flat | undefined = flat.get(id); at; at = at.parent ? flat.get(at.parent) : undefined) if (at.id === ancestor) return true;\n      return false;\n    };\n    const visible = (node: Flat) => {\n      const l = node.depth - center.depth;\n      return l >= 1 && l <= 2 && isUnder(node.id, center.id);\n    };\n    const nextVisible = new Set(nodes.filter(visible).map((node) => node.id));\n    const before = new Map(drawn.current);\n    const wasVisible = new Set([...before].filter(([, d]) => d.o > 0.5).map(([id]) => id));\n    // The pivot: the tile that grows to fill the view, or the view that shrinks back into its tile.\n    let toOld: ((r: Rect) => Rect) | null = null;\n    let toNew: ((r: Rect) => Rect) | null = null;\n    if (prev && prev.id !== center.id && before.size) {\n      if (isUnder(center.id, prev.id)) {\n        const inOld = prev.layout.get(center.id);\n        if (inOld) {\n          toOld = (r) => carry(r, view, inOld);\n          toNew = (r) => carry(r, inOld, view);\n        }\n      } else if (isUnder(prev.id, center.id)) {\n        const inNew = target.get(prev.id);\n        if (inNew) {\n          toOld = (r) => carry(r, inNew, view);\n          toNew = (r) => carry(r, view, inNew);\n        }\n      }\n    }\n    const from = new Map<string, Drawn>();\n    const to = new Map<string, Drawn>();\n    const first = !before.size;\n    for (const node of nodes) {\n      const goal = target.get(node.id);\n      const now = before.get(node.id);\n      const inNext = nextVisible.has(node.id);\n      const inPrev = wasVisible.has(node.id);\n      if (inNext && goal) {\n        to.set(node.id, { ...goal, o: 1 });\n        if (inPrev && now) from.set(node.id, now);\n        else if (first) from.set(node.id, { x: goal.x + goal.w / 2, y: goal.y + goal.h / 2, w: 0, h: 0, o: 0 });\n        else from.set(node.id, { ...(toOld ? toOld(goal) : goal), o: 0 });\n        levels.current.set(node.id, levelOf(node));\n      } else if (inPrev && now) {\n        from.set(node.id, now);\n        to.set(node.id, { ...(toNew ? toNew(now) : now), o: 0 });\n      }\n    }\n    for (const node of nodes) if (!from.has(node.id)) drawn.current.set(node.id, { x: 0, y: 0, w: 0, h: 0, o: 0 });\n    lastFocus.current = { id: center.id, layout: target };\n    return tween(\n      first ? SWELL : REVEAL,\n      (t) => {\n        for (const [id, a] of from) {\n          const b = to.get(id)!;\n          // On the first reveal, tiles grow in a quick wave from the largest.\n          const local = first ? clamp((t - Math.min(0.3, (1 - (b.w * b.h) / (view.w * view.h || 1)) * 0.3)) / 0.7, 0, 1) : t;\n          drawn.current.set(id, { x: mix(a.x, b.x, local), y: mix(a.y, b.y, local), w: mix(a.w, b.w, local), h: mix(a.h, b.h, local), o: mix(a.o, b.o, local) });\n        }\n        paint();\n      },\n      () => {\n        for (const [id, d] of to) drawn.current.set(id, d);\n        paint();\n      },\n    );\n    // The target stands for the tree, the focus and the view.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [shown, target]);\n\n  const activeNode = active ? (flat.get(active) ?? null) : null;\n  const parentOf = (node: Flat) => (node.parent ? flat.get(node.parent)! : node);\n  const share = (node: Flat, of: Flat) => (of.value ? node.value / of.value : 0);\n\n  // The tooltip trails the pointer, or sits by the tile in focus, and stays inside the chart; it glides between tiles once showing.\n  const shownBefore = useRef(false);\n  useIsomorphicLayoutEffect(() => {\n    const bubble = tip.current;\n    if (!bubble || !activeNode || !width) {\n      shownBefore.current = false;\n      return;\n    }\n    const r = target.get(activeNode.id);\n    const ax = pointer?.x ?? (r ? r.x + r.w / 2 : 0);\n    const ay = pointer?.y ?? (r ? r.y + Math.min(r.h / 2, 28) : 0);\n    const tw = bubble.offsetWidth;\n    const th = bubble.offsetHeight;\n    let left = ax + TIP;\n    if (left + tw > width) left = ax - TIP - tw;\n    let top = ay + TIP;\n    if (top + th > height) top = ay - TIP - th;\n    if (!shownBefore.current) bubble.style.transition = \"none\";\n    bubble.style.translate = `${clamp(left, 0, Math.max(0, width - tw))}px ${clamp(top, 0, Math.max(0, height - th))}px`;\n    if (!shownBefore.current) {\n      void bubble.offsetWidth;\n      bubble.style.transition = \"\";\n    }\n    shownBefore.current = true;\n  });\n\n  // Keyboard: arrows hop to the nearest tile in that direction on the top level, Enter zooms in, Escape zooms out.\n  const topTiles = center.children.map((id) => flat.get(id)!).filter((node) => node.value > 0);\n  const topOf = (node: Flat | null) => {\n    let at = node;\n    while (at && at.parent && at.parent !== center.id) at = flat.get(at.parent) ?? null;\n    return at && at.parent === center.id ? at : null;\n  };\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const current = topOf(activeNode);\n    const dirs: Record<string, [number, number]> = { ArrowRight: [1, 0], ArrowLeft: [-1, 0], ArrowDown: [0, 1], ArrowUp: [0, -1] };\n    if (event.key in dirs) {\n      event.preventDefault();\n      setPointer(null);\n      if (!current) {\n        setActive(topTiles[0]?.id ?? null);\n        return;\n      }\n      const [dx, dy] = dirs[event.key]!;\n      const o = target.get(current.id)!;\n      const ox = o.x + o.w / 2;\n      const oy = o.y + o.h / 2;\n      let best: Flat | null = null;\n      let score = Infinity;\n      for (const node of topTiles) {\n        if (node.id === current.id) continue;\n        const r = target.get(node.id);\n        if (!r) continue;\n        const vx = r.x + r.w / 2 - ox;\n        const vy = r.y + r.h / 2 - oy;\n        const along = vx * dx + vy * dy;\n        const across = Math.abs(vx * dy - vy * dx);\n        if (along <= 1) continue;\n        const s = along + across * 1.5;\n        if (s < score) {\n          score = s;\n          best = node;\n        }\n      }\n      if (best) setActive(best.id);\n    } else if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      setPointer(null);\n      setActive((event.key === \"Home\" ? topTiles[0] : topTiles[topTiles.length - 1])?.id ?? null);\n    } else if (event.key === \"Enter\" || event.key === \" \") {\n      if (current?.children.length) {\n        event.preventDefault();\n        zoomTo(current.id);\n        setActive(current.children[0]!);\n      }\n    } else if (event.key === \"Escape\" || event.key === \"Backspace\") {\n      if (center.parent) {\n        event.preventDefault();\n        zoomTo(center.parent);\n        setActive(center.id);\n      } else if (active) {\n        event.preventDefault();\n        setActive(null);\n      }\n    }\n  };\n  const onTilePointerMove = (event: PointerEvent<HTMLDivElement>, id: string) => {\n    if (event.pointerType !== \"mouse\") return;\n    const rect = stage.current?.getBoundingClientRect();\n    if (rect) setPointer({ x: event.clientX - rect.left, y: event.clientY - rect.top });\n    setActive(id);\n  };\n  const onTileClick = (node: Flat) => {\n    const top = topOf(node);\n    if (top?.children.length) zoomTo(top.id);\n    else if (!activeNode || activeNode.id !== node.id) setActive(node.id);\n  };\n\n  const trail: Flat[] = [];\n  for (let at: Flat | undefined = center; at; at = at.parent ? flat.get(at.parent) : undefined) trail.unshift(at);\n  const empty = !root.value;\n  const describe = (node: Flat) =>\n    `${node.path.join(\", \")}, ${formatValue(node.value)}, ${PERCENT.format(share(node, parentOf(node)))} of ${parentOf(node).label}${\n      colored && node.color !== null ? `, ${colorLabel} ${formatColor(node.color)}` : \"\"\n    }`;\n  const focusTop = topOf(activeNode);\n  const summary = `${label}, ${center.label}, ${formatValue(center.value)}`;\n\n  return (\n    <figure ref={refs} data-slot=\"treemap\" aria-label={label} className={cn(\"treemap box-border font-sans text-foreground\", className)}>\n      <div className=\"flex min-w-0 items-center justify-between gap-3\">\n        <nav aria-label={`${label} path`} className=\"-ms-1 min-w-0\">\n          <ol className=\"m-0 flex min-h-8 min-w-0 list-none flex-wrap items-center p-0\">\n            {trail.map((node, index) => (\n              <li key={node.id} className=\"inline-flex min-w-0 items-center motion-safe:animate-fade-in\">\n                {index > 0 ? (\n                  <span aria-hidden=\"true\" className=\"px-1 text-sm text-muted-foreground\">\n                    /\n                  </span>\n                ) : null}\n                {index < trail.length - 1 ? (\n                  <button\n                    type=\"button\"\n                    className=\"treemap-crumb\"\n                    onClick={() => {\n                      zoomTo(node.id);\n                      setActive(null);\n                    }}\n                  >\n                    {node.label}\n                  </button>\n                ) : (\n                  <span aria-current=\"location\" className=\"px-1 text-sm font-medium whitespace-nowrap\">\n                    {node.label}\n                  </span>\n                )}\n              </li>\n            ))}\n          </ol>\n        </nav>\n        <p data-slot=\"treemap-total\" className=\"m-0 flex-none text-sm font-medium tabular-nums\">\n          <SwapText swapKey={formatValue(center.value)} motion=\"rise\">\n            {formatValue(center.value)}\n          </SwapText>\n        </p>\n      </div>\n      <div\n        ref={stage}\n        data-slot=\"treemap-stage\"\n        data-active={activeNode ? \"\" : undefined}\n        data-scrubbing={activeNode ? \"\" : undefined}\n        role={empty ? undefined : \"application\"}\n        tabIndex={empty ? undefined : 0}\n        aria-roledescription={empty ? undefined : \"treemap\"}\n        aria-label={empty ? undefined : `${label}, ${center.label}. Arrow keys move between tiles, Enter zooms in, Escape zooms out.`}\n        className=\"treemap-stage\"\n        style={{ height }}\n        onKeyDown={onKeyDown}\n        onBlur={() => setActive(null)}\n        onPointerLeave={() => {\n          setActive(null);\n          setPointer(null);\n        }}\n      >\n        {nodes.map((node) => {\n          const top = topOf(node);\n          const hue = hueOf(branchOf.get(node.id) ?? -1);\n          return (\n            <div\n              key={node.id}\n              ref={(element) => {\n                if (element) tiles.current.set(node.id, element);\n                else tiles.current.delete(node.id);\n              }}\n              aria-hidden=\"true\"\n              data-tile={node.id}\n              data-branch={node.children.length > 0 || undefined}\n              data-active={active === node.id || undefined}\n              data-lineage={(focusTop?.id === node.id && active !== node.id) || undefined}\n              data-dim={(focusTop !== null && top !== null && focusTop.id !== top.id) || undefined}\n              className=\"treemap-tile\"\n              style={{ \"--hue\": hue, \"--fill\": `color-mix(in oklab, ${hue} ${shade(node.color)}%, var(--color-surface))`, zIndex: node.depth } as CSSProperties}\n              onPointerMove={(event) => {\n                event.stopPropagation();\n                onTilePointerMove(event, node.id);\n              }}\n              onClick={(event) => {\n                event.stopPropagation();\n                onTileClick(node);\n              }}\n            >\n              <span className=\"treemap-tile-label\">{node.label}</span>\n              <span className=\"treemap-tile-value\">{formatValue(node.value)}</span>\n            </div>\n          );\n        })}\n        {empty ? <p className=\"pointer-events-none absolute inset-0 m-0 grid place-items-center text-sm text-muted-foreground\">{emptyLabel}</p> : null}\n        <div className=\"pointer-events-none absolute inset-0 z-50\">\n          <div ref={tip} aria-hidden=\"true\" data-slot=\"treemap-tooltip\" className=\"line-chart-tooltip\">\n            {activeNode ? (\n              <>\n                <p className=\"m-0 truncate text-xs text-muted-foreground\">{activeNode.path.slice(0, -1).join(\" / \") || root.label}</p>\n                <p className=\"m-0 flex items-baseline justify-between gap-3 text-sm\">\n                  <span className=\"min-w-0 truncate\">{activeNode.label}</span>\n                  <span className=\"flex-none font-medium tabular-nums\">{formatValue(activeNode.value)}</span>\n                </p>\n                <p className=\"m-0 text-xs tabular-nums text-muted-foreground\">\n                  {PERCENT.format(share(activeNode, parentOf(activeNode)))} of {parentOf(activeNode).label}\n                </p>\n                {colored && activeNode.color !== null ? (\n                  <p className=\"m-0 text-xs tabular-nums text-muted-foreground\">\n                    {colorLabel} {formatColor(activeNode.color)}\n                  </p>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n        </div>\n      </div>\n      {colored ? (\n        <div aria-hidden=\"true\" className=\"flex min-w-0 flex-wrap items-center gap-2 text-xs tabular-nums text-muted-foreground\">\n          <span className=\"me-1 text-text-secondary\">{colorLabel}</span>\n          <span>{formatColor(lo)}</span>\n          <span className=\"inline-flex gap-0.5\">\n            {Array.from({ length: STEPS }, (_, i) => (\n              <span\n                key={i}\n                className=\"treemap-step\"\n                style={{ \"--fill\": `color-mix(in oklab, ${center.depth === 0 ? \"var(--color-foreground)\" : hueOf(branchOf.get(center.id) ?? -1)} ${Math.round(14 + (i / (STEPS - 1)) * 44)}%, var(--color-surface))` } as CSSProperties}\n              />\n            ))}\n          </span>\n          <span>{formatColor(hi)}</span>\n        </div>\n      ) : null}\n      <p className=\"sr-only\">{summary}</p>\n      <p className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n        {activeNode ? describe(activeNode) : \"\"}\n      </p>\n      {empty ? null : (\n        <div className=\"sr-only\">\n          <table>\n            <caption>{label}</caption>\n            <thead>\n              <tr>\n                <th scope=\"col\">Path</th>\n                <th scope=\"col\">Value</th>\n                <th scope=\"col\">Share of parent</th>\n                {colored ? <th scope=\"col\">{colorLabel}</th> : null}\n              </tr>\n            </thead>\n            <tbody>\n              {nodes.map((node) => (\n                <tr key={node.id}>\n                  <th scope=\"row\">{node.path.join(\" / \")}</th>\n                  <td>{formatValue(node.value)}</td>\n                  <td>{PERCENT.format(share(node, parentOf(node)))}</td>\n                  {colored ? <td>{node.color === null ? \"\" : formatColor(node.color)}</td> : null}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      )}\n    </figure>\n  );\n});\n"],"mappings":"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"}

package/dist/usage-meter/index.d.ts

@@ -0,0 +1,2 @@
+import { UsageMeter, UsageMeterProps, UsageMeterSegment } from "./usage-meter.js";
+export { UsageMeter, type UsageMeterProps, type UsageMeterSegment };

package/dist/usage-meter/index.js

@@ -0,0 +1,2 @@
+import { UsageMeter } from "./usage-meter.js";
+export { UsageMeter };

package/dist/usage-meter/usage-meter.d.ts

@@ -0,0 +1,50 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/usage-meter/usage-meter.d.ts
+/**
+ * UsageMeter: a fixed allowance, such as storage or seats, when people need to
+ * see what takes the space and how close they are to the limit.
+ *
+ * The segments grow into place from the left once the meter is seen, each a
+ * beat after the one before. After that every change re-flows them: a segment
+ * that grows pushes the ones after it along in the same frame. The bar spans
+ * the limit, or everything used once that is more; past the limit the overflow
+ * keeps its colours but is struck through with a hatch, and a marker shows
+ * where the limit was, so "over" never rests on colour alone. The headline and
+ * every legend value count to their new number, and the status mark swaps its
+ * words and icon while its width follows.
+ *
+ * Hover previews a category, focus previews it too, and a press pins it until
+ * pressed again or Escape. The legend is the keyboard path: arrow keys move
+ * between categories. The bar names every amount for assistive technology,
+ * and a change of status (almost full, over, back under) is announced.
+ *
+ * Plain DOM and CSS; one small spring tween writes the segments straight to
+ * their elements.
+ */
+export interface UsageMeterSegment {
+  /** Stable identity. Keep it the same while the value changes, so the segment re-flows instead of being replaced. */
+  id: string;
+  label: string;
+  value: number;
+}
+export interface UsageMeterProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /** What is measured, such as "Workspace storage". */
+  label: string;
+  /** Used amounts in display order. Up to four read clearly. */
+  segments: UsageMeterSegment[];
+  /** The plan limit, in the same unit as the segments. */
+  limit: number;
+  /** Unit after each number, such as "GB". */
+  unit?: string;
+  /** Digits after the decimal point. @default 1 */
+  decimals?: number;
+  /** Name of the unused share. @default "Free" */
+  freeLabel?: string;
+  /** Name of the share past the limit. @default "Over limit" */
+  overLabel?: string;
+  /** Share of the limit at which the meter warns that it is almost full. @default 0.9 */
+  warnAt?: number;
+}
+export declare const UsageMeter: import("react").ForwardRefExoticComponent<UsageMeterProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=usage-meter.d.ts.map

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

@@ -0,0 +1,440 @@
+"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 { SwapText } from "../lib/swap-text.js";
+import { Badge } from "../badge/badge.js";
+import { FILL, SMOOTH, live, retarget } from "../lib/spring-tween.js";
+import { useSvgId } from "../lib/svg-id.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/usage-meter/usage-meter.tsx
+/** A segment stops two pixels short of the next, so neighbours read apart without an outline. */
+const GAP = 2;
+/** Stagger of each segment's first growth. */
+const STAGGER_MS = 70;
+const formats = /* @__PURE__ */ new Map();
+function numberFormat(decimals) {
+	let format = formats.get(decimals);
+	if (!format) {
+		format = new Intl.NumberFormat("en-US", {
+			minimumFractionDigits: decimals,
+			maximumFractionDigits: decimals
+		});
+		formats.set(decimals, format);
+	}
+	return format;
+}
+/** 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. */
+function Count({ value, decimals }) {
+	const scale = 10 ** decimals;
+	const shown = useCountTo(Math.round(value * scale));
+	return /* @__PURE__ */ jsx(Fragment$1, { children: numberFormat(decimals).format(shown / scale) });
+}
+function AlertCircleIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: "size-3.5",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01" })]
+	});
+}
+function AlertTriangleIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: "size-3.5",
+		children: [/* @__PURE__ */ jsx("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" }), /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })]
+	});
+}
+const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit = "", decimals = 1, freeLabel = "Free", overLabel = "Over limit", warnAt = .9, className, ...props }, ref) {
+	const root = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, root), [ref]);
+	const bar = useRef(null);
+	const track = useRef(null);
+	const marker = useRef(null);
+	const overflow = useRef(null);
+	const legend = useRef(null);
+	const titleId = useId();
+	const hatchId = `hatch${useSvgId()}`;
+	const round = (value) => Math.round(value * 10 ** decimals) / 10 ** decimals;
+	const total = round(segments.reduce((sum, segment) => sum + segment.value, 0));
+	const free = round(Math.max(0, limit - total));
+	const over = round(Math.max(0, total - limit));
+	const status = total > limit ? "over" : total >= limit * warnAt ? "near" : "ok";
+	const format = (value) => `${numberFormat(decimals).format(value)}${unit ? ` ${unit}` : ""}`;
+	const limitText = format(limit).replace(/\.0+(?= |$)/, "");
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		const node = root.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setReady(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setReady(true);
+		}, { threshold: .4 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const [amounts] = useState(() => /* @__PURE__ */ new Map());
+	const shownLimit = useRef(live(limit));
+	const width = useRef(0);
+	/** One writer: every segment's place and length, the limit marker and the overflow hatch. */
+	const paint = useCallback(() => {
+		const frame = track.current;
+		if (!frame) return;
+		const w = width.current;
+		const nodes = frame.querySelectorAll("[data-segment]");
+		let used = 0;
+		for (const node of nodes) used += amounts.get(node.dataset.segment)?.value ?? 0;
+		const limitNow = shownLimit.current.value;
+		const span = Math.max(limitNow, used, 1e-6);
+		let start = 0;
+		for (const node of nodes) {
+			const amount = amounts.get(node.dataset.segment)?.value ?? 0;
+			const x = start / span * w;
+			const size = amount / span * w;
+			const rest = w - x - size;
+			const scale = w ? Math.max(0, size - Math.min(GAP, size, Math.max(0, rest))) / w : 0;
+			node.style.transform = `translateX(${x.toFixed(2)}px) scaleX(${scale.toFixed(4)})`;
+			start += amount;
+		}
+		const limitX = Math.round(limitNow / span * w);
+		if (marker.current) marker.current.style.translate = `${limitX}px 0`;
+		if (overflow.current) overflow.current.style.clipPath = `inset(0 0 0 ${limitX + GAP}px)`;
+		if (bar.current) {
+			if (used > limitNow) bar.current.setAttribute("data-over", "");
+			else bar.current.removeAttribute("data-over");
+		}
+	}, [amounts]);
+	useIsomorphicLayoutEffect(() => {
+		const node = track.current;
+		if (!node) return;
+		const read = () => {
+			width.current = node.clientWidth;
+			paint();
+		};
+		read();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(read);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [paint]);
+	useIsomorphicLayoutEffect(paint);
+	const values = segments.map((segment) => `${segment.id}:${segment.value}`).join("|");
+	const revealed = useRef(false);
+	const latest = useRef(segments);
+	useIsomorphicLayoutEffect(() => {
+		latest.current = segments;
+	});
+	useEffect(() => {
+		if (!ready) return;
+		const first = !revealed.current;
+		revealed.current = true;
+		latest.current.forEach((segment, index) => {
+			let amount = amounts.get(segment.id);
+			if (!amount) {
+				amount = live(0);
+				amounts.set(segment.id, amount);
+			}
+			retarget(amount, segment.value, first ? FILL : SMOOTH, paint, first ? index * STAGGER_MS : 0);
+		});
+	}, [
+		values,
+		ready,
+		paint,
+		amounts
+	]);
+	useEffect(() => {
+		retarget(shownLimit.current, limit, SMOOTH, paint);
+	}, [limit, paint]);
+	useEffect(() => {
+		const bound = shownLimit.current;
+		return () => {
+			for (const amount of amounts.values()) amount.stop();
+			bound.stop();
+		};
+	}, [amounts]);
+	const [hovered, setHovered] = useState(null);
+	const [focused, setFocused] = useState(null);
+	const [pinned, setPinned] = useState(null);
+	const [roving, setRoving] = useState(0);
+	const items = [...segments.map((segment) => ({
+		id: segment.id,
+		label: segment.label,
+		value: segment.value
+	})), {
+		id: "free",
+		label: status === "over" ? overLabel : freeLabel,
+		value: status === "over" ? over : free
+	}];
+	const active = hovered ?? focused ?? pinned;
+	const activeItem = items.find((item) => item.id === active) ?? null;
+	const idAt = (clientX) => {
+		const rect = track.current?.getBoundingClientRect();
+		if (!rect?.width) return null;
+		const at = (clientX - rect.left) / rect.width * Math.max(limit, total);
+		if (at > limit) return "free";
+		let end = 0;
+		for (const segment of segments) {
+			end += segment.value;
+			if (at <= end) return segment.id;
+		}
+		return "free";
+	};
+	const onTrackMove = (event) => {
+		if (event.pointerType === "mouse") setHovered(idAt(event.clientX));
+	};
+	const onTrackTap = (event) => {
+		if (event.pointerType === "mouse") return;
+		const id = idAt(event.clientX);
+		setPinned((current) => current === id ? null : id);
+	};
+	const onLegendKey = (event) => {
+		if (event.key === "Escape") {
+			if (pinned || focused) {
+				event.preventDefault();
+				setPinned(null);
+				setFocused(null);
+			}
+			return;
+		}
+		const next = {
+			ArrowRight: roving + 1,
+			ArrowDown: roving + 1,
+			ArrowLeft: roving - 1,
+			ArrowUp: roving - 1,
+			Home: 0,
+			End: items.length - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		const index = (next + items.length) % items.length;
+		setRoving(index);
+		legend.current?.querySelectorAll("button")[index]?.focus();
+	};
+	const headline = ready ? activeItem ? activeItem.value : total : 0;
+	const share = activeItem ? Math.round(activeItem.value / limit * 100) : 0;
+	const caption = !activeItem ? `${unit} of ${limitText} used` : activeItem.id === "free" ? `${unit} ${status === "over" ? "over the limit" : "free"}` : `${unit} in ${activeItem.label} · ${share}% of plan`;
+	const badge = status === "over" ? `${format(over)} over` : status === "near" ? "Almost full" : `${format(free)} free`;
+	const summary = `${label}: ${format(total)} of ${limitText} used. ${segments.map((segment) => `${segment.label} ${format(segment.value)}`).join(", ")}. ${status === "over" ? `Over the limit by ${format(over)}.` : `${format(free)} free${status === "near" ? ", almost full" : ""}.`}`;
+	const notice = status === "over" ? `over:${over}` : status;
+	const [announced, setAnnounced] = useState({
+		notice,
+		message: ""
+	});
+	if (announced.notice !== notice) setAnnounced({
+		notice,
+		message: status === "over" ? `Over the plan limit by ${format(over)}.` : status === "near" ? `Almost full. ${format(free)} free.` : `Under the limit. ${format(free)} free.`
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: refs,
+		...props,
+		role: "group",
+		"aria-labelledby": titleId,
+		"data-slot": "usage-meter",
+		"data-status": status,
+		className: cn("usage-meter", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-7 min-w-0 items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: titleId,
+					className: "min-w-0 text-base font-medium text-foreground text-balance",
+					children: label
+				}), /* @__PURE__ */ jsx(Badge, {
+					tone: status === "over" ? "danger" : status === "near" ? "warning" : "neutral",
+					shape: "pill",
+					size: "lg",
+					icon: status === "over" ? /* @__PURE__ */ jsx(AlertTriangleIcon, {}) : status === "near" ? /* @__PURE__ */ jsx(AlertCircleIcon, {}) : void 0,
+					children: badge
+				})]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "m-0 flex min-w-0 items-baseline gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [
+							format(total),
+							" of ",
+							limitText,
+							" used"
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "usage-meter-amount",
+						"aria-hidden": "true",
+						className: "flex-none font-display text-h2 font-medium tabular-nums",
+						children: /* @__PURE__ */ jsx(Count, {
+							value: headline,
+							decimals
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "min-w-0 flex-1 text-sm text-text-secondary",
+						children: /* @__PURE__ */ jsx(SwapText, {
+							swapKey: caption,
+							className: "block truncate",
+							children: caption
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: bar,
+				className: "usage-meter-bar",
+				"data-slot": "usage-meter-bar",
+				children: [/* @__PURE__ */ jsxs("div", {
+					ref: track,
+					role: "img",
+					"aria-label": summary,
+					"data-active": active ?? void 0,
+					onPointerMove: onTrackMove,
+					onPointerLeave: () => setHovered(null),
+					onPointerUp: onTrackTap,
+					className: "usage-meter-track",
+					children: [segments.map((segment, index) => /* @__PURE__ */ jsx("span", {
+						"data-segment": segment.id,
+						"data-index": index,
+						"data-highlight": active ? active === segment.id ? "on" : "off" : void 0,
+						className: "usage-meter-segment"
+					}, segment.id)), /* @__PURE__ */ jsxs("svg", {
+						ref: overflow,
+						"aria-hidden": "true",
+						focusable: "false",
+						"data-highlight": active ? active === "free" ? "on" : "off" : void 0,
+						className: "usage-meter-overflow",
+						children: [
+							/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", {
+								id: hatchId,
+								width: 6,
+								height: 6,
+								patternUnits: "userSpaceOnUse",
+								patternTransform: "rotate(45)",
+								children: /* @__PURE__ */ jsx("rect", {
+									width: 2.5,
+									height: 6,
+									className: "usage-meter-hatch"
+								})
+							}) }),
+							/* @__PURE__ */ jsx("rect", {
+								width: "100%",
+								height: "100%",
+								className: "usage-meter-over-tint"
+							}),
+							/* @__PURE__ */ jsx("rect", {
+								width: "100%",
+								height: "100%",
+								fill: `url(#${hatchId})`
+							})
+						]
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					ref: marker,
+					"aria-hidden": "true",
+					className: "usage-meter-limit"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: legend,
+				role: "group",
+				"aria-label": `${label} by category`,
+				onKeyDown: onLegendKey,
+				className: "usage-meter-legend",
+				children: items.map((item, index) => {
+					const warning = item.id === "free" && status === "over";
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"data-slot": "usage-meter-item",
+						"data-highlight": active ? active === item.id ? "on" : "off" : void 0,
+						"aria-pressed": pinned === item.id,
+						"aria-label": `${item.label}, ${format(item.value)}`,
+						tabIndex: index === roving ? 0 : -1,
+						onClick: () => {
+							setRoving(index);
+							setPinned((current) => current === item.id ? null : item.id);
+						},
+						onFocus: (event) => {
+							setRoving(index);
+							if (event.currentTarget.matches(":focus-visible")) setFocused(item.id);
+						},
+						onBlur: () => setFocused(null),
+						onPointerEnter: (event) => {
+							if (event.pointerType === "mouse") setHovered(item.id);
+						},
+						onPointerLeave: (event) => {
+							if (event.pointerType === "mouse") setHovered(null);
+						},
+						className: "usage-meter-item",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 max-w-full items-center gap-2 text-sm text-text-secondary",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "usage-meter-key",
+								children: /* @__PURE__ */ jsx(SwapText, {
+									swapKey: warning ? "alert" : "swatch",
+									motion: "glyph",
+									className: "grid place-items-center",
+									children: warning ? /* @__PURE__ */ jsx("span", {
+										className: "text-destructive-strong",
+										children: /* @__PURE__ */ jsx(AlertTriangleIcon, {})
+									}) : /* @__PURE__ */ jsx("span", {
+										"data-index": item.id === "free" ? "free" : index,
+										className: "usage-meter-swatch"
+									})
+								})
+							}), /* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1",
+								children: /* @__PURE__ */ jsx(SwapText, {
+									swapKey: item.label,
+									className: "block truncate",
+									children: item.label
+								})
+							})]
+						}), /* @__PURE__ */ jsxs("span", {
+							"aria-hidden": "true",
+							className: "flex items-baseline gap-1 ps-5 text-base font-medium text-foreground tabular-nums",
+							children: [/* @__PURE__ */ jsx(Count, {
+								value: item.value,
+								decimals
+							}), unit ? /* @__PURE__ */ jsx("span", {
+								className: "text-sm font-normal text-text-secondary",
+								children: unit
+							}) : null]
+						})]
+					}, item.id);
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: announced.message
+			})
+		]
+	});
+});
+//#endregion
+export { UsageMeter };
+
+//# sourceMappingURL=usage-meter.js.map