tweakit 0.5.2 → 0.7.0

package/src/tweaks/single.ts

@@ -0,0 +1,22 @@
+/* Single-file build entry. Statically imports every control so each self-registers
+ * into the shared registry on load; with the esbuild define TW_SPLIT=false, core's
+ * dynamic-import map is empty, so esbuild inlines the whole kit into one self-contained,
+ * synchronous file — a drop-in that needs no bundler. The code-split build uses core.ts
+ * directly (TW_SPLIT=true) and loads these controls on demand instead. */
+import "./markup.js"; // registers enhance()'s work, so enhance() stays synchronous here
+import "./heavy.js"; // registers the Number control
+import "./controls/color.js";
+import "./controls/gradient.js";
+import "./controls/shadow.js";
+import "./controls/sides.js";
+import "./controls/interval.js";
+import "./controls/tabs.js";
+import "./controls/image.js";
+import "./controls/monitor.js";
+import "./controls/spring.js";
+import "./controls/bezier.js";
+import "./controls/motion.js";
+import "./controls/point.js";
+import "./controls/plot.js";
+
+export * from "./core.js";

package/src/tweaks/standalone.ts

@@ -0,0 +1,179 @@
+/* Standalone controls — the kit's controls without the panel: mountControl() builds one control
+ * into a host of your own, createColorPicker() hands out the color editor surface alone. */
+import { el, getControl, onReady, setDisabled, valueChanged, isolate, using } from "./shared.js";
+import { metaFor, VALUELESS } from "./schema.js";
+import { ensureForMetas } from "./lazy.js";
+import { createControl } from "./controls/basic.js";
+import { addHintMarker } from "./feedback.js";
+import type {
+  SchemaValue,
+  HeldValue,
+  KnownType,
+  MountOptions,
+  MountedControl,
+  ColorPickerOptions,
+  ColorPicker,
+  ColorMode,
+  Control,
+  Get,
+} from "./types.js";
+import type { Meta } from "./schema.js";
+import type { PickerBody, PickerOptions } from "./controls/color.js";
+
+// Outside a .twk-panel the cascade delivers none of the kit's tokens, so the wrapper carries .twk-portal.
+const scope = (cls: string) => el("div", `${cls} twk-standalone twk-portal`);
+// Run `build` once the lazy module has landed (synchronously when none is missing); the handled fork keeps a failed
+// chunk out of the unhandled-rejection channel.
+const whenLoaded = <H>(metas: Array<Pick<Meta, "type">>, build: () => void, handle: H): Promise<H> => {
+  const pend = ensureForMetas(metas);
+  if (!pend) {
+    build();
+    return Promise.resolve(handle);
+  }
+  const ready = pend.then(build).then(() => handle);
+  ready.catch(() => {});
+  return ready;
+};
+
+/** One control from a schema value, into `host`; a folder or tabs set is tweaks()'s to build. */
+export function mountControl<const V extends HeldValue>(
+  host: Element,
+  value: V & KnownType<V>,
+  opts?: MountOptions,
+): MountedControl;
+export function mountControl(host: Element, value: SchemaValue, opts: MountOptions = {}): MountedControl {
+  const key = opts.key ?? "value";
+  const meta = metaFor(key, value);
+  if (!meta || meta.type === "folder" || meta.type === "tabs")
+    throw new TypeError(`[tweaks] mountControl: "${key}" is not a single-control schema value`);
+  if (opts.label != null) meta.label = String(opts.label); // the option wins over the derived label; "" = no label
+  const valued = !VALUELESS.has(meta.type); // display/action controls carry no value: set/get are inert
+  const root = scope("twk-control"); // the control fills it in on ready
+  const iso = isolate(root, opts.shadow);
+  host.append(iso.box);
+  let ctrl: Control | null = null,
+    destroyed = false,
+    last: unknown = meta.value,
+    parked: unknown,
+    queued = false;
+  // Gated the way the panel gates notify(): a same-value set() stays silent instead of echoing.
+  const emit = (v: unknown) => {
+    if (!valueChanged(last, v)) return;
+    last = v;
+    opts.onChange && opts.onChange(v, key);
+  };
+  const build = () => {
+    if (destroyed) return; // destroy() before the chunk landed — nothing to mount
+    ctrl = using(opts.strings, () => createControl(meta, valued ? emit : () => {}));
+    if (!ctrl) return; // a failed chunk degrades to an empty wrapper
+    if (meta.hint) addHintMarker(ctrl.el, meta.hint);
+    // Resolved once at mount: with no siblings for a predicate to read, `get` answers undefined.
+    const none: Get = () => undefined;
+    try {
+      if (meta.render && !meta.render(none)) ctrl.el.classList.add("twk-cond-hidden");
+    } catch {}
+    // each predicate fails on its own
+    try {
+      const d = typeof meta.disabled === "function" ? meta.disabled(none) : meta.disabled;
+      if (d) setDisabled(ctrl.el, true);
+    } catch {}
+    root.append(ctrl.el);
+    if (!valued) return;
+    last = ctrl.get(); // the form the control opened on
+    // a set() from the lazy window applies and announces now
+    if (queued) {
+      ctrl.set(parked);
+      emit(ctrl.get());
+    }
+  };
+  const handle: MountedControl = {
+    el: iso.box,
+    set: (v) => {
+      if (destroyed || !valued) return;
+      if (ctrl) {
+        ctrl.set(v);
+        emit(ctrl.get());
+      } else {
+        parked = v;
+        queued = true;
+      }
+    },
+    get: () => (!valued ? undefined : ctrl ? ctrl.get() : queued ? parked : meta.value),
+    // onLive listeners release on their next event by this mark
+    destroy: () => {
+      destroyed = true;
+      if (ctrl && typeof ctrl.destroy === "function") ctrl.destroy();
+      root.dataset.twkDestroyed = "";
+      root.remove();
+      iso.end();
+    },
+    ready: null,
+  };
+  handle.ready = whenLoaded([meta], build, handle);
+  // the handled fork whenLoaded keeps
+  if (iso.dressed) (handle.ready = Promise.all([handle.ready, iso.dressed]).then(() => handle)).catch(() => {});
+  return handle;
+}
+
+/** The color editor surface alone, for a host page that brings its own swatch. */
+export function createColorPicker(opts: ColorPickerOptions = {}): ColorPicker {
+  const root = scope("twk-color-picker"),
+    iso = isolate(root, opts.shadow);
+  let body: PickerBody | null = null,
+    destroyed = false,
+    last = opts.value,
+    parked: string,
+    queued = false,
+    parkedMode: ColorMode = null;
+  const emit = (v: string) => {
+    if (!valueChanged(last, v)) return;
+    last = v;
+    opts.onChange && opts.onChange(v);
+  };
+  const build = () => {
+    if (destroyed) return;
+    // registered by the color module beside its control
+    const make = getControl<PickerBody, PickerOptions>("colorpicker");
+    if (!make) return;
+    body = using(opts.strings, () => make({ value: opts.value, mode: opts.mode }, emit));
+    last = body.get();
+    root.append(body.el);
+    if (parkedMode) body.setMode(parkedMode);
+    if (queued) {
+      body.set(parked);
+      emit(body.get());
+    }
+    onReady(body.reflow); // next frame: the thumbs need a real box
+  };
+  const picker: ColorPicker = {
+    el: iso.box,
+    set: (v) => {
+      if (destroyed) return;
+      if (body) {
+        body.set(v);
+        emit(body.get());
+      } else {
+        parked = v;
+        queued = true;
+      }
+    },
+    get: () => (body ? body.get() : queued ? parked : opts.value),
+    mode: () => (body ? body.mode() : parkedMode || opts.mode || "oklch"),
+    setMode: (m) => {
+      if (body) body.setMode(m);
+      else parkedMode = m;
+    },
+    reflow: () => {
+      if (body) body.reflow();
+    },
+    destroy: () => {
+      destroyed = true;
+      root.remove();
+      iso.end();
+    },
+    ready: null,
+  };
+  picker.ready = whenLoaded([{ type: "color" }], build, picker);
+  if (iso.dressed) (picker.ready = Promise.all([picker.ready, iso.dressed]).then(() => picker)).catch(() => {});
+  return picker;
+}