@lostgradient/cinder 0.2.0 → 0.3.0

package/dist/components/data-table/index.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -56,7 +26,8 @@ import"@lostgradient/cinder/data-table/styles";
 
 // src/components/data-table/data-table.svelte
 import"svelte/internal/disclose-version";
-import * as $7 from "svelte/internal/client";
+import * as $8 from "svelte/internal/client";
+import { tick } from "svelte";
 
 // src/components/table-body/table-body.svelte
 import"svelte/internal/disclose-version";
@@ -272,6 +243,17 @@ var root_4 = $5.from_html(`<td class="cinder-table__cell cinder-table__cell--sel
 var root4 = $5.from_html(`<tr><!><!><!></tr>`);
 function Table_row($$anchor, $$props) {
   $5.push($$props, true);
+  let rest = $5.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "class",
+    "children",
+    "selected",
+    "onSelectedChange",
+    "selectionLabel",
+    "selectionDisabled"
+  ]);
   const table = tryGetTableContext();
   const selectionEnabled = table?.selectionEnabled ?? false;
   const section = tryGetTableSectionContext();
@@ -309,6 +291,7 @@ function Table_row($$anchor, $$props) {
     headerSelection?.claimSelectionHeaderCell();
   }
   var tr = root4();
+  $5.attribute_effect(tr, ($0) => ({ ...rest, class: $0 }), [() => classNames("cinder-table__row", $$props.class)]);
   var node_1 = $5.child(tr);
   {
     var consequent = ($$anchor2) => {
@@ -375,7 +358,6 @@ function Table_row($$anchor, $$props) {
   var node_4 = $5.sibling(node_2);
   $5.snippet(node_4, () => $$props.children);
   $5.reset(tr);
-  $5.template_effect(($0) => $5.set_class(tr, 1, $0), [() => $5.clsx(classNames("cinder-table__row", $$props.class))]);
   $5.append($$anchor, tr);
   $5.pop();
 }
@@ -383,12 +365,67 @@ $5.delegate(["change"]);
 
 // src/components/table/table.svelte
 import"svelte/internal/disclose-version";
+import * as $7 from "svelte/internal/client";
+
+// src/utilities/use-resize-observer.svelte.ts
 import * as $6 from "svelte/internal/client";
-var root_13 = $6.from_html(`<caption class="cinder-table__caption"> </caption>`);
-var root5 = $6.from_html(`<table><!><!></table>`);
+function useResizeObserver(onResize, options = {}) {
+  const { box, enabled = () => true } = options;
+  return (node) => {
+    if (typeof ResizeObserver === "undefined") {
+      return () => {};
+    }
+    let observer = null;
+    const disconnectObserver = () => {
+      observer?.disconnect();
+      observer = null;
+    };
+    $6.user_effect(() => {
+      if (!enabled()) {
+        disconnectObserver();
+        return;
+      }
+      observer = new ResizeObserver((entries) => {
+        if (!enabled()) {
+          return;
+        }
+        onResize(entries);
+      });
+      observer.observe(node, box !== undefined ? { box } : undefined);
+      return () => {
+        disconnectObserver();
+      };
+    });
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
+// src/components/table/table.svelte
+var root_13 = $7.from_html(`<caption class="cinder-table__caption"> </caption>`);
+var root5 = $7.from_html(`<table><!><!></table>`);
 function Table($$anchor, $$props) {
-  $6.push($$props, true);
-  let sort = $6.prop($$props, "sort", 15), stickyHeader = $6.prop($$props, "stickyHeader", 3, false), density = $6.prop($$props, "density", 3, "comfortable"), selectable = $6.prop($$props, "selectable", 3, false);
+  $7.push($$props, true);
+  let sort = $7.prop($$props, "sort", 15), stickyHeader = $7.prop($$props, "stickyHeader", 3, false), density = $7.prop($$props, "density", 3, "comfortable"), selectable = $7.prop($$props, "selectable", 3, false), rest = $7.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "sort",
+    "caption",
+    "stickyHeader",
+    "density",
+    "selectable",
+    "class",
+    "children"
+  ]);
+  let captionHeight = $7.state(0);
+  const measureCaption = useResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry)
+      return;
+    $7.set(captionHeight, entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height, true);
+  }, { box: "border-box", enabled: () => stickyHeader() });
   function onSortChange(column) {
     if (!sort() || sort().column !== column) {
       sort({ column, direction: "ascending" });
@@ -409,41 +446,119 @@ function Table($$anchor, $$props) {
     onSortChange
   });
   var table = root5();
-  var node = $6.child(table);
+  $7.attribute_effect(table, ($0) => ({
+    ...rest,
+    class: $0,
+    "data-cinder-sticky-header": stickyHeader() || undefined,
+    "data-cinder-density": density(),
+    "data-cinder-selectable": selectable() || undefined,
+    [$7.STYLE]: {
+      "--cinder-table-caption-height": $$props.caption ? `${$7.get(captionHeight)}px` : undefined
+    }
+  }), [() => classNames("cinder-table", $$props.class)]);
+  var node = $7.child(table);
   {
     var consequent = ($$anchor2) => {
       var caption_1 = root_13();
-      var text = $6.child(caption_1, true);
-      $6.reset(caption_1);
-      $6.template_effect(() => $6.set_text(text, $$props.caption));
-      $6.append($$anchor2, caption_1);
+      var text = $7.child(caption_1, true);
+      $7.reset(caption_1);
+      $7.attach(caption_1, () => measureCaption);
+      $7.template_effect(() => $7.set_text(text, $$props.caption));
+      $7.append($$anchor2, caption_1);
     };
-    $6.if(node, ($$render) => {
+    $7.if(node, ($$render) => {
       if ($$props.caption)
         $$render(consequent);
     });
   }
-  var node_1 = $6.sibling(node);
-  $6.snippet(node_1, () => $$props.children);
-  $6.reset(table);
-  $6.template_effect(($0) => {
-    $6.set_class(table, 1, $0);
-    $6.set_attribute(table, "data-cinder-sticky-header", stickyHeader() || undefined);
-    $6.set_attribute(table, "data-cinder-density", density());
-    $6.set_attribute(table, "data-cinder-selectable", selectable() || undefined);
-  }, [() => $6.clsx(classNames("cinder-table", $$props.class))]);
-  $6.append($$anchor, table);
-  $6.pop();
+  var node_1 = $7.sibling(node);
+  $7.snippet(node_1, () => $$props.children);
+  $7.reset(table);
+  $7.append($$anchor, table);
+  $7.pop();
+}
+
+// src/utilities/fixed-virtual-window.ts
+function resolveVirtualItemHeight(itemHeight, fallback = 1) {
+  if (Number.isFinite(itemHeight) && itemHeight > 0)
+    return itemHeight;
+  return fallback;
+}
+function resolveVirtualOverscan(overscan) {
+  if (!Number.isFinite(overscan) || overscan === undefined)
+    return 0;
+  return Math.max(0, Math.floor(overscan));
+}
+function parsePixelLength(value) {
+  if (value === undefined)
+    return;
+  const match = /^([0-9]+(?:\.[0-9]+)?)px$/.exec(value.trim());
+  if (!match)
+    return;
+  return Number(match[1]);
+}
+function getFixedVirtualWindow({
+  itemCount,
+  itemHeight,
+  scrollOffset,
+  viewportHeight,
+  overscan,
+  getKey
+}) {
+  const count = Math.max(0, Math.floor(itemCount));
+  const size = resolveVirtualItemHeight(itemHeight);
+  const totalSize = count * size;
+  if (count === 0) {
+    return {
+      items: [],
+      totalSize,
+      leadingSize: 0,
+      trailingSize: 0,
+      startIndex: 0,
+      endIndex: 0
+    };
+  }
+  const resolvedViewportHeight = Number.isFinite(viewportHeight) && viewportHeight > 0 ? viewportHeight : size * 10;
+  const resolvedOverscan = resolveVirtualOverscan(overscan);
+  const maxScrollOffset = Math.max(0, totalSize - resolvedViewportHeight);
+  const offset = Math.min(Math.max(0, scrollOffset), maxScrollOffset);
+  const visibleStartIndex = Math.min(count - 1, Math.floor(offset / size));
+  const visibleCount = Math.max(1, Math.ceil(resolvedViewportHeight / size));
+  const startIndex = Math.max(0, visibleStartIndex - resolvedOverscan);
+  const endIndex = Math.min(count, startIndex + visibleCount + resolvedOverscan * 2);
+  const items = Array.from({ length: endIndex - startIndex }, (_, indexOffset) => {
+    const index = startIndex + indexOffset;
+    return {
+      index,
+      key: getKey?.(index) ?? index,
+      start: index * size,
+      size
+    };
+  });
+  const firstItem = items[0];
+  const lastItem = items.at(-1);
+  const leadingSize = firstItem?.start ?? 0;
+  const trailingSize = lastItem ? Math.max(0, totalSize - (lastItem.start + lastItem.size)) : 0;
+  return {
+    items,
+    totalSize,
+    leadingSize,
+    trailingSize,
+    startIndex,
+    endIndex
+  };
 }
 
 // src/components/data-table/data-table.svelte
-var root_2 = $7.from_html(`<!> <!>`, 1);
-var root_122 = $7.from_html(`<div><!></div>`);
-var root_132 = $7.from_html(`<div><!></div>`);
+var root_8 = $8.from_html(`<tr class="cinder-data-table__virtual-spacer" aria-hidden="true"><td class="cinder-data-table__virtual-spacer-cell"></td></tr>`);
+var root_132 = $8.from_html(`<tr class="cinder-data-table__virtual-spacer" aria-hidden="true"><td class="cinder-data-table__virtual-spacer-cell"></td></tr>`);
+var root_7 = $8.from_html(`<!> <!> <!>`, 1);
+var root_2 = $8.from_html(`<!> <!>`, 1);
+var root6 = $8.from_html(`<div><!></div>`);
 function Data_table($$anchor, $$props) {
-  $7.push($$props, true);
+  $8.push($$props, true);
   const table = ($$anchor2) => {
-    Table($$anchor2, $7.spread_props(() => $$props.caption !== undefined ? { caption: $$props.caption } : {}, {
+    Table($$anchor2, $8.spread_props(() => $$props.caption !== undefined ? { caption: $$props.caption } : {}, () => $8.get(shouldVirtualizeRows) ? { "aria-rowcount": $$props.rows.length + 1 } : {}, {
       get stickyHeader() {
         return stickyHeader();
       },
@@ -458,88 +573,180 @@ function Data_table($$anchor, $$props) {
       },
       children: ($$anchor3, $$slotProps) => {
         var fragment_1 = root_2();
-        var node = $7.first_child(fragment_1);
+        var node = $8.first_child(fragment_1);
         Table_header(node, {
           children: ($$anchor4, $$slotProps2) => {
             Table_row($$anchor4, {
               children: ($$anchor5, $$slotProps3) => {
-                var fragment_3 = $7.comment();
-                var node_1 = $7.first_child(fragment_3);
-                $7.each(node_1, 17, () => $$props.columns, (column) => column.key, ($$anchor6, column) => {
+                var fragment_3 = $8.comment();
+                var node_1 = $8.first_child(fragment_3);
+                $8.each(node_1, 17, () => $$props.columns, (column) => column.key, ($$anchor6, column) => {
                   {
-                    let $0 = $7.derived(() => $7.get(column).sortable ?? false);
-                    let $1 = $7.derived(() => mapAlign($7.get(column).align) ?? "left");
-                    Table_header_cell($$anchor6, $7.spread_props(() => $7.get(column).sortable ? { column: $7.get(column).key } : {}, {
+                    let $0 = $8.derived(() => $8.get(column).sortable ?? false);
+                    let $1 = $8.derived(() => mapAlign($8.get(column).align) ?? "left");
+                    Table_header_cell($$anchor6, $8.spread_props(() => $8.get(column).sortable ? { column: $8.get(column).key } : {}, {
                       get sortable() {
-                        return $7.get($0);
+                        return $8.get($0);
                       },
                       get align() {
-                        return $7.get($1);
+                        return $8.get($1);
                       },
                       children: ($$anchor7, $$slotProps4) => {
-                        $7.next();
-                        var text2 = $7.text();
-                        $7.template_effect(() => $7.set_text(text2, $7.get(column).label));
-                        $7.append($$anchor7, text2);
+                        $8.next();
+                        var text2 = $8.text();
+                        $8.template_effect(() => $8.set_text(text2, $8.get(column).label));
+                        $8.append($$anchor7, text2);
                       },
                       $$slots: { default: true }
                     }));
                   }
                 });
-                $7.append($$anchor5, fragment_3);
+                $8.append($$anchor5, fragment_3);
               },
               $$slots: { default: true }
             });
           },
           $$slots: { default: true }
         });
-        var node_2 = $7.sibling(node, 2);
+        var node_2 = $8.sibling(node, 2);
         Table_body(node_2, {
           children: ($$anchor4, $$slotProps2) => {
-            var fragment_6 = $7.comment();
-            var node_3 = $7.first_child(fragment_6);
-            $7.each(node_3, 17, () => $$props.rows, $7.index, ($$anchor5, row) => {
-              Table_row($$anchor5, {
+            var fragment_6 = root_7();
+            var node_3 = $8.first_child(fragment_6);
+            {
+              var consequent = ($$anchor5) => {
+                var tr = root_8();
+                var td = $8.child(tr);
+                let styles;
+                $8.reset(tr);
+                $8.template_effect(() => {
+                  $8.set_attribute(td, "colspan", $$props.columns.length);
+                  styles = $8.set_style(td, "", styles, { height: `${$8.get(virtualWindow).leadingSize}px` });
+                });
+                $8.append($$anchor5, tr);
+              };
+              $8.if(node_3, ($$render) => {
+                if ($8.get(shouldVirtualizeRows) && $8.get(virtualWindow).leadingSize > 0)
+                  $$render(consequent);
+              });
+            }
+            var node_4 = $8.sibling(node_3, 2);
+            $8.each(node_4, 17, () => $8.get(virtualRows), (virtualRow) => virtualRow.key, ($$anchor5, virtualRow) => {
+              Table_row($$anchor5, $8.spread_props(() => $8.get(shouldVirtualizeRows) ? {
+                "aria-rowindex": $8.get(virtualRow).index + 2,
+                tabindex: $8.get(tabbableRowIndex) === $8.get(virtualRow).index ? 0 : -1,
+                "data-cinder-virtual-row": "true",
+                "data-cinder-data-table-row-index": $8.get(virtualRow).index,
+                onfocus: () => handleRowFocus($8.get(virtualRow).index),
+                onkeydown: (event) => handleRowKeydown(event, $8.get(virtualRow).index)
+              } : {}, {
                 children: ($$anchor6, $$slotProps3) => {
-                  var fragment_8 = $7.comment();
-                  var node_4 = $7.first_child(fragment_8);
-                  $7.each(node_4, 17, () => $$props.columns, (column) => column.key, ($$anchor7, column) => {
+                  var fragment_8 = $8.comment();
+                  var node_5 = $8.first_child(fragment_8);
+                  $8.each(node_5, 17, () => $$props.columns, (column) => column.key, ($$anchor7, column) => {
                     {
-                      let $0 = $7.derived(() => $7.get(column).key === $7.get(rowHeaderKey) ? "th" : "td");
-                      let $1 = $7.derived(() => mapAlign($7.get(column).align) ?? "left");
+                      let $0 = $8.derived(() => $8.get(column).key === $8.get(rowHeaderKey) ? "th" : "td");
+                      let $1 = $8.derived(() => mapAlign($8.get(column).align) ?? "left");
                       Table_cell($$anchor7, {
                         get as() {
-                          return $7.get($0);
+                          return $8.get($0);
                         },
                         get align() {
-                          return $7.get($1);
+                          return $8.get($1);
                         },
                         children: ($$anchor8, $$slotProps4) => {
-                          $7.next();
-                          var text_1 = $7.text();
-                          $7.template_effect(() => $7.set_text(text_1, $7.get(row)[$7.get(column).key]));
-                          $7.append($$anchor8, text_1);
+                          $8.next();
+                          var text_1 = $8.text();
+                          $8.template_effect(() => $8.set_text(text_1, $8.get(virtualRow).row[$8.get(column).key]));
+                          $8.append($$anchor8, text_1);
                         },
                         $$slots: { default: true }
                       });
                     }
                   });
-                  $7.append($$anchor6, fragment_8);
+                  $8.append($$anchor6, fragment_8);
                 },
                 $$slots: { default: true }
-              });
+              }));
             });
-            $7.append($$anchor4, fragment_6);
+            var node_6 = $8.sibling(node_4, 2);
+            {
+              var consequent_1 = ($$anchor5) => {
+                var tr_1 = root_132();
+                var td_1 = $8.child(tr_1);
+                let styles_1;
+                $8.reset(tr_1);
+                $8.template_effect(() => {
+                  $8.set_attribute(td_1, "colspan", $$props.columns.length);
+                  styles_1 = $8.set_style(td_1, "", styles_1, { height: `${$8.get(virtualWindow).trailingSize}px` });
+                });
+                $8.append($$anchor5, tr_1);
+              };
+              $8.if(node_6, ($$render) => {
+                if ($8.get(shouldVirtualizeRows) && $8.get(virtualWindow).trailingSize > 0)
+                  $$render(consequent_1);
+              });
+            }
+            $8.append($$anchor4, fragment_6);
           },
           $$slots: { default: true }
         });
-        $7.append($$anchor3, fragment_1);
+        $8.append($$anchor3, fragment_1);
       },
       $$slots: { default: true }
     }));
   };
-  let sort = $7.prop($$props, "sort", 15), stickyHeader = $7.prop($$props, "stickyHeader", 3, false), density = $7.prop($$props, "density", 3, "comfortable"), scrollable = $7.prop($$props, "scrollable", 3, false);
-  const rowHeaderKey = $7.derived(() => ($$props.columns.find((column) => column.rowHeader === true) ?? $$props.columns[0])?.key);
+  let sort = $8.prop($$props, "sort", 15), stickyHeader = $8.prop($$props, "stickyHeader", 3, false), density = $8.prop($$props, "density", 3, "comfortable"), scrollable = $8.prop($$props, "scrollable", 3, false), virtualized = $8.prop($$props, "virtualized", 3, false), rowHeight = $8.prop($$props, "rowHeight", 3, 44), overscan = $8.prop($$props, "overscan", 3, 5), height = $8.prop($$props, "height", 3, "24rem"), stickToBottom = $8.prop($$props, "stickToBottom", 3, false), rest = $8.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "columns",
+    "rows",
+    "caption",
+    "sort",
+    "stickyHeader",
+    "density",
+    "scrollable",
+    "virtualized",
+    "rowHeight",
+    "overscan",
+    "height",
+    "stickToBottom",
+    "onscroll",
+    "class"
+  ]);
+  let wrapperElement = $8.state(undefined);
+  let scrollOffset = $8.state(0);
+  let measuredViewportHeight = $8.state(0);
+  let captionHeight = $8.state(0);
+  let headerHeight = $8.state(0);
+  let activeRowIndex = $8.state(0);
+  let previousRowCount = 0;
+  let hasObservedRowCount = false;
+  let shouldStickAfterAppend = false;
+  const rowHeaderKey = $8.derived(() => ($$props.columns.find((column) => column.rowHeader === true) ?? $$props.columns[0])?.key);
+  const shouldVirtualizeRows = $8.derived(virtualized);
+  const resolvedRowHeight = $8.derived(() => resolveVirtualItemHeight(rowHeight(), 44));
+  const resolvedOverscan = $8.derived(() => resolveVirtualOverscan(overscan()));
+  const viewportHeight = $8.derived(() => $8.get(measuredViewportHeight) || estimateViewportHeight(height(), $8.get(resolvedRowHeight)));
+  const virtualWindow = $8.derived(() => getFixedVirtualWindow({
+    itemCount: $$props.rows.length,
+    itemHeight: $8.get(resolvedRowHeight),
+    scrollOffset: $8.get(scrollOffset),
+    viewportHeight: $8.get(viewportHeight),
+    overscan: $8.get(resolvedOverscan)
+  }));
+  const virtualRows = $8.derived(() => $8.get(shouldVirtualizeRows) ? $8.get(virtualWindow).items.flatMap((virtualItem) => {
+    const row = $$props.rows[virtualItem.index];
+    return row === undefined ? [] : [{ ...virtualItem, row }];
+  }) : $$props.rows.map((row, index) => ({
+    row,
+    index,
+    key: index,
+    start: index * $8.get(resolvedRowHeight),
+    size: $8.get(resolvedRowHeight)
+  })));
+  const tabbableRowIndex = $8.derived(getTabbableRowIndex);
   function mapAlign(align) {
     if (align === "start")
       return "left";
@@ -549,36 +756,164 @@ function Data_table($$anchor, $$props) {
       return "center";
     return;
   }
-  var fragment_11 = $7.comment();
-  var node_5 = $7.first_child(fragment_11);
-  {
-    var consequent = ($$anchor2) => {
-      var div = root_122();
-      var node_6 = $7.child(div);
-      table(node_6);
-      $7.reset(div);
-      $7.template_effect(($0) => $7.set_class(div, 1, $0), [
-        () => $7.clsx(classNames("cinder-data-table", "cinder-table-scroll", $$props.class))
-      ]);
-      $7.append($$anchor2, div);
-    };
-    var alternate = ($$anchor2) => {
-      var div_1 = root_132();
-      var node_7 = $7.child(div_1);
-      table(node_7);
-      $7.reset(div_1);
-      $7.template_effect(($0) => $7.set_class(div_1, 1, $0), [() => $7.clsx(classNames("cinder-data-table", $$props.class))]);
-      $7.append($$anchor2, div_1);
-    };
-    $7.if(node_5, ($$render) => {
-      if (scrollable())
-        $$render(consequent);
-      else
-        $$render(alternate, -1);
+  $8.user_effect(() => {
+    const element2 = $8.get(wrapperElement);
+    if (!element2 || !$8.get(shouldVirtualizeRows))
+      return;
+    syncScrollMetrics(element2);
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const observer = new ResizeObserver(() => syncScrollMetrics(element2));
+    observer.observe(element2);
+    const caption = element2.querySelector("caption");
+    if (caption)
+      observer.observe(caption);
+    const header = element2.querySelector("thead");
+    if (header)
+      observer.observe(header);
+    return () => observer.disconnect();
+  });
+  $8.user_pre_effect(() => {
+    const rowCount = $$props.rows.length;
+    const element2 = $8.get(wrapperElement);
+    if (!hasObservedRowCount) {
+      previousRowCount = rowCount;
+      hasObservedRowCount = true;
+      shouldStickAfterAppend = false;
+      return;
+    }
+    shouldStickAfterAppend = $8.get(shouldVirtualizeRows) && stickToBottom() && element2 !== undefined && rowCount > previousRowCount && isAtBottom(element2, previousRowCount * $8.get(resolvedRowHeight), $8.get(viewportHeight), getTableChromeHeight($8.get(captionHeight), $8.get(headerHeight)));
+    previousRowCount = rowCount;
+  });
+  $8.user_effect(() => {
+    const rowCount = $$props.rows.length;
+    const element2 = $8.get(wrapperElement);
+    if (!$8.get(shouldVirtualizeRows) || !stickToBottom() || !shouldStickAfterAppend || !element2)
+      return;
+    tick().then(() => {
+      element2.scrollTop = maxScrollTop(rowCount * $8.get(resolvedRowHeight), $8.get(viewportHeight), getTableChromeHeight($8.get(captionHeight), $8.get(headerHeight)));
+      syncScrollMetrics(element2);
+      shouldStickAfterAppend = false;
     });
+  });
+  function estimateViewportHeight(value, fallbackRowHeight) {
+    return parsePixelLength(value) ?? fallbackRowHeight * 10;
   }
-  $7.append($$anchor, fragment_11);
-  $7.pop();
+  function getCaptionHeight(element2) {
+    const captionElement = element2.querySelector("caption");
+    if (!captionElement)
+      return 0;
+    const rect = captionElement.getBoundingClientRect();
+    return rect.height || captionElement.offsetHeight || 0;
+  }
+  function getHeaderHeight(element2) {
+    const header = element2.querySelector("thead");
+    if (!header)
+      return 0;
+    const rect = header.getBoundingClientRect();
+    return rect.height || header.offsetHeight || 0;
+  }
+  function syncScrollMetrics(element2) {
+    const rect = element2.getBoundingClientRect();
+    const nextCaptionHeight = getCaptionHeight(element2);
+    const nextHeaderHeight = getHeaderHeight(element2);
+    $8.set(measuredViewportHeight, rect.height || element2.clientHeight || parsePixelLength(height()) || $8.get(resolvedRowHeight) * 10, true);
+    $8.set(captionHeight, nextCaptionHeight, true);
+    $8.set(headerHeight, nextHeaderHeight, true);
+    $8.set(scrollOffset, Math.max(0, element2.scrollTop - getBodyScrollOrigin(nextCaptionHeight, nextHeaderHeight)), true);
+  }
+  function handleWrapperScroll(event) {
+    if (typeof $$props.onscroll === "function")
+      $$props.onscroll(event);
+    if (!$8.get(shouldVirtualizeRows))
+      return;
+    syncScrollMetrics(event.currentTarget);
+  }
+  function maxScrollTop(totalBodyHeight, visibleHeight, chromeBlockSize) {
+    return Math.max(0, chromeBlockSize + totalBodyHeight - visibleHeight);
+  }
+  function getTableChromeHeight(captionBlockSize, headerBlockSize) {
+    return captionBlockSize + headerBlockSize;
+  }
+  function getBodyScrollOrigin(captionBlockSize, headerBlockSize) {
+    return stickyHeader() ? captionBlockSize : getTableChromeHeight(captionBlockSize, headerBlockSize);
+  }
+  function getTabbableRowIndex() {
+    if (!$8.get(shouldVirtualizeRows))
+      return $8.get(activeRowIndex);
+    if ($8.get(virtualRows).some((virtualRow) => virtualRow.index === $8.get(activeRowIndex))) {
+      return $8.get(activeRowIndex);
+    }
+    return $8.get(virtualRows)[0]?.index ?? $8.get(activeRowIndex);
+  }
+  function isAtBottom(element2, totalBodyHeight, visibleHeight, chromeBlockSize) {
+    return element2.scrollTop >= maxScrollTop(totalBodyHeight, visibleHeight, chromeBlockSize) - 1;
+  }
+  function clampRowIndex(index) {
+    return Math.min(Math.max(0, index), Math.max(0, $$props.rows.length - 1));
+  }
+  function scrollToRow(index) {
+    const element2 = $8.get(wrapperElement);
+    if (!element2)
+      return;
+    const rowScrollTop = index === 0 ? 0 : getBodyScrollOrigin($8.get(captionHeight), $8.get(headerHeight)) + index * $8.get(resolvedRowHeight);
+    element2.scrollTop = Math.min(maxScrollTop($$props.rows.length * $8.get(resolvedRowHeight), $8.get(viewportHeight), getTableChromeHeight($8.get(captionHeight), $8.get(headerHeight))), rowScrollTop);
+    syncScrollMetrics(element2);
+  }
+  function focusRow(index) {
+    const nextIndex = clampRowIndex(index);
+    $8.set(activeRowIndex, nextIndex, true);
+    scrollToRow(nextIndex);
+    tick().then(() => {
+      const row = $8.get(wrapperElement)?.querySelector(`[data-cinder-data-table-row-index="${nextIndex}"]`);
+      row?.focus({ preventScroll: true });
+    });
+  }
+  function handleRowFocus(index) {
+    $8.set(activeRowIndex, clampRowIndex(index), true);
+  }
+  function handleRowKeydown(event, index) {
+    if (!$8.get(shouldVirtualizeRows))
+      return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusRow(index + 1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusRow(index - 1);
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      focusRow(0);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      focusRow($$props.rows.length - 1);
+    }
+  }
+  var div = root6();
+  $8.attribute_effect(div, ($0) => ({
+    ...rest,
+    class: $0,
+    "data-cinder-virtualized": $8.get(shouldVirtualizeRows) ? "true" : undefined,
+    onscroll: handleWrapperScroll,
+    [$8.STYLE]: {
+      "--cinder-data-table-height": $8.get(shouldVirtualizeRows) ? height() : undefined,
+      "--_cinder-data-table-row-height": $8.get(shouldVirtualizeRows) ? `${$8.get(resolvedRowHeight)}px` : undefined
+    }
+  }), [
+    () => classNames("cinder-data-table", scrollable() || $8.get(shouldVirtualizeRows) ? "cinder-table-scroll" : undefined, $$props.class)
+  ]);
+  var node_7 = $8.child(div);
+  table(node_7);
+  $8.reset(div);
+  $8.bind_this(div, ($$value) => $8.set(wrapperElement, $$value), () => $8.get(wrapperElement));
+  $8.append($$anchor, div);
+  $8.pop();
 }
 
 // src/components/data-table/index.ts
@@ -588,4 +923,4 @@ export {
   Data_table as DataTable
 };
 
-//# debugId=EF2248335063999264756E2164756E21
+//# debugId=581D6FFDE2A96C2A64756E2164756E21