{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-mark",
  "title": "AI mark",
  "description": "Quill's AI sparkle — the one icon that means AI, drawn in the AI gradient with a one-star cut for 16px and under.",
  "files": [
    {
      "path": "registry/lib/ai-mark.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n// Two four-point stars, each its own path so the gradient spans each star (a\n// shared gradient left the small star one flat colour). Approved 2026-10-02.\nconst BIG = 'M10 4.5Q11.6 12.4 19.5 14Q11.6 15.6 10 23.5Q8.4 15.6 0.5 14Q8.4 12.4 10 4.5Z'\nconst SMALL = 'M18.4 0.8Q19.25 4.95 23.4 5.8Q19.25 6.65 18.4 10.8Q17.55 6.65 13.4 5.8Q17.55 4.95 18.4 0.8Z'\n// At 16px and under two stars blur together, so draw one.\nconst SOLO = 'M12 1Q13.9 10.1 23 12Q13.9 13.9 12 23Q10.1 13.9 1 12Q10.1 10.1 12 1Z'\n\n// The icon scale's steps, in px, so the mark can pick its drawing from a step name. Written as\n// whole class names so Tailwind finds them. w-/h- rather than size-: a part that sizes its icons\n// (a Button, a Badge) skips an svg whose class says size-, and the mark should follow the part.\nconst STEPS = {\n  'icon-3xs': [8, 'w-icon-3xs h-icon-3xs'],\n  'icon-2xs': [10, 'w-icon-2xs h-icon-2xs'],\n  'icon-xs': [12, 'w-icon-xs h-icon-xs'],\n  'icon-sm': [14, 'w-icon-sm h-icon-sm'],\n  'icon-md': [16, 'w-icon-md h-icon-md'],\n  'icon-lg': [18, 'w-icon-lg h-icon-lg'],\n  'icon-xl': [20, 'w-icon-xl h-icon-xl'],\n  'icon-2xl': [24, 'w-icon-2xl h-icon-2xl'],\n  'icon-3xl': [28, 'w-icon-3xl h-icon-3xl'],\n} as const\nexport type AiMarkSize = keyof typeof STEPS\n\n// Sized by a step of the icon scale (`size=\"icon-md\"`); a number still works but is off the scale.\n/** Quill's AI sparkle — the one icon that means AI, drawn in the AI gradient with a one-star cut for 16px and under. */\nexport function AiMark({ size = 'icon-lg', label, className }: { size?: AiMarkSize | number; label?: string; className?: string }) {\n  // useId keeps gradient ids unique per instance; a shared id renders every\n  // later mark black once the first leaves the page.\n  const id = React.useId().replace(/:/g, '')\n  const [px, stepClass] = typeof size === 'number' ? [size, ''] : STEPS[size]\n  const paths = px <= 16 ? [SOLO] : [BIG, SMALL]\n  return (\n    <svg\n      width={px}\n      height={px}\n      viewBox=\"0 0 24 24\"\n      className={cn('inline-block shrink-0', stepClass, className)}\n      {...(label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true })}\n    >\n      <defs>\n        {paths.map((_, i) => (\n          // Stops pulled in to 0.28 / 0.72 so gold and indigo reach the star bodies, not only the tips.\n          <linearGradient key={i} id={`${id}-${i}`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n            <stop offset=\"0.28\" stopColor=\"var(--ai-from)\" />\n            <stop offset=\"0.5\" stopColor=\"var(--ai-via)\" />\n            <stop offset=\"0.72\" stopColor=\"var(--ai-to)\" />\n          </linearGradient>\n        ))}\n      </defs>\n      {paths.map((d, i) => <path key={i} d={d} fill={`url(#${id}-${i})`} />)}\n    </svg>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/ai-mark.tsx"
    }
  ],
  "docs": "Quill's AI sparkle — the one icon that means AI, drawn in the AI gradient with a one-star cut for 16px and under. Do: Use the AI mark only where the thing it sits on calls an AI or was made by one. Don't: Use the sparkle as decoration, a \"new\" marker or a rating star — once it appears on non-AI things it stops meaning AI. Do: Let the mark draw its own gradient at every size; pass `size` as a step of the icon scale (`size=\"icon-md\"`, default `icon-lg`), never a colour. The step also picks the drawing: one star at `icon-md` and smaller, two above. Don't: Recolour the mark with a text colour or a single pigment — the gradient is what makes it read as AI. Do: Pass `label` when the mark is the only thing that says \"AI\" (an icon-only button or avatar). Don't: Leave a standalone mark unlabelled — screen readers hear nothing. Use ai-badge when you are labelling a piece of content as AI-made; the badge carries the mark and the words. Use icon when the icon means anything other than AI — every other icon comes from the Material Symbols set.",
  "type": "registry:ui"
}