Aurora OperationIcon

1"use client"
2 
3/**
4 * Aurora OperationIcon — Axon operation glyph family, tone-coded.
5 *
6 * A self-contained icon component matching the Claude Design source 1:1. Each
7 * Axon operation (`scrape`, `crawl`, `ask`, …) maps to a distinct line glyph and
8 * a semantic tone derived from its operation class:
9 *   - Fetch / read   → cyan   (scrape, map, retrieve, screenshot, endpoints)
10 *   - Async jobs     → orange (crawl, extract, embed, ingest)
11 *   - AI / reason    → orange (ask, summarize, research, suggest)
12 *
13 * The visual layer reads Aurora-owned tokens so it
14 * renders identically in dark + `.light`. Architecture stays shadcn: a glyph map,
15 * `forwardRef`, `displayName`, named + default export, and a11y (role/aria-label
16 * with an option to mark the glyph decorative).
17 */
18 
19import * as React from "react"
20import { cn } from "@/lib/utils"
21 
22// ─── Tones ───────────────────────────────────────────────────────────────────
23 
24export type OperationTone = "cyan" | "orange" | "rose" | "neutral"
25 
26export type OperationName =
27  | "scrape"
28  | "map"
29  | "retrieve"
30  | "screenshot"
31  | "endpoints"
32  | "crawl"
33  | "extract"
34  | "embed"
35  | "ingest"
36  | "ask"
37  | "summarize"
38  | "research"
39  | "suggest"
40 
41const TONE_BY_NAME: Record<OperationName, OperationTone> = {
42  // Fetch · read (cyan)
43  scrape: "cyan",
44  map: "cyan",
45  retrieve: "cyan",
46  screenshot: "cyan",
47  endpoints: "cyan",
48  // Async jobs (orange)
49  crawl: "orange",
50  extract: "orange",
51  embed: "orange",
52  ingest: "orange",
53  // AI / reason (orange)
54  ask: "orange",
55  summarize: "orange",
56  research: "orange",
57  suggest: "orange",
58}
59 
60// ─── Visual layer (ported from Claude Design) ──────────────────────────────────
61// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
62 
63// ─── Glyphs ────────────────────────────────────────────────────────────────────
64// Each glyph draws on a 24×24 grid with currentColor strokes.
65 
66type GlyphProps = { size: number }
67 
68function svg(children: React.ReactNode, size: number) {
69  return (
70    <svg
71      width={size}
72      height={size}
73      viewBox="0 0 24 24"
74      fill="none"
75// … truncated