@fundamental-engine/create 0.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Zach Shallbetter
+
+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,22 @@
+# @fundamental-engine/create
+
+Scaffold a [Fundamental](https://fundamental-engine.com) starter in one command:
+
+```bash
+npm create @fundamental-engine my-field-app
+# or pick the variant up front:
+npm create @fundamental-engine my-field-app -- --template react
+```
+
+Three variants, all **signals-first** (the field draws nothing by default — it writes `--field-*` CSS
+variables your styles read; particles are one opt-in surface):
+
+- **`vanilla`** (default) — a *contained, signals-only* field (`FieldField` + `bounds`, `render: 'none'`)
+  over a real list. No canvas; the rows react through CSS. The "this is what it's for" starter.
+- **`web-component`** — the `<field-root>` custom element; works in any framework or plain HTML.
+- **`react`** — `<FieldField>` from `@fundamental-engine/react`.
+
+Each scaffolds a minimal Vite app you run with `npm install && npm run dev`. Every template is explicit
+about `render`, so it behaves the same whichever engine version it resolves to.
+
+Run with no arguments for an interactive prompt (directory + template).

package/dist/index.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve, basename } from 'node:path';
+import { createInterface } from 'node:readline/promises';
+import { stdin, stdout, argv, cwd, exit } from 'node:process';
+import { scaffold, isTemplate, TEMPLATES } from "./scaffold.js";
+const templatesRoot = join(dirname(fileURLToPath(import.meta.url)), '../templates');
+function parseArgs(args) {
+    const out = {};
+    for (let i = 0; i < args.length; i++) {
+        const a = args[i];
+        if (a === '--template' || a === '-t')
+            out.template = args[++i];
+        else if (a.startsWith('--template='))
+            out.template = a.slice('--template='.length);
+        else if (!a.startsWith('-') && out.dir === undefined)
+            out.dir = a;
+    }
+    return out;
+}
+async function main() {
+    const args = parseArgs(argv.slice(2));
+    let dir = args.dir;
+    let template = args.template;
+    const interactive = Boolean(stdin.isTTY && stdout.isTTY);
+    const rl = interactive && (!dir || !template) ? createInterface({ input: stdin, output: stdout }) : undefined;
+    if (!dir)
+        dir = (rl ? (await rl.question('Project directory [my-field-app]: ')).trim() : '') || 'my-field-app';
+    if (!template) {
+        const ans = rl ? (await rl.question(`Template — ${TEMPLATES.join(' / ')} [vanilla]: `)).trim() : '';
+        template = ans || 'vanilla';
+    }
+    rl?.close();
+    if (!isTemplate(template)) {
+        console.error(`Unknown template "${template}". Choose one of: ${TEMPLATES.join(', ')}`);
+        exit(1);
+    }
+    const targetDir = resolve(cwd(), dir);
+    const name = basename(targetDir);
+    try {
+        await scaffold({ templatesRoot, template: template, targetDir, name });
+    }
+    catch (e) {
+        console.error(`✗ ${e.message ?? e}`);
+        exit(1);
+    }
+    console.log(`\n✓ Created ${name} — the ${template} starter (signals-first).\n\n` +
+        `Next:\n  cd ${dir}\n  npm install\n  npm run dev\n\n` +
+        `The field draws nothing by default — it writes --field-* signals your CSS reads. See src/ for the wiring.\n`);
+}
+void main();

package/dist/scaffold.js

@@ -0,0 +1,33 @@
+import { cp, readFile, writeFile, readdir, rename } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+/** The starter variants. All three are signals-first; vanilla is contained (field scoped to a list). */
+export const TEMPLATES = ['vanilla', 'react', 'web-component'];
+export function isTemplate(t) {
+    return TEMPLATES.includes(t);
+}
+/**
+ * Copy a template into `targetDir` and stamp the project name into its package.json. Throws if the
+ * template is unknown or the target exists and is non-empty. Pure file IO — no prompts, so it tests
+ * directly.
+ */
+export async function scaffold(opts) {
+    const { templatesRoot, template, targetDir, name } = opts;
+    const src = join(templatesRoot, template);
+    if (!existsSync(src))
+        throw new Error(`unknown template: ${template}`);
+    if (existsSync(targetDir) && (await readdir(targetDir)).length > 0)
+        throw new Error(`target directory is not empty: ${targetDir}`);
+    await cp(src, targetDir, { recursive: true });
+    // npm strips a `.gitignore` from published packages, so templates ship it as `_gitignore`; restore it.
+    const ignore = join(targetDir, '_gitignore');
+    if (existsSync(ignore))
+        await rename(ignore, join(targetDir, '.gitignore'));
+    // stamp the chosen project name into the scaffolded package.json
+    const pkgPath = join(targetDir, 'package.json');
+    if (existsSync(pkgPath)) {
+        const pkg = JSON.parse(await readFile(pkgPath, 'utf8'));
+        pkg.name = name;
+        await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+    }
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@fundamental-engine/create",
+  "version": "0.8.0",
+  "type": "module",
+  "description": "Scaffold a Fundamental starter — `npm create @fundamental-engine` — vanilla, React, or web-component, contained and signals-first by default.",
+  "keywords": [
+    "fundamental",
+    "scaffold",
+    "create",
+    "starter",
+    "field"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zachshallbetter/fundamental-engine.git",
+    "directory": "packages/create"
+  },
+  "bin": {
+    "create-fundamental-engine": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "@types/node": "^22"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --test"
+  }
+}

package/templates/react/README.md

@@ -0,0 +1,16 @@
+# field-app — React starter
+
+A [Fundamental](https://fundamental-engine.com) starter using `<FieldField>` from
+`@fundamental-engine/react`. Signals-first: the field draws nothing by default and writes `--field-*`
+variables your CSS reads.
+
+```bash
+npm install
+npm run dev
+```
+
+- `src/App.tsx` — drop in `<FieldField />`, mark elements `data-body data-feedback`; engagement is a
+  `data-active` attribute set on hover/focus.
+- `src/styles.css` — reads `--field-density` (`--d`) for weight, lift, glow.
+
+Want particles? Pass `render="dots"` to `<FieldField />`. Prefer the handle? Use `useFieldField()`.

package/templates/react/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/templates/react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Fundamental — React starter</title>
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "field-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fundamental-engine/react": "latest",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^4",
+    "typescript": "^5.9.3",
+    "vite": "^6"
+  }
+}

package/templates/react/src/App.tsx

@@ -0,0 +1,43 @@
+import { FieldField } from '@fundamental-engine/react';
+
+const ITEMS = [
+  { label: 'Production incident', strength: 1 },
+  { label: 'Design review', strength: 0.62 },
+  { label: 'PR #318 — signals-first', strength: 0.78 },
+  { label: 'Weekly digest', strength: 0.3 },
+];
+
+// engagement is just an attribute the field reads — set it on hover/focus, live.
+const engage = (e: React.SyntheticEvent<HTMLElement>) => e.currentTarget.setAttribute('data-active', '1');
+const release = (e: React.SyntheticEvent<HTMLElement>) => e.currentTarget.setAttribute('data-active', '0');
+
+export function App() {
+  return (
+    <main>
+      {/* The window field, signals-first: it writes --field-* onto the [data-body] elements below and
+          draws nothing. Pass render="dots" to see the particles instead. */}
+      <FieldField />
+
+      <h1 data-body="attract" data-feedback data-strength="1" data-range="320">Elements have mass.</h1>
+      <p className="sub">Hover an item — the field reacts to engagement, no particles drawn.</p>
+      <ul className="inbox">
+        {ITEMS.map((it) => (
+          <li
+            key={it.label}
+            tabIndex={0}
+            data-body="attract"
+            data-feedback
+            data-strength={it.strength}
+            data-range="180"
+            onPointerEnter={engage}
+            onPointerLeave={release}
+            onFocus={engage}
+            onBlur={release}
+          >
+            {it.label}
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

package/templates/react/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/react/src/styles.css

@@ -0,0 +1,24 @@
+:root { --accent: #4da3ff; color-scheme: dark; }
+body { margin: 0; min-height: 100vh; background: #0b0e14; color: #e8e8ef; font: 16px/1.5 system-ui, sans-serif; display: grid; place-items: center; }
+main { width: min(560px, 92vw); padding: 2rem 0; }
+h1 {
+  font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -0.02em; margin: 0 0 0.3rem;
+  font-weight: calc(500 + var(--d, 0) * 340);
+  transition: font-weight 0.5s ease;
+}
+.sub { color: #9aa3b2; margin: 0 0 1.6rem; }
+.inbox { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
+
+/* read what the field wrote — --field-density (--d) becomes weight, lift, glow */
+.inbox li {
+  padding: calc(0.6rem + var(--d, 0) * 0.5rem) 0.9rem;
+  border: 1px solid color-mix(in srgb, var(--accent) calc(var(--d, 0) * 55%), #2a2a35);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--accent) calc(var(--d, 0) * 14%), transparent);
+  font-weight: calc(400 + var(--d, 0) * 360);
+  transform: translateX(calc(var(--d, 0) * 6px));
+  box-shadow: 0 0 calc(var(--d, 0) * 26px) color-mix(in srgb, var(--accent) calc(var(--d, 0) * 45%), transparent);
+  transition: all 0.45s ease; cursor: default;
+}
+.inbox li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { h1, .inbox li { transition: none; } }

package/templates/react/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}

package/templates/react/vite.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({ plugins: [react()] });

package/templates/vanilla/README.md

@@ -0,0 +1,15 @@
+# field-app — vanilla starter
+
+A [Fundamental](https://fundamental-engine.com) starter: a **contained, signals-only** field over a real
+list. No canvas, no particles — the field writes `--field-*` CSS variables and the list reacts.
+
+```bash
+npm install
+npm run dev
+```
+
+- `src/main.ts` — `new FieldField({ bounds: list, render: 'none' })` scopes the field to the list and
+  draws nothing; engagement (`data-active`) drives it live.
+- `src/styles.css` — reads `--field-density` (`--d`) to turn density into weight, lift, and glow.
+
+Want to see the particles? Change `render: 'none'` → `render: 'dots'` in `src/main.ts`.

package/templates/vanilla/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/templates/vanilla/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Fundamental — vanilla starter</title>
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <main>
+      <h1>Elements have mass.</h1>
+      <p class="sub">A contained, signals-only field. No canvas — the list reacts through CSS variables.</p>
+
+      <!-- The field is scoped to this list (bounds). Each row is a body; the field writes
+           --field-density (--d) back, and the CSS below turns that into weight + glow. -->
+      <ul class="inbox" data-field>
+        <li data-body="attract" data-feedback data-strength="1.0" data-range="180">Production incident</li>
+        <li data-body="attract" data-feedback data-strength="0.62" data-range="180">Design review</li>
+        <li data-body="attract" data-feedback data-strength="0.78" data-range="180">PR #318 — signals-first</li>
+        <li data-body="attract" data-feedback data-strength="0.30" data-range="180">Weekly digest</li>
+        <li data-body="attract" data-feedback data-strength="0.18" data-range="180">Coffee with Sam</li>
+      </ul>
+    </main>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vanilla/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "field-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fundamental-engine/vanilla": "latest"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^6"
+  }
+}

package/templates/vanilla/src/main.ts

@@ -0,0 +1,23 @@
+import { FieldField } from '@fundamental-engine/vanilla';
+
+const list = document.querySelector<HTMLElement>('[data-field]')!;
+
+// A CONTAINED, signals-only field: it runs the full simulation over the rows but draws nothing
+// (render: 'none'). The only output is the --field-* CSS variables — the field is behaviour, not a
+// particle background. `bounds` scopes it to this list instead of the window.
+const field = new FieldField({ bounds: list, render: 'none', density: 1.4 });
+
+// Engagement is just an attribute the field reads: hover or focus a row and it gathers the (invisible)
+// matter toward itself; neighbours feel the shift. The CSS reads --field-density (--d) to show it.
+for (const row of list.querySelectorAll<HTMLElement>('li')) {
+  row.tabIndex = 0;
+  const on = () => row.setAttribute('data-active', '1');
+  const off = () => row.setAttribute('data-active', '0');
+  row.addEventListener('pointerenter', on);
+  row.addEventListener('pointerleave', off);
+  row.addEventListener('focus', on);
+  row.addEventListener('blur', off);
+}
+
+// `field` is the live FieldHandle — field.version, field.scan(), field.setRender('dots'), …
+// To SEE particles instead of pure signals, swap render: 'none' → 'dots' above.

package/templates/vanilla/src/styles.css

@@ -0,0 +1,33 @@
+:root {
+  --accent: #4da3ff;
+  color-scheme: dark;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: #0b0e14;
+  color: #e8e8ef;
+  font: 16px/1.5 system-ui, sans-serif;
+  display: grid;
+  place-items: center;
+}
+main { width: min(560px, 92vw); padding: 2rem 0; }
+h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 0.3rem; letter-spacing: -0.02em; }
+.sub { color: #9aa3b2; margin: 0 0 1.6rem; }
+.inbox { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
+
+/* The field wrote --field-density (alias --d) onto each [data-feedback] row.
+   Read it to turn density into presence — weight, lift, and glow. No canvas involved. */
+.inbox li {
+  padding: calc(0.6rem + var(--d, 0) * 0.5rem) 0.9rem;
+  border: 1px solid color-mix(in srgb, var(--accent) calc(var(--d, 0) * 55%), #2a2a35);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--accent) calc(var(--d, 0) * 14%), transparent);
+  font-weight: calc(400 + var(--d, 0) * 360);
+  transform: translateX(calc(var(--d, 0) * 6px));
+  box-shadow: 0 0 calc(var(--d, 0) * 26px) color-mix(in srgb, var(--accent) calc(var(--d, 0) * 45%), transparent);
+  transition: all 0.45s ease;
+  cursor: default;
+}
+.inbox li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .inbox li { transition: none; } }

package/templates/vanilla/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}

package/templates/web-component/README.md

@@ -0,0 +1,16 @@
+# field-app — web-component starter
+
+A [Fundamental](https://fundamental-engine.com) starter using the `<field-root>` custom element — works
+in any framework or plain HTML. Signals-first: the field draws nothing by default and writes `--field-*`
+variables your CSS reads.
+
+```bash
+npm install
+npm run dev
+```
+
+- `index.html` — drop in `<field-root>`, mark elements `[data-body] [data-feedback]`.
+- `src/main.ts` — importing `@fundamental-engine/elements` is the whole wiring; it registers the element.
+- `src/styles.css` — reads `--field-density` (`--d`) for weight + glow.
+
+Want particles? Add `render="dots"` to `<field-root>`.

package/templates/web-component/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/templates/web-component/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Fundamental — web-component starter</title>
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <!-- One field for the page. No `render` attribute → signals-first (#538): it runs the simulation
+         and writes --field-* variables, but draws no canvas. Add render="dots" to see the particles. -->
+    <field-root></field-root>
+
+    <main>
+      <!-- Bodies: the field gathers toward them and writes --field-density (--d) back; the CSS reads it. -->
+      <h1 data-body="attract" data-feedback data-strength="1" data-range="320">Elements have mass.</h1>
+      <p class="sub" data-body="attract" data-feedback data-strength="0.4" data-range="240">
+        Hover the items — the field reacts to engagement, no particles drawn.
+      </p>
+      <ul class="row">
+        <li data-body="attract" data-feedback data-strength="0.7" data-range="160">Signal</li>
+        <li data-body="attract" data-feedback data-strength="0.5" data-range="160">Relation</li>
+        <li data-body="attract" data-feedback data-strength="0.3" data-range="160">Change</li>
+      </ul>
+    </main>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/web-component/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "field-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fundamental-engine/elements": "latest"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^6"
+  }
+}

package/templates/web-component/src/main.ts

@@ -0,0 +1,9 @@
+// Importing the package registers <field-root> and boots the engine — that's the whole wiring.
+// The field is signals-first: it writes --field-* onto the [data-body] elements; styles.css reacts.
+import '@fundamental-engine/elements';
+
+// Engage bodies on hover so the field gathers toward them (and neighbours respond), live.
+for (const el of document.querySelectorAll<HTMLElement>('[data-body]')) {
+  el.addEventListener('pointerenter', () => el.setAttribute('data-active', '1'));
+  el.addEventListener('pointerleave', () => el.setAttribute('data-active', '0'));
+}

package/templates/web-component/src/styles.css

@@ -0,0 +1,22 @@
+:root { --accent: #4da3ff; color-scheme: dark; }
+body { margin: 0; min-height: 100vh; background: #0b0e14; color: #e8e8ef; font: 16px/1.5 system-ui, sans-serif; display: grid; place-items: center; }
+main { width: min(620px, 92vw); padding: 2rem 0; text-align: center; }
+
+/* read what the field writes — weight + glow rise with --field-density (--d) */
+h1 {
+  font-size: clamp(2.2rem, 7vw, 3.4rem); letter-spacing: -0.02em; margin: 0 0 0.4rem;
+  font-weight: calc(500 + var(--d, 0) * 360);
+  text-shadow: 0 0 calc(var(--d, 0) * 30px) color-mix(in srgb, var(--accent) calc(var(--d, 0) * 70%), transparent);
+  transition: all 0.5s ease;
+}
+.sub { color: #9aa3b2; margin: 0 0 2rem; }
+.row { list-style: none; display: flex; gap: 0.6rem; justify-content: center; padding: 0; }
+.row li {
+  padding: 0.6rem 1.1rem; border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--accent) calc(var(--d, 0) * 60%), #2a2a35);
+  background: color-mix(in srgb, var(--accent) calc(var(--d, 0) * 16%), transparent);
+  font-weight: calc(400 + var(--d, 0) * 320);
+  transform: scale(calc(1 + var(--d, 0) * 0.08));
+  transition: all 0.45s ease; cursor: default;
+}
+@media (prefers-reduced-motion: reduce) { h1, .row li { transition: none; } }

package/templates/web-component/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}