@pantoken/scaffold 1.7.1 → 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-D_xWkBkK.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-D_xWkBkK.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-D_xWkBkK.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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoken/scaffold",
-  "version": "1.7.1",
+  "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.6",
+    "@pantoken/angular": "0.2.7",
     "@pantoken/canvas-theme-editor": "0.3.2",
-    "@pantoken/components": "2.2.0",
-    "@pantoken/i18n-engine": "0.4.0",
-    "@pantoken/plugin-layouts": "0.5.7",
-    "@pantoken/react": "0.2.5",
-    "@pantoken/scaffold-base": "0.3.10",
-    "@pantoken/svelte": "0.2.5",
-    "@pantoken/vue": "0.2.5",
-    "@pantoken/web-components": "0.8.0",
+    "@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",