@horon-ai/react 0.0.0-stage → 0.1.0

package/src/components/horon-wordmark.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps } from "react";
+
+export type HoronWordmarkProps = Omit<ComponentProps<"svg">, "children"> & { title?: string };
+
+const PATHS = [
+  "M0.0230414 11.2212H1.91244L1.92626 8.60366L1.93548 5.99076H8.47923L8.48845 8.60366L8.50228 11.2212H10.3917L10.4193 8.06449C10.447 5.32717 10.5207 2.68663 10.6267 0.585252L10.6543 0H8.47923V4.2857H1.93548V0H0L0.0230414 11.2212Z",
+  "M15.6082 2.09677C13.5483 2.48847 11.9539 4.02764 11.5852 5.98155C11.2719 7.64514 12.0184 9.49306 13.4147 10.5069C14.3778 11.2073 15.2764 11.493 16.5437 11.493C17.576 11.4977 18.2764 11.3456 19.0552 10.9585C19.5621 10.7004 19.7741 10.5484 20.2442 10.0967C20.8893 9.47923 21.3179 8.75112 21.5483 7.9032C21.6958 7.36864 21.6727 6.05528 21.5068 5.52533C20.9861 3.82487 19.7327 2.63594 17.9861 2.18432C17.4055 2.03225 16.1843 1.99078 15.6082 2.09677ZM17.4884 3.894C18.811 4.24883 19.7465 5.36404 19.8064 6.65896C19.8433 7.5161 19.5806 8.17509 18.9446 8.80181C18.5022 9.2396 18.1843 9.44697 17.6958 9.61287C15.4562 10.3686 13.1106 8.63131 13.4101 6.43777C13.5898 5.13823 14.5714 4.12902 15.94 3.84331C16.3179 3.76496 17.1013 3.79261 17.4884 3.894Z",
+  "M16.2672 5.52533C15.8571 5.65436 15.5069 5.96311 15.3686 6.32717C15.2442 6.65436 15.2903 7.16587 15.4654 7.45159C15.9078 8.16587 16.8755 8.29029 17.5115 7.71426C17.811 7.44237 17.9032 7.23039 17.9032 6.79721C17.9032 6.47002 17.8893 6.4009 17.7603 6.17509C17.4654 5.65436 16.7972 5.36404 16.2672 5.52533Z",
+  "M32.0598 2.09677C29.6819 2.54838 28.0183 4.47003 28.0091 6.77417C27.9953 9.02762 29.5852 10.9216 31.8893 11.4147C32.4745 11.5391 33.6404 11.5253 34.2856 11.3871C36.198 10.9769 37.6128 9.59905 38.0229 7.73269C38.1612 7.11518 38.1289 6.10136 37.9492 5.50689C37.4561 3.84331 36.1796 2.63594 34.4285 2.17972C33.8616 2.03225 32.6312 1.99078 32.0598 2.09677ZM34.0321 3.91704C35.3962 4.341 36.2672 5.4516 36.2672 6.76496C36.2672 7.28569 36.1888 7.64514 35.9768 8.05527C35.0598 9.86172 32.6036 10.3502 30.9584 9.05527C29.8156 8.16126 29.5299 6.57602 30.281 5.31335C30.7004 4.6175 31.5114 4.05529 32.4054 3.84791C32.8156 3.75575 33.6128 3.78801 34.0321 3.91704Z",
+  "M43.516 2.09677C42.6865 2.24884 41.9676 2.59446 41.3501 3.15667L41.1059 3.37326V2.30414H39.2764L39.2441 6.29952C39.2303 8.50228 39.2026 10.5115 39.1888 10.7742L39.1612 11.2442L40.1197 11.235L41.0828 11.2212L41.1059 8.54836C41.1335 5.66358 41.1289 5.74652 41.3962 5.2304C41.9399 4.20275 43.3823 3.58524 44.6496 3.8433C45.8201 4.08294 46.6035 4.84791 46.8063 5.9539C46.88 6.37325 46.8662 8.45158 46.774 10.023C46.751 10.4516 46.7233 10.8986 46.7187 11.0138L46.7049 11.2212L48.6865 11.2119L48.7003 8.61287C48.7141 5.75574 48.6957 5.39169 48.4745 4.72349C48.0828 3.53916 47.2717 2.74193 46.0137 2.29031C45.3224 2.04608 44.2579 1.96313 43.516 2.09677Z",
+  "M22.8663 6.76035L22.8801 11.2212L23.7925 11.235L24.7004 11.2442L24.705 9.576C24.7188 6.46081 24.728 6.08293 24.811 5.788C24.9262 5.36865 25.1059 5.07832 25.4607 4.71888C25.8432 4.33178 26.2119 4.13363 26.7511 4.02764L27.1197 3.9493L27.7833 3.32257C28.1474 2.97695 28.5391 2.60829 28.6589 2.5023L28.8709 2.30875H26.2442L25.5068 2.99538L24.7695 3.68662L24.7419 2.30414H22.8571L22.8663 6.76035Z",
+];
+
+/**
+ * The UI-size Horon wordmark from the Figma Sidebar (88:808): a 48.7 x 11.5
+ * vector in `currentColor`. Scale it with `height`; the width follows.
+ */
+export function HoronWordmark({ title = "Horon", height = 11.5, ...props }: HoronWordmarkProps) {
+  return (
+    <svg viewBox="0 0 48.7038 11.5" height={height} fill="currentColor" role="img" aria-label={title} {...props}>
+      {PATHS.map((d) => (
+        <path key={d} d={d} />
+      ))}
+    </svg>
+  );
+}

package/src/components/icon-button.tsx

@@ -0,0 +1,61 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { LiquidGlass } from "./liquid-glass";
+
+export type IconButtonVariant = "primary" | "ghost" | "glass" | "solid" | "quiet";
+export type IconButtonSize = ControlSize;
+
+export type IconButtonProps = Omit<ComponentProps<typeof BaseButton>, "className" | "children"> & {
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+  icon: ReactNode;
+  /** Accessible name; the button has no visible text. */
+  label: string;
+  className?: string;
+};
+
+const sizeClass: Record<IconButtonSize, string> = {
+  sm: "size-8 [&_svg]:size-4",
+  md: "size-10 [&_svg]:size-5",
+  lg: "size-12 [&_svg]:size-6",
+};
+
+const variantClass: Record<IconButtonVariant, string> = {
+  primary:
+    "bg-interactive-primary text-interactive-on-primary hover:not-data-disabled:bg-interactive-primary-hover active:not-data-disabled:bg-interactive-primary-pressed",
+  ghost: "text-text-primary hover:not-data-disabled:bg-overlay-ink-6 active:not-data-disabled:bg-overlay-ink-10",
+  glass:
+    "overflow-clip bg-glass-clear text-text-primary hover:not-data-disabled:bg-glass-clear-hover active:not-data-disabled:bg-glass-clear-pressed",
+  solid:
+    "border border-border-default bg-bg-surface text-text-primary hover:not-data-disabled:bg-bg-subtle active:not-data-disabled:bg-interactive-secondary-hover",
+  // No fill and no liquid layer: only the ink wash on hover/press. A glass disc is wrong on a dark
+  // shell or title bar, where `glass` reads as a grey bubble; this keeps the icon legible without one.
+  quiet:
+    "text-text-secondary hover:not-data-disabled:bg-overlay-ink-6 hover:not-data-disabled:text-text-primary active:not-data-disabled:bg-overlay-ink-10",
+};
+
+/** Figma `Icon button` (57:167): Primary, Ghost, Glass and Solid in three sizes, plus a fill-free `quiet` variant. */
+export function IconButton({ variant = "ghost", size = "md", icon, label, className, ...props }: IconButtonProps) {
+  return (
+    <BaseButton
+      aria-label={label}
+      className={cn(
+        "relative inline-flex shrink-0 motion-press cursor-pointer items-center justify-center rounded-full select-none",
+        // Paper draws icon buttons down to 32px. The painted hit area keeps the 44px reach
+        // without moving a single pixel of the visible control.
+        "relative after:absolute after:top-1/2 after:left-1/2 after:min-h-11 after:min-w-11 after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand data-disabled:cursor-not-allowed data-disabled:opacity-40",
+        sizeClass[size],
+        variantClass[variant],
+        className,
+      )}
+      {...props}
+    >
+      {variant === "glass" && <LiquidGlass />}
+      <span className="relative flex">{icon}</span>
+    </BaseButton>
+  );
+}

package/src/components/input-group.tsx

@@ -0,0 +1,112 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+import { createContext, useContext, useMemo, type ComponentProps, type ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { fieldBoxClass, fieldTextClass, type InputSurface } from "./input";
+
+export type InputGroupSize = ControlSize;
+
+export type InputGroupProps = Omit<ComponentProps<typeof BaseInput>, "className" | "prefix" | "size"> & {
+  /**
+   * Segment before the input: `<Select variant="segment" />` or `<Combobox variant="segment" />`
+   * for a choice such as a country code, or `<InputGroupSegment>` for fixed text.
+   */
+  prefix?: ReactNode;
+  /** Segment after the input, such as a currency select. */
+  suffix?: ReactNode;
+  size?: InputGroupSize;
+  invalid?: boolean;
+  /** Solid (default) or glass, as on `Input`. */
+  surface?: InputSurface;
+  className?: string;
+};
+
+type InputGroupContextValue = { size: InputGroupSize; disabled: boolean; surface: InputSurface };
+
+/** Lets a segment (select, combobox or fixed text) take the group's size, disabled state and surface. */
+const InputGroupContext = createContext<InputGroupContextValue | null>(null);
+
+/** The group a segment sits in, or null outside an `InputGroup`. */
+export function useInputGroup() {
+  return useContext(InputGroupContext);
+}
+
+const sizeClass: Record<InputGroupSize, string> = {
+  sm: "h-8",
+  md: "h-10",
+  lg: "h-12",
+};
+
+/** The input's own padding, the same 12/14/20px as a standalone `Input`. */
+const inputPaddingClass: Record<InputGroupSize, string> = {
+  sm: "px-3",
+  md: "px-3.5",
+  lg: "px-5",
+};
+
+/** The tinted segment look, shared by `InputGroupSegment` and the `segment` variant of `Select` and `Combobox`. */
+export const inputGroupSegmentClass: Record<InputGroupSize, string> = {
+  sm: "relative flex h-full shrink-0 items-center gap-1 bg-overlay-ink-4 px-3 text-body-sm text-text-primary [&_svg]:size-4 [&_svg]:text-text-secondary",
+  md: "relative flex h-full shrink-0 items-center gap-1 bg-overlay-ink-4 px-3 text-body-md text-text-primary [&_svg]:size-4 [&_svg]:text-text-secondary",
+  lg: "relative flex h-full shrink-0 items-center gap-1.5 bg-overlay-ink-4 px-4 text-body-lg text-text-primary [&_svg]:size-5 [&_svg]:text-text-secondary",
+};
+
+const divider =
+  "relative h-full w-px shrink-0 bg-border-default group-data-invalid:bg-border-danger group-data-disabled:bg-border-default/60";
+
+/** Figma `Input group` (60:429): a glass or solid field split into a select segment and an input segment, in three sizes. */
+export function InputGroup({
+  prefix,
+  suffix,
+  size = "md",
+  invalid,
+  surface = "solid",
+  className,
+  disabled = false,
+  ...props
+}: InputGroupProps) {
+  const context = useMemo(() => ({ size, disabled, surface }), [size, disabled, surface]);
+  return (
+    <InputGroupContext value={context}>
+      <div
+        className={cn(fieldBoxClass.base, "group", sizeClass[size], fieldBoxClass[surface], className)}
+        data-invalid={invalid ? "" : undefined}
+        data-disabled={disabled ? "" : undefined}
+      >
+        {prefix && (
+          <>
+            {prefix}
+            <span aria-hidden className={divider} />
+          </>
+        )}
+        <div className={cn("relative flex h-full min-w-0 flex-1 items-center", inputPaddingClass[size])}>
+          <BaseInput
+            disabled={disabled}
+            aria-invalid={invalid || undefined}
+            className={cn(fieldBoxClass.text, fieldTextClass[size])}
+            {...props}
+          />
+        </div>
+        {suffix && (
+          <>
+            <span aria-hidden className={divider} />
+            {suffix}
+          </>
+        )}
+      </div>
+    </InputGroupContext>
+  );
+}
+
+/** A fixed-text segment, such as a unit or a `https://` prefix. Takes the group's size. */
+export function InputGroupSegment({ className, children }: { className?: string; children: ReactNode }) {
+  const group = useInputGroup();
+  return (
+    <div
+      className={cn(inputGroupSegmentClass[group?.size ?? "md"], "group-data-disabled:text-text-disabled", className)}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/input.tsx

@@ -0,0 +1,72 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+export type InputSize = ControlSize;
+export type InputSurface = "glass" | "solid" | "solid-on-page";
+
+export type InputProps = Omit<ComponentProps<typeof BaseInput>, "className" | "size"> & {
+  size?: InputSize;
+  /** `glass` over imagery and glass panels, `solid` on raised surfaces, `solid-on-page` directly on the page background. */
+  surface?: InputSurface;
+  /** Leading icon, 16px (sm, md) or 20px (lg), in the secondary text color. */
+  icon?: ReactNode;
+  /** Shows the error border. Inside a `Field`, an invalid field does the same. */
+  invalid?: boolean;
+  className?: string;
+  /** Classes for the native `<input>`. */
+  inputClassName?: string;
+};
+
+/** Height, horizontal padding and icon size shared by every field-style control. */
+export const fieldSizeClass: Record<ControlSize, string> = {
+  sm: "h-8 gap-1.5 px-3 [&_svg]:size-4",
+  md: "h-10 gap-2 px-3.5 [&_svg]:size-4",
+  lg: "h-12 gap-2.5 px-5 [&_svg]:size-5",
+};
+
+/** Body text size that matches each control rung. */
+export const fieldTextClass: Record<ControlSize, string> = {
+  sm: "text-body-sm",
+  md: "text-body-md",
+  lg: "text-body-lg",
+};
+
+export const fieldBoxClass = {
+  /** The box is the focus target's container, so the ring is drawn on `:focus-within`, not on the inner input. */
+  base: "motion-colors relative flex min-w-0 max-w-full items-center overflow-clip rounded-md border focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-text-brand",
+  /** The veil field (globals.css `.veil-field`): no liquid layers, so hosts render no `LiquidGlass`. */
+  glass: "veil-field has-[[data-disabled]]:opacity-60 has-[:disabled]:opacity-60",
+  solid:
+    "border-border-default bg-bg-surface has-[[data-disabled]]:border-border-default has-[:disabled]:border-border-default has-[[data-disabled]]:bg-bg-subtle has-[:disabled]:bg-bg-subtle has-[[data-invalid]]:border-border-danger data-invalid:border-border-danger",
+  "solid-on-page":
+    "border-border-default bg-bg-default has-[[data-disabled]]:border-border-default has-[:disabled]:border-border-default has-[[data-disabled]]:bg-bg-subtle has-[:disabled]:bg-bg-subtle has-[[data-invalid]]:border-border-danger data-invalid:border-border-danger",
+  text: "min-w-0 flex-1 bg-transparent text-text-primary outline-none placeholder:text-text-placeholder disabled:cursor-not-allowed disabled:text-text-disabled",
+} as const;
+
+/** Figma `Input` (58:126): SM, MD and LG, on Glass or Solid surface. */
+export function Input({
+  size = "md",
+  surface = "solid",
+  icon,
+  invalid,
+  className,
+  inputClassName,
+  ...props
+}: InputProps) {
+  return (
+    <div
+      className={cn(fieldBoxClass.base, fieldBoxClass[surface], fieldSizeClass[size], className)}
+      data-invalid={invalid ? "" : undefined}
+    >
+      {icon && <span className="relative flex shrink-0 text-text-secondary">{icon}</span>}
+      <BaseInput
+        aria-invalid={invalid || undefined}
+        className={cn("relative", fieldBoxClass.text, fieldTextClass[size], inputClassName)}
+        {...props}
+      />
+    </div>
+  );
+}

package/src/components/integration-row.tsx

@@ -0,0 +1,103 @@
+import { Plug } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { LiquidGlass } from "./liquid-glass";
+
+export type IntegrationStatus = "connected" | "reconnect" | "not-connected";
+
+export type IntegrationRowProps = {
+  /** 20px icon shown in inverse on the 40px tile. */
+  icon: ReactNode;
+  name: ReactNode;
+  /** Account and scopes, or the reason a reconnect is needed. */
+  detail?: ReactNode;
+  status: IntegrationStatus;
+  onAction?: () => void;
+  connectedLabel?: string;
+  reconnectLabel?: string;
+  connectLabel?: string;
+  /** `solid` (default) is an opaque surface card with a default border; `glass` is the thick glass row. */
+  surface?: "solid" | "glass";
+  className?: string;
+};
+
+const tileClass: Record<IntegrationStatus, string> = {
+  connected: "bg-sky-500 text-neutral-50",
+  reconnect: "bg-sky-700 text-neutral-50",
+  "not-connected": "bg-bg-subtle text-text-secondary",
+};
+
+/** Figma `Integration row` (Integrations 110:883): 40px tile, status pill on the right, solid or thick glass. */
+export function IntegrationRow({
+  icon,
+  name,
+  detail,
+  status,
+  onAction,
+  connectedLabel = "Connected",
+  reconnectLabel = "Reconnect",
+  connectLabel = "Connect",
+  surface = "solid",
+  className,
+}: IntegrationRowProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 overflow-clip rounded-2xl py-3 pr-3.5 pl-3",
+        surface === "glass" ? "bg-glass-thick" : "border border-border-default bg-bg-surface",
+        status === "reconnect" &&
+          (surface === "glass" ? "[--glass-edge:var(--color-border-danger)]" : "border-border-danger"),
+        className,
+      )}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <span
+        className={cn(
+          "relative flex size-10 shrink-0 items-center justify-center rounded-[10px] motion-colors [&>svg]:size-5",
+          surface === "glass" && status === "not-connected"
+            ? "bg-overlay-ink-6 text-text-secondary"
+            : tileClass[status],
+        )}
+      >
+        {icon}
+      </span>
+      <span className="relative flex min-w-0 grow basis-40 flex-col gap-0.5">
+        <span className="truncate text-label-md text-text-primary">{name}</span>
+        {detail && (
+          <span
+            className={cn("truncate text-caption", status === "reconnect" ? "text-text-danger" : "text-text-secondary")}
+          >
+            {detail}
+          </span>
+        )}
+      </span>
+      <span className="motion-swap relative shrink-0">
+        <span
+          data-hidden={status !== "connected" || undefined}
+          aria-hidden={status !== "connected" || undefined}
+          className="flex h-7.5 items-center justify-center gap-1.5 rounded-full bg-accent-sky-500-18 px-3 text-label-sm whitespace-nowrap text-text-primary"
+        >
+          <span aria-hidden className="size-1.5 rounded-full bg-status-live" />
+          {connectedLabel}
+        </span>
+        <button
+          type="button"
+          onClick={onAction}
+          data-hidden={status === "connected" || undefined}
+          aria-hidden={status === "connected" || undefined}
+          tabIndex={status === "connected" ? -1 : undefined}
+          className={cn(
+            "flex h-7.5 motion-press cursor-pointer items-center justify-center gap-1.5 rounded-full px-3 text-label-sm whitespace-nowrap focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+            status === "reconnect"
+              ? "bg-accent-red-500-14 text-text-danger"
+              : "bg-interactive-primary text-text-inverse",
+          )}
+        >
+          {status === "not-connected" && <Plug aria-hidden className="size-3.5" />}
+          {status === "reconnect" ? reconnectLabel : connectLabel}
+        </button>
+      </span>
+    </div>
+  );
+}

package/src/components/kbd.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+export type KbdSize = ControlSize;
+
+export type KbdProps = Omit<ComponentProps<"kbd">, "className"> & {
+  /** Chip size: `sm` tighter caption, `md` the Command palette chip (default), `lg` label-sm with more padding. */
+  size?: KbdSize;
+  className?: string;
+};
+
+/** Chip rungs: 16/20/24px high, so the three sizes read apart instead of only wider padding. */
+const sizeClass: Record<KbdSize, string> = {
+  sm: "h-4 gap-0.5 px-1 text-caption [&_svg]:size-2.5",
+  md: "h-5 gap-1 px-1.5 text-caption [&_svg]:size-3",
+  lg: "h-6 gap-1 px-2 text-label-sm [&_svg]:size-3.5",
+};
+
+/** Figma `Kbd` (Command palette 110:676): a 6% ink chip with caption text. */
+export function Kbd({ size = "md", className, children, ...props }: KbdProps) {
+  return (
+    <kbd
+      className={cn(
+        "inline-flex shrink-0 items-center rounded-xs bg-overlay-ink-6 font-sans leading-none whitespace-nowrap text-text-secondary",
+        sizeClass[size],
+        className,
+      )}
+      {...props}
+    >
+      <span className="inline-flex items-center gap-[inherit] text-trim">{children}</span>
+    </kbd>
+  );
+}

package/src/components/knowledge-base-panel.tsx

@@ -0,0 +1,185 @@
+import { CaretDown, Plus, SlidersHorizontal, UploadSimple } from "@phosphor-icons/react";
+import { type ComponentProps, type DragEvent, type ReactNode, useState } from "react";
+
+import { cn } from "../lib/cn";
+import { PanelPillTabs } from "./bot-instructions-panel";
+import { Spinner } from "./spinner";
+
+export type KnowledgeBaseTab = {
+  id: string;
+  label: ReactNode;
+  count?: number;
+};
+
+export type KnowledgeBasePanelProps = Omit<ComponentProps<"section">, "className" | "title" | "onChange"> & {
+  title: ReactNode;
+  /** The 12/18 line under the title: sources, chunks, bots. */
+  meta?: ReactNode;
+  tabs: KnowledgeBaseTab[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (id: string) => void;
+  /** Shows the spinner and "N indexing" at the right of the tabs when above zero. */
+  indexing?: number;
+  onSettings?: () => void;
+  onAddSource?: () => void;
+  /** Called with the files dropped on the dropzone or picked with Browse. Omit to hide the dropzone. */
+  onFiles?: (files: File[]) => void;
+  dropTitle?: ReactNode;
+  dropHint?: ReactNode;
+  /** Pipeline column labels shown above the list; hidden on narrow widths. */
+  stages?: string[];
+  /** The list rows, usually `SourceRow variant="list"`. */
+  children?: ReactNode;
+  className?: string;
+};
+
+const defaultStages = ["Parse", "Chunk", "Embed", "Index"];
+
+/**
+ * Paper `Knowledge base` (XVM-1): a 24px-radius surface panel with a header, a pill tab tray, a table head, a
+ * flat divided source list and a dashed dropzone. The selected tab pill travels in 280ms, the dropzone border and
+ * fill change in 150ms while a file is over it, and indexing progress fills are animated by the rows.
+ */
+export function KnowledgeBasePanel({
+  title,
+  meta,
+  tabs,
+  value,
+  defaultValue,
+  onValueChange,
+  indexing = 0,
+  onSettings,
+  onAddSource,
+  onFiles,
+  dropTitle = "Drop files here, or browse",
+  dropHint = "PDF, DOCX, Markdown or TXT · Notion, Google Drive and websites from Add source",
+  stages = defaultStages,
+  children,
+  className,
+  ...props
+}: KnowledgeBasePanelProps) {
+  const [inner, setInner] = useState(defaultValue ?? tabs[0]?.id);
+  const selectedId = value ?? inner;
+  const [dragging, setDragging] = useState(false);
+
+  const select = (id: string) => {
+    setInner(id);
+    onValueChange?.(id);
+  };
+
+  const over = (event: DragEvent) => {
+    event.preventDefault();
+    setDragging(true);
+  };
+  const drop = (event: DragEvent) => {
+    event.preventDefault();
+    setDragging(false);
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length > 0) onFiles?.(files);
+  };
+
+  return (
+    <section
+      className={cn(
+        "flex w-full max-w-200 min-w-0 flex-col items-stretch gap-3 rounded-[24px] border border-border-default bg-bg-surface px-5 py-4.5",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <h3 className="truncate text-label-lg text-text-primary">{title}</h3>
+          {meta && <p className="truncate text-caption text-text-secondary">{meta}</p>}
+        </div>
+        <button
+          type="button"
+          aria-label="Knowledge base settings"
+          onClick={onSettings}
+          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 [&>svg]:size-4"
+        >
+          <SlidersHorizontal aria-hidden />
+        </button>
+        <button
+          type="button"
+          onClick={onAddSource}
+          className="flex h-7.5 shrink-0 motion-press cursor-pointer items-center gap-1.5 rounded-full bg-overlay-ink-6 pr-2.5 pl-3 text-label-sm text-text-primary hover:bg-overlay-ink-10 focus-visible:outline-2 focus-visible:outline-text-brand"
+        >
+          <Plus aria-hidden className="size-3.5" />
+          Add source
+          <CaretDown aria-hidden className="size-3 text-text-secondary" />
+        </button>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <PanelPillTabs
+          aria-label="Sources"
+          value={selectedId}
+          onValueChange={select}
+          items={tabs.map((tab) => ({
+            value: tab.id,
+            label: (
+              <span className="flex items-center gap-1.5">
+                {tab.label}
+                {tab.count !== undefined && <span className="text-caption text-text-secondary">{tab.count}</span>}
+              </span>
+            ),
+          }))}
+        />
+        <span className="min-w-0 flex-1" />
+        <span className="motion-reveal-x shrink-0" data-collapsed={indexing <= 0 || undefined}>
+          <span className="flex items-center gap-2 text-caption text-text-secondary tabular-nums">
+            <Spinner size={12} label="Indexing" />
+            {indexing} indexing
+          </span>
+        </span>
+      </div>
+
+      <div aria-hidden className="hidden items-center gap-3 px-2 pt-2 pb-1 text-caption text-text-secondary sm:flex">
+        <span className="min-w-0 flex-1">Source</span>
+        <span className="flex gap-1">
+          {stages.map((stage) => (
+            <span key={stage} className="flex h-4 w-11 shrink-0 items-center">
+              {stage}
+            </span>
+          ))}
+        </span>
+        <span className="w-18 shrink-0" />
+      </div>
+
+      <div className="flex flex-col">{children}</div>
+
+      {onFiles && (
+        <label
+          onDragOver={over}
+          onDragEnter={over}
+          onDragLeave={(event) => {
+            const next = event.relatedTarget;
+            if (!(next instanceof Node) || !event.currentTarget.contains(next)) setDragging(false);
+          }}
+          onDrop={drop}
+          className={cn(
+            "flex cursor-pointer items-center gap-3 rounded-2xl border border-dashed px-4.5 py-4 motion-colors has-focus-visible:outline-2 has-focus-visible:outline-text-brand",
+            dragging ? "border-border-focus bg-bg-brand" : "border-overlay-ink-18 bg-transparent",
+          )}
+        >
+          <input
+            type="file"
+            multiple
+            className="sr-only"
+            onChange={(event) => {
+              const files = Array.from(event.target.files ?? []);
+              if (files.length > 0) onFiles(files);
+              event.target.value = "";
+            }}
+          />
+          <UploadSimple aria-hidden className="size-4.5 shrink-0 text-text-secondary" />
+          <span className="flex min-w-0 flex-col gap-0.5">
+            <span className="text-label-md wrap-break-word text-text-primary">{dropTitle}</span>
+            <span className="text-caption wrap-break-word text-text-secondary">{dropHint}</span>
+          </span>
+        </label>
+      )}
+    </section>
+  );
+}

package/src/components/liquid-glass.tsx

@@ -0,0 +1,24 @@
+/**
+ * The glass material from `@horon-ai/tokens` `glass.ts`, the same one Flutter's
+ * `HoronLiquidGlass` draws: the backdrop blurred and saturated, then a 1px rim
+ * that is bright at the top and faint down the sides.
+ *
+ * Render it as the first child of a `relative isolate` host with a border radius
+ * and no border of its own; the rim is the edge. `isolate` keeps the layer's
+ * `-z-10` inside the host, so it paints under the body while staying above the
+ * host's own fill. A host that cannot isolate keeps its body `relative` instead.
+ *
+ * The host keeps its fill (`glass-clear`, `glass-regular`, `glass-thick`), which
+ * is equivalent to Flutter painting the fill over the filtered backdrop because
+ * saturation is linear and keeps white. There is deliberately no `tier` prop:
+ * the fill is the host's, and a fill on the layer would have to override the
+ * `glass-fill-frost` swap that `globals.css` applies for reduced transparency
+ * and for engines without `backdrop-filter`, so the layer would lie about the
+ * surface it is drawing. Tiers belong on the host, one class, no prop.
+ *
+ * Without backdrop-filter support, or with reduced transparency requested, the
+ * fill turns to `glass-fill-frost` and the rim stays (see `globals.css`).
+ */
+export function LiquidGlass() {
+  return <span aria-hidden className="liquid-layers" />;
+}