@weasel-js/ui-logic 0.0.0-stage → 1.15.0

package/dist/index.js

@@ -0,0 +1,502 @@
+import { COARSE_STEPS, snapToStep } from '@weasel-js/quantity';
+export { COARSE_STEPS } from '@weasel-js/quantity';
+import { clamp } from '@weasel-js/geom';
+
+// src/tree.ts
+function treeKey(items, at, key, shape) {
+  const item = items[at];
+  if (item === void 0) return { handled: false };
+  const canToggle = shape.canToggle?.(item) ?? true;
+  const [opens, closes] = shape.dir === "rtl" ? ["ArrowLeft", "ArrowRight"] : ["ArrowRight", "ArrowLeft"];
+  if (key === opens) {
+    if (!shape.isBranch(item)) return { handled: false };
+    if (!shape.isOpen(item)) return canToggle ? { handled: true, toggle: at } : { handled: true, at: null };
+    const next = items[at + 1];
+    return { handled: true, at: next !== void 0 && shape.isChildOf(next, item) ? at + 1 : null };
+  }
+  if (key !== closes) return { handled: false };
+  if (shape.isOpen(item) && canToggle) return { handled: true, toggle: at };
+  const parent = items.findIndex((p) => shape.isChildOf(item, p));
+  return parent < 0 ? { handled: false } : { handled: true, at: parent };
+}
+
+// src/list.ts
+var always = () => true;
+function firstStop(items, shape = {}) {
+  const i = items.findIndex(shape.canStop ?? always);
+  return i < 0 ? null : i;
+}
+function stepStop(items, from, dir, shape = {}) {
+  const canStop = shape.canStop ?? always;
+  const wrap = shape.wrap ?? true;
+  const n = items.length;
+  let i = from ?? (dir === 1 ? -1 : n);
+  for (let k = 0; k < n; k++) {
+    i += dir;
+    if (i < 0 || i >= n) {
+      if (!wrap) break;
+      i = (i + n) % n;
+    }
+    if (canStop(items[i])) return i;
+  }
+  return !wrap && from !== null && canStop(items[from]) ? from : null;
+}
+function arrowDir(key, shape) {
+  const orientation = shape.orientation ?? "vertical";
+  if (orientation !== "horizontal") {
+    if (key === "ArrowDown") return 1;
+    if (key === "ArrowUp") return -1;
+  }
+  if (orientation !== "vertical") {
+    const forward = shape.dir === "rtl" ? -1 : 1;
+    if (key === "ArrowRight") return forward;
+    if (key === "ArrowLeft") return -forward;
+  }
+  return 0;
+}
+function rovingKey(items, at, key, shape = {}) {
+  if (key === "Home") return { handled: true, at: stepStop(items, null, 1, shape) };
+  if (key === "End") return { handled: true, at: stepStop(items, null, -1, shape) };
+  const dir = arrowDir(key, shape);
+  return dir === 0 ? { handled: false } : { handled: true, at: stepStop(items, at, dir, shape) };
+}
+function rowKey(items, at, press, shape = {}, searching = false) {
+  const { key } = press;
+  const chord = !!(press.ctrlKey || press.metaKey);
+  if (shape.selectAll && key.toLowerCase() === "a" && chord && !press.altKey && !press.shiftKey) return { kind: "selectAll" };
+  const step = rovingKey(items, at, key, shape);
+  if (step.handled) return { kind: "move", at: step.at, extend: !!press.shiftKey };
+  if (shape.tree && (key === "ArrowRight" || key === "ArrowLeft")) {
+    const t = treeKey(items, at, key, shape.dir && !shape.tree.dir ? { ...shape.tree, dir: shape.dir } : shape.tree);
+    if (!t.handled) return null;
+    return "toggle" in t ? { kind: "toggle", at: t.toggle } : { kind: "move", at: t.at, extend: false };
+  }
+  if (key === " " && shape.typeahead && searching) return { kind: "type", held: true };
+  if (key === "Enter" || key === " ") return shape.activate ? { kind: "activate" } : null;
+  if (shape.typeahead && key.length === 1 && !chord && !press.altKey) return { kind: "type", held: false };
+  return null;
+}
+
+// src/typeahead.ts
+var TYPEAHEAD_RESET_MS = 500;
+var EMPTY_TYPEAHEAD = { text: "", at: -Infinity };
+function typeaheadMatch(items, from, query, shape) {
+  const q = query.toLowerCase();
+  const n = items.length;
+  const start = from == null ? 0 : q.length === 1 ? from + 1 : from;
+  for (let k = 0; k < n; k++) {
+    const i = (start + k) % n;
+    const item = items[i];
+    if ((shape.canStop?.(item) ?? true) && shape.label(item).toLowerCase().startsWith(q)) return i;
+  }
+  return null;
+}
+function typeaheadStep(items, from, buffer, key, now, shape, resetMs = TYPEAHEAD_RESET_MS) {
+  const prev = now - buffer.at < resetMs ? buffer.text : "";
+  const k = key.toLowerCase();
+  const cycling = prev !== "" && [...prev].every((c) => c.toLowerCase() === k);
+  const text = cycling ? key : prev + key;
+  return { buffer: { text, at: now }, hit: typeaheadMatch(items, from, text, shape) };
+}
+
+// src/focus.ts
+function tabSort(targets, declared) {
+  const key = (t) => declared(t) ?? Number.POSITIVE_INFINITY;
+  return [...targets].sort((a, b) => key(a) - key(b));
+}
+function tabStep(order, from, direction, isBefore) {
+  const forward = direction === "next";
+  const here = from === null ? -1 : order.indexOf(from);
+  let at;
+  if (here !== -1) at = here + (forward ? 1 : -1);
+  else if (from === null || !isBefore) at = forward ? 0 : order.length - 1;
+  else {
+    const after = order.findIndex((t) => isBefore(from, t));
+    const end = after === -1 ? order.length : after;
+    at = forward ? end : end - 1;
+  }
+  return order[at] ?? null;
+}
+function arrowSteps(key, shift, dir = "ltr") {
+  const steps = shift ? COARSE_STEPS : 1;
+  if (key === "ArrowUp") return steps;
+  if (key === "ArrowDown") return -steps;
+  const d = arrowDir(key, { orientation: "horizontal", dir });
+  return d === 0 ? null : d * steps;
+}
+function arrowMove(key, shift) {
+  const steps = arrowSteps(key, shift);
+  if (steps === null) return null;
+  return key === "ArrowRight" || key === "ArrowLeft" ? { dx: steps, dy: 0 } : { dx: 0, dy: -steps };
+}
+function rangeKey(key, shift, dir = "ltr") {
+  switch (key) {
+    case "PageUp":
+      return COARSE_STEPS;
+    case "PageDown":
+      return -COARSE_STEPS;
+    case "Home":
+      return "home";
+    case "End":
+      return "end";
+    default:
+      return arrowSteps(key, shift, dir);
+  }
+}
+function usableStops(stops, min, max) {
+  if (!stops || stops.length === 0) return [];
+  const byValue = /* @__PURE__ */ new Map();
+  for (const stop of stops) {
+    const s = typeof stop === "number" ? { value: stop } : stop;
+    if (s.value < min || s.value > max) continue;
+    const seen = byValue.get(s.value);
+    if (!seen || seen.label === void 0 && s.label !== void 0) byValue.set(s.value, s);
+  }
+  return [...byValue.values()].sort((a, b) => a.value - b.value);
+}
+function attract(v, stops, tolerance, toFraction) {
+  const f = toFraction(v);
+  let best = v;
+  let bestGap = tolerance;
+  for (const stop of stops) {
+    const gap = Math.abs(toFraction(stop) - f);
+    if (gap <= bestGap) {
+      best = stop;
+      bestGap = gap;
+    }
+  }
+  return best;
+}
+function stepStops(stops, v, direction, count) {
+  if (direction > 0) {
+    const first2 = stops.findIndex((stop) => stop > v);
+    if (first2 === -1) return stops[stops.length - 1];
+    return stops[Math.min(stops.length - 1, first2 + count - 1)];
+  }
+  let first = -1;
+  for (let i = stops.length - 1; i >= 0; i--) {
+    if (stops[i] < v) {
+      first = i;
+      break;
+    }
+  }
+  if (first === -1) return stops[0];
+  return stops[Math.max(0, first - (count - 1))];
+}
+function defaultStep(step, min, max) {
+  if (step !== void 0 && step > 0) return step;
+  return (max - min) / 100;
+}
+function clampOrdered(v, thumbs, index, min, max, step) {
+  const gap = step !== void 0 && step > 0 ? step : (max - min) / 1e3;
+  const lower = index > 0 ? thumbs[index - 1].value + gap : min;
+  const upper = index < thumbs.length - 1 ? thumbs[index + 1].value - gap : max;
+  return clamp(v, lower, upper);
+}
+function crossEnd(from, delta, stepSize, range, track) {
+  const [lo, hi] = range;
+  if (from > hi) return delta < 0 ? hi + delta + stepSize : from;
+  if (from < lo) return delta > 0 ? lo + delta - stepSize : from;
+  if (from + delta > hi) return from < hi ? hi : track[1];
+  if (from + delta < lo) return from > lo ? lo : track[0];
+  return null;
+}
+function sliderKey(key, shift, shape) {
+  const move = rangeKey(key, shift, shape.dir);
+  if (move === null) return null;
+  const { thumbs, index, min, max, step } = shape;
+  const from = thumbs[index].value;
+  const [bLo, bHi] = shape.bounds?.() ?? [min, max];
+  const lo = Math.max(min, bLo);
+  const hi = Math.min(max, bHi);
+  const stops = shape.stops ?? [];
+  let v;
+  if (move === "home") v = lo;
+  else if (move === "end") v = hi;
+  else if (shape.keyStep) v = shape.keyStep(move);
+  else if (stops.length > 0) v = stepStops(stops, from, move > 0 ? 1 : -1, Math.abs(move));
+  else {
+    const range = shape.range ?? [min, max];
+    const stepSize = defaultStep(step, range[0], range[1]);
+    const delta = move * stepSize;
+    v = crossEnd(from, delta, stepSize, range, [min, max]) ?? snapToStep(from + delta, step, min);
+  }
+  v = clamp(v, lo, hi);
+  return shape.ordered ? clampOrdered(v, thumbs, index, lo, hi, step) : v;
+}
+
+// src/textCommit.ts
+function editEnd(cause, shape = {}) {
+  if (cause === "blur") return "commit";
+  if (cause.key === "Enter") return shape.multiline && cause.shift ? null : "commit";
+  if (cause.key === "Escape") return shape.escape ?? "cancel";
+  return null;
+}
+function imeKey(e) {
+  return e.isComposing === true || e.keyCode === 229 || e.key === "Process" || e.key === "Dead";
+}
+
+// src/reorder.ts
+var sortedSet = (at) => [...new Set(at)].sort((a, b) => a - b);
+function moveItems(items, at, to) {
+  const taken = new Set(at);
+  const moved = sortedSet(at).flatMap((i) => i >= 0 && i < items.length ? [items[i]] : []);
+  const out = items.filter((_, i) => !taken.has(i));
+  out.splice(movedIndex(at, to), 0, ...moved);
+  return out;
+}
+function movedIndex(at, to) {
+  return to - sortedSet(at).filter((i) => i < to).length;
+}
+function isNoopDrop(at, to) {
+  const s = sortedSet(at);
+  if (s.length === 0) return false;
+  const first = s[0];
+  const last = s[s.length - 1];
+  return last - first + 1 === s.length && to >= first && to <= last + 1;
+}
+function nudgeGap(at, by, length) {
+  const s = sortedSet(at);
+  if (s.length === 0) return null;
+  const to = by < 0 ? s[0] - 1 : s[s.length - 1] + 2;
+  return to < 0 || to > length ? null : to;
+}
+function gapByMidpoint(mids, p) {
+  const backward = mids.length > 1 && mids[mids.length - 1] < mids[0];
+  return mids.filter((m) => backward ? m >= p : m <= p).length;
+}
+function nearestGap(gaps, p) {
+  let best = -1;
+  for (let k = 0; k < gaps.length; k++) if (best < 0 || Math.abs(gaps[k] - p) < Math.abs(gaps[best] - p)) best = k;
+  return best;
+}
+function isNudgeChord(e) {
+  return e.altKey && !e.ctrlKey && !e.metaKey;
+}
+function nudgeOf(e, back = "ArrowUp", on = "ArrowDown") {
+  if (!isNudgeChord(e)) return null;
+  if (e.key === back) return -1;
+  return e.key === on ? 1 : null;
+}
+
+// src/scheduler.ts
+var timerScheduler = {
+  now: () => Date.now(),
+  set: (fn, ms) => {
+    const t = setTimeout(fn, ms);
+    return () => clearTimeout(t);
+  }
+};
+
+// src/stepRepeat.ts
+var REPEAT_DELAY_MS = 400;
+var REPEAT_EVERY_MS = 60;
+function createStepRepeat(step, spent, opts = {}) {
+  let cancel = null;
+  let key = null;
+  let hold = 0;
+  const stop = () => {
+    cancel?.();
+    cancel = null;
+    key = null;
+    hold++;
+  };
+  const tick = (k, ms) => {
+    cancel = (opts.scheduler ?? timerScheduler).set(() => {
+      if (spent(k)) return stop();
+      step(k);
+      tick(k, opts.everyMs ?? REPEAT_EVERY_MS);
+    }, ms);
+  };
+  return {
+    start(k) {
+      stop();
+      const mine = hold;
+      key = k;
+      step(k);
+      if (hold === mine) tick(k, opts.delayMs ?? REPEAT_DELAY_MS);
+    },
+    stop,
+    held: () => key
+  };
+}
+
+// src/measure.ts
+var UNBOUNDED = { minWidth: 0, maxWidth: Infinity, minHeight: 0, maxHeight: Infinity };
+function exactly(width, height) {
+  return { minWidth: width, maxWidth: width, minHeight: height, maxHeight: height };
+}
+function fixedWidth(width) {
+  return { minWidth: width, maxWidth: width, minHeight: 0, maxHeight: Infinity };
+}
+function clampTo(size, min, max) {
+  return Math.max(min, Math.min(size, max));
+}
+function envPx(env, name, fallback) {
+  const raw = env.token(name)?.trim();
+  if (raw) {
+    const m = /^(-?\d*\.?\d+)px$/.exec(raw);
+    if (m) return Number(m[1]);
+  }
+  if (typeof fallback === "number") return fallback;
+  if (typeof fallback === "string") return envPx(env, fallback);
+  throw new Error(`envPx: ${name} is not a px length (${raw ?? "unset"})`);
+}
+function envNumber(env, name, fallback) {
+  const n = Number.parseFloat(env.token(name) ?? "");
+  return Number.isFinite(n) ? n : fallback;
+}
+function centeredBaseline(boxHeight, lineHeight, extent) {
+  const top = (boxHeight - lineHeight) / 2;
+  return top + (lineHeight - (extent.ascent + extent.descent)) / 2 + extent.ascent;
+}
+function offsetRect(r, dx, dy) {
+  return { x: r.x + dx, y: r.y + dy, width: r.width, height: r.height };
+}
+
+// src/button.ts
+function buttonParts(face) {
+  if (face.iconOnly) return [face.loading ? "spinner" : "icon"];
+  const out = [];
+  if (face.loading) out.push("spinner");
+  else if (face.leadingIcon) out.push("leading");
+  if (face.label !== void 0) out.push("label");
+  if (face.trailingIcon) out.push("trailing");
+  return out;
+}
+var BUTTON_SPINNER_SIZE = 14;
+function buttonMetrics(env, size = "md", iconOnly = false) {
+  const sm = size === "sm";
+  const height = envPx(env, sm ? "--wzl-control-h-sm" : "--wzl-control-h");
+  return {
+    height,
+    padX: iconOnly ? 0 : envPx(env, "--wzl-button-pad-x", sm ? "--wzl-space-4" : "--wzl-space-6"),
+    gap: envPx(env, "--wzl-space-3"),
+    iconSize: envPx(env, "--wzl-button-icon-size", sm ? 12 : 14),
+    spinnerSize: BUTTON_SPINNER_SIZE,
+    font: {
+      family: env.token("--wzl-font-ui"),
+      size: envPx(env, "--wzl-field-font-size", sm ? "--wzl-font-size-sm" : "--wzl-font-size"),
+      weight: envNumber(env, "--wzl-button-font-weight", envNumber(env, "--wzl-font-weight-medium", 500))
+    }
+  };
+}
+function measureButton(face, c, env) {
+  const m = buttonMetrics(env, face.size, face.iconOnly);
+  const parts = buttonParts(face);
+  let text = null;
+  const widths = parts.map((p) => {
+    if (p === "spinner") return m.spinnerSize;
+    if (p !== "label") return m.iconSize;
+    text = env.text(face.label ?? "", m.font);
+    return text.width;
+  });
+  const gaps = Math.max(0, parts.length - 1) * m.gap;
+  const content = widths.reduce((a, b) => a + b, 0) + gaps;
+  const width = clampTo(face.iconOnly ? m.height : content + m.padX * 2, c.minWidth, c.maxWidth);
+  const height = clampTo(m.height, c.minHeight, c.maxHeight);
+  const over = content - (width - m.padX * 2);
+  const label = parts.indexOf("label");
+  if (over > 0 && label >= 0) widths[label] = Math.max(0, widths[label] - over);
+  const fitted = widths.reduce((a, b) => a + b, 0) + gaps;
+  let x = (width - fitted) / 2;
+  const laid = parts.map((part, i) => {
+    const w = widths[i];
+    const h = part === "label" ? m.font.size : part === "spinner" ? m.spinnerSize : m.iconSize;
+    const rect = { x, y: (height - h) / 2, width: w, height: h };
+    x += w + m.gap;
+    return { part, rect };
+  });
+  const baseline = text ? centeredBaseline(height, m.font.size, text) : height;
+  return { width, height, baseline, layout: { parts: laid, metrics: m } };
+}
+var IDLE_PRESS = { hovered: false, held: false };
+function pressStep(s, input) {
+  switch (input.type) {
+    case "down":
+      return { state: { ...s, held: true }, pressed: false };
+    case "move":
+      return { state: s.held === input.inside ? s : { ...s, held: input.inside }, pressed: false };
+    case "up":
+      return { state: { ...s, held: false }, pressed: s.held && input.inside };
+    case "cancel":
+      return { state: { ...s, held: false }, pressed: false };
+    case "enter":
+      return { state: { ...s, hovered: true }, pressed: false };
+    case "leave":
+      return { state: { ...s, hovered: false }, pressed: false };
+  }
+}
+function isPressKey(key) {
+  return key === "Enter" || key === " ";
+}
+
+// src/rowList.ts
+function listMode(o) {
+  if (o.controls || o.activatable && !o.selection) return "grid";
+  return o.selection ? "listbox" : "list";
+}
+var LIST_ROLES = {
+  list: { container: "list", row: "listitem" },
+  listbox: { container: "listbox", row: "option" },
+  grid: { container: "grid", row: "row" }
+};
+function dropSide(dropIndex, i, count) {
+  if (dropIndex == null) return void 0;
+  if (dropIndex === i) return "before";
+  if (dropIndex >= count && i === count - 1) return "after";
+  return void 0;
+}
+var ROW_GAP = 1;
+function rowListMetrics(env) {
+  const size = envPx(env, "--wzl-font-size-sm");
+  return {
+    rowHeight: envPx(env, "--wzl-control-h"),
+    padX: envPx(env, "--wzl-space-4"),
+    gap: envPx(env, "--wzl-space-4"),
+    emptyPadY: envPx(env, "--wzl-space-6"),
+    font: { family: env.token("--wzl-font-ui"), size, weight: 400 },
+    lineHeight: size * envNumber(env, "--wzl-leading-snug", 1.2)
+  };
+}
+function measureRowList(face, c, env) {
+  const m = rowListMetrics(env);
+  if (face.rows.length === 0) {
+    const t = env.text(face.empty ?? "\u2014", m.font);
+    const line = m.lineHeight;
+    const width2 = clampTo(t.width + m.padX * 2, c.minWidth, c.maxWidth);
+    const height2 = clampTo(line + m.emptyPadY * 2, c.minHeight, c.maxHeight);
+    const empty = { x: m.padX, y: m.emptyPadY, width: Math.max(0, width2 - m.padX * 2), height: line };
+    return { width: width2, height: height2, baseline: m.emptyPadY + centeredBaseline(line, line, t), layout: { rows: [], empty, metrics: m } };
+  }
+  const extents = face.rows.map((r) => env.text(r.label, m.font));
+  const side = (r) => (r.leadingWidth != null ? r.leadingWidth + m.gap : 0) + (r.trailingWidth != null ? r.trailingWidth + m.gap : 0);
+  const intrinsic = Math.max(...face.rows.map((r, i) => m.padX * 2 + side(r) + extents[i].width));
+  const width = clampTo(intrinsic, c.minWidth, c.maxWidth);
+  const n = face.rows.length;
+  const height = clampTo(n * m.rowHeight + (n - 1) * ROW_GAP, c.minHeight, c.maxHeight);
+  const rows = face.rows.map((r, i) => {
+    const y = i * (m.rowHeight + ROW_GAP);
+    const h = m.rowHeight;
+    const line = m.lineHeight;
+    let x = m.padX;
+    let right = width - m.padX;
+    const box = { x: 0, y, width, height: h };
+    const leading = r.leadingWidth != null ? { x, y, width: r.leadingWidth, height: h } : void 0;
+    if (leading) x += r.leadingWidth + m.gap;
+    const trailing = r.trailingWidth != null ? { x: right - r.trailingWidth, y, width: r.trailingWidth, height: h } : void 0;
+    if (trailing) right -= r.trailingWidth + m.gap;
+    const label = { x, y: y + (h - line) / 2, width: Math.max(0, right - x), height: line };
+    return { id: r.id, rect: box, label, ...leading ? { leading } : {}, ...trailing ? { trailing } : {} };
+  });
+  const baseline = centeredBaseline(m.rowHeight, m.lineHeight, extents[0]);
+  return { width, height, baseline, layout: { rows, metrics: m } };
+}
+function rowAtY(layout, y) {
+  const i = layout.rows.findIndex((r) => y >= r.rect.y && y < r.rect.y + r.rect.height);
+  return i < 0 ? null : i;
+}
+
+export { BUTTON_SPINNER_SIZE, EMPTY_TYPEAHEAD, IDLE_PRESS, LIST_ROLES, REPEAT_DELAY_MS, REPEAT_EVERY_MS, ROW_GAP, TYPEAHEAD_RESET_MS, UNBOUNDED, arrowMove, arrowSteps, attract, buttonMetrics, buttonParts, centeredBaseline, clampOrdered, clampTo, createStepRepeat, dropSide, editEnd, envNumber, envPx, exactly, firstStop, fixedWidth, gapByMidpoint, imeKey, isNoopDrop, isNudgeChord, isPressKey, listMode, measureButton, measureRowList, moveItems, movedIndex, nearestGap, nudgeGap, nudgeOf, offsetRect, pressStep, rangeKey, rovingKey, rowAtY, rowKey, rowListMetrics, sliderKey, stepStop, tabSort, tabStep, timerScheduler, treeKey, typeaheadMatch, typeaheadStep, usableStops };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map