create-zudo-sg 0.1.6 → 0.1.8

package/CHANGELOG.md

@@ -4,6 +4,34 @@ All notable changes to `create-zudo-sg` are documented in this file.
 
 The format is based on Keep a Changelog.
 
+## [0.1.8] - 2026-09-25
+
+### Changed
+
+- Update the starter's zfb, zfb-runtime, and zfb-md-wasm pins to 2.20.3,
+  including the exact release-age exclusions for their native packages.
+- Update the starter engine range to `@takazudo/zudo-sg ^0.3.6`.
+
+### Fixed
+
+- Make template regeneration work through symlinked paths, including macOS
+  temporary directories, while preserving import-only use from stdin.
+
+## [0.1.7] - 2026-09-25
+
+### Changed
+
+- Update the starter engine range to `@takazudo/zudo-sg ^0.3.5`.
+- Add Preview, Preview 2, and Canvas example stories to demonstrate distinct
+  detail and preview routes in the generated styleguide.
+- Enable SPA page transitions in the starter and mount the preview panel
+  bootstrap on engine routes while retaining early-click capture on host pages.
+
+### Fixed
+
+- Keep the public preview-token header trigger responsive to clicks before
+  its load island is ready, including navigation from a host page.
+
 ## [0.1.6] - 2026-09-24
 
 ### Changed

package/README.md

@@ -98,6 +98,14 @@ instead of an inert one:
   injected `/components/*` and `/tokens` routes too, not just the host-owned
   `/`.
 
+The public header trigger installs an early toggle capture before the load
+island is ready. A host with its own header trigger can render
+`previewTokenPanelCaptureScript()` from `@takazudo/zudo-sg/token-tweak` in a
+body-end `<script>` before `PreviewTokenPanelBootstrap` on both host and engine
+routes. The helper is safe to render on each route; the bootstrap drains the
+captured click parity once its listener is ready. The scaffold's
+`BodyEndIslands` shows this composition.
+
 This ships **tabs without the Apply write sandbox** — `zdtpApplyProxy` also
 accepts `routingFile` and `writeRoot`, together, as an opt-in next step: they
 let the panel's **Apply** button persist a tweak directly into your project's

package/package.json

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

package/templates/default/package.json

@@ -13,11 +13,11 @@
   },
   "dependencies": {
     "@takazudo/zdtp": "0.8.2",
-    "@takazudo/zfb": "2.20.2",
-    "@takazudo/zfb-md-wasm": "2.20.2",
-    "@takazudo/zfb-runtime": "2.20.2",
+    "@takazudo/zfb": "2.20.3",
+    "@takazudo/zfb-md-wasm": "2.20.3",
+    "@takazudo/zfb-runtime": "2.20.3",
     "@takazudo/zudo-doc": "5.27.0",
-    "@takazudo/zudo-sg": "^0.3.4",
+    "@takazudo/zudo-sg": "^0.3.6",
     "diff": "^8.0.4",
     "katex": "^0.16.38",
     "preact": "^10.29.1",

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

@@ -6,12 +6,12 @@
 // minus the doc-site islands this starter has no use for (AI chat, mermaid,
 // doc-history, client-router bootstrap): this starter mounts only the
 // engine's preview zdtp token panel bootstrap (`toggle-preview-token-panel`),
-// which the header trigger `withZudoSg` injects opens.
+// which the header trigger `withZudoSg` injects opens on engine routes.
 //
 // pages/index.tsx imports this file directly (as well as reaching it through
 // `_chrome-bindings.tsx`'s `chromeBindingsModule` wiring), so zfb's island
 // scanner is guaranteed to walk page -> this helper -> the real
-// PreviewTokenPanelBootstrap component and register its constructor under the
+// engine-route bootstrap wrapper and register its constructor under the
 // SSR marker name. `chromeBindingsModule` then makes the injected
 // /components/* and /tokens routes render the same marker, so they hydrate
 // against that registered constructor too — not just this starter's
@@ -19,25 +19,8 @@
 
 import type { VNode, JSX } from "preact";
 import { Island } from "@takazudo/zfb";
-import PreviewTokenPanelBootstrap from "@takazudo/zudo-sg/token-tweak/preview-token-panel-bootstrap";
-
-(PreviewTokenPanelBootstrap as { displayName?: string }).displayName = "PreviewTokenPanelBootstrap";
-
-function prehydrationPanelToggleScript(toggleEvent: string): string {
-  return `(${function capturePanelToggle(channel: string) {
-    const script = document.currentScript as (HTMLScriptElement & {
-      __zdtpPrehydrateListener?: EventListener;
-    }) | null;
-    if (!script || script.dataset.bound === "1") return;
-    script.dataset.bound = "1";
-    script.dataset.pending = "0";
-    const listener = () => {
-      script.dataset.pending = String(Number(script.dataset.pending ?? "0") + 1);
-    };
-    script.__zdtpPrehydrateListener = listener;
-    window.addEventListener(channel, listener);
-  }.toString()})(${JSON.stringify(toggleEvent)});`;
-}
+import EngineRoutePreviewTokenPanelBootstrap from "./_engine-route-preview-token-panel-bootstrap";
+import { previewTokenPanelCaptureScript } from "@takazudo/zudo-sg/token-tweak";
 
 /**
  * The body-end islands this starter mounts. Currently just the preview
@@ -48,12 +31,11 @@ export function BodyEndIslands(): JSX.Element {
     <>
       {/* Capture pre-hydration clicks; the bootstrap drains this once it loads. */}
       <script
-        id="zdtp-preview-prehydrate"
-        dangerouslySetInnerHTML={{ __html: prehydrationPanelToggleScript("toggle-preview-token-panel") }}
+        dangerouslySetInnerHTML={{ __html: previewTokenPanelCaptureScript() }}
       />
       {Island({
         when: "load",
-        children: <PreviewTokenPanelBootstrap />,
+        children: <EngineRoutePreviewTokenPanelBootstrap />,
       }) as unknown as VNode}
     </>
   );

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

@@ -0,0 +1,12 @@
+"use client";
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+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 />;
+}
+
+EngineRoutePreviewTokenPanelBootstrap.displayName = "EngineRoutePreviewTokenPanelBootstrap";

package/templates/default/pnpm-workspace.yaml

@@ -3,13 +3,13 @@ allowBuilds:
   esbuild: true
 minimumReleaseAgeExclude:
   - "@takazudo/zdtp@0.8.2"
-  - "@takazudo/zfb-darwin-arm64@2.20.2"
-  - "@takazudo/zfb-darwin-x64@2.20.2"
-  - "@takazudo/zfb-linux-arm64-gnu@2.20.2"
-  - "@takazudo/zfb-linux-x64-gnu@2.20.2"
-  - "@takazudo/zfb-md-wasm@2.20.2"
-  - "@takazudo/zfb-runtime@2.20.2"
-  - "@takazudo/zfb-win32-x64-msvc@2.20.2"
-  - "@takazudo/zfb@2.20.2"
+  - "@takazudo/zfb-darwin-arm64@2.20.3"
+  - "@takazudo/zfb-darwin-x64@2.20.3"
+  - "@takazudo/zfb-linux-arm64-gnu@2.20.3"
+  - "@takazudo/zfb-linux-x64-gnu@2.20.3"
+  - "@takazudo/zfb-md-wasm@2.20.3"
+  - "@takazudo/zfb-runtime@2.20.3"
+  - "@takazudo/zfb-win32-x64-msvc@2.20.3"
+  - "@takazudo/zfb@2.20.3"
   - "@takazudo/zudo-doc@5.27.0"
-  - "@takazudo/zudo-sg@0.3.4"
+  - "@takazudo/zudo-sg@0.3.6"

package/templates/default/src/styleguide/sg-registry.ts

@@ -5,7 +5,10 @@
 // GENERATED:SG_REGISTRY_BEGIN — do not hand-edit; run `zudo-sg gen-registry`.
 import type { StoryModule } from "@takazudo/zudo-sg/stories";
 
+import * as aPreview from "../../ui/a-preview/preview.stories.tsx";
+import * as bPreviewTwo from "../../ui/b-preview-two/preview-two.stories.tsx";
 import * as button from "../../ui/button/button.stories.tsx";
+import * as canvas from "../../ui/canvas/canvas.stories.tsx";
 import * as card from "../../ui/card/card.stories.tsx";
 import * as counter from "../../ui/counter/counter.stories.tsx";
 
@@ -15,7 +18,10 @@ import * as counter from "../../ui/counter/counter.stories.tsx";
  * `{ default: meta, ...named Story exports }`.
  */
 export const storyModules: Record<string, StoryModule> = {
+  "./ui/a-preview/preview.stories.tsx": aPreview as unknown as StoryModule,
+  "./ui/b-preview-two/preview-two.stories.tsx": bPreviewTwo as unknown as StoryModule,
   "./ui/button/button.stories.tsx": button as unknown as StoryModule,
+  "./ui/canvas/canvas.stories.tsx": canvas as unknown as StoryModule,
   "./ui/card/card.stories.tsx": card as unknown as StoryModule,
   "./ui/counter/counter.stories.tsx": counter as unknown as StoryModule,
 };
@@ -31,7 +37,10 @@ export const storyModules: Record<string, StoryModule> = {
  * `isStory()`-filtered variants, never to gate membership.
  */
 export const storyExportOrder: Record<string, string[]> = {
+  "./ui/a-preview/preview.stories.tsx": ["Default"],
+  "./ui/b-preview-two/preview-two.stories.tsx": ["Default"],
   "./ui/button/button.stories.tsx": ["Primary", "Plain"],
+  "./ui/canvas/canvas.stories.tsx": ["Default"],
   "./ui/card/card.stories.tsx": ["Basic"],
   "./ui/counter/counter.stories.tsx": ["Basic"],
 };

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

@@ -0,0 +1,16 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import type { Story, StoryMeta } from "@takazudo/zudo-sg/stories";
+
+const meta: StoryMeta = {
+  title: "Preview",
+  category: "Route probes",
+  description: "Proves that a story titled Preview stays distinct from the iframe route.",
+  usage: "Packed route verifier probe.",
+};
+export default meta;
+
+export const Default: Story = {
+  name: "Default",
+  render: () => <div data-packed-story-identity="packed-preview-default">Preview route probe</div>,
+};

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

@@ -0,0 +1,16 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import type { Story, StoryMeta } from "@takazudo/zudo-sg/stories";
+
+const meta: StoryMeta = {
+  title: "Preview 2",
+  category: "Route probes",
+  description: "Proves deterministic allocation alongside the Preview story.",
+  usage: "Packed route verifier probe.",
+};
+export default meta;
+
+export const Default: Story = {
+  name: "Default",
+  render: () => <div data-packed-story-identity="packed-preview-two-default">Preview 2 route probe</div>,
+};

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

@@ -0,0 +1,16 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import type { Story, StoryMeta } from "@takazudo/zudo-sg/stories";
+
+const meta: StoryMeta = {
+  title: "Canvas",
+  category: "Route probes",
+  description: "Proves route-aware allocation for a custom preview endpoint.",
+  usage: "Packed route verifier probe.",
+};
+export default meta;
+
+export const Default: Story = {
+  name: "Default",
+  render: () => <div data-packed-story-identity="packed-canvas-default">Canvas route probe</div>,
+};

package/templates/default/zfb.config.ts

@@ -22,6 +22,7 @@ export default defineConfig(
       // 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