@pantoken/scaffold 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Danny Wahl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# @pantoken/scaffold
+
+Scaffold a starter project — with [pantoken](https://www.npmjs.com/package/@pantoken/pantoken)
+(Instructure design tokens and icons) already installed and wired in.
+
+## Usage
+
+```sh
+npx @pantoken/scaffold web      # plain HTML/CSS (Vite + TS) + @pantoken/components
+npx @pantoken/scaffold react    # Vite + React + @pantoken/react
+npx @pantoken/scaffold next     # Next.js (App Router) + @pantoken/next
+
+# Target a directory other than the current one:
+npx @pantoken/scaffold react --dir ./my-app
+```
+
+`npx` works regardless of which package manager you use. Substitute `pnpm dlx`, `yarn dlx`, or
+`bunx` for `npx` if you prefer.
+
+Or use it programmatically:
+
+```ts
+import { scaffoldProject, SCAFFOLD_PLATFORMS } from "@pantoken/scaffold";
+
+scaffoldProject("react", "./my-app");
+```
+
+## API
+
+- **`scaffoldProject(platform, dir?): string[]`** — write a starter project template for a
+  `ScaffoldPlatform` into `dir` (defaults to `"."`). Its basename (or `"pantoken-app"` for `"."`)
+  is substituted for `{{projectName}}` in the template files. Returns the paths written.
+- **`SCAFFOLD_PLATFORMS: readonly ScaffoldPlatform[]`** — every scaffoldable platform key.
+- **`ScaffoldPlatform`** — the platform union: `"web"`, `"react"`, `"next"`.
+
+`@pantoken/ai`'s `pantoken-ai scaffold <platform>` command wraps this package and additionally
+installs pantoken's agent assets (AGENTS.md, editor/agent rules, skills) into the same directory.
+
+## License
+
+MIT

package/bin/pantoken-scaffold.mjs

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+import { SCAFFOLD_PLATFORMS, scaffoldProject } from "../dist/index.mjs";
+
+const argv = process.argv.slice(2);
+const PLATFORM_SET = new Set(SCAFFOLD_PLATFORMS);
+
+const usage = () => `Usage: pantoken-scaffold <${SCAFFOLD_PLATFORMS.join("|")}> [--dir .]`;
+
+const flag = (name) => {
+  const i = argv.indexOf(`--${name}`);
+  return i !== -1 ? argv[i + 1] : undefined;
+};
+
+if (argv[0] === "--help" || argv[0] === "-h") {
+  console.log(usage());
+  process.exit(0);
+}
+
+const platform = argv[0];
+const dir = flag("dir") ?? ".";
+if (!platform || !PLATFORM_SET.has(platform)) {
+  console.error(`Unknown platform "${platform ?? ""}".`);
+  console.error(usage());
+  process.exit(1);
+}
+
+const written = scaffoldProject(platform, dir);
+for (const path of written) console.log(`✓ wrote ${path}`);
+console.log(`\nNext: cd ${dir} && npm install (or pnpm/yarn/bun install)`);

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+//#region generated/scaffolds.d.ts
+declare const SCAFFOLDS: Record<string, Record<string, string>>;
+//#endregion
+//#region src/index.d.ts
+/** A platform pantoken can scaffold a starter project for. */
+type ScaffoldPlatform = keyof typeof SCAFFOLDS;
+/**
+ * Every scaffoldable platform key.
+ *
+ * @example List available platforms
+ * ```ts
+ * import { SCAFFOLD_PLATFORMS } from "@pantoken/scaffold";
+ *
+ * console.log(SCAFFOLD_PLATFORMS); // → ["web", "react", "next"]
+ * ```
+ */
+declare const SCAFFOLD_PLATFORMS: readonly ScaffoldPlatform[];
+/**
+ * Scaffold a starter project for a platform, with pantoken already installed and wired in.
+ *
+ * @param platform - A {@link ScaffoldPlatform}.
+ * @param dir - The target directory (default `"."`). Its basename (or `"pantoken-app"` for `"."`)
+ *   is substituted for `{{projectName}}` in the template files.
+ * @returns The paths written.
+ *
+ * @example Scaffold a React starter
+ * ```ts
+ * import { scaffoldProject } from "@pantoken/scaffold";
+ *
+ * scaffoldProject("react", "./my-app");
+ * ```
+ */
+declare function scaffoldProject(platform: string, dir?: string): string[];
+//#endregion
+export { SCAFFOLD_PLATFORMS, ScaffoldPlatform, scaffoldProject };

package/dist/index.mjs

@@ -0,0 +1,88 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+//#region generated/scaffolds.ts
+const SCAFFOLDS = {
+	"next": {
+		".gitignore": "node_modules\n.next\n",
+		"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold next` (or `pantoken-ai scaffold next`) — a Next.js (App Router) app styled with\n[`@pantoken/next`](https://www.npmjs.com/package/@pantoken/next), 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- `next.config.mjs` wraps the config with `withPantoken(...)` (adds pantoken to\n  `transpilePackages`).\n- `app/layout.tsx` imports `@pantoken/css/inject`, which defines every `--instui-*` custom\n  property, at the root so it's available on every page.\n- `app/page.tsx` references tokens with `var(--instui-*)`.\n",
+		"next.config.mjs": "import { withPantoken } from \"@pantoken/next\";\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {};\n\nexport default withPantoken(nextConfig);\n",
+		"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/next\": \"latest\",\n    \"next\": \"^15.0.0\",\n    \"react\": \"^19.0.0\",\n    \"react-dom\": \"^19.0.0\"\n  }\n}\n",
+		"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",
+		"app/layout.tsx": "import \"@pantoken/css/inject\";\n\nexport const metadata = {\n  title: \"{{projectName}}\",\n};\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>{children}</body>\n    </html>\n  );\n}\n",
+		"app/page.tsx": "export default function Page() {\n  return (\n    <main style={{ padding: \"var(--instui-spacing-space-lg)\" }}>\n      <h1 style={{ color: \"var(--instui-color-text-primary)\" }}>{\"{{projectName}}\"}</h1>\n      <p>\n        Styled with <code>@pantoken/next</code> — Instructure design tokens and icons.\n      </p>\n    </main>\n  );\n}\n"
+	},
+	"react": {
+		".gitignore": "node_modules\ndist\n",
+		"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold react` (or `pantoken-ai scaffold react`) — a Vite + React app styled with\n[`@pantoken/react`](https://www.npmjs.com/package/@pantoken/react) and\n[`@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/inject`, which defines every `--instui-*` custom property.\n- `src/App.tsx` references tokens with `var(--instui-*)` and renders an icon via `@pantoken/react`'s\n  `<Icon>`.\n- For InstUI's full React component library (buttons, modals, etc.), add the specific\n  `@instructure/ui-*` packages you need — see <https://instructure.design>.\n",
+		"index.html": "<!doctype html>\n<html lang=\"en\">\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",
+		"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/react\": \"latest\",\n    \"react\": \"^19.0.0\",\n    \"react-dom\": \"^19.0.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^19.0.0\",\n    \"@types/react-dom\": \"^19.0.0\",\n    \"@vitejs/plugin-react\": \"^4.3.0\",\n    \"vite\": \"^6.0.0\"\n  }\n}\n",
+		"tsconfig.json": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"jsx\": \"react-jsx\",\n    \"strict\": true,\n    \"skipLibCheck\": true\n  },\n  \"include\": [\"src\"]\n}\n",
+		"vite.config.ts": "import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n  plugins: [react()],\n});\n",
+		"src/App.tsx": "import { Icon } from \"@pantoken/react\";\n\nexport function App() {\n  return (\n    <main style={{ padding: \"var(--instui-spacing-space-lg)\" }}>\n      <h1 style={{ color: \"var(--instui-color-text-primary)\" }}>{\"{{projectName}}\"}</h1>\n      <p>\n        Styled with <code>@pantoken/react</code> and <code>@pantoken/css</code> — Instructure design\n        tokens and icons.\n      </p>\n      <Icon name=\"check-mark\" />\n    </main>\n  );\n}\n",
+		"src/main.tsx": "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\n// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/css/inject\";\nimport { App } from \"./App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  <StrictMode>\n    <App />\n  </StrictMode>,\n);\n"
+	},
+	"web": {
+		".gitignore": "node_modules\ndist\n",
+		"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold web` (or `pantoken-ai scaffold web`) — a 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- `src/main.ts` imports `@pantoken/components/base.css` (document defaults + focus ring) and\n  `components.css` (`.instui-*` classes), then renders markup into `#app`.\n- Apply classes like `class=\"instui-button\"` to markup; see the\n  [component reference](https://pantoken.iywahl.com/api/css) for the full class list.\n",
+		"index.html": "<!doctype html>\n<html lang=\"en\">\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",
+		"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  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.0\",\n    \"vite\": \"^6.0.0\"\n  }\n}\n",
+		"tsconfig.json": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"strict\": true,\n    \"skipLibCheck\": true\n  },\n  \"include\": [\"src\"]\n}\n",
+		"vite.config.ts": "import { defineConfig } from \"vite\";\n\nexport default defineConfig({});\n",
+		"src/main.ts": "// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/components/base.css\";\nimport \"@pantoken/components/components.css\";\n\ndocument.querySelector<HTMLDivElement>(\"#app\")!.innerHTML = `\n  <main class=\"instui-agent-shell -p-lg\">\n    <h1 class=\"instui-heading\">{{projectName}}</h1>\n    <p>Styled with <code>@pantoken/components</code> — Instructure design tokens and icons.</p>\n    <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n  </main>\n`;\n"
+	}
+};
+//#endregion
+//#region src/index.ts
+/**
+* `@pantoken/scaffold` — scaffold a starter project for a platform, with pantoken already
+* installed and wired in. Standalone; usable via `npx @pantoken/scaffold <platform>` without
+* `@pantoken/ai`.
+*
+* @module
+* @alpha
+*/
+/**
+* Every scaffoldable platform key.
+*
+* @example List available platforms
+* ```ts
+* import { SCAFFOLD_PLATFORMS } from "@pantoken/scaffold";
+*
+* console.log(SCAFFOLD_PLATFORMS); // → ["web", "react", "next"]
+* ```
+*/
+const SCAFFOLD_PLATFORMS = Object.keys(SCAFFOLDS);
+const SCAFFOLD_PLATFORM_SET = new Set(SCAFFOLD_PLATFORMS);
+function ensureScaffoldPlatform(platform) {
+	if (SCAFFOLD_PLATFORM_SET.has(platform)) return;
+	throw new Error(`Unknown platform "${platform}". Expected one of: ${SCAFFOLD_PLATFORMS.join(", ")}.`);
+}
+/**
+* Scaffold a starter project for a platform, with pantoken already installed and wired in.
+*
+* @param platform - A {@link ScaffoldPlatform}.
+* @param dir - The target directory (default `"."`). Its basename (or `"pantoken-app"` for `"."`)
+*   is substituted for `{{projectName}}` in the template files.
+* @returns The paths written.
+*
+* @example Scaffold a React starter
+* ```ts
+* import { scaffoldProject } from "@pantoken/scaffold";
+*
+* scaffoldProject("react", "./my-app");
+* ```
+*/
+function scaffoldProject(platform, dir = ".") {
+	ensureScaffoldPlatform(platform);
+	const projectName = dir === "." ? "pantoken-app" : dir.split("/").pop() ?? "pantoken-app";
+	const written = [];
+	for (const [file, content] of Object.entries(SCAFFOLDS[platform])) {
+		const path = join(dir, file);
+		mkdirSync(dirname(path), { recursive: true });
+		writeFileSync(path, content.split("{{projectName}}").join(projectName));
+		written.push(path);
+	}
+	return written;
+}
+//#endregion
+export { SCAFFOLD_PLATFORMS, scaffoldProject };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@pantoken/scaffold",
+  "version": "0.1.0",
+  "description": "npx @pantoken/scaffold <platform> — scaffold a starter project (web, react, next, ...) with pantoken already installed and wired in.",
+  "homepage": "https://pantoken.iywahl.com",
+  "bugs": "https://github.com/thedannywahl/pantoken/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thedannywahl/pantoken.git",
+    "directory": "packages/scaffold"
+  },
+  "bin": {
+    "pantoken-scaffold": "bin/pantoken-scaffold.mjs"
+  },
+  "files": [
+    "dist",
+    "bin"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "typescript": "^7.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.9",
+    "vite-plus": "0.2.9"
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "scripts": {
+    "generate": "node scripts/generate.ts",
+    "dev": "vp pack --watch",
+    "test": "vp run generate && vp test",
+    "check": "vp check"
+  }
+}