Add build-dist script and document dist regeneration; update README

Author: cafeTechne

README.md

@@ -41,6 +41,35 @@ Examples & docs
 - `examples/components/` — standalone example pages used by the in-repo docs viewer.
 - `docs/site/index.html` — open this file to browse component docs and try examples locally.
 
+Dist stylesheet (recommended for consumers)
+
+If you want a single stylesheet file that consumers can link to without running any build tools, use the pre-built distribution:
+
+```html
+<link rel="stylesheet" href="/path/to/Final-Fantasy-CSS/dist/final-fantasy.css">
+```
+
+Regenerating the distribution
+
+We keep a small, zero-dependency Node script that concatenates the project's CSS sources and resolves local `@import` rules into a single `dist/final-fantasy.css`. This avoids reintroducing a required build pipeline while making it easy to recreate the dist when you change source files.
+
+To regenerate the dist file (optional):
+
+1. Ensure Node.js is available on your machine.
+2. Run the script from the repository root:
+
+```powershell
+node scripts/build-dist.js
+```
+
+The script will write `dist/final-fantasy.css` by resolving local `@import` rules. It intentionally does not fetch remote `@import` URLs (for example Google Fonts); those are left in the built file so browsers can fetch them.
+
+Notes for future contributors / agents
+
+- Rationale: The project keeps pre-rendered docs and a built `dist/final-fantasy.css` to minimize friction for consumers who just want a single file to reference.
+- If you're an automated agent or contributor returning to this repo later: we intentionally removed a required Node build step to keep the repository portable. If you need to produce a minified version or use PostCSS features, reintroducing a `package.json` and a PostCSS pipeline is acceptable, but document the change and include the built `dist/` files in the commit so consumers continue to get a single-file stylesheet without running builds.
+- When making design iterations: edit the source files under `css/` (themes, `components/`, `core.css`, `fonts.css`), then run `node scripts/build-dist.js` and commit `dist/final-fantasy.css` along with your source changes so reviewers can see the combined output quickly.
+
 Notes
 
 - Fonts in `FF6/fonts/` may have licensing restrictions; check `FF6/fonts/readme.txt` before redistribution.

scripts/build-dist.js

@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+// Simple dist builder: resolves local @import url(...) statements
+// and concatenates referenced files in order. Does not fetch remote URLs.
+
+const repoRoot = path.resolve(__dirname, '..');
+const cssRoot = path.join(repoRoot, 'css');
+const entry = path.join(cssRoot, 'final-fantasy.css');
+const outDir = path.join(repoRoot, 'dist');
+const outFile = path.join(outDir, 'final-fantasy.css');
+
+function readFileSafe(p){
+  if(!fs.existsSync(p)) return null;
+  return fs.readFileSync(p,'utf8');
+}
+
+function resolveImportPath(baseDir, importPath){
+  // strip surrounding url(...) or quotes
+  importPath = importPath.trim();
+  importPath = importPath.replace(/^url\((.*)\)$/,'$1').replace(/^['"]|['"]$/g,'');
+  // ignore absolute URLs (http/https)
+  if(/^https?:\/\//.test(importPath)) return null;
+  // if path is relative, resolve
+  return path.resolve(baseDir, importPath);
+}
+
+function processCss(filePath, seen){
+  seen = seen || new Set();
+  if(!filePath || seen.has(filePath)) return '';
+  seen.add(filePath);
+  const content = readFileSafe(filePath);
+  if(content === null) {
+    console.warn('Missing file:', filePath);
+    return '';
+  }
+
+  const dir = path.dirname(filePath);
+  let out = `/* ===== ${path.relative(repoRoot, filePath)} ===== */\n`;
+  // Process @import url(...) and @import "..." occurrences
+  const importRegex = /@import\s+(?:url\()?\s*([^)';]+|"[^"]+"|'[^']+')\s*\)?\s*;?/g;
+  let lastIndex = 0;
+  let m;
+  while((m = importRegex.exec(content)) !== null){
+    const matchStart = m.index;
+    // append content before this import
+    out += content.slice(lastIndex, matchStart);
+    lastIndex = importRegex.lastIndex;
+    const rawPath = m[1];
+    const resolved = resolveImportPath(dir, rawPath);
+    if(resolved){
+      // If the resolved path is a directory or not a .css, try adding .css
+      let candidate = resolved;
+      if(!path.extname(candidate)) candidate = candidate + '.css';
+      if(!fs.existsSync(candidate) && fs.existsSync(resolved + '.css')) candidate = resolved + '.css';
+      if(fs.existsSync(candidate)){
+        out += processCss(candidate, seen);
+        continue; // skip adding the import line itself
+      } else {
+        // not found, skip but keep the import as-is
+        out += `/* skipped unresolved import: ${rawPath} */\n`;
+      }
+    } else {
+      // remote import (http), keep as-is
+      out += m[0] + '\n';
+    }
+  }
+  // append remaining content
+  out += content.slice(lastIndex);
+  return out + '\n';
+}
+
+function ensureDir(d){ if(!fs.existsSync(d)) fs.mkdirSync(d, { recursive: true }); }
+
+function build(){
+  ensureDir(outDir);
+  const result = processCss(entry);
+  // simple header
+  const header = `/* Final Fantasy CSS - built dist (generated by scripts/build-dist.js) */\n`;
+  fs.writeFileSync(outFile, header + '\n' + result, 'utf8');
+  console.log('Wrote', outFile);
+}
+
+build();