create-zudo-sg 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -4,6 +4,42 @@ All notable changes to `create-zudo-sg` are documented in this file.
 
 The format is based on Keep a Changelog.
 
+## [0.1.3] - 2026-09-21
+
+Stops fresh starters from requesting favicons they never shipped, and moves
+them onto the engine's new chrome token namespace.
+
+### Fixed
+
+- Set the starter's favicon to the self-contained inline icon instead of
+  advertising four `/favicon*` files the template does not create, which made a
+  clean build log four missing-asset errors on first load.
+- Verify after every packed build that each local head asset a generated page
+  links to actually exists, so a reintroduced missing icon or stylesheet fails
+  the release gate rather than the adopter's browser console.
+
+### Changed
+
+- Update the starter engine range to `@takazudo/zudo-sg ^0.3.0`, which reads its
+  chrome colors from the `--sg-*` namespace. The starter's own stylesheet now
+  sets those roles explicitly, so the catalog chrome renders correctly whatever
+  order a project imports its component theme in.
+
+## [0.1.2] - 2026-09-20
+
+Gives fresh starter projects a styled homepage and usable default navigation.
+
+### Fixed
+
+- Style the host-owned homepage with token-based typography, spacing, and
+  clearly visible links to Components and Design Tokens after Tailwind preflight.
+- Verify the packed starter's homepage markup and generated utility CSS.
+
+### Changed
+
+- Update the starter engine range to `@takazudo/zudo-sg ^0.2.2`, which supplies
+  default header navigation and search controls for minimally configured hosts.
+
 ## [0.1.1] - 2026-09-20
 
 Hardens fresh starter projects and aligns them with `@takazudo/zudo-sg 0.2.1`.

package/README.md

@@ -50,6 +50,7 @@ The template is a minimal host, not a copy of this repository's full site. It
 contains:
 
 - `zfb.config.ts` composing `zudoDoc()` and `withZudoSg()` with a root base.
+- `zfb.config.ts` uses an inline `favicon: "auto"`; replace it with a path or `FaviconConfig` when adding real icons under `public/`.
 - `zudo-sg.config.mjs` with a local `ui/` components root, registry output,
   preview stylesheet, category order, and token-manifest inputs.
 - `pages/index.tsx` and an optional `pages/lib/_zudo-sg-islands.ts` import
@@ -100,6 +101,32 @@ host defines consumer-only color tokens before zudo-doc's theme, replace
 omits the color-token reset; tokens defined by both stylesheets still follow
 source order.
 
+### 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
+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,
+unlayered override in any import position:
+
+```css
+:root {
+  --sg-border: oklch(0.72 0.02 65);
+}
+```
+
+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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-zudo-sg",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Create a new zudo-sg styleguide project",
   "license": "MIT",
   "author": "Takeshi Takatsudo",

package/templates/default/package.json

@@ -17,7 +17,7 @@
     "@takazudo/zfb-md-wasm": "2.20.0",
     "@takazudo/zfb-runtime": "2.20.0",
     "@takazudo/zudo-doc": "5.26.2",
-    "@takazudo/zudo-sg": "^0.2.1",
+    "@takazudo/zudo-sg": "^0.3.0",
     "diff": "^8.0.4",
     "katex": "^0.16.38",
     "preact": "^10.29.1",

package/templates/default/pages/index.tsx

@@ -12,11 +12,28 @@ export default function IndexPage(): JSX.Element {
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Styleguide starter</title>
       </head>
-      <body>
-        <h1 data-host-index>Styleguide starter</h1>
-        <a href="/components">Components</a>
+      <body class="min-h-screen bg-bg font-sans text-base leading-normal text-fg">
+        <main class="mx-auto flex max-w-[48rem] flex-col gap-vsp-lg px-hsp-lg py-vsp-2xl">
+          <h1 data-host-index class="text-2xl font-bold leading-tight">Styleguide starter</h1>
+          <p class="text-muted">Explore your components, their stories, and the design tokens that bring them together.</p>
+          <nav aria-label="Styleguide" class="flex flex-wrap gap-hsp-md">
+            <a
+              href="/components"
+              class="inline-flex px-hsp-sm py-vsp-sm font-semibold text-accent underline hover:text-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+            >
+              Components
+            </a>
+            <a
+              href="/tokens"
+              class="inline-flex px-hsp-sm py-vsp-sm font-semibold text-accent underline hover:text-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+            >
+              Design Tokens
+            </a>
+          </nav>
+        </main>
       </body>
     </html>
   );

package/templates/default/pnpm-workspace.yaml

@@ -12,4 +12,4 @@ minimumReleaseAgeExclude:
   - "@takazudo/zfb-win32-x64-msvc@2.20.0"
   - "@takazudo/zfb@2.20.0"
   - "@takazudo/zudo-doc@5.26.2"
-  - "@takazudo/zudo-sg@0.2.1"
+  - "@takazudo/zudo-sg@0.3.0"

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

@@ -21,6 +21,16 @@
 @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
+ * override after these imports, for example:
+ *
+ * :root {
+ *   --sg-border: #94a3b8;
+ *   --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}";

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

@@ -1,6 +1,15 @@
 /* Self-contained input for the packed gen-token-manifest CLI. The current
- * generator requires this complete vocabulary; none comes from demo-ui or
- * the workspace. The Button/Card still use only the original five tokens. */
+ * generator requires this complete host vocabulary; none comes from demo-ui
+ * or the workspace. The engine chrome owns raw --sg-* tokens and no longer
+ * depends on these bare --color-* values. Keep the vocabulary for host
+ * components and the manifest; override chrome separately in global.css, e.g.:
+ *
+ * :root {
+ *   --sg-border: #94a3b8;
+ *   --sg-accent: #7c3aed;
+ * }
+ *
+ * The Button/Card still use only the original five tokens. */
 :root {
   --palette-neutral-0: #ffffff;
   --palette-neutral-1: #e2e8f0;

package/templates/default/zfb.config.ts

@@ -15,6 +15,8 @@ export default defineConfig(
       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).