{
  "generatedFrom": "illustration.contract.json",
  "component": "Illustration",
  "slug": "illustration",
  "group": "General",
  "tier": "leaf-lit",
  "summary": "One spot-art set, called by name — 20 multi-colour illustrations imported from Figma, rendered by the shared <aha-illustration>, never inline SVG.",
  "install": {
    "package": "@ahaslides-product/design",
    "registry": "https://npm.pkg.github.com",
    "scope": "@ahaslides-product",
    "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.",
    "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages",
    "command": "npm i @ahaslides-product/design",
    "tokenLayer": "import '@ahaslides-product/design/tokens.css';",
    "import": "import '@ahaslides-product/design/illustrations';",
    "element": "aha-illustration",
    "registers": "aha-illustration"
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/illustration/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/illustration/illustration.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/illustration.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/illustration.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — <aha-illustration> is a standard custom element that renders on open — React/Vue are thin adapters over the same element. Paste into an .html file and it renders with no build step.",
  "frameworks": {
    "react": {
      "via": "web-component",
      "ref": "aha-illustration"
    },
    "vue": {
      "via": "web-component",
      "ref": "aha-illustration"
    },
    "html": {
      "via": "web-component",
      "ref": "aha-illustration",
      "runnable": "paste-and-run — no build step, renders on open"
    }
  },
  "props": [
    {
      "name": "name",
      "type": "string",
      "default": "—",
      "desc": "Registry illustration name, e.g. empty-team, onboarding-business, plan-pro"
    },
    {
      "name": "size",
      "type": "number (px)",
      "default": "art intrinsic",
      "desc": "Longer edge in px; the shorter edge scales to preserve aspect. Omit to use the art's own pixels"
    },
    {
      "name": "label",
      "type": "string",
      "default": "—",
      "desc": "Accessible name (role=img). Omit for a decorative illustration"
    },
    {
      "name": "decorative",
      "type": "boolean",
      "default": "false",
      "desc": "aria-hidden — for art that only repeats adjacent text"
    }
  ],
  "tokens": [
    "color-error"
  ],
  "spec": [
    {
      "label": "Set",
      "value": "20 illustrations · empty · onboarding · plan · offer · state · team · misc"
    },
    {
      "label": "Source",
      "value": "Figma · Oldies library · file P764iQ6y4ZwW7W3f7FLZyW"
    },
    {
      "label": "Colour",
      "value": "multi-colour — keeps its own palette (NOT currentColor)"
    },
    {
      "label": "Size",
      "value": "one edge in px; the other follows the art's aspect ratio"
    },
    {
      "label": "Fallback",
      "value": "unknown name → a dashed error box (var(--aha-color-error))"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "empty-* illustration",
        "when": "an empty state — no presentations, empty trash, no templates, no team yet"
      },
      {
        "what": "onboarding-* / plan-* illustration",
        "when": "onboarding choice cards and plan-tier cards (edu / essential / pro / enterprise)"
      },
      {
        "what": "error-* / not-found illustration",
        "when": "a full-surface error or 404 state, paired with a recovery action"
      }
    ],
    "note": "Call by name from the registry — never inline an <svg>, never paste a raster PNG. An illustration is multi-colour art: it does NOT follow currentColor (that is <aha-icon>). Size it by a single edge; the aspect ratio is fixed by the source. If an illustration is genuinely missing, add the SVG under illustrations/svg and re-run build-illustrations.mjs. Raster-backed art (embedded bitmaps) is intentionally excluded — the library stays pure-SVG."
  },
  "surfaces": [
    "dashboard",
    "editor",
    "settings",
    "audience"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step.\n     Call any illustration BY NAME — never inline an <svg>. One import loads <aha-illustration> +\n     the multi-colour spot-art registry; art keeps its OWN palette, size is one edge (px), the\n     other edge follows the art's aspect ratio. -->\n<script type=\"module\">\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/illustrations.js';   // registers <aha-illustration> + registry\n</script>\n\n<!-- Empty state — a large spot illustration above the copy + a recovery action. -->\n<div style=\"display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center\">\n  <aha-illustration name=\"empty-presentation-list\" size=\"160\" label=\"No presentations yet\"></aha-illustration>\n  <p>No presentations yet — create your first one to get started.</p>\n  <button>Create presentation</button>\n</div>\n\n<!-- Plan-tier card — a compact illustration heads each tier. -->\n<div style=\"display:flex; gap:24px\">\n  <div><aha-illustration name=\"plan-essential\" size=\"96\" decorative></aha-illustration><div>Essential</div></div>\n  <div><aha-illustration name=\"plan-pro\" size=\"96\" decorative></aha-illustration><div>Pro</div></div>\n  <div><aha-illustration name=\"plan-enterprise\" size=\"96\" decorative></aha-illustration><div>Enterprise</div></div>\n</div>\n\n<!-- Onboarding choice — sized by a single edge; the aspect ratio is fixed by the source art. -->\n<aha-illustration name=\"onboarding-business\" size=\"56\" label=\"Business\"></aha-illustration>\n",
    "react": "import '@ahaslides-product/design/illustrations';   // registers <aha-illustration> + loads the spot-art registry (20 illustrations)\n\n// Call any illustration BY NAME — never inline an <svg>. Browse names in the Illustration library,\n// or read illustration.agent.json. Unlike <aha-icon>, an illustration is MULTI-COLOUR — it keeps\n// its own palette, so there is no currentColor. Size is a single edge (px); aspect ratio is fixed.\n\n// Empty state — a large illustration above the copy + a recovery action.\n<div className=\"empty\">\n  <aha-illustration name=\"empty-trash\" size={160} label=\"Trash is empty\" />\n  <p>Your trash is empty.</p>\n</div>\n\n// Plan-tier card — a compact illustration heads each tier (decorative when the label is adjacent text).\n<div className=\"tiers\">\n  <aha-illustration name=\"plan-essential\" size={96} decorative />\n  <aha-illustration name=\"plan-pro\" size={96} decorative />\n  <aha-illustration name=\"plan-enterprise\" size={96} decorative />\n</div>\n\n// Onboarding / referral / error families are the same call, different name:\n<aha-illustration name=\"onboarding-education\" size={56} label=\"Education\" />\n<aha-illustration name=\"referral\" size={128} label=\"Refer a friend\" />\n<aha-illustration name=\"error-ai-chatbot\" size={120} label=\"The assistant hit an error\" />\n",
    "vue": "// main.ts — register the element + registry, and mark aha-* as custom elements\nimport '@ahaslides-product/design/illustrations';   // registers <aha-illustration> + loads the spot-art registry (20 illustrations)\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue — every surface renders spot art through the shared Illustration, BY NAME.\n// Browse names in the Illustration library. An illustration is MULTI-COLOUR — it keeps its own\n// palette (no currentColor). Size is a single edge (px); the aspect ratio is fixed by the source.\n<template>\n  <!-- Empty state — a large illustration above the copy + a recovery action -->\n  <div class=\"empty\">\n    <aha-illustration name=\"empty-templates\" :size=\"160\" label=\"No templates yet\" />\n    <p>No templates yet.</p>\n  </div>\n\n  <!-- Plan-tier card — a compact illustration heads each tier (decorative beside a text label) -->\n  <div class=\"tiers\">\n    <aha-illustration name=\"plan-essential\" :size=\"96\" decorative />\n    <aha-illustration name=\"plan-pro\" :size=\"96\" decorative />\n    <aha-illustration name=\"plan-enterprise\" :size=\"96\" decorative />\n  </div>\n\n  <!-- Onboarding / referral / error families are the same call, different name -->\n  <aha-illustration name=\"onboarding-others\" :size=\"56\" label=\"Something else\" />\n  <aha-illustration name=\"referral\" :size=\"128\" label=\"Refer a friend\" />\n</template>\n"
  }
}