mikuru 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.0.2
+
+- Reworked the README for npm package consumers with CLI-first setup, Vite integration, package exports, TypeScript declarations, and v1 limits.
+- Updated npm usage docs and release documentation to match the published package contents.
+- Updated the starter template to depend on `mikuru@^1.0.2`.
+
+## 1.0.1
+
+- Added the `mikuru` CLI with `mikuru create [project-name]`.
+- Added a Vite starter template that shows a Mikuru welcome screen and counter after setup.
+- Added create CLI smoke coverage and included it in CI.
+
 ## 1.0.0
 
 - Stabilized the v1 SFC compiler surface for `.mikuru` files.
@@ -7,8 +19,8 @@
 - Added `v-if` / `v-else-if` / `v-else`, `v-show`, `v-for`, `v-model`, DOM event modifiers, style injection, and basic scoped CSS support.
 - Added CI, library build checks, basic example build checks, and browser E2E coverage.
 - Added a realworld example, public package smoke test, parser-limit coverage, debug sourceURL support, and performance smoke coverage.
-- Added v3 source maps, keyed `v-for` reuse, npm pack smoke coverage, and a v1 API contract.
-- Added a dogfood notes app written in Mikuru to exercise daily authoring flows.
-- Added generated DOM coverage for keyed insert/remove/reorder behavior, component cleanup, and slot cleanup.
-- Added explicit unsupported-syntax errors with source frames, Vite error forwarding coverage, and debug `sourceURL` path normalization coverage.
-- Documented runtime helpers including `nextTick`, `watch`, lifecycle callbacks, `provide`, and `inject`.
+- Added v3 source maps, keyed `v-for` reuse, npm pack smoke coverage, and a v1 API contract.
+- Added a dogfood notes app written in Mikuru to exercise daily authoring flows.
+- Added generated DOM coverage for keyed insert/remove/reorder behavior, component cleanup, and slot cleanup.
+- Added explicit unsupported-syntax errors with source frames, Vite error forwarding coverage, and debug `sourceURL` path normalization coverage.
+- Documented runtime helpers including `nextTick`, `watch`, lifecycle callbacks, `provide`, and `inject`.

package/README.md

@@ -1,18 +1,48 @@
 # Mikuru
 
-Mikuruは、Vueの書き心地を残しながら、Svelte寄りにDOM更新コードを生成するコンパイル型JavaScriptフレームワークです。
+Mikuru is a compile-first JavaScript framework for Vue-like single-file components that generate direct DOM update code instead of using a virtual DOM.
 
-Vueのように単一ファイルコンポーネントと宣言的なテンプレートで書き、Svelteのようにビルド時にテンプレートを解析して、仮想DOMに依存しない小さなJavaScriptへ変換することを目指します。
+It is intentionally small. Mikuru v1 is a practical validation release for writing `.mikuru` components in Vite apps, not a Vue compatibility layer.
 
-## 目標
+## Requirements
 
-- `.mikuru` ファイルでコンポーネントを書く。
-- `<template>` / `<script>` / `<style>` のSFC構造を使う。
-- `ref`、`computed`、`effect` 風の小さなリアクティビティを提供する。
-- `{{ value }}`、`@click` / `v-on:click`、`:class` / `v-bind:class`、`v-if`、`v-for` のようなVue風テンプレート構文を使う。
-- コンパイラが更新箇所を静的に把握し、直接DOMを更新するコードを生成する。
+- Node.js 22 or newer
+- Vite 8 or newer for app development
 
-## 最小サンプル
+## Create a New App
+
+The fastest way to try Mikuru is the package CLI:
+
+```sh
+npx mikuru create my-app
+cd my-app
+npm install
+npm run dev
+```
+
+The generated starter includes Vite, TypeScript, a `.mikuru` module declaration, and a welcome component at `src/App.mikuru`.
+
+## Add Mikuru to a Vite App
+
+Install Mikuru and the Vite tooling:
+
+```sh
+npm install mikuru
+npm install -D vite typescript
+```
+
+Configure Vite:
+
+```ts
+import { defineConfig } from "vite";
+import { mikuru } from "mikuru/vite";
+
+export default defineConfig({
+  plugins: [mikuru()]
+});
+```
+
+Create a `.mikuru` component:
 
 ```mikuru
 <template>
@@ -36,107 +66,124 @@ button {
 </style>
 ```
 
-このコンポーネントは、概念的に次のようなJavaScript moduleへ変換されます。
+Mount it from your app entry:
+
+```ts
+import { mount } from "./App.mikuru";
 
-```js
-import { ref, effect } from "mikuru/runtime";
+const app = document.querySelector("#app");
 
-export function mount(target) {
-  const count = ref(0);
-  const button = document.createElement("button");
+if (!app) {
+  throw new Error("Missing #app");
+}
+
+mount(app);
+```
 
-  function increment() {
-    count.value += 1;
-  }
+## TypeScript Declarations
 
-  button.addEventListener("click", increment);
+Until Mikuru ships global `.mikuru` declarations, add a local declaration file such as `src/mikuru-env.d.ts`:
 
-  effect(() => {
-    button.textContent = `count: ${count.value}`;
-  });
+```ts
+declare module "*.mikuru" {
+  export type MikuruComponentInstance = {
+    element: Element | Comment;
+    unmount(): void;
+  };
 
-  target.appendChild(button);
+  export function mount(
+    target: Element | DocumentFragment,
+    props?: Record<string, unknown>
+  ): MikuruComponentInstance;
+
+  const component: {
+    mount: typeof mount;
+  };
+
+  export default component;
 }
 ```
 
-## v1範囲
+## Supported v1 Surface
+
+- `.mikuru` SFCs with `<template>`, `<script>`, and `<style>`
+- Vite plugin support through `mikuru/vite`
+- Template interpolation with `{{ value }}`
+- DOM events with `@click`, `v-on:click`, `.prevent`, and `.stop`
+- Attribute bindings with `:class` and `v-bind:class`
+- `v-if`, `v-else-if`, `v-else`, `v-show`, and `v-for`
+- `v-model` for common form controls and child components
+- Component props, events, `defineProps`, `defineEmits`, and default slots
+- Runtime helpers including `ref`, `computed`, `effect`, `watch`, `nextTick`, lifecycle callbacks, `provide`, and `inject`
+- Style injection and basic `<style scoped>` selector rewriting
+- Compile errors with filenames, line/column information, and code frames
+
+## Package Exports
+
+Application code usually imports from `mikuru`:
 
-v1の成功条件は、Vue風の小さなSFC体験をVite上で実用的に書け、ブラウザで安定して動かせることです。最初のカウンターMVPは土台として維持し、v1では親子コンポーネント、フォーム入力、条件分岐、リスト表示、style注入までを公開対象として固定します。
+```ts
+import { computed, ref } from "mikuru";
+```
 
-v1では次の機能を対象にします。
+The Vite plugin is available from `mikuru/vite`:
 
-- SFC分割: `<template>`、`<script>`、`<style>`
-- Vite plugin: `.mikuru` importをJavaScript moduleへ変換
-- テキスト補間: `{{ count }}`
-- イベント: `@click="increment"`、`v-on:click="increment"`、DOMイベントの `.prevent` / `.stop`
-- 属性バインド: `:class="className"`、`v-bind:class="className"`
-- class正規化: `:class="['base', { active }]"` の配列・オブジェクト形式
-- フォーム同期: `input` / `textarea` / `checkbox` / `select` の `v-model`
-- 条件分岐: `v-if` / `v-else-if` / `v-else`
-- 表示切り替え: `v-show="visible"`
-- 繰り返し: `v-for="item in items"`、`v-for="(item, index) in items"`、`of` エイリアス
-- コンポーネント合成: `<Child :count="count" @select="select" />` のprops/event受け渡し、`v-model`
-- default slot: `<Panel>content</Panel>` と子側の `<slot />`
-- props宣言: `const { title } = defineProps()` のコンパイル専用API
-- emits宣言: `const emit = defineEmits()` で親の `@event` ハンドラを呼び出し
-- style注入: `<style>` をmount時に一度だけdocumentへ追加し、`<style scoped>` の基本セレクタを書き換える
-- unmount: 生成コンポーネントがイベント、effect、子コンポーネントを破棄する
-- パーサ強化: コメント、シングルクォート属性、属性値内の `>`、void要素に対応
-- 式検証: テンプレート式をExpressionとして検証し、文や代入など危険な構文を拒否
-- エラー表示: コンパイルエラーにファイル名、行、列、コードフレームを付与
-- 小さなランタイム: `ref`、`computed`、`effect`
+```ts
+import { mikuru } from "mikuru/vite";
+```
 
-## v1の非目標
+Compiler and runtime entries are public for lower-level integrations:
 
-MikuruはVue完全互換を目指しません。SSR、hydration、transition、devtools、完全なテンプレート型チェック、Vue互換を名乗るための広範な仕様追従はv1後に検討します。scoped CSSはv1では基本セレクタのみを対象にし、`:global()`、深いセレクタ、複雑なネスト規則は後続課題です。
+```ts
+import { compile } from "mikuru/compiler";
+import { effect, nextTick, ref, unwrap, watch } from "mikuru/runtime";
+```
 
-## 開発
+The package also provides the `mikuru` binary:
+
+```sh
+npx mikuru create my-app
+```
+
+## Not Included in v1
+
+Mikuru does not claim Vue compatibility. The v1 package does not include SSR, hydration, transitions, devtools, named slots, slot props, dynamic components, `v-html`, object-form `v-bind` / `v-on`, or full template type checking.
+
+Scoped CSS is a basic selector rewrite, not a full CSS compiler. Avoid relying on `:global()`, deep selectors, complex nesting, CSS Modules, or preprocessors in v1.
+
+## Repository Development
+
+For local framework development:
 
 ```sh
 npm install
 npm run ci
 ```
 
-個別に確認する場合は次を使います。
+Useful targeted checks:
 
 ```sh
 npm run typecheck
 npm test
 npm run build
-npm run build:basic
-npm run build:realworld
-npm run build:dogfood
-npm run test:package
-npm run test:pack
-npm run test:e2e
-npm run test:e2e:dogfood
-```
-
-公式exampleはViteで起動できます。
+npm run test:create
+npm run test:package
+npm run test:pack
+npm run test:e2e
+```
 
-```sh
-npm run dev:basic
-npm run dev:realworld
-npm run dev:dogfood
-```
-
-用途は次の通りです。
-
-- `examples/basic`: カウンター、props/events、component `v-model`、default slot の最小確認
-- `examples/realworld`: 検索、フォーム、keyed list を含むアプリ風の検証
-- `examples/dogfood`: Mikuru自身で書いた notes app による日常的な書き心地の検証
-- `examples/mikuru-sample` / `examples/mikuru-vue-like`: 追加の手書きDOM/runtimeサンプル
-
-表示するときは、ブラウザで example の `index.html` を直接開かず、Viteが表示するローカルURLを開いてください。`.ts` と `.mikuru` はVite pluginで変換されます。
-
-exampleを本番ビルドする場合は次を使います。
+Examples can be run from the repository root:
 
 ```sh
-npm run build:basic
-npm run build:realworld
-npm run build:dogfood
+npm run dev:basic
+npm run dev:realworld
+npm run dev:dogfood
+npm run dev:mikuru-sample
+npm run dev:mikuru-vue-like
 ```
 
-## 補足
-
-Mikuru v1は、Vue完全互換ではなく小さなVue風SFCサブセットです。設計文書、対応構文、非対応構文、リリース前チェック項目などの詳細文書は内部資料として扱います。
+## Documentation
+
+- `CHANGELOG.md` lists published package changes.
+- `docs/npm-usage.md` shows a manual Vite setup for package consumers.
+- `docs/v1-api-contract.md` describes the v1 compatibility boundary used by this repository.

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { basename, dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+const command = process.argv[2];
+const targetArg = process.argv[3];
+if (command === "--help" || command === "-h" || !command) {
+    printHelp();
+    process.exit(0);
+}
+if (command !== "create") {
+    console.error(`Unknown command: ${command}`);
+    printHelp();
+    process.exit(1);
+}
+const targetDir = resolve(process.cwd(), targetArg ?? "mikuru-app");
+const appName = toPackageName(basename(targetDir));
+if (existsSync(targetDir) && readdirSync(targetDir).length > 0) {
+    console.error(`Target directory is not empty: ${targetDir}`);
+    process.exit(1);
+}
+const templateDir = resolve(dirname(fileURLToPath(import.meta.url)), "../templates/starter");
+copyTemplate(templateDir, targetDir, { appName });
+console.log(`Created ${appName} in ${targetDir}`);
+console.log("");
+console.log("Next steps:");
+console.log(`  cd ${basename(targetDir)}`);
+console.log("  npm install");
+console.log("  npm run dev");
+function printHelp() {
+    console.log("Usage:");
+    console.log("  mikuru create [project-name]");
+}
+function copyTemplate(sourceDir, targetDir, variables) {
+    mkdirSync(targetDir, { recursive: true });
+    for (const entry of readdirSync(sourceDir)) {
+        const sourcePath = join(sourceDir, entry);
+        const targetName = entry === "_gitignore" ? ".gitignore" : entry;
+        const targetPath = join(targetDir, targetName);
+        const stat = statSync(sourcePath);
+        if (stat.isDirectory()) {
+            copyTemplate(sourcePath, targetPath, variables);
+            continue;
+        }
+        if (isTextTemplate(sourcePath)) {
+            const content = readFileSync(sourcePath, "utf8").replaceAll("__MIKURU_APP_NAME__", variables.appName);
+            writeFileSync(targetPath, content);
+            continue;
+        }
+        copyFileSync(sourcePath, targetPath);
+    }
+}
+function isTextTemplate(path) {
+    return /\.(css|html|json|mikuru|ts)$/.test(path) || path.endsWith("_gitignore");
+}
+function toPackageName(value) {
+    return value
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9._-]+/g, "-")
+        .replace(/^-+|-+$/g, "") || "mikuru-app";
+}
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "mikuru",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
-  "type": "module",
-  "description": "A compile-first JavaScript framework with Vue-like authoring and Svelte-like generated DOM updates.",
-  "homepage": "https://github.com/miyagawayuu/mikuru#readme",
-  "bugs": {
-    "url": "https://github.com/miyagawayuu/mikuru/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/miyagawayuu/mikuru.git"
-  },
-  "exports": {
+  "type": "module",
+  "description": "A compile-first JavaScript framework with Vue-like authoring and Svelte-like generated DOM updates.",
+  "homepage": "https://github.com/miyagawayuu/mikuru#readme",
+  "bugs": {
+    "url": "https://github.com/miyagawayuu/mikuru/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/miyagawayuu/mikuru.git"
+  },
+  "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
@@ -30,11 +30,15 @@
       "default": "./dist/vite.js"
     }
   },
-  "files": [
-    "dist",
-    "README.md",
-    "CHANGELOG.md"
-  ],
+  "bin": {
+    "mikuru": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "engines": {
     "node": ">=22"
   },
@@ -45,15 +49,16 @@
     "build:realworld": "vite build --config examples/realworld/vite.config.ts",
     "build:mikuru-sample": "vite build --config examples/mikuru-sample/vite.config.ts",
     "build:mikuru-vue-like": "vite build --config examples/mikuru-vue-like/vite.config.ts",
-    "ci": "npm run typecheck && npm test && npm run build && npm run build:basic && npm run build:realworld && npm run build:dogfood && npm run test:package && npm run test:pack && npm run test:e2e && npm run test:e2e:dogfood",
+    "ci": "npm run typecheck && npm test && npm run build && npm run test:create && npm run build:basic && npm run build:realworld && npm run build:dogfood && npm run test:package && npm run test:pack && npm run test:e2e && npm run test:e2e:dogfood",
     "dev:basic": "vite --config examples/basic/vite.config.ts",
-    "dev:dogfood": "vite --config examples/dogfood/vite.config.ts",
-    "dev:realworld": "vite --config examples/realworld/vite.config.ts",
-    "dev:mikuru-sample": "vite --config examples/mikuru-sample/vite.config.ts",
-    "dev:mikuru-vue-like": "vite --config examples/mikuru-vue-like/vite.config.ts",
+    "dev:dogfood": "vite --config examples/dogfood/vite.config.ts",
+    "dev:realworld": "vite --config examples/realworld/vite.config.ts",
+    "dev:mikuru-sample": "vite --config examples/mikuru-sample/vite.config.ts",
+    "dev:mikuru-vue-like": "vite --config examples/mikuru-vue-like/vite.config.ts",
     "test": "vitest run",
     "test:e2e": "playwright test",
     "test:e2e:dogfood": "playwright test --config playwright.dogfood.config.ts",
+    "test:create": "node tests/create-cli-smoke.mjs",
     "test:pack": "node tests/npm-pack-smoke.mjs",
     "test:package": "node tests/package-usage.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit"

package/templates/starter/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+*.local

package/templates/starter/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mikuru App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/starter/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "__MIKURU_APP_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "mikuru": "^1.0.2"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10"
+  }
+}

package/templates/starter/src/App.mikuru

@@ -0,0 +1,38 @@
+<template>
+  <main class="shell">
+    <section class="hero">
+      <div class="mark">み</div>
+      <p class="eyebrow">Mikuru is ready</p>
+      <h1>Make tiny Vue-like apps feel sweet and fast.</h1>
+      <p class="summary">
+        Edit <code>src/App.mikuru</code> and save to test Mikuru with Vite HMR.
+      </p>
+      <button @click="increment">count: {{ count }}</button>
+    </section>
+
+    <section class="grid">
+      <article>
+        <h2>Template</h2>
+        <p>Write friendly SFC templates with interpolation, events, lists, and form models.</p>
+      </article>
+      <article>
+        <h2>Runtime</h2>
+        <p>Keep state small with <code>ref</code>, <code>computed</code>, and direct DOM updates.</p>
+      </article>
+      <article>
+        <h2>Compiler</h2>
+        <p>Compile SFCs into lightweight browser code without bringing a virtual DOM.</p>
+      </article>
+    </section>
+  </main>
+</template>
+
+<script>
+import { ref } from "mikuru";
+
+const count = ref(0);
+
+function increment() {
+  count.value += 1;
+}
+</script>

package/templates/starter/src/main.ts

@@ -0,0 +1,10 @@
+import { mount } from "./App.mikuru";
+import "./style.css";
+
+const app = document.querySelector<HTMLDivElement>("#app");
+
+if (!app) {
+  throw new Error("Missing #app");
+}
+
+mount(app);

package/templates/starter/src/mikuru-env.d.ts

@@ -0,0 +1,17 @@
+declare module "*.mikuru" {
+  export type MikuruComponentInstance = {
+    element: Element | Comment;
+    unmount(): void;
+  };
+
+  export function mount(
+    target: Element | DocumentFragment,
+    props?: Record<string, unknown>
+  ): MikuruComponentInstance;
+
+  const component: {
+    mount: typeof mount;
+  };
+
+  export default component;
+}

package/templates/starter/src/style.css

@@ -0,0 +1,151 @@
+:root {
+  color: #3a2430;
+  background:
+    radial-gradient(circle at 18% 12%, rgba(255, 176, 211, 0.38), transparent 28%),
+    radial-gradient(circle at 82% 8%, rgba(255, 218, 235, 0.72), transparent 24%),
+    #fff7fb;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+}
+
+button {
+  border: 1px solid #ff8abc;
+  border-radius: 999px;
+  background: #ff5fa2;
+  color: #ffffff;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  padding: 11px 18px;
+  box-shadow: 0 12px 26px rgba(255, 95, 162, 0.24);
+}
+
+button:hover {
+  background: #f34f96;
+}
+
+code {
+  border-radius: 6px;
+  background: #fff0f7;
+  color: #d93282;
+  padding: 2px 6px;
+}
+
+.shell {
+  width: min(1040px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 72px 0;
+}
+
+.hero {
+  display: grid;
+  justify-items: center;
+  gap: 18px;
+  min-height: 520px;
+  align-content: center;
+  border: 1px solid #ffd2e4;
+  border-radius: 28px 28px 0 0;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 250, 0.96)),
+    #ffffff;
+  box-shadow: 0 24px 70px rgba(217, 50, 130, 0.14);
+  text-align: center;
+}
+
+.mark {
+  display: grid;
+  width: 84px;
+  height: 84px;
+  place-items: center;
+  border: 1px solid #ffb6d4;
+  border-radius: 26px;
+  background: linear-gradient(135deg, #ff6faf, #ffc1dc);
+  color: #ffffff;
+  font-size: 40px;
+  font-weight: 800;
+  box-shadow: 0 18px 34px rgba(255, 111, 175, 0.32);
+}
+
+.eyebrow {
+  margin: 0;
+  color: #e24e91;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+h1 {
+  max-width: 760px;
+  margin: 0;
+  font-size: 56px;
+  font-weight: 750;
+  line-height: 1.05;
+}
+
+.summary {
+  max-width: 560px;
+  margin: 0;
+  color: #7b5b6a;
+  font-size: 18px;
+  line-height: 1.7;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  overflow: hidden;
+  border: 1px solid #ffd2e4;
+  border-top: 0;
+  border-radius: 0 0 28px 28px;
+  background: #ffd2e4;
+}
+
+article {
+  min-height: 180px;
+  padding: 28px;
+  background: rgba(255, 255, 255, 0.78);
+}
+
+h2 {
+  margin: 0 0 12px;
+  font-size: 22px;
+}
+
+article p {
+  margin: 0;
+  color: #7b5b6a;
+  line-height: 1.65;
+}
+
+@media (max-width: 760px) {
+  .shell {
+    padding: 24px 0;
+  }
+
+  .hero {
+    min-height: 460px;
+    padding: 32px 20px;
+  }
+
+  h1 {
+    font-size: 38px;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}

package/templates/starter/vite.config.ts

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