@horon-ai/react 0.0.0-stage → 0.1.1

package/src/components/flue-background.tsx

@@ -0,0 +1,388 @@
+import { type CSSProperties, useEffect, useRef } from "react";
+
+import { useColorScheme } from "../hooks/use-color-scheme";
+import { cn } from "../lib/cn";
+
+export type FlueConfig = {
+  bgColor: string;
+  colorA: string;
+  colorB: string;
+  colorC: string;
+  colorD: string;
+  scale: number;
+  speed: number;
+  flow: number;
+  roughness: number;
+  lacunarity: number;
+  smokeScale: number;
+  curl: number;
+  curlScale: number;
+  rise: number;
+  slender: number;
+  width: number;
+  spread: number;
+  lean: number;
+  density: number;
+  contrast: number;
+  midpoint: number;
+  glow: number;
+  sink: number;
+  grain: number;
+  grainAnim: number;
+  dither: number;
+  vignette: number;
+  /** 1 lets the smoke follow the real pointer; 0 (default) ignores it and a slow virtual pointer sways the smoke. */
+  cursor: number;
+  pointerRadius: number;
+  draft: number;
+  pointerStrength: number;
+  parallax: number;
+  maxDpr: number;
+};
+
+/** The Horon sky palette for Flue. Recolour through these values only, never the shader. */
+export const FLUE_SKY: FlueConfig = {
+  bgColor: "#eef3f8",
+  colorA: "#e3ecf6",
+  colorB: "#c3d7ea",
+  colorC: "#7fa3c6",
+  colorD: "#1d3c5e",
+  scale: 0.2,
+  speed: 0.33,
+  flow: 0.04,
+  roughness: 0.36,
+  lacunarity: 2.55,
+  smokeScale: 2.51,
+  curl: 0.36,
+  curlScale: 0.88,
+  rise: 0.03,
+  slender: 1.55,
+  width: 1.55,
+  spread: 1.11,
+  lean: 1.25,
+  density: 2.15,
+  contrast: 1.7,
+  midpoint: 0.76,
+  glow: 0.53,
+  sink: 0.2,
+  grain: 0.02,
+  grainAnim: 0,
+  dither: 1.1,
+  vignette: 0.26,
+  cursor: 0,
+  pointerRadius: 0.84,
+  draft: 1.85,
+  pointerStrength: 0.16,
+  parallax: 0.028,
+  maxDpr: 1,
+};
+
+/** The night palette for dark mode: near-black ground and blue smoke. Same motion as `FLUE_SKY`. */
+export const FLUE_NIGHT: FlueConfig = {
+  ...FLUE_SKY,
+  bgColor: "#050608",
+  colorA: "#07090d",
+  colorB: "#0c1a2c",
+  colorC: "#1f4a78",
+  colorD: "#4f8fd0",
+  glow: 0.35,
+};
+
+/** Where the smoke is drawn; each place tunes the motion and colour on top of `FLUE_SKY` / `FLUE_NIGHT`. */
+export type FlueVariant = "default" | "sidebar" | "auth";
+
+type FlueTuning = { light: Partial<FlueConfig>; dark: Partial<FlueConfig>; tint: string };
+
+/**
+ * - `sidebar`: a narrow, tall column under the sidebar's glass. The glass blurs the detail away, so the smoke
+ *   is calmer and larger, kept low in the column so the nav labels at the top sit on the quiet part. The canvas
+ *   paints above the sidebar's own fill, so in light mode the variant lays the thick glass (80% white) over the
+ *   smoke itself: its dense blue band would otherwise drop secondary labels to 2:1. Dark smoke is already dark
+ *   enough behind light text, so dark lays nothing.
+ * - `auth`: the whole sign-in screen behind a centred card. The plume is wider and rises from the bottom
+ *   centre so it frames the card. The shader's vignette darkens towards black, so light mode keeps none (it
+ *   would turn the pale sky grey) and stops the plume short of the navy end of the ramp; dark mode uses it
+ *   to sink the corners into the night ground. No tint.
+ */
+const FLUE_VARIANTS: Record<FlueVariant, FlueTuning> = {
+  default: { light: {}, dark: {}, tint: "bg-glass-regular dark:bg-transparent" },
+  sidebar: {
+    light: {
+      speed: 0.22,
+      smokeScale: 1.9,
+      density: 1.85,
+      contrast: 1.45,
+      midpoint: 0.8,
+      glow: 0.3,
+      vignette: 0,
+    },
+    dark: {
+      speed: 0.22,
+      smokeScale: 1.9,
+      density: 1.85,
+      contrast: 1.5,
+      midpoint: 0.8,
+      glow: 0.22,
+      vignette: 0,
+    },
+    tint: "bg-glass-thick dark:bg-transparent",
+  },
+  auth: {
+    light: { width: 1.9, spread: 1.3, density: 1.85, midpoint: 0.8, glow: 0.3, vignette: 0 },
+    dark: { width: 1.9, spread: 1.3, density: 2.0, midpoint: 0.76, glow: 0.45, vignette: 0.45 },
+    tint: "",
+  },
+};
+
+const ENGINE_KEYS = new Set(["cursor", "maxDpr"]);
+
+const VERT = `#version 300 es
+void main() {
+  vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}`;
+
+const FRAG = `#version 300 es
+precision highp float;
+out vec4 fragColor;
+uniform vec2 iResolution; uniform float iTime; uniform vec2 iMouse; uniform vec2 iMouseVel; uniform vec2 iMouseWake;
+uniform vec3 uBgColor, uColorA, uColorB, uColorC, uColorD;
+uniform float uScale, uSpeed, uFlow, uRoughness, uLacunarity;
+uniform float uSmokeScale, uCurl, uCurlScale, uRise, uSlender;
+uniform float uWidth, uSpread, uLean, uDensity;
+uniform float uContrast, uMidpoint, uGlow, uSink;
+uniform float uGrain, uDither, uVignette;
+uniform float uPointerRadius, uDraft, uPointerStrength, uParallax;
+uniform float uGrainAnim;
+#define OCTAVES 3
+#define TRAIL_TAPS 6
+vec2 hash2(vec2 p){ p=vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))); return -1.0+2.0*fract(sin(p)*43758.5453123); }
+float snoise(vec2 p){ const float K1=0.366025404,K2=0.211324865; vec2 i=floor(p+(p.x+p.y)*K1); vec2 a=p-i+(i.x+i.y)*K2; float m=step(a.y,a.x); vec2 o=vec2(m,1.0-m); vec2 b=a-o+K2; vec2 c=a-1.0+2.0*K2; vec3 h=max(0.5-vec3(dot(a,a),dot(b,b),dot(c,c)),0.0); vec3 n=h*h*h*h*vec3(dot(a,hash2(i)),dot(b,hash2(i+o)),dot(c,hash2(i+1.0))); return dot(n,vec3(70.0)); }
+float fbm(vec2 p){ float v=0.0,amp=0.5; for(int i=0; i<OCTAVES; i++){ v+=amp*snoise(p); p*=uLacunarity; amp*=uRoughness; } return v; }
+float trail(vec2 uv,float radius){ vec2 wob=vec2(snoise(uv*1.7+vec2(0.0,iTime*0.05)),snoise(uv*1.7+vec2(4.3,-iTime*0.04))); uv+=wob*radius*0.18; float a=0.0,wsum=0.0; float r2=max(1e-4,radius*radius); for(int i=0; i<TRAIL_TAPS; i++){ float k=float(i)/float(TRAIL_TAPS-1); vec2 c=mix(iMouseWake,iMouse,k); vec2 dd=uv-c; float w=mix(0.30,1.0,k); a+=w*exp(-dot(dd,dd)/r2); wsum+=w; } return a/wsum; }
+float potential(vec2 p){ return snoise(p)+0.5*snoise(p*2.03+vec2(3.7,-1.9)); }
+vec2 curl(vec2 p,float e){ float nx1=potential(p+vec2(0.0,e)); float nx2=potential(p-vec2(0.0,e)); float ny1=potential(p+vec2(e,0.0)); float ny2=potential(p-vec2(e,0.0)); return vec2(nx1-nx2,ny2-ny1)/(2.0*e); }
+vec3 ramp4(float t){ vec3 c=mix(uColorA,uColorB,smoothstep(0.00,0.36,t)); c=mix(c,uColorC,smoothstep(0.32,0.70,t)); c=mix(c,uColorD,smoothstep(0.66,1.00,t)); return c; }
+float triDither(vec2 fc){ float a=fract(sin(dot(fc,vec2(12.9898,78.233)))*43758.5453); float b=fract(sin(dot(fc+17.0,vec2(12.9898,78.233)))*43758.5453); return (a+b-1.0)/255.0; }
+float houseGrain(vec2 fc){ uvec2 q=uvec2(fc)*uvec2(1597334677u,3812015801u)+uint(floor(iTime*24.0*uGrainAnim))*2654435769u; uint n=q.x^q.y; n=n*1664525u+1013904223u; n^=n>>16u; n*=2246822519u; n^=n>>13u; float a=float(n&0xffffu)/65535.0; n*=3266489917u; n^=n>>16u; float b=float(n&0xffffu)/65535.0; return a+b-1.0; }
+void main(){ vec2 uv=(gl_FragCoord.xy-0.5*iResolution)/iResolution.y; float t=iTime*uSpeed; float tr=trail(uv,uPointerRadius); vec2 p=(uv-iMouse*uParallax)*uScale; vec2 sp=p+vec2(0.0,-t*uRise); vec2 c=curl(sp*uCurlScale+vec2(0.0,t*uFlow),0.14)*uCurl; c+=iMouseVel*uDraft*tr; vec2 mp=vec2(sp.x,sp.y*uSlender)*uSmokeScale+c; float dens=fbm(mp)*0.5+0.5; float h=uv.y+0.55; float lean=iMouse.x*uLean*clamp(h,0.0,1.6); float width=max(0.06,uWidth*(0.45+uSpread*clamp(h,0.0,1.8))); float xr=(uv.x-lean)/width; float corridor=exp(-xr*xr); float cool=smoothstep(-0.65,0.85,uv.y); float smoke=dens*corridor*mix(1.0,0.30,cool)*uDensity; float f=clamp((smoke-uMidpoint)*uContrast+0.5+tr*uPointerStrength*0.30,0.0,1.0); vec3 col=ramp4(f); col+=uColorD*uGlow*pow(f,4.0); col=mix(uBgColor,col,smoothstep(0.0,max(0.01,uSink),f)*0.90+0.10); col*=1.0-uVignette*dot(uv,uv); { float hgL=clamp(dot(col,vec3(0.299,0.587,0.114)),0.0,1.0); col+=houseGrain(gl_FragCoord.xy)*uGrain*mix(1.0,4.0*hgL*(1.0-hgL),0.6); } col+=triDither(gl_FragCoord.xy)*uDither; fragColor=vec4(clamp(col,0.0,1.0),1.0); }`;
+
+function hexToVec3(hex: string): [number, number, number] {
+  const value = Number.parseInt(hex.slice(1), 16);
+  return [((value >> 16) & 255) / 255, ((value >> 8) & 255) / 255, (value & 255) / 255];
+}
+
+function compile(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader {
+  const shader = gl.createShader(type);
+  if (!shader) throw new Error("Flue: createShader failed");
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
+    throw new Error(gl.getShaderInfoLog(shader) ?? "Flue: compile failed");
+  return shader;
+}
+
+const USE_PROGRAM = "useProgram";
+
+function activate(gl: WebGL2RenderingContext, program: WebGLProgram): void {
+  gl[USE_PROGRAM](program);
+}
+
+export type FlueBackgroundProps = {
+  className?: string;
+  style?: CSSProperties;
+  /** `sidebar` under the sidebar glass, `auth` behind the sign-in screen, `default` otherwise. */
+  variant?: FlueVariant;
+  /** Overrides on top of the variant's `FLUE_SKY` (light) or `FLUE_NIGHT` (dark) tuning. */
+  config?: Partial<FlueConfig>;
+  /** Classes for the tint laid over the smoke; defaults to the variant's tint. */
+  tintClassName?: string;
+};
+
+/**
+ * Flue: an animated WebGL2 smoke gradient, one fullscreen triangle and one fragment shader.
+ * It fills its positioned parent behind the content (the parent needs `isolate`) and falls
+ * back to the flat `bgColor` when WebGL2 is missing. Reduced motion draws a single still frame.
+ * Light mode paints the white-and-sky `FLUE_SKY`; dark mode paints the black-and-blue `FLUE_NIGHT`.
+ */
+export function FlueBackground({ className, style, variant = "default", config, tintClassName }: FlueBackgroundProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const dark = useColorScheme() === "dark";
+  const tuning = FLUE_VARIANTS[variant];
+  const settings = { ...(dark ? FLUE_NIGHT : FLUE_SKY), ...(dark ? tuning.dark : tuning.light), ...config };
+  const key = JSON.stringify(settings);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return undefined;
+    const cfg: FlueConfig = JSON.parse(key);
+    const gl = canvas.getContext("webgl2", {
+      alpha: false,
+      antialias: false,
+      depth: false,
+      stencil: false,
+      powerPreference: "high-performance",
+    });
+    // StrictMode replays the effect on the same canvas. A context that a previous run lost
+    // cannot compile again, so fall back to the flat bgColor instead of throwing.
+    if (!gl || gl.isContextLost()) return undefined;
+
+    const program = gl.createProgram();
+    if (!program) return undefined;
+    const vertexShader = compile(gl, gl.VERTEX_SHADER, VERT);
+    const fragmentShader = compile(gl, gl.FRAGMENT_SHADER, FRAG);
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS))
+      throw new Error(gl.getProgramInfoLog(program) ?? "Flue: link failed");
+    activate(gl, program);
+    const vertexArray = gl.createVertexArray();
+    gl.bindVertexArray(vertexArray);
+
+    const locations = new Map<string, WebGLUniformLocation | null>();
+    const loc = (name: string) => {
+      if (!locations.has(name)) locations.set(name, gl.getUniformLocation(program, name));
+      return locations.get(name) ?? null;
+    };
+    for (const [name, value] of Object.entries(cfg)) {
+      if (ENGINE_KEYS.has(name)) continue;
+      const uniform = `u${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+      if (typeof value === "string") gl.uniform3f(loc(uniform), ...hexToVec3(value));
+      else gl.uniform1f(loc(uniform), value);
+    }
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, cfg.maxDpr);
+      const width = Math.max(1, Math.round(canvas.clientWidth * dpr));
+      const height = Math.max(1, Math.round(canvas.clientHeight * dpr));
+      if (canvas.width !== width || canvas.height !== height) {
+        canvas.width = width;
+        canvas.height = height;
+      }
+      gl.viewport(0, 0, width, height);
+      gl.uniform2f(loc("iResolution"), width, height);
+    };
+
+    const mouse = { x: 0, y: 0, ax: 0, ay: 0, wx: 0, wy: 0, tx: 0, ty: 0 };
+    const aim = (event: PointerEvent) => {
+      if (!cfg.cursor) return;
+      const rect = canvas.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) return;
+      mouse.tx = ((event.clientX - rect.left) / rect.width - 0.5) * (rect.width / rect.height);
+      mouse.ty = 0.5 - (event.clientY - rect.top) / rect.height;
+    };
+
+    let clock = 0;
+    const draw = () => {
+      gl.uniform1f(loc("iTime"), clock);
+      gl.uniform2f(loc("iMouse"), mouse.x, mouse.y);
+      gl.uniform2f(loc("iMouseVel"), mouse.ax - mouse.x, mouse.ay - mouse.y);
+      gl.uniform2f(loc("iMouseWake"), mouse.wx, mouse.wy);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    };
+
+    const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let still = motionQuery.matches;
+    let resizeQueued = 0;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(resizeQueued);
+      resizeQueued = requestAnimationFrame(() => {
+        resize();
+        if (still) draw();
+      });
+    });
+    observer.observe(canvas);
+    resize();
+    clock = still ? 12 : 0;
+    draw();
+
+    let visible = true;
+    const visibility = new IntersectionObserver((entries) => {
+      visible = entries.some((entry) => entry.isIntersecting);
+    });
+    visibility.observe(canvas);
+
+    let raf = 0;
+    let previous = performance.now();
+    const frame = (now: number) => {
+      raf = requestAnimationFrame(frame);
+      const raw = now - previous;
+      previous = now;
+      if (!visible || document.hidden) return;
+      const ms = Math.min(50, Math.max(4.167, raw));
+      const step = ms > 36.7 ? 2.2 : ms * 0.06;
+      clock += ms * 0.001;
+      // Without the real pointer, a slow virtual one wanders across the canvas on two incommensurate
+      // sines, so the plume leans, sways and trails on its own the way it does under a moving cursor.
+      if (!cfg.cursor) {
+        const aspect = canvas.clientWidth / Math.max(1, canvas.clientHeight);
+        mouse.tx = aspect * (0.3 * Math.sin(clock * 0.23) + 0.12 * Math.sin(clock * 0.57 + 0.8));
+        mouse.ty = 0.22 * Math.sin(clock * 0.19 + 1.3) + 0.08 * Math.sin(clock * 0.41);
+      }
+      const kLead = 0.105 * step;
+      const kBody = 0.043 * step;
+      const kWake = 0.017 * step;
+      mouse.ax += (mouse.tx - mouse.ax) * kLead;
+      mouse.ay += (mouse.ty - mouse.ay) * kLead;
+      mouse.x += (mouse.ax - mouse.x) * kBody;
+      mouse.y += (mouse.ay - mouse.y) * kBody;
+      mouse.wx += (mouse.x - mouse.wx) * kWake;
+      mouse.wy += (mouse.y - mouse.wy) * kWake;
+      draw();
+    };
+    // The plume follows the OS switch while the page is open: turning on "reduce motion"
+    // freezes the current frame, turning it off resumes from the same clock.
+    const listen = () => {
+      if (still) {
+        window.removeEventListener("pointermove", aim);
+        window.removeEventListener("pointerdown", aim);
+        return;
+      }
+      if (cfg.cursor) {
+        window.addEventListener("pointermove", aim, { passive: true });
+        window.addEventListener("pointerdown", aim, { passive: true });
+      }
+      previous = performance.now();
+      if (!raf) raf = requestAnimationFrame(frame);
+    };
+    const onMotionChange = (event: MediaQueryListEvent) => {
+      still = event.matches;
+      if (still) {
+        cancelAnimationFrame(raf);
+        raf = 0;
+      }
+      listen();
+    };
+    motionQuery.addEventListener("change", onMotionChange);
+    listen();
+
+    return () => {
+      motionQuery.removeEventListener("change", onMotionChange);
+      cancelAnimationFrame(raf);
+      cancelAnimationFrame(resizeQueued);
+      observer.disconnect();
+      visibility.disconnect();
+      window.removeEventListener("pointermove", aim);
+      window.removeEventListener("pointerdown", aim);
+      // Release this run's GL objects without losing the context: the next effect run
+      // (StrictMode, config change) reuses the same WebGL2RenderingContext.
+      gl.bindVertexArray(null);
+      gl.deleteVertexArray(vertexArray);
+      gl.deleteProgram(program);
+      gl.deleteShader(vertexShader);
+      gl.deleteShader(fragmentShader);
+    };
+  }, [key]);
+
+  return (
+    <div
+      aria-hidden
+      className={cn("pointer-events-none absolute inset-0 -z-10 overflow-hidden", className)}
+      style={{ backgroundColor: settings.bgColor, ...style }}
+    >
+      <canvas ref={canvasRef} className="block size-full" />
+      <div className={cn("absolute inset-0", tintClassName ?? tuning.tint)} />
+    </div>
+  );
+}

package/src/components/horon-icon.tsx

@@ -0,0 +1,280 @@
+import {
+  Archive,
+  ArrowClockwise,
+  ArrowDown,
+  ArrowElbowDownLeft,
+  ArrowRight,
+  ArrowSquareOut,
+  ArrowUp,
+  Bell,
+  BookmarkSimple,
+  Brain,
+  CalendarBlank,
+  CaretDown,
+  CaretLeft,
+  CaretRight,
+  CaretUpDown,
+  ChartLineUp,
+  ChatCircle,
+  Check,
+  CheckCircle,
+  ClipboardText,
+  Clock,
+  Code,
+  Command,
+  Copy,
+  Cube,
+  DotsThree,
+  Drop,
+  EnvelopeSimple,
+  Eye,
+  FilePdf,
+  FileText,
+  Files,
+  Flask,
+  Folder,
+  Gear,
+  GitPullRequest,
+  Globe,
+  House,
+  Image,
+  Info,
+  Key,
+  Lightning,
+  List,
+  ListChecks,
+  MagnifyingGlass,
+  Megaphone,
+  Microphone,
+  Minus,
+  PaperPlaneTilt,
+  Paperclip,
+  Pause,
+  PenNib,
+  PencilSimple,
+  Play,
+  Plug,
+  Plus,
+  PlusCircle,
+  Question,
+  Repeat,
+  Robot,
+  Scan,
+  SignOut,
+  SlidersHorizontal,
+  Sparkle,
+  SquaresFour,
+  Stop,
+  ThumbsDown,
+  ThumbsUp,
+  Trash,
+  Tray,
+  UploadSimple,
+  User,
+  UserPlus,
+  UsersThree,
+  Warning,
+  WarningCircle,
+  Wrench,
+  X,
+  type Icon,
+} from "@phosphor-icons/react";
+import type { ComponentProps } from "react";
+
+export type HoronIconProps = Omit<ComponentProps<"svg">, "children"> & { size?: number | string };
+
+/**
+ * Figma `icon/horon` (256:9116): the line falcon eye that stands in for Horon in
+ * navigation. Phosphor has no equivalent, so the path is copied from the Tab bar
+ * (63:441) export. It takes `currentColor` and sizes like a Phosphor icon.
+ */
+export function HoronIcon({ size = "1em", ...props }: HoronIconProps) {
+  return (
+    <svg viewBox="0 0 22 22" width={size} height={size} fill="currentColor" aria-hidden {...props}>
+      <path d="M20.1444 5.12948C19.6411 5.2126 19.307 5.26623 17.0453 5.62287C16.2541 5.74889 15.3486 5.89369 15.0343 5.94464C14.72 5.99559 14.1221 6.09212 13.7045 6.15915C9.0054 6.918 6.10856 7.48379 3.04688 8.23996C1.89737 8.52419 1.98968 8.44911 1.05997 9.83005C0.251141 11.026 0.255537 11.0233 0.240152 11.0984C0.198391 11.2914 0.279714 11.5194 0.415984 11.5998C0.55665 11.6802 0.653358 11.6588 1.1347 11.4255C2.09079 10.9643 2.63807 10.7096 2.65345 10.7203C2.66005 10.7257 2.73038 10.8436 2.80511 10.9804C4.99202 14.9302 7.76138 16.9386 11.0231 16.9359C13.3616 16.9359 15.2892 16.0054 17.397 13.8603C18.1245 13.1229 19.6411 11.337 19.7246 11.1225C19.8191 10.8865 19.8015 10.6157 19.6828 10.4146C19.6059 10.2832 17.7179 8.63145 16.7376 7.84042C16.5992 7.7278 16.5003 7.63127 16.5178 7.62859C16.5354 7.62322 16.8981 7.56155 17.3201 7.48647C17.7443 7.41407 18.4674 7.28804 18.9311 7.20492C19.3949 7.12447 20.1686 6.99845 20.6521 6.92337C21.1356 6.85097 21.5466 6.77857 21.5686 6.76516C21.6851 6.6874 21.7708 6.50774 21.7708 6.34417C21.7708 6.2101 21.7159 6.10016 21.4258 5.64968C21.0191 5.02222 20.951 4.99541 20.1444 5.12948ZM14.9485 8.37403C16.0079 9.18919 18.0564 10.8865 18.0564 10.9482C18.0564 10.9616 17.9047 11.1627 17.7223 11.3933C15.4409 14.2464 13.4034 15.4879 11.0121 15.4825C8.2735 15.4745 5.93053 13.7932 4.1722 10.5701C3.97219 10.2001 3.84911 9.95608 3.8601 9.94267C3.91285 9.881 6.76134 9.25086 8.00096 9.02562C8.20756 8.98808 8.50428 8.93445 8.66033 8.90495C8.81858 8.87814 8.95924 8.85401 8.97683 8.85401C8.99221 8.85401 8.93506 8.94518 8.84935 9.0578C7.69984 10.5326 8.03173 12.911 9.51971 13.8469C11.0846 14.8336 12.966 13.5841 13.1572 11.4282C13.2583 10.2913 12.7396 9.08461 11.9066 8.51883C11.8209 8.45983 11.7484 8.4062 11.7484 8.39816C11.7484 8.38475 14.2606 7.97986 14.3771 7.97181C14.4013 7.96913 14.6584 8.15147 14.9485 8.37403Z" />
+    </svg>
+  );
+}
+
+/**
+ * Paper's icon contract: every icon is a component named `icon/<name>`. `iconNames` is that list in
+ * Paper order. Paper draws three sizes (16 in small controls and captions, 20 in buttons and rows,
+ * 24 in bars and empty states); 12, 14, 18 and 22 elsewhere in the code stay as they are.
+ */
+export const iconNames = [
+  "plus",
+  "x",
+  "check",
+  "minus",
+  "chevron-down",
+  "chevron-right",
+  "chevron-left",
+  "search",
+  "send",
+  "arrow-up",
+  "arrow-right",
+  "bot",
+  "user",
+  "settings",
+  "bell",
+  "info",
+  "circle-alert",
+  "circle-check",
+  "triangle-alert",
+  "inbox",
+  "mail",
+  "calendar",
+  "paperclip",
+  "mic",
+  "ellipsis",
+  "copy",
+  "log-out",
+  "sparkles",
+  "eye",
+  "trash",
+  "globe",
+  "question",
+  "drop",
+  "list-checks",
+  "grid",
+  "key",
+  "external-link",
+  "caret-up-down",
+  "user-plus",
+  "folder",
+  "thumbs-up",
+  "arrow-clockwise",
+  "image",
+  "plug",
+  "thumbs-down",
+  "chat-circle",
+  "command",
+  "enter",
+  "wrench",
+  "clock",
+  "repeat",
+  "house",
+  "file-text",
+  "git-pull-request",
+  "upload",
+  "archive",
+  "stop",
+  "sliders",
+  "lightning",
+  "pause",
+  "play",
+  "arrow-down",
+  "scan",
+  "file-pdf",
+  "brain",
+  "bookmark-simple",
+  "files",
+  "list",
+  "horon",
+  "cube",
+  "code",
+  "clipboard-text",
+  "megaphone",
+  "pen-nib",
+  "chart-line-up",
+  "flask",
+  "users-three",
+  "pencil-simple",
+  "plus-circle",
+] as const;
+
+export type HoronIconName = (typeof iconNames)[number];
+
+const phosphorGlyphs: Record<Exclude<HoronIconName, "horon">, Icon> = {
+  plus: Plus,
+  x: X,
+  check: Check,
+  minus: Minus,
+  "chevron-down": CaretDown,
+  "chevron-right": CaretRight,
+  "chevron-left": CaretLeft,
+  search: MagnifyingGlass,
+  send: PaperPlaneTilt,
+  "arrow-up": ArrowUp,
+  "arrow-right": ArrowRight,
+  bot: Robot,
+  user: User,
+  settings: Gear,
+  bell: Bell,
+  info: Info,
+  "circle-alert": WarningCircle,
+  "circle-check": CheckCircle,
+  "triangle-alert": Warning,
+  inbox: Tray,
+  mail: EnvelopeSimple,
+  calendar: CalendarBlank,
+  paperclip: Paperclip,
+  mic: Microphone,
+  ellipsis: DotsThree,
+  copy: Copy,
+  "log-out": SignOut,
+  sparkles: Sparkle,
+  eye: Eye,
+  trash: Trash,
+  globe: Globe,
+  question: Question,
+  drop: Drop,
+  "list-checks": ListChecks,
+  grid: SquaresFour,
+  key: Key,
+  "external-link": ArrowSquareOut,
+  "caret-up-down": CaretUpDown,
+  "user-plus": UserPlus,
+  folder: Folder,
+  "thumbs-up": ThumbsUp,
+  "arrow-clockwise": ArrowClockwise,
+  image: Image,
+  plug: Plug,
+  "thumbs-down": ThumbsDown,
+  "chat-circle": ChatCircle,
+  command: Command,
+  enter: ArrowElbowDownLeft,
+  wrench: Wrench,
+  clock: Clock,
+  repeat: Repeat,
+  house: House,
+  "file-text": FileText,
+  "git-pull-request": GitPullRequest,
+  upload: UploadSimple,
+  archive: Archive,
+  stop: Stop,
+  sliders: SlidersHorizontal,
+  lightning: Lightning,
+  pause: Pause,
+  play: Play,
+  "arrow-down": ArrowDown,
+  scan: Scan,
+  "file-pdf": FilePdf,
+  brain: Brain,
+  "bookmark-simple": BookmarkSimple,
+  files: Files,
+  list: List,
+  cube: Cube,
+  code: Code,
+  "clipboard-text": ClipboardText,
+  megaphone: Megaphone,
+  "pen-nib": PenNib,
+  "chart-line-up": ChartLineUp,
+  flask: Flask,
+  "users-three": UsersThree,
+  "pencil-simple": PencilSimple,
+  "plus-circle": PlusCircle,
+};
+
+export type HoronGlyphProps = Omit<ComponentProps<"svg">, "children" | "ref"> & {
+  name: HoronIconName;
+  /** Paper sizes are 16, 20 and 24. */
+  size?: number | string;
+};
+
+/** Figma `icon/<name>`: resolves a registry name to its glyph. Takes `currentColor`, so the parent's text color drives it. */
+export function HoronGlyph({ name, size = 20, ...props }: HoronGlyphProps) {
+  if (name === "horon") return <HoronIcon size={size} {...props} />;
+  const Glyph = phosphorGlyphs[name];
+  return <Glyph aria-hidden size={size} {...props} />;
+}

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>
+  );
+}