@tensor_1/react 2.47.0 → 2.48.0

package/dist/components/QrScanner.d.ts

@@ -0,0 +1,95 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** The words of a `QrScanner` (HAR-1254). */
+interface QrScannerLabels {
+    /** The viewfinder region's name. */
+    viewfinder: string;
+    /** Starts the camera (the browser asks for permission after it). */
+    start: string;
+    /** Stops the camera. */
+    stop: string;
+    /** While the browser's permission prompt is open. */
+    asking: string;
+    /** While the camera runs and nothing was read yet. */
+    scanning: string;
+    /** Camera access was refused. */
+    deniedTitle: string;
+    /** How to allow it again: the browser keeps the refusal until the person changes it. */
+    deniedBody: string;
+    /** No camera API (an old browser, or a page not served over HTTPS). */
+    unsupportedTitle: string;
+    unsupportedBody: string;
+    /** No camera found, or it is in use by another app. */
+    noCameraTitle: string;
+    noCameraBody: string;
+    /** The camera started but sends no picture. */
+    noFrameTitle: string;
+    noFrameBody: string;
+    /** Shown after `hintAfter` ms of frames without a code. */
+    unreadable: string;
+    /** Tries the camera again. */
+    retry: string;
+    /** The torch toggle's name. */
+    torch: string;
+    /** Announced once when a code was read; `{value}` is the text. */
+    read: string;
+}
+declare const DEFAULT_QR_SCANNER_LABELS: QrScannerLabels;
+/**
+ * What the scanner is doing. `idle` shows the explainer and the start button; `asking` waits for
+ * the browser's prompt; `scanning` shows the picture; `denied`, `unsupported`, `no-camera` and
+ * `no-frame` say what went wrong and how to go on.
+ */
+type QrScannerStatus = 'idle' | 'asking' | 'scanning' | 'denied' | 'unsupported' | 'no-camera' | 'no-frame';
+/** One camera frame for the consumer's decoder. It never leaves the device unless the decoder sends it. */
+interface QrScannerFrame {
+    /** The frame's pixels, at most `maxFrameSize` on the long side. */
+    imageData: ImageData;
+    /** The live video element, for a decoder that reads it directly (`BarcodeDetector.detect(video)`). */
+    video: HTMLVideoElement;
+}
+/** Returns the text it read, or nothing. Throwing counts as nothing read. */
+type QrScannerDecoder = (frame: QrScannerFrame) => string | null | undefined | Promise<string | null | undefined>;
+interface QrScannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {
+    /** Your decoder (a WASM or JS QR reader, or `BarcodeDetector`). The kit ships none and calls it with frames only. */
+    decode: QrScannerDecoder;
+    /** Called with each new text read. The same text again is ignored for `repeatAfter` ms. */
+    onResult: (value: string) => void;
+    /** Why the page wants the camera, shown before the browser's own prompt (and after a refusal). */
+    explainer?: ReactNode;
+    /** The manual entry (a field and a button): always rendered, in every state, after the viewfinder. */
+    manualEntry?: ReactNode;
+    /**
+     * Starts the camera without the start button when the browser says permission was already
+     * given (`navigator.permissions`). Default `true`; the explainer is still shown first otherwise.
+     */
+    autoStart?: boolean;
+    /** Called on every status change, e.g. to log it or to move focus to the manual field after a refusal. */
+    onStatusChange?: (status: QrScannerStatus) => void;
+    /** Milliseconds between decode attempts. Default 200. */
+    interval?: number;
+    /** The long side of the frame handed to the decoder, in pixels. Default 640. */
+    maxFrameSize?: number;
+    /** The same text read again within this many milliseconds is not reported twice. Default 2000. */
+    repeatAfter?: number;
+    /** Milliseconds of frames without a code before the "still nothing read" hint. Default 8000. */
+    hintAfter?: number;
+    /** Milliseconds after the camera started without a single frame before `no-frame`. Default 5000. */
+    frameTimeout?: number;
+    /** `environment` (default, the back camera) or `user`. */
+    facingMode?: 'environment' | 'user';
+    /** The words. Default: `UixLabelsProvider` `qrScanner`, then English. */
+    labels?: Partial<QrScannerLabels>;
+}
+/**
+ * A camera viewfinder that reads QR codes with a decoder the product supplies (HAR-1254; SHOPx
+ * SHOP-07 receipt scan, SHOP-09 till; MOTUS circulation intake). It explains why it wants the
+ * camera before the browser asks, says plainly when access is blocked, missing or unsupported
+ * and how to go on, and always keeps the manual entry next to it. Frames go to `decode` and
+ * nowhere else: the component makes no network request. The camera stops on unmount, on Stop
+ * and while the page is hidden.
+ */
+declare function QrScanner({ decode, onResult, explainer, manualEntry, autoStart, onStatusChange, interval, maxFrameSize, repeatAfter, hintAfter, frameTimeout, facingMode, labels: labelsProp, className, ...props }: QrScannerProps): react.JSX.Element;
+
+export { DEFAULT_QR_SCANNER_LABELS, QrScanner, type QrScannerDecoder, type QrScannerFrame, type QrScannerLabels, type QrScannerProps, type QrScannerStatus };

package/dist/components/QrScanner.js

@@ -0,0 +1,266 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { Button } from "./Button.js";
+const DEFAULT_QR_SCANNER_LABELS = {
+  viewfinder: "Camera viewfinder",
+  start: "Use the camera",
+  stop: "Stop the camera",
+  asking: "Allow the camera in your browser\u2019s prompt.",
+  scanning: "Point the camera at the code.",
+  deniedTitle: "The camera is blocked",
+  deniedBody: "Allow the camera for this site in the browser\u2019s address bar or site settings, then try again. You can also type the code.",
+  unsupportedTitle: "This browser cannot use the camera here",
+  unsupportedBody: "Type the code instead, or open this page in a current browser over a secure connection.",
+  noCameraTitle: "No camera is available",
+  noCameraBody: "Connect a camera or close the app that is using it, then try again. You can also type the code.",
+  noFrameTitle: "The camera sends no picture",
+  noFrameBody: "Check that nothing covers the lens, then try again. You can also type the code.",
+  unreadable: "Still nothing read. Hold the code flat and steady, in good light, or type it.",
+  retry: "Try again",
+  torch: "Torch",
+  read: "Code read: {value}"
+};
+const ERROR_STATUS = {
+  NotAllowedError: "denied",
+  SecurityError: "denied",
+  PermissionDeniedError: "denied",
+  NotFoundError: "no-camera",
+  DevicesNotFoundError: "no-camera",
+  NotReadableError: "no-camera",
+  TrackStartError: "no-camera",
+  OverconstrainedError: "no-camera"
+};
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const cameraApi = () => typeof navigator !== "undefined" && typeof navigator.mediaDevices?.getUserMedia === "function";
+function QrScanner({
+  decode,
+  onResult,
+  explainer,
+  manualEntry,
+  autoStart = true,
+  onStatusChange,
+  interval = 200,
+  maxFrameSize = 640,
+  repeatAfter = 2e3,
+  hintAfter = 8e3,
+  frameTimeout = 5e3,
+  facingMode = "environment",
+  labels: labelsProp,
+  className,
+  ...props
+}) {
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_QR_SCANNER_LABELS, ...uixLabels.qrScanner, ...labelsProp };
+  const [status, setStatusState] = useState("idle");
+  const [hint, setHint] = useState(false);
+  const [torch, setTorch] = useState(null);
+  const [read, setRead] = useState(null);
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);
+  const runRef = useRef(0);
+  const resumeRef = useRef(false);
+  const live = useRef({ decode, onResult, onStatusChange, interval, maxFrameSize, repeatAfter, hintAfter, frameTimeout });
+  live.current = { decode, onResult, onStatusChange, interval, maxFrameSize, repeatAfter, hintAfter, frameTimeout };
+  const statusRef = useRef(status);
+  const setStatus = useCallback((next) => {
+    if (statusRef.current === next) return;
+    statusRef.current = next;
+    setStatusState(next);
+    live.current.onStatusChange?.(next);
+  }, []);
+  const release = useCallback(() => {
+    runRef.current += 1;
+    streamRef.current?.getTracks().forEach((track) => track.stop());
+    streamRef.current = null;
+    if (videoRef.current) videoRef.current.srcObject = null;
+    setTorch(null);
+    setHint(false);
+    setRead(null);
+  }, []);
+  const start = useCallback(async () => {
+    if (!cameraApi()) {
+      setStatus("unsupported");
+      return;
+    }
+    release();
+    const run = runRef.current;
+    setStatus("asking");
+    let stream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: facingMode } }, audio: false });
+    } catch (error) {
+      if (run !== runRef.current) return;
+      setStatus(ERROR_STATUS[error?.name ?? ""] ?? "no-camera");
+      return;
+    }
+    if (run !== runRef.current) {
+      stream.getTracks().forEach((track2) => track2.stop());
+      return;
+    }
+    streamRef.current = stream;
+    const track = stream.getVideoTracks()[0];
+    setTorch(track?.getCapabilities?.()?.torch ? false : null);
+    track?.addEventListener("ended", () => {
+      if (run === runRef.current) {
+        release();
+        setStatus("no-frame");
+      }
+    });
+    setStatus("scanning");
+  }, [facingMode, release, setStatus]);
+  useEffect(() => {
+    if (status !== "scanning") return void 0;
+    const video = videoRef.current;
+    const stream = streamRef.current;
+    if (!video || !stream) return void 0;
+    const run = runRef.current;
+    video.srcObject = stream;
+    void video.play?.()?.catch?.(() => void 0);
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    const startedAt = Date.now();
+    let lastHit = startedAt;
+    let lastValue = null;
+    let timer;
+    let sawFrame = false;
+    const step = async () => {
+      if (run !== runRef.current) return;
+      const { decode: read2, maxFrameSize: max, frameTimeout: timeout, hintAfter: hintMs, repeatAfter: repeat, interval: wait } = live.current;
+      const width = video.videoWidth;
+      const height = video.videoHeight;
+      if (width > 0 && height > 0 && video.readyState >= 2 && context) {
+        sawFrame = true;
+        const scale = Math.min(1, max / Math.max(width, height));
+        canvas.width = Math.round(width * scale);
+        canvas.height = Math.round(height * scale);
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        let value;
+        try {
+          value = await read2({ imageData: context.getImageData(0, 0, canvas.width, canvas.height), video });
+        } catch {
+          value = null;
+        }
+        if (run !== runRef.current) return;
+        const now = Date.now();
+        if (value) {
+          lastHit = now;
+          setHint(false);
+          if (!lastValue || lastValue.value !== value || now - lastValue.at > repeat) {
+            lastValue = { value, at: now };
+            setRead({ value, at: now });
+            live.current.onResult(value);
+          }
+        } else if (now - lastHit > hintMs) setHint(true);
+      } else if (!sawFrame && Date.now() - startedAt > timeout) {
+        release();
+        setStatus("no-frame");
+        return;
+      }
+      timer = setTimeout(() => {
+        void step();
+      }, wait);
+    };
+    timer = setTimeout(() => {
+      void step();
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [status, release, setStatus]);
+  const startRef = useRef(start);
+  startRef.current = start;
+  useIsomorphicLayoutEffect(() => {
+    if (!cameraApi()) setStatus("unsupported");
+  }, [setStatus]);
+  useEffect(() => {
+    if (!cameraApi()) return void 0;
+    if (status !== "idle" || typeof navigator === "undefined" || !navigator.permissions?.query) return void 0;
+    let cancelled = false;
+    navigator.permissions.query({ name: "camera" }).then((result) => {
+      if (cancelled) return;
+      if (result.state === "denied") setStatus("denied");
+      else if (result.state === "granted" && autoStart) void startRef.current();
+    }, () => void 0);
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    const onVisibility = () => {
+      if (document.hidden && streamRef.current) {
+        release();
+        setStatus("idle");
+        resumeRef.current = true;
+      } else if (!document.hidden && resumeRef.current) {
+        resumeRef.current = false;
+        void startRef.current();
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, [release, setStatus]);
+  useEffect(() => () => release(), [release]);
+  const facingRef = useRef(facingMode);
+  useEffect(() => {
+    if (facingRef.current === facingMode) return;
+    facingRef.current = facingMode;
+    if (statusRef.current === "scanning" || statusRef.current === "asking") void start();
+  }, [facingMode, start]);
+  useEffect(() => {
+    if (!read) return void 0;
+    const timer = setTimeout(() => setRead((current) => current === read ? { ...current, at: -1 } : current), 1200);
+    return () => clearTimeout(timer);
+  }, [read]);
+  const toggleTorch = async () => {
+    const track = streamRef.current?.getVideoTracks()[0];
+    if (!track || torch === null) return;
+    try {
+      await track.applyConstraints({ advanced: [{ torch: !torch }] });
+      setTorch(!torch);
+    } catch {
+      setTorch(null);
+    }
+  };
+  const problem = status === "denied" ? [labels.deniedTitle, labels.deniedBody] : status === "unsupported" ? [labels.unsupportedTitle, labels.unsupportedBody] : status === "no-camera" ? [labels.noCameraTitle, labels.noCameraBody] : status === "no-frame" ? [labels.noFrameTitle, labels.noFrameBody] : null;
+  const message = status === "asking" ? labels.asking : status === "scanning" ? hint ? labels.unreadable : labels.scanning : null;
+  const flash = read !== null && read.at >= 0;
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-qr-scanner", className), "data-status": status, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-qr-scanner__frame", role: "group", "aria-label": labels.viewfinder, "data-read": flash || void 0, children: [
+      /* @__PURE__ */ jsx("video", { ref: videoRef, className: "uix-qr-scanner__video", muted: true, playsInline: true, "aria-hidden": "true", hidden: status !== "scanning" }),
+      status === "scanning" && /* @__PURE__ */ jsx("span", { className: "uix-qr-scanner__target", "aria-hidden": "true" }),
+      (status === "idle" || status === "asking" || problem) && /* @__PURE__ */ jsxs("div", { className: "uix-qr-scanner__panel", children: [
+        problem ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "uix-qr-scanner__title", children: problem[0] }),
+          /* @__PURE__ */ jsx("p", { className: "uix-qr-scanner__body", children: problem[1] }),
+          status === "denied" && explainer != null && /* @__PURE__ */ jsx("div", { className: "uix-qr-scanner__explainer", children: explainer })
+        ] }) : explainer != null && /* @__PURE__ */ jsx("div", { className: "uix-qr-scanner__explainer", children: explainer }),
+        status === "idle" && /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => {
+          void start();
+        }, children: labels.start }),
+        status === "asking" && /* @__PURE__ */ jsx(Button, { variant: "primary", loading: true, children: labels.start }),
+        (status === "denied" || status === "no-camera" || status === "no-frame") && /* @__PURE__ */ jsx(Button, { onClick: () => {
+          void start();
+        }, children: labels.retry })
+      ] })
+    ] }),
+    status === "scanning" && /* @__PURE__ */ jsxs("div", { className: "uix-qr-scanner__bar", children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-qr-scanner__message", "data-hint": hint || void 0, children: message }),
+      torch !== null && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", "aria-pressed": torch, onClick: () => {
+        void toggleTorch();
+      }, children: labels.torch }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => {
+        release();
+        setStatus("idle");
+      }, children: labels.stop })
+    ] }),
+    status === "asking" && /* @__PURE__ */ jsx("p", { className: "uix-qr-scanner__message", children: message }),
+    /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: read ? fillLabel(labels.read, { value: read.value }) : problem ? problem[0] : "" }),
+    manualEntry != null && /* @__PURE__ */ jsx("div", { className: "uix-qr-scanner__manual", children: manualEntry })
+  ] });
+}
+export {
+  DEFAULT_QR_SCANNER_LABELS,
+  QrScanner
+};

package/dist/components/RelationshipGraph.d.ts

@@ -1,10 +1,16 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { RelationshipGraphNode, RelationshipGraphEdge, RelationshipGraphCluster } from '../relationship-graph-model.js';
+import { RelationshipGraphNode, RelationshipGraphEdge, RelationshipGraphTone, RelationshipGraphCluster } from '../relationship-graph-model.js';
 
 interface RelationshipGraphLegendItem {
     id: string;
     label: string;
+    /** Layered: the swatch takes the tone the matching nodes or edges take (HAR-1639). */
+    tone?: RelationshipGraphTone;
+    /** Layered: the swatch is a line (`edge`, default) or a node box (`node`). */
+    shape?: 'edge' | 'node';
+    /** Layered: a dashed line swatch for an edge `variant="dashed"`. */
+    variant?: 'solid' | 'dashed';
 }
 /** Every visible or announced string. Pass translations; English defaults fill the gaps. */
 interface RelationshipGraphLabels {
@@ -37,7 +43,17 @@ interface RelationshipGraphLabels {
     graphSummary: (nodes: number, edges: number) => string;
     relationship: string;
     conflict: string;
+    /** @deprecated No longer read: the list names a node's neighbours under `connectedHeading`. A
+     * `connectedTo` supplied without `connectedHeading` still sets that heading, from its words. */
     connectedTo: (names: string) => string;
+    /** The relationship list: the heading of a node's neighbours, e.g. "Connected to". */
+    connectedHeading: string;
+    /** The relationship list: shows every neighbour of a node with more than eight. */
+    showAllRelations: (count: number) => string;
+    /** The relationship list: back to the first eight neighbours. */
+    showFewerRelations: string;
+    /** Layered: ends a hub's description, which names only its first five relationships. */
+    moreRelations: (count: number, inList: boolean) => string;
     noConnections: string;
     expandNeighbors: string;
     openDetails: string;
@@ -54,6 +70,10 @@ interface RelationshipGraphLabels {
     retry: string;
     emptyTitle: string;
     emptyHint: string;
+    /** Layered: a node's outgoing relationship in its description (HAR-1639), e.g. "depends on Payments DB". */
+    relationTo: (relation: string, target: string) => string;
+    /** Layered: a node's incoming relationship in its description, e.g. "depends on, from Checkout". */
+    relationFrom: (relation: string, source: string) => string;
 }
 declare const DEFAULT_RELATIONSHIP_GRAPH_LABELS: RelationshipGraphLabels;
 interface RelationshipGraphProps {
@@ -120,6 +140,17 @@ interface RelationshipGraphProps {
     /** Layered: controlled roving focus. */
     focusId?: string;
     onFocusChange?: (id: string) => void;
+    /**
+     * Layered: brings this node into view without moving focus (HAR-1639), e.g. the row picked in
+     * a table beside the map while the keyboard stays in the table. Smooth, or at once with reduced
+     * motion. Changing it again scrolls again; `focusId` focuses as well.
+     */
+    revealId?: string;
+    /**
+     * Layered: draws the root with a heavier border. Default: when `rootId` is given. A map with
+     * several starting points (no `rootId`) has no one root, so nothing is marked (HAR-1639).
+     */
+    markRoot?: boolean;
 }
 /** Bounded, deterministic SVG relationship view with an equivalent accessible list. */
 declare function RelationshipGraph(props: RelationshipGraphProps): react.JSX.Element;

package/dist/components/RelationshipGraph.js

@@ -33,6 +33,10 @@ const DEFAULT_RELATIONSHIP_GRAPH_LABELS = {
   relationship: "Relationship",
   conflict: "conflict",
   connectedTo: (names) => `Connected to ${names}`,
+  connectedHeading: "Connected to",
+  showAllRelations: (count) => `Show all ${count}`,
+  showFewerRelations: "Show fewer",
+  moreRelations: (count, inList) => `and ${count} more${inList ? ", listed in the relationship list" : ""}`,
   noConnections: "No visible connections",
   expandNeighbors: "Expand neighbors",
   openDetails: "Open details",
@@ -47,7 +51,9 @@ const DEFAULT_RELATIONSHIP_GRAPH_LABELS = {
   loading: "Loading relationships\u2026",
   retry: "Try again",
   emptyTitle: "No relationships to display.",
-  emptyHint: "Adjust the neighborhood or filters to include a node."
+  emptyHint: "Adjust the neighborhood or filters to include a node.",
+  relationTo: (relation, target) => `${relation} ${target}`,
+  relationFrom: (relation, source) => `${relation}, from ${source}`
 };
 const EMPTY_IDS = /* @__PURE__ */ new Set();
 const EMPTY_LEGEND = [];
@@ -70,7 +76,13 @@ function radialViewBox(nodes) {
   return `${round(minX)} ${round(minY)} ${width} ${height}`;
 }
 function RelationshipGraph(props) {
-  const labels = useMemo(() => ({ ...DEFAULT_RELATIONSHIP_GRAPH_LABELS, ...props.labels }), [props.labels]);
+  const labels = useMemo(() => {
+    const merged = { ...DEFAULT_RELATIONSHIP_GRAPH_LABELS, ...props.labels };
+    if (props.labels?.connectedTo && props.labels.connectedHeading === void 0) {
+      merged.connectedHeading = props.labels.connectedTo("").replace(/[\s:,]+$/u, "");
+    }
+    return merged;
+  }, [props.labels]);
   const stateClass = cx("uix-relationship-graph uix-relationship-graph--state", props.className);
   if (props.loading) return /* @__PURE__ */ jsx("div", { className: stateClass, role: "status", children: labels.loading });
   if (props.error) {
@@ -102,7 +114,8 @@ function RadialRelationshipGraph({
   legend = EMPTY_LEGEND,
   className,
   labels,
-  showList = true
+  showList = true,
+  controls = "full"
 }) {
   const bounded = useMemo(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
   const positioned = useMemo(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
@@ -138,7 +151,7 @@ function RadialRelationshipGraph({
     setPan({ x: 0, y: 0 });
   };
   return /* @__PURE__ */ jsxs("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": labels.graph, children: [
-    /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__toolbar", "aria-label": labels.controls, children: [
+    controls !== "none" && /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__toolbar", "aria-label": labels.controls, children: [
       /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": labels.panLeft, children: labels.left }),
       /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": labels.panUp, children: labels.up }),
       /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": labels.panDown, children: labels.down }),
@@ -153,7 +166,7 @@ function RadialRelationshipGraph({
       bounded.edges.map((edge) => {
         const source = positionedById.get(edge.source);
         const target = positionedById.get(edge.target);
-        return /* @__PURE__ */ jsx("line", { x1: source.x * RADIAL_SCALE_X, y1: source.y * RADIAL_SCALE_Y, x2: target.x * RADIAL_SCALE_X, y2: target.y * RADIAL_SCALE_Y, className: "uix-relationship-graph__edge", "data-typed": edge.type != null && typeColor.has(edge.type) || void 0, style: edge.type != null && typeColor.has(edge.type) ? { "--uix-graph-type-color": typeColor.get(edge.type) } : void 0, "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ jsx("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
+        return /* @__PURE__ */ jsx("line", { x1: source.x * RADIAL_SCALE_X, y1: source.y * RADIAL_SCALE_Y, x2: target.x * RADIAL_SCALE_X, y2: target.y * RADIAL_SCALE_Y, className: "uix-relationship-graph__edge", "data-typed": edge.type != null && typeColor.has(edge.type) || void 0, style: edge.type != null && typeColor.has(edge.type) ? { "--uix-graph-type-color": typeColor.get(edge.type) } : void 0, "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, "data-tone": edge.tone, "data-variant": edge.variant === "dashed" ? "dashed" : void 0, children: /* @__PURE__ */ jsx("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
       }),
       positioned.map((node) => /* @__PURE__ */ jsxs(
         "g",

package/dist/components/RelationshipGraphLayered.d.ts

@@ -3,6 +3,6 @@ import { ResolvedRelationshipGraphProps } from './RelationshipGraph.js';
 import '../relationship-graph-model.js';
 
 /** `RelationshipGraph layout="layered"` (ADR-0003). Internal — reached through RelationshipGraph. */
-declare function LayeredRelationshipGraph({ nodes, edges, selectedId, onSelect, onExpandNeighbors, onOpenDetails, maxNodes, density, highlightedNodeIds, conflictedNodeIds, highlightedEdgeIds, conflictedEdgeIds, legend, className, labels, rootId, renderNode, nodeAriaLabel, renderCluster, clusterThreshold, expandedClusterIds, onToggleCluster, dimmedNodeIds, edgeLabels, showList, height, focusId, onFocusChange, controls, initialView: initialViewMode, }: ResolvedRelationshipGraphProps): react.JSX.Element;
+declare function LayeredRelationshipGraph({ nodes, edges, selectedId, onSelect, onExpandNeighbors, onOpenDetails, maxNodes, density, highlightedNodeIds, conflictedNodeIds, highlightedEdgeIds, conflictedEdgeIds, legend, className, labels, rootId, renderNode, nodeAriaLabel, renderCluster, clusterThreshold, expandedClusterIds, onToggleCluster, dimmedNodeIds, edgeLabels, showList, height, focusId, onFocusChange, controls, initialView: initialViewMode, revealId, markRoot, }: ResolvedRelationshipGraphProps): react.JSX.Element;
 
 export { LayeredRelationshipGraph };