@protolabsai/ui 0.7.0 → 0.8.0

package/src/index.tsx

@@ -1,1329 +0,0 @@
-/**
- * @protolabsai/ui — React primitives on the @protolabsai/design token set.
- * Every component is className-only over the --pl-* custom properties, so it
- * inherits the locked brand and restyles for free when a token changes.
- */
-import type {
-  ButtonHTMLAttributes,
-  HTMLAttributes,
-  InputHTMLAttributes,
-  KeyboardEvent as ReactKeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  PointerEvent as ReactPointerEvent,
-  ReactNode,
-  RefObject,
-  SelectHTMLAttributes,
-  TableHTMLAttributes,
-  TdHTMLAttributes,
-  TextareaHTMLAttributes,
-  ThHTMLAttributes,
-} from "react";
-import {
-  createContext,
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import * as RDropdown from "@radix-ui/react-dropdown-menu";
-import "./styles.css";
-
-const cx = (...parts: Array<string | false | undefined>) => parts.filter(Boolean).join(" ");
-
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  /** "primary"/"danger" read as a stronger border, not a fill (brand restraint);
-   *  "ghost" is transparent until hover. */
-  variant?: "default" | "primary" | "ghost" | "danger";
-  size?: "sm" | "md";
-  /** Icon-only: square, centered glyph. Pass `aria-label` for a11y. */
-  icon?: boolean;
-};
-export function Button({ variant = "default", size = "md", icon, className, ...rest }: ButtonProps) {
-  return (
-    <button
-      className={cx(
-        "pl-btn",
-        variant !== "default" && `pl-btn--${variant}`,
-        size === "sm" && "pl-btn--sm",
-        icon && "pl-btn--icon",
-        className,
-      )}
-      {...rest}
-    />
-  );
-}
-
-export type Status = "neutral" | "success" | "warning" | "error" | "info";
-export function Badge({ status = "neutral", children }: { status?: Status; children: ReactNode }) {
-  return <span className={cx("pl-badge", status !== "neutral" && `pl-badge--${status}`)}>{children}</span>;
-}
-
-export function Card({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-card", className)} {...rest} />;
-}
-
-export function Eyebrow({ children }: { children: ReactNode }) {
-  return <div className="pl-eyebrow">{children}</div>;
-}
-
-export function Stat({ value, label }: { value: ReactNode; label: ReactNode }) {
-  return (
-    <div>
-      <div className="pl-stat__num">{value}</div>
-      <div className="pl-stat__label">{label}</div>
-    </div>
-  );
-}
-
-export function Container({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-container", className)} {...rest} />;
-}
-
-export function Section({ className, ...rest }: HTMLAttributes<HTMLElement>) {
-  return <section className={cx("pl-section", className)} {...rest} />;
-}
-
-/** Stats grid — wrap Stat children. Two columns, four at ≥640px. */
-export function Stats({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-stats", className)} {...rest} />;
-}
-
-export type RowProps = {
-  /** Left mono label / layer. */
-  label: string;
-  /** Optional mono name above the description. */
-  name?: ReactNode;
-  desc: ReactNode;
-  /** When present, the row widens to label | body | status. */
-  status?: ReactNode;
-  /** Renders as a link when set. */
-  href?: string;
-  external?: boolean;
-};
-export function Row({ label, name, desc, status, href, external }: RowProps) {
-  const cls = cx("pl-row", status != null && "pl-row--wide");
-  const inner = (
-    <>
-      <span className="pl-row__label">{label}</span>
-      <span>
-        {name != null && <div className="pl-row__name">{name}</div>}
-        <div className="pl-row__desc">{desc}</div>
-      </span>
-      {status != null && <span className="pl-row__status">{status}</span>}
-    </>
-  );
-  return href ? (
-    <a className={cls} href={href} {...(external ? { target: "_blank", rel: "noreferrer noopener" } : {})}>
-      {inner}
-    </a>
-  ) : (
-    <div className={cls}>{inner}</div>
-  );
-}
-
-/** The one gradient — the tagline word treatment. Foundation §1 + §13. */
-export function GradientText({ children }: { children: ReactNode }) {
-  return <span className="pl-gradient-text">{children}</span>;
-}
-
-/** Hero header — put an <h1> + <Lead> + <HeroActions> inside. */
-export function Hero({ className, ...rest }: HTMLAttributes<HTMLElement>) {
-  return <header className={cx("pl-hero", className)} {...rest} />;
-}
-/** Button row under the hero lead. */
-export function HeroActions({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-hero__cta", className)} {...rest} />;
-}
-
-/** Large muted intro paragraph (hero size). */
-export function Lead({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cx("pl-lead", className)} {...rest} />;
-}
-
-/** Section heading — self-contained h2 (doesn't rely on a global reset). */
-export function Heading({ className, ...rest }: HTMLAttributes<HTMLHeadingElement>) {
-  return <h2 className={cx("pl-heading", className)} {...rest} />;
-}
-
-/** Muted paragraph that introduces a section (body size). */
-export function SectionIntro({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cx("pl-section-intro", className)} {...rest} />;
-}
-
-/** Numbered process list — wrap Step children. */
-export function Steps({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-steps", className)} {...rest} />;
-}
-export function Step({ n, title, children }: { n: ReactNode; title: ReactNode; children: ReactNode }) {
-  return (
-    <div className="pl-step">
-      <div className="pl-step__num">{n}</div>
-      <div>
-        <div className="pl-step__title">{title}</div>
-        <div className="pl-step__body">{children}</div>
-      </div>
-    </div>
-  );
-}
-
-/** Checklist — wrap Check children. The ✓ mark is rendered for you. */
-export function Checks({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-checks", className)} {...rest} />;
-}
-export function Check({ children, mark = "✓" }: { children: ReactNode; mark?: ReactNode }) {
-  return (
-    <div className="pl-check">
-      <span className="pl-check__mark" aria-hidden>
-        {mark}
-      </span>
-      <span>{children}</span>
-    </div>
-  );
-}
-
-/** Two-column deliverable cards (left-border, mono title). */
-export function Deliverables({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-deliverables", className)} {...rest} />;
-}
-export function Deliverable({ title, children }: { title: ReactNode; children: ReactNode }) {
-  return (
-    <div className="pl-deliverable">
-      <div className="pl-deliverable__title">{title}</div>
-      <div className="pl-deliverable__body">{children}</div>
-    </div>
-  );
-}
-
-/** Blog index list — wrap PostItem children. */
-export function PostList({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-post-list", className)} {...rest} />;
-}
-export type PostItemProps = { meta?: ReactNode; title: ReactNode; excerpt?: ReactNode; href: string };
-export function PostItem({ meta, title, excerpt, href }: PostItemProps) {
-  return (
-    <a className="pl-post-item" href={href}>
-      {meta != null && <div className="pl-post-item__meta">{meta}</div>}
-      <div className="pl-post-item__title">{title}</div>
-      {excerpt != null && <div className="pl-post-item__excerpt">{excerpt}</div>}
-    </a>
-  );
-}
-
-/** Mono empty-state line. */
-export function Empty({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-empty", className)} {...rest} />;
-}
-
-/** Long-form rich-text wrapper (blog post body, docs). */
-export function Prose({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-prose", className)} {...rest} />;
-}
-
-/** Hairline rule. */
-export function Divider({ className, ...rest }: HTMLAttributes<HTMLHRElement>) {
-  return <hr className={cx("pl-divider", className)} {...rest} />;
-}
-
-/** Bordered note block — left-accent keyed to the status tone. */
-export function Callout({
-  tone = "neutral",
-  title,
-  children,
-}: {
-  tone?: Status;
-  title?: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <div className={cx("pl-callout", tone !== "neutral" && `pl-callout--${tone}`)}>
-      {title != null && <div className="pl-callout__title">{title}</div>}
-      <div className="pl-callout__body">{children}</div>
-    </div>
-  );
-}
-
-/** Keyboard / inline-token chip. */
-export function Kbd({ children }: { children: ReactNode }) {
-  return <kbd className="pl-kbd">{children}</kbd>;
-}
-
-/** Standalone styled link (underline-offset treatment). Use the app's router
- *  Link for internal navigation; this is for plain anchors. */
-export function TextLink({
-  className,
-  external,
-  ...rest
-}: HTMLAttributes<HTMLAnchorElement> & { href?: string; external?: boolean }) {
-  return (
-    <a
-      className={cx("pl-link", className)}
-      {...(external ? { target: "_blank", rel: "noreferrer noopener" } : {})}
-      {...rest}
-    />
-  );
-}
-
-// ── App primitives (cockpit + future studio apps) ────────────────────────────
-
-export type TabItem = {
-  id: string;
-  label: ReactNode;
-  /** Leading icon (e.g. a Lucide glyph). */
-  icon?: ReactNode;
-  /** Trailing badge / count (e.g. unread inbox count). */
-  badge?: ReactNode;
-  disabled?: boolean;
-  locked?: boolean;
-};
-
-/** A horizontal tab strip with optional icon/badge slots + disabled/locked
- *  support (gated workflows). */
-export function Tabs({ items, active, onSelect }: { items: TabItem[]; active: string; onSelect: (id: string) => void }) {
-  return (
-    <div className="pl-tabs" role="tablist">
-      {items.map((t) => (
-        <button
-          key={t.id}
-          role="tab"
-          type="button"
-          aria-selected={t.id === active}
-          className={cx("pl-tab", t.id === active && "pl-tab--active")}
-          disabled={t.disabled}
-          onClick={() => onSelect(t.id)}
-        >
-          {t.icon != null && (
-            <span className="pl-tab__icon" aria-hidden>
-              {t.icon}
-            </span>
-          )}
-          <span className="pl-tab__label">{t.label}</span>
-          {t.badge != null && <span className="pl-tab__badge">{t.badge}</span>}
-          {t.locked ? (
-            <span className="pl-tab__lock" aria-hidden>
-              🔒
-            </span>
-          ) : null}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-/** A horizontal kanban board. Wrap BoardColumn children. */
-export function Board({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-board", className)} {...rest} />;
-}
-
-export function BoardColumn({ title, count, children }: { title: ReactNode; count?: ReactNode; children: ReactNode }) {
-  return (
-    <div className="pl-board-col">
-      <div className="pl-board-col__head">
-        <span>{title}</span>
-        {count != null ? <span className="pl-board-col__count">{count}</span> : null}
-      </div>
-      <div className="pl-board-col__body">{children}</div>
-    </div>
-  );
-}
-
-export function BoardCard({ className, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
-  return <button type="button" className={cx("pl-board-card", className)} {...rest} />;
-}
-
-/** A labeled input/textarea bound to a string value (form fields, editors). */
-export function Field({
-  label,
-  value,
-  multiline,
-  readOnly,
-  placeholder,
-  onValueChange,
-  className,
-}: {
-  label: ReactNode;
-  value?: string;
-  multiline?: boolean;
-  readOnly?: boolean;
-  placeholder?: string;
-  onValueChange?: (value: string) => void;
-  className?: string;
-}) {
-  const shared = {
-    className: "pl-field__input",
-    value,
-    readOnly,
-    placeholder,
-    onChange: (e: { target: { value: string } }) => onValueChange?.(e.target.value),
-  };
-  return (
-    <label className={cx("pl-field", className)}>
-      <span className="pl-field__label">{label}</span>
-      {multiline ? <textarea {...shared} /> : <input {...shared} />}
-    </label>
-  );
-}
-
-/** Dense operator-console panel header — title + optional kicker eyebrow +
- *  right-aligned actions slot. `compact` tightens it for nested/secondary
- *  panels. The most-used console composite. */
-export function PanelHeader({
-  title,
-  kicker,
-  actions,
-  compact,
-  className,
-}: {
-  title: ReactNode;
-  kicker?: ReactNode;
-  actions?: ReactNode;
-  compact?: boolean;
-  className?: string;
-}) {
-  return (
-    <div className={cx("pl-panel-header", compact && "pl-panel-header--compact", className)}>
-      <div className="pl-panel-header__titles">
-        {kicker != null && <div className="pl-panel-header__kicker">{kicker}</div>}
-        <h2 className="pl-panel-header__title">{title}</h2>
-      </div>
-      {actions != null && <div className="pl-panel-header__actions">{actions}</div>}
-    </div>
-  );
-}
-
-// ── Overlays & feedback ──────────────────────────────────────────────────────
-
-/** Esc-to-close + body scroll-lock while `open`. Shared by Dialog + Drawer. */
-function useOverlayDismiss(open: boolean, onClose?: () => void) {
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose?.();
-    };
-    document.addEventListener("keydown", onKey);
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = prev;
-    };
-  }, [open, onClose]);
-}
-
-/** Move focus into `ref` on open and cycle Tab within it (a11y modal trap). */
-function useFocusTrap(ref: RefObject<HTMLElement | null>, open: boolean) {
-  useEffect(() => {
-    const node = ref.current;
-    if (!open || !node) return;
-    const focusables = () =>
-      Array.from(
-        node.querySelectorAll<HTMLElement>(
-          'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])',
-        ),
-      ).filter((el) => el.offsetParent !== null);
-    (focusables()[0] ?? node).focus();
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== "Tab") return;
-      const items = focusables();
-      if (items.length === 0) return;
-      const first = items[0];
-      const last = items[items.length - 1];
-      if (e.shiftKey && document.activeElement === first) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    node.addEventListener("keydown", onKey);
-    return () => node.removeEventListener("keydown", onKey);
-  }, [ref, open]);
-}
-
-/** Modal dialog — scrim + centered card, Esc / backdrop close, focus trap.
- *  Controlled: render with `open` and handle `onClose`. */
-export function Dialog({
-  open,
-  onClose,
-  title,
-  children,
-  footer,
-  width,
-  className,
-}: {
-  open: boolean;
-  onClose?: () => void;
-  title?: ReactNode;
-  children?: ReactNode;
-  /** Action row pinned to the dialog foot (e.g. Cancel / Confirm buttons). */
-  footer?: ReactNode;
-  width?: number | string;
-  className?: string;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const labelId = useId();
-  useOverlayDismiss(open, onClose);
-  useFocusTrap(ref, open);
-  if (!open) return null;
-  return (
-    <div
-      className="pl-overlay"
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget) onClose?.();
-      }}
-    >
-      <div
-        ref={ref}
-        className={cx("pl-dialog", className)}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title != null ? labelId : undefined}
-        tabIndex={-1}
-        style={width != null ? { width, maxWidth: "100%" } : undefined}
-      >
-        {title != null && (
-          <div className="pl-dialog__head">
-            <div className="pl-dialog__title" id={labelId}>
-              {title}
-            </div>
-            {onClose && (
-              <button type="button" className="pl-dialog__close" aria-label="Close" onClick={onClose}>
-                ×
-              </button>
-            )}
-          </div>
-        )}
-        {children != null && <div className="pl-dialog__body">{children}</div>}
-        {footer != null && <div className="pl-dialog__foot">{footer}</div>}
-      </div>
-    </div>
-  );
-}
-
-/** Destructive-confirm convenience over Dialog. `destructive` reddens confirm. */
-export function ConfirmDialog({
-  open,
-  title,
-  children,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  destructive,
-  onConfirm,
-  onClose,
-}: {
-  open: boolean;
-  title?: ReactNode;
-  children?: ReactNode;
-  confirmLabel?: ReactNode;
-  cancelLabel?: ReactNode;
-  destructive?: boolean;
-  onConfirm?: () => void;
-  onClose?: () => void;
-}) {
-  return (
-    <Dialog
-      open={open}
-      onClose={onClose}
-      title={title}
-      width={420}
-      footer={
-        <>
-          <Button onClick={onClose}>{cancelLabel}</Button>
-          <Button variant={destructive ? "danger" : "primary"} onClick={() => onConfirm?.()}>
-            {confirmLabel}
-          </Button>
-        </>
-      }
-    >
-      {children}
-    </Dialog>
-  );
-}
-
-/** Slide-in side panel / sheet. Esc / backdrop close, focus trap. */
-export function Drawer({
-  open,
-  onClose,
-  side = "right",
-  title,
-  children,
-  footer,
-  width,
-  className,
-}: {
-  open: boolean;
-  onClose?: () => void;
-  side?: "left" | "right";
-  title?: ReactNode;
-  children?: ReactNode;
-  footer?: ReactNode;
-  width?: number | string;
-  className?: string;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const labelId = useId();
-  useOverlayDismiss(open, onClose);
-  useFocusTrap(ref, open);
-  if (!open) return null;
-  return (
-    <div
-      className="pl-overlay pl-overlay--drawer"
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget) onClose?.();
-      }}
-    >
-      <div
-        ref={ref}
-        className={cx("pl-drawer", `pl-drawer--${side}`, className)}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title != null ? labelId : undefined}
-        tabIndex={-1}
-        style={width != null ? { width, maxWidth: "100%" } : undefined}
-      >
-        {title != null && (
-          <div className="pl-drawer__head">
-            <div className="pl-drawer__title" id={labelId}>
-              {title}
-            </div>
-            {onClose && (
-              <button type="button" className="pl-dialog__close" aria-label="Close" onClick={onClose}>
-                ×
-              </button>
-            )}
-          </div>
-        )}
-        <div className="pl-drawer__body">{children}</div>
-        {footer != null && <div className="pl-drawer__foot">{footer}</div>}
-      </div>
-    </div>
-  );
-}
-
-type ToastOptions = { tone?: Status; title?: ReactNode; message: ReactNode; duration?: number };
-type ToastItem = Required<Pick<ToastOptions, "tone" | "message" | "duration">> & {
-  id: string;
-  title?: ReactNode;
-};
-
-const ToastContext = createContext<((opts: ToastOptions) => string) | null>(null);
-
-/** Wrap the app once. Exposes `useToast()` to push transient notifications. */
-export function ToastProvider({ children, max = 4 }: { children: ReactNode; max?: number }) {
-  const [toasts, setToasts] = useState<ToastItem[]>([]);
-  const seq = useRef(0);
-  const dismiss = useCallback((id: string) => setToasts((ts) => ts.filter((t) => t.id !== id)), []);
-  const toast = useCallback(
-    (opts: ToastOptions) => {
-      const id = `t${(seq.current += 1)}`;
-      const item: ToastItem = {
-        id,
-        tone: opts.tone ?? "neutral",
-        title: opts.title,
-        message: opts.message,
-        duration: opts.duration ?? 4000,
-      };
-      setToasts((ts) => [...ts.slice(-(max - 1)), item]);
-      return id;
-    },
-    [max],
-  );
-  return (
-    <ToastContext.Provider value={toast}>
-      {children}
-      <div className="pl-toast-stack" role="region" aria-label="Notifications">
-        {toasts.map((t) => (
-          <ToastView key={t.id} toast={t} onDismiss={dismiss} />
-        ))}
-      </div>
-    </ToastContext.Provider>
-  );
-}
-
-function ToastView({ toast, onDismiss }: { toast: ToastItem; onDismiss: (id: string) => void }) {
-  useEffect(() => {
-    if (toast.duration <= 0) return;
-    const h = setTimeout(() => onDismiss(toast.id), toast.duration);
-    return () => clearTimeout(h);
-  }, [toast, onDismiss]);
-  return (
-    <div className={cx("pl-toast", toast.tone !== "neutral" && `pl-toast--${toast.tone}`)} role="status">
-      <div className="pl-toast__body">
-        {toast.title != null && <div className="pl-toast__title">{toast.title}</div>}
-        <div className="pl-toast__msg">{toast.message}</div>
-      </div>
-      <button type="button" className="pl-toast__close" aria-label="Dismiss" onClick={() => onDismiss(toast.id)}>
-        ×
-      </button>
-    </div>
-  );
-}
-
-/** Returns `toast(opts)` — call to push a notification. Throws outside provider. */
-export function useToast() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within a <ToastProvider>");
-  return ctx;
-}
-
-/** CSS-only hover/focus tooltip. Wrap the trigger; `label` is the bubble. */
-export function Tooltip({
-  label,
-  side = "top",
-  children,
-}: {
-  label: ReactNode;
-  side?: "top" | "bottom" | "left" | "right";
-  children: ReactNode;
-}) {
-  return (
-    <span className="pl-tip-wrap">
-      {children}
-      <span className={cx("pl-tip", `pl-tip--${side}`)} role="tooltip">
-        {label}
-      </span>
-    </span>
-  );
-}
-
-// ── Data + status primitives ─────────────────────────────────────────────────
-
-/** Dense data table on the 4px grid. Compose with THead/TBody/Tr/Th/Td. */
-export function Table({ className, ...rest }: TableHTMLAttributes<HTMLTableElement>) {
-  return <table className={cx("pl-table", className)} {...rest} />;
-}
-export function THead(props: HTMLAttributes<HTMLTableSectionElement>) {
-  return <thead {...props} />;
-}
-export function TBody(props: HTMLAttributes<HTMLTableSectionElement>) {
-  return <tbody {...props} />;
-}
-/** Table row. `selected` highlights; an `onClick` makes it hover-interactive. */
-export function Tr({
-  selected,
-  className,
-  ...rest
-}: HTMLAttributes<HTMLTableRowElement> & { selected?: boolean }) {
-  return (
-    <tr
-      className={cx(selected && "pl-tr--selected", rest.onClick && "pl-tr--interactive", className)}
-      {...rest}
-    />
-  );
-}
-export function Th({ className, ...rest }: ThHTMLAttributes<HTMLTableCellElement>) {
-  return <th className={className} {...rest} />;
-}
-export function Td({ className, ...rest }: TdHTMLAttributes<HTMLTableCellElement>) {
-  return <td className={className} {...rest} />;
-}
-
-/** Live/health indicator. `pulse` breathes on the 2s status cadence. */
-export function StatusDot({
-  status = "neutral",
-  pulse,
-  label,
-}: {
-  status?: Status;
-  pulse?: boolean;
-  label?: ReactNode;
-}) {
-  const dot = (
-    <span
-      className={cx("pl-dot", status !== "neutral" && `pl-dot--${status}`, pulse && "pl-dot--pulse")}
-      aria-hidden
-    />
-  );
-  if (label == null) return dot;
-  return (
-    <span className="pl-dot-row">
-      {dot}
-      <span className="pl-dot-row__label">{label}</span>
-    </span>
-  );
-}
-
-/** Indeterminate spinner (1s linear, brand-restrained). */
-export function Spinner({ size = 16, className }: { size?: number; className?: string }) {
-  return (
-    <span
-      className={cx("pl-spinner", className)}
-      style={{ width: size, height: size }}
-      role="status"
-      aria-label="Loading"
-    />
-  );
-}
-
-/** Scroll container with brand-styled thin scrollbars. Carries `min-height:0`
- *  (so it scrolls inside flex/grid parents) + overscroll containment. Pass
- *  `ariaLabel` to make it a keyboard-focusable, labelled scroll region. */
-export function ScrollArea({
-  ariaLabel,
-  className,
-  ...rest
-}: HTMLAttributes<HTMLDivElement> & { ariaLabel?: string }) {
-  const a11y = ariaLabel != null ? { role: "region", "aria-label": ariaLabel, tabIndex: 0 } : {};
-  return <div className={cx("pl-scroll", className)} {...a11y} {...rest} />;
-}
-
-// ── Form controls (compose with Field, or use standalone) ────────────────────
-
-export function Input({ className, ...rest }: InputHTMLAttributes<HTMLInputElement>) {
-  return <input className={cx("pl-input", className)} {...rest} />;
-}
-export function Textarea({ className, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement>) {
-  return <textarea className={cx("pl-input", "pl-textarea", className)} {...rest} />;
-}
-export function Select({ className, children, ...rest }: SelectHTMLAttributes<HTMLSelectElement>) {
-  return (
-    <select className={cx("pl-input", "pl-select", className)} {...rest}>
-      {children}
-    </select>
-  );
-}
-
-/** Toggle switch. Controlled via `checked` / `onCheckedChange`. */
-export function Switch({
-  checked,
-  onCheckedChange,
-  disabled,
-  label,
-  className,
-}: {
-  checked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  label?: ReactNode;
-  className?: string;
-}) {
-  return (
-    <label className={cx("pl-switch", disabled && "pl-switch--disabled", className)}>
-      <input
-        type="checkbox"
-        className="pl-switch__input"
-        checked={checked}
-        disabled={disabled}
-        onChange={(e) => onCheckedChange?.(e.target.checked)}
-      />
-      <span className="pl-switch__track" aria-hidden>
-        <span className="pl-switch__thumb" />
-      </span>
-      {label != null && <span className="pl-switch__label">{label}</span>}
-    </label>
-  );
-}
-
-/** Checkbox. Controlled via `checked` / `onCheckedChange`. */
-export function Checkbox({
-  checked,
-  onCheckedChange,
-  disabled,
-  label,
-  className,
-}: {
-  checked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  label?: ReactNode;
-  className?: string;
-}) {
-  return (
-    <label className={cx("pl-checkbox", disabled && "pl-checkbox--disabled", className)}>
-      <input
-        type="checkbox"
-        className="pl-checkbox__input"
-        checked={checked}
-        disabled={disabled}
-        onChange={(e) => onCheckedChange?.(e.target.checked)}
-      />
-      <span className="pl-checkbox__box" aria-hidden />
-      {label != null && <span className="pl-checkbox__label">{label}</span>}
-    </label>
-  );
-}
-
-// ── Menu / DropdownMenu (Radix-backed) ───────────────────────────────────────
-// Radix owns keyboard nav, focus management, and collision-aware positioning —
-// the reason this lives in the DS rather than being re-rolled per app. Styling
-// is token-only over --pl-*. Supports a standard click trigger AND imperative
-// open-at-coordinates for right-click / context menus.
-
-export type MenuHandle = {
-  /** Open the menu. Pass viewport coords (e.g. from a contextmenu event) to
-   *  open at a point; omit to open at the default anchor. */
-  open: (coords?: { x: number; y: number }) => void;
-  close: () => void;
-};
-
-export type MenuProps = {
-  /** Standard trigger (click to open). Omit and drive via the ref's
-   *  open({x,y}) for right-click / imperative menus. */
-  trigger?: ReactNode;
-  children: ReactNode;
-  align?: "start" | "center" | "end";
-  /** Fires on open/close — e.g. to clear the app's context state on dismiss. */
-  onOpenChange?: (open: boolean) => void;
-};
-
-export const Menu = forwardRef<MenuHandle, MenuProps>(function Menu(
-  { trigger, children, align = "start", onOpenChange },
-  ref,
-) {
-  const [open, setOpen] = useState(false);
-  const [coords, setCoords] = useState<{ x: number; y: number } | null>(null);
-  const setOpenState = useCallback(
-    (o: boolean) => {
-      setOpen(o);
-      onOpenChange?.(o);
-    },
-    [onOpenChange],
-  );
-  useImperativeHandle(
-    ref,
-    () => ({
-      open: (c) => {
-        setCoords(c ?? null);
-        setOpenState(true);
-      },
-      close: () => setOpenState(false),
-    }),
-    [setOpenState],
-  );
-  return (
-    <RDropdown.Root open={open} onOpenChange={setOpenState} modal={false}>
-      {trigger != null ? (
-        <RDropdown.Trigger asChild>{trigger}</RDropdown.Trigger>
-      ) : (
-        <RDropdown.Trigger asChild>
-          <span
-            aria-hidden
-            className="pl-menu__anchor"
-            style={coords ? { position: "fixed", left: coords.x, top: coords.y } : undefined}
-          />
-        </RDropdown.Trigger>
-      )}
-      <RDropdown.Portal>
-        <RDropdown.Content className="pl-menu" align={align} sideOffset={4} collisionPadding={8} loop>
-          {children}
-        </RDropdown.Content>
-      </RDropdown.Portal>
-    </RDropdown.Root>
-  );
-});
-
-export function MenuItem({
-  icon,
-  disabled,
-  destructive,
-  onSelect,
-  children,
-}: {
-  icon?: ReactNode;
-  disabled?: boolean;
-  /** Error-toned (delete, remove, etc.). */
-  destructive?: boolean;
-  onSelect?: () => void;
-  children: ReactNode;
-}) {
-  return (
-    <RDropdown.Item
-      className={cx("pl-menu__item", destructive && "pl-menu__item--destructive")}
-      disabled={disabled}
-      onSelect={onSelect}
-    >
-      {icon != null && (
-        <span className="pl-menu__icon" aria-hidden>
-          {icon}
-        </span>
-      )}
-      <span className="pl-menu__label">{children}</span>
-    </RDropdown.Item>
-  );
-}
-
-export function MenuSeparator() {
-  return <RDropdown.Separator className="pl-menu__sep" />;
-}
-
-export function MenuLabel({ children }: { children: ReactNode }) {
-  return <RDropdown.Label className="pl-menu__group-label">{children}</RDropdown.Label>;
-}
-
-/** Nested submenu — put MenuItem/MenuSeparator children inside. */
-export function MenuSub({
-  label,
-  icon,
-  children,
-}: {
-  label: ReactNode;
-  icon?: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <RDropdown.Sub>
-      <RDropdown.SubTrigger className="pl-menu__item pl-menu__subtrigger">
-        {icon != null && (
-          <span className="pl-menu__icon" aria-hidden>
-            {icon}
-          </span>
-        )}
-        <span className="pl-menu__label">{label}</span>
-        <span className="pl-menu__subarrow" aria-hidden>
-          ›
-        </span>
-      </RDropdown.SubTrigger>
-      <RDropdown.Portal>
-        <RDropdown.SubContent className="pl-menu" sideOffset={2} alignOffset={-4} collisionPadding={8}>
-          {children}
-        </RDropdown.SubContent>
-      </RDropdown.Portal>
-    </RDropdown.Sub>
-  );
-}
-
-// ── Skeleton (loading placeholder) ───────────────────────────────────────────
-
-/** Shimmering content-shaped loading placeholder. `lines>1` stacks text bars
- *  (last one short). Token-driven; static fill under reduced-motion. */
-export function Skeleton({
-  width,
-  height = 14,
-  lines,
-  className,
-  style,
-  ...rest
-}: HTMLAttributes<HTMLDivElement> & {
-  width?: number | string;
-  height?: number | string;
-  /** Stack N text-line bars instead of a single bar. */
-  lines?: number;
-}) {
-  if (lines != null && lines > 1) {
-    return (
-      <div className={cx("pl-skel-lines", className)} style={style} {...rest}>
-        {Array.from({ length: lines }, (_, i) => (
-          <div
-            key={i}
-            className="pl-skel"
-            style={{ height, width: i === lines - 1 ? "65%" : (width ?? "100%") }}
-          />
-        ))}
-      </div>
-    );
-  }
-  return (
-    <div className={cx("pl-skel", className)} style={{ width: width ?? "100%", height, ...style }} {...rest} />
-  );
-}
-
-/** Optional wrapper to group related skeletons (shared layout gap). */
-export function SkeletonGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-skel-group", className)} {...rest} />;
-}
-
-// ── App shell (SurfaceRail · MobileNav · AppShell) ───────────────────────────
-// The operator-console shell, converged from protoAgent's production ADR 0035
-// dual-rail layout. All three are dumb + props-driven; persistence (rail order,
-// widths, active surfaces) stays app-side — AppShell is controlled.
-
-export type RailItem = {
-  id: string;
-  label: string;
-  icon: ReactNode;
-  /** Count badge (caps at "9+"). Mutually exclusive with `dot`. */
-  badge?: number;
-  /** Pulsing indicator, no count (e.g. a background stream). */
-  dot?: boolean;
-};
-
-/** Vertical icon rail — both the left and right rails render through this.
- *  `onContextMenu` is the integration point for the DS `Menu` (right-click →
- *  host calls menuRef.open({x,y})); the menu's registry/keying stays app-side. */
-export function SurfaceRail({
-  side,
-  ariaLabel,
-  items,
-  activeId,
-  onSelect,
-  onContextMenu,
-}: {
-  side: "left" | "right";
-  ariaLabel: string;
-  items: RailItem[];
-  activeId: string;
-  onSelect: (id: string) => void;
-  onContextMenu?: (e: ReactMouseEvent, id: string) => void;
-}) {
-  return (
-    <aside className={cx("pl-rail", side === "right" && "pl-rail--right")} aria-label={ariaLabel}>
-      {items.map((it) => (
-        <button
-          key={it.id}
-          type="button"
-          className={cx("pl-rail__btn", it.id === activeId && "pl-rail__btn--active")}
-          title={it.label}
-          aria-label={it.label}
-          aria-current={it.id === activeId ? "page" : undefined}
-          onClick={() => onSelect(it.id)}
-          onContextMenu={onContextMenu ? (e) => onContextMenu(e, it.id) : undefined}
-        >
-          <span className="pl-rail__icon" aria-hidden>
-            {it.icon}
-          </span>
-          <span className="pl-rail__label">{it.label}</span>
-          {it.badge ? (
-            <span className="pl-rail__badge">{it.badge > 9 ? "9+" : it.badge}</span>
-          ) : it.dot ? (
-            <span className="pl-rail__dot" aria-label="active" />
-          ) : null}
-        </button>
-      ))}
-    </aside>
-  );
-}
-
-export type MobileItem = { id: string; label: string; icon: ReactNode };
-
-/** Mobile shell (<768px): a bottom quick-bar (first 5 pinned surfaces) + a
- *  "More" button that opens the full surface list in a DS `Drawer`. */
-export function MobileNav({
-  items,
-  activeId,
-  onSelect,
-  quickBarIds,
-}: {
-  items: MobileItem[];
-  activeId: string;
-  onSelect: (id: string) => void;
-  /** Surfaces pinned to the bottom bar (first 5 used). */
-  quickBarIds: string[];
-}) {
-  const [open, setOpen] = useState(false);
-  const byId = new Map(items.map((i) => [i.id, i] as const));
-  const quick = quickBarIds
-    .map((id) => byId.get(id))
-    .filter((i): i is MobileItem => Boolean(i))
-    .slice(0, 5);
-  const pick = (id: string) => {
-    onSelect(id);
-    setOpen(false);
-  };
-  return (
-    <>
-      <nav className="pl-mobilenav" aria-label="Quick surfaces">
-        {quick.map((it) => (
-          <button
-            key={it.id}
-            type="button"
-            className={cx("pl-mobilenav__tab", it.id === activeId && "pl-mobilenav__tab--active")}
-            onClick={() => pick(it.id)}
-          >
-            <span className="pl-mobilenav__icon" aria-hidden>
-              {it.icon}
-            </span>
-            <span>{it.label}</span>
-          </button>
-        ))}
-        <button type="button" className="pl-mobilenav__tab" onClick={() => setOpen(true)} aria-label="All surfaces">
-          <span className="pl-mobilenav__icon" aria-hidden>
-            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-              <path d="M3 6h18M3 12h18M3 18h18" />
-            </svg>
-          </span>
-          <span>More</span>
-        </button>
-      </nav>
-      <Drawer open={open} onClose={() => setOpen(false)} side="right" title="Surfaces" width={280}>
-        <div className="pl-mobilenav__list">
-          {items.map((it) => (
-            <button
-              key={it.id}
-              type="button"
-              className={cx("pl-mobilenav__list-item", it.id === activeId && "pl-mobilenav__list-item--active")}
-              onClick={() => pick(it.id)}
-            >
-              <span className="pl-mobilenav__icon" aria-hidden>
-                {it.icon}
-              </span>
-              <span>{it.label}</span>
-            </button>
-          ))}
-        </div>
-      </Drawer>
-    </>
-  );
-}
-
-/** True below `breakpoint` px (client-only; false on first paint). */
-function useIsMobile(breakpoint: number) {
-  const [mobile, setMobile] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
-    const update = () => setMobile(mq.matches);
-    update();
-    mq.addEventListener("change", update);
-    return () => mq.removeEventListener("change", update);
-  }, [breakpoint]);
-  return mobile;
-}
-
-export type AppShellProps = {
-  leftItems: RailItem[];
-  rightItems: RailItem[];
-  activeLeft: string;
-  activeRight: string;
-  onSelect: (side: "left" | "right", id: string) => void;
-  /** Right-click on a rail icon — wire to a DS `Menu` for move/reorder etc. */
-  onRailContextMenu?: (side: "left" | "right", e: ReactMouseEvent, id: string) => void;
-  leftContent: ReactNode;
-  rightContent: ReactNode;
-  /** Controlled right-column width (px). */
-  rightWidth: number;
-  onRightWidthChange: (width: number) => void;
-  rightCollapsed?: boolean;
-  onCollapse?: (collapsed: boolean) => void;
-  minRightWidth?: number;
-  maxRightWidth?: number;
-  /** Mobile (<breakpoint) config. Omit to disable the mobile shell. */
-  mobileItems?: MobileItem[];
-  mobileActiveId?: string;
-  onMobileSelect?: (id: string) => void;
-  quickBarIds?: string[];
-  mobileBreakpoint?: number;
-  className?: string;
-};
-
-/** The full dual-rail operator shell:
- *  `[left rail][left column][resize handle][right column][right rail]`,
- *  collapsing to `MobileNav` below `mobileBreakpoint`. Controlled — the host
- *  owns the surface registry and persists rail order / widths / active state. */
-export function AppShell({
-  leftItems,
-  rightItems,
-  activeLeft,
-  activeRight,
-  onSelect,
-  onRailContextMenu,
-  leftContent,
-  rightContent,
-  rightWidth,
-  onRightWidthChange,
-  rightCollapsed = false,
-  onCollapse,
-  minRightWidth = 280,
-  maxRightWidth = 720,
-  mobileItems,
-  mobileActiveId,
-  onMobileSelect,
-  quickBarIds,
-  mobileBreakpoint = 768,
-  className,
-}: AppShellProps) {
-  const isMobile = useIsMobile(mobileBreakpoint);
-  const drag = useRef<{ startX: number; startW: number } | null>(null);
-  const clamp = useCallback(
-    (w: number) => Math.min(maxRightWidth, Math.max(minRightWidth, w)),
-    [minRightWidth, maxRightWidth],
-  );
-
-  const onPointerDown = useCallback(
-    (e: ReactPointerEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      drag.current = { startX: e.clientX, startW: rightWidth };
-      e.currentTarget.setPointerCapture(e.pointerId);
-    },
-    [rightWidth],
-  );
-  const onPointerMove = useCallback(
-    (e: ReactPointerEvent<HTMLDivElement>) => {
-      if (!drag.current) return;
-      onRightWidthChange(clamp(drag.current.startW + (drag.current.startX - e.clientX)));
-    },
-    [clamp, onRightWidthChange],
-  );
-  const onPointerUp = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
-    drag.current = null;
-    e.currentTarget.releasePointerCapture?.(e.pointerId);
-  }, []);
-  const onKeyDown = useCallback(
-    (e: ReactKeyboardEvent<HTMLDivElement>) => {
-      const step = e.shiftKey ? 48 : 16;
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        onRightWidthChange(clamp(rightWidth + step));
-      } else if (e.key === "ArrowRight") {
-        e.preventDefault();
-        onRightWidthChange(clamp(rightWidth - step));
-      }
-    },
-    [rightWidth, clamp, onRightWidthChange],
-  );
-
-  if (isMobile && mobileItems && onMobileSelect && quickBarIds) {
-    return (
-      <div className={cx("pl-appshell", "pl-appshell--mobile", className)}>
-        <div className="pl-appshell__mobile-stage">{leftContent}</div>
-        <MobileNav
-          items={mobileItems}
-          activeId={mobileActiveId ?? activeLeft}
-          onSelect={onMobileSelect}
-          quickBarIds={quickBarIds}
-        />
-      </div>
-    );
-  }
-
-  const showRight = !rightCollapsed && rightItems.length > 0;
-  return (
-    <div className={cx("pl-appshell", className)}>
-      <SurfaceRail
-        side="left"
-        ariaLabel="Left surfaces"
-        items={leftItems}
-        activeId={activeLeft}
-        onSelect={(id) => onSelect("left", id)}
-        onContextMenu={onRailContextMenu ? (e, id) => onRailContextMenu("left", e, id) : undefined}
-      />
-      <main className="pl-appshell__col pl-appshell__col--left">{leftContent}</main>
-      {showRight && (
-        <div
-          className="pl-appshell__handle"
-          role="separator"
-          aria-orientation="vertical"
-          aria-label="Resize right panel"
-          aria-valuenow={rightWidth}
-          aria-valuemin={minRightWidth}
-          aria-valuemax={maxRightWidth}
-          tabIndex={0}
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={onPointerUp}
-          onKeyDown={onKeyDown}
-          onDoubleClick={() => onCollapse?.(true)}
-        />
-      )}
-      {showRight && (
-        <aside
-          className="pl-appshell__col pl-appshell__col--right"
-          style={{ flex: `0 0 ${rightWidth}px`, width: rightWidth }}
-        >
-          {rightContent}
-        </aside>
-      )}
-      <SurfaceRail
-        side="right"
-        ariaLabel="Right surfaces"
-        items={rightItems}
-        activeId={activeRight}
-        onSelect={(id) => onSelect("right", id)}
-        onContextMenu={onRailContextMenu ? (e, id) => onRailContextMenu("right", e, id) : undefined}
-      />
-    </div>
-  );
-}