@prismiq/react 0.1.0 → 0.2.0

package/dist/{chunk-FEABEF3J.cjs → chunk-FKXCINUF.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkNK7HKX2J_cjs = require('./chunk-NK7HKX2J.cjs');
-var chunkNY6TZLST_cjs = require('./chunk-NY6TZLST.cjs');
+var chunk73TPDGXB_cjs = require('./chunk-73TPDGXB.cjs');
+var chunkPG7QBH3G_cjs = require('./chunk-PG7QBH3G.cjs');
 var chunkLMTG3LRC_cjs = require('./chunk-LMTG3LRC.cjs');
-var chunk4AVL6GQK_cjs = require('./chunk-4AVL6GQK.cjs');
+var chunkKXB2IZI2_cjs = require('./chunk-KXB2IZI2.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var legacy = require('react-grid-layout/legacy');
@@ -151,8 +151,8 @@ function DashboardProvider({
   lazyLoading = DEFAULT_LAZY_LOADING,
   children
 }) {
-  const { client } = chunkNY6TZLST_cjs.useAnalytics();
-  const crossFilterContext = chunkNY6TZLST_cjs.useCrossFilterOptional();
+  const { client } = chunkPG7QBH3G_cjs.useAnalytics();
+  const crossFilterContext = chunkPG7QBH3G_cjs.useCrossFilterOptional();
   const lazyLoadingEnabled = lazyLoading.enabled ?? true;
   const lazyLoadingEnabledRef = react.useRef(lazyLoadingEnabled);
   lazyLoadingEnabledRef.current = lazyLoadingEnabled;
@@ -171,6 +171,7 @@ function DashboardProvider({
   const clientRef = react.useRef(client);
   clientRef.current = client;
   const loadedDashboardRef = react.useRef(null);
+  const abortControllerRef = react.useRef(null);
   const setDashboardData = react.useCallback((data) => {
     setDashboard(data);
     const defaults = data.filters.filter((f) => f.default_value !== void 0).map((f) => ({
@@ -181,7 +182,8 @@ function DashboardProvider({
     if (!lazyLoadingEnabledRef.current) {
       const initialLoadingState = {};
       data.widgets.forEach((widget) => {
-        if (widget.query) {
+        const isSqlMode = widget.config?.data_source_mode === "sql" && widget.config?.raw_sql;
+        if (widget.query || isSqlMode) {
           initialLoadingState[widget.id] = true;
         }
       });
@@ -189,8 +191,9 @@ function DashboardProvider({
     }
   }, []);
   const executeWidgetQuery = react.useCallback(
-    async (widget, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false) => {
-      if (!widget.query) {
+    async (widget, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false, signal) => {
+      const isSqlMode = widget.config?.data_source_mode === "sql" && widget.config?.raw_sql;
+      if (!widget.query && !isSqlMode) {
         return;
       }
       setWidgetLoading((prev) => ({ ...prev, [widget.id]: true }));
@@ -203,22 +206,32 @@ function DashboardProvider({
         return next;
       });
       try {
-        let query = applyFiltersToQuery(
-          widget.query,
-          currentDashboard,
-          currentFilters
-        );
-        query = applyCrossFiltersToQuery(query, currentCrossFilters, widget.id);
-        const result = await client.executeQuery(query, bypassCache);
+        let result;
+        if (isSqlMode) {
+          result = await client.executeSQL(widget.config.raw_sql);
+        } else {
+          let query = applyFiltersToQuery(
+            widget.query,
+            currentDashboard,
+            currentFilters
+          );
+          query = applyCrossFiltersToQuery(query, currentCrossFilters, widget.id);
+          result = await client.executeQuery(query, bypassCache, signal);
+        }
+        if (signal?.aborted) return;
         setWidgetResults((prev) => ({ ...prev, [widget.id]: result }));
         const refreshTime = result.cached_at ?? Date.now() / 1e3;
         setWidgetRefreshTimes((prev) => ({ ...prev, [widget.id]: refreshTime }));
       } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") {
+          return;
+        }
         setWidgetErrors((prev) => ({
           ...prev,
           [widget.id]: err instanceof Error ? err : new Error("Query failed")
         }));
       } finally {
+        if (signal?.aborted) return;
         setWidgetLoading((prev) => ({ ...prev, [widget.id]: false }));
         if (bypassCache) {
           setRefreshingWidgets((prev) => {
@@ -232,9 +245,12 @@ function DashboardProvider({
     [client]
   );
   const executeWidgetsInBatches = react.useCallback(
-    async (widgets, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false, currentBatchSize = batchSize) => {
-      const widgetsWithQueries = widgets.filter((w) => w.query !== null);
+    async (widgets, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false, currentBatchSize = batchSize, signal) => {
+      const widgetsWithQueries = widgets.filter(
+        (w) => w.query !== null || w.config?.data_source_mode === "sql" && w.config?.raw_sql
+      );
       for (let i = 0; i < widgetsWithQueries.length; i += currentBatchSize) {
+        if (signal?.aborted) return;
         const batch = widgetsWithQueries.slice(i, i + currentBatchSize);
         await Promise.all(
           batch.map(
@@ -243,7 +259,8 @@ function DashboardProvider({
               currentDashboard,
               currentFilters,
               currentCrossFilters,
-              bypassCache
+              bypassCache,
+              signal
             )
           )
         );
@@ -255,16 +272,19 @@ function DashboardProvider({
     async (currentDashboard, currentFilters, currentCrossFilters) => {
       const requestId = Math.random().toString(36).substring(2, 11);
       requestIdRef.current = requestId;
+      const signal = abortControllerRef.current?.signal;
       await executeWidgetsInBatches(
         currentDashboard.widgets,
         currentDashboard,
         currentFilters,
         currentCrossFilters,
-        false
+        false,
         // Don't bypass cache on initial load
+        batchSize,
+        signal
       );
     },
-    [executeWidgetsInBatches]
+    [executeWidgetsInBatches, batchSize]
   );
   const refreshDashboard = react.useCallback(async () => {
     if (!dashboard) return;
@@ -427,16 +447,19 @@ function DashboardProvider({
   react.useEffect(() => {
     if (!lazyLoadingEnabled || !dashboard || isLoading) return;
     const widgetsToLoad = dashboard.widgets.filter(
-      (w) => visibleWidgets.has(w.id) && w.query !== null && !widgetResults[w.id] && !widgetLoading[w.id]
+      (w) => visibleWidgets.has(w.id) && (w.query !== null || w.config?.data_source_mode === "sql" && w.config?.raw_sql) && !widgetResults[w.id] && !widgetLoading[w.id]
     );
     if (widgetsToLoad.length > 0) {
+      const signal = abortControllerRef.current?.signal;
       executeWidgetsInBatches(
         widgetsToLoad,
         dashboard,
         filterValues,
         crossFilters,
-        false
+        false,
         // Don't bypass cache
+        batchSize,
+        signal
       );
     }
   }, [
@@ -448,7 +471,8 @@ function DashboardProvider({
     widgetLoading,
     filterValues,
     crossFilters,
-    executeWidgetsInBatches
+    executeWidgetsInBatches,
+    batchSize
   ]);
   const filterValuesKey = JSON.stringify(filterValues);
   const prevFilterValuesRef = react.useRef(filterValuesKey);
@@ -457,16 +481,21 @@ function DashboardProvider({
     if (prevFilterValuesRef.current === filterValuesKey) return;
     prevFilterValuesRef.current = filterValuesKey;
     const widgetsToRefresh = dashboard.widgets.filter(
-      (w) => everVisibleWidgets.has(w.id) && w.query !== null && widgetResults[w.id]
+      (w) => everVisibleWidgets.has(w.id) && (w.query !== null || w.config?.data_source_mode === "sql" && w.config?.raw_sql) && widgetResults[w.id]
       // Only re-execute if previously loaded
     );
     if (widgetsToRefresh.length > 0) {
+      abortControllerRef.current?.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
       executeWidgetsInBatches(
         widgetsToRefresh,
         dashboard,
         filterValues,
         crossFilters,
-        false
+        false,
+        batchSize,
+        controller.signal
       );
     }
   }, [
@@ -478,8 +507,16 @@ function DashboardProvider({
     widgetResults,
     filterValues,
     crossFilters,
-    executeWidgetsInBatches
+    executeWidgetsInBatches,
+    batchSize
   ]);
+  react.useEffect(() => {
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    return () => {
+      controller.abort();
+    };
+  }, [dashboardId]);
   const contextValue = react.useMemo(
     () => ({
       dashboard,
@@ -1026,7 +1063,7 @@ function EditableDashboardLayout({
   className = ""
 }) {
   const { theme } = chunkLMTG3LRC_cjs.useTheme();
-  const { queueUpdate, status, error } = chunkNY6TZLST_cjs.useDebouncedLayoutSave({
+  const { queueUpdate, status, error } = chunkPG7QBH3G_cjs.useDebouncedLayoutSave({
     dashboardId,
     debounceMs,
     savedDurationMs,
@@ -1074,7 +1111,7 @@ function EditableDashboardLayout({
       style: containerStyles2,
       "data-testid": "dashboard-container",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: statusBarStyles, children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.AutoSaveIndicator, { status, error }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: statusBarStyles, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.AutoSaveIndicator, { status, error }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           DashboardLayout,
           {
@@ -1151,7 +1188,7 @@ function WidgetHeader({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, className: "prismiq-widget-header", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h3", { style: titleStyle, children: title }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: actionsStyle, children: [
-      lastRefreshed !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: timestampStyle, title: `Last refreshed: ${new Date(lastRefreshed * 1e3).toLocaleString()}`, children: chunk4AVL6GQK_cjs.formatRelativeTime(lastRefreshed) }),
+      lastRefreshed !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: timestampStyle, title: `Last refreshed: ${new Date(lastRefreshed * 1e3).toLocaleString()}`, children: chunkKXB2IZI2_cjs.formatRelativeTime(lastRefreshed) }),
       onRefresh && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -1162,7 +1199,7 @@ function WidgetHeader({
           "aria-label": isRefreshing ? "Refreshing..." : "Refresh widget",
           title: isRefreshing ? "Refreshing..." : "Refresh widget",
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Icon,
+            chunkPG7QBH3G_cjs.Icon,
             {
               name: "sync",
               size: 16,
@@ -1181,7 +1218,7 @@ function WidgetHeader({
           style: actionButtonStyle,
           className: "prismiq-widget-action-button",
           "aria-label": hyperlink.title ?? "Open link",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "link", size: 16 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "link", size: 16 })
         }
       )
     ] }),
@@ -1249,7 +1286,7 @@ function TextContent({ config }) {
       "div",
       {
         style: contentStyle,
-        dangerouslySetInnerHTML: { __html: chunk4AVL6GQK_cjs.parseMarkdownSafe(config.content, codeStyle) }
+        dangerouslySetInnerHTML: { __html: chunkKXB2IZI2_cjs.parseMarkdownSafe(config.content, codeStyle) }
       }
     );
   }
@@ -1376,7 +1413,7 @@ function WidgetContent({
   isRefreshing = false
 }) {
   const { theme } = chunkLMTG3LRC_cjs.useTheme();
-  const crossFilterContext = chunkNY6TZLST_cjs.useCrossFilterOptional();
+  const crossFilterContext = chunkPG7QBH3G_cjs.useCrossFilterOptional();
   const data = react.useMemo(() => result ? resultToDataPoints(result) : [], [result]);
   const chartTypesWithCrossFilter = ["bar_chart", "pie_chart", "line_chart", "area_chart"];
   const defaultCrossFilterEnabled = chartTypesWithCrossFilter.includes(widget.type);
@@ -1415,7 +1452,7 @@ function WidgetContent({
   );
   const dateFormatters = react.useMemo(() => {
     if (widget.type === "table" && widget.config.dateFormats) {
-      return chunk4AVL6GQK_cjs.createDateFormatters(widget.config.dateFormats);
+      return chunkKXB2IZI2_cjs.createDateFormatters(widget.config.dateFormats);
     }
     return void 0;
   }, [widget.type, widget.config.dateFormats]);
@@ -1452,6 +1489,9 @@ function WidgetContent({
   if (widget.type === "text") {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(TextContent, { config: widget.config }) });
   }
+  if (!result && !error && widget.query) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingState, {}) });
+  }
   if (!result || result.row_count === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState2, {}) });
   }
@@ -1467,7 +1507,7 @@ function WidgetContent({
       const comparisonValue = widget.config.trend_comparison ? result.rows[0]?.[result.columns.indexOf(widget.config.trend_comparison)] : void 0;
       return wrapWithContainer(
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNK7HKX2J_cjs.MetricCard,
+          chunk73TPDGXB_cjs.MetricCard,
           {
             title: "",
             value: typeof value === "number" ? value : Number(value) || 0,
@@ -1487,7 +1527,7 @@ function WidgetContent({
     case "bar_chart":
       return wrapWithContainer(
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNK7HKX2J_cjs.BarChart,
+          chunk73TPDGXB_cjs.BarChart,
           {
             data,
             xAxis,
@@ -1513,7 +1553,7 @@ function WidgetContent({
     case "line_chart":
       return wrapWithContainer(
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNK7HKX2J_cjs.LineChart,
+          chunk73TPDGXB_cjs.LineChart,
           {
             data,
             xAxis,
@@ -1535,7 +1575,7 @@ function WidgetContent({
     case "area_chart":
       return wrapWithContainer(
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNK7HKX2J_cjs.AreaChart,
+          chunk73TPDGXB_cjs.AreaChart,
           {
             data,
             xAxis,
@@ -1554,7 +1594,7 @@ function WidgetContent({
     case "pie_chart":
       return wrapWithContainer(
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNK7HKX2J_cjs.PieChart,
+          chunk73TPDGXB_cjs.PieChart,
           {
             data,
             labelColumn: xAxis,
@@ -1573,7 +1613,7 @@ function WidgetContent({
     case "scatter_chart":
       return wrapWithContainer(
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNK7HKX2J_cjs.ScatterChart,
+          chunk73TPDGXB_cjs.ScatterChart,
           {
             data,
             xAxis,
@@ -1588,10 +1628,22 @@ function WidgetContent({
         const dimensionColumns = result.columns.filter(
           (col) => col !== widget.config.pivot_column && col !== widget.config.value_column
         );
-        tableResult = chunk4AVL6GQK_cjs.pivotQueryResult(result, {
+        let pivotColumnFormat;
+        if (widget.config.dateFormats?.[widget.config.pivot_column]) {
+          pivotColumnFormat = widget.config.dateFormats[widget.config.pivot_column];
+        } else if (widget.query) {
+          const pivotCol = widget.query.columns.find(
+            (c) => c.alias === widget.config.pivot_column || c.column === widget.config.pivot_column
+          );
+          if (pivotCol?.date_format) {
+            pivotColumnFormat = pivotCol.date_format;
+          }
+        }
+        tableResult = chunkKXB2IZI2_cjs.pivotQueryResult(result, {
           pivotColumn: widget.config.pivot_column,
           valueColumn: widget.config.value_column,
-          dimensionColumns
+          dimensionColumns,
+          pivotColumnFormat
         });
       }
       const tableContainerStyle = {
@@ -1603,7 +1655,7 @@ function WidgetContent({
         position: "relative"
       };
       const tableContent = /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.ResultsTable,
+        chunkPG7QBH3G_cjs.ResultsTable,
         {
           result: tableResult,
           pageSize: widget.config.page_size ?? 10,
@@ -1742,7 +1794,7 @@ function WidgetContainer({
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: contentStyles, children }),
         editable && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: overlayStyles, children: [
           onDuplicate && /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Button,
+            chunkPG7QBH3G_cjs.Button,
             {
               size: "sm",
               variant: "secondary",
@@ -1752,11 +1804,11 @@ function WidgetContainer({
               },
               title: "Duplicate",
               "data-testid": "duplicate-widget-button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "copy", size: 14 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "copy", size: 14 })
             }
           ),
           onEdit && /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Button,
+            chunkPG7QBH3G_cjs.Button,
             {
               size: "sm",
               variant: "secondary",
@@ -1766,11 +1818,11 @@ function WidgetContainer({
               },
               title: "Edit",
               "data-testid": "edit-widget-button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "edit", size: 14 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "edit", size: 14 })
             }
           ),
           onDelete && /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Button,
+            chunkPG7QBH3G_cjs.Button,
             {
               size: "sm",
               variant: "danger",
@@ -1780,7 +1832,7 @@ function WidgetContainer({
               },
               title: "Delete",
               "data-testid": "delete-widget-button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "trash", size: 14 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "trash", size: 14 })
             }
           )
         ] }),
@@ -1958,7 +2010,7 @@ function DateRangeFilter({
   ] });
 }
 function useDynamicFilterOptions(filter, limit = 100) {
-  const { client } = chunkNY6TZLST_cjs.useAnalytics();
+  const { client } = chunkPG7QBH3G_cjs.useAnalytics();
   const [isLoading, setIsLoading] = react.useState(false);
   const [options, setOptions] = react.useState([]);
   const [error, setError] = react.useState(null);
@@ -2255,7 +2307,7 @@ function MultiSelectFilter({
         disabled: isLoading,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayText }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: isOpen ? "chevron-up" : "chevron-down", size: 14 })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: isOpen ? "chevron-up" : "chevron-down", size: 14 })
         ]
       }
     ),
@@ -2304,7 +2356,7 @@ function MultiSelectFilter({
                     backgroundColor: isAllSelected ? theme.colors.primary : theme.colors.background,
                     borderColor: isAllSelected ? theme.colors.primary : theme.colors.border
                   },
-                  children: isAllSelected && /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "check", size: 12, style: { color: "#fff" } })
+                  children: isAllSelected && /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "check", size: 12, style: { color: "#fff" } })
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "All" })
@@ -2330,7 +2382,7 @@ function MultiSelectFilter({
                       backgroundColor: isSelected ? theme.colors.primary : theme.colors.background,
                       borderColor: isSelected ? theme.colors.primary : theme.colors.border
                     },
-                    children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "check", size: 12, style: { color: "#fff" } })
+                    children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "check", size: 12, style: { color: "#fff" } })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
@@ -2425,7 +2477,7 @@ function TextFilter({
     justifyContent: "center"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "search", size: 14, style: iconStyle }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "search", size: 14, style: iconStyle }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -2444,7 +2496,7 @@ function TextFilter({
         onClick: handleClear,
         style: clearButtonStyle,
         "aria-label": "Clear filter",
-        children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "x", size: 14 })
+        children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "x", size: 14 })
       }
     )
   ] });
@@ -2498,7 +2550,7 @@ function FilterBar({
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: filter.label }),
       renderFilter(filter, values, onChange)
     ] }, filter.id)),
-    onReset && /* @__PURE__ */ jsxRuntime.jsx("div", { style: actionsStyle, children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "ghost", size: "sm", onClick: handleReset, children: "Reset" }) })
+    onReset && /* @__PURE__ */ jsxRuntime.jsx("div", { style: actionsStyle, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "ghost", size: "sm", onClick: handleReset, children: "Reset" }) })
   ] });
 }
 function renderFilter(filter, values, onChange) {
@@ -2572,7 +2624,7 @@ function DashboardContent({
     refreshWidget
   } = useDashboard();
   const { filters, values, setValue, resetAll } = useDashboardFilters();
-  const crossFilterContext = chunkNY6TZLST_cjs.useCrossFilterOptional();
+  const crossFilterContext = chunkPG7QBH3G_cjs.useCrossFilterOptional();
   const renderWidget = react.useCallback(
     (widget) => /* @__PURE__ */ jsxRuntime.jsx(
       LazyWidget,
@@ -2715,7 +2767,7 @@ function DashboardContent({
       ] }, filter.sourceWidgetId)),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Button,
+        chunkPG7QBH3G_cjs.Button,
         {
           variant: "ghost",
           size: "sm",
@@ -2744,7 +2796,7 @@ function Dashboard({
   lazyLoading,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.CrossFilterProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.CrossFilterProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
     DashboardProvider,
     {
       dashboardId: id,
@@ -2852,37 +2904,37 @@ function EditorToolbar({
       ) : /* @__PURE__ */ jsxRuntime.jsx("h2", { style: titleStyle, children: dashboardName || "New Dashboard" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: actionsStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
-          chunkNY6TZLST_cjs.Button,
+          chunkPG7QBH3G_cjs.Button,
           {
             variant: "secondary",
             size: "sm",
             onClick: onAddWidget,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "plus", size: 16 }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "plus", size: 16 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: theme.spacing.xs }, children: "Add Widget" })
             ]
           }
         ),
         onEditFilters && /* @__PURE__ */ jsxRuntime.jsxs(
-          chunkNY6TZLST_cjs.Button,
+          chunkPG7QBH3G_cjs.Button,
           {
             variant: "ghost",
             size: "sm",
             onClick: onEditFilters,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "filter", size: 16 }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "filter", size: 16 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: theme.spacing.xs }, children: "Filters" })
             ]
           }
         ),
         onSettings && /* @__PURE__ */ jsxRuntime.jsxs(
-          chunkNY6TZLST_cjs.Button,
+          chunkPG7QBH3G_cjs.Button,
           {
             variant: "ghost",
             size: "sm",
             onClick: onSettings,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "settings", size: 16 }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "settings", size: 16 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: theme.spacing.xs }, children: "Settings" })
             ]
           }
@@ -2892,7 +2944,7 @@ function EditorToolbar({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rightSectionStyle, children: [
       hasChanges && /* @__PURE__ */ jsxRuntime.jsx("span", { style: unsavedStyle, children: "Unsaved changes" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Button,
+        chunkPG7QBH3G_cjs.Button,
         {
           variant: "ghost",
           size: "sm",
@@ -2902,7 +2954,7 @@ function EditorToolbar({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Button,
+        chunkPG7QBH3G_cjs.Button,
         {
           variant: "primary",
           size: "sm",
@@ -2997,7 +3049,9 @@ function WidgetTypeSelector({
     borderRadius: theme.radius.sm,
     border: `2px solid ${isSelected ? theme.colors.primary : theme.colors.border}`,
     cursor: "pointer",
-    transition: "all 0.15s ease"
+    transition: "all 0.15s ease",
+    minWidth: 0
+    // Allow grid item to shrink below content width
   });
   const iconStyle = (isSelected) => ({
     width: "28px",
@@ -3024,9 +3078,7 @@ function WidgetTypeSelector({
   const descStyle = {
     fontSize: theme.fontSizes.xs,
     color: theme.colors.textMuted,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
+    whiteSpace: "nowrap"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `prismiq-widget-type-selector ${className}`, style: containerStyle, children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Widget Type" }),
@@ -3049,7 +3101,7 @@ function WidgetTypeSelector({
             }
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle(isSelected), children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: widgetType.icon, size: 16 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle(isSelected), children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: widgetType.icon, size: 16 }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: textContainerStyle, children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { style: nameLabelStyle, children: widgetType.label }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { style: descStyle, children: widgetType.description })
@@ -3076,6 +3128,7 @@ function WidgetPreview({
   title,
   config,
   query,
+  rawSql,
   result,
   isLoading = false,
   error,
@@ -3130,13 +3183,14 @@ function WidgetPreview({
   };
   const previewWidget = createPreviewWidget(type, title, config, query);
   const needsQuery = type !== "text";
-  const showEmptyState = needsQuery && !query && !isLoading;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `prismiq-widget-preview ${className}`, style: containerStyle, children: [
+  const hasDataSource = !!query || !!rawSql;
+  const showEmptyState = needsQuery && !hasDataSource && !isLoading;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `prismiq-widget-preview ${className}`, style: containerStyle, "data-testid": "widget-preview", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { style: titleStyle, children: title || "Widget Preview" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle, children: "Preview" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: contentStyle, children: showEmptyState ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: emptyStateStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: contentStyle, children: showEmptyState ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: emptyStateStyle, "data-testid": "widget-preview-empty", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -3193,19 +3247,26 @@ function MetricConfig({
   onChange
 }) {
   const { theme } = chunkLMTG3LRC_cjs.useTheme();
+  const { getDisplayName } = chunkPG7QBH3G_cjs.useSchema();
   const initialTable = query?.tables[0]?.name ?? "";
   const initialAggregation = query?.columns[0]?.aggregation ?? "count";
-  const initialColumn = query?.columns[0]?.column ?? "*";
+  const rawInitialColumn = query?.columns[0]?.column ?? "*";
+  const needsColumnForInitial = AGGREGATIONS.find((a) => a.value === initialAggregation)?.needsColumn ?? false;
+  const initialColumn = rawInitialColumn === "*" && needsColumnForInitial ? "" : rawInitialColumn;
+  const initialFilters = (query?.filters ?? []).map((f) => ({
+    ...f,
+    table_id: "t1"
+  }));
   const [selectedTable, setSelectedTable] = react.useState(initialTable);
   const [aggregation, setAggregation] = react.useState(initialAggregation);
   const [selectedColumn, setSelectedColumn] = react.useState(initialColumn);
-  const [filters, setFilters] = react.useState(query?.filters ?? []);
+  const [filters, setFilters] = react.useState(initialFilters);
   const tableOptions = react.useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = react.useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -3220,8 +3281,12 @@ function MetricConfig({
   const needsColumn = react.useMemo(() => {
     return AGGREGATIONS.find((a) => a.value === aggregation)?.needsColumn ?? false;
   }, [aggregation]);
+  const isValidAggregation = react.useMemo(() => {
+    return AGGREGATIONS.some((a) => a.value === aggregation);
+  }, [aggregation]);
   react.useEffect(() => {
     if (!selectedTable) return;
+    if (!isValidAggregation) return;
     const tableId = "t1";
     const tables = [{ id: tableId, name: selectedTable }];
     const column = needsColumn ? selectedColumn : "*";
@@ -3239,7 +3304,7 @@ function MetricConfig({
       filters: filters.length > 0 ? filters : void 0
     };
     onChange(queryDef);
-  }, [selectedTable, aggregation, selectedColumn, needsColumn, filters, onChange]);
+  }, [selectedTable, aggregation, selectedColumn, needsColumn, isValidAggregation, filters, onChange]);
   const handleTableChange = react.useCallback((value) => {
     setSelectedTable(value);
     setSelectedColumn("");
@@ -3268,7 +3333,7 @@ function MetricConfig({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "From Table" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: selectedTable,
           onChange: handleTableChange,
@@ -3279,7 +3344,7 @@ function MetricConfig({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Metric" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: aggregation,
           onChange: (value) => setAggregation(value),
@@ -3294,7 +3359,7 @@ function MetricConfig({
     needsColumn && selectedTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Column" }),
       columnOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: selectedColumn,
           onChange: setSelectedColumn,
@@ -3305,7 +3370,7 @@ function MetricConfig({
     selectedTable && currentTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Filters (optional)" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.FilterBuilder,
+        chunkPG7QBH3G_cjs.FilterBuilder,
         {
           tables: [{ id: "t1", name: selectedTable }],
           filters,
@@ -3364,17 +3429,23 @@ function ChartConfig({
   onChange
 }) {
   const { theme } = chunkLMTG3LRC_cjs.useTheme();
+  const { getDisplayName } = chunkPG7QBH3G_cjs.useSchema();
   const initialTables = query?.tables ?? [];
   const groupByCol = query?.columns.find((c) => c.aggregation === "none");
   const initialGroupBy = groupByCol?.column ?? query?.group_by?.[0]?.column ?? "";
   const initialGroupByTableId = groupByCol?.table_id ?? query?.tables?.[0]?.id ?? "t1";
   const initialDateTrunc = groupByCol?.date_trunc ?? "";
-  const initialMeasures = query?.columns.filter((c) => c.aggregation !== "none").map((c) => ({
-    // Store as table-qualified ref so parseColumnRef can resolve it correctly
-    column: c.table_id ? `${c.table_id}.${c.column}` : c.column,
-    aggregation: c.aggregation,
-    table_id: c.table_id
-  })) ?? [];
+  const initialMeasures = query?.columns.filter((c) => c.aggregation !== "none").map((c) => {
+    const isStarWithNonCount = (c.column === "*" || c.column.endsWith(".*")) && c.aggregation !== "count";
+    const column = isStarWithNonCount ? "" : c.table_id ? `${c.table_id}.${c.column}` : c.column;
+    return {
+      column,
+      aggregation: c.aggregation,
+      table_id: c.table_id,
+      // Preserve original alias to maintain compatibility with widget config
+      alias: c.alias
+    };
+  }) ?? [];
   const initialJoins = query?.joins ?? [];
   const [tables, setTables] = react.useState(initialTables);
   const [joins, setJoins] = react.useState(initialJoins);
@@ -3395,9 +3466,9 @@ function ChartConfig({
   const tableOptions = react.useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = react.useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -3467,7 +3538,7 @@ function ChartConfig({
         const parsedMeasures = [];
         const invalidColumns = [];
         validMeasures.forEach((m, i) => {
-          const measureAlias = validMeasures.length > 1 ? `value_${i + 1}` : "value";
+          const measureAlias = m.alias ?? (validMeasures.length > 1 ? `value_${i + 1}` : "value");
           if (m.aggregation === "count" && (!m.column || m.column.endsWith(".*") || m.column === "*")) {
             parsedMeasures.push({
               table_id: m.table_id ?? tables[0]?.id ?? "t1",
@@ -3477,7 +3548,7 @@ function ChartConfig({
             });
             return;
           }
-          const parsed = chunk4AVL6GQK_cjs.parseColumnRef(m.column, tables[0]?.id ?? "t1");
+          const parsed = chunkKXB2IZI2_cjs.parseColumnRef(m.column, tables[0]?.id ?? "t1");
           if (!parsed) {
             invalidColumns.push(m.column);
             return;
@@ -3531,6 +3602,9 @@ function ChartConfig({
     setJoins(
       (prev) => prev.filter((j) => tableIds.has(j.from_table_id) && tableIds.has(j.to_table_id))
     );
+    setFilters(
+      (prev) => prev.filter((f) => tableIds.has(f.table_id))
+    );
     if (!tableIds.has(groupByTableId)) {
       setGroupByColumn("");
       setGroupByTableId(newTables[0]?.id ?? "t1");
@@ -3542,7 +3616,7 @@ function ChartConfig({
       setDateTrunc("");
       return;
     }
-    const parsed = chunk4AVL6GQK_cjs.parseColumnRef(value, groupByTableId);
+    const parsed = chunkKXB2IZI2_cjs.parseColumnRef(value, groupByTableId);
     if (parsed) {
       setGroupByTableId(parsed.tableId);
       setGroupByColumn(parsed.column);
@@ -3601,7 +3675,7 @@ function ChartConfig({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "From Table" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: selectedTable,
           onChange: handleTableChange,
@@ -3609,9 +3683,9 @@ function ChartConfig({
         }
       )
     ] }),
-    selectedTable && /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.CollapsibleSection, { title: "Join Tables", defaultOpen: tables.length > 1, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: theme.spacing.md }, children: [
+    selectedTable && /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.CollapsibleSection, { title: "Join Tables", defaultOpen: tables.length > 1, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: theme.spacing.md }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.TableSelector,
+        chunkPG7QBH3G_cjs.TableSelector,
         {
           schema,
           tables,
@@ -3623,7 +3697,7 @@ function ChartConfig({
       tables.length >= 2 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Join Conditions" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.JoinBuilder,
+          chunkPG7QBH3G_cjs.JoinBuilder,
           {
             schema,
             tables,
@@ -3637,7 +3711,7 @@ function ChartConfig({
     selectedTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Group By (X-Axis)" }),
       groupByOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: groupByValue,
           onChange: handleGroupByChange,
@@ -3649,7 +3723,7 @@ function ChartConfig({
     selectedTable && groupByColumn && isGroupByDate && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Date Granularity" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: dateTrunc,
           onChange: (value) => setDateTrunc(value),
@@ -3658,8 +3732,8 @@ function ChartConfig({
       ),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: helpTextStyle, children: "Truncate dates to this interval" })
     ] }),
-    selectedTable && isGroupByDate && /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.CollapsibleSection, { title: "Time Series Options", defaultOpen: timeSeries !== void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chunkNY6TZLST_cjs.TimeSeriesConfig,
+    selectedTable && isGroupByDate && /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.CollapsibleSection, { title: "Time Series Options", defaultOpen: timeSeries !== void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+      chunkPG7QBH3G_cjs.TimeSeriesConfig,
       {
         schema,
         tables,
@@ -3672,7 +3746,7 @@ function ChartConfig({
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Measures (Y-Axis)" }),
       measures.map((measure, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: measureRowStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.Select,
+          chunkPG7QBH3G_cjs.Select,
           {
             value: measure.aggregation,
             onChange: (value) => updateMeasure(index, { aggregation: value }),
@@ -3683,7 +3757,7 @@ function ChartConfig({
         measure.aggregation !== "count" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: theme.colors.textMuted }, children: "of" }),
           measureColumnOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Select,
+            chunkPG7QBH3G_cjs.Select,
             {
               value: measure.column,
               onChange: (value) => updateMeasure(index, { column: value }),
@@ -3692,17 +3766,17 @@ function ChartConfig({
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...helpTextStyle, flex: 1 }, children: "No numeric columns" })
         ] }),
-        measures.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "ghost", size: "sm", onClick: () => removeMeasure(index), children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "x", size: 14 }) })
+        measures.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "ghost", size: "sm", onClick: () => removeMeasure(index), children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "x", size: 14 }) })
       ] }, measureIdsRef.current[index])),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        chunkNY6TZLST_cjs.Button,
+        chunkPG7QBH3G_cjs.Button,
         {
           variant: "ghost",
           size: "sm",
           onClick: addMeasure,
           style: { alignSelf: "flex-start" },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "plus", size: 14 }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "plus", size: 14 }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: theme.spacing.xs }, children: "Add measure" })
           ]
         }
@@ -3712,7 +3786,7 @@ function ChartConfig({
     selectedTable && currentTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Filters (optional)" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.FilterBuilder,
+        chunkPG7QBH3G_cjs.FilterBuilder,
         {
           tables,
           filters,
@@ -3722,12 +3796,12 @@ function ChartConfig({
       )
     ] }),
     selectedTable && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkNY6TZLST_cjs.CollapsibleSection,
+      chunkPG7QBH3G_cjs.CollapsibleSection,
       {
         title: "Calculated Fields",
         defaultOpen: calculatedFields.length > 0,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.CalculatedFieldBuilder,
+          chunkPG7QBH3G_cjs.CalculatedFieldBuilder,
           {
             fields: calculatedFields,
             onChange: setCalculatedFields,
@@ -3785,25 +3859,31 @@ function PieConfig({
   onChange
 }) {
   const { theme } = chunkLMTG3LRC_cjs.useTheme();
+  const { getDisplayName } = chunkPG7QBH3G_cjs.useSchema();
   const initialTable = query?.tables[0]?.name ?? "";
   const labelCol = query?.columns.find((c) => c.aggregation === "none");
   const initialLabel = labelCol?.column ?? "";
   const initialDateTrunc = labelCol?.date_trunc ?? "";
   const measureCol = query?.columns.find((c) => c.aggregation !== "none");
-  const initialValueColumn = measureCol?.column ?? "";
+  const rawInitialValueColumn = measureCol?.column ?? "";
   const initialAggregation = measureCol?.aggregation ?? "sum";
+  const initialValueColumn = rawInitialValueColumn === "*" && initialAggregation !== "count" ? "" : rawInitialValueColumn;
+  const initialFilters = (query?.filters ?? []).map((f) => ({
+    ...f,
+    table_id: "t1"
+  }));
   const [selectedTable, setSelectedTable] = react.useState(initialTable);
   const [labelColumn, setLabelColumn] = react.useState(initialLabel);
   const [dateTrunc, setDateTrunc] = react.useState(initialDateTrunc);
   const [valueColumn, setValueColumn] = react.useState(initialValueColumn);
   const [aggregation, setAggregation] = react.useState(initialAggregation);
-  const [filters, setFilters] = react.useState(query?.filters ?? []);
+  const [filters, setFilters] = react.useState(initialFilters);
   const tableOptions = react.useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = react.useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -3828,8 +3908,12 @@ function PieConfig({
       label: `${c.name} (${c.data_type})`
     }));
   }, [currentTable]);
+  const isValidAggregation = react.useMemo(() => {
+    return AGGREGATIONS3.some((a) => a.value === aggregation);
+  }, [aggregation]);
   react.useEffect(() => {
     if (!selectedTable || !labelColumn) return;
+    if (!isValidAggregation) return;
     const needsValueColumn = aggregation !== "count";
     if (needsValueColumn && !valueColumn) return;
     const tableId = "t1";
@@ -3859,7 +3943,7 @@ function PieConfig({
       order_by: [{ table_id: tableId, column: labelColumn, direction: "ASC" }]
     };
     onChange(queryDef);
-  }, [selectedTable, labelColumn, dateTrunc, valueColumn, aggregation, filters, onChange]);
+  }, [selectedTable, labelColumn, dateTrunc, valueColumn, aggregation, isValidAggregation, filters, onChange]);
   const handleTableChange = react.useCallback((value) => {
     setSelectedTable(value);
     setLabelColumn("");
@@ -3901,7 +3985,7 @@ function PieConfig({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "From Table" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: selectedTable,
           onChange: handleTableChange,
@@ -3912,7 +3996,7 @@ function PieConfig({
     selectedTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Slices (Labels)" }),
       labelOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: labelColumn,
           onChange: handleLabelChange,
@@ -3924,7 +4008,7 @@ function PieConfig({
     selectedTable && labelColumn && isLabelDate && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Date Granularity" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: dateTrunc,
           onChange: (value) => setDateTrunc(value),
@@ -3937,7 +4021,7 @@ function PieConfig({
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Size (Value)" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.Select,
+          chunkPG7QBH3G_cjs.Select,
           {
             value: aggregation,
             onChange: (value) => setAggregation(value),
@@ -3948,7 +4032,7 @@ function PieConfig({
         aggregation !== "count" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: theme.colors.textMuted }, children: "of" }),
           valueColumnOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Select,
+            chunkPG7QBH3G_cjs.Select,
             {
               value: valueColumn,
               onChange: setValueColumn,
@@ -3963,7 +4047,7 @@ function PieConfig({
     selectedTable && currentTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Filters (optional)" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.FilterBuilder,
+        chunkPG7QBH3G_cjs.FilterBuilder,
         {
           tables: [{ id: "t1", name: selectedTable }],
           filters,
@@ -3980,18 +4064,23 @@ function TableConfig({
   onChange
 }) {
   const { theme } = chunkLMTG3LRC_cjs.useTheme();
+  const { getDisplayName } = chunkPG7QBH3G_cjs.useSchema();
   const initialTable = query?.tables[0]?.name ?? "";
   const initialColumns = query?.columns.map((c) => c.column) ?? [];
+  const initialFilters = (query?.filters ?? []).map((f) => ({
+    ...f,
+    table_id: "t1"
+  }));
   const [selectedTable, setSelectedTable] = react.useState(initialTable);
   const [selectedColumns, setSelectedColumns] = react.useState(initialColumns);
-  const [filters, setFilters] = react.useState(query?.filters ?? []);
+  const [filters, setFilters] = react.useState(initialFilters);
   const [limit, setLimit] = react.useState(query?.limit ?? 100);
   const tableOptions = react.useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = react.useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -4081,7 +4170,7 @@ function TableConfig({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "From Table" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: selectedTable,
           onChange: handleTableChange,
@@ -4098,7 +4187,7 @@ function TableConfig({
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: columnsContainerStyle, children: currentTable.columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Checkbox,
+        chunkPG7QBH3G_cjs.Checkbox,
         {
           label: `${col.name} (${col.data_type})`,
           checked: selectedColumns.includes(col.name),
@@ -4111,7 +4200,7 @@ function TableConfig({
     selectedTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Maximum Rows" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: rowStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: String(limit),
           onChange: (value) => setLimit(parseInt(value, 10)),
@@ -4130,7 +4219,7 @@ function TableConfig({
     selectedTable && currentTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Filters (optional)" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.FilterBuilder,
+        chunkPG7QBH3G_cjs.FilterBuilder,
         {
           tables: [{ id: "t1", name: selectedTable }],
           filters,
@@ -4214,11 +4303,11 @@ function HyperlinkSection({
       target
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunkNY6TZLST_cjs.CollapsibleSection, { title: "Hyperlink", defaultOpen, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkPG7QBH3G_cjs.CollapsibleSection, { title: "Hyperlink", defaultOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "URL" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Input,
+        chunkPG7QBH3G_cjs.Input,
         {
           value: hyperlink?.url || "",
           onChange: (e) => handleUrlChange(e.target.value),
@@ -4231,7 +4320,7 @@ function HyperlinkSection({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Tooltip Text" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.Input,
+          chunkPG7QBH3G_cjs.Input,
           {
             value: hyperlink?.title || "",
             onChange: (e) => handleTitleChange(e.target.value),
@@ -4242,7 +4331,7 @@ function HyperlinkSection({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Open In" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.Select,
+          chunkPG7QBH3G_cjs.Select,
           {
             value: hyperlink?.target || "_blank",
             onChange: handleTargetChange,
@@ -4318,14 +4407,14 @@ function ReferenceLinesSection({
     onChange(lines.filter((_, i) => i !== index));
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkNY6TZLST_cjs.CollapsibleSection,
+    chunkPG7QBH3G_cjs.CollapsibleSection,
     {
       title: "Reference Lines",
       defaultOpen: defaultOpen || lines.length > 0,
       children: [
         lines.map((line, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: lineRowStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Input,
+            chunkPG7QBH3G_cjs.Input,
             {
               type: "number",
               value: String(line.value),
@@ -4335,7 +4424,7 @@ function ReferenceLinesSection({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Input,
+            chunkPG7QBH3G_cjs.Input,
             {
               value: line.label ?? "",
               onChange: (e) => updateLine(index, { label: e.target.value || void 0 }),
@@ -4354,7 +4443,7 @@ function ReferenceLinesSection({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Select,
+            chunkPG7QBH3G_cjs.Select,
             {
               value: line.lineStyle ?? "dashed",
               onChange: (value) => updateLine(index, {
@@ -4364,10 +4453,10 @@ function ReferenceLinesSection({
               style: { width: "90px" }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "ghost", size: "sm", onClick: () => removeLine(index), children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "x", size: 14 }) })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "ghost", size: "sm", onClick: () => removeLine(index), children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "x", size: 14 }) })
         ] }, lineIdsRef.current[index])),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: addButtonStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkNY6TZLST_cjs.Button, { variant: "ghost", size: "sm", onClick: addLine, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "plus", size: 14 }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: addButtonStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkPG7QBH3G_cjs.Button, { variant: "ghost", size: "sm", onClick: addLine, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "plus", size: 14 }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: theme.spacing.xs }, children: "Add reference line" })
         ] }) })
       ]
@@ -4451,7 +4540,7 @@ function TextFormattingSection({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Content" }),
         config.markdown && /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.Checkbox,
+          chunkPG7QBH3G_cjs.Checkbox,
           {
             label: "Preview",
             checked: showPreview,
@@ -4465,7 +4554,7 @@ function TextFormattingSection({
           "div",
           {
             dangerouslySetInnerHTML: {
-              __html: chunk4AVL6GQK_cjs.parseMarkdownSafe(config.content ?? "")
+              __html: chunkKXB2IZI2_cjs.parseMarkdownSafe(config.content ?? "")
             }
           }
         )
@@ -4481,7 +4570,7 @@ function TextFormattingSection({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chunkNY6TZLST_cjs.Checkbox,
+      chunkPG7QBH3G_cjs.Checkbox,
       {
         label: "Enable Markdown",
         checked: config.markdown ?? false,
@@ -4492,7 +4581,7 @@ function TextFormattingSection({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: halfFieldStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Alignment" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.Select,
+          chunkPG7QBH3G_cjs.Select,
           {
             value: config.alignment ?? "Left",
             onChange: (value) => onChange("alignment", value),
@@ -4503,7 +4592,7 @@ function TextFormattingSection({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: halfFieldStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Font Size" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.Select,
+          chunkPG7QBH3G_cjs.Select,
           {
             value: config.fontSize ?? "Normal",
             onChange: (value) => onChange("fontSize", value),
@@ -4620,13 +4709,13 @@ function PivotConfigSection({
     ).map((col) => col.column);
   }, [query, config.pivot_column, config.value_column]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkNY6TZLST_cjs.CollapsibleSection,
+    chunkPG7QBH3G_cjs.CollapsibleSection,
     {
       title: "Pivot Table",
       defaultOpen: defaultOpen || isPivotEnabled,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.Checkbox,
+          chunkPG7QBH3G_cjs.Checkbox,
           {
             label: "Enable Pivot Mode",
             checked: isPivotEnabled,
@@ -4637,7 +4726,7 @@ function PivotConfigSection({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Pivot Column" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.pivot_column ?? "",
                 onChange: (value) => onChange("pivot_column", value || void 0),
@@ -4652,7 +4741,7 @@ function PivotConfigSection({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Value Column" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.value_column ?? "",
                 onChange: (value) => onChange("value_column", value || void 0),
@@ -4715,7 +4804,7 @@ function LayoutConstraintsSection({
   };
   const hasConstraints = position.minW !== void 0 || position.maxW !== void 0 || position.minH !== void 0 || position.maxH !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkNY6TZLST_cjs.CollapsibleSection,
+    chunkPG7QBH3G_cjs.CollapsibleSection,
     {
       title: "Size Constraints",
       defaultOpen: defaultOpen || hasConstraints,
@@ -4723,7 +4812,7 @@ function LayoutConstraintsSection({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Min Width" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Input,
+            chunkPG7QBH3G_cjs.Input,
             {
               type: "number",
               value: position.minW !== void 0 ? String(position.minW) : "",
@@ -4737,7 +4826,7 @@ function LayoutConstraintsSection({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Max Width" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Input,
+            chunkPG7QBH3G_cjs.Input,
             {
               type: "number",
               value: position.maxW !== void 0 ? String(position.maxW) : "",
@@ -4751,7 +4840,7 @@ function LayoutConstraintsSection({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Min Height" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Input,
+            chunkPG7QBH3G_cjs.Input,
             {
               type: "number",
               value: position.minH !== void 0 ? String(position.minH) : "",
@@ -4764,7 +4853,7 @@ function LayoutConstraintsSection({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Max Height" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Input,
+            chunkPG7QBH3G_cjs.Input,
             {
               type: "number",
               value: position.maxH !== void 0 ? String(position.maxH) : "",
@@ -4832,14 +4921,14 @@ function CrossFilterSection({
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkNY6TZLST_cjs.CollapsibleSection,
+    chunkPG7QBH3G_cjs.CollapsibleSection,
     {
       title: "Cross-Filtering",
       defaultOpen: defaultOpen || crossFilterEnabled,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Checkbox,
+            chunkPG7QBH3G_cjs.Checkbox,
             {
               label: "Enable as filter source",
               checked: crossFilterEnabled,
@@ -4851,7 +4940,7 @@ function CrossFilterSection({
         crossFilterEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Filter Column" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Select,
+            chunkPG7QBH3G_cjs.Select,
             {
               value: config.cross_filter?.column ?? config.x_axis ?? "",
               onChange: handleColumnChange,
@@ -4950,11 +5039,11 @@ function ValueFormattingSection({
     marginBottom: theme.spacing.xs
   };
   const isCurrency = config.valueFormat === "currency" || config.format === "currency";
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunkNY6TZLST_cjs.CollapsibleSection, { title: "Value Formatting", defaultOpen, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkPG7QBH3G_cjs.CollapsibleSection, { title: "Value Formatting", defaultOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Format" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: config.valueFormat || config.format || "number",
           onChange: (value) => {
@@ -4969,7 +5058,7 @@ function ValueFormattingSection({
     isCurrency && showCurrency && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Currency Symbol" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Input,
+        chunkPG7QBH3G_cjs.Input,
         {
           value: config.currencySymbol ?? "$",
           onChange: (e) => onChange("currencySymbol", e.target.value),
@@ -4981,7 +5070,7 @@ function ValueFormattingSection({
     showCompact && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Compact Notation" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: config.compactNotation || "",
           onChange: (value) => onChange("compactNotation", value ? value : null),
@@ -4992,7 +5081,7 @@ function ValueFormattingSection({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Decimal Places" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: String(config.decimalDigits ?? 2),
           onChange: (value) => onChange("decimalDigits", parseInt(value, 10)),
@@ -5033,9 +5122,9 @@ function DisplayConfigSection({
     "pie_chart",
     "scatter_chart"
   ].includes(widgetType);
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunkNY6TZLST_cjs.CollapsibleSection, { title: "Display Options", defaultOpen, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkPG7QBH3G_cjs.CollapsibleSection, { title: "Display Options", defaultOpen, children: [
     showColorPalette && /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chunkNY6TZLST_cjs.ColorPaletteSelector,
+      chunkPG7QBH3G_cjs.ColorPaletteSelector,
       {
         value: config.colors,
         onChange: (colors) => onChange("colors", colors)
@@ -5044,7 +5133,7 @@ function DisplayConfigSection({
     showOrientation && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Orientation" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Select,
+        chunkPG7QBH3G_cjs.Select,
         {
           value: config.orientation || "vertical",
           onChange: (value) => onChange("orientation", value),
@@ -5057,7 +5146,7 @@ function DisplayConfigSection({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Checkbox,
+        chunkPG7QBH3G_cjs.Checkbox,
         {
           label: "Show Legend",
           checked: config.show_legend ?? true,
@@ -5065,7 +5154,7 @@ function DisplayConfigSection({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Checkbox,
+        chunkPG7QBH3G_cjs.Checkbox,
         {
           label: "Data Labels",
           checked: config.show_data_labels ?? false,
@@ -5073,7 +5162,7 @@ function DisplayConfigSection({
         }
       ),
       showStacked && /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Checkbox,
+        chunkPG7QBH3G_cjs.Checkbox,
         {
           label: "Stacked",
           checked: config.stacked ?? false,
@@ -5158,10 +5247,10 @@ function DateFormattingSection({
     fontSize: theme.fontSizes.sm,
     color: theme.colors.textMuted
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.CollapsibleSection, { title: "Date Formatting", defaultOpen, children: dateColumns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.CollapsibleSection, { title: "Date Formatting", defaultOpen, children: dateColumns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: columnNameStyle, children: col.alias }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkNY6TZLST_cjs.Select,
+      chunkPG7QBH3G_cjs.Select,
       {
         value: config.dateFormats?.[col.name] || "",
         onChange: (value) => handleFormatChange(col.name, value),
@@ -5219,10 +5308,10 @@ function TrendConfigSection({
     color: theme.colors.textMuted,
     marginTop: theme.spacing.xs
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunkNY6TZLST_cjs.CollapsibleSection, { title: "Trend Comparison", defaultOpen, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkPG7QBH3G_cjs.CollapsibleSection, { title: "Trend Comparison", defaultOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNY6TZLST_cjs.Checkbox,
+        chunkPG7QBH3G_cjs.Checkbox,
         {
           label: "Show Trend Indicator",
           checked: config.showTrend ?? false,
@@ -5235,7 +5324,7 @@ function TrendConfigSection({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Comparison Period" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.Select,
+          chunkPG7QBH3G_cjs.Select,
           {
             value: config.trendPeriod || "previous_period",
             onChange: (value) => onChange("trendPeriod", value),
@@ -5246,7 +5335,7 @@ function TrendConfigSection({
       dateColumnOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Date Column" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.Select,
+          chunkPG7QBH3G_cjs.Select,
           {
             value: config.trendDateColumn || "",
             onChange: (value) => onChange("trendDateColumn", value || void 0),
@@ -5292,7 +5381,8 @@ function WidgetEditorPage({
   onCancel
 }) {
   const { theme } = chunkLMTG3LRC_cjs.useTheme();
-  const { client } = chunkNY6TZLST_cjs.useAnalytics();
+  const { client } = chunkPG7QBH3G_cjs.useAnalytics();
+  const { enabled: llmEnabled, isLoading: llmStatusLoading } = chunkPG7QBH3G_cjs.useLLMStatus();
   const isNew = widget === null;
   const [type, setType] = react.useState(widget?.type ?? "bar_chart");
   const [title, setTitle] = react.useState(widget?.title ?? "New Widget");
@@ -5304,8 +5394,10 @@ function WidgetEditorPage({
   const [position, setPosition] = react.useState(
     widget?.position ?? { x: 0, y: 0, w: 6, h: 4, minW: 2, minH: 2 }
   );
+  const [rawSql, setRawSql] = react.useState(widget?.config?.raw_sql ?? "");
+  const [schemaOpen, setSchemaOpen] = react.useState(true);
   const [dataSourceMode, setDataSourceMode] = react.useState(
-    isNew ? "guided" : widget?.dataSourceMode ?? "guided"
+    isNew ? "guided" : widget?.config?.data_source_mode ?? "guided"
   );
   const [previewResult, setPreviewResult] = react.useState(null);
   const [previewLoading, setPreviewLoading] = react.useState(false);
@@ -5328,6 +5420,24 @@ function WidgetEditorPage({
     []
   );
   const refreshPreview = react.useCallback(async () => {
+    if (dataSourceMode === "sql") {
+      if (!rawSql.trim() || !client) {
+        setPreviewResult(null);
+        return;
+      }
+      setPreviewLoading(true);
+      setPreviewError(null);
+      try {
+        const result = await client.executeSQL(rawSql);
+        setPreviewResult(result);
+      } catch (err) {
+        setPreviewError(err instanceof Error ? err : new Error("SQL execution failed"));
+        setPreviewResult(null);
+      } finally {
+        setPreviewLoading(false);
+      }
+      return;
+    }
     if (!query || !client) {
       setPreviewResult(null);
       return;
@@ -5343,15 +5453,38 @@ function WidgetEditorPage({
     } finally {
       setPreviewLoading(false);
     }
-  }, [query, client]);
+  }, [query, rawSql, dataSourceMode, client]);
   react.useEffect(() => {
+    if (dataSourceMode === "sql") {
+      return;
+    }
     if (query) {
       void refreshPreview();
     } else {
       setPreviewResult(null);
       setPreviewError(null);
     }
-  }, [query, refreshPreview]);
+  }, [query, dataSourceMode, refreshPreview]);
+  const queryHasAdvancedFeatures = react.useCallback((q) => {
+    if (!q) return false;
+    if (q.tables && q.tables.length > 1 && q.joins && q.joins.length > 0) return true;
+    if (q.calculated_fields && q.calculated_fields.length > 0) return true;
+    if (q.group_by && q.group_by.length > 0) return true;
+    if (q.order_by && q.order_by.length > 0) return true;
+    if (q.limit != null) return true;
+    if (q.offset != null) return true;
+    if (q.time_series) return true;
+    return false;
+  }, []);
+  const handleModeSwitch = react.useCallback((newMode) => {
+    if (newMode === "guided" && (dataSourceMode === "advanced" || dataSourceMode === "saved") && queryHasAdvancedFeatures(query)) {
+      const confirmed = window.confirm(
+        "This query uses advanced features (e.g. joins, calculated fields, grouping, sorting, pagination, time series) that Guided mode may not fully represent. The query will be preserved but some settings may not be editable in Guided mode.\n\nSwitch to Guided mode?"
+      );
+      if (!confirmed) return;
+    }
+    setDataSourceMode(newMode);
+  }, [dataSourceMode, query, queryHasAdvancedFeatures]);
   const handleSavedQuerySelect = react.useCallback((savedQuery) => {
     setQuery(savedQuery.query);
   }, []);
@@ -5363,19 +5496,25 @@ function WidgetEditorPage({
     setPreviewResult(null);
     setPreviewError(null);
   }, []);
+  const handleApplySql = react.useCallback((sql) => {
+    setRawSql(sql);
+  }, []);
   const handleSave = react.useCallback(() => {
+    const savedConfig = { ...config, data_source_mode: dataSourceMode };
+    if (dataSourceMode === "sql") {
+      savedConfig.raw_sql = rawSql.trim() || void 0;
+    }
     const savedWidget = {
       id: widget?.id ?? generateId(),
       type,
       title,
-      config,
-      query,
+      config: savedConfig,
+      query: dataSourceMode === "sql" ? null : query,
       position,
-      hyperlink,
-      dataSourceMode
+      hyperlink
     };
     onSave(savedWidget);
-  }, [widget, type, title, config, query, position, hyperlink, dataSourceMode, onSave]);
+  }, [widget, type, title, config, query, rawSql, position, hyperlink, dataSourceMode, onSave]);
   const columnSelectOptions = react.useMemo(() => {
     if (!schema) return [];
     return schema.tables.flatMap(
@@ -5398,7 +5537,8 @@ function WidgetEditorPage({
     justifyContent: "space-between",
     padding: `${theme.spacing.md} ${theme.spacing.lg}`,
     borderBottom: `1px solid ${theme.colors.border}`,
-    backgroundColor: theme.colors.surface
+    backgroundColor: theme.colors.surface,
+    flexShrink: 0
   };
   const headerLeftStyle = {
     display: "flex",
@@ -5429,38 +5569,28 @@ function WidgetEditorPage({
   };
   const bodyStyle = {
     flex: 1,
-    display: "flex",
-    minHeight: 0
+    overflow: "auto",
+    display: "grid",
+    gridTemplateColumns: "360px 1fr"
   };
   const leftPanelStyle = {
-    width: "320px",
-    flexShrink: 0,
     borderRight: `1px solid ${theme.colors.border}`,
-    overflow: "auto",
     padding: theme.spacing.md,
+    paddingBottom: theme.spacing.xl,
     display: "flex",
     flexDirection: "column",
     gap: theme.spacing.lg
   };
   const mainPanelStyle = {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0
+    minWidth: 0
   };
   const previewPanelStyle = {
-    height: "300px",
-    flexShrink: 0,
-    padding: theme.spacing.md,
-    borderBottom: `1px solid ${theme.colors.border}`
-  };
-  const dataSourcePanelStyle = {
-    flex: "1 1 auto",
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0,
+    height: "440px",
+    padding: theme.spacing.lg,
+    borderBottom: `1px solid ${theme.colors.border}`,
     overflow: "hidden"
   };
+  const dataSourcePanelStyle = {};
   const dataSourceHeaderStyle = {
     display: "flex",
     alignItems: "center",
@@ -5480,15 +5610,12 @@ function WidgetEditorPage({
     transition: "all 0.15s ease"
   });
   const dataSourceContentStyle = {
-    flex: "1 1 auto",
-    overflow: "auto",
     padding: theme.spacing.md,
-    paddingBottom: "100px",
-    // Extra space to ensure filter buttons are visible
-    minHeight: "250px"
+    paddingBottom: "200px"
+    // Extra padding to create scroll room for filters
   };
   const sectionStyle = {
-    marginBottom: theme.spacing.md
+    // Note: Parent has flex gap for spacing between sections
   };
   const sectionTitleStyle = {
     fontSize: theme.fontSizes.xs,
@@ -5537,7 +5664,7 @@ function WidgetEditorPage({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "X-Axis Column" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.x_axis || "",
                 onChange: (value) => updateConfig("x_axis", value || void 0),
@@ -5598,7 +5725,7 @@ function WidgetEditorPage({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "X-Axis Column" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.x_axis || "",
                 onChange: (value) => updateConfig("x_axis", value || void 0),
@@ -5679,7 +5806,7 @@ function WidgetEditorPage({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "X-Axis Column" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.x_axis || "",
                 onChange: (value) => updateConfig("x_axis", value || void 0),
@@ -5690,7 +5817,7 @@ function WidgetEditorPage({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Y-Axis Column" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.y_axis?.[0] || "",
                 onChange: (value) => updateConfig("y_axis", value ? [value] : void 0),
@@ -5723,7 +5850,7 @@ function WidgetEditorPage({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Page Size" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: String(config.page_size || 10),
                 onChange: (value) => updateConfig("page_size", parseInt(value, 10)),
@@ -5737,7 +5864,7 @@ function WidgetEditorPage({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Checkbox,
+            chunkPG7QBH3G_cjs.Checkbox,
             {
               label: "Sortable Columns",
               checked: config.sortable ?? true,
@@ -5795,10 +5922,10 @@ function WidgetEditorPage({
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: theme.spacing.sm }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "table", size: 16 }),
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "table", size: 16 }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: theme.colors.text }, children: "Query configured" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "ghost", size: "sm", onClick: handleClearQuery, children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "x", size: 16 }) })
+                /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "ghost", size: "sm", onClick: handleClearQuery, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "x", size: 16 }) })
               ]
             }
           ),
@@ -5817,14 +5944,14 @@ function WidgetEditorPage({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerLeftStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", style: backButtonStyle, onClick: onCancel, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "chevron-left", size: 16 }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "chevron-left", size: 16 }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Back" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: headerTitleStyle, children: isNew ? "Add Widget" : "Edit Widget" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerActionsStyle, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "ghost", onClick: onCancel, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "primary", onClick: handleSave, children: isNew ? "Add Widget" : "Save Changes" })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "ghost", onClick: onCancel, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "primary", onClick: handleSave, children: isNew ? "Add Widget" : "Save Changes" })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: bodyStyle, children: [
@@ -5835,7 +5962,7 @@ function WidgetEditorPage({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Title" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Input,
+              chunkPG7QBH3G_cjs.Input,
               {
                 value: title,
                 onChange: (e) => setTitle(e.target.value),
@@ -5873,6 +6000,7 @@ function WidgetEditorPage({
             title,
             config,
             query,
+            rawSql: dataSourceMode === "sql" ? rawSql : void 0,
             result: previewResult,
             isLoading: previewLoading,
             error: previewError
@@ -5882,30 +6010,57 @@ function WidgetEditorPage({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dataSourceHeaderStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: theme.fontSizes.sm, fontWeight: 500, marginRight: "auto" }, children: "Data Source" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              chunkPG7QBH3G_cjs.Tooltip,
               {
-                type: "button",
-                style: tabStyle(dataSourceMode === "guided"),
-                onClick: () => setDataSourceMode("guided"),
-                children: "Guided"
+                content: "Quick setup: pick columns from dropdowns to build your chart",
+                position: "bottom",
+                style: { whiteSpace: "normal" },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": "data-source-mode-guided",
+                    style: tabStyle(dataSourceMode === "guided"),
+                    onClick: () => handleModeSwitch("guided"),
+                    children: "Guided"
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              chunkPG7QBH3G_cjs.Tooltip,
               {
-                type: "button",
-                style: tabStyle(dataSourceMode === "advanced"),
-                onClick: () => setDataSourceMode("advanced"),
-                children: "Advanced"
+                content: "Full control: combine tables, add filters, and create custom calculations",
+                position: "bottom",
+                style: { whiteSpace: "normal" },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": "data-source-mode-advanced",
+                    style: tabStyle(dataSourceMode === "advanced"),
+                    onClick: () => handleModeSwitch("advanced"),
+                    children: "Advanced"
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              chunkPG7QBH3G_cjs.Tooltip,
               {
-                type: "button",
-                style: tabStyle(dataSourceMode === "saved"),
-                onClick: () => setDataSourceMode("saved"),
-                children: "Saved Query"
+                content: "Write raw SQL queries directly, with optional AI assistance",
+                position: "bottom",
+                style: { whiteSpace: "normal" },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": "data-source-mode-sql",
+                    style: tabStyle(dataSourceMode === "sql"),
+                    onClick: () => handleModeSwitch("sql"),
+                    children: "SQL"
+                  }
+                )
               }
             )
           ] }),
@@ -5921,7 +6076,7 @@ function WidgetEditorPage({
               }
             ),
             dataSourceMode === "advanced" && /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.QueryBuilder,
+              chunkPG7QBH3G_cjs.QueryBuilder,
               {
                 initialQuery: query ?? void 0,
                 onQueryChange: handleQueryChange,
@@ -5932,13 +6087,106 @@ function WidgetEditorPage({
               }
             ),
             dataSourceMode === "saved" && /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.SavedQueryPicker,
+              chunkPG7QBH3G_cjs.SavedQueryPicker,
               {
                 currentQuery: query,
                 onSelect: handleSavedQuerySelect,
                 showSave: false
               }
-            )
+            ),
+            dataSourceMode === "sql" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 0, height: "100%", minHeight: "400px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "schema-panel", style: {
+                width: schemaOpen ? "220px" : "36px",
+                flexShrink: 0,
+                transition: "width 0.2s ease",
+                borderRight: `1px solid ${theme.colors.border}`,
+                display: "flex",
+                flexDirection: "column",
+                overflow: "hidden"
+              }, children: schemaOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+                chunkPG7QBH3G_cjs.SchemaExplorer,
+                {
+                  searchable: true,
+                  collapsible: true,
+                  onColumnSelect: (table, col) => {
+                    const ref = `"${table.name}"."${col.name}"`;
+                    setRawSql((prev) => prev ? `${prev} ${ref}` : ref);
+                  },
+                  headerAction: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setSchemaOpen(false),
+                      title: "Collapse schema panel",
+                      "data-testid": "schema-toggle-open",
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "22px",
+                        height: "22px",
+                        backgroundColor: "transparent",
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: theme.radius.sm,
+                        cursor: "pointer",
+                        color: theme.colors.textMuted,
+                        flexShrink: 0
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "chevron-left", size: 12 })
+                    }
+                  ),
+                  style: { flex: 1, border: "none", borderRadius: 0 }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSchemaOpen(true),
+                  title: "Show schema browser",
+                  "data-testid": "schema-toggle-collapsed",
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: "6px",
+                    paddingTop: theme.spacing.sm,
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: theme.colors.surface,
+                    border: "none",
+                    cursor: "pointer",
+                    color: theme.colors.textMuted,
+                    fontFamily: theme.fonts.sans
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "table", size: 16 }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                      writingMode: "vertical-rl",
+                      fontSize: "11px",
+                      fontWeight: 500,
+                      letterSpacing: "0.04em"
+                    }, children: "Schema" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, minWidth: 0 }, "data-testid": "sql-editor", children: /* @__PURE__ */ jsxRuntime.jsx(
+                chunkPG7QBH3G_cjs.CustomSQLEditor,
+                {
+                  initialSql: rawSql,
+                  onSqlChange: setRawSql,
+                  onExecute: () => void refreshPreview(),
+                  showResults: false,
+                  placeholder: "Write your SQL query here..."
+                }
+              ) }),
+              !llmStatusLoading && llmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "340px", flexShrink: 0 }, "data-testid": "chat-panel", children: /* @__PURE__ */ jsxRuntime.jsx(
+                chunkPG7QBH3G_cjs.ChatPanel,
+                {
+                  currentSql: rawSql || null,
+                  onApplySql: handleApplySql
+                }
+              ) })
+            ] })
           ] })
         ] })
       ] })
@@ -5982,8 +6230,8 @@ function DashboardEditor({
   className = ""
 }) {
   const { theme } = chunkLMTG3LRC_cjs.useTheme();
-  const { client } = chunkNY6TZLST_cjs.useAnalytics();
-  const { schema } = chunkNY6TZLST_cjs.useSchema();
+  const { client } = chunkPG7QBH3G_cjs.useAnalytics();
+  const { schema } = chunkPG7QBH3G_cjs.useSchema();
   const [currentDashboardId, setCurrentDashboardId] = react.useState(dashboardId);
   react.useEffect(() => {
     setCurrentDashboardId(dashboardId);
@@ -6020,7 +6268,9 @@ function DashboardEditor({
   clientRef.current = client;
   const loadedDashboardRef = react.useRef(null);
   const executeWidgetQueries = react.useCallback(async (widgets, currentClient) => {
-    const widgetsWithQueries = widgets.filter((w) => w.query);
+    const widgetsWithQueries = widgets.filter(
+      (w) => w.query || w.config?.data_source_mode === "sql" && w.config?.raw_sql
+    );
     if (widgetsWithQueries.length === 0) return;
     for (let i = 0; i < widgetsWithQueries.length; i += batchSize) {
       const batch = widgetsWithQueries.slice(i, i + batchSize);
@@ -6034,7 +6284,8 @@ function DashboardEditor({
       await Promise.all(
         batch.map(async (widget) => {
           try {
-            const result = await currentClient.executeQuery(widget.query);
+            const isSqlMode = widget.config?.data_source_mode === "sql" && widget.config?.raw_sql;
+            const result = isSqlMode ? await currentClient.executeSQL(widget.config.raw_sql) : await currentClient.executeQuery(widget.query);
             setWidgetResults((prev) => ({ ...prev, [widget.id]: result }));
             setWidgetRefreshTimes((prev) => ({ ...prev, [widget.id]: Math.floor(Date.now() / 1e3) }));
           } catch (err) {
@@ -6111,11 +6362,12 @@ function DashboardEditor({
   const refreshWidget = react.useCallback(
     async (widgetId, widgetOverride) => {
       const widget = widgetOverride ?? dashboard.widgets.find((w) => w.id === widgetId);
-      if (!widget?.query || !client) return;
+      const isSqlMode = widget?.config?.data_source_mode === "sql" && widget?.config?.raw_sql;
+      if (!widget?.query && !isSqlMode || !client) return;
       setWidgetLoading((prev) => ({ ...prev, [widgetId]: true }));
       setRefreshingWidgets((prev) => new Set(prev).add(widgetId));
       try {
-        const result = await client.executeQuery(widget.query, true);
+        const result = isSqlMode ? await client.executeSQL(widget.config.raw_sql) : await client.executeQuery(widget.query, true);
         setWidgetResults((prev) => ({ ...prev, [widgetId]: result }));
         setWidgetRefreshTimes((prev) => ({ ...prev, [widgetId]: Math.floor(Date.now() / 1e3) }));
         setWidgetErrors((prev) => {
@@ -6610,7 +6862,7 @@ function WidgetPalette({
           Object.assign(e.currentTarget.style, itemStyle);
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconContainerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: widgetType.icon, size: 24 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconContainerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: widgetType.icon, size: 24 }) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle, children: widgetType.label }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: descriptionStyle, children: widgetType.description })
         ]
@@ -6762,7 +7014,7 @@ function WidgetEditor({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Format" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.format || "number",
                 onChange: (value) => updateConfig("format", value),
@@ -6778,7 +7030,7 @@ function WidgetEditor({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Trend Comparison Field" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.trend_comparison || "",
                 onChange: (value) => updateConfig("trend_comparison", value || void 0),
@@ -6795,7 +7047,7 @@ function WidgetEditor({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "X-Axis Column" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.x_axis || "",
                 onChange: (value) => updateConfig("x_axis", value),
@@ -6806,7 +7058,7 @@ function WidgetEditor({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Orientation" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.orientation || "vertical",
                 onChange: (value) => updateConfig("orientation", value),
@@ -6819,7 +7071,7 @@ function WidgetEditor({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Checkbox,
+              chunkPG7QBH3G_cjs.Checkbox,
               {
                 label: "Show Legend",
                 checked: config.show_legend ?? true,
@@ -6827,7 +7079,7 @@ function WidgetEditor({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Checkbox,
+              chunkPG7QBH3G_cjs.Checkbox,
               {
                 label: "Stacked",
                 checked: config.stacked ?? false,
@@ -6835,7 +7087,7 @@ function WidgetEditor({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Checkbox,
+              chunkPG7QBH3G_cjs.Checkbox,
               {
                 label: "Show Data Labels",
                 checked: config.show_data_labels ?? false,
@@ -6850,7 +7102,7 @@ function WidgetEditor({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "X-Axis Column" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: config.x_axis || "",
                 onChange: (value) => updateConfig("x_axis", value),
@@ -6860,7 +7112,7 @@ function WidgetEditor({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Checkbox,
+              chunkPG7QBH3G_cjs.Checkbox,
               {
                 label: "Show Legend",
                 checked: config.show_legend ?? true,
@@ -6868,7 +7120,7 @@ function WidgetEditor({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Checkbox,
+              chunkPG7QBH3G_cjs.Checkbox,
               {
                 label: "Show Data Labels",
                 checked: config.show_data_labels ?? false,
@@ -6880,7 +7132,7 @@ function WidgetEditor({
       case "pie_chart":
         return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Checkbox,
+            chunkPG7QBH3G_cjs.Checkbox,
             {
               label: "Show Legend",
               checked: config.show_legend ?? true,
@@ -6888,7 +7140,7 @@ function WidgetEditor({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Checkbox,
+            chunkPG7QBH3G_cjs.Checkbox,
             {
               label: "Show Data Labels",
               checked: config.show_data_labels ?? true,
@@ -6901,7 +7153,7 @@ function WidgetEditor({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Page Size" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Select,
+              chunkPG7QBH3G_cjs.Select,
               {
                 value: String(config.page_size || 10),
                 onChange: (value) => updateConfig("page_size", parseInt(value, 10)),
@@ -6916,7 +7168,7 @@ function WidgetEditor({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Checkbox,
+            chunkPG7QBH3G_cjs.Checkbox,
             {
               label: "Sortable Columns",
               checked: config.sortable ?? true,
@@ -6949,7 +7201,7 @@ function WidgetEditor({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Checkbox,
+            chunkPG7QBH3G_cjs.Checkbox,
             {
               label: "Enable Markdown",
               checked: config.markdown ?? true,
@@ -6964,7 +7216,7 @@ function WidgetEditor({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: overlayStyle, onClick: onCancel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyle, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { style: titleStyle, children: "Edit Widget" }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "ghost", size: "sm", onClick: onCancel, children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "x", size: 20 }) })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "ghost", size: "sm", onClick: onCancel, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "x", size: 20 }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: bodyStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle, children: [
@@ -6972,7 +7224,7 @@ function WidgetEditor({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Title" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNY6TZLST_cjs.Input,
+            chunkPG7QBH3G_cjs.Input,
             {
               value: title,
               onChange: (e) => setTitle(e.target.value),
@@ -7008,10 +7260,10 @@ function WidgetEditor({
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: theme.spacing.sm }, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "table", size: 16 }),
+                      /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "table", size: 16 }),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: theme.colors.text }, children: queryName || "Custom Query" })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "ghost", size: "sm", onClick: handleClearQuery, children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "x", size: 16 }) })
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "ghost", size: "sm", onClick: handleClearQuery, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "x", size: 16 }) })
                   ]
                 }
               ),
@@ -7039,11 +7291,11 @@ function WidgetEditor({
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", color: theme.colors.textMuted }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "table", size: 24, style: { marginBottom: theme.spacing.xs } }),
+                /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "table", size: 24, style: { marginBottom: theme.spacing.xs } }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Select a saved query to power this widget" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkNY6TZLST_cjs.SavedQueryPicker,
+                chunkPG7QBH3G_cjs.SavedQueryPicker,
                 {
                   currentQuery: null,
                   onSelect: handleSelectSavedQuery,
@@ -7056,8 +7308,8 @@ function WidgetEditor({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: footerStyle, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "ghost", onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "primary", onClick: handleSave, children: "Save Widget" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "ghost", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "primary", onClick: handleSave, children: "Save Widget" })
     ] })
   ] }) });
 }
@@ -7202,31 +7454,31 @@ var DashboardCard = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyles, children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { style: titleStyles, children: dashboard.name }),
             actions ? actions : /* @__PURE__ */ jsxRuntime.jsxs(
-              chunkNY6TZLST_cjs.Dropdown,
+              chunkPG7QBH3G_cjs.Dropdown,
               {
                 trigger: /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkNY6TZLST_cjs.Button,
+                  chunkPG7QBH3G_cjs.Button,
                   {
                     variant: "ghost",
                     size: "sm",
                     onClick: (e) => e.stopPropagation(),
                     disabled: actionsDisabled,
                     "aria-label": "Dashboard actions",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "more-vertical", size: 16 })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "more-vertical", size: 16 })
                   }
                 ),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(chunkNY6TZLST_cjs.DropdownItem, { onClick: () => handleMenuAction("edit"), children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "edit", size: 14 }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(chunkPG7QBH3G_cjs.DropdownItem, { onClick: () => handleMenuAction("edit"), children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "edit", size: 14 }),
                     "Edit"
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(chunkNY6TZLST_cjs.DropdownItem, { onClick: () => handleMenuAction("duplicate"), children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "copy", size: 14 }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(chunkPG7QBH3G_cjs.DropdownItem, { onClick: () => handleMenuAction("duplicate"), children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "copy", size: 14 }),
                     "Duplicate"
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.DropdownSeparator, {}),
-                  /* @__PURE__ */ jsxRuntime.jsxs(chunkNY6TZLST_cjs.DropdownItem, { onClick: () => handleMenuAction("delete"), children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "trash", size: 14 }),
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.DropdownSeparator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsxs(chunkPG7QBH3G_cjs.DropdownItem, { onClick: () => handleMenuAction("delete"), children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "trash", size: 14 }),
                     "Delete"
                   ] })
                 ]
@@ -7236,13 +7488,13 @@ var DashboardCard = react.forwardRef(
           dashboard.description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: descriptionStyles, children: dashboard.description }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: metaStyles, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: metaItemStyles, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "grid", size: 12 }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "grid", size: 12 }),
               dashboard.widgets.length,
               " widget",
               dashboard.widgets.length !== 1 ? "s" : ""
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: metaItemStyles, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "calendar", size: 12 }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "calendar", size: 12 }),
               formatDate(dashboard.updated_at)
             ] }),
             dashboard.is_public ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: publicBadgeStyles, children: "Public" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: privateBadgeStyles, children: "Private" })
@@ -7300,32 +7552,32 @@ var DashboardList = react.forwardRef(
     if (isLoading) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, style: { ...containerStyles, ...style }, ...props, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyles2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Skeleton, { width: 200, height: 32 }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Skeleton, { width: 150, height: 40 })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Skeleton, { width: 200, height: 32 }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Skeleton, { width: 150, height: 40 })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: getGridStyles(columns), children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Skeleton, { height: 150, style: { borderRadius: "var(--prismiq-radius-lg)" } }, i)) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: getGridStyles(columns), children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Skeleton, { height: 150, style: { borderRadius: "var(--prismiq-radius-lg)" } }, i)) })
       ] });
     }
     if (error) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: { ...containerStyles, ...style }, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: errorStyles, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "alert-circle", size: 48 }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "alert-circle", size: 48 }),
         /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
           "Failed to load dashboards: ",
           error.message
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { variant: "secondary", onClick: () => window.location.reload(), children: "Retry" })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { variant: "secondary", onClick: () => window.location.reload(), children: "Retry" })
       ] }) });
     }
     if (!dashboards || dashboards.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, style: { ...containerStyles, ...style }, ...props, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyles2, children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: titleStyles2, children: "Dashboards" }),
-          onCreate && /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { onClick: onCreate, leftIcon: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "plus", size: 16 }), children: "Create Dashboard" })
+          onCreate && /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { onClick: onCreate, leftIcon: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "plus", size: 16 }), children: "Create Dashboard" })
         ] }),
         emptyState || /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNY6TZLST_cjs.EmptyState,
+          chunkPG7QBH3G_cjs.EmptyState,
           {
-            icon: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "layout", size: 64 }),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "layout", size: 64 }),
             title: "No dashboards yet",
             description: "Create your first dashboard to start visualizing your data.",
             action: onCreate ? { label: "Create Dashboard", onClick: onCreate } : void 0
@@ -7340,7 +7592,7 @@ var DashboardList = react.forwardRef(
           dashboards.length,
           ")"
         ] }),
-        onCreate && /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { onClick: onCreate, leftIcon: /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Icon, { name: "plus", size: 16 }), children: "Create Dashboard" })
+        onCreate && /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { onClick: onCreate, leftIcon: /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Icon, { name: "plus", size: 16 }), children: "Create Dashboard" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: getGridStyles(columns), children: dashboards.map((dashboard) => {
         const cardProps = {
@@ -7440,7 +7692,7 @@ var DashboardDialog = react.forwardRef(
     );
     const displayError = validationError || error;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkNY6TZLST_cjs.Dialog,
+      chunkPG7QBH3G_cjs.Dialog,
       {
         open,
         onClose,
@@ -7452,7 +7704,7 @@ var DashboardDialog = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyles, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "dashboard-name", style: labelStyles, children: "Name" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Input,
+              chunkPG7QBH3G_cjs.Input,
               {
                 id: "dashboard-name",
                 value: formState.name,
@@ -7466,7 +7718,7 @@ var DashboardDialog = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyles, children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "dashboard-description", style: labelStyles, children: "Description (optional)" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Input,
+              chunkPG7QBH3G_cjs.Input,
               {
                 id: "dashboard-description",
                 value: formState.description,
@@ -7478,7 +7730,7 @@ var DashboardDialog = react.forwardRef(
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: checkboxContainerStyles, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Checkbox,
+              chunkPG7QBH3G_cjs.Checkbox,
               {
                 id: "dashboard-public",
                 checked: formState.isPublic,
@@ -7488,9 +7740,9 @@ var DashboardDialog = react.forwardRef(
             ),
             /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "dashboard-public", style: checkboxLabelStyles, children: "Make this dashboard public" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(chunkNY6TZLST_cjs.DialogFooter, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(chunkPG7QBH3G_cjs.DialogFooter, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNY6TZLST_cjs.Button,
+              chunkPG7QBH3G_cjs.Button,
               {
                 type: "button",
                 variant: "secondary",
@@ -7499,7 +7751,7 @@ var DashboardDialog = react.forwardRef(
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkNY6TZLST_cjs.Button, { type: "submit", loading: isLoading, children: isEditMode ? "Save Changes" : "Create Dashboard" })
+            /* @__PURE__ */ jsxRuntime.jsx(chunkPG7QBH3G_cjs.Button, { type: "submit", loading: isLoading, children: isEditMode ? "Save Changes" : "Create Dashboard" })
           ] })
         ] })
       }
@@ -7539,5 +7791,5 @@ exports.useDashboardFilters = useDashboardFilters;
 exports.useFullscreen = useFullscreen;
 exports.useWidget = useWidget;
 exports.useWidgetVisibility = useWidgetVisibility;
-//# sourceMappingURL=chunk-FEABEF3J.cjs.map
-//# sourceMappingURL=chunk-FEABEF3J.cjs.map
+//# sourceMappingURL=chunk-FKXCINUF.cjs.map
+//# sourceMappingURL=chunk-FKXCINUF.cjs.map