@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-NTRZGNEX.js

@@ -0,0 +1,529 @@
+import { useMemo, useState, useCallback, useRef, useEffect, useLayoutEffect } from 'react';
+import { flushSync } from 'react-dom';
+
+// src/Tree/model.ts
+function createTreeModel(forest) {
+  const children = /* @__PURE__ */ new Map();
+  const parent = /* @__PURE__ */ new Map();
+  const label = /* @__PURE__ */ new Map();
+  const depth = /* @__PURE__ */ new Map();
+  const order = [];
+  const visit = (node, up, level) => {
+    if (parent.has(node.id)) {
+      throw new RangeError(`createTreeModel: the id "${node.id}" appears twice; every row needs its own id`);
+    }
+    parent.set(node.id, up);
+    label.set(node.id, node.label);
+    depth.set(node.id, level);
+    order.push(node.id);
+    const kids2 = node.children ?? [];
+    children.set(
+      node.id,
+      kids2.map((kid) => kid.id)
+    );
+    kids2.forEach((kid) => visit(kid, node.id, level + 1));
+  };
+  forest.forEach((root) => visit(root, null, 0));
+  return { roots: forest.map((root) => root.id), children, parent, label, depth, order };
+}
+var kids = (tree, id) => tree.children.get(id) ?? [];
+function siblings(tree, id) {
+  const up = tree.parent.get(id);
+  return up == null ? tree.roots : kids(tree, up);
+}
+function treeExpandable(tree, id) {
+  return kids(tree, id).length > 0;
+}
+function treeLevel(tree, id) {
+  return (tree.depth.get(id) ?? 0) + 1;
+}
+function treeSetSize(tree, id) {
+  return siblings(tree, id).length;
+}
+function treePosInSet(tree, id) {
+  return siblings(tree, id).indexOf(id) + 1;
+}
+function treeParent(tree, id) {
+  return tree.parent.get(id) ?? null;
+}
+function treeFirstChild(tree, id) {
+  return kids(tree, id)[0] ?? null;
+}
+function treeAncestors(tree, id) {
+  const out = [];
+  for (let up = tree.parent.get(id) ?? null; up !== null; up = tree.parent.get(up) ?? null) {
+    out.unshift(up);
+  }
+  return out;
+}
+function treeExpandTo(tree, expanded, id) {
+  return /* @__PURE__ */ new Set([...expanded, ...treeAncestors(tree, id)]);
+}
+function treeAllExpandable(tree) {
+  return new Set(tree.order.filter((id) => treeExpandable(tree, id)));
+}
+var open = (tree, expanded, id) => expanded.has(id) && treeExpandable(tree, id);
+function treeVisible(tree, expanded) {
+  const out = [];
+  const walk = (ids) => {
+    for (const id of ids) {
+      out.push(id);
+      if (open(tree, expanded, id)) walk(kids(tree, id));
+    }
+  };
+  walk(tree.roots);
+  return out;
+}
+function treeFirst(tree) {
+  return tree.roots[0] ?? null;
+}
+function treeLast(tree, expanded) {
+  let last = tree.roots[tree.roots.length - 1] ?? null;
+  while (last !== null && open(tree, expanded, last)) {
+    const children = kids(tree, last);
+    last = children[children.length - 1];
+  }
+  return last;
+}
+function treeNext(tree, expanded, id) {
+  if (open(tree, expanded, id)) return kids(tree, id)[0];
+  for (let at = id; at !== null; at = treeParent(tree, at)) {
+    const row = siblings(tree, at);
+    const next = row[row.indexOf(at) + 1];
+    if (next !== void 0) return next;
+  }
+  return null;
+}
+function treePrevious(tree, expanded, id) {
+  const row = siblings(tree, id);
+  const at = row.indexOf(id);
+  if (at <= 0) return treeParent(tree, id);
+  let last = row[at - 1];
+  while (open(tree, expanded, last)) {
+    const children = kids(tree, last);
+    last = children[children.length - 1];
+  }
+  return last;
+}
+function treeExpandOrDescend(tree, expanded, id) {
+  if (!treeExpandable(tree, id)) return null;
+  return expanded.has(id) ? { focus: kids(tree, id)[0] } : { expand: id };
+}
+function treeCollapseOrAscend(tree, expanded, id) {
+  if (open(tree, expanded, id)) return { collapse: id };
+  const up = treeParent(tree, id);
+  return up === null ? null : { focus: up };
+}
+var TYPE_AHEAD_RESET_MS = 500;
+var RESERVED = /* @__PURE__ */ new Set(["+", "-", "0"]);
+function liveWord(state, now) {
+  return now - state.at > TYPE_AHEAD_RESET_MS ? "" : state.text;
+}
+function isTypeAheadKey(event, state, now) {
+  if (event.ctrlKey || event.metaKey || event.altKey) return false;
+  if ([...event.key].length !== 1) return false;
+  if (liveWord(state, now) !== "") return true;
+  return event.key !== " " && !RESERVED.has(event.key);
+}
+function typeAheadBuffer(state, key, now) {
+  return { text: liveWord(state, now) + key, at: now };
+}
+function treeTypeAhead(tree, expanded, from, text) {
+  if (text === "") return null;
+  const rows = treeVisible(tree, expanded);
+  if (rows.length === 0) return null;
+  const lower = text.toLocaleLowerCase();
+  const cycling = [...lower].every((character) => character === lower[0]);
+  const needle = cycling ? lower[0] : lower;
+  const at = from === null ? -1 : rows.indexOf(from);
+  const begin = at < 0 ? 0 : at + (cycling ? 1 : 0);
+  for (let step = 0; step < rows.length; step++) {
+    const id = rows[(begin + step) % rows.length];
+    if ((tree.label.get(id) ?? "").toLocaleLowerCase().startsWith(needle)) return id;
+  }
+  return null;
+}
+
+// src/Tree/layout.ts
+var MIN_OUTLINE_HEIGHT = 1;
+function bandsOf(roots, gapY) {
+  const height = [];
+  const visit = (node, depth) => {
+    height[depth] = Math.max(height[depth] ?? 0, node.height);
+    node.children.forEach((child) => visit(child, depth + 1));
+  };
+  roots.forEach((root) => visit(root, 0));
+  const top = [];
+  let at = 0;
+  for (let depth = 0; depth < height.length; depth++) {
+    top[depth] = at;
+    at += height[depth] + gapY;
+  }
+  return { top, height };
+}
+function shift(outline, dx, dy) {
+  return outline.map((s) => ({ top: s.top + dy, bottom: s.bottom + dy, value: s.value + dx }));
+}
+function mirror(outline) {
+  return outline.map((s) => ({ ...s, value: -s.value }));
+}
+function merge(a, b, pick) {
+  const cuts = [...new Set([...a, ...b].flatMap((s) => [s.top, s.bottom]))].sort((x, y) => x - y);
+  const out = [];
+  let i = 0;
+  let j = 0;
+  for (let k = 0; k + 1 < cuts.length; k++) {
+    const lo = cuts[k];
+    const hi = cuts[k + 1];
+    while (i < a.length && a[i].bottom <= lo) i++;
+    while (j < b.length && b[j].bottom <= lo) j++;
+    const va = i < a.length && a[i].top <= lo ? a[i].value : void 0;
+    const vb = j < b.length && b[j].top <= lo ? b[j].value : void 0;
+    const value = va !== void 0 && vb !== void 0 ? pick(va, vb) : va ?? vb;
+    if (value === void 0) continue;
+    const last = out[out.length - 1];
+    if (last && last.bottom === lo && last.value === value) last.bottom = hi;
+    else out.push({ top: lo, bottom: hi, value });
+  }
+  return out;
+}
+function separation(right, left, gap) {
+  let need = -Infinity;
+  let i = 0;
+  for (const s of left) {
+    while (i < right.length && right[i].bottom <= s.top) i++;
+    for (let k = i; k < right.length && right[k].top < s.bottom; k++) {
+      need = Math.max(need, right[k].value - s.value);
+    }
+  }
+  if (Number.isFinite(need)) return need + gap;
+  const maxRight = right.reduce((m, s) => Math.max(m, s.value), -Infinity);
+  const minLeft = left.reduce((m, s) => Math.min(m, s.value), Infinity);
+  return maxRight - minLeft + gap;
+}
+function packFromLeft(kids2, gap) {
+  const positions = [0];
+  let reach = kids2[0].right;
+  for (let i = 1; i < kids2.length; i++) {
+    const at = separation(reach, kids2[i].left, gap);
+    positions.push(at);
+    reach = merge(reach, shift(kids2[i].right, at, 0), Math.max);
+  }
+  return positions;
+}
+function pack(kids2, gap) {
+  const fromLeft = packFromLeft(kids2, gap);
+  const mirrored = [...kids2].reverse().map((k) => ({ left: mirror(k.right), right: mirror(k.left) }));
+  const fromRight = packFromLeft(mirrored, gap).map((p) => -p).reverse();
+  const first = fromRight[0];
+  const averaged = fromLeft.map((p, i) => (p + fromRight[i] - first) / 2);
+  const centre = (averaged[0] + averaged[averaged.length - 1]) / 2;
+  return averaged.map((p) => p - centre);
+}
+function build(node, gaps, bands, depth) {
+  const kids2 = node.children.map((child) => build(child, gaps, bands, depth + 1));
+  const half = node.width / 2;
+  const tall = Math.max(node.height, MIN_OUTLINE_HEIGHT);
+  const inBand = bands ? (bands.height[depth] - node.height) / 2 : 0;
+  let left = [{ top: inBand, bottom: inBand + tall, value: -half }];
+  let right = [{ top: inBand, bottom: inBand + tall, value: half }];
+  if (kids2.length === 0) return { node, kids: kids2, offsets: [], inBand, left, right };
+  const offsets = pack(kids2, gaps.gapX);
+  const childTop = bands ? bands.top[depth + 1] - bands.top[depth] : node.height + gaps.gapY;
+  if (!bands && childTop > node.height) {
+    const band = (value) => [{ top: node.height, bottom: childTop, value }];
+    left = merge(left, band(Math.min(-half, offsets[0])), Math.min);
+    right = merge(right, band(Math.max(half, offsets[offsets.length - 1])), Math.max);
+  }
+  kids2.forEach((kid, i) => {
+    left = merge(left, shift(kid.left, offsets[i], childTop), Math.min);
+    right = merge(right, shift(kid.right, offsets[i], childTop), Math.max);
+  });
+  return { node, kids: kids2, offsets, inBand, left, right };
+}
+function validate(roots, gaps) {
+  const size = (value) => Number.isFinite(value) && value >= 0;
+  if (!size(gaps.gapX) || !size(gaps.gapY) || !size(gaps.margin ?? 0)) {
+    throw new RangeError(
+      `layoutForest: gapX, gapY and margin must be finite and non-negative, got ${JSON.stringify(gaps)}`
+    );
+  }
+  if (gaps.ranks !== void 0 && gaps.ranks !== "per-parent" && gaps.ranks !== "shared") {
+    throw new RangeError(`layoutForest: ranks is "${gaps.ranks}"; it is "per-parent" or "shared"`);
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (node) => {
+    if (seen.has(node.id)) {
+      throw new RangeError(`layoutForest: the id "${node.id}" appears twice; every box needs its own id`);
+    }
+    seen.add(node.id);
+    if (!size(node.width) || !size(node.height)) {
+      throw new RangeError(
+        `layoutForest: "${node.id}" is ${node.width} by ${node.height}; a size must be finite and non-negative`
+      );
+    }
+    node.children.forEach(visit);
+  };
+  roots.forEach(visit);
+}
+function layoutForest(roots, gaps) {
+  validate(roots, gaps);
+  const margin = gaps.margin ?? 0;
+  const nodes = [];
+  if (roots.length === 0) {
+    return { nodes, byId: /* @__PURE__ */ new Map(), bounds: { x: 0, y: 0, width: 0, height: 0 } };
+  }
+  const bands = gaps.ranks === "shared" ? bandsOf(roots, gaps.gapY) : null;
+  const trees = roots.map((root) => build(root, gaps, bands, 0));
+  const centres = pack(trees, gaps.gapX);
+  const place = (tree, centre, top, depth, parent) => {
+    const { node } = tree;
+    nodes.push({
+      id: node.id,
+      x: centre - node.width / 2,
+      y: top + tree.inBand,
+      width: node.width,
+      height: node.height,
+      depth,
+      parent
+    });
+    const childTop = bands ? bands.top[depth + 1] : top + node.height + gaps.gapY;
+    tree.kids.forEach((kid, i) => place(kid, centre + tree.offsets[i], childTop, depth + 1, node.id));
+  };
+  trees.forEach((tree, i) => place(tree, centres[i], bands ? bands.top[0] : 0, 0, null));
+  let minX = Infinity;
+  for (const node of nodes) minX = Math.min(minX, node.x);
+  let maxX = -Infinity;
+  let maxY = 0;
+  for (const node of nodes) {
+    node.x += margin - minX;
+    node.y += margin;
+    maxX = Math.max(maxX, node.x + node.width);
+    maxY = Math.max(maxY, node.y + node.height);
+  }
+  return {
+    nodes,
+    byId: new Map(nodes.map((node) => [node.id, node])),
+    bounds: { x: 0, y: 0, width: maxX + margin, height: maxY + margin }
+  };
+}
+var CONNECTOR_RADIUS = 12;
+function layoutConnectors(layout, shape = "step") {
+  const out = [];
+  for (const node of layout.nodes) {
+    if (node.parent === null) continue;
+    const parent = layout.byId.get(node.parent);
+    if (!parent) continue;
+    const fromX = parent.x + parent.width / 2;
+    const fromY = parent.y + parent.height;
+    const toX = node.x + node.width / 2;
+    const toY = node.y;
+    const midY = fromY + (toY - fromY) / 2;
+    const across = toX - fromX;
+    const at = (d) => out.push({ id: node.id, parent: parent.id, d });
+    if (shape === "curve") {
+      at(`M ${fromX} ${fromY} C ${fromX} ${midY}, ${toX} ${midY}, ${toX} ${toY}`);
+      continue;
+    }
+    if (Math.abs(across) < 0.5) {
+      at(`M${fromX} ${fromY}V${toY}`);
+      continue;
+    }
+    const radius = Math.min(CONNECTOR_RADIUS, Math.abs(across) / 2, Math.abs(midY - fromY));
+    const step = across > 0 ? radius : -radius;
+    at(
+      `M${fromX} ${fromY}V${midY - radius}Q${fromX} ${midY},${fromX + step} ${midY}H${toX - step}Q${toX} ${midY},${toX} ${midY + radius}V${toY}`
+    );
+  }
+  return out;
+}
+function useTreeState(forest, selected) {
+  const model = useMemo(() => createTreeModel(forest), [forest]);
+  const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
+  const expanded = useMemo(() => {
+    const out = treeAllExpandable(model);
+    for (const id of collapsed) out.delete(id);
+    return out;
+  }, [model, collapsed]);
+  const rows = useMemo(() => treeVisible(model, expanded), [model, expanded]);
+  const [wanted, setActive] = useState(null);
+  const active = useMemo(() => {
+    const id = wanted ?? selected;
+    if (id !== null && model.parent.has(id)) {
+      if (rows.includes(id)) return id;
+      const shown = treeAncestors(model, id).reverse().find((ancestor) => rows.includes(ancestor));
+      if (shown) return shown;
+    }
+    return treeFirst(model);
+  }, [wanted, selected, model, rows]);
+  const toggle = useCallback((id) => {
+    setCollapsed((was) => {
+      const next = new Set(was);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const current = useRef({ model, collapsed });
+  current.current = { model, collapsed };
+  const expandAll = useCallback(() => setCollapsed(/* @__PURE__ */ new Set()), []);
+  const collapseAll = useCallback(() => {
+    const { model: shown } = current.current;
+    const next = treeAllExpandable(shown);
+    shown.roots.forEach((root) => next.delete(root));
+    setCollapsed(next);
+  }, []);
+  const open2 = useCallback((id) => {
+    const { model: shown, collapsed: closed } = current.current;
+    const hidden = treeAncestors(shown, id).filter((ancestor) => closed.has(ancestor));
+    if (hidden.length === 0) return false;
+    setCollapsed((was) => {
+      const next = new Set(was);
+      hidden.forEach((ancestor) => next.delete(ancestor));
+      return next;
+    });
+    return true;
+  }, []);
+  const buffer = useRef({ text: "", at: 0 });
+  const typed = (event, from, now) => {
+    if (!isTypeAheadKey(event, buffer.current, now)) return void 0;
+    buffer.current = typeAheadBuffer(buffer.current, event.key, now);
+    return treeTypeAhead(model, expanded, from, buffer.current.text);
+  };
+  return { model, expanded, rows, active, setActive, toggle, expandAll, collapseAll, open: open2, typed };
+}
+function treeStep(tree, id, event) {
+  if (event.ctrlKey || event.metaKey || event.altKey) return void 0;
+  const { model, expanded } = tree;
+  const focus = (next) => next === null ? null : { focus: next };
+  switch (event.key) {
+    case "ArrowDown":
+      return focus(treeNext(model, expanded, id));
+    case "ArrowUp":
+      return focus(treePrevious(model, expanded, id));
+    case "ArrowRight": {
+      const step = treeExpandOrDescend(model, expanded, id);
+      if (step === null) return null;
+      return "expand" in step ? { toggle: step.expand } : { focus: step.focus };
+    }
+    case "ArrowLeft": {
+      const step = treeCollapseOrAscend(model, expanded, id);
+      if (step === null) return null;
+      return "collapse" in step ? { toggle: step.collapse } : { focus: step.focus };
+    }
+    case "Home":
+      return focus(treeFirst(model));
+    case "End":
+      return focus(treeLast(model, expanded));
+    default: {
+      const found = tree.typed(event, id, event.timeStamp);
+      return found === void 0 ? void 0 : focus(found);
+    }
+  }
+}
+function treeItemAction(event) {
+  if (event.key === "F10" && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
+    return "menu";
+  }
+  if (event.ctrlKey || event.metaKey || event.altKey) return null;
+  if (event.key === "ContextMenu") return "menu";
+  if (event.shiftKey) return null;
+  if (event.key === "Enter") return "activate";
+  if (event.key === "Delete" || event.key === "Backspace") return "remove";
+  return null;
+}
+var SIZE_EPSILON = 0.5;
+function sizeOf(entry) {
+  const box = entry.borderBoxSize?.[0];
+  if (box) return { width: box.inlineSize, height: box.blockSize };
+  const el = entry.target;
+  return { width: el.offsetWidth, height: el.offsetHeight };
+}
+function useMeasuredSizes() {
+  const [sizes, setSizes] = useState(() => /* @__PURE__ */ new Map());
+  const current = useRef(sizes);
+  current.current = sizes;
+  const observer = useRef(null);
+  const idOf = useRef(/* @__PURE__ */ new WeakMap());
+  const callbacks = useRef(/* @__PURE__ */ new Map());
+  const elements = useRef(/* @__PURE__ */ new Map());
+  const onResize = useCallback((entries) => {
+    let next = null;
+    for (const entry of entries) {
+      const id = idOf.current.get(entry.target);
+      if (id === void 0) continue;
+      const size = sizeOf(entry);
+      const was = (next ?? current.current).get(id);
+      if (was && Math.abs(was.width - size.width) < SIZE_EPSILON && Math.abs(was.height - size.height) < SIZE_EPSILON) {
+        continue;
+      }
+      next ??= new Map(current.current);
+      next.set(id, size);
+    }
+    if (!next) return;
+    const changed = next;
+    current.current = changed;
+    flushSync(() => setSizes(changed));
+  }, []);
+  const observe = useCallback(
+    (el) => {
+      if (typeof ResizeObserver === "undefined") return;
+      observer.current ??= new ResizeObserver(onResize);
+      observer.current.observe(el, { box: "border-box" });
+    },
+    [onResize]
+  );
+  const measure = useCallback(
+    (id) => {
+      let callback = callbacks.current.get(id);
+      if (callback) return callback;
+      callback = (el) => {
+        const previous = elements.current.get(id);
+        if (previous && previous !== el) {
+          observer.current?.unobserve(previous);
+          idOf.current.delete(previous);
+          elements.current.delete(id);
+        }
+        if (!el) return;
+        elements.current.set(id, el);
+        idOf.current.set(el, id);
+        observe(el);
+      };
+      callbacks.current.set(id, callback);
+      return callback;
+    },
+    [observe]
+  );
+  useEffect(
+    () => () => {
+      observer.current?.disconnect();
+      observer.current = null;
+    },
+    []
+  );
+  const measured = useCallback(
+    (ids) => {
+      for (const id of ids) if (!sizes.has(id)) return false;
+      return true;
+    },
+    [sizes]
+  );
+  return { measure, sizes, measured };
+}
+function useLayoutAnchor(positions, anchorId, keep) {
+  const previous = useRef(positions);
+  const keepNow = useRef(keep);
+  keepNow.current = keep;
+  useLayoutEffect(() => {
+    const was = previous.current;
+    previous.current = positions;
+    if (!was || !positions || anchorId === null || was === positions) return;
+    const before = was.get(anchorId);
+    const after = positions.get(anchorId);
+    if (before && after && (before.x !== after.x || before.y !== after.y)) {
+      keepNow.current(before, after);
+    }
+  }, [positions, anchorId]);
+}
+
+export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState };