@horon-ai/react 0.0.0-stage → 0.1.1

package/src/hooks/use-reduced-motion.ts

@@ -0,0 +1,8 @@
+import { useMediaQuery } from "./use-media-query";
+
+const QUERY = "(prefers-reduced-motion: reduce)";
+
+/** True while the OS asks for reduced motion; false on the server. */
+export function useReducedMotion(): boolean {
+  return useMediaQuery(QUERY);
+}

package/src/index.ts

@@ -0,0 +1,99 @@
+export * from "./components/agent-activity";
+export * from "./components/agent-lane";
+export * from "./components/agent-lanes-timeline";
+export * from "./components/agent-panel";
+export * from "./components/agent-steering-panel";
+export * from "./components/approval-card";
+export * from "./components/avatar";
+export * from "./components/badge";
+export * from "./components/banner";
+export * from "./components/bot-instructions-panel";
+export * from "./components/bot-list-row";
+export * from "./components/bot-memory-panel";
+export * from "./components/bottom-sheet";
+export * from "./components/breadcrumb";
+export * from "./components/breadcrumb-header";
+export * from "./components/button";
+export * from "./components/calendar";
+export * from "./components/card";
+export * from "./components/chat-bubble";
+export * from "./components/chat-controls";
+export * from "./components/checkbox";
+export * from "./components/chip";
+export * from "./components/choice-card";
+export * from "./components/code-panel";
+export * from "./components/command-palette";
+export * from "./components/combobox";
+export * from "./components/composer";
+export * from "./components/data-table";
+export * from "./components/date-field";
+export * from "./components/dialog";
+export * from "./components/directory-card";
+export * from "./components/document-extract-panel";
+export * from "./components/empty-state";
+export * from "./components/field";
+export * from "./components/file-drop";
+export * from "./components/filter-bar";
+export * from "./components/flue-background";
+export * from "./components/horon-icon";
+export * from "./components/horon-wordmark";
+export * from "./components/icon-button";
+export * from "./components/input";
+export * from "./components/input-group";
+export * from "./components/integration-row";
+export * from "./components/kbd";
+export * from "./components/knowledge-base-panel";
+export * from "./components/liquid-glass";
+export * from "./components/list-detail";
+export * from "./components/marketplace-card";
+export * from "./components/mcp-server-row";
+export * from "./components/menu";
+export * from "./components/modal";
+export * from "./components/message-extras";
+export * from "./components/orchestrator-panel";
+export * from "./components/page-header";
+export * from "./components/plan-card";
+export * from "./components/plan-step";
+export * from "./components/plugin-row";
+export * from "./components/progress";
+export * from "./components/radio-group";
+export * from "./components/research-run-panel";
+export * from "./components/schedule";
+export * from "./components/segmented-control";
+export * from "./components/select";
+export * from "./components/settings-list";
+export * from "./components/slider";
+export * from "./components/sidebar";
+export * from "./components/skeleton";
+export * from "./components/source-row";
+export * from "./components/spinner";
+export * from "./components/split-button";
+export * from "./components/switch";
+export * from "./components/tab-bar";
+export * from "./components/tabs";
+export * from "./components/task-row";
+export * from "./components/textarea";
+export * from "./components/textarea-field";
+export * from "./components/toast";
+export * from "./components/tool-call";
+export * from "./components/tool-calls-header";
+export * from "./components/tool-permissions";
+export * from "./components/tooltip";
+export * from "./components/top-bar";
+export * from "./components/usage-meter";
+export * from "./components/workspace-menu";
+export * from "./hooks";
+export { cn, type ClassValue } from "./lib/cn";
+export { mountCursorGhost, type CursorGhostOptions } from "./lib/cursor-ghost";
+export {
+  detectOs,
+  detectRuntime,
+  formatShortcut,
+  isModKey,
+  matchesShortcut,
+  type Os,
+  type PlatformInput,
+  type Runtime,
+  type RuntimeWindow,
+  type ShortcutEvent,
+} from "./lib/platform";

package/src/lib/cn.ts

@@ -0,0 +1,25 @@
+import { lightColors, primitives, radius, shadow, textStyles } from "@horon-ai/tokens";
+import { extendTailwindMerge } from "tailwind-merge";
+
+export type ClassValue = string | false | null | undefined;
+
+/**
+ * tailwind-merge that knows the Horon theme, so `text-label-md` (font size) and
+ * `text-text-primary` (color) are not mistaken for each other, and a caller's
+ * `w-full` or `rounded-full` replaces the component default instead of fighting it.
+ */
+const merge = extendTailwindMerge({
+  extend: {
+    theme: {
+      color: [...Object.keys(lightColors), ...Object.keys(primitives)],
+      text: Object.keys(textStyles),
+      radius: Object.keys(radius),
+      shadow: Object.keys(shadow),
+    },
+  },
+});
+
+/** Joins class names, skipping empty values; later classes win over conflicting earlier ones. */
+export function cn(...values: ClassValue[]): string {
+  return merge(values.filter(Boolean).join(" "));
+}

package/src/lib/cursor-ghost.ts

@@ -0,0 +1,244 @@
+/**
+ * Cursor Ghost: copies of the arrow trail behind the real one as a motion smear.
+ *
+ * The native cursor is never hidden or replaced. The ghosts live in one fixed,
+ * `pointer-events: none`, `aria-hidden` layer on top of the page, so they never
+ * take clicks, hovers or focus. The effect only mounts on a fine hover pointer
+ * without `prefers-reduced-motion: reduce`, and re-checks both on change.
+ *
+ * Importing `@horon-ai/react` (or `@horon-ai/react/cursor-ghost`) mounts it once
+ * per page. Put `data-horon-cursor="off"` on `<html>` before that import to opt
+ * out, then call `mountCursorGhost()` yourself for custom options.
+ */
+
+export type CursorGhostOptions = {
+  /** Number of arrow copies. */
+  ghosts?: number;
+  /** Arrow height in CSS px. */
+  size?: number;
+  /** Lerp factor of the first copy toward the pointer, per frame. */
+  headFollow?: number;
+  /** Blur spread of the last copy in CSS px. */
+  smear?: number;
+  /** Arrow fill. Blended with `difference`, so white reads dark on light pages. */
+  color?: string;
+};
+
+const DEFAULTS: Required<CursorGhostOptions> = { ghosts: 5, size: 26, headFollow: 0.16, smear: 14, color: "#FFFFFF" };
+
+const ENABLE_QUERY = "(hover: hover) and (pointer: fine)";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const INTERACTIVE = "a, button, input";
+const OPT_OUT_ATTRIBUTE = "data-horon-cursor";
+const AUTO_MOUNT_KEY = Symbol.for("horon.cursorGhost");
+
+/** Arrow drawn in a 24-unit box; its tip sits at (3, 2). */
+const ARROW_PATH = "M3 2v18.2l5-4.7 3.4 7.6 3.2-1.4-3.3-7.5H18Z";
+const ARROW_TIP = { x: 3, y: 2 };
+const ARROW_BOX = 24;
+
+/** Each copy follows the one ahead of it more loosely than the last. */
+const FOLLOW_DECAY = 0.78;
+const HEAD_OPACITY = 0.55;
+/** Trail strength while the pointer is over `a, button, input`. */
+const INTERACTIVE_INTENSITY = 0.5;
+const SETTLE_EPSILON = 0.05;
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+function startEffect({ ghosts, size, headFollow, smear, color }: Required<CursorGhostOptions>): () => void {
+  const count = Math.max(1, Math.round(ghosts));
+  const scale = size / ARROW_BOX;
+  const tipX = ARROW_TIP.x * scale;
+  const tipY = ARROW_TIP.y * scale;
+  const fadeDistance = size * 0.5;
+
+  const layer = document.createElement("div");
+  layer.setAttribute("aria-hidden", "true");
+  layer.setAttribute("data-horon-cursor-ghost", "");
+  Object.assign(layer.style, {
+    position: "fixed",
+    inset: "0",
+    pointerEvents: "none",
+    zIndex: "2147483647",
+    overflow: "hidden",
+    mixBlendMode: "difference",
+    contain: "strict",
+    visibility: "hidden",
+  });
+
+  const nodes: SVGSVGElement[] = [];
+  const follow = new Float32Array(count);
+  const baseOpacity = new Float32Array(count);
+  const xs = new Float32Array(count);
+  const ys = new Float32Array(count);
+
+  for (let i = 0; i < count; i += 1) {
+    const progress = (i + 1) / count;
+    follow[i] = headFollow * FOLLOW_DECAY ** i;
+    baseOpacity[i] = HEAD_OPACITY * (1 - i / count);
+
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("viewBox", `0 0 ${ARROW_BOX} ${ARROW_BOX}`);
+    svg.setAttribute("width", String(size));
+    svg.setAttribute("height", String(size));
+    const path = document.createElementNS(SVG_NS, "path");
+    path.setAttribute("d", ARROW_PATH);
+    path.setAttribute("fill", color);
+    svg.append(path);
+    Object.assign(svg.style, {
+      position: "absolute",
+      left: "0",
+      top: "0",
+      overflow: "visible",
+      opacity: "0",
+      // CSS blur takes a standard deviation; half the smear spreads it about `smear` px.
+      filter: `blur(${((smear * progress) / 2).toFixed(2)}px)`,
+      willChange: "transform, opacity",
+    });
+    nodes.push(svg);
+  }
+  // Paint the most blurred copy first so the sharpest one sits on top.
+  layer.append(...nodes.toReversed());
+  document.body.append(layer);
+
+  let pointerX = 0;
+  let pointerY = 0;
+  let present = false;
+  let intensity = 1;
+  let targetIntensity = 1;
+  let frame = 0;
+
+  const tick = () => {
+    frame = 0;
+    intensity += (targetIntensity - intensity) * 0.2;
+    let leaderX = pointerX;
+    let leaderY = pointerY;
+    let moving = Math.abs(targetIntensity - intensity) > 0.01;
+
+    for (let i = 0; i < count; i += 1) {
+      // The weight, position and node of one copy, read once per frame. Every
+      // array here is allocated at `count`, so the fallbacks are dead: they let
+      // the reads type under `noUncheckedIndexedAccess`.
+      const rate = follow[i] ?? 0;
+      const node = nodes[i];
+      let x = xs[i] ?? leaderX;
+      let y = ys[i] ?? leaderY;
+      const dx = leaderX - x;
+      const dy = leaderY - y;
+      if (Math.abs(dx) > SETTLE_EPSILON || Math.abs(dy) > SETTLE_EPSILON) {
+        x += dx * rate;
+        y += dy * rate;
+        moving = true;
+      } else {
+        x = leaderX;
+        y = leaderY;
+      }
+      xs[i] = x;
+      ys[i] = y;
+      if (!node) continue;
+      const distance = Math.hypot(pointerX - x, pointerY - y);
+      node.style.transform = `translate3d(${(x - tipX).toFixed(2)}px, ${(y - tipY).toFixed(2)}px, 0)`;
+      node.style.opacity = ((baseOpacity[i] ?? 0) * Math.min(1, distance / fadeDistance) * intensity).toFixed(3);
+      leaderX = x;
+      leaderY = y;
+    }
+
+    if (moving) frame = requestAnimationFrame(tick);
+  };
+
+  const wake = () => {
+    if (!frame) frame = requestAnimationFrame(tick);
+  };
+
+  const onPointerMove = (event: PointerEvent) => {
+    if (event.pointerType === "touch") return;
+    pointerX = event.clientX;
+    pointerY = event.clientY;
+    if (!present) {
+      // Start every copy at the pointer instead of sweeping in from the corner.
+      xs.fill(pointerX);
+      ys.fill(pointerY);
+      present = true;
+      layer.style.visibility = "visible";
+    }
+    const target = event.target;
+    targetIntensity = target instanceof Element && target.closest(INTERACTIVE) ? INTERACTIVE_INTENSITY : 1;
+    wake();
+  };
+
+  const onPointerOut = (event: PointerEvent) => {
+    if (event.relatedTarget) return;
+    present = false;
+    layer.style.visibility = "hidden";
+  };
+
+  const onBlur = () => {
+    present = false;
+    layer.style.visibility = "hidden";
+  };
+
+  window.addEventListener("pointermove", onPointerMove, { passive: true });
+  document.addEventListener("pointerout", onPointerOut, { passive: true });
+  window.addEventListener("blur", onBlur);
+
+  return () => {
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+    window.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerout", onPointerOut);
+    window.removeEventListener("blur", onBlur);
+    layer.remove();
+  };
+}
+
+/**
+ * Mounts the Cursor Ghost trail and returns its teardown. The trail appears and
+ * disappears on its own as the pointer type or the reduced-motion setting changes.
+ */
+export function mountCursorGhost(options: CursorGhostOptions = {}): () => void {
+  if (typeof window === "undefined" || typeof document === "undefined" || !window.matchMedia) return () => {};
+  const config = { ...DEFAULTS, ...options };
+  const enable = window.matchMedia(ENABLE_QUERY);
+  const reducedMotion = window.matchMedia(REDUCED_MOTION_QUERY);
+  let stop: (() => void) | null = null;
+
+  const sync = () => {
+    const wanted = enable.matches && !reducedMotion.matches;
+    if (wanted && !stop) stop = startEffect(config);
+    else if (!wanted && stop) {
+      stop();
+      stop = null;
+    }
+  };
+
+  let started = false;
+  const begin = () => {
+    started = true;
+    sync();
+    enable.addEventListener("change", sync);
+    reducedMotion.addEventListener("change", sync);
+  };
+  if (document.body) begin();
+  else document.addEventListener("DOMContentLoaded", begin, { once: true });
+
+  return () => {
+    document.removeEventListener("DOMContentLoaded", begin);
+    if (!started) return;
+    enable.removeEventListener("change", sync);
+    reducedMotion.removeEventListener("change", sync);
+    stop?.();
+    stop = null;
+  };
+}
+
+function autoMount() {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  const registry = globalThis as typeof globalThis & { [AUTO_MOUNT_KEY]?: true };
+  if (registry[AUTO_MOUNT_KEY]) return;
+  if (document.documentElement.getAttribute(OPT_OUT_ATTRIBUTE) === "off") return;
+  registry[AUTO_MOUNT_KEY] = true;
+  mountCursorGhost();
+}
+
+autoMount();

package/src/lib/platform.ts

@@ -0,0 +1,169 @@
+export type Os = "macos" | "windows" | "linux" | "ios" | "android" | "unknown";
+
+export type Runtime = "web" | "desktop";
+
+/** The parts of `navigator` that identify the OS; plain data so detection stays testable. */
+export type PlatformInput = {
+  userAgent?: string;
+  platform?: string;
+  uaPlatform?: string;
+  maxTouchPoints?: number;
+};
+
+/** The parts of `window` that tell a page from the desktop shell; plain data for the same reason. */
+export type RuntimeWindow = {
+  __TAURI_INTERNALS__?: unknown;
+  navigator?: { userAgent?: string };
+};
+
+/** The parts of a keyboard event a shortcut reads; `KeyboardEvent` satisfies it as-is. */
+export type ShortcutEvent = {
+  key?: string;
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  altKey?: boolean;
+  shiftKey?: boolean;
+};
+
+/**
+ * Reads the platform hints from the live `navigator`. `userAgentData` is not in
+ * the DOM typings yet, so the shape is spelled out here instead of cast away.
+ */
+export function readNavigator(): PlatformInput {
+  if (typeof navigator === "undefined") return {};
+  const nav = navigator as {
+    userAgent?: string;
+    platform?: string;
+    maxTouchPoints?: number;
+    userAgentData?: { platform?: string };
+  };
+  return {
+    userAgent: nav.userAgent,
+    platform: nav.platform,
+    uaPlatform: nav.userAgentData?.platform,
+    maxTouchPoints: nav.maxTouchPoints,
+  };
+}
+
+const OS_HINTS = ["uaPlatform", "platform", "userAgent"] as const;
+
+/** Classifies one hint string; `undefined` when the hint names no OS we know. */
+function osFromHint(hint: string, maxTouchPoints: number): Os | undefined {
+  if (hint.includes("android")) return "android";
+  if (hint.includes("iphone") || hint.includes("ipad") || hint.includes("ipod") || hint.includes("ios")) return "ios";
+  // iPadOS reports a Mac platform and user agent, so touch points are what separate it from a Mac.
+  if (hint.includes("mac")) return maxTouchPoints > 1 ? "ios" : "macos";
+  if (hint.includes("win")) return "windows";
+  if (hint.includes("linux") || hint.includes("x11") || hint.includes("cros") || hint.includes("bsd")) return "linux";
+  return undefined;
+}
+
+/**
+ * Finds the OS from the first hint that names one: `userAgentData.platform`,
+ * then `navigator.platform`, then the user agent string. Empty input is
+ * `unknown`, which the shortcuts treat as the macOS/⌘ rendering.
+ */
+export function detectOs(input: PlatformInput = {}): Os {
+  const maxTouchPoints = input.maxTouchPoints ?? 0;
+  for (const field of OS_HINTS) {
+    const hint = (input[field] ?? "").trim().toLowerCase();
+    if (!hint) continue;
+    const os = osFromHint(hint, maxTouchPoints);
+    if (os) return os;
+  }
+  return "unknown";
+}
+
+/** `desktop` for the Tauri shell and Electron; `web` everywhere else, including the server. */
+export function detectRuntime(win: RuntimeWindow | null = null): Runtime {
+  if (!win) return "web";
+  if ("__TAURI_INTERNALS__" in win) return "desktop";
+  return /electron/i.test(win.navigator?.userAgent ?? "") ? "desktop" : "web";
+}
+
+const MAC_LABELS: Record<string, string> = {
+  mod: "⌘",
+  shift: "⇧",
+  alt: "⌥",
+  enter: "↵",
+  escape: "esc",
+  esc: "esc",
+  arrowup: "↑",
+  arrowdown: "↓",
+  arrowleft: "←",
+  arrowright: "→",
+};
+
+const OTHER_LABELS: Record<string, string> = {
+  mod: "Ctrl",
+  shift: "Shift",
+  alt: "Alt",
+  enter: "Enter",
+  escape: "Esc",
+  esc: "Esc",
+  arrowup: "↑",
+  arrowdown: "↓",
+  arrowleft: "←",
+  arrowright: "→",
+};
+
+/**
+ * Draws a `+`-joined shortcut for one OS: `Mod+K` is `⌘K` on macOS and iOS,
+ * `Ctrl+K` on Windows and Linux. Mac families glue the parts, the rest keep `+`.
+ */
+export function formatShortcut(keys: string, os: Os): string {
+  const parts = keys
+    .split("+")
+    .map((part) => part.trim())
+    .filter(Boolean);
+  if (parts.length === 0) return "";
+  // macOS, iOS and the unknown server default draw Mac symbols; everyone else spells them out.
+  const mac = os === "macos" || os === "ios" || os === "unknown";
+  const labels = mac ? MAC_LABELS : OTHER_LABELS;
+  return parts.map((part) => labels[part.toLowerCase()] ?? part).join(mac ? "" : "+");
+}
+
+/** Which physical key carries `Mod` for an OS; `either` is the server/unknown case. */
+function modifierSlot(os: Os): "meta" | "ctrl" | "either" {
+  if (os === "macos" || os === "ios") return "meta";
+  if (os === "windows" || os === "linux" || os === "android") return "ctrl";
+  return "either";
+}
+
+/** True when the platform's `Mod` key is down; the other side's key is not `Mod`. */
+export function isModKey(event: ShortcutEvent, os: Os): boolean {
+  const slot = modifierSlot(os);
+  const meta = event.metaKey === true;
+  const ctrl = event.ctrlKey === true;
+  if (slot === "meta") return meta && !ctrl;
+  if (slot === "ctrl") return ctrl && !meta;
+  return meta || ctrl;
+}
+
+/** Modifier names that are never the final key of a shortcut. */
+const MODIFIERS: Record<string, true> = { mod: true, shift: true, alt: true, ctrl: true, meta: true };
+
+const KEY_ALIASES: Record<string, string> = { esc: "escape" };
+
+function canonicalKey(value: string): string {
+  const lower = value.trim().toLowerCase();
+  return KEY_ALIASES[lower] ?? lower;
+}
+
+/**
+ * Tests a keyboard event against a shortcut string such as `Mod+K` or
+ * `Mod+Shift+Enter`. `Mod` is the platform key (⌘ on macOS/iOS, Ctrl
+ * elsewhere, either one when the OS is unknown).
+ */
+export function matchesShortcut(event: ShortcutEvent, keys: string, os: Os): boolean {
+  const parts = keys
+    .split("+")
+    .map((part) => part.trim().toLowerCase())
+    .filter(Boolean);
+  const base = parts.find((part) => !MODIFIERS[part]);
+  if (!base) return false;
+  if ((event.altKey === true) !== parts.includes("alt")) return false;
+  if ((event.shiftKey === true) !== parts.includes("shift")) return false;
+  if (isModKey(event, os) !== parts.includes("mod")) return false;
+  return canonicalKey(event.key ?? "") === canonicalKey(base);
+}

package/src/lib/size.ts

@@ -0,0 +1,10 @@
+/**
+ * The size scale every sized control shares. `md` is the default and the
+ * original Figma/Paper size; `sm` and `lg` step one rung down and up:
+ *
+ * - control height: sm 32px, md 40px, lg 48px (h-8 / h-10 / h-12)
+ * - control text: sm `label-md` / `body-sm`, md `label-lg` / `body-md`, lg `label-lg` / `body-lg`
+ * - icon: sm 16px, md 16-20px, lg 20-24px
+ * - selection marks (checkbox, radio): sm 16px, md 20px, lg 24px
+ */
+export type ControlSize = "sm" | "md" | "lg";