raft-ui 0.0.6 → 0.0.8

package/src/legacy/Badge.tsx

@@ -1,95 +0,0 @@
-import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
-
-/**
- * Badge tones map to the brutal palette. The primitive owns the bg →
- * caller never writes `bg-brutal-*` via className. 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 — colors /
- *   uppercase / tracking all used to leak through caller className;
- *   the primitive now owns them.
- * - stdrc msg=6db77368 — "Badges and task status 都应该大写（内容
- *   应该是 Title case ... css 在 Brutal 主题下全大写（将来我们会有
- *   别的主题）)". Content stays Title Case (e.g. "In Progress"); the
- *   brutal theme's CSS does the visual uppercase + tracking-wide
- *   transform here in the primitive. A future non-brutal skin can
- *   render the same Title Case content without uppercase.
- * - stdrc msg=ce25da45 (option B msg=65681d15) — status badges that
- *   sit next to case-sensitive identifiers (e.g. `task #N @assignee`)
- *   must opt out of uppercase, because `@bugen` ≠ `@BUGEN`. Hence
- *   `uppercase?: boolean` axis: default true preserves the brutal
- *   contract for label-only badges; status callsites pass `false`.
- */
-export const BADGE_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 BadgeTone = keyof typeof BADGE_TONE_CLASSES;
-
-interface BadgeStyleProps {
-  /** Background tone from the brutal palette. Defaults to `white`. */
-  tone?: BadgeTone;
-  /**
-   * Apply the brutal uppercase + tracking-wide transform. Defaults to
-   * true (label-only badges). Status badges pass `false` because they
-   * mix label content with case-sensitive identifiers (`@assignee`).
-   */
-  uppercase?: boolean;
-}
-
-export function brutalBadgeClassName({
-  tone = "white",
-  uppercase = true,
-  className = "",
-}: BadgeStyleProps & { className?: string } = {}) {
-  return [
-    "inline-flex h-5 min-w-0 max-w-full items-center gap-1 overflow-hidden whitespace-nowrap border border-black px-1.5 text-[10px] font-bold leading-none",
-    uppercase ? "uppercase tracking-wide" : null,
-    BADGE_TONE_CLASSES[tone],
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
-}
-
-export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, BadgeStyleProps {
-  children?: ReactNode;
-}
-
-export function Badge({ tone, uppercase, className = "", children, ...props }: BadgeProps) {
-  return (
-    <span className={brutalBadgeClassName({ tone, uppercase, className })} {...props}>
-      {children}
-    </span>
-  );
-}
-
-export interface BadgeButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, BadgeStyleProps {
-  children?: ReactNode;
-}
-
-export function BadgeButton({
-  tone,
-  uppercase,
-  className = "",
-  type = "button",
-  children,
-  ...props
-}: BadgeButtonProps) {
-  return (
-    <button type={type} className={brutalBadgeClassName({ tone, uppercase, className })} {...props}>
-      {children}
-    </button>
-  );
-}
-
-export default Badge;

package/src/legacy/Banner.tsx

@@ -1,74 +0,0 @@
-import { AlertTriangle, CheckCircle2, CircleAlert, Info } from "lucide-react";
-import type { HTMLAttributes, ReactNode } from "react";
-
-export type BannerIntent = "destructive" | "warning" | "info" | "success";
-export type BannerDensity = "sm" | "md" | "lg";
-
-const INTENT_SURFACE: Record<BannerIntent, string> = {
-  destructive: "bg-brutal-red/20",
-  warning: "bg-brutal-orange/20",
-  info: "bg-brutal-yellow/30",
-  success: "bg-brutal-lime/20",
-};
-
-const INTENT_DEFAULT_ICON: Record<BannerIntent, ReactNode> = {
-  destructive: <AlertTriangle size={18} className="mt-0.5 shrink-0 text-black" />,
-  warning: <CircleAlert size={18} className="mt-0.5 shrink-0 text-black" />,
-  info: <Info size={18} className="mt-0.5 shrink-0 text-black" />,
-  success: <CheckCircle2 size={18} className="mt-0.5 shrink-0 text-black" />,
-};
-
-const DENSITY_PADDING: Record<BannerDensity, string> = {
-  sm: "p-2",
-  md: "p-3",
-  lg: "p-4 shadow-brutal-sm",
-};
-
-const DENSITY_TEXT: Record<BannerDensity, string> = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-sm",
-};
-
-const DENSITY_GAP: Record<BannerDensity, string> = {
-  sm: "gap-2",
-  md: "gap-3",
-  lg: "gap-3",
-};
-
-export interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  intent: BannerIntent;
-  density?: BannerDensity;
-  title?: ReactNode;
-  children?: ReactNode;
-  withIcon?: boolean;
-  icon?: ReactNode;
-  actions?: ReactNode;
-}
-
-export default function Banner({
-  intent,
-  density = "md",
-  title,
-  children,
-  icon,
-  withIcon = false,
-  actions,
-  className = "",
-  ...rest
-}: BannerProps) {
-  const resolvedIcon = icon !== undefined ? icon : withIcon ? INTENT_DEFAULT_ICON[intent] : null;
-  return (
-    <div
-      {...rest}
-      className={`flex items-start ${DENSITY_GAP[density]} border-2 border-black ${INTENT_SURFACE[intent]} ${DENSITY_PADDING[density]} ${className}`}
-    >
-      {resolvedIcon}
-      <div className={`min-w-0 flex-1 ${DENSITY_TEXT[density]} text-black`}>
-        {title && <div className="mb-0.5 font-bold">{title}</div>}
-        {children}
-      </div>
-      {actions && <div className="shrink-0">{actions}</div>}
-    </div>
-  );
-}

package/src/legacy/BottomSheet.tsx

@@ -1,76 +0,0 @@
-import { type HTMLAttributes, type ReactNode, useEffect } from "react";
-import { createPortal } from "react-dom";
-
-export interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
-  children: ReactNode;
-  onClose: () => void;
-  /** CSS z-index. Default 50 to match modal-layer surfaces. */
-  zIndex?: number;
-  /** Click outside the sheet closes it. Default true. */
-  dismissOnBackdrop?: boolean;
-  /** Lock body scroll while mounted. Default true. */
-  lockBodyScroll?: boolean;
-  /** Width class for the sheet card. */
-  widthClass?: string;
-  /** Extra classes on the sheet card. */
-  sheetClassName?: string;
-}
-
-/**
- * Mobile bottom sheet primitive.
- *
- * Unlike Lightbox, this has no dim backdrop. The sheet itself carries the
- * dialog affordance via brutal border + shadow while staying anchored to the
- * bottom safe area.
- */
-export default function BottomSheet({
-  children,
-  onClose,
-  zIndex = 50,
-  dismissOnBackdrop = true,
-  lockBodyScroll = true,
-  widthClass = "max-w-md",
-  sheetClassName = "",
-  className = "",
-  ...rest
-}: BottomSheetProps) {
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onClose]);
-
-  useEffect(() => {
-    if (!lockBodyScroll) return;
-    const prevBodyOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prevBodyOverflow;
-    };
-  }, [lockBodyScroll]);
-
-  return createPortal(
-    <div
-      {...rest}
-      className={`fixed inset-x-0 bottom-0 p-3 pb-[max(12px,env(safe-area-inset-bottom))] ${className}`}
-      style={{ zIndex, ...rest.style }}
-      onClick={
-        dismissOnBackdrop
-          ? (e) => {
-              if (e.target === e.currentTarget) onClose();
-            }
-          : undefined
-      }
-    >
-      <div
-        className={`mx-auto border-2 border-black bg-white shadow-brutal-lg ${widthClass} ${sheetClassName}`}
-        onClick={(event) => event.stopPropagation()}
-      >
-        {children}
-      </div>
-    </div>,
-    document.body,
-  );
-}

package/src/legacy/CheckMarker.tsx

@@ -1,72 +0,0 @@
-import { Check } from "lucide-react";
-import type { HTMLAttributes } from "react";
-
-export type CheckMarkerShape = "square" | "circle";
-export type CheckMarkerSize = "sm" | "md" | "lg";
-export type CheckMarkerTone = "black-fill" | "yellow-fill";
-
-const SIZE_CLASS: Record<CheckMarkerSize, string> = {
-  sm: "size-3.5",
-  md: "size-4",
-  lg: "size-5",
-};
-
-const ICON_PX: Record<CheckMarkerSize, number> = {
-  sm: 10,
-  md: 12,
-  lg: 13,
-};
-
-const STROKE_WIDTH: Record<CheckMarkerSize, number> = {
-  sm: 4,
-  md: 4,
-  lg: 3,
-};
-
-export interface CheckMarkerProps extends Omit<HTMLAttributes<HTMLSpanElement>, "size"> {
-  checked: boolean;
-  shape?: CheckMarkerShape;
-  size?: CheckMarkerSize;
-  tone?: CheckMarkerTone;
-  disabled?: boolean;
-  previewOnHover?: boolean;
-  className?: string;
-}
-
-export default function CheckMarker({
-  checked,
-  shape = "square",
-  size = "sm",
-  tone = "black-fill",
-  disabled = false,
-  previewOnHover = false,
-  className = "",
-  ...props
-}: CheckMarkerProps) {
-  const checkedClasses =
-    tone === "yellow-fill" ? "bg-brutal-yellow text-black" : "bg-black text-white";
-  const uncheckedClasses = previewOnHover
-    ? "bg-white text-transparent group-hover:text-black/20"
-    : "bg-white text-transparent";
-
-  return (
-    <span
-      {...props}
-      aria-hidden
-      className={[
-        "inline-flex shrink-0 items-center justify-center border-2 border-black transition-colors",
-        SIZE_CLASS[size],
-        shape === "circle" ? "rounded-full" : "",
-        checked ? checkedClasses : uncheckedClasses,
-        disabled ? "opacity-50" : "",
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      {(checked || previewOnHover) && (
-        <Check size={ICON_PX[size]} strokeWidth={STROKE_WIDTH[size]} />
-      )}
-    </span>
-  );
-}

package/src/legacy/Checkbox.tsx

@@ -1,81 +0,0 @@
-// Neo-Brutalist form checkbox primitive — sr-only native input + shared
-// CheckMarker visual, matching the form checkbox places already hand-rolled
-// before extraction (#proj-permission:1414ca65 msg=dabbb00e):
-//
-//   • ReportIssueDialog — 4 options + consent
-//   • OwnerOnboardingModal — opt-out
-//   • MessageInput — "As Task" toggle
-//   • AgentScopesPanel — permission rows (was native `accent-brutal-pink`)
-//
-// Why a custom span over native styling: the brutal design system uses
-// `border-2 border-black` everywhere; native `accent-color` ignores border
-// width and gives a soft fill. The `sr-only` input keeps a11y/keyboard/form
-// behavior intact while letting us paint the visual.
-//
-// API stays minimal — same shape as a native `<input type="checkbox">` plus a
-// `size` prop. Selection-only markers use CheckMarker directly so decorative
-// row selection does not inherit form semantics.
-//
-// The `<label>` wrapper that owns hover / cursor / disabled-opacity stays
-// the caller's job — different consumers compose this checkbox into
-// different row layouts (inline vs stacked, with description vs without),
-// and forcing one row layout would just push complexity into props.
-
-import type { InputHTMLAttributes } from "react";
-import CheckMarker, { type CheckMarkerSize } from "./CheckMarker";
-
-type Size = Extract<CheckMarkerSize, "sm" | "md">;
-
-export interface CheckboxProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "type" | "size"
-> {
-  /** Visual size of the checkbox box. Default `sm` (14px) matches the
-   *  existing inline callsites; use `md` (16px) for permission rows and
-   *  other settings-style lists. */
-  size?: Size;
-}
-
-// Inline sr-only equivalent so the native input stays visually hidden
-// regardless of whether the consumer's Tailwind has the `sr-only`
-// utility class generated. ui-inventory hit this — its Tailwind only
-// scans its own src, so primitive-internal class strings weren't being
-// generated and the OS-default checkbox visibly bled through.
-const SR_ONLY_STYLE = {
-  position: "absolute",
-  width: 1,
-  height: 1,
-  padding: 0,
-  margin: -1,
-  overflow: "hidden",
-  clip: "rect(0,0,0,0)",
-  whiteSpace: "nowrap",
-  borderWidth: 0,
-} as const;
-
-export default function Checkbox({
-  size = "sm",
-  checked,
-  disabled,
-  className = "",
-  ...rest
-}: CheckboxProps) {
-  return (
-    <span className="relative inline-flex shrink-0">
-      <input
-        type="checkbox"
-        checked={checked}
-        disabled={disabled}
-        style={SR_ONLY_STYLE}
-        {...rest}
-      />
-      <CheckMarker
-        checked={Boolean(checked)}
-        disabled={disabled}
-        size={size}
-        tone="black-fill"
-        className={className}
-      />
-    </span>
-  );
-}

package/src/legacy/ConversationPreviewCard.tsx

@@ -1,169 +0,0 @@
-import { forwardRef } from "react";
-import type { MouseEvent, ReactNode } from "react";
-import AvatarSlot from "./AvatarSlot";
-
-type ConversationAuthor =
-  | {
-      kind: "agent";
-      name: string;
-      avatarUrl?: string | null;
-      subtitle?: string | null;
-    }
-  | {
-      kind: "user";
-      name: string;
-      avatarUrl?: string | null;
-      gravatarHash?: string | null;
-      subtitle?: string | null;
-    };
-
-export interface ConversationPreviewCardProps {
-  channelLabel: string;
-  author?: ConversationAuthor | null;
-  timestamp?: string | null;
-  preview: string;
-  previewAuthor?: string | null;
-  previewLeading?: ReactNode;
-  previewLineClampClassName?: "line-clamp-2" | "line-clamp-3";
-  previewClassName?: string;
-  secondaryPreview?: ReactNode;
-  secondaryPreviewClassName?: string;
-  ariaLabel?: string;
-  title?: string;
-  testId?: string;
-  marker?: ReactNode;
-  footer?: ReactNode;
-  action?: ReactNode;
-  emphasized?: boolean;
-  focused?: boolean;
-  active?: boolean;
-  onClick?: () => void;
-  onContextMenu?: (event: MouseEvent) => void;
-}
-
-const ConversationPreviewCard = forwardRef<HTMLButtonElement, ConversationPreviewCardProps>(
-  function ConversationPreviewCard(
-    {
-      channelLabel,
-      author,
-      timestamp,
-      preview,
-      previewAuthor,
-      previewLeading,
-      previewLineClampClassName = "line-clamp-3",
-      previewClassName,
-      secondaryPreview,
-      secondaryPreviewClassName,
-      ariaLabel,
-      title,
-      testId,
-      marker,
-      footer,
-      action,
-      emphasized = false,
-      focused = false,
-      active = false,
-      onClick,
-      onContextMenu,
-    },
-    ref,
-  ) {
-    const interactive = Boolean(onClick || onContextMenu);
-    const className = `relative flex w-full items-start gap-3 border-2 p-3 text-left transition-colors hover:border-black hover:shadow-brutal-sm ${
-      interactive ? "active:border-black active:shadow-brutal-sm" : "cursor-default"
-    } ${
-      focused
-        ? "border-black bg-brutal-cyan/25 shadow-brutal"
-        : active
-          ? "border-black bg-white shadow-brutal-sm"
-          : "border-black/30 bg-white"
-    }`;
-    const content = (
-      <>
-        <div className="min-w-0 flex-1">
-          <div className="mb-1 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-xs leading-4">
-            <span className="font-bold text-black/50">{channelLabel}</span>
-            {author && !previewAuthor ? (
-              <span className="inline-flex min-w-0 items-center gap-1 font-bold text-black">
-                {author.kind === "agent" ? (
-                  <AvatarSlot
-                    context="preview-mini"
-                    type="agent"
-                    agentAvatarUrl={author.avatarUrl ?? null}
-                  />
-                ) : (
-                  <AvatarSlot
-                    context="preview-mini"
-                    type="human"
-                    humanAvatarUrl={author.avatarUrl ?? null}
-                    gravatarHash={author.gravatarHash ?? null}
-                  />
-                )}
-                <span className="truncate">{author.name}</span>
-                {author.subtitle ? (
-                  <span className="font-mono text-[10px] text-black/40">{author.subtitle}</span>
-                ) : null}
-              </span>
-            ) : null}
-            {marker}
-            {timestamp ? (
-              <span className="font-mono text-xs leading-4 text-black/40">{timestamp}</span>
-            ) : null}
-          </div>
-          <p
-            className={`${previewLineClampClassName} text-sm ${emphasized ? "font-bold" : ""} ${previewClassName ?? ""}`}
-          >
-            {previewLeading ? (
-              <span className="mr-1 inline-flex align-[-1px]">{previewLeading}</span>
-            ) : null}
-            {previewAuthor ? (
-              <span className="font-bold text-black/70">{previewAuthor}: </span>
-            ) : null}
-            <span>{preview}</span>
-          </p>
-          {secondaryPreview ? (
-            <p
-              className={`mt-1 line-clamp-1 text-xs ${secondaryPreviewClassName ?? "text-black/45"}`}
-            >
-              {secondaryPreview}
-            </p>
-          ) : null}
-          {footer ? <div className="mt-1 flex items-center gap-3">{footer}</div> : null}
-        </div>
-        {action ? <div className="shrink-0">{action}</div> : null}
-      </>
-    );
-
-    if (!interactive) {
-      return (
-        <div
-          aria-label={ariaLabel}
-          title={title}
-          data-testid={testId}
-          data-focused={focused ? "true" : undefined}
-          className={className}
-        >
-          {content}
-        </div>
-      );
-    }
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        onClick={onClick}
-        onContextMenu={onContextMenu}
-        aria-label={ariaLabel}
-        title={title}
-        data-testid={testId}
-        data-focused={focused ? "true" : undefined}
-        className={className}
-      >
-        {content}
-      </button>
-    );
-  },
-);
-
-export default ConversationPreviewCard;

package/src/legacy/DismissBackdrop.tsx

@@ -1,68 +0,0 @@
-import type { MouseEvent } from "react";
-import { Dialog } from "@base-ui/react/dialog";
-import { tv } from "../lib/tv";
-
-const dismissBackdrop = tv({
-  slots: {
-    popup: ["fixed inset-0"],
-  },
-  variants: {
-    theme: {
-      brutal: {},
-      elegant: {},
-    },
-  },
-  defaultVariants: {
-    theme: "brutal",
-  },
-});
-
-export type DismissBackdropProps = {
-  onDismiss: () => void;
-  zIndex?: number;
-  trapContextMenu?: boolean;
-  stopPropagation?: boolean;
-};
-
-export function DismissBackdrop({
-  onDismiss,
-  zIndex = 50,
-  trapContextMenu = false,
-  stopPropagation = false,
-}: DismissBackdropProps) {
-  const { popup } = dismissBackdrop();
-
-  return (
-    <Dialog.Root
-      open
-      modal={false}
-      onOpenChange={(open) => {
-        if (!open) onDismiss();
-      }}
-    >
-      <Dialog.Portal>
-        <Dialog.Popup
-          data-slot="dismiss-backdrop"
-          className={popup()}
-          style={{ zIndex }}
-          onClick={
-            stopPropagation
-              ? (event: MouseEvent<HTMLDivElement>) => {
-                  event.stopPropagation();
-                  event.preventDefault();
-                }
-              : onDismiss
-          }
-          onContextMenu={
-            trapContextMenu
-              ? (event: MouseEvent<HTMLDivElement>) => {
-                  event.preventDefault();
-                  onDismiss();
-                }
-              : undefined
-          }
-        />
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}

package/src/legacy/EmptyState.tsx

@@ -1,63 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-/**
- * Canonical empty-state primitive — used everywhere a surface needs to say
- * "nothing here yet" (ThreadPanel, SavedPanel, ChannelFilesPanel, TasksPanel,
- * NotificationCenter, AgentDetailPanel, AgentActivityLog, MobileComputersPanel,
- * ThreadsInbox, ChatPanel).
- *
- * Design contract locked in 2026-05-15 #proj-uiux:4e20fa91 (task #246) —
- * cindyz raised the screenshot, Joy + 跳虎 + Bugen aligned on B + C:
- *
- *   1. Title is sentence case. Callers pass the literal string they want
- *      rendered. This primitive does not force case CSS. Per CLAUDE.md
- *      "Text Styles", case-mangling is reserved for section labels (12px)
- *      and dialog titles. Empty-state titles are informational hints,
- *      neither category.
- *
- *   2. No icon frame. The previous wrapper rendered a soft-gray box that
- *      read as OS placeholder default, visually jarring next to
- *      brutal-bordered sibling surfaces. Removed. Icons render directly
- *      inside a `text-black/40` wrapper, letting the empty state recede
- *      naturally as a quiet info hint.
- *
- *   3. Icon size = 36 at the callsite. With the frame gone the icon loses
- *      visual mass; size 36 (up from 28) keeps empty states from looking
- *      deflated. Muted color carries the weight without needing a box.
- *
- *   4. Title color is muted, not pure black. The "No …" line should
- *      sit back as empty-state body copy instead of reading like a primary
- *      heading.
- *
- * Contract test: `packages/web/tests/emptyState.test.ts` reverse-greps the
- * source for the banned classes so the soft-frame look can't be
- * resurrected accidentally.
- */
-export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  icon: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  action?: ReactNode;
-}
-
-export default function EmptyState({
-  icon,
-  title,
-  description,
-  action,
-  className = "",
-  ...props
-}: EmptyStateProps) {
-  return (
-    <div {...props} className={["px-6 py-12 text-center", className].filter(Boolean).join(" ")}>
-      <div className="mb-4 inline-flex items-center justify-center text-black/40">{icon}</div>
-      <div className="mb-2 text-lg font-heading font-semibold text-black/60">{title}</div>
-      {description ? (
-        <div className="mx-auto max-w-[32ch] text-sm leading-relaxed text-black/60">
-          {description}
-        </div>
-      ) : null}
-      {action ? <div className="mt-5">{action}</div> : null}
-    </div>
-  );
-}