@horon-ai/react 0.0.0-stage → 0.1.1

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,42 @@
+import type { ComponentProps } from "react";
+
+import { usePlatform } from "../hooks/use-platform";
+import { cn } from "../lib/cn";
+import { formatShortcut } from "../lib/platform";
+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;
+  /** Shortcut such as `Mod+Enter`, drawn with the OS's key labels (`⌘↵` / `Ctrl+Enter`) instead of children. */
+  keys?: string;
+  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", keys, className, children, ...props }: KbdProps) {
+  const { os } = usePlatform();
+  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">
+        {keys === undefined ? children : formatShortcut(keys, os)}
+      </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" />;
+}