@pantoken/scaffold 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.d.mts +23 -4
- package/dist/cli.mjs +168 -19
- package/dist/{index-D2-Dhvt8.d.mts → index-rJolJRZa.d.mts} +32 -16
- package/dist/index.d.mts +2 -2
- package/dist/index.mjs +2 -2
- package/dist/{src-DxBSPAO9.mjs → src-diIfZCKN.mjs} +232 -67
- package/package.json +12 -12
|
@@ -1,13 +1,5 @@
|
|
|
1
1
|
import { mkdirSync, writeFileSync } from "node:fs";
|
|
2
2
|
import { dirname, join } from "node:path";
|
|
3
|
-
import { producePreset } from "bingo-stratum";
|
|
4
|
-
import { buildTheme } from "@pantoken/canvas-theme-editor";
|
|
5
|
-
import { presetComponents } from "@pantoken/components/scaffold-preset";
|
|
6
|
-
import { presetReact } from "@pantoken/react/scaffold-preset";
|
|
7
|
-
import { presetVue } from "@pantoken/vue/scaffold-preset";
|
|
8
|
-
import { presetWebComponents } from "@pantoken/web-components/scaffold-preset";
|
|
9
|
-
import { presetAngular } from "@pantoken/angular/scaffold-preset";
|
|
10
|
-
import { presetSvelte } from "@pantoken/svelte/scaffold-preset";
|
|
11
3
|
import { InvalidArgumentError } from "commander";
|
|
12
4
|
//#region generated/scaffolds.ts
|
|
13
5
|
const SCAFFOLDS = {
|
|
@@ -15,8 +7,8 @@ const SCAFFOLDS = {
|
|
|
15
7
|
".gitignore": "node_modules\ndist\n",
|
|
16
8
|
"README.md": "# {{projectName}}\n\nA standalone Angular app (via Vite + `@analogjs/vite-plugin-angular`, no Angular CLI) styled with\n[`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components) and\n[`@pantoken/angular`](https://www.npmjs.com/package/@pantoken/angular) (pantoken custom elements\nfor Angular).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` calls `registerPantokenElements()` (from `@pantoken/angular`) once at bootstrap so\n elements like `<instui-icon>` work in templates, and imports the token/component CSS plus\n `@pantoken/interactions` (wires up modal, tooltip, and other component behaviors out of the\n box).\n- `src/app.component.ts` is a standalone component (`CUSTOM_ELEMENTS_SCHEMA` lets the template\n compiler accept pantoken's custom element tags) whose template is styled with `instui-*`\n classes; optional insertion points (header, filters, content, trailing) are marked with\n `<div data-slot=\"...\">`.\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.app/api/css) for the full class list.\n\n## Learn more\n\nSee the [getting started guide](https://pantoken.app/guide/getting-started) to learn more.\n",
|
|
17
9
|
"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 <title>{{projectName}}</title>\n </head>\n <body class=\"instui-display-flex\">\n <app-root></app-root>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
18
|
-
"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 \"@angular/common\": \"^22.1.3\",\n \"@angular/compiler\": \"^22.1.3\",\n \"@angular/core\": \"^22.1.3\",\n \"@angular/platform-browser\": \"^22.1.3\",\n \"@pantoken/angular\": \"latest\",\n \"@pantoken/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\",\n \"rxjs\": \"^7.8.2\",\n \"zone.js\": \"^0.16.2\"\n },\n \"devDependencies\": {\n \"@analogjs/vite-plugin-angular\": \"^2.7.0\",\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n },\n \"allowScripts\": {\n \"core-js\": true,\n \"ttf2woff2\": true\n },\n \"trustedDependencies\": [\n \"core-js\",\n \"ttf2woff2\"\n ]\n}\n",
|
|
19
|
-
"pnpm-workspace.yaml": "# core-js/ttf2woff2 arrive transitively
|
|
10
|
+
"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 \"@angular/common\": \"^22.1.3\",\n \"@angular/compiler\": \"^22.1.3\",\n \"@angular/core\": \"^22.1.3\",\n \"@angular/platform-browser\": \"^22.1.3\",\n \"@pantoken/angular\": \"latest\",\n \"@pantoken/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\",\n \"rxjs\": \"^7.8.2\",\n \"zone.js\": \"^0.16.2\"\n },\n \"devDependencies\": {\n \"@analogjs/vite-plugin-angular\": \"^2.7.0\",\n \"@pantoken/pantoken\": \"latest\",\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",
|
|
11
|
+
"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",
|
|
20
12
|
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"experimentalDecorators\": true,\n \"useDefineForClassFields\": false,\n \"types\": [\"vite/client\"],\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
21
13
|
"vite.config.ts": "import angular from \"@analogjs/vite-plugin-angular\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n plugins: [angular()],\n});\n",
|
|
22
14
|
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\", \"angular.ng-template\"]\n}\n",
|
|
@@ -29,8 +21,8 @@ const SCAFFOLDS = {
|
|
|
29
21
|
".gitignore": "node_modules\ndist\n",
|
|
30
22
|
"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 syntax-highlighted,\n hand-editable copies of `theme.css`/`theme.js` that feed the live preview), and the **?** button\n for full instructions. Use the **Layouts** toolbar button to start from one of pantoken's bundled\n starter page layouts (hero, callout, two-column, 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 (TinyMCE, matching the version/config\n [instructure/canvas-lms](https://github.com/instructure/canvas-lms) itself uses — see below).\n Use the **Layouts** button to load one of the bundled starter layouts (this replaces the whole\n document, after a confirm, rather than inserting at the cursor), and the **Source code** toggle\n to hand-edit the raw HTML in a syntax-highlighted (CodeMirror) view alongside the editor, with\n the preview pane updating live as you type — unlike TinyMCE's stock `code` plugin, which edits in\n a one-shot modal dialog with no live preview.\n- A **preview** pane showing the editor's content with the current CSS/JS tab's stylesheet/script\n applied (not just the resolved CDN URLs), wrapped to match Canvas's own content-area background\n and max width — a faithful \"what this will look like once uploaded to Canvas\" check, updated\n live as you type or edit the theme.\n- The editor and preview panes sit in a split view you can resize by dragging the divider, stack\n vertically instead of side by side, and swap the order of (drag a pane's toolbar onto the other,\n or use the **Swap panes** button). Each pane has its own fullscreen button.\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 are editable copies\n of the generated files — hand-edit them and the preview picks up your changes directly. Changing\n a Config select re-generates the CSS/JS tabs unless you've already edited them, in which case a\n **Regenerate from config** button appears instead of silently overwriting your edit.\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.\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). Canvas sanitizes pasted HTML server-side — this scaffold doesn't attempt to\n replicate that, so always verify the pasted result in Canvas (see \"Notes on Canvas's RCE\"\n below).\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",
|
|
31
23
|
"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 <title>{{projectName}} — RCE template authoring</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",
|
|
32
|
-
"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/plugin-layouts\": \"latest\",\n \"@pantoken/tinymce\": \"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 \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n },\n \"allowScripts\": {\n \"core-js\": true,\n \"ttf2woff2\": true\n },\n \"trustedDependencies\": [\n \"core-js\",\n \"ttf2woff2\"\n ]\n}\n",
|
|
33
|
-
"pnpm-workspace.yaml": "# core-js/ttf2woff2 arrive transitively
|
|
24
|
+
"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/plugin-layouts\": \"latest\",\n \"@pantoken/tinymce\": \"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 \"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",
|
|
25
|
+
"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",
|
|
34
26
|
"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",
|
|
35
27
|
"vite.config.ts": "import { defineConfig } from \"vite\";\n\nexport default defineConfig({});\n",
|
|
36
28
|
"src/app.css": "/* Layout for this scaffold's own authoring UI (not part of any Canvas-pasted RCE content). */\n\n.instui-tray .list {\n display: flex;\n gap: 0.5rem;\n}\n\n.instui-tray .panel[hidden] {\n display: none;\n}\n\n.code-editor {\n border: var(--instui-component-tray-border-width, 1px) solid\n var(--instui-component-tray-border-color, #ccc);\n min-height: 20rem;\n}\n\n.split-pane {\n display: flex;\n flex-direction: row;\n gap: 0;\n min-height: 30rem;\n}\n\n.split-pane.-orientation-column {\n flex-direction: column;\n}\n\n.pane {\n flex: 1 1 50%;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.pane:fullscreen {\n padding: 1rem;\n background: var(--instui-background-color-page, #fff);\n}\n\n.pane-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n /* Also the drag handle for reordering panes (not resizing — see .split-handle for that). */\n cursor: grab;\n}\n\n.pane-toolbar.-dragging {\n cursor: grabbing;\n opacity: 0.6;\n}\n\n.pane.-drop-target {\n outline: 2px dashed var(--instui-color-stroke-brand, #0374b5);\n}\n\n#editor,\n#css-editor,\n#js-editor,\n#preview {\n flex: 1 1 auto;\n min-height: 0;\n width: 100%;\n}\n\n#preview {\n border: 1px solid #ccc;\n}\n\n.split-handle {\n flex: 0 0 0.375rem;\n cursor: col-resize;\n background: var(--instui-color-stroke-base, #d3d3d3);\n}\n\n.split-pane.-orientation-column > .split-handle {\n cursor: row-resize;\n}\n\n.split-handle:hover,\n.split-handle.-dragging {\n background: var(--instui-color-stroke-brand, #0374b5);\n}\n",
|
|
@@ -43,8 +35,8 @@ const SCAFFOLDS = {
|
|
|
43
35
|
".gitignore": "node_modules\ndist\n",
|
|
44
36
|
"README.md": "# {{projectName}}\n\nA plain TypeScript app (via Vite) styled with\n[`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components), Instructure's\ndesign tokens and icons.\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `index.html` holds the actual page markup — a `wrapper`-layout shell from\n [`@pantoken/plugin-layouts`](https://www.npmjs.com/package/@pantoken/plugin-layouts). View source\n and edit it directly; nothing is injected by JavaScript.\n- `src/main.ts` imports `@pantoken/css` (defines every `--instui-*` custom property),\n `@pantoken/components/base.css` (document defaults + focus ring), `components.css`\n (`.instui-*` classes), `@pantoken/interactions` (wires up modal, tooltip, and other component\n behaviors out of the box), and your own `src/style.css` — add interactive behavior here.\n- Optional insertion points (header, filters, content, trailing) are marked with\n `<div data-slot=\"...\">` in `index.html` — replace their contents with your own markup.\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.app/api/css) for the full class list.\n\n## Learn more\n\nSee the [HTML guide](https://pantoken.app/guide/components) to learn more.\n",
|
|
45
37
|
"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 <title>{{projectName}}</title>\n </head>\n <body class=\"instui-display-flex\">\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code>.\n </div>\n </div>\n <div data-slot=\"header\"></div> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <div data-slot=\"filters\"></div>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <div class=\"main\" data-slot=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </div>\n <div class=\"trailing\" data-slot=\"trailing\"></div> <!-- optional -->\n </div>\n </div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
46
|
-
"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/components\": \"latest\",\n \"@pantoken/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n },\n \"allowScripts\": {\n \"core-js\": true,\n \"ttf2woff2\": true\n },\n \"trustedDependencies\": [\n \"core-js\",\n \"ttf2woff2\"\n ]\n}\n",
|
|
47
|
-
"pnpm-workspace.yaml": "# core-js/ttf2woff2 arrive transitively
|
|
38
|
+
"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/components\": \"latest\",\n \"@pantoken/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\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",
|
|
39
|
+
"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",
|
|
48
40
|
"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 },\n \"include\": [\"src\"]\n}\n",
|
|
49
41
|
"vite.config.ts": "import { defineConfig } from \"vite\";\n\nexport default defineConfig({});\n",
|
|
50
42
|
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
@@ -57,8 +49,8 @@ const SCAFFOLDS = {
|
|
|
57
49
|
".gitignore": "node_modules\n.next\n",
|
|
58
50
|
"README.md": "# {{projectName}}\n\nA Next.js (App Router) app styled with [`@pantoken/next`](https://www.npmjs.com/package/@pantoken/next),\nInstructure's design tokens and icons.\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `next.config.mjs` wraps the config with `withPantoken(...)` (adds pantoken to\n `transpilePackages`).\n- `app/layout.tsx` imports `@pantoken/css`, which defines every `--instui-*` custom\n property, at the root so it's available on every page, plus the `wrapper` layout's root class on\n `<body>` and `PantokenInteractions` (a client component that loads `@pantoken/interactions` —\n wires up modal, tooltip, and other component behaviors out of the box).\n- `app/page.tsx` renders markup styled with `instui-*` classes; optional insertion points (header,\n filters, content, trailing) are marked with `<div data-slot=\"...\">`.\n\n## Learn more\n\nSee the [getting started guide](https://pantoken.app/guide/getting-started) to learn more.\n",
|
|
59
51
|
"next.config.mjs": "import { withPantoken } from \"@pantoken/next\";\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {};\n\nexport default withPantoken(nextConfig);\n",
|
|
60
|
-
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n },\n \"dependencies\": {\n \"@pantoken/interactions\": \"latest\",\n \"@pantoken/next\": \"latest\",\n \"next\": \"^16.2.11\",\n \"react\": \"^19.2.8\",\n \"react-dom\": \"^19.2.8\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\"\n },\n \"allowScripts\": {\n \"core-js\": true,\n \"ttf2woff2\": true\n },\n \"trustedDependencies\": [\n \"core-js\",\n \"ttf2woff2\"\n ]\n}\n",
|
|
61
|
-
"pnpm-workspace.yaml": "# core-js/ttf2woff2 arrive transitively
|
|
52
|
+
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n },\n \"dependencies\": {\n \"@pantoken/interactions\": \"latest\",\n \"@pantoken/next\": \"latest\",\n \"next\": \"^16.2.11\",\n \"react\": \"^19.2.8\",\n \"react-dom\": \"^19.2.8\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.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",
|
|
53
|
+
"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",
|
|
62
54
|
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"jsx\": \"preserve\",\n \"strict\": true,\n \"skipLibCheck\": true,\n \"plugins\": [{ \"name\": \"next\" }]\n },\n \"include\": [\"app\", \"next-env.d.ts\"]\n}\n",
|
|
63
55
|
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
64
56
|
".vscode/settings.json": "{\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",
|
|
@@ -71,8 +63,8 @@ const SCAFFOLDS = {
|
|
|
71
63
|
".gitignore": "node_modules\ndist\n",
|
|
72
64
|
"README.md": "# {{projectName}}\n\nA Vite + React app styled with [`@pantoken/react`](https://www.npmjs.com/package/@pantoken/react)\nand [`@pantoken/css`](https://www.npmjs.com/package/@pantoken/css), Instructure's design tokens and\nicons.\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.tsx` imports `@pantoken/css` (defines every `--instui-*` custom property) and\n `@pantoken/interactions` (wires up modal, tooltip, and other component behaviors out of the\n box).\n- `src/App.tsx` renders markup styled with `instui-*` classes; optional insertion points (header,\n filters, content, trailing) are marked with `<div data-slot=\"...\">`.\n- For InstUI's full React component library (buttons, modals, etc. — including `@pantoken/react`'s\n `<Icon>`), add the specific `@instructure/ui-*` packages you need — see <https://instructure.design>.\n\n## Learn more\n\nSee the [getting started guide](https://pantoken.app/guide/getting-started) to learn more.\n",
|
|
73
65
|
"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 <title>{{projectName}}</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"><\/script>\n </body>\n</html>\n",
|
|
74
|
-
"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/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\",\n \"@pantoken/react\": \"latest\",\n \"react\": \"^19.2.8\",\n \"react-dom\": \"^19.2.8\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@types/react\": \"^19.2.18\",\n \"@types/react-dom\": \"^19.2.5\",\n \"@vitejs/plugin-react\": \"^6.1.0\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n },\n \"allowScripts\": {\n \"core-js\": true,\n \"ttf2woff2\": true\n },\n \"trustedDependencies\": [\n \"core-js\",\n \"ttf2woff2\"\n ]\n}\n",
|
|
75
|
-
"pnpm-workspace.yaml": "# core-js/ttf2woff2 arrive transitively
|
|
66
|
+
"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/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\",\n \"@pantoken/react\": \"latest\",\n \"react\": \"^19.2.8\",\n \"react-dom\": \"^19.2.8\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@types/react\": \"^19.2.18\",\n \"@types/react-dom\": \"^19.2.5\",\n \"@vitejs/plugin-react\": \"^6.1.0\",\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",
|
|
67
|
+
"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",
|
|
76
68
|
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"jsx\": \"react-jsx\",\n \"types\": [\"vite/client\"],\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
77
69
|
"vite.config.ts": "import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n plugins: [react()],\n});\n",
|
|
78
70
|
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
@@ -85,8 +77,8 @@ const SCAFFOLDS = {
|
|
|
85
77
|
".gitignore": "node_modules\ndist\n",
|
|
86
78
|
"README.md": "# {{projectName}}\n\nA Vite + Svelte app styled with [`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components)\nand [`@pantoken/svelte`](https://www.npmjs.com/package/@pantoken/svelte) (icon action + token reads).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` calls `register()` (from `@pantoken/svelte`) once at bootstrap so elements like\n `<instui-icon>` work in templates, and imports the token CSS plus `@pantoken/interactions`\n (wires up modal, tooltip, and other component behaviors out of the box).\n- `src/App.svelte`'s markup is styled with `instui-*` classes; optional insertion points (header,\n filters, content, trailing) are marked with `<div data-slot=\"...\">`.\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.app/api/css) for the full class list.\n\n## Learn more\n\nSee the [getting started guide](https://pantoken.app/guide/getting-started) to learn more.\n",
|
|
87
79
|
"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 <title>{{projectName}}</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
88
|
-
"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/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\",\n \"@pantoken/svelte\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@sveltejs/vite-plugin-svelte\": \"^7.3.0\",\n \"svelte\": \"^5.56.10\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n },\n \"allowScripts\": {\n \"core-js\": true,\n \"ttf2woff2\": true\n },\n \"trustedDependencies\": [\n \"core-js\",\n \"ttf2woff2\"\n ]\n}\n",
|
|
89
|
-
"pnpm-workspace.yaml": "# core-js/ttf2woff2 arrive transitively
|
|
80
|
+
"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/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\",\n \"@pantoken/svelte\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@sveltejs/vite-plugin-svelte\": \"^7.3.0\",\n \"svelte\": \"^5.56.10\",\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",
|
|
81
|
+
"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",
|
|
90
82
|
"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 },\n \"include\": [\"src\"]\n}\n",
|
|
91
83
|
"vite.config.ts": "import { defineConfig } from \"vite\";\nimport { svelte } from \"@sveltejs/vite-plugin-svelte\";\n\nexport default defineConfig({\n plugins: [svelte()],\n});\n",
|
|
92
84
|
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\", \"svelte.svelte-vscode\"]\n}\n",
|
|
@@ -99,8 +91,8 @@ const SCAFFOLDS = {
|
|
|
99
91
|
".gitignore": "node_modules\ndist\n",
|
|
100
92
|
"README.md": "# {{projectName}}\n\nA Vite + Vue 3 app styled with [`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components)\nand [`@pantoken/vue`](https://www.npmjs.com/package/@pantoken/vue) (the pantoken Vue plugin).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` calls `app.use(PantokenVue)` (from `@pantoken/vue`) so elements like\n `<instui-icon>` work in templates, and imports the token CSS plus `@pantoken/interactions`\n (wires up modal, tooltip, and other component behaviors out of the box).\n- `src/App.vue`'s template is styled with `instui-*` classes; optional insertion points (header,\n filters, content, trailing) are marked with `<div data-slot=\"...\">`.\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.app/api/css) for the full class list.\n\n## Learn more\n\nSee the [getting started guide](https://pantoken.app/guide/getting-started) to learn more.\n",
|
|
101
93
|
"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 <title>{{projectName}}</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
102
|
-
"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/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\",\n \"@pantoken/vue\": \"latest\",\n \"vue\": \"^3.5.41\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@vitejs/plugin-vue\": \"^6.0.8\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\",\n \"vue-tsc\": \"^3.3.11\"\n },\n \"allowScripts\": {\n \"core-js\": true,\n \"ttf2woff2\": true\n },\n \"trustedDependencies\": [\n \"core-js\",\n \"ttf2woff2\"\n ]\n}\n",
|
|
103
|
-
"pnpm-workspace.yaml": "# core-js/ttf2woff2 arrive transitively
|
|
94
|
+
"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/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\",\n \"@pantoken/vue\": \"latest\",\n \"vue\": \"^3.5.41\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@vitejs/plugin-vue\": \"^6.0.8\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\",\n \"vue-tsc\": \"^3.3.11\"\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",
|
|
95
|
+
"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",
|
|
104
96
|
"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 },\n \"include\": [\"src\"]\n}\n",
|
|
105
97
|
"vite.config.ts": "import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({\n plugins: [vue()],\n});\n",
|
|
106
98
|
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\", \"Vue.volar\"]\n}\n",
|
|
@@ -113,8 +105,8 @@ const SCAFFOLDS = {
|
|
|
113
105
|
".gitignore": "node_modules\ndist\n",
|
|
114
106
|
"README.md": "# {{projectName}}\n\nA plain TypeScript app (via Vite) styled with\n[`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components) and using\nframework-agnostic custom elements from\n[`@pantoken/web-components`](https://www.npmjs.com/package/@pantoken/web-components).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` imports `@pantoken/css` (defines every `--instui-*` custom property),\n `@pantoken/components/base.css` + `components.css` (`.instui-*` classes),\n `@pantoken/interactions` (wires up modal, tooltip, and other component behaviors out of the\n box), and `@pantoken/web-components` (auto-registers elements like `<instui-icon>`), then\n renders markup into `#app`.\n- Optional insertion points (header, filters, content, trailing) are marked with\n `<div data-slot=\"...\">` — replace their contents with your own markup.\n- Use custom elements directly in markup, e.g. `<instui-button>`, `<instui-alert variant=\"success\">` —\n see the [`@pantoken/web-components` README](https://www.npmjs.com/package/@pantoken/web-components)\n for the full element list.\n\n## Learn more\n\nSee the [HTML guide](https://pantoken.app/guide/components) to learn more.\n",
|
|
115
107
|
"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 <title>{{projectName}}</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",
|
|
116
|
-
"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/components\": \"latest\",\n \"@pantoken/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\",\n \"@pantoken/web-components\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n },\n \"allowScripts\": {\n \"core-js\": true,\n \"ttf2woff2\": true\n },\n \"trustedDependencies\": [\n \"core-js\",\n \"ttf2woff2\"\n ]\n}\n",
|
|
117
|
-
"pnpm-workspace.yaml": "# core-js/ttf2woff2 arrive transitively
|
|
108
|
+
"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/components\": \"latest\",\n \"@pantoken/css\": \"latest\",\n \"@pantoken/interactions\": \"latest\",\n \"@pantoken/web-components\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\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",
|
|
109
|
+
"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",
|
|
118
110
|
"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 },\n \"include\": [\"src\"]\n}\n",
|
|
119
111
|
"vite.config.ts": "import { defineConfig } from \"vite\";\n\nexport default defineConfig({});\n",
|
|
120
112
|
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
@@ -567,19 +559,6 @@ const SCAFFOLD_OVERLAYS = {
|
|
|
567
559
|
}
|
|
568
560
|
};
|
|
569
561
|
//#endregion
|
|
570
|
-
//#region generated/preset-ledger.ts
|
|
571
|
-
/**
|
|
572
|
-
* Registry of all available pantoken scaffold presets, keyed by platform name.
|
|
573
|
-
*/
|
|
574
|
-
const PRESET_LEDGER = {
|
|
575
|
-
"components": presetComponents,
|
|
576
|
-
"react": presetReact,
|
|
577
|
-
"vue": presetVue,
|
|
578
|
-
"web-components": presetWebComponents,
|
|
579
|
-
"angular": presetAngular,
|
|
580
|
-
"svelte": presetSvelte
|
|
581
|
-
};
|
|
582
|
-
//#endregion
|
|
583
562
|
//#region generated/locale-registry.ts
|
|
584
563
|
/** Text direction per supported BCP47 tag; its keys are the tags `--lang` accepts. */
|
|
585
564
|
const LOCALE_DIRS = {
|
|
@@ -762,17 +741,140 @@ function validateThemeMode(value) {
|
|
|
762
741
|
throw new InvalidArgumentError(`Theme mode "${value}" is not valid. Expected one of: ${THEME_MODES.join(", ")}.`);
|
|
763
742
|
}
|
|
764
743
|
//#endregion
|
|
744
|
+
//#region generated/assets.ts
|
|
745
|
+
const ASSETS = {
|
|
746
|
+
"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## 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**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>`.\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- **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",
|
|
747
|
+
"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`, `initInPlaceEdit`, `initCloseButton`; IIFE entry points for CDN.\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\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",
|
|
748
|
+
"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- 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`, `initInPlaceEdit`, `initCloseButton`).\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- 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",
|
|
749
|
+
"copilot": "# pantoken (Instructure design tokens & icons)\n\nWhen styling this project, use pantoken components, icons and tokens.\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`, `initInPlaceEdit`, `initCloseButton`).\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- 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",
|
|
750
|
+
"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- 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- InstUI React components: `@instructure/ui-*`. pantoken is the token/icon layer.\n",
|
|
751
|
+
"initSkill": "---\nname: init-pantoken\ndescription: Install pantoken's agent assets (AGENTS.md, llms.txt, editor/agent rule files, and the create-pantoken-app skill) 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` skill.\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 the\n`create-pantoken-app` skill (or run `npx pantoken-ai scaffold <platform>` directly) to scaffold a\nnew project or wire pantoken into an existing one.\n",
|
|
752
|
+
"createAppSkill": "---\nname: create-pantoken-app\ndescription: Scaffold a new project, or add Instructure design tokens and icons (pantoken) to an existing one. Use when the user wants to start a new app with pantoken already wired in, or wants to add Instructure/Canvas theming, InstUI design tokens, or the pantoken packages to an existing app — detects the framework, installs the right @pantoken/* packages, and wires the token CSS.\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\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\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"
|
|
753
|
+
};
|
|
754
|
+
//#endregion
|
|
755
|
+
//#region src/agent-assets.ts
|
|
756
|
+
/**
|
|
757
|
+
* AI/editor agent assets (AGENTS.md, llms.txt, Cursor/Copilot/Windsurf rules, Claude skills) for
|
|
758
|
+
* projects that *use* pantoken. Moved here from `@pantoken/ai` so the base scaffold flow can offer
|
|
759
|
+
* them directly, without `@pantoken/ai` depending back on `@pantoken/scaffold` (that dependency
|
|
760
|
+
* already runs the other way).
|
|
761
|
+
*
|
|
762
|
+
* @module
|
|
763
|
+
* @alpha
|
|
764
|
+
*/
|
|
765
|
+
/** Where each tool's asset(s) are written, relative to the target directory. */
|
|
766
|
+
const TARGETS = {
|
|
767
|
+
agents: [{
|
|
768
|
+
file: "AGENTS.md",
|
|
769
|
+
content: ASSETS.agents
|
|
770
|
+
}],
|
|
771
|
+
llms: [{
|
|
772
|
+
file: "llms.txt",
|
|
773
|
+
content: ASSETS.llms
|
|
774
|
+
}],
|
|
775
|
+
cursor: [{
|
|
776
|
+
file: ".cursor/rules/pantoken.mdc",
|
|
777
|
+
content: ASSETS.cursor
|
|
778
|
+
}],
|
|
779
|
+
copilot: [{
|
|
780
|
+
file: ".github/copilot-instructions.md",
|
|
781
|
+
content: ASSETS.copilot
|
|
782
|
+
}],
|
|
783
|
+
windsurf: [{
|
|
784
|
+
file: ".windsurf/rules/pantoken.md",
|
|
785
|
+
content: ASSETS.windsurf
|
|
786
|
+
}],
|
|
787
|
+
claude: [
|
|
788
|
+
{
|
|
789
|
+
file: ".claude/skills/init-pantoken/SKILL.md",
|
|
790
|
+
content: ASSETS.initSkill
|
|
791
|
+
},
|
|
792
|
+
{
|
|
793
|
+
file: ".claude/skills/create-pantoken-app/SKILL.md",
|
|
794
|
+
content: ASSETS.createAppSkill
|
|
795
|
+
},
|
|
796
|
+
{
|
|
797
|
+
file: "AGENTS.md",
|
|
798
|
+
content: ASSETS.agents
|
|
799
|
+
}
|
|
800
|
+
]
|
|
801
|
+
};
|
|
802
|
+
/** Every installable tool key. */
|
|
803
|
+
const AGENT_TOOLS = Object.keys(TARGETS);
|
|
804
|
+
const AGENT_TOOL_SET = new Set(AGENT_TOOLS);
|
|
805
|
+
function ensureAgentTool(tool) {
|
|
806
|
+
if (AGENT_TOOL_SET.has(tool)) return;
|
|
807
|
+
throw new Error(`Unknown tool "${tool}". Expected one of: ${AGENT_TOOLS.join(", ")}.`);
|
|
808
|
+
}
|
|
809
|
+
/**
|
|
810
|
+
* Write pantoken's agent assets for a tool into a consumer repo.
|
|
811
|
+
*
|
|
812
|
+
* @param tool - A specific {@link AgentTool}, or `"all"` for every asset.
|
|
813
|
+
* @param dir - The target directory (default `"."`).
|
|
814
|
+
* @returns The paths written.
|
|
815
|
+
*/
|
|
816
|
+
function installAgentAssets(tool, dir = ".") {
|
|
817
|
+
const tools = tool === "all" ? AGENT_TOOLS : (ensureAgentTool(tool), [tool]);
|
|
818
|
+
const written = /* @__PURE__ */ new Set();
|
|
819
|
+
for (const t of tools) for (const { file, content } of TARGETS[t]) {
|
|
820
|
+
const path = join(dir, file);
|
|
821
|
+
mkdirSync(dirname(path), { recursive: true });
|
|
822
|
+
writeFileSync(path, content);
|
|
823
|
+
written.add(path);
|
|
824
|
+
}
|
|
825
|
+
return [...written];
|
|
826
|
+
}
|
|
827
|
+
//#endregion
|
|
765
828
|
//#region src/index.ts
|
|
766
829
|
/**
|
|
767
830
|
* `@pantoken/scaffold` — scaffold a starter project for a platform, with pantoken already
|
|
768
831
|
* installed and wired in. Standalone; usable via `npx @pantoken/scaffold <platform>` without
|
|
769
832
|
* `@pantoken/ai`.
|
|
770
833
|
*
|
|
771
|
-
* Powered by
|
|
834
|
+
* Powered by generated template strings so the published CLI stays lean and package-manager-safe.
|
|
772
835
|
*
|
|
773
836
|
* @module
|
|
774
837
|
* @alpha
|
|
775
838
|
*/
|
|
839
|
+
const SCAFFOLD_PM_COMMANDS = {
|
|
840
|
+
npm: {
|
|
841
|
+
install: "npm install",
|
|
842
|
+
dev: "npm run dev"
|
|
843
|
+
},
|
|
844
|
+
pnpm: {
|
|
845
|
+
install: "pnpm install",
|
|
846
|
+
dev: "pnpm run dev"
|
|
847
|
+
},
|
|
848
|
+
yarn: {
|
|
849
|
+
install: "yarn install",
|
|
850
|
+
dev: "yarn run dev"
|
|
851
|
+
},
|
|
852
|
+
bun: {
|
|
853
|
+
install: "bun install",
|
|
854
|
+
dev: "bun run dev"
|
|
855
|
+
},
|
|
856
|
+
deno: {
|
|
857
|
+
install: "deno install",
|
|
858
|
+
dev: "deno task dev"
|
|
859
|
+
},
|
|
860
|
+
vp: {
|
|
861
|
+
install: "vp install",
|
|
862
|
+
dev: "vp run dev"
|
|
863
|
+
}
|
|
864
|
+
};
|
|
865
|
+
const CDN_PROVIDER_IDS = [
|
|
866
|
+
"jsdelivr",
|
|
867
|
+
"unpkg",
|
|
868
|
+
"esmsh"
|
|
869
|
+
];
|
|
870
|
+
const THEME_FONT_ASSETS = [{
|
|
871
|
+
package: "@pantoken/components",
|
|
872
|
+
path: "dist/fonts.css"
|
|
873
|
+
}];
|
|
874
|
+
const THEME_JS_ASSETS = [{
|
|
875
|
+
package: "@pantoken/interactions",
|
|
876
|
+
path: "dist/interactions.iife.js"
|
|
877
|
+
}];
|
|
776
878
|
/**
|
|
777
879
|
* Every scaffoldable platform key (discovered from available presets, plus any legacy
|
|
778
880
|
* template-only platforms not yet backed by a preset).
|
|
@@ -784,7 +886,7 @@ function validateThemeMode(value) {
|
|
|
784
886
|
* console.log(SCAFFOLD_PLATFORMS); // → ["components", "react", "vue", "web-components"]
|
|
785
887
|
* ```
|
|
786
888
|
*/
|
|
787
|
-
const SCAFFOLD_PLATFORMS = Array.from(
|
|
889
|
+
const SCAFFOLD_PLATFORMS = Array.from(new Set(Object.keys(SCAFFOLDS))).sort();
|
|
788
890
|
const SCAFFOLD_PLATFORM_SET = new Set(SCAFFOLD_PLATFORMS);
|
|
789
891
|
/** Alternate platform names accepted alongside the canonical preset key (e.g. the pre-Bingo `html`). */
|
|
790
892
|
const PLATFORM_ALIASES = {
|
|
@@ -812,39 +914,104 @@ function writeScaffoldFile(path, content) {
|
|
|
812
914
|
mkdirSync(dirname(path), { recursive: true });
|
|
813
915
|
writeFileSync(path, content);
|
|
814
916
|
}
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
options: { name: projectName }
|
|
823
|
-
});
|
|
824
|
-
return Object.entries(creation.files ?? {}).map(([file, rawContent]) => {
|
|
825
|
-
const path = join(dir, file);
|
|
826
|
-
writeScaffoldFile(path, rawContent instanceof ArrayBuffer ? Buffer.from(rawContent) : rawContent);
|
|
827
|
-
return path;
|
|
828
|
-
});
|
|
829
|
-
} catch {
|
|
830
|
-
return [];
|
|
831
|
-
}
|
|
917
|
+
function shouldWriteScaffoldFile(file, packageManager) {
|
|
918
|
+
return file !== "pnpm-workspace.yaml" || !packageManager || packageManager === "pnpm" || packageManager === "vp";
|
|
919
|
+
}
|
|
920
|
+
function applyPackageManagerCommands(file, content, packageManager) {
|
|
921
|
+
if (!packageManager || file !== "README.md" || typeof content !== "string") return content;
|
|
922
|
+
const commands = SCAFFOLD_PM_COMMANDS[packageManager];
|
|
923
|
+
return content.replaceAll("npm install", commands.install).replaceAll("npm run dev", commands.dev);
|
|
832
924
|
}
|
|
833
925
|
/** Writes `resolvedPlatform`'s legacy `SCAFFOLDS` templates (for platforms with no preset yet). */
|
|
834
|
-
function writeLegacyTemplateFiles(resolvedPlatform, dir, locale, substitutions) {
|
|
926
|
+
function writeLegacyTemplateFiles(resolvedPlatform, dir, locale, substitutions, packageManager) {
|
|
835
927
|
const templates = SCAFFOLDS[resolvedPlatform];
|
|
836
928
|
if (!templates) return [];
|
|
837
929
|
const localized = {
|
|
838
930
|
...templates,
|
|
839
931
|
...SCAFFOLD_OVERLAYS[locale]?.[resolvedPlatform]
|
|
840
932
|
};
|
|
841
|
-
return Object.entries(localized).
|
|
842
|
-
|
|
933
|
+
return Object.entries(localized).flatMap(([file, content]) => {
|
|
934
|
+
if (!shouldWriteScaffoldFile(file, packageManager)) return [];
|
|
935
|
+
const resolved = applyPackageManagerCommands(file, Object.entries(substitutions).reduce((text, [token, value]) => text.replaceAll(`{{${token}}}`, value), content), packageManager);
|
|
843
936
|
const path = join(dir, file);
|
|
844
|
-
writeScaffoldFile(path,
|
|
845
|
-
return path;
|
|
937
|
+
writeScaffoldFile(path, resolved);
|
|
938
|
+
return [path];
|
|
846
939
|
});
|
|
847
940
|
}
|
|
941
|
+
function themeCssAssets(theme = "rebrand", mode = "light") {
|
|
942
|
+
return [
|
|
943
|
+
{
|
|
944
|
+
package: "@pantoken/css",
|
|
945
|
+
path: `dist/${theme === "canvas" ? "style.canvas.lean.css" : theme === "canvasHighContrast" ? "style.canvas-high-contrast.lean.css" : mode === "light" ? "style.rebrand.light.lean.css" : "style.lean.css"}`
|
|
946
|
+
},
|
|
947
|
+
{
|
|
948
|
+
package: "@pantoken/components",
|
|
949
|
+
path: "dist/base.css"
|
|
950
|
+
},
|
|
951
|
+
{
|
|
952
|
+
package: "@pantoken/components",
|
|
953
|
+
path: "dist/component-icons.css"
|
|
954
|
+
},
|
|
955
|
+
{
|
|
956
|
+
package: "@pantoken/components",
|
|
957
|
+
path: "dist/components.css"
|
|
958
|
+
},
|
|
959
|
+
{
|
|
960
|
+
package: "@pantoken/components",
|
|
961
|
+
path: "dist/utilities.css"
|
|
962
|
+
}
|
|
963
|
+
];
|
|
964
|
+
}
|
|
965
|
+
function fileSpecifier(file) {
|
|
966
|
+
return `${file.package}/${file.path}`;
|
|
967
|
+
}
|
|
968
|
+
function cdnUrl(file, provider) {
|
|
969
|
+
const specifier = fileSpecifier(file);
|
|
970
|
+
if (provider === "unpkg") return `https://unpkg.com/${specifier}`;
|
|
971
|
+
if (provider === "esmsh") return `https://esm.sh/${specifier}?raw`;
|
|
972
|
+
return `https://cdn.jsdelivr.net/npm/${specifier}`;
|
|
973
|
+
}
|
|
974
|
+
function cdnImportLines(files, provider) {
|
|
975
|
+
if (provider === "jsdelivr" && files.length > 1) return `@import url("https://cdn.jsdelivr.net/combine/${files.map((file) => `npm/${fileSpecifier(file)}`).join(",")}");`;
|
|
976
|
+
return files.map((file) => `@import url("${cdnUrl(file, provider)}");`).join("\n");
|
|
977
|
+
}
|
|
978
|
+
function cdnScriptTags(files, provider) {
|
|
979
|
+
return files.map((file) => ` var script = document.createElement("script");\n script.src = "${cdnUrl(file, provider)}";\n document.head.appendChild(script);`).join("\n");
|
|
980
|
+
}
|
|
981
|
+
function resolveCdnProviderId(id) {
|
|
982
|
+
if (!id) return "jsdelivr";
|
|
983
|
+
if (CDN_PROVIDER_IDS.includes(id)) return id;
|
|
984
|
+
throw new Error(`Unknown CDN provider id "${id}". Valid ids: ${CDN_PROVIDER_IDS.join(", ")}.`);
|
|
985
|
+
}
|
|
986
|
+
function buildTheme(options = {}) {
|
|
987
|
+
const provider = resolveCdnProviderId(options.cdn);
|
|
988
|
+
return {
|
|
989
|
+
css: `/**
|
|
990
|
+
* Pantoken Canvas Theme Editor CSS.
|
|
991
|
+
* Upload this file in Canvas Theme Editor > Advanced > CSS.
|
|
992
|
+
*/
|
|
993
|
+
|
|
994
|
+
/* Component styles */
|
|
995
|
+
${cdnImportLines(themeCssAssets(options.theme, options.mode), provider)}
|
|
996
|
+
/* Fonts */
|
|
997
|
+
${cdnImportLines(THEME_FONT_ASSETS, provider)}
|
|
998
|
+
|
|
999
|
+
/* Add custom CSS overrides below. */
|
|
1000
|
+
`,
|
|
1001
|
+
js: `/**
|
|
1002
|
+
* Pantoken Canvas Theme Editor JavaScript.
|
|
1003
|
+
* Upload this file in Canvas Theme Editor > Advanced > JavaScript.
|
|
1004
|
+
*/
|
|
1005
|
+
(function pantokenTheme() {
|
|
1006
|
+
"use strict";
|
|
1007
|
+
|
|
1008
|
+
${cdnScriptTags(THEME_JS_ASSETS, provider)}
|
|
1009
|
+
})();
|
|
1010
|
+
|
|
1011
|
+
/* Add custom JavaScript overrides below. */
|
|
1012
|
+
`
|
|
1013
|
+
};
|
|
1014
|
+
}
|
|
848
1015
|
/**
|
|
849
1016
|
* Builds canvas-theme-editor's `theme.css`/`theme.js` for the chosen CDN provider/theme/mode at
|
|
850
1017
|
* scaffold time (rather than shipping a pre-baked jsDelivr/rebrand default); `[]` for every other
|
|
@@ -853,7 +1020,7 @@ function writeLegacyTemplateFiles(resolvedPlatform, dir, locale, substitutions)
|
|
|
853
1020
|
function writeCanvasThemeEditorAssets(resolvedPlatform, dir, options) {
|
|
854
1021
|
if (resolvedPlatform !== "canvas-theme-editor") return [];
|
|
855
1022
|
const { css, js } = buildTheme({
|
|
856
|
-
|
|
1023
|
+
cdn: options?.cdn,
|
|
857
1024
|
theme: options?.theme,
|
|
858
1025
|
mode: options?.mode
|
|
859
1026
|
});
|
|
@@ -888,16 +1055,14 @@ async function scaffoldProject(platform, dir = ".", options) {
|
|
|
888
1055
|
const resolvedPlatform = resolveScaffoldPlatform(platform);
|
|
889
1056
|
const projectName = dir === "." ? "pantoken-app" : dir.split("/").pop() ?? "pantoken-app";
|
|
890
1057
|
const locale = options?.locale ?? "en";
|
|
891
|
-
const
|
|
1058
|
+
const written = writeLegacyTemplateFiles(resolvedPlatform, dir, locale, {
|
|
892
1059
|
projectName,
|
|
893
1060
|
pantokenCssImport: themeStylesheetImport(options?.theme, options?.mode),
|
|
894
1061
|
locale,
|
|
895
1062
|
dir: localeDirection(locale)
|
|
896
|
-
};
|
|
897
|
-
const written = writePresetFiles(resolvedPlatform, dir, projectName);
|
|
898
|
-
if (written.length === 0) written.push(...writeLegacyTemplateFiles(resolvedPlatform, dir, locale, substitutions));
|
|
1063
|
+
}, options?.packageManager);
|
|
899
1064
|
written.push(...writeCanvasThemeEditorAssets(resolvedPlatform, dir, options));
|
|
900
1065
|
return written;
|
|
901
1066
|
}
|
|
902
1067
|
//#endregion
|
|
903
|
-
export {
|
|
1068
|
+
export { AGENT_TOOLS as a, themeStylesheetImport as c, SUPPORTED_LOCALES as d, createLocaleLookup as f, scaffoldProject as i, validateThemeMode as l, validateLocaleTag as m, isScaffoldPlatform as n, installAgentAssets as o, detectLocale as p, resolveScaffoldPlatform as r, ASSETS as s, SCAFFOLD_PLATFORMS as t, validateThemeVariant as u };
|