tweakit 0.6.0 → 0.7.0

package/src/tweaks/icons.ts

@@ -6,14 +6,21 @@
 // bright hotspot: each icon is one path. Copy and presets keep separate parts so the hover can
 // move them (tweaks.css), drawn to abut rather than overlap.
 import { icon } from "./shared.js";
-const ICON_COPY = icon('<path class="tw-copy-back" d="m5.5 16.5-.7-.2q-1.5-.6-2.1-2.1-.2-.7-.2-2.7v-2c0-3.3 0-5 1-6s2.7-1 6-1h2c1.4 0 2 0 2.7.2q1.6.5 2.1 2.1l.2.7"/><path class="tw-copy-front" d="M7.5 14.5c0-3.3 0-5 1-6s2.7-1 6-1 5 0 6 1 1 2.7 1 6 0 5-1 6-2.7 1-6 1-5 0-6-1-1-2.7-1-6"/>', "tw-toolbar-btn__copy");
-const ICON_CHECK = icon('<path d="m5 14 3.5 3.5L19 6.5"/>', "tw-toolbar-btn__check", 2.4);
+const ICON_COPY = icon(
+  '<path class="twk-copy-back" d="m5.5 16.5-.7-.2q-1.5-.6-2.1-2.1-.2-.7-.2-2.7v-2c0-3.3 0-5 1-6s2.7-1 6-1h2c1.4 0 2 0 2.7.2q1.6.5 2.1 2.1l.2.7"/><path class="twk-copy-front" d="M7.5 14.5c0-3.3 0-5 1-6s2.7-1 6-1 5 0 6 1 1 2.7 1 6 0 5-1 6-2.7 1-6 1-5 0-6-1-1-2.7-1-6"/>',
+  "twk-toolbar-btn__copy",
+);
+const ICON_CHECK = icon('<path d="m5 14 3.5 3.5L19 6.5"/>', "twk-toolbar-btn__check", 2.4);
 // Reset is Hugeicons' undo, a near-full circle, so the spin on click reads as a turn about the center.
 const ICON_RESET = icon('<path d="M3 12a9 9 0 1 0 9-9 9 9 0 0 0-7.6 4.2M3.3 3l.2 2q0 2.2.6 2.7t2.7.2l2-.2"/>');
 const chevronIcon = (cls: string) => icon('<path d="M18 9s-4.4 6-6 6-6-6-6-6"/>', cls, 2.5);
-const ICON_CHEVRON = chevronIcon("tw-chevron");
-const ICON_PRESETS = icon('<path d="M20.2 13.5q1.8.8 1.8 1.5 0 .8-2.7 2l-5 2.2Q13 20 12 20q-.7 0-2.4-.8l-4.9-2.3Q2 16 2 15t1.8-1.5"/><path class="tw-layer-top" d="M9.6 4.8Q11.3 4 12 4t2.4.8l4.9 2.3Q22 8 22 9c0 .7-.9 1.1-2.7 2l-5 2.2Q13 14 12 14q-.7 0-2.4-.8l-4.9-2.3Q2 10 2 9c0-.7.9-1.1 2.7-2z"/>');
+const ICON_CHEVRON = chevronIcon("twk-chevron");
+const ICON_PRESETS = icon(
+  '<path d="M20.2 13.5q1.8.8 1.8 1.5 0 .8-2.7 2l-5 2.2Q13 20 12 20q-.7 0-2.4-.8l-4.9-2.3Q2 16 2 15t1.8-1.5"/><path class="twk-layer-top" d="M9.6 4.8Q11.3 4 12 4t2.4.8l4.9 2.3Q22 8 22 9c0 .7-.9 1.1-2.7 2l-5 2.2Q13 14 12 14q-.7 0-2.4-.8l-4.9-2.3Q2 10 2 9c0-.7.9-1.1 2.7-2z"/>',
+);
 const ICON_X = icon('<path d="M18 6 6 18m12 0L6 6"/>', "", 2.2);
-const ICON_INFO = icon('<circle cx="12" cy="12" r="10"/><path d="M12 16v-4m-.25-3.75a.25.25 0 0 0 .5 0 .25.25 0 0 0-.5 0"/>');
+const ICON_INFO = icon(
+  '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4m-.25-3.75a.25.25 0 0 0 .5 0 .25.25 0 0 0-.5 0"/>',
+);
 
 export { ICON_COPY, ICON_CHECK, ICON_RESET, ICON_CHEVRON, ICON_PRESETS, ICON_X, ICON_INFO, chevronIcon };

package/src/tweaks/image-store.ts

@@ -6,34 +6,75 @@
 const REF = "tw-image:";
 type Store = IDBObjectStore;
 let db: Promise<IDBDatabase | null> | null = null;
-// An open that never settles (another tab's pending delete or upgrade) reads as unavailable after 3s rather than holding
-// panel.ready forever. The connection closes for another tab's upgrade or delete, and one the browser drops is reopened.
-const open = () => db ||= new Promise<IDBDatabase | null>((done) => {
-  let late = false;
-  const t = setTimeout(() => { late = true; db = null; done(null); }, 3000);
-  try {
-    const r = indexedDB.open("tweakit", 1);
-    r.onupgradeneeded = () => r.result.createObjectStore("images");
-    r.onsuccess = () => {
-      const d = r.result; clearTimeout(t);
-      if (late) { d.close(); return; }
-      d.onversionchange = () => { d.close(); db = null; }; d.onclose = () => { db = null; };
-      done(d);
-    };
-    r.onerror = () => { clearTimeout(t); db = null; done(null); };
-  } catch { clearTimeout(t); done(null); } // no indexedDB at all
-});
+// An open that never settles (another tab's pending delete or upgrade) reads as unavailable after 3s rather than
+// holding panel.ready forever. The connection closes for another tab's upgrade or delete, and one the browser drops is
+// reopened.
+const open = () =>
+  (db ||= new Promise<IDBDatabase | null>((done) => {
+    let late = false;
+    const t = setTimeout(() => {
+      late = true;
+      db = null;
+      done(null);
+    }, 3000);
+    // no indexedDB at all
+    try {
+      const r = indexedDB.open("tweakit", 1);
+      r.onupgradeneeded = () => r.result.createObjectStore("images");
+      r.onsuccess = () => {
+        const d = r.result;
+        clearTimeout(t);
+        if (late) {
+          d.close();
+          return;
+        }
+        d.onversionchange = () => {
+          d.close();
+          db = null;
+        };
+        d.onclose = () => {
+          db = null;
+        };
+        done(d);
+      };
+      r.onerror = () => {
+        clearTimeout(t);
+        db = null;
+        done(null);
+      };
+    } catch {
+      clearTimeout(t);
+      done(null);
+    }
+  }));
 // One transaction; resolves with what `fn` returns once it commits, null if it fails.
-const run = <T>(mode: IDBTransactionMode, fn: (s: Store) => T) => open().then((d) => d && new Promise<T | null>((done) => {
-  try { const t = d.transaction("images", mode), out = fn(t.objectStore("images")); t.oncomplete = () => done(out); t.onerror = t.onabort = () => done(null); }
-  catch { done(null); }
-}));
-const range = (key: string) => IDBKeyRange.bound([key], [key, []]); // an array sorts after every string, so [key, []] caps the range
+const run = <T>(mode: IDBTransactionMode, fn: (s: Store) => T) =>
+  open().then(
+    (d) =>
+      d &&
+      new Promise<T | null>((done) => {
+        try {
+          const t = d.transaction("images", mode),
+            out = fn(t.objectStore("images"));
+          t.oncomplete = () => done(out);
+          t.onerror = t.onabort = () => done(null);
+        } catch {
+          done(null);
+        }
+      }),
+  );
+// an array sorts after every string, so [key, []] caps the range
+const range = (key: string) => IDBKeyRange.bound([key], [key, []]);
 
 // cyrb53: a 53-bit string hash, plenty to tell one panel's few images apart.
 const hash = (s: string) => {
-  let h1 = 0xdeadbeef, h2 = 0x41c6ce57;
-  for (let i = 0; i < s.length; i++) { const c = s.charCodeAt(i); h1 = Math.imul(h1 ^ c, 2654435761); h2 = Math.imul(h2 ^ c, 1597334677); }
+  let h1 = 0xdeadbeef,
+    h2 = 0x41c6ce57;
+  for (let i = 0; i < s.length; i++) {
+    const c = s.charCodeAt(i);
+    h1 = Math.imul(h1 ^ c, 2654435761);
+    h2 = Math.imul(h2 ^ c, 1597334677);
+  }
   h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
   h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
   return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(36) + s.length.toString(36);
@@ -42,22 +83,42 @@ const hash = (s: string) => {
 const refFor = (dataUrl: string) => REF + hash(dataUrl);
 
 /** Every image stored under `key`, ref → data URL; null when IndexedDB can't be used. */
-const load = (key: string) => run("readonly", (s) => {
-  const out = new Map<string, string>();
-  s.openCursor(range(key)).onsuccess = function () { const c = this.result; if (!c) return; if (typeof c.value === "string") out.set(REF + (c.key as string[])[1], c.value); c.continue(); };
-  return out;
-});
+const load = (key: string) =>
+  run("readonly", (s) => {
+    const out = new Map<string, string>();
+    s.openCursor(range(key)).onsuccess = function () {
+      const c = this.result;
+      if (!c) return;
+      if (typeof c.value === "string") out.set(REF + (c.key as string[])[1], c.value);
+      c.continue();
+    };
+    return out;
+  });
 /** One image by its ref (a preset another tab saved after this panel loaded); null when it isn't there. */
-const get = (key: string, ref: string) => run("readonly", (s) => { const r = s.get([key, ref.slice(REF.length)]); return r; }).then((r) => (r && typeof r.result === "string" ? r.result : null));
-const put = (key: string, ref: string, dataUrl: string) => run("readwrite", (s) => { s.put(dataUrl, [key, ref.slice(REF.length)]); return true; });
+const get = (key: string, ref: string) =>
+  run("readonly", (s) => {
+    const r = s.get([key, ref.slice(REF.length)]);
+    return r;
+  }).then((r) => (r && typeof r.result === "string" ? r.result : null));
+const put = (key: string, ref: string, dataUrl: string) =>
+  run("readwrite", (s) => {
+    s.put(dataUrl, [key, ref.slice(REF.length)]);
+    return true;
+  });
 /** Delete the images under `key` that `refs` name. */
-const prune = (key: string, refs: string[]) => run("readwrite", (s) => { for (const r of refs) s.delete([key, r.slice(REF.length)]); return true; });
+const prune = (key: string, refs: string[]) =>
+  run("readwrite", (s) => {
+    for (const r of refs) s.delete([key, r.slice(REF.length)]);
+    return true;
+  });
 
-/** Each ref a stored snapshot or preset names, read from its JSON whatever the schema: a renamed field's preset still counts. */
+/** Each ref a stored snapshot or preset names, read from its JSON whatever the schema: a renamed field's preset still
+ * counts. */
 const refsIn = (v: unknown) => new Set<string>(JSON.stringify(v ?? null).match(/tw-image:[0-9a-z]+/g) || []);
 /** Delete the records under `key` this panel knows (`known`) that nothing in `named` names any more. */
 const pruneUnnamed = (key: string, known: Map<string, string>, named: unknown[]) => {
-  const keep = refsIn(named), gone = [...known.keys()].filter((r) => !keep.has(r));
+  const keep = refsIn(named),
+    gone = [...known.keys()].filter((r) => !keep.has(r));
   for (const r of gone) known.delete(r);
   if (gone.length) prune(key, gone);
 };
@@ -67,13 +128,29 @@ const swapRef = (presets: unknown, ref: string, withText: string) => {
   return text.includes(ref) ? JSON.parse(text.split(ref).join(JSON.stringify(withText).slice(1, -1))) : null;
 };
 
-/** The store bound to one panel: `known` holds the records it has loaded or written (ref → data URL), `refused` runs when
- *  a write fails with its ref (the panel saves again, that image inline), and the presets pair reads and writes its presets. */
-const bind = (key: string, known: Map<string, string>, refused: (ref: string) => void, readPresets: () => unknown, writePresets: (v: unknown) => boolean) => {
-  const failed = new Set<string>(), hashed = new WeakMap<object, [string, string]>();
+/** The store bound to one panel: `known` holds the records it has loaded or written (ref → data URL), `refused` runs
+ * when
+ *  a write fails with its ref (the panel saves again, that image inline), and the presets pair reads and writes its
+ *  presets. */
+const bind = (
+  key: string,
+  known: Map<string, string>,
+  refused: (ref: string) => void,
+  readPresets: () => unknown,
+  writePresets: (v: unknown) => boolean,
+) => {
+  const failed = new Set<string>(),
+    hashed = new WeakMap<object, [string, string]>();
   // Each row's last data URL and its ref, so a save that didn't touch the image doesn't hash megabytes again.
-  const refOf = (row: object, v: string) => { const c = hashed.get(row); if (c?.[0] === v) return c[1]; const r = refFor(v); hashed.set(row, [v, r]); return r; };
-  // A record the store refused: a preset that names it takes the data URL inline, or an empty image if storage can't fit it.
+  const refOf = (row: object, v: string) => {
+    const c = hashed.get(row);
+    if (c?.[0] === v) return c[1];
+    const r = refFor(v);
+    hashed.set(row, [v, r]);
+    return r;
+  };
+  // A record the store refused: a preset that names it takes the data URL inline, or an empty image if storage can't
+  // fit it.
   const inlinePresets = (ref: string, v: string) => {
     const inlined = swapRef(readPresets(), ref, v);
     if (!inlined || writePresets(inlined)) return;
@@ -81,20 +158,31 @@ const bind = (key: string, known: Map<string, string>, refused: (ref: string) =>
     console.warn("[tweaks] persist: an image a preset holds didn't fit in storage — the preset keeps the rest");
   };
   return {
-    /** The ref `row`'s image saves as, or null to save it inline (the store refused it). Written once, and again whenever
+    /** The ref `row`'s image saves as, or null to save it inline (the store refused it). Written once, and again
+     * whenever
      *  `stored` (what storage holds now) no longer names it: a tab that replaced it may have pruned the record. */
     save(row: object, v: string, stored: unknown) {
       const ref = refOf(row, v);
       if (failed.has(ref)) return null;
       if (!known.has(ref) || !refsIn(stored).has(ref)) {
         known.set(ref, v);
-        put(key, ref, v).then((ok) => { if (ok) return; known.delete(ref); failed.add(ref); refused(ref); inlinePresets(ref, v); });
+        put(key, ref, v).then((ok) => {
+          if (ok) return;
+          known.delete(ref);
+          failed.add(ref);
+          refused(ref);
+          inlinePresets(ref, v);
+        });
       }
       return ref;
     },
     prune: (named: unknown[]) => pruneUnnamed(key, known, named),
     /** A ref this panel hasn't seen (a preset another tab saved), read from the store. */
-    fetch: (ref: string) => get(key, ref).then((url) => { if (url) known.set(ref, url); return url; }),
+    fetch: (ref: string) =>
+      get(key, ref).then((url) => {
+        if (url) known.set(ref, url);
+        return url;
+      }),
   };
 };
 

package/src/tweaks/lazy.ts

@@ -10,26 +10,43 @@ type MetaNode = Pick<Meta, "type" | "children" | "pages">;
 // TW_SPLIT is an esbuild `define`: `false` for the single-file bundle, where single.ts imports
 // every control statically, so this map is empty and esbuild drops the import()s.
 declare const TW_SPLIT: boolean;
-const LAZY_IMPORT: Record<string, () => Promise<unknown>> = TW_SPLIT ? {
-  number: () => import("./heavy.js"), // heavy.js registers the Number control itself
-  interval: () => import("./controls/interval.js"),
-  color: () => import("./controls/color.js"),
-  gradient: () => import("./controls/gradient.js"),
-  shadow: () => import("./controls/shadow.js"),
-  sides: () => import("./controls/sides.js"),
-  tabs: () => import("./controls/tabs.js"),
-  image: () => import("./controls/image.js"),
-  fpsgraph: () => import("./controls/monitor.js"),
-  monitor: () => import("./controls/monitor.js"),
-  spring: () => import("./controls/spring.js"),
-  cubicbezier: () => import("./controls/bezier.js"),
-  // motion registers last, so a failed editor chunk leaves it unregistered for the next panel to retry.
-  motion: () => Promise.all([import("./controls/bezier.js"), import("./controls/spring.js")]).then(() => import("./controls/motion.js")),
-  point: () => import("./controls/point.js"),
-  plot: () => import("./controls/plot.js"),
-} : {};
+// null-prototype: "constructor" isn't a chunk
+const LAZY_IMPORT: Record<string, () => Promise<unknown>> = Object.assign(
+  Object.create(null),
+  TW_SPLIT
+    ? {
+        number: () => import("./heavy.js"), // heavy.js registers the Number control itself
+        interval: () => import("./controls/interval.js"),
+        color: () => import("./controls/color.js"),
+        gradient: () => import("./controls/gradient.js"),
+        shadow: () => import("./controls/shadow.js"),
+        sides: () => import("./controls/sides.js"),
+        tabs: () => import("./controls/tabs.js"),
+        image: () => import("./controls/image.js"),
+        fpsgraph: () => import("./controls/monitor.js"),
+        monitor: () => import("./controls/monitor.js"),
+        spring: () => import("./controls/spring.js"),
+        cubicbezier: () => import("./controls/bezier.js"),
+        // motion registers last, so a failed editor chunk leaves it unregistered for the next panel to retry.
+        motion: () =>
+          Promise.all([import("./controls/bezier.js"), import("./controls/spring.js")]).then(
+            () => import("./controls/motion.js"),
+          ),
+        point: () => import("./controls/point.js"),
+        plot: () => import("./controls/plot.js"),
+      }
+    : {},
+);
 const loading: Record<string, Promise<unknown>> = {};
-const ensure = (type: string) => (getControl(type) || !LAZY_IMPORT[type]) ? null : (loading[type] ||= LAZY_IMPORT[type]().catch((e) => { delete loading[type]; console.error(`[tweaks] control chunk "${type}" failed to load:`, e); throw e; })); // a rejection isn't cached, so a later panel retries
+// a rejection isn't cached, so a later panel retries
+const ensure = (type: string) =>
+  getControl(type) || !LAZY_IMPORT[type]
+    ? null
+    : (loading[type] ||= LAZY_IMPORT[type]().catch((e) => {
+        delete loading[type];
+        console.error(`[tweaks] control chunk "${type}" failed to load:`, e);
+        throw e;
+      }));
 const scanTypes = (metas: MetaNode[], set = new Set<string>()) => {
   for (const m of metas) {
     set.add(m.type);