create-halation 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mandip Adhikari
+
+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,14 @@
+# create-halation
+
+Start a React project with Halation already in place.
+
+```bash
+npm create halation my-app
+cd my-app
+npm install
+npm run dev
+```
+
+You get a Vite and React app with the Halation styles and components, an opening on a phenomenon, working examples, and an agent kit: the Halation skill, a hook that lints every file an agent edits, and an AGENTS.md other tools read too.
+
+MIT

package/bin/create-halation.js

@@ -0,0 +1,168 @@
+#!/usr/bin/env node
+// create-halation: starts a new React project with Halation.
+//
+//   npm create halation my-app
+//   pnpm create halation my-app --name "My app" --phenomenon caustics
+
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, realpathSync, renameSync, writeFileSync } from "node:fs"
+import { basename, join, relative, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { parseArgs } from "node:util"
+
+export const PHENOMENA = ["rays", "blinds", "caustics", "halation", "stir", "ink", "ripple", "silk", "foil", "growth"]
+
+const TEMPLATE = fileURLToPath(new URL("../template", import.meta.url))
+const DEFAULT_NAME = "My project"
+const DEFAULT_PHENOMENON = "rays"
+// Files a fresh directory may already hold without counting as "not empty".
+const HARMLESS = new Set([".DS_Store", ".git"])
+
+const USAGE = `Start a new project with Halation.
+
+Usage
+  npm create halation <directory> [-- --name "Project name"] [--phenomenon rays]
+  pnpm create halation <directory> [--name "Project name"] [--phenomenon rays]
+
+Options
+  --name <name>          The project's name, shown on the page and used for its seal.
+                         Defaults to the directory name.
+  --phenomenon <name>    The light behind the opening section. Defaults to rays.
+                         One of: ${PHENOMENA.join(", ")}.
+  -h, --help             Show this help.
+`
+
+/** "acme-notes" becomes "Acme Notes". */
+export function titleFromDir(dir) {
+  const words = basename(resolve(dir)).split(/[\s._-]+/).filter(Boolean)
+  if (words.length === 0) return DEFAULT_NAME
+  return words.map((w) => w[0].toUpperCase() + w.slice(1)).join(" ")
+}
+
+/** A valid npm package name from a directory name. */
+export function packageNameFromDir(dir) {
+  const name = basename(resolve(dir))
+    .toLowerCase()
+    .replace(/[^a-z0-9._~-]+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^[._-]+|[-]+$/g, "")
+  return name || "halation-app"
+}
+
+const escapeHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;")
+
+function replaceOnce(file, from, to) {
+  const text = readFileSync(file, "utf8")
+  if (!text.includes(from)) throw new Error(`The template changed: ${basename(file)} no longer contains ${JSON.stringify(from)}.`)
+  writeFileSync(file, text.replace(from, () => to))
+}
+
+/**
+ * Creates a project in `dir` from the template. Throws with a plain message
+ * when the directory isn't empty or an option is wrong.
+ */
+export function create(dir, { name, phenomenon = DEFAULT_PHENOMENON } = {}) {
+  const target = resolve(dir)
+  const projectName = (name ?? titleFromDir(target)).trim() || DEFAULT_NAME
+  if (!PHENOMENA.includes(phenomenon)) {
+    throw new Error(`There's no phenomenon called "${phenomenon}". Choose one of: ${PHENOMENA.join(", ")}.`)
+  }
+  if (existsSync(target)) {
+    const inside = readdirSync(target).filter((f) => !HARMLESS.has(f))
+    if (inside.length > 0) {
+      throw new Error(`${relative(process.cwd(), target) || "This directory"} already has files in it. Choose a new or empty directory so nothing gets overwritten.`)
+    }
+  }
+  mkdirSync(target, { recursive: true })
+  cpSync(TEMPLATE, target, { recursive: true })
+  // npm drops .gitignore files from published packages, so the template carries it as _gitignore.
+  renameSync(join(target, "_gitignore"), join(target, ".gitignore"))
+
+  const pkgFile = join(target, "package.json")
+  const pkg = JSON.parse(readFileSync(pkgFile, "utf8"))
+  pkg.name = packageNameFromDir(target)
+  writeFileSync(pkgFile, JSON.stringify(pkg, null, 2) + "\n")
+
+  const projectFile = join(target, "src", "project.ts")
+  replaceOnce(projectFile, `name: ${JSON.stringify(DEFAULT_NAME)},`, `name: ${JSON.stringify(projectName)},`)
+  replaceOnce(projectFile, `phenomenon: ${JSON.stringify(DEFAULT_PHENOMENON)},`, `phenomenon: ${JSON.stringify(phenomenon)},`)
+  replaceOnce(join(target, "index.html"), `<title>${DEFAULT_NAME}</title>`, `<title>${escapeHtml(projectName)}</title>`)
+  replaceOnce(join(target, "README.md"), `# ${DEFAULT_NAME}`, `# ${projectName}`)
+
+  return { target, name: projectName, packageName: pkg.name, phenomenon }
+}
+
+/** The package manager that ran us, so the next steps use the same one. */
+function packageManager() {
+  const agent = process.env.npm_config_user_agent ?? ""
+  if (agent.startsWith("pnpm")) return "pnpm"
+  if (agent.startsWith("yarn")) return "yarn"
+  if (agent.startsWith("bun")) return "bun"
+  return "npm"
+}
+
+function main(argv) {
+  let parsed
+  try {
+    parsed = parseArgs({
+      args: argv,
+      allowPositionals: true,
+      options: {
+        name: { type: "string" },
+        phenomenon: { type: "string" },
+        help: { type: "boolean", short: "h" },
+      },
+    })
+  } catch (error) {
+    console.error(`${error.message}\n\n${USAGE}`)
+    return 1
+  }
+  const { values, positionals } = parsed
+  if (values.help) {
+    console.log(USAGE)
+    return 0
+  }
+  if (positionals.length > 1) {
+    console.error(`Give one directory, not ${positionals.length}. If the name has spaces, put it in quotes or pass it with --name.\n\n${USAGE}`)
+    return 1
+  }
+  const dir = positionals[0] ?? "my-project"
+
+  let result
+  try {
+    result = create(dir, { name: values.name, phenomenon: values.phenomenon ?? DEFAULT_PHENOMENON })
+  } catch (error) {
+    console.error(error.message)
+    return 1
+  }
+
+  const pm = packageManager()
+  const run = pm === "npm" ? "npm run" : pm
+  const where = relative(process.cwd(), result.target)
+  const steps = [where && `cd ${where.includes(" ") ? JSON.stringify(where) : where}`, `${pm} install`, `${run} dev`].filter(Boolean)
+  console.log(`
+Created ${result.name} in ${where || "this directory"}.
+
+Next, install and start it:
+
+${steps.map((s) => `  ${s}`).join("\n")}
+
+Then open the address it prints. Edit src/App.tsx and the page updates as you save.
+
+Claude Code is already set up here: CLAUDE.md and AGENTS.md explain how to work
+in the project, the Halation skill is in .claude/skills, and a hook runs
+halation lint after every edit. Run ${run} lint to check the house rules yourself.
+`)
+  return 0
+}
+
+// Run directly or through a bin symlink (npm create, pnpm create); not when imported by tests.
+const realpath = (p) => {
+  try {
+    return realpathSync(p)
+  } catch {
+    return p
+  }
+}
+if (process.argv[1] && realpath(process.argv[1]) === realpath(fileURLToPath(import.meta.url))) {
+  process.exitCode = main(process.argv.slice(2))
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "create-halation",
+  "version": "0.1.0",
+  "description": "Start a new React project with Halation: the styles, the components, and an agent kit that keeps every page on-brand.",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "create-halation": "./bin/create-halation.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mandipadk/halation.git",
+    "directory": "packages/create"
+  },
+  "homepage": "https://halation.mandip.dev",
+  "bugs": {
+    "url": "https://github.com/mandipadk/halation/issues"
+  },
+  "scripts": {
+    "build": "node ../cli/bin/halation.js skill > template/.claude/skills/halation/SKILL.md",
+    "test": "node --test \"test/*.test.js\""
+  }
+}

package/template/.claude/settings.json

@@ -0,0 +1,15 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Edit|Write|MultiEdit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "npx --no-install halation lint --hook"
+          }
+        ]
+      }
+    ]
+  }
+}

package/template/.claude/skills/halation/SKILL.md

@@ -0,0 +1,351 @@
+---
+name: halation
+description: The Halation design system's rules and React components for this project. Use when building, styling, reviewing or writing copy for any UI here (components, pages, CSS, Tailwind classes, interface text), and before adding a color, font size, gradient, badge, status indicator, card, icon or animation.
+---
+
+# Halation
+
+This project's look is a set of rules, enforced in code. Build with the components, the ten text styles and the color roles, and the result stays on brand without guessing. `halation lint` and a hook check source as you edit; `halation check` measures the rendered page.
+
+## Set up
+
+```tsx
+import "@halation/react/styles.css"
+import { HalationProvider } from "@halation/react"
+
+export function App({ children }) {
+  return <HalationProvider name="Your project">{children}</HalationProvider>
+}
+```
+
+- The name seeds the project's seal, grain, share card and greeting. Optional: `accent` (vermilion, cobalt, jade, amber), `tempo` (calm, crisp, lively), `theme` (system, light, dark).
+- With Tailwind v4, import `@halation/core/tailwind.css` instead of the styles: only the system's values exist, so `text-sm` or `bg-purple-500` don't generate. Use `text-body-sm`, `bg-surface`, `text-fg-muted`, `border-line`.
+- Before you finish: `npx halation lint` (exits 1 on an error) and, with the app running, `npx halation check http://localhost:3000`.
+- A deliberate exception gets a comment saying `halation-ignore R9` (the rule id) on that line or the line above.
+
+## Principles
+
+- Ink, not color. One accent, spent only where it means something; the main action is ink (R1, R2).
+- Light, not paint. Depth comes from an atmosphere, lit edges and shadows, never decorative gradients (R3, R15).
+- Structure, not strings. Facts get their own lines, states get a word and a shape (R9, R10).
+- Few sizes, plain case. Ten text styles, sentence case, no added tracking (R5, R6, R7).
+- Lines before boxes. A hairline or space first; a box only for an object, never a box in a box (R13).
+- Motion explains a change. Under 300 ms, exits faster than enters, nothing moving while idle (R14).
+- Plain words. Sentence case, short labels; errors say what's wrong and how to fix it.
+
+## Rules
+
+### R1: One accent, used as a signal: identity, focus, selection, live state.
+
+- Don't: Accent-filled cards, headings, icons and buttons all over a page.
+- Do: Neutral surfaces; `text-accent` or `<Button variant="accent">` only for identity, focus, selection or live state.
+- Why: Color that means something is only noticed when it's rare.
+- Instead: Neutral surfaces and ink; the accent only where it carries meaning.
+- Caught by: Theme, page check.
+
+### R2: The one main action is ink: white on dark, black on light.
+
+- Don't: `<Button variant="accent">Save</Button>` next to two other filled buttons.
+- Do: `<Button variant="ink">Save</Button>`, one per view; the rest secondary or ghost.
+- Why: Keeps the accent free to mean something, and the main action obvious in both modes.
+- Instead: An ink button; accent fills only for identity moments.
+- Caught by: Page check.
+
+### R3: No gradients as decoration. Depth comes from light: atmospheres, lit edges, shadows.
+
+- Don't: `className="bg-gradient-to-r from-purple-500 to-pink-500"`, or `background: linear-gradient(...)`.
+- Do: `<Stage phenomenon="rays">` behind the page, or `<Surface elevation="raised">`.
+- Why: Decorative gradients are the most common sign of generated design.
+- Instead: An atmosphere behind the page, or a raised surface.
+- Caught by: Theme, lint.
+
+### R4: Every text and background pair passes WCAG 2 in both modes.
+
+- Don't: Gray text on a tinted panel, checked in light mode only.
+- Do: The text roles (`text-fg`, `text-fg-muted`, `text-fg-subtle`) on the surface roles.
+- Why: Legibility isn't a style choice.
+- Instead: Use the text roles; the forge solves their contrast.
+- Caught by: Forge, page check.
+
+### R5: Sentence case everywhere. No uppercase labels.
+
+- Don't: `className="uppercase"`, `text-transform: uppercase`, or typing a label in capitals.
+- Do: `<Text size="caption" tone="muted">Recent projects</Text>`
+- Why: Capitals shout, and spaced-out capitals are a generated-design cliché.
+- Instead: A smaller or lighter text style.
+- Caught by: Lint, page check.
+
+### R6: No letter-spacing beyond what the text styles set.
+
+- Don't: `tracking-widest`, `tracking-[0.2em]`, `letter-spacing: 0.1em`.
+- Do: The text style alone; each one sets its own tracking.
+- Why: Tracking is tuned per size already; extra spacing is how eyebrows get made.
+- Instead: The text style for that size.
+- Caught by: Theme.
+
+### R7: Ten named text styles; no other sizes.
+
+- Don't: `text-sm`, `text-2xl`, `text-[13px]`, `font-size: 15px`.
+- Do: `<Text size="body-sm">`, `className="text-body-sm"` (Tailwind) or `hl-text-body-sm`.
+- Why: A small scale is what makes pages feel composed.
+- Instead: The nearest style.
+- Caught by: Theme, lint.
+
+### R8: At most one serif phrase in a headline, and only at title sizes and up.
+
+- Don't: Two serif phrases in a headline, or a serif word in body text.
+- Do: `<Heading level={1}>Every app, <Serif>twice</Serif></Heading>`
+- Why: It's an accent in the voice; twice is a costume.
+- Instead: Plain type for everything else.
+- Caught by: Page check.
+
+### R9: Facts are never joined with dots or bars.
+
+- Don't: `<p>Copy of Claude · 412 MB</p>` or `{name} | {size}` in text. <!-- halation-ignore R9 -->
+- Do: `<Facts items={[["Name", "Copy of Claude"], ["Size", "412 MB"]]} />`
+- Why: A joined string has to be parsed; structure can be scanned.
+- Instead: The Facts component, or separate lines with their own weight.
+- Caught by: Lint, page check.
+
+### R10: No status dots, and no tinted pills with a dot and same-hue text.
+
+- Don't: `<span className="size-2 rounded-full bg-green-500" />` before a word, or a tinted pill with a dot.
+- Do: `<State kind="done">Synced</State>`
+- Why: It reads as generated, and color alone doesn't say what the state is.
+- Instead: A word and a shape; only the shape carries color.
+- Caught by: Lint, page check.
+
+### R11: Monospace only inside a surface: keys, code wells, token names on cards.
+
+- Don't: Monospace headings, labels or numbers loose on the page.
+- Do: Monospace inside `<Kbd>`, `<code>` or a surface; numbers in `<Value>`.
+- Why: Loose monospace on the page reads as a terminal, and as generated.
+- Instead: Geist, with tabular figures for numbers.
+- Caught by: Page check.
+
+### R12: Numbers that sit in columns or change use tabular figures.
+
+- Don't: Proportional digits in a table column or a live counter.
+- Do: `<Value>` or `<Count>`, which set tabular figures.
+- Why: They line up and don't jitter as they change.
+- Instead: The value style, which sets tabular figures.
+- Caught by: Theme, page check.
+
+### R13: Hairlines separate; a box only when something must read as an object. Never a box inside a box.
+
+- Don't: Every section in a bordered, rounded box; a card inside a card.
+- Do: `<Divider />` or spacing; `<Surface>` only for a real object.
+- Why: Card soup flattens hierarchy.
+- Instead: A divider or spacing.
+- Caught by: Page check, critic.
+
+### R14: Interface motion stays under 300 ms, exits take 70% of the enter, nothing loops while idle.
+
+- Don't: `duration-500` on a menu, a looping pulse, a shimmering skeleton.
+- Do: The moves and duration tokens below; `<Skeleton>` stays still.
+- Why: Motion should explain a change, never make anyone wait.
+- Instead: The moves and their durations.
+- Caught by: Theme, page check.
+
+### R15: One atmosphere per page, and it dims behind content.
+
+- Don't: Two `<Stage>`s on one page, or a phenomenon at full strength behind body text.
+- Do: One `<Stage>`, with `data-quiet` on the headline it sits behind.
+- Why: An atmosphere is a place, not a decoration.
+- Instead: The page's one light, with its quiet zone.
+- Caught by: Page check.
+
+### R17: Colors come from tokens, never from literal values in markup.
+
+- Don't: `className="bg-[#7c3aed]"`, `style={{ color: "#333" }}`.
+- Do: Color roles: `bg-surface`, `text-fg-muted`, `border-line`, `bg-accent`.
+- Why: A literal color is a color the system can't check, theme or keep in contrast.
+- Instead: A color role: bg-surface, text-fg-muted, border-line and so on.
+- Caught by: Theme, lint.
+
+### R18: Type comes from the project's lens: its display, text and code faces.
+
+- Don't: `font-family: Inter`, `font-['Roboto']`, a bare system stack.
+- Do: `var(--font-sans)`, `var(--font-serif)`, `var(--font-mono)` (`font-sans` in Tailwind).
+- Why: Inter, Roboto and system stacks are the default look of generated design.
+- Instead: The --font-sans, --font-serif and --font-mono tokens.
+- Caught by: Theme, lint.
+
+### R16: Keys in a combination keep a visible gap.
+
+- Don't: `<kbd>⌘</kbd><kbd>K</kbd>` with no gap, or `⌘K` as one string.
+- Do: `<Keys keys={["⌘", "K"]} />`
+- Why: Each key should read as its own key.
+- Instead: The Keys component.
+- Caught by: Lint.
+
+## What to use for what
+
+| Need | Use |
+| --- | --- |
+| Show a state (running, done, failed) | `<State kind="running">Syncing</State>` |
+| Metadata about a thing | `<Facts items={[["Size", "412 MB"]]} />` |
+| A keyboard shortcut | `<Keys keys={["⌘", "K"]} />` |
+| Hero with atmosphere | `<Stage phenomenon="rays">`, with `data-quiet` on the headline |
+| The main action | `<Button variant="ink">`, once per view |
+| Any other action | `<Button>` or `<Button variant="ghost">` |
+| Destructive action | `<Button variant="critical">`, confirmed in a `Dialog` |
+| Headline with an accent phrase | `<Heading level={1}>Every app, <Serif>twice</Serif></Heading>` |
+| Running text or a label | `<Text size="body-sm" tone="muted">` |
+| A number in a column, or with a unit | `<Value unit="MB">412</Value>` |
+| A number that changes | `<Count value={n} />` |
+| Separate two groups | `<Divider />` or spacing |
+| Something that must read as an object | `<Surface elevation="raised">` |
+| Rows of items | `<List>` of `<ListRow title detail trailing />` |
+| A form control with a label and error | `<Field label error><Input /></Field>` |
+| On or off, applied at once | `<Switch label="..." />` |
+| One of a few views | `<SegmentedControl>` or `<Tabs>` |
+| One of many options | `<Select options={...} />` |
+| Extra actions behind a button | `<Menu>` |
+| A label on hover | `<Tooltip content="..." keys={...}>` |
+| A decision before going on | `<Dialog>` |
+| A pull-away panel | `<Sheet>` |
+| Confirm something finished | `useToast()` |
+| Loading placeholder | `<Skeleton />`, still, no shimmer |
+| Entrance on scroll | `<Rise>` |
+| A person | `<Avatar name="..." src={...} />` |
+| An icon | `<icons.CheckIcon />` and the rest, never emoji |
+| The project's mark, credits, share image | `<Seal>`, `<Colophon>`, `<ShareCard>` |
+
+## Components
+
+All from `@halation/react`.
+
+- **HalationProvider**: Wrap the app once. Sets accent, tempo and theme, hosts tooltips and toasts, and puts on the project's signature. `<HalationProvider name="Lumen" accent="vermilion">{children}</HalationProvider>`
+- **Text**: Any running text, in one of the ten styles (size) with an optional tone: muted, subtle, accent or critical. `<Text size="body-sm" tone="muted">Synced a minute ago</Text>`
+- **Heading**: Headlines. level sets the element and its default style (1 is display-xl, 3 is title-1); size overrides the style. `<Heading level={3}>Storage</Heading>`
+- **Serif**: The one italic serif phrase inside a headline, at title sizes and up (R8). `<Heading level={1}>Every app, <Serif>twice</Serif></Heading>`
+- **Value**: A number with tabular figures and a quieter unit. `<Value unit="MB">412</Value>`
+- **Button**: Actions. One ink button per view for the main action; secondary (the default) or ghost for the rest; critical for destructive ones. busy/busyLabel and done/doneLabel change the label in place. `<Button variant="ink" busy={saving} busyLabel="Saving" done={saved} doneLabel="Saved">Save changes</Button>`
+- **Kbd**: A single key. `<Kbd>Esc</Kbd>`
+- **Keys**: A keyboard shortcut; each key on its own cap with a gap (R16). `<Keys keys={["⌘", "K"]} />`
+- **State**: A status as a word and a glyph, never a colored dot (R10). Kinds: running, done, selected, info, draft, warning, critical. `<State kind="running">Syncing</State>`
+- **Facts**: Metadata about a thing: labels and values on their own lines, instead of facts joined with dots (R9). `<Facts items={[["Size", "412 MB"], ["Updated", "Today"]]} />`
+- **Fact**: One label and value inside Facts, when the value is richer than a string. `<Facts><Fact label="Size"><Value unit="MB">412</Value></Fact></Facts>`
+- **Surface**: A box, only when something must read as an object (R13). elevation: flat, raised or overlay. Never put one inside another. `<Surface elevation="raised"><Text>Drop files here</Text></Surface>`
+- **Divider**: A hairline between groups; the first choice before a box. `<Divider />`
+- **List**: A list of rows separated by hairlines. `<List><ListRow title="Claude" detail="412 MB" /></List>`
+- **ListRow**: A row: something leading, a title with an optional detail, and something trailing. selected marks it chosen. `<ListRow leading={<Avatar name="Ada Lovelace" />} title="Ada Lovelace" detail="Owner" trailing={<Button variant="ghost" size="sm">Remove</Button>} />`
+- **Field**: A labelled control with an optional description and an error that says what's wrong and how to fix it. `<Field label="Project name" description="Shown on the seal." error={error}><Input name="name" /></Field>`
+- **Input**: A single-line text input, usually inside Field. `<Input name="email" type="email" />`
+- **Textarea**: Multi-line text, inside Field. `<Field label="Notes"><Textarea rows={4} /></Field>`
+- **Checkbox**: An independent yes or no that takes effect when the form is saved. `<Checkbox label="Email me when it's done" defaultChecked />`
+- **Radio**: One option in a RadioGroup. `<Radio value="weekly" label="Weekly" />`
+- **RadioGroup**: One choice out of a few, with each option visible. `<RadioGroup defaultValue="weekly"><Radio value="daily" label="Daily" /><Radio value="weekly" label="Weekly" /></RadioGroup>`
+- **Switch**: An on or off setting that takes effect at once. `<Switch label="Sync automatically" defaultChecked />`
+- **Slider**: A value picked from a range. `<Slider defaultValue={40} min={0} max={100} />`
+- **SegmentedControl**: One of two to five views or modes, side by side. `<SegmentedControl aria-label="View" defaultValue="list" options={[{ value: "list", label: "List" }, { value: "grid", label: "Grid" }]} />`
+- **Tabs**: Switching between panels of one page; the indicator glides between tabs. `<Tabs.Root defaultValue="files"><Tabs.List><Tabs.Tab value="files">Files</Tabs.Tab><Tabs.Tab value="activity">Activity</Tabs.Tab></Tabs.List><Tabs.Panel value="files">{files}</Tabs.Panel><Tabs.Panel value="activity">{activity}</Tabs.Panel></Tabs.Root>`
+- **Menu**: Actions tucked behind a button. Items take an icon, keys for their shortcut, and tone="critical". `<Menu.Root><Menu.Trigger render={<Button>Options</Button>} /><Menu.Popup><Menu.Item keys={["⌘", "D"]}>Duplicate</Menu.Item><Menu.Separator /><Menu.Item tone="critical">Delete</Menu.Item></Menu.Popup></Menu.Root>`
+- **Popover**: More detail or a small form anchored to a control. `<Popover.Root><Popover.Trigger render={<Button>Details</Button>} /><Popover.Popup title="Storage" description="What this project keeps on disk.">{details}</Popover.Popup></Popover.Root>`
+- **Tooltip**: A short label for a control on hover or focus, with an optional shortcut. `<Tooltip content="Duplicate" keys={["⌘", "D"]}><Button>Duplicate</Button></Tooltip>`
+- **TooltipProvider**: Shares tooltip timing. HalationProvider already includes it; use it only for tooltips rendered outside the provider. `<TooltipProvider>{children}</TooltipProvider>`
+- **Select**: One choice out of many, in a list. `<Select aria-label="Accent" defaultValue="vermilion" options={[{ value: "vermilion", label: "Vermilion" }, { value: "cobalt", label: "Cobalt" }]} />`
+- **Dialog**: A decision that has to be made before going on. The page behind softens. `<Dialog.Root><Dialog.Trigger render={<Button variant="critical">Delete project</Button>} /><Dialog.Popup title="Delete this project?" description="Its files stay on disk." actions={<><Dialog.Close render={<Button>Cancel</Button>} /><Button variant="critical">Delete</Button></>} /></Dialog.Root>`
+- **Sheet**: A panel you can pull away, from the bottom or the right, for filters, details or mobile menus. `<Sheet.Root side="right"><Sheet.Trigger render={<Button>Filters</Button>} /><Sheet.Popup title="Filters" side="right">{filters}</Sheet.Popup></Sheet.Root>`
+- **ToastProvider**: Hosts toasts. HalationProvider already includes it. `<ToastProvider>{children}</ToastProvider>`
+- **useToast**: Confirms something finished, or reports a failure, without interrupting. `const toast = useToast(); toast({ title: "Saved", type: "success" })`
+- **Avatar**: A person, as a photo or their initials. `<Avatar name="Ada Lovelace" src={photo} />`
+- **Skeleton**: A still placeholder while content loads. It never shimmers. `<Skeleton width={160} />`
+- **Count**: A number that changes; its digits roll to the new value. `<Count value={downloads} />`
+- **Rise**: Content that arrives in reading order out of a soft blur, once, when first seen. `<Rise as="section"><Heading>What it does</Heading><Text>{summary}</Text></Rise>`
+- **Stage**: A hero with atmosphere: one phenomenon behind content, one per page (R15). Mark the headline data-quiet so it dims behind it. `<Stage phenomenon="caustics" settleAfter={12}><Heading level={1} data-quiet>Light on water</Heading></Stage>`
+- **Seal**: The project's mark, generated from its name. Alt, Shift and a click opens the darkroom. `<Seal name="Lumen" chime />`
+- **Colophon**: The credits in a footer: what the project is made of. `<Colophon name="Lumen" character={character} />`
+- **Grain**: Still film grain seeded by the name, laid over a stage or image. `<Grain name="Lumen" />`
+- **ShareCard**: The social share image, drawn from the name, a line and the accent. `<ShareCard name="Lumen" line="Every app, twice" />`
+- **useDevelop**: Develops an element like a print, once per visitor. For a landing hero. `const hero = useRef(null); useDevelop(hero)`
+- **darkroom**: Opens or closes the darkroom inspector from code. `darkroom.enter()`
+- **useDarkroom**: Whether the darkroom is open, for a button that enters and leaves it. `const open = useDarkroom()`
+- **icons**: The system's glyphs: CheckIcon, PlayIcon, WrenchIcon, StopIcon, PencilIcon, InfoIcon, AlertIcon, ChevronIcon, CloseIcon. Use these or a real icon set, never emoji. `<icons.CheckIcon />`
+
+## The ten text styles
+
+Use `<Text size>`, `<Heading size>`, `hl-text-<name>`, or `text-<name>` in Tailwind. No other sizes.
+
+| Style | Size | For |
+| --- | --- | --- |
+| display-xl | 52 to 116 px, fluid | The one hero line on a page. |
+| display | 36 to 60 px, fluid | Section headlines on marketing pages. |
+| title-1 | 28 to 36 px, fluid | Page titles in products; dialog heroes. |
+| title-2 | 24 px | Section titles inside a page. |
+| title-3 | 20 px | Card and group titles. |
+| body-lg | 18 px | Lead paragraphs under a headline. |
+| body | 16 px | Reading text. |
+| body-sm | 14 px | Interface text: controls, lists, tables. |
+| caption | 13 px | Metadata, helper text, footnotes. |
+| micro | 12 px | Badges, keyboard keys, counters. Never sentences. |
+
+## Phenomena
+
+The atmosphere behind a hero: `<Stage phenomenon="...">`. One per page, dimmed behind the element marked `data-quiet`. Foil presses the heading marked `data-press`. `daylight` follows the visitor's time of day; `settleAfter` (seconds) eases the motion to a stop. Each holds a still frame for reduced motion.
+
+| Name | Group | What it is |
+| --- | --- | --- |
+| rays | Light | Crepuscular rays from above the frame |
+| blinds | Light | Late sun through a window with blinds |
+| caustics | Light | Light on a pool floor |
+| halation | Light | The glow film gives bright things |
+| stir | Air | A shaft of light, and the air in it |
+| ink | Air | A fluid you stir |
+| ripple | Water | Still water over a tiled floor |
+| silk | Matter | A satin drape |
+| foil | Matter | Letterpress and foil |
+| growth | Life | Reaction-diffusion |
+
+## Motion
+
+- Interface motion stays under 300 ms. Exits take 70% of the enter. Nothing loops while idle; skeletons don't shimmer.
+- Ease out is the default. There's no ease-in: things leave the way they arrive, only faster.
+- Stagger 50 ms between items, and stagger at most 6.
+- Reduced motion turns moves into short fades (200 ms at most).
+- Tempo scales every duration: calm 1.25x, crisp 1x, lively 0.85x. Set it on the provider.
+- Scripted motion comes from `@halation/core/motion`: `play`, `spring` (carries velocity, retargets mid-flight), `rise`, `setTempo`.
+
+| Duration token | ms | For |
+| --- | --- | --- |
+| --duration-press | 120 | Press feedback (scale to 0.97). |
+| --duration-hover | 150 | Hover color and fill changes. |
+| --duration-popover | 180 | Tooltips, menus, popovers; exits of anything. |
+| --duration-dialog | 240 | Dialogs, toasts, panels. |
+| --duration-sheet | 500 | Sheets and drawers that follow a drag (with ease-drawer). |
+| --duration-reveal | 600 | The one-time blur rise on page entrance and scroll. |
+
+| Easing token | For |
+| --- | --- |
+| --ease-out | Anything entering, leaving or responding. The default. |
+| --ease-in-out | Something moving or morphing between two places on screen. |
+| --ease-drawer | Sheets and drawers that follow a drag. |
+| --ease-spring | Things that snap into place: toggles, drag release. Never menus or text. |
+
+The moves, built into the components:
+
+- Press: A pressed control scales to 0.97.
+- Unfold: Menus and popovers grow out of the control that opened them.
+- Focus pull: The page behind a dialog softens while the dialog comes into focus.
+- Glide: The tab indicator moves between tabs on the in-out curve.
+- Settle: A switch thumb springs across.
+- Bloom: A button blooms once in the halation color when its work is done.
+- Stack: Toasts stack with depth and fan out when pointed at.
+- Rise: Content arrives in reading order out of a soft blur, once.
+
+## Tells of generated design
+
+Never ship these:
+
+- Purple or violet gradients, gradient text, glowing blobs behind cards (R3, R1).
+- Inter, Roboto or a bare system stack as the typeface (R18).
+- Uppercase, letter-spaced eyebrows above headlines (R5, R6).
+- Facts joined in one string with a middle dot, bullet or bar (R9).
+- Status dots, and tinted pills with a dot and same-hue text (R10).
+- Card soup: every section in a bordered, rounded box, boxes inside boxes (R13).
+- Emoji as icons. Use `icons` from @halation/react or a real icon set.
+- Several filled, colored buttons competing for the main action (R1, R2).
+- Monospace sprinkled on labels and numbers for a technical look (R11).
+- Shimmering skeletons, pulsing badges, anything looping while idle (R14).
+- Arbitrary sizes such as `text-[13px]` between the styles (R7).

package/template/AGENTS.md

@@ -0,0 +1,30 @@
+# Working in this project
+
+This is a React app built with Halation, a design system that holds the project's taste as rules. Keep every change inside those rules.
+
+## Before you change the interface
+
+Read the Halation skill in `.claude/skills/halation/SKILL.md`. It lists the components, the text styles, the tokens and the rules, with what to use instead of each thing the rules forbid.
+
+Build with the components from `@halation/react` before writing your own markup. The project's name and its phenomenon live in `src/project.ts`.
+
+## After every change
+
+Run `pnpm lint` (or `npm run lint`). It checks `src` against the rules and says how to fix what it finds. In Claude Code, a hook runs it after every edit, so fix what it reports before moving on.
+
+With the dev server running, `pnpm check` measures the rendered page in light and dark mode: contrast, stray capitals, dots, status dots and slow motion.
+
+Run `pnpm build` before you call a change done. TypeScript must pass with no errors.
+
+## The rules in short
+
+- Sentence case everywhere. No uppercase labels and no letter-spaced eyebrows.
+- Facts go in `Facts` or on separate lines. Never join them with `·`, `•` or a bar.
+- Show a state with `State`, never a colored dot.
+- Text comes in ten styles: `display-xl`, `display`, `title-1`, `title-2`, `title-3`, `body-lg`, `body`, `body-sm`, `caption` and `micro`. Use `Text`, `Heading` or the `hl-text-*` classes, not other sizes.
+- Colors come from the tokens (`var(--color-fg)`, `var(--color-accent)` and the rest), never from literal values.
+- No gradients as decoration. Depth comes from the phenomenon on the `Stage`, lit edges and shadows.
+- One ink button per view: the main action. Everything else is secondary or ghost.
+- At most one `Serif` phrase in a headline.
+- One phenomenon per page, and it dims behind content marked `data-quiet`.
+- Write plain, specific copy. A button says what happens when you press it.

package/template/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/template/README.md

@@ -0,0 +1,20 @@
+# My project
+
+A React app built with [Halation](https://www.npmjs.com/package/@halation/react), Vite and TypeScript.
+
+## Commands
+
+- `pnpm dev` starts the app and reloads it as you save.
+- `pnpm build` checks the types and builds the app into `dist`.
+- `pnpm preview` serves the built app.
+- `pnpm lint` checks `src` against Halation's rules.
+- `pnpm check` measures the running page in light and dark mode.
+
+Use `npm run` in place of `pnpm` if you installed with npm.
+
+## Where things are
+
+- `src/project.ts` holds the project's name and the phenomenon behind the opening section.
+- `src/App.tsx` is the page. Start here.
+- `src/app.css` lays the page out, using Halation's tokens.
+- `AGENTS.md`, `CLAUDE.md` and `.claude/` set up coding agents to follow the same rules you do.

package/template/_gitignore

@@ -0,0 +1,6 @@
+node_modules/
+dist/
+.DS_Store
+*.log
+*.local
+.claude/settings.local.json

package/template/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>My project</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=Geist+Mono:wght@400..500&family=Instrument+Serif:ital@0;1&display=swap" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "my-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "halation lint src",
+    "check": "halation check http://localhost:5173"
+  },
+  "dependencies": {
+    "@halation/react": "^0.1.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "devDependencies": {
+    "@halation/cli": "^0.1.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "playwright-core": "^1.63.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.1"
+  }
+}

package/template/src/App.tsx

@@ -0,0 +1,134 @@
+import { Button, Count, Facts, Heading, Keys, List, ListRow, Rise, Seal, Serif, Stage, State, Surface, Text, useToast, type StateKind } from "@halation/react"
+import { useEffect, useState } from "react"
+import { NewTaskDialog } from "./NewTaskDialog.tsx"
+import { project } from "./project.ts"
+
+type Task = { id: number; title: string; detail: string; status: "done" | "doing" | "todo" }
+
+const STATUS: Record<Task["status"], { kind: StateKind; label: string }> = {
+  done: { kind: "done", label: "Done" },
+  doing: { kind: "running", label: "In progress" },
+  todo: { kind: "draft", label: "Not started" },
+}
+
+const light = project.phenomenon[0].toUpperCase() + project.phenomenon.slice(1)
+
+const FIRST_TASKS: Task[] = [
+  { id: 1, title: "Name the project", detail: "It lives in src/project.ts", status: "done" },
+  { id: 2, title: "Choose the light behind the opening", detail: `${light}, following the visitor's time of day`, status: "done" },
+  { id: 3, title: "Write the first real page", detail: "Replace this one in src/App.tsx", status: "doing" },
+  { id: 4, title: "Check the house rules", detail: "pnpm lint reads src and says what to fix", status: "todo" },
+]
+
+export function App() {
+  const toast = useToast()
+  const [tasks, setTasks] = useState(FIRST_TASKS)
+  const [adding, setAdding] = useState(false)
+  const done = tasks.filter((t) => t.status === "done").length
+
+  // N adds a task from anywhere on the page, unless you're typing.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() !== "n" || e.metaKey || e.ctrlKey || e.altKey || adding) return
+      const target = e.target
+      if (target instanceof HTMLElement && (target.isContentEditable || target.closest("input, textarea, select"))) return
+      e.preventDefault()
+      setAdding(true)
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [adding])
+
+  const addTask = (title: string) => {
+    setTasks((all) => [...all, { id: Date.now(), title, detail: "Added just now", status: "todo" }])
+    toast({ title: "Task added", description: title, type: "success" })
+  }
+
+  const markDone = (task: Task) => {
+    setTasks((all) => all.map((t) => (t.id === task.id ? { ...t, status: "done" } : t)))
+    toast({ title: "Marked done", description: task.title, type: "success" })
+  }
+
+  return (
+    <>
+      <Stage phenomenon={project.phenomenon} daylight className="hero">
+        <Rise className="hero-copy" data-quiet="">
+          <Heading level={1} data-press={project.phenomenon === "foil" ? "" : undefined}>
+            <Serif>{project.name}</Serif> starts here
+          </Heading>
+          <Text size="body-lg" tone="muted" className="lead">
+            A React app with Halation already in place: the styles, the components, and the rules that keep every page consistent. Edit src/App.tsx and this page changes as you save.
+          </Text>
+          <div className="actions">
+            <Button variant="ink" shape="pill" size="lg" onClick={() => setAdding(true)}>
+              Add a task
+            </Button>
+            <Button shape="pill" size="lg" onClick={() => document.getElementById("checklist")?.scrollIntoView({ behavior: "smooth" })}>
+              Go to the checklist
+            </Button>
+          </div>
+        </Rise>
+      </Stage>
+
+      <main className="page">
+        <section id="checklist" className="checklist" aria-labelledby="checklist-title">
+          <div className="section-head">
+            <Heading level={2} size="title-2" id="checklist-title">
+              Getting started
+            </Heading>
+            <Text size="body-sm" tone="muted">
+              <Count value={done} /> of {tasks.length} done
+            </Text>
+          </div>
+          <Surface elevation="raised" padding="none">
+            <List>
+              {tasks.map((task) => (
+                <ListRow
+                  key={task.id}
+                  title={task.title}
+                  detail={task.detail}
+                  trailing={
+                    <div className="row-end">
+                      {task.status === "done" ? null : (
+                        <Button variant="ghost" size="sm" onClick={() => markDone(task)}>
+                          Mark done
+                        </Button>
+                      )}
+                      <State kind={STATUS[task.status].kind}>{STATUS[task.status].label}</State>
+                    </div>
+                  }
+                />
+              ))}
+            </List>
+          </Surface>
+          <Text size="caption" tone="muted">
+            Press <Keys keys={["N"]} /> to add a task from anywhere on the page.
+          </Text>
+        </section>
+
+        <aside className="about" aria-labelledby="about-title">
+          <Heading level={2} size="title-3" id="about-title">
+            About this project
+          </Heading>
+          <Facts
+            items={[
+              ["Name", project.name],
+              ["Light", light],
+              ["Built with", "React, Vite and Halation"],
+              ["House rules", "Checked by pnpm lint"],
+            ]}
+          />
+        </aside>
+      </main>
+
+      <footer className="footer">
+        <Seal name={project.name} size={32} />
+        <Text size="caption" tone="muted">
+          This seal is drawn from the project's name. Hold <Keys keys={["Alt", "Shift"]} /> and click it to see how the page is put together.
+        </Text>
+      </footer>
+
+      <NewTaskDialog open={adding} onOpenChange={setAdding} onAdd={addTask} />
+    </>
+  )
+}

package/template/src/NewTaskDialog.tsx

@@ -0,0 +1,54 @@
+import { Button, Dialog, Field, Input } from "@halation/react"
+import { useState, type FormEvent } from "react"
+
+type Props = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onAdd: (title: string) => void
+}
+
+/** A dialog is its own view, so its one main action is ink. */
+export function NewTaskDialog({ open, onOpenChange, onAdd }: Props) {
+  const [title, setTitle] = useState("")
+  const [error, setError] = useState<string>()
+
+  const close = (next: boolean) => {
+    onOpenChange(next)
+    if (!next) setError(undefined)
+  }
+
+  const submit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const name = title.trim()
+    if (!name) {
+      setError("Give the task a name first, for example “Write the pricing page”.")
+      return
+    }
+    onAdd(name)
+    setTitle("")
+    close(false)
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={close}>
+      <Dialog.Popup
+        title="Add a task"
+        description="It goes to the end of the checklist."
+        actions={
+          <>
+            <Dialog.Close render={<Button variant="ghost" />}>Cancel</Dialog.Close>
+            <Button variant="ink" type="submit" form="new-task">
+              Add task
+            </Button>
+          </>
+        }
+      >
+        <form id="new-task" onSubmit={submit} noValidate>
+          <Field label="Task" error={error}>
+            <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Write the pricing page" autoFocus />
+          </Field>
+        </form>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}

package/template/src/app.css

@@ -0,0 +1,101 @@
+/* The page's layout. Color, type and motion come from Halation; this file
+   only places things, using the spacing token (--spacing is 4px). */
+
+.hero {
+  display: grid;
+  align-items: end;
+  min-height: min(80svh, 760px);
+  padding: calc(var(--spacing) * 28) calc(var(--spacing) * 6) calc(var(--spacing) * 16);
+}
+
+.hero-copy,
+.page,
+.footer {
+  width: 100%;
+  max-width: 1080px;
+  margin-inline: auto;
+}
+
+.hero-copy {
+  display: grid;
+  justify-items: start;
+  gap: calc(var(--spacing) * 6);
+}
+
+.lead {
+  max-width: 38rem;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--spacing) * 3);
+  padding-top: calc(var(--spacing) * 2);
+}
+
+.page {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 18rem;
+  align-items: start;
+  gap: calc(var(--spacing) * 16);
+  padding: calc(var(--spacing) * 16) calc(var(--spacing) * 6);
+}
+
+.checklist {
+  display: grid;
+  gap: calc(var(--spacing) * 4);
+  scroll-margin-top: calc(var(--spacing) * 8);
+}
+
+.section-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: calc(var(--spacing) * 4);
+}
+
+.row-end {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: calc(var(--spacing) * 2);
+}
+
+.about {
+  display: grid;
+  gap: calc(var(--spacing) * 4);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 3);
+  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 6) calc(var(--spacing) * 12);
+  box-shadow: inset 0 1px 0 var(--color-line);
+}
+
+@media (max-width: 760px) {
+  .hero {
+    min-height: 70svh;
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .page {
+    grid-template-columns: minmax(0, 1fr);
+    gap: calc(var(--spacing) * 12);
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .footer {
+    align-items: flex-start;
+    padding-inline: calc(var(--spacing) * 4);
+  }
+}
+
+@media (max-width: 520px) {
+  .row-end {
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    gap: var(--spacing);
+  }
+}

package/template/src/main.tsx

@@ -0,0 +1,15 @@
+import "@halation/react/styles.css"
+import "./app.css"
+import { HalationProvider } from "@halation/react"
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { App } from "./App.tsx"
+import { project } from "./project.ts"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <HalationProvider name={project.name}>
+      <App />
+    </HalationProvider>
+  </StrictMode>,
+)

package/template/src/project.ts

@@ -0,0 +1,10 @@
+import type { PhenomenonName } from "@halation/react"
+
+/**
+ * The project's name and the light behind its opening section. The seal,
+ * the grain and the console greeting are all drawn from the name.
+ */
+export const project: { name: string; phenomenon: PhenomenonName } = {
+  name: "My project",
+  phenomenon: "rays",
+}

package/template/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "types": ["vite/client"],
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/template/vite.config.ts

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