@bkstg/design-systems 1.0.0

package/bkstg/latest/react/Pagination.jsx

@@ -0,0 +1,32 @@
+import { cx } from "./cx.js";
+
+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>;
+
+/** The page numbers to show: always the first and last, the current one and its neighbors, gaps as null */
+export function pageList(page, count) {
+  const want = new Set([1, count, page - 1, page, page + 1].filter((n) => n >= 1 && n <= count));
+  const out = [];
+  [...want].sort((a, b) => a - b).forEach((n, i, all) => { if (i && n - all[i - 1] > 1) out.push(null); out.push(n); });
+  return out;
+}
+
+/**
+ * <Pagination page={page} count={12} onChange={setPage} />
+ * Previous and Next, then the numbers; in a narrow container the numbers give way to "Page 2 of 12".
+ */
+export function Pagination({ page, count, onChange, label = "Pagination", className }) {
+  const go = (n) => () => onChange?.(n);
+  return (
+    <nav className={cx("ui-pagination", className)} aria-label={label}>
+      <button type="button" className="ui-btn ui-btn--sm" onClick={go(page - 1)} disabled={page <= 1}>{ARROW("m15 18-6-6 6-6")}Previous</button>
+      <ul className="ui-pagination-pages">
+        {pageList(page, count).map((n, i) => (
+          <li key={i}>{n === null ? <span className="ui-page-gap" aria-hidden="true">…</span>
+            : <button type="button" className="ui-page" aria-current={n === page ? "page" : undefined} aria-label={`Page ${n}`} onClick={go(n)}>{n}</button>}</li>
+        ))}
+      </ul>
+      <span className="ui-pagination-info" aria-live="polite">{`Page ${page} of ${count}`}</span>
+      <button type="button" className="ui-btn ui-btn--sm" onClick={go(page + 1)} disabled={page >= count}>Next{ARROW("m9 18 6-6-6-6")}</button>
+    </nav>
+  );
+}

package/bkstg/latest/react/Progress.jsx

@@ -0,0 +1,26 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Progress value={62} label="Uploading" />   0 to 100
+ * <Progress label="Loading" />                 no value: indeterminate
+ * label is required: it is the progress bar's accessible name.
+ */
+export function Progress({ value, label, showValue = true, className }) {
+  const known = typeof value === "number";
+  const v = known ? Math.max(0, Math.min(100, value)) : undefined;
+  return (
+    <div className={className}>
+      {showValue ? <div className="ui-progress-label"><span>{label}</span>{known ? <span>{Math.round(v)}%</span> : null}</div> : null}
+      <div
+        className={cx("ui-progress", !known && "ui-progress--indeterminate")}
+        role="progressbar"
+        aria-label={label}
+        aria-valuemin={known ? 0 : undefined}
+        aria-valuemax={known ? 100 : undefined}
+        aria-valuenow={known ? Math.round(v) : undefined}
+      >
+        <div className="ui-progress-bar" style={known ? { "--value": `${v}%` } : undefined} />
+      </div>
+    </div>
+  );
+}

package/bkstg/latest/react/RadioGroup.jsx

@@ -0,0 +1,27 @@
+import { useId } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <RadioGroup legend="Ticket type" value={type} onChange={setType} options={[
+ *   { value: "ga", label: "General admission", hint: "Both days" }, { value: "vip", label: "VIP" } ]} />
+ * Native radios in a fieldset: the arrow keys move the choice, Tab leaves the group.
+ */
+export function RadioGroup({ legend, name, value, defaultValue, onChange, options, className }) {
+  const auto = useId();
+  const group = name || auto;
+  return (
+    <fieldset className={cx("ui-choices", className)}>
+      {legend ? <legend className="ui-label">{legend}</legend> : null}
+      {options.map((o) => (
+        <label key={o.value} className="ui-check-row">
+          <input
+            type="radio" className="ui-radio" name={group} value={o.value} disabled={o.disabled}
+            {...(value !== undefined ? { checked: value === o.value } : { defaultChecked: defaultValue === o.value })}
+            onChange={(e) => onChange?.(e.target.value, e)}
+          />
+          {o.hint ? <span className="ui-check-text">{o.label}<small>{o.hint}</small></span> : o.label}
+        </label>
+      ))}
+    </fieldset>
+  );
+}

package/bkstg/latest/react/Reveal.jsx

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * <Reveal effect="fade-up" stagger={60}>…</Reveal>  the kit's own engine (motion.js, no library) from React.
+ * Load motion.js once in the app. Props mirror the no-code attributes: effect, trigger ("scroll" | "load" | "hover"),
+ * duration, delay, ease, distance, stagger, split ("words" | "chars" | "lines"), repeat. It follows the visitor's
+ * reduce-motion setting and the system's Motion level. For app-style animation (layout, gestures, exit), use Motion.
+ */
+export function Reveal({ as: As = "div", effect = "fade-up", trigger, duration, delay, ease, distance, stagger, split, repeat, children, ...rest }) {
+  const ref = useRef(null);
+  useEffect(() => { if (ref.current && window.UIMotion) window.UIMotion.init(ref.current.parentElement || document); }, []);
+  return (
+    <As ref={ref} data-reveal={effect} data-reveal-trigger={trigger} data-reveal-duration={duration} data-reveal-delay={delay}
+      data-reveal-ease={ease} data-reveal-distance={distance} data-reveal-stagger={stagger} data-reveal-split={split}
+      data-reveal-repeat={repeat ? "" : undefined} {...rest}>{children}</As>
+  );
+}

package/bkstg/latest/react/SectionHeader.jsx

@@ -0,0 +1,24 @@
+import { cx } from "./cx.js";
+
+/** <SectionHeader title="Team" description="Who can see and change this event." actions={<Button size="sm">Invite</Button>} /> */
+export function SectionHeader({ title, description, actions, as: H = "h2", className }) {
+  return (
+    <div className={cx("ui-sectionhead", className)}>
+      <div className="ui-sectionhead-text">
+        <H className="ui-sectionhead-title">{title}</H>
+        {description ? <p className="ui-sectionhead-desc">{description}</p> : null}
+      </div>
+      {actions ? <div className="ui-sectionhead-actions">{actions}</div> : null}
+    </div>
+  );
+}
+
+/** <SectionFooter note="Last saved 2 minutes ago" actions={<><Button>Cancel</Button><Button variant="primary">Save</Button></>} /> */
+export function SectionFooter({ note, actions, className }) {
+  return (
+    <div className={cx("ui-sectionfoot", className)}>
+      {note ? <p className="ui-sectionfoot-note">{note}</p> : null}
+      {actions ? <div className="ui-sectionfoot-actions">{actions}</div> : null}
+    </div>
+  );
+}

package/bkstg/latest/react/Select.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Select value={v} onChange={...} options={[{ value: "a", label: "A" }]} />
+ * A native <select>: the phone's own picker, full keyboard support, works in forms.
+ */
+export const Select = forwardRef(function Select({ options = [], className, children, ...rest }, ref) {
+  return (
+    <span className={cx("ui-select", className)}>
+      <select ref={ref} className="ui-input" {...rest}>
+        {options.map((o) => (
+          <option key={o.value} value={o.value} disabled={o.disabled}>{o.label}</option>
+        ))}
+        {children}
+      </select>
+    </span>
+  );
+});

package/bkstg/latest/react/Sheet.jsx

@@ -0,0 +1,25 @@
+import { useEffect, useId, useRef } from "react";
+import { cx } from "./cx.js";
+
+const X = <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>;
+
+/**
+ * <Sheet open={open} onClose={() => setOpen(false)} title="Set details" footer={<Button onClick={save}>Save</Button>}>…</Sheet>
+ * A slide-out panel on the right: a modal dialog, so focus stays inside; Escape and the backdrop close it.
+ */
+export function Sheet({ open, onClose, title, children, footer, className }) {
+  const ref = useRef(null), id = useId();
+  useEffect(() => {
+    const d = ref.current; if (!d) return;
+    if (open && !d.open) d.showModal();
+    if (!open && d.open) d.close();
+  }, [open]);
+  return (
+    <dialog ref={ref} className={cx("ui-sheet", className)} aria-labelledby={`${id}-t`} onClose={onClose} onClick={(e) => { if (e.target === ref.current) onClose?.(); }}>
+      <div className="ui-sheet-head"><h2 className="ui-sheet-title" id={`${id}-t`}>{title}</h2>
+        <button type="button" className="ui-dialog-close" aria-label="Close" onClick={onClose}>{X}</button></div>
+      <div className="ui-sheet-body">{children}</div>
+      {footer ? <div className="ui-sheet-foot">{footer}</div> : null}
+    </dialog>
+  );
+}

package/bkstg/latest/react/SideNav.jsx

@@ -0,0 +1,37 @@
+import { cx } from "./cx.js";
+
+/**
+ * <SideNav label="Main" brand={<Logo />} items={[{ href: "/", label: "Overview", icon: <HomeIcon />, current: true, count: 8 }]}
+ *          footer={[...]} user={{ name: "Sean Marshall", email: "…" }} />
+ * The current page gets aria-current="page". Icons are decoration (aria-hidden); the label names the link.
+ */
+export function SideNav({ label = "Main", brand, items = [], footer = [], user, children, className }) {
+  const list = (links) => (
+    <ul className="ui-sidenav-list">
+      {links.map((it) => (
+        <li key={it.href + it.label}>
+          <a className="ui-sidenav-link" href={it.href} aria-current={it.current ? "page" : undefined}>
+            {it.icon ? <span aria-hidden="true">{it.icon}</span> : null}
+            {it.label}
+            {it.count != null ? <span className="ui-badge">{it.count}</span> : null}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+  return (
+    <nav className={cx("ui-sidenav", className)} aria-label={label}>
+      {brand ? <div className="ui-sidenav-brand">{brand}</div> : null}
+      {list(items)}
+      <div className="ui-sidenav-spacer" />
+      {footer.length ? list(footer) : null}
+      {children}
+      {user ? (
+        <div className="ui-sidenav-user">
+          <span className="ui-avatar ui-avatar--sm" aria-hidden="true">{user.name.split(" ").map((w) => w[0]).join("").slice(0, 2)}</span>
+          <span><strong>{user.name}</strong>{user.email ? <small>{user.email}</small> : null}</span>
+        </div>
+      ) : null}
+    </nav>
+  );
+}

package/bkstg/latest/react/Skeleton.jsx

@@ -0,0 +1,16 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Skeleton width="60%" height="1rem" />  <Skeleton circle width={40} height={40} />
+ * A placeholder while content loads. Hidden from screen readers: announce loading elsewhere (a Spinner,
+ * or aria-busy on the region). Carries .ambient so the Calm motion level stops the shimmer.
+ */
+export function Skeleton({ width, height, circle = false, className, style }) {
+  return (
+    <span
+      className={cx("ui-skeleton", circle && "ui-skeleton--circle", "ambient", className)}
+      aria-hidden="true"
+      style={{ width, height, ...style }}
+    />
+  );
+}

package/bkstg/latest/react/Slider.jsx

@@ -0,0 +1,27 @@
+import { useId, useState } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Slider label="Capacity" min={0} max={5000} step={100} value={cap} onChange={setCap} format={(v) => `${v} people`} />
+ * A native range input: arrow keys, Page Up/Down, Home and End all work. The value is shown beside the label
+ * and spoken through aria-valuetext when format is given.
+ */
+export function Slider({ label, min = 0, max = 100, step = 1, value, defaultValue, onChange, format, scale, className, ...rest }) {
+  const id = useId();
+  const [own, setOwn] = useState(defaultValue ?? min);
+  const v = value ?? own;
+  const pct = ((v - min) / (max - min || 1)) * 100;
+  const text = format ? format(v) : Number(v).toLocaleString();
+  return (
+    <div className={className}>
+      {label ? <div className="ui-slider-head"><label className="ui-label" htmlFor={id}>{label}</label><output htmlFor={id}>{text}</output></div> : null}
+      <input
+        id={id} type="range" className="ui-slider" min={min} max={max} step={step} value={v}
+        aria-valuetext={format ? text : undefined} style={{ "--value": `${pct}%` }}
+        onChange={(e) => { const n = Number(e.target.value); setOwn(n); onChange?.(n, e); }}
+        {...rest}
+      />
+      {scale ? <div className="ui-slider-scale" aria-hidden="true">{scale.map((s) => <span key={s}>{s}</span>)}</div> : null}
+    </div>
+  );
+}

package/bkstg/latest/react/Spinner.jsx

@@ -0,0 +1,14 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Spinner label="Loading results" size="sm" />
+ * role="status" so a screen reader announces the label; the ring itself is decoration.
+ */
+export function Spinner({ label = "Loading", size = "md", className }) {
+  return (
+    <span role="status" className={className}>
+      <span className={cx("ui-spinner", size !== "md" && `ui-spinner--${size}`)} aria-hidden="true" />
+      <span className="ui-sr-only">{label}</span>
+    </span>
+  );
+}

package/bkstg/latest/react/Steps.jsx

@@ -0,0 +1,22 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Steps current={1} steps={[{ label: "Details", desc: "Name and dates" }, { label: "Stages" }, { label: "Publish" }]} />
+ * Steps before current are complete, current is marked aria-current="step". vertical stacks them.
+ */
+export function Steps({ steps, current = 0, vertical = false, label = "Progress", className }) {
+  return (
+    <ol className={cx("ui-steps", vertical && "ui-steps--vertical", className)} aria-label={label}>
+      {steps.map((s, i) => {
+        const state = i < current ? "complete" : i === current ? "current" : "upcoming";
+        return (
+          <li key={i} className="ui-step" data-state={state} aria-current={state === "current" ? "step" : undefined}>
+            <span className="ui-step-marker" aria-hidden="true" />
+            <span className="ui-step-label">{s.label}{state === "complete" ? <span className="ui-sr-only"> (done)</span> : null}</span>
+            {s.desc ? <span className="ui-step-desc">{s.desc}</span> : null}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/bkstg/latest/react/Switch.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Switch checked={on} onChange={(e) => setOn(e.target.checked)}>Notifications</Switch>
+ * A real checkbox with role="switch": Space toggles it, forms submit it.
+ */
+export const Switch = forwardRef(function Switch({ children, className, ...rest }, ref) {
+  const input = <input ref={ref} type="checkbox" role="switch" className={cx("ui-switch", className)} {...rest} />;
+  return children ? <label className="ui-switch-row">{input}{children}</label> : input;
+});

package/bkstg/latest/react/Table.jsx

@@ -0,0 +1,24 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Table caption="Upcoming set times" columns={[{ key: "artist", label: "Artist", strong: true }, { key: "time", label: "Time", numeric: true }]} rows={rows} />
+ * A real <table> with a caption and column headers, in a wrapper that scrolls sideways on narrow screens.
+ * A cell can be a string or a React node (a Badge, for example). rows need an id.
+ */
+export function Table({ caption, columns = [], rows = [], className }) {
+  return (
+    <div className={cx("ui-table-wrap", className)}>
+      <table className="ui-table">
+        {caption ? <caption>{caption}</caption> : null}
+        <thead><tr>{columns.map((c) => <th key={c.key} scope="col" className={c.numeric ? "ui-num" : undefined}>{c.label}</th>)}</tr></thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.id}>
+              {columns.map((c) => <td key={c.key} className={cx(c.strong && "ui-table-strong", c.numeric && "ui-num") || undefined}>{r[c.key]}</td>)}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/bkstg/latest/react/Tabs.jsx

@@ -0,0 +1,80 @@
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Tabs label="Settings" tabs={[{ id: "a", label: "Account", content: <p>…</p> }]} />
+ * variant: "underline" (default) | "pill". Controlled with value + onChange, or uncontrolled.
+ * Arrows, Home and End move between tabs; the indicator slides to the selected one.
+ */
+export function Tabs({ tabs, label, variant = "underline", value, defaultValue, onChange, className }) {
+  const base = useId();
+  const [inner, setInner] = useState(defaultValue ?? tabs.find((t) => !t.disabled)?.id);
+  const current = value ?? inner;
+  const refs = useRef({});
+  const indicator = useRef(null);
+  const listRef = useRef(null);
+
+  function choose(id, focus) {
+    if (value === undefined) setInner(id);
+    onChange?.(id);
+    if (focus) refs.current[id]?.focus();
+  }
+  function onKey(e, id) {
+    const on = tabs.filter((t) => !t.disabled);
+    const i = on.findIndex((t) => t.id === id);
+    const next = { ArrowRight: on[(i + 1) % on.length], ArrowLeft: on[(i - 1 + on.length) % on.length], Home: on[0], End: on[on.length - 1] }[e.key];
+    if (next) { e.preventDefault(); choose(next.id, true); }
+  }
+  useLayoutEffect(() => {
+    function move() {
+      const t = refs.current[current];
+      if (!t || !indicator.current) return;
+      indicator.current.style.setProperty("--x", `${t.offsetLeft}px`);
+      indicator.current.style.setProperty("--w", `${t.offsetWidth}px`);
+    }
+    move();
+    if (typeof ResizeObserver === "undefined" || !listRef.current) return undefined;
+    const ro = new ResizeObserver(move);
+    ro.observe(listRef.current);
+    return () => ro.disconnect();
+  }, [current, tabs]);
+
+  return (
+    <div className={cx("ui-tabs", variant === "pill" && "ui-tabs--pill", className)}>
+      <div className="ui-tablist" role="tablist" aria-label={label} ref={listRef}>
+        {tabs.map((t) => (
+          <button
+            key={t.id}
+            ref={(el) => { refs.current[t.id] = el; }}
+            type="button"
+            role="tab"
+            id={`${base}-tab-${t.id}`}
+            className="ui-tab"
+            aria-selected={t.id === current}
+            aria-controls={`${base}-panel-${t.id}`}
+            tabIndex={t.id === current ? 0 : -1}
+            disabled={t.disabled}
+            onClick={() => choose(t.id, false)}
+            onKeyDown={(e) => onKey(e, t.id)}
+          >
+            {t.label}
+          </button>
+        ))}
+        <span className="ui-tab-indicator" aria-hidden="true" ref={indicator} />
+      </div>
+      {tabs.map((t) => (
+        <div
+          key={t.id}
+          className="ui-tabpanel"
+          role="tabpanel"
+          id={`${base}-panel-${t.id}`}
+          aria-labelledby={`${base}-tab-${t.id}`}
+          tabIndex={0}
+          hidden={t.id !== current}
+        >
+          {t.content}
+        </div>
+      ))}
+    </div>
+  );
+}

package/bkstg/latest/react/Tag.jsx

@@ -0,0 +1,34 @@
+import { useRef } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <TagList label="Genres">{genres.map(g => <Tag key={g} onRemove={() => drop(g)}>{g}</Tag>)}</TagList>
+ * With onRemove, a tag shows a remove button labelled "Remove <text>". After a removal, focus moves to the
+ * next remove button, or the previous one, or the list, so a keyboard user is never dropped.
+ */
+export function TagList({ label, className, children }) {
+  return <div className={cx("ui-tags", className)} role="group" aria-label={label} tabIndex={-1}>{children}</div>;
+}
+
+export function Tag({ children, onRemove, removeLabel, className, ...rest }) {
+  const ref = useRef(null);
+  function remove() {
+    const list = ref.current?.parentElement;
+    const all = list ? [...list.querySelectorAll(".ui-tag-remove")] : [];
+    const i = all.indexOf(ref.current?.querySelector(".ui-tag-remove"));
+    const next = all[i + 1] || all[i - 1] || list;
+    onRemove();
+    // after React removes this tag
+    requestAnimationFrame(() => next?.isConnected ? next.focus() : list?.focus());
+  }
+  return (
+    <span ref={ref} className={cx("ui-tag", className)} {...rest}>
+      {children}
+      {onRemove ? (
+        <button type="button" className="ui-tag-remove" aria-label={removeLabel || `Remove ${typeof children === "string" ? children : "tag"}`} onClick={remove}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+        </button>
+      ) : null}
+    </span>
+  );
+}

package/bkstg/latest/react/Tooltip.jsx

@@ -0,0 +1,25 @@
+import { cloneElement, useId, useState } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Tooltip text="Copy link"><button aria-label="Copy">…</button></Tooltip>
+ * Shows on hover and keyboard focus, after --tooltip-delay. Escape hides it until the pointer or focus leaves.
+ * side: "top" (default) | "bottom". The child must be focusable.
+ */
+export function Tooltip({ text, side = "top", children, className }) {
+  const id = useId();
+  const [dismissed, setDismissed] = useState(false);
+  const child = cloneElement(children, { "aria-describedby": id });
+  return (
+    <span
+      className={cx("ui-tooltip-wrap", dismissed && "is-dismissed", className)}
+      data-side={side === "bottom" ? "bottom" : undefined}
+      onKeyDown={(e) => { if (e.key === "Escape") setDismissed(true); }}
+      onMouseLeave={() => setDismissed(false)}
+      onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setDismissed(false); }}
+    >
+      {child}
+      <span role="tooltip" id={id} className="ui-tooltip">{text}</span>
+    </span>
+  );
+}

package/bkstg/latest/react/Tree.jsx

@@ -0,0 +1,41 @@
+import { useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Tree label="Files" items={[{ id: "a", label: "Artwork", icon, children: [{ id: "a1", label: "Poster.pdf" }] }]} selected={id} onSelect={setId} />
+ * Up and Down move, Right opens or steps in, Left closes or steps out, Home and End, Enter selects. One tab stop.
+ */
+export function Tree({ label, items, selected, onSelect, defaultOpen = [], className }) {
+  const [open, setOpen] = useState(() => new Set(defaultOpen));
+  const [focus, setFocus] = useState(selected || items[0]?.id);
+  const root = useRef(null);
+  const visible = [];
+  const walk = (list, parent) => list.forEach((it) => { visible.push({ it, parent }); if (it.children && open.has(it.id)) walk(it.children, it.id); });
+  walk(items, null);
+  const go = (id) => { setFocus(id); requestAnimationFrame(() => root.current?.querySelector(`[data-id="${id}"]`)?.focus()); };
+  const toggle = (id, on) => setOpen((s) => { const n = new Set(s); (on ?? !n.has(id)) ? n.add(id) : n.delete(id); return n; });
+  function onKey(e) {
+    const i = visible.findIndex((v) => v.it.id === focus), cur = visible[i]; if (!cur) return;
+    const has = !!cur.it.children, isOpen = open.has(cur.it.id);
+    const k = e.key;
+    if (k === "ArrowDown" && visible[i + 1]) go(visible[i + 1].it.id);
+    else if (k === "ArrowUp" && visible[i - 1]) go(visible[i - 1].it.id);
+    else if (k === "Home") go(visible[0].it.id);
+    else if (k === "End") go(visible[visible.length - 1].it.id);
+    else if (k === "ArrowRight" && has) { if (!isOpen) toggle(cur.it.id, true); else go(cur.it.children[0].id); }
+    else if (k === "ArrowLeft") { if (has && isOpen) toggle(cur.it.id, false); else if (cur.parent) go(cur.parent); }
+    else if (k === "Enter" || k === " ") { onSelect?.(cur.it.id); if (has) toggle(cur.it.id); }
+    else return;
+    e.preventDefault();
+  }
+  const render = (list, level) => list.map((it) => (
+    <li key={it.id} data-id={it.id} role="treeitem" aria-level={level} aria-selected={it.id === selected} aria-expanded={it.children ? open.has(it.id) : undefined}
+      tabIndex={it.id === focus ? 0 : -1}>
+      <div className="ui-tree-row" onClick={() => { setFocus(it.id); onSelect?.(it.id); if (it.children) toggle(it.id); }}>
+        {it.children ? <span className="ui-tree-caret" aria-hidden="true" /> : <span className="ui-tree-leaf" aria-hidden="true" />}{it.icon}{it.label}
+      </div>
+      {it.children ? <ul role="group">{render(it.children, level + 1)}</ul> : null}
+    </li>
+  ));
+  return <ul ref={root} className={cx("ui-tree", className)} role="tree" aria-label={label} onKeyDown={onKey}>{render(items, 1)}</ul>;
+}

package/bkstg/latest/react/VideoPlayer.jsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const PLAY = <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 4.5v15a1 1 0 0 0 1.5.86l12.5-7.5a1 1 0 0 0 0-1.72L8.5 3.64A1 1 0 0 0 7 4.5Z" /></svg>;
+const PAUSE = <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16" rx="1" /><rect x="14" y="4" width="4" height="16" rx="1" /></svg>;
+const o = { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+const SOUND = <svg viewBox="0 0 24 24" {...o} aria-hidden="true"><path d="M11 5 6 9H2v6h4l5 4V5Z" /><path d="M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14" /></svg>;
+const MUTED = <svg viewBox="0 0 24 24" {...o} aria-hidden="true"><path d="M11 5 6 9H2v6h4l5 4V5Z" /><path d="m22 9-6 6M16 9l6 6" /></svg>;
+const FULL = <svg viewBox="0 0 24 24" {...o} aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3" /></svg>;
+const clock = (s) => { s = Math.max(0, Math.floor(s || 0)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
+
+/**
+ * <VideoPlayer label="Day 1 recap" sources={[{ src: "/recap.mp4", type: "video/mp4" }]} poster="/recap.jpg"
+ *   captions={{ src: "/recap.vtt", lang: "en" }} />
+ * A native <video> with the kit's controls: play and pause, seek, mute, full screen; k or Space plays and pauses.
+ * A video with speech needs captions (WCAG 1.2.2): pass a WebVTT file.
+ */
+export function VideoPlayer({ label, sources, poster, captions, muted = false, className }) {
+  const root = useRef(null), v = useRef(null), idle = useRef(null);
+  const [s, setS] = useState({ playing: false, muted, t: 0, d: 0, idle: false });
+  const paint = () => { const el = v.current; if (el) setS((p) => ({ ...p, playing: !el.paused, muted: el.muted, t: el.currentTime, d: el.duration || 0 })); };
+  useEffect(() => {
+    const el = v.current;
+    const evs = ["play", "pause", "timeupdate", "loadedmetadata", "volumechange", "ended"];
+    evs.forEach((n) => el.addEventListener(n, paint));
+    return () => { evs.forEach((n) => el.removeEventListener(n, paint)); clearTimeout(idle.current); };
+  }, []);
+  const toggle = () => { const el = v.current; if (el.paused) el.play(); else el.pause(); };
+  const wake = () => { setS((p) => ({ ...p, idle: false })); clearTimeout(idle.current); idle.current = setTimeout(() => setS((p) => ({ ...p, idle: true })), 2000); };
+  const pct = s.d ? (s.t / s.d) * 100 : 0;
+
+  return (
+    <div
+      ref={root} className={cx("ui-video", className)} role="group" aria-label={label}
+      data-playing={s.playing ? "" : undefined} data-idle={s.idle ? "" : undefined}
+      onPointerMove={wake} onFocus={wake}
+      onKeyDown={(e) => { if (e.target.closest("button, input")) return; if (e.key === " " || e.key === "k") { e.preventDefault(); toggle(); } }}
+    >
+      <video ref={v} poster={poster} muted={muted} playsInline preload="metadata" onClick={toggle} tabIndex={-1}>
+        {sources.map((x) => <source key={x.src} src={x.src} type={x.type} />)}
+        {captions ? <track kind="captions" src={captions.src} srcLang={captions.lang || "en"} label={captions.label || "English"} default /> : null}
+      </video>
+      <button type="button" className="ui-video-big" aria-label="Play" tabIndex={s.playing ? -1 : 0} onClick={toggle}>{PLAY}</button>
+      <div className="ui-video-bar">
+        <button type="button" className="ui-video-btn" aria-label={s.playing ? "Pause" : "Play"} onClick={toggle}>{s.playing ? PAUSE : PLAY}</button>
+        <input
+          type="range" className="ui-slider" aria-label="Seek" min={0} max={Math.round(s.d * 10) || 0} value={Math.round(s.t * 10)}
+          aria-valuetext={`${clock(s.t)} of ${clock(s.d)}`} style={{ "--value": `${pct}%` }}
+          onChange={(e) => { v.current.currentTime = e.target.value / 10; }}
+        />
+        <span className="ui-video-time">{clock(s.t)} / {clock(s.d)}</span>
+        <button type="button" className="ui-video-btn" aria-label={s.muted ? "Unmute" : "Mute"} onClick={() => { v.current.muted = !v.current.muted; }}>{s.muted ? MUTED : SOUND}</button>
+        <button type="button" className="ui-video-btn" aria-label="Full screen" onClick={() => (document.fullscreenElement ? document.exitFullscreen() : root.current.requestFullscreen?.())}>{FULL}</button>
+      </div>
+    </div>
+  );
+}

package/bkstg/latest/react/cx.js

@@ -0,0 +1,4 @@
+// Join class names, skipping empty ones.
+export function cx(...names) {
+  return names.filter(Boolean).join(" ");
+}