@monospaced/create-set 0.22.0 → 0.23.0

package/README.md

@@ -6,7 +6,7 @@ Project scaffolding for Set. Bootstraps a site or app with Set's components, too
 pnpm create @monospaced/set my-site
 ```
 
-Prompts for a package name, site title, description and variant (`html`, `prerender` or `react`), each showing its default, which Enter accepts. Each has a flag (`--name`, `--title`, `--description`, `--variant`), and `--defaults` takes every default without prompting, so it runs non-interactively too; without a terminal, anything unanswered is refused rather than guessed. Refuses a directory that isn't empty.
+Prompts for a package name, site title, description, variant (`html`, `prerender` or `react`) and brand (`mnsp` or `wrfr`), each showing its default, which Enter accepts. Each has a flag (`--name`, `--title`, `--description`, `--variant`, `--brand`), and `--defaults` takes every default without prompting, so it runs non-interactively too; without a terminal, anything unanswered is refused rather than guessed. Refuses a directory that isn't empty.
 
 ## Variants
 
@@ -18,6 +18,8 @@ Three ways to author, sharing everything else.
 
 In `html` and `prerender`, a page is a folder with an `index.html` and its path is its URL; Vite discovers them, so adding a page is adding a folder.
 
+The brand picks which of core's stylesheets the project imports (`styles/mnsp.css` or `styles/wrfr.css`, one brand each) and the `brand` on `Root`.
+
 ## What you get
 
 A Vite and TypeScript project with a starter page built from Set components, a `src/styles.css` for your own styles, Set's ESLint and Stylelint presets, Prettier, Husky and lint-staged, VS Code settings, and Lightning CSS targets from Set's Baseline query.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monospaced/create-set",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Project scaffolding for Set. Bootstraps a site or app with Set's components, tooling and defaults.",
   "repository": {
     "type": "git",
@@ -18,11 +18,11 @@
   ],
   "dependencies": {
     "@clack/prompts": "^1.8.1",
-    "@monospaced/set-core": "0.22.0"
+    "@monospaced/set-core": "0.23.0"
   },
   "devDependencies": {
-    "prettier": "^3.8.3",
-    "vitest": "^4.1.6"
+    "prettier": "^3.9.10",
+    "vitest": "^5.1.0"
   },
   "scripts": {
     "sync": "node scripts/sync.mjs",

package/src/cli.mjs

@@ -9,7 +9,7 @@ import {
   toTitle,
   validatePackageName,
 } from "./answers.mjs";
-import { VARIANTS } from "./constants.mjs";
+import { BRANDS, VARIANTS } from "./constants.mjs";
 import { execute, isEmptyDirectory } from "./execute.mjs";
 
 const { version } = createRequire(import.meta.url)("../package.json");
@@ -26,12 +26,14 @@ Options:
   --variant <variant>   html: pages are HTML you write (default)
                         prerender: pages are render functions, built to HTML
                         react: an app rendered by React
+  --brand <brand>       mnsp: Monospaced (default); wrfr: wireframe
   --defaults            Take every default without prompting
   -h, --help            Show this help
   -v, --version         Show the version
 `;
 
 const OPTIONS = {
+  brand: { type: "string" },
   defaults: { type: "boolean" },
   description: { type: "string" },
   help: { short: "h", type: "boolean" },
@@ -51,6 +53,11 @@ const VARIANT_OPTIONS = [
   { hint: "an app rendered by React", label: "React", value: "react" },
 ];
 
+const BRAND_OPTIONS = [
+  { label: "Monospaced", value: "mnsp" },
+  { hint: "greyscale, for prototypes", label: "Wireframe", value: "wrfr" },
+];
+
 /** Prompts, or returns `undefined` when the user cancels. */
 async function prompt(promise) {
   const value = await promise;
@@ -129,7 +136,18 @@ async function ask(values, positional) {
     return;
   }
 
-  return { description, dir, name, title, variant };
+  const brand = await answer(values, "brand", BRANDS[0], {
+    message: "Brand",
+    options: BRAND_OPTIONS,
+  });
+  if (brand === undefined) return;
+
+  if (!BRANDS.includes(brand)) {
+    p.cancel(`${brand} is not a brand. Use ${BRANDS.join(" or ")}.`);
+    return;
+  }
+
+  return { brand, description, dir, name, title, variant };
 }
 
 export async function run(argv) {

package/src/constants.mjs

@@ -5,6 +5,9 @@ export const OG_IMAGE =
 /** How pages are authored. The first is the default. */
 export const VARIANTS = ["html", "prerender", "react"];
 
+/** Set brands. The first is the default. */
+export const BRANDS = ["mnsp", "wrfr"];
+
 /** Installed live at generation time, so nothing in the template goes stale. */
 export const RUNTIME_DEPENDENCIES = [
   "@monospaced/set-assets",

package/src/page.mjs

@@ -1,4 +1,5 @@
 import {
+  escapeHtml,
   renderSetBox,
   renderSetContainer,
   renderSetHeading,
@@ -11,14 +12,6 @@ import {
   SET_LIGHTSWITCH_STORAGE_KEY,
 } from "@monospaced/set-core";
 
-/** Escapes a value for an HTML attribute or text node. */
-export const escapeHtml = (value) =>
-  value
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;");
-
 /*
  * Stamps a stored lightswitch override onto the root before its content
  * parses, so an overridden theme paints correctly on first load. Must be the
@@ -34,7 +27,7 @@ export const themeBootstrap = `<script>try{var t=localStorage.getItem(${JSON.str
  * generation time. The `prerender` variant writes the same composition as
  * `src/document.ts` and `src/pages/index.ts`.
  */
-export function renderHelloPage({ editHint, title }) {
+export function renderHelloPage({ brand, editHint, title }) {
   const header = renderSetContainer({
     maxInlineSize: "none",
     children: renderSetBox({
@@ -87,6 +80,7 @@ export function renderHelloPage({ editHint, title }) {
   return renderSetRoot({
     appOverscrollBehavior: "none",
     appRoot: true,
+    brand,
     children: themeBootstrap + page,
   });
 }

package/src/plan.mjs

@@ -6,7 +6,8 @@ import { NODE_MAJOR, PNPM_VERSION } from "./toolchain.mjs";
  * @property {string} name Package name.
  * @property {string} title Site title.
  * @property {string} description Site description.
- * @property {"html" | "prerender"} variant How pages are authored.
+ * @property {"html" | "prerender" | "react"} variant How pages are authored.
+ * @property {"mnsp" | "wrfr"} brand Set brand.
  */
 
 /**
@@ -49,12 +50,12 @@ export function plan(answers) {
   const variants = {
     html: {
       "index.html": templates.indexHtml(context),
-      "src/main.ts": templates.mainTs(),
+      "src/main.ts": templates.mainTs(context),
     },
     prerender: {
       "index.html": templates.routeStub(),
       "src/document.ts": templates.documentTs(),
-      "src/main.ts": templates.mainTs(),
+      "src/main.ts": templates.mainTs(context),
       "src/pages.ts": templates.pagesTs(),
       "src/pages/index.ts": templates.indexPageTs(),
       "src/site.ts": templates.siteTs(context),
@@ -62,7 +63,7 @@ export function plan(answers) {
     react: {
       "index.html": templates.indexHtml(context),
       "src/App.tsx": templates.appTsx(context),
-      "src/main.tsx": templates.mainTsx(),
+      "src/main.tsx": templates.mainTsx(context),
     },
   };
   const variant = variants[answers.variant];

package/src/templates.mjs

@@ -1,5 +1,7 @@
+import { escapeHtml } from "@monospaced/set-core";
+
 import { OG_IMAGE } from "./constants.mjs";
-import { escapeHtml, renderHelloPage, themeBootstrap } from "./page.mjs";
+import { renderHelloPage, themeBootstrap } from "./page.mjs";
 
 const json = (value) => `${JSON.stringify(value, null, 2)}\n`;
 
@@ -39,7 +41,12 @@ export const packageJson = ({ description, name, nodeMajor, pnpmVersion }) => {
   });
 };
 
-export const indexHtml = ({ description, title, variant }) => `<!doctype html>
+export const indexHtml = ({
+  brand,
+  description,
+  title,
+  variant,
+}) => `<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -71,7 +78,7 @@ ${
   variant === "react"
     ? `    <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>`
-    : `    ${renderHelloPage({ editHint: "index.html", title })}
+    : `    ${renderHelloPage({ brand, editHint: "index.html", title })}
     <script type="module" src="/src/main.ts"></script>`
 }
   </body>
@@ -98,8 +105,8 @@ export const manifest = ({ description, title }) =>
     ),
   });
 
-export const mainTs = () => `import "@monospaced/set-assets/fonts.css";
-import "@monospaced/set-core/styles.css";
+export const mainTs = ({ brand }) => `import "@monospaced/set-assets/fonts.css";
+import "@monospaced/set-core/styles/${brand}.css";
 import "./styles.css";
 
 import { defineSetComponents } from "@monospaced/set-core";
@@ -163,8 +170,10 @@ export default defineConfig({
 `;
 };
 
-export const mainTsx = () => `import "@monospaced/set-assets/fonts.css";
-import "@monospaced/set-core/styles.css";
+export const mainTsx = ({
+  brand,
+}) => `import "@monospaced/set-assets/fonts.css";
+import "@monospaced/set-core/styles/${brand}.css";
 import "./styles.css";
 
 import { SET_LIGHTSWITCH_STORAGE_KEY } from "@monospaced/set-core";
@@ -197,7 +206,7 @@ createRoot(container).render(
 );
 `;
 
-export const appTsx = ({ title }) => `import {
+export const appTsx = ({ brand, title }) => `import {
   Box,
   Container,
   Heading,
@@ -211,7 +220,7 @@ export const appTsx = ({ title }) => `import {
 
 export function App({ theme }: { theme?: "light" | "dark" }) {
   return (
-    <Root appOverscrollBehavior="none" appRoot theme={theme}>
+    <Root appOverscrollBehavior="none" appRoot brand="${brand}" theme={theme}>
       <Page
         footer={null}
         header={
@@ -249,7 +258,22 @@ export const routeStub = () => `<!doctype html>
 <!-- Route marker. This page is rendered from src/pages.ts by the plugin in vite.config.ts. -->
 `;
 
-export const siteTs = ({ description, title }) => `export const site = {
+export const siteTs = ({
+  brand,
+  description,
+  title,
+}) => `import type { SetBrand } from "@monospaced/set-core";
+
+interface Site {
+  brand: SetBrand;
+  description: string;
+  name: string;
+  ogImage: string;
+  url: string;
+}
+
+export const site: Site = {
+  brand: ${JSON.stringify(brand)},
   name: ${JSON.stringify(title)},
   description: ${JSON.stringify(description)},
   // Set once the site has a domain; canonical and og:url derive from it.
@@ -259,6 +283,7 @@ export const siteTs = ({ description, title }) => `export const site = {
 `;
 
 export const documentTs = () => `import {
+  escapeHtml,
   renderSetBox,
   renderSetContainer,
   renderSetHeading,
@@ -279,13 +304,6 @@ export interface Page {
   render: () => string | Promise<string>;
 }
 
-const escapeHtml = (value: string): string =>
-  value
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;");
-
 /*
  * Stamps a stored lightswitch override onto the root before its content
  * parses, so an overridden theme paints correctly on first load. Must be the
@@ -321,6 +339,7 @@ export async function renderDocument(page: Page, route: string): Promise<string>
   const body = renderSetRoot({
     appOverscrollBehavior: "none",
     appRoot: true,
+    brand: site.brand,
     children:
       themeBootstrap +
       renderSetPage({

package/src/toolchain.mjs

@@ -10,19 +10,19 @@ export const PNPM_VERSION = "12.17.0";
 export const TOOLING = {
   "@types/node": "^26.6.6",
   husky: "^9.1.7",
-  "lint-staged": "^17.0.4",
-  prettier: "^3.8.3",
-  vite: "^7.3.2",
-  vitest: "^4.1.6",
+  "lint-staged": "^17.6.0",
+  prettier: "^3.9.10",
+  vite: "^8.3.6",
+  vitest: "^5.1.0",
 };
 
 /** What the React variant adds, at the monorepo's ranges. */
 export const REACT = {
-  dependencies: { react: "^19.2.6", "react-dom": "^19.2.6" },
+  dependencies: { react: "^19.3.1", "react-dom": "^19.3.1" },
   devDependencies: {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.2.0",
-    jsdom: "^29.1.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.2.1",
+    jsdom: "^31.0.0",
   },
 };