{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "name": "summitjs",
  "version": "0.4.1",
  "description": "The open source, AI Agent Native JavaScript framework. Add behavior directly in your HTML with signal-powered s- directives and $ magics. No build step, CSP-safe, about 16KB with focus, positioning, persistence, and masking built in.",
  "homepage": "https://velofy.github.io/summitjs/",
  "docs": "https://velofy.github.io/summitjs/",
  "llms": "https://velofy.github.io/summitjs/llms.txt",
  "llmsFull": "https://velofy.github.io/summitjs/llms-full.txt",
  "agents": "https://github.com/velofy/summitjs/blob/main/AGENTS.md",
  "allowedGlobals": [
    "Math",
    "JSON",
    "Date",
    "Object",
    "Array",
    "Number",
    "String",
    "Boolean",
    "console",
    "window",
    "document",
    "location",
    "localStorage",
    "sessionStorage",
    "setTimeout",
    "setInterval",
    "fetch",
    "URL",
    "structuredClone"
  ],
  "directives": [
    {
      "name": "s-data",
      "shorthand": null,
      "summary": "Declare reactive state on an element; descendants read and write it.",
      "example": "<div s-data=\"{ count: 0 }\">",
      "doc": "https://velofy.github.io/summitjs/s-data/"
    },
    {
      "name": "s-text",
      "shorthand": null,
      "summary": "Set the element's textContent from an expression.",
      "example": "<span s-text=\"count\"></span>",
      "doc": "https://velofy.github.io/summitjs/s-text/"
    },
    {
      "name": "s-html",
      "shorthand": null,
      "summary": "Set innerHTML from an expression (trusted content only).",
      "example": "<div s-html=\"markup\"></div>",
      "doc": "https://velofy.github.io/summitjs/s-html/"
    },
    {
      "name": "s-bind",
      "shorthand": ":",
      "summary": "Bind an attribute; :class and :style accept objects.",
      "example": "<a :href=\"url\" :class=\"{ on: active }\">",
      "doc": "https://velofy.github.io/summitjs/s-bind/"
    },
    {
      "name": "s-on",
      "shorthand": "@",
      "summary": "Run an expression on a DOM event; supports modifiers.",
      "example": "<button @click=\"count++\">",
      "doc": "https://velofy.github.io/summitjs/s-on/"
    },
    {
      "name": "s-model",
      "shorthand": null,
      "summary": "Two-way bind a form control to state.",
      "example": "<input s-model=\"name\">",
      "doc": "https://velofy.github.io/summitjs/s-model/"
    },
    {
      "name": "s-show",
      "shorthand": null,
      "summary": "Toggle visibility with the display property.",
      "example": "<p s-show=\"open\">",
      "doc": "https://velofy.github.io/summitjs/s-show/"
    },
    {
      "name": "s-if",
      "shorthand": null,
      "summary": "Add or remove from the DOM; a <template s-if> may hold multiple roots.",
      "example": "<template s-if=\"open\">...</template>",
      "doc": "https://velofy.github.io/summitjs/s-if/"
    },
    {
      "name": "s-for",
      "shorthand": null,
      "summary": "Render a keyed list.",
      "example": "<template s-for=\"item in items\" :key=\"item.id\">",
      "doc": "https://velofy.github.io/summitjs/s-for/"
    },
    {
      "name": "s-ref",
      "shorthand": null,
      "summary": "Name an element; read it via $refs.",
      "example": "<input s-ref=\"field\">",
      "doc": "https://velofy.github.io/summitjs/s-ref/"
    },
    {
      "name": "s-init",
      "shorthand": null,
      "summary": "Run an expression once when the element initializes.",
      "example": "<div s-init=\"load()\">",
      "doc": "https://velofy.github.io/summitjs/s-init/"
    },
    {
      "name": "s-effect",
      "shorthand": null,
      "summary": "Re-run an expression whenever its reactive dependencies change.",
      "example": "<div s-effect=\"document.title = title\">",
      "doc": "https://velofy.github.io/summitjs/s-effect/"
    },
    {
      "name": "s-transition",
      "shorthand": null,
      "summary": "Animate enter and leave.",
      "example": "<div s-show=\"open\" s-transition>",
      "doc": "https://velofy.github.io/summitjs/s-transition/"
    },
    {
      "name": "s-teleport",
      "shorthand": null,
      "summary": "Render a template's content elsewhere in the DOM.",
      "example": "<template s-teleport=\"body\">...</template>",
      "doc": "https://velofy.github.io/summitjs/s-teleport/"
    },
    {
      "name": "s-intersect",
      "shorthand": ":leave",
      "summary": "Run an expression when the element enters or leaves the viewport.",
      "example": "<div s-intersect=\"load()\">",
      "doc": "https://velofy.github.io/summitjs/s-intersect/"
    },
    {
      "name": "s-trap",
      "shorthand": null,
      "summary": "Keep keyboard focus inside an element while an expression is truthy.",
      "example": "<div s-trap=\"open\">",
      "doc": "https://velofy.github.io/summitjs/s-trap/"
    },
    {
      "name": "s-anchor",
      "shorthand": null,
      "summary": "Position an element next to a reference, flipping to stay in view.",
      "example": "<div s-anchor=\"$refs.trigger\">",
      "doc": "https://velofy.github.io/summitjs/s-anchor/"
    },
    {
      "name": "s-collapse",
      "shorthand": null,
      "summary": "Animate an element open and closed by height.",
      "example": "<div s-collapse=\"open\">",
      "doc": "https://velofy.github.io/summitjs/s-collapse/"
    },
    {
      "name": "s-mask",
      "shorthand": null,
      "summary": "Format an input as the user types against a pattern.",
      "example": "<input s-mask=\"'(999) 999-9999'\">",
      "doc": "https://velofy.github.io/summitjs/s-mask/"
    },
    {
      "name": "s-cloak",
      "shorthand": null,
      "summary": "Hide until initialized; pair with [s-cloak]{display:none}.",
      "example": "<div s-cloak>",
      "doc": "https://velofy.github.io/summitjs/s-cloak/"
    },
    {
      "name": "s-ignore",
      "shorthand": null,
      "summary": "Skip a subtree during initialization.",
      "example": "<div s-ignore>",
      "doc": "https://velofy.github.io/summitjs/s-ignore/"
    }
  ],
  "magics": [
    {
      "name": "$el",
      "summary": "The current DOM element.",
      "doc": "https://velofy.github.io/summitjs/magic-el/"
    },
    {
      "name": "$refs",
      "summary": "Elements named with s-ref, by name.",
      "doc": "https://velofy.github.io/summitjs/magic-refs/"
    },
    {
      "name": "$root",
      "summary": "The nearest enclosing s-data root element.",
      "doc": "https://velofy.github.io/summitjs/magic-root/"
    },
    {
      "name": "$id",
      "summary": "A stable unique id, scoped for pairing labels and controls.",
      "doc": "https://velofy.github.io/summitjs/magic-id/"
    },
    {
      "name": "$store",
      "summary": "Global reactive stores shared across components.",
      "doc": "https://velofy.github.io/summitjs/magic-store/"
    },
    {
      "name": "$watch",
      "summary": "Run a callback when a reactive expression changes.",
      "doc": "https://velofy.github.io/summitjs/magic-watch/"
    },
    {
      "name": "$nextTick",
      "summary": "Run a callback after the next DOM update.",
      "doc": "https://velofy.github.io/summitjs/magic-nextTick/"
    },
    {
      "name": "$dispatch",
      "summary": "Dispatch a custom DOM event that bubbles.",
      "doc": "https://velofy.github.io/summitjs/magic-dispatch/"
    },
    {
      "name": "$data",
      "summary": "The reactive state object of the current scope.",
      "doc": "https://velofy.github.io/summitjs/magic-data/"
    },
    {
      "name": "$persist",
      "summary": "Reactive state backed by localStorage that survives reloads.",
      "doc": "https://velofy.github.io/summitjs/magic-persist/"
    },
    {
      "name": "$focus",
      "summary": "Move keyboard focus around from an expression.",
      "doc": "https://velofy.github.io/summitjs/magic-focus/"
    }
  ],
  "modifiers": {
    "event": [
      "prevent",
      "stop",
      "self",
      "outside",
      "once",
      "capture",
      "passive",
      "window",
      "document",
      "debounce",
      "throttle",
      "camel",
      "dot",
      "enter",
      "escape",
      "tab",
      "space",
      "up",
      "down",
      "left",
      "right",
      "cmd",
      "ctrl",
      "meta",
      "alt",
      "shift"
    ],
    "model": [
      "number",
      "trim",
      "lazy"
    ]
  },
  "errors": [
    {
      "code": "E101",
      "summary": "s-data init() threw."
    },
    {
      "code": "E102",
      "summary": "s-data destroy() threw."
    },
    {
      "code": "E103",
      "summary": "A store init() threw."
    },
    {
      "code": "E104",
      "summary": "An s-data expression could not be evaluated; the component starts empty and the rest of the page still initializes."
    },
    {
      "code": "E201",
      "summary": "Unknown directive; the message suggests the closest real one."
    },
    {
      "code": "E301",
      "summary": "A directive or event handler failed while evaluating its expression."
    },
    {
      "code": "E401",
      "summary": "s-for must be used on a <template> element."
    },
    {
      "code": "E402",
      "summary": "s-for <template> needs exactly one root element."
    },
    {
      "code": "E501",
      "summary": "s-teleport must be used on a <template> element."
    },
    {
      "code": "E502",
      "summary": "s-teleport target selector was not found in the DOM."
    },
    {
      "code": "E601",
      "summary": "A cleanup callback threw during teardown."
    },
    {
      "code": "E602",
      "summary": "A destroy() callback threw during teardown."
    }
  ],
  "components": [
    {
      "name": "Button",
      "class": "s-btn",
      "summary": "Buttons with solid, outline, ghost, subtle, and danger variants, plus sizes and groups.",
      "doc": "https://velofy.github.io/summitjs/comp-button/"
    },
    {
      "name": "Input",
      "class": "s-input",
      "summary": "Text inputs and textareas with labels, help text, addons, and validation state.",
      "doc": "https://velofy.github.io/summitjs/comp-input/"
    },
    {
      "name": "Select",
      "class": "s-select",
      "summary": "A styled native select bound with s-model.",
      "doc": "https://velofy.github.io/summitjs/comp-select/"
    },
    {
      "name": "Checkbox & Radio",
      "class": "s-check",
      "summary": "Accessible checkboxes and radio groups bound with s-model.",
      "doc": "https://velofy.github.io/summitjs/comp-checkbox/"
    },
    {
      "name": "Switch",
      "class": "s-switch",
      "summary": "A toggle switch bound with s-model, for on/off settings.",
      "doc": "https://velofy.github.io/summitjs/comp-switch/"
    },
    {
      "name": "Card",
      "class": "s-card",
      "summary": "A surface for grouping content, with header, body, and footer.",
      "doc": "https://velofy.github.io/summitjs/comp-card/"
    },
    {
      "name": "Badge & Tag",
      "class": "s-badge",
      "summary": "Small status labels and removable tags.",
      "doc": "https://velofy.github.io/summitjs/comp-badge/"
    },
    {
      "name": "Alert",
      "class": "s-alert",
      "summary": "Contextual feedback banners for info, success, warning, and danger.",
      "doc": "https://velofy.github.io/summitjs/comp-alert/"
    },
    {
      "name": "Avatar",
      "class": "s-avatar",
      "summary": "User avatars with initials or images, sizes, and stacked groups.",
      "doc": "https://velofy.github.io/summitjs/comp-avatar/"
    },
    {
      "name": "Progress & Spinner",
      "class": "s-progress",
      "summary": "Progress bars, spinners, and skeleton placeholders for loading states.",
      "doc": "https://velofy.github.io/summitjs/comp-progress/"
    },
    {
      "name": "Tooltip",
      "class": "s-tooltip",
      "summary": "A CSS-only tooltip that appears on hover and focus.",
      "doc": "https://velofy.github.io/summitjs/comp-tooltip/"
    },
    {
      "name": "Dialog",
      "class": "s-dialog",
      "summary": "A modal dialog for confirmations and focused tasks, with overlay and Escape to close.",
      "doc": "https://velofy.github.io/summitjs/comp-dialog/"
    },
    {
      "name": "Dropdown Menu",
      "class": "s-menu",
      "summary": "A button-triggered menu that closes on outside click or Escape.",
      "doc": "https://velofy.github.io/summitjs/comp-menu/"
    },
    {
      "name": "Popover",
      "class": "s-popover",
      "summary": "A click-triggered floating panel for rich content, dismissed on outside click or Escape.",
      "doc": "https://velofy.github.io/summitjs/comp-popover/"
    },
    {
      "name": "Toast",
      "class": "s-toast",
      "summary": "Transient notifications that stack and auto-dismiss.",
      "doc": "https://velofy.github.io/summitjs/comp-toast/"
    },
    {
      "name": "Tabs",
      "class": "s-tabs-list",
      "summary": "Switch between panels with an underlined or soft tab bar.",
      "doc": "https://velofy.github.io/summitjs/comp-tabs/"
    },
    {
      "name": "Accordion",
      "class": "s-accordion",
      "summary": "Collapsible sections, single or multiple open.",
      "doc": "https://velofy.github.io/summitjs/comp-accordion/"
    },
    {
      "name": "Breadcrumb",
      "class": "s-breadcrumb",
      "summary": "Show the path to the current page.",
      "doc": "https://velofy.github.io/summitjs/comp-breadcrumb/"
    },
    {
      "name": "Pagination",
      "class": "s-pagination",
      "summary": "Navigate through pages of results.",
      "doc": "https://velofy.github.io/summitjs/comp-pagination/"
    }
  ],
  "techniques": [
    {
      "name": "Loaders & Spinners",
      "summary": "A gallery of pure-CSS loaders: rings, dots, bars, shapes, animated logo marks, and skeleton screens.",
      "doc": "https://velofy.github.io/summitjs/technique-animation/"
    },
    {
      "name": "Matte Glassmorphism",
      "summary": "Frosted, low-gloss glass surfaces that blur what is behind them while staying legible in both themes.",
      "doc": "https://velofy.github.io/summitjs/technique-glassmorphism/"
    },
    {
      "name": "Neumorphism",
      "summary": "Soft, extruded UI built from twin light and dark shadows on a matching surface.",
      "doc": "https://velofy.github.io/summitjs/technique-neumorphism/"
    },
    {
      "name": "Claymorphism",
      "summary": "Puffy, rounded, playful clay surfaces with soft inner and outer shadows.",
      "doc": "https://velofy.github.io/summitjs/technique-claymorphism/"
    },
    {
      "name": "Retro UI",
      "summary": "Hard offset shadows and neon text for a retro, terminal, or arcade look.",
      "doc": "https://velofy.github.io/summitjs/technique-retro/"
    },
    {
      "name": "Brutalism",
      "summary": "Stark borders, loud uppercase type, and blunt offset shadows for a raw, confident look.",
      "doc": "https://velofy.github.io/summitjs/technique-brutalism/"
    },
    {
      "name": "Aurora Backgrounds",
      "summary": "Slow, glowing color fields that drift behind your content for a premium hero look.",
      "doc": "https://velofy.github.io/summitjs/technique-aurora/"
    },
    {
      "name": "Glow & Spotlight",
      "summary": "A soft highlight that follows the cursor across a card, driven by a tiny Summit handler.",
      "doc": "https://velofy.github.io/summitjs/technique-glow/"
    },
    {
      "name": "Navbar Patterns",
      "summary": "Navigation bars with active links, a responsive mobile menu, and a glass variant, wired with Summit state.",
      "doc": "https://velofy.github.io/summitjs/technique-navbars/"
    },
    {
      "name": "Using Tailwind CSS",
      "summary": "Summit for behavior, Tailwind for styling. They compose cleanly because Summit lives in attributes and Tailwind lives in classes.",
      "doc": "https://velofy.github.io/summitjs/technique-tailwind/"
    }
  ]
}