@apple-pie/slice 0.1.44 → 0.1.45

package/dist/esm/chunks/{ToggleButton-Cp2K772X.mjs → ToggleButton-BXB_VtB3.mjs}

@@ -3,9 +3,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import { useMemo } from "react";
 
-import { I as IconButton } from "./IconButton-4YlfRQap.mjs";
+import { I as IconButton } from "./IconButton-DIodt9r2.mjs";
 
-import { L as Label } from "./Label-oVWJfERc.mjs";
+import { L as Label } from "./Label-DlYEhytS.mjs";
 
 var css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
 

package/dist/esm/chunks/{UploadArea-DEf5hbbR.mjs → UploadArea-B4jM32ER.mjs}

@@ -3,13 +3,13 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useRef, useId, useCallback, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-B9d7ECMP.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-CWSDLgrI.mjs";
 
-import { I as Icon } from "./Icon-BfSLuS2u.mjs";
+import { I as Icon } from "./Icon-QUVzyYBt.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-Bv7actNC.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-BrLB_HEn.mjs";
 
-import { F as FileList } from "./FileList-rMjli1tu.mjs";
+import { F as FileList } from "./FileList-DhitNTMJ.mjs";
 
 var css = {
     wrapper: "UploadArea-module_wrapper__aircC flexBox-module_column__ezvMq",

package/dist/esm/chunks/{Video-CHmn9myN.mjs → Video-DgkfQgi8.mjs}

@@ -1,17 +1,17 @@
 'use client';
-import { a as __rest, _ as __awaiter } from "./tslib.es6-C0yUTS6p.mjs";
+import { a as __rest, _ as __awaiter } from "./tslib.es6-ChkYAtDK.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
 
-import { s as setStyle } from "./misc-B9d7ECMP.mjs";
+import { s as setStyle } from "./misc-CWSDLgrI.mjs";
 
-import { I as IconButton } from "./IconButton-4YlfRQap.mjs";
+import { I as IconButton } from "./IconButton-DIodt9r2.mjs";
 
-import { S as Slider } from "./Slider-IqjVgxEE.mjs";
+import { S as Slider } from "./Slider-C5FcSmsD.mjs";
 
-import { T as ToggleButton } from "./ToggleButton-Cp2K772X.mjs";
+import { T as ToggleButton } from "./ToggleButton-BXB_VtB3.mjs";
 
 var PlayState, css_wrapper = "Video-module_wrapper__a9iH8", css_video = "Video-module_video__hxKME", css_controls = "Video-module_controls__X4yt6", css_controlsHeader = "Video-module_controlsHeader__dD64-", css_controlsFooter = "Video-module_controlsFooter__qJNTa", css_controlsBody = "Video-module_controlsBody__2GbQz", css_right = "Video-module_right__UMhfW", css_left = "Video-module_left__XC33m", css_progress = "Video-module_progress__UTWtq";
 

package/dist/esm/chunks/{VideoController-BvWVGSY-.mjs → VideoController-M3g4Pwtc.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-C0yUTS6p.mjs";
+import { a as __rest } from "./tslib.es6-ChkYAtDK.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 
@@ -7,13 +7,17 @@ import { useDragControls, AnimatePresence, motion } from "motion/react";
 
 import { useRef, useState, useEffect, useMemo } from "react";
 
-import { s as setStyle } from "./misc-B9d7ECMP.mjs";
+import "./volumeStore-BnfcWvWI.mjs";
 
-import { I as IconButton } from "./IconButton-4YlfRQap.mjs";
+import "./webRTCStore-BUW-j3A9.mjs";
 
-import { O as Overlay } from "./Overlay-DuGDfhI3.mjs";
+import { s as setStyle } from "./misc-CWSDLgrI.mjs";
 
-import { u as useVideo, a as useVideoActions } from "./videoStore-CmUM9swM.mjs";
+import { I as IconButton } from "./IconButton-DIodt9r2.mjs";
+
+import { O as Overlay } from "./Overlay-DfkhMYtD.mjs";
+
+import { u as useVideo, a as useVideoActions } from "./videoStore-Tv0qujkr.mjs";
 
 var css_container = "VideoController-module_container__wNiGy", css_box = "VideoController-module_box__a0PRD", css_wrapper = "VideoController-module_wrapper__RhpUo", css_video = "VideoController-module_video__9bS2L";
 

package/dist/esm/chunks/{WSConnection-gFHF2tW7.mjs → WSConnection-M552mwWy.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-C0yUTS6p.mjs";
+import { _ as __awaiter } from "./tslib.es6-ChkYAtDK.mjs";
 
 /**
  * Manage a WebSocket connection with optional unified events, retries, and keep-alive pings.

package/dist/esm/chunks/{WebRTCConnection-C_MYSUKv.mjs → WebRTCConnection-BZNdtUKO.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-C0yUTS6p.mjs";
+import { _ as __awaiter } from "./tslib.es6-ChkYAtDK.mjs";
 
 class WebRTCConnection {
     /**

package/dist/esm/chunks/{localDBStore-CeqAEGXO.mjs → localDBStore-GmKJfODp.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter, a as __rest } from "./tslib.es6-C0yUTS6p.mjs";
+import { _ as __awaiter, a as __rest } from "./tslib.es6-ChkYAtDK.mjs";
 
 import { useMemo } from "react";
 
@@ -6,7 +6,7 @@ import { create } from "zustand";
 
 import { useShallow } from "zustand/react/shallow";
 
-import { I as IndexedDB } from "./IndexedDB-DrgyB0PG.mjs";
+import { I as IndexedDB } from "./IndexedDB-DHk5y9UO.mjs";
 
 function isValidIDBKey(key) {
     return "string" == typeof key || "number" == typeof key || key instanceof Date || key instanceof ArrayBuffer || (Array.isArray(key) ? key.every(entry => isValidIDBKey(entry)) : ArrayBuffer.isView(key));

package/dist/esm/chunks/{microphoneStore-DGfGaTKO.mjs → microphoneStore-CvhusEyi.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __awaiter } from "./tslib.es6-C0yUTS6p.mjs";
+import { _ as __awaiter } from "./tslib.es6-ChkYAtDK.mjs";
 
 import { useEffect } from "react";
 

package/dist/esm/chunks/{misc-B9d7ECMP.mjs → misc-CWSDLgrI.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-C0yUTS6p.mjs";
+import { _ as __awaiter } from "./tslib.es6-ChkYAtDK.mjs";
 
 /**
  * Remove scripts, invisible characters, and optional HTML tags from a string.

package/dist/esm/chunks/rafThrottle-BX_UbPqi.mjs

@@ -0,0 +1,23 @@
+/**
+ * Coalesce rapid calls (scroll, pointermove, resize) down to at most one
+ * invocation per animation frame, always using the most recently passed
+ * arguments. Unlike `debounce`, this never waits for activity to stop - the
+ * first call in a frame schedules the frame, every call after that until the
+ * frame fires just updates the pending args, and dropped intermediate calls
+ * never run at all.
+ */
+function rafThrottle(func) {
+    let frameId = null, lastArgs = null;
+    const throttled = function(...args) {
+        lastArgs = args, null === frameId && (frameId = requestAnimationFrame(() => {
+            frameId = null;
+            const argsToApply = lastArgs;
+            lastArgs = null, argsToApply && func.apply(this, argsToApply);
+        }));
+    };
+    return throttled.cancel = () => {
+        null !== frameId && (cancelAnimationFrame(frameId), frameId = null), lastArgs = null;
+    }, throttled;
+}
+
+export { rafThrottle as r };

package/dist/esm/chunks/{sseStore-PGCxQBZ-.mjs → sseStore-CBd7nxYG.mjs}

@@ -1,8 +1,8 @@
 import { create } from "zustand";
 
-import "./tslib.es6-C0yUTS6p.mjs";
+import "./tslib.es6-ChkYAtDK.mjs";
 
-import { S as SSEConnection } from "./SSEConnection-BzSx2MVL.mjs";
+import { S as SSEConnection } from "./SSEConnection-CgipQWUg.mjs";
 
 const useSSEStore = create((set, get) => ({
     connections: [],

package/dist/esm/chunks/{uploads-worker-SXS-_T5t.mjs → uploads-worker-Dg7tuCe8.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-C0yUTS6p.mjs";
+import { _ as __awaiter } from "./tslib.es6-ChkYAtDK.mjs";
 
 var FileUploadStatus, UploadError, WorkerStatus;
 

package/dist/esm/chunks/{uploadsStore-CZQGe1-z.mjs → uploadsStore-bAoNL5My.mjs}

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 
-import { W as WorkerStatus } from "./uploads-worker-SXS-_T5t.mjs";
+import { W as WorkerStatus } from "./uploads-worker-Dg7tuCe8.mjs";
 
 let uploadsWorker = null;
 

package/dist/esm/chunks/{viewState-po_PH0Tv.mjs → viewState-C-AmMZQr.mjs}

@@ -2,9 +2,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 import React, { useCallback, useEffect, useState, useRef, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-B9d7ECMP.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-CWSDLgrI.mjs";
 
-import { I as Icon } from "./Icon-BfSLuS2u.mjs";
+import { I as Icon } from "./Icon-QUVzyYBt.mjs";
+
+import "../theme/colors.mjs";
+
+import "./tslib.es6-ChkYAtDK.mjs";
+
+import { r as rafThrottle } from "./rafThrottle-BX_UbPqi.mjs";
+
+import "./webRTCStore-BUW-j3A9.mjs";
+
+import "./volumeStore-BnfcWvWI.mjs";
+
+import "../hooks/useWindow.mjs";
+
+import { useObserveResize } from "../hooks/useObserveResize.mjs";
 
 var styles = {
     tableWrapper: "DataTable-module_tableWrapper__BzoJE",
@@ -49,8 +63,10 @@ const resolveAlignValue = value => {
     handle.style.left = "right" === position ? `${x + width}px` : `${x}px`;
 };
 
+const DEFAULT_OVERSCAN = 25;
+
 function DataTable(props) {
-    const {backgroundColor: backgroundColor = "var(--core-surface-primary)", headerBackgroundColor: headerBackgroundColor = "var(--core-surface-secondary)", candyStripeBackgroundColor: candyStripeBackgroundColor = "var(--core-surface-primary-tint)", backgroundColorHoverRow: backgroundColorHoverRow = "var(--core-surface-primary-tint)", handleHoverColor: handleHoverColor = "var(--core-outline-special)", freezeColumn: freezeColumn = !1, headerSticky: headerSticky = !0, height: height = "auto", width: width = "100%", colResize: colResize = !0, borderColor: borderColor = "var(--core-outline-primary)", borderStyle: borderStyle = "box", columnDefinitions: columnDefinitions = [], tableData: tableData = [], getRowId: getRowId, filter: filter, caption: caption = "Data Table", onDoubleClick: onDoubleClick, onClick: onClick, onMouseOut: onMouseOut, onMouseOver: onMouseOver, sort: sort, onSortChange: onSortChange, onColumnResize: onColumnResize, onColumnReorder: onColumnReorder, borderRadius: borderRadius = 8} = props, [hScroll, setHScroll] = useState(!1), [vScroll, setVScroll] = useState(!1), [hoveredRow, setHoveredRow] = useState(null), [sortKey, setSortKey] = useState(sort), [columnWidths, setColumnWidths] = useState({}), [columnOrder, setColumnOrder] = useState(null), [draggedColId, setDraggedColId] = useState(null), wrapperRef = React.useRef(null), resizeBarRef = React.useRef(null), colRefs = React.useRef({}), elements = {
+    const {backgroundColor: backgroundColor = "var(--core-surface-primary)", headerBackgroundColor: headerBackgroundColor = "var(--core-surface-secondary)", candyStripeBackgroundColor: candyStripeBackgroundColor = "var(--core-surface-primary-tint)", backgroundColorHoverRow: backgroundColorHoverRow = "var(--core-surface-primary-tint)", handleHoverColor: handleHoverColor = "var(--core-outline-special)", freezeColumn: freezeColumn = !1, headerSticky: headerSticky = !0, height: height = "auto", width: width = "100%", colResize: colResize = !0, borderColor: borderColor = "var(--core-outline-primary)", borderStyle: borderStyle = "box", columnDefinitions: columnDefinitions = [], tableData: tableData = [], getRowId: getRowId, filter: filter, caption: caption = "Data Table", onDoubleClick: onDoubleClick, onClick: onClick, onMouseOut: onMouseOut, onMouseOver: onMouseOver, sort: sort, onSortChange: onSortChange, onColumnResize: onColumnResize, onColumnReorder: onColumnReorder, borderRadius: borderRadius = 8, virtualizeRows: virtualizeRows, virtualizeRowThreshold: virtualizeRowThreshold = 200, rowHeight: rowHeight = 44, overscanRows: overscanRows} = props, [hScroll, setHScroll] = useState(!1), [vScroll, setVScroll] = useState(!1), [hoveredRow, setHoveredRow] = useState(null), [sortKey, setSortKey] = useState(sort), [columnWidths, setColumnWidths] = useState({}), [columnOrder, setColumnOrder] = useState(null), [draggedColId, setDraggedColId] = useState(null), wrapperRef = React.useRef(null), resizeBarRef = React.useRef(null), colRefs = React.useRef({}), elements = {
         handle: resizeBarRef,
         parent: wrapperRef
     }, cornerBoxShadow = useMemo(() => {
@@ -204,16 +220,60 @@ function DataTable(props) {
             dragOver: dragOver,
             dragDrop: dragDrop
         };
-    }(columnDefinitions, setColumnOrder, setDraggedColId, onColumnReorder, freezeColumn), handleScroll = useCallback(() => {
-        var _a, _b, _c, _d;
-        const hScrollAmount = null !== (_b = null === (_a = wrapperRef.current) || void 0 === _a ? void 0 : _a.scrollLeft) && void 0 !== _b ? _b : 0, vScrollAmount = null !== (_d = null === (_c = wrapperRef.current) || void 0 === _c ? void 0 : _c.scrollTop) && void 0 !== _d ? _d : 0;
-        setHScroll(hScrollAmount > 0), setVScroll(vScrollAmount > 0);
-    }, []), rows = useMemo(() => [ ...filter ? tableData.filter((row, index, array) => filter(row, index, array)) : tableData ].sort((a, b) => {
+    }(columnDefinitions, setColumnOrder, setDraggedColId, onColumnReorder, freezeColumn), rows = useMemo(() => [ ...filter ? tableData.filter((row, index, array) => filter(row, index, array)) : tableData ].sort((a, b) => {
         if (!(null == sortKey ? void 0 : sortKey.key)) return 0;
         const {key: key, dir: dir} = sortKey;
         if (a[key] === b[key]) return 0;
         return (a[key] > b[key] ? 1 : -1) * ("desc" === dir ? -1 : 1);
-    }), [ tableData, filter, sortKey ]), handleCellHover = useCallback((col, colId, row, rowId, over) => {
+    }), [ tableData, filter, sortKey ]), shouldVirtualize = (explicit = virtualizeRows, 
+    rowCount = rows.length, threshold = virtualizeRowThreshold, null != explicit ? explicit : rowCount > threshold);
+    var explicit, rowCount, threshold;
+    const rowWindow = function(wrapperRef, rowCount, options) {
+        const {enabled: enabled, rowHeight: rowHeight, overscan: overscan = DEFAULT_OVERSCAN} = options, viewport = useObserveResize(enabled ? wrapperRef : void 0, {
+            ignore: "width"
+        }), [scrollTop, setScrollTop] = useState(0), throttledSetScrollTop = useMemo(() => rafThrottle(value => setScrollTop(value)), []);
+        useEffect(() => () => throttledSetScrollTop.cancel(), [ throttledSetScrollTop ]);
+        const handleScroll = useCallback(nextScrollTop => {
+            enabled && throttledSetScrollTop(nextScrollTop);
+        }, [ enabled, throttledSetScrollTop ]);
+        return useEffect(() => {
+            if (!enabled) return;
+            const maxScrollTop = Math.max(0, rowCount * rowHeight - (viewport.height || 0));
+            setScrollTop(prev => prev <= maxScrollTop ? prev : (wrapperRef.current && (wrapperRef.current.scrollTop = 0), 
+            0));
+        }, [ enabled, rowCount, rowHeight, viewport.height, wrapperRef ]), useMemo(() => {
+            if (!enabled || rowHeight <= 0) return {
+                enabled: !1,
+                startIndex: 0,
+                endIndex: rowCount,
+                topSpacerHeight: 0,
+                bottomSpacerHeight: 0,
+                handleScroll: handleScroll
+            };
+            const viewportHeight = viewport.height || 0, visibleCount = Math.ceil(viewportHeight / rowHeight), firstVisible = Math.floor(scrollTop / rowHeight), startIndex = Math.max(0, firstVisible - overscan), endIndex = Math.min(rowCount, firstVisible + visibleCount + overscan);
+            return {
+                enabled: !0,
+                startIndex: startIndex,
+                endIndex: endIndex,
+                topSpacerHeight: startIndex * rowHeight,
+                bottomSpacerHeight: Math.max(0, rowCount - endIndex) * rowHeight,
+                handleScroll: handleScroll
+            };
+        }, [ enabled, rowHeight, overscan, rowCount, viewport.height, scrollTop, handleScroll ]);
+    }(wrapperRef, rows.length, {
+        enabled: shouldVirtualize,
+        rowHeight: rowHeight,
+        overscan: overscanRows
+    });
+    useEffect(() => {
+        "production" !== process.env.NODE_ENV && (shouldVirtualize && "auto" === height && console.warn('[DataTable] `virtualizeRows` needs a bounded `height` (e.g. a fixed px or vh value) to create a scrollable viewport smaller than the full row count - with height="auto" the wrapper grows to fit every row and there\'s nothing to trim.'), 
+        shouldVirtualize && !getRowId && console.warn("[DataTable] `virtualizeRows` is on without `getRowId`. Rows fall back to index-based keys, which can misattach hover/focus state to the wrong row as the window scrolls - pass `getRowId` for stable identity."));
+    }, [ shouldVirtualize, height, getRowId ]);
+    const handleScroll = useCallback(() => {
+        var _a, _b, _c, _d;
+        const hScrollAmount = null !== (_b = null === (_a = wrapperRef.current) || void 0 === _a ? void 0 : _a.scrollLeft) && void 0 !== _b ? _b : 0, vScrollAmount = null !== (_d = null === (_c = wrapperRef.current) || void 0 === _c ? void 0 : _c.scrollTop) && void 0 !== _d ? _d : 0;
+        setHScroll(hScrollAmount > 0), setVScroll(vScrollAmount > 0), rowWindow.handleScroll(vScrollAmount);
+    }, [ rowWindow.handleScroll ]), handleCellHover = useCallback((col, colId, row, rowId, over) => {
         over ? (setHoveredRow(rowId), onMouseOver && onMouseOver(col, colId, row, rowId)) : (setHoveredRow(prev => prev === rowId ? null : prev), 
         onMouseOut && onMouseOut(col, colId, row, rowId));
     }, [ onMouseOut, onMouseOver ]), handleClick = useCallback((col, colId, row, rowId, dbl) => {
@@ -275,6 +335,7 @@ function DataTable(props) {
         onScroll: handleScroll,
         children: [ jsxs("table", {
             className: styles.table,
+            "aria-rowcount": rowWindow.enabled ? rows.length + 1 : void 0,
             children: [ jsx("caption", {
                 children: caption
             }), jsx("colgroup", {
@@ -290,7 +351,7 @@ function DataTable(props) {
             }), jsx("thead", {
                 children: jsx("tr", {
                     children: orderedColumns.map((col, colIndex) => {
-                        const padding = setStyle(col.padding, 16), sortable = void 0 !== col.sort, cursor = sortable ? "pointer" : "default", last = colIndex === orderedColumns.length - 1, opacity = draggedColId === col.id ? .2 : 1;
+                        const padding = setStyle(col.padding, 16), sortable = void 0 !== col.sort, cursor = sortable ? "pointer" : "default", last = colIndex === orderedColumns.length - 1, background = draggedColId === col.id ? backgroundColor : headerBackgroundColor;
                         return jsxs("th", {
                             "data-column-id": col.id,
                             className: `${styles.baseCell} ${styles.headerCell} ${styles.m}`,
@@ -298,7 +359,7 @@ function DataTable(props) {
                             onKeyDown: e => accessibleKeyDown(e, () => handleSort(col.sort)),
                             style: {
                                 cursor: cursor,
-                                opacity: opacity
+                                background: background
                             },
                             tabIndex: sortable ? 0 : void 0,
                             role: sortable ? "columnheader" : void 0,
@@ -318,37 +379,62 @@ function DataTable(props) {
                         }, col.id);
                     })
                 })
-            }), jsx("tbody", {
-                children: rows.map((row, rowIndex) => jsx("tr", {
-                    children: orderedColumns.map((col, colIndex) => {
-                        const justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex), last = colIndex === orderedColumns.length - 1, opacity = draggedColId === col.id ? .2 : 1;
-                        return jsxs("td", {
-                            "data-column-id": `${colIndex}.${rowIndex}`,
-                            className: `${styles.baseCell} ${styles.m}`,
-                            onClick: () => handleClick(col, colIndex, row, rowIndex, !1),
-                            onDoubleClick: () => handleClick(col, colIndex, row, rowIndex, !0),
-                            onKeyDown: e => accessibleKeyDown(e, () => handleClick(col, colIndex, row, rowIndex, !1)),
-                            onMouseOver: () => handleCellHover(col, colIndex, row, rowIndex, !0),
-                            onFocus: () => handleCellHover(col, colIndex, row, rowIndex, !0),
-                            onMouseOut: () => handleCellHover(col, colIndex, row, rowIndex, !1),
-                            onBlur: () => handleCellHover(col, colIndex, row, rowIndex, !1),
-                            style: {
-                                background: background,
-                                opacity: opacity
-                            },
-                            children: [ renderCellResizeHandle(last, col), jsx("div", {
-                                className: styles.baseCellWrapper,
+            }), jsxs("tbody", {
+                children: [ rowWindow.enabled && rowWindow.topSpacerHeight > 0 && jsx("tr", {
+                    children: jsx("td", {
+                        colSpan: orderedColumns.length,
+                        style: {
+                            height: rowWindow.topSpacerHeight,
+                            padding: 0,
+                            border: 0,
+                            background: backgroundColor
+                        }
+                    })
+                }), (rowWindow.enabled ? rows.slice(rowWindow.startIndex, rowWindow.endIndex) : rows).map((row, localIndex) => {
+                    const rowIndex = rowWindow.enabled ? rowWindow.startIndex + localIndex : localIndex, isLastRow = rowIndex === rows.length - 1;
+                    return jsx("tr", {
+                        "aria-rowindex": rowWindow.enabled ? rowIndex + 2 : void 0,
+                        children: orderedColumns.map((col, colIndex) => {
+                            const justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex), last = colIndex === orderedColumns.length - 1, opacity = draggedColId === col.id ? .2 : 1, borderBottom = rowWindow.enabled && isLastRow && rowWindow.bottomSpacerHeight > 0 ? 0 : void 0;
+                            return jsxs("td", {
+                                "data-column-id": `${colIndex}.${rowIndex}`,
+                                className: `${styles.baseCell} ${styles.m}`,
+                                onClick: () => handleClick(col, colIndex, row, rowIndex, !1),
+                                onDoubleClick: () => handleClick(col, colIndex, row, rowIndex, !0),
+                                onKeyDown: e => accessibleKeyDown(e, () => handleClick(col, colIndex, row, rowIndex, !1)),
+                                onMouseOver: () => handleCellHover(col, colIndex, row, rowIndex, !0),
+                                onFocus: () => handleCellHover(col, colIndex, row, rowIndex, !0),
+                                onMouseOut: () => handleCellHover(col, colIndex, row, rowIndex, !1),
+                                onBlur: () => handleCellHover(col, colIndex, row, rowIndex, !1),
                                 style: {
-                                    justifyContent: justifyContent,
-                                    alignItems: alignItems,
-                                    padding: padding,
-                                    whiteSpace: whiteSpace
+                                    background: background,
+                                    opacity: opacity,
+                                    borderBottom: borderBottom
                                 },
-                                children: renderBodyCell(col, row, rowIndex)
-                            }) ]
-                        }, col.id);
+                                children: [ renderCellResizeHandle(last, col), jsx("div", {
+                                    className: styles.baseCellWrapper,
+                                    style: {
+                                        justifyContent: justifyContent,
+                                        alignItems: alignItems,
+                                        padding: padding,
+                                        whiteSpace: whiteSpace
+                                    },
+                                    children: renderBodyCell(col, row, rowIndex)
+                                }) ]
+                            }, col.id);
+                        })
+                    }, getRowId ? getRowId(row, rowIndex) : rowIndex);
+                }), rowWindow.enabled && rowWindow.bottomSpacerHeight > 0 && jsx("tr", {
+                    children: jsx("td", {
+                        colSpan: orderedColumns.length,
+                        style: {
+                            height: rowWindow.bottomSpacerHeight,
+                            padding: 0,
+                            border: 0,
+                            background: backgroundColor
+                        }
                     })
-                }, getRowId ? getRowId(row, rowIndex) : rowIndex))
+                }) ]
             }) ]
         }), jsx("div", {
             className: styles.resizeBar,

package/dist/esm/chunks/{volumeStore-BSE--DBm.mjs → volumeStore-BnfcWvWI.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-C0yUTS6p.mjs";
+import { _ as __awaiter } from "./tslib.es6-ChkYAtDK.mjs";
 
 import { create } from "zustand";
 

package/dist/esm/chunks/{webRTCStore-rzdk9ao2.mjs → webRTCStore-BUW-j3A9.mjs}

@@ -1,8 +1,8 @@
-import { _ as __awaiter } from "./tslib.es6-C0yUTS6p.mjs";
+import { _ as __awaiter } from "./tslib.es6-ChkYAtDK.mjs";
 
 import { create } from "zustand";
 
-import { W as WebRTCConnection } from "./WebRTCConnection-C_MYSUKv.mjs";
+import { W as WebRTCConnection } from "./WebRTCConnection-BZNdtUKO.mjs";
 
 const useWebRTCStore = create((set, get) => ({
     connections: [],

package/dist/esm/chunks/{windowStore-CMPgwtfm.mjs → windowStore-CW_UBAZc.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-C0yUTS6p.mjs";
+import { _ as __awaiter } from "./tslib.es6-ChkYAtDK.mjs";
 
 import { create } from "zustand";
 

package/dist/esm/components/AudioBubble/index.mjs

@@ -1,6 +1,6 @@
-export { A as AudioBubble } from "../../chunks/AudioBubble-RS8y7dsg.mjs";
+export { A as AudioBubble } from "../../chunks/AudioBubble-C8RHNRZ_.mjs";
 
-import "../../chunks/tslib.es6-C0yUTS6p.mjs";
+import "../../chunks/tslib.es6-ChkYAtDK.mjs";
 
 import "react/jsx-runtime";
 
@@ -24,8 +24,16 @@ import "../../theme/type.mjs";
 
 import "../../hooks/useObserveTheme.mjs";
 
-import "../../chunks/colors-DcRJdJ4W.mjs";
+import "../../chunks/colors-BuApx_ML.mjs";
 
-import "../../chunks/audioVisualizer-CKobQkae.mjs";
+import "../../chunks/audioVisualizer-PV2YALCi.mjs";
+
+import "../../chunks/webRTCStore-BUW-j3A9.mjs";
+
+import "zustand";
+
+import "../../chunks/WebRTCConnection-BZNdtUKO.mjs";
+
+import "../../chunks/volumeStore-BnfcWvWI.mjs";
 
 import "../../hooks/useWindow.mjs";

package/dist/esm/components/Avatar/index.mjs

@@ -1,9 +1,9 @@
-export { A as Avatar } from "../../chunks/Avatar-aAJORBJw.mjs";
+export { A as Avatar } from "../../chunks/Avatar-B5dBNLzt.mjs";
 
-import "../../chunks/tslib.es6-C0yUTS6p.mjs";
+import "../../chunks/tslib.es6-ChkYAtDK.mjs";
 
 import "react/jsx-runtime";
 
 import "react";
 
-import "../../chunks/misc-B9d7ECMP.mjs";
+import "../../chunks/misc-CWSDLgrI.mjs";

package/dist/esm/components/AvatarGroup/index.mjs

@@ -1,11 +1,11 @@
-export { A as AvatarGroup } from "../../chunks/AvatarGroup-De2PfopD.mjs";
+export { A as AvatarGroup } from "../../chunks/AvatarGroup-CXIojYDR.mjs";
 
-import "../../chunks/tslib.es6-C0yUTS6p.mjs";
+import "../../chunks/tslib.es6-ChkYAtDK.mjs";
 
 import "react/jsx-runtime";
 
 import "react";
 
-import "../../chunks/Avatar-aAJORBJw.mjs";
+import "../../chunks/Avatar-B5dBNLzt.mjs";
 
-import "../../chunks/misc-B9d7ECMP.mjs";
+import "../../chunks/misc-CWSDLgrI.mjs";

package/dist/esm/components/Badge/index.mjs

@@ -1,6 +1,6 @@
-export { B as Badge } from "../../chunks/Badge--3RVYqU8.mjs";
+export { B as Badge } from "../../chunks/Badge-CMEuRMVe.mjs";
 
-import "../../chunks/tslib.es6-C0yUTS6p.mjs";
+import "../../chunks/tslib.es6-ChkYAtDK.mjs";
 
 import "react/jsx-runtime";
 

package/dist/esm/components/Button/index.mjs

@@ -1,6 +1,6 @@
-export { B as Button } from "../../chunks/Button-BdZR6DjE.mjs";
+export { B as Button } from "../../chunks/Button-DvW5z2Fy.mjs";
 
-import "../../chunks/tslib.es6-C0yUTS6p.mjs";
+import "../../chunks/tslib.es6-ChkYAtDK.mjs";
 
 import "react/jsx-runtime";
 
@@ -8,11 +8,11 @@ import "motion/react";
 
 import "react";
 
-import "../../chunks/Badge--3RVYqU8.mjs";
+import "../../chunks/Badge-CMEuRMVe.mjs";
 
-import "../../chunks/Dot-B4fdZ-qc.mjs";
+import "../../chunks/Dot-zriuPgn8.mjs";
 
-import "../../chunks/Icon-BfSLuS2u.mjs";
+import "../../chunks/Icon-QUVzyYBt.mjs";
 
 import "../../hooks/useTheme.mjs";
 
@@ -32,10 +32,18 @@ import "../../theme/type.mjs";
 
 import "../../hooks/useObserveTheme.mjs";
 
-import "../../chunks/misc-B9d7ECMP.mjs";
+import "../../chunks/misc-CWSDLgrI.mjs";
+
+import "../../chunks/webRTCStore-BUW-j3A9.mjs";
+
+import "zustand";
+
+import "../../chunks/WebRTCConnection-BZNdtUKO.mjs";
+
+import "../../chunks/volumeStore-BnfcWvWI.mjs";
 
 import "../../hooks/useWindow.mjs";
 
-import "../../chunks/ProgressIndicator-Bv7actNC.mjs";
+import "../../chunks/ProgressIndicator-BrLB_HEn.mjs";
 
-import "../../chunks/sharedTypes-DikFhWJ8.mjs";
+import "../../chunks/sharedTypes-BPqmyLRY.mjs";

package/dist/esm/components/ButtonBar/index.mjs

@@ -1,14 +1,14 @@
-export { B as ButtonBar } from "../../chunks/ButtonBar-aXeHOw1R.mjs";
+export { B as ButtonBar } from "../../chunks/ButtonBar-CFxfVpe3.mjs";
 
-import "../../chunks/tslib.es6-C0yUTS6p.mjs";
+import "../../chunks/tslib.es6-ChkYAtDK.mjs";
 
 import "react/jsx-runtime";
 
 import "react";
 
-import "../../chunks/misc-B9d7ECMP.mjs";
+import "../../chunks/misc-CWSDLgrI.mjs";
 
-import "../../chunks/Icon-BfSLuS2u.mjs";
+import "../../chunks/Icon-QUVzyYBt.mjs";
 
 import "../../hooks/useTheme.mjs";
 
@@ -28,4 +28,12 @@ import "../../theme/type.mjs";
 
 import "../../hooks/useObserveTheme.mjs";
 
+import "../../chunks/webRTCStore-BUW-j3A9.mjs";
+
+import "zustand";
+
+import "../../chunks/WebRTCConnection-BZNdtUKO.mjs";
+
+import "../../chunks/volumeStore-BnfcWvWI.mjs";
+
 import "../../hooks/useWindow.mjs";

package/dist/esm/components/Camera/index.mjs

@@ -1,6 +1,6 @@
-export { C as Camera } from "../../chunks/Camera-1ccvR8X_.mjs";
+export { C as Camera } from "../../chunks/Camera-BV_CFREh.mjs";
 
-import "../../chunks/tslib.es6-C0yUTS6p.mjs";
+import "../../chunks/tslib.es6-ChkYAtDK.mjs";
 
 import "react/jsx-runtime";
 
@@ -24,12 +24,20 @@ import "../../theme/type.mjs";
 
 import "../../hooks/useObserveTheme.mjs";
 
-import "../../chunks/misc-B9d7ECMP.mjs";
+import "../../chunks/misc-CWSDLgrI.mjs";
 
-import "../../chunks/colors-DcRJdJ4W.mjs";
+import "../../chunks/colors-BuApx_ML.mjs";
+
+import "../../chunks/webRTCStore-BUW-j3A9.mjs";
+
+import "zustand";
+
+import "../../chunks/WebRTCConnection-BZNdtUKO.mjs";
+
+import "../../chunks/volumeStore-BnfcWvWI.mjs";
 
 import "../../hooks/useWindow.mjs";
 
-import "../../chunks/Avatar-aAJORBJw.mjs";
+import "../../chunks/Avatar-B5dBNLzt.mjs";
 
-import "../../chunks/Icon-BfSLuS2u.mjs";
+import "../../chunks/Icon-QUVzyYBt.mjs";