raft-ui 0.0.5 → 0.0.7

package/src/legacy/Spinner.tsx

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

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

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

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

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

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

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

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