@gemboss/website-ui 0.12.0 → 0.14.0

package/templates/site/gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/.next/
+/public/
+.DS_Store

package/templates/site/lib/pages.mjs

@@ -0,0 +1,41 @@
+// The static HTML pages this site serves, and at which URL: the Next route (app/[[...path]]/route.js) serves them, and
+// `npx gemboss-website build` writes the header and footer into them. An allow-list, not "every .html": partials/ and
+// node_modules/ are full of HTML that is not a page. A new folder of pages goes into DIRS on purpose, e.g. ["blog", true].
+// Written by `gemboss-website init --site` (@gemboss/website-ui); the site owns it from here.
+import { existsSync, readdirSync, statSync } from "node:fs";
+import { join, relative, sep } from "node:path";
+
+export const ROOT = process.cwd();
+// [folder, recursive?]
+const DIRS = [["", false]];
+
+// turbopackIgnore: these reads only run at BUILD (prerendering every page); without it Next traces the whole project
+// into the function. At runtime the function only needs 404.html (next.config.mjs).
+function htmlIn(dir, deep) {
+  const abs = join(/*turbopackIgnore: true*/ ROOT, dir);
+  if (!existsSync(/*turbopackIgnore: true*/ abs)) return [];
+  const out = [];
+  for (const name of readdirSync(/*turbopackIgnore: true*/ abs)) {
+    const full = join(/*turbopackIgnore: true*/ abs, name);
+    if (statSync(/*turbopackIgnore: true*/ full).isDirectory()) {
+      if (deep) out.push(...htmlIn(join(dir, name), true));
+    } else if (name.endsWith(".html")) {
+      out.push(relative(ROOT, full).split(sep).join("/"));
+    }
+  }
+  return out;
+}
+
+/** file → clean URL, like Vercel's cleanUrls: index.html → /, pricing.html → /pricing. */
+export function routeOf(file) {
+  const stem = file.slice(0, -".html".length);
+  if (stem === "index") return "/";
+  return "/" + stem.replace(/\/index$/, "");
+}
+
+/** URL → file for every served page (404.html is the error page, not a page). */
+export function pages() {
+  const map = new Map();
+  for (const [dir, deep] of DIRS) for (const f of htmlIn(dir, deep)) if (f !== "404.html") map.set(routeOf(f), f);
+  return map;
+}

package/templates/site/next.config.mjs

@@ -0,0 +1,15 @@
+// Clean URLs: /pricing.html and /index.html redirect to the clean URL, /pricing/ to /pricing.
+// Written by `gemboss-website init --site` (@gemboss/website-ui); the site owns it from here.
+/** @type {import('next').NextConfig} */
+export default {
+  trailingSlash: false,
+  poweredByHeader: false,
+  async redirects() {
+    return [
+      { source: "/index.html", destination: "/", permanent: true },
+      { source: "/:path(.*)\\.html", destination: "/:path", permanent: true },
+    ];
+  },
+  // an unknown URL runs the route at request time and reads 404.html: ship that file with the function
+  outputFileTracingIncludes: { "/*": ["./404.html"] },
+};

package/templates/site/stage-public.mjs

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+// Copy the site's static files (not its HTML pages) into public/ before `next build`: Next serves only public/ and the
+// routes in app/. An ALLOW-LIST: only what is listed here becomes a public URL. Written by
+// `gemboss-website init --site` (@gemboss/website-ui); the site owns it from here.
+//   node stage-public.mjs           # rebuild public/ (npm run build runs it)
+//   node stage-public.mjs --check   # CI: public/ has what it needs and nothing internal
+import { cpSync, existsSync, mkdirSync, readdirSync, rmSync, statSync } from "node:fs";
+import { join, relative, sep } from "node:path";
+
+const ROOT = process.cwd();
+const OUT = join(ROOT, "public");
+const ROOT_FILES = ["favicon.svg", "robots.txt", "sitemap.xml"];
+const DIRS = ["assets"];
+const SKIP = (name) => name.endsWith(".html") || name.endsWith(".md") || name === ".DS_Store";
+
+function walk(dir) {
+  const out = [];
+  for (const name of readdirSync(dir)) {
+    const full = join(dir, name);
+    if (statSync(full).isDirectory()) out.push(...walk(full));
+    else out.push(relative(OUT, full).split(sep).join("/"));
+  }
+  return out;
+}
+
+function stage() {
+  rmSync(OUT, { recursive: true, force: true });
+  mkdirSync(OUT, { recursive: true });
+  for (const f of ROOT_FILES) if (existsSync(join(ROOT, f))) cpSync(join(ROOT, f), join(OUT, f));
+  for (const d of DIRS) if (existsSync(join(ROOT, d))) cpSync(join(ROOT, d), join(OUT, d), { recursive: true, filter: (src) => !SKIP(src.split(sep).pop()) });
+  const files = walk(OUT);
+  console.log(`public/: ${files.length} files`);
+  return files;
+}
+
+function check() {
+  const files = stage();
+  const bad = [];
+  for (const need of ["favicon.svg", "assets/kit/website.css", "assets/kit/website.js", "assets/site.css"]) {
+    if (!files.includes(need)) bad.push(`missing public file: ${need}`);
+  }
+  for (const f of files) if (/\.(html|md|py|mjs|sh)$/.test(f) || /(^|\/)(package(-lock)?\.json|vercel\.json)$/.test(f)) bad.push(`internal file in public/: ${f}`);
+  for (const b of bad) console.error("  " + b);
+  console.log(bad.length ? `stage-public: RED, ${bad.length}` : "stage-public: green");
+  return bad.length ? 1 : 0;
+}
+
+if (process.argv.includes("--check")) process.exit(check());
+stage();

package/templates/site/vercel.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "framework": "nextjs",
+  "buildCommand": "npm run build"
+}

package/website.css

@@ -1,4 +1,4 @@
-/*! @gemboss/website-ui 0.12.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
+/*! @gemboss/website-ui 0.14.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
 /* @gemboss/website-ui tokens. GENERATED from system.json by scripts/build.mjs: do not edit by hand. */
 :root {
   color-scheme: light;
@@ -127,6 +127,7 @@
   --gw-on-accent: var(--gw-on-accent-light);
   --gw-success: #007f5f;
   --gw-success-soft: #e3f1df;
+  --gw-success-strong: #0a6a4c;
   --gw-warning: #9a6700;
   --gw-warning-soft: #fbf1dc;
   --gw-danger: #b42318;
@@ -159,6 +160,7 @@
     --gw-on-accent: var(--gw-on-accent-dark);
     --gw-success: #34c38f;
     --gw-success-soft: #132a22;
+    --gw-success-strong: #34c38f;
     --gw-warning: #e0b341;
     --gw-warning-soft: #2b2410;
     --gw-danger: #ff6b5a;
@@ -194,6 +196,7 @@
   --gw-on-accent: var(--gw-on-accent-dark);
   --gw-success: #34c38f;
   --gw-success-soft: #132a22;
+  --gw-success-strong: #34c38f;
   --gw-warning: #e0b341;
   --gw-warning-soft: #2b2410;
   --gw-danger: #ff6b5a;
@@ -228,6 +231,7 @@
   --gw-on-accent: var(--gw-on-accent-light);
   --gw-success: #007f5f;
   --gw-success-soft: #e3f1df;
+  --gw-success-strong: #0a6a4c;
   --gw-warning: #9a6700;
   --gw-warning-soft: #fbf1dc;
   --gw-danger: #b42318;
@@ -260,6 +264,7 @@
   --gw-on-accent: var(--gw-on-accent-dark);
   --gw-success: #34c38f;
   --gw-success-soft: #132a22;
+  --gw-success-strong: #34c38f;
   --gw-warning: #e0b341;
   --gw-warning-soft: #2b2410;
   --gw-danger: #ff6b5a;
@@ -662,6 +667,29 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 .gw-badge--danger { background: var(--gw-danger-soft); color: var(--gw-ink); }
 .gw-badge--danger::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--gw-radius-chip); background: var(--gw-danger); }
 
+/* Status chip (0.14.0): gemboss.ai's "pills", a state inside a drawn screen of the product (Live, a test, Early access), as
+   the GemBoss app draws it: a rounded rectangle (the action radius), 28px, 12px/500 words, neutral by default. --success is
+   live (its words in success's text form), --accent a test, --early neutral with the dot in the accent. The dot is an
+   optional `.gw-status__dot` before the words. A label that names a thing (New, Recommended) is a .gw-badge. */
+.gw-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 6px 8px;
+  border-radius: var(--gw-radius-action);
+  background: color-mix(in srgb, var(--gw-ink) 8%, transparent);
+  color: var(--gw-ink-2);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+}
+.gw-status--success { background: var(--gw-success-soft); color: var(--gw-success-strong); }
+.gw-status--accent { background: var(--gw-accent-soft); color: var(--gw-accent-strong); }
+.gw-status__dot { width: 6px; height: 6px; border-radius: var(--gw-radius-chip); background: currentColor; }
+.gw-status--early .gw-status__dot { background: var(--gw-accent); }
+
 /* cards sit: white, 1px hairline, the card radius of the site's profile (12, 20 in soft), the dashboard's resting
    shadow (Chris 24/10/2026: one language with the app); no hover lift. A soft card is a tint and carries no shadow. */
 .gw-card {
@@ -695,35 +723,48 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 :where(.gw-card, .gw-feature) p { font-size: 16px; color: var(--gw-muted); }
 
 /* a framed screen: a browser or app window around a screenshot or a drawn mock-up */
+/* 0.14.0: gemboss.ai's frame, 1:1: it floats (the raised shadow), 13px at 20px lines; the bar 40px with 12px sides, three
+   8px dots 6px apart, the words 16px after them and 8px between the bar's parts, one line, cut when too long; bold words in
+   the bar in ink. */
 .gw-window {
+  position: relative;
   overflow: hidden;
   border: 1px solid var(--gw-line);
   border-radius: var(--gw-radius-card);
   background: var(--gw-surface);
   color: var(--gw-ink);
-  box-shadow: var(--gw-shadow);
+  box-shadow: var(--gw-shadow-raised);
   font-size: 13px;
-  line-height: 1.5;
+  line-height: 20px;
 }
 .gw-window__bar {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   min-height: 40px;
-  padding: 8px 16px;
+  padding: 0 12px;
   border-bottom: 1px solid var(--gw-line);
   color: var(--gw-muted);
   font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .gw-window__bar::before {
   content: "";
   flex: none;
-  width: 36px;
+  width: 8px;
   height: 8px;
-  background:
-    radial-gradient(circle at 4px 4px, var(--gw-line-strong) 4px, transparent 4px),
-    radial-gradient(circle at 18px 4px, var(--gw-line-strong) 4px, transparent 4px),
-    radial-gradient(circle at 32px 4px, var(--gw-line-strong) 4px, transparent 4px);
+  margin-right: 36px;
+  border-radius: var(--gw-radius-chip);
+  background: var(--gw-line-strong);
+  box-shadow: 14px 0 0 var(--gw-line-strong), 28px 0 0 var(--gw-line-strong);
+}
+.gw-window__bar > :first-child { min-width: 0; overflow: hidden; }
+.gw-window__bar b { color: var(--gw-ink); font-weight: 600; }
+/* up to 560px the bar's words wrap rather than being cut: the bar grows, its parts at the top (gemboss.ai) */
+@media (max-width: 560px) {
+  .gw-window__bar { align-items: flex-start; padding-block: 8px; white-space: normal; }
+  .gw-window__bar > :first-child { overflow: visible; }
 }
 .gw-window__body { padding: 16px; }
 .gw-window__body:has(> img:only-child) { padding: 0; }
@@ -740,24 +781,43 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 }
 .gw-window__body:has(> img:only-child) + .gw-window__caption { padding-top: 12px; }
 
+/* figure (0.13.0, Gemians): a photo and its caption where a section shows one outside the prose (beside words in a
+   split, under a hero's actions): the picture at the card radius, the caption 14px, muted, 12px under it, as a figure
+   in .gw-prose. A screen of the product goes in .gw-window instead. */
+.gw-figure > :is(img, video, picture) { display: block; width: 100%; height: auto; border-radius: var(--gw-radius-card); }
+.gw-figure > picture > img { display: block; width: 100%; height: auto; border-radius: inherit; }
+.gw-figure > figcaption { margin-top: 12px; color: var(--gw-muted); font-size: 14px; line-height: 1.5; }
+
 /* icon: 20px inline stroke SVG (1.7 to 2px stroke, currentColor) */
 .gw-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; }
 .gw-icon svg { width: 20px; height: 20px; }
 
 /* list with check marks */
-.gw-list--check { display: grid; gap: 12px; padding: 0; list-style: none; }
-.gw-list--check > li { position: relative; padding-left: 24px; }
+/* 0.14.0: gemboss.ai's, 1:1: 14px at 1.5 lines, the words 28px in (a 20px column for the mark, 8px after it); the mark a
+   16px tile on the accent's tint, 4px down, with the tick in the accent (the tick follows the theme and the brand). The mark
+   is out of the flow, so an item may hold words and links side by side. */
+.gw-list--check { display: grid; gap: 12px; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
+.gw-list--check > li { position: relative; padding-left: 28px; }
 .gw-list--check > li::before {
   content: "";
   position: absolute;
   left: 0;
-  top: 6px;
-  top: calc((1lh - 16px) / 2);
+  top: 4px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--gw-radius-4);
+  background: var(--gw-accent-soft);
+}
+.gw-list--check > li::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 4px;
   width: 16px;
   height: 16px;
   background: var(--gw-accent);
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
 }
 
 /* table: the wrapper scrolls inside its own box on phones, the page never does */
@@ -780,10 +840,12 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 .gw-table--compare thead th:not(:first-child) { text-align: center; }
 .gw-table--compare tbody th { position: sticky; left: 0; z-index: 1; background: var(--gw-surface); min-width: 160px; }
 
-/* FAQ: native details/summary, no script */
+/* FAQ: native details/summary, no script. 0.14.0: gemboss.ai's, 1:1 (the question in the brand face alone, at the line
+   height around it; the + is the face's own glyph in the accent, turned 45 degrees when open; the answer 33em wide,
+   rising in as the item opens) */
 .gw-faq { display: grid; gap: 12px; }
 .gw-faq__item {
-  padding: 0 24px;
+  padding: 2px 24px;
   border: 1px solid var(--gw-line);
   border-radius: var(--gw-radius-card);
   background: var(--gw-surface);
@@ -796,25 +858,28 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   gap: 16px;
   min-height: 44px;
   padding: 20px 0;
+  font-family: var(--gw-font-action);
   font-size: 18px;
   font-weight: 600;
-  line-height: 1.4;
   list-style: none;
   cursor: pointer;
 }
 .gw-faq__item > summary::-webkit-details-marker { display: none; }
 .gw-faq__item > summary::after {
-  content: "";
-  flex: none;
-  width: 16px;
-  height: 16px;
-  background:
-    linear-gradient(var(--gw-accent), var(--gw-accent)) center / 16px 2px no-repeat,
-    linear-gradient(var(--gw-accent), var(--gw-accent)) center / 2px 16px no-repeat;
-  transition: transform 0.2s var(--gw-ease);
+  content: "+";
+  color: var(--gw-accent);
+  font-size: 24px;
+  font-weight: 400;
+  transition: transform 0.2s ease;
 }
 .gw-faq__item[open] > summary::after { transform: rotate(45deg); }
-.gw-faq__item > :not(summary) { margin: 0 0 20px; max-width: 68ch; color: var(--gw-muted); font-size: 16px; }
+.gw-faq__item > :not(summary) { margin: 0 0 20px; color: var(--gw-muted); font-size: 16px; }
+.gw-faq__item > p { max-width: 33em; }
+@keyframes gw-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+.gw-faq__item[open] > :not(summary) { animation: gw-faq-in 0.28s ease; }
+@media (prefers-reduced-motion: reduce) { .gw-faq__item[open] > :not(summary) { animation: none; } }
+/* phones: the rows tighten (gemboss.ai), never under the 44px a finger needs */
+@media (max-width: 560px) { .gw-faq__item > summary { padding-block: 4px; } }
 
 /* touch: every control is at least 44px tall. A button up to 768px (0.12.0, as gemboss.ai: by the width, not the
    pointer), its label wrapping (and tighter) from 480px down in the page's <main>, so a long one never pushes the page
@@ -1541,6 +1606,19 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   :root:not([data-theme="light"]) .gw-theme-toggle__moon { display: none; }
 }
 
+/* ---- 0.13.0: the brand's logo as one drawing (Gemians): the mark and the wordmark in one file, in place of the mark and
+   the name, 26px tall, its width the file's. Its alt is the brand's name. A logo drawn for dark grounds only (a white
+   wordmark) comes as a second file, .gw-brand__logo--dark, right after the first: it shows in dark (the system's or the
+   toggle's) and the first one hides, the toggle icons' rule. One file that reads on both: no --dark. */
+.gw-brand__logo { display: block; flex: none; width: auto; height: 26px; }
+.gw-brand__logo--dark { display: none; }
+:root[data-theme="dark"] .gw-brand__logo--dark { display: block; }
+:root[data-theme="dark"] .gw-brand__logo:has(+ .gw-brand__logo--dark) { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .gw-brand__logo--dark { display: block; }
+  :root:not([data-theme="light"]) .gw-brand__logo:has(+ .gw-brand__logo--dark) { display: none; }
+}
+
 /* footer: brand block, link columns, bottom row. One hairline on top, white like the page. */
 .gw-footer {
   padding-block: 64px 32px;
@@ -1807,7 +1885,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
     radial-gradient(420px 320px at 52% 118%, color-mix(in srgb, var(--gw-wash-mint) 10%, transparent), transparent 62%);
 }
 .gw-hero h1 .gw-dim { display: block; }
-.gw-hero > .gw-wrap > .gw-window { margin-top: 48px; }
+.gw-hero > .gw-wrap > :is(.gw-window, .gw-figure) { margin-top: 48px; }
 .gw-hero--center { text-align: center; }
 .gw-hero--center > .gw-wrap > * { margin-inline: auto; }
 .gw-hero--center .gw-actions { justify-content: center; }
@@ -1840,7 +1918,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 .gw-logos img { width: auto; height: 28px; }
 
 /* stats: three or four facts, each with its source */
-.gw-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
+.gw-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0; list-style: none; }
 .gw-stats__value { font-size: var(--gw-display-h2); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
 .gw-stats__label { margin-top: 8px; max-width: 28ch; color: var(--gw-muted); font-size: 14px; }
 .gw-stats__source { margin-top: 8px; color: var(--gw-muted); font-size: 12px; }
@@ -1873,7 +1951,6 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 32px 24px;
-  margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: gw-step;
@@ -2305,7 +2382,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    .gw-card__media first, a .gw-label for the category, the title (its link covers the card, so the card is one target
    and the link's name is the title alone), one or two lines of excerpt and a .gw-article-meta row at the foot. One
    column on phones, two from 768px, three from 1080px. --compact: one column of rows, no card and no picture. */
-.gw-post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
+.gw-post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; list-style: none; }
 .gw-post-list > li { display: flex; min-width: 0; }
 .gw-post { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
 .gw-post:hover { border-color: var(--gw-line-strong); }
@@ -2521,7 +2598,6 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
-  margin: 0;
   padding: 0;
   list-style: none;
 }