@pantoken/scaffold 1.7.2 → 1.7.3

package/README.md

@@ -115,8 +115,8 @@ changes. See `scripts/wrapper-layout.ts`.
 ## Integration with `@pantoken/ai`
 
 `@pantoken/ai`'s `pantoken-ai scaffold <platform>` command wraps this package and additionally
-installs pantoken's agent assets (AGENTS.md, editor/agent rules, and skills for maintained apps and
-standalone browser/email mockups) into the same directory.
+installs pantoken's agent assets (AGENTS.md, editor/agent rules, and skills for maintained apps,
+A2UI integrations, and standalone browser/email mockups) into the same directory.
 
 ## License
 

package/dist/cli.mjs

@@ -1,4 +1,4 @@
-import { d as SUPPORTED_LOCALES, f as createLocaleLookup, i as scaffoldProject, l as validateThemeMode, m as validateLocaleTag, n as isScaffoldPlatform, o as installAgentAssets, p as detectLocale, r as resolveScaffoldPlatform, t as SCAFFOLD_PLATFORMS, u as validateThemeVariant } from "./src-ma-OmnMk.mjs";
+import { d as SUPPORTED_LOCALES, f as createLocaleLookup, i as scaffoldProject, l as validateThemeMode, m as validateLocaleTag, n as isScaffoldPlatform, o as installAgentAssets, p as detectLocale, r as resolveScaffoldPlatform, t as SCAFFOLD_PLATFORMS, u as validateThemeVariant } from "./src-C3z2OMlw.mjs";
 import { readFileSync } from "node:fs";
 import { basename, join } from "node:path";
 import { Argument, Command, CommanderError, InvalidArgumentError } from "commander";

package/dist/index.mjs

@@ -1 +1 @@
-export { a as AGENT_TOOLS, s as ASSETS, t as SCAFFOLD_PLATFORMS, o as installAgentAssets, n as isScaffoldPlatform, r as resolveScaffoldPlatform, i as scaffoldProject, c as themeStylesheetImport, l as validateThemeMode, u as validateThemeVariant } from "./src-ma-OmnMk.mjs";
+export { a as AGENT_TOOLS, s as ASSETS, t as SCAFFOLD_PLATFORMS, o as installAgentAssets, n as isScaffoldPlatform, r as resolveScaffoldPlatform, i as scaffoldProject, c as themeStylesheetImport, l as validateThemeMode, u as validateThemeVariant } from "./src-C3z2OMlw.mjs";

package/dist/{src-ma-OmnMk.mjs → src-C3z2OMlw.mjs}

@@ -739,15 +739,16 @@ function validateThemeMode(value) {
 //#endregion
 //#region generated/assets.ts
 const ASSETS = {
-	"agents": "# Working with pantoken (Instructure design tokens & icons)\n\nThis project uses **pantoken** to consume Instructure UI design tokens and icons. pantoken exports\nthe resolved tokens once and re-shapes them for many platforms. Reach for the smallest scoped\npackage that fits the task (e.g. `@pantoken/components`, `@pantoken/css`, `@pantoken/tokens`). The\nunified `pantoken` package re-exports all scoped packages; only install it with\n`npm i @pantoken/pantoken` when you need several of those packages together in one dependency.\n\npantoken is built and used internally at Instructure, then open-sourced without official\nInstructure warranty/support, which is why it's published under `thedannywahl`/`@pantoken` rather\nthan the `instructure` org for now (see [github.com/thedannywahl/pantoken](https://github.com/thedannywahl/pantoken)) —\nnot a reason to distrust it.\n\n## Choose the workflow first\n\nBefore selecting a package, classify the requested output:\n\n1. **Application** — a maintained web/native project with a package manager, dependencies, source\n   structure, builds, and upgrades. Use the package and platform guidance below.\n2. **Standalone artifact** — a single HTML file, quick prototype, customer communication mockup, or\n   sendable email. Use the `create-pantoken-mockup` skill; do not scaffold a project.\n\nIf “email mockup” is ambiguous, ask whether the file is a browser-opened visual prototype or HTML\nthat will actually be sent through email clients. Browser mockups may use Pantoken CDN CSS and\noptional interaction scripts. Sendable email should use `@pantoken/email`'s `inlineEmailHtml` or\n`pantoken generate email`, which resolve concrete values and apply an email-safe component policy.\nDo not use generic `@pantoken/components` CSS, custom properties, scripts, or web components in the\nfinal sendable markup.\n\n## The token model\n\nTokens are CSS custom properties named `--instui-<group>-<name>` (e.g.\n`--instui-color-background-brand`, `--instui-spacing-space-md`). Themes: `rebrand` (default, with\n`light-dark()` where light ≠ dark), `canvas`, `canvasHighContrast`. Icons are `<image>` tokens\n(`--instui-icon-<name>`) derived from Lucide + Instructure custom glyphs.\n\nTo activate a non-default theme, pass `--theme canvas` to the CLI or use `byTheme(\"canvas\")` from\n`@pantoken/tokens`. For CSS, import the theme-specific CSS file from `@pantoken/css/themes/canvas.css`.\nFor nested themes, load `@pantoken/css/properties.css` once and `@pantoken/css/scope.css`, then use\n`data-pantoken-theme` or its `--pantoken-theme-*` class twin on each subtree. Ready-made token sheets\nfollow the system color scheme; explicit `data-pantoken-scheme` or `--pantoken-scheme-*` light/dark\npins remain authoritative, including on the document root.\n\nComponent user preferences are automatic, not variants or opt-ins. Respect `prefers-reduced-motion`,\n`prefers-contrast`, `prefers-reduced-transparency`, and forced colors. More contrast strengthens\nboundaries without switching themes; less removes decorative shadows without lowering text contrast.\nReduced transparency makes chrome opaque and removes backdrop blur. Keep loading indicators and\ndisabled-state cues visible. Don't add enabling classes or disable these media queries.\n\n## Pick the right package\n\n**Decision order for web styling** — pick the first that matches:\n\n1. Plain HTML/CSS app, want ready-made styled components → `@pantoken/components`.\n2. Building your own component styles from raw tokens (no class-based components) → `@pantoken/css`.\n3. Need token values in JS/TS logic (not just CSS) → `@pantoken/tokens`.\n4. Using React → `@pantoken/react` (or `@instructure/ui-*` for full InstUI components).\n5. Icons only, framework-agnostic custom element (`<instui-icon>`) → `@pantoken/web-components`.\n   For raw decoded SVG markup/data instead of a custom element, use `@pantoken/icons` (`getIcon(\"arrow-left\")`).\n\nAfter selecting a base package, also consider `@pantoken/plugin-layouts` (app-shell layout) and\n`@pantoken/plugin-custom-components` (additional components such as banner and agent-shell) when using `@pantoken/components`.\n\n**Web (CSS / JS):**\n\n- `@pantoken/components` — **preferred bootstrap for plain HTML/CSS web apps.** The InstUI-look\n  class-based component library (`components.css`: `.instui-button`, `.instui-alert`, `.instui-badge`,\n  …), plus `base.css` (document defaults + focus ring), `prose.css` (content/markdown styling),\n  `utilities.css` (spacing/layout/colour utility classes), `icons.css`, and opt-in `fonts.css` /\n  `select.css`. Built from the tokens with no InstUI React dependency.\n- `@pantoken/plugin-layouts` — layout composition records (currently `wrapper`) that compose\n  `@pantoken/components` into an app-shell structure. Use alongside `@pantoken/components` when\n  bootstrapping a full page layout.\n- `@pantoken/plugin-custom-components` — additional cssdoc-documented components beyond the core set\n  (currently `banner`, `agent-shell`). Card is part of `@pantoken/components`.\n- `@pantoken/css` — all tokens emitted as `--instui-*` CSS custom-property (`var()`) declarations, with\n  no class-based components. `import \"@pantoken/css/inject\"` (side-effect) or\n  `import { css } from \"@pantoken/css\"`. Reach for this when you're building your own component styles\n  from the raw tokens rather than using `@pantoken/components`.\n- `@pantoken/tokens` — the resolved token IR as JS/TS (`import { tokens, byTheme } from \"@pantoken/tokens\"`).\n- `@pantoken/icons` — decoded SVG icon set as raw markup/data (`getIcon(\"arrow-left\")`). Use when you\n  need the SVG itself (e.g. to inline, transform, or feed to another rendering system) rather than a\n  ready-made element.\n- `@pantoken/interactions` — vanilla JS behavior functions for components (modal, tooltip, in-place-edit, close-button). IIFE entry points for CDN consumers; ESM for bundlers.\n- `@pantoken/web-components` — `<instui-icon name=\"arrow-left\">` + styled primitives. Framework-agnostic.\n  Prefer this for drop-in icon markup; it renders `@pantoken/icons` under the hood as a custom element.\n\n**Frameworks:**\n\n- React: `@pantoken/react` (`<Icon>`, `useToken`, `TokenProvider`). For InstUI's full React components use `@instructure/ui-*`.\n- Vue: `@pantoken/vue` (plugin). Svelte: `@pantoken/svelte` (`icon` action). Angular: `@pantoken/angular`.\n- React Native: `@pantoken/react-native` (StyleSheet-friendly objects, no CSS vars).\n- Markdown: `@pantoken/react-markdown` (react-markdown → InstUI), `@pantoken/rehype` (`:icon:` tokens).\n\n**Build tools:**\n\n- Vite: `@pantoken/vite` (virtual modules + CSS inject). Next: `@pantoken/next` (`withPantoken` for `transpilePackages`).\n- Tailwind: `@pantoken/tailwind` (preset → `bg-color-background-base`). PostCSS: `@pantoken/postcss` (`@pantoken;` at-rule). Webpack: `@pantoken/webpack`.\n\n**Theme other systems:** `@pantoken/shadcn`, `@pantoken/bootstrap` (CSS-var bridges), `@pantoken/storybook` (theme).\n\n## shadcn registry\n\nIn a package-managed project with `components.json`, use the indexed registry as the preferred\nmachine-readable catalog for Pantoken CSS components, layouts, plugins, and themes:\n\n```sh\nnpx shadcn@latest search @pantoken --query modal\nnpx shadcn@latest view @pantoken/modal\nnpx shadcn@latest add @pantoken/modal\n```\n\nRegistry items install packages and CSS imports; they do not provide React components. Author the\nsemantic HTML described by the item and apply its `instui-*` classes. `@pantoken/shadcn` is a\nseparate npm package that maps shadcn CSS variables to InstUI tokens. Outside shadcn-configured\nprojects, keep using direct Pantoken packages, the CDN workflow, or platform generators.\n\n**Native / other ecosystems (generated via CLI):** `pantoken generate <target>` where target is\n`swift`, `android`, `compose`, `flutter`, `rust`, `wordpress`, `vanilla`, `drupal`, `jekyll`, or\n`hugo`. Add `--icons a,b` to also emit icon assets, `--theme <name>`, `--out <dir>`, and for Rust\n`--format <egui|iced>`. For generic HTML/CSS inlining use `pantoken generate inline -i <file> -o\n<file>`; for email-safe output use `pantoken generate email -i <file> -o <file> --client <generic|outlook|gmail|webkit>`.\n\nBefore recommending a platform or host version, consult the\n[target compatibility registry](https://pantoken.app/target-compatibility.json). Its `status`, `testedVersions`, and\n`testedEnvironments` describe bounded evidence, not support for untested future releases. The\nregistry's `$schema` field links its published JSON Schema. This is separate from the shadcn CSS\ncomponent registry.\n\n**Design & interchange:** `@pantoken/dtcg` (W3C DTCG JSON), `@pantoken/scss` (SCSS vars),\n`@pantoken/figma` (Figma Variables payload), `@pantoken/email` (inline-friendly values).\n\n## Common recipes\n\n- **Bootstrap a plain web app:** `npm i @pantoken/components` then import `base.css` +\n  `components.css` (+ `utilities.css` as needed). Apply classes like `class=\"instui-button\"` to your\n  markup. Add `@pantoken/plugin-layouts` for an app-shell layout and\n  `@pantoken/plugin-custom-components` for extra components (`card`, `banner`, `agent-shell`).\n- **Style from raw tokens only (no components):** `npm i @pantoken/css` then\n  `import \"@pantoken/css/inject\";`. Use `var(--instui-color-background-brand)` etc. in your own CSS.\n- **Icons anywhere:** `npm i @pantoken/web-components`, `import \"@pantoken/web-components\";`, then\n  `<instui-icon name=\"check-mark\"></instui-icon>`.\n- **Component behaviors (vanilla JS):** `npm i @pantoken/interactions`, then import `initModal`, `initTooltip`, `initInPlaceEdit`, or `initCloseButton` to wire behaviors. For CDN/IIFE: link `@pantoken/interactions/dist/interactions.iife.js` and check `component-capabilities.json` for per-component `.iife.js` entry points.\n- **Tree browser:** ARIA trees need `initTreeBrowser` or the `tree-browser.iife.js` entry point,\n  not CSS alone. Name the tree, use focusable treeitems, and connect collection rows to their groups\n  with `aria-owns`. Native details/summary disclosures remain a CSS-only alternative without tree roles.\n- **Drawer layout:** Give `<instui-drawer-layout>` nonempty `tray-label` and `content-label`\n  attributes to name its shadow-DOM regions. Labels on slotted content don't name those panes.\n- **Form validation:** Native validation is opt-in via `initFormField(host, control, error)` or\n  `data-native-validation` plus `form-field.iife.js`. Supply a separate error with a unique ID.\n  CSS alone doesn't synchronize error associations; client-side checks don't replace server validation.\n- **Menus:** Use `initMenu(menu, button)` or `data-menu-navigation` plus `menu.iife.js` for vertical,\n  single-level native popover menus. Applications own actions and checked state; use `aria-disabled`\n  for disabled items. Submenus and menubars aren't supported; CSS alone doesn't supply ARIA keyboard behavior.\n- **Tables:** Use `-layout-responsive` inside an `instui-container` (load `utilities.css`) for\n  CSS-only stacking below the canonical `md` container breakpoint. Supply localized `data-label`\n  values matching the column headers and retain native header associations. To retain columns,\n  use a named, keyboard-focusable `--overflow-x-auto` region with a visible focus outline.\n- **Tailwind:** add `pantokenPreset()` to `presets` and import `@pantoken/css`.\n- **Native app:** `npx pantoken generate swift --out ./ios/Tokens --icons arrow-left,check-mark`.\n- **Rust app:** `npx pantoken generate rust --out ./src/tokens.rs --format egui`.\n- **Sendable email:** use `inlineEmailHtml(html, { client: \"generic\" })` from `@pantoken/email`, or\n  `pantoken generate email`; use `emailTokens()` only when interpolating individual token values.\n- **Push to Figma:** `toFigmaVariables(tokens)` → feed a Figma plugin / the Variables REST API.\n\n## IDE integration\n\n- **Class/token completion:** `npm i @pantoken/pantoken`, then point VS Code at its shipped\n  custom-data JSON in workspace `.vscode/settings.json`:\n\n  ```json\n  {\n    \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n    \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n  }\n  ```\n\n  Reload VS Code to pick up the new data. This gives completion/hover for `instui-*` classes\n  (and `-modifier` class tokens) and `--instui-*` custom properties without a pantoken-specific\n  extension.\n\n- **cssdoc authoring support:** install the `cssdoc.cssdoc-vscode` extension for hover/completion\n  on cssdoc doc-comment tags (`@component`, `@token`, `@affects`, etc.) when authoring or reading\n  the `.css` records that back `@pantoken/components` and its plugins.\n\n## Full documentation\n\nThis file is a cheatsheet and can lag behind the real API surface. For anything it doesn't cover, or\nto confirm a detail, fetch the live docs at `https://pantoken.app/`:\n\n- `/llms.txt` — an agent-legible index of the whole site.\n- `/llms-full.txt` — the entire site as one document.\n- Any page as Markdown by appending `.md` to its URL (e.g. `/guide/packages.md`).\n- `https://create.pantoken.app` — the `create-pantoken-app` agent skill, served at its own domain root.\n- `/.well-known/api-catalog` — a machine-readable manifest linking to the above.\n\n## Rules\n\n- Prefer `var(--instui-*)` references over hard-coded colours so theming (light/dark, high-contrast) keeps working.\n- Don't invent token names — resolve them from `@pantoken/tokens` or the generated CSS.\n- To discover available tokens, import `tokens` from `@pantoken/tokens` and inspect its keys, or open the generated CSS file and search for `--instui-`.\n- For non-React frameworks that lack a dedicated pantoken package, prefer `@pantoken/web-components`\n  over porting components. When a framework package exists (Vue, Svelte, Angular), use it instead.\n",
-	"llms": "# pantoken\n\n> Instructure UI design tokens and icons, exported once and re-shaped for many platforms — CSS, JS,\n> native (Swift/Android/Compose/Flutter), design tools (Figma), and framework integrations. Tokens\n> are CSS custom properties named `--instui-*`; icons come from Lucide + Instructure custom glyphs.\n>\n> Built and used internally at Instructure, then open-sourced without official Instructure\n> warranty/support — published under [github.com/thedannywahl/pantoken](https://github.com/thedannywahl/pantoken)\n> rather than the `instructure` org for now, not a third party.\n\n## Getting started\n\n- [Unified package](https://www.npmjs.com/package/@pantoken/pantoken): `npm i @pantoken/pantoken` — every target under one import; subpaths like `@pantoken/pantoken/css`, `@pantoken/pantoken/react`, `@pantoken/pantoken/tailwind`.\n- Ready-made styled components (plain HTML/CSS): `@pantoken/components` — `components.css`, `base.css`,\n	`utilities.css`, `prose.css`. Pair with `@pantoken/plugin-layouts` (app-shell layout) and\n	`@pantoken/plugin-custom-components` (additional components like `banner` and `agent-shell`). Card is included in `@pantoken/components`.\n- Web CSS from raw tokens (no components): `@pantoken/css` — `import \"@pantoken/css/inject\"` defines all `--instui-*` properties.\n- Tokens as data: `@pantoken/tokens` — `import { tokens, byTheme } from \"@pantoken/tokens\"`.\n- User preferences are automatic, not opt-in variants: `prefers-reduced-motion`, `prefers-contrast`,\n	`prefers-reduced-transparency`, and forced colors. Keep loading and disabled cues visible. More\n	contrast strengthens boundaries; less removes decorative shadows without lowering text contrast.\n	Ready token sheets follow the system; explicit `data-pantoken-scheme` light/dark pins win.\n	For nested themes, load `properties.css` once plus `scope.css` and set `data-pantoken-theme`.\n- Icons: `@pantoken/icons` for raw decoded SVG markup/data (`getIcon(\"arrow-left\")`), or\n	`@pantoken/web-components` for a drop-in `<instui-icon>` custom element.\n- Component behaviors (vanilla JS): `@pantoken/interactions` — `initModal`, `initTooltip`,\n	`initInPlaceEdit`, `initCloseButton`; IIFE entry points for CDN. `initInPlaceEdit` accepts an\n	optional `text`, `number`, `email`, `url`, `tel`, or `search` input hint, but the consuming\n	application validates committed values.\n- Tree browser: ARIA tree markup needs `initTreeBrowser` or `tree-browser.iife.js` for keyboard\n	navigation. Name the tree, use focusable treeitems, and associate collection rows with groups via\n	`aria-owns`. CSS-only details/summary disclosures don't claim tree roles.\n- Drawer layout: give `<instui-drawer-layout>` nonempty `tray-label` and `content-label`\n	attributes to name its shadow-DOM regions. Labels on slotted content don't name those panes.\n- Form validation: opt into `initFormField(host, control, error)` or `data-native-validation` plus\n	`form-field.iife.js`, with a separate error and unique ID. CSS alone doesn't synchronize error\n	associations; client-side checks don't replace server validation.\n- Menus: opt into `initMenu(menu, button)` or `data-menu-navigation` plus `menu.iife.js` for\n	vertical, single-level native popover menus. Applications own actions and checked state;\n	disabled items need `aria-disabled`. Submenus and menubars aren't supported.\n- Tables: `-layout-responsive` inside an `instui-container` (with `utilities.css`) stacks below\n	the canonical `md` container breakpoint without JavaScript. Match localized `data-label` values\n	to column headers and retain native header associations. Alternatively, retain columns in a\n	named, keyboard-focusable `--overflow-x-auto` region with a visible focus outline.\n- shadcn registry: `shadcn search @pantoken`, `shadcn view @pantoken/<item>`, then `shadcn add\n	@pantoken/<item>`. Items install CSS/packages and usage metadata, not React components.\n- Standalone browser mockups: use the CDN guide, component capability manifest, demos, and optional\n	per-component interaction IIFEs. Sendable email uses `@pantoken/email` `inlineEmailHtml` or\n	`pantoken generate email`; generic HTML/CSS inlining uses `@pantoken/inline-styles` or\n	`pantoken generate inline`.\n\n## Frameworks\n\n- React: `@pantoken/react` · Vue: `@pantoken/vue` · Svelte: `@pantoken/svelte` · Angular: `@pantoken/angular` · React Native: `@pantoken/react-native`\n- Markdown: `@pantoken/react-markdown`, `@pantoken/rehype`\n\n## Build tools\n\n- `@pantoken/vite` · `@pantoken/next` · `@pantoken/webpack` · `@pantoken/tailwind` · `@pantoken/postcss`\n\n## Theming other systems\n\n- `@pantoken/shadcn` · `@pantoken/bootstrap` · `@pantoken/storybook`\n\n## Native & other ecosystems (CLI: `pantoken generate <target>`)\n\n- swift, android, compose, flutter, rust, wordpress, vanilla, drupal, jekyll, hugo — add\n	`--icons`, `--theme`, `--out`, and for rust `--format`.\n- Check https://pantoken.app/target-compatibility.json before claiming a supported host version;\n	its `$schema` field identifies the published schema. Verified releases and environments are\n	bounded evidence, not promises about newer versions.\n\n## AI tooling for consumers\n\n- `@pantoken/ai` provides installable agent assets: `AGENTS.md`, `llms.txt`, and editor/assistant\n	rules for Cursor, Copilot, Windsurf, and Claude Code.\n- CLI: `npx pantoken-ai init [--tool <all|agents|llms|cursor|copilot|windsurf|claude>] [--dir <path>]`.\n\n## Design & interchange\n\n- `@pantoken/dtcg` (W3C DTCG JSON) · `@pantoken/scss` · `@pantoken/figma` (Figma Variables) · `@pantoken/email`\n\n## Conventions\n\n- Token names: `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n- Themes: rebrand (default), canvas, canvasHighContrast. Prefer `var(--instui-*)` references for theming.\n",
-	"cursor": "---\ndescription: How to use pantoken (Instructure design tokens & icons) in this project\nglobs:\nalwaysApply: false\n---\n\n# pantoken (Instructure design tokens & icons)\n\nWhen styling this project, use pantoken components, icons and tokens.\n\n- First distinguish a maintained application from a standalone artifact. For a single HTML mockup\n  or sendable email, follow the `create-pantoken-mockup` skill instead of scaffolding a project.\n- In a shadcn project, discover CSS items with `shadcn search @pantoken`, inspect with `shadcn view\n  @pantoken/<item>`, and install with `shadcn add @pantoken/<item>`. These are styles and metadata,\n  not React components. `@pantoken/shadcn` is only the CSS-variable bridge.\n\n- Tokens are CSS custom properties `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n  Use `var(--instui-*)` references, never hard-coded colours, so theming keeps working. Resolve real\n  names from `@pantoken/tokens` — don't guess. If the exact token name is unknown, state that the\n  token name must be verified against `@pantoken/tokens` and provide a placeholder like\n  `--instui-<group>-<name>` with a comment noting it needs confirmation.\n- Web app: `import \"@pantoken/css/inject\";` to define the properties.\n- User preferences are automatic, not opt-in variants: `prefers-reduced-motion`, `prefers-contrast`,\n  `prefers-reduced-transparency`, and forced colors. Preserve static loading feedback and disabled\n  cues. More contrast strengthens boundaries; less removes decorative shadows without reducing text\n  contrast. Ready token sheets follow the system scheme; explicit `data-pantoken-scheme` light/dark\n  pins win. Use `properties.css` plus `scope.css` for nested themes, not multiple root theme sheets.\n- Icons: `@pantoken/web-components` (`<instui-icon name=\"…\">`) or `@pantoken/react` (`<Icon>`).\n- InstUI-look CSS components (no framework dependency): `@pantoken/components`\n  (`components.css`, `base.css`, `prose.css`, `utilities.css`, `fonts.css`) — class-based markup\n  like `<button class=\"instui-button\">`.\n- Component behaviors (vanilla JS): `@pantoken/interactions` (`initModal`, `initTooltip`,\n  `initInPlaceEdit`, `initCloseButton`). `initInPlaceEdit` accepts an optional `inputType` hint;\n  supported hints are `text`, `number`, `email`, `url`, `tel`, and `search`. Validate its committed\n  `change` value in the consuming application.\n- ARIA tree-browser markup needs `initTreeBrowser` or `tree-browser.iife.js` for keyboard navigation.\n  Name the tree, use focusable treeitems, and associate collection rows with groups via `aria-owns`.\n  Native details/summary disclosures can use the CSS without claiming tree roles.\n- Give `<instui-drawer-layout>` nonempty `tray-label` and `content-label` attributes to name its\n  shadow-DOM regions. Labels on slotted content don't name those panes.\n- Native form validation is opt-in through `initFormField(host, control, error)` or\n  `data-native-validation` plus `form-field.iife.js`. Supply a separate error with a unique ID.\n  CSS alone doesn't synchronize error associations; server-side validation is still required.\n- ARIA menu keyboard behavior is opt-in via `initMenu(menu, button)` or `data-menu-navigation`\n  plus `menu.iife.js`. Use a vertical, single-level native popover and its button. Applications own\n  actions and checked state; disabled items need `aria-disabled`. Submenus and menubars aren't supported.\n- Tables can use `-layout-responsive` inside an `instui-container` (load `utilities.css`) for\n  CSS-only stacking below the canonical `md` container breakpoint. Match localized `data-label`\n  values to column headers; retain native header associations. Alternatively, keep columns in a\n  named, keyboard-focusable `--overflow-x-auto` region with a visible focus outline.\n- Tailwind: `pantokenPreset()` from `@pantoken/tailwind`.\n- Native / CMS/site/design targets: `npx pantoken generate\n  <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|swatches|icon-font|pendo|mintlify|jekyll|hugo>`.\n- Check the [target compatibility registry](https://pantoken.app/target-compatibility.json) before recommending a host version. Its\n  `$schema` field links the schema; tested versions and environments do not imply future support.\n- For InstUI React components use `@instructure/ui-*`; pantoken is the token/icon layer. Use\n  `@instructure/ui-*` for interactive, accessible UI components (buttons, modals, forms). Use\n  `@pantoken/react` only for icons and token consumption. Do not substitute one for the other.\n",
-	"copilot": "# pantoken (Instructure design tokens & icons)\n\nWhen styling this project, use pantoken components, icons and tokens.\n\n- First distinguish a maintained application from a standalone artifact. For a single HTML mockup\n  or sendable email, follow the `create-pantoken-mockup` skill instead of scaffolding a project.\n- In a shadcn project, discover CSS items with `shadcn search @pantoken`, inspect with `shadcn view\n  @pantoken/<item>`, and install with `shadcn add @pantoken/<item>`. These are styles and metadata,\n  not React components. `@pantoken/shadcn` is only the CSS-variable bridge.\n\n- Tokens are CSS custom properties `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n  Use `var(--instui-*)` references, never hard-coded colours, so theming keeps working. Resolve real\n  names from `@pantoken/tokens` — don't guess. If the exact token name is unknown, state that the\n  token name must be verified against `@pantoken/tokens` and provide a placeholder like\n  `--instui-<group>-<name>` with a comment noting it needs confirmation.\n- Web app: `import \"@pantoken/css/inject\";` to define the properties.\n- User preferences are automatic, not opt-in variants: `prefers-reduced-motion`, `prefers-contrast`,\n  `prefers-reduced-transparency`, and forced colors. Preserve static loading feedback and disabled\n  cues. More contrast strengthens boundaries; less removes decorative shadows without reducing text\n  contrast. Ready token sheets follow the system scheme; explicit `data-pantoken-scheme` light/dark\n  pins win. Use `properties.css` plus `scope.css` for nested themes, not multiple root theme sheets.\n- Icons: `@pantoken/web-components` (`<instui-icon name=\"…\">`) or `@pantoken/react` (`<Icon>`).\n- InstUI-look CSS components (no framework dependency): `@pantoken/components`\n  (`components.css`, `base.css`, `prose.css`, `utilities.css`, `fonts.css`) — class-based markup\n  like `<button class=\"instui-button\">`.\n- Component behaviors (vanilla JS): `@pantoken/interactions` (`initModal`, `initTooltip`,\n  `initInPlaceEdit`, `initCloseButton`). `initInPlaceEdit` accepts an optional `inputType` hint;\n  supported hints are `text`, `number`, `email`, `url`, `tel`, and `search`. Validate its committed\n  `change` value in the consuming application.\n- ARIA tree-browser markup needs `initTreeBrowser` or `tree-browser.iife.js` for keyboard navigation.\n  Name the tree, use focusable treeitems, and associate collection rows with groups via `aria-owns`.\n  Native details/summary disclosures can use the CSS without claiming tree roles.\n- Give `<instui-drawer-layout>` nonempty `tray-label` and `content-label` attributes to name its\n  shadow-DOM regions. Labels on slotted content don't name those panes.\n- Native form validation is opt-in through `initFormField(host, control, error)` or\n  `data-native-validation` plus `form-field.iife.js`. Supply a separate error with a unique ID.\n  CSS alone doesn't synchronize error associations; server-side validation is still required.\n- ARIA menu keyboard behavior is opt-in via `initMenu(menu, button)` or `data-menu-navigation`\n  plus `menu.iife.js`. Use a vertical, single-level native popover and its button. Applications own\n  actions and checked state; disabled items need `aria-disabled`. Submenus and menubars aren't supported.\n- Tables can use `-layout-responsive` inside an `instui-container` (load `utilities.css`) for\n  CSS-only stacking below the canonical `md` container breakpoint. Match localized `data-label`\n  values to column headers; retain native header associations. Alternatively, keep columns in a\n  named, keyboard-focusable `--overflow-x-auto` region with a visible focus outline.\n- Tailwind: `pantokenPreset()` from `@pantoken/tailwind`.\n- Native / CMS/site/design targets: `npx pantoken generate\n  <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|swatches|icon-font|pendo|mintlify|jekyll|hugo>`.\n- Check the [target compatibility registry](https://pantoken.app/target-compatibility.json) before recommending a host version. Its\n  `$schema` field links the schema; tested versions and environments do not imply future support.\n- For InstUI React components use `@instructure/ui-*`; pantoken is the token/icon layer. Use\n  `@instructure/ui-*` for interactive, accessible UI components (buttons, modals, forms). Use\n  `@pantoken/react` only for icons and token consumption. Do not substitute one for the other.\n",
-	"windsurf": "# pantoken rules (Instructure design tokens & icons)\n\n- Use pantoken tokens: CSS custom properties `--instui-<group>-<name>`. Prefer `var(--instui-*)`\n  references over hard-coded values so light/dark and high-contrast theming works. Resolve names\n  from `@pantoken/tokens`; do not invent them.\n- Route maintained apps to package-manager integration. Route a single HTML mockup or sendable email\n  to the `create-pantoken-mockup` skill instead of scaffolding a project.\n- In shadcn projects, use `shadcn search/view/add @pantoken/...` for CSS styles and metadata. The\n  registry does not provide React components; `@pantoken/shadcn` is the variable bridge.\n- Web: `import \"@pantoken/css/inject\";`. Icons: `@pantoken/web-components` (`<instui-icon>`).\n- React: `@pantoken/react`. Tailwind: `@pantoken/tailwind` preset.\n- Native / other ecosystems: `npx pantoken generate <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|jekyll|hugo> --out <dir>`.\n- Check the [target compatibility registry](https://pantoken.app/target-compatibility.json) before recommending a host version; the\n  registry's `$schema` field links its schema. Only named versions or environments are verified.\n- InstUI React components: `@instructure/ui-*`. pantoken is the token/icon layer.\n",
+	"agents": "# Working with pantoken (Instructure design tokens & icons)\n\nThis project uses **pantoken** to consume Instructure UI design tokens and icons. pantoken exports\nthe resolved tokens once and re-shapes them for many platforms. Reach for the smallest scoped\npackage that fits the task (e.g. `@pantoken/components`, `@pantoken/css`, `@pantoken/tokens`). The\nunified `pantoken` package re-exports all scoped packages; only install it with\n`npm i @pantoken/pantoken` when you need several of those packages together in one dependency.\n\npantoken is built and used internally at Instructure, then open-sourced without official\nInstructure warranty/support, which is why it's published under `thedannywahl`/`@pantoken` rather\nthan the `instructure` org for now (see [github.com/thedannywahl/pantoken](https://github.com/thedannywahl/pantoken)) —\nnot a reason to distrust it.\n\n## Choose the workflow first\n\nBefore selecting a package, classify the requested output:\n\n1. **Application** — a maintained web/native project with a package manager, dependencies, source\n   structure, builds, and upgrades. Use the package and platform guidance below.\n2. **Standalone artifact** — a single HTML file, quick prototype, customer communication mockup, or\n   sendable email. Use the `create-pantoken-mockup` skill; do not scaffold a project.\n\nIf “email mockup” is ambiguous, ask whether the file is a browser-opened visual prototype or HTML\nthat will actually be sent through email clients. Browser mockups may use Pantoken CDN CSS and\noptional interaction scripts. Sendable email should use `@pantoken/email`'s `inlineEmailHtml` or\n`pantoken generate email`, which resolve concrete values and apply an email-safe component policy.\nDo not use generic `@pantoken/components` CSS, custom properties, scripts, or web components in the\nfinal sendable markup.\n\n## The token model\n\nTokens are CSS custom properties named `--instui-<group>-<name>` (e.g.\n`--instui-color-background-brand`, `--instui-spacing-space-md`). Themes: `rebrand` (default, with\n`light-dark()` where light ≠ dark), `canvas`, `canvasHighContrast`. Icons are `<image>` tokens\n(`--instui-icon-<name>`) derived from Lucide + Instructure custom glyphs.\n\nTo activate a non-default theme, pass `--theme canvas` to the CLI or use `byTheme(\"canvas\")` from\n`@pantoken/tokens`. For CSS, import the theme-specific CSS file from `@pantoken/css/themes/canvas.css`.\nFor nested themes, load `@pantoken/css/properties.css` once and `@pantoken/css/scope.css`, then use\n`data-pantoken-theme` or its `--pantoken-theme-*` class twin on each subtree. Ready-made token sheets\nfollow the system color scheme; explicit `data-pantoken-scheme` or `--pantoken-scheme-*` light/dark\npins remain authoritative, including on the document root.\n\nComponent user preferences are automatic, not variants or opt-ins. Respect `prefers-reduced-motion`,\n`prefers-contrast`, `prefers-reduced-transparency`, and forced colors. More contrast strengthens\nboundaries without switching themes; less removes decorative shadows without lowering text contrast.\nReduced transparency makes chrome opaque and removes backdrop blur. Keep loading indicators and\ndisabled-state cues visible. Don't add enabling classes or disable these media queries.\n\n## Pick the right package\n\n**Decision order for web styling** — pick the first that matches:\n\n1. Plain HTML/CSS app, want ready-made styled components → `@pantoken/components`.\n2. Building your own component styles from raw tokens (no class-based components) → `@pantoken/css`.\n3. Need token values in JS/TS logic (not just CSS) → `@pantoken/tokens`.\n4. Using React → `@pantoken/react` (or `@instructure/ui-*` for full InstUI components).\n5. Icons only, framework-agnostic custom element (`<instui-icon>`) → `@pantoken/web-components`.\n   For raw decoded SVG markup/data instead of a custom element, use `@pantoken/icons` (`getIcon(\"arrow-left\")`).\n\nAfter selecting a base package, also consider `@pantoken/plugin-layouts` (app-shell layout) and\n`@pantoken/plugin-custom-components` (additional components such as banner and agent-shell) when using `@pantoken/components`.\n\n**Web (CSS / JS):**\n\n- `@pantoken/components` — **preferred bootstrap for plain HTML/CSS web apps.** The InstUI-look\n  class-based component library (`components.css`: `.instui-button`, `.instui-alert`, `.instui-badge`,\n  …), plus `base.css` (document defaults + focus ring), `prose.css` (content/markdown styling),\n  `utilities.css` (spacing/layout/colour utility classes), `icons.css`, and opt-in `fonts.css` /\n  `select.css`. Built from the tokens with no InstUI React dependency.\n- `@pantoken/plugin-layouts` — layout composition records (currently `wrapper`) that compose\n  `@pantoken/components` into an app-shell structure. Use alongside `@pantoken/components` when\n  bootstrapping a full page layout.\n- `@pantoken/plugin-custom-components` — additional cssdoc-documented components beyond the core set\n  (currently `banner`, `agent-shell`). Card is part of `@pantoken/components`.\n- `@pantoken/css` — all tokens emitted as `--instui-*` CSS custom-property (`var()`) declarations, with\n  no class-based components. `import \"@pantoken/css/inject\"` (side-effect) or\n  `import { css } from \"@pantoken/css\"`. Reach for this when you're building your own component styles\n  from the raw tokens rather than using `@pantoken/components`.\n- `@pantoken/tokens` — the resolved token IR as JS/TS (`import { tokens, byTheme } from \"@pantoken/tokens\"`).\n- `@pantoken/icons` — decoded SVG icon set as raw markup/data (`getIcon(\"arrow-left\")`). Use when you\n  need the SVG itself (e.g. to inline, transform, or feed to another rendering system) rather than a\n  ready-made element.\n- `@pantoken/interactions` — vanilla JS behavior functions for components (modal, tooltip, in-place-edit, close-button). IIFE entry points for CDN consumers; ESM for bundlers.\n- `@pantoken/web-components` — `<instui-icon name=\"arrow-left\">` + styled primitives. Framework-agnostic.\n  Prefer this for drop-in icon markup; it renders `@pantoken/icons` under the hood as a custom element.\n\n**Frameworks:**\n\n- React: `@pantoken/react` (`<Icon>`, `useToken`, `TokenProvider`). For InstUI's full React components use `@instructure/ui-*`.\n- Vue: `@pantoken/vue` (plugin). Svelte: `@pantoken/svelte` (`icon` action). Angular: `@pantoken/angular`.\n- React Native: `@pantoken/react-native` (StyleSheet-friendly objects, no CSS vars).\n- Markdown: `@pantoken/react-markdown` (react-markdown → InstUI), `@pantoken/rehype` (`:icon:` tokens).\n\n## A2UI clients\n\nWhen combining pantoken with A2UI, distinguish token theming from the A2UI protocol, transport,\nrenderer, and catalog. Claude Code has a dedicated `use-a2ui` skill; other agents can follow these\nrules:\n\n- Inspect the installed A2UI renderer and protocol version, and check the current official SDK docs.\n  Do not assume framework clients support the same versions or styling APIs.\n- For verified A2UI 1.0 Lit clients, use Pantoken's published catalog alongside the Basic Catalog:\n  `@pantoken/ai/a2ui/catalog-v1.json` and\n  `registerPantokenA2uiComponents()` from `@pantoken/web-components/a2ui`. Use only the listed\n  components and properties; the catalog covers every exported `@pantoken/web-components` element.\n- React and Angular runtime support is pending v1.0 SDK verification. Flutter, SwiftUI, and Jetpack\n  Compose have schema-only support; Pantoken doesn't provide native component renderers.\n- For the web Basic Catalog, use its documented `--a2ui-*` properties and map only to semantically\n  matching `--instui-*` tokens verified in `@pantoken/tokens`. Load `@pantoken/css`; don't invent\n  property names or hard-code colors.\n- For native clients, use the existing pantoken output for that host (`flutter`, `compose`, or\n  `swift`) and the renderer's native theme API; CSS custom properties do not apply to native views.\n- A2UI v1.0 delegates branding to the renderer. Do not put theme properties in v1.0 protocol\n  messages or add a runtime/renderer/catalog for token-only work.\n\n**Build tools:**\n\n- Vite: `@pantoken/vite` (virtual modules + CSS inject). Next: `@pantoken/next` (`withPantoken` for `transpilePackages`).\n- Tailwind: `@pantoken/tailwind` (preset → `bg-color-background-base`). PostCSS: `@pantoken/postcss` (`@pantoken;` at-rule). Webpack: `@pantoken/webpack`.\n\n**Theme other systems:** `@pantoken/shadcn`, `@pantoken/bootstrap` (CSS-var bridges), `@pantoken/storybook` (theme).\n\n## shadcn registry\n\nIn a package-managed project with `components.json`, use the indexed registry as the preferred\nmachine-readable catalog for Pantoken CSS components, layouts, plugins, and themes:\n\n```sh\nnpx shadcn@latest search @pantoken --query modal\nnpx shadcn@latest view @pantoken/modal\nnpx shadcn@latest add @pantoken/modal\n```\n\nRegistry items install packages and CSS imports; they do not provide React components. Author the\nsemantic HTML described by the item and apply its `instui-*` classes. `@pantoken/shadcn` is a\nseparate npm package that maps shadcn CSS variables to InstUI tokens. Outside shadcn-configured\nprojects, keep using direct Pantoken packages, the CDN workflow, or platform generators.\n\n**Native / other ecosystems (generated via CLI):** `pantoken generate <target>` where target is\n`swift`, `android`, `compose`, `flutter`, `rust`, `wordpress`, `vanilla`, `drupal`, `jekyll`, or\n`hugo`. Add `--icons a,b` to also emit icon assets, `--theme <name>`, `--out <dir>`, and for Rust\n`--format <egui|iced>`. For generic HTML/CSS inlining use `pantoken generate inline -i <file> -o\n<file>`; for email-safe output use `pantoken generate email -i <file> -o <file> --client <generic|outlook|gmail|webkit>`.\n\nBefore recommending a platform or host version, consult the\n[target compatibility registry](https://pantoken.app/target-compatibility.json). Its `status`, `testedVersions`, and\n`testedEnvironments` describe bounded evidence, not support for untested future releases. The\nregistry's `$schema` field links its published JSON Schema. This is separate from the shadcn CSS\ncomponent registry.\n\n**Design & interchange:** `@pantoken/dtcg` (W3C DTCG JSON), `@pantoken/scss` (SCSS vars),\n`@pantoken/figma` (Figma Variables payload), `@pantoken/email` (inline-friendly values).\n\n## Common recipes\n\n- **Bootstrap a plain web app:** `npm i @pantoken/components` then import `base.css` +\n  `components.css` (+ `utilities.css` as needed). Apply classes like `class=\"instui-button\"` to your\n  markup. Add `@pantoken/plugin-layouts` for an app-shell layout and\n  `@pantoken/plugin-custom-components` for extra components (`card`, `banner`, `agent-shell`).\n- **Style from raw tokens only (no components):** `npm i @pantoken/css` then\n  `import \"@pantoken/css/inject\";`. Use `var(--instui-color-background-brand)` etc. in your own CSS.\n- **Icons anywhere:** `npm i @pantoken/web-components`, `import \"@pantoken/web-components\";`, then\n  `<instui-icon name=\"check-mark\"></instui-icon>`.\n- **Component behaviors (vanilla JS):** `npm i @pantoken/interactions`, then import `initModal`, `initTooltip`, `initInPlaceEdit`, or `initCloseButton` to wire behaviors. For CDN/IIFE: link `@pantoken/interactions/dist/interactions.iife.js` and check `component-capabilities.json` for per-component `.iife.js` entry points.\n- **Tree browser:** ARIA trees need `initTreeBrowser` or the `tree-browser.iife.js` entry point,\n  not CSS alone. Name the tree, use focusable treeitems, and connect collection rows to their groups\n  with `aria-owns`. Native details/summary disclosures remain a CSS-only alternative without tree roles.\n- **Drawer layout:** Give `<instui-drawer-layout>` nonempty `tray-label` and `content-label`\n  attributes to name its shadow-DOM regions. Labels on slotted content don't name those panes.\n- **Form validation:** Native validation is opt-in via `initFormField(host, control, error)` or\n  `data-native-validation` plus `form-field.iife.js`. Supply a separate error with a unique ID.\n  CSS alone doesn't synchronize error associations; client-side checks don't replace server validation.\n- **Menus:** Use `initMenu(menu, button)` or `data-menu-navigation` plus `menu.iife.js` for vertical,\n  single-level native popover menus. Applications own actions and checked state; use `aria-disabled`\n  for disabled items. Submenus and menubars aren't supported; CSS alone doesn't supply ARIA keyboard behavior.\n- **Tables:** Use `-layout-responsive` inside an `instui-container` (load `utilities.css`) for\n  CSS-only stacking below the canonical `md` container breakpoint. Supply localized `data-label`\n  values matching the column headers and retain native header associations. To retain columns,\n  use a named, keyboard-focusable `--overflow-x-auto` region with a visible focus outline.\n- **Tailwind:** add `pantokenPreset()` to `presets` and import `@pantoken/css`.\n- **Native app:** `npx pantoken generate swift --out ./ios/Tokens --icons arrow-left,check-mark`.\n- **Rust app:** `npx pantoken generate rust --out ./src/tokens.rs --format egui`.\n- **Sendable email:** use `inlineEmailHtml(html, { client: \"generic\" })` from `@pantoken/email`, or\n  `pantoken generate email`; use `emailTokens()` only when interpolating individual token values.\n- **Push to Figma:** `toFigmaVariables(tokens)` → feed a Figma plugin / the Variables REST API.\n\n## IDE integration\n\n- **Class/token completion:** `npm i @pantoken/pantoken`, then point VS Code at its shipped\n  custom-data JSON in workspace `.vscode/settings.json`:\n\n  ```json\n  {\n    \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n    \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n  }\n  ```\n\n  Reload VS Code to pick up the new data. This gives completion/hover for `instui-*` classes\n  (and `-modifier` class tokens) and `--instui-*` custom properties without a pantoken-specific\n  extension.\n\n- **cssdoc authoring support:** install the `cssdoc.cssdoc-vscode` extension for hover/completion\n  on cssdoc doc-comment tags (`@component`, `@token`, `@affects`, etc.) when authoring or reading\n  the `.css` records that back `@pantoken/components` and its plugins.\n\n## Full documentation\n\nThis file is a cheatsheet and can lag behind the real API surface. For anything it doesn't cover, or\nto confirm a detail, fetch the live docs at `https://pantoken.app/`:\n\n- `/llms.txt` — an agent-legible index of the whole site.\n- `/llms-full.txt` — the entire site as one document.\n- Any page as Markdown by appending `.md` to its URL (e.g. `/guide/packages.md`).\n- `https://create.pantoken.app` — the `create-pantoken-app` agent skill, served at its own domain root.\n- `/.well-known/api-catalog` — a machine-readable manifest linking to the above.\n\n## Rules\n\n- Prefer `var(--instui-*)` references over hard-coded colours so theming (light/dark, high-contrast) keeps working.\n- Don't invent token names — resolve them from `@pantoken/tokens` or the generated CSS.\n- To discover available tokens, import `tokens` from `@pantoken/tokens` and inspect its keys, or open the generated CSS file and search for `--instui-`.\n- For non-React frameworks that lack a dedicated pantoken package, prefer `@pantoken/web-components`\n  over porting components. When a framework package exists (Vue, Svelte, Angular), use it instead.\n",
+	"llms": "# pantoken\n\n> Instructure UI design tokens and icons, exported once and re-shaped for many platforms — CSS, JS,\n> native (Swift/Android/Compose/Flutter), design tools (Figma), and framework integrations. Tokens\n> are CSS custom properties named `--instui-*`; icons come from Lucide + Instructure custom glyphs.\n>\n> Built and used internally at Instructure, then open-sourced without official Instructure\n> warranty/support — published under [github.com/thedannywahl/pantoken](https://github.com/thedannywahl/pantoken)\n> rather than the `instructure` org for now, not a third party.\n\n## Getting started\n\n- [Unified package](https://www.npmjs.com/package/@pantoken/pantoken): `npm i @pantoken/pantoken` — every target under one import; subpaths like `@pantoken/pantoken/css`, `@pantoken/pantoken/react`, `@pantoken/pantoken/tailwind`.\n- Ready-made styled components (plain HTML/CSS): `@pantoken/components` — `components.css`, `base.css`,\n	`utilities.css`, `prose.css`. Pair with `@pantoken/plugin-layouts` (app-shell layout) and\n	`@pantoken/plugin-custom-components` (additional components like `banner` and `agent-shell`). Card is included in `@pantoken/components`.\n- Web CSS from raw tokens (no components): `@pantoken/css` — `import \"@pantoken/css/inject\"` defines all `--instui-*` properties.\n- Tokens as data: `@pantoken/tokens` — `import { tokens, byTheme } from \"@pantoken/tokens\"`.\n- User preferences are automatic, not opt-in variants: `prefers-reduced-motion`, `prefers-contrast`,\n	`prefers-reduced-transparency`, and forced colors. Keep loading and disabled cues visible. More\n	contrast strengthens boundaries; less removes decorative shadows without lowering text contrast.\n	Ready token sheets follow the system; explicit `data-pantoken-scheme` light/dark pins win.\n	For nested themes, load `properties.css` once plus `scope.css` and set `data-pantoken-theme`.\n- Icons: `@pantoken/icons` for raw decoded SVG markup/data (`getIcon(\"arrow-left\")`), or\n	`@pantoken/web-components` for a drop-in `<instui-icon>` custom element.\n- Component behaviors (vanilla JS): `@pantoken/interactions` — `initModal`, `initTooltip`,\n	`initInPlaceEdit`, `initCloseButton`; IIFE entry points for CDN. `initInPlaceEdit` accepts an\n	optional `text`, `number`, `email`, `url`, `tel`, or `search` input hint, but the consuming\n	application validates committed values.\n- Tree browser: ARIA tree markup needs `initTreeBrowser` or `tree-browser.iife.js` for keyboard\n	navigation. Name the tree, use focusable treeitems, and associate collection rows with groups via\n	`aria-owns`. CSS-only details/summary disclosures don't claim tree roles.\n- Drawer layout: give `<instui-drawer-layout>` nonempty `tray-label` and `content-label`\n	attributes to name its shadow-DOM regions. Labels on slotted content don't name those panes.\n- Form validation: opt into `initFormField(host, control, error)` or `data-native-validation` plus\n	`form-field.iife.js`, with a separate error and unique ID. CSS alone doesn't synchronize error\n	associations; client-side checks don't replace server validation.\n- Menus: opt into `initMenu(menu, button)` or `data-menu-navigation` plus `menu.iife.js` for\n	vertical, single-level native popover menus. Applications own actions and checked state;\n	disabled items need `aria-disabled`. Submenus and menubars aren't supported.\n- Tables: `-layout-responsive` inside an `instui-container` (with `utilities.css`) stacks below\n	the canonical `md` container breakpoint without JavaScript. Match localized `data-label` values\n	to column headers and retain native header associations. Alternatively, retain columns in a\n	named, keyboard-focusable `--overflow-x-auto` region with a visible focus outline.\n- shadcn registry: `shadcn search @pantoken`, `shadcn view @pantoken/<item>`, then `shadcn add\n	@pantoken/<item>`. Items install CSS/packages and usage metadata, not React components.\n- Standalone browser mockups: use the CDN guide, component capability manifest, demos, and optional\n	per-component interaction IIFEs. Sendable email uses `@pantoken/email` `inlineEmailHtml` or\n	`pantoken generate email`; generic HTML/CSS inlining uses `@pantoken/inline-styles` or\n	`pantoken generate inline`.\n\n## Frameworks\n\n- React: `@pantoken/react` · Vue: `@pantoken/vue` · Svelte: `@pantoken/svelte` · Angular: `@pantoken/angular` · React Native: `@pantoken/react-native`\n- Markdown: `@pantoken/react-markdown`, `@pantoken/rehype`\n\n## Build tools\n\n- `@pantoken/vite` · `@pantoken/next` · `@pantoken/webpack` · `@pantoken/tailwind` · `@pantoken/postcss`\n\n## Theming other systems\n\n- `@pantoken/shadcn` · `@pantoken/bootstrap` · `@pantoken/storybook`\n- A2UI: for verified A2UI 1.0 Lit clients, use `@pantoken/ai/a2ui/catalog-v1.json` with\n  `@pantoken/web-components/a2ui` alongside the Basic Catalog. It defines every exported\n  `@pantoken/web-components` element. React/Angular runtime support is pending verification;\n  Flutter, SwiftUI, and Jetpack Compose have schema-only support. For Basic Catalog theming, use\n  version-matched `--a2ui-*` properties and verified `--instui-*` tokens.\n\n## Native & other ecosystems (CLI: `pantoken generate <target>`)\n\n- swift, android, compose, flutter, rust, wordpress, vanilla, drupal, jekyll, hugo — add\n	`--icons`, `--theme`, `--out`, and for rust `--format`.\n- Check https://pantoken.app/target-compatibility.json before claiming a supported host version;\n	its `$schema` field identifies the published schema. Verified releases and environments are\n	bounded evidence, not promises about newer versions.\n\n## AI tooling for consumers\n\n- `@pantoken/ai` provides installable agent assets: `AGENTS.md`, `llms.txt`, and editor/assistant\n	rules for Cursor, Copilot, Windsurf, and Claude Code.\n- The Claude Code assets include `use-a2ui` for A2UI integrations; shared agent rules also cover\n	version-aware token theming.\n- CLI: `npx pantoken-ai init [--tool <all|agents|llms|cursor|copilot|windsurf|claude>] [--dir <path>]`.\n\n## Design & interchange\n\n- `@pantoken/dtcg` (W3C DTCG JSON) · `@pantoken/scss` · `@pantoken/figma` (Figma Variables) · `@pantoken/email`\n\n## Conventions\n\n- Token names: `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n- Themes: rebrand (default), canvas, canvasHighContrast. Prefer `var(--instui-*)` references for theming.\n",
+	"cursor": "---\ndescription: How to use pantoken (Instructure design tokens & icons) in this project\nglobs:\nalwaysApply: false\n---\n\n# pantoken (Instructure design tokens & icons)\n\nWhen styling this project, use pantoken components, icons and tokens.\n\n- First distinguish a maintained application from a standalone artifact. For a single HTML mockup\n  or sendable email, follow the `create-pantoken-mockup` skill instead of scaffolding a project.\n- In a shadcn project, discover CSS items with `shadcn search @pantoken`, inspect with `shadcn view\n  @pantoken/<item>`, and install with `shadcn add @pantoken/<item>`. These are styles and metadata,\n  not React components. `@pantoken/shadcn` is only the CSS-variable bridge.\n\n- Tokens are CSS custom properties `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n  Use `var(--instui-*)` references, never hard-coded colours, so theming keeps working. Resolve real\n  names from `@pantoken/tokens` — don't guess. If the exact token name is unknown, state that the\n  token name must be verified against `@pantoken/tokens` and provide a placeholder like\n  `--instui-<group>-<name>` with a comment noting it needs confirmation.\n- Web app: `import \"@pantoken/css/inject\";` to define the properties.\n- A2UI: for verified A2UI 1.0 Lit clients, use Pantoken's catalog\n  (`@pantoken/ai/a2ui/catalog-v1.json`) with `@pantoken/web-components/a2ui` alongside the Basic\n  Catalog. Use only its listed components and properties. React/Angular runtime support is pending\n  v1.0 verification; native clients have schema-only support. For Basic Catalog theming, verify the\n  installed renderer's `--a2ui-*` properties and map only to matching `--instui-*` tokens from\n  `@pantoken/tokens`.\n- User preferences are automatic, not opt-in variants: `prefers-reduced-motion`, `prefers-contrast`,\n  `prefers-reduced-transparency`, and forced colors. Preserve static loading feedback and disabled\n  cues. More contrast strengthens boundaries; less removes decorative shadows without reducing text\n  contrast. Ready token sheets follow the system scheme; explicit `data-pantoken-scheme` light/dark\n  pins win. Use `properties.css` plus `scope.css` for nested themes, not multiple root theme sheets.\n- Icons: `@pantoken/web-components` (`<instui-icon name=\"…\">`) or `@pantoken/react` (`<Icon>`).\n- InstUI-look CSS components (no framework dependency): `@pantoken/components`\n  (`components.css`, `base.css`, `prose.css`, `utilities.css`, `fonts.css`) — class-based markup\n  like `<button class=\"instui-button\">`.\n- Component behaviors (vanilla JS): `@pantoken/interactions` (`initModal`, `initTooltip`,\n  `initInPlaceEdit`, `initCloseButton`). `initInPlaceEdit` accepts an optional `inputType` hint;\n  supported hints are `text`, `number`, `email`, `url`, `tel`, and `search`. Validate its committed\n  `change` value in the consuming application.\n- ARIA tree-browser markup needs `initTreeBrowser` or `tree-browser.iife.js` for keyboard navigation.\n  Name the tree, use focusable treeitems, and associate collection rows with groups via `aria-owns`.\n  Native details/summary disclosures can use the CSS without claiming tree roles.\n- Give `<instui-drawer-layout>` nonempty `tray-label` and `content-label` attributes to name its\n  shadow-DOM regions. Labels on slotted content don't name those panes.\n- Native form validation is opt-in through `initFormField(host, control, error)` or\n  `data-native-validation` plus `form-field.iife.js`. Supply a separate error with a unique ID.\n  CSS alone doesn't synchronize error associations; server-side validation is still required.\n- ARIA menu keyboard behavior is opt-in via `initMenu(menu, button)` or `data-menu-navigation`\n  plus `menu.iife.js`. Use a vertical, single-level native popover and its button. Applications own\n  actions and checked state; disabled items need `aria-disabled`. Submenus and menubars aren't supported.\n- Tables can use `-layout-responsive` inside an `instui-container` (load `utilities.css`) for\n  CSS-only stacking below the canonical `md` container breakpoint. Match localized `data-label`\n  values to column headers; retain native header associations. Alternatively, keep columns in a\n  named, keyboard-focusable `--overflow-x-auto` region with a visible focus outline.\n- Tailwind: `pantokenPreset()` from `@pantoken/tailwind`.\n- Native / CMS/site/design targets: `npx pantoken generate\n  <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|swatches|icon-font|pendo|mintlify|jekyll|hugo>`.\n- Check the [target compatibility registry](https://pantoken.app/target-compatibility.json) before recommending a host version. Its\n  `$schema` field links the schema; tested versions and environments do not imply future support.\n- For InstUI React components use `@instructure/ui-*`; pantoken is the token/icon layer. Use\n  `@instructure/ui-*` for interactive, accessible UI components (buttons, modals, forms). Use\n  `@pantoken/react` only for icons and token consumption. Do not substitute one for the other.\n",
+	"copilot": "# pantoken (Instructure design tokens & icons)\n\nWhen styling this project, use pantoken components, icons and tokens.\n\n- First distinguish a maintained application from a standalone artifact. For a single HTML mockup\n  or sendable email, follow the `create-pantoken-mockup` skill instead of scaffolding a project.\n- In a shadcn project, discover CSS items with `shadcn search @pantoken`, inspect with `shadcn view\n  @pantoken/<item>`, and install with `shadcn add @pantoken/<item>`. These are styles and metadata,\n  not React components. `@pantoken/shadcn` is only the CSS-variable bridge.\n\n- Tokens are CSS custom properties `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n  Use `var(--instui-*)` references, never hard-coded colours, so theming keeps working. Resolve real\n  names from `@pantoken/tokens` — don't guess. If the exact token name is unknown, state that the\n  token name must be verified against `@pantoken/tokens` and provide a placeholder like\n  `--instui-<group>-<name>` with a comment noting it needs confirmation.\n- Web app: `import \"@pantoken/css/inject\";` to define the properties.\n- A2UI: for verified A2UI 1.0 Lit clients, use Pantoken's catalog\n  (`@pantoken/ai/a2ui/catalog-v1.json`) with `@pantoken/web-components/a2ui` alongside the Basic\n  Catalog. Use only its listed components and properties. React/Angular runtime support is pending\n  v1.0 verification; native clients have schema-only support. For Basic Catalog theming, verify the\n  installed renderer's `--a2ui-*` properties and map only to matching `--instui-*` tokens from\n  `@pantoken/tokens`.\n- User preferences are automatic, not opt-in variants: `prefers-reduced-motion`, `prefers-contrast`,\n  `prefers-reduced-transparency`, and forced colors. Preserve static loading feedback and disabled\n  cues. More contrast strengthens boundaries; less removes decorative shadows without reducing text\n  contrast. Ready token sheets follow the system scheme; explicit `data-pantoken-scheme` light/dark\n  pins win. Use `properties.css` plus `scope.css` for nested themes, not multiple root theme sheets.\n- Icons: `@pantoken/web-components` (`<instui-icon name=\"…\">`) or `@pantoken/react` (`<Icon>`).\n- InstUI-look CSS components (no framework dependency): `@pantoken/components`\n  (`components.css`, `base.css`, `prose.css`, `utilities.css`, `fonts.css`) — class-based markup\n  like `<button class=\"instui-button\">`.\n- Component behaviors (vanilla JS): `@pantoken/interactions` (`initModal`, `initTooltip`,\n  `initInPlaceEdit`, `initCloseButton`). `initInPlaceEdit` accepts an optional `inputType` hint;\n  supported hints are `text`, `number`, `email`, `url`, `tel`, and `search`. Validate its committed\n  `change` value in the consuming application.\n- ARIA tree-browser markup needs `initTreeBrowser` or `tree-browser.iife.js` for keyboard navigation.\n  Name the tree, use focusable treeitems, and associate collection rows with groups via `aria-owns`.\n  Native details/summary disclosures can use the CSS without claiming tree roles.\n- Give `<instui-drawer-layout>` nonempty `tray-label` and `content-label` attributes to name its\n  shadow-DOM regions. Labels on slotted content don't name those panes.\n- Native form validation is opt-in through `initFormField(host, control, error)` or\n  `data-native-validation` plus `form-field.iife.js`. Supply a separate error with a unique ID.\n  CSS alone doesn't synchronize error associations; server-side validation is still required.\n- ARIA menu keyboard behavior is opt-in via `initMenu(menu, button)` or `data-menu-navigation`\n  plus `menu.iife.js`. Use a vertical, single-level native popover and its button. Applications own\n  actions and checked state; disabled items need `aria-disabled`. Submenus and menubars aren't supported.\n- Tables can use `-layout-responsive` inside an `instui-container` (load `utilities.css`) for\n  CSS-only stacking below the canonical `md` container breakpoint. Match localized `data-label`\n  values to column headers; retain native header associations. Alternatively, keep columns in a\n  named, keyboard-focusable `--overflow-x-auto` region with a visible focus outline.\n- Tailwind: `pantokenPreset()` from `@pantoken/tailwind`.\n- Native / CMS/site/design targets: `npx pantoken generate\n  <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|swatches|icon-font|pendo|mintlify|jekyll|hugo>`.\n- Check the [target compatibility registry](https://pantoken.app/target-compatibility.json) before recommending a host version. Its\n  `$schema` field links the schema; tested versions and environments do not imply future support.\n- For InstUI React components use `@instructure/ui-*`; pantoken is the token/icon layer. Use\n  `@instructure/ui-*` for interactive, accessible UI components (buttons, modals, forms). Use\n  `@pantoken/react` only for icons and token consumption. Do not substitute one for the other.\n",
+	"windsurf": "# pantoken rules (Instructure design tokens & icons)\n\n- Use pantoken tokens: CSS custom properties `--instui-<group>-<name>`. Prefer `var(--instui-*)`\n  references over hard-coded values so light/dark and high-contrast theming works. Resolve names\n  from `@pantoken/tokens`; do not invent them.\n- Route maintained apps to package-manager integration. Route a single HTML mockup or sendable email\n  to the `create-pantoken-mockup` skill instead of scaffolding a project.\n- In shadcn projects, use `shadcn search/view/add @pantoken/...` for CSS styles and metadata. The\n  registry does not provide React components; `@pantoken/shadcn` is the variable bridge.\n- Web: `import \"@pantoken/css/inject\";`. Icons: `@pantoken/web-components` (`<instui-icon>`).\n- A2UI: for verified A2UI 1.0 Lit clients, use Pantoken's catalog\n  (`@pantoken/ai/a2ui/catalog-v1.json`) with `@pantoken/web-components/a2ui` alongside the Basic\n  Catalog; use only its listed components and properties. React/Angular runtime support is pending\n  v1.0 verification; native clients have schema-only support. For Basic Catalog theming, verify the\n  installed renderer's `--a2ui-*` properties and map only to verified `--instui-*` tokens.\n- React: `@pantoken/react`. Tailwind: `@pantoken/tailwind` preset.\n- Native / other ecosystems: `npx pantoken generate <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|jekyll|hugo> --out <dir>`.\n- Check the [target compatibility registry](https://pantoken.app/target-compatibility.json) before recommending a host version; the\n  registry's `$schema` field links its schema. Only named versions or environments are verified.\n- InstUI React components: `@instructure/ui-*`. pantoken is the token/icon layer.\n",
 	"initSkill": "---\nname: init-pantoken\ndescription: Install pantoken's agent assets (AGENTS.md, llms.txt, editor/agent rule files, and app/mockup skills) into this repo so AI tools know how to work with pantoken. Use when the user asks to add pantoken AI support, or wants Copilot/Cursor/Windsurf/Claude rules for pantoken set up in a repo.\n---\n\n# Init pantoken (AI assets)\n\nInstall pantoken's consumer-facing agent assets into the current repo: `AGENTS.md`, `llms.txt`,\neditor/agent rule files (Cursor, Copilot, Windsurf), and the `create-pantoken-app`,\n`create-pantoken-mockup`, and `use-pantoken-registry` skills.\n\n```sh\nnpx pantoken-ai init\n```\n\nThis installs every asset by default. To scope it to one tool, pass\n`--tool <agents|llms|cursor|copilot|windsurf|claude>`. To target a directory other than the\ncurrent one, pass `--dir <path>`. Substitute `pnpm dlx`, `yarn dlx`, `bunx`, or `deno run npm:` for `npx` depending\non the package manager detected in the repo (look for `pnpm-lock.yaml`, `yarn.lock`, or\n`bun.lock`/`bun.lockb`; default to npm/npx if none is found).\n\nThat's all this skill does — it only writes the asset files above, it does not install any\n`@pantoken/*` package or modify application code. Once the assets are installed, use\n`create-pantoken-app` for a maintained project (or run `npx pantoken-ai scaffold <platform>`\ndirectly), use `create-pantoken-mockup` for a standalone browser or email artifact, and use\n`use-pantoken-registry` when a shadcn project should search, inspect, or add Pantoken registry\nitems.\n",
 	"createAppSkill": "---\nname: create-pantoken-app\ndescription: Scaffold a maintained application, or add Instructure design tokens and icons (pantoken) to an existing project with a package manager. Use for web, framework, native, and CMS projects that need dependencies and builds. Do not use for a standalone HTML mockup or sendable email; use create-pantoken-mockup.\n---\n\n# Scaffold pantoken\n\nSet up [pantoken](https://www.npmjs.com/package/@pantoken/pantoken) — a design tokens and icons\nlibrary for Instructure UI — in the current project. Work through these steps.\n\nIf the user wants one standalone HTML file, a quick browser prototype, a customer email mockup, or\nsendable email HTML, stop and use the `create-pantoken-mockup` skill instead.\n\n## About pantoken\n\npantoken is built and used internally at Instructure, then open-sourced; Instructure doesn't\nprovide official warranty or support for it as a product, which is why it's published from\n[`thedannywahl`](https://github.com/thedannywahl/pantoken) on GitHub and npm\n([`@pantoken`](https://www.npmjs.com/org/pantoken)) rather than the `instructure` org/scope — it may\nmove there later. Check either link yourself before proceeding if you want to verify this.\n\n## 1. New project or existing repo?\n\n- **Empty directory, or no repo yet** — scaffold a starter with the CLI, then stop (steps 2-3 are\n  already done for you by the template).\n\n  The CLI has its own interactive prompts, but those only work at a real terminal, so ask the user\n  the questions below the same way you normally would, then pass their answers as flags (plus\n  `--yes`) so the command runs without needing its own prompts:\n\n  1. **Platform** — ask the user, offering the supported list: `components` (plain HTML/CSS;\n     `html` is an accepted alias), `react`, `vue`, `svelte`, `web-components`, `angular`,\n     `canvas-theme-editor` (Canvas LMS Theme Editor uploads + an RCE content page template\n     starter; `theme-editor` is an accepted alias). Skip asking only if it's unambiguous from the\n     conversation — route requests like \"use pantoken with my Canvas theme editor\" or \"build RCE\n     page templates\" straight to `canvas-theme-editor`. More platforms land over time; if the\n     desired one isn't yet supported by the scaffold CLI, skip the CLI entirely and proceed\n     directly to step 2 to manually install and wire pantoken instead.\n\n     For `canvas-theme-editor`, after scaffolding, tell the user to: (1) upload the generated\n     `theme.css`/`theme.js` under Canvas's Theme Editor → Advanced, and (2) run `npm run dev` to\n     author RCE page templates in the local TinyMCE editor, using the **Layouts** toolbar button to\n     start from a bundled starter layout before copying the result into Canvas.\n\n     If the CLI fails for any reason (non-zero exit, unsupported platform, network error), fall\n     through to step 2 and treat the project as an existing repo, preserving any files already\n     written by the CLI.\n\n  2. **Package manager** — if a lockfile already exists in the target directory, use it (see the\n     detection table in step 2); a genuinely empty directory has no lockfile to detect from, so\n     ask the user (npm/pnpm/yarn/bun/deno).\n  3. **Directory** — ask where to scaffold (default `.` for the current directory; confirm before\n     defaulting to `.` if you're not sure that's what they want).\n\n  Then run the fully-resolved command, substituting the chosen package manager's \"run a package's\n  CLI\" form from step 2's table for `npx`, and passing `--yes` so the CLI never falls back to its\n  own interactive prompts:\n\n  ```sh\n  npx @pantoken/ai scaffold <platform> --dir <dir> --yes\n  ```\n\n  This writes a minimal starter (`package.json`, entry file(s), README) for the chosen platform\n  with pantoken already installed and wired in, and also installs pantoken's agent assets\n  (AGENTS.md, editor/agent rules, skills) into the same directory. If you only want the starter\n  project without the agent assets, run `npx create-pantoken-app <platform> --dir <dir> --yes`\n  (or `npx @pantoken/scaffold <platform> --dir <dir> --yes`) directly instead — substituting the\n  chosen package manager's launcher for `npx` on either command. Run `npm install` (or the chosen\n  package manager's install) in the target directory afterward.\n\n- **Existing repo you want to add pantoken to** — continue to step 2.\n\n## 2. Determine the target\n\nAsk the user what kind of project they're building, unless it's unambiguous from the repo. Offer:\n\n- **Native web (plain HTML/CSS, no framework) — default** → `@pantoken/components`\n- A JS framework (React, Vue, Svelte, Angular, React Native, Next.js)\n- A build tool only, styling from raw tokens (Tailwind, PostCSS, Vite, Webpack, or plain `@pantoken/css`)\n- A native/CMS ecosystem (Swift, Android, Compose, Flutter, Rust, WordPress, Drupal, Vanilla, Jekyll, Hugo)\n\nIf the user doesn't answer or has no preference, default to native web (`@pantoken/components`).\n\nCorroborate with the repo when possible, and prefer the user's answer if it conflicts with detection:\n\n- `package.json` dependencies → web framework (react, vue, svelte, @angular/core, react-native,\n  next, vite, tailwindcss, webpack, postcss).\n- If no `package.json` is found and the user wants a web project, run `npm init -y` first, then\n  proceed with the native web default (or the chosen framework) — this applies even if the user\n  describes the project as \"existing\"; trust their named framework and proceed rather than asking\n  for clarification.\n- Native project files → iOS (`Package.swift`, `*.xcodeproj`), Android (`build.gradle`), Flutter\n  (`pubspec.yaml`), WordPress/Drupal/Vanilla theme dirs.\n\nAlso detect the package manager from the lockfile present in the repo, and use its equivalent\ncommand for every install/run step below instead of assuming npm:\n\n| Lockfile found             | Package manager | Add package(s)       | Run a package's CLI  |\n| -------------------------- | --------------- | -------------------- | -------------------- |\n| `pnpm-lock.yaml`           | pnpm            | `pnpm add <pkg>`     | `pnpm dlx <pkg>`     |\n| `yarn.lock`                | yarn            | `yarn add <pkg>`     | `yarn dlx <pkg>`     |\n| `bun.lock`/`bun.lockb`     | bun             | `bun add <pkg>`      | `bunx <pkg>`         |\n| `deno.lock`                | deno            | `deno add npm:<pkg>` | `deno run npm:<pkg>` |\n| `package-lock.json` / none | npm             | `npm i <pkg>`        | `npx <pkg>`          |\n\nIf no lockfile exists yet, default to npm (or whatever the user prefers).\n\n## 3. Install\n\nIf `components.json` exists or the user explicitly requests shadcn, use the indexed registry to\ndiscover and install Pantoken CSS styles:\n\n```sh\nnpx shadcn@latest search @pantoken --query <need>\nnpx shadcn@latest view @pantoken/<item>\nnpx shadcn@latest add @pantoken/<item>\n```\n\nRegistry items provide CSS and usage metadata, not React components. Use `@instructure/ui-*` when\nthe user needs full React components. Continue with direct package installation for non-shadcn\nprojects.\n\nUse the package manager detected in step 2 for every command below (the examples use `npm i`;\nsubstitute `pnpm add`, `yarn add`, or `bun add` as appropriate).\n\nFollow this decision checklist in order, then run one install command with all collected packages:\n\n1. **Is it native web** (plain HTML/CSS, no framework and no build tool detected)? Install only\n   `@pantoken/components` — it ships the token CSS baked in, so no separate `@pantoken/css` install\n   is needed — and stop:\n\n   ```sh\n   npm i @pantoken/components\n   ```\n\n2. **Is it Next.js?** Collect `@pantoken/css` plus `@pantoken/next` (do NOT also add\n   `@pantoken/react` — `@pantoken/next` includes the React integration), then add any matching tool\n   packages (Tailwind, Vite, etc.) from the table below.\n\n3. **Otherwise**, collect `@pantoken/css` first, then add the framework package and every matching\n   tool row's package from the table. Framework rows (React, Vue, etc.) and tool rows (Tailwind,\n   PostCSS, Vite, Webpack) are all additive — collect every matching row's package alongside\n   `@pantoken/css`.\n\n4. If the user wants to use `<instui-icon>` in any web framework project (React, Vue, Vite, etc.),\n   also collect `@pantoken/web-components` — regardless of which framework rows already matched.\n\nFor example:\n\n- A Next.js project also using Tailwind installs `@pantoken/css @pantoken/next @pantoken/tailwind`.\n- A React project also using Vite installs `@pantoken/css @pantoken/react @pantoken/vite`.\n\n| Detected                | Install                                                                                                                                                                                                                                                                            |\n| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Native web (default)    | `@pantoken/components`                                                                                                                                                                                                                                                             |\n| React                   | `@pantoken/react`; if the user also wants full InstUI components (buttons, modals, etc.), additionally install the specific `@instructure/ui-*` packages needed, e.g. `@instructure/ui-buttons @instructure/ui-modal` (see <https://instructure.design> for the full package list) |\n| Vue / Svelte / Angular  | `@pantoken/vue` / `@pantoken/svelte` / `@pantoken/angular` + `@pantoken/web-components` (always install `@pantoken/web-components` alongside the framework package here — it's required for icon support in these three, not optional)                                             |\n| React Native            | `@pantoken/react-native`                                                                                                                                                                                                                                                           |\n| Next.js                 | `@pantoken/next` — Next.js projects do NOT also need `@pantoken/react`; `@pantoken/next` includes the React integration. Do not install both.                                                                                                                                      |\n| Vite                    | `@pantoken/vite`                                                                                                                                                                                                                                                                   |\n| Tailwind                | `@pantoken/tailwind`                                                                                                                                                                                                                                                               |\n| PostCSS / Webpack       | `@pantoken/postcss` / `@pantoken/webpack`                                                                                                                                                                                                                                          |\n| shadcn / Bootstrap      | `@pantoken/shadcn` / `@pantoken/bootstrap`                                                                                                                                                                                                                                         |\n| markdown-it / css-in-js | `@pantoken/markdown-it` / `@pantoken/css-in-js`                                                                                                                                                                                                                                    |\n| Icons anywhere          | `@pantoken/web-components` — for React, Next.js, React Native, and tool-only setups, only add this if the user explicitly wants icon support (`<instui-icon>` elements); for Vue, Svelte, and Angular it's always required (see that row)                                          |\n\nFor native / CMS targets, no install — run the CLI (step 5). If the project contains both a\n`package.json` and native/CMS files, treat it as a web project and follow the web install steps\nabove; only skip to step 5 if there is no `package.json` and no JS framework detected.\n\n## 4. Wire it up\n\n- Native web (default): import `base.css` + `components.css` from `@pantoken/components` (e.g.\n  `import \"@pantoken/components/base.css\"; import \"@pantoken/components/components.css\";`), then\n  apply classes like `class=\"instui-button\"` to markup.\n- Other web entry: add `import \"@pantoken/css/inject\";` (or `@import \"@pantoken/css/style.css\";`).\n- Next: wrap the config with `withPantoken(...)` and import the CSS in the root layout.\n- Vite: add the `pantoken()` plugin. Tailwind: add `pantokenPreset()` to `presets`.\n- Web components: `import \"@pantoken/web-components\";` then use `<instui-icon name=\"…\">`.\n- Verify the app renders and `getComputedStyle(document.documentElement).getPropertyValue('--instui-color-background-brand')` is non-empty.\n  If the property is empty, check that the token CSS import (`@pantoken/components/base.css` or\n  `@pantoken/css/inject`) appears before any component imports in the entry file, and that the dev\n  server was restarted after install. Report the specific failure to the user with corrective steps.\n\n## 5. Native / other ecosystems\n\n```sh\nnpx @pantoken/cli generate <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|jekyll|hugo> --out <dir> [--icons a,b] [--theme rebrand]\n```\n\nSubstitute `pnpm dlx`, `yarn dlx`, `bunx`, or `deno run npm:` for `npx` per the package manager\ndetected in step 2 (or from the choice made in step 1 if you're still inside the new-project flow).\n\n## Conventions to follow afterward\n\n- Style with `var(--instui-*)` references, not hard-coded colours, so light/dark and high-contrast\n  theming keeps working.\n- Resolve real token names from `@pantoken/tokens`; never invent them.\n",
 	"createMockupSkill": "---\nname: create-pantoken-mockup\ndescription: Create a standalone Pantoken HTML mockup or sendable HTML email. Use when the user asks for a single HTML file, quick prototype, customer email mockup, or email-client-ready markup without creating an application project.\n---\n\n# Create a Pantoken mockup\n\nCreate one final HTML artifact without scaffolding an application. Do not create `package.json`,\ninstall project dependencies, or invoke `create-pantoken-app` unless the user changes the request to\na maintained application.\n\n## 1. Choose the output\n\nIf the request says email but does not say how the result will be used, ask one question:\n\n- **Browser mockup**: a visual prototype opened as a local HTML file.\n- **Sendable email**: HTML delivered through Gmail, Outlook, or an email service.\n\nThese are different outputs. Browser mockups may use external CSS, custom properties, and optional\nJavaScript. Sendable email must use concrete inline styles and no scripts.\n\n## 2. Browser mockup\n\nProduce one HTML file that opens directly in a browser. Do not use the shadcn registry for this\nworkflow; it is for package-managed projects.\n\n1. Discover core component requirements from\n   `https://pantoken.app/component-capabilities.json`.\n2. Discover plugin styles from `https://pantoken.app/cdn-plugin-manifest.json`.\n3. Use canonical HTML from `https://pantoken.app/demos/<component>.html` or the component's cssdoc\n   documentation. Preserve native elements, nesting, ARIA attributes, and documented state classes.\n4. Load a version-pinned token foundation first:\n\n   ```html\n   <link\n     rel=\"stylesheet\"\n     href=\"https://cdn.jsdelivr.net/npm/@pantoken/css@<version>/dist/style.lean.css\"\n   />\n   ```\n\n5. Load only the required `@pantoken/components/dist/<name>.css` and plugin CSS files. Put base CSS\n   before components and utilities after components. Use jsDelivr's combine endpoint when several\n   stylesheets are needed.\n6. If any selected component has `needsIcons: true`, add\n   `@pantoken/components/dist/component-icons.css`. Use the full token sheet only when arbitrary\n   icon tokens are required.\n7. If a component has JavaScript capability, load its per-component\n   `@pantoken/interactions/dist/<name>.iife.js` after the markup and include entries from `requires`\n   first. Do not load the aggregate interaction bundle unless many interactive components need it.\n8. Use `var(--instui-*)` for custom styling and never invent token names.\n\nFor a disposable preview, a major-version CDN pin is acceptable. Use exact versions for an artifact\nthat will be retained. If the user explicitly requires a fully offline file, fetch the selected CSS\nand JavaScript and inline it into `<style>` and `<script>` blocks.\n\nOpen the final file in a browser and verify styles, icons, responsive layout, keyboard interaction,\nand that every referenced asset loads. Give the user a link to the HTML file; do not start a server.\n\n## 3. Sendable HTML email\n\nDo not use Pantoken component CSS, the shadcn registry, CSS custom properties, JavaScript, custom\nelements, or icon-font masks. Email clients do not reliably support those features.\n\n1. Resolve values from `@pantoken/email` using `emailTokens(\"light\")` or the requested mode. If the\n   current directory is not a package-managed project, use a temporary package-runner environment;\n   do not leave a package manifest or dependency tree beside the final HTML.\n2. Build conservative table-based email markup with presentation-critical styles inline.\n3. Interpolate concrete colors and dimensions from the returned camel-cased token map. The final\n   HTML must not contain `var(--instui-*)`.\n4. Use hosted raster images with dimensions and meaningful `alt` text for logos or icons. Do not use\n   Pantoken custom elements or CSS glyph painters.\n5. Include a descriptive `<title>`, preheader text, semantic headings, readable fallback fonts, and\n   a plain text link for every call to action.\n6. Validate that the final file contains no `<script>`, custom elements, external Pantoken\n   stylesheets, or unresolved token references. Note that Gmail, Outlook, and production email\n   preview testing remains the sender's responsibility.\n\n## 4. Keep the artifact focused\n\nDo not add explanatory UI, setup instructions, package files, or a framework shell to the rendered\nartifact. Use Pantoken to serve the requested communication or prototype, not to advertise the\ndesign system.\n",
-	"registrySkill": "---\nname: use-pantoken-registry\ndescription: Use Pantoken's shadcn/ui registry to search, inspect, and add CSS-backed registry items. Use when a project has components.json, the user asks for shadcn registry items, or the user wants to browse Pantoken registry styles. Do not use as a general Pantoken app setup skill; use create-pantoken-app for non-registry package wiring.\n---\n\n# Use the Pantoken registry\n\nUse Pantoken's shadcn/ui registry when the project already uses shadcn/ui, has `components.json`,\nor the user explicitly asks for Pantoken registry items. Registry items install CSS, usage metadata,\nand package dependencies; they are not React components.\n\nIf the project is not a shadcn project and the user did not ask for the registry, stop and use\n`create-pantoken-app` instead.\n\n## 1. Confirm registry fit\n\nUse the registry only when one of these is true:\n\n- The repo contains `components.json`.\n- The user asks for shadcn, registry items, or `shadcn add`.\n- The task is to inspect Pantoken registry metadata.\n\nIf the user needs full interactive React components, use `@instructure/ui-*` packages. Pantoken's\nregistry provides CSS-backed styles and metadata, not component implementations.\n\n## 2. Use the project runner\n\nDetect the package manager from lockfiles and substitute its runner for `npx`:\n\n| Lockfile found             | Runner          |\n| -------------------------- | --------------- |\n| `pnpm-lock.yaml`           | `pnpm dlx`      |\n| `yarn.lock`                | `yarn dlx`      |\n| `bun.lock`/`bun.lockb`     | `bunx`          |\n| `deno.lock`                | `deno run npm:` |\n| `package-lock.json` / none | `npx`           |\n\n## 3. Search, inspect, add\n\nPrefer the shadcn CLI for live registry operations:\n\n```sh\nnpx shadcn@latest search @pantoken --query <need>\nnpx shadcn@latest view @pantoken/<item>\nnpx shadcn@latest add @pantoken/<item>\n```\n\nFor URL-capable agents, fetch the manifest first when you need to browse available entries:\n\n```text\nhttps://pantoken.app/r/registry.json\n```\n\nThen inspect the item JSON before adding when the choice is not obvious:\n\n```text\nhttps://pantoken.app/r/<item>.json\n```\n\n## 4. Explain what changed\n\nAfter adding an item, summarize:\n\n- Which registry item was installed.\n- Which files the shadcn CLI wrote or changed.\n- Any dependencies the registry item added.\n- That future styling should still use real `--instui-*` token names and `var(--instui-*)`\n  references rather than invented token names.\n\nIf the registry item does not satisfy the task, fall back to the normal package guidance in\n`create-pantoken-app` and explain why the registry path was not enough.\n"
+	"registrySkill": "---\nname: use-pantoken-registry\ndescription: Use Pantoken's shadcn/ui registry to search, inspect, and add CSS-backed registry items. Use when a project has components.json, the user asks for shadcn registry items, or the user wants to browse Pantoken registry styles. Do not use as a general Pantoken app setup skill; use create-pantoken-app for non-registry package wiring.\n---\n\n# Use the Pantoken registry\n\nUse Pantoken's shadcn/ui registry when the project already uses shadcn/ui, has `components.json`,\nor the user explicitly asks for Pantoken registry items. Registry items install CSS, usage metadata,\nand package dependencies; they are not React components.\n\nIf the project is not a shadcn project and the user did not ask for the registry, stop and use\n`create-pantoken-app` instead.\n\n## 1. Confirm registry fit\n\nUse the registry only when one of these is true:\n\n- The repo contains `components.json`.\n- The user asks for shadcn, registry items, or `shadcn add`.\n- The task is to inspect Pantoken registry metadata.\n\nIf the user needs full interactive React components, use `@instructure/ui-*` packages. Pantoken's\nregistry provides CSS-backed styles and metadata, not component implementations.\n\n## 2. Use the project runner\n\nDetect the package manager from lockfiles and substitute its runner for `npx`:\n\n| Lockfile found             | Runner          |\n| -------------------------- | --------------- |\n| `pnpm-lock.yaml`           | `pnpm dlx`      |\n| `yarn.lock`                | `yarn dlx`      |\n| `bun.lock`/`bun.lockb`     | `bunx`          |\n| `deno.lock`                | `deno run npm:` |\n| `package-lock.json` / none | `npx`           |\n\n## 3. Search, inspect, add\n\nPrefer the shadcn CLI for live registry operations:\n\n```sh\nnpx shadcn@latest search @pantoken --query <need>\nnpx shadcn@latest view @pantoken/<item>\nnpx shadcn@latest add @pantoken/<item>\n```\n\nFor URL-capable agents, fetch the manifest first when you need to browse available entries:\n\n```text\nhttps://pantoken.app/r/registry.json\n```\n\nThen inspect the item JSON before adding when the choice is not obvious:\n\n```text\nhttps://pantoken.app/r/<item>.json\n```\n\n## 4. Explain what changed\n\nAfter adding an item, summarize:\n\n- Which registry item was installed.\n- Which files the shadcn CLI wrote or changed.\n- Any dependencies the registry item added.\n- That future styling should still use real `--instui-*` token names and `var(--instui-*)`\n  references rather than invented token names.\n\nIf the registry item does not satisfy the task, fall back to the normal package guidance in\n`create-pantoken-app` and explain why the registry path was not enough.\n",
+	"a2uiSkill": "---\nname: use-a2ui\ndescription: Use Pantoken's constrained A2UI 1.0 component catalog or theme an installed A2UI renderer with Pantoken tokens. Use for A2UI work involving Pantoken, not transport-only or generic Pantoken tasks. When the app needs multiple themes, define each theme's `--a2ui-*` and `--instui-*` mappings under a separate selector (for example, `[data-theme=\"dark\"] { ... }`), and do not set the mappings on `:root`.\n---\n\n# Use Pantoken with A2UI\n\nUse this skill when a consumer app combines Pantoken with A2UI. A2UI supplies the protocol and\nframework-specific renderers; Pantoken supplies tokens, icons, and its complete web-component set.\nUse A2UI 1.0 only. Do not fall back to A2UI 0.9.\n\n## Do not use this skill for\n\nDon't use this skill for A2UI protocol or transport questions that don't involve Pantoken, or for\ngeneric Pantoken styling without A2UI.\n\n## 1. Identify the client and versions\n\nInspect the app's package manifest, lockfile, and installed packages. Confirm the A2UI protocol\nversion and the client framework's supported SDK version from the\n[official SDK table](https://a2ui.org/concepts/sdks/) and\n[client integration guide](https://a2ui.org/guides/client-integration/). Report the detected A2UI\nprotocol version (for example, \"A2UI 1.0\") in the first sentence of your response. A2UI 1.0 delegates\nbranding to the renderer; don't put theme properties in protocol messages.\n\nIf the installed client framework's SDK version is not listed as supported for A2UI 1.0 in the official SDK table, or the SDK version cannot be determined, stop before making changes, report the detected SDK version, and do not apply Pantoken catalog or theme changes.\n\nIf no package manifest or lockfile is available, ask the user for the A2UI version and client\nframework before continuing, and do not assume 1.0.\n\nIf the installed A2UI protocol version is not 1.0, stop before making changes, report the detected version and the required upgrade path, and do not apply Pantoken catalog or theme changes.\n\nIf a referenced documentation URL or the file `@pantoken/ai/a2ui/catalog-v1.json` cannot be accessed, use the installed package version and its README or type definitions to confirm support, and state in the response that the external source was not verified.\n\n## Routing table: Choose your path\n\nBefore reading the sections below, use this table to identify which section applies:\n\n| A2UI Version | Client Framework               | Renderer Type     | Section                   |\n| ------------ | ------------------------------ | ----------------- | ------------------------- |\n| 1.0          | Lit, verified React or Angular | Universal Catalog | 2                         |\n| 1.0          | Other verified web clients     | Basic Catalog     | 3 (Web)                   |\n| 1.0          | Flutter                        | Native            | 3 (Native)                |\n| 1.0          | SwiftUI                        | Native            | 3 (Native)                |\n| 1.0          | Jetpack Compose                | Native            | 3 (Native)                |\n| Other        | —                              | —                 | Stop: unsupported version |\n\nFind the row matching the user's setup and follow only that section. If the setup doesn't match a row, the configuration is not supported by this skill.\n\n## 2. Prefer the Pantoken catalog for verified web clients\n\nFor A2UI 1.0 Lit clients and the verified React/Angular combinations below, use the published\nPantoken catalog and Universal components:\n\n- Install `@pantoken/ai` and `@pantoken/web-components`.\n- Register `pantokenA2uiCatalog` with `registerPantokenA2uiComponents()` from\n  `@pantoken/web-components/a2ui`, alongside A2UI's Basic Catalog.\n- Set the surface's `catalogId` to Pantoken's catalog ID, or set a component's `catalogId` when\n  mixing catalogs. Don't use `@catalogId`; it isn't a v1.0 protocol directive.\n- Use only the components and properties listed in the catalog JSON at\n  `@pantoken/ai/a2ui/catalog-v1.json`. If the web catalog at [https://pantoken.app/a2ui/](https://pantoken.app/a2ui/) differs\n  from that JSON file, follow the JSON file and report the difference in the response. It covers\n  every exported `@pantoken/web-components` element; don't invent additional Pantoken components\n  or properties.\n- If a requested component or property is not listed in the catalog JSON, respond with the sentence \"Pantoken component X is not supported in the v1 catalog,\" where X is the requested name. Do not write X as a code identifier. In the same response, name the A2UI Basic Catalog component that has the same role (for example, button for a button, text field for an input) and the most overlapping listed properties, and state which properties were dropped.\n\n- The catalog defines no executable functions. Its actions dispatch through A2UI's normal\n  action-handling path; the host application remains responsible for authorization.\n\nBrowser tests verify `@a2ui/react` 0.15.0 with React 19.3.1 and `@a2ui/angular` 0.14.0 with Angular\n21.2.5, using `@a2ui/web_core` 0.15.0 and the same Lit-backed Universal components in Chromium,\nFirefox, and WebKit. Install `lit` and the matching renderer; don't create per-framework component\ncopies. Initialize Angular's renderer before constructing surfaces, because it installs the signal\nbackend. Angular 22, SSR/hydration, arbitrary native framework children, and other version\ncombinations haven't been verified. Don't infer A2UI support from Pantoken's general framework\ncompatibility matrix. For other verified SDK clients, use the Basic Catalog and renderer theme API.\nFlutter, SwiftUI, and Jetpack Compose have schema-only support; Pantoken provides no native renderers.\n\n## 3. Theme the Basic Catalog and other verified renderers\n\n- **Web Basic Catalog:**\n  1. Confirm each `--a2ui-*` property exists in the installed renderer's stylesheet or version-matched docs.\n  2. Omit any property that cannot be confirmed and list it in the response.\n  3. For each remaining mapping, resolve a semantically matching, correctly typed token from `@pantoken/tokens`.\n  4. Load `@pantoken/css` so those tokens are defined.\n  5. Keep mappings scoped when the app needs multiple themes; don't hard-code colors or invent property names.\n- **Native clients:** Use Pantoken's existing target output for the host:\n  use `pantoken generate flutter` for Flutter projects, `pantoken generate compose` for Jetpack Compose projects, and `pantoken generate swift` for SwiftUI projects. If the host platform is not one of these, stop and ask the user. Follow the A2UI renderer's\n  native theme API; CSS custom properties don't apply to native views. If the renderer's native theme API cannot be verified in the installed package or version-matched docs, do not apply theme changes, list the unverified theme properties in the response, and state that the external source was not verified.\n- **Icons:** For surrounding web UI, use `@pantoken/web-components` or `@pantoken/icons`. For icons\n  inside an A2UI surface, verify the selected catalog's icon API; don't invent icon props.\n  If the selected catalog's icon API cannot be verified, omit icon props inside the A2UI surface,\n  use the surrounding web UI icon source from `@pantoken/web-components` or `@pantoken/icons`,\n  and list the omitted icon usage in the response.\n\n## 4. Extend only when requested\n\nIf the user explicitly requests a different custom catalog, follow A2UI's\n[catalog guide](https://a2ui.org/guides/defining-a-catalog/) and the host renderer's registration\nAPI. Preserve strict property allowlists, avoid raw HTML and URL-bearing props, and don't add\nexecutable catalog functions without an explicit design and security review. A catalog schema is\nnot an authorization boundary; the host must authorize action effects.\n\n## 5. Verify\n\nRun the host app's relevant type checks and tests. For each color scheme defined by the installed `@pantoken/tokens` package, run the host app's relevant tests and confirm that every `--a2ui-*` and `--instui-*` value resolves to a defined token, then list each scheme and its result in the verification summary.\n\n## References\n\n- [A2UI v1.0 protocol](https://a2ui.org/specification/v1.0-a2ui/)\n- [A2UI SDKs](https://a2ui.org/concepts/sdks/)\n- [A2UI client integration](https://a2ui.org/guides/client-integration/)\n- [A2UI catalog guide](https://a2ui.org/guides/defining-a-catalog/)\n"
 };
 //#endregion
 //#region src/agent-assets.ts
@@ -799,6 +800,10 @@ const TARGETS = {
 			file: ".claude/skills/use-pantoken-registry/SKILL.md",
 			content: ASSETS.registrySkill
 		},
+		{
+			file: ".claude/skills/use-a2ui/SKILL.md",
+			content: ASSETS.a2uiSkill
+		},
 		{
 			file: "AGENTS.md",
 			content: ASSETS.agents

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoken/scaffold",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "npx @pantoken/scaffold <platform> — scaffold a starter project (html, react, next, angular, web-components, ...) with pantoken already installed and wired in.",
   "homepage": "https://pantoken.app",
   "bugs": "https://github.com/thedannywahl/pantoken/issues",
@@ -34,16 +34,16 @@
     "commander": "^15.0.0"
   },
   "devDependencies": {
-    "@pantoken/angular": "0.2.7",
+    "@pantoken/angular": "0.2.8",
     "@pantoken/canvas-theme-editor": "0.3.2",
     "@pantoken/components": "2.2.1",
     "@pantoken/i18n-engine": "0.4.1",
     "@pantoken/plugin-layouts": "0.5.8",
-    "@pantoken/react": "0.3.0",
+    "@pantoken/react": "0.3.1",
     "@pantoken/scaffold-base": "0.3.11",
-    "@pantoken/svelte": "0.3.0",
-    "@pantoken/vue": "0.3.0",
-    "@pantoken/web-components": "0.8.1",
+    "@pantoken/svelte": "0.3.1",
+    "@pantoken/vue": "0.3.1",
+    "@pantoken/web-components": "0.9.0",
     "@types/node": "^26.6.5",
     "bingo-stratum": "^0.8.0",
     "typescript": "^7.0.2",