raft-ui 0.0.1

package/src/legacy/ExperimentalBadge.tsx

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "react";
+import { Badge } from "./Badge.tsx";
+
+export interface ExperimentalBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  // Callers can add positional tweaks (e.g. `-translate-y-px` inside a
+  // PanelHeader title row) — but the visual identity (lime tone +
+  // brutal Badge's label typography) is owned by Badge so every
+  // Experimental surface stays visually identical.
+}
+
+export function ExperimentalBadge({ className = "", ...props }: ExperimentalBadgeProps) {
+  return (
+    <Badge tone="lime" className={className} {...props}>
+      Experimental
+    </Badge>
+  );
+}
+
+export default ExperimentalBadge;

package/src/legacy/FormField.tsx

@@ -0,0 +1,106 @@
+/**
+ * Canonical form-field row — label + control + optional helper / error.
+ *
+ * Replaces the inline `<div><label className="mb-1 block text-sm font-bold
+ * text-black uppercase tracking-wide">…</label><input className="input-brutal
+ * …" /></div>` pattern that appears 30+ times across auth pages, dialogs, and
+ * settings panels.
+ *
+ * Background: stdrc 2026-05-12 #wg-theme:a987f888 asked for the strong-signal
+ * primitives to be lifted into one PR. FormField is the highest-leverage of
+ * the three (FormField / KeyValueRow / SectionHeader) — every multi-field
+ * dialog and every auth page is a stack of these.
+ *
+ * Slots:
+ * - `label`     — the field label text (rendered as `<label>` and tied to
+ *                 children via the optional `htmlFor`)
+ * - `required`  — true → render the `*` marker in `text-brutal-pink`
+ * - `optional`  — true → render `(optional)` in `text-black/40 normal-case`
+ *                 (mutually exclusive with `required`)
+ * - `hint`      — rendered below the control, `text-xs text-black/50`
+ * - `error`     — rendered below the control, `text-xs text-brutal-red`,
+ *                 takes precedence over hint
+ * - `htmlFor`   — forwarded to the `<label htmlFor>` attribute
+ * - `labelStyle`— `"uppercase"` (default, matches dialog convention) or
+ *                 `"plain"` (matches auth-page convention — sentence/title case)
+ * - `size`      — `"default"` (default, `text-sm` + full-opacity black) or
+ *                 `"compact"` (`text-xs` + `text-black/60`). Compact mirrors
+ *                 the dense Settings form-row label that uses
+ *                 `mb-1 block text-xs font-bold text-black/60`. Use compact
+ *                 inside Settings forms to preserve the existing density;
+ *                 use default inside dialogs / auth pages.
+ * - `className` — additional classes appended to the outer wrapper (e.g.
+ *                 `mt-2`)
+ *
+ * The control itself is `children`. FormField does NOT render the `<input>` /
+ * `<textarea>` / `<SegmentedControl>` etc. — pass it explicitly. This keeps
+ * FormField agnostic of the control library and avoids prop-explosion.
+ */
+
+import type { ReactNode, LabelHTMLAttributes } from "react";
+
+const LABEL_BASE_DEFAULT = "mb-1 block text-sm font-bold text-black";
+const LABEL_BASE_COMPACT = "mb-1 block text-xs font-bold text-black/60";
+const LABEL_UPPERCASE = "uppercase tracking-wide";
+
+export type FormFieldProps = {
+  /** Field label text. */
+  label: ReactNode;
+  /** Show a `*` required marker after the label. */
+  required?: boolean;
+  /** Show `(optional)` in muted case after the label. Mutually exclusive
+   *  with `required`. */
+  optional?: boolean;
+  /** Helper text rendered below the control. */
+  hint?: ReactNode;
+  /** Error text rendered below the control (takes precedence over `hint`). */
+  error?: ReactNode;
+  /** `<label htmlFor>` — point at the inner control's `id`. */
+  htmlFor?: LabelHTMLAttributes<HTMLLabelElement>["htmlFor"];
+  /** Label case style. `"uppercase"` (default) matches the dialog/settings
+   *  convention. `"plain"` matches the auth-page convention. */
+  labelStyle?: "uppercase" | "plain";
+  /** Label size. `"default"` (default) is `text-sm` + full-opacity black —
+   *  matches dialogs / auth pages. `"compact"` is `text-xs` + `text-black/60`
+   *  — matches the dense Settings form-row labels. */
+  size?: "default" | "compact";
+  /** Additional classes appended to the outer `<div>`. */
+  className?: string;
+  /** The actual control — `<input>`, `<textarea>`, `<SegmentedControl>`,
+   *  `<select>`, custom group, etc. */
+  children: ReactNode;
+};
+
+export default function FormField({
+  label,
+  required,
+  optional,
+  hint,
+  error,
+  htmlFor,
+  labelStyle = "uppercase",
+  size = "default",
+  className,
+  children,
+}: FormFieldProps) {
+  const base = size === "compact" ? LABEL_BASE_COMPACT : LABEL_BASE_DEFAULT;
+  const labelCls = `${base} ${labelStyle === "uppercase" ? LABEL_UPPERCASE : ""}`.trim();
+  const wrapperCls = className ? className : undefined;
+  return (
+    <div className={wrapperCls}>
+      <label className={labelCls} htmlFor={htmlFor}>
+        {label}
+        {required ? <span className="ml-1 text-brutal-pink">*</span> : null}
+        {optional ? <span className="ml-1 text-black/40 normal-case">(optional)</span> : null}
+      </label>
+      {children}
+      {error ? (
+        <p className="mt-1 text-xs font-bold text-brutal-red" role="alert">
+          {error}
+        </p>
+      ) : hint ? (
+        <p className="mt-1 text-xs text-black/50">{hint}</p>
+      ) : null}
+    </div>
+  );
+}

package/src/legacy/KeyValueRow.tsx

@@ -0,0 +1,67 @@
+/**
+ * Canonical key/value row — small label above value.
+ *
+ * Replaces the inline `<div><div className="text-xs text-black/50 mb-1">Foo</div><span className="text-sm text-black font-mono">bar</span></div>` pattern that appears 30+ times across detail panels (HumanDetailPanel, AgentDetailPanel, MachineDetailPanel) and the SettingsPanel body.
+ *
+ * Background: stdrc 2026-05-12 #wg-theme:a987f888 asked for strong-signal
+ * primitives to be lifted in one PR. KeyValueRow is the second of the three.
+ *
+ * Slots:
+ * - `label`           — the muted label text (string or node)
+ * - `value`           — the value content (string or node, often code/mono)
+ * - `mono`            — true → render the value cell in `font-mono`
+ * - `breakAll`        — true → render the value cell with `break-all` (long
+ *                       emails, hostnames, etc.)
+ * - `action`          — optional inline trailing element rendered next to the
+ *                       label (e.g. an edit pencil button)
+ * - `className`       — additional classes on the outer wrapper
+ * - `valueClassName`  — additional classes on the value cell
+ *
+ * Typography defaults match the canonical detail-panel KV convention: label
+ * is `text-xs text-black/50 mb-1`, value is `text-sm text-black`. Pass
+ * `mono` for fields like email / dates / IDs that are conventionally rendered
+ * in monospace.
+ *
+ * If your row needs an inline-editable value (with Save/Cancel and per-row
+ * loading state), this primitive is not the right fit — it intentionally
+ * stays a presentational primitive. Inline-edit shells like the role / avatar
+ * editors in HumanDetailPanel keep their own structure.
+ */
+
+import type { ReactNode } from "react";
+
+export type KeyValueRowProps = {
+  label: ReactNode;
+  value: ReactNode;
+  mono?: boolean;
+  breakAll?: boolean;
+  action?: ReactNode;
+  className?: string;
+  valueClassName?: string;
+};
+
+export default function KeyValueRow({
+  label,
+  value,
+  mono = false,
+  breakAll = false,
+  action,
+  className,
+  valueClassName,
+}: KeyValueRowProps) {
+  const wrapperCls = className ? className : undefined;
+  const valueClsParts = ["text-sm text-black"];
+  if (mono) valueClsParts.push("font-mono");
+  if (breakAll) valueClsParts.push("break-all");
+  if (valueClassName) valueClsParts.push(valueClassName);
+  const valueCls = valueClsParts.join(" ");
+  return (
+    <div className={wrapperCls}>
+      <div className="mb-1 flex items-center gap-2">
+        <div className="text-xs text-black/50">{label}</div>
+        {action ? <div className="shrink-0">{action}</div> : null}
+      </div>
+      <div className={valueCls}>{value}</div>
+    </div>
+  );
+}

package/src/legacy/Lightbox.tsx

@@ -0,0 +1,119 @@
+import { type HTMLAttributes, type ReactNode, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+/**
+ * Full-screen dark-backdrop overlay for lightboxes and bottom sheets.
+ *
+ * Replaces the recurring pattern:
+ *   <div className="fixed inset-0 z-[70] flex flex-col bg-black/75" onClick={...}>
+ *
+ * Used in: ImageLightbox, SelectShareLightbox, MessageItem mobile reaction sheet.
+ *
+ * Distinct from <Modal> (centered card) — this primitive is content-agnostic:
+ * callers control layout via `className` on children. Modal stays for
+ * centered-card dialogs (ConfirmDialog, CreateChannelDialog, etc.).
+ *
+ * Body scroll lock is applied while mounted.
+ *
+ * Extra HTML attributes (e.g. `data-testid`) are forwarded to the backdrop div.
+ */
+interface LightboxProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onClick" | "className" | "children"
+> {
+  onClose: () => void;
+  children: ReactNode;
+  /** CSS z-index. Default 70 (above Modal's z-50/z-[60]). */
+  zIndex?: number;
+  /** Tailwind bg class for the backdrop. Default "bg-black/75". */
+  backdropClass?: string;
+  /** Click on backdrop closes. Default true. */
+  dismissOnBackdrop?: boolean;
+  /** Extra classes on the backdrop div (e.g. "flex flex-col"). */
+  className?: string;
+  /** Positioning class for the backdrop. Default fixed viewport overlay. */
+  positionClass?: string;
+  /** Lock body scroll while mounted. Default true. */
+  lockBodyScroll?: boolean;
+  /** Scroll the overlay root into view after mount. Useful for document-flow overlays. */
+  scrollIntoViewOnMount?: boolean;
+}
+
+export default function Lightbox({
+  onClose,
+  children,
+  zIndex = 70,
+  backdropClass = "bg-black/75",
+  dismissOnBackdrop = true,
+  className = "",
+  positionClass = "fixed inset-0",
+  lockBodyScroll = true,
+  scrollIntoViewOnMount = false,
+  ...rest
+}: LightboxProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  // Close the topmost preview before browser-level close shortcuts can close
+  // the whole tab/window.
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const closeShortcut =
+        e.key.toLowerCase() === "w" && (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey;
+      if (e.key !== "Escape" && !closeShortcut) return;
+      e.preventDefault();
+      e.stopPropagation();
+      onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  // Body scroll lock
+  useEffect(() => {
+    const html = document.documentElement;
+    const prevHtmlOverflow = html.style.overflow;
+    const prevHtmlHeight = html.style.height;
+    const prevBodyOverflow = document.body.style.overflow;
+    const prevBodyHeight = document.body.style.height;
+
+    if (lockBodyScroll) {
+      document.body.style.overflow = "hidden";
+    } else {
+      html.style.overflow = "auto";
+      html.style.height = "auto";
+      document.body.style.overflow = "auto";
+      document.body.style.height = "auto";
+    }
+
+    return () => {
+      html.style.overflow = prevHtmlOverflow;
+      html.style.height = prevHtmlHeight;
+      document.body.style.overflow = prevBodyOverflow;
+      document.body.style.height = prevBodyHeight;
+    };
+  }, [lockBodyScroll]);
+
+  useEffect(() => {
+    if (!scrollIntoViewOnMount) return;
+    rootRef.current?.scrollIntoView({ block: "start" });
+  }, [scrollIntoViewOnMount]);
+
+  return createPortal(
+    <div
+      ref={rootRef}
+      {...rest}
+      className={`${positionClass} ${backdropClass} ${className}`}
+      style={{ zIndex }}
+      onClick={
+        dismissOnBackdrop
+          ? (e) => {
+              if (e.target === e.currentTarget) onClose();
+            }
+          : undefined
+      }
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+}

package/src/legacy/NotificationCenter.tsx

@@ -0,0 +1,217 @@
+import { forwardRef, useEffect, type HTMLAttributes, type ReactNode } from "react";
+import { AlertTriangle, CheckCircle2, Info } from "lucide-react";
+import EmptyState from "./EmptyState.tsx";
+import SectionEyebrow from "./SectionEyebrow.tsx";
+
+export type NotificationCenterKind = "error" | "warning" | "info" | "success";
+export type NotificationCenterViewport = "desktop" | "mobile";
+export type NotificationCenterSize = "compact" | "regular" | "large";
+export type NotificationCenterActionVariant = "primary" | "secondary";
+
+export interface NotificationCenterAction {
+  id?: string;
+  label: ReactNode;
+  ariaLabel?: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  variant?: NotificationCenterActionVariant;
+}
+
+export interface NotificationCenterEntry {
+  id: string;
+  kind: NotificationCenterKind;
+  title: ReactNode;
+  body?: ReactNode;
+  icon?: ReactNode;
+  actions?: NotificationCenterAction[];
+  read?: boolean;
+}
+
+export interface NotificationCenterProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  entries: NotificationCenterEntry[];
+  /** Desktop uses a stable fixed-height frame. Mobile grows with content until
+   *  its max-height token, then scrolls internally. */
+  viewport: NotificationCenterViewport;
+  size?: NotificationCenterSize;
+  title?: ReactNode;
+  countLabel?: ReactNode;
+  emptyState?: ReactNode;
+  closeOnEscape?: boolean;
+  onClose?: () => void;
+}
+
+const SIZE_CLASS: Record<NotificationCenterViewport, Record<NotificationCenterSize, string>> = {
+  desktop: {
+    compact: "h-56",
+    regular: "h-72",
+    large: "h-96",
+  },
+  mobile: {
+    compact: "max-h-[min(64dvh,224px)]",
+    regular: "max-h-[min(72dvh,288px)]",
+    large: "max-h-[min(80dvh,384px)]",
+  },
+};
+
+const WIDTH_CLASS: Record<NotificationCenterViewport, string> = {
+  desktop: "w-80",
+  mobile: "w-[min(92vw,360px)]",
+};
+
+const KIND_DOT_BG: Record<NotificationCenterKind, string> = {
+  error: "bg-brutal-orange",
+  warning: "bg-brutal-orange",
+  info: "bg-brutal-yellow",
+  success: "bg-brutal-lime",
+};
+
+const KIND_LABEL: Record<NotificationCenterKind, string> = {
+  error: "Error",
+  warning: "Warning",
+  info: "Info",
+  success: "Success",
+};
+
+const DEFAULT_KIND_ICON: Record<NotificationCenterKind, ReactNode> = {
+  error: <AlertTriangle size={16} className="text-black" />,
+  warning: <AlertTriangle size={16} className="text-black" />,
+  info: <Info size={16} className="text-black" />,
+  success: <CheckCircle2 size={16} className="text-black" />,
+};
+
+/**
+ * Reusable notification-center primitive.
+ *
+ * Layout contract:
+ * - desktop: fixed-height frame, scrollable list body.
+ * - mobile: content-height frame capped by a max-height token, then scrollable
+ *   list body.
+ *
+ * The component does not know how notifications are sourced or dismissed; apps
+ * provide entries and action handlers. This keeps product aggregation separate
+ * from the open-source-ready UI primitive.
+ */
+const NotificationCenter = forwardRef<HTMLDivElement, NotificationCenterProps>(
+  function NotificationCenter(
+    {
+      entries,
+      viewport,
+      size = "regular",
+      title = "Notifications",
+      countLabel,
+      emptyState,
+      closeOnEscape = true,
+      onClose,
+      className = "",
+      ...props
+    },
+    ref,
+  ) {
+    useEffect(() => {
+      if (!closeOnEscape || !onClose) return;
+      const onKey = (e: KeyboardEvent) => {
+        if (e.key === "Escape") onClose();
+      };
+      window.addEventListener("keydown", onKey);
+      return () => window.removeEventListener("keydown", onKey);
+    }, [closeOnEscape, onClose]);
+
+    return (
+      <div
+        {...props}
+        ref={ref}
+        role={props.role ?? "dialog"}
+        aria-label={props["aria-label"] ?? "Notification center"}
+        className={[
+          "card-brutal flex flex-col overflow-hidden bg-white",
+          WIDTH_CLASS[viewport],
+          SIZE_CLASS[viewport][size],
+          className,
+        ].join(" ")}
+      >
+        <div className="flex items-center gap-2 border-b-2 border-black bg-brutal-cream px-3 py-2">
+          <SectionEyebrow>{title}</SectionEyebrow>
+          <span className="ml-auto text-xs font-mono text-black/40">
+            {countLabel ?? defaultCountLabel(entries.length)}
+          </span>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+          {entries.length === 0 ? (
+            (emptyState ?? <NotificationCenterEmptyState />)
+          ) : (
+            <ul className="divide-y-2 divide-black" aria-label="Notifications">
+              {entries.map((entry) => (
+                <NotificationCenterItem key={entry.id} entry={entry} />
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+export default NotificationCenter;
+
+export function NotificationCenterEmptyState({
+  title = "No notifications right now",
+  body = "You'll see things here that need your attention.",
+}: {
+  title?: ReactNode;
+  body?: ReactNode;
+}) {
+  return <EmptyState icon={<CheckCircle2 size={36} />} title={title} description={body} />;
+}
+
+function NotificationCenterItem({ entry }: { entry: NotificationCenterEntry }) {
+  return (
+    <li className={`px-3 py-3 ${entry.read ? "opacity-70" : ""}`}>
+      <div className="flex items-start gap-2">
+        <div
+          className={`mt-0.5 flex size-6 shrink-0 items-center justify-center border-2 border-black ${
+            KIND_DOT_BG[entry.kind]
+          }`}
+          aria-label={KIND_LABEL[entry.kind]}
+        >
+          {entry.icon ?? DEFAULT_KIND_ICON[entry.kind]}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-bold text-black break-words">{entry.title}</div>
+          {entry.body && <div className="mt-0.5 text-sm break-words">{entry.body}</div>}
+          {entry.actions && entry.actions.length > 0 && (
+            <div className="mt-2 flex flex-wrap items-center gap-2">
+              {entry.actions.map((action, index) => (
+                <NotificationCenterActionButton
+                  key={action.id ?? `${entry.id}-action-${index}`}
+                  action={action}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </li>
+  );
+}
+
+function NotificationCenterActionButton({ action }: { action: NotificationCenterAction }) {
+  const isPrimary = action.variant === "primary";
+  return (
+    <button
+      type="button"
+      onClick={action.onClick}
+      disabled={action.disabled}
+      aria-label={action.ariaLabel}
+      className={`btn-brutal px-3 py-1.5 text-xs disabled:cursor-not-allowed disabled:opacity-50 ${
+        isPrimary ? "bg-brutal-pink" : "bg-white"
+      }`}
+    >
+      {action.label}
+    </button>
+  );
+}
+
+function defaultCountLabel(count: number): ReactNode {
+  return count === 0 ? "all clear" : `${count} ${count === 1 ? "item" : "items"}`;
+}

package/src/legacy/PanelHeader.tsx

@@ -0,0 +1,94 @@
+import { ArrowLeft } from "lucide-react";
+import type { HTMLAttributes, ReactNode } from "react";
+import Button from "./button.tsx";
+
+type DivPassthroughProps = HTMLAttributes<HTMLDivElement> &
+  Record<`data-${string}`, string | undefined>;
+type ButtonPassthroughProps = HTMLAttributes<HTMLButtonElement> &
+  Record<`data-${string}`, string | undefined>;
+
+export interface PanelHeaderProps {
+  title?: ReactNode;
+  titleSlot?: ReactNode;
+  titleSuffix?: ReactNode;
+  subtitle?: ReactNode;
+  subtitleMultiline?: boolean;
+  icon?: ReactNode;
+  iconBg?: string;
+  iconSlot?: ReactNode;
+  iconAlwaysVisible?: boolean;
+  onMobileBack?: () => void;
+  mobileBreakpoint?: "md" | "lg";
+  mobileBackProps?: ButtonPassthroughProps;
+  titleClickProps?: DivPassthroughProps;
+  containerProps?: DivPassthroughProps;
+  actions?: ReactNode;
+}
+
+export default function PanelHeader({
+  title,
+  titleSlot,
+  titleSuffix,
+  subtitle,
+  subtitleMultiline = false,
+  icon,
+  iconBg = "bg-brutal-yellow",
+  iconSlot,
+  iconAlwaysVisible = false,
+  onMobileBack,
+  mobileBreakpoint = "md",
+  mobileBackProps,
+  titleClickProps,
+  containerProps,
+  actions,
+}: PanelHeaderProps) {
+  const mobileHiddenClass = mobileBreakpoint === "lg" ? "lg:hidden" : "md:hidden";
+  const iconVisibilityClass = iconAlwaysVisible
+    ? "flex"
+    : mobileBreakpoint === "lg"
+      ? "hidden lg:flex"
+      : "hidden md:flex";
+  const { className: containerExtraClass, ...containerRest } = containerProps ?? {};
+
+  return (
+    <div
+      {...containerRest}
+      className={`flex h-panel-header items-center gap-3 border-b-2 border-black bg-white px-5 ${containerExtraClass ?? ""}`}
+    >
+      {onMobileBack && (
+        <Button
+          {...mobileBackProps}
+          onClick={onMobileBack}
+          shape="icon"
+          className={`${mobileHiddenClass} ${mobileBackProps?.className ?? ""}`}
+        >
+          <ArrowLeft size={14} />
+        </Button>
+      )}
+      {icon && (
+        <div
+          className={`${iconVisibilityClass} size-icon-header shrink-0 items-center justify-center border-2 border-black ${iconBg}`}
+        >
+          {icon}
+        </div>
+      )}
+      {iconSlot && <div className={`${iconVisibilityClass} shrink-0`}>{iconSlot}</div>}
+      {titleSlot ? (
+        <div className="min-w-0 flex-1">{titleSlot}</div>
+      ) : (
+        <div {...titleClickProps} className={`min-w-0 flex-1 ${titleClickProps?.className ?? ""}`}>
+          <div className="flex min-w-0 items-center gap-2">
+            <h2 className="truncate text-base font-bold leading-tight text-black">{title}</h2>
+            {titleSuffix && <div className="shrink-0">{titleSuffix}</div>}
+          </div>
+          {subtitle && (
+            <p className={`font-mono text-xs text-black/50 ${subtitleMultiline ? "" : "truncate"}`}>
+              {subtitle}
+            </p>
+          )}
+        </div>
+      )}
+      {actions && <div className="flex shrink-0 items-center gap-1.5">{actions}</div>}
+    </div>
+  );
+}

package/src/legacy/PreviewShell.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+
+export const PREVIEW_SHELL_BORDER = "border border-black/15 hover:border-black/30";
+
+export const PREVIEW_SHELL_SKIN = `${PREVIEW_SHELL_BORDER} bg-white hover:bg-black/5`;
+
+export const PREVIEW_SHELL_SKIN_MUTED =
+  "border-2 border-black/30 bg-black/5 italic text-black/40 hover:shadow-brutal-sm";
+
+export type PreviewShellVariant = "default" | "muted";
+
+export interface PreviewShellProps {
+  variant?: PreviewShellVariant;
+  onClick?: () => void;
+  className?: string;
+  "data-testid"?: string;
+  title?: string;
+  "aria-busy"?: "true" | "false";
+  children: ReactNode;
+}
+
+export default function PreviewShell({
+  variant = "default",
+  onClick,
+  className,
+  children,
+  ...rest
+}: PreviewShellProps) {
+  const Root = onClick ? "button" : "div";
+  const skin = variant === "muted" ? PREVIEW_SHELL_SKIN_MUTED : PREVIEW_SHELL_SKIN;
+  return (
+    <Root
+      {...(onClick ? { type: "button" as const, onClick } : {})}
+      {...rest}
+      className={`${skin}${className ? ` ${className}` : ""}`}
+    >
+      {children}
+    </Root>
+  );
+}