raft-ui 0.0.1

package/src/legacy/Spinner.tsx

@@ -0,0 +1,89 @@
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn.ts";
+
+type SpinnerSize = "sm" | "lg";
+
+type SpinnerProps = ComponentProps<"span"> & {
+  size?: SpinnerSize;
+};
+
+const SPINNER_STYLE = `
+@keyframes sitefire-braille-spinner {
+  0%,
+  9.99% {
+    content: "⠋";
+  }
+  10%,
+  19.99% {
+    content: "⠙";
+  }
+  20%,
+  29.99% {
+    content: "⠹";
+  }
+  30%,
+  39.99% {
+    content: "⠸";
+  }
+  40%,
+  49.99% {
+    content: "⠼";
+  }
+  50%,
+  59.99% {
+    content: "⠴";
+  }
+  60%,
+  69.99% {
+    content: "⠦";
+  }
+  70%,
+  79.99% {
+    content: "⠧";
+  }
+  80%,
+  89.99% {
+    content: "⠇";
+  }
+  90%,
+  100% {
+    content: "⠏";
+  }
+}
+
+[data-slot="spinner"] [data-spinner-glyph]::before {
+  content: "⠋";
+  animation: sitefire-braille-spinner 800ms steps(1, end) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-glyph]::before {
+    animation-duration: 1600ms;
+  }
+}
+`;
+
+export default function Spinner({
+  className,
+  size = "sm",
+  "aria-label": ariaLabel = "Loading",
+  ...props
+}: SpinnerProps) {
+  return (
+    <span
+      data-slot="spinner"
+      data-size={size}
+      role="status"
+      aria-label={ariaLabel}
+      className={cn(
+        "relative inline-flex shrink-0 items-center justify-center font-mono leading-none text-current tabular-nums",
+        size === "sm" ? "h-4 text-base" : "h-6 text-xl",
+        className,
+      )}
+      {...props}
+    >
+      <style>{SPINNER_STYLE}</style>
+      <span data-spinner-glyph="" aria-hidden="true" className="inline-block min-w-[1ch]" />
+    </span>
+  );
+}

package/src/legacy/StatusDot.tsx

@@ -0,0 +1,51 @@
+import type { HTMLAttributes } from "react";
+
+type AgentActivity = "online" | "thinking" | "working" | "error" | "offline";
+
+type SpanPassthroughProps = HTMLAttributes<HTMLSpanElement> &
+  Record<`data-${string}`, string | undefined>;
+
+export interface StatusDotProps extends Omit<SpanPassthroughProps, "children"> {
+  activity?: AgentActivity;
+  tone?: string;
+  size?: "sm" | "md" | "lg";
+  pulse?: boolean;
+}
+
+const SIZE_CLASS: Record<NonNullable<StatusDotProps["size"]>, string> = {
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-[11px]",
+};
+
+function getActivityDotClass(activity: AgentActivity): string {
+  switch (activity) {
+    case "online":
+      return "bg-brutal-lime";
+    case "thinking":
+    case "working":
+      return "bg-brutal-yellow animate-pulse";
+    case "error":
+      return "bg-brutal-orange";
+    case "offline":
+    default:
+      return "bg-gray-400";
+  }
+}
+
+export default function StatusDot({
+  activity,
+  tone,
+  size = "md",
+  pulse = false,
+  className,
+  ...rest
+}: StatusDotProps) {
+  const colorClass = activity ? getActivityDotClass(activity) : (tone ?? "bg-gray-400");
+  return (
+    <span
+      {...rest}
+      className={`inline-block shrink-0 rounded-full border border-black ${SIZE_CLASS[size]} ${colorClass} ${pulse ? "animate-pulse" : ""} ${className ?? ""}`}
+    />
+  );
+}

package/src/legacy/SurfaceListItem.tsx

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../lib/cn.ts";
+
+export default function SurfaceListItem({
+  children,
+  selected = false,
+  interactive = true,
+  className = "",
+  ...props
+}: HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  selected?: boolean;
+  interactive?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        "border-2 px-4 py-3 transition-colors",
+        selected
+          ? "border-black bg-brutal-cyan/15 shadow-brutal-sm"
+          : [
+              "border-black/30 bg-white",
+              interactive ? "hover:border-black hover:shadow-brutal-sm" : "",
+            ].join(" "),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/src/legacy/Textarea.tsx

@@ -0,0 +1,137 @@
+import { forwardRef, type ReactNode, type TextareaHTMLAttributes } from "react";
+
+/**
+ * Canonical brutal-style textarea primitive with error + counter support.
+ *
+ * Replaces bare `<textarea className="input-brutal" />` + ad-hoc error
+ * state + character-counter spans that drift across forms (SettingsPanel,
+ * CreateChannelDialog, ReportIssueDialog, PreJoinAgreementSection, etc).
+ *
+ * cindyz 2026-05-12 #engineering:89667b54 msg=dcb9d29b asked for this
+ * after cross's pre-join agreement PR introduced a feature-local
+ * red-border textarea error state that didn't exist anywhere else in the
+ * app. This primitive locks the error visual so future callsites don't
+ * re-invent it.
+ *
+ * **Visual contract:**
+ *   - Default: `input-brutal` (border-2 black, white bg, shadow-brutal-sm, focus shadow-brutal)
+ *   - Error:   red border + red ring + coral-tinted bg (bg-brutal-red/5)
+ *   - Counter: bottom-right, red when over limit
+ *   - Message: below the field, red when error
+ *
+ * **Why not just a CSS variant on `.input-brutal`?**
+ * Textarea callsites almost always need counter + error message together;
+ * coordinating those through className alone means every callsite
+ * re-writes the counter/error layout. Wrapping in a component is cheaper.
+ *
+ * Inputs (not textarea) follow the same error visual but are usually
+ * small enough that a dedicated `BrutalInput` wrapper is overkill — use
+ * `className={error ? "input-brutal !border-brutal-red ring-2 ring-brutal-red/60" : "input-brutal"}`
+ * inline, or extend this primitive if a second form-field callsite
+ * emerges.
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   value={body}
+ *   onChange={(e) => setBody(e.target.value)}
+ *   maxLength={500}
+ *   error={body.length > 500 ? "Agreement body must be 500 characters or fewer" : undefined}
+ *   rows={6}
+ *   placeholder="Type your server's join agreement…"
+ * />
+ * ```
+ */
+
+export interface TextareaProps extends Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "children"
+> {
+  /** Error message — renders red border + ring + message below. When
+   *  empty string or undefined, field is in normal state. */
+  error?: string | null;
+  /** Show a character counter at the bottom-right. Uses `maxLength` if
+   *  not explicitly set. Counter turns red once current length exceeds
+   *  maxLength (or when `error` is set). */
+  showCounter?: boolean;
+  /** Optional hint / helper text shown below field when not in error
+   *  state. */
+  hint?: ReactNode;
+  /** Additional classes — appended to the `<textarea>` element. Use for
+   *  layout tweaks (e.g. `!min-h-32`). */
+  className?: string;
+  /** Additional classes on the outer wrapper `<div>`. Use for margin /
+   *  width tweaks. */
+  wrapperClassName?: string;
+  /** Custom length function — defaults to `value.length` (UTF-16 code
+   *  units). Pass `(v) => Array.from(v).length` for Unicode code-point
+   *  counting (correct for emoji / surrogate pairs). */
+  getLength?: (value: string) => number;
+  /** Override the displayed count directly (e.g. when the parent already
+   *  computes a code-point count). Takes precedence over `getLength`. */
+  count?: number;
+  /** Counter display limit — falls back to native `maxLength` when not
+   *  set. Use when you want soft validation (counter turns red over
+   *  limit, but no native browser truncation). Common with
+   *  `getLength`/`count` for Unicode-correct enforcement. */
+  limit?: number;
+}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  {
+    error,
+    showCounter,
+    hint,
+    className = "",
+    wrapperClassName = "",
+    maxLength,
+    value,
+    defaultValue,
+    getLength,
+    count,
+    limit,
+    ...rest
+  },
+  ref,
+) {
+  const hasError = !!error;
+  const rawValue =
+    typeof value === "string" ? value : typeof defaultValue === "string" ? defaultValue : "";
+  const length = count !== undefined ? count : getLength ? getLength(rawValue) : rawValue.length;
+  const counterLimit = limit ?? maxLength;
+  const overLimit = counterLimit !== undefined && length > counterLimit;
+
+  const stateClass = hasError ? "!border-brutal-red ring-2 ring-brutal-red/60 bg-brutal-red/5" : "";
+
+  return (
+    <div className={`flex flex-col gap-1 ${wrapperClassName}`.trim()}>
+      <textarea
+        ref={ref}
+        value={value}
+        defaultValue={defaultValue}
+        maxLength={maxLength}
+        aria-invalid={hasError || undefined}
+        className={`input-brutal w-full ${stateClass} ${className}`.trim()}
+        {...rest}
+      />
+      <div className="flex items-start justify-between gap-3 text-xs">
+        <div
+          className={`min-w-0 flex-1 ${hasError ? "font-bold text-brutal-red" : "text-black/60"}`}
+        >
+          {hasError ? error : hint}
+        </div>
+        {showCounter && counterLimit !== undefined && (
+          <div
+            className={`shrink-0 font-mono tabular-nums ${
+              overLimit || hasError ? "font-bold text-brutal-red" : "text-black/50"
+            }`}
+          >
+            {length}/{counterLimit}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+export default Textarea;

package/src/legacy/button.tsx

@@ -0,0 +1,100 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+type ButtonShape = "icon" | "text" | "iconText";
+
+/**
+ * Button tones map to the brutal palette. Callers say `tone="pink"`,
+ * never `className="bg-brutal-pink"`. Adding a new tone means adding a
+ * row here, not a one-off override at the callsite.
+ *
+ * Hidden context (PR #1905 / #proj-theme:ac79cf20 stdrc msg=6ce4d8bf):
+ * the prior API exposed size+shape but left bg/color to caller
+ * className. Tightening the boundary makes theme swaps possible without
+ * re-auditing every callsite.
+ */
+export const BUTTON_TONE_CLASSES = {
+  white: "bg-white text-black",
+  yellow: "bg-brutal-yellow text-black",
+  pink: "bg-brutal-pink text-black",
+  cyan: "bg-brutal-cyan text-black",
+  lavender: "bg-brutal-lavender text-black",
+  orange: "bg-brutal-orange text-black",
+  lime: "bg-brutal-lime text-black",
+  red: "bg-brutal-red text-black",
+  stone: "bg-brutal-stone text-black",
+} as const;
+
+export type ButtonTone = keyof typeof BUTTON_TONE_CLASSES;
+
+const SIZE_SHAPE_CLASSES: Record<ButtonSize, Record<ButtonShape, string>> = {
+  xs: {
+    icon: "size-6 text-[11px]",
+    text: "h-6 px-2 text-[11px]",
+    iconText: "h-6 gap-1 px-2 text-[11px]",
+  },
+  sm: {
+    icon: "size-7 text-xs",
+    text: "h-7 px-2.5 text-xs",
+    iconText: "h-7 gap-1.5 px-2.5 text-xs",
+  },
+  md: {
+    icon: "size-8 text-sm",
+    text: "h-8 px-3 text-sm",
+    iconText: "h-8 gap-2 px-3 text-sm",
+  },
+  lg: {
+    icon: "size-10 text-sm",
+    text: "h-10 px-4 text-sm",
+    iconText: "h-10 gap-2 px-4 text-sm",
+  },
+};
+
+export function brutalButtonClassName({
+  size = "sm",
+  shape = "text",
+  tone = "white",
+  className = "",
+}: {
+  size?: ButtonSize;
+  shape?: ButtonShape;
+  tone?: ButtonTone;
+  className?: string;
+} = {}) {
+  return [
+    "btn-brutal-sm inline-flex shrink-0 items-center justify-center font-bold leading-none",
+    BUTTON_TONE_CLASSES[tone],
+    SIZE_SHAPE_CLASSES[size][shape],
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: ButtonSize;
+  shape?: ButtonShape;
+  /** Background tone from the brutal palette. Defaults to `white`. */
+  tone?: ButtonTone;
+  children?: ReactNode;
+}
+
+export default function Button({
+  size = "sm",
+  shape = "text",
+  tone,
+  className = "",
+  type = "button",
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={brutalButtonClassName({ size, shape, tone, className })}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/src/legacy/context-menu-divider.tsx

@@ -0,0 +1,12 @@
+/**
+ * Canonical divider between groups of context-menu items. Per CLAUDE.md
+ * "Menus & Dropdowns": `border-t-2 border-black` with no margin — spacing
+ * between items is controlled by item padding, not divider margins.
+ *
+ * Centralized so context menus (Sidebar channel / DM / agent menus today,
+ * future surfaces) don't re-roll the same `<div className="border-t-2
+ * border-black" />` literal. stdrc 2026-05-24 audit follow-up.
+ */
+export default function ContextMenuDivider() {
+  return <div className="border-t-2 border-black" />;
+}

package/src/legacy/menu-item.tsx

@@ -0,0 +1,66 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+/**
+ * Pure-action menu row primitive.
+ *
+ * Shared by the family of "click → run an action" menus across the app:
+ * - Right-click context menus (Sidebar channel/DM/agent, MessageItem,
+ *   SavedPanel, ThreadsInbox)
+ * - Sidebar add-popover menus (Add channel → Join existing / Create new …)
+ * - Mark-as-read / pin / archive / delete rows
+ *
+ * Origin: stdrc 2026-05-25 #proj-theme:ac79cf20 msg=dae4c262 +
+ * msg=245a96f0 + msg=8fdf9cba. Inventory pass found ~30 hand-rolled
+ * `flex w-full … hover:bg-brutal-yellow transition-colors` rows that
+ * had drifted on a few axes (`uppercase tracking-wide` on Sidebar
+ * sort/add popovers, density modifiers in some places but not others).
+ *
+ * Distinct from `SelectionPopover` — that primitive is for single-select
+ * dropdowns where the trailing ✓ marks the chosen option. This row is
+ * pure action: no ✓, no selected-state fill. When state-changing items
+ * like "Mark as Read ↔ Mark as Unread" or "Pin ↔ Unpin" toggle their
+ * label based on current state, that's just label state, not a toggle
+ * UI affordance (stdrc msg=245a96f0).
+ *
+ * Hover token: `bg-brutal-yellow/30` matches SegmentedControl unselected
+ * hover + SelectionPopover row hover, so all selection-family and
+ * action-menu surfaces share a single hover color. Right-click menus
+ * intentionally do NOT differentiate destructive vs non-destructive at
+ * the row level — every irreversible action is gated by a
+ * `ConfirmDialog`, so the menu itself stays visually uniform (stdrc
+ * msg=60e789d1: "Agent 的 Stop 和 Restart 菜单也没有特别的 hover 样式
+ * … 因为它反正会弹出一个窗口提示，所以不需要在菜单上做特别呈现").
+ */
+export type MenuItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  /** Optional leading icon. Conventionally a lucide icon at `size={14}`. */
+  icon?: ReactNode;
+  /** Optional right-aligned slot (e.g. shortcut hint). */
+  trailing?: ReactNode;
+};
+
+export default function MenuItem({
+  icon,
+  trailing,
+  className = "",
+  type = "button",
+  role = "menuitem",
+  children,
+  ...rest
+}: MenuItemProps) {
+  // Compact-viewport density (`[@media(max-height:600px)]:py-1`) is
+  // applied unconditionally — harmless on tall viewports and keeps
+  // Sidebar / MessageItem / SavedPanel context menus visually uniform
+  // in small viewports without per-callsite opt-in.
+  const base =
+    "flex w-full items-center gap-2 px-3 py-2 [@media(max-height:600px)]:py-1 text-sm text-left transition-colors";
+  const tone =
+    "font-medium text-black hover:bg-brutal-yellow/30 disabled:cursor-not-allowed disabled:text-black/30";
+
+  return (
+    <button type={type} role={role} className={`${base} ${tone} ${className}`} {...rest}>
+      {icon}
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      {trailing}
+    </button>
+  );
+}

package/src/legacy/selection-popover.tsx

@@ -0,0 +1,212 @@
+import type { KeyboardEvent, ReactNode } from "react";
+import { Button as BaseButton } from "@base-ui/react/button";
+import { Check } from "lucide-react";
+import { tv } from "../lib/tv.ts";
+import { useThemeFamily } from "../lib/theme/use-theme.ts";
+
+// Single-select popover content: a header, an optional search box, and a list of
+// checkable rows (the trailing ✓ is the selected indicator; hover is the shared
+// selection-family yellow/30). Presentational — the original had no portal/effect,
+// so place it inside a base-ui Popover.Positioner at the callsite. `shadow-brutal`
+// maps to --shadow-hover; the search box reuses the brutal field skin (--shadow).
+const selectionPopover = tv({
+  slots: {
+    root: ["min-w-[220px]"],
+    header: ["flex items-center justify-between border-b border-black px-3 py-2"],
+    title: ["text-[10px] font-bold uppercase tracking-wide text-black/60"],
+    clear: ["text-[10px] font-bold uppercase tracking-wide text-black/50 hover:text-black"],
+    searchWrap: ["border-b border-black px-2 py-2"],
+    searchInput: [
+      "w-full border-2 border-black bg-white px-2 py-1",
+      "font-mono text-xs shadow-[var(--shadow)]",
+      "focus:shadow-[var(--shadow-hover)] focus:outline-none",
+    ],
+    list: ["max-h-64 overflow-y-auto"],
+    empty: ["px-3 py-3 text-center font-mono text-[11px] text-black/40"],
+    row: [
+      "flex h-9 w-full items-center justify-between gap-2 overflow-hidden px-3",
+      "border-b text-left text-xs font-bold last:border-b-0",
+    ],
+    rowMain: ["flex min-w-0 items-center gap-2"],
+    leading: ["flex size-5 shrink-0 items-center justify-center"],
+    label: ["truncate leading-6"],
+    check: ["shrink-0"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: ["border-2 border-black bg-white shadow-[var(--shadow-hover)]"],
+        row: ["border-black/10"],
+      },
+      // Elegant styling is deferred; see the component TODO.
+      elegant: {},
+    },
+    disabled: {
+      true: {
+        row: "cursor-not-allowed bg-white text-black/30",
+      },
+      false: {
+        row: "bg-white text-black hover:bg-brutal-yellow/30",
+      },
+    },
+    italic: {
+      true: {
+        label: "-mx-1 whitespace-nowrap px-1 italic text-black/70",
+      },
+      false: {
+        label: "",
+      },
+    },
+  },
+  defaultVariants: {
+    disabled: false,
+    italic: false,
+  },
+});
+
+export type SelectionPopoverOption = {
+  key: string;
+  checked: boolean;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  italic?: boolean;
+  avatar?: ReactNode;
+  reserveLeadingSlot?: boolean;
+  leading?: ReactNode;
+};
+
+type SelectionPopoverBaseProps = {
+  title: string;
+  options: SelectionPopoverOption[];
+  showClear?: boolean;
+  onClear?: () => void;
+  showHeader?: boolean;
+  emptyLabel?: string;
+  className?: string;
+};
+
+type SearchableProps = SelectionPopoverBaseProps & {
+  searchable: true;
+  search: string;
+  onSearchChange: (value: string) => void;
+  searchPlaceholder?: string;
+  onInputKeyDown?: (
+    event: KeyboardEvent<HTMLInputElement>,
+    options: SelectionPopoverOption[],
+  ) => void;
+};
+
+type PlainProps = SelectionPopoverBaseProps & {
+  searchable?: false;
+  search?: never;
+  onSearchChange?: never;
+  searchPlaceholder?: never;
+  onInputKeyDown?: never;
+};
+
+export type SelectionPopoverProps = SearchableProps | PlainProps;
+
+function SelectionPopoverOptionRow({
+  checked,
+  onClick,
+  label,
+  disabled = false,
+  italic = false,
+  avatar = null,
+  reserveLeadingSlot = false,
+  leading = null,
+}: Omit<SelectionPopoverOption, "key">) {
+  const theme = useThemeFamily();
+  const leadingContent = leading ?? avatar;
+  const {
+    row,
+    rowMain,
+    leading: leadingSlot,
+    label: labelSlot,
+    check,
+  } = selectionPopover({
+    theme,
+    disabled,
+    italic,
+  });
+  return (
+    <BaseButton
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      data-slot="selection-popover-row"
+      className={row()}
+    >
+      <span className={rowMain()}>
+        {(reserveLeadingSlot || leadingContent) && (
+          <span className={leadingSlot()}>{leadingContent}</span>
+        )}
+        <span className={labelSlot()}>{label}</span>
+      </span>
+      {checked && <Check size={12} className={check()} />}
+    </BaseButton>
+  );
+}
+
+export function SelectionPopover(props: SelectionPopoverProps) {
+  const theme = useThemeFamily();
+  const {
+    title,
+    options,
+    showClear = false,
+    onClear,
+    showHeader = true,
+    emptyLabel = "No matches",
+    className,
+  } = props;
+  const {
+    root,
+    header,
+    title: titleSlot,
+    clear,
+    searchWrap,
+    searchInput,
+    list,
+    empty,
+  } = selectionPopover({ theme });
+
+  return (
+    <div data-slot="selection-popover" className={root({ className })}>
+      {showHeader && (
+        <div className={header()}>
+          <span className={titleSlot()}>{title}</span>
+          {showClear && onClear && (
+            <BaseButton type="button" onClick={onClear} className={clear()}>
+              Clear
+            </BaseButton>
+          )}
+        </div>
+      )}
+      {props.searchable && (
+        <div className={searchWrap()}>
+          {/* Reuses the brutal field skin (input-brutal → --shadow / --shadow-hover). */}
+          <input
+            type="text"
+            aria-label={props.searchPlaceholder ?? title}
+            value={props.search}
+            onChange={(event) => props.onSearchChange(event.target.value)}
+            onKeyDown={(event) => {
+              event.stopPropagation();
+              props.onInputKeyDown?.(event, options);
+            }}
+            placeholder={props.searchPlaceholder ?? "Search…"}
+            className={searchInput()}
+          />
+        </div>
+      )}
+      <div className={list()}>
+        {options.length === 0 ? (
+          <div className={empty()}>{emptyLabel}</div>
+        ) : (
+          options.map(({ key, ...option }) => <SelectionPopoverOptionRow key={key} {...option} />)
+        )}
+      </div>
+    </div>
+  );
+}