@bkstg/design-systems 1.0.0

package/bkstg/v1/react/Dialog.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useId, useRef } from "react";
+
+/**
+ * <Dialog open={open} onClose={() => setOpen(false)} title="Delete file?" description="…" footer={…}>…</Dialog>
+ * A native <dialog> opened as a modal: the page behind is inert, Escape closes it, focus returns
+ * to what opened it, and a click on the backdrop closes it.
+ */
+export function Dialog({ open, onClose, title, description, footer, children, closeLabel = "Close" }) {
+  const ref = useRef(null);
+  const opener = useRef(null);
+  const titleId = useId();
+  const descId = useId();
+
+  useEffect(() => {
+    const d = ref.current;
+    if (!d) return;
+    if (open && !d.open) { opener.current = document.activeElement; d.showModal(); }
+    if (!open && d.open) d.close();
+  }, [open]);
+
+  return (
+    <dialog
+      ref={ref}
+      className="ui-dialog"
+      aria-labelledby={titleId}
+      aria-describedby={description ? descId : undefined}
+      onClose={() => { onClose?.(); opener.current?.focus?.(); }}
+      onClick={(e) => { if (e.target === ref.current) ref.current.close(); }}
+    >
+      <div className="ui-dialog-head">
+        <div style={{ flex: 1 }}>
+          <h2 className="ui-dialog-title" id={titleId}>{title}</h2>
+          {description ? <p className="ui-dialog-desc" id={descId}>{description}</p> : null}
+        </div>
+        <button type="button" className="ui-dialog-close" aria-label={closeLabel} onClick={() => ref.current?.close()}>
+          <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>
+      </div>
+      {children ? <div className="ui-dialog-body">{children}</div> : null}
+      {footer ? <div className="ui-dialog-foot">{footer}</div> : null}
+    </dialog>
+  );
+}

package/bkstg/v1/react/Divider.jsx

@@ -0,0 +1,10 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Divider />  a plain rule
+ * <Divider>or</Divider>  a rule with a word or a button in the middle; align="start" puts it near the left
+ */
+export function Divider({ children, align, className }) {
+  if (!children) return <hr className={cx("ui-divider", className)} />;
+  return <div className={cx("ui-divider", align === "start" && "ui-divider--start", className)} role="separator">{children}</div>;
+}

package/bkstg/v1/react/Editor.jsx

@@ -0,0 +1,85 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const i = (d) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{d}</svg>;
+export const EDITOR_TOOLS = [
+  { cmd: "bold", label: "Bold", icon: i(<path d="M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z" />) },
+  { cmd: "italic", label: "Italic", icon: i(<path d="M19 4h-9M14 20H5M15 4 9 20" />) },
+  { cmd: "underline", label: "Underline", icon: i(<path d="M6 4v6a6 6 0 0 0 12 0V4M4 20h16" />) },
+  { sep: true },
+  { cmd: "insertUnorderedList", label: "Bulleted list", icon: i(<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />) },
+  { cmd: "insertOrderedList", label: "Numbered list", icon: i(<path d="M10 6h11M10 12h11M10 18h11M4 6h1v4M4 10h2M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" />) },
+  { cmd: "formatBlock", label: "Quote", icon: i(<path d="M3 21c3 0 7-1 7-8V5H3v7h4c0 3-1 5-4 5zM14 21c3 0 7-1 7-8V5h-7v7h4c0 3-1 5-4 5z" />) },
+  { sep: true },
+  { cmd: "removeFormat", label: "Clear formatting", press: false, icon: i(<path d="M4 7V4h16v3M5 20h6M13 4 8 20M15 15l5 5M20 15l-5 5" />) }
+];
+
+/**
+ * <Editor label="Announcement" defaultValue="<p>Doors at noon.</p>" onChange={(html) => setDraft(html)} />
+ * A toolbar over an editable area, using the browser's editing commands, so ⌘B, ⌘I, ⌘U and undo work.
+ * The HTML it hands back is whatever the browser produced: clean it on the server before you store or show it.
+ */
+export function Editor({ label, defaultValue = "", placeholder = "Write something…", onChange, className }) {
+  const id = useId();
+  const area = useRef(null), bar = useRef(null);
+  const [on, setOn] = useState({});
+  const [words, setWords] = useState(0);
+  const [focus, setFocus] = useState(0);
+
+  function sync() {
+    const next = {};
+    for (const t of EDITOR_TOOLS) if (t.cmd && t.press !== false) {
+      try { next[t.cmd] = t.cmd === "formatBlock" ? /blockquote/i.test(document.queryCommandValue("formatBlock")) : document.queryCommandState(t.cmd); } catch { next[t.cmd] = false; }
+    }
+    setOn(next);
+    setWords((area.current?.textContent.trim().split(/\s+/).filter(Boolean) || []).length);
+  }
+  useEffect(() => {
+    if (area.current) area.current.innerHTML = defaultValue;
+    sync();
+    const sel = () => { if (area.current?.contains(document.getSelection()?.anchorNode)) sync(); };
+    document.addEventListener("selectionchange", sel);
+    return () => document.removeEventListener("selectionchange", sel);
+  }, []);
+
+  function run(t) {
+    area.current?.focus();
+    if (t.cmd === "formatBlock") document.execCommand("formatBlock", false, on.formatBlock ? "p" : "blockquote");
+    else document.execCommand(t.cmd, false, null);
+    sync(); onChange?.(area.current.innerHTML);
+  }
+  const tools = EDITOR_TOOLS.filter((t) => !t.sep);
+  function onBarKey(e) {
+    const n = tools.length;
+    const to = e.key === "ArrowRight" ? (focus + 1) % n : e.key === "ArrowLeft" ? (focus - 1 + n) % n : e.key === "Home" ? 0 : e.key === "End" ? n - 1 : null;
+    if (to === null) return;
+    e.preventDefault(); setFocus(to);
+    bar.current?.querySelectorAll(".ui-editor-tool")[to]?.focus();
+  }
+
+  let k = -1;
+  return (
+    <div className={cx("ui-editor", className)}>
+      <div ref={bar} className="ui-editor-toolbar" role="toolbar" aria-label={`${label} formatting`} aria-controls={id} onKeyDown={onBarKey}>
+        {EDITOR_TOOLS.map((t, n) => {
+          if (t.sep) return <span key={n} className="ui-editor-sep" aria-hidden="true" />;
+          k += 1;
+          const me = k;
+          return (
+            <button
+              key={n} type="button" className="ui-editor-tool" aria-label={t.label} tabIndex={me === focus ? 0 : -1}
+              aria-pressed={t.press === false ? undefined : !!on[t.cmd]}
+              onMouseDown={(e) => e.preventDefault()} onClick={() => { setFocus(me); run(t); }}
+            >{t.icon}</button>
+          );
+        })}
+      </div>
+      <div
+        ref={area} id={id} className="ui-editor-area" contentEditable role="textbox" aria-multiline="true" aria-label={label}
+        data-placeholder={placeholder} suppressContentEditableWarning
+        onInput={() => { sync(); onChange?.(area.current.innerHTML); }}
+      />
+      <div className="ui-editor-foot"><span>{words} {words === 1 ? "word" : "words"}</span></div>
+    </div>
+  );
+}

package/bkstg/v1/react/EmptyState.jsx

@@ -0,0 +1,13 @@
+import { cx } from "./cx.js";
+
+/** <EmptyState icon={<SearchIcon />} title="No sets match" text="Try another stage or clear the search." actions={<Button>Clear search</Button>} /> */
+export function EmptyState({ icon, title, text, actions, as: H = "h3", className }) {
+  return (
+    <div className={cx("ui-empty", className)}>
+      {icon ? <span className="ui-empty-icon" aria-hidden="true">{icon}</span> : null}
+      <H className="ui-empty-title">{title}</H>
+      {text ? <p className="ui-empty-text">{text}</p> : null}
+      {actions ? <div className="ui-empty-actions">{actions}</div> : null}
+    </div>
+  );
+}

package/bkstg/v1/react/Field.jsx

@@ -0,0 +1,32 @@
+import { forwardRef, useId } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Field label="Email" hint="We never share it." error={err}> wraps any one control,
+ * wiring the label, the hint and the error to it for screen readers.
+ * <Input /> and <Textarea /> are the bare controls.
+ */
+export function Field({ label, hint, error, children, className }) {
+  const id = useId();
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorId = error ? `${id}-error` : undefined;
+  const control = typeof children === "function"
+    ? children({ id, "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || undefined, "aria-invalid": error ? true : undefined })
+    : children;
+  return (
+    <div className={cx("ui-field", className)}>
+      {label ? <label className="ui-label" htmlFor={id}>{label}</label> : null}
+      {control}
+      {hint ? <span className="ui-hint" id={hintId}>{hint}</span> : null}
+      {error ? <span className="ui-error" id={errorId}>{error}</span> : null}
+    </div>
+  );
+}
+
+export const Input = forwardRef(function Input({ className, ...rest }, ref) {
+  return <input ref={ref} className={cx("ui-input", className)} {...rest} />;
+});
+
+export const Textarea = forwardRef(function Textarea({ className, ...rest }, ref) {
+  return <textarea ref={ref} className={cx("ui-input", className)} {...rest} />;
+});

package/bkstg/v1/react/FileUpload.jsx

@@ -0,0 +1,38 @@
+import { useId, useState } from "react";
+import { cx } from "./cx.js";
+
+const UP = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" /></svg>;
+const FILE = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>;
+const X = <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>;
+const size = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
+
+/**
+ * <FileUpload hint="PDF or images, up to 10 MB" accept=".pdf,image/*" files={files} onChange={setFiles} />
+ * A drop zone that is also a file button (keyboard and screen readers get the real input), and the chosen files.
+ * It only collects files: uploading them is the app's job.
+ */
+export function FileUpload({ files = [], onChange, accept, multiple = true, hint, className }) {
+  const id = useId();
+  const [drag, setDrag] = useState(false);
+  const add = (list) => onChange?.([...files, ...Array.from(list)]);
+  return (
+    <div className={className}>
+      <label className={cx("ui-dropzone", drag && "is-drag")} htmlFor={id}
+        onDragOver={(e) => { e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)}
+        onDrop={(e) => { e.preventDefault(); setDrag(false); add(e.dataTransfer.files); }}>
+        <span className="ui-dropzone-icon">{UP}</span>
+        <span><strong>Click to upload</strong> or drag and drop</span>
+        {hint ? <small>{hint}</small> : null}
+        <input id={id} type="file" accept={accept} multiple={multiple} onChange={(e) => { add(e.target.files); e.target.value = ""; }} />
+      </label>
+      {files.length ? (
+        <ul className="ui-files" aria-label="Chosen files">
+          {files.map((f, i) => (
+            <li key={`${f.name}-${i}`} className="ui-file">{FILE}<span className="ui-file-name">{f.name}</span><span className="ui-file-size">{size(f.size)}</span>
+              <button type="button" className="ui-tag-remove" aria-label={`Remove ${f.name}`} onClick={() => onChange?.(files.filter((_, j) => j !== i))}>{X}</button></li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/bkstg/v1/react/Filters.jsx

@@ -0,0 +1,19 @@
+import { cx } from "./cx.js";
+
+/** <Chip pressed={on} onClick={toggle}>Main</Chip>  a toggle that shows its state with aria-pressed */
+export function Chip({ pressed = false, children, className, ...rest }) {
+  return <button type="button" className={cx("ui-chip", className)} aria-pressed={pressed} {...rest}>{children}</button>;
+}
+
+/**
+ * <FilterBar label="Filter sets" search={<Input type="search" ... />} chips={<>…Chips…</>} active={<TagList>…</TagList>} />
+ * A labelled group: search and chips on one row, the active filters (removable tags) under it.
+ */
+export function FilterBar({ label, search, chips, active, className }) {
+  return (
+    <div className={cx("ui-filters", className)} role="group" aria-label={label}>
+      <div className="ui-filters-row">{search}{chips}</div>
+      {active}
+    </div>
+  );
+}

package/bkstg/v1/react/Infographics.jsx

@@ -0,0 +1,54 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Compare label="Tickets sold, this year against last" items={[{ label: "This year", value: 18880 }, { label: "Last year", value: 16740 }]} />
+ * The first item is the one that matters; the bars share one scale; the difference is written out.
+ * format(n) turns a number into text (default: 18,880).
+ */
+export function Compare({ label, items, format = n => Number(n).toLocaleString("en-US"), className }) {
+  const max = Math.max(...items.map(i => i.value), 1), [a, b] = items;
+  const diff = b ? a.value - b.value : 0, pct = b && b.value ? Math.round(Math.abs(diff) / b.value * 1000) / 10 : 0;
+  return (
+    <div className={cx("ui-compare", className)} role="group" aria-label={label}>
+      {items.map(it => (
+        <div className="ui-compare-row" key={it.label}>
+          <span className="ui-compare-label">{it.label}</span>
+          <span className="ui-compare-bar" aria-hidden="true"><span style={{ "--value": `${Math.round(it.value / max * 100)}%` }} /></span>
+          <strong className="ui-compare-value">{format(it.value)}</strong>
+        </div>
+      ))}
+      {b ? <p className="ui-compare-diff">{diff === 0 ? `The same as ${b.label.toLowerCase()}` : `${format(Math.abs(diff))} (${pct}%) ${diff > 0 ? "more" : "less"} than ${b.label.toLowerCase()}`}</p> : null}
+    </div>
+  );
+}
+
+const STATE_WORD = { done: "Done", current: "In progress", upcoming: "Upcoming" };
+/**
+ * <Timeline label="Campaign" items={[{ title: "Kickoff", text: "Direction agreed", time: "Jan 14", state: "done" }]} />
+ * state: done | current | upcoming. The state is written, not only shown by the dot.
+ */
+export function Timeline({ label, items, className }) {
+  return (
+    <ol className={cx("ui-timeline", className)} aria-label={label}>
+      {items.map(it => (
+        <li className="ui-timeline-item" data-state={it.state || "upcoming"} key={it.title} aria-current={it.state === "current" ? "step" : undefined}>
+          <span className="ui-timeline-dot" aria-hidden="true" />
+          <div>
+            <p className="ui-timeline-title">{it.title}<span className={cx("ui-badge", it.state === "done" ? "ui-badge--ok" : it.state === "current" ? "ui-badge--brand" : "ui-badge--outline")}>{STATE_WORD[it.state || "upcoming"]}</span></p>
+            {it.text ? <p className="ui-timeline-text">{it.text}</p> : null}
+            {it.time ? <span className="ui-timeline-time">{it.time}</span> : null}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+/** <StatGrid label="This week" items={[{ label: "Active projects", value: "9", note: "+2 since Monday" }]} /> */
+export function StatGrid({ label, items, className }) {
+  return (
+    <dl className={cx("ui-statgrid", className)} aria-label={label}>
+      {items.map(it => <div key={it.label}><dt>{it.label}</dt><dd>{it.value}</dd>{it.note ? <small>{it.note}</small> : null}</div>)}
+    </dl>
+  );
+}

package/bkstg/v1/react/InlineCTA.jsx

@@ -0,0 +1,14 @@
+import { cx } from "./cx.js";
+
+/** <InlineCTA title="Invite your crew" body="Everyone gets the run of show on their phone." actions={<Button variant="primary">Invite</Button>} tone="fill" /> */
+export function InlineCTA({ title, body, actions, tone, as: H = "h3", className }) {
+  return (
+    <section className={cx("ui-cta", tone === "fill" && "ui-cta--fill", className)}>
+      <div className="ui-cta-text">
+        <H className="ui-cta-title">{title}</H>
+        {body ? <p className="ui-cta-body">{body}</p> : null}
+      </div>
+      {actions ? <div className="ui-cta-actions">{actions}</div> : null}
+    </section>
+  );
+}

package/bkstg/v1/react/LineChart.jsx

@@ -0,0 +1,23 @@
+import { cx } from "./cx.js";
+
+/**
+ * <LineChart label="Tickets sold per month" values={[120, 180, 160]} labels={["Jan", "Feb", "Mar"]} />
+ * The SVG stretches to its box; the values are the chart's text alternative (role="img" + aria-label).
+ */
+export function LineChart({ label, values = [], labels = [], className }) {
+  if (values.length < 2) return null;
+  const w = 600, h = 200, pad = 6;
+  const max = Math.max(...values), min = Math.min(...values), span = max - min || 1;
+  const pts = values.map((v, i) => [(i * w) / (values.length - 1), pad + (h - 2 * pad) * (1 - (v - min) / span)]);
+  const line = pts.map((p, i) => `${i ? "L" : "M"}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(" ");
+  return (
+    <div className={cx("ui-chart", className)} role="img" aria-label={`${label}: ${values.map((v, i) => (labels[i] ? `${labels[i]} ${v}` : v)).join(", ")}`}>
+      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" aria-hidden="true">
+        {[0.25, 0.5, 0.75].map((f) => <line key={f} className="ui-chart-grid" x1="0" x2={w} y1={h * f} y2={h * f} vectorEffect="non-scaling-stroke" />)}
+        <path className="ui-chart-area" d={`${line} L${w} ${h} L0 ${h} Z`} />
+        <path className="ui-chart-line" d={line} vectorEffect="non-scaling-stroke" />
+      </svg>
+      {labels.length ? <div className="ui-chart-axis" aria-hidden="true">{labels.map((l) => <span key={l}>{l}</span>)}</div> : null}
+    </div>
+  );
+}

package/bkstg/v1/react/Marketing.jsx

@@ -0,0 +1,161 @@
+import { useId, useState } from "react";
+import { cx } from "./cx.js";
+
+// Marketing sections. Each lays itself out by its own width (container queries in components.css), so it works in a
+// column as well as a full page. Content is yours: these take text, links and children, never images they invent.
+
+/** <Section alt eyebrow="Lineup" title="Three stages, one weekend" lead="…" center>{children}</Section> */
+export function Section({ eyebrow, title, lead, center = false, alt = false, as: H = "h2", children, className, ...rest }) {
+  return (
+    <section className={cx("ui-section", alt && "ui-section--alt", className)} {...rest}>
+      <div className="ui-section-inner">
+        {title ? (
+          <div className={cx("ui-section-head", center && "ui-section-head--center")}>
+            {eyebrow ? <span className="ui-eyebrow">{eyebrow}</span> : null}
+            <H className="ui-section-title">{title}</H>
+            {lead ? <p className="ui-section-lead">{lead}</p> : null}
+          </div>
+        ) : null}
+        {children}
+      </div>
+    </section>
+  );
+}
+
+/** <Media label="Crowd at the main stage" square />  an image's place until a real one goes in (role="img") */
+export function Media({ label, square = false, className }) {
+  return <div className={cx("ui-media", square && "ui-media--square", className)} role="img" aria-label={label}><span aria-hidden="true">Image</span></div>;
+}
+
+/** <SiteNav brand="BKSTG" links={[{ href: "/", label: "Lineup", current: true }]} actions={<Button variant="primary">Tickets</Button>} /> */
+export function SiteNav({ brand, brandMark, links, actions, label = "Main", className }) {
+  const [open, setOpen] = useState(false);
+  const id = useId();
+  return (
+    <header className={cx("ui-sitenav", className)}>
+      <div className="ui-sitenav-bar">
+        <a className="ui-sitenav-brand" href="/">{brandMark}{brand}</a>
+        <nav aria-label={label}><ul className="ui-sitenav-links">{links.map((l) => <li key={l.href}><a href={l.href} aria-current={l.current ? "page" : undefined}>{l.label}</a></li>)}</ul></nav>
+        <div className="ui-sitenav-actions">{actions}</div>
+        <button type="button" className="ui-btn ui-btn--icon ui-btn--ghost ui-sitenav-toggle" aria-expanded={open} aria-controls={id} aria-label={open ? "Close menu" : "Open menu"} onClick={() => setOpen((o) => !o)}>
+          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">{open ? <path d="M18 6 6 18M6 6l12 12" /> : <path d="M4 6h16M4 12h16M4 18h16" />}</svg>
+        </button>
+      </div>
+      <nav className="ui-sitenav-panel" id={id} aria-label={`${label}, menu`} hidden={!open}>
+        {links.map((l) => <a key={l.href} href={l.href} aria-current={l.current ? "page" : undefined}>{l.label}</a>)}
+        {actions}
+      </nav>
+    </header>
+  );
+}
+
+/** <Hero eyebrow="April 17–19" title="Spring 2026" lead="…" actions={<Button variant="primary">Get tickets</Button>} media={<Media label="…" />} /> */
+export function Hero({ eyebrow, title, lead, actions, media, center = false, className }) {
+  return (
+    <div className={cx("ui-hero", center ? "ui-hero--center" : media && "ui-hero--split", className)}>
+      <div className="ui-hero-text">
+        {eyebrow ? <span className="ui-eyebrow">{eyebrow}</span> : null}
+        <h1 className="ui-hero-title">{title}</h1>
+        {lead ? <p className="ui-hero-lead">{lead}</p> : null}
+        {actions ? <div className="ui-hero-actions">{actions}</div> : null}
+      </div>
+      {media}
+    </div>
+  );
+}
+
+/** <FeatureCard icon={<MusicIcon />} title="Live set times" text="…" /> */
+export function FeatureCard({ icon, title, text, children, className }) {
+  return <div className={cx("ui-mk-card", className)}>{icon ? <span className="ui-feature-icon" aria-hidden="true">{icon}</span> : null}<h3>{title}</h3>{text ? <p>{text}</p> : null}{children}</div>;
+}
+
+/** <Stats items={[{ value: "42K", label: "Fans", note: "Across three days" }]} /> */
+export function Stats({ items, className }) {
+  return <dl className={cx("ui-stats", className)}>{items.map((s) => <div key={s.label} className="ui-stat"><dt className="ui-stat-label">{s.label}</dt><dd className="ui-stat-value" style={{ margin: 0, order: -1 }}>{s.value}</dd>{s.note ? <dd className="ui-stat-note" style={{ margin: 0 }}>{s.note}</dd> : null}</div>)}</dl>;
+}
+
+/** <LogoCloud caption="Trusted by" logos={[<img … />, …]} /> */
+export function LogoCloud({ caption, logos, className }) {
+  return <div className={cx("ui-logocloud", className)}>{caption ? <p>{caption}</p> : null}<ul>{logos.map((l, i) => <li key={i}>{l}</li>)}</ul></div>;
+}
+
+/** <Testimonial quote="…" name="Grace Lee" role="Head of Production" avatar={<Avatar name="Grace Lee" />} large /> */
+export function Testimonial({ quote, name, role, avatar, large = false, className }) {
+  return <figure className={cx("ui-quote", large && "ui-quote--large", className)}><blockquote><p style={{ margin: 0 }}>{quote}</p></blockquote><figcaption>{avatar}<span><strong>{name}</strong>{role}</span></figcaption></figure>;
+}
+
+/** <TeamMember name="Ana Ruiz" role="Front of house" bio="…" media={<Media label="Ana Ruiz" square />} /> */
+export function TeamMember({ name, role, bio, media, className }) {
+  return <div className={cx("ui-person", className)}>{media}<h3>{name}</h3><p className="ui-person-role">{role}</p>{bio ? <p>{bio}</p> : null}</div>;
+}
+
+/** <PostCard href="/blog/x" title="…" excerpt="…" meta={<><Badge>News</Badge> · 4 min read</>} media={<Media label="…" />} /> */
+export function PostCard({ href, title, excerpt, meta, media, className }) {
+  return <a className={cx("ui-post", className)} href={href}>{media}<span className="ui-post-meta">{meta}</span><h3>{title}</h3>{excerpt ? <p>{excerpt}</p> : null}</a>;
+}
+
+/** <JobList jobs={[{ href: "/jobs/1", title: "Stage manager", team: "Production", tags: ["Seasonal", "San Diego"] }]} /> */
+export function JobList({ jobs, className }) {
+  return <ul className={cx("ui-jobs", className)}>{jobs.map((j) => <li key={j.href} className="ui-job"><div className="ui-job-title"><a href={j.href}>{j.title}</a><span>{j.team}</span></div><div className="ui-job-tags">{(j.tags || []).map((t) => <span key={t} className="ui-badge ui-badge--outline">{t}</span>)}</div></li>)}</ul>;
+}
+
+/** <FAQ items={[{ q: "Can I re-enter?", a: "Until 6 PM." }]} />  native <details>: no script needed */
+export function FAQ({ items, className }) {
+  return <div className={cx("ui-faq", className)}>{items.map((it, i) => <details key={i} open={it.open}><summary>{it.q}</summary><div>{it.a}</div></details>)}</div>;
+}
+
+/** <Plan name="VIP" price="$389" per="2 days" text="…" features={["…"]} featured badge="Most popular" action={<Button variant="primary">Choose VIP</Button>} /> */
+export function Plan({ name, badge, price, per, text, features, action, featured = false, className }) {
+  return (
+    <div className={cx("ui-plan", featured && "ui-plan--featured", className)}>
+      <h3>{name}{badge ? <span className="ui-badge ui-badge--brand">{badge}</span> : null}</h3>
+      <p className="ui-plan-price"><strong>{price}</strong>{per ? <span>{per}</span> : null}</p>
+      {text ? <p>{text}</p> : <p />}
+      <ul aria-label={`${name} includes`}>{features.map((f) => <li key={f}>{f}</li>)}</ul>
+      {action}
+    </div>
+  );
+}
+
+/** <CTABand title="See you in April" text="…" actions={<><Button>Lineup</Button><Button variant="primary">Get tickets</Button></>} /> */
+export function CTABand({ title, text, actions, className }) {
+  return <section className={cx("ui-cta-band", className)}><h2>{title}</h2>{text ? <p>{text}</p> : null}{actions ? <div className="ui-hero-actions">{actions}</div> : null}</section>;
+}
+
+/**
+ * <Newsletter title="Lineup news, first" text="…" onSubscribe={(email) => …} />
+ * A real form: the email field is required and typed, and the result is announced.
+ */
+export function Newsletter({ title, text, onSubscribe, note = "One email a month. Unsubscribe anytime.", className }) {
+  const id = useId();
+  const [done, setDone] = useState("");
+  return (
+    <div className={cx("ui-newsletter", className)}>
+      <div className="ui-section-head"><h2 className="ui-section-title">{title}</h2>{text ? <p className="ui-section-lead">{text}</p> : null}</div>
+      <form onSubmit={(e) => { e.preventDefault(); const v = new FormData(e.currentTarget).get("email"); onSubscribe?.(v); setDone(`Thanks. Check ${v} to confirm.`); e.currentTarget.reset(); }}>
+        <div className="ui-newsletter-row"><label className="ui-sr-only" htmlFor={id}>Email</label><input className="ui-input" id={id} name="email" type="email" required autoComplete="email" placeholder="you@example.com" /><button type="submit" className="ui-btn ui-btn--primary">Subscribe</button></div>
+        <small role="status">{done || note}</small>
+      </form>
+    </div>
+  );
+}
+
+/** <Prose>{article}</Prose>  long-form text: headings, lists, quotes and figures in a readable measure */
+export function Prose({ children, className }) {
+  return <div className={cx("ui-prose", className)}>{children}</div>;
+}
+
+/** <Footer brand="BKSTG" blurb="…" columns={[{ title: "Festival", links: [{ href: "/lineup", label: "Lineup" }] }]} legal="© 2026 …" /> */
+export function Footer({ brand, blurb, columns, legal, bottom, className }) {
+  return (
+    <footer className={cx("ui-footer", className)}>
+      <div className="ui-footer-inner">
+        <div className="ui-footer-top">
+          <div className="ui-footer-brand"><strong>{brand}</strong>{blurb ? <p>{blurb}</p> : null}</div>
+          {columns.map((c) => <nav key={c.title} aria-label={c.title}><h2>{c.title}</h2><ul>{c.links.map((l) => <li key={l.href}><a href={l.href}>{l.label}</a></li>)}</ul></nav>)}
+        </div>
+        <div className="ui-footer-bottom"><small>{legal}</small>{bottom}</div>
+      </div>
+    </footer>
+  );
+}

package/bkstg/v1/react/Menu.jsx

@@ -0,0 +1,76 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const CHEVRON = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>;
+
+/**
+ * <Menu label="Options" items={[
+ *   { label: "Edit", icon: <PencilIcon />, hint: "⌘E", onSelect: edit },
+ *   { separator: true },
+ *   { label: "Delete", danger: true, onSelect: remove } ]} />
+ * The menu button pattern: Enter, Space or ArrowDown opens on the first item, ArrowUp on the last; arrows,
+ * Home and End move; a letter jumps; Escape closes and focus returns to the button. A { heading } item labels a section.
+ */
+export function Menu({ label, items, align, buttonClassName, className }) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const [flip, setFlip] = useState(false);
+  const btn = useRef(null), menu = useRef(null), start = useRef("first");
+  const enabled = () => [...(menu.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])') || [])];
+
+  useEffect(() => {
+    if (!open) return;
+    const list = enabled();
+    (start.current === "last" ? list[list.length - 1] : list[0])?.focus();
+    setFlip(align === "end" || (menu.current && menu.current.getBoundingClientRect().right > window.innerWidth - 8));
+    const outside = (e) => { if (!menu.current?.contains(e.target) && !btn.current?.contains(e.target)) setOpen(false); };
+    document.addEventListener("mousedown", outside);
+    return () => document.removeEventListener("mousedown", outside);
+  }, [open]);
+
+  function close(back) { setOpen(false); if (back) btn.current?.focus(); }
+  function onButtonKey(e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); start.current = e.key === "ArrowUp" ? "last" : "first"; setOpen(true); }
+  }
+  function onMenuKey(e) {
+    const list = enabled(), i = list.indexOf(document.activeElement);
+    let next = null;
+    if (e.key === "ArrowDown") next = list[(i + 1) % list.length];
+    else if (e.key === "ArrowUp") next = list[(i - 1 + list.length) % list.length];
+    else if (e.key === "Home") next = list[0];
+    else if (e.key === "End") next = list[list.length - 1];
+    else if (e.key === "Escape") { e.preventDefault(); return close(true); }
+    else if (e.key === "Tab") return close(false);
+    else if (e.key.length === 1 && /\S/.test(e.key)) {
+      const order = [...list.slice(i + 1), ...list.slice(0, i + 1)];
+      next = order.find((x) => x.textContent.trim().toLowerCase().startsWith(e.key.toLowerCase())) || null;
+    }
+    if (next) { e.preventDefault(); next.focus(); }
+  }
+
+  return (
+    <span className={cx("ui-menu-wrap", className)} data-align={flip ? "end" : undefined}>
+      <button
+        ref={btn} type="button" className={cx("ui-btn ui-menu-trigger", buttonClassName)}
+        aria-haspopup="menu" aria-expanded={open} aria-controls={id}
+        onClick={() => { start.current = "first"; setOpen((o) => !o); }} onKeyDown={onButtonKey}
+      >
+        {label}{CHEVRON}
+      </button>
+      <div ref={menu} id={id} className="ui-menu" role="menu" aria-label={typeof label === "string" ? label : undefined} hidden={!open} onKeyDown={onMenuKey}>
+        {items.map((it, i) => it.separator ? <div key={i} className="ui-menu-sep" role="separator" />
+          : it.heading ? <div key={i} className="ui-menu-label" role="presentation">{it.heading}</div>
+          : (
+            <button
+              key={i} type="button" role="menuitem" tabIndex={-1}
+              className={cx("ui-menu-item", it.danger && "ui-menu-item--danger")}
+              aria-disabled={it.disabled || undefined}
+              onClick={() => { if (it.disabled) return; it.onSelect?.(); close(true); }}
+            >
+              {it.icon}{it.label}{it.hint ? <span className="ui-menu-hint" aria-hidden="true">{it.hint}</span> : null}
+            </button>
+          ))}
+      </div>
+    </span>
+  );
+}

package/bkstg/v1/react/Metric.jsx

@@ -0,0 +1,28 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Metric label="Tickets sold" value="18,880" change="+7.4%" />   change starting with "-" reads as down.
+ * <Metric label="Refund requests" value="12" change="-2.0%" goodWhen="down" />   for numbers where less is better.
+ * The arrow is decoration; the change is spoken as "up 7.4%, better" or "down 2%, better"; its color says good or bad.
+ */
+export function Metric({ label, value, change, goodWhen = "up", className }) {
+  const down = typeof change === "string" && change.trim().startsWith("-");
+  const good = down === (goodWhen === "down");
+  const amount = change ? change.replace(/^[+-]/, "") : "";
+  return (
+    <div className={cx("ui-metric", className)}>
+      <span className="ui-metric-label">{label}</span>
+      <span className="ui-metric-row">
+        <span className="ui-metric-value">{value}</span>
+        {change ? (
+          <span className={cx("ui-metric-delta", down && "ui-metric-delta--down", good ? "ui-metric-delta--good" : "ui-metric-delta--bad")}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              {down ? <path d="M7 7l10 10M17 7v10H7" /> : <path d="M7 17 17 7M7 7h10v10" />}
+            </svg>
+            <span className="ui-sr-only">{down ? "down" : "up"} </span>{amount}<span className="ui-sr-only">, {good ? "better" : "worse"}</span>
+          </span>
+        ) : null}
+      </span>
+    </div>
+  );
+}

package/bkstg/v1/react/PageHeader.jsx

@@ -0,0 +1,22 @@
+import { cx } from "./cx.js";
+
+/**
+ * <PageHeader breadcrumbs={<Breadcrumbs items={...} />} title="Spring 2026" description="Three stages, two days."
+ *   actions={<><Button>Share</Button><Button variant="primary">Publish</Button></>} tabs={<Tabs ... />} />
+ * The page's one h1.
+ */
+export function PageHeader({ breadcrumbs, title, description, actions, tabs, className }) {
+  return (
+    <header className={cx("ui-pagehead", className)}>
+      {breadcrumbs}
+      <div className="ui-pagehead-row">
+        <div className="ui-pagehead-text">
+          <h1 className="ui-pagehead-title">{title}</h1>
+          {description ? <p className="ui-pagehead-desc">{description}</p> : null}
+        </div>
+        {actions ? <div className="ui-pagehead-actions">{actions}</div> : null}
+      </div>
+      {tabs}
+    </header>
+  );
+}