@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/dataDisplay/dagView/dagView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dagView.js","sources":["../../../../src/components/dataDisplay/dagView/dagView.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { useId } from \"../../../hooks/useId\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport {\n  type DagDirection,\n  type DagLayoutEdge,\n  type DagLayoutInput,\n  type DagLayoutNode,\n  type DagLayoutResult,\n  dagEdgePath,\n  dagLayout,\n} from \"./dagLayout\";\nimport { type Viewport, centerOn, createPanZoom, fitBounds, isVisible, viewportTransform, zoomAt } from \"./panZoom\";\n\n/** A node's status: a built-in one, coloured by the theme, or any word of the app's, styled by `[data-status]`. */\nexport type DagViewStatus =\n  | \"idle\"\n  | \"pending\"\n  | \"running\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"skipped\"\n  | (string & {});\n\nexport interface DagViewNode<T = unknown> {\n  /** Unique among the nodes; edges name nodes by it. */\n  id: string;\n  /** What the default node shows, and its accessible name; the id unless given. */\n  label?: React.ReactNode;\n  /** Colours the node's accent from the theme. */\n  status?: DagViewStatus | undefined;\n  /** The node's accent colour, over its status colour: any CSS colour. */\n  accent?: string | undefined;\n  /** The node's width in pixels; `nodeWidth` unless given. */\n  width?: number | undefined;\n  /** The node's height in pixels; `nodeHeight` unless given. */\n  height?: number | undefined;\n  /** Anything of the app's, handed back to `renderNode` and `onNodeClick`. */\n  data?: T;\n  /** Shown, focusable, but not selectable. */\n  disabled?: boolean | undefined;\n}\n\nexport interface DagViewEdge {\n  /** `source->target` unless given. */\n  id?: string | undefined;\n  /** The id of the node the edge starts from: the one depended on. */\n  source: string;\n  /** The id of the node the edge points to: the one that depends on `source`. */\n  target: string;\n}\n\n/** A node's state for `renderNode`: a snapshot of the render it is passed to. */\nexport interface DagViewNodeState {\n  readonly selected: boolean;\n  /** Next to the selected node: \"upstream\" feeds it, \"downstream\" depends on it. */\n  readonly related: \"upstream\" | \"downstream\" | null;\n  /** Set apart from the selected node and its neighbours, with `dimUnrelated`. */\n  readonly dimmed: boolean;\n  /** Has keyboard focus. */\n  readonly focused: boolean;\n}\n\n/** Where the graph is: moved by x, y (pixels) and scaled by zoom. */\nexport type DagViewViewport = Viewport;\n\n/** Moves the view from outside; handed over by `apiRef` once the graph is in the page. */\nexport interface DagViewApi {\n  /** Fits the whole graph in view. */\n  fitView(): void;\n  /** Zooms to `zoom` around the middle of the view. */\n  zoomTo(zoom: number): void;\n  /** Zooms by `factor` around the middle of the view. */\n  zoomBy(factor: number): void;\n  /** Moves the node with this id to the middle of the view. */\n  centerNode(id: string): void;\n}\n\n/** Texts for assistive technology and the zoom buttons, English by default. */\nexport interface DagViewLabels {\n  /** What the graph is called as a widget: \"dependency graph\". */\n  roleDescription: string;\n  /** \"Status\", before a node's status word. */\n  status: string;\n  /** \"Depends on\", before the names of the nodes a node's edges come from. */\n  dependsOn: string;\n  /** \"Required by\", before the names of the nodes a node's edges go to. */\n  requiredBy: string;\n  /** Status words, shown on the default nodes and read out: { running: \"Running\", … }. */\n  statuses: Record<string, string>;\n  zoomIn: string;\n  zoomOut: string;\n  fitView: string;\n  /** The name of the group of zoom buttons. */\n  controls: string;\n}\n\nexport interface DagViewProps<T = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  /** What the graph shows: its accessible name. */\n  label: string;\n  /** The graph in words, for screen readers; it is there on the server too. */\n  summary?: string | undefined;\n  /** The nodes. A change of status, label or data alone does not lay the graph out again. */\n  nodes: readonly DagViewNode<T>[];\n  /** The edges, from the node depended on to the node that depends on it. */\n  edges: readonly DagViewEdge[];\n  /**\n   * Draws a node's content inside its box; the default shows a status dot,\n   * the label and the status word. `node` and `state` are a snapshot of the\n   * render they are passed to. Keep the content non-interactive where you can:\n   * a node is an ARIA option, whose content assistive technology may read as\n   * plain text, and a click in it also selects the node. Links and buttons in\n   * it are left out of the Tab order except in the node that is the graph's\n   * Tab stop.\n   */\n  renderNode?: ((node: DagViewNode<T>, state: DagViewNodeState) => React.ReactNode) | undefined;\n  /** Which way the layers run: \"LR\" (left to right, default) or \"TB\" (top to bottom). */\n  direction?: DagDirection | undefined;\n  /** A node's width in pixels, unless the node sets its own; 180 by default. */\n  nodeWidth?: number | undefined;\n  /** A node's height in pixels, unless the node sets its own; 56 by default. */\n  nodeHeight?: number | undefined;\n  /** The space between layers in pixels; 64 by default. */\n  rankGap?: number | undefined;\n  /** The space between nodes in a layer in pixels; 24 by default. */\n  nodeGap?: number | undefined;\n  /**\n   * Lays the graph out in place of the built-in layout, e.g. with dagre or elk. It must be\n   * synchronous. The layout re-runs when the graph's shape changes; swapping this function\n   * alone does not.\n   */\n  layout?: ((input: DagLayoutInput) => DagLayoutResult) | undefined;\n  /** The selected node's id (controlled); null selects nothing. */\n  selectedId?: string | null | undefined;\n  /** The node selected at first (uncontrolled). */\n  defaultSelectedId?: string | null | undefined;\n  /** A node was selected (its id) or the selection was cleared (null). */\n  onSelectedChange?: ((id: string | null) => void) | undefined;\n  /** A node was clicked, or chosen with Enter or Space. Not called for a disabled node. */\n  onNodeClick?: ((node: DagViewNode<T>, event: React.MouseEvent | React.KeyboardEvent) => void) | undefined;\n  /** Fades the nodes and edges that are not next to the selected node. */\n  dimUnrelated?: boolean | undefined;\n  /** Where the graph is (controlled). */\n  viewport?: DagViewViewport | undefined;\n  /** Where the graph is at first (uncontrolled); with `fit={false}` the page does not move after it loads. */\n  defaultViewport?: DagViewViewport | undefined;\n  /** The view moved or zoomed: at most once per frame during a gesture. */\n  onViewportChange?: ((viewport: DagViewViewport) => void) | undefined;\n  /** Fits the graph in view once it is in the page, and again when its nodes or edges change; true by default. */\n  fit?: boolean | undefined;\n  /** The smallest zoom; 0.1 by default. */\n  minZoom?: number | undefined;\n  /** The largest zoom; 2 by default. */\n  maxZoom?: number | undefined;\n  /** What a plain mouse wheel does: \"zoom\" (default), \"pan\", or \"none\" (the page scrolls). Ctrl+wheel and a trackpad pinch always zoom. */\n  wheel?: \"zoom\" | \"pan\" | \"none\" | undefined;\n  /** Shows the zoom in, zoom out and fit buttons; true by default. */\n  controls?: boolean | undefined;\n  /** Texts for assistive technology and the buttons, over the English defaults. */\n  labels?: Partial<DagViewLabels> | undefined;\n  /**\n   * The graph's height: a number of pixels or any CSS length; 480 by default,\n   * from the stylesheet, so a height in `style` works too. It fills the width.\n   */\n  height?: number | string | undefined;\n  /** Gets the functions that move the view from outside. */\n  apiRef?: ((api: DagViewApi) => void) | undefined;\n  /** Test id of the root `<div>`; `dag-view` unless given. */\n  \"data-testid\"?: string | undefined;\n}\n\n/** Room around the graph inside its world, in pixels. */\nconst PADDING = 24;\n\nconst DEFAULT_LABELS: DagViewLabels = {\n  roleDescription: \"dependency graph\",\n  status: \"Status\",\n  dependsOn: \"Depends on\",\n  requiredBy: \"Required by\",\n  statuses: {\n    idle: \"Idle\",\n    pending: \"Pending\",\n    running: \"Running\",\n    success: \"Success\",\n    warning: \"Warning\",\n    error: \"Error\",\n    skipped: \"Skipped\",\n  },\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  fitView: \"Fit to view\",\n  controls: \"Zoom\",\n};\n\n/** What can take focus inside a node's own content. */\nconst INNER_FOCUSABLE =\n  'a[href], button, input, select, textarea, iframe, summary, audio[controls], video[controls], [tabindex], [contenteditable]:not([contenteditable=\"false\"])';\n\nconst cssLength = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst sameList = (a: readonly string[], b: readonly string[]): boolean =>\n  a.length === b.length && a.every((value, i) => value === b[i]);\n\n/** A node's name in words, for descriptions: its label when that is text, else its id. */\nconst nameOf = (node: DagViewNode<unknown> | undefined, id: string): string => {\n  const label = node?.label;\n  return typeof label === \"string\" || typeof label === \"number\" ? String(label) : id;\n};\n\n// Warns unconditionally, like the rest of ui-react (icon.tsx): a process.env\n// guard does not fold in the browser build, so it silenced only dev SSR.\nconst warn = (message: string): void => console.warn(`[smwb] DagView: ${message}`);\n\nconst DagViewInner = React.forwardRef<HTMLDivElement, DagViewProps>(function DagView(props, ref) {\n  const {\n    className,\n    style,\n    label,\n    summary,\n    nodes,\n    edges,\n    renderNode,\n    direction = \"LR\",\n    nodeWidth = 180,\n    nodeHeight = 56,\n    rankGap = 64,\n    nodeGap = 24,\n    layout: layoutProp,\n    selectedId,\n    defaultSelectedId,\n    onSelectedChange,\n    onNodeClick,\n    dimUnrelated = false,\n    viewport: viewportProp,\n    defaultViewport,\n    onViewportChange,\n    fit = true,\n    minZoom = 0.1,\n    maxZoom = 2,\n    wheel = \"zoom\",\n    controls = true,\n    labels: labelsProp,\n    height,\n    apiRef,\n    \"data-testid\": dataTestId = \"dag-view\",\n    ...rest\n  } = props;\n\n  const uid = useId();\n  const arrowId = `${uid}-arrow`;\n  const activeArrowId = `${uid}-arrow-active`;\n  const summaryId = `${uid}-summary`;\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const elementsRef = React.useRef(new Map<string, HTMLElement>());\n\n  const labels = React.useMemo<DagViewLabels>(\n    () => ({\n      ...DEFAULT_LABELS,\n      ...labelsProp,\n      statuses: { ...DEFAULT_LABELS.statuses, ...labelsProp?.statuses },\n    }),\n    [labelsProp]\n  );\n  const statusWord = (status: string): string => labels.statuses[status] ?? status;\n\n  // ---- Nodes and layout ----\n\n  const byId = React.useMemo(() => {\n    const map = new Map<string, DagViewNode<unknown>>();\n    for (const node of nodes) if (!map.has(node.id)) map.set(node.id, node);\n    return map;\n  }, [nodes]);\n  // Nodes are drawn by id, so content stays mounted when the app replaces a\n  // node object to change its status.\n  const nextIds = React.useMemo(() => [...byId.keys()], [byId]);\n  const idsRef = React.useRef(nextIds);\n  if (!sameList(idsRef.current, nextIds)) idsRef.current = nextIds;\n  const ids = idsRef.current;\n\n  // The layout depends only on the graph's shape; a status change leaves it be.\n  const structure = React.useMemo(() => {\n    const layoutNodes = [...byId.values()].map((node) => ({\n      id: node.id,\n      width: node.width ?? nodeWidth,\n      height: node.height ?? nodeHeight,\n    }));\n    const layoutEdges = edges.map((edge) => ({ id: edge.id, source: edge.source, target: edge.target }));\n    const input: DagLayoutInput = {\n      nodes: layoutNodes,\n      edges: layoutEdges,\n      direction,\n      rankGap,\n      nodeGap,\n      warn,\n    };\n    const key = JSON.stringify([\n      direction,\n      rankGap,\n      nodeGap,\n      layoutNodes.map((n) => [n.id, n.width, n.height]),\n      layoutEdges.map((e) => [e.id ?? null, e.source, e.target]),\n    ]);\n    return { key, input };\n  }, [byId, edges, direction, nodeWidth, nodeHeight, rankGap, nodeGap]);\n  const structureRef = React.useRef(structure);\n  if (structureRef.current.key !== structure.key) structureRef.current = structure;\n  const stableStructure = structureRef.current;\n  // Latest props for the stable callbacks and effects; `layout` is read through\n  // this ref too: an inline `layout` is a new function on every parent render,\n  // and the layout must follow the graph's shape, not the function's identity.\n  const latest = React.useRef({ fit, minZoom, maxZoom, wheel, apiRef, layout: layoutProp });\n  latest.current = { fit, minZoom, maxZoom, wheel, apiRef, layout: layoutProp };\n  const layout = React.useMemo(\n    () => (latest.current.layout ?? dagLayout)(stableStructure.input),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [stableStructure]\n  );\n\n  // The flow of a layer runs along x in LR and along y in TB; across it is the other one.\n  const across = (node: DagLayoutNode): number => (direction === \"TB\" ? node.x : node.y);\n\n  const graph = React.useMemo(() => {\n    const incoming = new Map<string, DagLayoutEdge[]>();\n    const outgoing = new Map<string, DagLayoutEdge[]>();\n    for (const edge of layout.edges) {\n      if (!incoming.has(edge.target)) incoming.set(edge.target, []);\n      if (!outgoing.has(edge.source)) outgoing.set(edge.source, []);\n      incoming.get(edge.target)!.push(edge);\n      outgoing.get(edge.source)!.push(edge);\n    }\n    const ordered = [...layout.nodes.values()].sort((a, b) => a.layer - b.layer || across(a) - across(b));\n    const layers = new Map<number, DagLayoutNode[]>();\n    for (const node of ordered) {\n      if (!layers.has(node.layer)) layers.set(node.layer, []);\n      layers.get(node.layer)!.push(node);\n    }\n    return { incoming, outgoing, ordered, layers };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [layout, direction]);\n\n  // ---- Selection ----\n\n  const [selected, setSelected] = useControllableState<string | null>({\n    value: selectedId,\n    defaultValue: defaultSelectedId ?? null,\n    onChange: onSelectedChange,\n  });\n\n  const relations = React.useMemo(() => {\n    const edgeMap = new Map<string, \"upstream\" | \"downstream\">();\n    const nodeMap = new Map<string, \"upstream\" | \"downstream\">();\n    if (selected === null || !layout.nodes.has(selected)) return { active: false, edges: edgeMap, nodes: nodeMap };\n    const { incoming, outgoing } = graph;\n    for (const edge of incoming.get(selected) ?? []) {\n      edgeMap.set(edge.id, \"upstream\");\n      nodeMap.set(edge.source, \"upstream\");\n    }\n    for (const edge of outgoing.get(selected) ?? []) {\n      edgeMap.set(edge.id, \"downstream\");\n      nodeMap.set(edge.target, \"downstream\");\n    }\n    return { active: true, edges: edgeMap, nodes: nodeMap };\n  }, [selected, layout, graph]);\n\n  // ---- Focus: one tab stop, on the last focused node, else the selected one, else the first ----\n\n  const [active, setActive] = React.useState<string | null>(null);\n  const [focused, setFocused] = React.useState<string | null>(null);\n  const tabStop = React.useMemo(() => {\n    if (active !== null && layout.nodes.has(active)) return active;\n    if (selected !== null && layout.nodes.has(selected)) return selected;\n    return graph.ordered[0]?.id ?? null;\n  }, [layout, active, selected, graph]);\n\n  // ---- Viewport ----\n\n  const [viewport, setViewport] = useControllableState<Viewport>({\n    value: viewportProp,\n    defaultValue: defaultViewport ?? { x: 0, y: 0, zoom: 1 },\n    onChange: onViewportChange,\n  });\n  const [interacting, setInteracting] = React.useState(false);\n  const far = viewport.zoom < 0.45;\n\n  // Current values for the stable callbacks (the api, the pan/zoom glue, the\n  // effects), which read them instead of closing over one render.\n  const viewportRef = React.useRef(viewport);\n  viewportRef.current = viewport;\n  const selectedRef = React.useRef(selected);\n  selectedRef.current = selected;\n  const focusedRef = React.useRef(focused);\n  focusedRef.current = focused;\n  const tabStopRef = React.useRef(tabStop);\n  tabStopRef.current = tabStop;\n  const setSelectedRef = React.useRef(setSelected);\n  setSelectedRef.current = setSelected;\n  const setViewportRef = React.useRef(setViewport);\n  setViewportRef.current = setViewport;\n  const layoutRef = React.useRef(layout);\n  layoutRef.current = layout;\n  const renderNodeRef = React.useRef(renderNode);\n  renderNodeRef.current = renderNode;\n  const fitPendingRef = React.useRef(false);\n\n  const size = (): { width: number; height: number } => ({\n    width: rootRef.current?.clientWidth ?? 0,\n    height: rootRef.current?.clientHeight ?? 0,\n  });\n  const hasSize = (): boolean => {\n    const { width, height } = size();\n    return width > 0 && height > 0;\n  };\n  const worldSize = (): { width: number; height: number } => ({\n    width: layoutRef.current.width + PADDING * 2,\n    height: layoutRef.current.height + PADDING * 2,\n  });\n  const nodeRect = (id: string): { x: number; y: number; width: number; height: number } | undefined => {\n    const box = layoutRef.current.nodes.get(id);\n    return box && { x: box.x + PADDING, y: box.y + PADDING, width: box.width, height: box.height };\n  };\n\n  const apiRefBox = React.useRef<DagViewApi | null>(null);\n  if (apiRefBox.current === null) {\n    const self: DagViewApi = {\n      fitView() {\n        if (!hasSize()) return;\n        const world = worldSize();\n        setViewportRef.current(\n          fitBounds(\n            { x: 0, y: 0, ...world },\n            size(),\n            0,\n            latest.current.minZoom,\n            Math.max(latest.current.minZoom, Math.min(1, latest.current.maxZoom))\n          )\n        );\n      },\n      zoomTo(zoom) {\n        self.zoomBy(zoom / viewportRef.current.zoom);\n      },\n      zoomBy(factor) {\n        const { width, height } = size();\n        setViewportRef.current(\n          zoomAt(\n            viewportRef.current,\n            { x: width / 2, y: height / 2 },\n            factor,\n            latest.current.minZoom,\n            latest.current.maxZoom\n          )\n        );\n      },\n      centerNode(id) {\n        const rect = nodeRect(id);\n        if (!rect) return;\n        setViewportRef.current(\n          centerOn(viewportRef.current, { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }, size())\n        );\n      },\n    };\n    apiRefBox.current = self;\n  }\n  const api = apiRefBox.current;\n\n  const ensureVisible = (id: string): void => {\n    const rect = nodeRect(id);\n    if (rect && hasSize() && !isVisible(viewportRef.current, rect, size(), 8)) api.centerNode(id);\n  };\n\n  // Fit once the graph has a size, and again when its shape changes. At zero\n  // size (a hidden tab) the fit waits for the first resize that gives one.\n  const tryFit = (): void => {\n    if (!fitPendingRef.current || !hasSize()) return;\n    fitPendingRef.current = false;\n    api.fitView();\n  };\n\n  useSafeLayoutEffect(() => {\n    if (!latest.current.fit) return;\n    fitPendingRef.current = true;\n    tryFit();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [layout]);\n\n  useSafeLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    const dispose = createPanZoom(root, {\n      viewport: () => viewportRef.current,\n      write: (next) => setViewportRef.current(next),\n      minZoom: () => latest.current.minZoom,\n      maxZoom: () => latest.current.maxZoom,\n      wheel: () => latest.current.wheel,\n      onInteracting: setInteracting,\n    });\n    let frame = 0;\n    const resizeObserver =\n      typeof ResizeObserver === \"function\"\n        ? new ResizeObserver(() => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(tryFit);\n          })\n        : undefined;\n    resizeObserver?.observe(root);\n    latest.current.apiRef?.(api);\n    return () => {\n      dispose();\n      resizeObserver?.disconnect();\n      cancelAnimationFrame(frame);\n    };\n    // Set up once; later props are read through the refs.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // ---- Interaction ----\n\n  const choose = (id: string, event: React.MouseEvent | React.KeyboardEvent): void => {\n    const node = byId.get(id);\n    if (!node || node.disabled) return;\n    setSelected(id);\n    onNodeClick?.(node, event);\n  };\n\n  const focusNode = (id: string | undefined): void => {\n    if (id === undefined) return;\n    setActive(id);\n    elementsRef.current.get(id)?.focus({ preventScroll: true });\n    ensureVisible(id);\n  };\n\n  // A node that goes away takes its selection with it, and focus moves to the\n  // Tab stop rather than dropping to the page. Only a node that was there\n  // counts: a selection given before its node loads is kept.\n  const previousIdsRef = React.useRef<readonly string[] | null>(null);\n  useSafeLayoutEffect(() => {\n    const before = previousIdsRef.current;\n    previousIdsRef.current = ids;\n    if (before === null || before === ids) return;\n    const present = new Set(ids);\n    const chosen = selectedRef.current;\n    if (chosen !== null && !present.has(chosen) && before.includes(chosen)) setSelectedRef.current(null);\n    const had = focusedRef.current;\n    if (had === null || present.has(had)) return;\n    setFocused(null);\n    const doc = rootRef.current?.ownerDocument;\n    const stop = tabStopRef.current;\n    if (doc && (doc.activeElement === null || doc.activeElement === doc.body) && stop !== null)\n      elementsRef.current.get(stop)?.focus({ preventScroll: true });\n    // The ids identity changes only when the id list itself does.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ids]);\n\n  // One Tab stop: focusables in `renderNode` content (a link, a button) are\n  // taken out of the Tab order, except in the node that is the Tab stop. Their\n  // own tabindex comes back when their node becomes it.\n  const ownTabIndexRef = React.useRef(new WeakMap<Element, string | null>());\n  const appliedTabIndexRef = React.useRef(new WeakMap<Element, string | null>());\n  const syncInnerTabStops = React.useCallback((): void => {\n    const stop = tabStopRef.current;\n    const own = ownTabIndexRef.current;\n    const applied = appliedTabIndexRef.current;\n    for (const [id, el] of elementsRef.current) {\n      for (const inner of el.querySelectorAll(INNER_FOCUSABLE)) {\n        if (!own.has(inner)) own.set(inner, inner.getAttribute(\"tabindex\"));\n        // A tabindex that differs from what the component last applied is the\n        // caller's new own value: the sync effect can run at commit, before the\n        // MutationObserver microtask sees the write, so adopt it here instead of\n        // writing the stale cached value back over it.\n        if (inner.getAttribute(\"tabindex\") !== (applied.get(inner) ?? null)) {\n          own.set(inner, inner.getAttribute(\"tabindex\"));\n        }\n        const next = id === stop ? (own.get(inner) ?? null) : \"-1\";\n        if (inner.getAttribute(\"tabindex\") === next) {\n          applied.set(inner, next);\n          continue;\n        }\n        if (next === null) inner.removeAttribute(\"tabindex\");\n        else inner.setAttribute(\"tabindex\", next);\n        applied.set(inner, next);\n      }\n    }\n  }, []);\n\n  // Keyed on the Tab stop only: an inline `renderNode` is a new function on\n  // every render, and content changes between those are the observer's job.\n  useSafeLayoutEffect(() => {\n    if (!renderNodeRef.current) return;\n    syncInnerTabStops();\n  }, [tabStop, syncInnerTabStops]);\n\n  // Content that changes later (a link that shows up with a status) is caught\n  // too, and a tabindex the app rewrites from its own render becomes the\n  // element's own value instead of being fought. Set up once, like the\n  // pan/zoom effect: `renderNode` is read through the ref.\n  useSafeLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root || typeof MutationObserver !== \"function\") return;\n    const observer = new MutationObserver((mutations) => {\n      if (!renderNodeRef.current) return;\n      const own = ownTabIndexRef.current;\n      const applied = appliedTabIndexRef.current;\n      let sync = false;\n      for (const mutation of mutations) {\n        if (mutation.type !== \"attributes\") {\n          // Added or moved content may carry focusables the sweep has not seen.\n          sync = true;\n          continue;\n        }\n        const el = mutation.target as Element;\n        if (!applied.has(el)) continue;\n        const now = el.getAttribute(\"tabindex\");\n        // The component's own writes match what it applied; anything else is\n        // the app's new own value for the element.\n        if (now === (applied.get(el) ?? null)) continue;\n        own.set(el, now);\n        sync = true;\n      }\n      if (sync) syncInnerTabStops();\n    });\n    observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: [\"tabindex\"] });\n    return () => observer.disconnect();\n  }, [syncInnerTabStops]);\n\n  /** The node an arrow key leads to from `id`: along the edges, or to a neighbour in the layer. */\n  const neighbour = (id: string, key: string): string | undefined => {\n    const tb = direction === \"TB\";\n    const forward = tb ? \"ArrowDown\" : \"ArrowRight\";\n    const back = tb ? \"ArrowUp\" : \"ArrowLeft\";\n    const before = tb ? \"ArrowLeft\" : \"ArrowUp\";\n    const after = tb ? \"ArrowRight\" : \"ArrowDown\";\n    const first = (list: string[]): string | undefined =>\n      list\n        .map((other) => layout.nodes.get(other))\n        .filter((node): node is DagLayoutNode => node !== undefined)\n        .sort((a, b) => across(a) - across(b))[0]?.id;\n    if (key === forward) return first((graph.outgoing.get(id) ?? []).map((e) => e.target));\n    if (key === back) return first((graph.incoming.get(id) ?? []).map((e) => e.source));\n    const self = layout.nodes.get(id);\n    if (!self) return undefined;\n    const layer = graph.layers.get(self.layer) ?? [];\n    const index = layer.findIndex((node) => node.id === id);\n    if (key === before) return layer[index - 1]?.id;\n    if (key === after) return layer[index + 1]?.id;\n    return undefined;\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    const target = event.target as HTMLElement;\n    const id = target.dataset?.[\"dagId\"];\n    // Keys pressed in a node's own content (a link, a field) are its own.\n    if (id === undefined || !target.classList.contains(\"smwb-dag-view__node\")) return;\n    // Ctrl, Cmd and Alt shortcuts are the browser's: page zoom, history, tabs.\n    if (event.ctrlKey || event.metaKey || event.altKey) return;\n    const key = event.key;\n    if (key.startsWith(\"Arrow\") && event.shiftKey) {\n      const step = 48;\n      const dx = key === \"ArrowLeft\" ? step : key === \"ArrowRight\" ? -step : 0;\n      const dy = key === \"ArrowUp\" ? step : key === \"ArrowDown\" ? -step : 0;\n      setViewport({ x: viewport.x + dx, y: viewport.y + dy, zoom: viewport.zoom });\n      event.preventDefault();\n      return;\n    }\n    if (key.startsWith(\"Arrow\")) {\n      event.preventDefault();\n      focusNode(neighbour(id, key));\n      return;\n    }\n    switch (key) {\n      case \"Home\":\n        event.preventDefault();\n        focusNode(graph.ordered[0]?.id);\n        return;\n      case \"End\":\n        event.preventDefault();\n        focusNode(graph.ordered[graph.ordered.length - 1]?.id);\n        return;\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n        choose(id, event);\n        return;\n      case \"Escape\":\n        // Handled only when there was a selection, so an enclosing dialog still gets it otherwise.\n        if (selected === null) return;\n        event.preventDefault();\n        setSelected(null);\n        return;\n      case \"+\":\n      case \"=\":\n        event.preventDefault();\n        api.zoomBy(1.25);\n        return;\n      case \"-\":\n      case \"_\":\n        event.preventDefault();\n        api.zoomBy(0.8);\n        return;\n      case \"0\":\n        event.preventDefault();\n        api.fitView();\n        return;\n    }\n  };\n\n  const defaultRender = (node: DagViewNode<unknown>): React.ReactNode => (\n    <>\n      <span className=\"smwb-dag-view__dot\" aria-hidden=\"true\" />\n      <span className=\"smwb-dag-view__label\">{node.label ?? node.id}</span>\n      {node.status ? <span className=\"smwb-dag-view__status\">{statusWord(node.status)}</span> : null}\n    </>\n  );\n\n  const description = (id: string): string => {\n    const node = byId.get(id);\n    const parts: string[] = [];\n    if (node?.status) parts.push(`${labels.status}: ${statusWord(node.status)}.`);\n    const names = (list: string[]): string => list.map((other) => nameOf(byId.get(other), other)).join(\", \");\n    const from = (graph.incoming.get(id) ?? []).map((e) => e.source);\n    const to = (graph.outgoing.get(id) ?? []).map((e) => e.target);\n    if (from.length) parts.push(`${labels.dependsOn}: ${names(from)}.`);\n    if (to.length) parts.push(`${labels.requiredBy}: ${names(to)}.`);\n    return parts.join(\" \");\n  };\n\n  const renderNodeFor = (id: string, index: number): React.ReactNode => {\n    const node = byId.get(id);\n    const view: DagViewNode<unknown> = node ?? { id };\n    const state: DagViewNodeState = {\n      selected: selected === id,\n      related: relations.nodes.get(id) ?? null,\n      dimmed: Boolean(dimUnrelated) && relations.active && selected !== id && !relations.nodes.has(id),\n      focused: focused === id,\n    };\n    const descriptionId = `${uid}-node-${index}`;\n    const box = layout.nodes.get(id);\n    const nodeStyle: React.CSSProperties = box\n      ? {\n          left: `${box.x + PADDING}px`,\n          top: `${box.y + PADDING}px`,\n          width: `${box.width}px`,\n          height: `${box.height}px`,\n        }\n      : { display: \"none\" };\n    const accent = node?.accent;\n    if (accent) (nodeStyle as Record<string, string>)[\"--smwb-dag-view-node-accent\"] = accent;\n    const onFocus = (event: React.FocusEvent<HTMLDivElement>): void => {\n      if (event.target !== event.currentTarget) return;\n      setActive(id);\n      setFocused(id);\n      let keyboard = true;\n      try {\n        keyboard = event.currentTarget.matches(\":focus-visible\");\n      } catch {\n        // An engine without :focus-visible: treat it as the keyboard.\n      }\n      if (keyboard) ensureVisible(id);\n    };\n    const onBlur = (event: React.FocusEvent<HTMLDivElement>): void => {\n      if (event.target !== event.currentTarget || focusedRef.current !== id) return;\n      // A blur from a node that is leaving the graph keeps the focus tracking:\n      // the removal effect moves focus on to the Tab stop instead of the page.\n      if (!idsRef.current.includes(id)) return;\n      setFocused(null);\n    };\n    const describedBy = description(id);\n    const content = (renderNode ?? defaultRender)(view, state);\n    return (\n      <div\n        key={id}\n        role=\"option\"\n        data-dag-id={id}\n        ref={(el) => {\n          if (el) elementsRef.current.set(id, el);\n          else elementsRef.current.delete(id);\n        }}\n        className={cn(\"smwb-dag-view__node\", {\n          \"smwb-dag-view__node--selected\": state.selected,\n          \"smwb-dag-view__node--upstream\": state.related === \"upstream\",\n          \"smwb-dag-view__node--downstream\": state.related === \"downstream\",\n          \"smwb-dag-view__node--dimmed\": state.dimmed,\n          \"smwb-dag-view__node--disabled\": Boolean(node?.disabled),\n        })}\n        data-status={node?.status}\n        aria-selected={state.selected}\n        aria-disabled={node?.disabled ? true : undefined}\n        aria-describedby={describedBy ? descriptionId : undefined}\n        tabIndex={tabStop === id ? 0 : -1}\n        style={nodeStyle}\n        onClick={(event) => choose(id, event)}\n        onFocus={onFocus}\n        onBlur={onBlur}\n      >\n        {content}\n        <span id={descriptionId} hidden>\n          {describedBy}\n        </span>\n      </div>\n    );\n  };\n\n  const edgeClass = (edge: DagLayoutEdge): string => {\n    const relation = relations.edges.get(edge.id);\n    return cn(\"smwb-dag-view__edge\", {\n      \"smwb-dag-view__edge--active\": relation !== undefined,\n      \"smwb-dag-view__edge--upstream\": relation === \"upstream\",\n      \"smwb-dag-view__edge--downstream\": relation === \"downstream\",\n      \"smwb-dag-view__edge--dimmed\": Boolean(dimUnrelated) && relations.active && relation === undefined,\n      \"smwb-dag-view__edge--reversed\": edge.reversed,\n    });\n  };\n\n  const worldWidth = layout.width + PADDING * 2;\n  const worldHeight = layout.height + PADDING * 2;\n  const forkedRef = useForkRef(ref, rootRef);\n\n  return (\n    <div\n      data-testid={dataTestId}\n      {...rest}\n      ref={forkedRef}\n      className={cn(\"smwb-dag-view\", className)}\n      // The default height is the stylesheet's, so a height in the caller's style is not overridden.\n      style={height === undefined ? style : { ...style, height: cssLength(height) }}\n      data-direction={direction}\n      data-zoom={far ? \"far\" : undefined}\n      data-interacting={interacting ? \"\" : undefined}\n    >\n      <div\n        className=\"smwb-dag-view__world\"\n        role=\"listbox\"\n        aria-label={label}\n        aria-roledescription={labels.roleDescription}\n        aria-describedby={summary ? summaryId : undefined}\n        style={{\n          width: `${worldWidth}px`,\n          height: `${worldHeight}px`,\n          transform: viewportTransform(viewport),\n        }}\n        onKeyDown={onKeyDown}\n      >\n        <svg className=\"smwb-dag-view__edges\" width={worldWidth} height={worldHeight} aria-hidden=\"true\">\n          <defs>\n            <marker\n              id={arrowId}\n              viewBox=\"0 0 10 10\"\n              refX=\"9\"\n              refY=\"5\"\n              markerWidth=\"10\"\n              markerHeight=\"10\"\n              markerUnits=\"userSpaceOnUse\"\n              orient=\"auto-start-reverse\"\n            >\n              <path className=\"smwb-dag-view__arrow\" d=\"M0,1 L9,5 L0,9 z\" />\n            </marker>\n            <marker\n              id={activeArrowId}\n              viewBox=\"0 0 10 10\"\n              refX=\"9\"\n              refY=\"5\"\n              markerWidth=\"10\"\n              markerHeight=\"10\"\n              markerUnits=\"userSpaceOnUse\"\n              orient=\"auto-start-reverse\"\n            >\n              <path className=\"smwb-dag-view__arrow smwb-dag-view__arrow--active\" d=\"M0,1 L9,5 L0,9 z\" />\n            </marker>\n          </defs>\n          <g transform={`translate(${PADDING} ${PADDING})`}>\n            {layout.edges.map((edge) => (\n              <path\n                key={edge.id}\n                className={edgeClass(edge)}\n                data-source={edge.source}\n                data-target={edge.target}\n                d={dagEdgePath(edge.points, direction)}\n                markerEnd={`url(#${relations.edges.has(edge.id) ? activeArrowId : arrowId})`}\n              />\n            ))}\n          </g>\n        </svg>\n        {ids.map((id, index) => renderNodeFor(id, index))}\n      </div>\n      {summary ? (\n        <p id={summaryId} className=\"smwb-dag-view__summary\">\n          {summary}\n        </p>\n      ) : null}\n      {controls ? (\n        <div className=\"smwb-dag-view__controls\" role=\"group\" aria-label={labels.controls}>\n          <button\n            type=\"button\"\n            className=\"smwb-dag-view__control\"\n            title={labels.zoomIn}\n            onClick={() => api.zoomBy(1.25)}\n          >\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M12 5v14M5 12h14\" />\n            </svg>\n          </button>\n          <button\n            type=\"button\"\n            className=\"smwb-dag-view__control\"\n            title={labels.zoomOut}\n            onClick={() => api.zoomBy(0.8)}\n          >\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M5 12h14\" />\n            </svg>\n          </button>\n          <button type=\"button\" className=\"smwb-dag-view__control\" title={labels.fitView} onClick={() => api.fitView()}>\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5\" />\n            </svg>\n          </button>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\n/**\n * A directed graph of dependencies: nodes in layers, left to right or top to\n * bottom, joined by arrows. A node is selected by a click or the keyboard, and\n * the edges into and out of it light up; the view pans and zooms with a mouse,\n * a trackpad, touch or the keyboard.\n *\n * `forwardRef` pins the props' generic to its default, so the export is\n * re-typed over it: `T` is inferred from `nodes`, and `renderNode` and\n * `onNodeClick` see `node.data` as `T`.\n */\nexport const DagView = DagViewInner as <T = unknown>(\n  props: DagViewProps<T> & React.RefAttributes<HTMLDivElement>\n) => React.ReactElement | null;\n\nexport default DagView;\n"],"names":["PADDING","DEFAULT_LABELS","INNER_FOCUSABLE","cssLength","value","sameList","a","b","i","nameOf","node","id","label","warn","message","DagViewInner","React","props","ref","className","style","summary","nodes","edges","renderNode","direction","nodeWidth","nodeHeight","rankGap","nodeGap","layoutProp","selectedId","defaultSelectedId","onSelectedChange","onNodeClick","dimUnrelated","viewportProp","defaultViewport","onViewportChange","fit","minZoom","maxZoom","wheel","controls","labelsProp","height","apiRef","dataTestId","rest","uid","useId","arrowId","activeArrowId","summaryId","rootRef","elementsRef","labels","statusWord","status","_a","byId","map","nextIds","idsRef","ids","structure","layoutNodes","_b","layoutEdges","edge","input","e","structureRef","stableStructure","latest","layout","dagLayout","across","graph","incoming","outgoing","ordered","layers","selected","setSelected","useControllableState","relations","edgeMap","nodeMap","active","setActive","focused","setFocused","tabStop","viewport","setViewport","interacting","setInteracting","far","viewportRef","selectedRef","focusedRef","tabStopRef","setSelectedRef","setViewportRef","layoutRef","renderNodeRef","fitPendingRef","size","_d","_c","hasSize","width","worldSize","nodeRect","box","apiRefBox","self","world","fitBounds","zoom","factor","zoomAt","rect","centerOn","api","ensureVisible","isVisible","tryFit","useSafeLayoutEffect","root","dispose","createPanZoom","next","frame","resizeObserver","choose","event","focusNode","previousIdsRef","before","present","chosen","had","doc","stop","ownTabIndexRef","appliedTabIndexRef","syncInnerTabStops","own","applied","el","inner","observer","mutations","sync","mutation","now","neighbour","key","tb","forward","back","after","first","list","other","layer","index","_e","onKeyDown","target","dx","dy","defaultRender","jsxs","Fragment","jsx","description","parts","names","from","to","renderNodeFor","view","state","descriptionId","nodeStyle","accent","onFocus","keyboard","onBlur","describedBy","content","cn","edgeClass","relation","worldWidth","worldHeight","forkedRef","useForkRef","viewportTransform","dagEdgePath","DagView"],"mappings":"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"}

package/dist/components/dataDisplay/dagView/index.d.ts

@@ -0,0 +1,4 @@
+export { DagView } from "./dagView";
+export type { DagViewProps, DagViewNode, DagViewEdge, DagViewStatus, DagViewViewport, DagViewApi, DagViewNodeState, DagViewLabels, } from "./dagView";
+export { dagLayout, dagEdgePath, dagEdgeId } from "./dagLayout";
+export type { DagDirection, DagLayoutInput, DagLayoutInputNode, DagLayoutInputEdge, DagLayoutResult, DagLayoutNode, DagLayoutEdge, DagPoint, } from "./dagLayout";

package/dist/components/dataDisplay/dagView/panZoom.d.ts

@@ -0,0 +1,75 @@
+/** What the world is moved and scaled by: `translate(x, y) scale(zoom)`, origin top left. */
+export interface Viewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Bounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare const clamp: (value: number, min: number, max: number) => number;
+/** The viewport scaled by `factor` (clamped to min…max), keeping the world point under `point` in place. */
+export declare function zoomAt(viewport: Viewport, point: Point, factor: number, min: number, max: number): Viewport;
+/** The viewport that shows `bounds` (world units) whole and centred in a box of `size`, `padding` from its edges. */
+export declare function fitBounds(bounds: Bounds, size: {
+    width: number;
+    height: number;
+}, padding: number, min: number, max: number): Viewport;
+/** The viewport, at its zoom, that puts the world point `point` in the middle of a box of `size`. */
+export declare function centerOn(viewport: Viewport, point: Point, size: {
+    width: number;
+    height: number;
+}): Viewport;
+/** Whether the world rectangle lies inside the box of `size` at `viewport`, `margin` from its edges. */
+export declare function isVisible(viewport: Viewport, rect: Bounds, size: {
+    width: number;
+    height: number;
+}, margin?: number): boolean;
+/** The zoom factor for a wheel turn: lines and pages count as many pixels, a pinch (ctrl) zooms faster. */
+export declare function wheelZoomFactor(deltaY: number, deltaMode: number, pinch: boolean): number;
+/** Rounded translation, so text is not blurred at rest by subpixel offsets. */
+export declare const viewportTransform: (viewport: Viewport) => string;
+export declare const sameViewport: (a: Viewport, b: Viewport) => boolean;
+/**
+ * Coalesces writes to one per animation frame: `schedule` keeps the latest
+ * value, and `write` gets it on the next frame. `pending()` is that latest value
+ * until it is written, so a gesture builds on what it asked for, not on what was
+ * drawn last.
+ */
+export declare function createFrameWriter<T>(write: (value: T) => void, frame?: {
+    request: (callback: () => void) => number;
+    cancel: (id: number) => void;
+}): {
+    schedule(value: T): void;
+    pending(): T | undefined;
+    flush(): void;
+    cancel(): void;
+};
+export type WheelMode = "zoom" | "pan" | "none";
+export interface PanZoomOptions {
+    /** The viewport as drawn now. */
+    viewport: () => Viewport;
+    /** Gets the new viewport, at most once per frame. */
+    write: (viewport: Viewport) => void;
+    minZoom: () => number;
+    maxZoom: () => number;
+    /** Plain wheel: zoom (default), pan, or leave it to the page. Ctrl+wheel (a trackpad pinch) always zooms. */
+    wheel: () => WheelMode;
+    /** True while a drag or pinch is under way. */
+    onInteracting?: (interacting: boolean) => void;
+    /** Pixels a press moves before it pans rather than clicks; 3 by default. */
+    threshold?: number;
+}
+/**
+ * Pan and zoom on `el`: drag with a mouse or one finger, pinch with two, wheel,
+ * and a Safari trackpad pinch. A drag that moved past the threshold swallows
+ * the click that follows it. Returns the function that removes it all.
+ */
+export declare function createPanZoom(el: HTMLElement, options: PanZoomOptions): () => void;

package/dist/components/dataDisplay/dagView/panZoom.js

@@ -0,0 +1,171 @@
+const I = (e, n, r) => Math.min(r, Math.max(n, e));
+function v(e, n, r, i, s) {
+  const a = I(e.zoom * r, i, s), m = a / e.zoom;
+  return { x: n.x - (n.x - e.x) * m, y: n.y - (n.y - e.y) * m, zoom: a };
+}
+function S(e, n, r, i, s) {
+  const a = { width: Math.max(1, n.width - r * 2), height: Math.max(1, n.height - r * 2) }, m = Math.min(a.width / Math.max(1, e.width), a.height / Math.max(1, e.height)), c = I(m, i, s);
+  return {
+    x: (n.width - e.width * c) / 2 - e.x * c,
+    y: (n.height - e.height * c) / 2 - e.y * c,
+    zoom: c
+  };
+}
+function W(e, n, r) {
+  return {
+    x: r.width / 2 - n.x * e.zoom,
+    y: r.height / 2 - n.y * e.zoom,
+    zoom: e.zoom
+  };
+}
+function N(e, n, r, i = 0) {
+  const s = e.x + n.x * e.zoom, a = e.y + n.y * e.zoom;
+  return s >= i && a >= i && s + n.width * e.zoom <= r.width - i && a + n.height * e.zoom <= r.height - i;
+}
+function B(e, n, r) {
+  const i = n === 1 ? e * 16 : n === 2 ? e * 400 : e, s = I(i, -100, 100) * (r ? 0.01 : 2e-3);
+  return Math.exp(-s);
+}
+const O = (e) => `translate(${Math.round(e.x)}px, ${Math.round(e.y)}px) scale(${Math.round(e.zoom * 1e4) / 1e4})`, R = (e, n) => e.x === n.x && e.y === n.y && e.zoom === n.zoom;
+function V(e, n = {
+  request: (r) => typeof requestAnimationFrame == "function" ? requestAnimationFrame(r) : window.setTimeout(r, 16),
+  cancel: (r) => typeof cancelAnimationFrame == "function" ? cancelAnimationFrame(r) : window.clearTimeout(r)
+}) {
+  let r, i;
+  const s = () => {
+    i !== void 0 && n.cancel(i), i = void 0;
+    const a = r;
+    r = void 0, a && e(a.current);
+  };
+  return {
+    schedule(a) {
+      r = { current: a }, i === void 0 && (i = n.request(() => {
+        i = void 0, s();
+      }));
+    },
+    pending: () => r == null ? void 0 : r.current,
+    flush: s,
+    cancel() {
+      i !== void 0 && n.cancel(i), i = void 0, r = void 0;
+    }
+  };
+}
+const $ = "a[href], button, input, select, textarea, label, summary, [contenteditable], [data-dag-no-pan]";
+function U(e, n) {
+  var G;
+  const r = (G = n.threshold) != null ? G : 3, i = V(n.write), s = () => {
+    var t;
+    return (t = i.pending()) != null ? t : n.viewport();
+  }, a = (t) => {
+    R(t, s()) || i.schedule(t);
+  }, m = (t, o) => {
+    const d = e.getBoundingClientRect();
+    return { x: t - d.left, y: o - d.top };
+  }, c = /* @__PURE__ */ new Map(), y = e.ownerDocument;
+  let X = !1;
+  const L = (t) => {
+    t !== X && (X = t, t ? (y.addEventListener("pointermove", A, !0), y.addEventListener("pointerup", E, !0), y.addEventListener("pointercancel", E, !0)) : (y.removeEventListener("pointermove", A, !0), y.removeEventListener("pointerup", E, !0), y.removeEventListener("pointercancel", E, !0)));
+  };
+  let u, l, p = !1, z = !1, Z = !1;
+  const M = (t) => {
+    var o;
+    t !== Z && (Z = t, (o = n.onInteracting) == null || o.call(n, t));
+  }, C = () => {
+    const [t, o] = [...c.values()];
+    return { distance: Math.hypot(t.x - o.x, t.y - o.y), mid: { x: (t.x + o.x) / 2, y: (t.y + o.y) / 2 } };
+  }, D = (t) => {
+    var d;
+    if (t.button !== 0 && t.pointerType === "mouse") return;
+    const o = t.target;
+    if (!((d = o == null ? void 0 : o.closest) != null && d.call(o, $))) {
+      if (c.set(t.pointerId, m(t.clientX, t.clientY)), L(!0), c.size === 1)
+        u = { point: c.get(t.pointerId), viewport: s(), id: t.pointerId }, p = !1;
+      else if (c.size === 2) {
+        const { distance: h, mid: f } = C();
+        l = { distance: h, mid: f, viewport: s() }, u = void 0;
+        for (const x of c.keys()) T(x);
+        M(!0);
+      }
+    }
+  }, T = (t) => {
+    var o;
+    try {
+      (o = e.setPointerCapture) == null || o.call(e, t);
+    } catch {
+    }
+  }, A = (t) => {
+    if (!c.has(t.pointerId)) return;
+    const o = m(t.clientX, t.clientY);
+    if (c.set(t.pointerId, o), l && c.size >= 2) {
+      const { distance: f, mid: x } = C(), g = v(
+        l.viewport,
+        l.mid,
+        f / Math.max(1, l.distance),
+        n.minZoom(),
+        n.maxZoom()
+      );
+      a({ ...g, x: g.x + x.x - l.mid.x, y: g.y + x.y - l.mid.y });
+      return;
+    }
+    if (!u || u.id !== t.pointerId) return;
+    const d = o.x - u.point.x, h = o.y - u.point.y;
+    if (!p) {
+      if (Math.hypot(d, h) < r) return;
+      p = !0, T(t.pointerId), M(!0);
+    }
+    a({ x: u.viewport.x + d, y: u.viewport.y + h, zoom: u.viewport.zoom });
+  }, E = (t) => {
+    if (c.delete(t.pointerId)) {
+      if ((p || l) && (z = !0), c.size < 2 && (l = void 0), c.size === 0)
+        L(!1), u = void 0, p = !1, M(!1), i.flush(), setTimeout(() => z = !1, 0);
+      else if (c.size === 1) {
+        const [[o, d]] = [...c.entries()];
+        u = { point: d, viewport: s(), id: o }, p = !0;
+      }
+    }
+  }, F = (t) => {
+    z && (z = !1, t.stopPropagation(), t.preventDefault());
+  }, P = (t) => {
+    const o = t.ctrlKey || t.metaKey, d = n.wheel();
+    if (!o && d === "none") return;
+    if (t.preventDefault(), !o && d === "pan") {
+      const f = s(), x = t.deltaMode === 1 ? 16 : t.deltaMode === 2 ? 400 : 1, g = t.shiftKey && !t.deltaX ? t.deltaY : t.deltaX, K = t.shiftKey && !t.deltaX ? 0 : t.deltaY;
+      a({ x: f.x - g * x, y: f.y - K * x, zoom: f.zoom });
+      return;
+    }
+    const h = B(t.deltaY, t.deltaMode, o);
+    a(v(s(), m(t.clientX, t.clientY), h, n.minZoom(), n.maxZoom()));
+  };
+  let w;
+  const k = (t) => {
+    var h;
+    t.preventDefault();
+    const o = t, d = e.getBoundingClientRect();
+    w = {
+      viewport: s(),
+      point: o.clientX === void 0 ? { x: d.width / 2, y: d.height / 2 } : m(o.clientX, (h = o.clientY) != null ? h : 0)
+    };
+  }, Y = (t) => {
+    t.preventDefault();
+    const o = t.scale;
+    !w || typeof o != "number" || a(v(w.viewport, w.point, o, n.minZoom(), n.maxZoom()));
+  }, q = (t) => {
+    t.preventDefault(), w = void 0;
+  };
+  return e.addEventListener("pointerdown", D), e.addEventListener("click", F, !0), e.addEventListener("wheel", P, { passive: !1 }), e.addEventListener("gesturestart", k), e.addEventListener("gesturechange", Y), e.addEventListener("gestureend", q), () => {
+    i.cancel(), L(!1), e.removeEventListener("pointerdown", D), e.removeEventListener("click", F, !0), e.removeEventListener("wheel", P), e.removeEventListener("gesturestart", k), e.removeEventListener("gesturechange", Y), e.removeEventListener("gestureend", q);
+  };
+}
+export {
+  W as centerOn,
+  I as clamp,
+  V as createFrameWriter,
+  U as createPanZoom,
+  S as fitBounds,
+  N as isVisible,
+  R as sameViewport,
+  O as viewportTransform,
+  B as wheelZoomFactor,
+  v as zoomAt
+};
+//# sourceMappingURL=panZoom.js.map

package/dist/components/dataDisplay/dagView/panZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panZoom.js","sources":["../../../../src/components/dataDisplay/dagView/panZoom.ts"],"sourcesContent":["// Pan and zoom for a transformed \"world\" inside a viewport element: pure math\n// (unit-tested) and plain DOM glue, with no Solid imports, so a React port can\n// copy the file. The glue reads gestures and hands at most one new viewport per\n// animation frame to `write`.\n\n/** What the world is moved and scaled by: `translate(x, y) scale(zoom)`, origin top left. */\nexport interface Viewport {\n  x: number;\n  y: number;\n  zoom: number;\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface Bounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport const clamp = (value: number, min: number, max: number): number => Math.min(max, Math.max(min, value));\n\n/** The viewport scaled by `factor` (clamped to min…max), keeping the world point under `point` in place. */\nexport function zoomAt(viewport: Viewport, point: Point, factor: number, min: number, max: number): Viewport {\n  const zoom = clamp(viewport.zoom * factor, min, max);\n  const k = zoom / viewport.zoom;\n  return { x: point.x - (point.x - viewport.x) * k, y: point.y - (point.y - viewport.y) * k, zoom };\n}\n\n/** The viewport that shows `bounds` (world units) whole and centred in a box of `size`, `padding` from its edges. */\nexport function fitBounds(\n  bounds: Bounds,\n  size: { width: number; height: number },\n  padding: number,\n  min: number,\n  max: number\n): Viewport {\n  const room = { width: Math.max(1, size.width - padding * 2), height: Math.max(1, size.height - padding * 2) };\n  const fit = Math.min(room.width / Math.max(1, bounds.width), room.height / Math.max(1, bounds.height));\n  const zoom = clamp(fit, min, max);\n  return {\n    x: (size.width - bounds.width * zoom) / 2 - bounds.x * zoom,\n    y: (size.height - bounds.height * zoom) / 2 - bounds.y * zoom,\n    zoom,\n  };\n}\n\n/** The viewport, at its zoom, that puts the world point `point` in the middle of a box of `size`. */\nexport function centerOn(viewport: Viewport, point: Point, size: { width: number; height: number }): Viewport {\n  return {\n    x: size.width / 2 - point.x * viewport.zoom,\n    y: size.height / 2 - point.y * viewport.zoom,\n    zoom: viewport.zoom,\n  };\n}\n\n/** Whether the world rectangle lies inside the box of `size` at `viewport`, `margin` from its edges. */\nexport function isVisible(\n  viewport: Viewport,\n  rect: Bounds,\n  size: { width: number; height: number },\n  margin = 0\n): boolean {\n  const left = viewport.x + rect.x * viewport.zoom;\n  const top = viewport.y + rect.y * viewport.zoom;\n  return (\n    left >= margin &&\n    top >= margin &&\n    left + rect.width * viewport.zoom <= size.width - margin &&\n    top + rect.height * viewport.zoom <= size.height - margin\n  );\n}\n\n/** The zoom factor for a wheel turn: lines and pages count as many pixels, a pinch (ctrl) zooms faster. */\nexport function wheelZoomFactor(deltaY: number, deltaMode: number, pinch: boolean): number {\n  const pixels = deltaMode === 1 ? deltaY * 16 : deltaMode === 2 ? deltaY * 400 : deltaY;\n  const step = clamp(pixels, -100, 100) * (pinch ? 0.01 : 0.002);\n  return Math.exp(-step);\n}\n\n/** Rounded translation, so text is not blurred at rest by subpixel offsets. */\nexport const viewportTransform = (viewport: Viewport): string =>\n  `translate(${Math.round(viewport.x)}px, ${Math.round(viewport.y)}px) scale(${Math.round(viewport.zoom * 10000) / 10000})`;\n\nexport const sameViewport = (a: Viewport, b: Viewport): boolean => a.x === b.x && a.y === b.y && a.zoom === b.zoom;\n\n/**\n * Coalesces writes to one per animation frame: `schedule` keeps the latest\n * value, and `write` gets it on the next frame. `pending()` is that latest value\n * until it is written, so a gesture builds on what it asked for, not on what was\n * drawn last.\n */\nexport function createFrameWriter<T>(\n  write: (value: T) => void,\n  frame: { request: (callback: () => void) => number; cancel: (id: number) => void } = {\n    request: (callback) =>\n      typeof requestAnimationFrame === \"function\" ? requestAnimationFrame(callback) : window.setTimeout(callback, 16),\n    cancel: (id) => (typeof cancelAnimationFrame === \"function\" ? cancelAnimationFrame(id) : window.clearTimeout(id)),\n  }\n): { schedule(value: T): void; pending(): T | undefined; flush(): void; cancel(): void } {\n  let value: { current: T } | undefined;\n  let id: number | undefined;\n  const flush = (): void => {\n    if (id !== undefined) frame.cancel(id);\n    id = undefined;\n    const next = value;\n    value = undefined;\n    if (next) write(next.current);\n  };\n  return {\n    schedule(next) {\n      value = { current: next };\n      if (id === undefined)\n        id = frame.request(() => {\n          id = undefined;\n          flush();\n        });\n    },\n    pending: () => value?.current,\n    flush,\n    cancel() {\n      if (id !== undefined) frame.cancel(id);\n      id = undefined;\n      value = undefined;\n    },\n  };\n}\n\nexport type WheelMode = \"zoom\" | \"pan\" | \"none\";\n\nexport interface PanZoomOptions {\n  /** The viewport as drawn now. */\n  viewport: () => Viewport;\n  /** Gets the new viewport, at most once per frame. */\n  write: (viewport: Viewport) => void;\n  minZoom: () => number;\n  maxZoom: () => number;\n  /** Plain wheel: zoom (default), pan, or leave it to the page. Ctrl+wheel (a trackpad pinch) always zooms. */\n  wheel: () => WheelMode;\n  /** True while a drag or pinch is under way. */\n  onInteracting?: (interacting: boolean) => void;\n  /** Pixels a press moves before it pans rather than clicks; 3 by default. */\n  threshold?: number;\n}\n\n/** Targets where a press keeps its own meaning and does not pan: controls, links, fields. */\nconst INTERACTIVE = \"a[href], button, input, select, textarea, label, summary, [contenteditable], [data-dag-no-pan]\";\n\n/**\n * Pan and zoom on `el`: drag with a mouse or one finger, pinch with two, wheel,\n * and a Safari trackpad pinch. A drag that moved past the threshold swallows\n * the click that follows it. Returns the function that removes it all.\n */\nexport function createPanZoom(el: HTMLElement, options: PanZoomOptions): () => void {\n  const threshold = options.threshold ?? 3;\n  const writer = createFrameWriter<Viewport>(options.write);\n  const current = (): Viewport => writer.pending() ?? options.viewport();\n  const set = (next: Viewport): void => {\n    if (!sameViewport(next, current())) writer.schedule(next);\n  };\n  const local = (clientX: number, clientY: number): Point => {\n    const rect = el.getBoundingClientRect();\n    return { x: clientX - rect.left, y: clientY - rect.top };\n  };\n\n  const pointers = new Map<number, Point>();\n  // While a press is held, its moves and release are read on the document: a\n  // quick drag can leave the box before the threshold, when the pointer is\n  // captured, and the box would see nothing more of it. A captured pointer's\n  // events still reach the document, through the box.\n  const doc = el.ownerDocument;\n  let following = false;\n  const follow = (on: boolean): void => {\n    if (on === following) return;\n    following = on;\n    if (on) {\n      doc.addEventListener(\"pointermove\", onPointerMove, true);\n      doc.addEventListener(\"pointerup\", onPointerUp, true);\n      doc.addEventListener(\"pointercancel\", onPointerUp, true);\n    } else {\n      doc.removeEventListener(\"pointermove\", onPointerMove, true);\n      doc.removeEventListener(\"pointerup\", onPointerUp, true);\n      doc.removeEventListener(\"pointercancel\", onPointerUp, true);\n    }\n  };\n  let start: { point: Point; viewport: Viewport; id: number } | undefined;\n  let pinch: { distance: number; mid: Point; viewport: Viewport } | undefined;\n  let panning = false;\n  let swallowClick = false;\n  let interacting = false;\n  const setInteracting = (value: boolean): void => {\n    if (value === interacting) return;\n    interacting = value;\n    options.onInteracting?.(value);\n  };\n\n  const pinchState = (): { distance: number; mid: Point } => {\n    const [a, b] = [...pointers.values()] as [Point, Point];\n    return { distance: Math.hypot(a.x - b.x, a.y - b.y), mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } };\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (event.button !== 0 && event.pointerType === \"mouse\") return;\n    const target = event.target as Element | null;\n    if (target?.closest?.(INTERACTIVE)) return;\n    pointers.set(event.pointerId, local(event.clientX, event.clientY));\n    follow(true);\n    if (pointers.size === 1) {\n      start = { point: pointers.get(event.pointerId)!, viewport: current(), id: event.pointerId };\n      panning = false;\n    } else if (pointers.size === 2) {\n      const { distance, mid } = pinchState();\n      pinch = { distance, mid, viewport: current() };\n      start = undefined;\n      // A second finger makes it a gesture: take both pointers.\n      for (const id of pointers.keys()) capture(id);\n      setInteracting(true);\n    }\n  };\n\n  const capture = (id: number): void => {\n    try {\n      el.setPointerCapture?.(id);\n    } catch {\n      // The pointer is gone already.\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent): void => {\n    if (!pointers.has(event.pointerId)) return;\n    const point = local(event.clientX, event.clientY);\n    pointers.set(event.pointerId, point);\n    if (pinch && pointers.size >= 2) {\n      const { distance, mid } = pinchState();\n      const scaled = zoomAt(\n        pinch.viewport,\n        pinch.mid,\n        distance / Math.max(1, pinch.distance),\n        options.minZoom(),\n        options.maxZoom()\n      );\n      set({ ...scaled, x: scaled.x + mid.x - pinch.mid.x, y: scaled.y + mid.y - pinch.mid.y });\n      return;\n    }\n    if (!start || start.id !== event.pointerId) return;\n    const dx = point.x - start.point.x;\n    const dy = point.y - start.point.y;\n    if (!panning) {\n      if (Math.hypot(dx, dy) < threshold) return;\n      // Captured only now: a capture from the press would take the click from the node under it.\n      panning = true;\n      capture(event.pointerId);\n      setInteracting(true);\n    }\n    set({ x: start.viewport.x + dx, y: start.viewport.y + dy, zoom: start.viewport.zoom });\n  };\n\n  const onPointerUp = (event: PointerEvent): void => {\n    if (!pointers.delete(event.pointerId)) return;\n    if (panning || pinch) swallowClick = true;\n    if (pointers.size < 2) pinch = undefined;\n    if (pointers.size === 0) {\n      follow(false);\n      start = undefined;\n      panning = false;\n      setInteracting(false);\n      writer.flush();\n      // A click comes right after the release, or not at all.\n      setTimeout(() => (swallowClick = false), 0);\n    } else if (pointers.size === 1) {\n      // One finger left after a pinch: it pans from here.\n      const [[id, point]] = [...pointers.entries()] as [[number, Point]];\n      start = { point, viewport: current(), id };\n      panning = true;\n    }\n  };\n\n  const onClick = (event: MouseEvent): void => {\n    if (!swallowClick) return;\n    swallowClick = false;\n    event.stopPropagation();\n    event.preventDefault();\n  };\n\n  const onWheel = (event: WheelEvent): void => {\n    const pinchGesture = event.ctrlKey || event.metaKey;\n    const mode = options.wheel();\n    if (!pinchGesture && mode === \"none\") return;\n    event.preventDefault();\n    if (!pinchGesture && mode === \"pan\") {\n      const v = current();\n      const scale = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 400 : 1;\n      const dx = event.shiftKey && !event.deltaX ? event.deltaY : event.deltaX;\n      const dy = event.shiftKey && !event.deltaX ? 0 : event.deltaY;\n      set({ x: v.x - dx * scale, y: v.y - dy * scale, zoom: v.zoom });\n      return;\n    }\n    const factor = wheelZoomFactor(event.deltaY, event.deltaMode, pinchGesture);\n    set(zoomAt(current(), local(event.clientX, event.clientY), factor, options.minZoom(), options.maxZoom()));\n  };\n\n  // Safari reports a trackpad pinch as gesture events, with the scale since the gesture began.\n  let gesture: { viewport: Viewport; point: Point } | undefined;\n  const onGestureStart = (event: Event): void => {\n    event.preventDefault();\n    const e = event as Event & { clientX?: number; clientY?: number };\n    const rect = el.getBoundingClientRect();\n    gesture = {\n      viewport: current(),\n      point: e.clientX === undefined ? { x: rect.width / 2, y: rect.height / 2 } : local(e.clientX, e.clientY ?? 0),\n    };\n  };\n  const onGestureChange = (event: Event): void => {\n    event.preventDefault();\n    const scale = (event as Event & { scale?: number }).scale;\n    if (!gesture || typeof scale !== \"number\") return;\n    set(zoomAt(gesture.viewport, gesture.point, scale, options.minZoom(), options.maxZoom()));\n  };\n  const onGestureEnd = (event: Event): void => {\n    event.preventDefault();\n    gesture = undefined;\n  };\n\n  el.addEventListener(\"pointerdown\", onPointerDown);\n  el.addEventListener(\"click\", onClick, true);\n  el.addEventListener(\"wheel\", onWheel, { passive: false });\n  el.addEventListener(\"gesturestart\", onGestureStart);\n  el.addEventListener(\"gesturechange\", onGestureChange);\n  el.addEventListener(\"gestureend\", onGestureEnd);\n\n  return () => {\n    writer.cancel();\n    follow(false);\n    el.removeEventListener(\"pointerdown\", onPointerDown);\n    el.removeEventListener(\"click\", onClick, true);\n    el.removeEventListener(\"wheel\", onWheel);\n    el.removeEventListener(\"gesturestart\", onGestureStart);\n    el.removeEventListener(\"gesturechange\", onGestureChange);\n    el.removeEventListener(\"gestureend\", onGestureEnd);\n  };\n}\n"],"names":["clamp","value","min","max","zoomAt","viewport","point","factor","zoom","k","fitBounds","bounds","size","padding","room","fit","centerOn","isVisible","rect","margin","left","top","wheelZoomFactor","deltaY","deltaMode","pinch","pixels","step","viewportTransform","sameViewport","a","b","createFrameWriter","write","frame","callback","id","flush","next","INTERACTIVE","createPanZoom","el","options","_a","threshold","writer","current","set","local","clientX","clientY","pointers","doc","following","follow","on","onPointerMove","onPointerUp","start","panning","swallowClick","interacting","setInteracting","pinchState","onPointerDown","event","target","distance","mid","capture","scaled","dx","dy","onClick","onWheel","pinchGesture","mode","v","scale","gesture","onGestureStart","e","onGestureChange","onGestureEnd"],"mappings":"AAwBO,MAAMA,IAAQ,CAACC,GAAeC,GAAaC,MAAwB,KAAK,IAAIA,GAAK,KAAK,IAAID,GAAKD,CAAK,CAAC;AAGrG,SAASG,EAAOC,GAAoBC,GAAcC,GAAgBL,GAAaC,GAAuB;AAC3G,QAAMK,IAAOR,EAAMK,EAAS,OAAOE,GAAQL,GAAKC,CAAG,GAC7CM,IAAID,IAAOH,EAAS;AAC1B,SAAO,EAAE,GAAGC,EAAM,KAAKA,EAAM,IAAID,EAAS,KAAKI,GAAG,GAAGH,EAAM,KAAKA,EAAM,IAAID,EAAS,KAAKI,GAAG,MAAAD,EAAA;AAC7F;AAGO,SAASE,EACdC,GACAC,GACAC,GACAX,GACAC,GACU;AACV,QAAMW,IAAO,EAAE,OAAO,KAAK,IAAI,GAAGF,EAAK,QAAQC,IAAU,CAAC,GAAG,QAAQ,KAAK,IAAI,GAAGD,EAAK,SAASC,IAAU,CAAC,EAAA,GACpGE,IAAM,KAAK,IAAID,EAAK,QAAQ,KAAK,IAAI,GAAGH,EAAO,KAAK,GAAGG,EAAK,SAAS,KAAK,IAAI,GAAGH,EAAO,MAAM,CAAC,GAC/FH,IAAOR,EAAMe,GAAKb,GAAKC,CAAG;AAChC,SAAO;AAAA,IACL,IAAIS,EAAK,QAAQD,EAAO,QAAQH,KAAQ,IAAIG,EAAO,IAAIH;AAAA,IACvD,IAAII,EAAK,SAASD,EAAO,SAASH,KAAQ,IAAIG,EAAO,IAAIH;AAAA,IACzD,MAAAA;AAAA,EAAA;AAEJ;AAGO,SAASQ,EAASX,GAAoBC,GAAcM,GAAmD;AAC5G,SAAO;AAAA,IACL,GAAGA,EAAK,QAAQ,IAAIN,EAAM,IAAID,EAAS;AAAA,IACvC,GAAGO,EAAK,SAAS,IAAIN,EAAM,IAAID,EAAS;AAAA,IACxC,MAAMA,EAAS;AAAA,EAAA;AAEnB;AAGO,SAASY,EACdZ,GACAa,GACAN,GACAO,IAAS,GACA;AACT,QAAMC,IAAOf,EAAS,IAAIa,EAAK,IAAIb,EAAS,MACtCgB,IAAMhB,EAAS,IAAIa,EAAK,IAAIb,EAAS;AAC3C,SACEe,KAAQD,KACRE,KAAOF,KACPC,IAAOF,EAAK,QAAQb,EAAS,QAAQO,EAAK,QAAQO,KAClDE,IAAMH,EAAK,SAASb,EAAS,QAAQO,EAAK,SAASO;AAEvD;AAGO,SAASG,EAAgBC,GAAgBC,GAAmBC,GAAwB;AACzF,QAAMC,IAASF,MAAc,IAAID,IAAS,KAAKC,MAAc,IAAID,IAAS,MAAMA,GAC1EI,IAAO3B,EAAM0B,GAAQ,MAAM,GAAG,KAAKD,IAAQ,OAAO;AACxD,SAAO,KAAK,IAAI,CAACE,CAAI;AACvB;AAGO,MAAMC,IAAoB,CAACvB,MAChC,aAAa,KAAK,MAAMA,EAAS,CAAC,CAAC,OAAO,KAAK,MAAMA,EAAS,CAAC,CAAC,aAAa,KAAK,MAAMA,EAAS,OAAO,GAAK,IAAI,GAAK,KAE3GwB,IAAe,CAACC,GAAaC,MAAyBD,EAAE,MAAMC,EAAE,KAAKD,EAAE,MAAMC,EAAE,KAAKD,EAAE,SAASC,EAAE;AAQvG,SAASC,EACdC,GACAC,IAAqF;AAAA,EACnF,SAAS,CAACC,MACR,OAAO,yBAA0B,aAAa,sBAAsBA,CAAQ,IAAI,OAAO,WAAWA,GAAU,EAAE;AAAA,EAChH,QAAQ,CAACC,MAAQ,OAAO,wBAAyB,aAAa,qBAAqBA,CAAE,IAAI,OAAO,aAAaA,CAAE;AACjH,GACuF;AACvF,MAAInC,GACAmC;AACJ,QAAMC,IAAQ,MAAY;AACxB,IAAID,MAAO,UAAWF,EAAM,OAAOE,CAAE,GACrCA,IAAK;AACL,UAAME,IAAOrC;AACb,IAAAA,IAAQ,QACJqC,KAAML,EAAMK,EAAK,OAAO;AAAA,EAC9B;AACA,SAAO;AAAA,IACL,SAASA,GAAM;AACb,MAAArC,IAAQ,EAAE,SAASqC,EAAA,GACfF,MAAO,WACTA,IAAKF,EAAM,QAAQ,MAAM;AACvB,QAAAE,IAAK,QACLC,EAAA;AAAA,MACF,CAAC;AAAA,IACL;AAAA,IACA,SAAS,MAAMpC,KAAA,gBAAAA,EAAO;AAAA,IACtB,OAAAoC;AAAA,IACA,SAAS;AACP,MAAID,MAAO,UAAWF,EAAM,OAAOE,CAAE,GACrCA,IAAK,QACLnC,IAAQ;AAAA,IACV;AAAA,EAAA;AAEJ;AAoBA,MAAMsC,IAAc;AAOb,SAASC,EAAcC,GAAiBC,GAAqC;AArI7E,MAAAC;AAsIL,QAAMC,KAAYD,IAAAD,EAAQ,cAAR,OAAAC,IAAqB,GACjCE,IAASb,EAA4BU,EAAQ,KAAK,GAClDI,IAAU,MAAA;AAxIX,QAAAH;AAwI2B,YAAAA,IAAAE,EAAO,QAAA,MAAP,OAAAF,IAAoBD,EAAQ,SAAA;AAAA,KACtDK,IAAM,CAACT,MAAyB;AACpC,IAAKT,EAAaS,GAAMQ,EAAA,CAAS,KAAGD,EAAO,SAASP,CAAI;AAAA,EAC1D,GACMU,IAAQ,CAACC,GAAiBC,MAA2B;AACzD,UAAMhC,IAAOuB,EAAG,sBAAA;AAChB,WAAO,EAAE,GAAGQ,IAAU/B,EAAK,MAAM,GAAGgC,IAAUhC,EAAK,IAAA;AAAA,EACrD,GAEMiC,wBAAe,IAAA,GAKfC,IAAMX,EAAG;AACf,MAAIY,IAAY;AAChB,QAAMC,IAAS,CAACC,MAAsB;AACpC,IAAIA,MAAOF,MACXA,IAAYE,GACRA,KACFH,EAAI,iBAAiB,eAAeI,GAAe,EAAI,GACvDJ,EAAI,iBAAiB,aAAaK,GAAa,EAAI,GACnDL,EAAI,iBAAiB,iBAAiBK,GAAa,EAAI,MAEvDL,EAAI,oBAAoB,eAAeI,GAAe,EAAI,GAC1DJ,EAAI,oBAAoB,aAAaK,GAAa,EAAI,GACtDL,EAAI,oBAAoB,iBAAiBK,GAAa,EAAI;AAAA,EAE9D;AACA,MAAIC,GACAjC,GACAkC,IAAU,IACVC,IAAe,IACfC,IAAc;AAClB,QAAMC,IAAiB,CAAC7D,MAAyB;AA1K5C,QAAA0C;AA2KH,IAAI1C,MAAU4D,MACdA,IAAc5D,IACd0C,IAAAD,EAAQ,kBAAR,QAAAC,EAAA,KAAAD,GAAwBzC;AAAA,EAC1B,GAEM8D,IAAa,MAAwC;AACzD,UAAM,CAACjC,GAAGC,CAAC,IAAI,CAAC,GAAGoB,EAAS,QAAQ;AACpC,WAAO,EAAE,UAAU,KAAK,MAAMrB,EAAE,IAAIC,EAAE,GAAGD,EAAE,IAAIC,EAAE,CAAC,GAAG,KAAK,EAAE,IAAID,EAAE,IAAIC,EAAE,KAAK,GAAG,IAAID,EAAE,IAAIC,EAAE,KAAK,EAAA,EAAE;AAAA,EACrG,GAEMiC,IAAgB,CAACC,MAA8B;AArLhD,QAAAtB;AAsLH,QAAIsB,EAAM,WAAW,KAAKA,EAAM,gBAAgB,QAAS;AACzD,UAAMC,IAASD,EAAM;AACrB,QAAI,GAAAtB,IAAAuB,KAAA,gBAAAA,EAAQ,YAAR,QAAAvB,EAAA,KAAAuB,GAAkB3B;AAGtB,UAFAY,EAAS,IAAIc,EAAM,WAAWjB,EAAMiB,EAAM,SAASA,EAAM,OAAO,CAAC,GACjEX,EAAO,EAAI,GACPH,EAAS,SAAS;AACpB,QAAAO,IAAQ,EAAE,OAAOP,EAAS,IAAIc,EAAM,SAAS,GAAI,UAAUnB,EAAA,GAAW,IAAImB,EAAM,UAAA,GAChFN,IAAU;AAAA,eACDR,EAAS,SAAS,GAAG;AAC9B,cAAM,EAAE,UAAAgB,GAAU,KAAAC,EAAA,IAAQL,EAAA;AAC1B,QAAAtC,IAAQ,EAAE,UAAA0C,GAAU,KAAAC,GAAK,UAAUtB,IAAQ,GAC3CY,IAAQ;AAER,mBAAWtB,KAAMe,EAAS,KAAA,KAAgBf,CAAE;AAC5C,QAAA0B,EAAe,EAAI;AAAA,MACrB;AAAA;AAAA,EACF,GAEMO,IAAU,CAACjC,MAAqB;AAxMjC,QAAAO;AAyMH,QAAI;AACF,OAAAA,IAAAF,EAAG,sBAAH,QAAAE,EAAA,KAAAF,GAAuBL;AAAA,IACzB,QAAQ;AAAA,IAER;AAAA,EACF,GAEMoB,IAAgB,CAACS,MAA8B;AACnD,QAAI,CAACd,EAAS,IAAIc,EAAM,SAAS,EAAG;AACpC,UAAM3D,IAAQ0C,EAAMiB,EAAM,SAASA,EAAM,OAAO;AAEhD,QADAd,EAAS,IAAIc,EAAM,WAAW3D,CAAK,GAC/BmB,KAAS0B,EAAS,QAAQ,GAAG;AAC/B,YAAM,EAAE,UAAAgB,GAAU,KAAAC,EAAA,IAAQL,EAAA,GACpBO,IAASlE;AAAA,QACbqB,EAAM;AAAA,QACNA,EAAM;AAAA,QACN0C,IAAW,KAAK,IAAI,GAAG1C,EAAM,QAAQ;AAAA,QACrCiB,EAAQ,QAAA;AAAA,QACRA,EAAQ,QAAA;AAAA,MAAQ;AAElB,MAAAK,EAAI,EAAE,GAAGuB,GAAQ,GAAGA,EAAO,IAAIF,EAAI,IAAI3C,EAAM,IAAI,GAAG,GAAG6C,EAAO,IAAIF,EAAI,IAAI3C,EAAM,IAAI,GAAG;AACvF;AAAA,IACF;AACA,QAAI,CAACiC,KAASA,EAAM,OAAOO,EAAM,UAAW;AAC5C,UAAMM,IAAKjE,EAAM,IAAIoD,EAAM,MAAM,GAC3Bc,IAAKlE,EAAM,IAAIoD,EAAM,MAAM;AACjC,QAAI,CAACC,GAAS;AACZ,UAAI,KAAK,MAAMY,GAAIC,CAAE,IAAI5B,EAAW;AAEpC,MAAAe,IAAU,IACVU,EAAQJ,EAAM,SAAS,GACvBH,EAAe,EAAI;AAAA,IACrB;AACA,IAAAf,EAAI,EAAE,GAAGW,EAAM,SAAS,IAAIa,GAAI,GAAGb,EAAM,SAAS,IAAIc,GAAI,MAAMd,EAAM,SAAS,MAAM;AAAA,EACvF,GAEMD,IAAc,CAACQ,MAA8B;AACjD,QAAKd,EAAS,OAAOc,EAAM,SAAS;AAGpC,WAFIN,KAAWlC,OAAOmC,IAAe,KACjCT,EAAS,OAAO,MAAG1B,IAAQ,SAC3B0B,EAAS,SAAS;AACpB,QAAAG,EAAO,EAAK,GACZI,IAAQ,QACRC,IAAU,IACVG,EAAe,EAAK,GACpBjB,EAAO,MAAA,GAEP,WAAW,MAAOe,IAAe,IAAQ,CAAC;AAAA,eACjCT,EAAS,SAAS,GAAG;AAE9B,cAAM,CAAC,CAACf,GAAI9B,CAAK,CAAC,IAAI,CAAC,GAAG6C,EAAS,SAAS;AAC5C,QAAAO,IAAQ,EAAE,OAAApD,GAAO,UAAUwC,EAAA,GAAW,IAAAV,EAAA,GACtCuB,IAAU;AAAA,MACZ;AAAA;AAAA,EACF,GAEMc,IAAU,CAACR,MAA4B;AAC3C,IAAKL,MACLA,IAAe,IACfK,EAAM,gBAAA,GACNA,EAAM,eAAA;AAAA,EACR,GAEMS,IAAU,CAACT,MAA4B;AAC3C,UAAMU,IAAeV,EAAM,WAAWA,EAAM,SACtCW,IAAOlC,EAAQ,MAAA;AACrB,QAAI,CAACiC,KAAgBC,MAAS,OAAQ;AAEtC,QADAX,EAAM,eAAA,GACF,CAACU,KAAgBC,MAAS,OAAO;AACnC,YAAMC,IAAI/B,EAAA,GACJgC,IAAQb,EAAM,cAAc,IAAI,KAAKA,EAAM,cAAc,IAAI,MAAM,GACnEM,IAAKN,EAAM,YAAY,CAACA,EAAM,SAASA,EAAM,SAASA,EAAM,QAC5DO,IAAKP,EAAM,YAAY,CAACA,EAAM,SAAS,IAAIA,EAAM;AACvD,MAAAlB,EAAI,EAAE,GAAG8B,EAAE,IAAIN,IAAKO,GAAO,GAAGD,EAAE,IAAIL,IAAKM,GAAO,MAAMD,EAAE,MAAM;AAC9D;AAAA,IACF;AACA,UAAMtE,IAASe,EAAgB2C,EAAM,QAAQA,EAAM,WAAWU,CAAY;AAC1E,IAAA5B,EAAI3C,EAAO0C,EAAA,GAAWE,EAAMiB,EAAM,SAASA,EAAM,OAAO,GAAG1D,GAAQmC,EAAQ,QAAA,GAAWA,EAAQ,QAAA,CAAS,CAAC;AAAA,EAC1G;AAGA,MAAIqC;AACJ,QAAMC,IAAiB,CAACf,MAAuB;AA3R1C,QAAAtB;AA4RH,IAAAsB,EAAM,eAAA;AACN,UAAMgB,IAAIhB,GACJ/C,IAAOuB,EAAG,sBAAA;AAChB,IAAAsC,IAAU;AAAA,MACR,UAAUjC,EAAA;AAAA,MACV,OAAOmC,EAAE,YAAY,SAAY,EAAE,GAAG/D,EAAK,QAAQ,GAAG,GAAGA,EAAK,SAAS,MAAM8B,EAAMiC,EAAE,UAAStC,IAAAsC,EAAE,YAAF,OAAAtC,IAAa,CAAC;AAAA,IAAA;AAAA,EAEhH,GACMuC,IAAkB,CAACjB,MAAuB;AAC9C,IAAAA,EAAM,eAAA;AACN,UAAMa,IAASb,EAAqC;AACpD,IAAI,CAACc,KAAW,OAAOD,KAAU,YACjC/B,EAAI3C,EAAO2E,EAAQ,UAAUA,EAAQ,OAAOD,GAAOpC,EAAQ,QAAA,GAAWA,EAAQ,QAAA,CAAS,CAAC;AAAA,EAC1F,GACMyC,IAAe,CAAClB,MAAuB;AAC3C,IAAAA,EAAM,eAAA,GACNc,IAAU;AAAA,EACZ;AAEA,SAAAtC,EAAG,iBAAiB,eAAeuB,CAAa,GAChDvB,EAAG,iBAAiB,SAASgC,GAAS,EAAI,GAC1ChC,EAAG,iBAAiB,SAASiC,GAAS,EAAE,SAAS,IAAO,GACxDjC,EAAG,iBAAiB,gBAAgBuC,CAAc,GAClDvC,EAAG,iBAAiB,iBAAiByC,CAAe,GACpDzC,EAAG,iBAAiB,cAAc0C,CAAY,GAEvC,MAAM;AACX,IAAAtC,EAAO,OAAA,GACPS,EAAO,EAAK,GACZb,EAAG,oBAAoB,eAAeuB,CAAa,GACnDvB,EAAG,oBAAoB,SAASgC,GAAS,EAAI,GAC7ChC,EAAG,oBAAoB,SAASiC,CAAO,GACvCjC,EAAG,oBAAoB,gBAAgBuC,CAAc,GACrDvC,EAAG,oBAAoB,iBAAiByC,CAAe,GACvDzC,EAAG,oBAAoB,cAAc0C,CAAY;AAAA,EACnD;AACF;"}

package/dist/components/dataDisplay/descriptionList/descriptionList.d.ts

@@ -6,15 +6,23 @@ export interface DescriptionListEntry {
     key?: React.Key;
 }
 /**
- * `auto`: the term beside its description while the list's container is at
- * least 420px wide, above it when narrower (a container query). `row` and
- * `stacked` fix one layout.
+ * `auto`: the term beside its description while the list is at least 420px
+ * wide, above it when narrower (a container query on the list itself). `row`
+ * and `stacked` fix one layout.
  */
 export type DescriptionListLayout = "auto" | "row" | "stacked";
 export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
     className?: string;
     /** The pairs as data; `DescriptionItem` children work too, and come after them. */
     items?: DescriptionListEntry[];
+    /**
+     * "auto" (default): each term beside its value while the list is at least
+     * 420px wide, above it when narrower — the list's own width decides. So its
+     * content does not widen it: where the parent takes its width from its
+     * content (a flex item that does not grow, a popover, a table cell) the list
+     * has no width; give it one there, or use "row" / "stacked", which fix one
+     * layout and take their width from their content.
+     */
     layout?: DescriptionListLayout;
     /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */
     termWidth?: number | string;

package/dist/components/dataDisplay/descriptionList/descriptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"descriptionList.js","sources":["../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface DescriptionListEntry {\n  term: ReactNode;\n  description: ReactNode;\n  /** React key; the index is used without it. */\n  key?: React.Key;\n}\n\n/**\n * `auto`: the term beside its description while the list's container is at\n * least 420px wide, above it when narrower (a container query). `row` and\n * `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n  className?: string;\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n}\n\nexport interface DescriptionItemProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** The field's name. */\n  term: ReactNode;\n}\n\n/** One pair: the term and, as children, its description. */\nexport const DescriptionItem = React.forwardRef<HTMLDivElement, PropsWithChildren<DescriptionItemProps>>(\n  function DescriptionItem({ className, term, children, ...rest }, ref) {\n    return (\n      <div {...rest} ref={ref} className={cn(\"smwb-description-list__item\", className)}>\n        <dt className=\"smwb-description-list__term\">{term}</dt>\n        <dd className=\"smwb-description-list__details\">{children}</dd>\n      </div>\n    );\n  }\n);\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport const DescriptionList = React.forwardRef<HTMLDListElement, PropsWithChildren<DescriptionListProps>>(\n  function DescriptionList({ className, style, items, layout = \"auto\", termWidth, dense, children, ...rest }, ref) {\n    const width = typeof termWidth === \"number\" ? `${termWidth}px` : termWidth;\n    return (\n      <dl\n        {...rest}\n        ref={ref}\n        className={cn(\n          \"smwb-description-list\",\n          `smwb-description-list_${layout}`,\n          { \"smwb-description-list_dense\": dense },\n          className\n        )}\n        style={width === undefined ? style : ({ ...style, \"--smwb-description-term\": width } as CSSProperties)}\n      >\n        {items?.map((item, index) => (\n          <DescriptionItem key={item.key ?? index} term={item.term}>\n            {item.description}\n          </DescriptionItem>\n        ))}\n        {children}\n      </dl>\n    );\n  }\n);\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","React","className","term","children","rest","ref","jsxs","cn","jsx","DescriptionList","style","items","layout","termWidth","dense","width","item","index","_a"],"mappings":";;;;;AAqCO,MAAMA,IAAkBC,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACpE,WACE,gBAAAC,EAAC,SAAK,GAAGF,GAAM,KAAAC,GAAU,WAAWE,EAAG,+BAA+BN,CAAS,GAC7E,UAAA;AAAA,MAAA,gBAAAO,EAAC,MAAA,EAAG,WAAU,+BAA+B,UAAAN,GAAK;AAAA,MAClD,gBAAAM,EAAC,MAAA,EAAG,WAAU,kCAAkC,UAAAL,EAAA,CAAS;AAAA,IAAA,GAC3D;AAAA,EAEJ;AACF,GAGaM,IAAkBT,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,OAAAS,GAAO,OAAAC,GAAO,QAAAC,IAAS,QAAQ,WAAAC,GAAW,OAAAC,GAAO,UAAAX,GAAU,GAAGC,EAAA,GAAQC,GAAK;AAC/G,UAAMU,IAAQ,OAAOF,KAAc,WAAW,GAAGA,CAAS,OAAOA;AACjE,WACE,gBAAAP;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGF;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE;AAAA,UACT;AAAA,UACA,yBAAyBK,CAAM;AAAA,UAC/B,EAAE,+BAA+BE,EAAA;AAAA,UACjCb;AAAA,QAAA;AAAA,QAEF,OAAOc,MAAU,SAAYL,IAAS,EAAE,GAAGA,GAAO,2BAA2BK,EAAA;AAAA,QAE5E,UAAA;AAAA,UAAAJ,KAAA,gBAAAA,EAAO,IAAI,CAACK,GAAMC,MAAA;;qCAChBlB,GAAA,EAAwC,MAAMiB,EAAK,MACjD,UAAAA,EAAK,YAAA,IADcE,IAAAF,EAAK,QAAL,OAAAE,IAAYD,CAElC;AAAA;AAAA,UAEDd;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"descriptionList.js","sources":["../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface DescriptionListEntry {\n  term: ReactNode;\n  description: ReactNode;\n  /** React key; the index is used without it. */\n  key?: React.Key;\n}\n\n/**\n * `auto`: the term beside its description while the list is at least 420px\n * wide, above it when narrower (a container query on the list itself). `row`\n * and `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n  className?: string;\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  /**\n   * \"auto\" (default): each term beside its value while the list is at least\n   * 420px wide, above it when narrower — the list's own width decides. So its\n   * content does not widen it: where the parent takes its width from its\n   * content (a flex item that does not grow, a popover, a table cell) the list\n   * has no width; give it one there, or use \"row\" / \"stacked\", which fix one\n   * layout and take their width from their content.\n   */\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n}\n\nexport interface DescriptionItemProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** The field's name. */\n  term: ReactNode;\n}\n\n/** One pair: the term and, as children, its description. */\nexport const DescriptionItem = React.forwardRef<HTMLDivElement, PropsWithChildren<DescriptionItemProps>>(\n  function DescriptionItem({ className, term, children, ...rest }, ref) {\n    return (\n      <div {...rest} ref={ref} className={cn(\"smwb-description-list__item\", className)}>\n        <dt className=\"smwb-description-list__term\">{term}</dt>\n        <dd className=\"smwb-description-list__details\">{children}</dd>\n      </div>\n    );\n  }\n);\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport const DescriptionList = React.forwardRef<HTMLDListElement, PropsWithChildren<DescriptionListProps>>(\n  function DescriptionList({ className, style, items, layout = \"auto\", termWidth, dense, children, ...rest }, ref) {\n    const width = typeof termWidth === \"number\" ? `${termWidth}px` : termWidth;\n    return (\n      <dl\n        {...rest}\n        ref={ref}\n        className={cn(\n          \"smwb-description-list\",\n          `smwb-description-list_${layout}`,\n          { \"smwb-description-list_dense\": dense },\n          className\n        )}\n        style={width === undefined ? style : ({ ...style, \"--smwb-description-term\": width } as CSSProperties)}\n      >\n        {items?.map((item, index) => (\n          <DescriptionItem key={item.key ?? index} term={item.term}>\n            {item.description}\n          </DescriptionItem>\n        ))}\n        {children}\n      </dl>\n    );\n  }\n);\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","React","className","term","children","rest","ref","jsxs","cn","jsx","DescriptionList","style","items","layout","termWidth","dense","width","item","index","_a"],"mappings":";;;;;AA6CO,MAAMA,IAAkBC,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACpE,WACE,gBAAAC,EAAC,SAAK,GAAGF,GAAM,KAAAC,GAAU,WAAWE,EAAG,+BAA+BN,CAAS,GAC7E,UAAA;AAAA,MAAA,gBAAAO,EAAC,MAAA,EAAG,WAAU,+BAA+B,UAAAN,GAAK;AAAA,MAClD,gBAAAM,EAAC,MAAA,EAAG,WAAU,kCAAkC,UAAAL,EAAA,CAAS;AAAA,IAAA,GAC3D;AAAA,EAEJ;AACF,GAGaM,IAAkBT,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,OAAAS,GAAO,OAAAC,GAAO,QAAAC,IAAS,QAAQ,WAAAC,GAAW,OAAAC,GAAO,UAAAX,GAAU,GAAGC,EAAA,GAAQC,GAAK;AAC/G,UAAMU,IAAQ,OAAOF,KAAc,WAAW,GAAGA,CAAS,OAAOA;AACjE,WACE,gBAAAP;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGF;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE;AAAA,UACT;AAAA,UACA,yBAAyBK,CAAM;AAAA,UAC/B,EAAE,+BAA+BE,EAAA;AAAA,UACjCb;AAAA,QAAA;AAAA,QAEF,OAAOc,MAAU,SAAYL,IAAS,EAAE,GAAGA,GAAO,2BAA2BK,EAAA;AAAA,QAE5E,UAAA;AAAA,UAAAJ,KAAA,gBAAAA,EAAO,IAAI,CAACK,GAAMC,MAAA;;qCAChBlB,GAAA,EAAwC,MAAMiB,EAAK,MACjD,UAAAA,EAAK,YAAA,IADcE,IAAAF,EAAK,QAAL,OAAAE,IAAYD,CAElC;AAAA;AAAA,UAEDd;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/components/dataDisplay/diffStat/diffStat.d.ts

@@ -0,0 +1,54 @@
+import React, { HTMLAttributes } from "react";
+/** How many cells the bar has. */
+export declare const DIFF_STAT_CELLS = 5;
+/** One cell of the bar: whose it is, or nobody's. */
+export type DiffStatCell = "added" | "removed" | "neutral";
+/** The accessible name, built from the two counts as numbers (already normalised by `diffStatCount`). */
+export type DiffStatFormat = (added: number, removed: number) => string;
+/** "added 12345, removed 3" — the default accessible name; plain digits, so a speech engine reads one number. */
+export declare const DEFAULT_DIFF_STAT_FORMAT: DiffStatFormat;
+/**
+ * A count as the component takes it: a whole number, never below 0. Fractions are cut off,
+ * negative counts are 0, and so are NaN, `undefined` and ±Infinity (data that has not
+ * arrived yet, or arrived broken). The figures, the accessible name and the bar all use this
+ * one value, so they cannot disagree.
+ */
+export declare function diffStatCount(value: number): number;
+/**
+ * A count (as `diffStatCount` takes it) as digits, grouped by three with U+202F NARROW NO-BREAK SPACE ("1\u202f234"), the
+ * fraction dropped. The separator is fixed rather than taken from a locale on purpose: the
+ * server and the browser would group the same figure differently and break hydration. Pass
+ * `group` to an app that knows its reader's locale.
+ */
+export declare function groupDiffStatCount(value: number): string;
+/**
+ * Which cell belongs to which side (counts as `diffStatCount` takes them): each takes `floor(DIFF_STAT_CELLS * its share)`, so the
+ * cells the two sides leave over are neutral and 0 of 0 leaves all of them neutral. A side
+ * under a fifth of the change reaches no cell and shows in its figure only.
+ */
+export declare function diffStatCells(added: number, removed: number): DiffStatCell[];
+export interface DiffStatProps extends Omit<HTMLAttributes<HTMLSpanElement>, "role"> {
+    className?: string;
+    /** Lines added; the figure behind "+N". NaN, `undefined`, Infinity and negatives count as 0. */
+    added: number;
+    /** Lines removed; the figure behind "−M". NaN, `undefined`, Infinity and negatives count as 0. */
+    removed: number;
+    /** The five cells beside the figures. Shown by default, hidden in `compact`; set it either way. */
+    bar?: boolean;
+    /** The tab variant: smaller figures, and no bar unless `bar` asks for one. */
+    compact?: boolean;
+    /** How the accessible name is made from the two counts, as numbers: `DEFAULT_DIFF_STAT_FORMAT` unless given. */
+    format?: DiffStatFormat;
+    /** How each figure is written (it gets the count as `diffStatCount` takes it): `groupDiffStatCount` — three digits per group — unless given. */
+    group?: (value: number) => string;
+    /** Test id of the root `<span>`; `diff-stat` unless given. */
+    "data-testid"?: string;
+}
+/**
+ * How big a change is: "+N −M" with the two figures' counts, and a five-cell bar of the
+ * same proportions. One accessible name for the whole ("added N, removed M"), so the
+ * digits are not read twice; the bar is the theme's success and error, shaded toward the
+ * surface ink to stay readable as text.
+ */
+export declare const DiffStat: React.ForwardRefExoticComponent<DiffStatProps & React.RefAttributes<HTMLSpanElement>>;
+export default DiffStat;

package/dist/components/dataDisplay/diffStat/diffStat.js

@@ -0,0 +1,63 @@
+import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/diffStat/diffStat.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                           */
+import N from "react";
+import h from "clsx";
+const l = 5, T = " ", D = (t, a) => `added ${t}, removed ${a}`;
+function d(t) {
+  return Number.isFinite(t) ? Math.max(0, Math.trunc(t)) : 0;
+}
+function R(t) {
+  return String(d(t)).replace(/\B(?=(\d{3})+(?!\d))/g, T);
+}
+function x(t, a) {
+  const f = d(t), r = d(a), s = f + r, n = (o, m) => Array.from({ length: o }, () => m);
+  if (s === 0) return n(l, "neutral");
+  const i = Math.floor(l * f / s), e = Math.floor(l * r / s);
+  return [
+    ...n(i, "added"),
+    ...n(e, "removed"),
+    ...n(l - i - e, "neutral")
+  ];
+}
+const E = N.forwardRef(function({
+  className: a,
+  added: f,
+  removed: r,
+  bar: s,
+  compact: n,
+  format: i = D,
+  group: e = R,
+  "aria-label": o,
+  "data-testid": m = "diff-stat",
+  ...w
+}, S) {
+  const u = d(f), _ = d(r), C = s != null ? s : !n;
+  return /* @__PURE__ */ p(
+    "span",
+    {
+      ...w,
+      ref: S,
+      role: "img",
+      "aria-label": o != null ? o : i(u, _),
+      "data-testid": m,
+      className: h("smwb-diff-stat", { "smwb-diff-stat_compact": n }, a),
+      children: [
+        /* @__PURE__ */ p("span", { className: "smwb-diff-stat__text", "aria-hidden": "true", children: [
+          /* @__PURE__ */ c("span", { className: "smwb-diff-stat__added", children: `+${e(u)}` }),
+          /* @__PURE__ */ c("span", { className: "smwb-diff-stat__removed", children: `−${e(_)}` })
+        ] }),
+        C ? /* @__PURE__ */ c("span", { className: "smwb-diff-stat__bar", "aria-hidden": "true", children: x(u, _).map((A, F) => /* @__PURE__ */ c("span", { className: h("smwb-diff-stat__cell", `smwb-diff-stat__cell_${A}`) }, F)) }) : null
+      ]
+    }
+  );
+});
+export {
+  D as DEFAULT_DIFF_STAT_FORMAT,
+  l as DIFF_STAT_CELLS,
+  E as DiffStat,
+  x as diffStatCells,
+  d as diffStatCount,
+  R as groupDiffStatCount
+};
+//# sourceMappingURL=diffStat.js.map