{
  "generatedFrom": "space.contract.json",
  "component": "Space",
  "slug": "space",
  "group": "Layout",
  "tier": "leaf-lit",
  "summary": "An even, DS-scale gap between a small inline set of items — buttons, tags, inline controls.",
  "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/aha-space';",
    "element": "aha-space",
    "registers": "aha-space"
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/space/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/space/space.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/space.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/space.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — <aha-space> 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-space"
    },
    "vue": {
      "via": "web-component",
      "ref": "aha-space"
    },
    "html": {
      "via": "web-component",
      "ref": "aha-space",
      "runnable": "paste-and-run — no build step, renders on open"
    }
  },
  "props": [
    {
      "name": "size",
      "type": "small | middle | large | number",
      "default": "small",
      "desc": "Gap between items — named DS step (8/16/24) or a raw pixel number"
    },
    {
      "name": "direction",
      "type": "horizontal | vertical",
      "default": "horizontal",
      "desc": "Lay items in a row or stack them"
    },
    {
      "name": "align",
      "type": "start | center | end | baseline",
      "default": "center",
      "desc": "Cross-axis alignment (align-items)"
    },
    {
      "name": "wrap",
      "type": "boolean",
      "default": "false",
      "desc": "Allow items to wrap onto multiple lines"
    },
    {
      "name": "split",
      "type": "boolean",
      "default": "false",
      "desc": "Rule a thin --aha-split divider between adjacent items"
    }
  ],
  "tokens": [
    "text-default",
    "split"
  ],
  "spec": [
    {
      "label": "Display",
      "value": "inline-flex (row) · flex (vertical)"
    },
    {
      "label": "Size scale",
      "value": "small 8 · middle 16 · large 24 (or a raw px number)"
    },
    {
      "label": "Default",
      "value": "size small (8), row, items centred"
    },
    {
      "label": "Align",
      "value": "start · center · end · baseline (align-items)"
    },
    {
      "label": "Wrap",
      "value": "off by default; on lets a row flow onto multiple lines"
    },
    {
      "label": "Split",
      "value": "1px --aha-split #F1F1F1 rule between adjacent items (half-gap inset)"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Space",
        "when": "spacing a small inline set of items evenly — buttons in a toolbar, tags in a row"
      },
      {
        "what": "Flex",
        "when": "you need alignment/justification control over a block-level layout"
      },
      {
        "what": "Grid",
        "when": "the items belong in two-dimensional rows and columns"
      }
    ],
    "note": "Space is the lightweight spacer — no alignment gymnastics, just a consistent gap. Keep sizes on the named scale so inline spacing matches across surfaces. It is layout, never decoration: it paints no background.",
    "dsv3": "COVERED — DS V3 has no dedicated Space component (search_design_system on MwjvUjVI0HnfwD9EwPXRAy returns none); spec derived from the DS spacing scale (8/16/24) + AntD Space matrix (direction/size/align/wrap/split — inline gap, small default, vertical stacking, cross-axis align, row wrap, and a divider between items). A deliberate, documented layout extension; the visual tokens it binds are inherited text colour and --aha-split for the divider rule."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "settings",
    "audience"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step.\n     <aha-space> is the SAME shared custom element React and Vue consume — here in its\n     native form. Theming comes only from the --aha-* tokens in tokens.css. -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css\">\n<script type=\"module\">\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-space.js';   // registers <aha-space>\n</script>\n\n<!-- even gap between inline actions; size on the DS scale, cross-axis centred -->\n<aha-space size=\"middle\" align=\"center\">\n  <button>Save</button>\n  <button>Cancel</button>\n  <button>More</button>\n</aha-space>\n\n<!-- a thin --aha-split rule between items -->\n<aha-space size=\"middle\" split style=\"margin-top:24px\">\n  <a href=\"#\">Edit</a>\n  <a href=\"#\">Duplicate</a>\n  <a href=\"#\">Delete</a>\n</aha-space>\n\n<!-- a row that wraps onto multiple lines when it runs out of width -->\n<aha-space size=\"small\" wrap style=\"max-width:220px; margin-top:24px\">\n  <span>alpha</span><span>beta</span><span>gamma</span><span>delta</span><span>epsilon</span>\n</aha-space>\n\n<!-- vertical stack -->\n<aha-space direction=\"vertical\" size=\"small\" style=\"margin-top:24px\">\n  <div>Line one</div>\n  <div>Line two</div>\n  <div>Line three</div>\n</aha-space>\n",
    "react": "import '@ahaslides-product/design/aha-space';   // registers <aha-space>\n\n// A static layout primitive — the custom element renders identically in React, no wrapper needed.\n<aha-space size=\"middle\" align=\"center\">\n  <Button>Save</Button>\n  <Button variant=\"secondary\">Cancel</Button>\n</aha-space>\n\n// A thin divider between inline actions\n<aha-space size=\"middle\" split>\n  <a href=\"#\">Edit</a>\n  <a href=\"#\">Duplicate</a>\n  <a href=\"#\">Delete</a>\n</aha-space>\n\n// Vertical stack\n<aha-space direction=\"vertical\" size=\"small\">\n  <Field label=\"Name\" />\n  <Field label=\"Email\" />\n</aha-space>\n",
    "vue": "// main.ts — register the element + mark aha-* as custom elements\nimport '@ahaslides-product/design/aha-space';\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue\n<template>\n  <aha-space size=\"middle\" align=\"center\">\n    <button>Save</button>\n    <button>Cancel</button>\n  </aha-space>\n\n  <!-- A thin divider between inline actions -->\n  <aha-space size=\"middle\" split>\n    <a href=\"#\">Edit</a>\n    <a href=\"#\">Duplicate</a>\n    <a href=\"#\">Delete</a>\n  </aha-space>\n\n  <!-- Vertical stack -->\n  <aha-space direction=\"vertical\" size=\"small\">\n    <Field label=\"Name\" />\n    <Field label=\"Email\" />\n  </aha-space>\n</template>\n"
  }
}