raft-ui 0.0.6 → 0.0.8

package/src/legacy/ExperimentalBadge.tsx

@@ -1,19 +0,0 @@
-import type { HTMLAttributes } from "react";
-import { Badge } from "./Badge";
-
-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

@@ -1,106 +0,0 @@
-/**
- * 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

@@ -1,67 +0,0 @@
-/**
- * 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

@@ -1,119 +0,0 @@
-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

@@ -1,217 +0,0 @@
-import { forwardRef, useEffect, type HTMLAttributes, type ReactNode } from "react";
-import { AlertTriangle, CheckCircle2, Info } from "lucide-react";
-import EmptyState from "./EmptyState";
-import SectionEyebrow from "./SectionEyebrow";
-
-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

@@ -1,94 +0,0 @@
-import { ArrowLeft } from "lucide-react";
-import type { HTMLAttributes, ReactNode } from "react";
-import Button from "./button";
-
-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

@@ -1,40 +0,0 @@
-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>
-  );
-}