@sealcode/sealgen 0.17.9 → 0.17.11

package/@types/src/builders/backend-ts-builder.d.ts

@@ -0,0 +1,7 @@
+import { Builder } from "./builder.js";
+export declare class BackendTSBuilder extends Builder {
+    getName(): string;
+    ownsFile(file_path: string): boolean;
+    dispose(): Promise<void>;
+    _build(): Promise<void>;
+}

package/@types/src/builders/builder.d.ts

@@ -0,0 +1,11 @@
+export declare abstract class Builder {
+    project_dir: string;
+    style_dirs: string[];
+    abstract ownsFile(file_path: string): boolean;
+    abstract getName(): string;
+    abstract _build(): Promise<void>;
+    abstract dispose(): Promise<void>;
+    constructor(project_dir: string, style_dirs: string[]);
+    ongoing_build: Promise<void> | null;
+    build(notifier?: (message: string) => void): Promise<void>;
+}

package/@types/src/builders/colors-builder.d.ts

@@ -0,0 +1,10 @@
+import { Builder } from "./builder.js";
+export declare const COLORS_TS_PATH = "src/back/colors.ts";
+export declare const COLORS_CSS_PATH = "src/colors.css";
+export declare const COLORS_HTML_PATH = "src/colors.html";
+export declare class ColorsBuilder extends Builder {
+    getName(): string;
+    ownsFile(file_path: string): boolean;
+    dispose(): Promise<void>;
+    _build(): Promise<void>;
+}

package/@types/src/builders/css-builder.d.ts

@@ -0,0 +1,19 @@
+import { Builder } from "./builder.js";
+export declare class CSSClump {
+    project_dir: string;
+    name: string;
+    files: string[];
+    constructor(project_dir: string, name: string);
+    addFile(full_path: string): void;
+    build(): Promise<void>;
+    getEntrypointPath(): string;
+    makeEntrypoint(): Promise<void>;
+    static assignFileToClumps(file_path: string): string[];
+    static findCSSClumps(project_dir: string, style_dirs: string[]): Promise<CSSClump[]>;
+}
+export declare class CSSBuilder extends Builder {
+    getName(): string;
+    ownsFile(file_path: string): boolean;
+    dispose(): Promise<void>;
+    _build(): Promise<void>;
+}

package/@types/src/builders/fonts-builder.d.ts

@@ -0,0 +1,7 @@
+import { Builder } from "./builder.js";
+export declare class FontsBuilder extends Builder {
+    getName(): string;
+    ownsFile(file_path: string): boolean;
+    dispose(): Promise<void>;
+    _build(): Promise<void>;
+}

package/@types/src/builders/frontend-ts-builder.d.ts

@@ -0,0 +1,11 @@
+import { Builder } from "./builder.js";
+export declare class FrontendTSBuilder extends Builder {
+    project_dir: string;
+    style_dirs: string[];
+    controller_dirs: string[];
+    constructor(project_dir: string, style_dirs: string[], controller_dirs: string[]);
+    getName(): string;
+    ownsFile(file_path: string): boolean;
+    dispose(): Promise<void>;
+    _build(): Promise<void>;
+}

package/lib/build.js

@@ -4,13 +4,12 @@ import { make_notifier } from "./notifier.js";
 import getPort from "get-port";
 import { resolve } from "node:path";
 import _locreq from "locreq";
-import {
-  BackendTSBuilder,
-  FontsBuilder,
-  FrontendTSBuilder
-} from "./builder.js";
-import { CSSBuilder } from "./CSSBuilder.js";
 import { hasShape, predicates } from "@sealcode/ts-predicates";
+import { FontsBuilder } from "./builders/fonts-builder.js";
+import { BackendTSBuilder } from "./builders/backend-ts-builder.js";
+import { FrontendTSBuilder } from "./builders/frontend-ts-builder.js";
+import { CSSBuilder } from "./builders/css-builder.js";
+import { ColorsBuilder } from "./builders/colors-builder.js";
 const target_locreq = _locreq(process.cwd());
 async function get_notifier_port() {
   return getPort({ port: 4e3 });
@@ -77,9 +76,11 @@ async function build(watch) {
     controller_dirs
   );
   const css_builder = new CSSBuilder(project_dir, style_dirs);
+  const colors_builder = new ColorsBuilder(project_dir, style_dirs);
   const builders = [
     fonts_builder,
     backend_ts_builder,
+    colors_builder,
     css_builder,
     frontend_ts_builder
   ];

package/lib/builders/backend-ts-builder.js

@@ -0,0 +1,62 @@
+import glob from "tiny-glob";
+import { build } from "esbuild";
+import { promises as fs } from "fs";
+import { relative } from "node:path";
+import { embeddable_file_extensions } from "../embeddable-file-extensions.js";
+import { generateCollections } from "../generate-collections.js";
+import { generateComponents } from "../generate-components.js";
+import { generateRoutes } from "../generate-routes.js";
+import { Builder } from "./builder.js";
+import { rewrite_asset_imports_plugin } from "../esbuild-plugins/rewrite-asset-imports.js";
+import { load_assets_plugin } from "../esbuild-plugins/load-assets.js";
+class BackendTSBuilder extends Builder {
+  getName() {
+    return "backend-ts";
+  }
+  ownsFile(file_path) {
+    return (file_path.endsWith(".ts") || file_path.endsWith(".tsx")) && !file_path.endsWith("src/back/collections/collections.ts") && !file_path.endsWith("src/back/routes/routes.ts") && !file_path.endsWith("src/back/routes/urls.ts") && !file_path.endsWith("stimulus.ts") && !file_path.startsWith("src/front");
+  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async dispose() {
+  }
+  async _build() {
+    await Promise.all([
+      generateCollections(),
+      generateRoutes(),
+      generateComponents()
+    ]);
+    const entryPoints = (await glob(
+      `./src/back/**/*.{ts,tsx,${embeddable_file_extensions.join(
+        ","
+      )}}`
+    )).filter((path) => !path.includes(".#"));
+    const { metafile } = await build({
+      entryPoints,
+      sourcemap: true,
+      bundle: false,
+      jsxFactory: "TempstreamJSX.createElement",
+      jsxFragment: "TempstreamJSX.Fragment",
+      outdir: "./dist/back",
+      logLevel: "info",
+      platform: "node",
+      target: "es2022",
+      format: "esm",
+      loader: Object.fromEntries(
+        embeddable_file_extensions.map((ext) => ["." + ext, "js"])
+      ),
+      plugins: [
+        rewrite_asset_imports_plugin(this.project_dir),
+        load_assets_plugin
+      ],
+      metafile: true
+    });
+    await fs.writeFile(
+      relative(this.project_dir, "dist") + "/back.meta.json",
+      JSON.stringify(metafile)
+    );
+  }
+}
+export {
+  BackendTSBuilder
+};
+//# sourceMappingURL=backend-ts-builder.js.map

package/lib/builders/builder.js

@@ -0,0 +1,23 @@
+class Builder {
+  constructor(project_dir, style_dirs) {
+    this.project_dir = project_dir;
+    this.style_dirs = style_dirs;
+    this.ongoing_build = null;
+  }
+  build(notifier) {
+    if (!this.ongoing_build) {
+      const build = this._build().catch((err) => {
+        console.error(err);
+      }).then(() => {
+        notifier?.(this.getName());
+        this.ongoing_build = null;
+      });
+      this.ongoing_build = build;
+    }
+    return this.ongoing_build;
+  }
+}
+export {
+  Builder
+};
+//# sourceMappingURL=builder.js.map

package/lib/builders/colors-builder.js

@@ -0,0 +1,204 @@
+import { build } from "esbuild";
+import tempfile from "tempfile";
+import { promises as fs } from "fs";
+import { resolve } from "path";
+import { colord } from "colord";
+import { formatWithPrettier } from "../utils/prettier.js";
+import { Builder } from "./builder.js";
+import { exec } from "../utils/exec.js";
+const COLORS_TS_PATH = "src/back/colors.ts";
+const COLORS_CSS_PATH = "src/colors.css";
+const COLORS_HTML_PATH = "src/colors.html";
+class ColorsBuilder extends Builder {
+  getName() {
+    return "colors";
+  }
+  ownsFile(file_path) {
+    return file_path == COLORS_TS_PATH;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async dispose() {
+  }
+  async _build() {
+    const outfile = tempfile({ extension: "mjs" });
+    await build({
+      entryPoints: [COLORS_TS_PATH],
+      bundle: true,
+      format: "esm",
+      outfile
+    });
+    await fs.appendFile(outfile, "console.log(JSON.stringify(colors))");
+    const output = await exec("node", [outfile]);
+    const colors = JSON.parse(output.stdout);
+    let css_colors = "";
+    let html_colors = "";
+    for (const group_name of Object.keys(colors).sort(
+      (key) => key == "basic" ? 1 : -1
+    )) {
+      const sorted_colors = Object.entries(colors[group_name]).sort(
+        ([key1], [key2]) => key1 > key2 ? 1 : -1
+      );
+      html_colors += `<h2>${group_name}</h2><div class="group"><div class="base">`;
+      let last_color_name_base = "";
+      for (const [color_name, color] of sorted_colors) {
+        const color_name_elements = color_name.split("-");
+        const color_name_base = color_name_elements.filter((s) => !/^(light|dark)[0-9]$/.test(s)).join("-");
+        let index = 0;
+        const modifier = color_name_elements.at(-1);
+        let multiplier = 1;
+        let steps = 0;
+        if (modifier) {
+          if (modifier.startsWith("dark")) {
+            multiplier = -1;
+          }
+        }
+        if (modifier && modifier.match(/[0-9]$/) && modifier.match(/^(dark|light)[0-9]/)) {
+          steps = parseInt(modifier.at(-1));
+        }
+        index = multiplier * steps;
+        const is_new_base = color_name_base != last_color_name_base;
+        css_colors += `--color-${group_name}-${color_name}: ${color};`;
+        if (is_new_base) {
+          html_colors += `</div><h3>${color_name_base}</h3><div class="base" base="${color_name_base}">`;
+        }
+        if (color != "#000000" && color != "#ffffff") {
+          html_colors += /* HTML */
+          `<div
+						class="color-box ${colord(color).isDark() ? "is-dark" : ""} ${index == 0 ? "is-main" : ""}"
+						style="background-color: ${color}; order: ${index}"
+						data-color-name="${color_name}"
+						data-color-group="${group_name}"
+					></div>`;
+        }
+        last_color_name_base = color_name_base;
+      }
+      html_colors += "</div></div>";
+    }
+    const css = await formatWithPrettier(
+      `/* DO NOT EDIT! This file is automatically generated by sealgen */
+			:root {
+              ${css_colors}
+			}`,
+      "css"
+    );
+    const html = await formatWithPrettier(
+      /* HTML */
+      `<!DOCTYPE html>
+				<html>
+					<head>
+						<style>
+							* {
+								font-family: sans-serif;
+							}
+
+							.base {
+								display: flex;
+							}
+
+							.color-box {
+								width: 100px;
+								height: 100px;
+								transition: all 50ms;
+								transition-timing-function: ease-in-out;
+								cursor: pointer;
+
+								&:hover {
+									transform: scale(1.1);
+								}
+
+								&.is-main {
+									height: 116px;
+									width: 116px;
+									margin-top: -8px;
+									box-shadow: 0px 0px 6px 2px white;
+									z-index: 1;
+								}
+							}
+
+							.color-box:after {
+								content: attr(data-color-name);
+								display: block;
+								color: black;
+								font-size: 14px;
+								width: 100%;
+								height: 100%;
+								padding: 10px;
+								opacity: 0.3;
+							}
+
+							.color-box.is-dark:after {
+								color: white;
+							}
+
+							@keyframes float-up {
+								from {
+									transform: translateY(0);
+									opacity: 1;
+								}
+
+								to {
+									transform: translateY(-20px);
+									opacity: 0;
+								}
+							}
+
+							.toast {
+								background-color: black;
+								position: absolute;
+								color: white;
+								border-radius: 8px;
+								padding: 8px;
+								animation: float-up 800ms;
+								animation-timing-function: ease-out;
+								z-index: 2;
+							}
+						</style>
+					</head>
+					<body>
+						${html_colors}
+					</body>
+					<script>
+						document.addEventListener("click", (event) => {
+							navigator.clipboard.writeText(
+								\`var(--color-\${event.target.getAttribute(
+									"data-color-group"
+								)}-\${event.target.getAttribute(
+									"data-color-name"
+								)})\`
+							);
+							const toast = document.createElement("div");
+							document.body.appendChild(toast);
+							toast.classList.add("toast");
+							toast.textContent = "Copied!";
+							toast.style.setProperty(
+								"top",
+								event.clientY +
+									document.scrollingElement.scrollTop -
+									40 +
+									"px"
+							);
+							toast.style.setProperty(
+								"left",
+								event.clientX + "px"
+							);
+							toast.addEventListener("animationend", () => {
+								toast.remove();
+							});
+						});
+					</script>
+				</html>`,
+      "html"
+    );
+    await Promise.all([
+      fs.writeFile(resolve(this.project_dir, COLORS_CSS_PATH), css),
+      fs.writeFile(resolve(this.project_dir, COLORS_HTML_PATH), html)
+    ]);
+  }
+}
+export {
+  COLORS_CSS_PATH,
+  COLORS_HTML_PATH,
+  COLORS_TS_PATH,
+  ColorsBuilder
+};
+//# sourceMappingURL=colors-builder.js.map

package/lib/{CSSBuilder.js → builders/css-builder.js}

@@ -2,7 +2,7 @@ import { build } from "esbuild";
 import { resolve, relative, basename, dirname } from "node:path";
 import glob from "tiny-glob";
 import { promises as fs } from "fs";
-import { walkDir } from "./utils/walk.js";
+import { walkDir } from "../utils/walk.js";
 import { Builder } from "./builder.js";
 class CSSClump {
   constructor(project_dir, name) {
@@ -140,4 +140,4 @@ export {
   CSSBuilder,
   CSSClump
 };
-//# sourceMappingURL=CSSBuilder.js.map
+//# sourceMappingURL=css-builder.js.map

package/lib/builders/fonts-builder.js

@@ -0,0 +1,20 @@
+import { Builder } from "./builder.js";
+import { FONTS_CONFIG_PATH, getFonts } from "../get-fonts.js";
+class FontsBuilder extends Builder {
+  getName() {
+    return "fonts";
+  }
+  ownsFile(file_path) {
+    return file_path == FONTS_CONFIG_PATH;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async dispose() {
+  }
+  async _build() {
+    return getFonts();
+  }
+}
+export {
+  FontsBuilder
+};
+//# sourceMappingURL=fonts-builder.js.map

package/lib/builders/frontend-ts-builder.js

@@ -0,0 +1,43 @@
+import { generateStimulusControllers } from "../generate-stimulus.js";
+import { promises as fs } from "fs";
+import { build } from "esbuild";
+import { Builder } from "./builder.js";
+import { relative } from "node:path";
+class FrontendTSBuilder extends Builder {
+  constructor(project_dir, style_dirs, controller_dirs) {
+    super(project_dir, style_dirs);
+    this.project_dir = project_dir;
+    this.style_dirs = style_dirs;
+    this.controller_dirs = controller_dirs;
+  }
+  getName() {
+    return "frontend-ts";
+  }
+  ownsFile(file_path) {
+    return file_path.startsWith("src/front") || file_path.endsWith(".stimulus.ts");
+  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async dispose() {
+  }
+  async _build() {
+    await generateStimulusControllers(this.controller_dirs);
+    const { metafile } = await build({
+      entryPoints: ["./src/front/index.ts"],
+      sourcemap: true,
+      outfile: "./public/dist/bundle.js",
+      logLevel: "info",
+      bundle: true,
+      minify: true,
+      metafile: true,
+      treeShaking: true
+    });
+    await fs.writeFile(
+      relative(this.project_dir, "dist") + "/front.meta.json",
+      JSON.stringify(metafile)
+    );
+  }
+}
+export {
+  FrontendTSBuilder
+};
+//# sourceMappingURL=frontend-ts-builder.js.map

package/lib/get-fonts.js

@@ -2,10 +2,11 @@ import { readFile, writeFile } from "fs/promises";
 import { constructURL, download } from "google-fonts-helper";
 import { resolve } from "node:path";
 import { target_locreq } from "./target-locreq.js";
+import JSON5 from "json5";
 const FONTS_CONFIG_PATH = "src/fonts.json";
 async function getFonts(_ = {}) {
   const fonts_config_path = target_locreq.resolve(FONTS_CONFIG_PATH);
-  const fonts_config = JSON.parse(await readFile(fonts_config_path, "utf8"));
+  const fonts_config = JSON5.parse(await readFile(fonts_config_path, "utf8"));
   const fonts_url = constructURL(fonts_config.googleFonts);
   if (!fonts_url) {
     throw new Error("Invalid font config");

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.17.9",
+	"version": "0.17.11",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",
@@ -63,18 +63,21 @@
 		"@sealcode/file-manager": "^1.0.2",
 		"@sealcode/ts-predicates": "^0.4.3",
 		"chokidar": "^3.6.0",
+		"colord": "^2.9.3",
 		"deepmerge": "^4.3.1",
 		"esbuild": "^0.20.0",
 		"escape-goat": "^4.0.0",
 		"google-fonts-helper": "^3.4.1",
 		"is-what": "^4.1.16",
 		"js-convert-case": "^4.2.0",
+		"json5": "^2.2.3",
 		"locreq": "^3.0.0",
 		"md5": "^2.3.0",
 		"merge": "^2.1.1",
 		"prettier": "^2.7.1",
 		"prompts": "^2.4.2",
 		"recursive-readdir": "^2.2.3",
+		"tempfile": "^5.0.0",
 		"tempstream": "^0.4.4",
 		"tiny-glob": "^0.2.9",
 		"ws": "^8.16.0",

package/src/build.ts

@@ -6,13 +6,12 @@ import { resolve } from "node:path";
 
 import _locreq from "locreq";
 
-import {
-	BackendTSBuilder,
-	FontsBuilder,
-	FrontendTSBuilder,
-} from "./builder.js";
-import { CSSBuilder } from "./CSSBuilder.js";
 import { hasShape, predicates } from "@sealcode/ts-predicates";
+import { FontsBuilder } from "./builders/fonts-builder.js";
+import { BackendTSBuilder } from "./builders/backend-ts-builder.js";
+import { FrontendTSBuilder } from "./builders/frontend-ts-builder.js";
+import { CSSBuilder } from "./builders/css-builder.js";
+import { ColorsBuilder } from "./builders/colors-builder.js";
 const target_locreq = _locreq(process.cwd());
 
 async function get_notifier_port() {
@@ -85,9 +84,11 @@ async function build(watch: boolean): Promise<void> {
 		controller_dirs
 	);
 	const css_builder = new CSSBuilder(project_dir, style_dirs);
+	const colors_builder = new ColorsBuilder(project_dir, style_dirs);
 	const builders = [
 		fonts_builder,
 		backend_ts_builder,
+		colors_builder,
 		css_builder,
 		frontend_ts_builder,
 	];

package/src/builders/backend-ts-builder.ts

@@ -0,0 +1,73 @@
+import glob from "tiny-glob";
+import { build } from "esbuild";
+import { promises as fs } from "fs";
+import { relative } from "node:path";
+
+import { embeddable_file_extensions } from "../embeddable-file-extensions.js";
+import { generateCollections } from "../generate-collections.js";
+import { generateComponents } from "../generate-components.js";
+import { generateRoutes } from "../generate-routes.js";
+import { Builder } from "./builder.js";
+import { rewrite_asset_imports_plugin } from "../esbuild-plugins/rewrite-asset-imports.js";
+import { load_assets_plugin } from "../esbuild-plugins/load-assets.js";
+
+export class BackendTSBuilder extends Builder {
+	getName(): string {
+		return "backend-ts";
+	}
+
+	ownsFile(file_path: string) {
+		return (
+			(file_path.endsWith(".ts") || file_path.endsWith(".tsx")) &&
+			!file_path.endsWith("src/back/collections/collections.ts") &&
+			!file_path.endsWith("src/back/routes/routes.ts") &&
+			!file_path.endsWith("src/back/routes/urls.ts") &&
+			!file_path.endsWith("stimulus.ts") &&
+			!file_path.startsWith("src/front")
+		);
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-empty-function
+	async dispose(): Promise<void> {}
+
+	async _build(): Promise<void> {
+		await Promise.all([
+			generateCollections(),
+			generateRoutes(),
+			generateComponents(),
+		]);
+		const entryPoints = (
+			await glob(
+				`./src/back/**/*.{ts,tsx,${embeddable_file_extensions.join(
+					","
+				)}}`
+			)
+		).filter((path) => !path.includes(".#"));
+
+		const { metafile } = await build({
+			entryPoints,
+			sourcemap: true,
+			bundle: false,
+			jsxFactory: "TempstreamJSX.createElement",
+			jsxFragment: "TempstreamJSX.Fragment",
+			outdir: "./dist/back",
+			logLevel: "info",
+			platform: "node",
+			target: "es2022",
+			format: "esm",
+			loader: Object.fromEntries(
+				embeddable_file_extensions.map((ext) => ["." + ext, "js"])
+			),
+			plugins: [
+				rewrite_asset_imports_plugin(this.project_dir),
+				load_assets_plugin,
+			],
+			metafile: true,
+		});
+
+		await fs.writeFile(
+			relative(this.project_dir, "dist") + "/" + "back" + ".meta.json",
+			JSON.stringify(metafile)
+		);
+	}
+}

package/src/builders/builder.ts

@@ -0,0 +1,25 @@
+export abstract class Builder {
+	abstract ownsFile(file_path: string): boolean;
+	abstract getName(): string;
+	abstract _build(): Promise<void>;
+	abstract dispose(): Promise<void>;
+
+	constructor(public project_dir: string, public style_dirs: string[]) {}
+
+	public ongoing_build: Promise<void> | null = null;
+
+	public build(notifier?: (message: string) => void) {
+		if (!this.ongoing_build) {
+			const build = this._build()
+				.catch((err) => {
+					console.error(err);
+				})
+				.then(() => {
+					notifier?.(this.getName());
+					this.ongoing_build = null;
+				});
+			this.ongoing_build = build;
+		}
+		return this.ongoing_build;
+	}
+}

package/src/builders/colors-builder.ts

@@ -0,0 +1,216 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { build } from "esbuild";
+import tempfile from "tempfile";
+import { promises as fs } from "fs";
+import { resolve } from "path";
+import { colord } from "colord";
+
+import { formatWithPrettier } from "../utils/prettier.js";
+
+import { Builder } from "./builder.js";
+import { exec } from "../utils/exec.js";
+
+export const COLORS_TS_PATH = "src/back/colors.ts"; // keeping it in src/back instead of just src to make typescript hints work there
+export const COLORS_CSS_PATH = "src/colors.css";
+export const COLORS_HTML_PATH = "src/colors.html";
+
+export class ColorsBuilder extends Builder {
+	getName(): string {
+		return "colors";
+	}
+
+	ownsFile(file_path: string) {
+		return file_path == COLORS_TS_PATH;
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-empty-function
+	async dispose(): Promise<void> {}
+
+	async _build() {
+		const outfile = tempfile({ extension: "mjs" });
+		await build({
+			entryPoints: [COLORS_TS_PATH],
+			bundle: true,
+			format: "esm",
+			outfile,
+		});
+		await fs.appendFile(outfile, "console.log(JSON.stringify(colors))");
+		const output = await exec("node", [outfile]);
+		const colors = JSON.parse(output.stdout) as Record<
+			string,
+			Record<string, string>
+		>;
+
+		let css_colors = "";
+		let html_colors = "";
+		for (const group_name of Object.keys(colors).sort((key) =>
+			key == "basic" ? 1 : -1
+		)) {
+			const sorted_colors = Object.entries(colors[group_name]).sort(
+				([key1], [key2]) => (key1 > key2 ? 1 : -1)
+			);
+			html_colors += `<h2>${group_name}</h2><div class="group"><div class="base">`;
+			let last_color_name_base = "";
+			for (const [color_name, color] of sorted_colors) {
+				const color_name_elements = color_name.split("-");
+				const color_name_base = color_name_elements
+					.filter((s) => !/^(light|dark)[0-9]$/.test(s))
+					.join("-");
+				let index = 0;
+				const modifier = color_name_elements.at(-1);
+				let multiplier = 1;
+				let steps = 0;
+				if (modifier) {
+					if (modifier.startsWith("dark")) {
+						multiplier = -1;
+					}
+				}
+				if (
+					modifier &&
+					modifier.match(/[0-9]$/) &&
+					modifier.match(/^(dark|light)[0-9]/)
+				) {
+					steps = parseInt(modifier.at(-1)!);
+				}
+				index = multiplier * steps;
+				const is_new_base = color_name_base != last_color_name_base;
+				css_colors += `--color-${group_name}-${color_name}: ${color};`;
+				if (is_new_base) {
+					html_colors += `</div><h3>${color_name_base}</h3><div class="base" base="${color_name_base}">`;
+				}
+				if (color != "#000000" && color != "#ffffff") {
+					html_colors += /* HTML */ `<div
+						class="color-box ${colord(color).isDark()
+							? "is-dark"
+							: ""} ${index == 0 ? "is-main" : ""}"
+						style="background-color: ${color}; order: ${index}"
+						data-color-name="${color_name}"
+						data-color-group="${group_name}"
+					></div>`;
+				}
+				last_color_name_base = color_name_base;
+			}
+			html_colors += "</div></div>"; // close group and base
+		}
+
+		const css = await formatWithPrettier(
+			`/* DO NOT EDIT! This file is automatically generated by sealgen */
+			:root {
+              ${css_colors}
+			}`,
+			"css"
+		);
+
+		const html = await formatWithPrettier(
+			/* HTML */ `<!DOCTYPE html>
+				<html>
+					<head>
+						<style>
+							* {
+								font-family: sans-serif;
+							}
+
+							.base {
+								display: flex;
+							}
+
+							.color-box {
+								width: 100px;
+								height: 100px;
+								transition: all 50ms;
+								transition-timing-function: ease-in-out;
+								cursor: pointer;
+
+								&:hover {
+									transform: scale(1.1);
+								}
+
+								&.is-main {
+									height: 116px;
+									width: 116px;
+									margin-top: -8px;
+									box-shadow: 0px 0px 6px 2px white;
+									z-index: 1;
+								}
+							}
+
+							.color-box:after {
+								content: attr(data-color-name);
+								display: block;
+								color: black;
+								font-size: 14px;
+								width: 100%;
+								height: 100%;
+								padding: 10px;
+								opacity: 0.3;
+							}
+
+							.color-box.is-dark:after {
+								color: white;
+							}
+
+							@keyframes float-up {
+								from {
+									transform: translateY(0);
+									opacity: 1;
+								}
+
+								to {
+									transform: translateY(-20px);
+									opacity: 0;
+								}
+							}
+
+							.toast {
+								background-color: black;
+								position: absolute;
+								color: white;
+								border-radius: 8px;
+								padding: 8px;
+								animation: float-up 800ms;
+								animation-timing-function: ease-out;
+								z-index: 2;
+							}
+						</style>
+					</head>
+					<body>
+						${html_colors}
+					</body>
+					<script>
+						document.addEventListener("click", (event) => {
+							navigator.clipboard.writeText(
+								\`var(--color-\${event.target.getAttribute(
+									"data-color-group"
+								)}-\${event.target.getAttribute(
+									"data-color-name"
+								)})\`
+							);
+							const toast = document.createElement("div");
+							document.body.appendChild(toast);
+							toast.classList.add("toast");
+							toast.textContent = "Copied!";
+							toast.style.setProperty(
+								"top",
+								event.clientY +
+									document.scrollingElement.scrollTop -
+									40 +
+									"px"
+							);
+							toast.style.setProperty(
+								"left",
+								event.clientX + "px"
+							);
+							toast.addEventListener("animationend", () => {
+								toast.remove();
+							});
+						});
+					</script>
+				</html>`,
+			"html"
+		);
+		await Promise.all([
+			fs.writeFile(resolve(this.project_dir, COLORS_CSS_PATH), css),
+			fs.writeFile(resolve(this.project_dir, COLORS_HTML_PATH), html),
+		]);
+	}
+}

package/src/{CSSBuilder.ts → builders/css-builder.ts}

@@ -2,7 +2,7 @@ import { build } from "esbuild";
 import { resolve, relative, basename, dirname } from "node:path";
 import glob from "tiny-glob";
 import { promises as fs } from "fs";
-import { walkDir } from "./utils/walk.js";
+import { walkDir } from "../utils/walk.js";
 import { Builder } from "./builder.js";
 
 export class CSSClump {

package/src/builders/fonts-builder.ts

@@ -0,0 +1,19 @@
+import { Builder } from "./builder.js";
+import { FONTS_CONFIG_PATH, getFonts } from "../get-fonts.js";
+
+export class FontsBuilder extends Builder {
+	getName(): string {
+		return "fonts";
+	}
+
+	ownsFile(file_path: string) {
+		return file_path == FONTS_CONFIG_PATH;
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-empty-function
+	async dispose(): Promise<void> {}
+
+	async _build() {
+		return getFonts();
+	}
+}

package/src/builders/frontend-ts-builder.ts

@@ -0,0 +1,47 @@
+import { generateStimulusControllers } from "../generate-stimulus.js";
+import { promises as fs } from "fs";
+import { build } from "esbuild";
+import { Builder } from "./builder.js";
+import { relative } from "node:path";
+
+export class FrontendTSBuilder extends Builder {
+	constructor(
+		public project_dir: string,
+		public style_dirs: string[],
+		public controller_dirs: string[]
+	) {
+		super(project_dir, style_dirs);
+	}
+
+	getName(): string {
+		return "frontend-ts";
+	}
+
+	ownsFile(file_path: string) {
+		return (
+			file_path.startsWith("src/front") ||
+			file_path.endsWith(".stimulus.ts")
+		);
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-empty-function
+	async dispose(): Promise<void> {}
+
+	async _build(): Promise<void> {
+		await generateStimulusControllers(this.controller_dirs);
+		const { metafile } = await build({
+			entryPoints: ["./src/front/index.ts"],
+			sourcemap: true,
+			outfile: "./public/dist/bundle.js",
+			logLevel: "info",
+			bundle: true,
+			minify: true,
+			metafile: true,
+			treeShaking: true,
+		});
+		await fs.writeFile(
+			relative(this.project_dir, "dist") + "/" + "front" + ".meta.json",
+			JSON.stringify(metafile)
+		);
+	}
+}

package/src/get-fonts.ts

@@ -2,6 +2,7 @@ import { readFile, writeFile } from "fs/promises";
 import { constructURL, download } from "google-fonts-helper";
 import { resolve } from "node:path";
 import { target_locreq } from "./target-locreq.js";
+import JSON5 from "json5";
 
 export const FONTS_CONFIG_PATH = "src/fonts.json";
 
@@ -9,7 +10,7 @@ export async function getFonts(_: Record<string, string | boolean> = {}) {
 	const fonts_config_path = target_locreq.resolve(FONTS_CONFIG_PATH);
 
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-	const fonts_config = JSON.parse(await readFile(fonts_config_path, "utf8"));
+	const fonts_config = JSON5.parse(await readFile(fonts_config_path, "utf8"));
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
 	const fonts_url = constructURL(fonts_config.googleFonts);
 	if (!fonts_url) {

package/lib/builder.js

@@ -1,133 +0,0 @@
-import { build } from "esbuild";
-import glob from "tiny-glob";
-import { promises as fs } from "fs";
-import { embeddable_file_extensions } from "./embeddable-file-extensions.js";
-import { load_assets_plugin } from "./esbuild-plugins/load-assets.js";
-import { rewrite_asset_imports_plugin } from "./esbuild-plugins/rewrite-asset-imports.js";
-import { generateCollections } from "./generate-collections.js";
-import { generateComponents } from "./generate-components.js";
-import { generateRoutes } from "./generate-routes.js";
-import { generateStimulusControllers } from "./generate-stimulus.js";
-import { FONTS_CONFIG_PATH, getFonts } from "./get-fonts.js";
-import { relative } from "node:path";
-class Builder {
-  constructor(project_dir, style_dirs) {
-    this.project_dir = project_dir;
-    this.style_dirs = style_dirs;
-    this.ongoing_build = null;
-  }
-  build(notifier) {
-    if (!this.ongoing_build) {
-      const build2 = this._build().catch((err) => {
-        console.error(err);
-      }).then(() => {
-        notifier?.(this.getName());
-        this.ongoing_build = null;
-      });
-      this.ongoing_build = build2;
-    }
-    return this.ongoing_build;
-  }
-}
-class FontsBuilder extends Builder {
-  getName() {
-    return "fonts";
-  }
-  ownsFile(file_path) {
-    return file_path == FONTS_CONFIG_PATH;
-  }
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  async dispose() {
-  }
-  async _build() {
-    return getFonts();
-  }
-}
-class BackendTSBuilder extends Builder {
-  getName() {
-    return "backend-ts";
-  }
-  ownsFile(file_path) {
-    return (file_path.endsWith(".ts") || file_path.endsWith(".tsx")) && !file_path.endsWith("src/back/collections/collections.ts") && !file_path.endsWith("src/back/routes/routes.ts") && !file_path.endsWith("src/back/routes/urls.ts") && !file_path.endsWith("stimulus.ts") && !file_path.startsWith("src/front");
-  }
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  async dispose() {
-  }
-  async _build() {
-    await Promise.all([
-      generateCollections(),
-      generateRoutes(),
-      generateComponents()
-    ]);
-    const entryPoints = (await glob(
-      `./src/back/**/*.{ts,tsx,${embeddable_file_extensions.join(
-        ","
-      )}}`
-    )).filter((path) => !path.includes(".#"));
-    const { metafile } = await build({
-      entryPoints,
-      sourcemap: true,
-      bundle: false,
-      jsxFactory: "TempstreamJSX.createElement",
-      jsxFragment: "TempstreamJSX.Fragment",
-      outdir: "./dist/back",
-      logLevel: "info",
-      platform: "node",
-      target: "es2022",
-      format: "esm",
-      loader: Object.fromEntries(
-        embeddable_file_extensions.map((ext) => ["." + ext, "js"])
-      ),
-      plugins: [
-        rewrite_asset_imports_plugin(this.project_dir),
-        load_assets_plugin
-      ],
-      metafile: true
-    });
-    await fs.writeFile(
-      relative(this.project_dir, "dist") + "/back.meta.json",
-      JSON.stringify(metafile)
-    );
-  }
-}
-class FrontendTSBuilder extends Builder {
-  constructor(project_dir, style_dirs, controller_dirs) {
-    super(project_dir, style_dirs);
-    this.project_dir = project_dir;
-    this.style_dirs = style_dirs;
-    this.controller_dirs = controller_dirs;
-  }
-  getName() {
-    return "frontend-ts";
-  }
-  ownsFile(file_path) {
-    return file_path.startsWith("src/front") || file_path.endsWith(".stimulus.ts");
-  }
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  async dispose() {
-  }
-  async _build() {
-    await generateStimulusControllers(this.controller_dirs);
-    const { metafile } = await build({
-      entryPoints: ["./src/front/index.ts"],
-      sourcemap: true,
-      outfile: "./public/dist/bundle.js",
-      logLevel: "info",
-      bundle: true,
-      minify: true,
-      metafile: true,
-      treeShaking: true
-    });
-    await fs.writeFile(
-      relative(this.project_dir, "dist") + "/front.meta.json",
-      JSON.stringify(metafile)
-    );
-  }
-}
-export {
-  BackendTSBuilder,
-  Builder,
-  FontsBuilder,
-  FrontendTSBuilder
-};
-//# sourceMappingURL=builder.js.map

package/src/builder.ts

@@ -1,158 +0,0 @@
-import { build } from "esbuild";
-import glob from "tiny-glob";
-import { promises as fs } from "fs";
-import { embeddable_file_extensions } from "./embeddable-file-extensions.js";
-import { load_assets_plugin } from "./esbuild-plugins/load-assets.js";
-import { rewrite_asset_imports_plugin } from "./esbuild-plugins/rewrite-asset-imports.js";
-import { generateCollections } from "./generate-collections.js";
-import { generateComponents } from "./generate-components.js";
-import { generateRoutes } from "./generate-routes.js";
-import { generateStimulusControllers } from "./generate-stimulus.js";
-import { FONTS_CONFIG_PATH, getFonts } from "./get-fonts.js";
-import { relative, resolve } from "node:path";
-
-export abstract class Builder {
-	abstract ownsFile(file_path: string): boolean;
-	abstract getName(): string;
-	abstract _build(): Promise<void>;
-	abstract dispose(): Promise<void>;
-
-	constructor(public project_dir: string, public style_dirs: string[]) {}
-
-	public ongoing_build: Promise<void> | null = null;
-
-	public build(notifier?: (message: string) => void) {
-		if (!this.ongoing_build) {
-			const build = this._build()
-				.catch((err) => {
-					console.error(err);
-				})
-				.then(() => {
-					notifier?.(this.getName());
-					this.ongoing_build = null;
-				});
-			this.ongoing_build = build;
-		}
-		return this.ongoing_build;
-	}
-}
-
-export class FontsBuilder extends Builder {
-	getName(): string {
-		return "fonts";
-	}
-
-	ownsFile(file_path: string) {
-		return file_path == FONTS_CONFIG_PATH;
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	async dispose(): Promise<void> {}
-
-	async _build() {
-		return getFonts();
-	}
-}
-
-export class BackendTSBuilder extends Builder {
-	getName(): string {
-		return "backend-ts";
-	}
-
-	ownsFile(file_path: string) {
-		return (
-			(file_path.endsWith(".ts") || file_path.endsWith(".tsx")) &&
-			!file_path.endsWith("src/back/collections/collections.ts") &&
-			!file_path.endsWith("src/back/routes/routes.ts") &&
-			!file_path.endsWith("src/back/routes/urls.ts") &&
-			!file_path.endsWith("stimulus.ts") &&
-			!file_path.startsWith("src/front")
-		);
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	async dispose(): Promise<void> {}
-
-	async _build(): Promise<void> {
-		await Promise.all([
-			generateCollections(),
-			generateRoutes(),
-			generateComponents(),
-		]);
-		const entryPoints = (
-			await glob(
-				`./src/back/**/*.{ts,tsx,${embeddable_file_extensions.join(
-					","
-				)}}`
-			)
-		).filter((path) => !path.includes(".#"));
-
-		const { metafile } = await build({
-			entryPoints,
-			sourcemap: true,
-			bundle: false,
-			jsxFactory: "TempstreamJSX.createElement",
-			jsxFragment: "TempstreamJSX.Fragment",
-			outdir: "./dist/back",
-			logLevel: "info",
-			platform: "node",
-			target: "es2022",
-			format: "esm",
-			loader: Object.fromEntries(
-				embeddable_file_extensions.map((ext) => ["." + ext, "js"])
-			),
-			plugins: [
-				rewrite_asset_imports_plugin(this.project_dir),
-				load_assets_plugin,
-			],
-			metafile: true,
-		});
-
-		await fs.writeFile(
-			relative(this.project_dir, "dist") + "/" + "back" + ".meta.json",
-			JSON.stringify(metafile)
-		);
-	}
-}
-
-export class FrontendTSBuilder extends Builder {
-	constructor(
-		public project_dir: string,
-		public style_dirs: string[],
-		public controller_dirs: string[]
-	) {
-		super(project_dir, style_dirs);
-	}
-
-	getName(): string {
-		return "frontend-ts";
-	}
-
-	ownsFile(file_path: string) {
-		return (
-			file_path.startsWith("src/front") ||
-			file_path.endsWith(".stimulus.ts")
-		);
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	async dispose(): Promise<void> {}
-
-	async _build(): Promise<void> {
-		await generateStimulusControllers(this.controller_dirs);
-		const { metafile } = await build({
-			entryPoints: ["./src/front/index.ts"],
-			sourcemap: true,
-			outfile: "./public/dist/bundle.js",
-			logLevel: "info",
-			bundle: true,
-			minify: true,
-			metafile: true,
-			treeShaking: true,
-		});
-		await fs.writeFile(
-			relative(this.project_dir, "dist") + "/" + "front" + ".meta.json",
-			JSON.stringify(metafile)
-		);
-	}
-}