@horon-ai/react 0.0.0-stage → 0.1.0

package/src/components/plugin-row.tsx

@@ -0,0 +1,128 @@
+import { ArrowUp, Check, DotsThree } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { IconButton } from "./icon-button";
+import { Menu, MenuContent, MenuTrigger } from "./menu";
+import { Switch } from "./switch";
+
+export type PluginRowProps = Omit<ComponentProps<"div">, "children"> & {
+  /** Two-letter initials shown on the 40px tile. */
+  initials: string;
+  name: ReactNode;
+  version?: ReactNode;
+  /** Text of the update pill next to the version; omit when up to date. */
+  updateBadge?: ReactNode;
+  author?: ReactNode;
+  verified?: boolean;
+  /** Capability chips, each with an optional 11px icon. */
+  chips?: { id: string; label: ReactNode; icon?: ReactNode }[];
+  enabled?: boolean;
+  onEnabledChange?: (enabled: boolean) => void;
+  /** Shows the Update button when set. */
+  onUpdate?: () => void;
+  updateLabel?: string;
+  toggleLabel?: string;
+  overflowLabel?: string;
+  /** Items of the overflow menu; the menu button is hidden without them. */
+  menu?: ReactNode;
+};
+
+/** Paper `Plugin row` (Settings 1VKS-0): tile, name with version and update pill, verified author, chips, and Update, Switch and overflow actions. */
+export function PluginRow({
+  initials,
+  name,
+  version,
+  updateBadge,
+  author,
+  verified,
+  chips,
+  enabled,
+  onEnabledChange,
+  onUpdate,
+  updateLabel = "Update",
+  toggleLabel = "Enabled",
+  overflowLabel = "More",
+  menu,
+  className,
+  ...props
+}: PluginRowProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center gap-x-3.5 gap-y-3 border-b border-border-default py-4 last:border-b-0",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden
+        className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-sky-500 text-label-md text-neutral-50"
+      >
+        {initials}
+      </span>
+      <span className="flex min-w-0 grow basis-40 flex-col gap-1.5">
+        <span className="flex flex-wrap items-center gap-2">
+          <span className="min-w-0 truncate text-label-md text-text-primary">{name}</span>
+          {version && <span className="shrink-0 font-mono text-label-sm text-text-secondary">{version}</span>}
+          {updateBadge && (
+            <span className="inline-flex h-5.5 shrink-0 items-center rounded-full bg-accent-sky-500-18 px-2 text-label-sm text-text-brand">
+              {updateBadge}
+            </span>
+          )}
+        </span>
+        {author && (
+          <span className="flex items-center gap-1 text-label-sm text-text-secondary">
+            {author}
+            {verified && (
+              <span
+                role="img"
+                aria-label="Verified"
+                className="flex size-3.5 shrink-0 items-center justify-center rounded-full bg-sky-500 text-neutral-50"
+              >
+                <Check aria-hidden weight="bold" className="size-2" />
+              </span>
+            )}
+          </span>
+        )}
+        {chips && chips.length > 0 && (
+          <span className="flex flex-wrap gap-1.5">
+            {chips.map((chip) => (
+              <span
+                key={chip.id}
+                className="inline-flex h-5.5 items-center gap-1 rounded-full bg-overlay-ink-6 px-2 text-label-sm text-text-secondary [&_svg]:size-2.75"
+              >
+                {chip.icon}
+                {chip.label}
+              </span>
+            ))}
+          </span>
+        )}
+      </span>
+      <span className="flex shrink-0 flex-wrap items-center gap-2">
+        <span className="motion-reveal-x" data-collapsed={!onUpdate || undefined} inert={!onUpdate || undefined}>
+          <Button variant="solid" size="sm" icon={<ArrowUp aria-hidden className="size-3.5" />} onClick={onUpdate}>
+            {updateLabel}
+          </Button>
+        </span>
+        <Switch aria-label={toggleLabel} checked={enabled} onCheckedChange={onEnabledChange} />
+        {menu && (
+          <Menu>
+            <MenuTrigger
+              render={
+                <IconButton
+                  label={overflowLabel}
+                  variant="ghost"
+                  size="sm"
+                  icon={<DotsThree aria-hidden weight="bold" />}
+                />
+              }
+            />
+            <MenuContent align="end">{menu}</MenuContent>
+          </Menu>
+        )}
+      </span>
+    </div>
+  );
+}

package/src/components/progress.tsx

@@ -0,0 +1,21 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import type { ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+
+export type ProgressProps = Omit<ComponentProps<typeof BaseProgress.Root>, "className" | "value"> & {
+  className?: string;
+  /** 0-100. Omit it (or pass `null`) for the indeterminate bar. */
+  value?: number | null;
+};
+
+/** Figma `Progress bar` (in Loading 109:733): a 6px 8% ink track with an ink fill. */
+export function Progress({ className, value = null, ...props }: ProgressProps) {
+  return (
+    <BaseProgress.Root value={value} className={cn("w-60", className)} {...props}>
+      <BaseProgress.Track className="h-1.5 w-full overflow-clip rounded-full bg-overlay-ink-8">
+        <BaseProgress.Indicator className="h-full rounded-full bg-interactive-primary transition-[width] duration-400 ease-out-quint data-indeterminate:w-1/3 data-indeterminate:animate-sweep" />
+      </BaseProgress.Track>
+    </BaseProgress.Root>
+  );
+}

package/src/components/radio-group.tsx

@@ -0,0 +1,84 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { type ComponentProps, createContext, type ReactNode, useContext } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+export type RadioSize = ControlSize;
+
+/** The group owns the size: every radio in one list reads the same mark. */
+const RadioSizeContext = createContext<ControlSize>("md");
+
+export type RadioGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "className"> & {
+  /** Mark size for every `Radio` inside; a radio can still override it. */
+  size?: RadioSize;
+  className?: string;
+};
+
+export function RadioGroup({ size = "md", className, ...props }: RadioGroupProps) {
+  return (
+    <RadioSizeContext.Provider value={size}>
+      <BaseRadioGroup className={cn("flex flex-col gap-3", className)} {...props} />
+    </RadioSizeContext.Provider>
+  );
+}
+
+const labelClass: Record<RadioSize, string> = {
+  sm: "gap-2 text-body-sm",
+  md: "gap-2.5 text-body-md",
+  lg: "gap-3 text-body-lg",
+};
+
+const circleClass: Record<RadioSize, string> = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6",
+};
+
+const dotClass: Record<RadioSize, string> = {
+  sm: "size-1.5",
+  md: "size-2",
+  lg: "size-2.5",
+};
+
+export type RadioProps = Omit<ComponentProps<typeof BaseRadio.Root>, "className"> & {
+  label?: ReactNode;
+  /** Overrides the enclosing `RadioGroup` size. */
+  size?: RadioSize;
+  className?: string;
+};
+
+/** Figma `Radio` (58:239): a 20px circle; checked fills with ink and an 8px dot. */
+export function Radio({ label, size, className, ...props }: RadioProps) {
+  const groupSize = useContext(RadioSizeContext);
+  const resolvedSize = size ?? groupSize;
+  return (
+    <label
+      className={cn(
+        "inline-flex max-w-full min-w-0 cursor-pointer items-center text-text-primary has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-40",
+        labelClass[resolvedSize],
+        className,
+      )}
+    >
+      <BaseRadio.Root
+        className={cn(
+          "flex shrink-0 items-center justify-center rounded-full border-[1.5px] border-border-strong bg-bg-surface motion-colors",
+          circleClass[resolvedSize],
+          "hover:not-data-disabled:border-text-secondary",
+          "data-checked:border-interactive-primary data-checked:bg-interactive-primary hover:not-data-disabled:data-checked:border-interactive-primary-hover hover:not-data-disabled:data-checked:bg-interactive-primary-hover",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+        )}
+        {...props}
+      >
+        <BaseRadio.Indicator
+          className={cn(
+            "animate-pop-in rounded-full bg-interactive-on-primary data-ending-style:animate-scale-out",
+            dotClass[resolvedSize],
+          )}
+        />
+      </BaseRadio.Root>
+      {label}
+    </label>
+  );
+}

package/src/components/research-run-panel.tsx

@@ -0,0 +1,232 @@
+import { ArrowUp, CaretDown, Check, MagnifyingGlass, Plus, Stop } from "@phosphor-icons/react";
+import { Fragment, type CSSProperties, type ComponentProps, type ReactNode, useRef } from "react";
+
+import { cn } from "../lib/cn";
+import { ChatBubble } from "./chat-bubble";
+import { Spinner } from "./spinner";
+
+export type ResearchQuery = {
+  id: string;
+  /** `searching` shows a spinner and the muted text; `done` a check. */
+  state?: "done" | "searching";
+  text: ReactNode;
+  /** Result count shown at the end of the row, such as "8 results". */
+  results?: ReactNode;
+};
+
+export type ResearchRunPanelProps = Omit<ComponentProps<"section">, "title"> & {
+  title?: ReactNode;
+  newLabel?: ReactNode;
+  onNewResearch?: () => void;
+  /** The question bubble, right-aligned. */
+  question: ReactNode;
+  /** Shows the spinner, status line and caret while the run works. */
+  running?: boolean;
+  statusLabel?: ReactNode;
+  elapsed?: ReactNode;
+  read?: number;
+  total?: number;
+  queries?: ResearchQuery[];
+  /** Initials for the stacked source avatars under the queries. */
+  sources?: string[];
+  onStop?: () => void;
+  /** Makes the sources pill actionable; without it the pill is a plain label. */
+  onOpenSources?: () => void;
+  /** Makes the running status line expandable; without it the row carries no caret. */
+  onToggleStatus?: () => void;
+  followUpPlaceholder?: string;
+  onFollowUp?: (value: string) => void;
+};
+
+const stagger = (index: number) => ({ "--i": index, animationDelay: `calc(var(--i) * 30ms)` }) as CSSProperties;
+
+/** Paper `Research run` (Agents N10): a 24px-radius panel with a header, the question, a live status line and the queries read so far. */
+export function ResearchRunPanel({
+  title = "Research",
+  newLabel = "New research",
+  onNewResearch,
+  question,
+  running = true,
+  statusLabel = "Researching",
+  elapsed,
+  read,
+  total,
+  queries,
+  sources,
+  onStop,
+  onOpenSources,
+  onToggleStatus,
+  followUpPlaceholder = "Ask a follow-up",
+  onFollowUp,
+  className,
+  ...props
+}: ResearchRunPanelProps) {
+  const field = useRef<HTMLInputElement>(null);
+  const count = read !== undefined && total !== undefined ? `${read} of ${total} read` : undefined;
+  const meta = [
+    { id: "elapsed", value: elapsed },
+    { id: "count", value: count },
+  ].filter((entry) => entry.value !== undefined);
+  const sourcesLabel =
+    read !== undefined && total !== undefined ? `${read} of ${total} sources read` : `${sources?.length ?? 0} sources`;
+  const avatarStack = (
+    <span className="flex shrink-0">
+      {sources?.map((initial, index) => (
+        <span
+          key={initial}
+          className="flex size-7 shrink-0 items-center justify-center rounded-full bg-sky-700 text-label-sm text-text-on-ink ring-2 ring-bg-surface"
+          style={{ marginLeft: index === 0 ? 0 : -6 }}
+        >
+          {initial}
+        </span>
+      ))}
+    </span>
+  );
+  return (
+    <section
+      className={cn(
+        "flex w-full max-w-150 min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      <header className="flex flex-wrap items-center gap-x-2 gap-y-2 px-5 pt-4 pb-3.5">
+        <MagnifyingGlass aria-hidden className="size-4 shrink-0 text-text-primary" />
+        <h3 className="min-w-0 flex-1 truncate text-label-lg text-text-primary">{title}</h3>
+        <button
+          type="button"
+          onClick={onNewResearch}
+          className="flex h-7.5 shrink-0 motion-press cursor-pointer items-center gap-1.5 rounded-full bg-overlay-ink-6 pr-3 pl-3.5 text-label-sm text-text-primary hover:bg-overlay-ink-10 focus-visible:outline-2 focus-visible:outline-text-brand"
+        >
+          {newLabel}
+          <Plus aria-hidden className="size-3.5" />
+        </button>
+      </header>
+      <div role="separator" className="h-px bg-overlay-ink-8" />
+      <div className="flex flex-col gap-3 px-5 pt-4 pb-4">
+        <ChatBubble from="me" className="max-w-[85%] self-end">
+          {question}
+        </ChatBubble>
+        <div className="motion-reveal" data-collapsed={!running || undefined}>
+          <div>
+            {onToggleStatus ? (
+              <button
+                type="button"
+                onClick={onToggleStatus}
+                aria-live="polite"
+                className="flex w-full cursor-pointer flex-wrap items-center gap-x-1.5 gap-y-1 rounded-md text-left focus-visible:outline-2 focus-visible:outline-text-brand"
+              >
+                <Spinner size={14} />
+                <span className="min-w-0 text-label-md text-text-primary">{statusLabel}</span>
+                <span aria-hidden className="h-3 w-0.5 shrink-0 animate-caret rounded-[1px] bg-interactive-primary" />
+                {meta.length > 0 && (
+                  <span className="text-caption text-text-secondary tabular-nums">
+                    {meta.map((entry, index) => (
+                      <Fragment key={entry.id}>
+                        {index > 0 && " · "}
+                        {entry.value}
+                      </Fragment>
+                    ))}
+                  </span>
+                )}
+                <CaretDown aria-hidden className="size-3 shrink-0 text-text-secondary" />
+              </button>
+            ) : (
+              <div aria-live="polite" className="flex flex-wrap items-center gap-x-1.5 gap-y-1">
+                <Spinner size={14} />
+                <span className="min-w-0 text-label-md text-text-primary">{statusLabel}</span>
+                <span aria-hidden className="h-3 w-0.5 shrink-0 animate-caret rounded-[1px] bg-interactive-primary" />
+                {meta.length > 0 && (
+                  <span className="text-caption text-text-secondary tabular-nums">
+                    {meta.map((entry, index) => (
+                      <Fragment key={entry.id}>
+                        {index > 0 && " · "}
+                        {entry.value}
+                      </Fragment>
+                    ))}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+        {queries && queries.length > 0 && (
+          <ul className="relative flex flex-col gap-2.5 py-0.5 pl-3.5">
+            <span aria-hidden className="absolute top-0 bottom-0 left-0 w-[1.5px] rounded-full bg-overlay-ink-14" />
+            {queries.map((query, index) => (
+              <li key={query.id} className="flex motion-rise items-center gap-2.5" style={stagger(index)}>
+                {query.state === "searching" ? (
+                  <Spinner size={14} />
+                ) : (
+                  <Check aria-hidden className="size-3.5 shrink-0 text-text-secondary" />
+                )}
+                <span
+                  className={cn(
+                    "min-w-0 flex-1 truncate text-body-sm",
+                    query.state === "searching" ? "text-text-secondary" : "text-text-primary",
+                  )}
+                >
+                  {query.text}
+                </span>
+                {query.results !== undefined && (
+                  <span className="shrink-0 text-caption text-text-secondary">{query.results}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+        {sources && sources.length > 0 && (
+          <div className="animate-pop-in">
+            {onOpenSources ? (
+              <button
+                type="button"
+                onClick={onOpenSources}
+                className="flex h-9 w-fit motion-press cursor-pointer items-center gap-2 rounded-full bg-overlay-ink-5 pr-3 pl-1 hover:bg-overlay-ink-8 focus-visible:outline-2 focus-visible:outline-text-brand"
+              >
+                {avatarStack}
+                <span className="text-label-md text-text-primary tabular-nums">{sourcesLabel}</span>
+                <CaretDown aria-hidden className="size-3 text-text-secondary" />
+              </button>
+            ) : (
+              <div className="flex h-9 w-fit items-center gap-2 rounded-full bg-overlay-ink-5 pr-3 pl-1">
+                {avatarStack}
+                <span className="text-label-md text-text-primary tabular-nums">{sourcesLabel}</span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+      <form
+        className="px-5 pt-1 pb-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          const input = field.current;
+          if (!input) return;
+          onFollowUp?.(input.value);
+          input.value = "";
+        }}
+      >
+        <div className="flex h-11 items-center gap-2 rounded-full bg-overlay-ink-5 pr-1.5 pl-4 motion-colors focus-within:bg-overlay-ink-8">
+          <input
+            ref={field}
+            name="follow-up"
+            aria-label={followUpPlaceholder}
+            placeholder={followUpPlaceholder}
+            className="min-w-0 flex-1 bg-transparent text-body-sm text-text-primary outline-none placeholder:text-text-secondary"
+          />
+          <button
+            type={running ? "button" : "submit"}
+            onClick={running ? onStop : undefined}
+            aria-label={running ? "Stop" : "Send"}
+            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-text-brand"
+          >
+            <span className="motion-swap size-8 place-items-center">
+              <Stop aria-hidden weight="fill" data-hidden={!running || undefined} className="size-3.5" />
+              <ArrowUp aria-hidden data-hidden={running || undefined} className="size-4" />
+            </span>
+          </button>
+        </div>
+      </form>
+    </section>
+  );
+}