@weasel-js/labkit 1.5.0 → 1.5.1

package/dist/chunk-EH7UEQV7.js

@@ -0,0 +1,590 @@
+import { fromConfigFields, isLeafVisible } from './chunk-PHK4W562.js';
+import { resolveAutoConfig, schemaNodeAtPath, valueAtPath, auto } from './chunk-7PFH3CNM.js';
+import { k, J, n3, j2, L3, U, H, z2, R2, F2, V, g, a4, e2, B } from './chunk-T3EC2DXD.js';
+import { isBuiltinToolPref } from '@weasel-js/core';
+import { useMemo, useState, useRef, useEffect, Fragment as Fragment$1 } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var gridOf = (pack) => pack === "one-up" ? "auto-color" : "pairs";
+function sectionRows(section, rows) {
+  return {
+    pack: section.pack ?? rows.pack,
+    layout: section.layout ?? rows.layout,
+    grid: section.pack ? gridOf(section.pack) : rows.grid
+  };
+}
+var NO_AUTO = /* @__PURE__ */ new Set();
+function ControlPanel({
+  schema,
+  fields,
+  config,
+  setConfig,
+  renderers,
+  pack = "pairs",
+  layout,
+  density,
+  align,
+  collapse,
+  collapsed,
+  onCollapse,
+  auto: given,
+  showHidden = false,
+  className
+}) {
+  const resolved = useMemo(() => schema ?? fromConfigFields(fields ?? []), [schema, fields]);
+  const [ownAuto, setOwnAuto] = useState(NO_AUTO);
+  const auto2 = given ?? ownAuto;
+  const setRowAuto = (path, next, value) => {
+    if (given) {
+      setConfig(path, next ? auto : value);
+      return;
+    }
+    setOwnAuto((prev) => {
+      const now = new Set(prev);
+      if (next) now.add(path);
+      else now.delete(path);
+      return now;
+    });
+    if (!next) setConfig(path, value);
+  };
+  const shown = useMemo(
+    () => auto2 && auto2.size > 0 ? resolveAutoConfig(resolved, config, auto2) : config,
+    [resolved, config, auto2]
+  );
+  const listRef = useRef(null);
+  const toggles = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const host = listRef.current;
+    if (!host) return;
+    const onDown = (e2) => {
+      if (!e2.shiftKey) return;
+      const row = e2.target?.closest("[data-auto-path]");
+      const path = row?.getAttribute("data-auto-path");
+      const toggle = path ? toggles.current.get(path) : void 0;
+      if (!toggle) return;
+      e2.preventDefault();
+      e2.stopPropagation();
+      toggle();
+    };
+    host.addEventListener("pointerdown", onDown, true);
+    return () => host.removeEventListener("pointerdown", onDown, true);
+  }, []);
+  const gridPack = gridOf(pack);
+  const folds = collapse !== void 0 || collapsed !== void 0 || onCollapse !== void 0 || resolved.sections.some((s) => s.collapsed !== void 0);
+  const startsFolded = collapse === "closed";
+  const fold = (key, declared, grid = gridPack) => ({
+    pack: grid,
+    collapsible: folds,
+    defaultCollapsed: declared ?? startsFolded,
+    collapsed: collapsed ? collapsed[key] ?? declared ?? startsFolded : void 0,
+    onCollapsedChange: onCollapse ? (next) => onCollapse(key, next) : void 0
+  });
+  const node = (path, rows) => {
+    const found = schemaNodeAtPath(resolved.group, path);
+    if (!found) return null;
+    if (!isLeafVisible(resolved, path, config, showHidden)) return null;
+    if (n3(found)) {
+      return /* @__PURE__ */ jsx(
+        ControlRow,
+        {
+          path,
+          leaf: found,
+          resolved,
+          config,
+          shown,
+          setConfig,
+          renderers,
+          pack: rows.pack,
+          layout: rows.layout,
+          auto: auto2,
+          setRowAuto,
+          toggles: toggles.current
+        },
+        path
+      );
+    }
+    if (found.name === "") return /* @__PURE__ */ jsx(Fragment$1, { children: body(found, path, rows) }, path);
+    return /* @__PURE__ */ jsx(J, { title: found.name, ...fold(path, void 0, rows.grid), children: body(found, path, rows) }, path);
+  };
+  const pairable = (path) => {
+    const found = schemaNodeAtPath(resolved.group, path);
+    if (!found || !n3(found)) return void 0;
+    const pair = extra(found, "pair");
+    if (pair === void 0) return void 0;
+    if (!isLeafVisible(resolved, path, config, showHidden))
+      return void 0;
+    if (renderers?.[path] ?? resolved.renderers[path] ?? renderers?.[found.kind]) return void 0;
+    if (!isBuiltinToolPref(found)) return void 0;
+    if (found.kind === "paint" || found.kind === "object" || isSliderLeaf(found)) return void 0;
+    return { leaf: found, pair };
+  };
+  const rowsFor = (paths, rows) => {
+    const out = [];
+    for (let i = 0; i < paths.length; ) {
+      const head = pairable(paths[i]);
+      if (!head) {
+        out.push(node(paths[i], rows));
+        i += 1;
+        continue;
+      }
+      const { pair } = head;
+      const cells = [{ path: paths[i], leaf: head.leaf }];
+      let j2 = i + 1;
+      for (; j2 < paths.length; j2 += 1) {
+        const next = pairable(paths[j2]);
+        if (!next || next.pair !== pair) break;
+        cells.push({ path: paths[j2], leaf: next.leaf });
+      }
+      out.push(
+        /* @__PURE__ */ jsx(
+          PairedRow,
+          {
+            label: pair,
+            cells,
+            shown,
+            setConfig,
+            layout: rows.layout
+          },
+          paths[i]
+        )
+      );
+      i = j2;
+    }
+    return out;
+  };
+  const body = (group, at, rows) => {
+    const sections = resolved.sections.filter((s) => s.at === at);
+    const sectioned = new Set(sections.flatMap((s) => s.paths));
+    const paths = Object.keys(group.children).map((key) => at === "" ? key : `${at}.${key}`);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      rowsFor(
+        paths.filter((p) => !sectioned.has(p)),
+        rows
+      ),
+      sections.map((section) => {
+        const inner = sectionRows(section, rows);
+        return /* @__PURE__ */ jsx(
+          J,
+          {
+            title: section.label,
+            ...fold(sectionKey(section), section.collapsed, inner.grid),
+            children: rowsFor(section.paths, inner)
+          },
+          sectionKey(section)
+        );
+      })
+    ] });
+  };
+  return /* @__PURE__ */ jsx("div", { ref: listRef, children: /* @__PURE__ */ jsx(
+    k,
+    {
+      pack: gridPack,
+      density,
+      align,
+      className: className ? `lk-control-panel ${className}` : "lk-control-panel",
+      children: body(resolved.group, "", { pack, layout, grid: gridPack })
+    }
+  ) });
+}
+function sectionKey(section) {
+  return section.at === "" ? section.label : `${section.at}.${section.label}`;
+}
+function isSliderLeaf(leaf) {
+  return leaf.kind === "number" && extra(leaf, "control") === "slider" && extra(leaf, "min") !== void 0 && extra(leaf, "max") !== void 0;
+}
+function extra(leaf, key) {
+  return leaf[key];
+}
+function ControlRow({
+  path,
+  leaf,
+  resolved,
+  config,
+  shown,
+  setConfig,
+  renderers,
+  pack,
+  layout,
+  auto: auto2,
+  setRowAuto,
+  toggles
+}) {
+  const write = (value2) => setConfig(path, value2);
+  const fallback = extra(leaf, "default");
+  const pinned = valueAtPath(config, path) ?? fallback;
+  const isAutoRow = auto2?.has(path) ?? false;
+  const canAuto = !extra(leaf, "manual");
+  const resolvedValue = isAutoRow ? valueAtPath(shown, path) : void 0;
+  const value = resolvedValue ?? pinned;
+  const setAuto = (next) => setRowAuto(path, next, value);
+  const onAutoChange = canAuto ? setAuto : void 0;
+  const readsItsOwnValue = !isSliderLeaf(leaf);
+  const readoutValue = leaf.kind === "number" && typeof resolvedValue === "number" ? numberField(leaf, resolvedValue).shown : resolvedValue;
+  const autoReadout = !isAutoRow ? void 0 : resolvedValue === void 0 || readsItsOwnValue ? "auto" : `auto \xB7 ${String(readoutValue)}`;
+  const autoProps = { auto: isAutoRow, onAutoChange, "data-auto-path": canAuto ? path : void 0 };
+  useEffect(() => {
+    if (!canAuto) return;
+    toggles.set(path, () => setAuto(!isAutoRow));
+    return () => {
+      toggles.delete(path);
+    };
+  });
+  const custom = renderers?.[path] ?? resolved.renderers[path] ?? renderers?.[leaf.kind];
+  if (custom) return custom({ path, pref: leaf, value, setValue: write, auto: isAutoRow, setAuto });
+  const label = leaf.name;
+  const description = leaf.description;
+  const read = () => value;
+  const wide = pack === "auto";
+  if (!isBuiltinToolPref(leaf))
+    return /* @__PURE__ */ jsx(UnwiredRow, { label, kind: leaf.kind, description });
+  switch (leaf.kind) {
+    case "number": {
+      const field = numberField(leaf, read());
+      const suffix = extra(leaf, "suffix") ?? field.unit?.suffix;
+      const notation = extra(leaf, "format");
+      if (isSliderLeaf(leaf)) {
+        return /* @__PURE__ */ jsx(
+          F2,
+          {
+            label,
+            value: field.shown,
+            min: field.min,
+            max: field.max,
+            step: field.step,
+            notation,
+            unit: suffix,
+            onChange: (n2) => write(field.store(n2)),
+            readout: autoReadout,
+            layout,
+            span: wide,
+            description,
+            ...autoProps
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        V,
+        {
+          label,
+          value: field.shown,
+          min: field.min,
+          max: field.max,
+          step: field.step,
+          unit: suffix,
+          onChange: (n2) => write(field.store(n2)),
+          readout: autoReadout,
+          layout,
+          description,
+          ...autoProps
+        }
+      );
+    }
+    case "boolean": {
+      const Row = extra(leaf, "control") === "switch" ? z2 : R2;
+      return /* @__PURE__ */ jsx(
+        Row,
+        {
+          label,
+          value: read(),
+          onChange: write,
+          readout: autoReadout,
+          layout,
+          description,
+          ...autoProps
+        }
+      );
+    }
+    case "enum": {
+      const options = extra(leaf, "options") ?? [];
+      const segmented = extra(leaf, "control") === "radio";
+      const Row = segmented ? U : H;
+      return /* @__PURE__ */ jsx(
+        Row,
+        {
+          label,
+          value: read(),
+          options,
+          onChange: write,
+          readout: autoReadout,
+          layout,
+          span: segmented && wide,
+          description,
+          ...autoProps
+        }
+      );
+    }
+    case "string":
+      return /* @__PURE__ */ jsx(
+        DebouncedTextRow,
+        {
+          leaf,
+          label,
+          value: read(),
+          write,
+          readout: autoReadout,
+          layout,
+          span: wide,
+          description,
+          ...autoProps
+        }
+      );
+    case "color": {
+      const common = {
+        label,
+        readout: autoReadout,
+        layout,
+        description,
+        ...autoProps
+      };
+      if (extra(leaf, "alpha") !== true)
+        return /* @__PURE__ */ jsx(L3, { ...common, value: read(), onChange: write });
+      const { rgb, alpha } = splitHexAlpha(read());
+      return /* @__PURE__ */ jsx(
+        L3,
+        {
+          ...common,
+          value: rgb,
+          onChange: (next) => write(joinHexAlpha(next, alpha)),
+          alpha,
+          onAlphaChange: (next) => write(joinHexAlpha(rgb, next))
+        }
+      );
+    }
+    case "paint":
+    case "object":
+      return /* @__PURE__ */ jsx(UnwiredRow, { label, kind: leaf.kind, description });
+    default: {
+      const _exhaustive = leaf;
+      throw new Error(
+        `ControlPanel: no control for built-in pref kind "${_exhaustive.kind}"`
+      );
+    }
+  }
+}
+function UnwiredRow({
+  label,
+  kind,
+  description
+}) {
+  return /* @__PURE__ */ jsx(j2, { label, description, children: /* @__PURE__ */ jsxs("span", { className: "lk-control-panel__unknown", children: [
+    "no control for \u201C",
+    kind,
+    "\u201D"
+  ] }) });
+}
+function DebouncedTextRow({
+  leaf,
+  label,
+  value,
+  write,
+  layout,
+  span,
+  description,
+  readout,
+  auto: auto2,
+  onAutoChange,
+  "data-auto-path": autoPath
+}) {
+  const text = useDebouncedText(
+    value,
+    write,
+    extra(leaf, "debounceMs") ?? 150
+  );
+  return /* @__PURE__ */ jsx(
+    B,
+    {
+      label,
+      readout,
+      layout,
+      span,
+      description,
+      auto: auto2,
+      onAutoChange,
+      "data-auto-path": autoPath,
+      value: text.local,
+      placeholder: extra(leaf, "placeholder"),
+      maxLength: extra(leaf, "maxLength"),
+      onChange: text.type
+    }
+  );
+}
+function numberField(leaf, value) {
+  const unit = extra(leaf, "unit");
+  const bounds = unit ? e2(leaf) : {
+    min: extra(leaf, "min"),
+    max: extra(leaf, "max"),
+    step: extra(leaf, "step")
+  };
+  const lo = bounds.min ?? Number.NEGATIVE_INFINITY;
+  const hi = bounds.max ?? Number.POSITIVE_INFINITY;
+  return {
+    unit,
+    min: bounds.min,
+    max: bounds.max,
+    step: bounds.step,
+    shown: unit ? unit.toDisplay(value) : value,
+    store: (shown) => {
+      const clamped = Math.min(hi, Math.max(lo, shown));
+      return unit ? unit.fromDisplay(clamped) : clamped;
+    }
+  };
+}
+function splitHexAlpha(value) {
+  const digits = /^#([0-9a-f]{3,8})$/i.exec(value?.trim() ?? "")?.[1];
+  const twice = (s) => s.split("").map((c) => c + c).join("");
+  const byte = (s) => Number.parseInt(s, 16) / 255;
+  switch (digits?.length) {
+    case 3:
+      return { rgb: `#${twice(digits)}`, alpha: 1 };
+    case 4:
+      return { rgb: `#${twice(digits.slice(0, 3))}`, alpha: byte(twice(digits.slice(3))) };
+    case 6:
+      return { rgb: `#${digits}`, alpha: 1 };
+    case 8:
+      return { rgb: `#${digits.slice(0, 6)}`, alpha: byte(digits.slice(6)) };
+    default:
+      return { rgb: "#000000", alpha: 1 };
+  }
+}
+function joinHexAlpha(rgb, alpha) {
+  const byte = Math.max(0, Math.min(255, Math.round(alpha * 255)));
+  return `${rgb}${byte.toString(16).padStart(2, "0")}`;
+}
+function PairedRow({
+  label,
+  cells,
+  shown,
+  setConfig,
+  layout
+}) {
+  return /* @__PURE__ */ jsx(j2, { group: true, label, layout, children: cells.map(({ path, leaf }) => /* @__PURE__ */ jsx(
+    PairCell,
+    {
+      leaf,
+      value: valueAtPath(shown, path) ?? extra(leaf, "default"),
+      write: (value) => setConfig(path, value)
+    },
+    path
+  )) });
+}
+function PairCell({
+  leaf,
+  value,
+  write
+}) {
+  const name = leaf.name;
+  const title = leaf.description;
+  const text = useDebouncedText(
+    typeof value === "string" ? value : "",
+    write,
+    extra(leaf, "debounceMs") ?? 150
+  );
+  switch (leaf.kind) {
+    case "number": {
+      const field = numberField(leaf, typeof value === "number" ? value : 0);
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          "aria-label": name,
+          title,
+          value: field.shown,
+          min: field.min,
+          max: field.max,
+          step: field.step,
+          onChange: (e2) => {
+            const n2 = Number(e2.target.value);
+            if (e2.target.value !== "" && Number.isFinite(n2)) write(field.store(n2));
+          }
+        }
+      );
+    }
+    case "boolean":
+      return extra(leaf, "control") === "switch" ? /* @__PURE__ */ jsx(a4, { "aria-label": name, isSelected: value === true, onChange: write }) : /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          "aria-label": name,
+          title,
+          checked: value === true,
+          onChange: (e2) => write(e2.target.checked)
+        }
+      );
+    case "string":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          "aria-label": name,
+          title,
+          value: text.local,
+          placeholder: extra(leaf, "placeholder"),
+          maxLength: extra(leaf, "maxLength"),
+          onChange: (e2) => text.type(e2.target.value)
+        }
+      );
+    case "color": {
+      const { rgb, alpha } = splitHexAlpha(typeof value === "string" ? value : "");
+      const carriesAlpha = extra(leaf, "alpha") === true;
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          "aria-label": name,
+          title,
+          value: rgb,
+          onChange: (e2) => write(carriesAlpha ? joinHexAlpha(e2.target.value, alpha) : e2.target.value)
+        }
+      );
+    }
+    case "enum": {
+      const options = extra(leaf, "options") ?? [];
+      return /* @__PURE__ */ jsx("span", { title, children: /* @__PURE__ */ jsx(
+        g,
+        {
+          variant: "bare",
+          "aria-label": name,
+          options,
+          selectedKey: typeof value === "string" ? value : null,
+          onSelectionChange: write
+        }
+      ) });
+    }
+    default:
+      return null;
+  }
+}
+function useDebouncedText(value, write, debounceMs) {
+  const [local, setLocal] = useState(value);
+  const timer = useRef(null);
+  const lastExternal = useRef(value);
+  useEffect(() => {
+    if (value !== lastExternal.current) {
+      lastExternal.current = value;
+      setLocal(value);
+    }
+  }, [value]);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  return {
+    local,
+    type: (next) => {
+      setLocal(next);
+      if (timer.current) clearTimeout(timer.current);
+      const commit = () => {
+        lastExternal.current = next;
+        write(next);
+      };
+      if (debounceMs === 0) commit();
+      else timer.current = setTimeout(commit, debounceMs);
+    }
+  };
+}
+
+export { ControlPanel };
+//# sourceMappingURL=chunk-EH7UEQV7.js.map
+//# sourceMappingURL=chunk-EH7UEQV7.js.map