raft-ui 0.0.5 → 0.0.7

package/src/legacy/QuotedMessageCard.tsx

@@ -1,181 +0,0 @@
-import type { ReactNode } from "react";
-import { Hash, MessageSquare } from "lucide-react";
-import AvatarSlot from "./AvatarSlot.tsx";
-
-export interface QuotedMessageCardProps {
-  channelName: string;
-  channelKind?: "channel" | "dm";
-  isThread?: boolean;
-  isArchived?: boolean;
-  timestamp: string;
-  author: {
-    name: string;
-    avatar?: string;
-    gravatarHash?: string;
-    kind: "agent" | "user";
-    subtitle?: string;
-  };
-  content: string;
-  attachments?: { label: string }[];
-  onClick?: () => void;
-  unavailable?: boolean;
-}
-
-export function Tag({ children, className }: { children: ReactNode; className: string }) {
-  return (
-    <span
-      className={`inline-flex items-center gap-1 border-[1.5px] border-black px-1.5 py-0.5 text-[11px] font-bold leading-none ${className}`}
-    >
-      {children}
-    </span>
-  );
-}
-
-export function ThreadMarker() {
-  return (
-    <span className="inline-flex items-center gap-1 font-bold text-brutal-pink">
-      <MessageSquare size={10} className="shrink-0" />
-      Thread
-    </span>
-  );
-}
-
-function CompactUserAvatar({ author }: { author: QuotedMessageCardProps["author"] }) {
-  if (author.kind === "agent") {
-    return (
-      <AvatarSlot context="compact-list" type="agent" agentAvatarUrl={author.avatar ?? null} />
-    );
-  }
-
-  return (
-    <AvatarSlot
-      context="compact-list"
-      type="human"
-      humanAvatarUrl={author.avatar ?? null}
-      gravatarHash={author.gravatarHash ?? null}
-    />
-  );
-}
-
-function InlineMarkdownPreview({ markdown }: { markdown: string }) {
-  return <>{markdown}</>;
-}
-
-type PreviewShellProps = {
-  variant?: "default" | "muted";
-  onClick?: () => void;
-  className?: string;
-  "data-testid"?: string;
-  children: ReactNode;
-};
-
-function PreviewShell({
-  variant = "default",
-  onClick,
-  className,
-  children,
-  ...rest
-}: PreviewShellProps) {
-  const Root = onClick ? "button" : "div";
-  const skin =
-    variant === "muted"
-      ? "border-2 border-black/30 bg-black/5 italic text-black/40 hover:shadow-brutal-sm"
-      : "border border-black/15 bg-white hover:border-black/30 hover:bg-black/5";
-
-  return (
-    <Root
-      {...(onClick ? { type: "button" as const, onClick } : {})}
-      {...rest}
-      className={`${skin}${className ? ` ${className}` : ""}`}
-    >
-      {children}
-    </Root>
-  );
-}
-
-export default function QuotedMessageCard({
-  channelName,
-  channelKind = "channel",
-  isThread = false,
-  isArchived = false,
-  timestamp,
-  author,
-  content,
-  attachments,
-  onClick,
-  unavailable = false,
-}: QuotedMessageCardProps) {
-  if (unavailable) {
-    return (
-      <PreviewShell
-        variant="muted"
-        onClick={onClick}
-        data-testid="quoted-message-card"
-        className="group block w-full text-left"
-      >
-        <div className="px-2.5 py-2 sm:px-3 sm:py-2.5">
-          <div className="text-[13px] leading-snug">Message unavailable</div>
-        </div>
-      </PreviewShell>
-    );
-  }
-
-  return (
-    <PreviewShell
-      onClick={onClick}
-      data-testid="quoted-message-card"
-      className="group block w-full text-left"
-    >
-      <div className="px-2.5 py-2 sm:px-3 sm:py-2.5">
-        <div className="mb-1 flex items-start gap-2 sm:mb-1.5">
-          <div className="min-w-0 flex flex-1 flex-wrap items-center gap-x-1.5 gap-y-1 text-xs leading-none">
-            <span className="inline-flex items-center gap-1 font-bold text-black/70">
-              {channelKind === "dm" ? null : <Hash size={11} className="shrink-0" />}
-              {channelKind === "dm" ? `@${channelName}` : channelName}
-            </span>
-            <span className="text-black/30">·</span>
-            <span className="inline-flex min-w-0 items-center gap-1.5">
-              <CompactUserAvatar author={author} />
-              <span className="truncate font-bold text-black/70">{author.name}</span>
-              {author.subtitle ? (
-                <span className="truncate font-mono text-[10px] text-black/40">
-                  {author.subtitle}
-                </span>
-              ) : null}
-            </span>
-            {isThread ? (
-              <>
-                <span className="text-black/30">·</span>
-                <ThreadMarker />
-              </>
-            ) : null}
-            {isArchived ? (
-              <>
-                <span className="text-black/30">·</span>
-                <Tag className="bg-brutal-orange/30 text-black">Archived</Tag>
-              </>
-            ) : null}
-          </div>
-          <span className="shrink-0 font-mono text-[10px] text-black/40">{timestamp}</span>
-        </div>
-        <div className="min-w-0">
-          <div className="line-clamp-2 text-xs leading-snug text-black sm:text-[13px]">
-            <InlineMarkdownPreview markdown={content} />
-          </div>
-          {attachments?.length ? (
-            <div className="mt-2 flex flex-wrap gap-1.5">
-              {attachments.map((attachment) => (
-                <Tag
-                  key={attachment.label}
-                  className="bg-brutal-lavender font-mono text-[10px] font-bold text-black"
-                >
-                  {attachment.label}
-                </Tag>
-              ))}
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </PreviewShell>
-  );
-}

package/src/legacy/ReorderablePanelTabs.tsx

@@ -1,156 +0,0 @@
-import { useCallback, useMemo, type ComponentType, type RefObject } from "react";
-import {
-  closestCenter,
-  DndContext,
-  PointerSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from "@dnd-kit/core";
-import {
-  arrayMove,
-  horizontalListSortingStrategy,
-  SortableContext,
-  useSortable,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-
-export interface PanelTabItem<T extends string> {
-  id: T;
-  label: string;
-  icon: ComponentType<{ size?: number; className?: string }>;
-}
-
-function reconcilePanelTabOrder<T extends string>(
-  tabs: readonly PanelTabItem<T>[],
-  order: readonly string[],
-): PanelTabItem<T>[] {
-  const byId = new Map(tabs.map((tab) => [tab.id, tab]));
-  const next: PanelTabItem<T>[] = [];
-  const seen = new Set<string>();
-
-  for (const id of order) {
-    const tab = byId.get(id as T);
-    if (!tab || seen.has(tab.id)) continue;
-    next.push(tab);
-    seen.add(tab.id);
-  }
-
-  for (const tab of tabs) {
-    if (seen.has(tab.id)) continue;
-    next.push(tab);
-    seen.add(tab.id);
-  }
-
-  return next;
-}
-
-export function useOrderedPanelTabs<T extends string>(
-  tabs: readonly PanelTabItem<T>[],
-  storedOrder: readonly string[],
-) {
-  return useMemo(() => reconcilePanelTabOrder(tabs, storedOrder), [tabs, storedOrder]);
-}
-
-function SortablePanelTab<T extends string>({
-  tab,
-  active,
-  activeRef,
-  onClick,
-}: {
-  tab: PanelTabItem<T>;
-  active: boolean;
-  activeRef?: RefObject<HTMLButtonElement | null>;
-  onClick: () => void;
-}) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: tab.id,
-  });
-  const Icon = tab.icon;
-  const horizontalTransform = transform ? { ...transform, y: 0 } : null;
-  const style = {
-    transform: CSS.Transform.toString(horizontalTransform),
-    transition,
-    zIndex: isDragging ? 20 : undefined,
-  };
-
-  return (
-    <button
-      ref={(node) => {
-        setNodeRef(node);
-        if (activeRef) activeRef.current = node;
-      }}
-      type="button"
-      onClick={onClick}
-      className={`flex shrink-0 touch-manipulation items-center gap-1.5 whitespace-nowrap border-r-2 border-black px-4 py-1.5 text-xs font-bold transition-colors ${
-        active ? "bg-brutal-yellow" : "bg-white hover:bg-black/5"
-      }`}
-      style={style}
-      data-testid={`panel-tab-${tab.id}`}
-      {...attributes}
-      {...listeners}
-    >
-      <Icon size={12} />
-      <span>{tab.label}</span>
-    </button>
-  );
-}
-
-export default function ReorderablePanelTabs<T extends string>({
-  tabs,
-  activeTab,
-  activeTabRef,
-  onSelectTab,
-  onReorderTabs,
-}: {
-  tabs: readonly PanelTabItem<T>[];
-  activeTab: T;
-  activeTabRef?: RefObject<HTMLButtonElement | null>;
-  onSelectTab: (tab: T) => void;
-  onReorderTabs: (tabs: T[]) => void;
-}) {
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
-    useSensor(TouchSensor, { activationConstraint: { delay: 350, tolerance: 8 } }),
-  );
-
-  const tabIds = useMemo(() => tabs.map((tab) => tab.id), [tabs]);
-  const handleDragEnd = useCallback(
-    ({ active, over }: DragEndEvent) => {
-      if (!over || active.id === over.id) return;
-      const activeId = String(active.id) as T;
-      const overId = String(over.id) as T;
-      const oldIndex = tabIds.indexOf(activeId);
-      const newIndex = tabIds.indexOf(overId);
-      if (oldIndex === -1 || newIndex === -1) return;
-      onReorderTabs(arrayMove(tabIds, oldIndex, newIndex));
-    },
-    [onReorderTabs, tabIds],
-  );
-
-  return (
-    <div className="overflow-x-auto border-b-2 border-black bg-white scrollbar-none">
-      <DndContext
-        autoScroll={false}
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={handleDragEnd}
-      >
-        <SortableContext items={tabIds} strategy={horizontalListSortingStrategy}>
-          <div className="flex min-w-max">
-            {tabs.map((tab) => (
-              <SortablePanelTab
-                key={tab.id}
-                tab={tab}
-                active={activeTab === tab.id}
-                activeRef={activeTab === tab.id ? activeTabRef : undefined}
-                onClick={() => onSelectTab(tab.id)}
-              />
-            ))}
-          </div>
-        </SortableContext>
-      </DndContext>
-    </div>
-  );
-}

package/src/legacy/SandboxedPreviewFrame.tsx

@@ -1,59 +0,0 @@
-import type { CSSProperties } from "react";
-
-/**
- * Shared isolation primitive for previewing attacker-controlled content
- * (anyone — human or agent — can upload a hostile attachment, or author a
- * markdown ```mermaid block).
- *
- * The iframe is the real security boundary: with no `allow-same-origin` in
- * `sandbox`, the framed content runs in an opaque origin and cannot touch
- * Raft's DOM / cookies / localStorage. This is strictly stronger than
- * sanitizing a string and hoping the sanitizer has no gaps.
- *
- * Two callsites share this one implementation so the isolation config can't
- * drift between them:
- *  - HTML attachment preview: `src` (scoped backend URL) + `sandbox="allow-scripts"`
- *    (interactive HTML/diagrams need scripts; still no same-origin).
- *  - Mermaid diagram: `srcDoc` (front-end-generated SVG doc) + empty `sandbox`
- *    (static SVG needs zero scripts — the most locked-down setting).
- *
- * @Bugen security review 2026-05-18 #proj-uiux:df4d393b.
- */
-export interface SandboxedPreviewFrameProps {
-  /** External (scoped) URL to frame. Mutually exclusive with `srcDoc`. */
-  src?: string;
-  /** Inline document to frame. Mutually exclusive with `src`. */
-  srcDoc?: string;
-  /**
-   * iframe `sandbox` token list. Default `""` = maximally locked (no scripts,
-   * no same-origin). Never pass `allow-same-origin` for untrusted content —
-   * it dissolves the origin boundary.
-   */
-  sandbox?: string;
-  title: string;
-  className?: string;
-  style?: CSSProperties;
-  referrerPolicy?: React.HTMLAttributeReferrerPolicy;
-}
-
-export default function SandboxedPreviewFrame({
-  src,
-  srcDoc,
-  sandbox = "",
-  title,
-  className,
-  style,
-  referrerPolicy = "no-referrer",
-}: SandboxedPreviewFrameProps) {
-  return (
-    <iframe
-      title={title}
-      src={src}
-      srcDoc={srcDoc}
-      sandbox={sandbox}
-      referrerPolicy={referrerPolicy}
-      className={className}
-      style={style}
-    />
-  );
-}

package/src/legacy/SearchInput.tsx

@@ -1,23 +0,0 @@
-import type { InputHTMLAttributes } from "react";
-import { Search } from "lucide-react";
-
-type SearchInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "className"> & {
-  className?: string;
-  inputClassName?: string;
-};
-
-export default function SearchInput({
-  className = "",
-  inputClassName = "",
-  ...props
-}: SearchInputProps) {
-  return (
-    <div className={`input-brutal flex w-full items-center gap-2 ${className}`.trim()}>
-      <Search size={15} className="shrink-0 text-black/50" />
-      <input
-        {...props}
-        className={`min-w-0 flex-1 bg-transparent font-heading outline-none ${inputClassName}`.trim()}
-      />
-    </div>
-  );
-}

package/src/legacy/SectionEyebrow.tsx

@@ -1,60 +0,0 @@
-/**
- * Canonical section-eyebrow label — replaces the inline
- * `text-xs font-bold uppercase text-black/60 tracking-widest` pattern
- * that appears 40+ times across panels, dialogs, and list headers.
- *
- * stdrc 2026-05-11 #wg-theme:93c5897c assigned this to @Wug as the
- * next Tier 1 component after PanelHeader / AvatarSlot / AvatarListRow /
- * Banner. Per @Duoyu audit msg=cc6f5542 the eyebrow class string was the
- * single biggest repeated typographic pattern in the codebase.
- *
- * The component renders the locked typographic token and accepts:
- * - `as` — element type (`"span"` | `"div"` | `"label"`, default `"span"`)
- * - `className` — callsite-specific additions (margin, padding, bg, color)
- * - `htmlFor` — forwarded when `as="label"`
- * - `children` — label text
- *
- * Do NOT inline new section eyebrows — use this primitive instead.
- *
- * Default color is `text-black/60`. To get a fully-black eyebrow
- * (e.g. Sidebar section toggle, MachineDetailPanel running label),
- * pass `className="!text-black"` to override.
- */
-
-import type { LabelHTMLAttributes, ReactNode } from "react";
-
-const BASE_CLASS = "text-xs font-bold uppercase text-black/60 tracking-widest";
-
-export type SectionEyebrowProps = {
-  /** HTML element to render. Default `"span"`. Use `"div"` for block-level
-   *  eyebrows (e.g. with `mb-3`), `"label"` for form field labels. */
-  as?: "span" | "div" | "label";
-  /** Additional classes — appended to the base token. Useful for margin
-   *  (`mb-3`), padding (`px-3 py-1.5`), background (`bg-white/50`), or
-   *  color overrides (`!text-black`). */
-  className?: string;
-  /** Eyebrow text / nodes. */
-  children?: ReactNode;
-  /** When `as="label"`, forward to the `<label htmlFor>` attribute. */
-  htmlFor?: LabelHTMLAttributes<HTMLLabelElement>["htmlFor"];
-};
-
-export default function SectionEyebrow({
-  as: Tag = "span",
-  className = "",
-  children,
-  htmlFor,
-}: SectionEyebrowProps) {
-  const cls = `${BASE_CLASS} ${className}`.trim();
-  if (Tag === "label") {
-    return (
-      <label className={cls} htmlFor={htmlFor}>
-        {children}
-      </label>
-    );
-  }
-  if (Tag === "div") {
-    return <div className={cls}>{children}</div>;
-  }
-  return <span className={cls}>{children}</span>;
-}

package/src/legacy/SectionHeader.tsx

@@ -1,68 +0,0 @@
-/**
- * Canonical section header — eyebrow label + optional count badge + optional
- * trailing action button.
- *
- * Generalizes the inline `flex items-center justify-between` + `SectionEyebrow`
- * + counter + action button pattern that appears 15+ times across detail
- * panels, settings, channel members, agent reminders, etc.
- *
- * Background: stdrc 2026-05-12 #wg-theme:a987f888 asked for strong-signal
- * primitives to be lifted in one PR. SectionHeader is the third of the three.
- * It composes the existing `SectionEyebrow` primitive (so the eyebrow token
- * stays canonical) rather than duplicating its class string.
- *
- * Slots:
- * - `label`     — the eyebrow text
- * - `icon`      — optional leading icon node (e.g. `<Bell size={16} />`),
- *                 rendered in `text-black/60` next to the eyebrow
- * - `count`     — optional integer badge rendered after the label in
- *                 `text-black/40 font-mono` (rendered only when defined and
- *                 ≥ 0; pass `undefined` / `null` to hide)
- * - `action`    — optional right-aligned action node (e.g. `<button>` to add)
- * - `htmlFor`   — when set, the eyebrow becomes a `<label htmlFor>` for the
- *                 region's main control
- * - `className` — additional classes on the outer wrapper (e.g. `mb-2`,
- *                 `border-b-2 border-black pb-2`)
- *
- * Typography is locked via `SectionEyebrow`; do NOT pass eyebrow class
- * overrides here — if a section needs a different style, it shouldn't be a
- * SectionHeader.
- */
-
-import type { ReactNode } from "react";
-import SectionEyebrow from "./SectionEyebrow.tsx";
-
-export type SectionHeaderProps = {
-  label: ReactNode;
-  icon?: ReactNode;
-  count?: number | null;
-  action?: ReactNode;
-  htmlFor?: string;
-  className?: string;
-};
-
-export default function SectionHeader({
-  label,
-  icon,
-  count,
-  action,
-  htmlFor,
-  className,
-}: SectionHeaderProps) {
-  const wrapperCls = `flex items-center justify-between gap-2${className ? ` ${className}` : ""}`;
-  const eyebrowAs: "label" | "div" = htmlFor ? "label" : "div";
-  return (
-    <div className={wrapperCls}>
-      <div className="flex min-w-0 items-center gap-2">
-        {icon ? <span className="shrink-0 text-black/60">{icon}</span> : null}
-        <SectionEyebrow as={eyebrowAs} htmlFor={htmlFor}>
-          {label}
-          {typeof count === "number" && count >= 0 ? (
-            <span className="ml-2 font-mono text-black/40">{count}</span>
-          ) : null}
-        </SectionEyebrow>
-      </div>
-      {action ? <div className="shrink-0">{action}</div> : null}
-    </div>
-  );
-}

package/src/legacy/SegmentedControl.tsx

@@ -1,74 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface SegmentedControlOption<T extends string> {
-  value: T;
-  label: ReactNode;
-  count?: number;
-  icon?: ReactNode;
-  testId?: string;
-}
-
-export interface SegmentedControlProps<T extends string> {
-  value: T;
-  options: SegmentedControlOption<T>[];
-  onChange: (value: T) => void;
-  ariaLabel?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-export default function SegmentedControl<T extends string>({
-  value,
-  options,
-  onChange,
-  ariaLabel,
-  disabled = false,
-  className = "",
-}: SegmentedControlProps<T>) {
-  return (
-    <div
-      role="radiogroup"
-      aria-label={ariaLabel}
-      aria-disabled={disabled || undefined}
-      className={`inline-flex max-w-full flex-wrap items-center gap-1 ${
-        disabled ? "opacity-50" : ""
-      } ${className}`}
-    >
-      {options.map((option) => {
-        const active = option.value === value;
-        return (
-          <button
-            key={option.value}
-            type="button"
-            role="radio"
-            aria-checked={active}
-            data-testid={option.testId}
-            disabled={disabled}
-            onClick={() => onChange(option.value)}
-            className={`flex h-7 min-w-0 shrink-0 items-center gap-1 border-2 border-black px-2 text-xs font-bold transition-colors ${
-              disabled ? "cursor-not-allowed" : ""
-            } ${
-              active
-                ? "bg-brutal-yellow text-black shadow-brutal-sm"
-                : disabled
-                  ? "bg-white text-black"
-                  : "bg-white text-black hover:bg-brutal-yellow/30"
-            }`}
-          >
-            {option.icon}
-            <span className="truncate">{option.label}</span>
-            {typeof option.count === "number" && option.count > 0 ? (
-              <span
-                className={`font-mono text-[10px] leading-none ${
-                  active ? "text-black/60" : "text-black/40"
-                }`}
-              >
-                {option.count}
-              </span>
-            ) : null}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

package/src/legacy/SlugInput.tsx

@@ -1,29 +0,0 @@
-import type { InputHTMLAttributes } from "react";
-
-type SlugInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "className"> & {
-  className?: string;
-  inputClassName?: string;
-};
-
-export default function SlugInput({
-  className = "",
-  inputClassName = "",
-  ...props
-}: SlugInputProps) {
-  return (
-    <div
-      className={`input-brutal flex w-full items-stretch overflow-hidden px-0 py-0 focus-within:shadow-brutal ${className}`.trim()}
-    >
-      <span
-        aria-hidden="true"
-        className="flex shrink-0 items-center border-r-2 border-black bg-brutal-yellow/30 px-3 font-heading font-bold text-black/70"
-      >
-        /
-      </span>
-      <input
-        {...props}
-        className={`min-w-0 flex-1 bg-transparent px-3 py-2 font-heading outline-none ${inputClassName}`.trim()}
-      />
-    </div>
-  );
-}