@har-analyzer/components 0.0.17 → 0.0.19

package/dist/har-entries-viewer.js

@@ -1,169 +1,671 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useState as w, useEffect as T, useCallback as _ } from "react";
-import z from "@cloudscape-design/board-components/board";
-import N from "@cloudscape-design/board-components/board-item";
-import B from "@cloudscape-design/components/button";
-import { V as L, H as O } from "./chunks/index2.js";
-import { L as k } from "./chunks/index.js";
-import { d as g } from "./chunks/har.js";
-const P = {
-  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 p(n, t, r) {
-  const a = t.length > 0 ? `Conflicts with ${t.map((d) => d.id).join(", ")}.` : "", m = r.length > 0 ? `Disturbed ${r.length} items.` : "";
-  return [n, a, m].filter(Boolean).join(" ");
-}
-const M = {
-  liveAnnouncementDndStarted: (n) => n === "resize" ? "Resizing" : "Dragging",
-  liveAnnouncementDndItemReordered: (n) => {
-    const t = `column ${n.placement.x + 1}`, r = `row ${n.placement.y + 1}`;
-    return p(
-      `Item moved to ${n.direction === "horizontal" ? t : r}.`,
-      n.conflicts,
-      n.disturbed
-    );
-  },
-  liveAnnouncementDndItemResized: (n) => {
-    const t = n.isMinimalColumnsReached ? " (minimal)" : "", r = n.isMinimalRowsReached ? " (minimal)" : "", a = n.direction === "horizontal" ? `columns ${n.placement.width}${t}` : `rows ${n.placement.height}${r}`;
-    return p(`Item resized to ${a}.`, n.conflicts, n.disturbed);
-  },
-  liveAnnouncementDndItemInserted: (n) => {
-    const t = `column ${n.placement.x + 1}`, r = `row ${n.placement.y + 1}`;
-    return p(`Item inserted to ${t}, ${r}.`, n.conflicts, n.disturbed);
-  },
-  liveAnnouncementDndCommitted: (n) => `${n} committed`,
-  liveAnnouncementDndDiscarded: (n) => `${n} discarded`,
-  liveAnnouncementItemRemoved: (n) => p(`Removed item ${n.item.id}.`, [], n.disturbed),
-  navigationAriaLabel: "Board navigation",
-  navigationAriaDescription: "Click on non-empty item to move focus over",
-  navigationItemAriaLabel: (n) => n ? n.id : "Empty"
-};
-function V(n) {
-  const {
-    components: t,
-    definitions: r,
-    onDefinitionsChange: a,
-    empty: m
-  } = n;
-  return /* @__PURE__ */ l(
-    z,
+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 z, useRef as O, useEffect as D, useCallback as G, useState as P } 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 H } from "./chunks/har.js";
+import './assets/har-entries-viewer.css';function J(E) {
+  const { onClose: e } = E;
+  return /* @__PURE__ */ C(
+    "div",
     {
-      i18nStrings: M,
-      items: r,
-      renderItem: ({ data: d }) => {
-        const { componentKey: f, instanceId: I } = d;
-        let h, o;
-        const e = t[f];
-        if (typeof e == "function") {
-          const i = e(I);
-          h = i.content, o = i.onRemove;
-        } else
-          h = e?.content, o = e?.onRemove;
-        return /* @__PURE__ */ l(
-          N,
-          {
-            disableContentPaddings: !0,
-            i18nStrings: P,
-            settings: o && /* @__PURE__ */ l(B, { variant: "icon", iconName: "close", onClick: o }),
-            children: h
-          }
-        );
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        zIndex: 1
       },
-      onItemsChange: ({ detail: { items: d } }) => {
-        a(d);
+      children: /* @__PURE__ */ C(
+        N,
+        {
+          variant: "icon",
+          iconName: "close",
+          onClick: e
+        }
+      )
+    }
+  );
+}
+function Q({ children: E }) {
+  return /* @__PURE__ */ C(V, { padding: "m", children: E });
+}
+class T {
+  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 && (I(this.dragEndX - this.dragStartX) > this.fn.DRAG_THRESHOLD || I(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 && I(this.dragEndX - this.dragStartX) < this.fn.TAP_THRESHOLD && I(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, S, 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 = (S = (b = (_ = r.columnGap) !== null && _ !== void 0 ? _ : r.gap) !== null && b !== void 0 ? b : e.columnGap) !== null && S !== void 0 ? S : 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", _ = R(v.h * l - g) + "px", b = "translate(" + R(v.x * i) + "px, " + R(v.y * l) + "px)";
+      c.style.width !== w && (c.style.width = w), c.style.height !== _ && (c.style.height = _), c.style.transform !== b && (c.style.transform = b);
+    }
+    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 }));
+      }
+    }
+    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);
+      }
+      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 });
+  }
+}
+T.RESIZE_THRESHOLD = 10;
+T.TAP_DELAY = 250;
+T.TAP_THRESHOLD = 10;
+T.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 L(E, e, t) {
+  return E < e ? e : E > t ? t : E;
+}
+const I = 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 = z(() => ({
+    columns: n,
+    gap: s,
+    rowHeight: a
+  }), [n, s, a]), f = O(null), p = O(null);
+  return D(() => {
+    if (!f.current)
+      return;
+    const i = new T(f.current, u);
+    return i.setEditable(!0), i.setLayout(e), i.onLayoutChange(t), p.current = i, () => {
+      i.disconnect();
+    };
+  }, []), D(() => {
+    p.current?.setConfig(u);
+  }, [u]), D(() => {
+    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 = z(() => 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
       },
-      empty: m
+      l
+    );
+  }), [e, s, t]), f = z(() => 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,
+    {
+      totalColumns: a,
+      gap: g,
+      layout: f,
+      onChange: p,
+      children: u
     }
   );
 }
-const E = {
-  rowSpan: 4,
-  columnSpan: 12
-}, u = "har-entries-viewer", S = "view-har-entry", x = [
+const F = "list-har-entries", M = 12, se = [
   {
-    ...E,
-    id: u,
-    data: {
-      componentKey: u,
-      instanceId: u
+    x: 0,
+    y: 0,
+    w: 12,
+    h: 4,
+    id: "0",
+    props: {
+      instanceId: F
     }
   }
 ];
-function Q(n) {
+function fe(E) {
   const {
-    harEntries: t,
-    tableTitle: r
-  } = n, [a, m] = w([]), [d, f] = w(x);
-  T(() => {
-    const o = new Set(t.map(g));
-    m((e) => {
-      if (!e.length)
-        return e;
-      const i = e.filter(
-        (c) => o.has(g(c))
+    harEntries: e,
+    tableTitle: t
+  } = E, [n, s] = P([]), [a, g] = P(se), [u, f] = P($);
+  D(() => {
+    const i = new Set(e.map(H));
+    s((l) => {
+      if (!l.length)
+        return l;
+      const o = l.filter(
+        (r) => i.has(H(r))
       );
-      return i.length !== e.length ? i : e;
+      return o.length === l.length ? l : o;
     });
-  }, [t]);
-  const I = _((o) => {
-    m(o);
-    const e = o.map(g), i = new Set(e);
-    f((c) => {
-      const A = c.filter(({ data: { instanceId: s } }) => i.has(s) || s === u), R = new Set(A.map(({ data: { instanceId: s } }) => s)), v = e.filter((s) => !R.has(s));
-      if (!v.length)
-        return A;
-      const y = c.at(-1), D = y?.rowSpan ?? E.rowSpan, b = y?.columnSpan ?? E.columnSpan, $ = v.map((s) => ({
-        rowSpan: D,
-        columnSpan: b,
-        data: {
-          componentKey: S,
-          instanceId: s
-        }
-      }));
-      return [...A, ...$].map((s, C) => {
-        const { data: { instanceId: H } } = s;
-        return {
-          ...s,
-          id: H === u ? u : String(C)
+  }, [e]), D(() => {
+    const i = n.map(H), 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], _ = w.x + w.w;
+        let b = M - _, S = w.x + b;
+        b || (b = M / 2, S = b, r = [
+          {
+            ...w,
+            x: 0,
+            y: 0,
+            w: b
+          }
+        ]), h = {
+          x: S,
+          y: 0,
+          w: b,
+          h: w.h
         };
-      });
+      }
+      const v = d.map((w) => {
+        h.x >= M && (h.x = 0, h.y += h.h);
+        const _ = {
+          w: h.w,
+          h: h.h,
+          x: h.x,
+          y: h.y,
+          props: {
+            instanceId: w
+          }
+        };
+        return h.x = h.x + h.w, _;
+      }), k = [...r, ...v].map((w, _) => ({
+        ...w,
+        id: String(_)
+      }));
+      return console.warn({ layoutDefinitions: k }), k;
     });
-  }, []), h = {
-    [u]: {
-      content: /* @__PURE__ */ l(O, { children: /* @__PURE__ */ l(
-        k,
+  }, [n]);
+  const p = G((i, { instanceId: l }) => {
+    if (l === F)
+      return /* @__PURE__ */ C(Q, { children: /* @__PURE__ */ C(
+        X,
         {
-          title: r,
-          harEntries: t,
-          selectedHAREntries: a,
-          onSelectionChange: I
+          title: t,
+          harEntries: e,
+          selectedHAREntries: n,
+          onSelectionChange: s
         }
-      ) })
-    },
-    [S]: (o) => {
-      const e = a.find((i) => g(i) === o);
-      return {
-        content: e ? /* @__PURE__ */ l(L, { harEntry: e }) : void 0,
-        onRemove: () => {
-          f((i) => i.filter((c) => c.data.instanceId !== o)), m(
-            (i) => i.filter((c) => g(c) !== o)
-          );
-        }
-      };
-    }
-  };
-  return /* @__PURE__ */ l(
-    V,
+      ) });
+    const o = n.find((r) => H(r) === l);
+    if (o)
+      return /* @__PURE__ */ q(j, { children: [
+        /* @__PURE__ */ C(
+          J,
+          {
+            onClose: () => {
+              s((r) => r.filter((m) => H(m) !== l));
+            }
+          }
+        ),
+        /* @__PURE__ */ C(
+          Z,
+          {
+            harEntry: o,
+            initialSelectedTabId: u,
+            onSelectedTabIdChange: n.length === 1 ? f : void 0
+          }
+        )
+      ] });
+  }, [n, t, e, u]);
+  return /* @__PURE__ */ C(
+    ne,
     {
-      components: h,
-      definitions: d,
-      onDefinitionsChange: f
+      totalColumns: M,
+      gap: 16,
+      layoutItemStyle: {
+        borderRadius: Y,
+        borderWidth: K,
+        borderColor: B,
+        borderStyle: "solid"
+      },
+      layoutDefinitions: a,
+      onRender: p,
+      onChange: g
     }
   );
 }
 export {
-  Q as default
+  fe as default
 };