gradient-lab 1.0.0

package/components/image-sampling-stage.js

@@ -0,0 +1,316 @@
+import { GradientElement } from "gradient-element";
+import { clamp, uid, round, rgbToHex, sortStops, freshStops } from "utils";
+
+class ImageSamplingStage extends GradientElement {
+  constructor() {
+    super();
+    this.drag = null;
+    this.previewLine = null;
+    this.size = { w: 1, h: 1 };
+  }
+
+  mount() {
+    this.innerHTML = `
+      <div class="stage-frame">
+        <div class="drop-hint">
+          <div>
+            <div class="display-icon mb-3"><i class="bi bi-cloud-arrow-up"></i></div>
+            <h2 class="h5 mb-2">Drop an image here</h2>
+            <p class="text-lux-muted mb-3">Try a blade of grass, a sunset, brushed metal, a car finish, or any photograph with a natural color transition.</p>
+            <button class="btn btn-soft rounded-pill px-3 choose-image" type="button">Choose image</button>
+          </div>
+        </div>
+        <div class="canvas-wrap">
+          <canvas class="image-canvas"></canvas>
+          <svg class="overlay-svg" xmlns="http://www.w3.org/2000/svg" aria-label="Gradient sampling overlay"></svg>
+        </div>
+      </div>
+    `;
+
+    this.refs = {
+      frame: this.querySelector(".stage-frame"),
+      hint: this.querySelector(".drop-hint"),
+      choose: this.querySelector(".choose-image"),
+      wrap: this.querySelector(".canvas-wrap"),
+      canvas: this.querySelector(".image-canvas"),
+      overlay: this.querySelector(".overlay-svg"),
+    };
+
+    this.concern.on(this.refs.choose, "click", () => this.app.openFileDialog());
+    this.concern.on(this.refs.frame, "dragover", event => {
+      event.preventDefault();
+      this.refs.frame.classList.add("border-warning");
+    });
+    this.concern.on(this.refs.frame, "dragleave", () => this.refs.frame.classList.remove("border-warning"));
+    this.concern.on(this.refs.frame, "drop", event => {
+      event.preventDefault();
+      this.refs.frame.classList.remove("border-warning");
+      const [file] = event.dataTransfer?.files ?? [];
+      if (file && file.type.startsWith("image/")) this.app.loadFile(file);
+    });
+
+    this.concern.on(this.refs.overlay, "pointerdown", event => this.onPointerDown(event));
+    this.concern.on(this.refs.overlay, "pointermove", event => this.onPointerMove(event));
+    this.concern.on(this.refs.overlay, "pointerup", event => this.onPointerUp(event));
+    this.concern.on(this.refs.overlay, "pointercancel", event => this.onPointerUp(event));
+    this.concern.on(window, "resize", () => this.render(this.state));
+    this.watchState(state => this.render(state));
+  }
+
+  render(state) {
+    this.refs.hint.classList.toggle("hidden", Boolean(state.image));
+    this.drawImageToCanvas(state);
+    this.renderOverlay(state);
+  }
+
+  drawImageToCanvas(state) {
+    const { image } = state;
+    const { frame, canvas, wrap, overlay } = this.refs;
+    if (!image) {
+      canvas.width = 1;
+      canvas.height = 1;
+      canvas.style.width = "1px";
+      canvas.style.height = "1px";
+      overlay.style.width = "1px";
+      overlay.style.height = "1px";
+      wrap.style.width = "1px";
+      wrap.style.height = "1px";
+      overlay.setAttribute("viewBox", "0 0 1 1");
+      this.size = { w: 1, h: 1 };
+      return;
+    }
+
+    const frameWidth = Math.max(280, frame.clientWidth - 28);
+    const maxHeight = Math.min(620, Math.max(360, Math.round(window.innerHeight * .62)));
+    const aspect = image.naturalWidth / image.naturalHeight;
+    let width = Math.min(frameWidth, image.naturalWidth || frameWidth);
+    let height = width / aspect;
+
+    if (height > maxHeight) {
+      height = maxHeight;
+      width = height * aspect;
+    }
+
+    width = Math.max(240, Math.round(width));
+    height = Math.max(180, Math.round(height));
+
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      overlay.style.width = `${width}px`;
+      overlay.style.height = `${height}px`;
+      wrap.style.width = `${width}px`;
+      wrap.style.height = `${height}px`;
+      overlay.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    }
+
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    ctx.clearRect(0, 0, width, height);
+    ctx.drawImage(image, 0, 0, width, height);
+    this.size = { w: width, h: height };
+  }
+
+  renderOverlay(state) {
+    const defs = [];
+    const layers = [];
+    for (const line of state.lines) {
+      const start = this.toView(line.start);
+      const end = this.toView(line.end);
+      const selected = line.id === state.selectedLineId;
+      const gradientId = `stroke-${line.id}`;
+      defs.push(`
+        <linearGradient id="${gradientId}" gradientUnits="userSpaceOnUse" x1="${start.x}" y1="${start.y}" x2="${end.x}" y2="${end.y}">
+          ${sortStops(line.stops.map(stop => ({ ...stop }))).map(stop => `<stop offset="${stop.pos}%" stop-color="${stop.color}"></stop>`).join("")}
+        </linearGradient>
+      `);
+      layers.push(`
+        <g>
+          <line data-role="line" data-line-id="${line.id}" x1="${start.x}" y1="${start.y}" x2="${end.x}" y2="${end.y}" stroke="transparent" stroke-width="28" stroke-linecap="round"></line>
+          <line x1="${start.x}" y1="${start.y}" x2="${end.x}" y2="${end.y}" stroke="rgba(0,0,0,.58)" stroke-width="10" stroke-linecap="round" pointer-events="none"></line>
+          <line x1="${start.x}" y1="${start.y}" x2="${end.x}" y2="${end.y}" stroke="url(#${gradientId})" stroke-width="6" stroke-linecap="round" pointer-events="none"></line>
+          ${line.stops.map((stop, index) => {
+            const point = this.stopToView(line, stop.pos);
+            if (index === 0 || index === line.stops.length - 1) return "";
+            const stopSelected = selected && state.selectedStopId === stop.id;
+            return `<circle data-role="sample" data-line-id="${line.id}" data-stop-id="${stop.id}" cx="${point.x}" cy="${point.y}" r="${stopSelected ? 7 : 5}" fill="${stop.color}" stroke="${stopSelected ? "#ffc774" : "rgba(255,255,255,.88)"}" stroke-width="${stopSelected ? 3 : 1.5}"></circle>`;
+          }).join("")}
+          ${this.endpointCircle(line, "start", start, selected && state.selectedEndpoint === "start")}
+          ${this.endpointCircle(line, "end", end, selected && state.selectedEndpoint === "end")}
+        </g>
+      `);
+    }
+
+    if (this.previewLine) {
+      const start = this.toView(this.previewLine.start);
+      const end = this.toView(this.previewLine.end);
+      layers.push(`<line x1="${start.x}" y1="${start.y}" x2="${end.x}" y2="${end.y}" stroke="#ffc774" stroke-width="4" stroke-dasharray="8 8" stroke-linecap="round"></line>`);
+    }
+
+    this.refs.overlay.innerHTML = `
+      <defs>${defs.join("")}</defs>
+      <rect width="${this.size.w}" height="${this.size.h}" fill="transparent"></rect>
+      ${layers.join("")}
+    `;
+  }
+
+  endpointCircle(line, endpoint, point, selected) {
+    const color = endpoint === "start" ? line.stops[0]?.color : line.stops.at(-1)?.color;
+    return `
+      <circle data-role="endpoint" data-line-id="${line.id}" data-endpoint="${endpoint}" cx="${point.x}" cy="${point.y}" r="${selected ? 13 : 10}" fill="${selected ? "#ffc774" : color}" stroke="${selected ? "#ffffff" : "rgba(255,255,255,.9)"}" stroke-width="3"></circle>
+      <circle cx="${point.x}" cy="${point.y}" r="3" fill="rgba(0,0,0,.72)" pointer-events="none"></circle>
+    `;
+  }
+
+  onPointerDown(event) {
+    if (!this.state.image) {
+      this.app.openFileDialog();
+      return;
+    }
+
+    const target = event.target;
+    const role = target.dataset?.role;
+    const point = this.eventToNorm(event);
+
+    if (role === "endpoint") {
+      this.drag = { type: "endpoint", lineId: target.dataset.lineId, endpoint: target.dataset.endpoint, pointerId: event.pointerId };
+      this.refs.overlay.setPointerCapture(event.pointerId);
+      this.app.selectLine(target.dataset.lineId, target.dataset.endpoint, null);
+      return;
+    }
+
+    if (role === "sample") {
+      this.drag = { type: "sample", lineId: target.dataset.lineId, stopId: target.dataset.stopId, pointerId: event.pointerId };
+      this.refs.overlay.setPointerCapture(event.pointerId);
+      this.app.selectLine(target.dataset.lineId, null, target.dataset.stopId);
+      return;
+    }
+
+    if (role === "line") {
+      this.app.selectLine(target.dataset.lineId, null, null);
+      return;
+    }
+
+    this.drag = { type: "draw", start: point, current: point, pointerId: event.pointerId };
+    this.previewLine = { start: point, end: point };
+    this.refs.overlay.setPointerCapture(event.pointerId);
+    this.renderOverlay(this.state);
+  }
+
+  onPointerMove(event) {
+    if (!this.drag) return;
+    const point = this.eventToNorm(event);
+
+    if (this.drag.type === "draw") {
+      this.drag.current = point;
+      this.previewLine = { start: this.drag.start, end: point };
+      this.renderOverlay(this.state);
+      return;
+    }
+
+    if (this.drag.type === "endpoint") {
+      this.commit(draft => {
+        const line = draft.lines.find(item => item.id === this.drag.lineId);
+        if (!line) return;
+        line[this.drag.endpoint] = point;
+        this.resampleLine(line);
+      });
+      return;
+    }
+
+    if (this.drag.type === "sample") {
+      this.commit(draft => {
+        const line = draft.lines.find(item => item.id === this.drag.lineId);
+        const stop = line?.stops.find(item => item.id === this.drag.stopId);
+        if (!line || !stop) return;
+        stop.pos = this.projectPointToLinePercent(point, line);
+        sortStops(line.stops);
+        draft.selectedStopId = stop.id;
+        this.resampleLine(line);
+      });
+    }
+  }
+
+  onPointerUp(event) {
+    if (!this.drag) return;
+    if (this.drag.type === "draw") {
+      const start = this.drag.start;
+      const end = this.drag.current ?? this.eventToNorm(event);
+      const dx = (end.x - start.x) * this.size.w;
+      const dy = (end.y - start.y) * this.size.h;
+      const distance = Math.hypot(dx, dy);
+      if (distance > 12) {
+        this.commit(draft => {
+          const line = {
+            id: uid("line"),
+            name: `Gradient ${draft.lines.length + 1}`,
+            direction: draft.direction,
+            start,
+            end,
+            stops: freshStops(draft.sampleCount),
+          };
+          this.resampleLine(line);
+          draft.lines.push(line);
+          draft.selectedLineId = line.id;
+          draft.selectedEndpoint = "end";
+          draft.selectedStopId = line.stops.at(-1)?.id ?? null;
+        });
+      }
+    }
+    this.previewLine = null;
+    this.drag = null;
+    try { this.refs.overlay.releasePointerCapture(event.pointerId); } catch {}
+    this.renderOverlay(this.state);
+  }
+
+  eventToNorm(event) {
+    const rect = this.refs.overlay.getBoundingClientRect();
+    return {
+      x: clamp((event.clientX - rect.left) / rect.width, 0, 1),
+      y: clamp((event.clientY - rect.top) / rect.height, 0, 1),
+    };
+  }
+
+  toView(point) {
+    return { x: point.x * this.size.w, y: point.y * this.size.h };
+  }
+
+  stopToView(line, percent) {
+    const t = percent / 100;
+    return {
+      x: (line.start.x + (line.end.x - line.start.x) * t) * this.size.w,
+      y: (line.start.y + (line.end.y - line.start.y) * t) * this.size.h,
+    };
+  }
+
+  projectPointToLinePercent(point, line) {
+    const p = this.toView(point);
+    const a = this.toView(line.start);
+    const b = this.toView(line.end);
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const lengthSq = dx * dx + dy * dy || 1;
+    const t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / lengthSq;
+    return round(clamp(t, 0, 1) * 100, 1);
+  }
+
+  resampleLine(line) {
+    for (const stop of line.stops) {
+      const point = this.stopToView(line, stop.pos);
+      stop.color = this.sampleCanvas(point.x, point.y);
+    }
+  }
+
+  sampleCanvas(x, y) {
+    const { canvas } = this.refs;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    const px = Math.round(clamp(x, 0, canvas.width - 1));
+    const py = Math.round(clamp(y, 0, canvas.height - 1));
+    const [r, g, b] = ctx.getImageData(px, py, 1, 1).data;
+    return rgbToHex({ r, g, b });
+  }
+}
+
+customElements.define("image-sampling-stage", ImageSamplingStage);
+export { ImageSamplingStage };

package/components/library-code.js

@@ -0,0 +1,24 @@
+import { GradientElement } from "gradient-element";
+import { libraryCss } from "utils";
+
+class LibraryCode extends GradientElement {
+  mount() {
+    this.innerHTML = `
+      <div class="collapse" id="libraryCodeCollapse">
+        <textarea class="form-control codebox library-css" readonly></textarea>
+      </div>
+      <button class="btn btn-soft btn-sm rounded-pill" type="button" data-bs-toggle="collapse" data-bs-target="#libraryCodeCollapse" aria-expanded="false" aria-controls="libraryCodeCollapse">
+        <i class="bi bi-code-square me-1"></i> Show library code
+      </button>
+    `;
+    this.refs = { textarea: this.querySelector(".library-css") };
+    this.watchState(state => this.render(state));
+  }
+
+  render(state) {
+    this.refs.textarea.value = libraryCss(state.library, state.prefix) || "/* Add gradients to generate .gr-1, .gr-2, .gr-3... classes. */";
+  }
+}
+
+customElements.define("library-code", LibraryCode);
+export { LibraryCode };

package/components/library-controls.js

@@ -0,0 +1,45 @@
+import { GradientElement } from "gradient-element";
+import { libraryCss } from "utils";
+
+class LibraryControls extends GradientElement {
+  mount() {
+    this.innerHTML = `
+      <div class="row g-3 align-items-end mb-3">
+        <div class="col-md-3">
+          <label class="form-label">Class prefix</label>
+          <input class="form-control prefix-input" value="gr-" spellcheck="false">
+        </div>
+        <div class="col-md-5">
+          <label class="form-label">Permalink domain</label>
+          <input class="form-control domain-input" spellcheck="false">
+        </div>
+        <div class="col-md-auto">
+          <button class="btn btn-lux rounded-pill copy-library" type="button">
+            <i class="bi bi-clipboard me-1"></i> Copy library CSS
+          </button>
+        </div>
+      </div>
+    `;
+    this.refs = {
+      prefix: this.querySelector(".prefix-input"),
+      domain: this.querySelector(".domain-input"),
+      copy: this.querySelector(".copy-library"),
+    };
+    this.concern.on(this.refs.prefix, "input", event => this.commit(draft => { draft.prefix = event.target.value || "gr-"; }));
+    this.concern.on(this.refs.domain, "input", event => this.commit(draft => { draft.domain = event.target.value || "gradientlab.local"; }));
+    this.concern.on(this.refs.copy, "click", () => {
+      const css = libraryCss(this.state.library, this.state.prefix);
+      if (!css) return this.app.toast("Library is empty.");
+      this.app.copyText(css, "Copied library CSS.");
+    });
+    this.watchState(state => this.render(state));
+  }
+
+  render(state) {
+    this.refs.prefix.value = state.prefix;
+    this.refs.domain.value = state.domain;
+  }
+}
+
+customElements.define("library-controls", LibraryControls);
+export { LibraryControls };

package/components/lux-card.js

@@ -0,0 +1,31 @@
+import { GradientElement } from "gradient-element";
+import { escapeHtml } from "utils";
+
+class LuxCard extends GradientElement {
+  static observedAttributes = ["title", "icon", "subtitle"];
+
+  mount() {
+    const children = [...this.childNodes];
+    const title = this.getAttribute("title") ?? "Card";
+    const icon = this.getAttribute("icon") ?? "bi-stars";
+    const subtitle = this.getAttribute("subtitle") ?? "";
+    this.innerHTML = `
+      <div class="card lux-card h-100">
+        <div class="card-header d-flex align-items-start justify-content-between gap-3 px-4 py-3">
+          <div>
+            <div class="d-flex align-items-center gap-2 fw-semibold">
+              <i class="bi ${icon} text-lux-gold"></i>
+              <span>${escapeHtml(title)}</span>
+            </div>
+            ${subtitle ? `<div class="small text-lux-muted mt-1">${escapeHtml(subtitle)}</div>` : ""}
+          </div>
+        </div>
+        <div class="card-body p-4"></div>
+      </div>
+    `;
+    this.querySelector(".card-body").append(...children);
+  }
+}
+
+customElements.define("lux-card", LuxCard);
+export { LuxCard };

package/components/sampled-gradient-list.js

@@ -0,0 +1,63 @@
+import { GradientElement } from "gradient-element";
+import { escapeHtml, gradientCss, cssBlock } from "utils";
+
+class SampledGradientList extends GradientElement {
+  mount() {
+    this.innerHTML = `
+      <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
+        <h3 class="h6 mb-0"><i class="bi bi-layers me-1 text-lux-cyan"></i> Sampled gradients</h3>
+        <span class="small text-lux-muted">Each drawn line creates one editable gradient.</span>
+      </div>
+      <div class="gradient-stack"></div>
+    `;
+    this.refs = { stack: this.querySelector(".gradient-stack") };
+    this.concern.on(this, "click", event => this.onClick(event));
+    this.watchState(state => this.render(state));
+  }
+
+  render(state) {
+    if (!state.lines.length) {
+      this.refs.stack.innerHTML = `<div class="empty-state"><i class="bi bi-pencil me-1"></i> Upload an image, then drag across it to create the first sampled gradient line.</div>`;
+      return;
+    }
+    this.refs.stack.innerHTML = state.lines.map((line, index) => {
+      const css = gradientCss(line.stops, line.direction);
+      const selected = line.id === state.selectedLineId;
+      return `
+        <article class="gradient-chip ${selected ? "selected" : ""}" data-line-id="${line.id}">
+          <div class="p-3">
+            <div class="preview mb-2" style="background: ${css}"></div>
+            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+              <button class="btn btn-link p-0 text-decoration-none text-start ${selected ? "text-lux-gold" : "text-light"}" type="button" data-action="select-line" data-line-id="${line.id}">
+                <strong>${escapeHtml(line.name ?? `Gradient ${index + 1}`)}</strong>
+                <span class="small text-lux-muted ms-2">${line.stops.length} stops · ${line.direction}</span>
+              </button>
+              <div class="d-flex gap-2">
+                <button class="btn btn-soft btn-sm rounded-pill" type="button" data-action="copy-line" data-line-id="${line.id}"><i class="bi bi-clipboard"></i></button>
+                <button class="btn btn-soft btn-sm rounded-pill" type="button" data-action="add-line" data-line-id="${line.id}"><i class="bi bi-plus-lg"></i></button>
+                <button class="btn btn-soft btn-sm rounded-pill" type="button" data-action="delete-line" data-line-id="${line.id}"><i class="bi bi-trash3"></i></button>
+              </div>
+            </div>
+          </div>
+        </article>
+      `;
+    }).join("");
+  }
+
+  onClick(event) {
+    const button = event.target.closest("[data-action]");
+    if (!button) return;
+    const action = button.dataset.action;
+    const lineId = button.dataset.lineId;
+    if (action === "select-line") this.app.selectLine(lineId, null, null);
+    if (action === "copy-line") {
+      const line = this.state.lines.find(item => item.id === lineId);
+      if (line) this.app.copyText(cssBlock(line, this.state.domain), "Copied gradient CSS.");
+    }
+    if (action === "add-line") this.app.addLineToLibrary(lineId);
+    if (action === "delete-line") this.app.deleteLine(lineId);
+  }
+}
+
+customElements.define("sampled-gradient-list", SampledGradientList);
+export { SampledGradientList };

package/components/sampler-toolbar.js

@@ -0,0 +1,100 @@
+import { GradientElement } from "gradient-element";
+import { normalizeAngle, directionToAngle, freshStops } from "utils";
+
+class SamplerToolbar extends GradientElement {
+  mount() {
+    this.innerHTML = `
+      <div class="row g-3 align-items-end mb-3">
+        <div class="col-md-auto">
+          <label class="btn btn-lux rounded-pill px-3 mb-0">
+            <i class="bi bi-image me-1"></i>
+            Upload image
+            <input class="visually-hidden file-input" type="file" accept="image/*">
+          </label>
+        </div>
+        <div class="col-md">
+          <label class="form-label d-flex justify-content-between mb-1">
+            <span>Sample resolution</span>
+            <strong class="sample-count-label text-lux-gold">5 stops</strong>
+          </label>
+          <input class="form-range sample-count" type="range" min="2" max="16" step="1" value="5">
+        </div>
+        <div class="col-md-4 col-lg-3">
+          <label class="form-label mb-1">Gradient angle</label>
+          <div class="input-group input-group-sm mb-2">
+            <input class="form-control angle-input" type="number" min="0" max="359" step="1" value="90">
+            <span class="input-group-text">deg</span>
+          </div>
+          <input class="form-range angle-range" type="range" min="0" max="359" step="1" value="90">
+        </div>
+        <div class="col-md-auto">
+          <button class="btn btn-soft rounded-pill clear-lines" type="button">
+            <i class="bi bi-trash3 me-1"></i> Clear lines
+          </button>
+        </div>
+      </div>
+    `;
+
+    this.refs = {
+      file: this.querySelector(".file-input"),
+      sample: this.querySelector(".sample-count"),
+      sampleLabel: this.querySelector(".sample-count-label"),
+      angleInput: this.querySelector(".angle-input"),
+      angleRange: this.querySelector(".angle-range"),
+      clear: this.querySelector(".clear-lines"),
+    };
+
+    this.concern.on(this.refs.file, "change", event => {
+      const [file] = event.target.files ?? [];
+      if (file) this.app.loadFile(file);
+    });
+
+    this.concern.on(this.refs.sample, "input", event => {
+      const value = Number(event.target.value);
+      this.commit(draft => {
+        draft.sampleCount = value;
+        const selected = this.app.selectedLine(draft);
+        if (!selected) return;
+        selected.stops = freshStops(value);
+        draft.selectedStopId = selected.stops[0]?.id ?? null;
+        this.app.resampleLine(selected);
+      });
+    });
+
+    const setGradientAngle = event => {
+      const angle = normalizeAngle(event.target.value);
+      this.commit(draft => {
+        draft.direction = `${angle}deg`;
+        const selected = this.app.selectedLine(draft);
+        if (selected) selected.direction = draft.direction;
+      });
+    };
+
+    this.concern.on(this.refs.angleInput, "input", setGradientAngle);
+    this.concern.on(this.refs.angleRange, "input", setGradientAngle);
+
+    this.concern.on(this.refs.clear, "click", () => {
+      this.commit(draft => {
+        draft.lines = [];
+        draft.selectedLineId = null;
+        draft.selectedEndpoint = null;
+        draft.selectedStopId = null;
+      });
+    });
+
+    this.watchState(state => this.render(state));
+  }
+
+  openFileDialog() { this.refs.file.click(); }
+
+  render(state) {
+    const angle = directionToAngle(state.direction);
+    this.refs.sample.value = state.sampleCount;
+    this.refs.sampleLabel.textContent = `${state.sampleCount} stop${state.sampleCount === 1 ? "" : "s"}`;
+    this.refs.angleInput.value = angle;
+    this.refs.angleRange.value = angle;
+  }
+}
+
+customElements.define("sampler-toolbar", SamplerToolbar);
+export { SamplerToolbar };

package/components/toast-zone.js

@@ -0,0 +1,19 @@
+import { GradientElement } from "gradient-element";
+
+class ToastZone extends GradientElement {
+  mount() {
+    this.innerHTML = `<div class="toast-lite"><i class="bi bi-check2-circle me-2 text-lux-gold"></i><span></span></div>`;
+    this.refs = { toast: this.querySelector(".toast-lite"), message: this.querySelector("span") };
+    this.timer = null;
+  }
+
+  show(message) {
+    this.refs.message.textContent = message;
+    this.refs.toast.classList.add("show");
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => this.refs.toast.classList.remove("show"), 1800);
+  }
+}
+
+customElements.define("toast-zone", ToastZone);
+export { ToastZone };

package/index.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<!--
+  Image Line Gradient Sampler
+  The visible body is intentionally a readable application tree of web components.
+  Every custom element extends ReactiveHTMLElement via GradientElement.
+-->
+<html lang="en" data-bs-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Image Line Gradient Sampler</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
+  <link rel="stylesheet" href="./app.css">
+
+  <script type="importmap">
+  {
+    "imports": {
+      "reactive-framework": "./reactive-framework.js",
+      "utils": "./utils.js",
+      "gradient-element": "./components/gradient-element.js"
+    }
+  }
+  </script>
+</head>
+<body>
+  <gradient-lab-app>
+    <app-shell>
+      <app-hero></app-hero>
+
+      <gradient-workbench>
+        <lux-card title="Image sampler" icon="bi-bounding-box-circles" subtitle="Draw on the image. Drag endpoint handles or tiny sample dots to reposition the sampling path.">
+          <sampler-toolbar></sampler-toolbar>
+          <image-sampling-stage></image-sampling-stage>
+          <sampled-gradient-list></sampled-gradient-list>
+        </lux-card>
+
+        <lux-card title="Gradient editor" icon="bi-sliders2" subtitle="Adjust stops, angles, and colors before adding the gradient to the class library.">
+          <gradient-editor></gradient-editor>
+        </lux-card>
+      </gradient-workbench>
+
+      <lux-card title="Gradient library" icon="bi-collection" subtitle="Curate chosen gradients into copyable class names.">
+        <library-controls></library-controls>
+        <gradient-library></gradient-library>
+        <library-code></library-code>
+      </lux-card>
+
+      <toast-zone></toast-zone>
+    </app-shell>
+  </gradient-lab-app>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+  <script type="module" src="./app.js"></script>
+</body>
+</html>