arekui 1.0.2 → 2.0.0

package/scripts/build-custom.js

@@ -1,31 +1,10 @@
 #!/usr/bin/env node
 
-/**
- * Arekui Build — scans your source and outputs only what you use.
- *
- * Usage:
- *   npx arekui-build                          # reads arekui.config.js
- *   npx arekui-build -i ./src -o ./assets     # overrides with flags
- *   npx arekui-build --sourcemap
- *   npx arekui-build --full                   # include everything
- *
- * Config file (arekui.config.js or arekui.config.json):
- *   module.exports = {
- *     input: "./src",           // directory to scan
- *     output: "./assets",       // output directory
- *     name: "arekui",          // output filename (without .min.css)
- *     sourcemap: false,
- *     full: false,              // true = ignore scan, include all
- *   };
- *
- * CLI flags override config file values.
- */
-
 const fs = require("fs");
 const path = require("path");
 const { bundle } = require("lightningcss");
+const { BASE_IMPORTS } = require("./imports");
 
-// ── Load config file ───────────────────────────────────────────────────────
 function loadConfig() {
   const candidates = ["arekui.config.js", "arekui.config.json"];
   for (const file of candidates) {
@@ -45,7 +24,6 @@ function loadConfig() {
   return {};
 }
 
-// ── CLI args (override config) ─────────────────────────────────────────────
 function getArg(flags) {
   const idx = process.argv.findIndex((a) => flags.includes(a));
   return idx === -1 ? null : process.argv[idx + 1];
@@ -63,17 +41,18 @@ const full = process.argv.includes("--full") || config.full === true;
 const srcDir = path.resolve(input);
 const outDir = path.resolve(output);
 
-// ── Component → CSS class mapping ──────────────────────────────────────────
 const COMPONENT_CLASSES = {
   accordion: ["ar-accordion", "ar-collapse"],
   alert: ["ar-alert"],
   badge: ["ar-badge"],
   breadcrumb: ["ar-breadcrumb"],
+  broadsheet: ["ar-rule-double", "ar-masthead", "ar-folio", "ar-nameplate", "ar-banner", "ar-sheet-cols", "ar-sheet-col", "ar-plate"],
   button: ["ar-btn"],
   card: ["ar-card", "ar-card-body", "ar-card-title", "ar-card-figure"],
-  carousel: ["ar-carousel", "ar-carousel-item"],
+  carousel: ["ar-carousel", "ar-carousel-item", "ar-carousel-frame", "ar-carousel-btn", "ar-carousel-btn-prev", "ar-carousel-btn-next"],
   chat: ["ar-chat", "ar-chat-bubble"],
-  drawer: ["ar-drawer"],
+  "description-list": ["ar-dl", "ar-dt", "ar-dd"],
+  sidebar: ["ar-sidebar"],
   "file-upload": ["ar-file-upload"],
   footer: ["ar-footer"],
   forms: [
@@ -87,20 +66,33 @@ const COMPONENT_CLASSES = {
     "ar-label",
     "ar-fieldset",
   ],
+  heading: [
+    "ar-heading",
+    "ar-heading-eyebrow",
+    "ar-heading-title",
+    "ar-heading-desc",
+    "ar-heading-center",
+  ],
   hero: ["ar-hero"],
   join: ["ar-join"],
+  docs: ["ar-docs"],
+  empty: ["ar-empty", "ar-empty-icon", "ar-empty-title", "ar-empty-desc", "ar-empty-action"],
+  kbd: ["ar-kbd"],
   link: ["ar-link"],
-  menu: ["ar-menu", "ar-dropdown"],
-  misc: ["ar-divider", "ar-stepper", "ar-step", "ar-avatar"],
+  loading: ["ar-loading"],
+  menu: ["ar-menu", "ar-dropdown", "ar-theme-menu"],
+  misc: ["ar-divider", "ar-stepper", "ar-step", "ar-avatar", "ar-avatar-group", "ar-avatar-more"],
   modal: ["ar-modal"],
-  navbar: ["ar-navbar"],
+  navbar: ["ar-navbar", "ar-search"],
   pagination: ["ar-pagination"],
   popover: ["ar-popover"],
   progress: ["ar-progress"],
   prose: ["ar-prose"],
   rating: ["ar-rating"],
   "scroll-top": ["ar-scroll-top"],
+  segmented: ["ar-segmented", "ar-segmented-input", "ar-segmented-item"],
   skeleton: ["ar-skeleton"],
+  spinner: ["ar-spinner"],
   swap: ["ar-swap"],
   table: ["ar-table"],
   tabs: ["ar-tabs", "ar-tab"],
@@ -154,13 +146,34 @@ const UTILITY_PATTERNS = {
   ],
   borders: [/^ar-border/, /^ar-rounded/, /^ar-shadow-/],
   hover: [/^ar-hover-/],
-  responsive: [/^ar-md:/, /^ar-lg:/],
+  responsive: [/^ar-md:/, /^ar-lg:/, /^ar-hide/],
   "neo-utilities": [/^ar-neo-/],
+  "pixel-utilities": [/^ar-pixel-/],
+  "brutalist-utilities": [/^ar-brutalist-/],
 };
 
-// ── Scan source files ──────────────────────────────────────────────────────
 function findSourceFiles(dir) {
   const exts = [".html", ".jsx", ".vue", ".svelte", ".tsx", ".ts", ".js"];
+
+  // A consumer may point -i at a single file rather than a directory.
+  let stat;
+  try {
+    stat = fs.statSync(dir);
+  } catch {
+    console.error(`\x1b[31m✗\x1b[0m scan input not found: ${dir}`);
+    process.exit(1);
+  }
+  if (stat.isFile()) {
+    const ext = path.extname(dir).toLowerCase();
+    if (!exts.includes(ext)) {
+      console.error(
+        `\x1b[31m✗\x1b[0m ${dir} is not a scannable source - expected one of (${exts.join(" ")}) or a directory`,
+      );
+      process.exit(1);
+    }
+    return [dir];
+  }
+
   const files = [];
 
   function walk(d) {
@@ -191,90 +204,46 @@ function scan(dir) {
   return tokens;
 }
 
-function detectComponents(classes) {
-  const found = new Set();
-  for (const [comp, patterns] of Object.entries(COMPONENT_CLASSES)) {
+// Both detectors answer the same question — which named groups have at least
+// one matcher satisfied by a scanned token — so the double loop lives once.
+function detect(groups, classes, isMatch) {
+  const found = [];
+  for (const [name, matchers] of Object.entries(groups)) {
     for (const cls of classes) {
-      if (patterns.some((p) => cls === p || cls.startsWith(p + "-"))) {
-        found.add(comp);
+      if (matchers.some((m) => isMatch(m, cls))) {
+        found.push(name);
         break;
       }
     }
   }
-  return [...found];
+  return found;
 }
 
-function detectUtilities(classes) {
-  const found = new Set();
-  for (const [util, regexes] of Object.entries(UTILITY_PATTERNS)) {
-    for (const cls of classes) {
-      if (regexes.some((r) => r.test(cls))) {
-        found.add(util);
-        break;
-      }
-    }
-  }
-  return [...found];
+function detectComponents(classes) {
+  return detect(
+    COMPONENT_CLASSES,
+    classes,
+    (pattern, cls) => cls === pattern || cls.startsWith(pattern + "-"),
+  );
 }
 
-// ── Build CSS ──────────────────────────────────────────────────────────────
-const COMPONENT_FILES = {
-  accordion: "accordion",
-  alert: "alert",
-  badge: "badge",
-  breadcrumb: "breadcrumb",
-  button: "button",
-  card: "card",
-  carousel: "carousel",
-  chat: "chat",
-  drawer: "drawer",
-  "file-upload": "file-upload",
-  footer: "footer",
-  forms: "forms",
-  hero: "hero",
-  join: "join",
-  link: "link",
-  menu: "menu",
-  misc: "misc",
-  modal: "modal",
-  navbar: "navbar",
-  pagination: "pagination",
-  popover: "popover",
-  progress: "progress",
-  prose: "prose",
-  rating: "rating",
-  "scroll-top": "scroll-top",
-  skeleton: "skeleton",
-  swap: "swap",
-  table: "table",
-  tabs: "tabs",
-  tag: "tag",
-  textured: "textured",
-  timeline: "timeline",
-  toast: "toast",
-  tooltip: "tooltip",
-};
+function detectUtilities(classes) {
+  return detect(UTILITY_PATTERNS, classes, (pattern, cls) => pattern.test(cls));
+}
 
 function buildCSS(components, utilities) {
-  const imports = [
-    `@import "./base/tokens.css" layer(base);`,
-    `@import "./base/reset.css" layer(base);`,
-    `@import "./base/neo-overrides.css" layer(base);`,
-  ];
+  const imports = [...BASE_IMPORTS];
 
   for (const c of components) {
-    imports.push(
-      `@import "./components/${COMPONENT_FILES[c] || c}.css" layer(components);`,
-    );
+    imports.push(`@import "./components/${c}.css" layer(components);`);
   }
   for (const u of utilities) {
     imports.push(`@import "./utilities/${u}.css" layer(utilities);`);
   }
 
-  return `@layer base, components, utilities;\n\n${imports.join("\n")}\n`;
+  return `@layer base, components, themes, utilities;\n\n${imports.join("\n")}\n`;
 }
 
-// ── Main ───────────────────────────────────────────────────────────────────
 const orchestrator = path.join(__dirname, "..", "src", "arekui.css");
 const tmpFile = path.join(path.dirname(orchestrator), "__build.css");
 
@@ -282,7 +251,7 @@ try {
   let components, utilities;
 
   if (full) {
-    components = Object.keys(COMPONENT_FILES);
+    components = Object.keys(COMPONENT_CLASSES);
     utilities = Object.keys(UTILITY_PATTERNS);
     console.log(`\x1b[36m📦\x1b[0m Including all components`);
   } else {

package/scripts/build-js.js

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const esbuild = require("esbuild");
+
+const SRC = path.join(__dirname, "..", "arekui.js");
+const DIST = path.join(__dirname, "..", "dist");
+const OUT_MIN = path.join(DIST, "js", "arekui.min.js");
+const OUT_MAP = path.join(DIST, "js", "arekui.min.js.map");
+
+const args = process.argv.slice(2);
+const watch = args.includes("--watch");
+const sourcemap = args.includes("--sourcemap");
+
+async function build() {
+  const startTime = Date.now();
+
+  fs.mkdirSync(path.dirname(OUT_MIN), { recursive: true });
+
+  try {
+    const result = await esbuild.build({
+      entryPoints: [SRC],
+      bundle: false,
+      minify: true,
+      sourcemap: sourcemap,
+      outfile: OUT_MIN,
+      target: ["es2018"],
+      format: "iife",
+      legalComments: "none",
+      banner: {
+        js: "/*! ArekUI v2.0.0 | MIT License */",
+      },
+      write: false,
+    });
+
+    for (const file of result.outputFiles) {
+      fs.writeFileSync(file.path, file.contents);
+    }
+
+    const originalSize = fs.statSync(SRC).size;
+    const minifiedSize = fs.statSync(OUT_MIN).size;
+    const reduction = ((1 - minifiedSize / originalSize) * 100).toFixed(1);
+    const elapsed = Date.now() - startTime;
+
+    console.log(`✓ JS built in ${elapsed}ms`);
+    console.log(
+      `  ${originalSize} → ${minifiedSize} bytes (${reduction}% reduction)`,
+    );
+    console.log(`  Output: ${OUT_MIN}`);
+    if (sourcemap) {
+      console.log(`  Sourcemap: ${OUT_MAP}`);
+    }
+  } catch (err) {
+    console.error("✗ JS build failed:", err.message);
+    process.exit(1);
+  }
+}
+
+if (watch) {
+  console.log(`Watching ${SRC} for changes...`);
+  fs.watchFile(SRC, { interval: 100 }, () => {
+    console.log("\nChange detected, rebuilding JS...");
+    build();
+  });
+}
+
+build();

package/scripts/clean.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+
+const DIST = path.join(__dirname, "..", "dist");
+
+if (fs.existsSync(DIST)) {
+  fs.rmSync(DIST, { recursive: true, force: true });
+  console.log(`✓ Removed ${DIST}`);
+} else {
+  console.log("ℹ Nothing to clean (dist/ doesn't exist)");
+}

package/scripts/dev.js

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+
+const { spawn, spawnSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+const SCRIPTS = __dirname;
+const children = [];
+let shuttingDown = false;
+
+// Runs a script to completion before continuing. With { fatal: true } a
+// failed run tears the dev process down instead of building on top of a
+// stale bundle.
+function run(script, { fatal = false } = {}) {
+  const result = spawnSync(process.execPath, [path.join(SCRIPTS, script)], {
+    cwd: ROOT,
+    stdio: "inherit",
+  });
+  if (result.status !== 0) {
+    console.error(`✗ ${script} failed`);
+    if (fatal) process.exit(result.status || 1);
+  }
+}
+
+function watchScript(script, label) {
+  const child = spawn(process.execPath, [path.join(SCRIPTS, script), "--watch"], {
+    cwd: ROOT,
+    stdio: ["ignore", "pipe", "pipe"],
+  });
+  const prefix = `\x1b[90m[${label}]\x1b[0m `;
+  const pipe = (stream, out) => {
+    let buffer = "";
+    stream.on("data", (chunk) => {
+      buffer += chunk.toString();
+      const lines = buffer.split("\n");
+      buffer = lines.pop();
+      for (const line of lines) out.write(prefix + line + "\n");
+    });
+  };
+  pipe(child.stdout, process.stdout);
+  pipe(child.stderr, process.stderr);
+  child.on("exit", (code, signal) => {
+    if (shuttingDown) return;
+    console.error(`${prefix}exited unexpectedly (${signal || code})`);
+    shutdown(1);
+  });
+  children.push(child);
+}
+
+function shutdown(code) {
+  if (shuttingDown) return;
+  shuttingDown = true;
+  for (const child of children) {
+    if (child.exitCode === null && child.signalCode === null) {
+      try {
+        child.kill();
+      } catch (e) {}
+    }
+  }
+  process.exit(code);
+}
+
+process.on("SIGINT", () => shutdown(0));
+process.on("SIGTERM", () => shutdown(0));
+
+const timers = new Map();
+function debounce(key, label, fn) {
+  const existing = timers.get(key);
+  if (existing) clearTimeout(existing);
+  timers.set(
+    key,
+    setTimeout(() => {
+      timers.delete(key);
+      process.stdout.write(`\x1b[90m[${label}]\x1b[0m ${key} changed\n`);
+      fn();
+    }, 100),
+  );
+}
+
+console.log("ArekUI dev\n");
+
+run("split.js", { fatal: true });
+run("build-css.js", { fatal: true });
+run("build-js.js", { fatal: true });
+
+watchScript("build-css.js", "css");
+watchScript("build-js.js", "js");
+
+const rootCss = path.join(ROOT, "arekui.css");
+if (fs.existsSync(rootCss)) {
+  fs.watchFile(rootCss, { interval: 200 }, () => {
+    debounce("arekui.css", "split", () => run("split.js"));
+  });
+}
+
+console.log("Watching arekui.css (Ctrl+C to stop)\n");

package/scripts/imports.js

@@ -0,0 +1,18 @@
+// The nine base-layer imports every ArekUI entry point starts with. Both
+// consumers must emit them identically, so they live here once instead of
+// being kept in sync by hand: split.js (the src/ orchestrators) and
+// build-custom.js (the arekui-build consumer bundle).
+
+const BASE_IMPORTS = [
+  '@import "./base/tokens.css" layer(base);',
+  '@import "./base/theme-default.css" layer(base);',
+  '@import "./base/theme-neo.css" layer(base);',
+  '@import "./base/theme-pixel.css" layer(base);',
+  '@import "./base/theme-brutalist.css" layer(base);',
+  '@import "./base/reset.css" layer(base);',
+  '@import "./base/neo-overrides.css" layer(themes);',
+  '@import "./base/pixel-overrides.css" layer(themes);',
+  '@import "./base/brutalist-overrides.css" layer(themes);',
+];
+
+module.exports = { BASE_IMPORTS };