create-zudo-sg 0.1.9 → 0.2.0

package/CHANGELOG.md

@@ -4,6 +4,41 @@ All notable changes to `create-zudo-sg` are documented in this file.
 
 The format is based on Keep a Changelog.
 
+## [0.2.0] - 2026-10-12
+
+This release moves the generated starter to the zfb 4 and zudo-doc 6 stack and
+the newly published `@takazudo/zudo-sg` 0.5 line.
+
+### Breaking Changes
+
+- New projects use zudo-react and zudo-wind instead of the old Preact host and
+  Tailwind setup. The template pins zfb, zfb-runtime, and zfb-md-wasm to 4.3.1,
+  zudo-doc to 6.0.0, and zdtp to 0.8.6. Existing generated projects should
+  follow the migration guides rather than replacing files in place.
+- The starter now installs `@takazudo/zudo-sg ^0.5.0`; its new framework and
+  peer contracts do not resolve through the prior `^0.4.1` range.
+
+### Changed
+
+- Generate zudo-react stories, component scaffolds, route wrappers, and token
+  panel bootstrap wiring that hydrate under zfb 4.
+- Configure wind tokens and the engine's `wind.json` manifest, and generate
+  the UI token manifest for the migrated CSS pipeline.
+
+### Fixed
+
+- Defer the engine-route preview panel bootstrap decision until client
+  activation, so the generated starter hydrates and replays early clicks.
+
+## [0.1.10] - 2026-09-27
+
+### Changed
+
+- Update the starter engine range to `@takazudo/zudo-sg ^0.4.1`, which brings
+  the WCAG AA, scheme-following code-panel editor theme.
+- Update the starter's `@takazudo/zudo-doc` pin to 5.28.0, including its exact
+  release-age exclusion.
+
 ## [0.1.9] - 2026-09-27
 
 ### Changed

package/README.md

@@ -2,7 +2,7 @@
 
 `create-zudo-sg` is the pnpm-only initializer for a new
 [`@takazudo/zudo-sg`](https://github.com/Takazudo/zudo-sg/tree/main/packages/styleguide)
-styleguide host. It copies a small, working Preact + zfb project into a new
+styleguide host. It copies a small, working zudo-react + zfb project into a new
 directory; the generated project is private and is ready to customize.
 
 ## Quick start
@@ -13,10 +13,11 @@ cd my-styleguide
 pnpm install
 pnpm gen-registry
 pnpm gen-token-manifest
+pnpm test
 pnpm dev
 ```
 
-The command defaults to no dependency installation and prints the five
+The command defaults to no dependency installation and prints the setup
 commands after it creates the project. Pass `--install` when the initializer
 should run `pnpm install` for you. The generated `package.json` pins the
 package manager to pnpm, and this release has no npm, yarn, or `--pm` mode.
@@ -61,7 +62,7 @@ contains:
   `pages/lib/_zudo-sg-islands.ts` import shim, for the host page and for
   mounting the preview token panel on the injected `/components/*` and
   `/tokens` routes.
-- Three small Preact examples under `ui/`: Button, Card, and Counter, with
+- Three small zudo-react examples under `ui/`: Button, Card, and Counter, with
   co-located stories and a Button MDX document.
 - `src/styleguide/sg-registry.ts`, generated from the three example stories.
   Run `pnpm gen-registry` after changing stories; the CLI also bootstraps a
@@ -123,38 +124,32 @@ for the wiring shape.
 zfb discovers `src/styles/global.css` automatically; no page import or config
 entry is needed. Keep its imports in this order:
 
-1. Declare `@layer zd-preflight, zd-flow`, then import
-   `tailwindcss/preflight` in `layer(zd-preflight)` and unlayered
-   `tailwindcss/utilities`.
-2. Import `@takazudo/zudo-doc/theme.css`, then `./ui-tokens.css` and any
-   component package stylesheet. The theme supplies the framework tokens and
-   resets the color-token namespace; preflight is the only element reset.
-3. Import zudo-doc's `safelist.css`, `content.css`, `features.css`, and
-   `page-loading.css`, in that order.
+1. Declare `@layer zw-reset, zd-flow`; zfb's wind compiler supplies its owned
+   reset and utility rules.
+2. Import `@takazudo/zudo-doc/theme.css`, then `./ui-tokens.css` and your local
+   `./components.css`. Define host tokens as ordinary `:root` properties and
+   map them in `zfb.config.ts` under `wind.tokens`.
+3. Import zudo-doc's `content.css`, `features.css`, and `page-loading.css`, in
+   that order.
 4. Import `@takazudo/zdtp/dashboard/styles.css` after content styles so the
-   `/tokens` dashboard wins ties with prose rules, then
-   `@takazudo/zudo-sg/styles.css` and `@takazudo/zudo-sg/safelist.css`.
-5. Keep the `@source` globs for `pages/`, `ui/`, and `src/content/`; add your
-   component package's source glob alongside them. zfb resolves these
-   global-entry paths from the project root.
-
-Keep the engine styles and Tailwind utilities unlayered: utility margins must
-outrank `zd-flow`, while engine chrome overrides must compete with utilities.
-Do not add the full `tailwindcss` import or a second preflight. If an existing
-host defines consumer-only color tokens before zudo-doc's theme, replace
-`theme.css` with `theme-no-reset.css` to preserve them. That variant only
-omits the color-token reset; tokens defined by both stylesheets still follow
-source order.
+   `/tokens` dashboard wins ties with prose rules, then import
+   `@takazudo/zudo-sg/styles.css`.
+
+Wind utilities and engine styles are unlayered. Configure
+`wind.sources.roots` in `zfb.config.ts` for host source directories;
+`withZudoSg()` registers the engine's public `wind.json` manifest. Do not add
+a separate utility stylesheet or another reset.
 
 ### Three token worlds and engine overrides
 
-The generated host has three color-token worlds: zudo-doc's `--zd-*` roles for the
-documentation shell, zudo-sg's raw `--sg-*` roles for catalog chrome, and the host
-component library's own `@theme` color tokens (usually `--color-*`) for previewed
+The generated host has three color-token worlds: zudo-doc's `--zd-*` roles for
+the documentation shell, zudo-sg's raw `--sg-*` roles for catalog chrome, and
+the host component library's `:root` tokens (usually `--color-*`) for previewed
 components. Keep the engine and component-library roles separate.
 
-The engine defaults are plain `--sg-*` properties under `:where(:root)`, so zudo-doc's
-`theme.css` `--color-*` reset cannot erase them. Retheme engine chrome with an ordinary,
+The engine defaults are plain `--sg-*` properties under `:where(:root)`, separate from
+the host's `--color-*` properties. zudo-doc 6's `theme.css` supplies its own token
+values without resetting host colors. Retheme engine chrome with an ordinary,
 unlayered override in any import position:
 
 ```css
@@ -165,17 +160,22 @@ unlayered override in any import position:
 
 If the host previously used bare `--color-border` to style engine chrome, migrate that
 declaration to `--sg-border` (and migrate each other chrome role to its corresponding
-`--sg-*` role). `--color-border` can still style the host's own components. The
-order-proof engine hook does not change the import-order contract for those host-owned
-`@theme` colors: import `theme.css` before them, or deliberately use
-`theme-no-reset.css` when their earlier declaration must be preserved. This is the
-zudo-doc namespace contract for host-owned color tokens; the engine's raw `--sg-*`
-namespace is separate.
-
-The preview document uses `src/styles/preview-entry.css` independently. Add
-your component package's styles and source scan there too when previews need
-them; its `@source` paths are relative to that stylesheet. Keep dashboard and
-catalog chrome imports in the host's global entry.
+`--sg-*` role). `--color-border` can still style the host's own components. Import
+`theme.css` before the host's token styles, then declare intentional `:root`
+overrides afterward. The engine's raw `--sg-*` namespace remains separate.
+
+The preview document uses `src/styles/preview-entry.css` independently. Keep
+its input local to the host:
+
+```css
+@layer zw-reset;
+@import "./ui-tokens.css";
+@import "./components.css";
+```
+
+The preview compiler scans the configured component roots and scopes token
+roots under `:root[data-sg-preview-doc]`. Keep dashboard and catalog chrome
+imports in the host's global entry.
 
 ## Release-age exemptions
 
@@ -188,7 +188,7 @@ checks each optional package independently.
 
 ## Host requirements and caveats
 
-The starter targets Preact + zfb hosts. Keep these dependencies in a host
+The starter targets zudo-react + zfb hosts. Keep these dependencies in a host
 that adopts the engine:
 
 - `@takazudo/zdtp` is required by the injected `/tokens` route at build time,
@@ -197,6 +197,9 @@ that adopts the engine:
   instead of zudo-doc's throwing stub (zudolab/zudo-doc#4261). Do not drop it.
 - `diff` and `katex` are required by the published zudo-doc route dist that
   the host loads, even when the corresponding optional features are disabled.
+- The engine owns the Preact dependency used by the opaque zdtp dashboard
+  adapter. Host components and stories use zudo-react and do not add a direct
+  `preact` dependency.
 
 Keep the `tokens` block in `zudo-sg.config.mjs` as well. The initializer's
 configuration is typed with `tokens` required, and `gen-token-manifest` needs

package/dist/cli.js

@@ -94,6 +94,7 @@ export function formatNextSteps(projectDir) {
         "pnpm install",
         "pnpm gen-registry",
         "pnpm gen-token-manifest",
+        "pnpm test",
         "pnpm dev",
     ].join("\n");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-zudo-sg",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Create a new zudo-sg styleguide project",
   "license": "MIT",
   "author": "Takeshi Takatsudo",
@@ -44,7 +44,8 @@
   "devDependencies": {
     "@types/node": "^22.0.0",
     "typescript": "^5.9.0",
-    "vitest": "^4.1.9"
+    "vite": "7.3.5",
+    "vitest": "4.1.11"
   },
   "scripts": {
     "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",

package/templates/default/package.json

@@ -8,25 +8,26 @@
     "dev": "zfb dev",
     "build": "zfb build",
     "check": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --passWithNoTests",
     "gen-registry": "zudo-sg gen-registry",
     "gen-token-manifest": "zudo-sg gen-token-manifest"
   },
   "dependencies": {
-    "@takazudo/zdtp": "0.8.5",
-    "@takazudo/zfb": "2.21.1",
-    "@takazudo/zfb-md-wasm": "2.21.1",
-    "@takazudo/zfb-runtime": "2.21.1",
-    "@takazudo/zudo-doc": "5.27.0",
-    "@takazudo/zudo-sg": "^0.4.0",
+    "@takazudo/zdtp": "0.8.6",
+    "@takazudo/zfb": "4.3.1",
+    "@takazudo/zfb-md-wasm": "4.3.1",
+    "@takazudo/zfb-runtime": "4.3.1",
+    "@takazudo/zudo-doc": "6.0.0",
+    "@takazudo/zudo-sg": "^0.5.0",
     "diff": "^8.0.4",
     "katex": "^0.16.38",
-    "preact": "^10.29.1",
-    "preact-render-to-string": "^6.6.6",
-    "tailwindcss": "^4.2.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
-    "typescript": "^5.9.0"
+    "happy-dom": "20.14.6",
+    "typescript": "^5.9.0",
+    "vite": "7.3.5",
+    "vitest": "4.1.11"
   }
 }

package/templates/default/pages/index.tsx

@@ -1,7 +1,5 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
 // The root page stays host-owned so it can import site-wide islands.
-import type { JSX } from "preact";
+import type { JSX } from "@takazudo/zfb/zudo-react/jsx-runtime";
 // Optional islands seed; see pages/lib/_zudo-sg-islands.ts.
 import "./lib/_zudo-sg-islands";
 // Statically imported (not just reached through `chromeBindingsModule`'s
@@ -16,7 +14,7 @@ export default function IndexPage(): JSX.Element {
   return (
     <html lang="en">
       <head>
-        <meta charSet="utf-8" />
+        <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Styleguide starter</title>
       </head>

package/templates/default/pages/lib/_body-end-islands.tsx

@@ -1,5 +1,3 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
 // Host-side body-end islands helper.
 //
 // Mirrors the sibling zudo-doc showcase's pages/lib/_body-end-islands.tsx,
@@ -17,7 +15,7 @@
 // against that registered constructor too — not just this starter's
 // host-owned `/`.
 
-import type { VNode, JSX } from "preact";
+import type { Description } from "@takazudo/zfb/zudo-react";
 import { Island } from "@takazudo/zfb";
 import EngineRoutePreviewTokenPanelBootstrap from "./_engine-route-preview-token-panel-bootstrap";
 import { previewTokenPanelCaptureScript } from "@takazudo/zudo-sg/token-tweak";
@@ -26,17 +24,14 @@ import { previewTokenPanelCaptureScript } from "@takazudo/zudo-sg/token-tweak";
  * The body-end islands this starter mounts. Currently just the preview
  * token panel bootstrap the header trigger opens.
  */
-export function BodyEndIslands(): JSX.Element {
+export function BodyEndIslands(): Description {
   return (
     <>
       {/* Capture pre-hydration clicks; the bootstrap drains this once it loads. */}
-      <script
-        dangerouslySetInnerHTML={{ __html: previewTokenPanelCaptureScript() }}
-      />
-      {Island({
-        when: "load",
-        children: <EngineRoutePreviewTokenPanelBootstrap />,
-      }) as unknown as VNode}
+      <script rawHtml={previewTokenPanelCaptureScript()} />
+      <Island when="load">
+        <EngineRoutePreviewTokenPanelBootstrap />
+      </Island>
     </>
   );
 }

package/templates/default/pages/lib/_engine-route-preview-token-panel-bootstrap.tsx

@@ -1,12 +1,14 @@
 "use client";
 
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
+import { getScope, signal, Show } from "@takazudo/zfb/zudo-react";
 import PreviewTokenPanelBootstrap from "@takazudo/zudo-sg/token-tweak/preview-token-panel-bootstrap";
 
 export default function EngineRoutePreviewTokenPanelBootstrap() {
-  if (typeof document === "undefined" || !document.querySelector("[data-sg-engine-route]")) return null;
-  return <PreviewTokenPanelBootstrap />;
+  // Route detection needs the browser DOM. Keep the initial component regions
+  // identical on the server and client, then mount the bootstrap on activation.
+  const active = signal(false);
+  getScope().onActivate(() => {
+    active.value = Boolean(document.querySelector("[data-sg-engine-route]"));
+  });
+  return <Show when={active}>{() => <PreviewTokenPanelBootstrap />}</Show>;
 }
-
-EngineRoutePreviewTokenPanelBootstrap.displayName = "EngineRoutePreviewTokenPanelBootstrap";

package/templates/default/pnpm-workspace.yaml

@@ -2,14 +2,14 @@ packages: []
 allowBuilds:
   esbuild: true
 minimumReleaseAgeExclude:
-  - "@takazudo/zdtp@0.8.5"
-  - "@takazudo/zfb-darwin-arm64@2.21.1"
-  - "@takazudo/zfb-darwin-x64@2.21.1"
-  - "@takazudo/zfb-linux-arm64-gnu@2.21.1"
-  - "@takazudo/zfb-linux-x64-gnu@2.21.1"
-  - "@takazudo/zfb-md-wasm@2.21.1"
-  - "@takazudo/zfb-runtime@2.21.1"
-  - "@takazudo/zfb-win32-x64-msvc@2.21.1"
-  - "@takazudo/zfb@2.21.1"
-  - "@takazudo/zudo-doc@5.27.0"
-  - "@takazudo/zudo-sg@0.4.0"
+  - "@takazudo/zdtp@0.8.6"
+  - "@takazudo/zfb-darwin-arm64@4.3.1"
+  - "@takazudo/zfb-darwin-x64@4.3.1"
+  - "@takazudo/zfb-linux-arm64-gnu@4.3.1"
+  - "@takazudo/zfb-linux-x64-gnu@4.3.1"
+  - "@takazudo/zfb-md-wasm@4.3.1"
+  - "@takazudo/zfb-runtime@4.3.1"
+  - "@takazudo/zfb-win32-x64-msvc@4.3.1"
+  - "@takazudo/zfb@4.3.1"
+  - "@takazudo/zudo-doc@6.0.0"
+  - "@takazudo/zudo-sg@0.5.0"

package/templates/default/src/styles/components.css

@@ -0,0 +1,4 @@
+/* Authored host component rules are independent of the wind utility output. */
+.zc-fixture-card {
+  border-inline-start: 3px solid var(--color-accent);
+}

package/templates/default/src/styles/global.css

@@ -1,25 +1,15 @@
-/* zfb discovers this entry automatically. Flow spacing beats preflight;
- * unlayered utilities can still override the zd-flow layer. */
-@layer zd-preflight, zd-flow;
-/* The only element reset is preflight; theme.css below resets color tokens only. */
-@import "tailwindcss/preflight" layer(zd-preflight);
-@import "tailwindcss/utilities";
-
-/* Framework defaults first, then the starter's own token values. */
+/* zfb discovers this entry automatically. Wind owns reset and utilities. */
+@layer zw-reset, zd-flow;
 @import "@takazudo/zudo-doc/theme.css";
 @import "./ui-tokens.css";
-/* Add your component package's stylesheet here, after the theme's color reset. */
+@import "./components.css";
 
-@import "@takazudo/zudo-doc/safelist.css";
 @import "@takazudo/zudo-doc/content.css";
 @import "@takazudo/zudo-doc/features.css";
 @import "@takazudo/zudo-doc/page-loading.css";
 
-/* Dashboard rules follow content CSS so they win ties with prose styling. */
 @import "@takazudo/zdtp/dashboard/styles.css";
-/* Keep engine styles unlayered alongside utilities so chrome overrides work. */
 @import "@takazudo/zudo-sg/styles.css";
-@import "@takazudo/zudo-sg/safelist.css";
 
 /* The engine chrome owns raw --sg-* tokens and no longer needs the host's
  * bare --color-* values. To theme chrome intentionally, add an unlayered
@@ -30,9 +20,3 @@
  *   --sg-accent: #7c3aed;
  * }
  */
-
-/* zfb resolves these global-entry globs from the project root.
- * Add your component package's @source here; package chrome uses the safelists. */
-@source "pages/**/*.{tsx,ts,jsx,js}";
-@source "ui/**/*.{tsx,ts,jsx,js,mdx,md}";
-@source "src/content/**/*.{mdx,md}";

package/templates/default/src/styles/preview-entry.css

@@ -1,7 +1,5 @@
-/* Host `previewStyles` entry — compiled standalone by
-   @takazudo/zudo-sg/plugins/preview-css. Preflight + utilities + this
-   project's own token sheet + an @source for the ui/ corpus. */
-@import "tailwindcss/preflight";
-@import "tailwindcss/utilities";
+/* Independently compiled preview input; zfb supplies wind utilities from
+   the component-root source flags. */
+@layer zw-reset;
 @import "./ui-tokens.css";
-@source "../../ui";
+@import "./components.css";

package/templates/default/src/styles/ui-tokens.css

@@ -49,7 +49,7 @@
   --palette-line-beauty-hover-dark: #dbeafe;
 }
 
-@theme {
+:root {
   --color-accent: #2563eb;
   --color-fg: #0f172a;
   --color-bg: #ffffff;

package/templates/default/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "@takazudo/zudo-doc/tsconfig.base.json",
   "compilerOptions": {
     "target": "ESNext",
     "module": "ESNext",
@@ -9,7 +10,7 @@
     "noEmit": true,
     "strict": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "preact",
+    "jsxImportSource": "@takazudo/zfb/zudo-react",
     "skipLibCheck": false
   },
   "include": ["pages", "src", "ui", "zfb.config.ts", "zudo-sg.config.mjs"]

package/templates/default/ui/a-preview/preview.stories.tsx

@@ -1,5 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
+import type { Child } from "@takazudo/zfb/zudo-react";
 import type { Story, StoryMeta } from "@takazudo/zudo-sg/stories";
 
 const meta: StoryMeta = {
@@ -12,5 +11,5 @@ export default meta;
 
 export const Default: Story = {
   name: "Default",
-  render: () => <div data-packed-story-identity="packed-preview-default">Preview route probe</div>,
+  render: (): Child => <div data-packed-story-identity="packed-preview-default">Preview route probe</div>,
 };

package/templates/default/ui/b-preview-two/preview-two.stories.tsx

@@ -1,5 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
+import type { Child } from "@takazudo/zfb/zudo-react";
 import type { Story, StoryMeta } from "@takazudo/zudo-sg/stories";
 
 const meta: StoryMeta = {
@@ -12,5 +11,5 @@ export default meta;
 
 export const Default: Story = {
   name: "Default",
-  render: () => <div data-packed-story-identity="packed-preview-two-default">Preview 2 route probe</div>,
+  render: (): Child => <div data-packed-story-identity="packed-preview-two-default">Preview 2 route probe</div>,
 };

package/templates/default/ui/button/button.stories.tsx

@@ -1,5 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
+import type { Child } from "@takazudo/zfb/zudo-react";
 import type { Story, StoryMeta } from "@takazudo/zudo-sg/stories";
 import { Button } from "./button.tsx";
 
@@ -13,10 +12,10 @@ export default meta;
 
 export const Primary: Story = {
   name: "Primary",
-  render: () => <Button>Primary action</Button>,
+  render: (): Child => <Button>Primary action</Button>,
 };
 
 export const Plain: Story = {
   name: "Plain",
-  render: () => <Button tone="plain">Plain action</Button>,
+  render: (): Child => <Button tone="plain">Plain action</Button>,
 };

package/templates/default/ui/button/button.tsx

@@ -1,14 +1,13 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { ComponentChildren, JSX } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
+import type { JSX } from "@takazudo/zfb/zudo-react/jsx-runtime";
 
-export function Button(props: { children: ComponentChildren; tone?: "accent" | "plain" }): JSX.Element {
+export function Button(props: { children: Child; tone?: "accent" | "plain" }): JSX.Element {
   const tone = props.tone ?? "accent";
   return (
     <button
       type="button"
       data-ui-button={tone}
-      class={tone === "accent" ? "bg-accent text-bg px-hsp-md py-vsp-sm" : "text-fg px-hsp-md"}
+      class={tone === "accent" ? "bg-accent text-bg px-hsp-md py-vsp-sm rounded-full" : "text-fg px-hsp-md rounded-full"}
     >
       {props.children}
     </button>

package/templates/default/ui/canvas/canvas.stories.tsx

@@ -1,5 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
+import type { Child } from "@takazudo/zfb/zudo-react";
 import type { Story, StoryMeta } from "@takazudo/zudo-sg/stories";
 
 const meta: StoryMeta = {
@@ -12,5 +11,5 @@ export default meta;
 
 export const Default: Story = {
   name: "Default",
-  render: () => <div data-packed-story-identity="packed-canvas-default">Canvas route probe</div>,
+  render: (): Child => <div data-packed-story-identity="packed-canvas-default">Canvas route probe</div>,
 };

package/templates/default/ui/card/card.stories.tsx

@@ -1,5 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
+import type { Child } from "@takazudo/zfb/zudo-react";
 import type { Story, StoryMeta } from "@takazudo/zudo-sg/stories";
 import { Card } from "./card.tsx";
 
@@ -13,5 +12,5 @@ export default meta;
 
 export const Basic: Story = {
   name: "Basic",
-  render: () => <Card title="Example">Body content</Card>,
+  render: (): Child => <Card title="Example">Body content</Card>,
 };

package/templates/default/ui/card/card.tsx

@@ -1,10 +1,9 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { ComponentChildren, JSX } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
+import type { JSX } from "@takazudo/zfb/zudo-react/jsx-runtime";
 
-export function Card(props: { title: string; children: ComponentChildren }): JSX.Element {
+export function Card(props: { title: string; children: Child }): JSX.Element {
   return (
-    <div data-ui-card class="border border-fg/20 rounded-md p-hsp-md">
+    <div data-ui-card class="zc-fixture-card border border-border rounded-md p-hsp-md">
       <h3 class="font-bold mb-vsp-sm">{props.title}</h3>
       {props.children}
     </div>

package/templates/default/ui/counter/counter.stories.tsx

@@ -1,5 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
+import type { Child } from "@takazudo/zfb/zudo-react";
 import type { Story, StoryMeta } from "@takazudo/zudo-sg/stories";
 import Counter from "./counter.tsx";
 
@@ -13,5 +12,5 @@ export default meta;
 
 export const Basic: Story = {
   name: "Basic",
-  render: () => <Counter start={3} />,
+  render: (): Child => <Counter start={3} />,
 };

package/templates/default/ui/counter/counter.tsx

@@ -1,16 +1,14 @@
 "use client";
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
 
 // Real `"use client"` island reached through the generated registry. It is
 // intentionally not statically imported by a host `pages/` file.
 
-import { useState } from "preact/hooks";
+import { signal } from "@takazudo/zfb/zudo-react";
 
 export default function Counter(props: { start?: number }) {
-  const [count, setCount] = useState(props.start ?? 0);
+  const count = signal(props.start ?? 0);
   return (
-    <button type="button" data-counter onClick={() => setCount((c) => c + 1)}>
+    <button type="button" data-counter on:click={() => { count.value += 1; }}>
       count: {count}
     </button>
   );

package/templates/default/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  esbuild: {
+    jsx: "automatic",
+    jsxImportSource: "@takazudo/zfb/zudo-react",
+  },
+  test: {
+    environment: "happy-dom",
+    maxWorkers: 2,
+  },
+});

package/templates/default/zfb.config.ts

@@ -4,36 +4,126 @@
 // appends the engine's plugins and collections after `zudoDoc()`'s own — the
 // routes plugin requires `packageOwnedRoutes: true`, which `zudoDoc()`
 // defaults on.
-import { defineConfig } from "@takazudo/zfb/config";
+import { defineConfig, type WindConfig } from "@takazudo/zfb/config";
 import { zudoDoc } from "@takazudo/zudo-doc/config";
 import { withZudoSg } from "@takazudo/zudo-sg/config";
 import zudoSgConfig from "./zudo-sg.config.mjs";
 
 export default defineConfig(
-  withZudoSg(
-    zudoDoc({
-      siteName: "Styleguide Starter",
-      base: "/",
-      port: 4397,
-      // The starter ships no public/ icons; replace "auto" with a path or FaviconConfig once real icons exist.
-      favicon: "auto",
-      // No mermaid diagrams anywhere in this starter's one seed doc; turned
-      // off rather than leaving the default on to keep the dependency set
-      // minimal (see package.json).
-      mermaid: false,
-      strictContentBridge: true,
-      dynamicPageTransition: true,
-      // Bundling follows `bundleZdtp ?? designTokenPanel`; this starter never
-      // sets `designTokenPanel`, so without this the zdtp loader resolves to
-      // zudo-doc's throwing stub and the engine's PREVIEW token panel (opened
-      // from the header trigger `withZudoSg` injects) rejects at runtime
-      // (zudolab/zudo-doc#4261).
-      bundleZdtp: true,
-      // Mounts the preview token panel bootstrap on every package-owned
-      // route (/components/*, /tokens), not just this starter's host-owned
-      // `/`. See pages/lib/_chrome-bindings.tsx.
-      chromeBindingsModule: "./pages/lib/_chrome-bindings.tsx",
-    }),
-    zudoSgConfig,
-  ),
+  {
+    ...withZudoSg(
+      {
+        ...zudoDoc({
+          siteName: "Styleguide Starter",
+          base: "/",
+          port: 4397,
+          // The starter ships no public/ icons; replace "auto" with a path or FaviconConfig once real icons exist.
+          favicon: "auto",
+          // No mermaid diagrams anywhere in this starter's one seed doc; turned
+          // off rather than leaving the default on to keep the dependency set
+          // minimal (see package.json).
+          mermaid: false,
+          strictContentBridge: true,
+          dynamicPageTransition: true,
+          // Bundling follows `bundleZdtp ?? designTokenPanel`; this starter never
+          // sets `designTokenPanel`, so without this the zdtp loader resolves to
+          // zudo-doc's throwing stub and the engine's PREVIEW token panel (opened
+          // from the header trigger `withZudoSg` injects) rejects at runtime
+          // (zudolab/zudo-doc#4261).
+          bundleZdtp: true,
+          // Mounts the preview token panel bootstrap on every package-owned
+          // route (/components/*, /tokens), not just this starter's host-owned
+          // `/`. See pages/lib/_chrome-bindings.tsx.
+          chromeBindingsModule: "./pages/lib/_chrome-bindings.tsx",
+        }),
+        wind: {
+          reset: "owned-v1",
+          tokens: {
+            colors: {
+              bg: "var(--color-bg)",
+              fg: "var(--color-fg)",
+              surface: "var(--color-surface)",
+              "surface-2": "var(--color-surface-2)",
+              border: "var(--color-border)",
+              muted: "var(--color-muted)",
+              accent: "var(--color-accent)",
+              "accent-hover": "var(--color-accent-hover)",
+              "on-accent": "var(--color-on-accent)",
+              focus: "var(--color-focus)",
+              success: "var(--color-success)",
+              danger: "var(--color-danger)",
+              warning: "var(--color-warning)",
+              info: "var(--color-info)",
+              "rail-bg": "var(--color-rail-bg)",
+              "rail-bg-strong": "var(--color-rail-bg-strong)",
+              "rail-fg": "var(--color-rail-fg)",
+              "rail-muted": "var(--color-rail-muted)",
+              "rail-border": "var(--color-rail-border)",
+              "rail-hover-bg": "var(--color-rail-hover-bg)",
+            },
+            spacing: {
+              "hsp-2xs": "var(--spacing-hsp-2xs)",
+              "hsp-xs": "var(--spacing-hsp-xs)",
+              "hsp-sm": "var(--spacing-hsp-sm)",
+              "hsp-md": "var(--spacing-hsp-md)",
+              "hsp-lg": "var(--spacing-hsp-lg)",
+              "hsp-xl": "var(--spacing-hsp-xl)",
+              "hsp-2xl": "var(--spacing-hsp-2xl)",
+              "vsp-3xs": "var(--spacing-vsp-3xs)",
+              "vsp-2xs": "var(--spacing-vsp-2xs)",
+              "vsp-xs": "var(--spacing-vsp-xs)",
+              "vsp-sm": "var(--spacing-vsp-sm)",
+              "vsp-md": "var(--spacing-vsp-md)",
+              "vsp-lg": "var(--spacing-vsp-lg)",
+              "vsp-xl": "var(--spacing-vsp-xl)",
+              "vsp-2xl": "var(--spacing-vsp-2xl)",
+            },
+            fontSizes: {
+              xs: { size: "var(--text-xs)", lineHeight: "var(--text-xs--line-height)" },
+              sm: { size: "var(--text-sm)", lineHeight: "var(--text-sm--line-height)" },
+              base: { size: "var(--text-base)", lineHeight: "var(--text-base--line-height)" },
+              lg: { size: "var(--text-lg)", lineHeight: "var(--text-lg--line-height)" },
+              xl: { size: "var(--text-xl)", lineHeight: "var(--text-xl--line-height)" },
+              "2xl": { size: "var(--text-2xl)", lineHeight: "var(--text-2xl--line-height)" },
+            },
+            fontFamilies: { sans: "var(--font-sans)", mono: "var(--font-mono)" },
+            fontWeights: {
+              normal: "var(--font-weight-normal)",
+              medium: "var(--font-weight-medium)",
+              semibold: "var(--font-weight-semibold)",
+              bold: "var(--font-weight-bold)",
+            },
+            lineHeights: {
+              tight: "var(--leading-tight)",
+              snug: "var(--leading-snug)",
+              normal: "var(--leading-normal)",
+              relaxed: "var(--leading-relaxed)",
+            },
+            radii: {
+              default: "var(--radius-DEFAULT)",
+              sm: "var(--radius-sm)",
+              md: "var(--radius-md)",
+              lg: "var(--radius-lg)",
+            },
+            shadows: {
+              card: "var(--shadow-card)",
+              raised: "var(--shadow-raised)",
+              overlay: "var(--shadow-overlay)",
+            },
+          },
+          breakpoints: {
+            sm: { minWidthPx: 640 },
+            md: { minWidthPx: 768 },
+            lg: { minWidthPx: 1024 },
+            xl: { minWidthPx: 1280 },
+          },
+          strict: true,
+          dark: false,
+          utilities: { placement: "before-authored" },
+          sources: { roots: ["pages", "src", "ui"] },
+        } satisfies WindConfig,
+      },
+      zudoSgConfig,
+    ),
+  },
 );