Deploy tonebox to the hub

.gitattributes

@@ -47,3 +47,7 @@ groundcover/screenshot-1.png filter=lfs diff=lfs merge=lfs -text
 groundcover/screenshot-2.png filter=lfs diff=lfs merge=lfs -text
 groundcover/screenshot-3.png filter=lfs diff=lfs merge=lfs -text
 groundcover/screenshot-4.png filter=lfs diff=lfs merge=lfs -text
+tonebox/icon-512.png filter=lfs diff=lfs merge=lfs -text
+tonebox/og.png filter=lfs diff=lfs merge=lfs -text
+tonebox/samples/lake.jpg filter=lfs diff=lfs merge=lfs -text
+tonebox/samples/market.jpg filter=lfs diff=lfs merge=lfs -text

tonebox/app.js

@@ -0,0 +1,166 @@
+/* Tonebox previewer. Photos and .cube files stay in the browser. © 2026 CyberMax. All rights reserved. */
+(function () {
+  "use strict";
+  var CHECKOUT = "https://buy.polar.sh/polar_cl_MiDtlpQOhXytyuuOkWflnzvDFprMR1WRDE0LQ30bQPr"; // Polar checkout link (revenue/packs/polar/tonebox/polar.json)
+  var MAX_SIDE = 1600;                  // preview resolution; the download uses the full photo up to 6000 px
+  var $ = function (s) { return document.querySelector(s); };
+  var state = { looks: [], luts: {}, custom: null, current: "teal-orange", sample: "market", img: null, intensity: 1, fileName: "photo" };
+  var before = $("#before"), after = $("#after"), stage = $("#stage");
+
+  function toast(msg) { var t = $("#toast"); t.textContent = msg; t.classList.add("show"); clearTimeout(toast.t); toast.t = setTimeout(function () { t.classList.remove("show"); }, 2600); }
+  function warn(msg) { $("#warn").textContent = msg || ""; }
+  function lookById(id) { for (var i = 0; i < state.looks.length; i++) if (state.looks[i].id === id) return state.looks[i]; return null; }
+  function activeLut() { return state.current === "custom" ? state.custom : state.luts[state.current]; }
+  function activeName() { return state.current === "custom" ? (state.custom.title || "Your LUT") : (lookById(state.current) || {}).name; }
+
+  function drawScaled(img, canvas, maxSide) {
+    var s = Math.min(1, maxSide / Math.max(img.naturalWidth || img.width, img.naturalHeight || img.height));
+    canvas.width = Math.max(1, Math.round((img.naturalWidth || img.width) * s));
+    canvas.height = Math.max(1, Math.round((img.naturalHeight || img.height) * s));
+    var ctx = canvas.getContext("2d", { willReadFrequently: true });
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    return ctx;
+  }
+
+  var base = null; // original pixels at preview size
+  function setImage(img) {
+    state.img = img;
+    var ctx = drawScaled(img, before, MAX_SIDE);
+    base = ctx.getImageData(0, 0, before.width, before.height);
+    after.width = before.width; after.height = before.height;
+    render();
+  }
+  var pending = false;
+  function render() {
+    if (!base || pending) return;
+    pending = true;
+    requestAnimationFrame(function () {
+      pending = false;
+      var lut = activeLut();
+      var out = new ImageData(new Uint8ClampedArray(base.data), base.width, base.height);
+      if (lut) ToneboxLUT.applyLut(out.data, lut, state.intensity);
+      after.getContext("2d").putImageData(out, 0, 0);
+      $("#tag-look").textContent = activeName() || "";
+      document.body.setAttribute("data-rendered", state.current + ":" + Math.round(state.intensity * 100));
+    });
+  }
+
+  function loadSample(name) {
+    state.sample = name; state.fileName = name;
+    var img = new Image();
+    img.onload = function () { setImage(img); };
+    img.src = "samples/" + name + ".jpg";
+    document.querySelectorAll("#samples .chip").forEach(function (b) { b.classList.toggle("on", b.getAttribute("data-sample") === name); });
+    document.querySelectorAll("#gallery img").forEach(function (im) { im.src = "gallery/" + name + "/" + im.getAttribute("data-id") + ".jpg"; });
+    document.querySelectorAll("#free-looks img").forEach(function (im) { im.src = "gallery/" + name + "/" + im.getAttribute("data-id") + ".jpg"; });
+  }
+
+  function openPhoto(file) {
+    if (!file || !/^image\//.test(file.type)) { warn("That file is not an image."); return; }
+    var url = URL.createObjectURL(file), img = new Image();
+    img.onload = function () { state.fileName = file.name.replace(/\.[^.]+$/, "") || "photo"; setImage(img); warn(""); document.querySelectorAll("#samples .chip").forEach(function (b) { b.classList.remove("on"); }); };
+    img.onerror = function () { warn("This browser can't open that image format. Try a JPG or PNG."); };
+    img.src = url;
+  }
+  function openCube(file) {
+    var r = new FileReader();
+    r.onload = function () {
+      try {
+        var lut = ToneboxLUT.parseCube(r.result);
+        lut.title = lut.title || file.name.replace(/\.cube$/i, "");
+        state.custom = lut; select("custom");
+        warn(""); toast("Loaded " + lut.title + " (" + lut.n + "-point)");
+      } catch (e) { warn("Couldn't read that LUT: " + e.message); }
+    };
+    r.readAsText(file);
+  }
+
+  function select(id) {
+    state.current = id;
+    document.querySelectorAll("#free-looks .look").forEach(function (b) { b.classList.toggle("on", b.getAttribute("data-id") === id); });
+    render();
+  }
+
+  function save() {
+    if (!state.img) return;
+    var c = document.createElement("canvas"), ctx = drawScaled(state.img, c, 6000);
+    var id = ctx.getImageData(0, 0, c.width, c.height), lut = activeLut();
+    if (lut) ToneboxLUT.applyLut(id.data, lut, state.intensity);
+    ctx.putImageData(id, 0, 0);
+    c.toBlob(function (blob) {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = state.fileName + "-" + (activeName() || "graded").toLowerCase().replace(/[^a-z0-9]+/g, "-") + ".jpg";
+      document.body.appendChild(a); a.click(); a.remove();
+      toast("Saved " + c.width + "×" + c.height + " JPG");
+    }, "image/jpeg", 0.92);
+  }
+
+  function buildUI(meta) {
+    state.looks = meta.looks;
+    var free = $("#free-looks");
+    meta.free.forEach(function (id) {
+      var l = lookById(id), b = document.createElement("button");
+      b.className = "look" + (id === state.current ? " on" : ""); b.setAttribute("data-id", id); b.type = "button";
+      b.innerHTML = '<img alt="" loading="lazy" data-id="' + id + '" src="gallery/market/' + id + '.jpg"><span></span>';
+      b.querySelector("span").textContent = l.name;
+      b.addEventListener("click", function () { select(id); });
+      free.appendChild(b);
+    });
+    var cols = ["All"].concat(meta.looks.map(function (l) { return l.collection; }).filter(function (c, i, a) { return a.indexOf(c) === i; }));
+    var filters = $("#filters");
+    cols.forEach(function (c, i) {
+      var b = document.createElement("button"); b.className = "chip" + (i ? "" : " on"); b.type = "button"; b.textContent = c;
+      b.addEventListener("click", function () {
+        filters.querySelectorAll(".chip").forEach(function (x) { x.classList.toggle("on", x === b); });
+        document.querySelectorAll("#gallery figure").forEach(function (f) { f.hidden = !(c === "All" || f.getAttribute("data-col") === c); });
+      });
+      filters.appendChild(b);
+    });
+    var g = $("#gallery");
+    meta.looks.forEach(function (l) {
+      var f = document.createElement("figure"); f.className = "g-item"; f.setAttribute("data-col", l.collection);
+      f.innerHTML = '<img alt="" loading="lazy" width="480" height="320" data-id="' + l.id + '" src="gallery/market/' + l.id + '.jpg"><figcaption><b></b><small></small></figcaption>';
+      f.querySelector("img").alt = l.name + " LUT preview";
+      f.querySelector("b").textContent = (l.free ? "🔓 " : "") + l.name;
+      f.querySelector("small").textContent = l.collection + " · " + l.desc;
+      if (l.free) { f.style.cursor = "pointer"; f.addEventListener("click", function () { select(l.id); window.scrollTo({ top: 0, behavior: "smooth" }); }); }
+      g.appendChild(f);
+    });
+  }
+
+  function wire() {
+    $("#samples").addEventListener("click", function (e) { var s = e.target.getAttribute("data-sample"); if (s) loadSample(s); });
+    $("#photo").addEventListener("change", function (e) { openPhoto(e.target.files[0]); e.target.value = ""; });
+    $("#cube").addEventListener("change", function (e) { if (e.target.files[0]) openCube(e.target.files[0]); e.target.value = ""; });
+    $("#intensity").addEventListener("input", function (e) { state.intensity = e.target.value / 100; $("#int-val").textContent = e.target.value + "%"; render(); });
+    $("#split").addEventListener("input", function (e) {
+      var v = e.target.value;
+      $("#before-clip").style.clipPath = "inset(0 " + (100 - v) + "% 0 0)";
+      $("#handle").style.left = v + "%";
+    });
+    $("#btn-save").addEventListener("click", save);
+    ["dragenter", "dragover"].forEach(function (ev) { stage.addEventListener(ev, function (e) { e.preventDefault(); stage.classList.add("drag"); }); });
+    ["dragleave", "drop"].forEach(function (ev) { stage.addEventListener(ev, function (e) { e.preventDefault(); stage.classList.remove("drag"); }); });
+    stage.addEventListener("drop", function (e) {
+      var f = e.dataTransfer.files[0]; if (!f) return;
+      if (/\.cube$/i.test(f.name)) openCube(f); else openPhoto(f);
+    });
+    var buy = $("#buy");
+    if (/^https:\/\//.test(CHECKOUT)) { buy.href = CHECKOUT; $("#top-buy").href = "#pack"; }
+    else { buy.textContent = "Coming soon"; buy.removeAttribute("href"); buy.classList.add("ghost"); }
+  }
+
+  if (/[?&]thanks=1/.test(location.search)) setTimeout(function () { toast("Thanks for your order! Your download link is in the Polar receipt email."); }, 800);
+  window.toneboxApp = { state: state, select: select, openCube: openCube, save: save };
+  wire();
+  Promise.all([
+    fetch("luts/looks.json").then(function (r) { return r.json(); }),
+    fetch("luts/preview.bin").then(function (r) { return r.arrayBuffer(); }),
+  ]).then(function (res) {
+    var meta = res[0], luts = ToneboxLUT.parsePreviewBin(res[1]);
+    meta.free.forEach(function (id, i) { state.luts[id] = luts[i]; });
+    buildUI(meta);
+    loadSample("market");
+  }).catch(function (e) { warn("Couldn't load the looks: " + e.message); });
+})();