@takazudo/zudo-doc 0.2.21 → 1.0.0

package/bin/gen-z-index.mjs

@@ -0,0 +1,164 @@
+#!/usr/bin/env node
+// @takazudo/zudo-doc/bin/gen-z-index.mjs
+//
+// Package bin: regenerate (or check) the GENERATED:Z_INDEX marker block inside
+// a project's src/styles/global.css from the single source of truth in
+// src/config/z-index-tokens.ts.
+//
+// Reads from the project root (process.cwd()). Conventional paths:
+//   - Tokens: src/config/z-index-tokens.ts
+//   - CSS:    src/styles/global.css
+//
+// Usage (after pnpm install, via scripts in package.json):
+//   gen-z-index            # rewrite the @theme block in global.css
+//   gen-z-index --check    # verify committed block is up to date (exit 1 on drift)
+//
+// MUST be run with the project root as cwd (it resolves source paths against
+// process.cwd(), NOT against this file's location). The package.json scripts and
+// b4push satisfy this; CI's no-install z-index job invokes the file by path
+// from the repo root: `node packages/zudo-doc/bin/gen-z-index.mjs --check`.
+//
+// The block is a Tailwind v4 `@theme { --z-index-<name>: <value>; }` for every
+// tier, so Tailwind generates `z-<name>` utilities and raw CSS can reference
+// `z-index: var(--z-index-<name>)`.
+//
+// Pure Node (fs only — NO npm deps). Idempotent: running twice produces no diff.
+//
+// MAINTENANCE: edit src/config/z-index-tokens.ts (the source of truth), then run
+// `pnpm gen:z-index` and commit the regenerated global.css. Never hand-edit the
+// block between the BEGIN/END markers.
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+// Project root is always the current working directory — this is a project bin,
+// not a monorepo script.
+const ROOT = process.cwd();
+
+const TOKENS_PATH = resolve(ROOT, "src/config/z-index-tokens.ts");
+const CSS_PATH = resolve(ROOT, "src/styles/global.css");
+
+const BEGIN_MARKER = "GENERATED:Z_INDEX_BEGIN";
+const END_MARKER = "GENERATED:Z_INDEX_END";
+
+/**
+ * Parse the Z_INDEX_TIERS array out of z-index-tokens.ts WITHOUT importing it
+ * (this bin is a dependency-free .mjs and cannot resolve TypeScript). Reads
+ * each `{ name: "...", value: <n>, ... }` object literal. Throws on a malformed
+ * source so drift between the parser and the file surfaces loudly.
+ */
+function parseTiers(src) {
+  const arrayMatch = src.match(
+    /export const Z_INDEX_TIERS[^=]*=\s*\[([\s\S]*?)\];/,
+  );
+  if (!arrayMatch) {
+    throw new Error(
+      `Could not locate "export const Z_INDEX_TIERS = [ ... ]" in ${TOKENS_PATH}`,
+    );
+  }
+  const body = arrayMatch[1];
+  const tiers = [];
+  // Each tier is a `{ ... }` object literal; iterate top-level braces.
+  const objectRe = /\{([\s\S]*?)\}/g;
+  let m;
+  while ((m = objectRe.exec(body)) !== null) {
+    const obj = m[1];
+    const nameMatch = obj.match(/name:\s*"([^"]+)"/);
+    const valueMatch = obj.match(/value:\s*(-?\d+)/);
+    if (!nameMatch || !valueMatch) {
+      throw new Error(
+        `Malformed tier object in Z_INDEX_TIERS (missing name/value): ${obj.trim()}`,
+      );
+    }
+    tiers.push({ name: nameMatch[1], value: Number(valueMatch[1]) });
+  }
+  if (tiers.length === 0) {
+    throw new Error(`Z_INDEX_TIERS in ${TOKENS_PATH} parsed to an empty list`);
+  }
+  return tiers;
+}
+
+/**
+ * Build the full generated block (markers included). Two leading spaces of
+ * indentation match the surrounding `@theme` style in global.css.
+ */
+function buildBlock(tiers) {
+  const lines = [];
+  lines.push(`  /* ${BEGIN_MARKER}`);
+  lines.push(
+    `   * GENERATED:Z_INDEX — do not hand-edit; run pnpm gen:z-index.`,
+  );
+  lines.push(
+    `   * Source of truth: src/config/z-index-tokens.ts. Tailwind v4 reads the`,
+  );
+  lines.push(
+    `   * --z-index-<name> theme key and generates a z-<name> utility. */`,
+  );
+  lines.push(`  @theme {`);
+  for (const tier of tiers) {
+    lines.push(`    --z-index-${tier.name}: ${tier.value};`);
+  }
+  lines.push(`  }`);
+  lines.push(`  /* ${END_MARKER} */`);
+  return lines.join("\n");
+}
+
+/**
+ * Replace the existing BEGIN…END block in `css` with `block`. Throws if the
+ * markers are missing (the block must be seeded once by hand — see global.css).
+ */
+function replaceBlock(css, block) {
+  const beginIdx = css.indexOf(BEGIN_MARKER);
+  const endIdx = css.indexOf(END_MARKER);
+  if (beginIdx === -1 || endIdx === -1) {
+    throw new Error(
+      `Could not find ${BEGIN_MARKER} … ${END_MARKER} markers in ${CSS_PATH}.\n` +
+        `Seed the marker block once by hand, then re-run the generator.`,
+    );
+  }
+  // Expand to the full comment line that opens the block ("  /* GENERATED:...")
+  // and to the end of the closing "*/ " line so the whole region is replaced.
+  const lineStart = css.lastIndexOf("\n", beginIdx) + 1;
+  const afterEnd = css.indexOf("\n", endIdx);
+  const lineEnd = afterEnd === -1 ? css.length : afterEnd;
+  return css.slice(0, lineStart) + block + css.slice(lineEnd);
+}
+
+function main() {
+  const check = process.argv.includes("--check");
+
+  const tokensSrc = readFileSync(TOKENS_PATH, "utf8");
+  const css = readFileSync(CSS_PATH, "utf8");
+
+  const tiers = parseTiers(tokensSrc);
+  const block = buildBlock(tiers);
+  const next = replaceBlock(css, block);
+
+  if (check) {
+    if (next !== css) {
+      console.error(
+        "z-index codegen drift detected: src/styles/global.css is out of date.",
+      );
+      console.error("Run `pnpm gen:z-index` and commit the result.");
+      return 1;
+    }
+    console.log(
+      `OK — z-index @theme block is up to date (${tiers.length} tiers).`,
+    );
+    return 0;
+  }
+
+  if (next === css) {
+    console.log(
+      `z-index @theme block already up to date (${tiers.length} tiers); no change.`,
+    );
+    return 0;
+  }
+  writeFileSync(CSS_PATH, next);
+  console.log(
+    `Wrote z-index @theme block to src/styles/global.css (${tiers.length} tiers).`,
+  );
+  return 0;
+}
+
+process.exit(main());

package/bin/tags-audit-runner.ts

@@ -0,0 +1,126 @@
+#!/usr/bin/env -S tsx
+/**
+ * @takazudo/zudo-doc/bin/tags-audit-runner.ts
+ *
+ * TypeScript runner for the tags-audit package bin. Spawned by
+ * bin/tags-audit.mjs via tsx so it can:
+ *   1. Import the compiled core logic from this package
+ *      (@takazudo/zudo-doc/tags-audit).
+ *   2. Dynamically import the project's TypeScript config files
+ *      (src/config/settings.ts, src/config/tag-vocabulary.ts)
+ *      via tsx's TypeScript-aware loader.
+ *
+ * This file is published as-is in the package's `bin/` directory.
+ * Do NOT compile it — it is only ever run through tsx.
+ *
+ * Flags:
+ *   --fix    rewrite alias tags to canonical ids, byte-stable
+ *   --ci     force non-zero exit on any hard issue regardless of governance
+ *   --json   emit the report as JSON instead of colorized text
+ */
+
+import { join, resolve } from "node:path";
+
+import pc from "picocolors";
+import pluralize from "pluralize";
+import stringSimilarity from "string-similarity";
+
+import {
+  audit,
+  applyFixes,
+  computeRewrites,
+  formatTextReport,
+  hasHardIssues,
+  type AuditOptions,
+} from "@takazudo/zudo-doc/tags-audit";
+
+// ── Project root ───────────────────────────────────────────────────────────
+
+const ROOT_DIR = process.cwd();
+
+// ── Dynamic import of project-specific TypeScript config ───────────────────
+// tsx (which runs this file) handles the TypeScript imports below.
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const settingsModule = await import(resolve(ROOT_DIR, "src/config/settings.ts")) as any;
+const settings = settingsModule.settings as {
+  docsDir: string;
+  tagGovernance: "off" | "warn" | "strict";
+  tagVocabulary: boolean;
+  locales?: Record<string, { label?: string; dir: string }>;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const vocabModule = await import(resolve(ROOT_DIR, "src/config/tag-vocabulary.ts")) as any;
+const tagVocabulary: readonly { id: string; [k: string]: unknown }[] =
+  vocabModule.tagVocabulary ?? [];
+
+// ── CLI flags ──────────────────────────────────────────────────────────────
+
+const argv = process.argv.slice(2);
+const flags = {
+  fix: argv.includes("--fix"),
+  ci: argv.includes("--ci"),
+  json: argv.includes("--json"),
+};
+
+// ── Resolve content directories from settings ──────────────────────────────
+
+const docsDir = join(ROOT_DIR, settings.docsDir);
+const localeDirs = Object.values(settings.locales ?? {}).map((l) =>
+  join(ROOT_DIR, l.dir),
+);
+const contentDirs = [docsDir, ...localeDirs];
+
+const vocabularyActive =
+  Boolean(settings.tagVocabulary) && settings.tagGovernance !== "off";
+
+// ── Fix mode ───────────────────────────────────────────────────────────────
+
+if (flags.fix) {
+  const rewrites = computeRewrites(tagVocabulary);
+  const touched = await applyFixes(contentDirs, rewrites, ROOT_DIR);
+  if (flags.json) {
+    process.stdout.write(JSON.stringify({ fixed: touched }, null, 2) + "\n");
+  } else if (touched.length === 0) {
+    console.log(pc.green("✓ No alias rewrites needed"));
+  } else {
+    console.log(pc.green(`✓ Rewrote aliases in ${touched.length} file(s):`));
+    for (const f of touched) console.log(`  ${f}`);
+  }
+  process.exit(0);
+}
+
+// ── Audit mode ─────────────────────────────────────────────────────────────
+
+const opts: AuditOptions = {
+  rootDir: ROOT_DIR,
+  contentDirs,
+  vocabulary: tagVocabulary,
+  governance: settings.tagGovernance,
+  vocabularyActive,
+  nearDupHelpers: {
+    singular: pluralize.singular,
+    compareTwoStrings: stringSimilarity.compareTwoStrings,
+  },
+};
+
+const report = await audit(opts);
+
+if (flags.json) {
+  process.stdout.write(JSON.stringify(report, null, 2) + "\n");
+} else {
+  console.log(formatTextReport(report, settings.tagGovernance, vocabularyActive, pc));
+}
+
+const hardIssues = hasHardIssues(report);
+if (hardIssues && (flags.ci || settings.tagGovernance === "strict")) {
+  process.exit(1);
+}
+if (hardIssues) {
+  console.error(
+    pc.yellow(
+      "Note: tag issues found but running in non-strict mode (exit 0). Use --ci to fail.",
+    ),
+  );
+}

package/bin/tags-audit.mjs

@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+// @takazudo/zudo-doc/bin/tags-audit.mjs
+//
+// Package bin: vocabulary-aware audit of frontmatter tags.
+//
+// Spawns tsx (from the project's node_modules) to run the TypeScript runner
+// (bin/tags-audit-runner.ts) which imports the compiled core logic from this
+// package plus the project's TypeScript config files (settings.ts,
+// tag-vocabulary.ts) via dynamic import.
+//
+// Requires tsx in the project's devDependencies. pnpm puts ./node_modules/.bin
+// in PATH for npm scripts, so `pnpm run tags:audit` always finds tsx.
+//
+// Usage (via package.json scripts):
+//   tags-audit          # report only (exit 0 in warn mode)
+//   tags-audit --fix    # rewrite alias tags in place
+//   tags-audit --ci     # force exit 1 on any hard issue
+//   tags-audit --json   # emit JSON report
+
+import { spawnSync } from "node:child_process";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { existsSync } from "node:fs";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// The TypeScript runner lives alongside this bin, published in the package.
+// tsx treats it as a TypeScript file and handles the import graph.
+const RUNNER_PATH = resolve(__dirname, "tags-audit-runner.ts");
+
+// Locate tsx in the project's node_modules/.bin.
+// Walk up from cwd to handle monorepo setups where node_modules is hoisted.
+function findTsxBin() {
+  let dir = process.cwd();
+  for (let i = 0; i < 10; i++) {
+    const candidate = resolve(dir, "node_modules/.bin/tsx");
+    if (existsSync(candidate)) return candidate;
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  // Last resort: tsx on PATH (e.g. globally installed or nix-shell)
+  return "tsx";
+}
+
+const tsxBin = findTsxBin();
+
+const result = spawnSync(tsxBin, [RUNNER_PATH, ...process.argv.slice(2)], {
+  stdio: "inherit",
+  env: process.env,
+  cwd: process.cwd(),
+});
+
+if (result.error) {
+  // tsx binary not found or failed to spawn
+  process.stderr.write(
+    `\n[tags-audit] ERROR: Could not run tsx to execute the tags-audit runner.\n` +
+      `  Ensure tsx is in your project's devDependencies and run \`pnpm install\`.\n` +
+      `  tsx searched for: ${tsxBin}\n\n`,
+  );
+  process.exit(1);
+}
+
+process.exit(result.status ?? 1);

package/bin/zudo-doc.mjs

@@ -0,0 +1,83 @@
+#!/usr/bin/env node
+// @takazudo/zudo-doc/bin/zudo-doc.mjs
+//
+// Package bin: `zudo-doc eject <component>` swizzle CLI.
+//
+// Self-contained ESM — runs on plain `node` with NO `tsx` requirement. The eject
+// logic is imported from the package's COMPILED `../dist/eject/index.js`, and the
+// only runtime deps are `minimist` + `picocolors` (declared deps of this package,
+// so they are present transitively in any consumer's node_modules). This is the
+// key difference from the tsx-runner pattern used by `bin/tags-audit.mjs`:
+// tags-audit must load the *project's* TypeScript config files at runtime (hence
+// tsx), whereas eject only copies files + rewrites imports — no TS eval needed —
+// so it works in a default generated project that never installed tsx (#2367).
+//
+// Usage:
+//   zudo-doc eject <component>   # eject a component's TS source into the project
+//   zudo-doc --help              # show help
+
+import minimist from "minimist";
+import pc from "picocolors";
+import { eject, EJECTABLE } from "../dist/eject/index.js";
+
+const argv = minimist(process.argv.slice(2), {
+  boolean: ["help"],
+  alias: { h: "help" },
+});
+
+function printHelp() {
+  const validNames = Object.keys(EJECTABLE).sort().join(", ");
+  console.log(`
+${pc.bold("Usage:")} zudo-doc <subcommand> [options]
+
+${pc.bold("Subcommands:")}
+  eject <component>   Copy a component's TS source into your project and
+                      rewrite imports so it resolves locally.
+
+${pc.bold("Ejectable components:")}
+  ${validNames}
+
+${pc.bold("Options:")}
+  -h, --help   Show this help message
+
+${pc.bold("Examples:")}
+  ${pc.dim("# Eject the header component")}
+  zudo-doc eject header
+
+  ${pc.dim("# Eject the theme-toggle component")}
+  zudo-doc eject theme-toggle
+`);
+}
+
+async function main() {
+  if (argv["help"] || argv._.length === 0) {
+    printHelp();
+    process.exit(0);
+  }
+
+  const [subcommand, componentArg] = argv._;
+
+  if (subcommand !== "eject") {
+    console.error(
+      pc.red(`Unknown subcommand "${subcommand}".`) +
+        `\nRun \`zudo-doc --help\` for usage.`,
+    );
+    process.exit(1);
+  }
+
+  if (!componentArg) {
+    console.error(
+      pc.red(`Missing component name.`) +
+        `\nUsage: zudo-doc eject <component>` +
+        `\nRun \`zudo-doc --help\` for the list of ejectable components.`,
+    );
+    process.exit(1);
+  }
+
+  await eject(componentArg, { cwd: process.cwd() });
+}
+
+main().catch((err) => {
+  console.error(pc.red(String(err)));
+  process.exit(1);
+});

package/dist/ai-chat-modal/index.d.ts

@@ -0,0 +1,8 @@
+interface AiChatModalProps {
+    basePath: string;
+}
+export declare function AiChatModal({ basePath }: AiChatModalProps): import("preact").JSX.Element;
+export declare namespace AiChatModal {
+    var displayName: string;
+}
+export {};

package/dist/ai-chat-modal/index.js

@@ -0,0 +1,243 @@
+"use client";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { useState, useEffect, useRef, useCallback, memo } from "preact/compat";
+import { renderMarkdown } from "../render-markdown/index.js";
+import { SmartBreak } from "../smart-break/index.js";
+import { BEFORE_NAVIGATE_EVENT } from "../transitions/index.js";
+import { useModalDialog } from "../use-modal-dialog/index.js";
+function isAiChatResponse(data) {
+  return typeof data === "object" && data !== null;
+}
+const ChatMessageRow = memo(function ChatMessageRow2({ msg }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `mb-vsp-xs flex ${msg.role === "user" ? "justify-end" : "justify-start"}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: msg.role === "user" ? "You: " : "Assistant: " }),
+        msg.role === "user" ? /* @__PURE__ */ jsx("div", { className: "max-w-[85%] rounded-t-[1rem] rounded-bl-[1rem] rounded-br-[0.25rem] bg-chat-user-bg px-hsp-md py-vsp-2xs text-small leading-relaxed text-chat-user-text", children: /* @__PURE__ */ jsx(SmartBreak, { children: msg.content }) }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ai-chat-md max-w-[85%] rounded-t-[1rem] rounded-br-[1rem] rounded-bl-[0.25rem] bg-chat-assistant-bg px-hsp-md py-vsp-2xs text-small leading-relaxed text-chat-assistant-text",
+            dangerouslySetInnerHTML: { __html: renderMarkdown(msg.content) }
+          }
+        )
+      ]
+    }
+  );
+});
+function AiChatModal({ basePath }) {
+  const messagesEndRef = useRef(null);
+  const inputRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const resetState = useCallback(() => {
+    setIsOpen(false);
+    setMessages([]);
+    setInput("");
+    setError(null);
+    setLoading(false);
+  }, []);
+  const { dialogRef, handleBackdropClick } = useModalDialog({
+    isOpen,
+    onClose: resetState,
+    navigateEvent: BEFORE_NAVIGATE_EVENT,
+    backdropClickClose: true,
+    restoreFocusOnly: true
+  });
+  useEffect(() => {
+    function handleToggle() {
+      const dialog = dialogRef.current;
+      if (!dialog || !dialog.isConnected) return;
+      if (dialog.open) {
+        dialog.close();
+      } else {
+        setIsOpen(true);
+      }
+    }
+    window.addEventListener("toggle-ai-chat", handleToggle);
+    return () => window.removeEventListener("toggle-ai-chat", handleToggle);
+  }, [dialogRef]);
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, loading]);
+  const sendMessage = useCallback(async () => {
+    const trimmed = input.trim();
+    if (!trimmed || loading) return;
+    const userMessage = { role: "user", content: trimmed };
+    const updatedMessages = [...messages, userMessage];
+    setMessages(updatedMessages);
+    setInput("");
+    setError(null);
+    setLoading(true);
+    try {
+      const base = basePath.replace(/\/+$/, "");
+      const res = await fetch(`${base}/api/ai-chat`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          message: trimmed,
+          history: messages
+        })
+      });
+      const raw = await res.json();
+      const data = isAiChatResponse(raw) ? raw : {};
+      if (!res.ok) {
+        setError(("error" in data && typeof data.error === "string" ? data.error : null) || "Something went wrong");
+      } else if ("response" in data && typeof data.response === "string" && data.response) {
+        setMessages((prev) => [
+          ...prev,
+          { role: "assistant", content: data.response }
+        ]);
+      } else {
+        setError("Received an empty or invalid response");
+      }
+    } catch {
+      setError("Failed to connect to the AI assistant");
+    } finally {
+      setLoading(false);
+    }
+  }, [input, loading, messages, basePath]);
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      onClick: handleBackdropClick,
+      className: "z-modal m-0 h-dvh max-h-none w-dvw max-w-none border-none bg-surface p-0 text-fg backdrop:z-modal-backdrop backdrop:bg-bg/80 lg:m-auto lg:h-[90vh] lg:max-h-[90vh] lg:w-[90vw] lg:max-w-[52.5rem] lg:border-solid lg:border lg:border-fg",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-muted px-hsp-lg py-vsp-xs", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-title font-bold text-fg", children: "AI Assistant" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => dialogRef.current?.close(),
+              className: "flex items-center justify-center text-muted transition-colors hover:text-fg",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { role: "log", "aria-label": "Chat messages", className: "flex-1 overflow-y-auto px-hsp-lg py-vsp-sm", children: [
+          messages.length === 0 && !loading && /* @__PURE__ */ jsx("p", { className: "py-vsp-xl text-center text-small text-muted", children: "Ask a question about the documentation." }),
+          messages.map((msg, i) => /* @__PURE__ */ jsx(ChatMessageRow, { msg }, i)),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              className: "sr-only",
+              children: (() => {
+                for (let i = messages.length - 1; i >= 0; i--) {
+                  const msg = messages[i];
+                  if (msg && msg.role === "assistant") return msg.content;
+                }
+                return "";
+              })()
+            }
+          ),
+          loading && /* @__PURE__ */ jsx("div", { className: "mb-vsp-xs flex justify-start", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "status",
+              className: "rounded-t-[1rem] rounded-br-[1rem] rounded-bl-[0.25rem] bg-chat-assistant-bg px-hsp-md py-vsp-2xs text-small text-muted",
+              children: "Thinking..."
+            }
+          ) }),
+          error && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "alert",
+              className: "mb-vsp-xs rounded-[0.75rem] border border-danger bg-bg px-hsp-md py-vsp-2xs text-small text-danger",
+              children: error
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-muted px-hsp-lg py-vsp-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-hsp-sm", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: input,
+              onChange: (e) => setInput(e.currentTarget.value),
+              onKeyDown: handleKeyDown,
+              disabled: loading,
+              "aria-label": "Type your message",
+              "aria-busy": loading,
+              placeholder: "Type your message...",
+              className: "flex-1 rounded-full border border-muted bg-bg px-hsp-lg py-vsp-2xs text-small text-fg placeholder:text-muted focus:border-accent focus:outline-none disabled:opacity-50"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: sendMessage,
+              disabled: loading || !input.trim(),
+              "aria-busy": loading,
+              className: "flex h-[2rem] w-[2rem] shrink-0 items-center justify-center rounded-full bg-accent text-bg transition-colors hover:bg-accent-hover disabled:opacity-50",
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                    /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                  ]
+                }
+              )
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+}
+AiChatModal.displayName = "AiChatModal";
+export {
+  AiChatModal
+};