@pantoken/scaffold 1.6.1 → 1.6.2

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-DBm3epYF.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-CZTIN6ue.mjs";
 import { readFileSync } from "node:fs";
 import { basename, join } from "node:path";
 import { Argument, Command, CommanderError, InvalidArgumentError } from "commander";

package/dist/index.mjs

@@ -1,2 +1 @@
-import { a as AGENT_TOOLS, c as themeStylesheetImport, i as scaffoldProject, l as validateThemeMode, n as isScaffoldPlatform, o as installAgentAssets, r as resolveScaffoldPlatform, s as ASSETS, t as SCAFFOLD_PLATFORMS, u as validateThemeVariant } from "./src-DBm3epYF.mjs";
-export { AGENT_TOOLS, ASSETS, SCAFFOLD_PLATFORMS, installAgentAssets, isScaffoldPlatform, resolveScaffoldPlatform, scaffoldProject, themeStylesheetImport, validateThemeMode, validateThemeVariant };
+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-CZTIN6ue.mjs";

package/dist/{src-DBm3epYF.mjs → src-CZTIN6ue.mjs}

@@ -736,10 +736,10 @@ 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`.\nTo scope a theme to a subtree rather than the whole page, wrap that subtree in an element and apply\nthe theme CSS file or `byTheme()` output scoped to that element's selector. Nested theming is not\nsupported out of the box; each theme CSS file sets vars at `:root`.\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` (extra components) 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 `card`, `banner`, `agent-shell`). Use alongside `@pantoken/components` for extra component patterns.\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- **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` (extra components like `card`, `banner`, `agent-shell`).\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- 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- 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- 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- 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- 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- 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",
+	"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`.\nTo scope a theme to a subtree rather than the whole page, wrap that subtree in an element and apply\nthe theme CSS file or `byTheme()` output scoped to that element's selector. Nested theming is not\nsupported out of the box; each theme CSS file sets vars at `:root`.\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- **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- 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- 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- 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- 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- 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- 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",
 	"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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoken/scaffold",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "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,21 +34,21 @@
     "commander": "^15.0.0"
   },
   "devDependencies": {
-    "@pantoken/angular": "0.2.0",
+    "@pantoken/angular": "0.2.3",
     "@pantoken/canvas-theme-editor": "0.3.1",
-    "@pantoken/components": "2.0.1",
+    "@pantoken/components": "2.1.0",
     "@pantoken/i18n-engine": "0.4.0",
-    "@pantoken/plugin-layouts": "0.5.2",
-    "@pantoken/react": "0.2.0",
-    "@pantoken/scaffold-base": "0.3.5",
-    "@pantoken/svelte": "0.2.0",
-    "@pantoken/vue": "0.2.0",
-    "@pantoken/web-components": "0.7.2",
-    "@types/node": "^26.6.3",
-    "bingo-stratum": "^0.6.3",
+    "@pantoken/plugin-layouts": "0.5.4",
+    "@pantoken/react": "0.2.2",
+    "@pantoken/scaffold-base": "0.3.7",
+    "@pantoken/svelte": "0.2.2",
+    "@pantoken/vue": "0.2.2",
+    "@pantoken/web-components": "0.7.4",
+    "@types/node": "^26.6.5",
+    "bingo-stratum": "^0.8.0",
     "typescript": "^7.0.2",
-    "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0-rc.0",
-    "vite-plus": "1.0.0-rc.0"
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.2.0",
+    "vite-plus": "1.2.0"
   },
   "engines": {
     "node": ">=22.18.0"