@har-analyzer/components 0.0.20 → 0.0.21

package/dist/har-entries-viewer.js

@@ -1,671 +1,312 @@
-import { jsx as C, jsxs as q, Fragment as j } from "react/jsx-runtime";
-import { colorBorderDividerDefault as B, borderWidthField as K, borderRadiusContainer as Y } from "@cloudscape-design/design-tokens";
-import { useMemo as P, useRef as O, useEffect as H, useCallback as G, useState as z } from "react";
-import N from "@cloudscape-design/components/button";
-import V from "@cloudscape-design/components/box";
-import { L as X } from "./chunks/index.js";
-import { D as $, V as Z } from "./chunks/index2.js";
-import { d as S } from "./chunks/har.js";
-import './assets/har-entries-viewer.css';function J(E) {
-  const { onClose: e } = E;
-  return /* @__PURE__ */ C(
-    "div",
+import { jsx as r, jsxs as T } from "react/jsx-runtime";
+import { useMemo as $, useState as H, useEffect as v } from "react";
+import j from "@cloudscape-design/board-components/board";
+import G from "@cloudscape-design/board-components/board-item";
+import Y from "@cloudscape-design/components/button";
+import { H as W } from "./chunks/horizontal-padding.js";
+import { V as K } from "./chunks/vertical-gap.js";
+import { H as q, L as J, a as Q, b as X } from "./chunks/index.js";
+import Z from "./view-har-entry.js";
+import { D as ee, e as N, f as A } from "./chunks/har.js";
+import ne from "@cloudscape-design/components/segmented-control";
+import { c as O } from "./chunks/index2.js";
+import { o as V } from "./chunks/common.js";
+import te from "@cloudscape-design/components/multiselect";
+import "@cloudscape-design/components/header";
+import "@cloudscape-design/components/space-between";
+import "./chunks/content-type.js";
+import re from "@cloudscape-design/components/token-group";
+const oe = {
+  dragHandleAriaLabel: "Drag handle",
+  dragHandleAriaDescription: "Use Space or Enter to activate drag, arrow keys to move, Space or Enter to submit, or Escape to discard. Be sure to temporarily disable any screen reader navigation feature that may interfere with the functionality of the arrow keys.",
+  resizeHandleAriaLabel: "Resize handle",
+  resizeHandleAriaDescription: "Use Space or Enter to activate resize, arrow keys to move, Space or Enter to submit, or Escape to discard. Be sure to temporarily disable any screen reader navigation feature that may interfere with the functionality of the arrow keys."
+};
+function y(e, n, t) {
+  const o = n.length > 0 ? `Conflicts with ${n.map(({ data: { componentType: f, instanceId: s } }) => `Component type: ${f}, Instance ID: ${s}`).join(", ")}.` : "", d = t.length > 0 ? `Disturbed ${t.length} items.` : "";
+  return [e, o, d].filter(Boolean).join(" ");
+}
+const ie = {
+  liveAnnouncementDndStarted: (e) => e === "resize" ? "Resizing" : "Dragging",
+  liveAnnouncementDndItemReordered: (e) => {
+    const n = `column ${e.placement.x + 1}`, t = `row ${e.placement.y + 1}`;
+    return y(
+      `Item moved to ${e.direction === "horizontal" ? n : t}.`,
+      e.conflicts,
+      e.disturbed
+    );
+  },
+  liveAnnouncementDndItemResized: (e) => {
+    const n = e.isMinimalColumnsReached ? " (minimal)" : "", t = e.isMinimalRowsReached ? " (minimal)" : "", o = e.direction === "horizontal" ? `columns ${e.placement.width}${n}` : `rows ${e.placement.height}${t}`;
+    return y(`Item resized to ${o}.`, e.conflicts, e.disturbed);
+  },
+  liveAnnouncementDndItemInserted: (e) => {
+    const n = `column ${e.placement.x + 1}`, t = `row ${e.placement.y + 1}`;
+    return y(`Item inserted to ${n}, ${t}.`, e.conflicts, e.disturbed);
+  },
+  liveAnnouncementDndCommitted: (e) => `${e} committed`,
+  liveAnnouncementDndDiscarded: (e) => `${e} discarded`,
+  liveAnnouncementItemRemoved: (e) => y(`Removed item ${e.item.id}.`, [], e.disturbed),
+  navigationAriaLabel: "Board navigation",
+  navigationAriaDescription: "Click on non-empty item to move focus over",
+  navigationItemAriaLabel: (e) => e ? e.id : "Empty"
+};
+function se(e) {
+  const {
+    components: n,
+    definitions: t,
+    onDefinitionsChange: o,
+    empty: d
+  } = e, f = t.map((s, a) => ({
+    ...s,
+    id: String(a)
+  }));
+  return /* @__PURE__ */ r(
+    j,
     {
-      style: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        zIndex: 1
+      i18nStrings: ie,
+      items: f,
+      renderItem: ({ data: s }) => {
+        const { componentType: a, instanceId: m } = s;
+        let p, E, h;
+        const c = n[a];
+        if (typeof c == "function") {
+          const i = c(m);
+          p = i.content, E = i.header, h = i.onRemove;
+        } else
+          p = c?.content, E = c?.header, h = c?.onRemove;
+        return /* @__PURE__ */ r(
+          G,
+          {
+            disableContentPaddings: !0,
+            i18nStrings: oe,
+            header: E,
+            settings: h && /* @__PURE__ */ r(Y, { variant: "icon", iconName: "close", onClick: h }),
+            children: p
+          }
+        );
       },
-      children: /* @__PURE__ */ C(
-        N,
-        {
-          variant: "icon",
-          iconName: "close",
-          onClick: e
-        }
-      )
+      onItemsChange: ({ detail: { items: s } }) => {
+        o(s);
+      },
+      empty: d
     }
   );
 }
-function Q({ children: E }) {
-  return /* @__PURE__ */ C(V, { padding: "m", children: E });
+function ae(e) {
+  return e.filter((n) => n !== void 0);
 }
-class D {
-  constructor(e, t) {
-    this.layouts = /* @__PURE__ */ new Map(), this.editable = !1, this.layoutChangeCallback = () => {
-    }, this.selectionChangeCallback = () => {
-    }, this.selection = /* @__PURE__ */ new Set(), this.dragPointerId = 0, this.dragStartTime = 0, this.dragStartX = 0, this.dragStartY = 0, this.dragEndX = 0, this.dragEndY = 0, this.dragging = !1, this.preventClick = !1, this.renderRequested = !1, this.layoutFlag = !0, this.selectionFlag = !0, this.metaFlag = !0, this.manipulationCache = /* @__PURE__ */ new WeakMap(), this.fn = this.constructor, this._handleMouseDown = this.handleMouseDown.bind(this), this._handleMouseMove = this.handleMouseMove.bind(this), this._handleMouseUp = this.handleMouseUp.bind(this), this._handlePointerDown = this.handlePointerDown.bind(this), this._handlePointerMove = this.handlePointerMove.bind(this), this._handlePointerUp = this.handlePointerUp.bind(this), this._handleClick = this.handleClick.bind(this), this._handleKeyUp = this.handleKeyUp.bind(this), this.container = e, this.containerWidth = e.offsetWidth, this.breakpoints = this.fn.compileBreakpoints(t), this.resizeObserver = new ResizeObserver(() => this.handleResize()), this.resizeObserver.observe(this.container), this.addEventListeners();
-  }
-  setConfig(e) {
-    this.breakpoints = this.fn.compileBreakpoints(e);
-    for (const [t, n] of this.layouts) {
-      const s = this.getBreakpoint(t);
-      this.fn.repairLayout(n, s.columns) !== n && (this.layouts.set(t, this.fn.repairLayout(n, s.columns)), this.layoutChangeCallback(n, s.name));
-    }
-    this.layoutFlag = !0, this.selectionFlag = !0, this.metaFlag = !0, this.requestRender();
-  }
-  setLayout(e, t) {
-    const n = this.getBreakpoint(t), s = this.layouts.get(n.name);
-    if (e !== s) {
-      this.layouts.set(n.name, this.fn.repairLayout(e, n.columns)), this.layoutChangeCallback(e, n.name);
-      for (const a of this.breakpoints)
-        this.layouts.has(a.name) || (this.layouts.set(a.name, this.fn.repairLayout(e, a.columns)), this.layoutChangeCallback(e, a.name));
-      this.layoutFlag = !0, this.requestRender();
-    }
-  }
-  setEditable(e) {
-    this.editable = e, this.selectionFlag = !0, this.metaFlag = !0, this.requestRender();
-  }
-  onLayoutChange(e) {
-    this.layoutChangeCallback = e;
-  }
-  onSelectionChange(e) {
-    this.selectionChangeCallback = e;
-  }
-  setSelection(e) {
-    ee(e, this.selection) || (this.selection = e, this.selectionChangeCallback(this.selection), this.selectionFlag = !0, this.requestRender());
-  }
-  toggleSelection(e, t = !1) {
-    this.selection.has(e) ? this.selection.delete(e) : (t && this.selection.clear(), this.selection.add(e)), this.selectionChangeCallback(this.selection), this.selectionFlag = !0, this.requestRender();
-  }
-  clearSelection() {
-    this.selection.size > 0 && (this.selection.clear(), this.selectionChangeCallback(this.selection), this.selectionFlag = !0, this.requestRender());
-  }
-  getBreakpoint(e) {
-    const t = this.breakpoints;
-    if (e) {
-      const n = t.find((s) => s.name === e);
-      if (n)
-        return n;
-    }
-    return t.find((n) => n.maxWidth >= this.containerWidth);
-  }
-  //
-  requestRender() {
-    this.renderRequested || (this.renderRequested = !0, requestAnimationFrame(() => this.render()));
-  }
-  render() {
-    this.renderRequested = !1;
-    const e = this.getBreakpoint(), t = this.getNextLayout();
-    (this.layoutFlag || t !== this.lastLayoutToRender) && (this.fn.renderLayout(this.container, t, e), this.layoutFlag = !1, this.lastLayoutToRender = t), this.selectionFlag && (this.renderSelection(), this.selectionFlag = !1), this.metaFlag && (this.renderMeta(), this.metaFlag = !1);
-  }
-  renderSelection() {
-    const e = this.container.children;
-    for (let t = 0, n = e.length; t < n; ++t) {
-      const s = e[t];
-      s instanceof HTMLElement && s.classList.toggle("-selected", this.selection.has(s.dataset.key));
-    }
-  }
-  renderMeta() {
-    const { container: e, editable: t, dragging: n, resizeHandle: s } = this;
-    e.classList.toggle("-editable", t), e.classList.toggle("-moving", n && !s), e.classList.toggle("-resizing", n && !!s);
-    const a = e.ownerDocument.documentElement;
-    a.classList.toggle("_hide-selection", n), a.classList.toggle("_force-cursor", !!s);
-    const g = this.fn.getResizeCursor(s);
-    a.style.getPropertyValue("--force-cursor") !== g && a.style.setProperty("--force-cursor", g);
-  }
-  //
-  getNextLayout() {
-    const e = this.getBreakpoint(), t = this.layouts.get(e.name);
-    if (!t)
-      return [];
-    if (!this.dragging)
-      return t;
-    const n = this.dragEndX - this.dragStartX, s = this.dragEndY - this.dragStartY, g = this.fn.getColumnWidth(this.containerWidth, e.columns, e.columnGap) + e.columnGap, u = e.rowHeight + e.rowGap, f = R(n / g), p = R(s / u);
-    if (f === 0 && p === 0)
-      return t;
-    let i = this.manipulationCache.get(t);
-    i || (i = /* @__PURE__ */ new Map(), this.manipulationCache.set(t, i));
-    const l = `${Array.from(this.selection).join(",")}@${f},${p}@${this.resizeHandle}`, o = i.get(l);
-    if (o)
-      return o;
-    const r = this.resizeHandle ? this.fn.resizeItems(t, e.columns, this.selection, f, p, this.resizeHandle) : this.fn.moveItems(t, e.columns, this.selection, f, p);
-    return i.set(l, r), r;
-  }
-  //
-  handleResize() {
-    this.containerWidth = this.container.offsetWidth, this.layoutFlag = !0, this.requestRender();
-  }
-  handleMouseDown(e) {
-    if (this.editable === !1 || e.pointerType !== "mouse" || e.button !== 0)
-      return;
-    this.dragStartTime = Date.now(), this.dragStartX = this.dragEndX = e.pageX, this.dragStartY = this.dragEndY = e.pageY;
-    const t = this.getTargetElement(e);
-    t && (this.resizeHandle = this.checkResizeHandle(t, e), this.dragKey = t.dataset.key);
-  }
-  handleMouseMove(e) {
-    if (this.editable !== !1 && e.pointerType === "mouse") {
-      if (this.dragEndX = e.pageX, this.dragEndY = e.pageY, this.metaFlag = !0, this.requestRender(), !this.dragKey) {
-        const t = this.getTargetElement(e);
-        this.resizeHandle = t ? this.checkResizeHandle(t, e) : void 0;
-      }
-      !this.dragging && this.dragKey && (T(this.dragEndX - this.dragStartX) > this.fn.DRAG_THRESHOLD || T(this.dragEndY - this.dragStartY) > this.fn.DRAG_THRESHOLD) && (this.dragging = !0, (!this.selection.has(this.dragKey) || this.resizeHandle) && this.setSelection(new Set(this.dragKey)));
-    }
-  }
-  handleMouseUp(e) {
-    this.editable !== !1 && (e.pointerType !== "mouse" || e.button !== 0 || (this.setLayout(this.getNextLayout()), this.resetDrag()));
-  }
-  handlePointerDown(e) {
-    if (this.editable === !1 || e.pointerType === "mouse" || this.dragPointerId)
-      return;
-    this.dragPointerId = e.pointerId, this.dragStartTime = Date.now(), this.dragStartX = this.dragEndX = e.pageX, this.dragStartY = this.dragEndY = e.pageY;
-    const t = this.getTargetElement(e);
-    t?.dataset.key && this.selection.has(t.dataset.key) && (this.dragging = !0, this.resizeHandle = this.checkResizeHandle(t, e), this.requestRender());
-  }
-  handlePointerMove(e) {
-    this.editable !== !1 && e.pointerType !== "mouse" && e.pointerId === this.dragPointerId && (this.dragEndX = e.pageX, this.dragEndY = e.pageY, this.metaFlag = !0, this.requestRender());
-  }
-  handlePointerUp(e) {
-    if (this.editable !== !1 && e.pointerType !== "mouse" && e.pointerId === this.dragPointerId) {
-      if (this.dragStartTime > Date.now() - this.fn.TAP_DELAY && T(this.dragEndX - this.dragStartX) < this.fn.TAP_THRESHOLD && T(this.dragEndY - this.dragStartY) < this.fn.TAP_THRESHOLD) {
-        const t = this.getTargetElement(e);
-        t?.dataset.key ? this.toggleSelection(t.dataset.key, !0) : this.clearSelection();
-      } else
-        this.setLayout(this.getNextLayout());
-      this.resetDrag();
-    }
-  }
-  handleClick(e) {
-    if (this.editable !== !1)
-      if (this.preventClick)
-        this.preventClick = !1, e.preventDefault(), e.stopImmediatePropagation();
-      else {
-        !e.ctrlKey && !e.metaKey && this.clearSelection();
-        const t = this.getTargetElement(e);
-        t?.dataset.key && this.toggleSelection(t.dataset.key);
-      }
-  }
-  handleKeyUp(e) {
-    if (this.editable !== !1)
-      switch (e.key) {
-        case "Escape":
-          this.layoutFlag = !0, this.clearSelection(), this.resetDrag();
-          break;
-      }
-  }
-  resetDrag() {
-    if (this.dragging) {
-      try {
-        const e = (document.defaultView || window).getSelection();
-        e && e.type !== "Caret" && e.removeAllRanges();
-      } catch {
-      }
-      this.preventClick = !0;
-    }
-    this.dragPointerId = 0, this.dragging = !1, this.dragKey = void 0, this.resizeHandle = void 0, this.metaFlag = !0, this.requestRender();
-  }
-  getTargetElement(e) {
-    if (e.target instanceof Element) {
-      const t = e.target.closest(".fast-grid-layout > .item");
-      if (t) {
-        if (t.classList.contains("-static"))
-          return;
-        if (t.classList.contains("-selected") || !e.target.closest(".fast-grid-layout .content, button, input, textarea, select"))
-          return t;
-      }
-    }
-  }
-  checkResizeHandle(e, t) {
-    const n = this.fn.checkResizeHandle(e.getBoundingClientRect(), t.clientX, t.clientY, this.fn.RESIZE_THRESHOLD);
-    switch (n) {
-      case "n":
-      case "ne":
-      case "nw":
-        return;
-      default:
-        return n;
-    }
-  }
-  //
-  disconnect() {
-    this.selection = /* @__PURE__ */ new Set(), this.resetDrag(), this.renderSelection(), this.renderMeta(), this.resizeObserver.unobserve(this.container), this.removeEventListeners();
-  }
-  addEventListeners() {
-    this.container.addEventListener("pointerdown", this._handleMouseDown), window.addEventListener("pointermove", this._handleMouseMove, U), window.addEventListener("pointerup", this._handleMouseUp), window.addEventListener("pointercancel", this._handleMouseUp), this.container.addEventListener("pointerdown", this._handlePointerDown), window.addEventListener("pointermove", this._handlePointerMove, U), window.addEventListener("pointerup", this._handlePointerUp), window.addEventListener("pointercancel", this._handlePointerUp), window.addEventListener("click", this._handleClick, W), window.addEventListener("keyup", this._handleKeyUp);
-  }
-  removeEventListeners() {
-    this.container.removeEventListener("pointerdown", this._handleMouseDown), window.removeEventListener("pointermove", this._handleMouseMove), window.removeEventListener("pointerup", this._handleMouseUp), window.removeEventListener("pointercancel", this._handleMouseUp), this.container.removeEventListener("pointerdown", this._handlePointerDown), window.removeEventListener("pointermove", this._handlePointerMove), window.removeEventListener("pointerup", this._handlePointerUp), window.removeEventListener("pointercancel", this._handlePointerUp), window.removeEventListener("click", this._handleClick, W), window.removeEventListener("keyup", this._handleKeyUp);
-  }
-  static compileBreakpoints(e) {
-    var t, n, s, a, g, u, f;
-    const l = Object.entries((t = e.breakpoints) !== null && t !== void 0 ? t : {}).map(([o, r]) => {
-      var m, d, h, c, y, v, k, w, b, _, M, A;
-      return {
-        name: o,
-        maxWidth: r.maxWidth,
-        columns: (d = (m = r.columns) !== null && m !== void 0 ? m : e.columns) !== null && d !== void 0 ? d : 12,
-        rowHeight: (c = (h = r.rowHeight) !== null && h !== void 0 ? h : e.rowHeight) !== null && c !== void 0 ? c : 30,
-        rowGap: (w = (k = (v = (y = r.rowGap) !== null && y !== void 0 ? y : r.gap) !== null && v !== void 0 ? v : e.rowGap) !== null && k !== void 0 ? k : e.gap) !== null && w !== void 0 ? w : 0,
-        columnGap: (A = (M = (_ = (b = r.columnGap) !== null && b !== void 0 ? b : r.gap) !== null && _ !== void 0 ? _ : e.columnGap) !== null && M !== void 0 ? M : e.gap) !== null && A !== void 0 ? A : 0
-      };
-    }).sort((o, r) => o.maxWidth - r.maxWidth);
-    return l.push({
-      name: "default",
-      maxWidth: 1 / 0,
-      columns: (n = e.columns) !== null && n !== void 0 ? n : 12,
-      rowHeight: (s = e.rowHeight) !== null && s !== void 0 ? s : 30,
-      rowGap: (g = (a = e.rowGap) !== null && a !== void 0 ? a : e.gap) !== null && g !== void 0 ? g : 0,
-      columnGap: (f = (u = e.columnGap) !== null && u !== void 0 ? u : e.gap) !== null && f !== void 0 ? f : 0
-    }), l;
-  }
-  static renderLayout(e, t, n) {
-    const { columns: s, columnGap: a, rowGap: g, rowHeight: u } = n, f = e.offsetWidth, i = this.getColumnWidth(f, s, a) + a, l = u + g;
-    e.classList.add("fast-grid-layout");
-    const o = /* @__PURE__ */ new Map();
-    for (let d = 0, h = t.length; d < h; ++d) {
-      const c = t[d];
-      o.set(c.i, c);
-    }
-    let r = 0;
-    for (let d = 0, h = e.children.length; d < h; ++d) {
-      const c = e.children[d];
-      if (!(c instanceof HTMLElement))
-        continue;
-      c.dataset.key || (c.dataset.key = d.toString());
-      const y = c.dataset.key, v = o.get(y);
-      if (!v)
-        continue;
-      c.classList.add("item"), c.classList.toggle("-dynamic", !v.static), c.classList.toggle("-static", !!v.static);
-      const k = v.y + v.h;
-      k > r && (r = k);
-      const w = R(v.w * i - a) + "px", b = R(v.h * l - g) + "px", _ = "translate(" + R(v.x * i) + "px, " + R(v.y * l) + "px)";
-      c.style.width !== w && (c.style.width = w), c.style.height !== b && (c.style.height = b), c.style.transform !== _ && (c.style.transform = _);
-    }
-    const m = R(r * l - g) + "px";
-    e.style.height !== m && (e.style.height = m);
-  }
-  static getColumnWidth(e, t, n) {
-    return (e - (t - 1) * n) / t;
-  }
-  static checkResizeHandle(e, t, n, s) {
-    const a = n - e.top < s, g = e.right - t < s, u = e.bottom - n < s, f = t - e.left < s;
-    if (u)
-      return g ? "se" : f ? "sw" : "s";
-    if (g)
-      return a ? "ne" : "e";
-    if (f)
-      return a ? "nw" : "w";
-    if (a)
-      return "n";
-  }
-  static getResizeCursor(e) {
-    switch (e) {
-      case "n":
-      case "s":
-        return "ns-resize";
-      case "e":
-      case "w":
-        return "ew-resize";
-      case "ne":
-      case "sw":
-        return "nesw-resize";
-      case "se":
-      case "nw":
-        return "nwse-resize";
-      default:
-        return "";
-    }
-  }
-  /**
-   * Moves the specified items (in grid units).
-   * Returns a new layout if modified.
-   */
-  static moveItems(e, t, n, s, a) {
-    if (s === 0 && a === 0 || n.size === 0)
-      return e;
-    let g = e;
-    for (let u = 0, f = e.length; u < f; ++u) {
-      const p = e[u];
-      if (n.has(p.i)) {
-        const i = p.x + s, l = p.y + a;
-        (p.x !== i || p.y !== l) && (g === e && (g = e.slice(0)), g[u] = Object.assign(Object.assign({}, p), { x: i, y: l }));
-      }
-    }
-    return g === e ? e : this.repairLayout(g, t, n);
-  }
-  /**
-   * Resizes the specified item (in grid units).
-   * Returns a new layout if modified.
-   */
-  static resizeItems(e, t, n, s, a, g) {
-    if (s === 0 && a === 0 || n.size === 0)
-      return e;
-    let u = e;
-    for (let f = 0, p = e.length; f < p; ++f) {
-      const i = e[f];
-      if (n.has(i.i)) {
-        const { maxW: l = t, maxH: o = 1 / 0 } = i;
-        let { x: r, y: m, w: d, h } = i;
-        const c = r + d, y = m + h, v = t - r;
-        switch (g) {
-          case "n":
-            h = L(h - a, 1, o), m = L(m + a, 0, y - 1);
-            break;
-          case "e":
-            d = L(d + s, 1, x(l, v));
-            break;
-          case "s":
-            h = L(h + a, 1, o);
-            break;
-          case "w":
-            d = L(d - s, 1, x(l, c)), r = L(r + s, 0, c - 1);
-            break;
-          case "ne":
-            d = L(d + s, 1, x(l, v)), h = L(h - a, 1, o), m = L(m + a, 0, y - 1);
-            break;
-          case "se":
-            d = L(d + s, 1, x(l, v)), h = L(h + a, 1, o);
-            break;
-          case "sw":
-            d = L(d - s, 1, x(l, c)), h = L(h + a, 1, o), r = L(r + s, 0, c - 1);
-            break;
-          case "nw":
-            d = L(d - s, 1, x(l, c)), h = L(h - a, 1, o), r = L(r + s, 0, c - 1), m = L(m + a, 0, y - 1);
-            break;
-        }
-        (i.x !== r || i.y !== m || i.w !== d || i.h !== h) && (u === e && (u = e.slice(0)), u[f] = Object.assign(Object.assign({}, i), { x: r, y: m, w: d, h }));
+function ce({ children: e }) {
+  return /* @__PURE__ */ r("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "1rem"
+  }, children: e });
+}
+const L = "har-entries-viewer", {
+  useUserPreferences: z,
+  Provider: de
+} = O(`${L}.isCompareMode`, !1), le = V(ee)[0], {
+  useUserPreferences: U,
+  Provider: me
+} = O(`${L}.harEntryHeaders`, [le]), M = "Single", S = "Compare";
+function ue() {
+  const [e, n] = z();
+  return /* @__PURE__ */ r(
+    ne,
+    {
+      options: [M, S].map((t) => ({ text: t, id: t })),
+      selectedId: e ? S : M,
+      onChange: ({ detail: t }) => {
+        const o = t.selectedId === S;
+        n(o);
       }
     }
-    return u === e ? e : this.repairLayout(u, t, n);
-  }
-  /**
-   * Fixes overlaps, gaps, and layout out of bounds.
-   * Returns a new layout if there was anything to repair.
-   */
-  static repairLayout(e, t, n) {
-    const s = e.slice(0).sort((i, l) => {
-      if (i.y < l.y)
-        return -1;
-      if (i.y > l.y)
-        return 1;
-      if (n) {
-        if (n.has(i.i)) {
-          if (!n.has(l.i))
-            return -1;
-        } else if (n.has(l.i))
-          return 1;
-      }
-      return i.x < l.x ? -1 : i.x > l.x ? 1 : 0;
-    }), a = s.filter((i) => i.static), g = a.length;
-    let u = !1, f = 0;
-    const p = Array(t);
-    for (let i = 0; i < t; ++i)
-      p[i] = 0;
-    for (let i = 0, l = s.length; i < l; i++) {
-      let o = this.repairItem(s[i], t);
-      const r = o.x + o.w;
-      if (o.static)
-        ++f;
-      else {
-        let d = 1 / 0;
-        for (let c = o.x; c < r; ++c) {
-          const y = o.y - p[c];
-          y < d && (d = y);
-        }
-        let h = o.y - d;
-        for (let c = f; c < g; ++c) {
-          const y = a[c];
-          if (y.y >= h + o.h)
-            break;
-          //staticItem.y < yNext + item.h && // This is implied above.
-          y.y + y.h > h && y.x < o.x + o.w && y.x + y.w > o.x && (h = y.y + y.h, c = f);
-        }
-        o.y !== h && (o = Object.assign(Object.assign({}, o), { y: h })), o !== s[i] && (s[i] = o, u = !0);
+  );
+}
+function fe(e) {
+  const { harEntries: n } = e, t = $(() => {
+    const a = N(n);
+    return V(a).map((m) => ({
+      label: m,
+      value: m
+    }));
+  }, [n]), [o, d] = U(), f = t.filter(({ value: a }) => o.includes(a)), s = (a) => {
+    const m = a.map(({ value: p }) => p);
+    d(m);
+  };
+  return /* @__PURE__ */ r(
+    te,
+    {
+      inlineTokens: !0,
+      filteringType: "auto",
+      placeholder: "Pick HAR entry headers",
+      options: t,
+      selectedOptions: f,
+      onChange: ({ detail: a }) => {
+        s(a.selectedOptions);
       }
-      const m = o.y + o.h;
-      for (let d = o.x; d < r; ++d)
-        p[d] < m && (p[d] = m);
     }
-    return u ? s : e;
-  }
-  /**
-   * Repair bounds of the given item to fit the given config.
-   * Returns a new item if there was anything to repair.
-   */
-  static repairItem(e, t) {
-    const { minW: n = 1, maxW: s = t, minH: a = 1, maxH: g = 1 / 0 } = e;
-    let { x: u, y: f, w: p, h: i } = e;
-    return p = L(p, n, x(s, t)), i = L(i, a, g), u = L(u, 0, t - p), f < 0 && (f = 0), e.x === u && e.y === f && e.w === p && e.h === i ? e : Object.assign(Object.assign({}, e), { x: u, y: f, w: p, h: i });
-  }
+  );
 }
-D.RESIZE_THRESHOLD = 10;
-D.TAP_DELAY = 250;
-D.TAP_THRESHOLD = 10;
-D.DRAG_THRESHOLD = 7;
-function ee(E, e) {
-  if (E === e)
-    return !0;
-  if (E.size !== e.size)
-    return !1;
-  for (const t of E)
-    if (!e.has(t))
-      return !1;
-  return !0;
+function pe(e) {
+  const { harEntries: n, additionalActions: t } = e;
+  return /* @__PURE__ */ T(ce, { children: [
+    /* @__PURE__ */ T(q, { children: [
+      /* @__PURE__ */ r(ue, {}),
+      /* @__PURE__ */ r(fe, { harEntries: n })
+    ] }),
+    t
+  ] });
 }
-function L(E, e, t) {
-  return E < e ? e : E > t ? t : E;
+function he({ children: e }) {
+  return /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(me, { children: /* @__PURE__ */ r(J, { children: e }) }) });
 }
-const T = Math.abs, x = Math.min, R = Math.round, W = { capture: !0 }, U = { passive: !0 };
-function te(E) {
-  const {
-    layout: e,
-    onChange: t,
-    totalColumns: n = 12,
-    gap: s = 0,
-    rowHeight: a = 120,
-    children: g
-  } = E, u = P(() => ({
-    columns: n,
-    gap: s,
-    rowHeight: a
-  }), [n, s, a]), f = O(null), p = O(null);
-  return H(() => {
-    if (!f.current)
-      return;
-    const i = new D(f.current, u);
-    return i.setEditable(!0), i.setLayout(e), i.onLayoutChange(t), p.current = i, () => {
-      i.disconnect();
-    };
-  }, []), H(() => {
-    p.current?.setConfig(u);
-  }, [u]), H(() => {
-    const i = p.current;
-    i?.onLayoutChange(() => {
-    }), i?.setLayout(e), i?.onLayoutChange(t);
-  }, [e, t]), /* @__PURE__ */ C("div", { ref: f, children: g });
-}
-const ie = 12;
-function ne(E) {
-  const {
-    layoutDefinitions: e,
-    onRender: t,
-    onChange: n,
-    layoutItemStyle: s = {},
-    totalColumns: a = ie,
-    gap: g
-  } = E, u = P(() => e.map((i) => {
-    const { id: l, props: o } = i, r = t(l, o);
-    return /* @__PURE__ */ C(
-      "div",
-      {
-        "data-key": l,
-        style: {
-          overflow: "scroll",
-          ...s
-        },
-        children: r
-      },
-      l
-    );
-  }), [e, s, t]), f = P(() => e.map((i) => {
-    const {
-      id: l,
-      props: o,
-      ...r
-    } = i;
-    return {
-      i: l,
-      ...r
-    };
-  }), [e]), p = G((i) => {
-    const l = i.map((o) => {
-      const {
-        i: r,
-        ...m
-      } = o, d = e.find((h) => h.id === r);
-      if (!d)
-        throw new Error(`No existing cell definition found for layout item with id ${r}`);
-      return {
-        id: r,
-        ...m,
-        props: d.props
-      };
-    });
-    n(l);
-  }, [e, n]);
-  return /* @__PURE__ */ C(
-    te,
+function Ee(e) {
+  const { harEntries: n, harEntry: t } = e, o = $(() => N(n), [n]), [d] = U(), f = d.flatMap((s) => {
+    if (!o[s])
+      return [];
+    const a = o[s](t);
+    return Array.isArray(a) ? a.map((m) => ({
+      label: m,
+      description: s
+    })) : [{
+      label: String(a),
+      description: s
+    }];
+  });
+  return /* @__PURE__ */ r(
+    re,
     {
-      totalColumns: a,
-      gap: g,
-      layout: f,
-      onChange: p,
-      children: u
+      items: f,
+      disableOuterPadding: !0
     }
   );
 }
-const F = "list-har-entries", I = 12, se = [
+const C = {
+  rowSpan: 4,
+  columnSpan: 12
+}, g = "har-entries-viewer", w = "view-har-entry", Ae = [
   {
-    x: 0,
-    y: 0,
-    w: 12,
-    h: 4,
-    id: "0",
-    props: {
-      instanceId: F
+    ...C,
+    data: {
+      componentType: g,
+      instanceId: g
     }
   }
 ];
-function fe(E) {
+function Ie(e) {
   const {
-    harEntries: e,
+    harEntries: n,
     tableTitle: t
-  } = E, [n, s] = z([]), [a, g] = z(se), [u, f] = z($);
-  H(() => {
-    const i = new Set(e.map(S));
-    s((l) => {
-      if (!l.length)
-        return l;
-      const o = l.filter(
-        (r) => i.has(S(r))
+  } = e, [o, d] = H([]), [f, s] = H(Ae), [a, m] = H(), [p] = z();
+  v(() => {
+    !p && o.length > 1 && d([]);
+  }, [p, o.length]), v(() => {
+    const c = new Set(n.map(A));
+    d((i) => {
+      if (!i.length)
+        return i;
+      const u = i.filter(
+        (I) => c.has(A(I))
       );
-      return o.length === l.length ? l : o;
+      return u.length !== i.length ? u : i;
     });
-  }, [e]), H(() => {
-    const i = n.map(S), l = new Set(i);
-    g((o) => {
-      let r = o.filter(({ props: { instanceId: w } }) => l.has(w) || w === F);
-      const m = new Set(r.map(({ props: { instanceId: w } }) => w)), d = i.filter((w) => !m.has(w));
-      if (!d.length)
-        return r;
-      let h = {
-        x: 0,
-        y: 0,
-        w: 6,
-        h: 4
-      };
-      const c = o.at(-1), y = r.at(-1);
-      if (c && (h = {
-        x: c.x,
-        y: c.y,
-        w: c.w,
-        h: c.h
-      }), y && c?.props.instanceId === y.props.instanceId && (h.x = h.x + h.w), o.length === 1 && r.length === 1) {
-        const w = r[0];
-        let b = w.x + w.w, _ = I - b;
-        _ < 1 && (_ = I / 2, b = _, r = [
-          {
-            ...w,
-            x: 0,
-            y: 0,
-            w: _
-          }
-        ]), h = {
-          x: b,
-          y: 0,
-          w: _,
-          h: w.h
-        };
-      }
-      const v = d.map((w) => {
-        h.x >= I && (h.x = 0, h.y += h.h);
-        const b = {
-          w: h.w,
-          h: h.h,
-          x: h.x,
-          y: h.y,
-          props: {
-            instanceId: w
-          }
-        };
-        return h.x = h.x + h.w, b;
-      }), k = [...r, ...v].map((w, b) => ({
-        ...w,
-        id: String(b)
+  }, [n]), v(() => {
+    const c = o.map(A), i = /* @__PURE__ */ new Set([...c, g]);
+    s((u) => {
+      const I = u.map(({ data: { instanceId: l } }) => l), P = new Set(I.filter((l) => i.has(l))), R = c.filter((l) => !P.has(l));
+      if (!R.length && I.length === P.size)
+        return u;
+      const D = u.map((l) => {
+        const { data: { instanceId: x } } = l;
+        if (i.has(x))
+          return l;
+        const _ = R.shift();
+        if (_)
+          return {
+            ...l,
+            data: {
+              componentType: w,
+              instanceId: _
+            }
+          };
+      }), b = D.at(-1), B = b?.rowSpan ?? C.rowSpan, k = b?.columnSpan ?? C.columnSpan, F = R.map((l) => ({
+        rowSpan: B,
+        columnSpan: k,
+        data: {
+          componentType: w,
+          instanceId: l
+        }
       }));
-      return console.warn({ layoutDefinitions: k }), k;
+      return ae([...D, ...F]);
     });
-  }, [n]);
-  const p = G((i, { instanceId: l }) => {
-    if (l === F)
-      return /* @__PURE__ */ C(Q, { children: /* @__PURE__ */ C(
+  }, [o]);
+  const E = (c) => {
+    d(
+      (i) => i.filter((u) => A(u) !== c)
+    );
+  }, h = {
+    [g]: {
+      header: /* @__PURE__ */ r(
         X,
         {
-          title: t,
-          harEntries: e,
-          selectedHAREntries: n,
-          onSelectionChange: s
+          harEntries: n,
+          title: t
         }
-      ) });
-    const o = n.find((r) => S(r) === l);
-    if (o)
-      return /* @__PURE__ */ q(j, { children: [
-        /* @__PURE__ */ C(
-          J,
+      ),
+      content: /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(
+        Q,
+        {
+          harEntries: n,
+          selectedHAREntries: o,
+          onSelectionChange: d,
+          enableMultiSelect: p
+        }
+      ) })
+    },
+    [w]: (c) => {
+      const i = o.find((u) => A(u) === c);
+      return {
+        header: i ? /* @__PURE__ */ r(
+          Ee,
           {
-            onClose: () => {
-              s((r) => r.filter((m) => S(m) !== l));
-            }
+            harEntries: n,
+            harEntry: i
           }
-        ),
-        /* @__PURE__ */ C(
+        ) : void 0,
+        content: i ? /* @__PURE__ */ r(
           Z,
           {
-            harEntry: o,
-            initialSelectedTabId: u,
-            onSelectedTabIdChange: n.length === 1 ? f : void 0
+            harEntry: i,
+            initialSelectedTabId: a,
+            onSelectedTabIdChange: m
           }
-        )
-      ] });
-  }, [n, t, e, u]);
-  return /* @__PURE__ */ C(
-    ne,
+        ) : void 0,
+        onRemove: () => {
+          E(c);
+        }
+      };
+    }
+  };
+  return /* @__PURE__ */ r(
+    se,
     {
-      totalColumns: I,
-      gap: 16,
-      layoutItemStyle: {
-        borderRadius: Y,
-        borderWidth: K,
-        borderColor: B,
-        borderStyle: "solid"
-      },
-      layoutDefinitions: a,
-      onRender: p,
-      onChange: g
+      components: h,
+      definitions: f,
+      onDefinitionsChange: s
     }
   );
 }
+function Le(e) {
+  const { harEntries: n, ...t } = e;
+  return /* @__PURE__ */ r(he, { children: /* @__PURE__ */ T(K, { children: [
+    /* @__PURE__ */ r(pe, { harEntries: n }),
+    /* @__PURE__ */ r(Ie, { harEntries: n, ...t })
+  ] }) });
+}
 export {
-  fe as default
+  Le as default
 };