@kitlangton/knobs 0.0.0-stage → 0.1.0

package/dist/dev/chunk-e13znr7c.js

@@ -0,0 +1,155 @@
+import {
+  __preload
+} from "./chunk-qtt698hp.js";
+import {
+  iconSvg,
+  readSession,
+  writeSession,
+  injectStyles
+} from "./chunk-kdewv0mt.js";
+
+// src/panel/attach.ts
+function attach(controls, element, options = {}) {
+  if (!controls.enabled)
+    return () => {};
+  let doc = element.ownerDocument, win = doc.defaultView;
+  injectStyles(doc);
+  let label = options.label ?? controls.chip.label, reveal = options.reveal ?? controls.chip.reveal, shortcut = options.shortcut ?? controls.chip.shortcut, chip = doc.createElement("button");
+  chip.className = "knobs-chip", chip.dataset.theme = controls.theme, chip.type = "button";
+  let renderFace = (text) => {
+    let face = [iconSvg(doc, "gear")];
+    if (text) {
+      let span = doc.createElement("span");
+      span.textContent = text, face.push(span);
+    }
+    chip.replaceChildren(...face), chip.toggleAttribute("data-label", Boolean(text));
+  };
+  renderFace(label), chip.setAttribute("aria-label", `Tune ${controls.id}`), chip.setAttribute("aria-expanded", "false"), chip.dataset.shown = "false";
+  let setShown = (shown) => {
+    chip.dataset.shown = String(shown), chip.tabIndex = shown ? 0 : -1;
+  };
+  doc.body.append(chip);
+  let addedTabIndex = !element.hasAttribute("tabindex") && !element.matches("a[href],button,input,select,textarea");
+  if (addedTabIndex)
+    element.tabIndex = 0;
+  let hovered = element.matches(":hover"), disposed = !1, loading = !1, panel, leaving, revealed = () => reveal !== "shortcut" || knobsMode(win), position = () => {
+    let box = element.getBoundingClientRect();
+    chip.style.left = `${Math.max(4, Math.min(win.innerWidth - chip.offsetWidth - 4, box.right - chip.offsetWidth - 6))}px`, chip.style.top = `${Math.max(4, box.top + 6)}px`;
+  }, update = () => {
+    let shown = controls.enabled && revealed() && !panel && (reveal === "always" || hovered || element.contains(doc.activeElement) || doc.activeElement === chip);
+    if (shown)
+      position();
+    if (setShown(shown), !controls.enabled)
+      panel?.dispose(), leaving?.dispose(), panel = leaving = void 0;
+  }, enter = () => {
+    hovered = !0, update();
+  }, leave = (event) => {
+    if (event.relatedTarget instanceof Node && (element.contains(event.relatedTarget) || chip.contains(event.relatedTarget)))
+      return;
+    hovered = !1, update();
+  }, focusOut = () => {
+    queueMicrotask(update);
+  };
+  for (let node of [element, chip])
+    node.addEventListener("pointerenter", enter), node.addEventListener("pointerleave", leave), node.addEventListener("focusin", update), node.addEventListener("focusout", focusOut);
+  let unpress = () => delete chip.dataset.pressed;
+  chip.addEventListener("pointerdown", (event) => {
+    if (event.button === 0 && !panel)
+      chip.dataset.pressed = String(performance.now());
+  }), chip.addEventListener("pointerleave", unpress), chip.addEventListener("pointercancel", unpress);
+  let remember = controls.storage !== null, close = (refocus = !0) => {
+    let closing = panel;
+    if (!closing)
+      return;
+    if (panel = void 0, leaving = closing, position(), closing.dismiss(), remember)
+      writeSession(controls.id, { open: !1 });
+    if (chip.setAttribute("aria-expanded", "false"), refocus && revealed())
+      setShown(!0), chip.focus({ preventScroll: !0 });
+    else
+      update();
+  }, open = async (restored = !1) => {
+    if (panel) {
+      unpress(), panel.focus();
+      return;
+    }
+    if (leaving?.reopen()) {
+      if (unpress(), panel = leaving, leaving = void 0, remember)
+        writeSession(controls.id, { open: !0 });
+      chip.setAttribute("aria-expanded", "true"), update(), panel.focus();
+      return;
+    }
+    if (leaving = void 0, loading)
+      return;
+    loading = !0;
+    try {
+      let { createPanel } = await (__preload("ktsn42p7"), import("./chunk-ktsn42p7.js"));
+      if (disposed || !controls.enabled || panel)
+        return;
+      if (panel = createPanel(controls, element, close, { restored, chip }), remember)
+        writeSession(controls.id, { open: !0 });
+      if (chip.setAttribute("aria-expanded", "true"), update(), !restored)
+        panel.focus();
+    } catch (cause) {
+      chip.title = String(cause), renderFace("Retry knobs");
+    } finally {
+      loading = !1, unpress();
+    }
+  };
+  if (chip.onclick = () => panel ? close() : void open(), remember && readSession(controls.id).open && revealed())
+    open(!0);
+  let observer = new ResizeObserver(position);
+  observer.observe(element), win.addEventListener("scroll", position, !0), win.addEventListener("resize", position);
+  let onMode = () => {
+    if (!revealed())
+      close(!1);
+    update();
+  }, offShortcut = reveal === "shortcut" ? listenForShortcut(win, shortcut, controls.theme) : void 0;
+  win.addEventListener(MODE_EVENT, onMode);
+  let unsubscribe = controls.subscribe(update);
+  return update(), () => {
+    disposed = !0, unsubscribe(), panel?.dispose(), leaving?.dispose(), observer.disconnect(), offShortcut?.(), win.removeEventListener(MODE_EVENT, onMode), win.removeEventListener("scroll", position, !0), win.removeEventListener("resize", position);
+    for (let node of [element, chip])
+      node.removeEventListener("pointerenter", enter), node.removeEventListener("pointerleave", leave), node.removeEventListener("focusin", update), node.removeEventListener("focusout", focusOut);
+    if (chip.remove(), addedTabIndex && element.getAttribute("tabindex") === "0")
+      element.removeAttribute("tabindex");
+  };
+}
+var MODE_KEY = "knobs:mode", MODE_EVENT = "knobs-mode";
+function knobsMode(win) {
+  try {
+    return win.sessionStorage.getItem(MODE_KEY) === "on";
+  } catch {
+    return !1;
+  }
+}
+function matchShortcut(shortcut) {
+  let parts = shortcut.split("+").map((p) => p.trim().toLowerCase()), key = parts.pop() ?? "", has = (...names) => parts.some((p) => names.includes(p)), alt = has("alt", "option", "opt", "⌥"), shift = has("shift", "⇧"), ctrl = has("ctrl", "control", "⌃"), meta = has("meta", "cmd", "command", "⌘"), code = /^[a-z]$/.test(key) ? `Key${key.toUpperCase()}` : /^\d$/.test(key) ? `Digit${key}` : "";
+  return (event) => event.altKey === alt && event.shiftKey === shift && event.ctrlKey === ctrl && event.metaKey === meta && (code ? event.code === code : event.key.toLowerCase() === key);
+}
+function listenForShortcut(win, shortcut, theme) {
+  let matches = matchShortcut(shortcut), onKey = (event) => {
+    if (event.defaultPrevented || event.repeat || !matches(event))
+      return;
+    if (event.target?.closest?.("input,textarea,select,[contenteditable]:not([contenteditable=false])"))
+      return;
+    event.preventDefault();
+    let on = !knobsMode(win);
+    try {
+      win.sessionStorage.setItem(MODE_KEY, on ? "on" : "off");
+    } catch {}
+    showStatus(win.document, on ? "knobs on" : "knobs off", theme), win.dispatchEvent(new CustomEvent(MODE_EVENT));
+  };
+  return win.addEventListener("keydown", onKey, !0), () => win.removeEventListener("keydown", onKey, !0);
+}
+var statusTimers = /* @__PURE__ */ new WeakMap;
+function showStatus(doc, text, theme) {
+  let toast = doc.querySelector(".knobs-toast");
+  if (!toast)
+    toast = doc.createElement("div"), toast.className = "knobs-toast", toast.setAttribute("role", "status"), toast.dataset.shown = "false", doc.body.append(toast), toast.getBoundingClientRect();
+  toast.dataset.theme = theme, toast.textContent = text, toast.dataset.shown = "true", clearTimeout(statusTimers.get(doc));
+  let el = toast;
+  statusTimers.set(doc, setTimeout(() => el.dataset.shown = "false", 1200));
+}
+export {
+  attach
+};