@bkstg/design-systems 1.0.0

package/bkstg/v1/react/Alert.jsx

@@ -0,0 +1,28 @@
+import { cx } from "./cx.js";
+
+const ICONS = {
+  info: <><circle cx="12" cy="12" r="10" /><path d="M12 16v-4M12 8h.01" /></>,
+  ok: <><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></>,
+  warn: <><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" /><path d="M12 9v4M12 17h.01" /></>,
+  critical: <><circle cx="12" cy="12" r="10" /><path d="m15 9-6 6M9 9l6 6" /></>,
+};
+
+/**
+ * <Alert tone="warn" title="Set times move Thursday">Check the schedule before you publish.</Alert>
+ * tone: "info" (default) | "ok" | "warn" | "critical". Critical uses role="alert" (announced at once),
+ * the others role="status". onClose adds a close button.
+ */
+export function Alert({ tone = "info", title, children, onClose, closeLabel = "Dismiss", className }) {
+  return (
+    <div className={cx("ui-alert", tone !== "info" && `ui-alert--${tone}`, className)} role={tone === "critical" ? "alert" : "status"}>
+      <svg className="ui-alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{ICONS[tone] || ICONS.info}</svg>
+      {title ? <p className="ui-alert-title">{title}</p> : null}
+      {children ? <p className="ui-alert-body">{children}</p> : null}
+      {onClose ? (
+        <button type="button" className="ui-alert-close" aria-label={closeLabel} onClick={onClose}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/bkstg/v1/react/Annotations.jsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Annotations notes={[{ x: "12%", y: "16%", title: "One primary action", text: "…" }]}>{the design}</Annotations>
+ * Numbered pins over the design, each a button that lights up its note in the list beside it.
+ */
+export function Annotations({ notes, children, label = "Notes", className }) {
+  const [on, setOn] = useState(null);
+  return (
+    <div className={cx("ui-annot", className)}>
+      <div className="ui-annot-canvas">
+        {children}
+        {notes.map((n, i) => (
+          <button key={i} type="button" className="ui-annot-pin" aria-pressed={on === i} aria-label={`Note ${i + 1}: ${n.title}`}
+            style={{ left: n.x, top: n.y }} onClick={() => setOn(on === i ? null : i)}>{i + 1}</button>
+        ))}
+      </div>
+      <ol className="ui-annot-notes" aria-label={label}>
+        {notes.map((n, i) => <li key={i} data-active={on === i ? "" : undefined}><strong>{n.title}</strong><span>{n.text}</span></li>)}
+      </ol>
+    </div>
+  );
+}

package/bkstg/v1/react/AppShell.jsx

@@ -0,0 +1,87 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const NARROW = 720; // keep in step with the @container query in components.css
+const Icon = ({ d }) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{d}</svg>;
+const PANEL = <Icon d={<><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" /></>} />;
+const MENU = <Icon d={<path d="M4 6h16M4 12h16M4 18h16" />} />;
+const CHEV = <Icon d={<path d="m6 9 6 6 6-6" />} />;
+
+/**
+ * The app sidebar with a flyout, after the BKSTG workbench's own. Wide, it collapses to an icon rail; under
+ * 720px it slides over the page as a drawer (Escape or a tap outside closes it).
+ * <AppShell brand="BKSTG" title="Overview" label="Main" items={[
+ *   { href: "/", label: "Overview", icon: <HomeIcon />, current: true },
+ *   { href: "/lineup", label: "Lineup", icon: <MusicIcon />, count: 24 },
+ *   { label: "Production", icon: <TruckIcon />, open: true, items: [{ href: "/stages", label: "Stages" }] },
+ *   { heading: "Departments" },
+ *   { href: "/booking", label: "Booking", icon: <MicIcon /> },
+ * ]} footer={[{ href: "/settings", label: "Settings", icon: <GearIcon /> }]}>…the page…</AppShell>
+ */
+export function AppShell({ brand, title, label = "Main", items = [], footer = [], defaultCollapsed = false, children, className }) {
+  const id = useId().replace(/:/g, ""), sbId = `sb-${id}`;
+  const root = useRef(null), side = useRef(null), opener = useRef(null);
+  const [narrow, setNarrow] = useState(false);
+  const [open, setOpen] = useState(!defaultCollapsed);
+  const [groups, setGroups] = useState(() => new Set(items.filter((it) => it.items && it.open).map((it) => it.label)));
+  useEffect(() => {
+    if (!root.current || typeof ResizeObserver === "undefined") return undefined;
+    const ro = new ResizeObserver(([e]) => { const n = e.contentRect.width <= NARROW; setNarrow(n); if (n) setOpen(false); });
+    ro.observe(root.current);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => {
+    if (!(narrow && open)) return undefined;
+    side.current?.querySelector(".ui-sidebar-toggle, .ui-sidebar-item")?.focus();
+    const key = (e) => { if (e.key === "Escape") { setOpen(false); opener.current?.focus(); } };
+    const tap = (e) => { if (side.current && !side.current.contains(e.target) && !opener.current?.contains(e.target)) setOpen(false); };
+    document.addEventListener("keydown", key); document.addEventListener("mousedown", tap);
+    return () => { document.removeEventListener("keydown", key); document.removeEventListener("mousedown", tap); };
+  }, [narrow, open]);
+  const toggleGroup = (name) => {
+    if (!open && !narrow) { setOpen(true); setGroups((s) => new Set(s).add(name)); return; }
+    setGroups((s) => { const n = new Set(s); n.has(name) ? n.delete(name) : n.add(name); return n; });
+  };
+  const link = (it, sub) => (
+    <a key={it.href + it.label} className="ui-sidebar-item" href={it.href} title={sub ? undefined : it.label} aria-current={it.current ? "page" : undefined}>
+      {it.icon ? <span aria-hidden="true" style={{ display: "contents" }}>{it.icon}</span> : null}
+      <span className="ui-sidebar-label">{it.label}</span>
+      {it.count != null ? <span className="ui-sidebar-count">{it.count}</span> : null}
+    </a>
+  );
+  const entry = (it) => {
+    if (it.heading) return <p key={"h-" + it.heading} className="ui-sidebar-head">{it.heading}</p>;
+    if (!it.items) return link(it);
+    const bodyId = `${sbId}-${it.label.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`, isOpen = groups.has(it.label) && (open || narrow);
+    return (
+      <div key={"g-" + it.label} className="ui-sidebar-group">
+        <button type="button" className="ui-sidebar-item" aria-expanded={isOpen} aria-controls={bodyId} title={it.label} onClick={() => toggleGroup(it.label)}>
+          {it.icon ? <span aria-hidden="true" style={{ display: "contents" }}>{it.icon}</span> : null}
+          <span className="ui-sidebar-label">{it.label}</span><span className="ui-sidebar-chev">{CHEV}</span>
+        </button>
+        <div className="ui-sidebar-group-body" id={bodyId} hidden={!isOpen}>{it.items.map((s) => link(s, true))}</div>
+      </div>
+    );
+  };
+  const toggleLabel = narrow ? "Close menu" : open ? "Collapse sidebar" : "Expand sidebar";
+  return (
+    <div ref={root} className={cx("ui-app", className)}>
+      <nav ref={side} className="ui-sidebar" id={sbId} data-state={open ? "expanded" : "collapsed"} aria-label={label}>
+        <div className="ui-sidebar-top">
+          {brand ? <span className="ui-sidebar-brand">{brand}</span> : null}
+          <button type="button" className="ui-sidebar-toggle" aria-controls={sbId} aria-expanded={open} aria-label={toggleLabel}
+            onClick={() => { setOpen(!open); if (open && narrow) opener.current?.focus(); }}>{PANEL}</button>
+        </div>
+        {items.map(entry)}
+        {footer.length ? <div className="ui-sidebar-foot">{footer.map((it) => link(it))}</div> : null}
+      </nav>
+      <div className="ui-app-main">
+        <div className="ui-app-bar">
+          <button ref={opener} type="button" className="ui-sidebar-open" aria-controls={sbId} aria-expanded={open} aria-label="Open menu" onClick={() => setOpen(true)}>{MENU}</button>
+          {title ? <strong>{title}</strong> : null}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

package/bkstg/v1/react/Avatar.jsx

@@ -0,0 +1,19 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Avatar name="Grace Lee" src={url} size="lg" online />
+ * Without src, shows initials. name is the accessible name either way.
+ */
+export function Avatar({ name, src, size = "md", online = false, className }) {
+  const initials = (name || "").split(/\s+/).filter(Boolean).slice(0, 2).map(w => w[0].toUpperCase()).join("");
+  return (
+    <span className={cx("ui-avatar", size !== "md" && `ui-avatar--${size}`, className)} role="img" aria-label={name + (online ? ", online" : "")}>
+      {src ? <img src={src} alt="" /> : <span aria-hidden="true">{initials}</span>}
+      {online ? <span className="ui-avatar-status" aria-hidden="true" /> : null}
+    </span>
+  );
+}
+
+export function AvatarGroup({ label, className, children }) {
+  return <span className={cx("ui-avatar-group", className)} role="group" aria-label={label}>{children}</span>;
+}

package/bkstg/v1/react/Badge.jsx

@@ -0,0 +1,14 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Badge tone="ok" dot>Live</Badge>
+ * tone: "neutral" (default) | "ok" | "warn" | "critical" | "brand" | "outline"
+ */
+export function Badge({ tone = "neutral", dot = false, className, children, ...rest }) {
+  return (
+    <span className={cx("ui-badge", tone !== "neutral" && `ui-badge--${tone}`, className)} {...rest}>
+      {dot ? <span className="ui-badge-dot" aria-hidden="true" /> : null}
+      {children}
+    </span>
+  );
+}

package/bkstg/v1/react/Banner.jsx

@@ -0,0 +1,17 @@
+import { cx } from "./cx.js";
+
+const X = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>;
+
+/**
+ * <Banner tone="fill" link={{ href: "/schedule", label: "Open the schedule" }} onClose={hide}>Set times are live.</Banner>
+ * tone: default (inverted) | "fill" | "subtle"; card puts it in a rounded box. A named region, so it can be found.
+ */
+export function Banner({ children, tone, card = false, link, onClose, label = "Announcement", className }) {
+  return (
+    <div className={cx("ui-banner", tone && `ui-banner--${tone}`, card && "ui-banner--card", className)} role="region" aria-label={label}>
+      <span>{children}</span>
+      {link ? <a href={link.href}>{link.label}</a> : null}
+      {onClose ? <button type="button" className="ui-banner-close" aria-label={`Dismiss ${label.toLowerCase()}`} onClick={onClose}>{X}</button> : null}
+    </div>
+  );
+}

package/bkstg/v1/react/Breadcrumbs.jsx

@@ -0,0 +1,23 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Breadcrumbs items={[{ href: "/", label: "Home", icon: <HomeIcon /> }, { href: "/events", label: "Events" }, { label: "Spring 2026" }]} />
+ * The last item is the current page: plain text with aria-current="page", never a link.
+ */
+export function Breadcrumbs({ items, label = "Breadcrumb", className }) {
+  return (
+    <nav className={cx("ui-breadcrumb", className)} aria-label={label}>
+      <ol>
+        {items.map((it, i) => {
+          const last = i === items.length - 1;
+          return (
+            <li key={i}>
+              {last ? <span aria-current="page">{it.icon}{it.label}</span>
+                : <a href={it.href} aria-label={it.icon && !it.label ? it.ariaLabel : undefined}>{it.icon}{it.label}</a>}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/bkstg/v1/react/Button.jsx

@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Button variant="primary" size="sm">Save</Button>
+ * variant: "secondary" (default) | "primary" | "ghost" | "destructive" | "link"
+ * size:    "md" (default) | "sm" | "lg" | "icon"   (icon needs an aria-label)
+ * loading: shows a spinner, sets aria-busy, blocks clicks
+ * Same markup and classes as the HTML version; the look lives in components.css.
+ */
+export const Button = forwardRef(function Button(
+  { variant = "secondary", size = "md", loading = false, className, type = "button", children, ...rest },
+  ref
+) {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      aria-busy={loading || undefined}
+      className={cx(
+        "ui-btn",
+        variant !== "secondary" && `ui-btn--${variant}`,
+        size !== "md" && `ui-btn--${size}`,
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});

package/bkstg/v1/react/ButtonGroup.jsx

@@ -0,0 +1,29 @@
+import { cx } from "./cx.js";
+
+/**
+ * <ButtonGroup label="View" value={view} onChange={setView} items={[
+ *   { value: "list", label: "List" }, { value: "board", label: "Board" } ]} />
+ * One pressed at a time. With multiple, value is an array and each button toggles on its own.
+ * Each button reports its state with aria-pressed.
+ */
+export function ButtonGroup({ label, items, value, onChange, multiple = false, className }) {
+  const on = (v) => (multiple ? (value || []).includes(v) : value === v);
+  function press(v) {
+    if (!onChange) return;
+    if (!multiple) return onChange(v);
+    const list = value || [];
+    onChange(list.includes(v) ? list.filter((x) => x !== v) : [...list, v]);
+  }
+  return (
+    <div className={cx("ui-btngroup", className)} role="group" aria-label={label}>
+      {items.map((it) => (
+        <button
+          key={it.value} type="button" className="ui-btngroup-item" disabled={it.disabled}
+          aria-pressed={on(it.value)} aria-label={it.ariaLabel} onClick={() => press(it.value)}
+        >
+          {it.icon}{it.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/bkstg/v1/react/Calendar.jsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], DOW_LONG = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+export const toIso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+export const fromIso = (s) => { const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s || ""); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; };
+const Arrow = ({ d }) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={d} /></svg>;
+
+/**
+ * <Calendar value="2026-04-18" onChange={setDate} events={["2026-04-11"]} />
+ * A month as a grid: arrows move a day, Page Up/Down a month, Home/End the week. Dates are "YYYY-MM-DD" strings.
+ */
+export function Calendar({ value, onChange, events = [], today = new Date(), autoFocus = false, label, className }) {
+  const [cursor, setCursor] = useState(() => fromIso(value) || today);
+  const focus = useRef(autoFocus), grid = useRef(null);
+  useEffect(() => { if (focus.current) grid.current?.querySelector('[tabindex="0"]')?.focus(); focus.current = false; });
+  const y = cursor.getFullYear(), mo = cursor.getMonth(), start = new Date(y, mo, 1 - new Date(y, mo, 1).getDay());
+  const move = (days, months) => { focus.current = true; setCursor((c) => (months ? new Date(c.getFullYear(), c.getMonth() + months, Math.min(c.getDate(), 28)) : new Date(c.getFullYear(), c.getMonth(), c.getDate() + days))); };
+  function onKey(e) {
+    const m = { ArrowLeft: [-1], ArrowRight: [1], ArrowUp: [-7], ArrowDown: [7], Home: [-cursor.getDay()], End: [6 - cursor.getDay()], PageUp: [0, -1], PageDown: [0, 1] }[e.key];
+    if (m) { e.preventDefault(); move(m[0], m[1]); }
+  }
+  const titleId = `cal-${y}-${mo}`;
+  return (
+    <div className={cx("ui-calendar", className)}>
+      <div className="ui-calendar-head">
+        <button type="button" className="ui-btn ui-btn--sm ui-btn--icon ui-btn--ghost" aria-label="Previous month" onClick={() => setCursor(new Date(y, mo - 1, 1))}><Arrow d="m15 18-6-6 6-6" /></button>
+        <h3 className="ui-calendar-title" id={titleId} aria-live="polite">{`${MONTHS[mo]} ${y}`}</h3>
+        <button type="button" className="ui-btn ui-btn--sm ui-btn--icon ui-btn--ghost" aria-label="Next month" onClick={() => setCursor(new Date(y, mo + 1, 1))}><Arrow d="m9 18 6-6-6-6" /></button>
+      </div>
+      <table role="grid" aria-labelledby={titleId} aria-label={label} ref={grid} onKeyDown={onKey}>
+        <thead><tr>{DOW.map((d, i) => <th key={d} scope="col" abbr={DOW_LONG[i]}>{d}</th>)}</tr></thead>
+        <tbody>
+          {Array.from({ length: 6 }, (_, w) => (
+            <tr key={w}>
+              {Array.from({ length: 7 }, (_, d) => {
+                const day = new Date(start.getFullYear(), start.getMonth(), start.getDate() + w * 7 + d), s = toIso(day), ev = events.includes(s);
+                return (
+                  <td key={s} role="gridcell">
+                    <button
+                      type="button" className="ui-day" tabIndex={s === toIso(cursor) ? 0 : -1}
+                      aria-label={`${DOW_LONG[day.getDay()]}, ${MONTHS[day.getMonth()]} ${day.getDate()}${ev ? ", has events" : ""}`}
+                      aria-current={s === toIso(today) ? "date" : undefined} aria-selected={s === value}
+                      data-outside={day.getMonth() !== mo ? "" : undefined} data-event={ev ? "" : undefined}
+                      onClick={() => { setCursor(day); onChange?.(s); }}
+                    >{day.getDate()}</button>
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/bkstg/v1/react/CardHeader.jsx

@@ -0,0 +1,14 @@
+import { cx } from "./cx.js";
+
+/** <CardHeader title="Ticket sales" badge={<Badge>Live</Badge>} description="Updated every minute." actions={<Button size="sm">Export</Button>} /> */
+export function CardHeader({ title, badge, description, actions, as: H = "h3", className }) {
+  return (
+    <div className={cx("ui-cardhead", className)}>
+      <div className="ui-cardhead-text">
+        <H className="ui-cardhead-title">{title}{badge}</H>
+        {description ? <p className="ui-cardhead-desc">{description}</p> : null}
+      </div>
+      {actions ? <div className="ui-cardhead-actions">{actions}</div> : null}
+    </div>
+  );
+}

package/bkstg/v1/react/Chart.jsx

@@ -0,0 +1,42 @@
+import { createElement, useEffect, useRef, useState } from "react";
+import { chartNodes, toReact, animate, motionLevel, showTip, hideTip } from "../charts-core.mjs";
+import { cx } from "./cx.js";
+
+/**
+ * The kit's charts in React: the same geometry as charts.js (charts-core.mjs), so both draw the same chart.
+ * <Chart type="bar" label="Monthly expenses" labels={["Jan", "Feb"]} values={[4200, 7100]} prefix="$" />
+ * <Chart type="bar" stacked label="File transfer" labels={months} series={[{ name: "Desktop", values }, { name: "Mobile", values }]} />
+ * <Chart type="donut" label="Leads by source" center="Leads" labels={sources} values={counts} />
+ * <Chart type="ring" label="Target reached" value={48} center="of target" />
+ * type: bar | line | area | donut | pie | spark | ring | meter.  horizontal, stacked (bar); bars (spark); max (ring, meter);
+ * prefix, suffix, decimals; tone good | warn | neg for one series that means good or bad.
+ * animate={false} when Motion (or anything else) plays it in instead.
+ * Draws at its real width, plays in once when it scrolls into view (as far as the motion level allows), and keeps a
+ * data table for screen readers.
+ */
+export function Chart({ type, label = "Chart", labels = [], values, series, stacked = false, horizontal = false, bars = false, value, max,
+  prefix = "", suffix = "", decimals = 0, tone = "", center = "", height, animate: play = true, className }) {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(600);
+  const spec = { type, label, labels, series: series || (values ? [{ name: label, values }] : []), stacked, horizontal, bars, tone, center,
+    prefix, suffix, decimals, value, max: max ?? (type === "ring" ? 100 : undefined) };
+  useEffect(() => {
+    const fig = ref.current; if (!fig || typeof ResizeObserver !== "function") return undefined;
+    const ro = new ResizeObserver(([e]) => { const w = Math.round(e.contentRect.width); setWidth(prev => Math.abs(w - prev) > 8 ? w : prev); });
+    ro.observe(fig);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => {
+    const fig = ref.current; if (!play || !fig || typeof IntersectionObserver !== "function") return undefined;
+    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { io.disconnect(); animate(fig, motionLevel()); } }, { threshold: 0.25 });
+    io.observe(fig);
+    return () => io.disconnect();
+  }, []);
+  const h = height ?? (type === "spark" ? 40 : 220);
+  return (
+    <figure ref={ref} className={cx("ui-viz", `ui-viz--${type}`, horizontal && "ui-viz--horizontal", className)} aria-label={label}
+      onPointerMove={e => showTip(ref.current, spec, e)} onPointerLeave={() => hideTip(ref.current)}>
+      {toReact(chartNodes(spec, width, h), createElement)}
+    </figure>
+  );
+}

package/bkstg/v1/react/Chat.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const SEND = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m22 2-7 20-4-9-9-4z" /><path d="M22 2 11 13" /></svg>;
+const initials = (n) => n.split(" ").map((w) => w[0]).join("").slice(0, 2);
+
+/**
+ * <Chat label="Production chat" messages={[{ id: 1, from: "Grace Lee", text: "Doors at noon?", time: "9:41" }, { id: 2, mine: true, text: "Yes.", time: "9:42" }]} onSend={send} />
+ * Messages read out as they arrive (role="log"). Enter sends, Shift+Enter adds a line.
+ */
+export function Chat({ label, messages, onSend, placeholder = "Write a message", className }) {
+  const [text, setText] = useState("");
+  const log = useRef(null);
+  useEffect(() => { if (log.current) log.current.scrollTop = log.current.scrollHeight; }, [messages.length]);
+  const send = () => { const t = text.trim(); if (!t) return; onSend?.(t); setText(""); };
+  return (
+    <section className={cx("ui-chat", className)} aria-label={label}>
+      <ol className="ui-chat-log" role="log" aria-live="polite" ref={log}>
+        {messages.map((m) => (
+          <li key={m.id} className={cx("ui-msg", m.mine && "ui-msg--out")}>
+            {!m.mine ? <span className="ui-avatar ui-avatar--sm" role="img" aria-label={m.from}><span aria-hidden="true">{initials(m.from)}</span></span> : null}
+            <div className="ui-msg-bubble">{m.text}</div>
+            <span className="ui-msg-meta">{m.mine ? "You" : m.from} · {m.time}</span>
+          </li>
+        ))}
+      </ol>
+      <div className="ui-chat-compose">
+        <textarea className="ui-input" rows={1} aria-label="Message" placeholder={placeholder} value={text} onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); send(); } }} />
+        <button type="button" className="ui-btn ui-btn--primary ui-btn--icon" aria-label="Send" onClick={send}>{SEND}</button>
+      </div>
+    </section>
+  );
+}

package/bkstg/v1/react/Checkbox.jsx

@@ -0,0 +1,32 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Checkbox checked={on} onChange={(e) => setOn(e.target.checked)} hint="We send one a week.">Newsletter</Checkbox>
+ * A real checkbox: Space toggles it, its label is clickable, forms submit it.
+ * indeterminate shows the mixed state, for a "select all" box when only some are checked.
+ */
+export const Checkbox = forwardRef(function Checkbox({ children, hint, indeterminate = false, className, ...rest }, ref) {
+  const inner = useRef(null);
+  useImperativeHandle(ref, () => inner.current);
+  // indeterminate is a property, never an attribute, so it is set on the element; the browser then reports "mixed"
+  useEffect(() => { if (inner.current) inner.current.indeterminate = indeterminate; }, [indeterminate]);
+  const input = <input ref={inner} type="checkbox" className={cx("ui-check", className)} {...rest} />;
+  if (!children) return input;
+  return (
+    <label className="ui-check-row">
+      {input}
+      {hint ? <span className="ui-check-text">{children}<small>{hint}</small></span> : children}
+    </label>
+  );
+});
+
+/** <Choices legend="Notify me about">…checkboxes or radios…</Choices>: a fieldset, so the group has a name */
+export function Choices({ legend, children, className, ...rest }) {
+  return (
+    <fieldset className={cx("ui-choices", className)} {...rest}>
+      {legend ? <legend className="ui-label">{legend}</legend> : null}
+      {children}
+    </fieldset>
+  );
+}

package/bkstg/v1/react/CodeSnippet.jsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+import { cx } from "./cx.js";
+
+/** <CodeSnippet language="html" code={'<link rel="stylesheet" href="bkstg.css">'} /> A copy button copies the code. */
+export function CodeSnippet({ code, language, className }) {
+  const [said, setSaid] = useState("Copy");
+  const copy = () => navigator.clipboard?.writeText(code).then(() => setSaid("Copied"), () => setSaid("Copy failed")).finally(() => setTimeout(() => setSaid("Copy"), 2000));
+  return (
+    <figure className={cx("ui-code", className)}>
+      <figcaption className="ui-code-head">
+        <span className="ui-code-lang">{language}</span>
+        <button type="button" className="ui-btn ui-btn--sm ui-btn--ghost" onClick={copy}><span>{said}</span></button>
+      </figcaption>
+      <pre><code>{code}</code></pre>
+    </figure>
+  );
+}

package/bkstg/v1/react/ColorPicker.jsx

@@ -0,0 +1,35 @@
+import { useId } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <ColorPicker label="Stage color" value={color} onChange={setColor} swatches={["#c6f135", "#4f46e5", "#db2777"]} />
+ * Swatches (a radio group: arrows move), the browser's own picker, and a hex field, all in step.
+ */
+export function ColorPicker({ label, value, onChange, swatches = [], className }) {
+  const id = useId();
+  const valid = /^#[0-9a-f]{6}$/i.test(value || "");
+  return (
+    <div className={cx("ui-colorpick", className)}>
+      <span className="ui-label" id={`${id}-l`}>{label}</span>
+      {swatches.length ? (
+        <div className="ui-swatches" role="radiogroup" aria-labelledby={`${id}-l`}
+          onKeyDown={(e) => {
+            const i = swatches.findIndex((s) => s.toLowerCase() === (value || "").toLowerCase());
+            const n = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+            if (n) { e.preventDefault(); const next = swatches[(i + n + swatches.length) % swatches.length]; onChange?.(next); e.currentTarget.querySelectorAll(".ui-swatch")[swatches.indexOf(next)]?.focus(); }
+          }}>
+          {swatches.map((s, i) => {
+            const on = s.toLowerCase() === (value || "").toLowerCase();
+            return <button key={s} type="button" role="radio" className="ui-swatch" style={{ background: s }} aria-label={s} aria-checked={on}
+              tabIndex={on || (!swatches.some((x) => x.toLowerCase() === (value || "").toLowerCase()) && i === 0) ? 0 : -1} onClick={() => onChange?.(s)} />;
+          })}
+        </div>
+      ) : null}
+      <div className="ui-colorpick-row">
+        <input type="color" aria-label={`${label}, picker`} value={valid ? value : "#000000"} onChange={(e) => onChange?.(e.target.value)} />
+        <input type="text" className="ui-input" aria-label={`${label}, hex`} defaultValue={value} key={value} maxLength={7} spellCheck={false}
+          aria-invalid={!valid || undefined} onChange={(e) => { const v = e.target.value.trim(); if (/^#?[0-9a-f]{6}$/i.test(v)) onChange?.(v[0] === "#" ? v : `#${v}`); }} />
+      </div>
+    </div>
+  );
+}

package/bkstg/v1/react/CommandMenu.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const SEARCH = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>;
+
+/**
+ * <CommandMenu open={open} onOpenChange={setOpen} groups={[{ label: "Go to", items: [{ id: "lineup", label: "Lineup", icon, hint: "G L", keywords: "artists", onRun }] }]} />
+ * A dialog with a search box over a list: type to filter, arrows to move, Enter to run. ⌘K or Ctrl+K opens it.
+ */
+export function CommandMenu({ open, onOpenChange, groups, placeholder = "Type a command or search…", className }) {
+  const id = useId(), dlg = useRef(null), input = useRef(null);
+  const [q, setQ] = useState(""), [active, setActive] = useState(0);
+  useEffect(() => {
+    const key = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); onOpenChange?.(!open); } };
+    document.addEventListener("keydown", key);
+    return () => document.removeEventListener("keydown", key);
+  }, [open, onOpenChange]);
+  useEffect(() => {
+    const d = dlg.current; if (!d) return;
+    if (open && !d.open) { setQ(""); setActive(0); d.showModal(); input.current?.focus(); }
+    if (!open && d.open) d.close();
+  }, [open]);
+  const shown = useMemo(() => groups.map((g) => ({ ...g, items: g.items.filter((it) => !q || `${it.label} ${it.keywords || ""}`.toLowerCase().includes(q.toLowerCase())) })).filter((g) => g.items.length), [groups, q]);
+  const flat = shown.flatMap((g) => g.items);
+  const run = (it) => { if (!it) return; onOpenChange?.(false); it.onRun?.(); };
+  function onKey(e) {
+    if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => (a + 1) % Math.max(flat.length, 1)); }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => (a - 1 + flat.length) % Math.max(flat.length, 1)); }
+    else if (e.key === "Enter") { e.preventDefault(); run(flat[active]); }
+  }
+  let n = -1;
+  return (
+    <dialog ref={dlg} className={cx("ui-dialog ui-command", className)} aria-label="Command menu" onClose={() => onOpenChange?.(false)} onClick={(e) => { if (e.target === dlg.current) onOpenChange?.(false); }}>
+      <div className="ui-command-search">{SEARCH}
+        <input ref={input} role="combobox" aria-expanded="true" aria-controls={`${id}-list`} aria-autocomplete="list" aria-label="Search commands"
+          aria-activedescendant={flat[active] ? `${id}-${flat[active].id}` : undefined} placeholder={placeholder} value={q}
+          onChange={(e) => { setQ(e.target.value); setActive(0); }} onKeyDown={onKey} />
+      </div>
+      <div className="ui-command-list" id={`${id}-list`} role="listbox" aria-label="Commands">
+        {shown.map((g) => (
+          <div key={g.label} role="group" aria-label={g.label}>
+            <div className="ui-command-group" aria-hidden="true">{g.label}</div>
+            {g.items.map((it) => { n += 1; const me = n; return (
+              <div key={it.id} id={`${id}-${it.id}`} role="option" className="ui-command-item" aria-selected={me === active}
+                onMouseMove={() => setActive(me)} onClick={() => run(it)}>{it.icon}{it.label}{it.hint ? <kbd>{it.hint}</kbd> : null}</div>
+            ); })}
+          </div>
+        ))}
+        {!flat.length ? <p className="ui-command-empty">Nothing matches "{q}".</p> : null}
+      </div>
+      <div className="ui-command-foot" aria-hidden="true"><span><kbd className="ui-kbd">↑</kbd> <kbd className="ui-kbd">↓</kbd> move</span><span><kbd className="ui-kbd">↵</kbd> run</span><span><kbd className="ui-kbd">esc</kbd> close</span></div>
+    </dialog>
+  );
+}

package/bkstg/v1/react/DatePicker.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+import { Calendar, fromIso } from "./Calendar.jsx";
+
+const CAL = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>;
+
+/**
+ * <DatePicker label="Show date" value={date} onChange={setDate} placeholder="Pick a date" />
+ * A button showing the date; it opens a calendar under it. A choice, Escape or a click outside closes it.
+ */
+export function DatePicker({ value, onChange, placeholder = "Pick a date", label, className }) {
+  const [open, setOpen] = useState(false);
+  const root = useRef(null), btn = useRef(null);
+  useEffect(() => {
+    if (!open) return undefined;
+    const out = (e) => { if (!root.current?.contains(e.target)) setOpen(false); };
+    document.addEventListener("mousedown", out);
+    return () => document.removeEventListener("mousedown", out);
+  }, [open]);
+  const d = fromIso(value);
+  return (
+    <div ref={root} className={cx("ui-datepicker", className)} onKeyDown={(e) => { if (e.key === "Escape" && open) { e.stopPropagation(); setOpen(false); btn.current?.focus(); } }}>
+      <button ref={btn} type="button" className="ui-input ui-datepicker-btn" aria-haspopup="dialog" aria-expanded={open} aria-label={label ? `${label}: ${d ? d.toDateString() : "none"}` : undefined}
+        data-empty={d ? undefined : ""} onClick={() => setOpen((o) => !o)}>
+        {CAL}<span>{d ? d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric", year: "numeric" }) : placeholder}</span>
+      </button>
+      {open ? (
+        <div className="ui-datepicker-pop" role="dialog" aria-label={label || "Choose a date"}>
+          <Calendar value={value} autoFocus onChange={(s) => { onChange?.(s); setOpen(false); btn.current?.focus(); }} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/bkstg/v1/react/DeviceFrame.jsx

@@ -0,0 +1,12 @@
+import { cx } from "./cx.js";
+
+/** <DeviceFrame kind="browser" | "laptop" | "phone" caption="Ticketing, desktop"><img src="…" alt="…" /></DeviceFrame> */
+export function DeviceFrame({ kind = "browser", caption, children, className }) {
+  return (
+    <figure className={cx("ui-device", `ui-device--${kind}`, className)}>
+      {kind === "browser" ? <div className="ui-device-chrome" aria-hidden="true"><i /><i /><i /><span /></div> : null}
+      <div className="ui-device-screen">{children}</div>
+      {caption ? <figcaption>{caption}</figcaption> : null}
+    </figure>
+  );
+}