@apple-pie/slice 0.1.43 → 0.1.44

package/dist/cjs/chunks/{ToggleButton-C0ZYea67.js → ToggleButton-cntUrPlb.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), IconButton = require("./IconButton-BfvKRPF0.js"), Label = require("./Label-Cj7pPrQE.js"), css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), IconButton = require("./IconButton-BZttH51z.js"), Label = require("./Label-CLiXfLhU.js"), css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
 
 exports.ToggleButton = function(props) {
     const {label: label, textSize: textSize, icon: icon, iconOn: iconOn, selected: selected = !1, iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-surface-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-surface-secondary)", bgColorOn: bgColorOn = "var(--core-text-special)", iconSize: iconSize = 20, buttonSize: buttonSize = "m", tooltip: tooltip, gap: gap = 4, unselect: unselect = !0, fill: fill = !1, disabled: disabled = !1, border: border = !1, onChange: onChange, onSelect: onSelect, onToolTip: onToolTip, children: children, presetAnimations: presetAnimations, customAnimations: customAnimations} = props, handleClick = () => {

package/dist/cjs/chunks/{UploadArea-DrsgfDME.js → UploadArea-BxBisAJS.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BD1HRncd.js"), FileList = require("./FileList-CQhbZHbY.js"), Icon = require("./Icon-8QuM6PRf.js"), ProgressIndicator = require("./ProgressIndicator-C9bvLrck.js"), css = {
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-Gs698ODr.js"), Icon = require("./Icon-Bmow374B.js"), ProgressIndicator = require("./ProgressIndicator-BBe5EJJB.js"), FileList = require("./FileList-IgK1yREW.js"), css = {
     wrapper: "UploadArea-module_wrapper__aircC flexBox-module_column__ezvMq",
     icon: "UploadArea-module_icon__M7n-m flexBox-module_row__z24tF",
     title: "UploadArea-module_title__VbNGq type-module_body-l-bold__Fh2dt",

package/dist/cjs/chunks/{Video-_nIf0Wt-.js → Video-qiH56WvN.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var PlayState, tslib_es6 = require("./tslib.es6-CY7UXVzV.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BD1HRncd.js"), IconButton = require("./IconButton-BfvKRPF0.js"), Slider = require("./Slider-UDlSHjiR.js"), ToggleButton = require("./ToggleButton-C0ZYea67.js"), 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";
+var PlayState, tslib_es6 = require("./tslib.es6-DfmUmGCa.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-Gs698ODr.js"), IconButton = require("./IconButton-BZttH51z.js"), Slider = require("./Slider-C_iix5E1.js"), ToggleButton = require("./ToggleButton-cntUrPlb.js"), 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";
 
 !function(PlayState) {
     PlayState.Playing = "playing", PlayState.Paused = "paused", PlayState.Stopped = "stopped", 

package/dist/cjs/chunks/{VideoController-CV2tnTh0.js → VideoController-D4_El3jm.js}

@@ -1,12 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CY7UXVzV.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react");
-
-require("./microphoneStore-BdACzgmA.js"), require("./volumeStore-uuVL43b7.js"), 
-require("./webRTCStore-B-E2J01f.js");
-
-var misc = require("./misc-BD1HRncd.js"), IconButton = require("./IconButton-BfvKRPF0.js"), Overlay = require("./Overlay-CWb4rAdA.js"), videoStore = require("./videoStore-B43SSkDF.js"), css_container = "VideoController-module_container__wNiGy", css_box = "VideoController-module_box__a0PRD", css_wrapper = "VideoController-module_wrapper__RhpUo", css_video = "VideoController-module_video__9bS2L";
+var tslib_es6 = require("./tslib.es6-DfmUmGCa.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-Gs698ODr.js"), IconButton = require("./IconButton-BZttH51z.js"), Overlay = require("./Overlay-CH2p-6HE.js"), videoStore = require("./videoStore-sYfx70eD.js"), css_container = "VideoController-module_container__wNiGy", css_box = "VideoController-module_box__a0PRD", css_wrapper = "VideoController-module_wrapper__RhpUo", css_video = "VideoController-module_video__9bS2L";
 
 const defaultTransition = {
     ease: "easeOut",

package/dist/cjs/chunks/{WSConnection-EjlOlufP.js → WSConnection-DbdxZFOV.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CY7UXVzV.js");
+var tslib_es6 = require("./tslib.es6-DfmUmGCa.js");
 
 /**
  * Manage a WebSocket connection with optional unified events, retries, and keep-alive pings.

package/dist/cjs/chunks/{WebRTCConnection-72YFnMm3.js → WebRTCConnection-B9dd6VVp.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CY7UXVzV.js");
+var tslib_es6 = require("./tslib.es6-DfmUmGCa.js");
 
 exports.WebRTCConnection = class {
     /**

package/dist/cjs/chunks/{localDBStore-BHHiMyZH.js → localDBStore-BjxalVAJ.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CY7UXVzV.js"), React = require("react"), zustand = require("zustand"), shallow = require("zustand/react/shallow"), IndexedDB = require("./IndexedDB-Bje9-zII.js");
+var tslib_es6 = require("./tslib.es6-DfmUmGCa.js"), React = require("react"), zustand = require("zustand"), shallow = require("zustand/react/shallow"), IndexedDB = require("./IndexedDB-BtHDgAwP.js");
 
 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/cjs/chunks/{microphoneStore-BdACzgmA.js → microphoneStore-DpUL8kt8.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CY7UXVzV.js"), React = require("react"), zustand = require("zustand");
+var tslib_es6 = require("./tslib.es6-DfmUmGCa.js"), React = require("react"), zustand = require("zustand");
 
 const emptyMicStreamRef = {
     current: null

package/dist/cjs/chunks/{misc-BD1HRncd.js → misc-Gs698ODr.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CY7UXVzV.js");
+var tslib_es6 = require("./tslib.es6-DfmUmGCa.js");
 
 /**
  * Remove scripts, invisible characters, and optional HTML tags from a string.

package/dist/cjs/chunks/{sseStore-m-W_RKIO.js → sseStore-BNAfwXap.js}

@@ -2,9 +2,9 @@
 
 var zustand = require("zustand");
 
-require("./tslib.es6-CY7UXVzV.js");
+require("./tslib.es6-DfmUmGCa.js");
 
-var SSEConnection = require("./SSEConnection-CV7OvpUR.js");
+var SSEConnection = require("./SSEConnection-Z24RvA6i.js");
 
 const useSSEStore = zustand.create((set, get) => ({
     connections: [],

package/dist/cjs/chunks/{uploads-worker-CS_q2jkr.js → uploads-worker-fWbmHWKp.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var FileUploadStatus, UploadError, WorkerStatus, tslib_es6 = require("./tslib.es6-CY7UXVzV.js");
+var FileUploadStatus, UploadError, WorkerStatus, tslib_es6 = require("./tslib.es6-DfmUmGCa.js");
 
 !function(FileUploadStatus) {
     FileUploadStatus.queued = "pending", FileUploadStatus.uploading = "uploading", FileUploadStatus.completed = "completed", 

package/dist/cjs/chunks/{uploadsStore-B9vUKZH5.js → uploadsStore-C-sGeJo9.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var zustand = require("zustand"), uploadsWorker$1 = require("./uploads-worker-CS_q2jkr.js"), _documentCurrentScript = "undefined" != typeof document ? document.currentScript : null;
+var zustand = require("zustand"), uploadsWorker$1 = require("./uploads-worker-fWbmHWKp.js"), _documentCurrentScript = "undefined" != typeof document ? document.currentScript : null;
 
 let uploadsWorker = null;
 
@@ -64,7 +64,7 @@ function handleWorkerMessage(event) {
 const uploadsActions = useUploadsStore.getState().actions;
 
 exports.createUploadsWorker = function(workerUrl) {
-    return new Worker(null != workerUrl ? workerUrl : new URL("../../workers/uploads/uploads.ts", "undefined" == typeof document ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && "SCRIPT" === _documentCurrentScript.tagName.toUpperCase() && _documentCurrentScript.src || new URL("chunks/uploadsStore-B9vUKZH5.js", document.baseURI).href), {
+    return new Worker(null != workerUrl ? workerUrl : new URL("../../workers/uploads/uploads.ts", "undefined" == typeof document ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && "SCRIPT" === _documentCurrentScript.tagName.toUpperCase() && _documentCurrentScript.src || new URL("chunks/uploadsStore-C-sGeJo9.js", document.baseURI).href), {
         type: "module"
     });
 }, exports.getUploads = () => useUploadsStore.getState().uploads, exports.getUploadsError = () => useUploadsStore.getState().error, 

package/dist/cjs/chunks/{viewState-DmgjHoOp.js → viewState-X7EbUCin.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BD1HRncd.js"), Icon = require("./Icon-8QuM6PRf.js"), styles = {
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-Gs698ODr.js"), Icon = require("./Icon-Bmow374B.js"), styles = {
     tableWrapper: "DataTable-module_tableWrapper__BzoJE",
     resizeBar: "DataTable-module_resizeBar__LmzEF",
     table: "DataTable-module_table__oL4Dz",
@@ -8,6 +8,10 @@ var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc =
     baseCellWrapper: "DataTable-module_baseCellWrapper__WMgNm",
     headerCellWrapper: "DataTable-module_headerCellWrapper__ytVYY",
     colResizeHandle: "DataTable-module_colResizeHandle__dF5Es",
+    header: "DataTable-module_header__QgdCY",
+    headerRight: "DataTable-module_headerRight__QHHxv",
+    headerLeft: "DataTable-module_headerLeft__OAzLv",
+    headerTitle: "DataTable-module_headerTitle__K0pmX",
     m: "DataTable-module_m__G9QOp type-module_body-m-regular__LuQBA",
     scroll: "DataTable-module_scroll__grEU0 scrollBars-module_scrollbars__c-ZPl"
 };
@@ -25,53 +29,95 @@ const resolveAlignValue = value => {
         return "flex-end";
     }
 }, resolveDragHandleXPos = elements => {
-    const {cell: cell, handle: handle, parent: parent} = null != elements ? elements : {};
+    const {cell: cell, handle: handle, parent: parent, position: position = "right"} = null != elements ? elements : {};
     if (!cell || !parent || !handle) return;
     const {left: left, width: width} = cell.getBoundingClientRect(), x = left - parent.getBoundingClientRect().left - parent.clientLeft + parent.scrollLeft;
-    handle.style.left = `${x + width}px`;
+    handle.style.left = "right" === position ? `${x + width}px` : `${x}px`;
 };
 
 function DefaultHeaderRenderer(props) {
-    const {col: col, sortKey: sortKey} = props, sortable = !!col.sort, sorted = !(!(null == sortKey ? void 0 : sortKey.key) || sortKey.key !== col.sort), sortIcon = "asc" === (null == sortKey ? void 0 : sortKey.dir) ? "arrow up" : "arrow down", justifyContent = sortable ? "space-between" : resolveAlignValue(col.justify);
+    const {col: col, sortKey: sortKey} = props, sortable = !!col.sort, sorted = !(!(null == sortKey ? void 0 : sortKey.key) || sortKey.key !== col.sort), sortIcon = "asc" === (null == sortKey ? void 0 : sortKey.dir) ? "arrow up" : "arrow down";
     return jsxRuntime.jsxs("div", {
-        style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: justifyContent,
-            width: "100%"
-        },
-        children: [ jsxRuntime.jsx("span", {
-            style: {
-                fontWeight: 540
-            },
+        className: styles.header,
+        children: [ jsxRuntime.jsx("div", {
+            className: styles.headerLeft
+        }), jsxRuntime.jsx("div", {
+            className: styles.headerTitle,
             children: col.title
-        }), sortable && jsxRuntime.jsx(Icon.Icon, {
-            name: sorted ? sortIcon : "blank",
-            size: 16
+        }), jsxRuntime.jsx("div", {
+            className: styles.headerRight,
+            children: sortable && jsxRuntime.jsx(Icon.Icon, {
+                name: sorted ? sortIcon : "blank",
+                pointerEvents: "none",
+                size: 16
+            })
         }) ]
     });
 }
 
+function DefaultCellRenderer(props) {
+    var _a;
+    const {value: value} = props;
+    return null !== (_a = null == value ? void 0 : value.toString()) && void 0 !== _a ? _a : "";
+}
+
 exports.DataTable = function(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} = props, [hScroll, setHScroll] = React.useState(!1), [vScroll, setVScroll] = React.useState(!1), [hoveredRow, setHoveredRow] = React.useState(null), [sortKey, setSortKey] = React.useState(sort), [draggingCol, setDraggingCol] = React.useState(null), [columnWidths, setColumnWidths] = React.useState({}), wrapperRef = React.useRef(null), resizeBarRef = React.useRef(null), colRefs = React.useRef({}), handleResizeEnd = React.useCallback((id, width) => {
-        setColumnWidths(prev => Object.assign(Object.assign({}, prev), {
-            [id]: width
-        })), setDraggingCol(null), null == onColumnResize || onColumnResize(id, width);
-    }, [ onColumnResize ]);
-    !function(element, onResizeEnd) {
-        const [client, setClient] = React.useState(null), [dragging, setDragging] = React.useState(!1), didSetListenersRef = React.useRef(!1), colStartX = React.useRef(0), lastWidthRef = React.useRef(0), hasMovedRef = React.useRef(!1), resolveStartingXPos = React.useCallback(() => (null == element ? void 0 : element.cell) ? element.cell.getBoundingClientRect().left : 0, [ element ]), applyHandlePos = React.useCallback(show => {
-            const {cell: cell, handle: handle, parent: parent} = null != element ? element : {};
+    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] = React.useState(!1), [vScroll, setVScroll] = React.useState(!1), [hoveredRow, setHoveredRow] = React.useState(null), [sortKey, setSortKey] = React.useState(sort), [columnWidths, setColumnWidths] = React.useState({}), [columnOrder, setColumnOrder] = React.useState(null), [draggedColId, setDraggedColId] = React.useState(null), wrapperRef = React.useRef(null), resizeBarRef = React.useRef(null), colRefs = React.useRef({}), elements = {
+        handle: resizeBarRef,
+        parent: wrapperRef
+    }, cornerBoxShadow = React.useMemo(() => {
+        const shadows = [];
+        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
+        vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)"), 
+        vScroll && headerSticky && !hScroll && shadows.push("0 5px 0 rgba(0,0,0,0.1)"), 
+        shadows.length > 0 ? shadows.join(",") : "none";
+    }, [ hScroll, vScroll, freezeColumn, headerSticky ]), columnBoxShadow = React.useMemo(() => {
+        const shadows = [];
+        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
+        shadows.length > 0 ? shadows.join(",") : "none";
+    }, [ hScroll, freezeColumn ]), headerBoxShadow = React.useMemo(() => {
+        const shadows = [];
+        return vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)", "0 5px 0 rgba(0,0,0,0.1)"), 
+        shadows.length > 0 ? shadows.join(",") : "none";
+    }, [ vScroll, headerSticky ]), cssVars = React.useMemo(() => ({
+        "--table-width": misc.setStyle(width),
+        "--table-height": misc.setStyle(height),
+        "--table-background-color": backgroundColor,
+        "--table-column-box-shadow": columnBoxShadow,
+        "--table-header-box-shadow": headerBoxShadow,
+        "--table-corner-box-shadow": cornerBoxShadow,
+        "--table-header-background-color": headerBackgroundColor,
+        "--table-candy-stripe-background-color": candyStripeBackgroundColor,
+        "--table-freeze-column-position": freezeColumn ? "sticky" : "relative",
+        "--table-header-sticky-position": headerSticky ? "sticky" : "relative",
+        "--table-border-color": borderColor,
+        "--table-corner-position": freezeColumn || headerSticky ? "sticky" : "relative",
+        "--table-corner-left": freezeColumn ? "0px" : "unset",
+        "--table-border-width": "none" === borderStyle ? "0" : "1px",
+        "--table-border-sides": "box" === borderStyle ? "1px" : "0",
+        "--table-handle-hover-color": handleHoverColor,
+        "--table-border-radius": "box" === borderStyle ? misc.setStyle(borderRadius) : 0
+    }), [ backgroundColor, headerBackgroundColor, candyStripeBackgroundColor, cornerBoxShadow, columnBoxShadow, headerBoxShadow, freezeColumn, headerSticky, width, height, borderColor, borderStyle, handleHoverColor, borderRadius ]), handleCreateRefs = React.useCallback((el, id) => {
+        colRefs.current[id] = el;
+    }, []), orderedColumns = React.useMemo(() => {
+        if (!columnOrder) return columnDefinitions;
+        const byId = new Map(columnDefinitions.map(column => [ column.id, column ])), ordered = columnOrder.map(id => byId.get(id)).filter(column => !!column), seen = new Set(columnOrder);
+        return [ ...ordered, ...columnDefinitions.filter(column => !seen.has(column.id)) ];
+    }, [ columnDefinitions, columnOrder ]), {dragResize: dragResize, hoverResize: hoverResize} = function(elements, colResize, setColumnWidths, onColumnResize) {
+        const [resizeCol, setResizeCol] = React.useState(null), [client, setClient] = React.useState(null), [resizing, setResizing] = React.useState(!1), didSetListenersRef = React.useRef(!1), colStartX = React.useRef(0), lastWidthRef = React.useRef(0), hasMovedRef = React.useRef(!1), resolveStartingXPos = React.useCallback(() => (null == resizeCol ? void 0 : resizeCol.cell) ? resizeCol.cell.getBoundingClientRect().left : 0, [ resizeCol ]), applyHandlePos = React.useCallback(show => {
+            var _a, _b;
+            const {cell: cell} = null != resizeCol ? resizeCol : {}, handle = null === (_a = elements.handle) || void 0 === _a ? void 0 : _a.current, parent = null === (_b = elements.parent) || void 0 === _b ? void 0 : _b.current;
             !show && handle ? handle.style.left = "-500px" : resolveDragHandleXPos({
                 cell: cell,
                 handle: handle,
                 parent: parent
             });
-        }, [ element ]), applyWidth = React.useCallback(clientX => {
-            if (!(null == element ? void 0 : element.col)) return;
+        }, [ resizeCol, elements ]), applyWidth = React.useCallback(clientX => {
+            if (!(null == resizeCol ? void 0 : resizeCol.col)) return;
             const newWidth = Math.max(0, clientX - colStartX.current);
-            element.col.style.width = `${newWidth}px`, lastWidthRef.current = newWidth, hasMovedRef.current = !0;
-        }, [ element ]), handleMouseMove = React.useCallback(e => {
-            e.stopPropagation(), e.preventDefault(), setDragging(!0);
+            resizeCol.col.style.width = `${newWidth}px`, lastWidthRef.current = newWidth, hasMovedRef.current = !0;
+        }, [ resizeCol ]), handleMouseMove = React.useCallback(e => {
+            e.stopPropagation(), e.preventDefault(), setResizing(!0);
             const nextClientPos = (e => {
                 if (e.type.startsWith("touch")) {
                     const touchEvent = e;
@@ -88,9 +134,14 @@ exports.DataTable = function(props) {
             })(e);
             setClient(nextClientPos), applyWidth(nextClientPos.x), applyHandlePos(!0);
         }, [ applyWidth, applyHandlePos ]), handleMouseUp = React.useCallback(e => {
-            e.stopPropagation(), e.preventDefault(), setDragging(!1), setClient(null), element && hasMovedRef.current && (null == onResizeEnd || onResizeEnd(element.id, lastWidthRef.current)), 
-            applyHandlePos(!1), clearListeners();
-        }, [ element, onResizeEnd, applyHandlePos ]), initListeners = React.useCallback(() => {
+            if (e.stopPropagation(), e.preventDefault(), resizeCol && hasMovedRef.current) {
+                const colId = resizeCol.id, width = lastWidthRef.current;
+                setColumnWidths(prev => Object.assign(Object.assign({}, prev), {
+                    [colId]: width
+                })), null == onColumnResize || onColumnResize(colId, width);
+            }
+            setResizing(!1), setClient(null), applyHandlePos(!1), setResizeCol(null);
+        }, [ resizeCol, applyHandlePos, setColumnWidths, onColumnResize ]), initListeners = React.useCallback(() => {
             didSetListenersRef.current || (document.documentElement.addEventListener("mousemove", handleMouseMove, !1), 
             document.documentElement.addEventListener("mouseup", handleMouseUp, !1), document.documentElement.addEventListener("touchmove", handleMouseMove, !1), 
             document.documentElement.addEventListener("touchend", handleMouseUp, !1), document.documentElement.style.userSelect = "none", 
@@ -102,41 +153,70 @@ exports.DataTable = function(props) {
             document.documentElement.removeEventListener("touchend", handleMouseUp, !1), document.documentElement.style.userSelect = "auto", 
             document.documentElement.style.webkitUserSelect = "auto", document.documentElement.style.cursor = "default", 
             colStartX.current = 0, lastWidthRef.current = 0, hasMovedRef.current = !1, didSetListenersRef.current = !1);
-        }, [ handleMouseMove, handleMouseUp ]);
-        React.useEffect(() => (element ? initListeners() : clearListeners(), () => clearListeners()), [ element, initListeners, clearListeners ]);
-    }(draggingCol, handleResizeEnd);
-    const cornerBoxShadow = React.useMemo(() => {
-        const shadows = [];
-        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
-        vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)"), 
-        vScroll && headerSticky && !hScroll && shadows.push("0 5px 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ hScroll, vScroll, freezeColumn, headerSticky ]), columnBoxShadow = React.useMemo(() => {
-        const shadows = [];
-        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ hScroll, freezeColumn ]), headerBoxShadow = React.useMemo(() => {
-        const shadows = [];
-        return vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)", "0 5px 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ vScroll, headerSticky ]), cssVars = React.useMemo(() => ({
-        "--table-width": misc.setStyle(width),
-        "--table-height": misc.setStyle(height),
-        "--table-background-color": backgroundColor,
-        "--table-column-box-shadow": columnBoxShadow,
-        "--table-header-box-shadow": headerBoxShadow,
-        "--table-corner-box-shadow": cornerBoxShadow,
-        "--table-header-background-color": headerBackgroundColor,
-        "--table-candy-stripe-background-color": candyStripeBackgroundColor,
-        "--table-freeze-column-position": freezeColumn ? "sticky" : "relative",
-        "--table-header-sticky-position": headerSticky ? "sticky" : "relative",
-        "--table-border-color": borderColor,
-        "--table-corner-position": freezeColumn || headerSticky ? "sticky" : "relative",
-        "--table-corner-left": freezeColumn ? "0px" : "unset",
-        "--table-border-width": "none" === borderStyle ? "0" : "1px",
-        "--table-border-sides": "box" === borderStyle ? "1px" : "0",
-        "--table-handle-hover-color": handleHoverColor
-    }), [ backgroundColor, headerBackgroundColor, candyStripeBackgroundColor, cornerBoxShadow, columnBoxShadow, headerBoxShadow, freezeColumn, headerSticky, width, height, borderColor, borderStyle, handleHoverColor ]), handleScroll = React.useCallback(() => {
+        }, [ handleMouseMove, handleMouseUp ]), dragResize = React.useCallback((id, e, colRefs) => {
+            if (e.stopPropagation(), e.preventDefault(), !colResize) return;
+            const cell = e.currentTarget.parentElement, col = colRefs.current[id];
+            cell && col && setResizeCol({
+                id: id,
+                cell: cell,
+                col: col
+            });
+        }, [ colResize ]), hoverResize = React.useCallback((show, e) => {
+            var _a, _b;
+            if (!colResize || resizeCol) return;
+            const cell = e.currentTarget.parentElement, handle = null === (_a = elements.handle) || void 0 === _a ? void 0 : _a.current, parent = null === (_b = elements.parent) || void 0 === _b ? void 0 : _b.current;
+            !show && handle ? handle.style.left = "-500px" : resolveDragHandleXPos({
+                cell: cell,
+                handle: handle,
+                parent: parent
+            });
+        }, [ resizeCol, colResize, elements ]);
+        return React.useEffect(() => (resizeCol ? initListeners() : clearListeners(), () => clearListeners()), [ resizeCol, initListeners, clearListeners ]), 
+        {
+            clientX: null == client ? void 0 : client.x,
+            clientY: null == client ? void 0 : client.y,
+            resizing: resizing,
+            dragResize: dragResize,
+            hoverResize: hoverResize
+        };
+    }(elements, colResize, setColumnWidths, onColumnResize), {dragStart: dragStart, dragOver: dragOver, dragDrop: dragDrop} = function(columnDefinitions, setColumnOrder, setDraggedColId, onColumnReorder, freezeColumn) {
+        const [isDragging, setIsDragging] = React.useState(!1), draggedColId = React.useRef(null), draggedColIndex = React.useRef(null), draggedOverColId = React.useRef(null), initialColumnOrder = React.useRef(null), moveColumn = React.useCallback((draggedId, targetId) => {
+            draggedId !== targetId && setColumnOrder(prev => {
+                const currentOrder = null != prev ? prev : columnDefinitions.map(column => column.id), draggedIndex = currentOrder.indexOf(draggedId), targetIndex = currentOrder.indexOf(targetId);
+                if (-1 === draggedIndex || -1 === targetIndex) return prev;
+                if (freezeColumn && (0 === draggedIndex || 0 === targetIndex)) return prev;
+                let next, insertAt;
+                return initialColumnOrder.current || (initialColumnOrder.current = currentOrder), 
+                targetIndex < draggedIndex ? (next = currentOrder.filter(id => id !== draggedId), 
+                insertAt = next.indexOf(targetId)) : (next = currentOrder.filter(id => id !== draggedId), 
+                insertAt = next.indexOf(targetId) + 1), next.splice(insertAt, 0, draggedId), null == onColumnReorder || onColumnReorder(next), 
+                next;
+            });
+        }, [ columnDefinitions, freezeColumn, onColumnReorder, setColumnOrder ]), dragStart = React.useCallback((col, e) => {
+            e.dataTransfer.setData("text/plain", col.id), draggedColId.current = col.id, setDraggedColId(col.id), 
+            setIsDragging(!0), initialColumnOrder.current = null;
+        }, [ setDraggedColId ]), dragOver = React.useCallback((col, colIndex, e) => {
+            e.preventDefault(), e.stopPropagation(), draggedColIndex.current = colIndex, freezeColumn && 0 === colIndex || draggedOverColId.current !== col.id && draggedColId.current !== col.id && (draggedOverColId.current = col.id, 
+            draggedColId.current && moveColumn(draggedColId.current, col.id));
+        }, [ freezeColumn, moveColumn ]), dragDrop = React.useCallback((e, global = !1) => {
+            e.preventDefault(), initialColumnOrder.current && (global || freezeColumn && 0 === draggedColIndex.current) && (setColumnOrder(initialColumnOrder.current), 
+            null == onColumnReorder || onColumnReorder(initialColumnOrder.current)), setDraggedColId(null), 
+            setIsDragging(!1), draggedOverColId.current = null, draggedColId.current = null, 
+            draggedColIndex.current = null, initialColumnOrder.current = null;
+        }, [ setColumnOrder, setDraggedColId, freezeColumn, onColumnReorder ]), handleGlobalOver = React.useCallback(e => {
+            e.preventDefault(), draggedOverColId.current = null, draggedColIndex.current = null;
+        }, []), handleGlobalDrop = React.useCallback(e => dragDrop(e, !0), [ dragDrop ]);
+        return React.useEffect(() => {
+            if (isDragging) return document.addEventListener("drop", handleGlobalDrop), document.addEventListener("dragover", handleGlobalOver), 
+            () => {
+                document.removeEventListener("drop", handleGlobalDrop), document.removeEventListener("dragover", handleGlobalOver);
+            };
+        }, [ isDragging, handleGlobalDrop, handleGlobalOver ]), {
+            dragStart: dragStart,
+            dragOver: dragOver,
+            dragDrop: dragDrop
+        };
+    }(columnDefinitions, setColumnOrder, setDraggedColId, onColumnReorder, freezeColumn), handleScroll = React.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);
@@ -162,35 +242,41 @@ exports.DataTable = function(props) {
         let didChange = !0;
         (null == sortKey ? void 0 : sortKey.key) === (null == next ? void 0 : next.key) && (null == sortKey ? void 0 : sortKey.dir) === (null == next ? void 0 : next.dir) && (didChange = !1), 
         didChange && (setSortKey(next), null == onSortChange || onSortChange(next));
-    }, [ sortKey, onSortChange ]), renderHeader = React.useCallback((col, sortKey) => col.renderHeader ? col.renderHeader({
-        column: col,
-        sortKey: sortKey
-    }) : jsxRuntime.jsx(DefaultHeaderRenderer, {
-        col: col,
-        sortKey: sortKey
-    }), []), resolveAriaSort = React.useCallback(column => {
+    }, [ sortKey, onSortChange ]), resolveAriaSort = React.useCallback(column => {
         const sortable = void 0 !== column.sort, isSortedColumn = sortable && (null == sortKey ? void 0 : sortKey.key) === column.sort;
         if (sortable) return isSortedColumn ? "asc" === (null == sortKey ? void 0 : sortKey.dir) ? "ascending" : "descending" : void 0;
-    }, [ sortKey ]), handleStartDrag = React.useCallback((id, e) => {
-        if (!colResize) return;
-        const cell = e.currentTarget.parentElement, col = colRefs.current[id], handle = resizeBarRef.current, parent = wrapperRef.current;
-        cell && col && parent && setDraggingCol({
-            id: id,
-            cell: cell,
+    }, [ sortKey ]), renderCellResizeHandle = React.useCallback((last, col) => last || !colResize ? null : jsxRuntime.jsx("div", {
+        className: styles.colResizeHandle,
+        onMouseDown: e => dragResize(col.id, e, colRefs),
+        onMouseOver: e => hoverResize(!0, e),
+        onFocus: e => hoverResize(!0, e),
+        onMouseOut: e => hoverResize(!1, e),
+        onBlur: e => hoverResize(!1, e)
+    }), [ colResize, dragResize, hoverResize ]), renderHeader = React.useCallback((col, sortKey) => {
+        if (col.renderHeader) {
+            return (0, col.renderHeader)({
+                column: col,
+                sortKey: sortKey
+            });
+        }
+        return jsxRuntime.jsx(DefaultHeaderRenderer, {
             col: col,
-            handle: handle,
-            parent: parent
+            sortKey: sortKey
         });
-    }, [ colResize ]), handleHoverDragHandle = React.useCallback((show, e) => {
-        if (!colResize || draggingCol) return;
-        const cell = e.currentTarget.parentElement, handle = resizeBarRef.current, parent = wrapperRef.current;
-        !show && handle ? handle.style.left = "-500px" : resolveDragHandleXPos({
-            cell: cell,
-            handle: handle,
-            parent: parent
+    }, []), renderBodyCell = React.useCallback((col, row, rowIndex) => {
+        const value = function(col, row) {
+            return col.accessor ? col.accessor(row) : void 0 !== col.key ? row[col.key] : void 0;
+        }(col, row);
+        if (col.renderCell) {
+            return (0, col.renderCell)({
+                row: row,
+                value: value,
+                rowIndex: rowIndex
+            });
+        }
+        return jsxRuntime.jsx(DefaultCellRenderer, {
+            value: value
         });
-    }, [ draggingCol, colResize ]), handleCreateRefs = React.useCallback((el, id) => {
-        colRefs.current[id] = el;
     }, []);
     return React.useEffect(() => {
         setSortKey(prev => (null == prev ? void 0 : prev.key) === (null == sort ? void 0 : sort.key) && (null == prev ? void 0 : prev.dir) === (null == sort ? void 0 : sort.dir) ? prev : sort);
@@ -199,15 +285,12 @@ exports.DataTable = function(props) {
         className: `${styles.tableWrapper} ${styles.scroll}`,
         style: cssVars,
         onScroll: handleScroll,
-        children: [ jsxRuntime.jsx("div", {
-            className: styles.resizeBar,
-            ref: resizeBarRef
-        }), jsxRuntime.jsxs("table", {
+        children: [ jsxRuntime.jsxs("table", {
             className: styles.table,
             children: [ jsxRuntime.jsx("caption", {
                 children: caption
             }), jsxRuntime.jsx("colgroup", {
-                children: columnDefinitions.map(column => {
+                children: orderedColumns.map(column => {
                     var _a;
                     return jsxRuntime.jsx("col", {
                         ref: el => handleCreateRefs(el, column.id),
@@ -218,34 +301,39 @@ exports.DataTable = function(props) {
                 })
             }), jsxRuntime.jsx("thead", {
                 children: jsxRuntime.jsx("tr", {
-                    children: columnDefinitions.map(column => {
-                        const padding = misc.setStyle(column.padding, 16), sortable = void 0 !== column.sort, cursor = sortable ? "pointer" : "default";
-                        return jsxRuntime.jsx("th", {
-                            "data-column-id": column.id,
+                    children: orderedColumns.map((col, colIndex) => {
+                        const padding = misc.setStyle(col.padding, 16), sortable = void 0 !== col.sort, cursor = sortable ? "pointer" : "default", last = colIndex === orderedColumns.length - 1, opacity = draggedColId === col.id ? .2 : 1;
+                        return jsxRuntime.jsxs("th", {
+                            "data-column-id": col.id,
                             className: `${styles.baseCell} ${styles.headerCell} ${styles.m}`,
-                            onClick: () => handleSort(column.sort),
-                            onKeyDown: e => misc.accessibleKeyDown(e, () => handleSort(column.sort)),
+                            onClick: () => handleSort(col.sort),
+                            onKeyDown: e => misc.accessibleKeyDown(e, () => handleSort(col.sort)),
                             style: {
-                                cursor: cursor
+                                cursor: cursor,
+                                opacity: opacity
                             },
                             tabIndex: sortable ? 0 : void 0,
                             role: sortable ? "columnheader" : void 0,
-                            "aria-sort": resolveAriaSort(column),
-                            children: jsxRuntime.jsx("div", {
+                            "aria-sort": resolveAriaSort(col),
+                            draggable: !(freezeColumn && 0 === colIndex),
+                            onDragStart: e => dragStart(col, e),
+                            onDragOver: e => dragOver(col, colIndex, e),
+                            onDrop: e => dragDrop(e),
+                            onDragEnd: e => dragDrop(e, !0),
+                            children: [ renderCellResizeHandle(last, col), jsxRuntime.jsx("div", {
                                 className: styles.headerCellWrapper,
                                 style: {
                                     padding: padding
                                 },
-                                children: renderHeader(column, sortKey)
-                            })
-                        }, column.id);
+                                children: renderHeader(col, sortKey)
+                            }) ]
+                        }, col.id);
                     })
                 })
             }), jsxRuntime.jsx("tbody", {
                 children: rows.map((row, rowIndex) => jsxRuntime.jsx("tr", {
-                    children: columnDefinitions.map((col, colIndex) => {
-                        var _a;
-                        const value = col.accessor(row), justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = misc.setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex), notLast = colIndex !== columnDefinitions.length - 1;
+                    children: orderedColumns.map((col, colIndex) => {
+                        const justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = misc.setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex), last = colIndex === orderedColumns.length - 1, opacity = draggedColId === col.id ? .2 : 1;
                         return jsxRuntime.jsxs("td", {
                             "data-column-id": `${colIndex}.${rowIndex}`,
                             className: `${styles.baseCell} ${styles.m}`,
@@ -257,16 +345,10 @@ exports.DataTable = function(props) {
                             onMouseOut: () => handleCellHover(col, colIndex, row, rowIndex, !1),
                             onBlur: () => handleCellHover(col, colIndex, row, rowIndex, !1),
                             style: {
-                                background: background
+                                background: background,
+                                opacity: opacity
                             },
-                            children: [ notLast && colResize && jsxRuntime.jsx("div", {
-                                className: styles.colResizeHandle,
-                                onMouseDown: e => handleStartDrag(col.id, e),
-                                onMouseOver: e => handleHoverDragHandle(!0, e),
-                                onFocus: e => handleHoverDragHandle(!0, e),
-                                onMouseOut: e => handleHoverDragHandle(!1, e),
-                                onBlur: e => handleHoverDragHandle(!1, e)
-                            }), jsxRuntime.jsx("div", {
+                            children: [ renderCellResizeHandle(last, col), jsxRuntime.jsx("div", {
                                 className: styles.baseCellWrapper,
                                 style: {
                                     justifyContent: justifyContent,
@@ -274,16 +356,15 @@ exports.DataTable = function(props) {
                                     padding: padding,
                                     whiteSpace: whiteSpace
                                 },
-                                children: col.renderCell ? col.renderCell({
-                                    row: row,
-                                    value: value,
-                                    rowIndex: rowIndex
-                                }) : null !== (_a = null == value ? void 0 : value.toString()) && void 0 !== _a ? _a : ""
+                                children: renderBodyCell(col, row, rowIndex)
                             }) ]
                         }, col.id);
                     })
                 }, getRowId ? getRowId(row, rowIndex) : rowIndex))
             }) ]
+        }), jsxRuntime.jsx("div", {
+            className: styles.resizeBar,
+            ref: resizeBarRef
         }) ]
     });
 }, exports.applyDataTableViewState = function(columns, state) {

package/dist/cjs/chunks/{volumeStore-uuVL43b7.js → volumeStore--l8gb-3a.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CY7UXVzV.js");
+var tslib_es6 = require("./tslib.es6-DfmUmGCa.js");
 
 const useVolumeStore = require("zustand").create((set, get) => ({
     volume: 1,