@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/file-viewer/use-viewer-zoom.js

@@ -0,0 +1,68 @@
+import { useState as h, useMemo as M, useRef as A, useLayoutEffect as I, useCallback as d } from "react";
+import { zoomAtPoint as y, fitWidth as V, fitBox as _ } from "../graph-explorer/camera-math.js";
+import { useViewportGesture as B } from "../graph-explorer/viewport-gesture.js";
+const r = { minScale: 0.05, maxScale: 8 }, S = 1.25, b = 1e-3, F = { x: 0, y: 0, scale: 1 };
+function f(o, n) {
+  return n !== null && Math.abs(o.scale - n.scale) < b;
+}
+function R(o, n, a) {
+  return o === "width" ? V(n, a, r) : _({ x: 0, y: 0, ...n }, a, { ...r, padding: 0, maxScale: 1 });
+}
+function D({ frameKey: o, fit: n }) {
+  const [a, l] = h(F), [e, C] = h(null), [g, E] = h(null), s = g?.key === o ? g.size : null, t = M(
+    () => n && s && e && e.width > 0 && e.height > 0 ? R(n, s, e) : null,
+    [n, s, e]
+  ), p = A({ key: "", fit: null }), m = s ? `${o}|${s.width}x${s.height}` : o;
+  I(() => {
+    if (!t) return;
+    const i = p.current, u = i.key === m;
+    p.current = { key: m, fit: t }, l(
+      (c) => !u || f(c, i.fit) ? t : c
+    );
+  }, [t, m]);
+  const z = B({
+    camera: a,
+    setCamera: l,
+    zoomBounds: r,
+    onResize: C,
+    disabled: n === null
+  }), w = d(
+    (i) => {
+      e && l(
+        (u) => y(u, { x: e.width / 2, y: e.height / 2 }, i, r)
+      );
+    },
+    [e]
+  ), O = d(() => {
+    t && l(t);
+  }, [t]), x = f(a, t), T = t !== null && !(x && Math.abs(t.scale - 1) < b), k = d(
+    (i) => {
+      if (!t) return;
+      const u = i ?? { x: (e?.width ?? 0) / 2, y: (e?.height ?? 0) / 2 };
+      l(
+        (c) => f(c, t) ? y(c, u, 1 / c.scale, r) : t
+      );
+    },
+    [t, e]
+  );
+  return {
+    camera: a,
+    /** Whole-number percent, null until the frame has been measured. */
+    percent: s ? Math.round(a.scale * 100) : null,
+    measured: s !== null,
+    atFit: x,
+    canToggle: T,
+    panning: z.panning,
+    bindViewport: z.bindViewport,
+    setContentSize: (i) => E({ key: o, size: i }),
+    zoomIn: () => w(S),
+    zoomOut: () => w(1 / S),
+    reset: O,
+    toggleActual: k
+  };
+}
+export {
+  r as VIEWER_ZOOM_BOUNDS,
+  D as useViewerZoom
+};
+//# sourceMappingURL=use-viewer-zoom.js.map

package/dist/components/file-viewer/use-viewer-zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewer-zoom.js","sources":["../../../src/components/file-viewer/use-viewer-zoom.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  fitBox,\n  fitWidth,\n  zoomAtPoint,\n  type CameraState,\n  type ScaleBounds,\n  type Size,\n} from \"../graph-explorer/camera-math\";\nimport { useViewportGesture } from \"../graph-explorer/viewport-gesture\";\n\n/* ============================================================================\n   VIEWER ZOOM (DX-4398)\n\n   The file viewer's zoom is a `CameraState` — the same camera the graph explorer\n   moves — so the algebra is not written twice: zoom at the pointer is\n   `zoomAtPoint`, the clamp is `clampScale`, fit-whole is `fitBox`, fit-width is\n   `fitWidth`, and the wheel / drag / pinch session is `useViewportGesture`.\n   What is left here is the DOCUMENT's own concerns: which fit a frame opens at,\n   re-fitting on a new frame or a resized stage, \"am I at fit\", and\n   double-click between 100% and fit.\n\n   FIT DEPENDS ON THE FRAME. A page opens fit-width, top-aligned (a page of text\n   read whole is unreadable; fit the width and scroll down). An image opens whole\n   (fit-contain, centred) and is never scaled ABOVE 100%: fit-width alone would\n   blow a 64px icon up thirty times and crop a tall screenshot.\n\n   A MANUAL ZOOM SURVIVES A RESIZE, A NEW FRAME DOES NOT. Resizing the stage\n   while at fit refits (the fit moved, the reader did not); while zoomed by hand\n   the reader's zoom is kept. A different frame always refits.\n   ========================================================================= */\n\n/** The zoom range of the viewer: far enough out to see a wide page whole, far\n    enough in to read a signature. */\nexport const VIEWER_ZOOM_BOUNDS: ScaleBounds = { minScale: 0.05, maxScale: 8 };\n\n/** One key press or button click of zoom. */\nconst ZOOM_STEP = 1.25;\n\n/** Two scales this close are the same zoom. */\nconst AT_FIT_TOLERANCE = 0.001;\n\nexport type ViewerFit = \"width\" | \"contain\";\n\nconst IDENTITY: CameraState = { x: 0, y: 0, scale: 1 };\n\n/** Whether `camera` is at `fit`: the same zoom, wherever it has been panned to. */\nfunction isAtFit(camera: CameraState, fit: CameraState | null): boolean {\n  return fit !== null && Math.abs(camera.scale - fit.scale) < AT_FIT_TOLERANCE;\n}\n\nfunction fitCameraFor(fit: ViewerFit, content: Size, stage: Size): CameraState {\n  if (fit === \"width\") return fitWidth(content, stage, VIEWER_ZOOM_BOUNDS);\n  return fitBox({ x: 0, y: 0, ...content }, stage, { ...VIEWER_ZOOM_BOUNDS, padding: 0, maxScale: 1 });\n}\n\nexport interface UseViewerZoomOptions {\n  /** Changing this is a different frame: refit. */\n  frameKey: string;\n  /** How the frame opens. Null: the frame is not zoomable (video, a plain file). */\n  fit: ViewerFit | null;\n}\n\nexport function useViewerZoom({ frameKey, fit }: UseViewerZoomOptions) {\n  const [camera, setCamera] = useState<CameraState>(IDENTITY);\n  const [stage, setStage] = useState<Size | null>(null);\n  /* Keyed by frame, so a size measured for the previous frame is never read as\n     this one's. */\n  const [content, setContentState] = useState<{ key: string; size: Size } | null>(null);\n  const size = content?.key === frameKey ? content.size : null;\n\n  const fitCamera = useMemo(\n    () => (fit && size && stage && stage.width > 0 && stage.height > 0 ? fitCameraFor(fit, size, stage) : null),\n    [fit, size, stage],\n  );\n\n  /* Refit when the frame or its measured size changes, always; when only the\n     stage changed, only if the reader was still at the previous fit. A layout\n     effect, so the first paint of a frame is already fitted. */\n  const applied = useRef<{ key: string; fit: CameraState | null }>({ key: \"\", fit: null });\n  const sizeKey = size ? `${frameKey}|${size.width}x${size.height}` : frameKey;\n  useLayoutEffect(() => {\n    if (!fitCamera) return;\n    const before = applied.current;\n    const same = before.key === sizeKey;\n    applied.current = { key: sizeKey, fit: fitCamera };\n    setCamera((current) =>\n      !same || isAtFit(current, before.fit) ? fitCamera : current,\n    );\n  }, [fitCamera, sizeKey]);\n\n  const gesture = useViewportGesture({\n    camera,\n    setCamera,\n    zoomBounds: VIEWER_ZOOM_BOUNDS,\n    onResize: setStage,\n    disabled: fit === null,\n  });\n\n  const zoomBy = useCallback(\n    (factor: number) => {\n      if (!stage) return;\n      setCamera((current) =>\n        zoomAtPoint(current, { x: stage.width / 2, y: stage.height / 2 }, factor, VIEWER_ZOOM_BOUNDS),\n      );\n    },\n    [stage],\n  );\n\n  const reset = useCallback(() => {\n    if (fitCamera) setCamera(fitCamera);\n  }, [fitCamera]);\n\n  const atFit = isAtFit(camera, fitCamera);\n  /** At fit AND fit is 100% (an image smaller than the stage): there is nothing\n      for fit <-> 100% to toggle, so the control is not offered. */\n  const canToggle = fitCamera !== null && !(atFit && Math.abs(fitCamera.scale - 1) < AT_FIT_TOLERANCE);\n\n  /** Fit <-> 100%, held where the reader pointed, else at the centre of the stage\n      (what the buttons do, like zoom in and out). */\n  const toggleActual = useCallback(\n    (point?: { x: number; y: number }) => {\n      if (!fitCamera) return;\n      const about = point ?? { x: (stage?.width ?? 0) / 2, y: (stage?.height ?? 0) / 2 };\n      setCamera((current) =>\n        isAtFit(current, fitCamera) ? zoomAtPoint(current, about, 1 / current.scale, VIEWER_ZOOM_BOUNDS) : fitCamera,\n      );\n    },\n    [fitCamera, stage],\n  );\n\n  return {\n    camera,\n    /** Whole-number percent, null until the frame has been measured. */\n    percent: size ? Math.round(camera.scale * 100) : null,\n    measured: size !== null,\n    atFit,\n    canToggle,\n    panning: gesture.panning,\n    bindViewport: gesture.bindViewport,\n    setContentSize: (next: Size) => setContentState({ key: frameKey, size: next }),\n    zoomIn: () => zoomBy(ZOOM_STEP),\n    zoomOut: () => zoomBy(1 / ZOOM_STEP),\n    reset,\n    toggleActual,\n  };\n}\n"],"names":["VIEWER_ZOOM_BOUNDS","ZOOM_STEP","AT_FIT_TOLERANCE","IDENTITY","isAtFit","camera","fit","fitCameraFor","content","stage","fitWidth","fitBox","useViewerZoom","frameKey","setCamera","useState","setStage","setContentState","size","fitCamera","useMemo","applied","useRef","sizeKey","useLayoutEffect","before","same","current","gesture","useViewportGesture","zoomBy","useCallback","factor","zoomAtPoint","reset","atFit","canToggle","toggleActual","point","about","next"],"mappings":"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"}

package/dist/components/focus-web/FocusWeb.js

@@ -0,0 +1,322 @@
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { useId as ee, useMemo as j, useRef as te, useState as k, useCallback as ne, useLayoutEffect as oe } from "react";
+import { cn as g } from "../../lib/cn.js";
+import { useBelow as ae } from "../../lib/use-media-query.js";
+import { isPaletteKey as se, paletteFor as ce } from "../calendar/palette.js";
+import { Icon as C } from "../Icon.js";
+import { layoutRing as re, PARENT_POSITION as M, CENTER_POSITION as S, WIDE_RING_THRESHOLD as ie, labelOverhang as le } from "./layout.js";
+import { useUiStrings as de } from "../../lib/i18n/provider.js";
+const fe = /* @__PURE__ */ new Set(["ArrowUp", "u", "U", "Backspace"]);
+function G(o) {
+  if (!o || !se(o))
+    return {
+      "--fw-disc": "var(--color-accent)",
+      "--fw-on-disc": "var(--color-accent-contrast)",
+      "--fw-pill": "var(--color-accent)",
+      "--fw-pill-text": "var(--color-accent-contrast)",
+      "--fw-pill-edge": "var(--color-accent)"
+    };
+  const t = ce(o);
+  return {
+    "--fw-disc": t.edge,
+    "--fw-on-disc": t.fill,
+    "--fw-pill": t.fill,
+    "--fw-pill-text": t.text,
+    "--fw-pill-edge": t.edge
+  };
+}
+function ue({ node: o, context: t }) {
+  const { role: c, compact: l, active: x, selected: v, labelPlacement: h } = t, d = c === "center", b = c === "parent", E = d || x || v, y = d || v, _ = /* @__PURE__ */ r(
+    "span",
+    {
+      className: g(
+        "font-semibold",
+        b ? "whitespace-nowrap text-secondary group-hover:text-primary" : "w-max text-center text-balance break-words",
+        l ? "text-2xs" : "text-xs",
+        /* DX-4070: `w-max` + the role's `max-w` makes the label's own width its preferred one, capped, so a node near
+           the plane's edge (whose absolute slot has little room to its right) wraps at word breaks inside the cap instead
+           of squeezing to a letter per line. A pill label wraps to several lines at 72/32 max width. `rounded-full` on a tall box is a radius of
+           half its height, so the wrapped lines' corners poke through the curve; `rounded-xl` is the same full pill on a
+           one-line label (the radius clamps to half the height) and a fixed, text-safe corner on a multi-line one. */
+        y && "rounded-xl border border-(--fw-pill-edge) bg-(--fw-pill) px-3 py-1 text-(--fw-pill-text) shadow-sm",
+        d && (l ? "max-w-32" : "max-w-72"),
+        c === "ring" && (l ? "max-w-20" : "max-w-32"),
+        c === "ring" && !y && (x ? "text-primary" : "text-secondary")
+      ),
+      children: o.label
+    }
+  );
+  return /* @__PURE__ */ I(
+    "span",
+    {
+      className: g(
+        "flex items-center gap-1.5",
+        h === "beside" ? "flex-row" : h === "above" ? "flex-col-reverse" : "flex-col"
+      ),
+      children: [
+        /* @__PURE__ */ I(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: g(
+              "dx-focus-web__disc relative flex shrink-0 items-center justify-center rounded-full",
+              /* One size source: `--fw-disc-size`, set on the slot by
+                 `discSizeVar` — the slot's own anchor reads the same value. */
+              "size-(--fw-disc-size)",
+              E ? "bg-(--fw-disc) text-(--fw-on-disc) shadow-lg" : "bg-surface-raised text-secondary shadow-md ring-1 ring-border",
+              !d && "group-hover:scale-110"
+            ),
+            children: [
+              d && /* @__PURE__ */ r("span", { className: "dx-focus-web__ping absolute inset-0 rounded-full bg-(--fw-disc)" }),
+              o.badge && !b && /* DX-4041: a corner marker, drawn on the disc so it scales and glides with it. `left-[70%]` starts it
+              inside the disc's right edge and lets it run outward — the label sits below/above, never here. */
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  "data-slot": "focus-web-badge",
+                  className: "absolute -top-1.5 left-[70%] z-10 flex flex-col items-start gap-0.5",
+                  children: o.badge
+                }
+              ),
+              b ? /* @__PURE__ */ r(C, { name: "arrow-up", size: "sm", className: "relative" }) : o.icon ? /* @__PURE__ */ r(C, { name: o.icon, size: d ? "lg" : l ? "sm" : "md", className: "relative" }) : (
+                /* Decoration, like the icon it stands in for: the disc is
+                   aria-hidden and the full label sits right beside it, so this
+                   letter needs the 3:1 of a graphic, which the disc pair clears. */
+                /* @__PURE__ */ r("span", { className: "relative font-semibold", children: o.label.slice(0, 1).toUpperCase() })
+              )
+            ]
+          }
+        ),
+        o.badge && b ? /* @__PURE__ */ I("span", { className: "flex flex-col items-start gap-0.5", children: [
+          _,
+          /* @__PURE__ */ r("span", { "data-slot": "focus-web-badge", className: "flex items-center gap-0.5", children: o.badge })
+        ] }) : _,
+        o.badge && o.badgeLabel && /* @__PURE__ */ r("span", { className: "sr-only", children: o.badgeLabel })
+      ]
+    }
+  );
+}
+function pe(o, t) {
+  return `calc(var(--spacing) * ${o === "center" ? t ? 14 : 16 : o === "ring" ? t ? 10 : 12 : 8})`;
+}
+function be(o, t) {
+  return o === "beside" ? "0 -50%" : t ? "-50% -50%" : o === "above" ? "-50% calc(-100% + var(--fw-disc-size) / 2)" : "-50% calc(var(--fw-disc-size) / -2)";
+}
+function me(o) {
+  const t = /* @__PURE__ */ new Set();
+  for (const c of o) {
+    if (t.has(c))
+      throw new Error(`FocusWeb: node id "${c}" appears more than once across center, parent and ring — every id must be unique`);
+    t.add(c);
+  }
+}
+function we(o) {
+  return o.map((t) => t.node.id).join("\0");
+}
+function _e({
+  center: o,
+  ring: t,
+  parent: c,
+  onSelect: l,
+  onUp: x,
+  selectedId: v,
+  onSelectCenter: h,
+  renderNode: d,
+  label: b,
+  className: E
+}) {
+  const y = ee(), _ = de().focusWeb, O = j(() => re(t.map((e) => e.id)), [t]), R = ae("sm"), $ = te(null), [H, Y] = k({ top: 0, bottom: 0 }), f = j(() => {
+    const e = [];
+    return c && e.push({ node: c, role: "parent", leftPct: M.leftPct, topPct: M.topPct, index: null, tier: null, placement: "beside" }), e.push({ node: o, role: "center", leftPct: S.leftPct, topPct: S.topPct, index: null, tier: null, placement: "below" }), t.forEach((n, a) => {
+      const s = O[a], m = s.topPct < S.topPct - 1 ? "above" : "below";
+      e.push({ node: n, role: "ring", leftPct: s.leftPct, topPct: s.topPct, index: a, tier: s.tier, placement: m });
+    }), me(e.map((n) => n.node.id)), e;
+  }, [o, c, t, O]), z = we(f), [K, P] = k(null), [D, J] = k(() => ({
+    key: z,
+    ids: new Set(f.map((e) => e.node.id)),
+    entering: new Set(f.map((e) => e.node.id))
+  }));
+  if (D.key !== z) {
+    const e = new Set(f.map((n) => n.node.id));
+    J({ key: z, ids: e, entering: new Set([...e].filter((n) => !D.ids.has(n))) }), P(null);
+  }
+  const [T, B] = k(null), q = T && t.some((e) => e.id === T) ? T : t[0]?.id ?? null, F = ne(
+    (e) => {
+      B(e), l(e);
+    },
+    [l]
+  );
+  function A(e) {
+    e && (B(e), document.getElementById(V(y, e))?.focus());
+  }
+  function U(e) {
+    if (t.length === 0) return;
+    const n = Math.max(
+      0,
+      t.findIndex((a) => a.id === q)
+    );
+    A(t[(n + e + t.length) % t.length].id);
+  }
+  function Q(e, n) {
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault(), U(-1);
+        return;
+      case "ArrowRight":
+        e.preventDefault(), U(1);
+        return;
+      case "Home":
+        e.preventDefault(), A(t[0]?.id);
+        return;
+      case "End":
+        e.preventDefault(), A(t[t.length - 1]?.id);
+        return;
+      case "Enter":
+      case " ":
+        e.preventDefault(), F(n);
+        return;
+      default:
+        c && fe.has(e.key) && (e.preventDefault(), x?.());
+    }
+  }
+  const L = !!d;
+  oe(() => {
+    const e = $.current;
+    if (!e) return;
+    const n = () => {
+      const s = e.clientHeight;
+      if (s === 0) return;
+      const m = new Map(f.map((i) => [i.node.id, i])), N = [];
+      for (const i of e.querySelectorAll("[data-focus-web-node]")) {
+        const w = m.get(i.dataset.focusWebNode ?? "");
+        w && N.push({
+          topPct: w.topPct,
+          height: i.offsetHeight,
+          disc: i.querySelector(".dx-focus-web__disc")?.offsetHeight ?? 0,
+          placement: w.placement,
+          custom: L
+        });
+      }
+      const u = le(N, s);
+      Y((i) => i.top === u.top && i.bottom === u.bottom ? i : u);
+    };
+    n();
+    const a = new ResizeObserver(n);
+    a.observe(e);
+    for (const s of e.querySelectorAll("[data-focus-web-node]")) a.observe(s);
+    return () => a.disconnect();
+  }, [f, L, R]);
+  const X = R ? "3 / 4" : t.length > ie ? "16 / 9" : "12 / 5";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      role: "group",
+      "aria-label": b,
+      className: g("focus-web w-full select-none", E),
+      style: { paddingTop: H.top, paddingBottom: H.bottom },
+      children: /* @__PURE__ */ I("div", { ref: $, "data-focus-web-plane": "", className: "relative w-full", style: { aspectRatio: X }, children: [
+        /* @__PURE__ */ r(
+          "svg",
+          {
+            "aria-hidden": "true",
+            viewBox: "0 0 100 100",
+            preserveAspectRatio: "none",
+            className: "pointer-events-none absolute inset-0 size-full overflow-visible",
+            children: f.filter((e) => e.role === "ring").map((e) => {
+              const n = e.node.id === K, a = e.node.id === v;
+              return /* @__PURE__ */ r(
+                "line",
+                {
+                  x1: S.leftPct,
+                  y1: S.topPct,
+                  x2: e.leftPct,
+                  y2: e.topPct,
+                  vectorEffect: "non-scaling-stroke",
+                  "data-active": n || a ? "" : void 0,
+                  "data-selected": a ? "" : void 0,
+                  className: "dx-focus-web__spoke",
+                  style: { ...G(e.node.paletteKey), "--dx-fw-order": String(e.index ?? 0) }
+                },
+                `spoke-${o.id}-${e.node.id}`
+              );
+            })
+          }
+        ),
+        f.map((e) => {
+          const { node: n, role: a } = e, s = a === "ring", m = s && n.id === v, N = s && n.id === q, u = a !== "center" || !!h, i = a !== "center" && n.id === K, w = a === "center" ? "location" : m ? "page" : void 0, W = {
+            role: a,
+            index: e.index,
+            tier: e.tier,
+            isTabStop: N,
+            active: i,
+            selected: m,
+            labelPlacement: e.placement,
+            compact: R
+          }, Z = D.entering.has(n.id);
+          return /* @__PURE__ */ I(
+            "div",
+            {
+              "data-focus-web-node": n.id,
+              "data-focus-web-center": a === "center" ? "" : void 0,
+              "data-focus-web-ring": s ? n.id : void 0,
+              "data-focus-web-parent": a === "parent" ? "" : void 0,
+              "aria-current": u ? void 0 : w,
+              className: g(
+                "dx-focus-web__node group absolute",
+                a === "center" ? "z-20" : "z-10",
+                Z && (s ? "dx-focus-web__node--fan-out" : "dx-focus-web__node--appear")
+              ),
+              style: {
+                ...G(n.paletteKey),
+                left: `${e.leftPct}%`,
+                top: `${e.topPct}%`,
+                translate: be(e.placement, L),
+                "--fw-disc-size": pe(a, R),
+                "--dx-fw-order": String(e.index ?? 0)
+              },
+              children: [
+                /* @__PURE__ */ r("div", { "aria-hidden": u ? "true" : void 0, children: d ? d(n, W) : /* @__PURE__ */ r(ue, { node: n, context: W }) }),
+                u && /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    id: s ? V(y, n.id) : void 0,
+                    "aria-label": ge(a, n, _),
+                    "aria-current": w,
+                    tabIndex: s ? N ? 0 : -1 : 0,
+                    onPointerEnter: () => {
+                      a !== "center" && P(n.id);
+                    },
+                    onPointerLeave: () => P((p) => p === n.id ? null : p),
+                    onFocus: () => {
+                      a !== "center" && P(n.id), s && B(n.id);
+                    },
+                    onBlur: () => P((p) => p === n.id ? null : p),
+                    onKeyDown: s ? (p) => Q(p, n.id) : void 0,
+                    onClick: () => s ? F(n.id) : a === "parent" ? x?.() : h?.(),
+                    className: g(
+                      "absolute -inset-1.5 cursor-pointer rounded-xl outline-none",
+                      "focus-visible:ring-2 focus-visible:ring-accent-border"
+                    )
+                  }
+                )
+              ]
+            },
+            n.id
+          );
+        })
+      ] })
+    }
+  );
+}
+function ge(o, t, c) {
+  const l = o === "parent" ? c.upTo(t.label) : t.label;
+  return t.badge && t.badgeLabel ? c.withBadge(l, t.badgeLabel) : l;
+}
+function V(o, t) {
+  return `focus-web${o}-ring-${t}`;
+}
+export {
+  _e as FocusWeb
+};
+//# sourceMappingURL=FocusWeb.js.map

package/dist/components/focus-web/FocusWeb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusWeb.js","sources":["../../../src/components/focus-web/FocusWeb.tsx"],"sourcesContent":["import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState, type CSSProperties } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings, type UiStrings } from \"../../lib/i18n\";\nimport { useBelow } from \"../../lib/use-media-query\";\nimport { isPaletteKey, paletteFor } from \"../calendar/palette\";\nimport { Icon } from \"../Icon\";\nimport { CENTER_POSITION, PARENT_POSITION, WIDE_RING_THRESHOLD, labelOverhang, layoutRing, type SlotBox } from \"./layout\";\nimport type { FocusNodeRenderContext, FocusNodeRole, FocusWebNode, FocusWebProps } from \"./types\";\n\nexport type { FocusWebProps } from \"./types\";\n\n/* ============================================================================\n   FOCUS WEB — the component. (DX-3431, rebuilt DX-3451)\n\n   ONE SLOT PER NODE ID, WHATEVER ROLE IT PLAYS. Every node on screen — the\n   centre, each ring node, the parent — is ONE absolutely-positioned slot,\n   keyed by the node's own `id`, in ONE list. When the caller recentres (the\n   clicked ring node becomes `center`, the old centre becomes `parent`), React\n   keeps the very same DOM element for each id that survives, and only its\n   role — and therefore its `left`/`top` and its size — changes. A CSS\n   transition on those properties then carries it there:\n\n     - the clicked node GLIDES from its ring slot to dead centre and grows;\n     - the old centre glides to the corner and shrinks into the up button;\n     - going up, the parent glides from the corner back to the centre and the\n       old centre glides out into its own ring slot;\n     - every node that was not on screen a moment ago FANS OUT from the centre\n       (a staggered keyframe from `left/top: 50%`, see components.css), and its\n       spoke grows out with it.\n\n   DX-3451 is why this is one list. DX-3431 drew the centre in its own unkeyed\n   `<div>` and the ring as keyed `<button>`s — so the clicked ring button was\n   UNMOUNTED on recentre and the centre div merely swapped its text. No\n   element ever travelled; the operator saw no animation at all, and was right.\n\n   WHY THE BUTTON IS AN OVERLAY, NOT THE SLOT. A ring node is interactive and\n   the centre is not (clicking the node you are already on has nothing to do).\n   Were the slot itself a `<button>` for ring nodes and a `<div>` for the\n   centre, the element TYPE would change on recentre and React would remount\n   it — destroying exactly the element whose glide is the point. So the slot\n   is always a `<div>`; the body inside it always has the same shape (disc,\n   then label — the disc's own size transition is what makes it grow/shrink);\n   and a transparent `<button>` is laid over the slot only while the node is a\n   ring node or the parent. Adding or removing that sibling never touches the\n   body before it.\n\n   MOTION PREFERENCES — A DOCUMENTED EXCEPTION TO THE TRAVEL RULE. motion.css\n   says that under reduced motion \"what goes to zero is TRAVEL\". FocusWeb\n   keeps its travel and only shortens it (every duration is a motion token,\n   halved by `--motion-scale`), because here the travel IS the information:\n   the glide is what tells a reader that the node they clicked became the\n   centre and the old centre became the way back up. Cut it, and a recentre\n   is an unexplained swap of the whole widget — the \"no animation\" the\n   operator rejected. PLN-12 §4 asks for exactly this: \"real animation,\n   shorter under reduced motion but still visible\". The same argument\n   `Choice.tsx` makes for its own carve-out. What reduced motion DOES remove\n   here is the two LOOPING effects (the centre's ping, the marching spokes),\n   in components.css: continuous motion is what that preference exists for.\n\n   IDS MUST BE UNIQUE ACROSS centre, parent AND ring — one keyed list means a\n   repeated id is a duplicate React key, a duplicate spoke key and a\n   duplicate DOM id. FocusWeb throws on one rather than rendering a web\n   whose glide silently attaches to the wrong element.\n   ========================================================================= */\n\nconst UP_KEYS = new Set([\"ArrowUp\", \"u\", \"U\", \"Backspace\"]);\n\ntype SwatchVars = CSSProperties & Record<`--fw-${string}`, string>;\n\n/** The five colour roles a node body paints with, from its `paletteKey` —\n    or the accent pair when it has none. Set as custom properties on the slot\n    so the body, its ping and its spoke all read the SAME values. */\nfunction swatchVars(paletteKey: string | undefined): SwatchVars {\n  /* An unknown key is treated like no key (the accent), not like the\n     calendar's fallback swatch: a consumer validating its own data (the\n     docs app's `check` does) never sends one, and an accent-coloured node is\n     the honest \"no colour identity\" look rather than a borrowed one. */\n  if (!paletteKey || !isPaletteKey(paletteKey)) {\n    return {\n      \"--fw-disc\": \"var(--color-accent)\",\n      \"--fw-on-disc\": \"var(--color-accent-contrast)\",\n      \"--fw-pill\": \"var(--color-accent)\",\n      \"--fw-pill-text\": \"var(--color-accent-contrast)\",\n      \"--fw-pill-edge\": \"var(--color-accent)\",\n    };\n  }\n  const swatch = paletteFor(paletteKey);\n  /* The disc is the swatch's EDGE colour with its FILL colour on top: the\n     palette guarantees edge-on-fill clears 3:1 (a graphic), and edge is the\n     saturated end of the pair — a solid, legible disc in both themes. The\n     pill carries TEXT, so it uses the 4.5:1 text-on-fill pair instead. */\n  return {\n    \"--fw-disc\": swatch.edge,\n    \"--fw-on-disc\": swatch.fill,\n    \"--fw-pill\": swatch.fill,\n    \"--fw-pill-text\": swatch.text,\n    \"--fw-pill-edge\": swatch.edge,\n  };\n}\n\nfunction DefaultFocusNodeBody({ node, context }: { node: FocusWebNode; context: FocusNodeRenderContext }) {\n  const { role, compact, active, selected, labelPlacement } = context;\n  const isCenter = role === \"center\";\n  const isParent = role === \"parent\";\n  const lit = isCenter || active || selected;\n  const pill = isCenter || selected;\n\n  const label = (\n    <span\n      className={cn(\n        \"font-semibold\",\n        isParent ? \"whitespace-nowrap text-secondary group-hover:text-primary\" : \"w-max text-center text-balance break-words\",\n        compact ? \"text-2xs\" : \"text-xs\",\n        /* DX-4070: `w-max` + the role's `max-w` makes the label's own width its preferred one, capped, so a node near\n           the plane's edge (whose absolute slot has little room to its right) wraps at word breaks inside the cap instead\n           of squeezing to a letter per line. A pill label wraps to several lines at 72/32 max width. `rounded-full` on a tall box is a radius of\n           half its height, so the wrapped lines' corners poke through the curve; `rounded-xl` is the same full pill on a\n           one-line label (the radius clamps to half the height) and a fixed, text-safe corner on a multi-line one. */\n        pill && \"rounded-xl border border-(--fw-pill-edge) bg-(--fw-pill) px-3 py-1 text-(--fw-pill-text) shadow-sm\",\n        isCenter && (compact ? \"max-w-32\" : \"max-w-72\"),\n        role === \"ring\" && (compact ? \"max-w-20\" : \"max-w-32\"),\n        role === \"ring\" && !pill && (active ? \"text-primary\" : \"text-secondary\"),\n      )}\n    >\n      {node.label}\n    </span>\n  );\n\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-1.5\",\n        labelPlacement === \"beside\" ? \"flex-row\" : labelPlacement === \"above\" ? \"flex-col-reverse\" : \"flex-col\",\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"dx-focus-web__disc relative flex shrink-0 items-center justify-center rounded-full\",\n          /* One size source: `--fw-disc-size`, set on the slot by\n             `discSizeVar` — the slot's own anchor reads the same value. */\n          \"size-(--fw-disc-size)\",\n          lit ? \"bg-(--fw-disc) text-(--fw-on-disc) shadow-lg\" : \"bg-surface-raised text-secondary shadow-md ring-1 ring-border\",\n          !isCenter && \"group-hover:scale-110\",\n        )}\n      >\n        {isCenter && <span className=\"dx-focus-web__ping absolute inset-0 rounded-full bg-(--fw-disc)\" />}\n        {node.badge && !isParent && (\n          /* DX-4041: a corner marker, drawn on the disc so it scales and glides with it. `left-[70%]` starts it\n             inside the disc's right edge and lets it run outward — the label sits below/above, never here. */\n          <span\n            data-slot=\"focus-web-badge\"\n            className=\"absolute -top-1.5 left-[70%] z-10 flex flex-col items-start gap-0.5\"\n          >\n            {node.badge}\n          </span>\n        )}\n        {isParent ? (\n          <Icon name=\"arrow-up\" size=\"sm\" className=\"relative\" />\n        ) : node.icon ? (\n          <Icon name={node.icon} size={isCenter ? \"lg\" : compact ? \"sm\" : \"md\"} className=\"relative\" />\n        ) : (\n          /* Decoration, like the icon it stands in for: the disc is\n             aria-hidden and the full label sits right beside it, so this\n             letter needs the 3:1 of a graphic, which the disc pair clears. */\n          <span className=\"relative font-semibold\">{node.label.slice(0, 1).toUpperCase()}</span>\n        )}\n      </span>\n      {/* The up affordance's label sits beside its small disc, so a corner badge would land on the label (and, at\n          375px, on the ring node above it): its badge stacks UNDER the label instead. */}\n      {node.badge && isParent ? (\n        <span className=\"flex flex-col items-start gap-0.5\">\n          {label}\n          <span data-slot=\"focus-web-badge\" className=\"flex items-center gap-0.5\">\n            {node.badge}\n          </span>\n        </span>\n      ) : (\n        label\n      )}\n      {node.badge && node.badgeLabel && <span className=\"sr-only\">{node.badgeLabel}</span>}\n    </span>\n  );\n}\n\n/** The default body's disc diameter per role, as a CSS length in the\n    library's own spacing unit — so it follows the user's size setting\n    (`--spacing` carries `--ui-scale`) instead of assuming 1rem = 16px. Set\n    as `--fw-disc-size` on the slot: the disc sizes itself from it AND the\n    slot anchors by it, so the two can never disagree. */\nfunction discSizeVar(role: FocusNodeRole, compact: boolean): string {\n  const steps = role === \"center\" ? (compact ? 14 : 16) : role === \"ring\" ? (compact ? 10 : 12) : 8;\n  return `calc(var(--spacing) * ${steps})`;\n}\n\n/** The slot's `translate`. For the default body, the DISC's centre — not the\n    centre of disc-plus-label — sits exactly on the node's point, which is\n    where its spoke ends. A custom body's layout is unknown, so the whole\n    body is centred on the point instead; see `FocusWebProps.renderNode`. */\nfunction slotTranslate(placement: \"below\" | \"above\" | \"beside\", custom: boolean): string {\n  if (placement === \"beside\") return \"0 -50%\";\n  if (custom) return \"-50% -50%\";\n  return placement === \"above\"\n    ? \"-50% calc(-100% + var(--fw-disc-size) / 2)\"\n    : \"-50% calc(var(--fw-disc-size) / -2)\";\n}\n\n/** Fails loud on an id that appears twice across centre, parent and ring —\n    see the module doc. */\nfunction assertUniqueIds(ids: readonly string[]): void {\n  const seen = new Set<string>();\n  for (const id of ids) {\n    if (seen.has(id)) {\n      throw new Error(`FocusWeb: node id \"${id}\" appears more than once across center, parent and ring — every id must be unique`);\n    }\n    seen.add(id);\n  }\n}\n\ninterface Slot<Extra> {\n  node: FocusWebNode<Extra>;\n  role: FocusNodeRole;\n  leftPct: number;\n  topPct: number;\n  index: number | null;\n  tier: 0 | 1 | null;\n  placement: \"above\" | \"below\" | \"beside\";\n}\n\n/** \"Which ids are on screen\" as one comparable string, in slot order. */\nfunction slotSetKey(slots: readonly { node: { id: string } }[]): string {\n  return slots.map((slot) => slot.node.id).join(\"\\u0000\");\n}\n\nexport function FocusWeb<Extra = unknown>({\n  center,\n  ring,\n  parent,\n  onSelect,\n  onUp,\n  selectedId,\n  onSelectCenter,\n  renderNode,\n  label,\n  className,\n}: FocusWebProps<Extra>) {\n  const reactId = useId();\n  const strings = useUiStrings().focusWeb;\n  const placedRing = useMemo(() => layoutRing(ring.map((n) => n.id)), [ring]);\n  const compact = useBelow(\"sm\");\n  const planeRef = useRef<HTMLDivElement>(null);\n  const [overhang, setOverhang] = useState({ top: 0, bottom: 0 });\n\n  /* DOM ORDER IS PARENT, CENTRE, RING — i.e. by tree depth — and that is\n     load-bearing, not cosmetic. React MOVES an element (remove + re-insert)\n     when a surviving keyed child changes position relative to another\n     survivor, and a re-inserted element has no \"before\" style, so its glide\n     never starts. Ordered by depth, the nodes that survive any recentre in a\n     tree (an ancestor and a descendant, or two siblings under one unchanged\n     centre) keep their relative order, so nothing is ever moved. Stacking is\n     `z-index`, never DOM order. */\n  const slots = useMemo<Slot<Extra>[]>(() => {\n    const list: Slot<Extra>[] = [];\n    if (parent) {\n      list.push({ node: parent, role: \"parent\", leftPct: PARENT_POSITION.leftPct, topPct: PARENT_POSITION.topPct, index: null, tier: null, placement: \"beside\" });\n    }\n    list.push({ node: center, role: \"center\", leftPct: CENTER_POSITION.leftPct, topPct: CENTER_POSITION.topPct, index: null, tier: null, placement: \"below\" });\n    ring.forEach((node, index) => {\n      const placed = placedRing[index]!;\n      /* Top-half ring labels grow upward, so they stay clear of the centre's own label. */\n      const placement = placed.topPct < CENTER_POSITION.topPct - 1 ? \"above\" : \"below\";\n      list.push({ node, role: \"ring\", leftPct: placed.leftPct, topPct: placed.topPct, index, tier: placed.tier, placement });\n    });\n    assertUniqueIds(list.map((slot) => slot.node.id));\n    return list;\n  }, [center, parent, ring, placedRing]);\n\n  /* WHICH SLOTS ARE NEW — \"adjusting state while rendering\", React's own\n     pattern for deriving from the previous render. Only a node that was NOT\n     on screen in the previous DIFFERENT id-set fans out; one that survives a\n     recentre glides via its transition instead. Keyed on the id-set, not on\n     every render, so a hover re-render mid-animation never strips the class\n     (and so never cuts a fan-out short). On first mount everything is new, so\n     the whole web fans out once. */\n  const setKey = slotSetKey(slots);\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [generation, setGeneration] = useState(() => ({\n    key: setKey,\n    ids: new Set(slots.map((s) => s.node.id)),\n    entering: new Set(slots.map((s) => s.node.id)),\n  }));\n  if (generation.key !== setKey) {\n    const ids = new Set(slots.map((s) => s.node.id));\n    setGeneration({ key: setKey, ids, entering: new Set([...ids].filter((id) => !generation.ids.has(id))) });\n    /* A recentre sends no pointer-leave to the node whose button just\n       unmounted, so a hover would otherwise outlive it and light that node\n       again whenever it returns to the ring. */\n    setActiveId(null);\n  }\n\n  /* --- roving tab stop, scoped to the ring only (matches `Tree`/`GraphExplorer`'s\n     own \"exactly one row in the tab order\" convention) --- */\n  const [internalTabStop, setInternalTabStop] = useState<string | null>(null);\n  const tabStopId = internalTabStop && ring.some((n) => n.id === internalTabStop) ? internalTabStop : (ring[0]?.id ?? null);\n\n  const activate = useCallback(\n    (id: string) => {\n      setInternalTabStop(id);\n      onSelect(id);\n    },\n    [onSelect],\n  );\n\n  function focusRing(id: string | undefined) {\n    if (!id) return;\n    setInternalTabStop(id);\n    document.getElementById(ringDomId(reactId, id))?.focus();\n  }\n\n  function moveTabStop(delta: number) {\n    if (ring.length === 0) return;\n    const currentIndex = Math.max(\n      0,\n      ring.findIndex((n) => n.id === tabStopId),\n    );\n    focusRing(ring[(currentIndex + delta + ring.length) % ring.length]!.id);\n  }\n\n  function onRingKeyDown(event: React.KeyboardEvent, id: string) {\n    switch (event.key) {\n      case \"ArrowLeft\":\n        event.preventDefault();\n        moveTabStop(-1);\n        return;\n      case \"ArrowRight\":\n        event.preventDefault();\n        moveTabStop(1);\n        return;\n      case \"Home\":\n        event.preventDefault();\n        focusRing(ring[0]?.id);\n        return;\n      case \"End\":\n        event.preventDefault();\n        focusRing(ring[ring.length - 1]?.id);\n        return;\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n        activate(id);\n        return;\n      default:\n        if (parent && UP_KEYS.has(event.key)) {\n          event.preventDefault();\n          onUp?.();\n        }\n    }\n  }\n\n  /* DX-4219: ROOM FOR THE LABELS THAT LEAVE THE PLANE. The plane is a fixed aspect ratio and a ring node sits at a fixed\n     percentage of it, so a multi-line label on a top or bottom node (the top one grows up from its disc) runs out of the\n     plane and over whatever is above or below the web. Measure every slot's own box and pad the web by what sticks out.\n     Sizes are read untransformed (`offsetHeight`) and anchors come from the target percentages, so a glide's\n     movement never skews them (its disc-size transition does, and the observer re-measures as it settles); a ResizeObserver re-measures on a width change (the labels re-wrap) and when a\n     slot's body resizes. Padding the outer box never moves the plane, so this cannot feed back into itself. */\n  const custom = Boolean(renderNode);\n  useLayoutEffect(() => {\n    const plane = planeRef.current;\n    if (!plane) return;\n    const measure = () => {\n      const planeHeight = plane.clientHeight;\n      if (planeHeight === 0) return;\n      const slotById = new Map(slots.map((s) => [s.node.id, s]));\n      const boxes: SlotBox[] = [];\n      for (const el of plane.querySelectorAll<HTMLElement>(\"[data-focus-web-node]\")) {\n        const slot = slotById.get(el.dataset.focusWebNode ?? \"\");\n        if (!slot) continue;\n        boxes.push({\n          topPct: slot.topPct,\n          height: el.offsetHeight,\n          disc: el.querySelector<HTMLElement>(\".dx-focus-web__disc\")?.offsetHeight ?? 0,\n          placement: slot.placement,\n          custom,\n        });\n      }\n      const next = labelOverhang(boxes, planeHeight);\n      setOverhang((prev) => (prev.top === next.top && prev.bottom === next.bottom ? prev : next));\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(plane);\n    for (const el of plane.querySelectorAll(\"[data-focus-web-node]\")) observer.observe(el);\n    return () => observer.disconnect();\n  }, [slots, custom, compact]);\n\n  /* 12/5 is the legacy page's own wide band for a single ring; a wide ring\n     needs the extra height of 16/9. Crossing WIDE_RING_THRESHOLD on a\n     recentre changes the plane's height at once (accepted: a docs tree's\n     rings sit on one side of the threshold in practice). */\n  const aspectRatio = compact ? \"3 / 4\" : ring.length > WIDE_RING_THRESHOLD ? \"16 / 9\" : \"12 / 5\";\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={cn(\"focus-web w-full select-none\", className)}\n      style={{ paddingTop: overhang.top, paddingBottom: overhang.bottom }}\n    >\n      <div ref={planeRef} data-focus-web-plane=\"\" className=\"relative w-full\" style={{ aspectRatio }}>\n        {/* Spokes — one dashed line per ring node, in a 0-100 coordinate space\n            stretched to the container (`preserveAspectRatio=\"none\"`), so a\n            percentage here is exactly the percentage on a slot's `left`/`top`.\n            `non-scaling-stroke` keeps the width and dashes in screen pixels\n            despite that stretch. Keyed by centre AND child, so a recentre\n            remounts every spoke and it grows out from the centre in step with\n            its node's fan-out (components.css). */}\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 100 100\"\n          preserveAspectRatio=\"none\"\n          className=\"pointer-events-none absolute inset-0 size-full overflow-visible\"\n        >\n          {slots\n            .filter((slot) => slot.role === \"ring\")\n            .map((slot) => {\n              const active = slot.node.id === activeId;\n              const selected = slot.node.id === selectedId;\n              return (\n                <line\n                  key={`spoke-${center.id}-${slot.node.id}`}\n                  x1={CENTER_POSITION.leftPct}\n                  y1={CENTER_POSITION.topPct}\n                  x2={slot.leftPct}\n                  y2={slot.topPct}\n                  vectorEffect=\"non-scaling-stroke\"\n                  data-active={active || selected ? \"\" : undefined}\n                  data-selected={selected ? \"\" : undefined}\n                  className=\"dx-focus-web__spoke\"\n                  style={{ ...swatchVars(slot.node.paletteKey), \"--dx-fw-order\": String(slot.index ?? 0) } as CSSProperties}\n                />\n              );\n            })}\n        </svg>\n\n        {slots.map((slot) => {\n          const { node, role } = slot;\n          const isRing = role === \"ring\";\n          const selected = isRing && node.id === selectedId;\n          const isTabStop = isRing && node.id === tabStopId;\n          const clickable = role !== \"center\" || Boolean(onSelectCenter);\n          const active = role !== \"center\" && node.id === activeId;\n          // I18N-ALLOW: aria-current enumeration values\n          const current = role === \"center\" ? \"location\" : selected ? \"page\" : undefined;\n          const context: FocusNodeRenderContext = {\n            role,\n            index: slot.index,\n            tier: slot.tier,\n            isTabStop,\n            active,\n            selected,\n            labelPlacement: slot.placement,\n            compact,\n          };\n          const entering = generation.entering.has(node.id);\n\n          return (\n            <div\n              key={node.id}\n              data-focus-web-node={node.id}\n              data-focus-web-center={role === \"center\" ? \"\" : undefined}\n              data-focus-web-ring={isRing ? node.id : undefined}\n              data-focus-web-parent={role === \"parent\" ? \"\" : undefined}\n              aria-current={clickable ? undefined : current}\n              className={cn(\n                \"dx-focus-web__node group absolute\",\n                role === \"center\" ? \"z-20\" : \"z-10\",\n                entering && (isRing ? \"dx-focus-web__node--fan-out\" : \"dx-focus-web__node--appear\"),\n              )}\n              style={\n                {\n                  ...swatchVars(node.paletteKey),\n                  left: `${slot.leftPct}%`,\n                  top: `${slot.topPct}%`,\n                  translate: slotTranslate(slot.placement, custom),\n                  \"--fw-disc-size\": discSizeVar(role, compact),\n                  \"--dx-fw-order\": String(slot.index ?? 0),\n                } as CSSProperties\n              }\n            >\n              <div aria-hidden={clickable ? \"true\" : undefined}>\n                {renderNode ? renderNode(node, context) : <DefaultFocusNodeBody node={node as FocusWebNode} context={context} />}\n              </div>\n\n              {clickable && (\n                <button\n                  type=\"button\"\n                  id={isRing ? ringDomId(reactId, node.id) : undefined}\n                  aria-label={buttonName(role, node, strings)}\n                  aria-current={current}\n                  tabIndex={isRing ? (isTabStop ? 0 : -1) : 0}\n                  onPointerEnter={() => {\n                    if (role !== \"center\") setActiveId(node.id);\n                  }}\n                  onPointerLeave={() => setActiveId((current) => (current === node.id ? null : current))}\n                  onFocus={() => {\n                    if (role !== \"center\") setActiveId(node.id);\n                    if (isRing) setInternalTabStop(node.id);\n                  }}\n                  onBlur={() => setActiveId((current) => (current === node.id ? null : current))}\n                  onKeyDown={isRing ? (event) => onRingKeyDown(event, node.id) : undefined}\n                  onClick={() => (isRing ? activate(node.id) : role === \"parent\" ? onUp?.() : onSelectCenter?.())}\n                  className={cn(\n                    \"absolute -inset-1.5 cursor-pointer rounded-xl outline-none\",\n                    \"focus-visible:ring-2 focus-visible:ring-accent-border\",\n                  )}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n/** The clickable overlay's accessible name. The body beneath it is `aria-hidden`, so a node's\n    `badgeLabel` (DX-4041) has to ride on the name or a screen reader never hears the marker. */\nfunction buttonName(role: FocusNodeRole, node: FocusWebNode<unknown>, strings: UiStrings[\"focusWeb\"]): string {\n  const name = role === \"parent\" ? strings.upTo(node.label) : node.label;\n  return node.badge && node.badgeLabel ? strings.withBadge(name, node.badgeLabel) : name;\n}\n\nfunction ringDomId(reactId: string, nodeId: string): string {\n  return `focus-web${reactId}-ring-${nodeId}`;\n}\n"],"names":["UP_KEYS","swatchVars","paletteKey","isPaletteKey","swatch","paletteFor","DefaultFocusNodeBody","node","context","role","compact","active","selected","labelPlacement","isCenter","isParent","lit","pill","label","jsx","cn","jsxs","Icon","discSizeVar","slotTranslate","placement","custom","assertUniqueIds","ids","seen","id","slotSetKey","slots","slot","FocusWeb","center","ring","parent","onSelect","onUp","selectedId","onSelectCenter","renderNode","className","reactId","useId","strings","useUiStrings","placedRing","useMemo","layoutRing","n","useBelow","planeRef","useRef","overhang","setOverhang","useState","list","PARENT_POSITION","CENTER_POSITION","index","placed","setKey","activeId","setActiveId","generation","setGeneration","s","internalTabStop","setInternalTabStop","tabStopId","activate","useCallback","focusRing","ringDomId","moveTabStop","delta","currentIndex","onRingKeyDown","event","useLayoutEffect","plane","measure","planeHeight","slotById","boxes","el","next","labelOverhang","prev","observer","aspectRatio","WIDE_RING_THRESHOLD","isRing","isTabStop","clickable","current","entering","buttonName","name","nodeId"],"mappings":"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"}

package/dist/components/focus-web/layout.js

@@ -0,0 +1,34 @@
+const P = 10, r = { x: 38, y: 36 }, h = { x: 25, y: 23 }, p = { leftPct: 1, topPct: 9 }, l = { leftPct: 50, topPct: 50 };
+function g(o) {
+  return o === 2 ? -180 : -90;
+}
+function i(o, c, n) {
+  const t = (g(c) + 360 / c * o) * Math.PI / 180;
+  return {
+    leftPct: l.leftPct + n.x * Math.cos(t),
+    topPct: l.topPct + n.y * Math.sin(t)
+  };
+}
+function I(o, c = 10) {
+  const n = o.length, e = n > c;
+  return o.map((t, s) => {
+    const a = e && s % 2 === 1 ? 1 : 0;
+    return { id: t, tier: a, ...i(s, n, a === 1 ? h : r) };
+  });
+}
+function f(o, c) {
+  let n = 0, e = 0;
+  for (const t of o) {
+    const s = t.topPct / 100 * c, a = t.placement === "beside" || t.custom ? s - t.height / 2 : t.placement === "above" ? s - t.height + t.disc / 2 : s - t.disc / 2;
+    n = Math.max(n, -a), e = Math.max(e, a + t.height - c);
+  }
+  return { top: Math.ceil(n), bottom: Math.ceil(e) };
+}
+export {
+  l as CENTER_POSITION,
+  p as PARENT_POSITION,
+  P as WIDE_RING_THRESHOLD,
+  f as labelOverhang,
+  I as layoutRing
+};
+//# sourceMappingURL=layout.js.map

package/dist/components/focus-web/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sources":["../../../src/components/focus-web/layout.ts"],"sourcesContent":["/* ============================================================================\n   FOCUS WEB — pure ring geometry. (DX-3431)\n\n   Kept framework-free and DOM-free (same reasoning `graph-view.ts` in the\n   docs app gives for its own pure helpers) so ring placement is unit-testable\n   without jsdom, and so `FocusWeb.tsx` never has to reconcile \"what the\n   layout says\" with \"what actually rendered\" — it just reads this back.\n\n   A SINGLE RING, ELLIPTICAL, EVENLY SPACED — the direct re-implementation of\n   the legacy Vue page's own layout (`dashboard/src/components/docs/\n   DocsPage.vue`, read-only reference, `RADIUS_X`/`RADIUS_Y`, `-90 + (360/n)*i`\n   starting at 12 o'clock and going clockwise). Percentages, not pixels: the\n   caller draws the ring inside a container of ITS OWN aspect ratio, and a\n   percentage-based radius scales with it for free — including down to 375px\n   (PLN-12 architecture §4 \"works at 375px\").\n\n   TWO TIERS PAST `WIDE_RING_THRESHOLD`, STAGGERED — DX-3451. Past about ten\n   nodes a single ring crowds its labels, because label WIDTH (not node\n   spacing) is what collides. So a wide ring still gives EVERY node its own\n   evenly-spaced angle, exactly like a narrow one, and alternates the radius\n   (outer, inner, outer, ...) by ring position. Neighbouring labels are then\n   separated radially as well as angularly, and — the reason it replaced\n   DX-3431's two independent circles — no spoke ever passes through another\n   node: every node sits on its own angle, so a spoke to an outer node runs\n   between two inner ones instead of over them. (Two independently spaced\n   circles put an inner node within a few degrees of an outer node's spoke\n   for most counts — measured at 11 nodes: 4° apart.) Rejected alternatives:\n   a scrolling/paginated ring (breaks \"one hop, all at once\"); shrinking label\n   font at high counts (collides with \"full titles, never truncated\").\n   ========================================================================= */\n\n/** Ids at or below this count get ONE ring; more get two concentric ones. */\nexport const WIDE_RING_THRESHOLD = 10;\n\ninterface Radius {\n  x: number;\n  y: number;\n}\n\n/** Percent-of-container radii, elliptical to fit a landscape box (matching\n    the legacy page's own `RADIUS_X`/`RADIUS_Y` for the same reason: a\n    consumer draws this inside a wide rectangle, not a square). */\nconst OUTER_RADIUS: Radius = { x: 38, y: 36 };\nconst INNER_RADIUS: Radius = { x: 25, y: 23 };\n\n/** Fixed corner slot for the \"up\" affordance, never part of the ring itself.\n    DX-3451: this is the slot's LEFT edge (the parent node is anchored by its\n    left side, not its centre — FocusWeb.tsx), so a long parent title grows\n    rightward into the plane instead of hanging off the left edge the way the\n    legacy page's centre-anchored `left: 7%` button did. */\nexport const PARENT_POSITION: { leftPct: number; topPct: number } = { leftPct: 1, topPct: 9 };\n\nexport const CENTER_POSITION: { leftPct: number; topPct: number } = { leftPct: 50, topPct: 50 };\n\nexport interface PlacedRingNode {\n  id: string;\n  leftPct: number;\n  topPct: number;\n  /** Which concentric ring this sits on. `0` (outer) for every node while the\n      ring is at or below `WIDE_RING_THRESHOLD`. */\n  tier: 0 | 1;\n}\n\n/** Where the first node sits. 12 o'clock, like the legacy page — except for\n    exactly TWO nodes (DX-3451): 12 and 6 o'clock would stack them above and\n    below the centre in a landscape web, crowding the centre's own label and\n    leaving the wide sides empty, so a pair sits at 9 and 3 o'clock instead. */\nfunction startAngleDeg(total: number): number {\n  return total === 2 ? -180 : -90;\n}\n\n/** A point on an ellipse of the given radius, `index` of `total` evenly\n    spaced steps starting at `startAngleDeg` and proceeding clockwise — the same\n    convention the legacy page used, kept so a reader who knows that page\n    recognises this one immediately. */\nfunction pointOnEllipse(index: number, total: number, radius: Radius): { leftPct: number; topPct: number } {\n  const angleDeg = startAngleDeg(total) + (360 / total) * index;\n  const angle = (angleDeg * Math.PI) / 180;\n  return {\n    leftPct: CENTER_POSITION.leftPct + radius.x * Math.cos(angle),\n    topPct: CENTER_POSITION.topPct + radius.y * Math.sin(angle),\n  };\n}\n\n/**\n * Places `ids` (already in the caller's desired order — see `types.ts`'s\n * module doc) evenly around the centre: one ring at or below `threshold`,\n * otherwise the same even angles with the radius alternating outer/inner.\n * Pure and total: an empty array places nothing, and the result is always\n * the same length as `ids`, in the SAME order, so a caller can zip it back\n * against its own node array by index without a lookup.\n */\nexport function layoutRing(ids: readonly string[], threshold: number = WIDE_RING_THRESHOLD): PlacedRingNode[] {\n  const n = ids.length;\n  const staggered = n > threshold;\n  return ids.map((id, index) => {\n    const tier: 0 | 1 = staggered && index % 2 === 1 ? 1 : 0;\n    return { id, tier, ...pointOnEllipse(index, n, tier === 1 ? INNER_RADIUS : OUTER_RADIUS) };\n  });\n}\n\n/** One slot's measured vertical box, for `labelOverhang`. `height` is the slot body's own layout height (disc plus\n    label), `disc` the disc's diameter: both in px, both read untransformed so a glide in flight cannot skew them. */\nexport interface SlotBox {\n  topPct: number;\n  height: number;\n  disc: number;\n  placement: \"above\" | \"below\" | \"beside\";\n  /** A caller's own body: centred whole on its point (see `slotTranslate` in FocusWeb.tsx). */\n  custom: boolean;\n}\n\n/**\n * DX-4219: how far the slots' boxes run above and below the plane's own `planeHeight`-px box. The plane is a fixed\n * aspect ratio and the ring sits at fixed percentages of it, so a top node's label (it grows UP from its disc) or a\n * bottom node's (it grows DOWN) leaves the plane by however many lines it wraps to — into whatever sits above or\n * below the web. The component pads the web by exactly this, so every label sits inside the web's own area.\n *\n * The vertical placement mirrors `slotTranslate` in FocusWeb.tsx: that function is the one place the slot's\n * `translate` is decided, and this is its arithmetic on measured sizes.\n */\nexport function labelOverhang(boxes: readonly SlotBox[], planeHeight: number): { top: number; bottom: number } {\n  let top = 0;\n  let bottom = 0;\n  for (const box of boxes) {\n    const anchor = (box.topPct / 100) * planeHeight;\n    const first =\n      box.placement === \"beside\" || box.custom\n        ? anchor - box.height / 2\n        : box.placement === \"above\"\n          ? anchor - box.height + box.disc / 2\n          : anchor - box.disc / 2;\n    top = Math.max(top, -first);\n    bottom = Math.max(bottom, first + box.height - planeHeight);\n  }\n  return { top: Math.ceil(top), bottom: Math.ceil(bottom) };\n}\n"],"names":["WIDE_RING_THRESHOLD","OUTER_RADIUS","INNER_RADIUS","PARENT_POSITION","CENTER_POSITION","startAngleDeg","total","pointOnEllipse","index","radius","angle","layoutRing","ids","threshold","staggered","id","tier","labelOverhang","boxes","planeHeight","top","bottom","box","anchor","first"],"mappings":"AAgCO,MAAMA,IAAsB,IAU7BC,IAAuB,EAAE,GAAG,IAAI,GAAG,GAAA,GACnCC,IAAuB,EAAE,GAAG,IAAI,GAAG,GAAA,GAO5BC,IAAuD,EAAE,SAAS,GAAG,QAAQ,EAAA,GAE7EC,IAAuD,EAAE,SAAS,IAAI,QAAQ,GAAA;AAe3F,SAASC,EAAcC,GAAuB;AAC5C,SAAOA,MAAU,IAAI,OAAO;AAC9B;AAMA,SAASC,EAAeC,GAAeF,GAAeG,GAAqD;AAEzG,QAAMC,KADWL,EAAcC,CAAK,IAAK,MAAMA,IAASE,KAC9B,KAAK,KAAM;AACrC,SAAO;AAAA,IACL,SAASJ,EAAgB,UAAUK,EAAO,IAAI,KAAK,IAAIC,CAAK;AAAA,IAC5D,QAAQN,EAAgB,SAASK,EAAO,IAAI,KAAK,IAAIC,CAAK;AAAA,EAAA;AAE9D;AAUO,SAASC,EAAWC,GAAwBC,IAAoB,IAAuC;AAC5G,QAAM,IAAID,EAAI,QACRE,IAAY,IAAID;AACtB,SAAOD,EAAI,IAAI,CAACG,GAAIP,MAAU;AAC5B,UAAMQ,IAAcF,KAAaN,IAAQ,MAAM,IAAI,IAAI;AACvD,WAAO,EAAE,IAAAO,GAAI,MAAAC,GAAM,GAAGT,EAAeC,GAAO,GAAGQ,MAAS,IAAId,IAAeD,CAAY,EAAA;AAAA,EACzF,CAAC;AACH;AAsBO,SAASgB,EAAcC,GAA2BC,GAAsD;AAC7G,MAAIC,IAAM,GACNC,IAAS;AACb,aAAWC,KAAOJ,GAAO;AACvB,UAAMK,IAAUD,EAAI,SAAS,MAAOH,GAC9BK,IACJF,EAAI,cAAc,YAAYA,EAAI,SAC9BC,IAASD,EAAI,SAAS,IACtBA,EAAI,cAAc,UAChBC,IAASD,EAAI,SAASA,EAAI,OAAO,IACjCC,IAASD,EAAI,OAAO;AAC5B,IAAAF,IAAM,KAAK,IAAIA,GAAK,CAACI,CAAK,GAC1BH,IAAS,KAAK,IAAIA,GAAQG,IAAQF,EAAI,SAASH,CAAW;AAAA,EAC5D;AACA,SAAO,EAAE,KAAK,KAAK,KAAKC,CAAG,GAAG,QAAQ,KAAK,KAAKC,CAAM,EAAA;AACxD;"}