create-zudo-doc 0.2.20 → 0.2.22

package/templates/base/src/components/site-tree-nav.tsx

@@ -1,220 +1,6 @@
-"use client";
-
-// Use preact hook entrypoints directly — the "react" → "preact/compat" alias
-// lets us consume React-typed components in this Preact app (configured
-// project-wide). Same pattern as src/components/sidebar-tree.tsx.
-import { useState } from "preact/hooks";
-import type { NavNode } from "@/utils/docs";
-import { INDENT, connectorLeft, ConnectorLines, CategoryLinkIcon } from "./tree-nav-shared";
-import { ChevronRight } from "@takazudo/zudo-doc/icons";
-
-// site-tree-nav uses wider padding than the narrow sidebar
-const SITE_BASE_PAD = "clamp(0.5rem, 0.8vw, 1rem)";
-
-function padLeft(depth: number): string {
-  if (depth === 0) return SITE_BASE_PAD;
-  return `calc(${depth} * ${INDENT} + 1.25rem + 5px)`;
-}
-
-function reorderTree(tree: NavNode[], order: string[]): NavNode[] {
-  const map = new Map(tree.map((node) => [node.slug, node]));
-  const ordered: NavNode[] = [];
-  for (const slug of order) {
-    const node = map.get(slug);
-    if (node) {
-      ordered.push(node);
-      map.delete(slug);
-    }
-  }
-  // append unmatched nodes at end
-  for (const node of map.values()) {
-    ordered.push(node);
-  }
-  return ordered;
-}
-
-interface SiteTreeNavProps {
-  tree: NavNode[];
-  ariaLabel?: string;
-  categoryOrder?: string[];
-  categoryIgnore?: string[];
-}
-
-export default function SiteTreeNav({
-  tree,
-  ariaLabel = "Site index",
-  categoryOrder,
-  categoryIgnore,
-}: SiteTreeNavProps) {
-  let processedTree = tree;
-  if (categoryIgnore) {
-    const ignoreSet = new Set(categoryIgnore);
-    processedTree = processedTree.filter((node) => !ignoreSet.has(node.slug));
-  }
-  if (categoryOrder) {
-    processedTree = reorderTree(processedTree, categoryOrder);
-  }
-  return (
-    <nav
-      aria-label={ariaLabel}
-      data-site-nav
-      className="grid gap-vsp-md"
-      style={{
-        gridTemplateColumns: "repeat(auto-fill, minmax(min(18rem, 100%), 1fr))",
-      }}
-    >
-      {processedTree.map((node) => (
-        <div key={node.slug} className="min-w-0 border border-muted pl-hsp-sm py-vsp-2xs">
-          {node.children.length > 0 ? (
-            <CategoryNode node={node} depth={0} isLast={true} />
-          ) : (
-            <LeafNode node={node} depth={0} isLast={true} />
-          )}
-        </div>
-      ))}
-    </nav>
-  );
-}
-
-function NodeList({ nodes, depth }: { nodes: NavNode[]; depth: number }) {
-  return (
-    <>
-      {nodes.map((node, index) => {
-        const isLast = index === nodes.length - 1;
-        return node.children.length > 0 ? (
-          <CategoryNode
-            key={node.slug}
-            node={node}
-            depth={depth}
-            isLast={isLast}
-          />
-        ) : (
-          <LeafNode
-            key={node.slug}
-            node={node}
-            depth={depth}
-            isLast={isLast}
-          />
-        );
-      })}
-    </>
-  );
-}
-
-function CategoryNode({
-  node,
-  depth,
-  isLast,
-}: {
-  node: NavNode;
-  depth: number;
-  isLast: boolean;
-}) {
-  const [open, setOpen] = useState(true);
-  const toggle = () => setOpen((prev) => !prev);
-  const paddingLeft = padLeft(depth);
-
-  return (
-    <div className={`${depth >= 1 && !isLast ? "relative" : ""}`}>
-      {depth >= 1 && !isLast && open && (
-        <div
-          className="absolute border-l border-dashed border-muted z-local-1"
-          style={{
-            left: connectorLeft(depth),
-            top: 0,
-            bottom: 0,
-          }}
-        />
-      )}
-      <div className="relative">
-        <ConnectorLines
-          depth={depth}
-          isLast={isLast}
-          widthScale={2}
-          topPad="calc(0.15rem + var(--spacing-vsp-xs))"
-        />
-        <div
-          className="flex w-full items-center justify-between text-small font-semibold pt-[0.15rem] text-fg"
-          style={{ paddingLeft }}
-        >
-          {node.href ? (
-            <a
-              href={node.href}
-              className="flex-1 flex items-start gap-hsp-xs py-vsp-xs text-fg hover:text-accent hover:underline focus:underline"
-            >
-              {depth === 0 && (
-                <span className="flex h-[1lh] items-center">
-                  <CategoryLinkIcon className="w-[18px] 2xl:w-[24px]" />
-                </span>
-              )}
-              {node.label}
-            </a>
-          ) : (
-            <button
-              type="button"
-              onClick={toggle}
-              className="flex-1 py-vsp-xs text-left hover:text-accent hover:underline focus:underline"
-            >
-              {node.label}
-            </button>
-          )}
-          <button
-            type="button"
-            onClick={toggle}
-            className="aspect-square flex items-center justify-center w-[1.75rem] border-y border-l border-muted hover:underline focus:underline"
-            aria-expanded={open}
-            aria-label={open ? `Collapse ${node.label}` : `Expand ${node.label}`}
-          >
-            <ChevronRight className={`h-icon-xs w-icon-xs transition-transform duration-150 ${open ? "rotate-90" : ""} text-muted`} />
-          </button>
-        </div>
-      </div>
-      {open && (
-        <div>
-          <NodeList nodes={node.children} depth={depth + 1} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function LeafNode({
-  node,
-  depth,
-  isLast,
-}: {
-  node: NavNode;
-  depth: number;
-  isLast: boolean;
-}) {
-  if (!node.href) return null;
-  const isRoot = depth === 0;
-  const paddingLeft = padLeft(depth);
-
-  const topPad = isRoot
-    ? "calc(var(--spacing-vsp-xs) + 0.15rem)"
-    : "var(--spacing-vsp-2xs)";
-
-  return (
-    <div>
-      <div className="relative">
-        <ConnectorLines depth={depth} isLast={isLast} widthScale={2} topPad={topPad} />
-        <a
-          href={node.href}
-          className={isRoot
-            ? "flex items-start gap-hsp-xs py-[calc(var(--spacing-vsp-xs)+0.15rem)] text-small font-semibold text-fg hover:text-accent hover:underline focus:underline"
-            : `block py-vsp-2xs ${isLast ? "pb-vsp-xs" : ""} text-small text-fg hover:text-accent hover:underline focus:underline`
-          }
-          style={{ paddingLeft }}
-        >
-          {isRoot && (
-            <span className="flex h-[1lh] items-center">
-              <CategoryLinkIcon className="w-[18px] 2xl:w-[24px]" />
-            </span>
-          )}
-          {node.label}
-        </a>
-      </div>
-    </div>
-  );
-}
+// Thin re-export shim. SiteTreeNav moved into the package
+// (`@takazudo/zudo-doc/site-tree-nav-island`) as part of the package-first
+// migration (#2344, S2). Host code using `@/components/site-tree-nav`
+// still resolves correctly; the implementation lives in the package.
+export { SiteTreeNav } from "@takazudo/zudo-doc/site-tree-nav-island";
+export type { SiteTreeNavProps } from "@takazudo/zudo-doc/site-tree-nav-island";

package/templates/base/src/config/color-scheme-utils.ts

@@ -1,64 +1,39 @@
-import { colorSchemes, type ColorScheme, type ColorRef } from "./color-schemes";
+/**
+ * Project-side color-scheme helpers.
+ *
+ * The MECHANISM (palette→CSS injection logic) now lives in the package:
+ * `@takazudo/zudo-doc/color-scheme-utils`. This file re-exports those
+ * mechanism symbols and adds project-specific thin wrappers that read from
+ * this project's `colorSchemes` map and `settings`. The DATA (palette values,
+ * scheme names) stays in `./color-schemes` and `./settings`.
+ *
+ * S9a package-first migration — zudolab/zudo-doc#2333.
+ */
+
+export {
+  type ColorRef,
+  type ColorScheme,
+  SEMANTIC_DEFAULTS,
+  SEMANTIC_CSS_NAMES,
+  resolveColor,
+  resolveSemanticColors,
+  schemeToCssPairs,
+  generateCssCustomProperties as generateCssCustomPropertiesFromScheme,
+  generateLightDarkCssProperties as generateLightDarkCssPropertiesFromSchemes,
+} from "@takazudo/zudo-doc/color-scheme-utils";
+import {
+  generateCssCustomProperties as _generateCssCustomProperties,
+  generateLightDarkCssProperties as _generateLightDarkCssProperties,
+} from "@takazudo/zudo-doc/color-scheme-utils";
+
+import { colorSchemes } from "./color-schemes";
 import { settings } from "./settings";
 
-/** Default mapping: semantic token name → palette index */
-export const SEMANTIC_DEFAULTS: Record<string, number> = {
-  surface: 0,
-  muted: 8,
-  accent: 5,
-  accentHover: 14,
-  codeBg: 10,
-  codeFg: 11,
-  success: 2,
-  danger: 1,
-  warning: 3,
-  info: 4,
-  mermaidNodeBg: 9,
-  mermaidText: 11,
-  mermaidLine: 8,
-  mermaidLabelBg: 10,
-  mermaidNoteBg: 0,
-  chatUserBg: 5,
-  chatUserText: 9,
-  chatAssistantBg: 9,
-  chatAssistantText: 11,
-  imageOverlayBg: 0,
-  imageOverlayFg: 11,
-  matchedKeywordBg: 3,
-  matchedKeywordFg: 15,
-};
-
-export const SEMANTIC_CSS_NAMES: Record<string, string> = {
-  surface: "--zd-surface",
-  muted: "--zd-muted",
-  accent: "--zd-accent",
-  accentHover: "--zd-accent-hover",
-  codeBg: "--zd-code-bg",
-  codeFg: "--zd-code-fg",
-  success: "--zd-success",
-  danger: "--zd-danger",
-  warning: "--zd-warning",
-  info: "--zd-info",
-  mermaidNodeBg: "--zd-mermaid-node-bg",
-  mermaidText: "--zd-mermaid-text",
-  mermaidLine: "--zd-mermaid-line",
-  mermaidLabelBg: "--zd-mermaid-label-bg",
-  mermaidNoteBg: "--zd-mermaid-note-bg",
-  chatUserBg: "--zd-chat-user-bg",
-  chatUserText: "--zd-chat-user-text",
-  chatAssistantBg: "--zd-chat-assistant-bg",
-  chatAssistantText: "--zd-chat-assistant-text",
-  imageOverlayBg: "--zd-image-overlay-bg",
-  imageOverlayFg: "--zd-image-overlay-fg",
-  matchedKeywordBg: "--zd-matched-keyword-bg",
-  matchedKeywordFg: "--zd-matched-keyword-fg",
-};
-
 export const lightDarkPairings = [
   { light: "Default Light", dark: "Default Dark", label: "Default" },
 ];
 
-export function getActiveScheme(): ColorScheme {
+export function getActiveScheme() {
   const scheme = colorSchemes[settings.colorScheme];
   if (!scheme) {
     throw new Error(`Unknown color scheme: "${settings.colorScheme}". Available: ${Object.keys(colorSchemes).join(", ")}`);
@@ -66,93 +41,12 @@ export function getActiveScheme(): ColorScheme {
   return scheme;
 }
 
-/** Resolve a ColorRef to a concrete color string.
- *  - number → palette[value]
- *  - string → used as-is
- *  - undefined → fallback */
-export function resolveColor(
-  value: ColorRef | undefined,
-  palette: string[],
-  fallback: string,
-): string {
-  if (value === undefined) return fallback;
-  if (typeof value === "number") return palette[value] ?? fallback;
-  return value;
-}
-
-/** Resolve semantic colors with fallbacks to default palette slots */
-export function resolveSemanticColors(scheme: ColorScheme) {
-  const p = scheme.palette;
-  return {
-    surface: resolveColor(scheme.semantic?.surface, p, p[0]),
-    muted: resolveColor(scheme.semantic?.muted, p, p[8]),
-    accent: resolveColor(scheme.semantic?.accent, p, p[5]),
-    accentHover: resolveColor(scheme.semantic?.accentHover, p, p[14]),
-    codeBg: resolveColor(scheme.semantic?.codeBg, p, p[10]),
-    codeFg: resolveColor(scheme.semantic?.codeFg, p, p[11]),
-    success: resolveColor(scheme.semantic?.success, p, p[2]),
-    danger: resolveColor(scheme.semantic?.danger, p, p[1]),
-    warning: resolveColor(scheme.semantic?.warning, p, p[3]),
-    info: resolveColor(scheme.semantic?.info, p, p[4]),
-    mermaidNodeBg: resolveColor(scheme.semantic?.mermaidNodeBg, p, p[9]),
-    mermaidText: resolveColor(scheme.semantic?.mermaidText, p, p[11]),
-    mermaidLine: resolveColor(scheme.semantic?.mermaidLine, p, p[8]),
-    mermaidLabelBg: resolveColor(scheme.semantic?.mermaidLabelBg, p, p[10]),
-    mermaidNoteBg: resolveColor(scheme.semantic?.mermaidNoteBg, p, p[0]),
-    chatUserBg: resolveColor(scheme.semantic?.chatUserBg, p, p[5]),
-    chatUserText: resolveColor(scheme.semantic?.chatUserText, p, p[9]),
-    chatAssistantBg: resolveColor(scheme.semantic?.chatAssistantBg, p, p[9]),
-    chatAssistantText: resolveColor(scheme.semantic?.chatAssistantText, p, p[11]),
-    imageOverlayBg: resolveColor(scheme.semantic?.imageOverlayBg, p, p[0]),
-    imageOverlayFg: resolveColor(scheme.semantic?.imageOverlayFg, p, p[11]),
-    matchedKeywordBg: resolveColor(scheme.semantic?.matchedKeywordBg, p, p[3]),
-    matchedKeywordFg: resolveColor(scheme.semantic?.matchedKeywordFg, p, p[15]),
-  };
-}
-
-export function schemeToCssPairs(scheme: ColorScheme): [string, string][] {
-  const p = scheme.palette;
-  const sem = resolveSemanticColors(scheme);
-  return [
-    ["--zd-bg", resolveColor(scheme.background, p, p[0])],
-    ["--zd-fg", resolveColor(scheme.foreground, p, p[15])],
-    ["--zd-cursor", resolveColor(scheme.cursor, p, p[6])], // intentionally inert/vestigial: exposed in the design-token panel but no CSS rule consumes it (no caret-color wiring); mirrors shikiTheme's status
-    ["--zd-sel-bg", resolveColor(scheme.selectionBg, p, resolveColor(scheme.background, p, p[0]))],
-    ["--zd-sel-fg", resolveColor(scheme.selectionFg, p, resolveColor(scheme.foreground, p, p[15]))],
-    ...p.map((color, i) => [`--zd-${i}`, color] as [string, string]),
-    ["--zd-surface", sem.surface],
-    ["--zd-muted", sem.muted],
-    ["--zd-accent", sem.accent],
-    ["--zd-accent-hover", sem.accentHover],
-    ["--zd-code-bg", sem.codeBg],
-    ["--zd-code-fg", sem.codeFg],
-    ["--zd-success", sem.success],
-    ["--zd-danger", sem.danger],
-    ["--zd-warning", sem.warning],
-    ["--zd-info", sem.info],
-    ["--zd-mermaid-node-bg", sem.mermaidNodeBg],
-    ["--zd-mermaid-text", sem.mermaidText],
-    ["--zd-mermaid-line", sem.mermaidLine],
-    ["--zd-mermaid-label-bg", sem.mermaidLabelBg],
-    ["--zd-mermaid-note-bg", sem.mermaidNoteBg],
-    ["--zd-chat-user-bg", sem.chatUserBg],
-    ["--zd-chat-user-text", sem.chatUserText],
-    ["--zd-chat-assistant-bg", sem.chatAssistantBg],
-    ["--zd-chat-assistant-text", sem.chatAssistantText],
-    ["--zd-image-overlay-bg", sem.imageOverlayBg],
-    ["--zd-image-overlay-fg", sem.imageOverlayFg],
-    ["--zd-matched-keyword-bg", sem.matchedKeywordBg],
-    ["--zd-matched-keyword-fg", sem.matchedKeywordFg],
-  ];
-}
-
+/** Generate `:root { --zd-* }` CSS for the project's active single scheme. */
 export function generateCssCustomProperties(): string {
-  const scheme = getActiveScheme();
-  const pairs = schemeToCssPairs(scheme);
-  const lines = [":root {", ...pairs.map(([prop, value]) => `  ${prop}: ${value};`), "}"];
-  return lines.join("\n");
+  return _generateCssCustomProperties(getActiveScheme());
 }
 
+/** Generate `:root { --zd-*: light-dark(…) }` CSS for the project's configured light/dark pair. */
 export function generateLightDarkCssProperties(): string {
   if (!settings.colorMode) {
     throw new Error("colorMode is not configured");
@@ -162,23 +56,5 @@ export function generateLightDarkCssProperties(): string {
   const dark = colorSchemes[darkScheme];
   if (!light) throw new Error(`Unknown light scheme: "${lightScheme}"`);
   if (!dark) throw new Error(`Unknown dark scheme: "${darkScheme}"`);
-
-  const lightPairs = schemeToCssPairs(light);
-  const darkPairs = schemeToCssPairs(dark);
-
-  if (lightPairs.length !== darkPairs.length) {
-    throw new Error(`Light scheme has ${lightPairs.length} properties but dark scheme has ${darkPairs.length}`);
-  }
-
-  const lines = [":root {", "  color-scheme: light dark;"];
-  for (let i = 0; i < lightPairs.length; i++) {
-    const lightPair = lightPairs[i];
-    const darkPair = darkPairs[i];
-    if (!lightPair || !darkPair) continue;
-    const [prop, lightVal] = lightPair;
-    const darkVal = darkPair[1];
-    lines.push(`  ${prop}: light-dark(${lightVal}, ${darkVal});`);
-  }
-  lines.push("}");
-  return lines.join("\n");
+  return _generateLightDarkCssProperties(light, dark);
 }

package/templates/base/src/config/i18n.ts

@@ -74,6 +74,9 @@ const translations: Record<string, Record<string, string>> = {
     "search.placeholder": "Type to search...",
     "search.shortcutHint": "to open search from anywhere",
     "search.resultCount": "{count} results",
+    "search.unavailable": "Search unavailable",
+    "search.loadingIndex": "Loading search index…",
+    "search.noResults": "No results found.",
     "code.copy": "Copy code",
     "code.copied": "Copied!",
     "code.wrapToggle": "Toggle word wrap",
@@ -134,6 +137,9 @@ const translations: Record<string, Record<string, string>> = {
     "search.placeholder": "検索したい単語を入力",
     "search.shortcutHint": "いつでも検索バーを開ける",
     "search.resultCount": "{count} 件",
+    "search.unavailable": "検索を利用できません",
+    "search.loadingIndex": "検索インデックスを読み込み中…",
+    "search.noResults": "検索結果が見つかりませんでした。",
     "code.copy": "コードをコピー",
     "code.copied": "コピーしました！",
     "code.wrapToggle": "折り返し切替",
@@ -194,6 +200,9 @@ const translations: Record<string, Record<string, string>> = {
     "search.placeholder": "Suchbegriff eingeben...",
     "search.shortcutHint": "Suche von überall öffnen",
     "search.resultCount": "{count} Ergebnisse",
+    "search.unavailable": "Suche nicht verfügbar",
+    "search.loadingIndex": "Suchindex wird geladen…",
+    "search.noResults": "Keine Ergebnisse gefunden.",
     "code.copy": "Code kopieren",
     "code.copied": "Kopiert!",
     "code.wrapToggle": "Zeilenumbruch umschalten",

package/templates/base/src/config/z-index-tokens.ts

@@ -1,10 +1,11 @@
 // z-index design tokens — single source of truth.
 //
 // This file is the ONE place z-index tiers are defined. The CSS `@theme` block
-// in `src/styles/global.css` is GENERATED from this list by
-// `scripts/gen-z-index.mjs` (run `pnpm gen:z-index`); never hand-edit the
-// generated block. `pnpm check:z-index` re-runs the generator into a buffer and
-// fails on drift, so the committed CSS can never silently diverge from this list.
+// in `src/styles/global.css` is GENERATED from this list by the
+// `gen-z-index` bin from `@takazudo/zudo-doc` (run `pnpm gen:z-index`); never
+// hand-edit the generated block. `pnpm check:z-index` re-runs the generator
+// into a buffer and fails on drift, so the committed CSS can never silently
+// diverge from this list.
 //
 // Strategy (from zudolab/zudo-css-wisdom z-index-strategy): semantic single-
 // namespace tokens — names describe ROLES, never magnitudes. One flat ordered