@horon-ai/react 0.0.0-stage → 0.1.0

package/src/components/agent-steering-panel.tsx

@@ -0,0 +1,274 @@
+import { ArrowElbowDownLeft, ArrowUp, Check, Lightning, Path, Pause, Play, X } from "@phosphor-icons/react";
+import { type ComponentProps, type CSSProperties, type ReactNode, useState } from "react";
+
+import { cn } from "../lib/cn";
+import { Kbd } from "./kbd";
+import { Spinner } from "./spinner";
+
+export type SteeringStepStatus = "done" | "active" | "todo";
+
+export type SteeringStep = {
+  id: string;
+  label: ReactNode;
+  status: SteeringStepStatus;
+  /** Duration of a finished or running step, such as "1.4s". */
+  time?: ReactNode;
+};
+
+export type SteeringNote = {
+  id: string;
+  text: ReactNode;
+  /** An applied note has left the queue and carries the "Now" pill. */
+  applied?: boolean;
+};
+
+export type AgentSteeringPanelProps = Omit<ComponentProps<"section">, "className" | "title"> & {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  /** The status text beside the live dot, such as "Running · 2m 10s". */
+  status?: ReactNode;
+  paused?: boolean;
+  onPausedChange?: (paused: boolean) => void;
+  steps: SteeringStep[];
+  notes?: SteeringNote[];
+  onApplyNow?: (id: string) => void;
+  onRemoveNote?: (id: string) => void;
+  /** Called with the text typed in the steer box: Enter queues it for the next step, ⌘Enter interrupts now. */
+  onSteer?: (text: string, interrupt: boolean) => void;
+  placeholder?: string;
+  className?: string;
+};
+
+const noNotes: SteeringNote[] = [];
+type IndexStyle = CSSProperties & { "--i": number };
+const indexStyle = (i: number): IndexStyle => ({ "--i": i });
+
+function Marker({ status }: { status: SteeringStepStatus }) {
+  if (status === "done") {
+    return (
+      <span className="flex size-4.5 animate-pop-in items-center justify-center rounded-full bg-status-live text-text-on-ink">
+        <Check aria-label="Done" weight="bold" className="size-3" />
+      </span>
+    );
+  }
+  if (status === "active") return <Spinner size={18} label="Running" />;
+  return <span aria-label="Waiting" className="size-4.5 rounded-full border border-dashed border-border-dashed" />;
+}
+
+function SteeringNoteRow({
+  note,
+  onApplyNow,
+  onRemoveNote,
+}: {
+  note: SteeringNote;
+  onApplyNow?: (id: string) => void;
+  onRemoveNote?: (id: string) => void;
+}) {
+  const [leaving, setLeaving] = useState(false);
+  return (
+    <li
+      className={cn(
+        "flex items-center gap-2.5 rounded-[10px] bg-overlay-ink-4 py-2 pr-2.5 pl-3.5",
+        leaving ? "animate-pop-out" : "motion-rise",
+      )}
+      onAnimationEnd={(event) => {
+        if (leaving && event.target === event.currentTarget) onRemoveNote?.(note.id);
+      }}
+    >
+      <span className="min-w-0 flex-1 text-body-sm text-text-primary">{note.text}</span>
+      <span className="motion-swap shrink-0 justify-items-end">
+        <span
+          className="flex items-center gap-1.5"
+          data-hidden={note.applied || undefined}
+          aria-hidden={note.applied || undefined}
+        >
+          <button
+            type="button"
+            tabIndex={note.applied ? -1 : undefined}
+            onClick={() => onApplyNow?.(note.id)}
+            className="flex h-6.5 shrink-0 motion-press cursor-pointer items-center gap-1 rounded-full bg-overlay-ink-6 px-2 text-label-sm text-text-primary hover:bg-overlay-ink-10 focus-visible:outline-2 focus-visible:outline-text-brand"
+          >
+            <Lightning aria-hidden className="size-3" />
+            Now
+          </button>
+          <button
+            type="button"
+            aria-label="Remove note"
+            tabIndex={note.applied ? -1 : undefined}
+            onClick={() => setLeaving(true)}
+            className="flex size-6 shrink-0 motion-press cursor-pointer items-center justify-center rounded-full text-text-secondary hover:text-text-primary focus-visible:outline-2 focus-visible:outline-text-brand"
+          >
+            <X aria-hidden className="size-3.5" />
+          </button>
+        </span>
+        <span
+          className="flex h-6.5 items-center gap-1 rounded-full bg-interactive-primary px-2 text-label-sm text-text-inverse"
+          data-hidden={!note.applied || undefined}
+          aria-hidden={!note.applied || undefined}
+        >
+          <Lightning aria-hidden weight="fill" className="size-3" />
+          Now
+        </span>
+      </span>
+    </li>
+  );
+}
+
+/**
+ * Paper `Agent steering` (Y51-1): a 24px-radius surface panel with the running task header, a step rail, the notes
+ * queued for the next step, and a steer box. The live dot pulses every 2s, a step marker swaps with a short pop,
+ * new steps rise in 220ms, and send and pause press in 150ms.
+ */
+export function AgentSteeringPanel({
+  title,
+  subtitle,
+  status,
+  paused = false,
+  onPausedChange,
+  steps,
+  notes = noNotes,
+  onApplyNow,
+  onRemoveNote,
+  onSteer,
+  placeholder = "Steer the bot…",
+  className,
+  ...props
+}: AgentSteeringPanelProps) {
+  const [draft, setDraft] = useState("");
+  const queued = notes.filter((note) => !note.applied);
+  const submit = (interrupt: boolean) => {
+    const text = draft.trim();
+    if (!text) return;
+    onSteer?.(text, interrupt);
+    setDraft("");
+  };
+
+  return (
+    <section
+      className={cn(
+        "flex w-full max-w-130 min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-wrap items-center gap-x-2.5 gap-y-2 px-5 pt-4 pb-3.5">
+        <Path aria-hidden className="size-4.5 shrink-0 text-text-primary" />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <h3 className="truncate text-label-lg text-text-primary">{title}</h3>
+          {subtitle && <p className="truncate text-caption text-text-secondary">{subtitle}</p>}
+        </div>
+        <span
+          aria-hidden
+          className={cn(
+            "size-1.5 shrink-0 rounded-full bg-status-live text-status-live",
+            !paused && "animate-live-pulse",
+          )}
+        />
+        {status && <span className="min-w-0 truncate text-body-sm text-text-secondary tabular-nums">{status}</span>}
+        <button
+          type="button"
+          aria-label={paused ? "Resume" : "Pause"}
+          aria-pressed={paused}
+          onClick={() => onPausedChange?.(!paused)}
+          className="flex size-7.5 shrink-0 motion-press cursor-pointer items-center justify-center rounded-full bg-overlay-ink-6 text-text-primary hover:bg-overlay-ink-10 focus-visible:outline-2 focus-visible:outline-text-brand"
+        >
+          <span className="motion-swap size-4">
+            <Play aria-hidden weight="fill" data-hidden={!paused || undefined} className="size-4" />
+            <Pause aria-hidden weight="fill" data-hidden={paused || undefined} className="size-4" />
+          </span>
+        </button>
+      </div>
+      <div className="h-px bg-overlay-ink-8" />
+
+      <ol className="flex flex-col gap-3 px-5 py-3">
+        {steps.map((step, index) => (
+          <li
+            key={step.id}
+            style={indexStyle(index)}
+            className="relative flex min-h-6.5 motion-rise items-center gap-3"
+          >
+            <span className="flex h-6.5 w-5 shrink-0 items-center justify-center">
+              <Marker key={step.status} status={step.status} />
+            </span>
+            {index < steps.length - 1 && (
+              <span
+                aria-hidden
+                className={cn(
+                  "absolute top-[calc(50%+12.5px)] bottom-[-18px] left-2.5 w-px",
+                  step.status === "done" ? "bg-status-live" : "bg-overlay-ink-10",
+                )}
+              />
+            )}
+            <span
+              className={cn(
+                "min-w-0 flex-1 text-body-sm motion-colors",
+                step.status === "todo" ? "text-text-secondary" : "text-text-primary",
+              )}
+            >
+              {step.label}
+            </span>
+            {step.time && <span className="shrink-0 text-caption text-text-secondary tabular-nums">{step.time}</span>}
+          </li>
+        ))}
+      </ol>
+      <div className="h-px bg-overlay-ink-8" />
+
+      <div className="flex flex-col gap-2.5 px-5 py-3.5">
+        <div className="motion-reveal" data-collapsed={notes.length === 0 || undefined}>
+          <div className="flex flex-col gap-2.5">
+            <p className="flex items-center gap-2 text-caption text-text-secondary">
+              Queued for the next step
+              <Kbd>{queued.length}</Kbd>
+            </p>
+            <ul className="flex flex-col gap-2">
+              {notes.map((note) => (
+                <SteeringNoteRow key={note.id} note={note} onApplyNow={onApplyNow} onRemoveNote={onRemoveNote} />
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="flex h-11 items-center gap-2 rounded-full bg-overlay-ink-5 pr-1.5 pl-4">
+          <input
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+              if (event.key === "Enter") {
+                event.preventDefault();
+                submit(event.metaKey || event.ctrlKey);
+              }
+            }}
+            placeholder={placeholder}
+            aria-label={placeholder}
+            className="min-w-0 flex-1 bg-transparent text-body-sm text-text-primary outline-none placeholder:text-text-secondary"
+          />
+          <button
+            type="button"
+            aria-label="Send"
+            onClick={() => submit(false)}
+            className="flex size-8 shrink-0 motion-press cursor-pointer items-center justify-center rounded-full bg-interactive-primary text-text-inverse focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
+          >
+            <ArrowUp aria-hidden className="size-4" />
+          </button>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-3.5 gap-y-1.5 text-caption text-text-secondary">
+          <span className="flex items-center gap-1.25">
+            <Kbd>
+              <ArrowElbowDownLeft aria-hidden />
+            </Kbd>
+            next step
+          </span>
+          <span className="flex items-center gap-1.25">
+            <Kbd>⌘</Kbd>
+            <Kbd>
+              <ArrowElbowDownLeft aria-hidden />
+            </Kbd>
+            interrupt now
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/approval-card.tsx

@@ -0,0 +1,89 @@
+import { Paperclip } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { LiquidGlass } from "./liquid-glass";
+
+export type ApprovalState = "pending" | "approved" | "declined";
+export type ApprovalCardSurface = "solid" | "glass";
+
+export type ApprovalCardProps = {
+  state?: ApprovalState;
+  /** `solid` (default) on raised surfaces, `glass` over imagery and glass panels. */
+  surface?: ApprovalCardSurface;
+  /** Status line, defaults to "Needs your yes", "Approved" or "Declined". */
+  status?: ReactNode;
+  /** The question, such as "Send the Q3 board deck to the team?". */
+  title: ReactNode;
+  /** Name of the attached item. */
+  attachment?: ReactNode;
+  onApprove?: () => void;
+  onLater?: () => void;
+  approveLabel?: string;
+  laterLabel?: string;
+  className?: string;
+};
+
+const statusClass: Record<ApprovalState, { dot: string; text: string; label: string }> = {
+  pending: { dot: "bg-status-live", text: "text-text-brand", label: "Needs your yes" },
+  approved: { dot: "bg-text-secondary", text: "text-text-secondary", label: "Approved" },
+  declined: { dot: "bg-accent-red-500-90", text: "text-text-danger", label: "Declined" },
+};
+
+/**
+ * Figma `Approval card` (64:398): the conversation part that asks for an action.
+ * Pending keeps the brand rim and the actions.
+ */
+export function ApprovalCard({
+  state = "pending",
+  surface = "solid",
+  status,
+  title,
+  attachment,
+  onApprove,
+  onLater,
+  approveLabel = "Approve",
+  laterLabel = "Later",
+  className,
+}: ApprovalCardProps) {
+  const tone = statusClass[state];
+  return (
+    <div
+      className={cn(
+        "relative flex w-full max-w-90 min-w-0 flex-col items-start overflow-clip rounded-xl p-4 motion-colors md:w-90",
+        surface === "glass"
+          ? cn("bg-glass-thick", state === "pending" && "[--glass-edge:var(--color-border-brand)]")
+          : cn("border border-border-default bg-bg-surface", state === "pending" && "border-border-brand"),
+        className,
+      )}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <div className={cn("relative flex items-center gap-1.5 text-label-sm motion-colors", tone.text)}>
+        <span aria-hidden className={cn("size-2 rounded-full motion-colors", tone.dot)} />
+        <span key={state} className="animate-fade-in">
+          {status ?? tone.label}
+        </span>
+      </div>
+      <p className="relative mt-3 text-label-lg text-text-primary">{title}</p>
+      {attachment && (
+        <div className="relative mt-3 flex max-w-full min-w-0 items-center gap-2 rounded-md bg-overlay-ink-5 px-3 py-2 text-body-sm text-text-primary">
+          <Paperclip aria-hidden className="size-3.5 shrink-0 text-text-secondary" />
+          <span className="min-w-0 truncate">{attachment}</span>
+        </div>
+      )}
+      <div className="motion-reveal w-full" data-collapsed={state !== "pending" || undefined}>
+        <div>
+          <div className="flex w-full justify-end gap-2 pt-3" inert={state !== "pending"}>
+            <Button size="sm" variant={surface === "glass" ? "glass" : "solid"} onClick={onLater}>
+              {laterLabel}
+            </Button>
+            <Button size="sm" onClick={onApprove}>
+              {approveLabel}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/avatar.tsx

@@ -0,0 +1,104 @@
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { Robot } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+
+export type AvatarProps = {
+  /** `initials` (default), `bot` (robot on the brand tint) or `image`. */
+  type?: "initials" | "bot" | "image";
+  size?: AvatarSize;
+  /** Image URL for `type="image"`; initials show while it loads or if it fails. */
+  src?: string;
+  alt?: string;
+  /** Initials, or any fallback content. */
+  children?: ReactNode;
+  /** Shows the live status dot at the bottom right. */
+  live?: boolean;
+  /** Initials colour: `neutral` (default) or `sky`, the Paper account profile avatar (sky-100 fill, sky-700 text). */
+  tone?: "neutral" | "sky";
+  /**
+   * Border colour of the live dot, so it matches the surface behind it (glass panels, `bg-subtle`, brand tints).
+   * Defaults to `border-bg-surface`.
+   */
+  liveRingClassName?: string;
+  className?: string;
+};
+
+const sizeClass: Record<AvatarSize, string> = {
+  sm: "size-6 text-label-sm",
+  md: "size-8 text-label-md",
+  lg: "size-10 text-label-lg",
+  xl: "size-14 text-title-sm",
+};
+
+const botIconClass: Record<AvatarSize, string> = {
+  sm: "size-[13px]",
+  md: "size-[18px]",
+  lg: "size-[22px]",
+  xl: "size-[31px]",
+};
+
+/** Live dot outer size: Figma dot diameter (10, 11, 13, 18) plus its 2px centered white stroke. */
+const liveClass: Record<AvatarSize, string> = {
+  sm: "size-2.5",
+  md: "size-[11px]",
+  lg: "size-[13px]",
+  xl: "size-[18px]",
+};
+
+const typeClass = {
+  initials: "bg-bg-subtle text-text-secondary",
+  bot: "bg-bg-brand text-text-brand",
+  image: "bg-sky-200 text-text-secondary",
+} as const;
+
+/** Figma `Avatar` (61:347): Initials, Bot and Image in four sizes, with an optional live dot. */
+export function Avatar({
+  type = "initials",
+  size = "md",
+  src,
+  alt = "",
+  children,
+  live,
+  tone = "neutral",
+  liveRingClassName = "border-bg-surface",
+  className,
+}: AvatarProps) {
+  return (
+    <span className={cn("relative inline-flex shrink-0", className)}>
+      <BaseAvatar.Root
+        className={cn(
+          "inline-flex items-center justify-center overflow-clip rounded-full inset-ring-1 inset-ring-overlay-ink-6 select-none",
+          sizeClass[size],
+          typeClass[type],
+          type === "initials" && tone === "sky" && "bg-sky-100 text-sky-700",
+        )}
+      >
+        {type === "bot" ? (
+          <Robot aria-hidden className={botIconClass[size]} />
+        ) : (
+          <>
+            {type === "image" && src && (
+              <BaseAvatar.Image src={src} alt={alt} className="size-full object-cover motion-fade" />
+            )}
+            <BaseAvatar.Fallback>{children}</BaseAvatar.Fallback>
+          </>
+        )}
+      </BaseAvatar.Root>
+      {live && (
+        <span aria-hidden className="absolute -right-px -bottom-px flex animate-pop-in">
+          <span
+            className={cn(
+              "animate-live-pulse rounded-full border-2 bg-status-live text-status-live",
+              liveRingClassName,
+              liveClass[size],
+            )}
+          />
+        </span>
+      )}
+    </span>
+  );
+}

package/src/components/badge.tsx

@@ -0,0 +1,63 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+/** `surface` is the white (raised surface) pill with a 1px default border and primary text. */
+export type BadgeTone = "neutral" | "brand" | "danger" | "solid" | "surface";
+export type BadgeSize = ControlSize;
+
+export type BadgeProps = Omit<ComponentProps<"span">, "className"> & {
+  tone?: BadgeTone;
+  /** Leading status dot; 4px (sm), 6px (md) or 8px (lg). */
+  dot?: boolean;
+  /** `md` is the 22px Figma Badge; `sm` 20px and `lg` 26px. */
+  size?: BadgeSize;
+  className?: string;
+};
+
+const sizeClass: Record<BadgeSize, string> = {
+  sm: "h-5 gap-1 px-1.5 text-caption",
+  md: "h-5.5 gap-1.5 px-2 text-label-sm",
+  lg: "h-6.5 gap-1.5 px-2.5 text-label-md",
+};
+
+const dotSizeClass: Record<BadgeSize, string> = {
+  sm: "size-1",
+  md: "size-1.5",
+  lg: "size-2",
+};
+
+const toneClass: Record<BadgeTone, string> = {
+  neutral: "bg-overlay-ink-6 text-text-secondary",
+  brand: "bg-accent-sky-500-18 text-text-brand",
+  danger: "bg-accent-red-500-14 text-text-danger",
+  solid: "bg-interactive-primary text-interactive-on-primary",
+  surface: "border border-border-default bg-bg-surface text-text-primary",
+};
+
+const dotClass: Record<BadgeTone, string> = {
+  neutral: "bg-text-secondary",
+  brand: "bg-status-live",
+  danger: "bg-text-danger",
+  solid: "bg-interactive-on-primary",
+  surface: "bg-text-primary",
+};
+
+/** Figma `Badge` (61:283): a 22px translucent pill with label-sm text. */
+export function Badge({ tone = "neutral", dot, size = "md", className, children, ...props }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full whitespace-nowrap",
+        sizeClass[size],
+        toneClass[tone],
+        className,
+      )}
+      {...props}
+    >
+      {dot && <span aria-hidden className={cn("shrink-0 rounded-full", dotSizeClass[size], dotClass[tone])} />}
+      <span className="text-trim">{children}</span>
+    </span>
+  );
+}

package/src/components/banner.tsx

@@ -0,0 +1,103 @@
+import { Info, WarningCircle } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { LiquidGlass } from "./liquid-glass";
+
+export type BannerTone = "info" | "danger";
+export type BannerSize = ControlSize;
+export type BannerSurface = "solid" | "glass";
+
+export type BannerProps = Omit<ComponentProps<"div">, "className"> & {
+  tone?: BannerTone;
+  /** Trailing underlined action, such as a link or button. */
+  action?: ReactNode;
+  /** Banner size: `sm` 32px minimum, `md` the Figma 48px strip (default), `lg` 56px; scales icon, text and padding. */
+  size?: BannerSize;
+  /** `solid` (default) on raised surfaces, `glass` over imagery and glass panels. */
+  surface?: BannerSurface;
+  className?: string;
+};
+
+const sizeClass: Record<BannerSize, string> = {
+  sm: "gap-2 px-3 py-2",
+  md: "gap-3 px-4 py-2.5",
+  lg: "gap-3 px-5 py-3",
+};
+
+const iconSizeClass: Record<BannerSize, string> = {
+  sm: "[&_svg]:size-3.5",
+  md: "[&_svg]:size-4",
+  lg: "[&_svg]:size-5",
+};
+
+const textSizeClass: Record<BannerSize, string> = {
+  sm: "text-body-sm",
+  md: "text-body-md",
+  lg: "text-body-lg",
+};
+
+const actionSizeClass: Record<BannerSize, string> = {
+  sm: "text-label-md",
+  md: "text-label-lg",
+  lg: "text-label-lg",
+};
+
+const toneClass: Record<BannerTone, string> = {
+  info: "text-text-brand",
+  danger: "text-text-danger",
+};
+
+const glassEdgeClass: Record<BannerTone, string> = {
+  info: "[--glass-edge:var(--color-border-brand)]",
+  danger: "[--glass-edge:var(--color-border-danger)]",
+};
+
+const solidEdgeClass: Record<BannerTone, string> = {
+  info: "border-border-brand",
+  danger: "border-border-danger",
+};
+
+/** Figma `Banner` (62:318): a strip with a tinted rim, 16px icon and an underlined action. */
+export function Banner({
+  tone = "info",
+  action,
+  size = "md",
+  surface = "solid",
+  className,
+  children,
+  ...props
+}: BannerProps) {
+  return (
+    <div
+      role={tone === "danger" ? "alert" : "status"}
+      className={cn(
+        "relative flex motion-rise items-center overflow-clip rounded-md",
+        sizeClass[size],
+        toneClass[tone],
+        surface === "glass"
+          ? cn("border border-transparent bg-glass-regular", glassEdgeClass[tone])
+          : cn("border border-border-default bg-bg-surface", solidEdgeClass[tone]),
+        className,
+      )}
+      {...props}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <span className={cn("relative flex shrink-0", iconSizeClass[size])}>
+        {tone === "danger" ? <WarningCircle /> : <Info />}
+      </span>
+      <p className={cn("relative min-w-0 flex-1 text-text-primary", textSizeClass[size])}>{children}</p>
+      {action && (
+        <span
+          className={cn(
+            "relative shrink-0 whitespace-nowrap underline [&_a]:cursor-pointer [&_button]:cursor-pointer",
+            actionSizeClass[size],
+          )}
+        >
+          {action}
+        </span>
+      )}
+    </div>
+  );
+}