@flanksource/clicky-ui 0.3.41 → 0.3.43

package/dist/data/graph-layout.cjs

@@ -42,87 +42,5 @@ function ringLayout(nodes, options = {}) {
     positions
   };
 }
-const CURVE_OFFSET = 22;
-function unorderedPairKey(a, b) {
-  return a < b ? `${a}\0${b}` : `${b}\0${a}`;
-}
-function requirePosition(positions, id) {
-  const position = positions[id];
-  if (!position) {
-    throw new Error(`routeEdges: no layout position for node "${id}"`);
-  }
-  return position;
-}
-function requireEdge(group, index) {
-  const edge = group[index];
-  if (!edge) {
-    throw new Error(`routeEdges: expected an edge at index ${index}`);
-  }
-  return edge;
-}
-function clipToRect(center, towards, halfW, halfH) {
-  const dx = towards.x - center.x;
-  const dy = towards.y - center.y;
-  if (dx === 0 && dy === 0) return { x: center.x, y: center.y };
-  const scaleX = dx !== 0 ? halfW / Math.abs(dx) : Number.POSITIVE_INFINITY;
-  const scaleY = dy !== 0 ? halfH / Math.abs(dy) : Number.POSITIVE_INFINITY;
-  const scale = Math.min(scaleX, scaleY);
-  return { x: center.x + dx * scale, y: center.y + dy * scale };
-}
-function quadraticMidpoint(p0, p1, p2) {
-  return {
-    x: 0.25 * p0.x + 0.5 * p1.x + 0.25 * p2.x,
-    y: 0.25 * p0.y + 0.5 * p1.y + 0.25 * p2.y
-  };
-}
-function routeEdges(edges, positions, dimensions) {
-  const halfW = dimensions.nodeWidth / 2;
-  const halfH = dimensions.nodeHeight / 2;
-  const groups = /* @__PURE__ */ new Map();
-  for (const edge of edges) {
-    if (!(edge.from in positions)) {
-      throw new Error(`routeEdges: edge "${edge.id}" references unknown node "${edge.from}"`);
-    }
-    if (!(edge.to in positions)) {
-      throw new Error(`routeEdges: edge "${edge.id}" references unknown node "${edge.to}"`);
-    }
-    const key = unorderedPairKey(edge.from, edge.to);
-    const group = groups.get(key);
-    if (group) {
-      group.push(edge);
-    } else {
-      groups.set(key, [edge]);
-    }
-  }
-  const routes = {};
-  for (const group of groups.values()) {
-    const first = requireEdge(group, 0);
-    const posA = requirePosition(positions, first.from);
-    const posB = requirePosition(positions, first.to);
-    const dx = posB.x - posA.x;
-    const dy = posB.y - posA.y;
-    const len = Math.hypot(dx, dy) || 1;
-    const perpX = -dy / len;
-    const perpY = dx / len;
-    const midX = (posA.x + posB.x) / 2;
-    const midY = (posA.y + posB.y) / 2;
-    group.forEach((edge, index) => {
-      const isCurved = group.length > 1;
-      const sign = index % 2 === 0 ? 1 : -1;
-      const magnitude = Math.floor(index / 2) + 1;
-      const offset = isCurved ? sign * magnitude * CURVE_OFFSET : 0;
-      const control = { x: midX + perpX * offset, y: midY + perpY * offset };
-      const fromCenter = requirePosition(positions, edge.from);
-      const toCenter = requirePosition(positions, edge.to);
-      const start = clipToRect(fromCenter, control, halfW, halfH);
-      const end = clipToRect(toCenter, control, halfW, halfH);
-      const path = isCurved ? `M ${start.x} ${start.y} Q ${control.x} ${control.y} ${end.x} ${end.y}` : `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
-      const label = isCurved ? quadraticMidpoint(start, control, end) : { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
-      routes[edge.id] = { path, labelX: label.x, labelY: label.y };
-    });
-  }
-  return routes;
-}
 exports.ringLayout = ringLayout;
-exports.routeEdges = routeEdges;
 //# sourceMappingURL=graph-layout.cjs.map

package/dist/data/graph-layout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"graph-layout.cjs","sources":["../../src/data/graph-layout.ts"],"sourcesContent":["// Pure, framework-free layout and edge-routing math for GraphDiagram. Kept\n// free of React so it can be unit tested without rendering, and so a future\n// \"columns\" layout can live alongside `ringLayout` without dragging in DOM\n// concerns.\n\nexport interface GraphLayoutNode {\n  id: string;\n}\n\nexport interface RingLayoutOptions {\n  /** Node bounding-box width in px. Defaults to 168. */\n  nodeWidth?: number;\n  /** Node bounding-box height in px. Defaults to 60. */\n  nodeHeight?: number;\n  /** Minimum gap between adjacent node edges in px. Defaults to 40. */\n  gap?: number;\n  /** Space reserved around the ring before the viewport edge. Defaults to 24. */\n  padding?: number;\n}\n\nexport interface GraphLayoutPosition {\n  /** Node centre x, in the same coordinate space as `width`/`height`. */\n  x: number;\n  /** Node centre y. */\n  y: number;\n}\n\nexport interface GraphLayoutResult {\n  width: number;\n  height: number;\n  positions: Record<string, GraphLayoutPosition>;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\nconst DEFAULT_GAP = 40;\nconst DEFAULT_PADDING = 24;\nconst MIN_RADIUS = 96;\n\nfunction requireNode<T extends GraphLayoutNode>(nodes: readonly T[], index: number): T {\n  const node = nodes[index];\n  if (!node) {\n    throw new Error(`ringLayout: expected a node at index ${index}`);\n  }\n  return node;\n}\n\n/**\n * Places nodes on a circle in the given order, starting at 12 o'clock and\n * running clockwise. `n=1` is centred (radius 0); `n=2` is a special case —\n * left/right — because 180° clockwise from 12 o'clock lands at 6 o'clock,\n * which reads poorly for a two-node relationship.\n *\n * The radius is sized so the straight-line (chord) distance between any two\n * angularly-adjacent nodes is at least `nodeWidth + gap`, with a sensible\n * floor (`MIN_RADIUS`) for small rings.\n */\nexport function ringLayout(\n  nodes: readonly GraphLayoutNode[],\n  options: RingLayoutOptions = {},\n): GraphLayoutResult {\n  const nodeWidth = options.nodeWidth ?? DEFAULT_NODE_WIDTH;\n  const nodeHeight = options.nodeHeight ?? DEFAULT_NODE_HEIGHT;\n  const gap = options.gap ?? DEFAULT_GAP;\n  const padding = options.padding ?? DEFAULT_PADDING;\n  const n = nodes.length;\n\n  const radius = n <= 1 ? 0 : Math.max(MIN_RADIUS, (nodeWidth + gap) / (2 * Math.sin(Math.PI / n)));\n  const cx = radius + nodeWidth / 2 + padding;\n  const cy = radius + nodeHeight / 2 + padding;\n\n  const positions: Record<string, GraphLayoutPosition> = {};\n\n  if (n === 1) {\n    positions[requireNode(nodes, 0).id] = { x: cx, y: cy };\n  } else if (n === 2) {\n    positions[requireNode(nodes, 0).id] = { x: cx - radius, y: cy };\n    positions[requireNode(nodes, 1).id] = { x: cx + radius, y: cy };\n  } else {\n    nodes.forEach((node, i) => {\n      const theta = -Math.PI / 2 + i * ((2 * Math.PI) / n);\n      positions[node.id] = {\n        x: cx + radius * Math.cos(theta),\n        y: cy + radius * Math.sin(theta),\n      };\n    });\n  }\n\n  return {\n    width: 2 * cx,\n    height: 2 * cy,\n    positions,\n  };\n}\n\nexport interface GraphLayoutEdge {\n  id: string;\n  from: string;\n  to: string;\n}\n\nexport interface EdgeRoute {\n  /** SVG path `d` attribute, clipped to the node rectangle boundaries. */\n  path: string;\n  /** Midpoint of the rendered path, for placing an edge label. */\n  labelX: number;\n  labelY: number;\n}\n\nexport interface RouteEdgesDimensions {\n  nodeWidth: number;\n  nodeHeight: number;\n}\n\nconst CURVE_OFFSET = 22;\n\nfunction unorderedPairKey(a: string, b: string): string {\n  return a < b ? `${a}\u0000${b}` : `${b}\u0000${a}`;\n}\n\nfunction requirePosition(\n  positions: Record<string, GraphLayoutPosition>,\n  id: string,\n): GraphLayoutPosition {\n  const position = positions[id];\n  if (!position) {\n    throw new Error(`routeEdges: no layout position for node \"${id}\"`);\n  }\n  return position;\n}\n\nfunction requireEdge(group: readonly GraphLayoutEdge[], index: number): GraphLayoutEdge {\n  const edge = group[index];\n  if (!edge) {\n    throw new Error(`routeEdges: expected an edge at index ${index}`);\n  }\n  return edge;\n}\n\n/** Point on the rectangle (centred at `center`, half-extents `halfW`/`halfH`) where the ray toward `towards` exits. */\nfunction clipToRect(\n  center: GraphLayoutPosition,\n  towards: GraphLayoutPosition,\n  halfW: number,\n  halfH: number,\n): GraphLayoutPosition {\n  const dx = towards.x - center.x;\n  const dy = towards.y - center.y;\n  if (dx === 0 && dy === 0) return { x: center.x, y: center.y };\n\n  const scaleX = dx !== 0 ? halfW / Math.abs(dx) : Number.POSITIVE_INFINITY;\n  const scaleY = dy !== 0 ? halfH / Math.abs(dy) : Number.POSITIVE_INFINITY;\n  const scale = Math.min(scaleX, scaleY);\n\n  return { x: center.x + dx * scale, y: center.y + dy * scale };\n}\n\n/** Point at t=0.5 on the quadratic Bézier defined by p0 (start), p1 (control), p2 (end). */\nfunction quadraticMidpoint(\n  p0: GraphLayoutPosition,\n  p1: GraphLayoutPosition,\n  p2: GraphLayoutPosition,\n): GraphLayoutPosition {\n  return {\n    x: 0.25 * p0.x + 0.5 * p1.x + 0.25 * p2.x,\n    y: 0.25 * p0.y + 0.5 * p1.y + 0.25 * p2.y,\n  };\n}\n\n/**\n * Routes each edge as an SVG path clipped to the source/target node\n * rectangles. Edges sharing an unordered node pair — a reciprocal A→B + B→A,\n * or literal duplicates — are fanned out as quadratic curves with\n * alternating, increasing offsets from the straight line between the two\n * node centres, so they never overlap. A lone edge between a pair is a\n * straight line.\n *\n * Throws when an edge references a node id absent from `positions`, naming\n * the edge id, rather than silently dropping or mis-routing it.\n */\nexport function routeEdges(\n  edges: readonly GraphLayoutEdge[],\n  positions: Record<string, GraphLayoutPosition>,\n  dimensions: RouteEdgesDimensions,\n): Record<string, EdgeRoute> {\n  const halfW = dimensions.nodeWidth / 2;\n  const halfH = dimensions.nodeHeight / 2;\n\n  const groups = new Map<string, GraphLayoutEdge[]>();\n  for (const edge of edges) {\n    if (!(edge.from in positions)) {\n      throw new Error(`routeEdges: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!(edge.to in positions)) {\n      throw new Error(`routeEdges: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n    const key = unorderedPairKey(edge.from, edge.to);\n    const group = groups.get(key);\n    if (group) {\n      group.push(edge);\n    } else {\n      groups.set(key, [edge]);\n    }\n  }\n\n  const routes: Record<string, EdgeRoute> = {};\n\n  for (const group of groups.values()) {\n    const first = requireEdge(group, 0);\n    const posA = requirePosition(positions, first.from);\n    const posB = requirePosition(positions, first.to);\n    const dx = posB.x - posA.x;\n    const dy = posB.y - posA.y;\n    const len = Math.hypot(dx, dy) || 1;\n    const perpX = -dy / len;\n    const perpY = dx / len;\n    const midX = (posA.x + posB.x) / 2;\n    const midY = (posA.y + posB.y) / 2;\n\n    group.forEach((edge, index) => {\n      const isCurved = group.length > 1;\n      const sign = index % 2 === 0 ? 1 : -1;\n      const magnitude = Math.floor(index / 2) + 1;\n      const offset = isCurved ? sign * magnitude * CURVE_OFFSET : 0;\n\n      const control = { x: midX + perpX * offset, y: midY + perpY * offset };\n      const fromCenter = requirePosition(positions, edge.from);\n      const toCenter = requirePosition(positions, edge.to);\n      const start = clipToRect(fromCenter, control, halfW, halfH);\n      const end = clipToRect(toCenter, control, halfW, halfH);\n\n      const path = isCurved\n        ? `M ${start.x} ${start.y} Q ${control.x} ${control.y} ${end.x} ${end.y}`\n        : `M ${start.x} ${start.y} L ${end.x} ${end.y}`;\n\n      const label = isCurved\n        ? quadraticMidpoint(start, control, end)\n        : { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };\n\n      routes[edge.id] = { path, labelX: label.x, labelY: label.y };\n    });\n  }\n\n  return routes;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"graph-layout.cjs","sources":["../../src/data/graph-layout.ts"],"sourcesContent":["// Pure, framework-free layout math for GraphDiagram. Kept free of React so it\n// can be unit tested without rendering. `ringLayout` places nodes on a circle;\n// the level-column layout lives in graph-columns-layout.ts, and the edge\n// routing and label placement in graph-edge-routing.ts, re-exported here.\n\nexport {\n  routeEdges,\n  spreadLabels,\n  type EdgeLabelBox,\n  type EdgeRoute,\n  type GraphLayoutEdge,\n  type RouteEdgesDimensions,\n  type RouteEdgesOptions,\n} from \"./graph-edge-routing\";\n\nexport interface GraphLayoutNode {\n  id: string;\n}\n\nexport interface RingLayoutOptions {\n  /** Node bounding-box width in px. Defaults to 168. */\n  nodeWidth?: number;\n  /** Node bounding-box height in px. Defaults to 60. */\n  nodeHeight?: number;\n  /** Minimum gap between adjacent node edges in px. Defaults to 40. */\n  gap?: number;\n  /** Space reserved around the ring before the viewport edge. Defaults to 24. */\n  padding?: number;\n}\n\nexport interface GraphLayoutPosition {\n  /** Node centre x, in the same coordinate space as `width`/`height`. */\n  x: number;\n  /** Node centre y. */\n  y: number;\n}\n\nexport interface GraphLayoutResult {\n  width: number;\n  height: number;\n  positions: Record<string, GraphLayoutPosition>;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\nconst DEFAULT_GAP = 40;\nconst DEFAULT_PADDING = 24;\nconst MIN_RADIUS = 96;\n\nfunction requireNode<T extends GraphLayoutNode>(nodes: readonly T[], index: number): T {\n  const node = nodes[index];\n  if (!node) {\n    throw new Error(`ringLayout: expected a node at index ${index}`);\n  }\n  return node;\n}\n\n/**\n * Places nodes on a circle in the given order, starting at 12 o'clock and\n * running clockwise. `n=1` is centred (radius 0); `n=2` is a special case —\n * left/right — because 180° clockwise from 12 o'clock lands at 6 o'clock,\n * which reads poorly for a two-node relationship.\n *\n * The radius is sized so the straight-line (chord) distance between any two\n * angularly-adjacent nodes is at least `nodeWidth + gap`, with a sensible\n * floor (`MIN_RADIUS`) for small rings.\n */\nexport function ringLayout(\n  nodes: readonly GraphLayoutNode[],\n  options: RingLayoutOptions = {},\n): GraphLayoutResult {\n  const nodeWidth = options.nodeWidth ?? DEFAULT_NODE_WIDTH;\n  const nodeHeight = options.nodeHeight ?? DEFAULT_NODE_HEIGHT;\n  const gap = options.gap ?? DEFAULT_GAP;\n  const padding = options.padding ?? DEFAULT_PADDING;\n  const n = nodes.length;\n\n  const radius = n <= 1 ? 0 : Math.max(MIN_RADIUS, (nodeWidth + gap) / (2 * Math.sin(Math.PI / n)));\n  const cx = radius + nodeWidth / 2 + padding;\n  const cy = radius + nodeHeight / 2 + padding;\n\n  const positions: Record<string, GraphLayoutPosition> = {};\n\n  if (n === 1) {\n    positions[requireNode(nodes, 0).id] = { x: cx, y: cy };\n  } else if (n === 2) {\n    positions[requireNode(nodes, 0).id] = { x: cx - radius, y: cy };\n    positions[requireNode(nodes, 1).id] = { x: cx + radius, y: cy };\n  } else {\n    nodes.forEach((node, i) => {\n      const theta = -Math.PI / 2 + i * ((2 * Math.PI) / n);\n      positions[node.id] = {\n        x: cx + radius * Math.cos(theta),\n        y: cy + radius * Math.sin(theta),\n      };\n    });\n  }\n\n  return {\n    width: 2 * cx,\n    height: 2 * cy,\n    positions,\n  };\n}\n"],"names":[],"mappings":";;AA2CA,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAC5B,MAAM,cAAc;AACpB,MAAM,kBAAkB;AACxB,MAAM,aAAa;AAEnB,SAAS,YAAuC,OAAqB,OAAkB;AACrF,QAAM,OAAO,MAAM,KAAK;AACxB,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,wCAAwC,KAAK,EAAE;AAAA,EACjE;AACA,SAAO;AACT;AAYO,SAAS,WACd,OACA,UAA6B,IACV;AACnB,QAAM,YAAY,QAAQ,aAAa;AACvC,QAAM,aAAa,QAAQ,cAAc;AACzC,QAAM,MAAM,QAAQ,OAAO;AAC3B,QAAM,UAAU,QAAQ,WAAW;AACnC,QAAM,IAAI,MAAM;AAEhB,QAAM,SAAS,KAAK,IAAI,IAAI,KAAK,IAAI,aAAa,YAAY,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,CAAC,EAAE;AAChG,QAAM,KAAK,SAAS,YAAY,IAAI;AACpC,QAAM,KAAK,SAAS,aAAa,IAAI;AAErC,QAAM,YAAiD,CAAA;AAEvD,MAAI,MAAM,GAAG;AACX,cAAU,YAAY,OAAO,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,GAAG,GAAA;AAAA,EACpD,WAAW,MAAM,GAAG;AAClB,cAAU,YAAY,OAAO,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,QAAQ,GAAG,GAAA;AAC3D,cAAU,YAAY,OAAO,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,QAAQ,GAAG,GAAA;AAAA,EAC7D,OAAO;AACL,UAAM,QAAQ,CAAC,MAAM,MAAM;AACzB,YAAM,QAAQ,CAAC,KAAK,KAAK,IAAI,KAAM,IAAI,KAAK,KAAM;AAClD,gBAAU,KAAK,EAAE,IAAI;AAAA,QACnB,GAAG,KAAK,SAAS,KAAK,IAAI,KAAK;AAAA,QAC/B,GAAG,KAAK,SAAS,KAAK,IAAI,KAAK;AAAA,MAAA;AAAA,IAEnC,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL,OAAO,IAAI;AAAA,IACX,QAAQ,IAAI;AAAA,IACZ;AAAA,EAAA;AAEJ;;"}

package/dist/data/graph-layout.d.ts

@@ -1,3 +1,4 @@
+export { routeEdges, spreadLabels, type EdgeLabelBox, type EdgeRoute, type GraphLayoutEdge, type RouteEdgesDimensions, type RouteEdgesOptions, } from './graph-edge-routing.js';
 export interface GraphLayoutNode {
     id: string;
 }
@@ -33,32 +34,4 @@ export interface GraphLayoutResult {
  * floor (`MIN_RADIUS`) for small rings.
  */
 export declare function ringLayout(nodes: readonly GraphLayoutNode[], options?: RingLayoutOptions): GraphLayoutResult;
-export interface GraphLayoutEdge {
-    id: string;
-    from: string;
-    to: string;
-}
-export interface EdgeRoute {
-    /** SVG path `d` attribute, clipped to the node rectangle boundaries. */
-    path: string;
-    /** Midpoint of the rendered path, for placing an edge label. */
-    labelX: number;
-    labelY: number;
-}
-export interface RouteEdgesDimensions {
-    nodeWidth: number;
-    nodeHeight: number;
-}
-/**
- * Routes each edge as an SVG path clipped to the source/target node
- * rectangles. Edges sharing an unordered node pair — a reciprocal A→B + B→A,
- * or literal duplicates — are fanned out as quadratic curves with
- * alternating, increasing offsets from the straight line between the two
- * node centres, so they never overlap. A lone edge between a pair is a
- * straight line.
- *
- * Throws when an edge references a node id absent from `positions`, naming
- * the edge id, rather than silently dropping or mis-routing it.
- */
-export declare function routeEdges(edges: readonly GraphLayoutEdge[], positions: Record<string, GraphLayoutPosition>, dimensions: RouteEdgesDimensions): Record<string, EdgeRoute>;
 //# sourceMappingURL=graph-layout.d.ts.map

package/dist/data/graph-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph-layout.d.ts","sourceRoot":"","sources":["../../src/data/graph-layout.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,iBAAiB;IAChC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,uEAAuE;IACvE,CAAC,EAAE,MAAM,CAAC;IACV,qBAAqB;IACrB,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;CAChD;AAgBD;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,SAAS,eAAe,EAAE,EACjC,OAAO,GAAE,iBAAsB,GAC9B,iBAAiB,CAiCnB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,SAAS;IACxB,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAyDD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,SAAS,eAAe,EAAE,EACjC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,EAC9C,UAAU,EAAE,oBAAoB,GAC/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CA4D3B"}
+{"version":3,"file":"graph-layout.d.ts","sourceRoot":"","sources":["../../src/data/graph-layout.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,UAAU,EACV,YAAY,EACZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,GACvB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,iBAAiB;IAChC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,uEAAuE;IACvE,CAAC,EAAE,MAAM,CAAC;IACV,qBAAqB;IACrB,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;CAChD;AAgBD;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,SAAS,eAAe,EAAE,EACjC,OAAO,GAAE,iBAAsB,GAC9B,iBAAiB,CAiCnB"}

package/dist/data/graph-layout.js

@@ -40,89 +40,7 @@ function ringLayout(nodes, options = {}) {
     positions
   };
 }
-const CURVE_OFFSET = 22;
-function unorderedPairKey(a, b) {
-  return a < b ? `${a}\0${b}` : `${b}\0${a}`;
-}
-function requirePosition(positions, id) {
-  const position = positions[id];
-  if (!position) {
-    throw new Error(`routeEdges: no layout position for node "${id}"`);
-  }
-  return position;
-}
-function requireEdge(group, index) {
-  const edge = group[index];
-  if (!edge) {
-    throw new Error(`routeEdges: expected an edge at index ${index}`);
-  }
-  return edge;
-}
-function clipToRect(center, towards, halfW, halfH) {
-  const dx = towards.x - center.x;
-  const dy = towards.y - center.y;
-  if (dx === 0 && dy === 0) return { x: center.x, y: center.y };
-  const scaleX = dx !== 0 ? halfW / Math.abs(dx) : Number.POSITIVE_INFINITY;
-  const scaleY = dy !== 0 ? halfH / Math.abs(dy) : Number.POSITIVE_INFINITY;
-  const scale = Math.min(scaleX, scaleY);
-  return { x: center.x + dx * scale, y: center.y + dy * scale };
-}
-function quadraticMidpoint(p0, p1, p2) {
-  return {
-    x: 0.25 * p0.x + 0.5 * p1.x + 0.25 * p2.x,
-    y: 0.25 * p0.y + 0.5 * p1.y + 0.25 * p2.y
-  };
-}
-function routeEdges(edges, positions, dimensions) {
-  const halfW = dimensions.nodeWidth / 2;
-  const halfH = dimensions.nodeHeight / 2;
-  const groups = /* @__PURE__ */ new Map();
-  for (const edge of edges) {
-    if (!(edge.from in positions)) {
-      throw new Error(`routeEdges: edge "${edge.id}" references unknown node "${edge.from}"`);
-    }
-    if (!(edge.to in positions)) {
-      throw new Error(`routeEdges: edge "${edge.id}" references unknown node "${edge.to}"`);
-    }
-    const key = unorderedPairKey(edge.from, edge.to);
-    const group = groups.get(key);
-    if (group) {
-      group.push(edge);
-    } else {
-      groups.set(key, [edge]);
-    }
-  }
-  const routes = {};
-  for (const group of groups.values()) {
-    const first = requireEdge(group, 0);
-    const posA = requirePosition(positions, first.from);
-    const posB = requirePosition(positions, first.to);
-    const dx = posB.x - posA.x;
-    const dy = posB.y - posA.y;
-    const len = Math.hypot(dx, dy) || 1;
-    const perpX = -dy / len;
-    const perpY = dx / len;
-    const midX = (posA.x + posB.x) / 2;
-    const midY = (posA.y + posB.y) / 2;
-    group.forEach((edge, index) => {
-      const isCurved = group.length > 1;
-      const sign = index % 2 === 0 ? 1 : -1;
-      const magnitude = Math.floor(index / 2) + 1;
-      const offset = isCurved ? sign * magnitude * CURVE_OFFSET : 0;
-      const control = { x: midX + perpX * offset, y: midY + perpY * offset };
-      const fromCenter = requirePosition(positions, edge.from);
-      const toCenter = requirePosition(positions, edge.to);
-      const start = clipToRect(fromCenter, control, halfW, halfH);
-      const end = clipToRect(toCenter, control, halfW, halfH);
-      const path = isCurved ? `M ${start.x} ${start.y} Q ${control.x} ${control.y} ${end.x} ${end.y}` : `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
-      const label = isCurved ? quadraticMidpoint(start, control, end) : { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
-      routes[edge.id] = { path, labelX: label.x, labelY: label.y };
-    });
-  }
-  return routes;
-}
 export {
-  ringLayout,
-  routeEdges
+  ringLayout
 };
 //# sourceMappingURL=graph-layout.js.map

package/dist/data/graph-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-layout.js","sources":["../../src/data/graph-layout.ts"],"sourcesContent":["// Pure, framework-free layout and edge-routing math for GraphDiagram. Kept\n// free of React so it can be unit tested without rendering, and so a future\n// \"columns\" layout can live alongside `ringLayout` without dragging in DOM\n// concerns.\n\nexport interface GraphLayoutNode {\n  id: string;\n}\n\nexport interface RingLayoutOptions {\n  /** Node bounding-box width in px. Defaults to 168. */\n  nodeWidth?: number;\n  /** Node bounding-box height in px. Defaults to 60. */\n  nodeHeight?: number;\n  /** Minimum gap between adjacent node edges in px. Defaults to 40. */\n  gap?: number;\n  /** Space reserved around the ring before the viewport edge. Defaults to 24. */\n  padding?: number;\n}\n\nexport interface GraphLayoutPosition {\n  /** Node centre x, in the same coordinate space as `width`/`height`. */\n  x: number;\n  /** Node centre y. */\n  y: number;\n}\n\nexport interface GraphLayoutResult {\n  width: number;\n  height: number;\n  positions: Record<string, GraphLayoutPosition>;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\nconst DEFAULT_GAP = 40;\nconst DEFAULT_PADDING = 24;\nconst MIN_RADIUS = 96;\n\nfunction requireNode<T extends GraphLayoutNode>(nodes: readonly T[], index: number): T {\n  const node = nodes[index];\n  if (!node) {\n    throw new Error(`ringLayout: expected a node at index ${index}`);\n  }\n  return node;\n}\n\n/**\n * Places nodes on a circle in the given order, starting at 12 o'clock and\n * running clockwise. `n=1` is centred (radius 0); `n=2` is a special case —\n * left/right — because 180° clockwise from 12 o'clock lands at 6 o'clock,\n * which reads poorly for a two-node relationship.\n *\n * The radius is sized so the straight-line (chord) distance between any two\n * angularly-adjacent nodes is at least `nodeWidth + gap`, with a sensible\n * floor (`MIN_RADIUS`) for small rings.\n */\nexport function ringLayout(\n  nodes: readonly GraphLayoutNode[],\n  options: RingLayoutOptions = {},\n): GraphLayoutResult {\n  const nodeWidth = options.nodeWidth ?? DEFAULT_NODE_WIDTH;\n  const nodeHeight = options.nodeHeight ?? DEFAULT_NODE_HEIGHT;\n  const gap = options.gap ?? DEFAULT_GAP;\n  const padding = options.padding ?? DEFAULT_PADDING;\n  const n = nodes.length;\n\n  const radius = n <= 1 ? 0 : Math.max(MIN_RADIUS, (nodeWidth + gap) / (2 * Math.sin(Math.PI / n)));\n  const cx = radius + nodeWidth / 2 + padding;\n  const cy = radius + nodeHeight / 2 + padding;\n\n  const positions: Record<string, GraphLayoutPosition> = {};\n\n  if (n === 1) {\n    positions[requireNode(nodes, 0).id] = { x: cx, y: cy };\n  } else if (n === 2) {\n    positions[requireNode(nodes, 0).id] = { x: cx - radius, y: cy };\n    positions[requireNode(nodes, 1).id] = { x: cx + radius, y: cy };\n  } else {\n    nodes.forEach((node, i) => {\n      const theta = -Math.PI / 2 + i * ((2 * Math.PI) / n);\n      positions[node.id] = {\n        x: cx + radius * Math.cos(theta),\n        y: cy + radius * Math.sin(theta),\n      };\n    });\n  }\n\n  return {\n    width: 2 * cx,\n    height: 2 * cy,\n    positions,\n  };\n}\n\nexport interface GraphLayoutEdge {\n  id: string;\n  from: string;\n  to: string;\n}\n\nexport interface EdgeRoute {\n  /** SVG path `d` attribute, clipped to the node rectangle boundaries. */\n  path: string;\n  /** Midpoint of the rendered path, for placing an edge label. */\n  labelX: number;\n  labelY: number;\n}\n\nexport interface RouteEdgesDimensions {\n  nodeWidth: number;\n  nodeHeight: number;\n}\n\nconst CURVE_OFFSET = 22;\n\nfunction unorderedPairKey(a: string, b: string): string {\n  return a < b ? `${a}\u0000${b}` : `${b}\u0000${a}`;\n}\n\nfunction requirePosition(\n  positions: Record<string, GraphLayoutPosition>,\n  id: string,\n): GraphLayoutPosition {\n  const position = positions[id];\n  if (!position) {\n    throw new Error(`routeEdges: no layout position for node \"${id}\"`);\n  }\n  return position;\n}\n\nfunction requireEdge(group: readonly GraphLayoutEdge[], index: number): GraphLayoutEdge {\n  const edge = group[index];\n  if (!edge) {\n    throw new Error(`routeEdges: expected an edge at index ${index}`);\n  }\n  return edge;\n}\n\n/** Point on the rectangle (centred at `center`, half-extents `halfW`/`halfH`) where the ray toward `towards` exits. */\nfunction clipToRect(\n  center: GraphLayoutPosition,\n  towards: GraphLayoutPosition,\n  halfW: number,\n  halfH: number,\n): GraphLayoutPosition {\n  const dx = towards.x - center.x;\n  const dy = towards.y - center.y;\n  if (dx === 0 && dy === 0) return { x: center.x, y: center.y };\n\n  const scaleX = dx !== 0 ? halfW / Math.abs(dx) : Number.POSITIVE_INFINITY;\n  const scaleY = dy !== 0 ? halfH / Math.abs(dy) : Number.POSITIVE_INFINITY;\n  const scale = Math.min(scaleX, scaleY);\n\n  return { x: center.x + dx * scale, y: center.y + dy * scale };\n}\n\n/** Point at t=0.5 on the quadratic Bézier defined by p0 (start), p1 (control), p2 (end). */\nfunction quadraticMidpoint(\n  p0: GraphLayoutPosition,\n  p1: GraphLayoutPosition,\n  p2: GraphLayoutPosition,\n): GraphLayoutPosition {\n  return {\n    x: 0.25 * p0.x + 0.5 * p1.x + 0.25 * p2.x,\n    y: 0.25 * p0.y + 0.5 * p1.y + 0.25 * p2.y,\n  };\n}\n\n/**\n * Routes each edge as an SVG path clipped to the source/target node\n * rectangles. Edges sharing an unordered node pair — a reciprocal A→B + B→A,\n * or literal duplicates — are fanned out as quadratic curves with\n * alternating, increasing offsets from the straight line between the two\n * node centres, so they never overlap. A lone edge between a pair is a\n * straight line.\n *\n * Throws when an edge references a node id absent from `positions`, naming\n * the edge id, rather than silently dropping or mis-routing it.\n */\nexport function routeEdges(\n  edges: readonly GraphLayoutEdge[],\n  positions: Record<string, GraphLayoutPosition>,\n  dimensions: RouteEdgesDimensions,\n): Record<string, EdgeRoute> {\n  const halfW = dimensions.nodeWidth / 2;\n  const halfH = dimensions.nodeHeight / 2;\n\n  const groups = new Map<string, GraphLayoutEdge[]>();\n  for (const edge of edges) {\n    if (!(edge.from in positions)) {\n      throw new Error(`routeEdges: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!(edge.to in positions)) {\n      throw new Error(`routeEdges: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n    const key = unorderedPairKey(edge.from, edge.to);\n    const group = groups.get(key);\n    if (group) {\n      group.push(edge);\n    } else {\n      groups.set(key, [edge]);\n    }\n  }\n\n  const routes: Record<string, EdgeRoute> = {};\n\n  for (const group of groups.values()) {\n    const first = requireEdge(group, 0);\n    const posA = requirePosition(positions, first.from);\n    const posB = requirePosition(positions, first.to);\n    const dx = posB.x - posA.x;\n    const dy = posB.y - posA.y;\n    const len = Math.hypot(dx, dy) || 1;\n    const perpX = -dy / len;\n    const perpY = dx / len;\n    const midX = (posA.x + posB.x) / 2;\n    const midY = (posA.y + posB.y) / 2;\n\n    group.forEach((edge, index) => {\n      const isCurved = group.length > 1;\n      const sign = index % 2 === 0 ? 1 : -1;\n      const magnitude = Math.floor(index / 2) + 1;\n      const offset = isCurved ? sign * magnitude * CURVE_OFFSET : 0;\n\n      const control = { x: midX + perpX * offset, y: midY + perpY * offset };\n      const fromCenter = requirePosition(positions, edge.from);\n      const toCenter = requirePosition(positions, edge.to);\n      const start = clipToRect(fromCenter, control, halfW, halfH);\n      const end = clipToRect(toCenter, control, halfW, halfH);\n\n      const path = isCurved\n        ? `M ${start.x} ${start.y} Q ${control.x} ${control.y} ${end.x} ${end.y}`\n        : `M ${start.x} ${start.y} L ${end.x} ${end.y}`;\n\n      const label = isCurved\n        ? quadraticMidpoint(start, control, end)\n        : { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };\n\n      routes[edge.id] = { path, labelX: label.x, labelY: label.y };\n    });\n  }\n\n  return routes;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"graph-layout.js","sources":["../../src/data/graph-layout.ts"],"sourcesContent":["// Pure, framework-free layout math for GraphDiagram. Kept free of React so it\n// can be unit tested without rendering. `ringLayout` places nodes on a circle;\n// the level-column layout lives in graph-columns-layout.ts, and the edge\n// routing and label placement in graph-edge-routing.ts, re-exported here.\n\nexport {\n  routeEdges,\n  spreadLabels,\n  type EdgeLabelBox,\n  type EdgeRoute,\n  type GraphLayoutEdge,\n  type RouteEdgesDimensions,\n  type RouteEdgesOptions,\n} from \"./graph-edge-routing\";\n\nexport interface GraphLayoutNode {\n  id: string;\n}\n\nexport interface RingLayoutOptions {\n  /** Node bounding-box width in px. Defaults to 168. */\n  nodeWidth?: number;\n  /** Node bounding-box height in px. Defaults to 60. */\n  nodeHeight?: number;\n  /** Minimum gap between adjacent node edges in px. Defaults to 40. */\n  gap?: number;\n  /** Space reserved around the ring before the viewport edge. Defaults to 24. */\n  padding?: number;\n}\n\nexport interface GraphLayoutPosition {\n  /** Node centre x, in the same coordinate space as `width`/`height`. */\n  x: number;\n  /** Node centre y. */\n  y: number;\n}\n\nexport interface GraphLayoutResult {\n  width: number;\n  height: number;\n  positions: Record<string, GraphLayoutPosition>;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\nconst DEFAULT_GAP = 40;\nconst DEFAULT_PADDING = 24;\nconst MIN_RADIUS = 96;\n\nfunction requireNode<T extends GraphLayoutNode>(nodes: readonly T[], index: number): T {\n  const node = nodes[index];\n  if (!node) {\n    throw new Error(`ringLayout: expected a node at index ${index}`);\n  }\n  return node;\n}\n\n/**\n * Places nodes on a circle in the given order, starting at 12 o'clock and\n * running clockwise. `n=1` is centred (radius 0); `n=2` is a special case —\n * left/right — because 180° clockwise from 12 o'clock lands at 6 o'clock,\n * which reads poorly for a two-node relationship.\n *\n * The radius is sized so the straight-line (chord) distance between any two\n * angularly-adjacent nodes is at least `nodeWidth + gap`, with a sensible\n * floor (`MIN_RADIUS`) for small rings.\n */\nexport function ringLayout(\n  nodes: readonly GraphLayoutNode[],\n  options: RingLayoutOptions = {},\n): GraphLayoutResult {\n  const nodeWidth = options.nodeWidth ?? DEFAULT_NODE_WIDTH;\n  const nodeHeight = options.nodeHeight ?? DEFAULT_NODE_HEIGHT;\n  const gap = options.gap ?? DEFAULT_GAP;\n  const padding = options.padding ?? DEFAULT_PADDING;\n  const n = nodes.length;\n\n  const radius = n <= 1 ? 0 : Math.max(MIN_RADIUS, (nodeWidth + gap) / (2 * Math.sin(Math.PI / n)));\n  const cx = radius + nodeWidth / 2 + padding;\n  const cy = radius + nodeHeight / 2 + padding;\n\n  const positions: Record<string, GraphLayoutPosition> = {};\n\n  if (n === 1) {\n    positions[requireNode(nodes, 0).id] = { x: cx, y: cy };\n  } else if (n === 2) {\n    positions[requireNode(nodes, 0).id] = { x: cx - radius, y: cy };\n    positions[requireNode(nodes, 1).id] = { x: cx + radius, y: cy };\n  } else {\n    nodes.forEach((node, i) => {\n      const theta = -Math.PI / 2 + i * ((2 * Math.PI) / n);\n      positions[node.id] = {\n        x: cx + radius * Math.cos(theta),\n        y: cy + radius * Math.sin(theta),\n      };\n    });\n  }\n\n  return {\n    width: 2 * cx,\n    height: 2 * cy,\n    positions,\n  };\n}\n"],"names":[],"mappings":"AA2CA,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAC5B,MAAM,cAAc;AACpB,MAAM,kBAAkB;AACxB,MAAM,aAAa;AAEnB,SAAS,YAAuC,OAAqB,OAAkB;AACrF,QAAM,OAAO,MAAM,KAAK;AACxB,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,wCAAwC,KAAK,EAAE;AAAA,EACjE;AACA,SAAO;AACT;AAYO,SAAS,WACd,OACA,UAA6B,IACV;AACnB,QAAM,YAAY,QAAQ,aAAa;AACvC,QAAM,aAAa,QAAQ,cAAc;AACzC,QAAM,MAAM,QAAQ,OAAO;AAC3B,QAAM,UAAU,QAAQ,WAAW;AACnC,QAAM,IAAI,MAAM;AAEhB,QAAM,SAAS,KAAK,IAAI,IAAI,KAAK,IAAI,aAAa,YAAY,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,CAAC,EAAE;AAChG,QAAM,KAAK,SAAS,YAAY,IAAI;AACpC,QAAM,KAAK,SAAS,aAAa,IAAI;AAErC,QAAM,YAAiD,CAAA;AAEvD,MAAI,MAAM,GAAG;AACX,cAAU,YAAY,OAAO,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,GAAG,GAAA;AAAA,EACpD,WAAW,MAAM,GAAG;AAClB,cAAU,YAAY,OAAO,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,QAAQ,GAAG,GAAA;AAC3D,cAAU,YAAY,OAAO,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,QAAQ,GAAG,GAAA;AAAA,EAC7D,OAAO;AACL,UAAM,QAAQ,CAAC,MAAM,MAAM;AACzB,YAAM,QAAQ,CAAC,KAAK,KAAK,IAAI,KAAM,IAAI,KAAK,KAAM;AAClD,gBAAU,KAAK,EAAE,IAAI;AAAA,QACnB,GAAG,KAAK,SAAS,KAAK,IAAI,KAAK;AAAA,QAC/B,GAAG,KAAK,SAAS,KAAK,IAAI,KAAK;AAAA,MAAA;AAAA,IAEnC,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL,OAAO,IAAI;AAAA,IACX,QAAQ,IAAI;AAAA,IACZ;AAAA,EAAA;AAEJ;"}

package/dist/data/har/HarPanel.cjs

@@ -2,8 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const useResourceClock = require("../../hooks/use-resource-clock.cjs");
+const format = require("../../lib/format.cjs");
 const DataTable = require("../DataTable.cjs");
+const Icon = require("../Icon.cjs");
 const JsonView = require("../JsonView.cjs");
+const UiLoader = require("../../icons/components/UiLoader.cjs");
+const ERROR_PREVIEW_CHARS = 80;
+const HarClockContext = react.createContext(void 0);
 const COLS = [
   {
     key: "request.method",
@@ -14,22 +20,26 @@ const COLS = [
     key: "request.url",
     label: "URL",
     grow: true,
-    render: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { title: String(value ?? ""), children: String(value ?? "") })
+    render: (value, entry) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-baseline gap-density-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { title: String(value ?? ""), children: String(value ?? "") }),
+      entry._error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive text-xs", title: entry._error, children: previewError(entry._error) }) : null
+    ] })
   },
   {
     key: "response.status",
     label: "Status",
     shrink: true,
-    render: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: statusColor(Number(value ?? 0)), children: String(value ?? "") }),
-    sortValue: (value) => Number(value ?? 0)
+    render: (value, entry) => /* @__PURE__ */ jsxRuntime.jsx(HarStatus, { status: Number(value ?? 0), entry }),
+    sortValue: (value) => Number(value ?? 0),
+    filterValue: (value, entry) => harStatusLabel(Number(value ?? 0), entry)
   },
   {
     key: "time",
     label: "Time",
     align: "right",
     shrink: true,
-    render: (value) => `${Number(value ?? 0).toFixed(0)}ms`,
-    sortValue: (value) => Number(value ?? 0)
+    render: (value, entry) => entry._pending ? /* @__PURE__ */ jsxRuntime.jsx(PendingElapsed, { entry }) : `${Number(value ?? 0).toFixed(0)}ms`,
+    sortValue: (value, entry) => entry._pending ? pendingElapsedMs(entry, Date.now()) : Number(value ?? 0)
   },
   {
     key: "response.bodySize",
@@ -49,12 +59,15 @@ function HarPanel({
   entries,
   search,
   emptyLabel = "No HTTP traffic captured",
-  className
+  className,
+  bodySource
 }) {
   const filteredEntries = react.useMemo(() => {
     if (search === void 0 || search.trim() === "") return entries;
     return entries.filter((entry) => matchesSearch(search.trim().toLowerCase(), entry));
   }, [entries, search]);
+  const runningCount = react.useMemo(() => entries.filter((entry) => entry._pending).length, [entries]);
+  const now = useResourceClock.useResourceClock(runningCount > 0);
   if (!entries || entries.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-density-6 text-center text-muted-foreground text-sm", children: emptyLabel });
   }
@@ -63,7 +76,7 @@ function HarPanel({
     // min-h-0` so its own scroll region can be bounded, and in a block parent
     // that resolves to content height — the table grows past the panel and
     // nothing scrolls.
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-full min-h-0 flex-col ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-full min-h-0 flex-col ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(HarClockContext.Provider, { value: now, children: /* @__PURE__ */ jsxRuntime.jsx(
       DataTable.DataTable,
       {
         data: filteredEntries,
@@ -73,15 +86,64 @@ function HarPanel({
         globalFilterPlaceholder: "Filter URL, method, or body…",
         defaultSort: { key: "time", dir: "asc" },
         emptyMessage: emptyLabel,
-        getRowId: (entry, index) => `${entry.startedDateTime ?? index}-${entry.request.method}-${entry.request.url}-${entry.time}`,
-        renderExpandedRow: (entry) => /* @__PURE__ */ jsxRuntime.jsx(HarRowDetails, { entry })
+        ...runningCount > 0 ? {
+          footer: ({ visibleRowCount, totalRowCount }) => `${visibleRowCount} of ${totalRowCount} row${totalRowCount === 1 ? "" : "s"} · ${runningCount} running`
+        } : {},
+        getRowId: (entry, index) => (
+          // `_id` is the same on a request's pending and completed snapshots,
+          // so an expanded row survives the transition. Without it, leave out
+          // an in-flight entry's `time`, which grows with every snapshot.
+          entry._id ?? `${entry.startedDateTime ?? index}-${entry.request.method}-${entry.request.url}${entry._pending ? "-pending" : `-${entry.time}`}`
+        ),
+        renderExpandedRow: (entry) => /* @__PURE__ */ jsxRuntime.jsx(HarEntryDetails, { entry, bodySource })
       }
-    ) })
+    ) }) })
   );
 }
-function HarRowDetails({ entry }) {
-  var _a, _b;
+function HarStatus({ status, entry }) {
+  if (entry._pending) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiLoader.UiLoader, className: "animate-spin" }),
+      "running"
+    ] });
+  }
+  if (entry._error) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-destructive", children: "ERR" });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: statusColor(status), children: String(status) });
+}
+function PendingElapsed({ entry }) {
+  const now = react.useContext(HarClockContext);
+  if (now === void 0) throw new Error("PendingElapsed must render inside HarPanel's clock");
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: format.formatDuration(pendingElapsedMs(entry, now)) });
+}
+function pendingElapsedMs(entry, now) {
+  const started = Date.parse(entry.startedDateTime ?? "");
+  if (Number.isNaN(started)) return entry.time;
+  return Math.max(0, now - started);
+}
+function harStatusLabel(status, entry) {
+  if (entry._pending) return "running";
+  if (entry._error) return "ERR";
+  return String(status);
+}
+function previewError(error) {
+  return error.length > ERROR_PREVIEW_CHARS ? `${error.slice(0, ERROR_PREVIEW_CHARS)}…` : error;
+}
+function HarEntryDetails({ entry, bodySource }) {
+  const parentNow = react.useContext(HarClockContext);
+  const ownNow = useResourceClock.useResourceClock(Boolean(entry._pending) && parentNow === void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(HarClockContext.Provider, { value: parentNow ?? ownNow, children: /* @__PURE__ */ jsxRuntime.jsx(HarRowDetails, { entry, bodySource }) });
+}
+function HarRowDetails({ entry, bodySource }) {
+  var _a, _b, _c, _d, _e, _f;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    entry._error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-density-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-foreground mb-1", children: "Transport Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap break-all text-destructive", children: entry._error })
+    ] }),
+    entry._pending && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-density-3 text-muted-foreground", children: [
+      "Waiting for response — in flight for ",
+      /* @__PURE__ */ jsxRuntime.jsx(PendingElapsed, { entry })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-density-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -91,16 +153,16 @@ function HarRowDetails({ entry }) {
             ...entry.request.headers ? { headers: entry.request.headers } : {}
           }
         ),
-        ((_a = entry.request.postData) == null ? void 0 : _a.text) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-density-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-foreground mb-1", children: "Request Body" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background p-density-2 rounded border border-border overflow-auto max-h-48", children: /* @__PURE__ */ jsxRuntime.jsx(
-            BodyView,
-            {
-              text: entry.request.postData.text,
-              ...entry.request.postData.mimeType ? { mimeType: entry.request.postData.mimeType } : {}
-            }
-          ) })
-        ] })
+        (((_a = entry.request.postData) == null ? void 0 : _a.text) || (bodySource == null ? void 0 : bodySource.hasBody(entry, "request"))) && /* @__PURE__ */ jsxRuntime.jsx(
+          BodySection,
+          {
+            entry,
+            part: "request",
+            text: (_b = entry.request.postData) == null ? void 0 : _b.text,
+            mimeType: (_c = entry.request.postData) == null ? void 0 : _c.mimeType,
+            bodySource
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
         HeaderList,
@@ -110,16 +172,48 @@ function HarRowDetails({ entry }) {
         }
       ) })
     ] }),
-    ((_b = entry.response.content) == null ? void 0 : _b.text) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-density-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-foreground mb-1", children: "Response Body" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background p-density-2 rounded border border-border overflow-auto max-h-64", children: /* @__PURE__ */ jsxRuntime.jsx(
-        BodyView,
-        {
-          text: entry.response.content.text,
-          ...entry.response.content.mimeType ? { mimeType: entry.response.content.mimeType } : {}
-        }
-      ) })
-    ] })
+    (((_d = entry.response.content) == null ? void 0 : _d.text) || (bodySource == null ? void 0 : bodySource.hasBody(entry, "response"))) && /* @__PURE__ */ jsxRuntime.jsx(
+      BodySection,
+      {
+        entry,
+        part: "response",
+        text: (_e = entry.response.content) == null ? void 0 : _e.text,
+        mimeType: (_f = entry.response.content) == null ? void 0 : _f.mimeType,
+        bodySource
+      }
+    )
+  ] });
+}
+function BodySection({ entry, part, text, mimeType, bodySource }) {
+  const remote = !text && (bodySource == null ? void 0 : bodySource.hasBody(entry, part));
+  const requestId = entry._id;
+  if (remote && !requestId) throw new Error("Private HAR body requires a request ID");
+  const [preview, setPreview] = react.useState();
+  const [error, setError] = react.useState();
+  react.useEffect(() => {
+    if (!remote || !bodySource || !requestId) return;
+    let active = true;
+    setPreview(void 0);
+    setError(void 0);
+    bodySource.preview(requestId, part).then(
+      (value) => {
+        if (active) setPreview(value);
+      },
+      (reason) => {
+        if (active) setError(reason instanceof Error ? reason : new Error(String(reason)));
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [bodySource, requestId, part, remote]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-density-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center gap-2 font-semibold text-foreground", children: [
+      part === "request" ? "Request Body" : "Response Body",
+      remote && bodySource && /* @__PURE__ */ jsxRuntime.jsx("a", { className: "text-sm font-normal text-primary underline", href: bodySource.downloadHref(entry, part), download: true, children: "Download full body" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background p-density-2 rounded border border-border overflow-auto max-h-64", children: error ? /* @__PURE__ */ jsxRuntime.jsx("span", { role: "alert", className: "text-destructive", children: error.message }) : remote && preview === void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Loading preview…" }) : /* @__PURE__ */ jsxRuntime.jsx(BodyView, { text: text || preview || "", ...mimeType ? { mimeType } : {} }) }),
+    remote && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Preview shows at most the first 64 KiB." })
   ] });
 }
 function HeaderList({
@@ -161,7 +255,8 @@ function matchesSearch(needle, entry) {
     entry.request.method,
     entry.request.url,
     (_a = entry.request.postData) == null ? void 0 : _a.text,
-    (_b = entry.response.content) == null ? void 0 : _b.text
+    (_b = entry.response.content) == null ? void 0 : _b.text,
+    entry._error
   ].some((value) => !!value && value.toLowerCase().includes(needle));
 }
 function formatBytes(bytes) {
@@ -177,5 +272,6 @@ function statusColor(status) {
   if (status >= 200) return "text-green-600";
   return "text-muted-foreground";
 }
+exports.HarEntryDetails = HarEntryDetails;
 exports.HarPanel = HarPanel;
 //# sourceMappingURL=HarPanel.cjs.map

package/dist/data/har/HarPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HarPanel.cjs","sources":["../../../src/data/har/HarPanel.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { DataTable, type DataTableColumn } from \"../DataTable\";\nimport { JsonView } from \"../JsonView\";\nimport type { HAREntry } from \"./types\";\n\nexport type HarPanelProps = {\n  /** HAR entries to render. */\n  entries: HAREntry[];\n  /** Optional external search term. When omitted, the internal DataTable search is shown. */\n  search?: string;\n  /** Empty-state label for no entries or no matches. */\n  emptyLabel?: string;\n  /** Classes applied to the panel root. */\n  className?: string;\n};\n\nconst COLS: DataTableColumn<HAREntry>[] = [\n  {\n    key: \"request.method\",\n    label: \"Method\",\n    shrink: true,\n  },\n  {\n    key: \"request.url\",\n    label: \"URL\",\n    grow: true,\n    render: (value) => <span title={String(value ?? \"\")}>{String(value ?? \"\")}</span>,\n  },\n  {\n    key: \"response.status\",\n    label: \"Status\",\n    shrink: true,\n    render: (value) => (\n      <span className={statusColor(Number(value ?? 0))}>{String(value ?? \"\")}</span>\n    ),\n    sortValue: (value) => Number(value ?? 0),\n  },\n  {\n    key: \"time\",\n    label: \"Time\",\n    align: \"right\",\n    shrink: true,\n    render: (value) => `${Number(value ?? 0).toFixed(0)}ms`,\n    sortValue: (value) => Number(value ?? 0),\n  },\n  {\n    key: \"response.bodySize\",\n    label: \"Size\",\n    align: \"right\",\n    shrink: true,\n    render: (value) => formatBytes(Number(value ?? 0)),\n    sortValue: (value) => Number(value ?? 0),\n  },\n  {\n    key: \"response.content.mimeType\",\n    label: \"Type\",\n    shrink: true,\n  },\n];\n\nexport function HarPanel({\n  entries,\n  search,\n  emptyLabel = \"No HTTP traffic captured\",\n  className,\n}: HarPanelProps) {\n  const filteredEntries = useMemo(() => {\n    if (search === undefined || search.trim() === \"\") return entries;\n    return entries.filter((entry) => matchesSearch(search.trim().toLowerCase(), entry));\n  }, [entries, search]);\n\n  if (!entries || entries.length === 0) {\n    return (\n      <div className=\"p-density-6 text-center text-muted-foreground text-sm\">{emptyLabel}</div>\n    );\n  }\n\n  return (\n    // A flex column, not a plain block: DataTable sizes itself as `flex-1\n    // min-h-0` so its own scroll region can be bounded, and in a block parent\n    // that resolves to content height — the table grows past the panel and\n    // nothing scrolls.\n    <div className={`flex h-full min-h-0 flex-col ${className ?? \"\"}`}>\n      <DataTable\n        data={filteredEntries}\n        columns={COLS}\n        autoFilter\n        showGlobalFilter={search === undefined}\n        globalFilterPlaceholder=\"Filter URL, method, or body…\"\n        defaultSort={{ key: \"time\", dir: \"asc\" }}\n        emptyMessage={emptyLabel}\n        getRowId={(entry, index) =>\n          `${entry.startedDateTime ?? index}-${entry.request.method}-${entry.request.url}-${entry.time}`\n        }\n        renderExpandedRow={(entry) => <HarRowDetails entry={entry} />}\n      />\n    </div>\n  );\n}\n\nfunction HarRowDetails({ entry }: { entry: HAREntry }) {\n  return (\n    <>\n      <div className=\"grid grid-cols-2 gap-density-4\">\n        <div>\n          <HeaderList\n            title=\"Request Headers\"\n            {...(entry.request.headers ? { headers: entry.request.headers } : {})}\n          />\n          {entry.request.postData?.text && (\n            <div className=\"mt-density-2\">\n              <div className=\"font-semibold text-foreground mb-1\">Request Body</div>\n              <div className=\"bg-background p-density-2 rounded border border-border overflow-auto max-h-48\">\n                <BodyView\n                  text={entry.request.postData.text}\n                  {...(entry.request.postData.mimeType\n                    ? { mimeType: entry.request.postData.mimeType }\n                    : {})}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n        <div>\n          <HeaderList\n            title=\"Response Headers\"\n            {...(entry.response.headers ? { headers: entry.response.headers } : {})}\n          />\n        </div>\n      </div>\n      {entry.response.content?.text && (\n        <div className=\"mt-density-3\">\n          <div className=\"font-semibold text-foreground mb-1\">Response Body</div>\n          <div className=\"bg-background p-density-2 rounded border border-border overflow-auto max-h-64\">\n            <BodyView\n              text={entry.response.content.text}\n              {...(entry.response.content.mimeType\n                ? { mimeType: entry.response.content.mimeType }\n                : {})}\n            />\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction HeaderList({\n  title,\n  headers,\n}: {\n  title: string;\n  headers?: { name: string; value: string }[];\n}) {\n  return (\n    <>\n      <div className=\"font-semibold text-foreground mb-1\">{title}</div>\n      <div className=\"space-y-0.5\">\n        {headers?.map((h, i) => (\n          <div key={i} className=\"whitespace-nowrap\">\n            <span className=\"text-purple-600 dark:text-purple-400\">{h.name}:</span> {h.value}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n}\n\nfunction BodyView({ text, mimeType }: { text: string; mimeType?: string }) {\n  if (isJsonType(mimeType)) {\n    const parsed = tryParseJson(text);\n    if (parsed !== null) return <JsonView data={parsed} />;\n  }\n  return <pre className=\"whitespace-pre-wrap break-all\">{text}</pre>;\n}\n\nfunction tryParseJson(text: string): unknown | null {\n  try {\n    return JSON.parse(text);\n  } catch {\n    return null;\n  }\n}\n\nfunction isJsonType(mime?: string): boolean {\n  return !!mime && (mime.includes(\"json\") || mime.includes(\"javascript\"));\n}\n\nfunction matchesSearch(needle: string, entry: HAREntry): boolean {\n  return [\n    entry.request.method,\n    entry.request.url,\n    entry.request.postData?.text,\n    entry.response.content?.text,\n  ].some((value) => !!value && value.toLowerCase().includes(needle));\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 0) return \"\";\n  if (bytes < 1024) return `${bytes}B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;\n  return `${(bytes / 1024 / 1024).toFixed(1)}MB`;\n}\n\nfunction statusColor(status: number): string {\n  if (status >= 500) return \"text-red-600\";\n  if (status >= 400) return \"text-amber-600\";\n  if (status >= 300) return \"text-blue-600\";\n  if (status >= 200) return \"text-green-600\";\n  return \"text-muted-foreground\";\n}\n"],"names":["jsx","useMemo","DataTable","jsxs","Fragment","JsonView"],"mappings":";;;;;;AAgBA,MAAM,OAAoC;AAAA,EACxC;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ,CAAC,UAAUA,2BAAAA,IAAC,QAAA,EAAK,OAAO,OAAO,SAAS,EAAE,GAAI,UAAA,OAAO,SAAS,EAAE,EAAA,CAAE;AAAA,EAAA;AAAA,EAE5E;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,CAAC,UACPA,2BAAAA,IAAC,UAAK,WAAW,YAAY,OAAO,SAAS,CAAC,CAAC,GAAI,UAAA,OAAO,SAAS,EAAE,GAAE;AAAA,IAEzE,WAAW,CAAC,UAAU,OAAO,SAAS,CAAC;AAAA,EAAA;AAAA,EAEzC;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,CAAC,UAAU,GAAG,OAAO,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AAAA,IACnD,WAAW,CAAC,UAAU,OAAO,SAAS,CAAC;AAAA,EAAA;AAAA,EAEzC;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,CAAC,UAAU,YAAY,OAAO,SAAS,CAAC,CAAC;AAAA,IACjD,WAAW,CAAC,UAAU,OAAO,SAAS,CAAC;AAAA,EAAA;AAAA,EAEzC;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ;AAEO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAAkB;AAChB,QAAM,kBAAkBC,MAAAA,QAAQ,MAAM;AACpC,QAAI,WAAW,UAAa,OAAO,KAAA,MAAW,GAAI,QAAO;AACzD,WAAO,QAAQ,OAAO,CAAC,UAAU,cAAc,OAAO,OAAO,eAAe,KAAK,CAAC;AAAA,EACpF,GAAG,CAAC,SAAS,MAAM,CAAC;AAEpB,MAAI,CAAC,WAAW,QAAQ,WAAW,GAAG;AACpC,WACED,2BAAAA,IAAC,OAAA,EAAI,WAAU,yDAAyD,UAAA,YAAW;AAAA,EAEvF;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKG,OAAA,EAAI,WAAW,gCAAgC,aAAa,EAAE,IAC7D,UAAAA,2BAAAA;AAAAA,MAACE,UAAAA;AAAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS;AAAA,QACT,YAAU;AAAA,QACV,kBAAkB,WAAW;AAAA,QAC7B,yBAAwB;AAAA,QACxB,aAAa,EAAE,KAAK,QAAQ,KAAK,MAAA;AAAA,QACjC,cAAc;AAAA,QACd,UAAU,CAAC,OAAO,UAChB,GAAG,MAAM,mBAAmB,KAAK,IAAI,MAAM,QAAQ,MAAM,IAAI,MAAM,QAAQ,GAAG,IAAI,MAAM,IAAI;AAAA,QAE9F,mBAAmB,CAAC,UAAUF,2BAAAA,IAAC,iBAAc,MAAA,CAAc;AAAA,MAAA;AAAA,IAAA,EAC7D,CACF;AAAA;AAEJ;AAEA,SAAS,cAAc,EAAE,SAA8B;;AACrD,SACEG,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,MAAAA,gCAAC,OAAA,EACC,UAAA;AAAA,QAAAH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACL,GAAI,MAAM,QAAQ,UAAU,EAAE,SAAS,MAAM,QAAQ,YAAY,CAAA;AAAA,UAAC;AAAA,QAAA;AAAA,UAEpE,WAAM,QAAQ,aAAd,mBAAwB,SACvBG,2BAAAA,KAAC,OAAA,EAAI,WAAU,gBACb,UAAA;AAAA,UAAAH,2BAAAA,IAAC,OAAA,EAAI,WAAU,sCAAqC,UAAA,gBAAY;AAAA,UAChEA,2BAAAA,IAAC,OAAA,EAAI,WAAU,iFACb,UAAAA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,MAAM,QAAQ,SAAS;AAAA,cAC5B,GAAI,MAAM,QAAQ,SAAS,WACxB,EAAE,UAAU,MAAM,QAAQ,SAAS,aACnC,CAAA;AAAA,YAAC;AAAA,UAAA,EACP,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GAEJ;AAAA,qCACC,OAAA,EACC,UAAAA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACL,GAAI,MAAM,SAAS,UAAU,EAAE,SAAS,MAAM,SAAS,YAAY,CAAA;AAAA,QAAC;AAAA,MAAA,EACvE,CACF;AAAA,IAAA,GACF;AAAA,MACC,WAAM,SAAS,YAAf,mBAAwB,SACvBG,2BAAAA,KAAC,OAAA,EAAI,WAAU,gBACb,UAAA;AAAA,MAAAH,2BAAAA,IAAC,OAAA,EAAI,WAAU,sCAAqC,UAAA,iBAAa;AAAA,MACjEA,2BAAAA,IAAC,OAAA,EAAI,WAAU,iFACb,UAAAA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,MAAM,SAAS,QAAQ;AAAA,UAC5B,GAAI,MAAM,SAAS,QAAQ,WACxB,EAAE,UAAU,MAAM,SAAS,QAAQ,aACnC,CAAA;AAAA,QAAC;AAAA,MAAA,EACP,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGG;AACD,SACEG,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAJ,2BAAAA,IAAC,OAAA,EAAI,WAAU,sCAAsC,UAAA,OAAM;AAAA,IAC3DA,2BAAAA,IAAC,OAAA,EAAI,WAAU,eACZ,UAAA,mCAAS,IAAI,CAAC,GAAG,MAChBG,2BAAAA,KAAC,OAAA,EAAY,WAAU,qBACrB,UAAA;AAAA,MAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,wCAAwC,UAAA;AAAA,QAAA,EAAE;AAAA,QAAK;AAAA,MAAA,GAAC;AAAA,MAAO;AAAA,MAAE,EAAE;AAAA,IAAA,EAAA,GADnE,CAEV,GACD,CACH;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,SAAS,EAAE,MAAM,YAAiD;AACzE,MAAI,WAAW,QAAQ,GAAG;AACxB,UAAM,SAAS,aAAa,IAAI;AAChC,QAAI,WAAW,KAAM,QAAOH,2BAAAA,IAACK,SAAAA,UAAA,EAAS,MAAM,QAAQ;AAAA,EACtD;AACA,SAAOL,2BAAAA,IAAC,OAAA,EAAI,WAAU,iCAAiC,UAAA,MAAK;AAC9D;AAEA,SAAS,aAAa,MAA8B;AAClD,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,WAAW,MAAwB;AAC1C,SAAO,CAAC,CAAC,SAAS,KAAK,SAAS,MAAM,KAAK,KAAK,SAAS,YAAY;AACvE;AAEA,SAAS,cAAc,QAAgB,OAA0B;;AAC/D,SAAO;AAAA,IACL,MAAM,QAAQ;AAAA,IACd,MAAM,QAAQ;AAAA,KACd,WAAM,QAAQ,aAAd,mBAAwB;AAAA,KACxB,WAAM,SAAS,YAAf,mBAAwB;AAAA,EAAA,EACxB,KAAK,CAAC,UAAU,CAAC,CAAC,SAAS,MAAM,YAAA,EAAc,SAAS,MAAM,CAAC;AACnE;AAEA,SAAS,YAAY,OAAuB;AAC1C,MAAI,QAAQ,EAAG,QAAO;AACtB,MAAI,QAAQ,KAAM,QAAO,GAAG,KAAK;AACjC,MAAI,QAAQ,OAAO,KAAM,QAAO,IAAI,QAAQ,MAAM,QAAQ,CAAC,CAAC;AAC5D,SAAO,IAAI,QAAQ,OAAO,MAAM,QAAQ,CAAC,CAAC;AAC5C;AAEA,SAAS,YAAY,QAAwB;AAC3C,MAAI,UAAU,IAAK,QAAO;AAC1B,MAAI,UAAU,IAAK,QAAO;AAC1B,MAAI,UAAU,IAAK,QAAO;AAC1B,MAAI,UAAU,IAAK,QAAO;AAC1B,SAAO;AACT;;"}
+{"version":3,"file":"HarPanel.cjs","sources":["../../../src/data/har/HarPanel.tsx"],"sourcesContent":["import { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { useResourceClock } from \"../../hooks/use-resource-clock\";\nimport { UiLoader } from \"../../icons\";\nimport { formatDuration } from \"../../lib/format\";\nimport { DataTable, type DataTableColumn, type DataTableFooterContext } from \"../DataTable\";\nimport { Icon } from \"../Icon\";\nimport { JsonView } from \"../JsonView\";\nimport type { HAREntry } from \"./types\";\n\nconst ERROR_PREVIEW_CHARS = 80;\n\n/** Wall-clock ms shared by every in-flight row, ticking only while one exists. */\nconst HarClockContext = createContext<number | undefined>(undefined);\n\nexport type HarPanelProps = {\n  /** HAR entries to render. */\n  entries: HAREntry[];\n  /** Optional external search term. When omitted, the internal DataTable search is shown. */\n  search?: string;\n  /** Empty-state label for no entries or no matches. */\n  emptyLabel?: string;\n  /** Classes applied to the panel root. */\n  className?: string;\n  /** Optional private body store used only when an expanded row needs a preview. */\n  bodySource?: HarPanelBodySource;\n};\n\nexport type HarPanelBodySource = {\n  hasBody: (entry: HAREntry, part: \"request\" | \"response\") => boolean;\n  preview: (requestId: string, part: \"request\" | \"response\") => Promise<string>;\n  downloadHref: (entry: HAREntry, part: \"request\" | \"response\") => string;\n};\n\nexport type HarEntryDetailsProps = { entry: HAREntry; bodySource?: HarPanelBodySource | undefined };\n\nconst COLS: DataTableColumn<HAREntry>[] = [\n  {\n    key: \"request.method\",\n    label: \"Method\",\n    shrink: true,\n  },\n  {\n    key: \"request.url\",\n    label: \"URL\",\n    grow: true,\n    render: (value, entry) => (\n      <span className=\"inline-flex min-w-0 items-baseline gap-density-2\">\n        <span title={String(value ?? \"\")}>{String(value ?? \"\")}</span>\n        {entry._error ? (\n          <span className=\"text-destructive text-xs\" title={entry._error}>\n            {previewError(entry._error)}\n          </span>\n        ) : null}\n      </span>\n    ),\n  },\n  {\n    key: \"response.status\",\n    label: \"Status\",\n    shrink: true,\n    render: (value, entry) => <HarStatus status={Number(value ?? 0)} entry={entry} />,\n    sortValue: (value) => Number(value ?? 0),\n    filterValue: (value, entry) => harStatusLabel(Number(value ?? 0), entry),\n  },\n  {\n    key: \"time\",\n    label: \"Time\",\n    align: \"right\",\n    shrink: true,\n    render: (value, entry) =>\n      entry._pending ? <PendingElapsed entry={entry} /> : `${Number(value ?? 0).toFixed(0)}ms`,\n    sortValue: (value, entry) =>\n      entry._pending ? pendingElapsedMs(entry, Date.now()) : Number(value ?? 0),\n  },\n  {\n    key: \"response.bodySize\",\n    label: \"Size\",\n    align: \"right\",\n    shrink: true,\n    render: (value) => formatBytes(Number(value ?? 0)),\n    sortValue: (value) => Number(value ?? 0),\n  },\n  {\n    key: \"response.content.mimeType\",\n    label: \"Type\",\n    shrink: true,\n  },\n];\n\nexport function HarPanel({\n  entries,\n  search,\n  emptyLabel = \"No HTTP traffic captured\",\n  className,\n  bodySource,\n}: HarPanelProps) {\n  const filteredEntries = useMemo(() => {\n    if (search === undefined || search.trim() === \"\") return entries;\n    return entries.filter((entry) => matchesSearch(search.trim().toLowerCase(), entry));\n  }, [entries, search]);\n  const runningCount = useMemo(() => entries.filter((entry) => entry._pending).length, [entries]);\n  const now = useResourceClock(runningCount > 0);\n\n  if (!entries || entries.length === 0) {\n    return (\n      <div className=\"p-density-6 text-center text-muted-foreground text-sm\">{emptyLabel}</div>\n    );\n  }\n\n  return (\n    // A flex column, not a plain block: DataTable sizes itself as `flex-1\n    // min-h-0` so its own scroll region can be bounded, and in a block parent\n    // that resolves to content height — the table grows past the panel and\n    // nothing scrolls.\n    <div className={`flex h-full min-h-0 flex-col ${className ?? \"\"}`}>\n      <HarClockContext.Provider value={now}>\n        <DataTable\n          data={filteredEntries}\n          columns={COLS}\n          autoFilter\n          showGlobalFilter={search === undefined}\n          globalFilterPlaceholder=\"Filter URL, method, or body…\"\n          defaultSort={{ key: \"time\", dir: \"asc\" }}\n          emptyMessage={emptyLabel}\n          {...(runningCount > 0\n            ? {\n                footer: ({ visibleRowCount, totalRowCount }: DataTableFooterContext) =>\n                  `${visibleRowCount} of ${totalRowCount} row${totalRowCount === 1 ? \"\" : \"s\"} · ${runningCount} running`,\n              }\n            : {})}\n          getRowId={(entry, index) =>\n            // `_id` is the same on a request's pending and completed snapshots,\n            // so an expanded row survives the transition. Without it, leave out\n            // an in-flight entry's `time`, which grows with every snapshot.\n            entry._id ??\n            `${entry.startedDateTime ?? index}-${entry.request.method}-${entry.request.url}${entry._pending ? \"-pending\" : `-${entry.time}`}`\n          }\n          renderExpandedRow={(entry) => <HarEntryDetails entry={entry} bodySource={bodySource} />}\n        />\n      </HarClockContext.Provider>\n    </div>\n  );\n}\n\nfunction HarStatus({ status, entry }: { status: number; entry: HAREntry }) {\n  if (entry._pending) {\n    return (\n      <span className=\"inline-flex items-center gap-1 text-muted-foreground\">\n        <Icon icon={UiLoader} className=\"animate-spin\" />\n        running\n      </span>\n    );\n  }\n  if (entry._error) return <span className=\"font-semibold text-destructive\">ERR</span>;\n  return <span className={statusColor(status)}>{String(status)}</span>;\n}\n\nfunction PendingElapsed({ entry }: { entry: HAREntry }) {\n  const now = useContext(HarClockContext);\n  if (now === undefined) throw new Error(\"PendingElapsed must render inside HarPanel's clock\");\n  return <span className=\"tabular-nums\">{formatDuration(pendingElapsedMs(entry, now))}</span>;\n}\n\n/**\n * Elapsed time of an in-flight request, measured from `startedDateTime` so it\n * keeps ticking between snapshots. The snapshot's `time` is only used when the\n * start timestamp cannot be parsed.\n */\nfunction pendingElapsedMs(entry: HAREntry, now: number): number {\n  const started = Date.parse(entry.startedDateTime ?? \"\");\n  if (Number.isNaN(started)) return entry.time;\n  // Server and browser clocks can disagree by a little; a negative elapsed is noise.\n  return Math.max(0, now - started);\n}\n\nfunction harStatusLabel(status: number, entry: HAREntry): string {\n  if (entry._pending) return \"running\";\n  if (entry._error) return \"ERR\";\n  return String(status);\n}\n\nfunction previewError(error: string): string {\n  return error.length > ERROR_PREVIEW_CHARS ? `${error.slice(0, ERROR_PREVIEW_CHARS)}…` : error;\n}\n\nexport function HarEntryDetails({ entry, bodySource }: HarEntryDetailsProps) {\n  const parentNow = useContext(HarClockContext);\n  const ownNow = useResourceClock(Boolean(entry._pending) && parentNow === undefined);\n  return <HarClockContext.Provider value={parentNow ?? ownNow}><HarRowDetails entry={entry} bodySource={bodySource} /></HarClockContext.Provider>;\n}\n\nfunction HarRowDetails({ entry, bodySource }: HarEntryDetailsProps) {\n  return (\n    <>\n      {entry._error && (\n        <div className=\"mb-density-3\">\n          <div className=\"font-semibold text-foreground mb-1\">Transport Error</div>\n          <pre className=\"whitespace-pre-wrap break-all text-destructive\">{entry._error}</pre>\n        </div>\n      )}\n      {entry._pending && (\n        <div className=\"mb-density-3 text-muted-foreground\">\n          Waiting for response — in flight for <PendingElapsed entry={entry} />\n        </div>\n      )}\n      <div className=\"grid grid-cols-2 gap-density-4\">\n        <div>\n          <HeaderList\n            title=\"Request Headers\"\n            {...(entry.request.headers ? { headers: entry.request.headers } : {})}\n          />\n          {(entry.request.postData?.text || bodySource?.hasBody(entry, \"request\")) && (\n            <BodySection entry={entry} part=\"request\" text={entry.request.postData?.text}\n              mimeType={entry.request.postData?.mimeType} bodySource={bodySource} />\n          )}\n        </div>\n        <div>\n          <HeaderList\n            title=\"Response Headers\"\n            {...(entry.response.headers ? { headers: entry.response.headers } : {})}\n          />\n        </div>\n      </div>\n      {(entry.response.content?.text || bodySource?.hasBody(entry, \"response\")) && (\n        <BodySection entry={entry} part=\"response\" text={entry.response.content?.text}\n          mimeType={entry.response.content?.mimeType} bodySource={bodySource} />\n      )}\n    </>\n  );\n}\n\nfunction BodySection({ entry, part, text, mimeType, bodySource }: {\n  entry: HAREntry;\n  part: \"request\" | \"response\";\n  text?: string | undefined;\n  mimeType?: string | undefined;\n  bodySource?: HarPanelBodySource | undefined;\n}) {\n  const remote = !text && bodySource?.hasBody(entry, part);\n  const requestId = entry._id;\n  if (remote && !requestId) throw new Error(\"Private HAR body requires a request ID\");\n  const [preview, setPreview] = useState<string | undefined>();\n  const [error, setError] = useState<Error | undefined>();\n  useEffect(() => {\n    if (!remote || !bodySource || !requestId) return;\n    let active = true;\n    setPreview(undefined);\n    setError(undefined);\n    bodySource.preview(requestId, part).then(\n      (value) => { if (active) setPreview(value); },\n      (reason: unknown) => { if (active) setError(reason instanceof Error ? reason : new Error(String(reason))); },\n    );\n    return () => { active = false; };\n  }, [bodySource, requestId, part, remote]);\n  return (\n    <div className=\"mt-density-3\">\n      <div className=\"mb-1 flex items-center gap-2 font-semibold text-foreground\">\n        {part === \"request\" ? \"Request Body\" : \"Response Body\"}\n        {remote && bodySource && <a className=\"text-sm font-normal text-primary underline\" href={bodySource.downloadHref(entry, part)} download>Download full body</a>}\n      </div>\n      <div className=\"bg-background p-density-2 rounded border border-border overflow-auto max-h-64\">\n        {error ? <span role=\"alert\" className=\"text-destructive\">{error.message}</span>\n          : remote && preview === undefined ? <span className=\"text-muted-foreground\">Loading preview…</span>\n          : <BodyView text={text || preview || \"\"} {...(mimeType ? { mimeType } : {})} />}\n      </div>\n      {remote && <p className=\"mt-1 text-xs text-muted-foreground\">Preview shows at most the first 64 KiB.</p>}\n    </div>\n  );\n}\n\nfunction HeaderList({\n  title,\n  headers,\n}: {\n  title: string;\n  headers?: { name: string; value: string }[];\n}) {\n  return (\n    <>\n      <div className=\"font-semibold text-foreground mb-1\">{title}</div>\n      <div className=\"space-y-0.5\">\n        {headers?.map((h, i) => (\n          <div key={i} className=\"whitespace-nowrap\">\n            <span className=\"text-purple-600 dark:text-purple-400\">{h.name}:</span> {h.value}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n}\n\nfunction BodyView({ text, mimeType }: { text: string; mimeType?: string }) {\n  if (isJsonType(mimeType)) {\n    const parsed = tryParseJson(text);\n    if (parsed !== null) return <JsonView data={parsed} />;\n  }\n  return <pre className=\"whitespace-pre-wrap break-all\">{text}</pre>;\n}\n\nfunction tryParseJson(text: string): unknown | null {\n  try {\n    return JSON.parse(text);\n  } catch {\n    return null;\n  }\n}\n\nfunction isJsonType(mime?: string): boolean {\n  return !!mime && (mime.includes(\"json\") || mime.includes(\"javascript\"));\n}\n\nfunction matchesSearch(needle: string, entry: HAREntry): boolean {\n  return [\n    entry.request.method,\n    entry.request.url,\n    entry.request.postData?.text,\n    entry.response.content?.text,\n    entry._error,\n  ].some((value) => !!value && value.toLowerCase().includes(needle));\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 0) return \"\";\n  if (bytes < 1024) return `${bytes}B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;\n  return `${(bytes / 1024 / 1024).toFixed(1)}MB`;\n}\n\nfunction statusColor(status: number): string {\n  if (status >= 500) return \"text-red-600\";\n  if (status >= 400) return \"text-amber-600\";\n  if (status >= 300) return \"text-blue-600\";\n  if (status >= 200) return \"text-green-600\";\n  return \"text-muted-foreground\";\n}\n"],"names":["createContext","jsxs","jsx","useMemo","useResourceClock","DataTable","Icon","UiLoader","useContext","Fragment","useState","useEffect","JsonView"],"mappings":";;;;;;;;;;AASA,MAAM,sBAAsB;AAG5B,MAAM,kBAAkBA,MAAAA,cAAkC,MAAS;AAuBnE,MAAM,OAAoC;AAAA,EACxC;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ,CAAC,OAAO,UACdC,2BAAAA,KAAC,QAAA,EAAK,WAAU,oDACd,UAAA;AAAA,MAAAC,2BAAAA,IAAC,QAAA,EAAK,OAAO,OAAO,SAAS,EAAE,GAAI,UAAA,OAAO,SAAS,EAAE,EAAA,CAAE;AAAA,MACtD,MAAM,SACLA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,OAAO,MAAM,QACrD,UAAA,aAAa,MAAM,MAAM,GAC5B,IACE;AAAA,IAAA,EAAA,CACN;AAAA,EAAA;AAAA,EAGJ;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,CAAC,OAAO,UAAUA,2BAAAA,IAAC,WAAA,EAAU,QAAQ,OAAO,SAAS,CAAC,GAAG,MAAA,CAAc;AAAA,IAC/E,WAAW,CAAC,UAAU,OAAO,SAAS,CAAC;AAAA,IACvC,aAAa,CAAC,OAAO,UAAU,eAAe,OAAO,SAAS,CAAC,GAAG,KAAK;AAAA,EAAA;AAAA,EAEzE;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,CAAC,OAAO,UACd,MAAM,WAAWA,2BAAAA,IAAC,gBAAA,EAAe,MAAA,CAAc,IAAK,GAAG,OAAO,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AAAA,IACtF,WAAW,CAAC,OAAO,UACjB,MAAM,WAAW,iBAAiB,OAAO,KAAK,IAAA,CAAK,IAAI,OAAO,SAAS,CAAC;AAAA,EAAA;AAAA,EAE5E;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,CAAC,UAAU,YAAY,OAAO,SAAS,CAAC,CAAC;AAAA,IACjD,WAAW,CAAC,UAAU,OAAO,SAAS,CAAC;AAAA,EAAA;AAAA,EAEzC;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ;AAEO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AACF,GAAkB;AAChB,QAAM,kBAAkBC,MAAAA,QAAQ,MAAM;AACpC,QAAI,WAAW,UAAa,OAAO,KAAA,MAAW,GAAI,QAAO;AACzD,WAAO,QAAQ,OAAO,CAAC,UAAU,cAAc,OAAO,OAAO,eAAe,KAAK,CAAC;AAAA,EACpF,GAAG,CAAC,SAAS,MAAM,CAAC;AACpB,QAAM,eAAeA,MAAAA,QAAQ,MAAM,QAAQ,OAAO,CAAC,UAAU,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC;AAC9F,QAAM,MAAMC,iBAAAA,iBAAiB,eAAe,CAAC;AAE7C,MAAI,CAAC,WAAW,QAAQ,WAAW,GAAG;AACpC,WACEF,2BAAAA,IAAC,OAAA,EAAI,WAAU,yDAAyD,UAAA,YAAW;AAAA,EAEvF;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKEA,2BAAAA,IAAC,OAAA,EAAI,WAAW,gCAAgC,aAAa,EAAE,IAC7D,UAAAA,2BAAAA,IAAC,gBAAgB,UAAhB,EAAyB,OAAO,KAC/B,UAAAA,2BAAAA;AAAAA,MAACG,UAAAA;AAAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS;AAAA,QACT,YAAU;AAAA,QACV,kBAAkB,WAAW;AAAA,QAC7B,yBAAwB;AAAA,QACxB,aAAa,EAAE,KAAK,QAAQ,KAAK,MAAA;AAAA,QACjC,cAAc;AAAA,QACb,GAAI,eAAe,IAChB;AAAA,UACE,QAAQ,CAAC,EAAE,iBAAiB,cAAA,MAC1B,GAAG,eAAe,OAAO,aAAa,OAAO,kBAAkB,IAAI,KAAK,GAAG,MAAM,YAAY;AAAA,QAAA,IAEjG,CAAA;AAAA,QACJ,UAAU,CAAC,OAAO;AAAA;AAAA;AAAA;AAAA,UAIhB,MAAM,OACN,GAAG,MAAM,mBAAmB,KAAK,IAAI,MAAM,QAAQ,MAAM,IAAI,MAAM,QAAQ,GAAG,GAAG,MAAM,WAAW,aAAa,IAAI,MAAM,IAAI,EAAE;AAAA;AAAA,QAEjI,mBAAmB,CAAC,UAAUH,2BAAAA,IAAC,iBAAA,EAAgB,OAAc,WAAA,CAAwB;AAAA,MAAA;AAAA,IAAA,GAEzF,EAAA,CACF;AAAA;AAEJ;AAEA,SAAS,UAAU,EAAE,QAAQ,SAA8C;AACzE,MAAI,MAAM,UAAU;AAClB,WACED,2BAAAA,KAAC,QAAA,EAAK,WAAU,wDACd,UAAA;AAAA,MAAAC,2BAAAA,IAACI,KAAAA,MAAA,EAAK,MAAMC,SAAAA,UAAU,WAAU,gBAAe;AAAA,MAAE;AAAA,IAAA,GAEnD;AAAA,EAEJ;AACA,MAAI,MAAM,OAAQ,uCAAQ,QAAA,EAAK,WAAU,kCAAiC,UAAA,OAAG;AAC7E,SAAOL,+BAAC,UAAK,WAAW,YAAY,MAAM,GAAI,UAAA,OAAO,MAAM,GAAE;AAC/D;AAEA,SAAS,eAAe,EAAE,SAA8B;AACtD,QAAM,MAAMM,MAAAA,WAAW,eAAe;AACtC,MAAI,QAAQ,OAAW,OAAM,IAAI,MAAM,oDAAoD;AAC3F,SAAON,+BAAC,UAAK,WAAU,gBAAgB,gCAAe,iBAAiB,OAAO,GAAG,CAAC,EAAA,CAAE;AACtF;AAOA,SAAS,iBAAiB,OAAiB,KAAqB;AAC9D,QAAM,UAAU,KAAK,MAAM,MAAM,mBAAmB,EAAE;AACtD,MAAI,OAAO,MAAM,OAAO,UAAU,MAAM;AAExC,SAAO,KAAK,IAAI,GAAG,MAAM,OAAO;AAClC;AAEA,SAAS,eAAe,QAAgB,OAAyB;AAC/D,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,OAAQ,QAAO;AACzB,SAAO,OAAO,MAAM;AACtB;AAEA,SAAS,aAAa,OAAuB;AAC3C,SAAO,MAAM,SAAS,sBAAsB,GAAG,MAAM,MAAM,GAAG,mBAAmB,CAAC,MAAM;AAC1F;AAEO,SAAS,gBAAgB,EAAE,OAAO,cAAoC;AAC3E,QAAM,YAAYM,MAAAA,WAAW,eAAe;AAC5C,QAAM,SAASJ,iBAAAA,iBAAiB,QAAQ,MAAM,QAAQ,KAAK,cAAc,MAAS;AAClF,SAAOF,2BAAAA,IAAC,gBAAgB,UAAhB,EAAyB,OAAO,aAAa,QAAQ,UAAAA,2BAAAA,IAAC,eAAA,EAAc,OAAc,WAAA,CAAwB,EAAA,CAAE;AACtH;AAEA,SAAS,cAAc,EAAE,OAAO,cAAoC;;AAClE,SACED,2BAAAA,KAAAQ,qBAAA,EACG,UAAA;AAAA,IAAA,MAAM,UACLR,gCAAC,OAAA,EAAI,WAAU,gBACb,UAAA;AAAA,MAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,sCAAqC,UAAA,mBAAe;AAAA,MACnEA,2BAAAA,IAAC,OAAA,EAAI,WAAU,kDAAkD,gBAAM,OAAA,CAAO;AAAA,IAAA,GAChF;AAAA,IAED,MAAM,YACLD,gCAAC,OAAA,EAAI,WAAU,sCAAqC,UAAA;AAAA,MAAA;AAAA,MACbC,+BAAC,kBAAe,MAAA,CAAc;AAAA,IAAA,GACrE;AAAA,IAEFD,2BAAAA,KAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,MAAAA,gCAAC,OAAA,EACC,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACL,GAAI,MAAM,QAAQ,UAAU,EAAE,SAAS,MAAM,QAAQ,YAAY,CAAA;AAAA,UAAC;AAAA,QAAA;AAAA,WAEnE,WAAM,QAAQ,aAAd,mBAAwB,UAAQ,yCAAY,QAAQ,OAAO,gBAC3DA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAAY;AAAA,YAAc,MAAK;AAAA,YAAU,OAAM,WAAM,QAAQ,aAAd,mBAAwB;AAAA,YACtE,WAAU,WAAM,QAAQ,aAAd,mBAAwB;AAAA,YAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAwB,GAE1E;AAAA,qCACC,OAAA,EACC,UAAAA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACL,GAAI,MAAM,SAAS,UAAU,EAAE,SAAS,MAAM,SAAS,YAAY,CAAA;AAAA,QAAC;AAAA,MAAA,EACvE,CACF;AAAA,IAAA,GACF;AAAA,OACE,WAAM,SAAS,YAAf,mBAAwB,UAAQ,yCAAY,QAAQ,OAAO,iBAC3DA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAAY;AAAA,QAAc,MAAK;AAAA,QAAW,OAAM,WAAM,SAAS,YAAf,mBAAwB;AAAA,QACvE,WAAU,WAAM,SAAS,YAAf,mBAAwB;AAAA,QAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAwB,GAE1E;AAEJ;AAEA,SAAS,YAAY,EAAE,OAAO,MAAM,MAAM,UAAU,cAMjD;AACD,QAAM,SAAS,CAAC,SAAQ,yCAAY,QAAQ,OAAO;AACnD,QAAM,YAAY,MAAM;AACxB,MAAI,UAAU,CAAC,UAAW,OAAM,IAAI,MAAM,wCAAwC;AAClF,QAAM,CAAC,SAAS,UAAU,IAAIQ,eAAA;AAC9B,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAA;AAC1BC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,cAAc,CAAC,UAAW;AAC1C,QAAI,SAAS;AACb,eAAW,MAAS;AACpB,aAAS,MAAS;AAClB,eAAW,QAAQ,WAAW,IAAI,EAAE;AAAA,MAClC,CAAC,UAAU;AAAE,YAAI,mBAAmB,KAAK;AAAA,MAAG;AAAA,MAC5C,CAAC,WAAoB;AAAE,YAAI,OAAQ,UAAS,kBAAkB,QAAQ,SAAS,IAAI,MAAM,OAAO,MAAM,CAAC,CAAC;AAAA,MAAG;AAAA,IAAA;AAE7G,WAAO,MAAM;AAAE,eAAS;AAAA,IAAO;AAAA,EACjC,GAAG,CAAC,YAAY,WAAW,MAAM,MAAM,CAAC;AACxC,SACEV,2BAAAA,KAAC,OAAA,EAAI,WAAU,gBACb,UAAA;AAAA,IAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,8DACZ,UAAA;AAAA,MAAA,SAAS,YAAY,iBAAiB;AAAA,MACtC,UAAU,cAAcC,2BAAAA,IAAC,KAAA,EAAE,WAAU,8CAA6C,MAAM,WAAW,aAAa,OAAO,IAAI,GAAG,UAAQ,MAAC,UAAA,qBAAA,CAAkB;AAAA,IAAA,GAC5J;AAAA,mCACC,OAAA,EAAI,WAAU,iFACZ,UAAA,uCAAS,QAAA,EAAK,MAAK,SAAQ,WAAU,oBAAoB,UAAA,MAAM,QAAA,CAAQ,IACpE,UAAU,YAAY,SAAYA,2BAAAA,IAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,mBAAA,CAAgB,IAC1FA,2BAAAA,IAAC,UAAA,EAAS,MAAM,QAAQ,WAAW,IAAK,GAAI,WAAW,EAAE,SAAA,IAAa,IAAK,GACjF;AAAA,IACC,UAAUA,2BAAAA,IAAC,KAAA,EAAE,WAAU,sCAAqC,UAAA,0CAAA,CAAuC;AAAA,EAAA,GACtG;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGG;AACD,SACED,2BAAAA,KAAAQ,qBAAA,EACE,UAAA;AAAA,IAAAP,2BAAAA,IAAC,OAAA,EAAI,WAAU,sCAAsC,UAAA,OAAM;AAAA,IAC3DA,2BAAAA,IAAC,OAAA,EAAI,WAAU,eACZ,UAAA,mCAAS,IAAI,CAAC,GAAG,MAChBD,2BAAAA,KAAC,OAAA,EAAY,WAAU,qBACrB,UAAA;AAAA,MAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,wCAAwC,UAAA;AAAA,QAAA,EAAE;AAAA,QAAK;AAAA,MAAA,GAAC;AAAA,MAAO;AAAA,MAAE,EAAE;AAAA,IAAA,EAAA,GADnE,CAEV,GACD,CACH;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,SAAS,EAAE,MAAM,YAAiD;AACzE,MAAI,WAAW,QAAQ,GAAG;AACxB,UAAM,SAAS,aAAa,IAAI;AAChC,QAAI,WAAW,KAAM,QAAOC,2BAAAA,IAACU,SAAAA,UAAA,EAAS,MAAM,QAAQ;AAAA,EACtD;AACA,SAAOV,2BAAAA,IAAC,OAAA,EAAI,WAAU,iCAAiC,UAAA,MAAK;AAC9D;AAEA,SAAS,aAAa,MAA8B;AAClD,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,WAAW,MAAwB;AAC1C,SAAO,CAAC,CAAC,SAAS,KAAK,SAAS,MAAM,KAAK,KAAK,SAAS,YAAY;AACvE;AAEA,SAAS,cAAc,QAAgB,OAA0B;;AAC/D,SAAO;AAAA,IACL,MAAM,QAAQ;AAAA,IACd,MAAM,QAAQ;AAAA,KACd,WAAM,QAAQ,aAAd,mBAAwB;AAAA,KACxB,WAAM,SAAS,YAAf,mBAAwB;AAAA,IACxB,MAAM;AAAA,EAAA,EACN,KAAK,CAAC,UAAU,CAAC,CAAC,SAAS,MAAM,YAAA,EAAc,SAAS,MAAM,CAAC;AACnE;AAEA,SAAS,YAAY,OAAuB;AAC1C,MAAI,QAAQ,EAAG,QAAO;AACtB,MAAI,QAAQ,KAAM,QAAO,GAAG,KAAK;AACjC,MAAI,QAAQ,OAAO,KAAM,QAAO,IAAI,QAAQ,MAAM,QAAQ,CAAC,CAAC;AAC5D,SAAO,IAAI,QAAQ,OAAO,MAAM,QAAQ,CAAC,CAAC;AAC5C;AAEA,SAAS,YAAY,QAAwB;AAC3C,MAAI,UAAU,IAAK,QAAO;AAC1B,MAAI,UAAU,IAAK,QAAO;AAC1B,MAAI,UAAU,IAAK,QAAO;AAC1B,MAAI,UAAU,IAAK,QAAO;AAC1B,SAAO;AACT;;;"}