From fafc94237e92e68089bba0b21601547bdee652d6 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 13 Sep 2025 18:48:39 +0530
Subject: [PATCH 1/6] fix: dual sided resizing.

---
 v2/pink-sb/src/lib/spreadsheet/Root.svelte    | 22 ++++++-
 .../spreadsheet/Spreadsheet.stories.svelte    | 57 +++++++++++++++++++
 2 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/spreadsheet/Root.svelte b/v2/pink-sb/src/lib/spreadsheet/Root.svelte
index 6b2d86e6f1..78b7a0a026 100644
--- a/v2/pink-sb/src/lib/spreadsheet/Root.svelte
+++ b/v2/pink-sb/src/lib/spreadsheet/Root.svelte
@@ -243,7 +243,27 @@
             }
         }
 
-        if (!hasFlexibleColumn && scrollable.length > 0) {
+        let flexCount = scrollable.filter((col) => col.includes('1fr')).length;
+
+        if (flexCount > 1) {
+            let flexSeen = 0;
+            for (let i = 0; i < scrollable.length; i++) {
+                if (scrollable[i].includes('1fr')) {
+                    flexSeen++;
+                    if (flexSeen < flexCount) {
+                        const column = nonActionCols[i];
+                        const minWidth =
+                            column.width &&
+                            typeof column.width === 'object' &&
+                            'min' in column.width
+                                ? column.width.min
+                                : ESTIMATED_ROW_HEIGHT;
+                        scrollable[i] = `${minWidth}px`;
+                    }
+                }
+            }
+            hasFlexibleColumn = true;
+        } else if (!hasFlexibleColumn && scrollable.length > 0) {
             const lastIndex = scrollable.length - 1;
             const lastColumn = nonActionCols[lastIndex];
             const minWidth =
diff --git a/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte b/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
index e213b0d3b6..a4b8bfd841 100644
--- a/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
+++ b/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
@@ -1043,6 +1043,63 @@
     </Spreadsheet.Root>
 </Story>
 
+<Story name="Resize stability">
+    {@const columns = baseColumnsInternal}
+    {@const resizeRows = baseDataInternal.slice(0, 5)}
+    {@const resizeColumns = [...columns.slice(0, 4), columns[columns.length - 1]]}
+
+    <Spreadsheet.Root let:root columns={resizeColumns}>
+        <svelte:fragment slot="header" let:root>
+            {#each resizeColumns as col}
+                <Spreadsheet.Header.Cell {root} column={col.id} icon={col.meta?.icon}>
+                    {#if col.meta?.isPrimary}
+                        <Layout.Stack direction="row" inline alignItems="center">
+                            {#if col.meta?.icon}
+                                <Icon icon={col.meta.icon} color="--fgcolor-neutral-tertiary" />
+                            {/if}
+                            {col.meta?.label ?? col.id}
+                        </Layout.Stack>
+                    {:else if col.isAction}
+                        <Button.Button icon variant="extra-compact">
+                            <Icon icon={IconPlus} color="--fgcolor-neutral-tertiary" />
+                        </Button.Button>
+                    {:else}
+                        {col.meta?.label ?? col.id}
+                    {/if}
+                </Spreadsheet.Header.Cell>
+            {/each}
+        </svelte:fragment>
+
+        {#each resizeRows as row}
+            <Spreadsheet.Row.Base {root} id={row.id}>
+                {#each resizeColumns as col}
+                    <Spreadsheet.Cell
+                        {root}
+                        column={col.id}
+                        value={getCellValue(row, col.id)}
+                        isEditable={false}
+                    >
+                        {#if col.isAction}
+                            <Button.Button icon variant="extra-compact">
+                                <Icon icon={IconDotsHorizontal} />
+                            </Button.Button>
+                        {:else}
+                            <Typography.Text>{getCellValue(row, col.id)}</Typography.Text>
+                        {/if}
+                    </Spreadsheet.Cell>
+                {/each}
+            </Spreadsheet.Row.Base>
+        {/each}
+
+        <svelte:fragment slot="footer">
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                Resize the middle columns. Left neighbors won't shrink; only the last data column
+                flexes.
+            </Typography.Text>
+        </svelte:fragment>
+    </Spreadsheet.Root>
+</Story>
+
 <style>
     :global([role='tooltip']) {
         transition: none !important;

From 65e03a4e3f721633850a66c03192e40e66d23a09 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 15 Sep 2025 09:55:23 +0530
Subject: [PATCH 2/6] fix: dual-sided resizing and cache issue causing wrong
 resize.

---
 v2/pink-sb/src/lib/spreadsheet/Root.svelte    | 84 +++++++++++--------
 .../spreadsheet/Spreadsheet.stories.svelte    |  8 +-
 2 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/v2/pink-sb/src/lib/spreadsheet/Root.svelte b/v2/pink-sb/src/lib/spreadsheet/Root.svelte
index 78b7a0a026..f71ff78bc0 100644
--- a/v2/pink-sb/src/lib/spreadsheet/Root.svelte
+++ b/v2/pink-sb/src/lib/spreadsheet/Root.svelte
@@ -61,9 +61,12 @@
 
     let dragManager: DragManager;
     const dispatch = createEventDispatcher();
-    const columnCache = new Map<string, number>();
+    let columnCache = new Map<string, number>();
 
     $: if (columns) {
+        // clear cache
+        invalidateColumnCache();
+
         // needs to be initialized
         // for the most recent updated columns!
         initColumns();
@@ -81,7 +84,7 @@
             currentPage = calculatedPage;
         }
 
-        if (!virtualizer || loadingTriggered || loadingMore) return;
+        if (!useVirtualizer || loadingTriggered || loadingMore || !$virtualizer) return;
         if (!loadPreviousPage && !loadNextPage) return;
 
         const virtualItems = $virtualizer.getVirtualItems();
@@ -217,7 +220,6 @@
         const nonActionCols = visibleCols.filter((col) => !col.isAction);
 
         let gridTemplate = '';
-        let hasFlexibleColumn = false;
 
         const scrollable: string[] = [];
         for (const column of nonActionCols) {
@@ -227,51 +229,59 @@
                 if (typeof column.width === 'number') {
                     scrollable.push(`${column.width}px`);
                 } else if (typeof column.width === 'object' && 'min' in column.width) {
-                    if (!('max' in column.width)) {
-                        hasFlexibleColumn = true;
-                    }
                     scrollable.push(
                         `minmax(${column.width.min}px, ${'max' in column.width ? `${column.width.max}px` : '1fr'})`
                     );
                 } else {
-                    hasFlexibleColumn = true;
                     scrollable.push('1fr');
                 }
             } else {
-                hasFlexibleColumn = true;
                 scrollable.push('1fr');
             }
         }
 
-        let flexCount = scrollable.filter((col) => col.includes('1fr')).length;
-
-        if (flexCount > 1) {
-            let flexSeen = 0;
-            for (let i = 0; i < scrollable.length; i++) {
-                if (scrollable[i].includes('1fr')) {
-                    flexSeen++;
-                    if (flexSeen < flexCount) {
-                        const column = nonActionCols[i];
-                        const minWidth =
-                            column.width &&
-                            typeof column.width === 'object' &&
-                            'min' in column.width
-                                ? column.width.min
-                                : ESTIMATED_ROW_HEIGHT;
-                        scrollable[i] = `${minWidth}px`;
-                    }
-                }
+        let flexibleColumnsCount = 0;
+        const flexibleIndices: number[] = [];
+
+        for (let i = 0; i < scrollable.length; i++) {
+            const column = nonActionCols[i];
+            const hasResizedWidth = !!column.resizedWidth;
+            const hasFixedPixelWidth = typeof column.width === 'number';
+
+            if (!hasResizedWidth && !hasFixedPixelWidth && scrollable[i].includes('1fr')) {
+                flexibleColumnsCount++;
+                flexibleIndices.push(i);
+            }
+        }
+
+        // if multiple flexible columns,
+        // constrain all but the last one
+        if (flexibleColumnsCount > 1) {
+            for (let i = 0; i < flexibleIndices.length - 1; i++) {
+                const index = flexibleIndices[i];
+                const column = nonActionCols[index];
+                const minWidth =
+                    column.width && typeof column.width === 'object' && 'min' in column.width
+                        ? column.width.min
+                        : ESTIMATED_ROW_HEIGHT;
+                scrollable[index] = `${minWidth}px`;
             }
-            hasFlexibleColumn = true;
-        } else if (!hasFlexibleColumn && scrollable.length > 0) {
+        } else if (flexibleColumnsCount === 0 && scrollable.length > 0) {
+            // if no flexible columns,
+            // make the last non-action column flexible
             const lastIndex = scrollable.length - 1;
             const lastColumn = nonActionCols[lastIndex];
-            const minWidth =
-                (typeof lastColumn.width === 'number'
-                    ? lastColumn.width
-                    : lastColumn.minimumWidth) || ESTIMATED_ROW_HEIGHT;
 
-            scrollable[lastIndex] = `minmax(${minWidth}px, 1fr)`;
+            // only make it flexible
+            // if it doesn't have a resized width
+            if (!lastColumn.resizedWidth) {
+                const minWidth =
+                    (typeof lastColumn.width === 'number'
+                        ? lastColumn.width
+                        : lastColumn.minimumWidth) || ESTIMATED_ROW_HEIGHT;
+
+                scrollable[lastIndex] = `minmax(${minWidth}px, 1fr)`;
+            }
         }
 
         gridTemplate += scrollable.join(' ');
@@ -337,6 +347,8 @@
     }
 
     function endDrag() {
+        if (!draggingColumn) return;
+
         const oldPositions = new Map<string, number>();
 
         // should be equal as the length of columns
@@ -360,6 +372,8 @@
             return match ? { ...col, resizedWidth: match.resizedWidth } : col;
         });
 
+        invalidateColumnCache();
+
         requestAnimationFrame(() => {
             const movedElements: HTMLElement[] = [];
 
@@ -422,6 +436,10 @@
         });
     }
 
+    function invalidateColumnCache() {
+        columnCache.clear();
+    }
+
     function clearDragOver() {
         dragOverColumn = null;
     }
diff --git a/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte b/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
index a4b8bfd841..60d449ad49 100644
--- a/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
+++ b/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
@@ -186,6 +186,10 @@
         columnName = null;
         showAddColumnModal = false;
     }
+
+    // resizing stability story
+    const columns = baseColumnsInternal;
+    let resizeColumns = [...columns.slice(0, 4), columns[columns.length - 1]];
 </script>
 
 <Story name="Default">
@@ -1044,11 +1048,9 @@
 </Story>
 
 <Story name="Resize stability">
-    {@const columns = baseColumnsInternal}
     {@const resizeRows = baseDataInternal.slice(0, 5)}
-    {@const resizeColumns = [...columns.slice(0, 4), columns[columns.length - 1]]}
 
-    <Spreadsheet.Root let:root columns={resizeColumns}>
+    <Spreadsheet.Root let:root bind:columns={resizeColumns}>
         <svelte:fragment slot="header" let:root>
             {#each resizeColumns as col}
                 <Spreadsheet.Header.Cell {root} column={col.id} icon={col.meta?.icon}>

From 4e4e31d08f6a9d35bfd4f81e4a449ce8e9f51f95 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 15 Sep 2025 09:55:33 +0530
Subject: [PATCH 3/6] lint.

---
 v2/pink-sb/src/lib/input/ComboBox.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/input/ComboBox.svelte b/v2/pink-sb/src/lib/input/ComboBox.svelte
index 66f3c67a14..f437fbc5de 100644
--- a/v2/pink-sb/src/lib/input/ComboBox.svelte
+++ b/v2/pink-sb/src/lib/input/ComboBox.svelte
@@ -75,7 +75,7 @@
         }
     });
 
-    inputValue.subscribe((v) => value = options.find((opt) => opt.label === v)?.value || v);
+    inputValue.subscribe((v) => (value = options.find((opt) => opt.label === v)?.value || v));
 
     $: filteredOptions = $touchedInput
         ? options.filter(({ label }) => {

From ba9609205bfc2109089ae18a8d7ab03cbabce950 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 15 Sep 2025 09:57:44 +0530
Subject: [PATCH 4/6] update: misc.

---
 v2/pink-sb/src/lib/spreadsheet/Root.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/spreadsheet/Root.svelte b/v2/pink-sb/src/lib/spreadsheet/Root.svelte
index f71ff78bc0..88e856e3eb 100644
--- a/v2/pink-sb/src/lib/spreadsheet/Root.svelte
+++ b/v2/pink-sb/src/lib/spreadsheet/Root.svelte
@@ -61,7 +61,7 @@
 
     let dragManager: DragManager;
     const dispatch = createEventDispatcher();
-    let columnCache = new Map<string, number>();
+    const columnCache = new Map<string, number>();
 
     $: if (columns) {
         // clear cache

From 2637bd06ab9e1ea3e5baa3511aad2b75fa5dad22 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 15 Sep 2025 10:19:39 +0530
Subject: [PATCH 5/6] update: misc.

---
 v2/pink-sb/src/lib/spreadsheet/Root.svelte                  | 2 --
 .../src/stories/spreadsheet/Spreadsheet.stories.svelte      | 6 +++---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/v2/pink-sb/src/lib/spreadsheet/Root.svelte b/v2/pink-sb/src/lib/spreadsheet/Root.svelte
index 88e856e3eb..fb1a4e575c 100644
--- a/v2/pink-sb/src/lib/spreadsheet/Root.svelte
+++ b/v2/pink-sb/src/lib/spreadsheet/Root.svelte
@@ -347,8 +347,6 @@
     }
 
     function endDrag() {
-        if (!draggingColumn) return;
-
         const oldPositions = new Map<string, number>();
 
         // should be equal as the length of columns
diff --git a/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte b/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
index 60d449ad49..7eba1a8ed1 100644
--- a/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
+++ b/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
@@ -1050,7 +1050,7 @@
 <Story name="Resize stability">
     {@const resizeRows = baseDataInternal.slice(0, 5)}
 
-    <Spreadsheet.Root let:root bind:columns={resizeColumns}>
+    <Spreadsheet.Root let:root bind:columns={resizeColumns} keyboardNavigation>
         <svelte:fragment slot="header" let:root>
             {#each resizeColumns as col}
                 <Spreadsheet.Header.Cell {root} column={col.id} icon={col.meta?.icon}>
@@ -1072,8 +1072,8 @@
             {/each}
         </svelte:fragment>
 
-        {#each resizeRows as row}
-            <Spreadsheet.Row.Base {root} id={row.id}>
+        {#each resizeRows as row, index}
+            <Spreadsheet.Row.Base {root} id={row.id} {index}>
                 {#each resizeColumns as col}
                     <Spreadsheet.Cell
                         {root}

From f4da718ef5318e1f379f20ccc12526969ba7516e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 15 Sep 2025 17:29:40 +0530
Subject: [PATCH 6/6] fix: changes from next.

---
 v2/pink-sb/src/lib/spreadsheet/Root.svelte    | 62 ++++---------------
 .../spreadsheet/Spreadsheet.stories.svelte    | 59 ------------------
 2 files changed, 13 insertions(+), 108 deletions(-)

diff --git a/v2/pink-sb/src/lib/spreadsheet/Root.svelte b/v2/pink-sb/src/lib/spreadsheet/Root.svelte
index 49b83da7eb..7a38a883a7 100644
--- a/v2/pink-sb/src/lib/spreadsheet/Root.svelte
+++ b/v2/pink-sb/src/lib/spreadsheet/Root.svelte
@@ -63,9 +63,6 @@
     const dispatch = createEventDispatcher();
 
     $: if (columns) {
-        // clear cache
-        invalidateColumnCache();
-
         // needs to be initialized
         // for the most recent updated columns!
         initColumns();
@@ -83,7 +80,7 @@
             currentPage = calculatedPage;
         }
 
-        if (!useVirtualizer || loadingTriggered || loadingMore || !$virtualizer) return;
+        if (!virtualizer || loadingTriggered || loadingMore) return;
         if (!loadPreviousPage && !loadNextPage) return;
 
         const virtualItems = $virtualizer.getVirtualItems();
@@ -215,6 +212,7 @@
         const nonActionCols = visibleCols.filter((col) => !col.isAction);
 
         let gridTemplate = '';
+        let hasFlexibleColumn = false;
 
         const scrollable: string[] = [];
         for (const column of nonActionCols) {
@@ -224,59 +222,31 @@
                 if (typeof column.width === 'number') {
                     scrollable.push(`${column.width}px`);
                 } else if (typeof column.width === 'object' && 'min' in column.width) {
+                    if (!('max' in column.width)) {
+                        hasFlexibleColumn = true;
+                    }
                     scrollable.push(
                         `minmax(${column.width.min}px, ${'max' in column.width ? `${column.width.max}px` : '1fr'})`
                     );
                 } else {
+                    hasFlexibleColumn = true;
                     scrollable.push('1fr');
                 }
             } else {
+                hasFlexibleColumn = true;
                 scrollable.push('1fr');
             }
         }
 
-        let flexibleColumnsCount = 0;
-        const flexibleIndices: number[] = [];
-
-        for (let i = 0; i < scrollable.length; i++) {
-            const column = nonActionCols[i];
-            const hasResizedWidth = !!column.resizedWidth;
-            const hasFixedPixelWidth = typeof column.width === 'number';
-
-            if (!hasResizedWidth && !hasFixedPixelWidth && scrollable[i].includes('1fr')) {
-                flexibleColumnsCount++;
-                flexibleIndices.push(i);
-            }
-        }
-
-        // if multiple flexible columns,
-        // constrain all but the last one
-        if (flexibleColumnsCount > 1) {
-            for (let i = 0; i < flexibleIndices.length - 1; i++) {
-                const index = flexibleIndices[i];
-                const column = nonActionCols[index];
-                const minWidth =
-                    column.width && typeof column.width === 'object' && 'min' in column.width
-                        ? column.width.min
-                        : ESTIMATED_ROW_HEIGHT;
-                scrollable[index] = `${minWidth}px`;
-            }
-        } else if (flexibleColumnsCount === 0 && scrollable.length > 0) {
-            // if no flexible columns,
-            // make the last non-action column flexible
+        if (!hasFlexibleColumn && scrollable.length > 0) {
             const lastIndex = scrollable.length - 1;
             const lastColumn = nonActionCols[lastIndex];
+            const minWidth =
+                (typeof lastColumn.width === 'number'
+                    ? lastColumn.width
+                    : lastColumn.minimumWidth) || ESTIMATED_ROW_HEIGHT;
 
-            // only make it flexible
-            // if it doesn't have a resized width
-            if (!lastColumn.resizedWidth) {
-                const minWidth =
-                    (typeof lastColumn.width === 'number'
-                        ? lastColumn.width
-                        : lastColumn.minimumWidth) || ESTIMATED_ROW_HEIGHT;
-
-                scrollable[lastIndex] = `minmax(${minWidth}px, 1fr)`;
-            }
+            scrollable[lastIndex] = `minmax(${minWidth}px, 1fr)`;
         }
 
         gridTemplate += scrollable.join(' ');
@@ -365,8 +335,6 @@
             return match ? { ...col, resizedWidth: match.resizedWidth } : col;
         });
 
-        invalidateColumnCache();
-
         requestAnimationFrame(() => {
             const movedElements: HTMLElement[] = [];
 
@@ -429,10 +397,6 @@
         });
     }
 
-    function invalidateColumnCache() {
-        columnCache.clear();
-    }
-
     function clearDragOver() {
         dragOverColumn = null;
     }
diff --git a/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte b/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
index 7eba1a8ed1..e213b0d3b6 100644
--- a/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
+++ b/v2/pink-sb/src/stories/spreadsheet/Spreadsheet.stories.svelte
@@ -186,10 +186,6 @@
         columnName = null;
         showAddColumnModal = false;
     }
-
-    // resizing stability story
-    const columns = baseColumnsInternal;
-    let resizeColumns = [...columns.slice(0, 4), columns[columns.length - 1]];
 </script>
 
 <Story name="Default">
@@ -1047,61 +1043,6 @@
     </Spreadsheet.Root>
 </Story>
 
-<Story name="Resize stability">
-    {@const resizeRows = baseDataInternal.slice(0, 5)}
-
-    <Spreadsheet.Root let:root bind:columns={resizeColumns} keyboardNavigation>
-        <svelte:fragment slot="header" let:root>
-            {#each resizeColumns as col}
-                <Spreadsheet.Header.Cell {root} column={col.id} icon={col.meta?.icon}>
-                    {#if col.meta?.isPrimary}
-                        <Layout.Stack direction="row" inline alignItems="center">
-                            {#if col.meta?.icon}
-                                <Icon icon={col.meta.icon} color="--fgcolor-neutral-tertiary" />
-                            {/if}
-                            {col.meta?.label ?? col.id}
-                        </Layout.Stack>
-                    {:else if col.isAction}
-                        <Button.Button icon variant="extra-compact">
-                            <Icon icon={IconPlus} color="--fgcolor-neutral-tertiary" />
-                        </Button.Button>
-                    {:else}
-                        {col.meta?.label ?? col.id}
-                    {/if}
-                </Spreadsheet.Header.Cell>
-            {/each}
-        </svelte:fragment>
-
-        {#each resizeRows as row, index}
-            <Spreadsheet.Row.Base {root} id={row.id} {index}>
-                {#each resizeColumns as col}
-                    <Spreadsheet.Cell
-                        {root}
-                        column={col.id}
-                        value={getCellValue(row, col.id)}
-                        isEditable={false}
-                    >
-                        {#if col.isAction}
-                            <Button.Button icon variant="extra-compact">
-                                <Icon icon={IconDotsHorizontal} />
-                            </Button.Button>
-                        {:else}
-                            <Typography.Text>{getCellValue(row, col.id)}</Typography.Text>
-                        {/if}
-                    </Spreadsheet.Cell>
-                {/each}
-            </Spreadsheet.Row.Base>
-        {/each}
-
-        <svelte:fragment slot="footer">
-            <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                Resize the middle columns. Left neighbors won't shrink; only the last data column
-                flexes.
-            </Typography.Text>
-        </svelte:fragment>
-    </Spreadsheet.Root>
-</Story>
-
 <style>
     :global([role='tooltip']) {
         transition: none !important;