npm - create-forte-ui - Versions diffs - 1.0.0-alpha.4 - Mend

create-forte-ui 1.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/overlay.js ADDED Viewed

@@ -0,0 +1,107 @@
+/* The forte-ui overlay: what turns an upstream scaffold into the guides'
+ * finished walkthrough. Wholesale replacement, not merging — every file
+ * touched here was written by the scaffolder seconds ago, and the guides'
+ * "replace, don't merge" warnings exist because the scaffold CSS is unlayered
+ * author CSS that would beat everything in `@layer forte.*`.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { htmlAttrs } from "./theme.js";
+import { viteIndexCss, viteMainTsx, viteAppTsx, VITE_CONFIG_TW, nextGlobalsCss, nextLayoutTsx, nextPageTsx, } from "./templates.js";
+function write(dir, rel, content) {
+    fs.writeFileSync(path.join(dir, rel), content);
+}
+function remove(dir, rel) {
+    fs.rmSync(path.join(dir, rel), { force: true });
+}
+/** Returns the files it wrote (project-relative), for the summary. */
+export function applyOverlay(plan) {
+    return plan.framework === "vite" ? applyVite(plan) : applyNext(plan);
+}
+function applyVite({ name, dir, tailwind, answers }) {
+    const written = [];
+    write(dir, "src/index.css", viteIndexCss(answers, tailwind));
+    written.push("src/index.css");
+    write(dir, "src/main.tsx", viteMainTsx(tailwind));
+    written.push("src/main.tsx");
+    write(dir, "src/App.tsx", viteAppTsx(name, tailwind));
+    written.push("src/App.tsx");
+    /* The guide's warning covers App.css too: its rules are unlayered and the
+     * new App.tsx no longer imports it. Delete rather than empty, so nobody
+     * re-imports a file that looks like it should exist. */
+    remove(dir, "src/App.css");
+    if (tailwind) {
+        write(dir, "vite.config.ts", VITE_CONFIG_TW);
+        written.push("vite.config.ts");
+    }
+    /* Vite's `<html>` lives in index.html. Anchored replacements rather than a
+     * rewrite — the rest of the file (favicon, root div, module script) is the
+     * scaffolder's to evolve. A missed anchor is a template change upstream:
+     * report it, never guess. */
+    const htmlPath = path.join(dir, "index.html");
+    let html = fs.readFileSync(htmlPath, "utf8");
+    const attrs = htmlAttrs(answers);
+    const anchored = html.replace(/<html lang="en">/, `<html lang="en"${attrs}>`);
+    if (attrs && anchored === html) {
+        throw new Error(`could not find '<html lang="en">' in index.html to add${attrs} — ` +
+            `the create-vite template may have changed; add the attribute(s) by hand.`);
+    }
+    html = anchored.replace(/<title>[^<]*<\/title>/, `<title>${name}</title>`);
+    /* Tailwind only: pin the cascade-layer order in the DOCUMENT, not the
+     * stylesheet. The bridge's own `@layer theme, base, forte, components,
+     * utilities;` statement is supposed to do this, but Vite's CSS pipeline
+     * (Tailwind's compiler re-slotting the statement, lightningcss merging
+     * statements under minification, chunk concatenation order) rewrites it,
+     * and the observed result is `base` first appearing AFTER `forte` — at
+     * which point Preflight's `button { background: transparent }` beats every
+     * component by layer order and buttons render as bare text. An inline
+     * <style> ahead of every stylesheet is untouchable by that pipeline, and
+     * layer order is fixed at first appearance, so nothing later can unpin it.
+     * Next.js needs none of this — its pipeline emits the statement in order. */
+    if (tailwind) {
+        const pin = "    <!-- Pins the cascade-layer order before any stylesheet loads; the CSS\n" +
+            "         bundler can reorder @layer statements, and first appearance wins. -->\n" +
+            "    <style>@layer theme, base, forte, components, utilities;</style>\n";
+        const pinned = html.replace(/[ \t]*<\/head>/, `${pin}  </head>`);
+        if (pinned === html) {
+            throw new Error("could not find '</head>' in index.html to pin the cascade-layer order — " +
+                "the create-vite template may have changed; add " +
+                "<style>@layer theme, base, forte, components, utilities;</style> to <head> by hand.");
+        }
+        html = pinned;
+    }
+    fs.writeFileSync(htmlPath, html);
+    written.push("index.html");
+    return written;
+}
+function applyNext({ name, dir, tailwind, answers }) {
+    const written = [];
+    write(dir, "app/globals.css", nextGlobalsCss(answers, tailwind));
+    written.push("app/globals.css");
+    write(dir, "app/layout.tsx", nextLayoutTsx(name, answers, tailwind));
+    written.push("app/layout.tsx");
+    write(dir, "app/page.tsx", nextPageTsx(name, tailwind));
+    written.push("app/page.tsx");
+    /* The plain scaffold ships a page.module.css the new page no longer
+     * imports; the Tailwind scaffold has none, so `force` covers both. */
+    remove(dir, "app/page.module.css");
+    return written;
+}
+/** The `--no-install` fallback: record the dependencies so the user's own
+ *  install resolves them. "latest" is a dist-tag, which every manager
+ *  accepts and replaces with a real range on first install. */
+export function recordDependencies(dir, deps) {
+    const pkgPath = path.join(dir, "package.json");
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+    pkg.dependencies ??= {};
+    for (const dep of deps)
+        pkg.dependencies[dep] = "latest";
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+}
+export function dependenciesFor(plan) {
+    /* create-next-app's --tailwind scaffold already carries tailwindcss v4;
+     * on Vite the guide installs it alongside the library, plus the plugin. */
+    return plan.framework === "vite" && plan.tailwind
+        ? ["@forte-ui/react", "tailwindcss", "@tailwindcss/vite"]
+        : ["@forte-ui/react"];
+}

package/dist/prompts.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { CliOptions } from "./args.js";
+import type { ProjectPlan } from "./overlay.js";
+export declare function validateProjectName(name: string): string | undefined;
+export declare function collectPlan(opts: CliOptions): Promise<ProjectPlan>;

package/dist/prompts.js ADDED Viewed

@@ -0,0 +1,166 @@
+/* The questionnaire. Four questions get you to a running app; everything
+ * else hides behind one "customize further?" gate, because six theme prompts
+ * up front reads as a form, and the people who skipped the Theme Studio
+ * mostly want `dev` running. A flag answers its question before it is asked.
+ */
+import * as p from "@clack/prompts";
+import fs from "node:fs";
+import path from "node:path";
+import { SANS_FONTS, MONO_FONTS } from "./fonts.js";
+import { hexToOklch } from "./color.js";
+import { DEFAULT_ANSWERS } from "./theme.js";
+import { UsageError } from "./args.js";
+function accept(value) {
+    if (p.isCancel(value)) {
+        p.cancel("Cancelled — nothing was written.");
+        process.exit(1);
+    }
+    return value;
+}
+export function validateProjectName(name) {
+    if (!name)
+        return "A project name is required.";
+    if (name === "." || name.includes("/") || name.includes("\\")) {
+        return "Pass a new directory name — scaffolding into an existing directory is not supported.";
+    }
+    if (!/^[a-z0-9][a-z0-9._-]*$/.test(name)) {
+        return "Use a lowercase npm-style name: letters, digits, dots, dashes.";
+    }
+    if (fs.existsSync(path.resolve(name)))
+        return `"${name}" already exists here.`;
+    return undefined;
+}
+const hexPrompt = (message) => async () => {
+    const value = accept(await p.text({
+        message,
+        placeholder: "Enter to keep the library default",
+        validate: (v) => {
+            if (!v)
+                return undefined;
+            return hexToOklch(v.startsWith("#") ? v : `#${v}`) ? undefined : "Expected a hex colour like #6d43d4.";
+        },
+    }));
+    if (!value)
+        return null;
+    return (value.startsWith("#") ? value : `#${value}`).toLowerCase();
+};
+async function fontPrompt(message, list) {
+    return accept(await p.select({
+        message,
+        initialValue: "System",
+        options: list.map((f) => ({
+            value: f.name,
+            label: f.name,
+            hint: f.stack === null ? "keep the library default" : undefined,
+        })),
+    }));
+}
+export async function collectPlan(opts) {
+    if (opts.yes && !opts.name) {
+        throw new UsageError("--yes needs a project name: create-forte-ui my-app --yes");
+    }
+    let name = opts.name;
+    if (name) {
+        const problem = validateProjectName(name);
+        if (problem)
+            throw new UsageError(problem);
+    }
+    else {
+        name = accept(await p.text({
+            message: "Project name",
+            placeholder: "my-app",
+            validate: (v) => validateProjectName(v ?? ""),
+        }));
+    }
+    const framework = opts.framework ??
+        (opts.yes
+            ? "next"
+            : accept(await p.select({
+                message: "Framework",
+                initialValue: "next",
+                options: [
+                    { value: "next", label: "Next.js", hint: "App Router" },
+                    { value: "vite", label: "Vite", hint: "react-ts template" },
+                ],
+            })));
+    const tailwind = opts.tailwind ??
+        (opts.yes
+            ? true
+            : accept(await p.confirm({
+                message: "Tailwind? (wires the token bridge — utilities follow your theme)",
+                initialValue: true,
+            })));
+    const answers = { ...DEFAULT_ANSWERS, ...opts.answers };
+    const flagged = new Set(Object.keys(opts.answers));
+    if (!opts.yes && !flagged.has("seed")) {
+        answers.seed = await hexPrompt("Accent color — your brand's hex, the whole palette derives from it")();
+    }
+    const advancedKeys = ["secondary", "tint", "radius", "density", "motion", "fontSans", "fontMono"];
+    const remaining = advancedKeys.filter((k) => !flagged.has(k));
+    const customize = !opts.yes &&
+        remaining.length > 0 &&
+        accept(await p.confirm({
+            message: "Customize further? (secondary, neutrals, radius, density, motion, fonts)",
+            initialValue: false,
+        }));
+    if (customize) {
+        if (remaining.includes("secondary")) {
+            answers.secondary = await hexPrompt("Secondary color — hex")();
+        }
+        if (remaining.includes("tint")) {
+            const tint = accept(await p.text({
+                message: "Neutral tint — 0 (pure grey) to 1 (full brand tint)",
+                placeholder: "1",
+                validate: (v) => {
+                    if (!v)
+                        return undefined;
+                    const n = Number(v);
+                    return Number.isFinite(n) && n >= 0 && n <= 1 ? undefined : "A number between 0 and 1.";
+                },
+            }));
+            if (tint)
+                answers.tint = Number(tint);
+        }
+        if (remaining.includes("radius")) {
+            answers.radius = accept(await p.select({
+                message: "Radius preset",
+                initialValue: "default",
+                options: [
+                    { value: "default", label: "Default" },
+                    { value: "none", label: "None", hint: "sharp corners everywhere" },
+                    { value: "soft", label: "Soft", hint: "one step rounder" },
+                    { value: "pill", label: "Pill", hint: "fully rounded controls" },
+                ],
+            }));
+        }
+        if (remaining.includes("density")) {
+            answers.density = accept(await p.select({
+                message: "Density preset",
+                initialValue: "default",
+                options: [
+                    { value: "default", label: "Comfortable", hint: "the default" },
+                    { value: "compact", label: "Compact" },
+                    { value: "spacious", label: "Spacious" },
+                ],
+            }));
+        }
+        if (remaining.includes("motion")) {
+            answers.motion = accept(await p.select({
+                message: "Motion",
+                initialValue: "default",
+                options: [
+                    { value: "default", label: "System", hint: "follows the OS reduced-motion setting" },
+                    { value: "reduce", label: "Reduce", hint: "geometry collapses, fades stay" },
+                    { value: "full", label: "Full", hint: "overrides the OS preference for everyone" },
+                ],
+            }));
+        }
+        if (remaining.includes("fontSans")) {
+            answers.fontSans = await fontPrompt("Sans font", SANS_FONTS);
+        }
+        if (remaining.includes("fontMono")) {
+            answers.fontMono = await fontPrompt("Mono font", MONO_FONTS);
+        }
+    }
+    return { name, dir: path.resolve(name), framework, tailwind, answers };
+}

package/dist/scaffold.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+export type PackageManager = "npm" | "pnpm" | "yarn" | "bun";
+export declare const PACKAGE_MANAGERS: readonly PackageManager[];
+/** `npm_config_user_agent` is set by every package manager for its child
+ *  processes ("pnpm/9.0.0 npm/? node/v20..."), so `pnpm create forte-ui`
+ *  self-identifies. Direct `npx` invocation reports npm, which is right. */
+export declare function detectPackageManager(): PackageManager;
+/** Run a `create-*` package without installing it, through the invoking
+ *  manager's own runner where it has one. Yarn Classic has no `dlx`, so it
+ *  falls back to npx — npm is a Node guarantee, Berry users still get the
+ *  right lockfile from the later install step. */
+export declare function runScaffolder(pm: PackageManager, pkg: string, args: string[], cwd: string): boolean;
+/** `pm add <deps>` in the project — resolves "latest" into a real caret range
+ *  in package.json and performs the full install in one pass. */
+export declare function addDependencies(pm: PackageManager, deps: string[], cwd: string): boolean;
+/** The dev-server line for the outro, in the user's own manager. */
+export declare function devCommand(pm: PackageManager): string;
+export declare function installCommand(pm: PackageManager): string;

package/dist/scaffold.js ADDED Viewed

@@ -0,0 +1,55 @@
+/* Process plumbing: which package manager invoked us, and how to run the
+ * upstream scaffolders through it. The framework templates are deliberately
+ * NOT ours — `create-vite` and `create-next-app` keep their own scaffolds
+ * current, and this CLI only owns the forte-ui overlay on top. That division
+ * is what keeps the tool from rotting the way frozen templates do.
+ */
+import { spawnSync } from "node:child_process";
+export const PACKAGE_MANAGERS = ["npm", "pnpm", "yarn", "bun"];
+/** `npm_config_user_agent` is set by every package manager for its child
+ *  processes ("pnpm/9.0.0 npm/? node/v20..."), so `pnpm create forte-ui`
+ *  self-identifies. Direct `npx` invocation reports npm, which is right. */
+export function detectPackageManager() {
+    const agent = process.env.npm_config_user_agent ?? "";
+    if (agent.startsWith("pnpm"))
+        return "pnpm";
+    if (agent.startsWith("yarn"))
+        return "yarn";
+    if (agent.startsWith("bun"))
+        return "bun";
+    return "npm";
+}
+/* Windows resolves `npx`/`pnpm` through .cmd shims, which spawnSync only
+ * finds with a shell. */
+const needsShell = process.platform === "win32";
+function run(cmd, args, cwd) {
+    const result = spawnSync(cmd, args, { stdio: "inherit", cwd, shell: needsShell });
+    return result.status === 0;
+}
+/** Run a `create-*` package without installing it, through the invoking
+ *  manager's own runner where it has one. Yarn Classic has no `dlx`, so it
+ *  falls back to npx — npm is a Node guarantee, Berry users still get the
+ *  right lockfile from the later install step. */
+export function runScaffolder(pm, pkg, args, cwd) {
+    switch (pm) {
+        case "pnpm":
+            return run("pnpm", ["dlx", pkg, ...args], cwd);
+        case "bun":
+            return run("bunx", [pkg, ...args], cwd);
+        default:
+            return run("npx", ["--yes", pkg, ...args], cwd);
+    }
+}
+/** `pm add <deps>` in the project — resolves "latest" into a real caret range
+ *  in package.json and performs the full install in one pass. */
+export function addDependencies(pm, deps, cwd) {
+    const sub = pm === "npm" ? "install" : "add";
+    return run(pm, [sub, ...deps], cwd);
+}
+/** The dev-server line for the outro, in the user's own manager. */
+export function devCommand(pm) {
+    return pm === "npm" ? "npm run dev" : `${pm} dev`;
+}
+export function installCommand(pm) {
+    return pm === "yarn" ? "yarn" : `${pm} install`;
+}

package/dist/templates.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { type ThemeAnswers } from "./theme.js";
+export declare function viteIndexCss(a: ThemeAnswers, tailwind: boolean): string;
+export declare function viteMainTsx(tailwind: boolean): string;
+export declare function viteAppTsx(name: string, tailwind: boolean): string;
+export declare const VITE_CONFIG_TW = "import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport tailwindcss from \"@tailwindcss/vite\";\n\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n});\n";
+export declare function nextGlobalsCss(a: ThemeAnswers, tailwind: boolean): string;
+export declare function nextLayoutTsx(name: string, a: ThemeAnswers, tailwind: boolean): string;
+export declare function nextPageTsx(name: string, tailwind: boolean): string;

package/dist/templates.js ADDED Viewed

@@ -0,0 +1,172 @@
+/* The files the overlay writes, one builder per file. The content is the
+ * getting-started guides' snippets, parameterised — the guides are the spec,
+ * and keeping these byte-close to the published steps is what lets a reader
+ * diff a scaffolded app against the walkthrough and see only their own
+ * answers. When a guide step changes, change the builder with it.
+ */
+import { rootBlock, fontImports, htmlAttrs, nextFontSetup } from "./theme.js";
+/* The body rule from the guides' "Replace the scaffold CSS" step. Present on
+ * the non-Tailwind paths only — the Tailwind starter page carries the same
+ * three declarations as utilities on `<main>`. */
+const BODY_RULE = `body {
+  margin: 0;
+  background: var(--forte-color-background);
+  color: var(--forte-color-foreground);
+  font-family: var(--forte-font-sans);
+}
+`;
+function joinBlocks(...blocks) {
+    return blocks.filter(Boolean).join("\n") + "\n";
+}
+/* -------------------------------------------------------------------------
+ * Vite
+ * ---------------------------------------------------------------------- */
+export function viteIndexCss(a, tailwind) {
+    const imports = fontImports(a);
+    const fontBlock = imports.length
+        ? `/* Or self-host these — any @font-face works. */\n${imports.join("\n")}\n`
+        : "";
+    if (tailwind) {
+        /* Ordering is load-bearing (see the guide): the bridge's first line pins
+         * the cascade-layer order, so it must precede `tailwindcss` and
+         * `theme.css`. The font imports carry no layer statements — and @import
+         * must precede every other statement — so they lead the file. */
+        return joinBlocks(fontBlock, `@import "@forte-ui/react/tailwind.css";
+@import "tailwindcss";
+@import "@forte-ui/react/theme.css";
+`, rootBlock(a, "import"));
+    }
+    return joinBlocks(fontBlock, rootBlock(a, "import"), BODY_RULE);
+}
+export function viteMainTsx(tailwind) {
+    /* On the Tailwind path `theme.css` is imported from index.css AFTER the
+     * bridge — importing it here would pin the `forte` layer first and hand
+     * Preflight the win. Without Tailwind there is no ordering hazard and the
+     * guide imports it at the entry point. */
+    const themeImport = tailwind ? "" : `import "@forte-ui/react/theme.css";\n`;
+    return `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+${themeImport}import "./index.css";
+import App from "./App.tsx";
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
+`;
+}
+export function viteAppTsx(name, tailwind) {
+    if (tailwind) {
+        return `import { Button, Card } from "@forte-ui/react";
+export default function App() {
+  return (
+    <main className="grid min-h-dvh place-items-center bg-background text-foreground">
+      <Card.Root variant="elevated" className="items-start gap-5">
+        <h1 className="text-5 font-semibold">${name}</h1>
+        <p className="text-2 text-foreground-muted">
+          Utilities and components, one theme.
+        </p>
+        <Button>It works</Button>
+      </Card.Root>
+    </main>
+  );
+}
+`;
+    }
+    return `import { Button } from "@forte-ui/react";
+export default function App() {
+  return (
+    <main style={{ display: "grid", placeItems: "center", minHeight: "100dvh" }}>
+      <Button>It works</Button>
+    </main>
+  );
+}
+`;
+}
+export const VITE_CONFIG_TW = `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
+`;
+/* -------------------------------------------------------------------------
+ * Next.js
+ * ---------------------------------------------------------------------- */
+export function nextGlobalsCss(a, tailwind) {
+    if (tailwind) {
+        return joinBlocks(`@import "@forte-ui/react/tailwind.css";
+@import "tailwindcss";
+@import "@forte-ui/react/theme.css";
+`, rootBlock(a, "next-font"));
+    }
+    return joinBlocks(rootBlock(a, "next-font"), BODY_RULE);
+}
+export function nextLayoutTsx(name, a, tailwind) {
+    const font = nextFontSetup(a);
+    /* Without Tailwind, `theme.css` is imported here, above globals — safe
+     * because nothing else declares layers. With Tailwind it must NOT be:
+     * globals.css imports it after the bridge (see the guide's ordering note),
+     * and a second import here would pin the `forte` layer before `base`. */
+    const themeImport = tailwind ? "" : `import "@forte-ui/react/theme.css";\n`;
+    return `import type { Metadata } from "next";
+${font.importLine ? font.importLine + "\n" : ""}${themeImport}import "./globals.css";
+${font.consts ? font.consts + "\n\n" : ""}export const metadata: Metadata = {
+  title: "${name}",
+  description: "Scaffolded by create-forte-ui",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en"${htmlAttrs(a)}${font.htmlClassAttr}>
+      <body>{children}</body>
+    </html>
+  );
+}
+`;
+}
+export function nextPageTsx(name, tailwind) {
+    if (tailwind) {
+        /* "use client" because of Card.Root: a server component receives a
+         * client-reference proxy for the namespace, property access resolves to
+         * undefined, and prerendering throws "Element type is invalid". The
+         * flat-export page below needs no boundary. */
+        return `"use client";
+import { Button, Card } from "@forte-ui/react";
+export default function Home() {
+  return (
+    <main className="grid min-h-dvh place-items-center bg-background text-foreground">
+      <Card.Root variant="elevated" className="items-start gap-5">
+        <h1 className="text-5 font-semibold">${name}</h1>
+        <p className="text-2 text-foreground-muted">
+          Utilities and components, one theme.
+        </p>
+        <Button>It works</Button>
+      </Card.Root>
+    </main>
+  );
+}
+`;
+    }
+    return `import { Button } from "@forte-ui/react";
+export default function Home() {
+  return (
+    <main style={{ display: "grid", placeItems: "center", minHeight: "100dvh" }}>
+      <Button>It works</Button>
+    </main>
+  );
+}
+`;
+}

package/dist/theme.d.ts ADDED Viewed

@@ -0,0 +1,46 @@
+export declare const RADIUS: readonly ["none", "default", "soft", "pill"];
+export declare const DENSITY: readonly ["compact", "default", "spacious"];
+export declare const MOTION: readonly ["full", "default", "reduce"];
+export type Radius = (typeof RADIUS)[number];
+export type Density = (typeof DENSITY)[number];
+export type Motion = (typeof MOTION)[number];
+export type ThemeAnswers = {
+    /** Accent seed hex, or null to keep the library default (write nothing). */
+    seed: string | null;
+    secondary: string | null;
+    /** 0 = pure grey neutrals, 1 = full brand tint. 1 is the shipped default. */
+    tint: number;
+    radius: Radius;
+    density: Density;
+    motion: Motion;
+    /** Catalogue names. "System" writes nothing. */
+    fontSans: string;
+    fontMono: string;
+};
+export declare const DEFAULT_ANSWERS: ThemeAnswers;
+/** How the chosen fonts reach `--forte-font-sans` / `--forte-font-mono`:
+ *  Vite loads the css2 stylesheet by `@import` and writes the stack verbatim;
+ *  Next loads through `next/font/google` and points the token at the variable
+ *  the loader defines. Same answer, framework-idiomatic serialisation. */
+export type FontMode = "import" | "next-font";
+/** The declarations for the `:root` block, one string per line, WITHOUT the
+ *  surrounding braces. Empty array = every answer was a default = no block. */
+export declare function rootDeclarations(a: ThemeAnswers, fontMode: FontMode): string[];
+/** A complete `:root { ... }` block, or "" when nothing deviates. */
+export declare function rootBlock(a: ThemeAnswers, fontMode: FontMode): string;
+/** `@import url(...)` lines for the chosen Google fonts (Vite path). Font
+ *  imports carry no layer statements, so they are safe ahead of the bridge. */
+export declare function fontImports(a: ThemeAnswers): string[];
+/** ` data-forte-radius="pill" ...` — leading space included, "" when all
+ *  defaults. Default modes stay UNSET so the app keeps following the OS
+ *  (motion) and the library's own defaults. */
+export declare function htmlAttrs(a: ThemeAnswers): string;
+export type NextFontSetup = {
+    /** `import { Inter, JetBrains_Mono } from "next/font/google";` or "". */
+    importLine: string;
+    /** The `const fontSans = Inter({...});` declarations, or "". */
+    consts: string;
+    /** ` className={...}` for the `<html>` element, or "". */
+    htmlClassAttr: string;
+};
+export declare function nextFontSetup(a: ThemeAnswers): NextFontSetup;