npm - create-forte-ui - Versions diffs - 1.0.0-beta.0 → 1.0.0-beta.2 - Mend

create-forte-ui 1.0.0-beta.0 → 1.0.0-beta.2

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 (12) hide show

package/README.md CHANGED Viewed

@@ -37,7 +37,7 @@ are tuned.
 - The starter files live in `src/templates.ts`; when a guide step changes,
   change the matching builder in the same commit.
-- The font catalogue (`src/fonts.ts`) and colour maths (`src/color.ts`) are
+- The font catalog (`src/fonts.ts`) and color maths (`src/color.ts`) are
   the modules of record — the docs' Theme Studio re-exports them from this
   package.
 - `pnpm --filter create-forte-ui smoke` scaffolds and builds all four

package/dist/args.d.ts CHANGED Viewed

@@ -27,4 +27,4 @@ export type CliOptions = {
 export declare class UsageError extends Error {
 }
 export declare function parseCliArgs(argv: string[]): CliOptions;
-export declare const HELP = "create-forte-ui \u2014 scaffold a new app wired up with forte-ui\n\nUsage\n  pnpm create forte-ui [name] [flags]\n  npm create forte-ui@latest [name] -- [flags]\n\nEvery flag has a prompt twin; a passed flag suppresses its prompt. With no\nflags you get the questionnaire, with --yes you get a Next.js + Tailwind app\non the library's default theme.\n\nProject\n  [name]                 project directory (prompted if omitted)\n  -f, --framework        next | vite\n  --tailwind             wire the Tailwind v4 bridge (default yes)\n  --no-tailwind          plain CSS setup\n  --pm                   npm | pnpm | yarn | bun (default: whoever invoked us)\n  --library              version spec for @forte-ui/react \u2014 exact\n                         (\"1.0.0-alpha.4\"), a dist-tag (\"alpha\"), or a range.\n                         Default: latest.\n  --no-install           write files only; skip installing dependencies\n                         and the agent skill\n  --no-skill             skip installing the forte-ui agent skill\n                         (skills.sh \u2014 .agents/skills plus .claude/skills)\n  -y, --yes              accept the defaults for everything not passed\n\nTheme \u2014 every skipped value keeps the library default and writes NOTHING,\nso the app keeps following the library when defaults are tuned.\n  --seed, --accent       accent seed, hex (\"#6d43d4\")\n  --secondary            secondary seed, hex\n  --tint                 neutral tint, 0 (pure grey) to 1 (default)\n  --radius               none | soft | pill\n  --density              compact | spacious\n  --motion               system (default) | reduce | full\n                         \"full\" overrides the OS reduced-motion preference\n                         for everyone \u2014 prefer leaving it unset.\n  --scheme               system (default) | light | dark\n                         \"light\" / \"dark\" pin one palette on <html> and\n                         leave the theme toggle and its replay script out.\n  --font-sans           a catalogue name (\"Inter\", \"DM Sans\", ...)\n  --font-mono            a catalogue name (\"JetBrains Mono\", ...)\n\nDesign the theme visually instead: https://forte-ui.com/theme\n";
+export declare const HELP = "create-forte-ui \u2014 scaffold a new app wired up with forte-ui\n\nUsage\n  pnpm create forte-ui [name] [flags]\n  npm create forte-ui@latest [name] -- [flags]\n\nEvery flag has a prompt twin; a passed flag suppresses its prompt. With no\nflags you get the questionnaire, with --yes you get a Next.js + Tailwind app\non the library's default theme.\n\nProject\n  [name]                 project directory (prompted if omitted)\n  -f, --framework        next | vite\n  --tailwind             wire the Tailwind v4 bridge (default yes)\n  --no-tailwind          plain CSS setup\n  --pm                   npm | pnpm | yarn | bun (default: whoever invoked us)\n  --library              version spec for @forte-ui/react \u2014 exact\n                         (\"1.0.0-alpha.4\"), a dist-tag (\"alpha\"), or a range.\n                         Default: latest.\n  --no-install           write files only; skip installing dependencies\n                         and the agent skill\n  --no-skill             skip installing the forte-ui agent skill\n                         (skills.sh \u2014 .agents/skills plus .claude/skills)\n  -y, --yes              accept the defaults for everything not passed\n\nTheme \u2014 every skipped value keeps the library default and writes NOTHING,\nso the app keeps following the library when defaults are tuned.\n  --seed, --accent       accent seed, hex (\"#6d43d4\")\n  --secondary            secondary seed, hex\n  --tint                 neutral tint, 0 (pure gray) to 1 (default)\n  --radius               none | soft | pill\n  --density              compact | spacious\n  --motion               system (default) | reduce | full\n                         \"full\" overrides the OS reduced-motion preference\n                         for everyone \u2014 prefer leaving it unset.\n  --scheme               system (default) | light | dark\n                         \"light\" / \"dark\" pin one palette on <html> and\n                         leave the theme toggle and its replay script out.\n  --font-sans           a catalog name (\"Inter\", \"DM Sans\", ...)\n  --font-mono            a catalog name (\"JetBrains Mono\", ...)\n\nDesign the theme visually instead: https://forte-ui.com/theme\n";

package/dist/args.js CHANGED Viewed

@@ -18,7 +18,7 @@ export class UsageError extends Error {
 function normalizeHex(flag, value) {
     const hex = value.startsWith("#") ? value : `#${value}`;
     if (!hexToOklch(hex)) {
-        throw new UsageError(`--${flag} expects a hex colour like "#6d43d4", got "${value}"`);
+        throw new UsageError(`--${flag} expects a hex color like "#6d43d4", got "${value}"`);
     }
     return hex.toLowerCase();
 }
@@ -32,7 +32,7 @@ function oneOf(flag, value, options) {
 function fontByName(flag, value, list) {
     const match = list.find((f) => f.name.toLowerCase() === value.toLowerCase());
     if (!match) {
-        throw new UsageError(`--${flag}: "${value}" is not in the catalogue. Choices: ${list.map((f) => f.name).join(", ")}`);
+        throw new UsageError(`--${flag}: "${value}" is not in the catalog. Choices: ${list.map((f) => f.name).join(", ")}`);
     }
     return match.name;
 }
@@ -146,7 +146,7 @@ Theme — every skipped value keeps the library default and writes NOTHING,
 so the app keeps following the library when defaults are tuned.
   --seed, --accent       accent seed, hex ("#6d43d4")
   --secondary            secondary seed, hex
-  --tint                 neutral tint, 0 (pure grey) to 1 (default)
+  --tint                 neutral tint, 0 (pure gray) to 1 (default)
   --radius               none | soft | pill
   --density              compact | spacious
   --motion               system (default) | reduce | full
@@ -155,8 +155,8 @@ so the app keeps following the library when defaults are tuned.
   --scheme               system (default) | light | dark
                          "light" / "dark" pin one palette on <html> and
                          leave the theme toggle and its replay script out.
-  --font-sans           a catalogue name ("Inter", "DM Sans", ...)
-  --font-mono            a catalogue name ("JetBrains Mono", ...)
+  --font-sans           a catalog name ("Inter", "DM Sans", ...)
+  --font-mono            a catalog name ("JetBrains Mono", ...)
 Design the theme visually instead: https://forte-ui.com/theme
 `;

package/dist/color.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 /**
- * Colour maths for the Theme Studio and the create-forte-ui CLI. This is the
+ * Color maths for the Theme Studio and the create-forte-ui CLI. This is the
  * module of record — the docs' `lib/color.ts` re-exports it from here.
  *
  * Mirrors the model the library's CSS uses, so what the studio reports is what
  * the browser will actually paint:
  *  - sRGB is naive-CLIPPED, not gamut-mapped, because that is what browsers do
- *    today. Reporting a gamut-mapped colour here would understate how far an
+ *    today. Reporting a gamut-mapped color here would understate how far an
  *    out-of-range seed drifts.
  *  - Contrast is WCAG 2.x relative luminance, the ratio the success criteria
  *    are actually written against.
@@ -25,7 +25,7 @@ export declare function oklchToHex(o: Oklch): string;
 export declare function hexToOklch(hex: string): Oklch | null;
 export declare function contrast(a: Rgb, b: Rgb): number;
 /**
- * The exact readable text colour for a solid fill, chosen by measuring both
+ * The exact readable text color for a solid fill, chosen by measuring both
  * candidates rather than by the CSS fallback's fitted lightness threshold.
  * Emitting this as a literal is what makes the studio's output correct in
  * every browser, including those without contrast-color().

package/dist/color.js CHANGED Viewed

@@ -1,11 +1,11 @@
 /**
- * Colour maths for the Theme Studio and the create-forte-ui CLI. This is the
+ * Color maths for the Theme Studio and the create-forte-ui CLI. This is the
  * module of record — the docs' `lib/color.ts` re-exports it from here.
  *
  * Mirrors the model the library's CSS uses, so what the studio reports is what
  * the browser will actually paint:
  *  - sRGB is naive-CLIPPED, not gamut-mapped, because that is what browsers do
- *    today. Reporting a gamut-mapped colour here would understate how far an
+ *    today. Reporting a gamut-mapped color here would understate how far an
  *    out-of-range seed drifts.
  *  - Contrast is WCAG 2.x relative luminance, the ratio the success criteria
  *    are actually written against.
@@ -61,7 +61,7 @@ export function contrast(a, b) {
 const WHITE = [1, 1, 1];
 const BLACK = [0, 0, 0];
 /**
- * The exact readable text colour for a solid fill, chosen by measuring both
+ * The exact readable text color for a solid fill, chosen by measuring both
  * candidates rather than by the CSS fallback's fitted lightness threshold.
  * Emitting this as a literal is what makes the studio's output correct in
  * every browser, including those without contrast-color().
@@ -80,7 +80,7 @@ export function validateSeed(seed) {
     if (outOfGamut) {
         out.push({
             level: "warn",
-            message: "Outside the sRGB gamut. Browsers clip rather than gamut-map, which shifts the painted lightness — the 9/10 hover step can visually collapse, and the colour will differ between sRGB and P3 displays.",
+            message: "Outside the sRGB gamut. Browsers clip rather than gamut-map, which shifts the painted lightness — the 9/10 hover step can visually collapse, and the color will differ between sRGB and P3 displays.",
         });
     }
     if (seed.l < ENVELOPE.lMin) {

package/dist/fonts.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* The font catalogue — the ten most-used Google Fonts of each kind, plus the
+/* The font catalog — the ten most-used Google Fonts of each kind, plus the
  * library's own default stack as "System". This is the module of record: the
  * docs' Theme Studio re-exports it from here, so the CLI's font prompt and
  * the studio's pickers cannot drift apart. Everything a consumer of

package/dist/prompts.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { DEFAULT_ANSWERS } from "./theme.js";
 import { UsageError } from "./args.js";
 function accept(value) {
     if (p.isCancel(value)) {
-        p.cancel("Cancelled — nothing was written.");
+        p.cancel("Canceled — nothing was written.");
         process.exit(1);
     }
     return value;
@@ -37,7 +37,7 @@ const hexPrompt = (message) => async () => {
         validate: (v) => {
             if (!v)
                 return undefined;
-            return hexToOklch(v.startsWith("#") ? v : `#${v}`) ? undefined : "Expected a hex colour like #6d43d4.";
+            return hexToOklch(v.startsWith("#") ? v : `#${v}`) ? undefined : "Expected a hex color like #6d43d4.";
         },
     }));
     if (!value)
@@ -109,7 +109,7 @@ export async function collectPlan(opts) {
         }
         if (remaining.includes("tint")) {
             const tint = accept(await p.text({
-                message: "Neutral tint — 0 (pure grey) to 1 (full brand tint)",
+                message: "Neutral tint — 0 (pure gray) to 1 (full brand tint)",
                 placeholder: "1",
                 validate: (v) => {
                     if (!v)

package/dist/templates.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { type ThemeAnswers } from "./theme.js";
 export declare function viteIndexCss(a: ThemeAnswers, tailwind: boolean): string;
 export declare function viteMainTsx(tailwind: boolean): string;
-/** `toggle` is false when the answers pinned a colour scheme: `data-theme`
+/** `toggle` is false when the answers pinned a color scheme: `data-theme`
  *  then sits statically on `<html>` and a toggle would be a button whose one
  *  job is to fight it. The import goes with the element, so the starter
  *  still compiles clean under `noUnusedLocals`. */

package/dist/templates.js CHANGED Viewed

@@ -23,7 +23,7 @@ function joinBlocks(...blocks) {
  * flipped without writing a line. Two spellings of the same corner, because
  * the Tailwind paths have utilities and the plain ones do not.
  *
- * `fixed` rather than in flow, so the page still centres the component it is
+ * `fixed` rather than in flow, so the page still centers the component it is
  * there to demonstrate — and the offsets are space tokens rather than `1rem`,
  * because this file is the first thing a new app is copied out of and a
  * hardcoded value here is the habit it teaches. */
@@ -81,7 +81,7 @@ createRoot(document.getElementById("root")!).render(
 );
 `;
 }
-/** `toggle` is false when the answers pinned a colour scheme: `data-theme`
+/** `toggle` is false when the answers pinned a color scheme: `data-theme`
  *  then sits statically on `<html>` and a toggle would be a button whose one
  *  job is to fight it. The import goes with the element, so the starter
  *  still compiles clean under `noUnusedLocals`. */

package/dist/theme.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ 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. */
+    /** 0 = pure gray neutrals, 1 = full brand tint. 1 is the shipped default. */
     tint: number;
     radius: Radius;
     density: Density;
@@ -18,7 +18,7 @@ export type ThemeAnswers = {
     /** "system" follows the OS and scaffolds the toggle; "light" / "dark" pin
      *  one palette on `<html>` and leave the toggle and its replay script out. */
     scheme: Scheme;
-    /** Catalogue names. "System" writes nothing. */
+    /** Catalog names. "System" writes nothing. */
     fontSans: string;
     fontMono: string;
 };
@@ -38,7 +38,7 @@ export declare function rootBlock(a: ThemeAnswers, fontMode: FontMode): string;
 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, colour scheme) and the library's own defaults. */
+ *  (motion, color scheme) 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 "". */
@@ -58,7 +58,7 @@ export declare function nextFontSetup(a: ThemeAnswers): NextFontSetup;
  *  `forte-reset` is unconditional: it is what switches on
  *  `@forte-ui/react/styles/reset.css`, which the starter imports. A scaffolded
  *  app is the one place the blanket reset is unambiguously right — there is no
- *  existing markup for it to change behaviour under, and it becomes the
+ *  existing markup for it to change behavior under, and it becomes the
  *  baseline everything the author writes next is built against. The library
  *  itself stays scoped to `[data-forte]` for exactly the opposite reason. */
 export declare function htmlClassAttr(fontVars: string[]): string;

package/dist/theme.js CHANGED Viewed

@@ -2,8 +2,8 @@
  *
  * The record mirrors the Theme Studio's `ThemeConfig` — same keys, same value
  * sets — so a studio-exported command line maps onto the CLI's flags with no
- * translation. It differs in one deliberate way: the colour fields are
- * nullable. The studio always shows a concrete colour because its controls
+ * translation. It differs in one deliberate way: the color fields are
+ * nullable. The studio always shows a concrete color because its controls
  * need something to display; the CLI's contract is "only serialise
  * deviations", so an unanswered prompt stays `null` and writes NOTHING. A
  * scaffolded default would be a frozen default — an app that restates
@@ -56,7 +56,7 @@ export function rootDeclarations(a, fontMode) {
         if (mono.stack)
             lines.push(`--forte-font-mono: var(--font-mono), ${MONO_FALLBACK};`);
     }
-    /* Same emission as the studio's copied CSS: the on-colour is measured here
+    /* Same emission as the studio's copied CSS: the on-color is measured here
      * rather than left to the CSS fallback's fitted lightness threshold, so it
      * is exact in every browser — including those without contrast-color(). */
     const on = a.seed ? bestOnColor(hexToOklch(a.seed)) : null;
@@ -88,7 +88,7 @@ export function fontImports(a) {
 }
 /** ` data-forte-radius="pill" ...` — leading space included, "" when all
  *  defaults. Default modes stay UNSET so the app keeps following the OS
- *  (motion, colour scheme) and the library's own defaults. */
+ *  (motion, color scheme) and the library's own defaults. */
 export function htmlAttrs(a) {
     const attrs = [
         a.radius !== "default" && `data-forte-radius="${a.radius}"`,
@@ -98,7 +98,7 @@ export function htmlAttrs(a) {
     ].filter(Boolean);
     return attrs.length ? " " + attrs.join(" ") : "";
 }
-/** The axes string in the catalogue is the truth about what a family can
+/** The axes string in the catalog is the truth about what a family can
  *  serve: `400..700` is a variable font (no `weight` needed), `400;500;700`
  *  is static and next/font requires the explicit list. */
 function weightsFromAxes(css) {
@@ -134,7 +134,7 @@ export function nextFontSetup(a) {
  *  `forte-reset` is unconditional: it is what switches on
  *  `@forte-ui/react/styles/reset.css`, which the starter imports. A scaffolded
  *  app is the one place the blanket reset is unambiguously right — there is no
- *  existing markup for it to change behaviour under, and it becomes the
+ *  existing markup for it to change behavior under, and it becomes the
  *  baseline everything the author writes next is built against. The library
  *  itself stays scoped to `[data-forte]` for exactly the opposite reason. */
 export function htmlClassAttr(fontVars) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-forte-ui",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.2",
   "description": "Scaffold a new app wired up with forte-ui — Vite or Next.js, with or without Tailwind, themed from your answers.",
   "license": "MIT",
   "type": "module",