gradient-lab 1.0.0

package/package.json

@@ -0,0 +1,41 @@
+{
+  "type": "module",
+
+  "name": "gradient-lab",
+  "description": "",
+  "version": "1.0.0",
+
+  "main": "index.js",
+
+  "bin": {
+    "odor": "server.js"
+  },
+  "scripts": {
+    "start": "./server.js",
+    "save": "git add .; git commit -m 'Updated Release'; npm version patch; npm publish; git push --follow-tags;"
+  },
+
+  "keywords": [
+    "blog",
+    "static-site",
+    "xml",
+    "workflow",
+    "symbolic"
+  ],
+
+  "author": "catpea (https://github.com/catpea)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/catpea/odor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/catpea/odor/issues"
+  },
+  "homepage": "https://catpea.github.io/odor",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/catpea"
+  }
+
+}

package/reactive-framework.js

@@ -0,0 +1,371 @@
+const hasValue = value => value !== null && value !== undefined;
+
+function disposeOne(item) {
+  if (!item) return;
+  if (typeof item === "function") return item();
+  if (typeof item.dispose === "function") return item.dispose();
+  if (typeof item[Symbol.dispose] === "function") return item[Symbol.dispose]();
+}
+
+class Scope {
+  #items = [];
+  #disposed = false;
+
+  get disposed() { return this.#disposed; }
+
+  collect(...items) {
+    const flat = items.flat(Infinity).filter(Boolean);
+    if (this.#disposed) {
+      for (let i = flat.length - 1; i >= 0; i--) disposeOne(flat[i]);
+      return this;
+    }
+    this.#items.push(...flat);
+    return this;
+  }
+
+  defer(fn) {
+    return this.collect(fn);
+  }
+
+  child() {
+    const scope = new Scope();
+    this.collect(scope);
+    return scope;
+  }
+
+  timeout(fn, ms) {
+    const id = setTimeout(fn, ms);
+    this.collect(() => clearTimeout(id));
+    return id;
+  }
+
+  interval(fn, ms) {
+    const id = setInterval(fn, ms);
+    this.collect(() => clearInterval(id));
+    return id;
+  }
+
+  frame(fn) {
+    const id = requestAnimationFrame(fn);
+    this.collect(() => cancelAnimationFrame(id));
+    return id;
+  }
+
+  dispose() {
+    if (this.#disposed) return;
+    this.#disposed = true;
+    const items = this.#items.splice(0);
+    for (let i = items.length - 1; i >= 0; i--) disposeOne(items[i]);
+  }
+}
+
+class Signal {
+  #value;
+  #subscribers = new Set();
+  #equals;
+
+  constructor(value, options = {}) {
+    this.#equals = options.equals ?? Object.is;
+    if (arguments.length > 0) this.#value = value;
+  }
+
+  get value() { return this.#value; }
+  set value(next) { this.set(next); }
+  get hasValue() { return hasValue(this.#value); }
+  get size() { return this.#subscribers.size; }
+
+  set(next, options = {}) {
+    const equals = options.force ? () => false : this.#equals;
+    if (equals(next, this.#value)) return false;
+    const previous = this.#value;
+    this.#value = next;
+    this.notify(previous);
+    return true;
+  }
+
+  update(fn, options = {}) {
+    return this.set(fn(this.#value), options);
+  }
+
+  mutate(fn) {
+    fn(this.#value);
+    this.notify(this.#value);
+    return true;
+  }
+
+  subscribe(fn, options = {}) {
+    this.#subscribers.add(fn);
+    if (options.immediate !== false && this.hasValue) fn(this.#value, undefined);
+    return () => this.#subscribers.delete(fn);
+  }
+
+  once(fn) {
+    const unsubscribe = this.subscribe((value, previous) => {
+      unsubscribe();
+      fn(value, previous);
+    });
+    return unsubscribe;
+  }
+
+  notify(previous = this.#value) {
+    if (!this.hasValue) return;
+    for (const fn of [...this.#subscribers]) fn(this.#value, previous);
+  }
+
+  map(fn) {
+    const mapped = new Signal(this.hasValue ? fn(this.#value) : undefined);
+    this.subscribe(value => mapped.value = fn(value));
+    return mapped;
+  }
+}
+
+class Concern extends Scope {
+  #signals = new Map();
+
+  signal(name, value, options) {
+    if (value instanceof Signal) {
+      this.#signals.set(name, value);
+      return value;
+    }
+
+    let signal = this.#signals.get(name);
+    if (!signal) {
+      signal = arguments.length > 1 ? new Signal(value, options) : new Signal(undefined, options);
+      this.#signals.set(name, signal);
+      return signal;
+    }
+
+    if (arguments.length > 1) signal.value = value;
+    return signal;
+  }
+
+  hasSignal(name) {
+    return this.#signals.has(name);
+  }
+
+  resolve(source) {
+    return source instanceof Signal ? source : this.signal(source);
+  }
+
+  value(source) {
+    return this.resolve(source).value;
+  }
+
+  set(source, value) {
+    this.resolve(source).value = value;
+    return this;
+  }
+
+  update(source, fn) {
+    this.resolve(source).update(fn);
+    return this;
+  }
+
+  subscribe(source, fn, options) {
+    const unsubscribe = this.resolve(source).subscribe(fn, options);
+    this.collect(unsubscribe);
+    return unsubscribe;
+  }
+
+  effect(sources, fn, options = {}) {
+    const input = (Array.isArray(sources) ? sources : [sources]).map(source => this.resolve(source));
+    let cleanup = null;
+    let wiring = true;
+
+    const run = () => {
+      if (wiring) return;
+      const values = input.map(signal => signal.value);
+      if (!options.allowPartial && !values.every(hasValue)) return;
+      disposeOne(cleanup);
+      cleanup = fn(...values);
+    };
+
+    for (const signal of input) this.collect(signal.subscribe(run, { immediate: false }));
+    this.collect(() => disposeOne(cleanup));
+    wiring = false;
+    run();
+    return this;
+  }
+
+  computed(name, sources, fn, options = {}) {
+    const signal = this.signal(name, undefined, options);
+    this.effect(sources, (...values) => { signal.value = fn(...values); }, options);
+    return signal;
+  }
+
+  attribute(name, value) {
+    if (hasValue(value)) this.signal(name).value = value;
+    return this.signal(name);
+  }
+
+  attributes(element, names = element.constructor.observedAttributes ?? []) {
+    for (const name of names) this.signal(name);
+    return this;
+  }
+
+  hydrateAttributes(element, names = element.constructor.observedAttributes ?? []) {
+    for (const name of names) {
+      if (element.hasAttribute(name)) this.attribute(name, element.getAttribute(name));
+    }
+    return this;
+  }
+
+  reflectAttribute(source, element, attributeName = source) {
+    this.subscribe(source, value => {
+      if (value === false || value === null || value === undefined) element.removeAttribute(attributeName);
+      else element.setAttribute(attributeName, value === true ? "" : String(value));
+    });
+    return this;
+  }
+
+  on(target, eventName, handler, options) {
+    target.addEventListener(eventName, handler, options);
+    this.collect(() => target.removeEventListener(eventName, handler, options));
+    return this;
+  }
+
+  delegate(root, eventName, selector, handler, options) {
+    return this.on(root, eventName, event => {
+      const match = event.target.closest?.(selector);
+      if (match && root.contains(match)) handler(event, match);
+    }, options);
+  }
+
+  bindText(source, node, fallback = "") {
+    this.subscribe(source, value => {
+      const next = hasValue(value) ? String(value) : fallback;
+      if (node.textContent !== next) node.textContent = next;
+    });
+    return this;
+  }
+
+  bindHTML(source, node, fallback = "") {
+    this.subscribe(source, value => {
+      const next = hasValue(value) ? String(value) : fallback;
+      if (node.innerHTML !== next) node.innerHTML = next;
+    });
+    return this;
+  }
+
+  bindValue(source, element, eventName = "input") {
+    const signal = this.resolve(source);
+    this.subscribe(signal, value => {
+      const next = hasValue(value) ? String(value) : "";
+      if (element.value !== next) element.value = next;
+    });
+    this.on(element, eventName, () => { signal.value = element.value; });
+    return this;
+  }
+
+  bindChecked(source, element) {
+    const signal = this.resolve(source);
+    this.subscribe(signal, value => { element.checked = Boolean(value); });
+    this.on(element, "change", () => { signal.value = element.checked; });
+    return this;
+  }
+
+  bindClass(source, element, fn) {
+    this.subscribe(source, value => {
+      const next = typeof fn === "function" ? fn(value) : value;
+      element.className = next || "";
+    });
+    return this;
+  }
+
+  bindStyle(source, element, property, fn = value => value) {
+    this.subscribe(source, value => {
+      const next = fn(value);
+      if (next === null || next === undefined || next === false) element.style.removeProperty(property);
+      else element.style.setProperty(property, String(next));
+    });
+    return this;
+  }
+
+  bindAttribute(source, element, attributeName, fn = value => value) {
+    this.subscribe(source, value => {
+      const next = fn(value);
+      if (next === false || next === null || next === undefined) element.removeAttribute(attributeName);
+      else element.setAttribute(attributeName, next === true ? "" : String(next));
+    });
+    return this;
+  }
+
+  render(source, host, fn) {
+    this.subscribe(source, value => {
+      const result = fn(value);
+      if (typeof result === "string") host.innerHTML = result;
+      else if (result instanceof Node) host.replaceChildren(result);
+      else if (Array.isArray(result)) host.replaceChildren(...result);
+    });
+    return this;
+  }
+}
+
+class ReactiveHTMLElement extends HTMLElement {
+  #mounted = false;
+
+  constructor() {
+    super();
+    this.concern = new Concern();
+    this.concern.attributes(this);
+  }
+
+  connectedCallback() {
+    if (this.#mounted) return;
+    this.#mounted = true;
+    this.concern.hydrateAttributes(this);
+    this.mount?.();
+  }
+
+  disconnectedCallback() {
+    this.unmount?.();
+    this.concern.dispose();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (Object.is(oldValue, newValue)) return;
+    this.concern.attribute(name, newValue);
+  }
+
+  signal(name, value, options) { return this.concern.signal(name, value, options); }
+  subscribe(source, fn, options) { return this.concern.subscribe(source, fn, options); }
+  effect(sources, fn, options) { return this.concern.effect(sources, fn, options); }
+  computed(name, sources, fn, options) { return this.concern.computed(name, sources, fn, options); }
+  setSignal(name, value) { this.concern.set(name, value); return this; }
+  updateSignal(name, fn) { this.concern.update(name, fn); return this; }
+
+  $(selector) { return this.querySelector(selector); }
+  $$(selector) { return [...this.querySelectorAll(selector)]; }
+
+  html(content) {
+    this.innerHTML = content;
+    return this;
+  }
+
+  appendTemplate(content) {
+    const template = document.createElement("template");
+    template.innerHTML = content.trim();
+    this.append(template.content.cloneNode(true));
+    return this;
+  }
+
+  on(target, eventName, handler, options) {
+    if (typeof target === "string") return this.concern.on(this, target, eventName, handler);
+    return this.concern.on(target, eventName, handler, options);
+  }
+
+  delegate(eventName, selector, handler, options) {
+    return this.concern.delegate(this, eventName, selector, handler, options);
+  }
+
+  emit(type, detail = {}, options = {}) {
+    return this.dispatchEvent(new CustomEvent(type, {
+      detail,
+      bubbles: options.bubbles ?? true,
+      composed: options.composed ?? true,
+      cancelable: options.cancelable ?? false,
+    }));
+  }
+}
+
+export { Scope, Signal, Concern, ReactiveHTMLElement };

package/server.js

@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+
+import http from "node:http";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { spawn } from "node:child_process";
+
+const START_PORT = 48187;
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const ROOT = __dirname;
+const PUBLIC = path.join(ROOT, "public");
+
+const mime = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".ico": "image/x-icon",
+  ".txt": "text/plain; charset=utf-8",
+};
+
+function openBrowser(url) {
+  const platform = process.platform;
+
+  if (platform === "darwin") {
+    spawn("open", [url], { detached: true, stdio: "ignore" }).unref();
+  } else if (platform === "win32") {
+    spawn("cmd", ["/c", "start", "", url], { detached: true, stdio: "ignore" }).unref();
+  } else {
+    spawn("xdg-open", [url], { detached: true, stdio: "ignore" }).unref();
+  }
+}
+
+function safeJoin(base, requestPath) {
+  const decoded = decodeURIComponent(requestPath);
+  const resolved = path.resolve(base, "." + decoded);
+
+  if (!resolved.startsWith(base)) {
+    return null;
+  }
+
+  return resolved;
+}
+
+async function serveFile(res, filePath) {
+  try {
+    const data = await fs.readFile(filePath);
+    const type = mime[path.extname(filePath).toLowerCase()] ?? "application/octet-stream";
+
+    res.writeHead(200, { "Content-Type": type });
+    res.end(data);
+  } catch {
+    res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+    res.end("404 Not Found");
+  }
+}
+
+function createServer() {
+  return http.createServer(async (req, res) => {
+    const url = new URL(req.url, "http://localhost");
+
+    if (url.pathname === "/") {
+      return serveFile(res, path.join(ROOT, "index.html"));
+    }
+
+    const rootFile = safeJoin(ROOT, url.pathname);
+
+    if (!rootFile) {
+      res.writeHead(403, { "Content-Type": "text/plain; charset=utf-8" });
+      return res.end("403 Forbidden");
+    }
+
+    return serveFile(res, rootFile);
+  });
+}
+
+function listenOnOpenPort(port) {
+  const server = createServer();
+
+  server.once("error", err => {
+    if (err.code === "EADDRINUSE") {
+      listenOnOpenPort(port + 1);
+    } else {
+      throw err;
+    }
+  });
+
+  server.listen(port, () => {
+    const url = `http://localhost:${port}/`;
+    console.log(`Serving ${url}`);
+    console.log(`Root:   ${ROOT}/index.html`);
+    console.log(`Public: ${PUBLIC}/`);
+
+    openBrowser(url);
+  });
+}
+
+listenOnOpenPort(START_PORT);

package/utils.js

@@ -0,0 +1,114 @@
+export const clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value));
+
+export const normalizeAngle = value => {
+  const number = Number(value);
+  if (!Number.isFinite(number)) return 90;
+  return Math.round(((number % 360) + 360) % 360);
+};
+
+export const directionToAngle = direction => {
+  const value = String(direction ?? "90deg").trim();
+  if (value.toLowerCase().endsWith("deg")) return normalizeAngle(value.slice(0, -3));
+  return ({ "to top": 0, "to right": 90, "to bottom": 180, "to left": 270 })[value] ?? 90;
+};
+
+export const uid = prefix => `${prefix}-${Math.random().toString(36).slice(2, 8)}-${Date.now().toString(36)}`;
+
+export const round = (number, places = 0) => Number(number.toFixed(places));
+
+export const hex = value => value.toString(16).padStart(2, "0");
+
+export const rgbToHex = ({ r, g, b }) => `#${hex(r)}${hex(g)}${hex(b)}`;
+
+export const hexToRgb = color => {
+  const clean = color.replace("#", "").trim();
+  const full = clean.length === 3 ? clean.split("").map(ch => ch + ch).join("") : clean;
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16),
+  };
+};
+
+export function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+export function copyLine(line) {
+  return {
+    ...line,
+    start: { ...line.start },
+    end: { ...line.end },
+    stops: line.stops.map(stop => ({ ...stop })),
+  };
+}
+
+export function copyLibraryItem(item) {
+  return {
+    ...item,
+    stops: item.stops.map(stop => ({ ...stop })),
+  };
+}
+
+export function freshStops(count) {
+  const total = clamp(Number(count) || 5, 2, 16);
+  return Array.from({ length: total }, (_, index) => ({
+    id: uid("stop"),
+    pos: total === 1 ? 0 : round((index / (total - 1)) * 100, 1),
+    color: "#000000",
+  }));
+}
+
+export function sortStops(stops) {
+  return stops.sort((a, b) => a.pos - b.pos);
+}
+
+export function gradientCss(stops, direction = "90deg") {
+  const safeStops = sortStops(stops.map(stop => ({ ...stop })));
+  const body = safeStops.map(stop => `${stop.color} ${round(stop.pos, 1)}%`).join(", ");
+  return `linear-gradient(${direction}, ${body})`;
+}
+
+export function cssBlock(line, domain = "gradientlab.local") {
+  const stops = sortStops(line.stops.map(stop => ({ ...stop })));
+  const permalinkStops = stops.map(stop => `${stop.color.replace("#", "")}+${round(stop.pos, 1)}`).join(",");
+  return `/* Permalink - use to edit and share this gradient: https://${domain}/gradient-editor/#${permalinkStops} */
+background: ${gradientCss(stops, line.direction)};`;
+}
+
+export function libraryCss(library, prefix = "gr-") {
+  return library.map((item, index) => {
+    const className = `.${prefix}${index + 1}`.replace("..", ".");
+    return `${className} {
+  background: ${gradientCss(item.stops, item.direction)};
+}`;
+  }).join(`\n\n`);
+}
+
+export function interpolateColor(stops, position) {
+  const sorted = sortStops(stops.map(stop => ({ ...stop })));
+  const pos = clamp(position / 100, 0, 1) * 100;
+  let left = sorted[0];
+  let right = sorted[sorted.length - 1];
+  for (let i = 0; i < sorted.length - 1; i++) {
+    if (pos >= sorted[i].pos && pos <= sorted[i + 1].pos) {
+      left = sorted[i];
+      right = sorted[i + 1];
+      break;
+    }
+  }
+  if (left.id === right.id || left.pos === right.pos) return left.color;
+  const t = clamp((pos - left.pos) / (right.pos - left.pos), 0, 1);
+  const a = hexToRgb(left.color);
+  const b = hexToRgb(right.color);
+  return rgbToHex({
+    r: Math.round(a.r + (b.r - a.r) * t),
+    g: Math.round(a.g + (b.g - a.g) * t),
+    b: Math.round(a.b + (b.b - a.b) * t),
+  });
+}