@pantoken/scaffold 1.7.0 → 1.7.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-BFD5BOAc.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-ma-OmnMk.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-BFD5BOAc.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-ma-OmnMk.mjs";

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

@@ -21,7 +21,7 @@ const SCAFFOLDS = {
 		".gitignore": "node_modules\ndist\n",
 		"README.md": "# {{projectName}}\n\nUpload-ready assets for Canvas LMS's **Theme Editor**, plus a local preview for authoring Rich\nContent Editor (RCE) page templates styled with\n[`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components).\n\n## What's here\n\n- `theme.css` / `theme.js` — upload these two files under **Theme Editor → Advanced** in Canvas.\n  They're built for the CDN provider/theme/mode you chose when scaffolding (`--cdn`/`--theme`/\n  `--theme-mode`; jsDelivr/rebrand/light by default) and include a loader for\n  `@pantoken/interactions` (wires up component behaviors like modal, tooltip, and drilldown).\n- `index.html` / `src/main.ts` — a local, TinyMCE-based editor (`npm run dev`) that mirrors Canvas's\n  RCE so you can author page templates against pantoken's classes before copying them into Canvas.\n  The page itself is built with pantoken's `wrapper` layout: click **Edit theme** to open a tray\n  with **Config** / **CSS** / **JS** tabs (CDN provider/theme/mode selects, and blank CSS/JS\n  editors for custom overrides that get appended to `theme.css`/`theme.js`), and the **?** button\n  for full instructions. Use the **Layouts** toolbar button to start from one of pantoken's bundled\n  starter page layouts (course home, header, footer, about me, syllabus, hero, callout, two-column,\n  rubric note, testimonial), sourced from\n  [`@pantoken/plugin-layouts`](https://www.npmjs.com/package/@pantoken/plugin-layouts).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\nThis opens a Vite dev server with:\n\n- An **editor** pane on top (TinyMCE, matching the version/config\n  [instructure/canvas-lms](https://github.com/instructure/canvas-lms) itself uses — see below),\n  styled live with the real CDN CSS for the chosen provider/theme/mode, so WYSIWYG editing looks\n  like the page will once uploaded to Canvas. Use the **Layouts** button to load one of the bundled\n  starter layouts (this replaces the whole document, after a confirm, rather than inserting at the\n  cursor), the **Accessibility** button to check common image, heading, table, link, and list\n  issues, and the **Source code** toggle to hand-edit the raw HTML in a syntax-highlighted\n  (CodeMirror) view alongside the editor, with the preview pane updating live as you type — unlike\n  TinyMCE's stock `code` plugin, which edits in a one-shot modal dialog with no live preview.\n  Also enabled: **Image** (URL-only — the Upload tab is hidden, so images are always linked, never\n  embedded as base64), **Fullscreen**, **Find and replace**, **Quickbars** (a contextual formatting\n  toolbar on text selection, an insert toolbar for images/tables/media/placeholders, and an\n  alignment/edit toolbar on selected images), **Word count** (status bar), **Autosave** (drafts\n  persist to the browser's `localStorage`), and **Presets** (explicit named snapshots).\n- A **preview** pane underneath, showing the editor's content with the current CSS/JS tab's\n  stylesheet/script applied plus CDN `<link>` tags or inlined styles for picker-inserted\n  icon/component assets, wrapped to match Canvas's own content-area background and max width — a faithful \"what\n  this will look like once uploaded to Canvas\" check, updated live as you type or edit the theme.\n  Use the preview footer's pop-out button to move the live preview into its own fullscreen window\n  while keeping only the editor in the original window. The popup's minimize button or browser\n  close button returns the preview to its previous row, column, or fullscreen position.\n- The **Edit theme** tray's **Config** tab holds the CDN provider/theme/mode selects and\n  **Download theme.css** / **Download theme.js** links; its **CSS**/**JS** tabs start blank —\n  anything you add there is appended to the generated `theme.css`/`theme.js`, both in the live\n  preview and in the downloaded files, so custom overrides survive Config select changes instead\n  of being regenerated away.\n- **Download HTML** saves the current normalized Canvas RCE fragment as `index.html`. **Download\n  package** saves `canvas-theme.zip`, containing that same `index.html` plus the current\n  `theme.css` and `theme.js`, including anything added in the CSS and JS tabs.\n\n### Provider and behavior options\n\n**None** embeds component CSS in `theme.css`. **Inline** uses `@pantoken/inline-styles` to add\nelement styles to the editor HTML, including source view and copied/downloaded content. Switching\nback preserves component classes, structure, and edits while removing generated inline declarations.\nInline exports resolved, light-only element styles and real static glyph markup. It doesn't need\n`theme.css` or `theme.js`; the preview deliberately loads neither. Include dark mode and Include\ninteractions are turned off and disabled in Inline, with their prior choices restored when leaving\nit. Packaged glyphs become PNG images, and missing custom fonts use the declared system fallbacks.\nCanvas can still filter HTML, data images, and CSS properties, so verify the saved page there.\n\n**Include interactions** defaults on. Turning it off omits Pantoken's behavior JavaScript from the\npreview and downloads and hides new component insertions that require it. Existing content remains.\nThe list uses the CDN picker's tiers: no-JS and JS-enhancement components remain available; only\nJS-requirement components are hidden.\nThe switch does not disable the editor's controls, custom JavaScript, or native browser behavior.\nInline is an exception: its portable preview and downloads omit custom JavaScript too, while the\nJS tab's authored text is preserved for other providers. CSS overrides participate in conversion.\n\n### Named presets\n\nThe TinyMCE **Presets** menu provides **Save**, **Save as...**, **Open...**, and **Delete...**. A\npreset captures the editor HTML together with the active theme, color scheme, light/adaptive mode,\nCDN provider, custom CSS, and custom JavaScript. Names are unique without regard to case; **Save\nas...** asks before replacing an existing name, and **Open...** asks before discarding changes made\nsince the last open or save. Deleting a preset does not clear the current working document.\n\nPresets and Autosave serve different purposes and use separate localStorage keys. Autosave remains\nshort-lived draft recovery; presets open only when selected and never replace an Autosave draft on\nreload. Both are local to this browser origin and are not uploaded or synchronized to Canvas.\nPrivate browsing, disabled storage, or storage quota limits can prevent a preset from being saved.\nPreset HTML, CSS, and JavaScript are trusted author input and are restored without sanitization.\n\n## Workflow\n\n1. Upload `theme.css` and `theme.js` to Canvas's Theme Editor (**Advanced → CSS / JavaScript**) so\n   pantoken's classes are available on every page. Download them individually from **Edit theme**,\n   or use **Download package** to get both files together with the page HTML.\n2. Run `npm run dev`, use **Layouts** to start from a bundled starter, and edit it like you\n   would in Canvas's own RCE.\n3. Click **Copy HTML** and paste the result into a Canvas page's RCE (switch to the HTML editor\n   view first), or use **Download HTML** to save the same fragment as `index.html`. Canvas sanitizes\n   pasted HTML server-side — this scaffold doesn't attempt to replicate that, so always verify the\n   pasted result in Canvas (see \"Notes on Canvas's RCE\" below).\n\nCopied HTML has one outer `<div data-pantoken-color=\"navy\">` wrapper. The color picker updates that\neditable attribute, and you can change it directly in the HTML source view to any supported color\nnamespace, such as `sea`. Keep the page content inside the wrapper so the uploaded `theme.css` can\nscope the selected color to that Canvas page.\n\nPick **Custom** to enter your own brand hex. The editor derives a full color scale from it, anchored\nat the step with the closest lightness, and writes that\nscale into the downloaded `theme.css`. A `theme.css` carries only one custom color, so every\n`data-pantoken-color=\"custom\"` wrapper on the account uses it.\n\nUse the **Placeholder image** button to insert a PNG from\n[`placehold.co`](https://placehold.co/) with custom dimensions, colors, visible text, and alt text.\nThe preview and the resulting Canvas page need network access to `https://placehold.co` to render\nthese images. The existing **Image** button remains available for other remote image URLs.\n\n### Class-aware editing commands\n\nThe editor enables `@pantoken/tinymce`'s content-classes plugin. Stock TinyMCE actions add the\nmatching pantoken classes to paragraphs, headings, inline links, images, alignment, lists, and\ntables. Existing classes are preserved, and repeated edits don't duplicate them. Placeholder and\nproduct-logo images also include `instui-img` directly.\n\nHosts that build their own Canvas-style toolbar can import `PANTOKEN_COMMANDS` from\n`@pantoken/tinymce` and pass those command names to their buttons. The aliases cover paragraph and\nH2-H6 formats, semantic `xs` through `xl` font sizes, inline formatting, colors, links, images,\nalignment, lists, and tables. Underline, arbitrary font/highlight colors, superscript, and\nsubscript retain TinyMCE's semantic elements or inline styles because pantoken doesn't define\nequivalent component modifiers.\n\n## Notes on Canvas's RCE\n\nThe Canvas Rich Content Editor runs TinyMCE and sanitizes submitted HTML on the server against an\nallowlist (`gems/canvas_sanitize` in canvas-lms, kept in sync with TinyMCE's own\n`valid_elements`/`extended_valid_elements`). What that allowlist means for templates built here:\n\n- `class`, `id`, `style`, `title`, `role`, and `aria-*` attributes are allowed on every element —\n  pantoken's `class=\"instui-*\"` styling hooks (and inline `style`, e.g. for CSS anchor positioning)\n  **do** survive being pasted and saved, contrary to older guidance in this file. `<script>` tags\n  are always stripped.\n- **RCE-safe pantoken components**: static/display components — alert, view, heading, text, table,\n  a button-as-`<a>` (not a real `<button>`), blockquote. Stick to semantic HTML pantoken already\n  supports (`div`, `p`, `span`, `a`, `img`, headings, lists, tables).\n- **RCE-unsafe**: anything from `@pantoken/interactions`'s behavior set — modal, tooltip,\n  drilldown, close-button, or any other component driven by the native `popover`/`popovertarget`/\n  `command`/`commandfor` attributes. Those attributes aren't in Canvas's sanitizer allowlist, so\n  the markup survives but the interactive behavior silently breaks the first time the page is\n  saved in Canvas, even with `theme.js`'s `@pantoken/interactions` loader present. Real form\n  elements (`input`, `form`, `button`, `select`, `textarea`, `label`) and inline `<svg>` are\n  stripped outright — none of the bundled starter templates use them.\n\n`theme.js` loads `@pantoken/interactions` from the CDN, which runs in Canvas's global page scope —\nuseful for interactions on pages you build directly in Canvas's RCE with raw HTML edits, but (per\nabove) any `popover`/`command`-attribute-driven markup pasted from the RCE preview here won't stay\ninteractive once saved.\n\n### Canvas-specific plugins intentionally left out\n\nCanvas's own RCE also ships an accessibility checker\n([`tinymce-a11y-checker`](https://github.com/instructure/canvas-lms/tree/master/packages/canvas-rce/src/rce/plugins/tinymce-a11y-checker))\nand a LaTeX equation editor\n([`instructure_equation`](https://github.com/instructure/canvas-lms/tree/master/packages/canvas-rce/src/rce/plugins/instructure_equation)).\nThe Canvas implementations are not included here because they are deeply coupled to canvas-rce's\ninternals (React, roughly a dozen `@instructure/ui-*` packages, Redux, the mathlive/KaTeX math\neditor, and canvas-rce's own `Bridge` singleton). This scaffold does include pantoken's standalone,\nReact-free accessibility checker as the **Accessibility** toolbar button; it checks common image,\nheading, table, link, and list issues without depending on Canvas's RCE internals. Follow the linked\nsource if you need Canvas's full tray UI or equation editor.\n",
 		"index.html": "<!doctype html>\n<html lang=\"{{locale}}\" dir=\"{{dir}}\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <meta name=\"theme-color\" content=\"#f5f5f5\" />\n    <meta name=\"color-scheme\" content=\"light dark\" />\n    <meta name=\"application-name\" content=\"Canvas Theme Editor\" />\n    <link rel=\"icon\" href=\"/icon.svg\" type=\"image/svg+xml\" data-pantoken-themed-icon />\n    <link rel=\"manifest\" href=\"/manifest.webmanifest\" />\n    <title>Canvas Theme Editor</title>\n  </head>\n  <body class=\"instui-display-flex\">\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/src/main.ts\"><\/script>\n  </body>\n</html>\n",
-		"package.json": "{\n  \"name\": \"{{projectName}}\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\"\n  },\n  \"dependencies\": {\n    \"@pantoken/canvas-theme-editor\": \"latest\",\n    \"@pantoken/cdn\": \"latest\",\n    \"@pantoken/components\": \"latest\",\n    \"@pantoken/css\": \"latest\",\n    \"@pantoken/inline-styles\": \"latest\",\n    \"@pantoken/interactions\": \"latest\",\n    \"@pantoken/plugin-custom-components\": \"latest\",\n    \"@pantoken/plugin-custom-icons\": \"latest\",\n    \"@pantoken/plugin-custom-theme-colors\": \"latest\",\n    \"@pantoken/plugin-layouts\": \"latest\",\n    \"@pantoken/plugin-logos\": \"latest\",\n    \"@pantoken/plugin-lucide-lab\": \"latest\",\n    \"@pantoken/plugin-simple-icons\": \"latest\",\n    \"@pantoken/tinymce\": \"latest\",\n    \"@pantoken/tinymce-a11y\": \"latest\",\n    \"@pantoken/tinymce-codemirror\": \"latest\",\n    \"@pantoken/tinymce-placehold\": \"latest\",\n    \"@pantoken/tinymce-save\": \"latest\",\n    \"fflate\": \"catalog:\",\n    \"lucide\": \"latest\"\n  },\n  \"devDependencies\": {\n    \"@codemirror/lang-css\": \"catalog:\",\n    \"@codemirror/lang-html\": \"catalog:\",\n    \"@codemirror/lang-javascript\": \"catalog:\",\n    \"codemirror\": \"catalog:\",\n    \"tinymce\": \"catalog:\",\n    \"tinymce-i18n\": \"26.9.21\",\n    \"typescript\": \"^7.0.2\",\n    \"vite\": \"^8.2.2\"\n  },\n  \"allowScripts\": {\n    \"core-js\": true,\n    \"fsevents\": true,\n    \"ttf2woff2\": true\n  },\n  \"trustedDependencies\": [\n    \"core-js\",\n    \"fsevents\",\n    \"ttf2woff2\"\n  ]\n}\n",
+		"package.json": "{\n  \"name\": \"{{projectName}}\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\"\n  },\n  \"dependencies\": {\n    \"@pantoken/canvas-theme-editor\": \"latest\",\n    \"@pantoken/cdn\": \"latest\",\n    \"@pantoken/components\": \"latest\",\n    \"@pantoken/css\": \"latest\",\n    \"@pantoken/inline-styles\": \"latest\",\n    \"@pantoken/interactions\": \"latest\",\n    \"@pantoken/plugin-custom-components\": \"latest\",\n    \"@pantoken/plugin-custom-icons\": \"latest\",\n    \"@pantoken/plugin-custom-theme-colors\": \"latest\",\n    \"@pantoken/plugin-layouts\": \"latest\",\n    \"@pantoken/plugin-logos\": \"latest\",\n    \"@pantoken/plugin-lucide-lab\": \"latest\",\n    \"@pantoken/plugin-simple-icons\": \"latest\",\n    \"@pantoken/tinymce\": \"latest\",\n    \"@pantoken/tinymce-a11y\": \"latest\",\n    \"@pantoken/tinymce-codemirror\": \"latest\",\n    \"@pantoken/tinymce-placehold\": \"latest\",\n    \"@pantoken/tinymce-save\": \"latest\",\n    \"fflate\": \"catalog:\",\n    \"lucide\": \"latest\"\n  },\n  \"devDependencies\": {\n    \"@codemirror/lang-css\": \"catalog:\",\n    \"@codemirror/lang-html\": \"catalog:\",\n    \"@codemirror/lang-javascript\": \"catalog:\",\n    \"codemirror\": \"catalog:\",\n    \"tinymce\": \"catalog:\",\n    \"tinymce-i18n\": \"26.11.2\",\n    \"typescript\": \"^7.0.2\",\n    \"vite\": \"^8.2.2\"\n  },\n  \"allowScripts\": {\n    \"core-js\": true,\n    \"fsevents\": true,\n    \"ttf2woff2\": true\n  },\n  \"trustedDependencies\": [\n    \"core-js\",\n    \"fsevents\",\n    \"ttf2woff2\"\n  ]\n}\n",
 		"pnpm-workspace.yaml": "# core-js/fsevents/ttf2woff2 arrive transitively; pre-approve their install scripts\n# so `pnpm install` doesn't fail/warn under pnpm's default strictDepBuilds gate.\nallowBuilds:\n  core-js: true\n  fsevents: true\n  ttf2woff2: true\n# @pantoken/tokens pulls in a git-resolved upstream dependency several levels deep; pnpm's default\n# blockExoticSubdeps gate otherwise fails the install with ERR_PNPM_EXOTIC_SUBDEP.\nblockExoticSubdeps: false\n",
 		"tsconfig.json": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"types\": [\"vite/client\"],\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"noEmit\": true\n  },\n  \"include\": [\"src\"]\n}\n",
 		"vite.config.ts": "import { defineConfig } from \"vite\";\n\nexport default defineConfig({});\n",
@@ -739,10 +739,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` (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",
+	"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",
 	"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.7.0",
+  "version": "1.7.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,16 +34,16 @@
     "commander": "^15.0.0"
   },
   "devDependencies": {
-    "@pantoken/angular": "0.2.4",
+    "@pantoken/angular": "0.2.7",
     "@pantoken/canvas-theme-editor": "0.3.2",
-    "@pantoken/components": "2.1.1",
-    "@pantoken/i18n-engine": "0.4.0",
-    "@pantoken/plugin-layouts": "0.5.5",
-    "@pantoken/react": "0.2.3",
-    "@pantoken/scaffold-base": "0.3.8",
-    "@pantoken/svelte": "0.2.3",
-    "@pantoken/vue": "0.2.3",
-    "@pantoken/web-components": "0.7.5",
+    "@pantoken/components": "2.2.1",
+    "@pantoken/i18n-engine": "0.4.1",
+    "@pantoken/plugin-layouts": "0.5.8",
+    "@pantoken/react": "0.3.0",
+    "@pantoken/scaffold-base": "0.3.11",
+    "@pantoken/svelte": "0.3.0",
+    "@pantoken/vue": "0.3.0",
+    "@pantoken/web-components": "0.8.1",
     "@types/node": "^26.6.5",
     "bingo-stratum": "^0.8.0",
     "typescript": "^7.0.2",