@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-7HPRF5XN.js

@@ -0,0 +1,525 @@
+import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel } from './chunk-NTRZGNEX.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-CMEE37QJ.js';
+import { focusables } from './chunk-ITHXJHBB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './TreeCanvas-WBNQPHC7.css';
+import { useState, useRef, useMemo, useLayoutEffect, useCallback, useImperativeHandle, useSyncExternalStore } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ENTRANCE_STEP_MS = 60;
+var REFLOW_MS = 350;
+var ROW_TOLERANCE = 5;
+function entranceOrder(layout) {
+  const row = (one) => Math.round(one.y / ROW_TOLERANCE);
+  return [...layout.nodes].sort((a, b) => row(a) - row(b) || a.x - b.x || (a.id < b.id ? -1 : 1)).map((one) => one.id);
+}
+function useStillness() {
+  const query = "(prefers-reduced-motion: reduce)";
+  const subscribe = useCallback((notify) => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+    };
+    const list = window.matchMedia(query);
+    list.addEventListener("change", notify);
+    return () => list.removeEventListener("change", notify);
+  }, []);
+  const read = useCallback(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false,
+    []
+  );
+  return useSyncExternalStore(subscribe, read, () => false);
+}
+function useEntrance(layout, still) {
+  const [shown, setShown] = useState(null);
+  const started = useRef(false);
+  const latest = useRef(layout);
+  latest.current = layout;
+  const ready = layout !== null && layout.nodes.length > 0;
+  useLayoutEffect(() => {
+    if (!ready || started.current) return void 0;
+    started.current = true;
+    if (still) return void 0;
+    const order = entranceOrder(latest.current);
+    setShown(/* @__PURE__ */ new Set());
+    const timers = order.map(
+      (id, at) => setTimeout(() => {
+        setShown((was) => was === null ? was : /* @__PURE__ */ new Set([...was, id]));
+      }, at * ENTRANCE_STEP_MS)
+    );
+    const whole = setTimeout(() => setShown(null), (order.length + 1) * ENTRANCE_STEP_MS);
+    return () => {
+      timers.forEach(clearTimeout);
+      clearTimeout(whole);
+    };
+  }, [ready, still]);
+  return shown;
+}
+function ease(t) {
+  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+}
+function useReflow(layout, still) {
+  const [drawn, setDrawn] = useState(null);
+  const shown = useRef(/* @__PURE__ */ new Map());
+  const frame = useRef(null);
+  useLayoutEffect(() => {
+    if (layout === null) return void 0;
+    const cancel = () => {
+      if (frame.current !== null) cancelAnimationFrame(frame.current);
+      frame.current = null;
+    };
+    cancel();
+    const record = (nodes) => {
+      shown.current = new Map(nodes.map((one) => [one.id, { x: one.x, y: one.y }]));
+    };
+    const from = shown.current;
+    const moves = layout.nodes.some((one) => {
+      const was = from.get(one.id);
+      return was !== void 0 && (was.x !== one.x || was.y !== one.y);
+    });
+    if (still || !moves || typeof requestAnimationFrame !== "function") {
+      record(layout.nodes);
+      setDrawn(layout);
+      return void 0;
+    }
+    const start = new Map(from);
+    const began = performance.now();
+    const tick = (now) => {
+      const through = ease(Math.min((now - began) / REFLOW_MS, 1));
+      const nodes = layout.nodes.map((one) => {
+        const was = start.get(one.id);
+        if (was === void 0) return one;
+        return { ...one, x: was.x + (one.x - was.x) * through, y: was.y + (one.y - was.y) * through };
+      });
+      record(nodes);
+      setDrawn({ nodes, byId: new Map(nodes.map((one) => [one.id, one])), bounds: layout.bounds });
+      frame.current = through < 1 ? requestAnimationFrame(tick) : null;
+    };
+    frame.current = requestAnimationFrame(tick);
+    return cancel;
+  }, [layout, still]);
+  return drawn;
+}
+var GAP_PROBE = "crewlet:tree-canvas-gap";
+var MARGIN_PROBE = "crewlet:tree-canvas-margin";
+function TreeCanvas({
+  label,
+  nodes,
+  cards,
+  cardOf,
+  renderCard,
+  renderUnder,
+  cardOutline,
+  cardTone,
+  appearance = "card",
+  ranks,
+  connector = "step",
+  onNodeKey,
+  onNodeKeyDown,
+  hasNodeMenu,
+  selectedId = null,
+  onSelect,
+  anchorNode = null,
+  overlay,
+  controlsPlacement,
+  controlsExtra,
+  controlsBelow,
+  hint,
+  dimmed = false,
+  composing = null,
+  labels,
+  ref,
+  className
+}) {
+  const tree = useTreeState(nodes, selectedId);
+  const { model, expanded, active, setActive, toggle } = tree;
+  const [menuFor, setMenuFor] = useState(null);
+  const composeId = composing?.id ?? null;
+  const composeParent = composing?.parent ?? null;
+  const eased = useRef(null);
+  const returnTo = useRef(null);
+  const takeFocus = useRef(false);
+  const composeEl = useRef(null);
+  const { measure, sizes, measured } = useMeasuredSizes();
+  const cardForest = useMemo(() => {
+    const forest = cards(model, expanded);
+    if (composeId === null || composeParent === null) return forest;
+    const graft = (card2) => card2.id === composeParent ? { ...card2, children: [...card2.children, { id: composeId, children: [] }] } : { ...card2, children: card2.children.map(graft) };
+    return forest.map(graft);
+  }, [cards, model, expanded, composeId, composeParent]);
+  const cardIds = useMemo(() => {
+    const out = [];
+    const walk = (card2) => {
+      out.push(card2.id);
+      card2.children.forEach(walk);
+    };
+    cardForest.forEach(walk);
+    return out;
+  }, [cardForest]);
+  const spacing = ranks ?? (appearance === "node" ? "shared" : "per-parent");
+  const previousLayout = useRef(null);
+  const layout = useMemo(() => {
+    if (!measured([...cardIds, GAP_PROBE, MARGIN_PROBE])) return previousLayout.current;
+    const size = (id) => sizes.get(id);
+    const gap = size(GAP_PROBE);
+    const toLayout = (card2) => ({
+      id: card2.id,
+      width: size(card2.id).width,
+      height: size(card2.id).height,
+      children: card2.children.map(toLayout)
+    });
+    return layoutForest(cardForest.map(toLayout), {
+      gapX: gap.width,
+      gapY: gap.height,
+      ranks: spacing,
+      margin: size(MARGIN_PROBE).width
+    });
+  }, [cardForest, cardIds, measured, sizes, spacing]);
+  previousLayout.current = layout;
+  const still = useStillness();
+  const drawn = useReflow(layout, still) ?? layout;
+  const arrived = useEntrance(layout, still);
+  const positions = useMemo(
+    () => layout ? new Map(layout.nodes.map((one) => [one.id, { x: one.x, y: one.y }])) : null,
+    [layout]
+  );
+  const canvas = useRef(null);
+  const shownPositions = useRef(null);
+  const anchorId = useMemo(() => {
+    const was = shownPositions.current;
+    if (!was) return null;
+    for (const candidate of [anchorNode, active]) {
+      if (!candidate || !model.parent.has(candidate)) continue;
+      for (const id of [candidate, ...treeAncestors(model, candidate).reverse()]) {
+        const card2 = cardOf(id);
+        if (was.has(card2)) return card2;
+      }
+    }
+    return null;
+  }, [anchorNode, active, model, cardOf]);
+  useLayoutAnchor(positions, anchorId, (before, after) => canvas.current?.anchor(before, after));
+  useLayoutEffect(() => {
+    shownPositions.current = positions;
+  }, [positions]);
+  const items = useRef(/* @__PURE__ */ new Map());
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const refFor = (id) => {
+    let callback = itemRefs.current.get(id);
+    if (!callback) {
+      callback = (el) => {
+        if (el) items.current.set(id, el);
+        else if (items.current.get(id)?.isConnected === false) items.current.delete(id);
+      };
+      itemRefs.current.set(id, callback);
+    }
+    return callback;
+  };
+  const pendingFocus = useRef(null);
+  const focusNow = useCallback(
+    (id) => {
+      const el = items.current.get(id);
+      const placed = layout?.byId.get(cardOf(id));
+      if (!el || !el.isConnected || !placed) return false;
+      el.focus({ preventScroll: true });
+      const card2 = el.closest(".crewlet-tree-canvas__card");
+      const top = card2 ? offsetWithin(el, card2) : 0;
+      const rect = {
+        x: placed.x,
+        y: placed.y + top,
+        width: placed.width,
+        height: el.offsetHeight > 0 && top > 0 ? el.offsetHeight : placed.height
+      };
+      canvas.current?.reveal(rect);
+      return true;
+    },
+    [layout, cardOf]
+  );
+  const focusNode = useCallback(
+    (id) => {
+      if (!model.parent.has(id)) return;
+      const opened = tree.open(id);
+      setActive(id);
+      if (opened || !focusNow(id)) pendingFocus.current = id;
+    },
+    [model, tree, setActive, focusNow]
+  );
+  useLayoutEffect(() => {
+    const id = pendingFocus.current;
+    if (id !== null && focusNow(id)) pendingFocus.current = null;
+  });
+  const focusRef = useRef(focusNode);
+  focusRef.current = focusNode;
+  const placedRef = useRef(layout);
+  placedRef.current = layout;
+  const cardOfRef = useRef(cardOf);
+  cardOfRef.current = cardOf;
+  const { expandAll, collapseAll } = tree;
+  useImperativeHandle(
+    ref,
+    () => ({
+      focusNode: (id) => focusRef.current(id),
+      expandAll,
+      collapseAll,
+      focusRegion: (id) => {
+        const placed = placedRef.current?.byId.get(cardOfRef.current(id));
+        if (placed) canvas.current?.focusRegion(placed);
+      },
+      restoreView: () => canvas.current?.restoreView()
+    }),
+    [expandAll, collapseAll]
+  );
+  const treeNow = useRef({ model, expanded, toggle, open: tree.open });
+  treeNow.current = { model, expanded, toggle, open: tree.open };
+  useLayoutEffect(() => {
+    if (composeParent === null) return;
+    const { model: shown, expanded: shows, toggle: flip, open: reveal } = treeNow.current;
+    reveal(composeParent);
+    if (treeExpandable(shown, composeParent) && !shows.has(composeParent)) flip(composeParent);
+  }, [composeParent]);
+  const composeRef = useCallback(
+    (el) => {
+      composeEl.current = el;
+      if (composeId !== null) measure(composeId)(el);
+    },
+    [measure, composeId]
+  );
+  const placedCards = layout?.byId;
+  useLayoutEffect(() => {
+    const was = eased.current;
+    if (composeId !== null) {
+      canvas.current?.rememberView();
+      takeFocus.current = takeFocus.current || eased.current !== composeId;
+      const box = placedCards?.get(composeId);
+      if (!box || was === composeId) return;
+      eased.current = composeId;
+      returnTo.current = composeParent;
+      canvas.current?.focusRegion(box, CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM);
+      pendingFocus.current = null;
+      return;
+    }
+    if (was === null) return;
+    const back = returnTo.current;
+    eased.current = null;
+    returnTo.current = null;
+    canvas.current?.restoreView();
+    if (back !== null) {
+      setActive(back);
+      items.current.get(back)?.focus({ preventScroll: true });
+    }
+  }, [composeId, composeParent, placedCards, setActive]);
+  useLayoutEffect(() => {
+    if (!takeFocus.current) return;
+    const ghost = composeEl.current;
+    if (!ghost) {
+      takeFocus.current = false;
+      return;
+    }
+    (focusables(ghost)[0] ?? ghost).focus({ preventScroll: true });
+    takeFocus.current = !ghost.contains(document.activeElement);
+  });
+  const select = (id) => onSelect?.(id);
+  const moveTo = (id) => {
+    if (id === null) return;
+    select(id);
+    focusNode(id);
+  };
+  function onKeyDown(event) {
+    const target = event.target;
+    if (event.key === "Escape" && composing !== null) {
+      event.preventDefault();
+      event.stopPropagation();
+      composing.onCancel();
+      return;
+    }
+    const id = target.getAttribute("data-tree-id");
+    if (id === null || !model.parent.has(id)) return;
+    if (onNodeKeyDown?.(id, event)) {
+      event.preventDefault();
+      return;
+    }
+    const action = treeItemAction(event);
+    if (action === "menu") {
+      if (hasNodeMenu?.(id)) {
+        event.preventDefault();
+        setMenuFor(id);
+      }
+      return;
+    }
+    if (action !== null) {
+      if (onNodeKey?.(id, action)) event.preventDefault();
+      return;
+    }
+    const step = treeStep(tree, id, event);
+    if (step === void 0) return;
+    event.preventDefault();
+    if (step === null) return;
+    if ("toggle" in step) toggle(step.toggle);
+    else moveTo(step.focus);
+  }
+  const cardPress = (id) => ({
+    onMouseDown: (event) => {
+      event.preventDefault();
+      select(id);
+      setActive(id);
+      items.current.get(id)?.focus({ preventScroll: true });
+    }
+  });
+  const card = {
+    item: (id) => ({
+      role: "treeitem",
+      tabIndex: id === active ? 0 : -1,
+      "aria-level": treeLevel(model, id),
+      "aria-setsize": treeSetSize(model, id),
+      "aria-posinset": treePosInSet(model, id),
+      "aria-expanded": treeExpandable(model, id) ? expanded.has(id) : void 0,
+      "aria-selected": id === selectedId,
+      "data-tree-id": id,
+      ref: refFor(id),
+      onClick: (event) => {
+        select(id);
+        setActive(id);
+        event.currentTarget.focus({ preventScroll: true });
+      },
+      onDoubleClick: () => onNodeKey?.(id, "activate")
+    }),
+    expanded: (id) => expanded.has(id),
+    expandable: (id) => treeExpandable(model, id),
+    toggle,
+    activate: (id) => setActive(id),
+    actions: (id) => ({
+      className: "crewlet-tree-canvas__actions",
+      "aria-hidden": "true",
+      "data-menu-open": menuFor === id ? "true" : void 0,
+      ...cardPress(id)
+    }),
+    press: cardPress,
+    menuOpen: (id) => menuFor === id,
+    setMenuOpen: (id, open) => {
+      if (open) setActive(id);
+      setMenuFor((was) => open ? id : was === id ? null : was);
+    }
+  };
+  const links = useMemo(() => drawn ? layoutConnectors(drawn, connector) : [], [drawn, connector]);
+  const widestCard = useMemo(() => {
+    let widest = 0;
+    for (const one of layout?.nodes ?? []) {
+      if (one.id !== composeId) widest = Math.max(widest, one.width);
+    }
+    return widest > 0 ? widest : void 0;
+  }, [layout, composeId]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "crewlet-tree-canvas",
+        appearance === "node" && "crewlet-tree-canvas--node",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        Canvas,
+        {
+          label,
+          content: layout?.bounds ?? null,
+          ref: canvas,
+          overlay,
+          controlsPlacement: controlsPlacement ?? (appearance === "node" ? "top-right" : void 0),
+          controlsExtra,
+          controlsBelow,
+          hint,
+          dimmed,
+          largestItemWidth: widestCard,
+          labels,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "crewlet-tree-canvas__gap", ref: measure(GAP_PROBE), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("div", { className: "crewlet-tree-canvas__margin", ref: measure(MARGIN_PROBE), "aria-hidden": "true" }),
+            drawn && /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "crewlet-tree-canvas__links",
+                width: drawn.bounds.width,
+                height: drawn.bounds.height,
+                "aria-hidden": "true",
+                children: links.map((link) => /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: link.d,
+                    "data-tone": link.id === composeId ? void 0 : cardTone?.(link.id),
+                    "data-composing": link.id === composeId ? "true" : void 0,
+                    "data-enter": arrived === null ? void 0 : arrived.has(link.id) ? "shown" : "waiting"
+                  },
+                  link.id
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { role: "tree", "aria-label": label, className: "crewlet-tree-canvas__tree", onKeyDown, children: cardIds.filter((id) => id !== composeId).map((id) => {
+              const placed = drawn?.byId.get(id);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "none",
+                  ref: measure(id),
+                  className: cx(
+                    "crewlet-tree-canvas__card",
+                    cardOutline?.(id) && "crewlet-tree-canvas__card--outline"
+                  ),
+                  "data-tone": cardTone?.(id),
+                  "data-enter": arrived === null ? void 0 : arrived.has(id) ? "shown" : "waiting",
+                  style: placed ? { transform: `translate(${placed.x}px, ${placed.y}px)` } : { visibility: "hidden" },
+                  children: [
+                    renderCard(id, card),
+                    renderUnder ? /* @__PURE__ */ jsx(UnderSlot, { id, card, render: renderUnder }) : null
+                  ]
+                },
+                id
+              );
+            }) }),
+            composing !== null && /* THE REGION LISTENS; IT IS NOT A CONTROL. Escape belongs to the
+               whole form rather than to whichever field the reader happened to
+               be in, so one handler on the boundary catches it from all of them,
+               which is the same arrangement the tree above makes for its items.
+               It takes no tab stop of its own: the -1 is there so focus can be
+               PUT on it before the form has drawn a control. */
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- see above
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: composeRef,
+                role: "group",
+                "aria-label": composing.label,
+                tabIndex: -1,
+                className: "crewlet-tree-canvas__card crewlet-tree-canvas__card--composing",
+                "data-composing": "true",
+                onKeyDown: (event) => {
+                  if (event.key !== "Escape") return;
+                  event.stopPropagation();
+                  composing.onCancel();
+                },
+                style: (() => {
+                  const placed = composeId === null ? void 0 : drawn?.byId.get(composeId) ?? placedCards?.get(composeId);
+                  return placed ? { transform: `translate(${placed.x}px, ${placed.y}px)` } : { visibility: "hidden" };
+                })(),
+                children: composing.render()
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function UnderSlot({
+  id,
+  card,
+  render
+}) {
+  const content = render(id, card);
+  if (content === null || content === void 0 || content === false) return null;
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-tree-canvas__under", "aria-hidden": "true", ...card.press(id), children: content });
+}
+function offsetWithin(el, container) {
+  let top = 0;
+  for (let at = el; at && at !== container; at = at.offsetParent) {
+    top += at.offsetTop;
+  }
+  return top;
+}
+
+export { TreeCanvas };

package/dist/chunk-7RPGY3JE.js

@@ -0,0 +1,43 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Layer-NAFSGCFA.css';
+import { createContext, useState, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/Layer/place.ts
+var LAYER_REPOSITION_EVENT = "crewlet:viewchange";
+var LAYER_GAP = 4;
+function placePopup(anchor, size, bounds, gap = LAYER_GAP, prefer = "below") {
+  const below = anchor.y + anchor.height + gap;
+  const above = anchor.y - gap - size.height;
+  const roomBelow = bounds.y + bounds.height - below;
+  const roomAbove = anchor.y - gap - bounds.y;
+  const takesPreferred = prefer === "below" ? roomBelow >= size.height || roomBelow >= roomAbove : roomAbove >= size.height || roomAbove >= roomBelow;
+  const side = takesPreferred ? prefer : prefer === "below" ? "above" : "below";
+  const wanted = side === "below" ? below : above;
+  const maxY = bounds.y + bounds.height - size.height;
+  const top = Math.max(bounds.y, Math.min(wanted, maxY));
+  const maxX = bounds.x + bounds.width - size.width;
+  const left = Math.max(bounds.x, Math.min(anchor.x, maxX));
+  return { left, top, side };
+}
+function viewportBounds() {
+  return { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight };
+}
+function outsideBounds(anchor, bounds) {
+  return anchor.x + anchor.width < bounds.x || anchor.y + anchor.height < bounds.y || anchor.x > bounds.x + bounds.width || anchor.y > bounds.y + bounds.height;
+}
+var LayerContext = createContext(null);
+function LayerHost({ children, className }) {
+  const [node, setNode] = useState(null);
+  return /* @__PURE__ */ jsxs(LayerContext.Provider, { value: node, children: [
+    children,
+    /* @__PURE__ */ jsx("div", { ref: setNode, className: cx("crewlet-layer-host", className) })
+  ] });
+}
+function useLayerContainer() {
+  const host = useContext(LayerContext);
+  if (host) return host;
+  return typeof document === "undefined" ? null : document.body;
+}
+
+export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds };

package/dist/chunk-A2UXBCLO.js

@@ -0,0 +1,48 @@
+import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Section-QRUPRIQ2.css';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Section = ({
+  as: As = "section",
+  /*
+   * THE CONSOLE BAND IS THE DEFAULT, because a band is a marketing decision
+   * and a screen of panels is the common one. At the md band every section on
+   * the engine dashboard spent 80px above and 80px below itself, so a screen
+   * of three named sections carried 480px of nothing and put roughly one panel
+   * in a viewport. A page that wants the band states it.
+   */
+  spacing = "compact",
+  title,
+  headingLevel,
+  description,
+  actions,
+  className,
+  children,
+  ...rest
+}) => {
+  const level = useHeadingLevel();
+  const resolved = headingLevel ?? level;
+  const Heading = headingTag(resolved);
+  const titleId = useId();
+  const titled = title !== void 0;
+  return /* @__PURE__ */ jsxs(
+    As,
+    {
+      ...rest,
+      className: cx("crewlet-section", `crewlet-section--${spacing}`, titled && "crewlet-section--titled", className),
+      "aria-labelledby": titled ? rest["aria-labelledby"] ?? titleId : rest["aria-labelledby"],
+      children: [
+        titled ? /* @__PURE__ */ jsxs("div", { className: "crewlet-section__header", children: [
+          /* @__PURE__ */ jsx(Heading, { id: titleId, className: "crewlet-section__title", children: title }),
+          description === void 0 ? null : /* @__PURE__ */ jsx("p", { className: "crewlet-section__description", children: description }),
+          actions === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-section__actions", children: actions })
+        ] }) : null,
+        titled ? /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(resolved), children }) : children
+      ]
+    }
+  );
+};
+
+export { Section };