kerfjs 4.4.0 → 4.5.0-beta.1

package/dist/list.js

@@ -1,226 +1,224 @@
-import { ARRAY_SIGNAL_BRAND } from './chunk-MRYM3O3V.js';
-import { moveNode, mount } from './chunk-SRWQKB33.js';
-import './chunk-QIP723L4.js';
-import './chunk-YHH7OUFA.js';
-import './chunk-SUPUPSBE.js';
-import { effect } from './chunk-3APBEVHF.js';
-import './chunk-GY4XV2UV.js';
-import './chunk-VVDJLWMP.js';
+import { ARRAY_SIGNAL_BRAND } from './chunk-ELXVRKY2.js';
+import { captureFocus, restoreFocus, moveNode, mount } from './chunk-V757BT6U.js';
 
-// src/list.ts
-function bindList(parent, source, options) {
-  const { key, render, tag = "div", virtualize, before } = options;
-  const overscan = virtualize?.overscan ?? 3;
-  const minRows = virtualize?.minRows;
-  const contentVisibility = virtualize?.mode === "content-visibility";
-  const endAnchor = () => {
-    if (virtualize !== void 0 || before === void 0) return null;
-    return (typeof before === "function" ? before() : before) ?? null;
-  };
+
+
+import { effect } from './chunk-Y2FOYPBV.js';
+
+
+
+// src/list-row-controller.ts
+var NOOP = () => {
+};
+function createListRowController(options) {
+  const { container, key, render, tag, endAnchor } = options;
   const rows = /* @__PURE__ */ new Map();
   const order = [];
-  let items = [];
-  let disposed = false;
-  let rafPending = false;
-  let firstRender = true;
-  const patchSource = source;
-  const granularEligible = virtualize === void 0 && patchSource[ARRAY_SIGNAL_BRAND] === true;
-  const container = virtualize === void 0 ? parent : document.createElement("div");
-  if (virtualize !== void 0) {
-    if (virtualize.containerClass !== void 0) container.className = virtualize.containerClass;
-    if (virtualize.containerId !== void 0) container.id = virtualize.containerId;
-    parent.appendChild(container);
-  }
-  const NOOP = () => {
-  };
   const asElementRow = (rendered) => {
     if (rendered instanceof HTMLElement) return { el: rendered, dispose: NOOP };
     if (rendered !== null && typeof rendered === "object" && "el" in rendered && rendered.el instanceof HTMLElement) {
-      const r = rendered;
-      return { el: r.el, dispose: r.dispose ?? NOOP, update: r.update };
+      const row = rendered;
+      return { el: row.el, dispose: row.dispose ?? NOOP, update: row.update };
     }
     return null;
   };
   const makeRow = (item) => {
     const elementRow = asElementRow(render(item));
     if (elementRow !== null) {
-      return { el: elementRow.el, item, dispose: elementRow.dispose, elementMode: true, update: elementRow.update };
+      return {
+        el: elementRow.el,
+        item,
+        dispose: elementRow.dispose,
+        elementMode: true,
+        update: elementRow.update
+      };
     }
     const el = document.createElement(tag);
     const dispose2 = mount(el, () => render(item));
     return { el, item, dispose: dispose2, elementMode: false };
   };
-  const reconcileItem = (row, k, item) => {
+  const reconcileItem = (row, item) => {
     if (row.item === item) return row;
+    const oldKey = key(row.item);
+    const newKey = key(item);
     if (row.elementMode) {
       row.item = item;
+      if (newKey !== oldKey) {
+        rows.delete(oldKey);
+        rows.set(newKey, row);
+      }
       row.update?.(item);
       return row;
     }
     row.dispose();
     row.el.remove();
-    rows.delete(k);
+    rows.delete(oldKey);
     const fresh = makeRow(item);
-    rows.set(k, fresh);
+    rows.set(newKey, fresh);
     return fresh;
   };
-  const syncRows = (visible) => {
-    const wanted = /* @__PURE__ */ new Set();
-    for (const item of visible) wanted.add(key(item));
-    for (const [k, row] of rows) {
-      if (!wanted.has(k)) {
-        row.dispose();
-        row.el.remove();
-        rows.delete(k);
-      }
+  const preserveFocus = (operation) => {
+    const focus = captureFocus(container);
+    try {
+      operation();
+    } finally {
+      if (focus !== null) restoreFocus(focus);
     }
-    order.length = 0;
-    for (const item of visible) {
-      const k = key(item);
-      const existing = rows.get(k);
-      let row;
-      if (existing !== void 0) {
-        row = reconcileItem(existing, k, item);
-      } else {
-        row = makeRow(item);
-        rows.set(k, row);
+  };
+  const sync = (visible) => {
+    preserveFocus(() => {
+      const wanted = /* @__PURE__ */ new Set();
+      for (const item of visible) wanted.add(key(item));
+      for (const [rowKey, row] of rows) {
+        if (!wanted.has(rowKey)) {
+          row.dispose();
+          row.el.remove();
+          rows.delete(rowKey);
+        }
       }
-      order.push(row);
-    }
-    let ref = endAnchor();
-    for (let i = order.length - 1; i >= 0; i--) {
-      const el = order[i].el;
-      if (el.parentNode !== container || el.nextSibling !== ref) {
-        moveNode(container, el, ref);
+      order.length = 0;
+      for (const item of visible) {
+        const rowKey = key(item);
+        const existing = rows.get(rowKey);
+        const row = existing === void 0 ? makeRow(item) : reconcileItem(existing, item);
+        if (existing === void 0) rows.set(rowKey, row);
+        order.push(row);
       }
-      ref = el;
-    }
+      let ref = endAnchor();
+      for (let index = order.length - 1; index >= 0; index--) {
+        const el = order[index].el;
+        if (el.parentNode !== container || el.nextSibling !== ref)
+          moveNode(container, el, ref);
+        ref = el;
+      }
+    });
   };
   const applyPatches = (patches) => {
-    for (const patch of patches) {
-      if (patch.type === "insert") {
-        const row = makeRow(patch.item);
-        rows.set(key(patch.item), row);
-        order.splice(patch.index, 0, row);
-        container.insertBefore(row.el, order[patch.index + 1]?.el ?? endAnchor());
-      } else if (patch.type === "remove") {
-        const [row] = order.splice(patch.index, 1);
-        row.dispose();
-        row.el.remove();
-        rows.delete(key(row.item));
-      } else if (patch.type === "move") {
-        const [row] = order.splice(patch.from, 1);
-        order.splice(patch.to, 0, row);
-        moveNode(container, row.el, order[patch.to + 1]?.el ?? endAnchor());
-      } else if (patch.type === "update") {
-        const current = order[patch.index];
-        if (current.item !== patch.item) {
-          if (current.elementMode) {
-            const oldKey = key(current.item);
-            const newKey = key(patch.item);
-            current.item = patch.item;
-            if (newKey !== oldKey) {
-              rows.delete(oldKey);
-              rows.set(newKey, current);
-            }
-            current.update?.(patch.item);
-          } else {
-            current.dispose();
-            current.el.remove();
-            rows.delete(key(current.item));
-            const row = makeRow(patch.item);
-            rows.set(key(patch.item), row);
+    preserveFocus(() => {
+      for (const patch of patches) {
+        if (patch.type === "insert") {
+          const row = makeRow(patch.item);
+          rows.set(key(patch.item), row);
+          order.splice(patch.index, 0, row);
+          container.insertBefore(
+            row.el,
+            order[patch.index + 1]?.el ?? endAnchor()
+          );
+        } else if (patch.type === "remove") {
+          const [row] = order.splice(patch.index, 1);
+          row.dispose();
+          row.el.remove();
+          rows.delete(key(row.item));
+        } else if (patch.type === "move") {
+          const [row] = order.splice(patch.from, 1);
+          order.splice(patch.to, 0, row);
+          moveNode(container, row.el, order[patch.to + 1]?.el ?? endAnchor());
+        } else if (patch.type === "update") {
+          const current = order[patch.index];
+          const row = reconcileItem(current, patch.item);
+          if (row !== current) {
             order[patch.index] = row;
-            container.insertBefore(row.el, order[patch.index + 1]?.el ?? endAnchor());
+            container.insertBefore(
+              row.el,
+              order[patch.index + 1]?.el ?? endAnchor()
+            );
           }
         }
       }
+    });
+  };
+  const dispose = (removeElements) => {
+    for (const row of rows.values()) {
+      row.dispose();
+      if (removeElements) row.el.remove();
     }
+    rows.clear();
+    order.length = 0;
   };
-  const rowHeight = virtualize?.rowHeight;
+  return { order, sync, applyPatches, dispose };
+}
+
+// src/list-virtualization-controller.ts
+function createListVirtualizationController(options) {
+  const { parent, container, virtualize, key, rows } = options;
+  const overscan = virtualize.overscan ?? 3;
+  const { minRows, rowHeight } = virtualize;
+  const contentVisibility = virtualize.mode === "content-visibility";
   const fixedHeight = typeof rowHeight === "number" ? rowHeight : null;
   const measuring = typeof rowHeight === "object" && rowHeight !== null;
   const measured = /* @__PURE__ */ new Map();
-  const estimateAt = (index) => {
-    const est = rowHeight.estimate;
-    return typeof est === "function" ? est(items[index], index) : est;
-  };
-  const variableHeightAt = fixedHeight !== null ? null : measuring ? (index) => {
-    const k = key(items[index]);
-    return measured.has(k) ? measured.get(k) : estimateAt(index);
-  } : (index) => rowHeight(items[index], index);
-  const intrinsicSizeAt = (index) => fixedHeight !== null ? fixedHeight : variableHeightAt(index);
+  const indexByKey = /* @__PURE__ */ new Map();
+  const renderSubscribers = /* @__PURE__ */ new Set();
+  let items = [];
   let offsets = [0];
   let heightsDirty = true;
-  const indexByKey = /* @__PURE__ */ new Map();
   let pendingAnchorDelta = 0;
+  let rafPending = false;
+  let disposed = false;
+  const estimateAt = (index) => {
+    const estimate = rowHeight.estimate;
+    return typeof estimate === "function" ? estimate(items[index], index) : estimate;
+  };
+  const variableHeightAt = fixedHeight !== null ? null : measuring ? (index) => measured.get(key(items[index])) ?? estimateAt(index) : (index) => rowHeight(
+    items[index],
+    index
+  );
+  const intrinsicSizeAt = (index) => fixedHeight ?? variableHeightAt(index);
   const rebuildOffsets = () => {
-    const fn = variableHeightAt;
-    const total = items.length;
-    offsets = new Array(total + 1);
+    const heightAt = variableHeightAt;
+    offsets = new Array(items.length + 1);
     offsets[0] = 0;
     if (measuring) indexByKey.clear();
-    for (let i = 0; i < total; i++) {
-      offsets[i + 1] = offsets[i] + fn(i);
-      if (measuring) indexByKey.set(key(items[i]), i);
+    for (let index = 0; index < items.length; index++) {
+      offsets[index + 1] = offsets[index] + heightAt(index);
+      if (measuring) indexByKey.set(key(items[index]), index);
     }
     if (measuring) {
-      for (const k of measured.keys()) if (!indexByKey.has(k)) measured.delete(k);
+      for (const rowKey of measured.keys()) {
+        if (!indexByKey.has(rowKey)) measured.delete(rowKey);
+      }
     }
   };
   const findStart = (target, total) => {
-    let lo = 0;
-    let hi = total;
-    while (lo < hi) {
-      const mid = lo + hi + 1 >> 1;
-      if (offsets[mid] <= target) lo = mid;
-      else hi = mid - 1;
+    let low = 0;
+    let high = total;
+    while (low < high) {
+      const middle = low + high + 1 >> 1;
+      if (offsets[middle] <= target) low = middle;
+      else high = middle - 1;
     }
-    return lo;
+    return low;
   };
   const findEnd = (target, total) => {
-    let lo = 0;
-    let hi = total;
-    while (lo < hi) {
-      const mid = lo + hi >> 1;
-      if (offsets[mid] >= target) hi = mid;
-      else lo = mid + 1;
+    let low = 0;
+    let high = total;
+    while (low < high) {
+      const middle = low + high >> 1;
+      if (offsets[middle] >= target) high = middle;
+      else low = middle + 1;
     }
-    return lo;
+    return low;
   };
-  const sizeVisibleRows = (start) => {
+  const sizeRows = (start2) => {
     if (measuring) return;
-    for (let j = 0; j < order.length; j++) {
-      const abs = start + j;
-      const h = fixedHeight !== null ? fixedHeight : offsets[abs + 1] - offsets[abs];
-      order[j].el.style.height = `${h}px`;
+    for (let index = 0; index < rows.order.length; index++) {
+      const absoluteIndex = start2 + index;
+      const height = fixedHeight ?? offsets[absoluteIndex + 1] - offsets[absoluteIndex];
+      rows.order[index].el.style.height = `${height}px`;
     }
   };
-  const renderSubscribers = /* @__PURE__ */ new Set();
-  const renderWindow = () => {
-    if (virtualize === void 0) {
-      if (granularEligible) {
-        const patches = patchSource._consumePatches();
-        if (!firstRender && patches.length > 0 && !patches.some((p) => p.type === "replace")) {
-          applyPatches(patches);
-          return;
-        }
-      }
-      syncRows(items);
-      firstRender = false;
-      return;
-    }
+  const renderCurrent = () => {
     if (contentVisibility) {
-      syncRows(items);
-      for (let j = 0; j < order.length; j++) {
-        const el = order[j].el;
+      rows.sync(items);
+      for (let index = 0; index < rows.order.length; index++) {
+        const el = rows.order[index].el;
         el.style.contentVisibility = "auto";
-        el.style.containIntrinsicSize = `0 ${intrinsicSizeAt(j)}px`;
+        el.style.containIntrinsicSize = `0 ${intrinsicSizeAt(index)}px`;
       }
       return;
     }
     const total = items.length;
-    let start;
+    let start2;
     let end;
     let padTop;
     let padBottom;
@@ -229,40 +227,41 @@ function bindList(parent, source, options) {
         rebuildOffsets();
         heightsDirty = false;
       }
-      start = 0;
+      start2 = 0;
       end = total;
       padTop = 0;
       padBottom = 0;
+    } else if (fixedHeight !== null) {
+      const viewportBottom = parent.scrollTop + parent.clientHeight;
+      start2 = Math.max(
+        0,
+        Math.floor(parent.scrollTop / fixedHeight) - overscan
+      );
+      end = Math.min(total, Math.ceil(viewportBottom / fixedHeight) + overscan);
+      padTop = start2 * fixedHeight;
+      padBottom = Math.max(0, total - end) * fixedHeight;
     } else {
-      const scrollTop = parent.scrollTop;
-      const viewportBottom = scrollTop + parent.clientHeight;
-      if (fixedHeight !== null) {
-        start = Math.max(0, Math.floor(scrollTop / fixedHeight) - overscan);
-        end = Math.min(total, Math.ceil(viewportBottom / fixedHeight) + overscan);
-        padTop = start * fixedHeight;
-        padBottom = Math.max(0, total - end) * fixedHeight;
-      } else {
-        if (heightsDirty) {
-          rebuildOffsets();
-          heightsDirty = false;
-        }
-        start = Math.max(0, findStart(scrollTop, total) - overscan);
-        end = Math.min(total, findEnd(viewportBottom, total) + overscan);
-        padTop = offsets[start];
-        padBottom = offsets[total] - offsets[end];
+      if (heightsDirty) {
+        rebuildOffsets();
+        heightsDirty = false;
       }
+      const viewportBottom = parent.scrollTop + parent.clientHeight;
+      start2 = Math.max(0, findStart(parent.scrollTop, total) - overscan);
+      end = Math.min(total, findEnd(viewportBottom, total) + overscan);
+      padTop = offsets[start2];
+      padBottom = offsets[total] - offsets[end];
     }
-    syncRows(items.slice(start, end));
-    sizeVisibleRows(start);
+    rows.sync(items.slice(start2, end));
+    sizeRows(start2);
     container.style.paddingTop = `${padTop}px`;
     container.style.paddingBottom = `${padBottom}px`;
-    for (const cb of renderSubscribers) cb();
+    for (const callback of renderSubscribers) callback();
   };
-  const stopEffect = effect(() => {
-    items = source.value;
+  const render = (nextItems) => {
+    items = nextItems;
     heightsDirty = true;
-    renderWindow();
-  });
+    renderCurrent();
+  };
   const scheduleRender = () => {
     if (rafPending) return;
     rafPending = true;
@@ -273,51 +272,143 @@ function bindList(parent, source, options) {
         parent.scrollTop += pendingAnchorDelta;
         pendingAnchorDelta = 0;
       }
-      renderWindow();
+      renderCurrent();
     });
   };
-  if (virtualize !== void 0 && !contentVisibility) parent.addEventListener("scroll", scheduleRender);
-  const RO = globalThis.ResizeObserver;
-  const parentResize = virtualize !== void 0 && !contentVisibility && RO !== void 0 ? new RO(scheduleRender) : void 0;
-  parentResize?.observe(parent);
-  const setHeight = (k, height) => {
+  const resizeObserver = !contentVisibility && globalThis.ResizeObserver !== void 0 ? new globalThis.ResizeObserver(scheduleRender) : void 0;
+  const start = () => {
+    if (contentVisibility) return;
+    parent.addEventListener("scroll", scheduleRender);
+    resizeObserver?.observe(parent);
+  };
+  const setHeight = (rowKey, height) => {
     if (!measuring || contentVisibility) return;
-    const idx = indexByKey.get(k);
-    if (idx === void 0) return;
-    const oldHeight = measured.has(k) ? measured.get(k) : estimateAt(idx);
+    const index = indexByKey.get(rowKey);
+    if (index === void 0) return;
+    const oldHeight = measured.get(rowKey) ?? estimateAt(index);
     if (height === oldHeight) return;
-    measured.set(k, height);
-    if (offsets[idx + 1] <= parent.scrollTop) pendingAnchorDelta += height - oldHeight;
+    measured.set(rowKey, height);
+    if (offsets[index + 1] <= parent.scrollTop)
+      pendingAnchorDelta += height - oldHeight;
     heightsDirty = true;
     scheduleRender();
   };
-  const dispose = (() => {
+  const onRender = (callback) => {
+    renderSubscribers.add(callback);
+    return () => renderSubscribers.delete(callback);
+  };
+  const dispose = () => {
     disposed = true;
-    stopEffect();
-    for (const row of rows.values()) {
-      row.dispose();
-      if (virtualize === void 0) row.el.remove();
-    }
-    rows.clear();
+    parent.removeEventListener("scroll", scheduleRender);
+    resizeObserver?.disconnect();
     renderSubscribers.clear();
-    if (virtualize !== void 0) {
-      parent.removeEventListener("scroll", scheduleRender);
-      parentResize?.disconnect();
+  };
+  return { contentVisibility, render, start, setHeight, onRender, dispose };
+}
+
+// src/list.ts
+var NOOP2 = () => {
+};
+function assertUniqueListKeys(items, key) {
+  const firstIndex = /* @__PURE__ */ new Map();
+  for (let index = 0; index < items.length; index++) {
+    const rowKey = key(items[index]);
+    const first = firstIndex.get(rowKey);
+    if (first !== void 0) {
+      const displayed = typeof rowKey === "string" ? JSON.stringify(rowKey) : String(rowKey);
+      throw new Error(
+        `bindList: duplicate key ${displayed} at indices ${first} and ${index} \u2014 every row key must be unique.`
+      );
+    }
+    firstIndex.set(rowKey, index);
+  }
+}
+function bindList(parent, source, options) {
+  const { key, render, tag = "div", virtualize, before } = options;
+  let firstRender = true;
+  let forceSnapshot = false;
+  const patchSource = source;
+  const granularEligible = virtualize === void 0 && patchSource[ARRAY_SIGNAL_BRAND] === true;
+  const container = virtualize === void 0 ? parent : document.createElement("div");
+  if (virtualize !== void 0) {
+    if (virtualize.containerClass !== void 0)
+      container.className = virtualize.containerClass;
+    if (virtualize.containerId !== void 0)
+      container.id = virtualize.containerId;
+  }
+  const endAnchor = () => {
+    if (virtualize !== void 0 || before === void 0) return null;
+    return (typeof before === "function" ? before() : before) ?? null;
+  };
+  const rows = createListRowController({
+    container,
+    key,
+    render,
+    tag,
+    endAnchor
+  });
+  const virtualization = virtualize === void 0 ? void 0 : createListVirtualizationController({
+    parent,
+    container,
+    virtualize,
+    key,
+    rows
+  });
+  const renderItems = (items) => {
+    if (virtualization !== void 0) {
+      virtualization.render(items);
+      return;
+    }
+    if (granularEligible) {
+      const patches = patchSource._consumePatches();
+      if (!firstRender && !forceSnapshot && patches.length > 0 && !patches.some((patch) => patch.type === "replace")) {
+        try {
+          rows.applyPatches(patches);
+        } catch (error) {
+          forceSnapshot = true;
+          throw error;
+        }
+        return;
+      }
+    }
+    rows.sync(items);
+    firstRender = false;
+    forceSnapshot = false;
+  };
+  const stopEffect = effect(() => {
+    const items = source.value;
+    try {
+      assertUniqueListKeys(items, key);
+    } catch (error) {
+      if (granularEligible) {
+        patchSource._consumePatches();
+        forceSnapshot = true;
+      }
+      throw error;
+    }
+    renderItems(items);
+  });
+  if (virtualization !== void 0) {
+    parent.appendChild(container);
+    virtualization.start();
+  }
+  const dispose = (() => {
+    stopEffect();
+    rows.dispose(virtualization === void 0);
+    if (virtualization !== void 0) {
+      virtualization.dispose();
       container.remove();
       VIRTUAL_INTERNALS.delete(handle);
     }
   });
   const handle = dispose;
-  handle.setHeight = setHeight;
-  if (virtualize !== void 0) {
+  handle.setHeight = virtualization?.setHeight ?? NOOP2;
+  if (virtualization !== void 0) {
     handle.container = container;
-    if (!contentVisibility) {
+    if (!virtualization.contentVisibility) {
       VIRTUAL_INTERNALS.set(handle, {
-        visibleRows: () => order.map((row) => ({ key: key(row.item), el: row.el })),
-        onRender: (cb) => {
-          renderSubscribers.add(cb);
-          return () => renderSubscribers.delete(cb);
-        }
+        visibleRows: () => rows.order.map((row) => ({ key: key(row.item), el: row.el })),
+        onRender: virtualization.onRender
       });
     }
   }
@@ -327,13 +418,13 @@ var VIRTUAL_INTERNALS = /* @__PURE__ */ new WeakMap();
 function observeRowHeights(handle) {
   const internals = VIRTUAL_INTERNALS.get(handle);
   const RO = globalThis.ResizeObserver;
-  if (internals === void 0 || RO === void 0) return () => {
-  };
+  if (internals === void 0 || RO === void 0) return NOOP2;
   const keyByEl = /* @__PURE__ */ new WeakMap();
   const observer = new RO((entries) => {
     for (const entry of entries) {
       const k = keyByEl.get(entry.target);
-      if (k !== void 0) handle.setHeight(k, entry.target.offsetHeight);
+      if (k !== void 0)
+        handle.setHeight(k, entry.target.offsetHeight);
     }
   });
   const resync = () => {
@@ -352,5 +443,5 @@ function observeRowHeights(handle) {
 }
 
 export { bindList, observeRowHeights };
-//# sourceMappingURL=list.js.map
+
 //# sourceMappingURL=list.js.map