From 16a53474f63d560dd9ec631f04bd2263f09471c1 Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Fri, 7 Aug 2026 23:51:17 +0200
Subject: [PATCH] Fix instance-scoping bugs in AdvancedTable, Chart,
 Colorpicker, Dropzone, and TabsCard (#2829)

---
 shared/components/cards/TabsCard.astro |  4 ++--
 shared/ui/AdvancedTable.astro          | 15 ++++++++++-----
 shared/ui/Chart.astro                  | 11 ++++++-----
 shared/ui/ChartSparkline.astro         |  2 +-
 shared/ui/Colorpicker.astro            | 13 +++++++++----
 shared/ui/Dropzone.astro               |  2 +-
 6 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/shared/components/cards/TabsCard.astro b/shared/components/cards/TabsCard.astro
index 6c30bc7e4..c8e51618f 100644
--- a/shared/components/cards/TabsCard.astro
+++ b/shared/components/cards/TabsCard.astro
@@ -25,7 +25,7 @@ const paneClass = `tab-pane${animation ? ' fade' : ''}`
 
 <div class="card">
   <div class="card-header">
-    <ul class={navClass} role="tablist" data-bs-toggle="tab">
+    <ul class={navClass} role="tablist">
       <li class="nav-item" role="presentation">
         <a href={`#tabs-home-${id}`} id={`tabs-home-${id}-tab`} class="nav-link active" data-bs-toggle="tab" data-bs-target={`#tabs-home-${id}`} role="tab" aria-controls={`tabs-home-${id}`} aria-selected="true">{icons && <Icon name="home" class={iconClass} />}{!hideText && 'Home'}</a>
       </li>
@@ -47,7 +47,7 @@ const paneClass = `tab-pane${animation ? ' fade' : ''}`
       {
         disabled && (
           <li class="nav-item" role="presentation">
-            <a href={`#tabs-activity-${id}`} class="nav-link disabled" data-bs-toggle="tab" role="tab" aria-selected="false" aria-disabled="true" tabindex="-1">
+            <a href="#" class="nav-link disabled" data-bs-toggle="tab" role="tab" aria-selected="false" aria-disabled="true" tabindex="-1">
               {icons && <Icon name="x" class={iconClass} />}
               {!hideText && 'Disabled'}
             </a>
diff --git a/shared/ui/AdvancedTable.astro b/shared/ui/AdvancedTable.astro
index 5870710d2..e7b0bdb3a 100644
--- a/shared/ui/AdvancedTable.astro
+++ b/shared/ui/AdvancedTable.astro
@@ -135,9 +135,9 @@ const perPageDefault = perPage[1]
         </table>
       </div>
       <div class="card-footer d-flex align-items-center">
-        <div class="dropdown">
+        <div class="dropdown" data-table-id={tableId}>
           <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-            <span id="page-count" class="me-1">{perPage[1]}</span>
+            <span id={`${tableId}-page-count`} class="me-1">{perPage[1]}</span>
             <span>records</span>
           </button>
           <div class="dropdown-menu">
@@ -162,11 +162,16 @@ const perPageDefault = perPage[1]
   <script define:vars={{ tableId, advancedTable, perPageDefault }}>
     // Astro wraps define:vars scripts in an IIFE, so this needs an explicit window
     // assignment to stay reachable from the onclick="setPageListItems(event)" markup below.
+    // Each AdvancedTable instance redefines this identically, so it stays safe to share:
+    // the table id is resolved from the clicked element instead of being closed over.
     window.setPageListItems = function setPageListItems(e) {
-      window.tabler_list[tableId].page = parseInt(e.target.dataset.value)
-      window.tabler_list[tableId].update()
+      const id = e.target.closest('[data-table-id]')?.dataset.tableId
+      if (!id || !window.tabler_list?.[id]) return
 
-      document.querySelector('#page-count').innerHTML = e.target.dataset.value
+      window.tabler_list[id].page = parseInt(e.target.dataset.value)
+      window.tabler_list[id].update()
+
+      document.querySelector(`#${id}-page-count`).innerHTML = e.target.dataset.value
     }
 
     function initAdvancedTable() {
diff --git a/shared/ui/Chart.astro b/shared/ui/Chart.astro
index bdddc98c3..0ccbc893d 100644
--- a/shared/ui/Chart.astro
+++ b/shared/ui/Chart.astro
@@ -18,6 +18,11 @@ const chartsData = charts as Record<string, ChartData>;
 let data = chartsData[chartId];
 
 let className = classProp;
+
+if (data?.extend) {
+	data = { ...chartsData[data.extend], ...chartsData[chartId] };
+}
+
 let height = heightProp ?? data?.height ?? 10;
 
 if (size === 'sm') {
@@ -28,15 +33,11 @@ if (size === 'sm') {
 	height = 15;
 }
 
-if (data?.extend) {
-	data = { ...chartsData[data.extend], ...chartsData[chartId] };
-}
-
 // The :root custom-property block stays a plain string rendered via set:html — it's
 // inert CSS text (no injection surface), not executable code.
 const style = data ? chartStyle({ id, data }) : '';
 const { config, xFormatterExpr } = data ? chartConfig({ id, data, height }) : { config: undefined, xFormatterExpr: undefined };
-const chartKey = `chart-${chartId}`;
+const chartKey = `chart-${id}`;
 const elementId = `chart-${id}`;
 ---
 
diff --git a/shared/ui/ChartSparkline.astro b/shared/ui/ChartSparkline.astro
index 84c3c75c3..61e558651 100644
--- a/shared/ui/ChartSparkline.astro
+++ b/shared/ui/ChartSparkline.astro
@@ -80,7 +80,7 @@ const chartOptions = id
 				: {}),
 			...(type === 'area' ? { fill: { gradient: { opacityFrom: [0.1, 0.1] } } } : {}),
 			...(type === 'area' || type === 'line' ? { stroke: { width: 2, lineCap: 'round' } } : {}),
-			...(type === 'donut'
+			...(type === 'donut' || type === 'pie'
 				? { colors: [`var(--tblr-${color})`], series: seriesData }
 				: { series: [{ color: `var(--tblr-${color})`, data: seriesData }] }),
 		}
diff --git a/shared/ui/Colorpicker.astro b/shared/ui/Colorpicker.astro
index d043449af..68815177a 100644
--- a/shared/ui/Colorpicker.astro
+++ b/shared/ui/Colorpicker.astro
@@ -31,15 +31,20 @@ const colorpickerSelector = `#colorpicker-${id}`
 
       const swatches = swatchProps.map((prop) => window.getComputedStyle(document.body).getPropertyValue(prop))
 
-      window.Coloris &&
-        (window.tabler_colorpicker[colorpickerId] = Coloris({
-          el: colorpickerSelector,
+      if (window.Coloris) {
+        // `el` can only be configured globally, but Coloris.setInstance() scopes the rest
+        // (alpha, format, swatches, ...) to this selector so multiple pickers with
+        // different options don't clobber each other's settings.
+        Coloris({ el: colorpickerSelector })
+        Coloris.setInstance(colorpickerSelector, {
           selectInput: false,
           alpha,
           ...(format ? { format } : {}),
           ...(swatchesOnly ? { swatchesOnly: true } : {}),
           swatches,
-        }))
+        })
+        window.tabler_colorpicker[colorpickerId] = colorpickerSelector
+      }
     }
 
     document.readyState !== 'loading' ? initColorpicker() : document.addEventListener('DOMContentLoaded', initColorpicker, { once: true })
diff --git a/shared/ui/Dropzone.astro b/shared/ui/Dropzone.astro
index ef5af5b0d..a7419934b 100644
--- a/shared/ui/Dropzone.astro
+++ b/shared/ui/Dropzone.astro
@@ -9,7 +9,7 @@ interface Props {
   label?: string
 }
 
-const { id, multiple, custom, text = 'Text', description = 'Description', label = 'Upload file' } = Astro.props
+const { id = 'default', multiple, custom, text = 'Text', description = 'Description', label = 'Upload file' } = Astro.props
 
 const dropzoneId = `dropzone-${id}`
 const dropzoneSelector = `#dropzone-${id}`