diff --git a/app/e2e/fixtures.ts b/app/e2e/fixtures.ts
index 6bbbc2b1..f7a21b2f 100644
--- a/app/e2e/fixtures.ts
+++ b/app/e2e/fixtures.ts
@@ -7,14 +7,18 @@ import { AuthPage } from "./pages/auth";
 import { SidebarPage } from "./pages/sidebar";
 
 // Load test container env vars (quiet suppresses dotenvx tip banners).
-dotenv.config({ path: path.resolve(__dirname, "..", ".env.test"), quiet: true });
+dotenv.config({
+  path: path.resolve(__dirname, "..", ".env.test"),
+  quiet: true,
+});
 
 /** Seed user credentials (from docker/postgres/init.sql). */
 export const ALICE = { email: "alice@example.com", password: "password123" };
 export const BOB = { email: "bob@example.com", password: "password123" };
 
 /** Dynamic test container URLs. */
-export const TEST_NEO4J_BOLT_URL = process.env.TEST_NEO4J_BOLT_URL ?? "bolt://localhost:7687";
+export const TEST_NEO4J_BOLT_URL =
+  process.env.TEST_NEO4J_BOLT_URL ?? "bolt://localhost:7687";
 export const TEST_PG_PORT = process.env.TEST_PG_PORT ?? "5432";
 
 type Fixtures = {
@@ -74,15 +78,21 @@ export async function typeInEditor(
   // destroy and recreate the CM6 editor mid-flow.
   await expect(async () => {
     // Wait for CM6 to mount (re-checked each iteration in case of remount)
-    await cmContainer.locator(".cm-editor").waitFor({ state: "visible", timeout: 5_000 });
+    await cmContainer
+      .locator(".cm-editor")
+      .waitFor({ state: "visible", timeout: 5_000 });
 
     // Wait for the React wrapper to signal writable
-    await expect(cmContainer).toHaveAttribute("data-readonly", "false", { timeout: 5_000 });
+    await expect(cmContainer).toHaveAttribute("data-readonly", "false", {
+      timeout: 5_000,
+    });
 
     // Wait for initEditor to complete (view + compartments fully initialized).
     // This prevents the race where data-readonly is "false" but the CM6 view
     // hasn't been created yet because async imports are still in progress.
-    await expect(cmContainer).toHaveAttribute("data-editor-ready", "true", { timeout: 5_000 });
+    await expect(cmContainer).toHaveAttribute("data-editor-ready", "true", {
+      timeout: 5_000,
+    });
 
     // Pre-dispatch stability: poll until the editor has been continuously
     // ready for 3 consecutive checks (600ms stable window). Connection and
@@ -106,72 +116,59 @@ export async function typeInEditor(
     }
 
     // Strategy 1: Use CM6's internal dispatch API (most reliable).
-    // CM6 decorates managed DOM nodes with a `cmTile` property (Tile instance).
-    // We mirror EditorView.findFromDOM(): try .cm-content first, then .cm-editor.
-    const dispatched = await cmContainer.evaluate((el: HTMLElement, text: string) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      function findView(node: Element | null): any {
-        if (!node) return null;
+    // The QueryEditor component exposes `__cmView` on the container DOM element
+    // when initialization completes. This is more reliable than the internal
+    // `cmTile` property which may be mangled or inaccessible in production builds.
+    const dispatched = await cmContainer.evaluate(
+      (el: HTMLElement, text: string) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const tile = (node as any).cmTile;
-        return tile?.root?.view ?? tile?.view ?? null;
-      }
-      const cmContent = el.querySelector(".cm-content");
-      if (!cmContent) return "no-editor";
-      const view = findView(cmContent) ?? findView(el.querySelector(".cm-editor"));
-      if (!view) return "no-view";
-      if (view.state.readOnly) return "readonly";
-
-      // Replace entire document content
-      view.dispatch({
-        changes: { from: 0, to: view.state.doc.length, insert: text },
-      });
-      return view.state.doc.toString().includes(text.substring(0, 20))
-        ? "ok"
-        : "dispatch-failed";
-    }, query);
+        const view = (el as any).__cmView;
+        if (!el.querySelector(".cm-content")) return "no-editor";
+        if (!view) return "no-view";
+        if (view.state.readOnly) return "readonly";
+
+        // Replace entire document content
+        view.dispatch({
+          changes: { from: 0, to: view.state.doc.length, insert: text },
+        });
+        return view.state.doc.toString().includes(text.substring(0, 20))
+          ? "ok"
+          : "dispatch-failed";
+      },
+      query,
+    );
 
     if (dispatched === "ok") {
       // Post-dispatch stability: verify text survives any late re-renders.
       // The pre-dispatch check handles most cases; this is a safety net.
       // eslint-disable-next-line playwright/no-wait-for-timeout
       await page.waitForTimeout(300);
-      const stillPresent = await cmContainer.evaluate((el: HTMLElement, text: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        function findView(node: Element | null): any {
-          if (!node) return null;
+      const stillPresent = await cmContainer.evaluate(
+        (el: HTMLElement, text: string) => {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const tile = (node as any).cmTile;
-          return tile?.root?.view ?? tile?.view ?? null;
-        }
-        const view = findView(el.querySelector(".cm-content")) ?? findView(el.querySelector(".cm-editor"));
-        if (!view) return false;
-        return view.state.doc.toString().includes(text.substring(0, 20));
-      }, query);
+          const view = (el as any).__cmView;
+          if (!view) return false;
+          return view.state.doc.toString().includes(text.substring(0, 20));
+        },
+        query,
+      );
       if (!stillPresent) {
-        throw new Error("Text overwritten after dispatch (editor re-mounted) — retrying");
+        throw new Error(
+          "Text overwritten after dispatch (editor re-mounted) — retrying",
+        );
       }
       return;
     }
 
-    // Strategy 2: Keyboard fallback (for environments where cmView is not accessible
-    // or when the view is temporarily readonly during initialization)
+    // __cmView not ready yet — retry (editor may be re-mounting)
     if (dispatched === "no-view" || dispatched === "readonly") {
-      await expect(cm).toHaveAttribute("contenteditable", "true", { timeout: 2_000 });
-      await cm.click();
-      await page.keyboard.press("ControlOrMeta+a");
-      await page.keyboard.press("Backspace");
-      await page.keyboard.insertText(query);
-      const text = await cm.textContent();
-      if (!text || !text.includes(query.substring(0, 20))) {
-        throw new Error("Keyboard fallback: text not inserted");
-      }
+      throw new Error(`CM6 __cmView not available (${dispatched}) — retrying`);
       return;
     }
 
     // Retry-worthy states: no-editor, dispatch-failed
     throw new Error(`CM6 dispatch returned "${dispatched}" — retrying`);
-  }).toPass({ timeout: 20_000 });
+  }).toPass({ timeout: 30_000 });
 }
 
 /**
diff --git a/app/src/app/(dashboard)/[id]/edit/page.tsx b/app/src/app/(dashboard)/[id]/edit/page.tsx
index d6fdb188..b3725c2a 100644
--- a/app/src/app/(dashboard)/[id]/edit/page.tsx
+++ b/app/src/app/(dashboard)/[id]/edit/page.tsx
@@ -485,7 +485,9 @@ export default function DashboardEditorPage({
             initialTemplate={
               pendingTemplateId ? templateMap[pendingTemplateId] : undefined
             }
-            initialPreviewData={editorMode === "edit" ? cachedPreviewData : undefined}
+            initialPreviewData={
+              editorMode === "edit" ? cachedPreviewData : undefined
+            }
           />
 
           {templateWidget &&
@@ -545,23 +547,24 @@ export default function DashboardEditorPage({
                   <DashboardContainer
                     page={page}
                     editable
-                    onRemoveWidget={removeWidget}
-                    onEditWidget={openEditWidget}
-                    onDuplicateWidget={duplicateWidget}
-                    onLayoutChange={isActive ? updateGridLayout : undefined}
-                    onWidgetSettingsChange={(widgetId, settings) => {
-                      const target = page.widgets.find(
-                        (w) => w.id === widgetId,
-                      );
-                      if (target) {
-                        updateWidget(widgetId, { ...target, settings });
-                      }
+                    actions={{
+                      onRemoveWidget: removeWidget,
+                      onEditWidget: openEditWidget,
+                      onDuplicateWidget: duplicateWidget,
+                      onLayoutChange: isActive ? updateGridLayout : undefined,
+                      onWidgetSettingsChange: (widgetId, settings) => {
+                        const target = page.widgets.find(
+                          (w) => w.id === widgetId,
+                        );
+                        if (target)
+                          updateWidget(widgetId, { ...target, settings });
+                      },
+                      onNavigateToPage: handleNavigateToPage,
+                      onSaveAsTemplate: setTemplateWidget,
+                      onSyncWidget: handleSyncWidget,
+                      onDetachWidget: handleDetachWidget,
                     }}
-                    onNavigateToPage={handleNavigateToPage}
-                    onSaveAsTemplate={setTemplateWidget}
                     templateMap={templateMap}
-                    onSyncWidget={handleSyncWidget}
-                    onDetachWidget={handleDetachWidget}
                     showParameterBar={showParameterBar}
                   />
                 </div>
diff --git a/app/src/app/(dashboard)/[id]/page.tsx b/app/src/app/(dashboard)/[id]/page.tsx
index bed0b5ed..b921e434 100644
--- a/app/src/app/(dashboard)/[id]/page.tsx
+++ b/app/src/app/(dashboard)/[id]/page.tsx
@@ -1,8 +1,22 @@
 "use client";
 
-import React, { use, useCallback, useEffect, useMemo, useRef, useState, useTransition } from "react";
+import React, {
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useTransition,
+} from "react";
 import { useRouter } from "next/navigation";
-import { ArrowLeft, Filter, Pencil, LayoutDashboard, RefreshCw } from "lucide-react";
+import {
+  ArrowLeft,
+  Filter,
+  Pencil,
+  LayoutDashboard,
+  RefreshCw,
+} from "lucide-react";
 import { useDashboard, useUpdateDashboard } from "@/hooks/use-dashboards";
 import { useParameterStore } from "@/stores/parameter-store";
 import { filterParentParams } from "@/lib/format-parameter-value";
@@ -79,7 +93,7 @@ export default function DashboardViewerPage({
   const [showParameterBar, setShowParameterBar] = useState(true);
   const [activePageIndex, setActivePageIndex] = useState(0);
   const [visitedPages, setVisitedPages] = useState<Set<number>>(
-    () => new Set([0])
+    () => new Set([0]),
   );
 
   function markVisited(index: number) {
@@ -98,13 +112,17 @@ export default function DashboardViewerPage({
   const [isPending, startTransition] = useTransition();
   const layout = useMemo(
     () => (dashboard ? migrateLayout(dashboard.layoutJson) : null),
-    [dashboard]
+    [dashboard],
   );
 
   // Auto-refresh: local override (null = use persisted settings from layout).
   // Keyed by dashboard id so navigating to a different dashboard resets the override.
-  const [localSettings, setLocalSettings] = useState<{ dashboardId: string; settings: DashboardSettings } | null>(null);
-  const activeLocalSettings = localSettings?.dashboardId === id ? localSettings.settings : null;
+  const [localSettings, setLocalSettings] = useState<{
+    dashboardId: string;
+    settings: DashboardSettings;
+  } | null>(null);
+  const activeLocalSettings =
+    localSettings?.dashboardId === id ? localSettings.settings : null;
   const autoRefreshSettings = activeLocalSettings ?? layout?.settings ?? {};
   const refetchInterval = getRefetchInterval(autoRefreshSettings);
 
@@ -126,12 +144,18 @@ export default function DashboardViewerPage({
           : { autoRefresh: true, refreshIntervalSeconds: seconds };
       setLocalSettings({ dashboardId: id, settings: newSettings });
       if (layout) {
-        const payload = { id, layoutJson: { ...layout, settings: newSettings } };
+        const payload = {
+          id,
+          layoutJson: { ...layout, settings: newSettings },
+        };
         persistQueueRef.current = persistQueueRef.current
           .catch(() => undefined)
           .then(() => updateDashboard.mutateAsync(payload))
           .catch((err: unknown) => {
-            console.error("[auto-save] Failed to persist dashboard settings:", err);
+            console.error(
+              "[auto-save] Failed to persist dashboard settings:",
+              err,
+            );
           });
       }
     },
@@ -154,15 +178,19 @@ export default function DashboardViewerPage({
   }, [customSeconds, applyInterval]);
 
   // Derive display values from the effective (normalized) interval
-  const effectiveSeconds = typeof refetchInterval === "number" ? refetchInterval / 1000 : null;
-  const intervalLabel = effectiveSeconds !== null
-    ? formatInterval(effectiveSeconds)
-    : "Auto-refresh";
-  const dropdownValue = effectiveSeconds !== null ? String(effectiveSeconds) : "off";
+  const effectiveSeconds =
+    typeof refetchInterval === "number" ? refetchInterval / 1000 : null;
+  const intervalLabel =
+    effectiveSeconds !== null
+      ? formatInterval(effectiveSeconds)
+      : "Auto-refresh";
+  const dropdownValue =
+    effectiveSeconds !== null ? String(effectiveSeconds) : "off";
   // Toolbar button label: show interval + live countdown when active
-  const buttonLabel = countdown !== null
-    ? `${intervalLabel} · ${formatCountdown(countdown)}`
-    : intervalLabel;
+  const buttonLabel =
+    countdown !== null
+      ? `${intervalLabel} · ${formatCountdown(countdown)}`
+      : intervalLabel;
 
   const handleNavigateToPage = useCallback(
     (pageId: string) => {
@@ -173,7 +201,7 @@ export default function DashboardViewerPage({
         setActivePageIndex(index);
       }
     },
-    [layout]
+    [layout],
   );
 
   if (isLoading) {
@@ -211,17 +239,16 @@ export default function DashboardViewerPage({
   // layout is non-null here because dashboard is defined (guarded above)
   const resolvedLayout = layout!;
   const safeIndex = Math.min(activePageIndex, resolvedLayout.pages.length - 1);
-  const canEdit = dashboard.role === "owner" || dashboard.role === "editor" || dashboard.role === "admin";
+  const canEdit =
+    dashboard.role === "owner" ||
+    dashboard.role === "editor" ||
+    dashboard.role === "admin";
 
   return (
     <div className="flex flex-col h-full">
       <Toolbar>
         <ToolbarSection>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => router.push("/")}
-          >
+          <Button variant="ghost" size="sm" onClick={() => router.push("/")}>
             <ArrowLeft className="mr-2 h-4 w-4" />
             Back
           </Button>
@@ -231,7 +258,9 @@ export default function DashboardViewerPage({
           <Badge variant="secondary">{dashboard.role}</Badge>
           <span className="text-xs text-muted-foreground">
             · updated <TimeAgo date={dashboard.updatedAt} showTooltip={false} />
-            {dashboard.updatedByName ? <> by {dashboard.updatedByName}</> : null}
+            {dashboard.updatedByName ? (
+              <> by {dashboard.updatedByName}</>
+            ) : null}
           </span>
         </ToolbarSection>
         <ToolbarSection>
@@ -241,16 +270,24 @@ export default function DashboardViewerPage({
             size="sm"
             disabled={!hasParameters}
             onClick={() => setShowParameterBar((prev) => !prev)}
-            aria-label={showParameterBar ? "Hide parameters" : "Show parameters"}
+            aria-label={
+              showParameterBar ? "Hide parameters" : "Show parameters"
+            }
           >
             <Filter className="mr-2 h-4 w-4" />
-            {!hasParameters || showParameterBar ? "Filters" : `Filters (${parameterCount})`}
+            {!hasParameters || showParameterBar
+              ? "Filters"
+              : `Filters (${parameterCount})`}
           </Button>
           {canEdit && (
             <>
               <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="sm" data-testid="auto-refresh-trigger">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    data-testid="auto-refresh-trigger"
+                  >
                     <RefreshCw
                       className={`mr-2 h-4 w-4${isFetching ? " animate-spin" : ""}`}
                     />
@@ -264,23 +301,39 @@ export default function DashboardViewerPage({
                     value={dropdownValue}
                     onValueChange={handleIntervalChange}
                   >
-                    <DropdownMenuRadioItem value="off">Off</DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="30">30 seconds</DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="60">1 minute</DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="300">5 minutes</DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="600">10 minutes</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="off">
+                      Off
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="30">
+                      30 seconds
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="60">
+                      1 minute
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="300">
+                      5 minutes
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="600">
+                      10 minutes
+                    </DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                   <DropdownMenuSeparator />
                   <div className="px-2 py-1.5 space-y-1.5">
-                    <p className="text-xs text-muted-foreground">Custom (seconds)</p>
+                    <p className="text-xs text-muted-foreground">
+                      Custom (seconds)
+                    </p>
                     <div className="flex gap-1.5">
                       <Input
                         type="number"
                         min={5}
                         placeholder="e.g. 5"
                         value={customSeconds}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCustomSeconds(e.target.value)}
-                        onKeyDown={(e: React.KeyboardEvent) => { if (e.key === "Enter") handleCustomApply(); }}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          setCustomSeconds(e.target.value)
+                        }
+                        onKeyDown={(e: React.KeyboardEvent) => {
+                          if (e.key === "Enter") handleCustomApply();
+                        }}
                         className="h-7 text-xs"
                         data-testid="custom-interval-input"
                       />
@@ -302,7 +355,11 @@ export default function DashboardViewerPage({
                 size="sm"
                 loading={isPending}
                 loadingText="Opening editor..."
-                onClick={() => startTransition(() => router.push(`/${id}/edit?page=${safeIndex}`))}
+                onClick={() =>
+                  startTransition(() =>
+                    router.push(`/${id}/edit?page=${safeIndex}`),
+                  )
+                }
               >
                 <Pencil className="mr-2 h-4 w-4" />
                 Edit
@@ -350,7 +407,12 @@ export default function DashboardViewerPage({
               className={isActive ? undefined : "hidden"}
               aria-hidden={!isActive}
             >
-              <DashboardContainer page={page} refetchInterval={refetchInterval} onNavigateToPage={handleNavigateToPage} showParameterBar={showParameterBar} />
+              <DashboardContainer
+                page={page}
+                refetchInterval={refetchInterval}
+                actions={{ onNavigateToPage: handleNavigateToPage }}
+                showParameterBar={showParameterBar}
+              />
             </div>
           );
         })}
diff --git a/app/src/components/card-container.tsx b/app/src/components/card-container.tsx
index 1b2077b2..8f902f4d 100644
--- a/app/src/components/card-container.tsx
+++ b/app/src/components/card-container.tsx
@@ -3,11 +3,21 @@
 import { useWidgetQuery } from "@/hooks/use-widget-query";
 import { resolveCacheOptions } from "@/lib/resolve-cache-options";
 import { getChartConfig } from "@/lib/chart-registry";
-import type { ChartType, ColumnMapping } from "@/lib/chart-registry";
-import type { DashboardWidget, ClickAction, StylingConfig } from "@/lib/db/schema";
+import type { ColumnMapping } from "@/lib/chart-registry";
+import type {
+  DashboardWidget,
+  ClickAction,
+  StylingConfig,
+} from "@/lib/db/schema";
 import type { ColorScaleConfig } from "@neoboard/components";
-import { useParameterStore, useParameterValues } from "@/stores/parameter-store";
-import { resolveClickActions, deriveClickableColumns } from "@/lib/resolve-click-action";
+import {
+  useParameterStore,
+  useParameterValues,
+} from "@/stores/parameter-store";
+import {
+  resolveClickActions,
+  deriveClickableColumns,
+} from "@/lib/resolve-click-action";
 import React, { useMemo, useCallback, useState } from "react";
 import { AlertCircle, Play } from "lucide-react";
 import {
@@ -26,7 +36,10 @@ import { ChartRenderer } from "./chart-renderer";
 import { migrateColorThresholds } from "@/lib/migrate-color-thresholds";
 
 /** Chart types that support column mapping. */
-const MAPPING_SUPPORTED_TYPES = new Set<ChartType>(["bar", "line", "pie"]);
+/** Derived from registry — chart types that support column mapping overlays. */
+function supportsColumnMapping(type: string): boolean {
+  return getChartConfig(type)?.supportsColumnMapping === true;
+}
 
 interface CardContainerProps {
   widget: DashboardWidget;
@@ -93,29 +106,39 @@ export function CardContainer({
       const { parameterName, value, label, sourceField } = result.setParameter;
       useParameterStore
         .getState()
-        .setParameter(parameterName, value, label, sourceField, "text", "click-action", widget.id);
+        .setParameter(
+          parameterName,
+          value,
+          label,
+          sourceField,
+          "text",
+          "click-action",
+          widget.id,
+        );
     }
 
     if (result.navigateToPageId) {
       onNavigateToPage?.(result.navigateToPageId);
     }
   }
-  const clickAction = widget.settings?.clickAction as ClickAction | undefined;
+  const ws = widget.settings ?? {};
+  const clickAction = ws.clickAction as ClickAction | undefined;
   const hasClickAction = !!clickAction;
   const clickableColumns = deriveClickableColumns(clickAction);
 
   // Cache settings from widget config. Default: cache enabled, 5-min TTL.
-  const enableCache = widget.settings?.enableCache !== false;
-  const cacheTtlMinutes = (widget.settings?.cacheTtlMinutes as number | undefined) ?? 5;
+  const enableCache = ws.enableCache !== false;
+  const cacheTtlMinutes = (ws.cacheTtlMinutes as number | undefined) ?? 5;
 
   // Parameter-select, form, markdown, and iframe widgets are self-contained (no auto-query).
   const isParameterWidget = widget.chartType === "parameter-select";
   const isFormWidget = widget.chartType === "form";
-  const isContentOnly = widget.chartType === "markdown" || widget.chartType === "iframe";
+  const isContentOnly =
+    widget.chartType === "markdown" || widget.chartType === "iframe";
 
   const chartOptions = useMemo(
-    () => (widget.settings?.chartOptions ?? {}) as Record<string, unknown>,
-    [widget.settings?.chartOptions],
+    () => (ws.chartOptions ?? {}) as Record<string, unknown>,
+    [ws.chartOptions],
   );
 
   const { staleTime, gcTime } = useMemo(
@@ -134,27 +157,38 @@ export function CardContainer({
   // Only fire the query when there's no previewData — useWidgetQuery handles
   // caching so navigating view->edit won't re-run the same query.
   // Parameter-select and form widgets skip query execution entirely.
-  const queryInput = (previewData !== undefined || isParameterWidget || isFormWidget || isContentOnly) ? null : {
-    connectionId: widget.connectionId,
-    query: widget.query,
-    params: widget.params as Record<string, unknown> | undefined,
-  };
+  const queryInput =
+    previewData !== undefined ||
+    isParameterWidget ||
+    isFormWidget ||
+    isContentOnly
+      ? null
+      : {
+          connectionId: widget.connectionId,
+          query: widget.query,
+          params: widget.params as Record<string, unknown> | undefined,
+        };
   const manualEnabled = isManualRun ? hasEverRun : true;
-  const { missingParams, ...widgetQuery } = useWidgetQuery(queryInput, { staleTime, gcTime, refetchInterval, enabled: manualEnabled });
+  const { missingParams, ...widgetQuery } = useWidgetQuery(queryInput, {
+    staleTime,
+    gcTime,
+    refetchInterval,
+    enabled: manualEnabled,
+  });
 
   // Resolve the current column mapping from widget settings.
   const columnMapping = useMemo<ColumnMapping>(() => {
-    const raw = widget.settings?.columnMapping;
+    const raw = ws.columnMapping;
     if (raw && typeof raw === "object" && !Array.isArray(raw)) {
       return raw as ColumnMapping;
     }
     return {};
-  }, [widget.settings?.columnMapping]);
+  }, [ws.columnMapping]);
 
   // Determine whether to show the overlay.
   const showOverlay =
     isEditMode &&
-    MAPPING_SUPPORTED_TYPES.has(widget.chartType as ChartType) &&
+    supportsColumnMapping(widget.chartType) &&
     !!onWidgetSettingsChange;
 
   const handleMappingChange = useCallback(
@@ -165,13 +199,13 @@ export function CardContainer({
         columnMapping: newMapping,
       });
     },
-    [onWidgetSettingsChange, widget.settings]
+    [onWidgetSettingsChange, widget.settings],
   );
 
   // Resolve styling config (new format or migrated from legacy)
   const allParamValues = useParameterValues();
   const resolvedStylingConfig = useMemo<StylingConfig | undefined>(() => {
-    const sc = widget.settings?.stylingConfig as StylingConfig | undefined;
+    const sc = ws.stylingConfig as StylingConfig | undefined;
     if (sc?.enabled) return sc;
     // Try migrating from legacy colorThresholds
     const legacyThresholds = chartOptions.colorThresholds;
@@ -179,10 +213,10 @@ export function CardContainer({
       return migrateColorThresholds(legacyThresholds);
     }
     return undefined;
-  }, [widget.settings?.stylingConfig, chartOptions]);
+  }, [ws.stylingConfig, chartOptions]);
 
   // Resolve color scales config
-  const conditionalFormatting = widget.settings?.conditionalFormatting as
+  const conditionalFormatting = ws.conditionalFormatting as
     | { colorScales?: ColorScaleConfig[] }
     | undefined;
   const colorScales = conditionalFormatting?.colorScales;
@@ -211,7 +245,10 @@ export function CardContainer({
         />
       );
     }
-    const transformedData = chartConfig.transformWithMapping(previewData, columnMapping);
+    const transformedData = chartConfig.transformWithMapping(
+      previewData,
+      columnMapping,
+    );
     const availableColumns = extractColumnNames(previewData);
     return (
       <div className="h-full w-full flex flex-col">
@@ -220,16 +257,22 @@ export function CardContainer({
             type={chartConfig.type}
             data={transformedData}
             settings={chartOptions}
-            onChartClick={hasClickAction ? handleChartClick : undefined}
-            clickableColumns={clickableColumns}
-            connectionId={widget.connectionId}
-            widgetId={widget.id}
-            resultId={previewResultId}
-            stylingRules={resolvedStylingConfig?.rules}
-            paramValues={allParamValues}
-            autoFit={autoFit}
-
-            colorScales={colorScales}
+            styling={{
+              rules: resolvedStylingConfig?.rules,
+              paramValues: allParamValues,
+              colorScales,
+            }}
+            interaction={
+              hasClickAction
+                ? { onChartClick: handleChartClick, clickableColumns }
+                : undefined
+            }
+            meta={{
+              connectionId: widget.connectionId,
+              widgetId: widget.id,
+              resultId: previewResultId,
+              autoFit,
+            }}
           />
         </div>
         {showOverlay && (
@@ -253,8 +296,7 @@ export function CardContainer({
             type={chartConfig.type}
             data={null}
             settings={chartOptions}
-            connectionId={widget.connectionId}
-            widgetId={widget.id}
+            meta={{ connectionId: widget.connectionId, widgetId: widget.id }}
           />
         </div>
       </div>
@@ -270,9 +312,11 @@ export function CardContainer({
             type={chartConfig.type}
             data={null}
             settings={widget.settings as Record<string, unknown>}
-            connectionId={widget.connectionId}
-            widgetId={widget.id}
-            query={widget.query}
+            meta={{
+              connectionId: widget.connectionId,
+              widgetId: widget.id,
+              query: widget.query,
+            }}
           />
         </div>
       </div>
@@ -314,7 +358,10 @@ export function CardContainer({
   // show an overlay button instead of the loading skeleton.
   if (isManualRun && !hasEverRun) {
     return (
-      <div className="flex h-full items-center justify-center p-6" data-testid="manual-run-overlay">
+      <div
+        className="flex h-full items-center justify-center p-6"
+        data-testid="manual-run-overlay"
+      >
         <div className="text-center space-y-3">
           <p className="text-sm text-muted-foreground">
             Query execution is paused.
@@ -339,11 +386,16 @@ export function CardContainer({
     return (
       <div className="flex h-full items-center justify-center p-6">
         <div className="text-center space-y-2">
-          <p className="text-sm text-muted-foreground">Waiting for parameters&hellip;</p>
+          <p className="text-sm text-muted-foreground">
+            Waiting for parameters&hellip;
+          </p>
           {missingParams.length > 0 && (
             <div className="flex flex-wrap justify-center gap-1.5">
               {missingParams.map((name) => (
-                <code key={name} className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">
+                <code
+                  key={name}
+                  className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground"
+                >
                   $param_{name}
                 </code>
               ))}
@@ -372,7 +424,10 @@ export function CardContainer({
           <AlertTitle>Query Failed</AlertTitle>
           <AlertDescription className="space-y-1">
             <p>{widgetQuery.error.message}</p>
-            <p className="text-xs font-mono opacity-70 truncate" title={widget.query}>
+            <p
+              className="text-xs font-mono opacity-70 truncate"
+              title={widget.query}
+            >
               {widget.query}
             </p>
           </AlertDescription>
@@ -404,7 +459,10 @@ export function CardContainer({
     );
   }
 
-  const transformedData = chartConfig.transformWithMapping(rawData, columnMapping);
+  const transformedData = chartConfig.transformWithMapping(
+    rawData,
+    columnMapping,
+  );
   const availableColumns = extractColumnNames(rawData);
 
   return (
@@ -412,7 +470,9 @@ export function CardContainer({
       {widgetQuery.data?.truncated && (
         <div className="px-3 py-1.5 text-xs text-muted-foreground bg-muted/50 border-b flex items-center gap-1.5">
           <span>&#9888;</span>
-          <span>Showing first 10,000 rows. Refine your query to see all results.</span>
+          <span>
+            Showing first 10,000 rows. Refine your query to see all results.
+          </span>
         </div>
       )}
       <div className="flex-1 min-h-0">
@@ -420,15 +480,22 @@ export function CardContainer({
           type={chartConfig.type}
           data={transformedData}
           settings={chartOptions}
-          onChartClick={hasClickAction ? handleChartClick : undefined}
-          clickableColumns={clickableColumns}
-          connectionId={widget.connectionId}
-          widgetId={widget.id}
-          resultId={widgetQuery.data.resultId}
-          stylingRules={resolvedStylingConfig?.rules}
-          paramValues={allParamValues}
-          autoFit={autoFit}
-          colorScales={colorScales}
+          styling={{
+            rules: resolvedStylingConfig?.rules,
+            paramValues: allParamValues,
+            colorScales,
+          }}
+          interaction={
+            hasClickAction
+              ? { onChartClick: handleChartClick, clickableColumns }
+              : undefined
+          }
+          meta={{
+            connectionId: widget.connectionId,
+            widgetId: widget.id,
+            resultId: widgetQuery.data.resultId,
+            autoFit,
+          }}
         />
       </div>
       {showOverlay && (
diff --git a/app/src/components/chart-renderer.tsx b/app/src/components/chart-renderer.tsx
index d0c52a79..a6b7a893 100644
--- a/app/src/components/chart-renderer.tsx
+++ b/app/src/components/chart-renderer.tsx
@@ -16,19 +16,22 @@ import {
 // Chart components use ECharts (browser APIs) — must be loaded client-side only
 const BarChart = dynamic(
   () => import("@neoboard/components").then((m) => ({ default: m.BarChart })),
-  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> }
+  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> },
 );
 const LineChart = dynamic(
   () => import("@neoboard/components").then((m) => ({ default: m.LineChart })),
-  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> }
+  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> },
 );
 const PieChart = dynamic(
   () => import("@neoboard/components").then((m) => ({ default: m.PieChart })),
-  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> }
+  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> },
 );
 const SingleValueChart = dynamic(
-  () => import("@neoboard/components").then((m) => ({ default: m.SingleValueChart })),
-  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> }
+  () =>
+    import("@neoboard/components").then((m) => ({
+      default: m.SingleValueChart,
+    })),
+  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> },
 );
 import type {
   BarChartDataPoint,
@@ -56,13 +59,15 @@ import { FormWidgetRenderer } from "./form-widget-renderer";
 
 // Lazy-load GraphChart so NVL (WebGL) is only bundled when a graph widget is rendered
 const GraphChart = dynamic(
-  () => import("@neoboard/components").then((mod) => ({ default: mod.GraphChart })),
-  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> }
+  () =>
+    import("@neoboard/components").then((mod) => ({ default: mod.GraphChart })),
+  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> },
 );
 
 // Dynamically import MapChart to avoid SSR issues with Leaflet
 const MapChart = dynamic(
-  () => import("@neoboard/components").then((mod) => ({ default: mod.MapChart })),
+  () =>
+    import("@neoboard/components").then((mod) => ({ default: mod.MapChart })),
   {
     ssr: false,
     loading: () => (
@@ -70,59 +75,84 @@ const MapChart = dynamic(
         <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
       </div>
     ),
-  }
+  },
 );
 
 // New ECharts chart types — loaded client-side only
 const GaugeChart = dynamic(
   () => import("@neoboard/components").then((m) => ({ default: m.GaugeChart })),
-  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> }
+  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> },
 );
 const SankeyChart = dynamic(
-  () => import("@neoboard/components").then((m) => ({ default: m.SankeyChart })),
-  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> }
+  () =>
+    import("@neoboard/components").then((m) => ({ default: m.SankeyChart })),
+  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> },
 );
 const SunburstChart = dynamic(
-  () => import("@neoboard/components").then((m) => ({ default: m.SunburstChart })),
-  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> }
+  () =>
+    import("@neoboard/components").then((m) => ({ default: m.SunburstChart })),
+  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> },
 );
 const RadarChart = dynamic(
   () => import("@neoboard/components").then((m) => ({ default: m.RadarChart })),
-  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> }
+  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> },
 );
 const TreemapChart = dynamic(
-  () => import("@neoboard/components").then((m) => ({ default: m.TreemapChart })),
-  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> }
+  () =>
+    import("@neoboard/components").then((m) => ({ default: m.TreemapChart })),
+  { ssr: false, loading: () => <Skeleton className="w-full h-full" /> },
 );
 
-export interface ChartRendererProps {
-  type: ChartType;
-  data: unknown;
-  settings?: Record<string, unknown>;
+/** Styling-related props grouped together. */
+export interface ChartStylingProps {
+  rules?: StylingRule[];
+  paramValues?: Record<string, unknown>;
+  colorScales?: ColorScaleConfig[];
+}
+
+/** Interaction-related props grouped together. */
+export interface ChartInteractionProps {
   onChartClick?: (point: Record<string, unknown>) => void;
-  /** Restrict which table columns are clickable. Only applies to table type. */
   clickableColumns?: string[];
+}
+
+/** Widget metadata props grouped together. */
+export interface ChartMetaProps {
   connectionId?: string;
   widgetId?: string;
   resultId?: string;
   query?: string;
-  /** Rule-based styling rules */
-  stylingRules?: StylingRule[];
-  /** Resolved parameter values for parameterRef comparisons */
-  paramValues?: Record<string, unknown>;
-  /** When true, graph widgets trigger a fit-to-viewport after mount. */
   autoFit?: boolean;
-  /** Color scale configs for gradient cell backgrounds (table only) */
-  colorScales?: ColorScaleConfig[];
+}
+
+export interface ChartRendererProps {
+  type: ChartType;
+  data: unknown;
+  settings?: Record<string, unknown>;
+  styling?: ChartStylingProps;
+  interaction?: ChartInteractionProps;
+  meta?: ChartMetaProps;
 }
 
 /**
  * Renders the appropriate chart component based on widget type and data.
  * Forwards chart-specific settings as props to the underlying chart component.
  */
-export function ChartRenderer({ type, data, settings = {}, onChartClick, clickableColumns, connectionId, widgetId, resultId, query, stylingRules, paramValues, autoFit, colorScales }: ChartRendererProps) {
+export function ChartRenderer({
+  type,
+  data,
+  settings = {},
+  styling,
+  interaction,
+  meta,
+}: ChartRendererProps) {
+  const { rules: stylingRules, paramValues, colorScales } = styling ?? {};
+  const { onChartClick, clickableColumns } = interaction ?? {};
+  const { connectionId, widgetId, resultId, query, autoFit } = meta ?? {};
   const colorThresholds =
-    typeof settings.colorThresholds === "string" ? settings.colorThresholds : undefined;
+    typeof settings.colorThresholds === "string"
+      ? settings.colorThresholds
+      : undefined;
 
   const handleEChartsClick = useMemo(() => {
     if (!onChartClick) return undefined;
@@ -130,7 +160,9 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
       // Enrich the click point with the original data row so that
       // column-name source fields (e.g. "revenue") resolve correctly
       // in click action rules — not just ECharts built-in fields.
-      const row = Array.isArray(data) ? (data[e.dataIndex] as Record<string, unknown> | undefined) : undefined;
+      const row = Array.isArray(data)
+        ? (data[e.dataIndex] as Record<string, unknown> | undefined)
+        : undefined;
       onChartClick({
         ...(row ?? {}),
         name: e.name,
@@ -146,7 +178,9 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
       return (
         <BarChart
           data={(data as BarChartDataPoint[]) ?? []}
-          orientation={settings.orientation as "vertical" | "horizontal" | undefined}
+          orientation={
+            settings.orientation as "vertical" | "horizontal" | undefined
+          }
           stacked={settings.stacked as boolean | undefined}
           showValues={settings.showValues as boolean | undefined}
           showLegend={settings.showLegend as boolean | undefined}
@@ -199,7 +233,13 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
           showLabel={settings.showLabel as boolean | undefined}
           showLegend={settings.showLegend as boolean | undefined}
           roseMode={settings.roseMode as boolean | undefined}
-          labelPosition={settings.labelPosition as "outside" | "inside" | "center" | undefined}
+          labelPosition={
+            settings.labelPosition as
+              | "outside"
+              | "inside"
+              | "center"
+              | undefined
+          }
           showPercentage={settings.showPercentage as boolean | undefined}
           sortSlices={settings.sortSlices as boolean | undefined}
           topN={settings.topN as number | undefined}
@@ -215,15 +255,29 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
 
     case "single-value": {
       const raw = data ?? 0;
-      const val = typeof raw === "number" || typeof raw === "string" ? raw : normalizeValue(raw) ?? String(raw);
+      const val =
+        typeof raw === "number" || typeof raw === "string"
+          ? raw
+          : (normalizeValue(raw) ?? String(raw));
       return (
         <SingleValueChart
-          value={typeof val === "number" || typeof val === "string" ? val : String(val)}
+          value={
+            typeof val === "number" || typeof val === "string"
+              ? val
+              : String(val)
+          }
           title={settings.title as string | undefined}
           prefix={settings.prefix as string | undefined}
           suffix={settings.suffix as string | undefined}
           fontSize={settings.fontSize as "sm" | "md" | "lg" | "xl" | undefined}
-          numberFormat={settings.numberFormat as "plain" | "comma" | "compact" | "percent" | undefined}
+          numberFormat={
+            settings.numberFormat as
+              | "plain"
+              | "comma"
+              | "compact"
+              | "percent"
+              | undefined
+          }
           decimalPlaces={settings.decimalPlaces as number | undefined}
           colorThresholds={colorThresholds}
           stylingRules={stylingRules}
@@ -257,7 +311,13 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
           edges={graphData.edges ?? []}
           layout={settings.layout as "force" | "circular" | undefined}
           showLabels={settings.showLabels as boolean | undefined}
-          onNodeSelect={onChartClick ? (ids) => { if (ids.length) onChartClick({ nodeId: ids[0] }); } : undefined}
+          onNodeSelect={
+            onChartClick
+              ? (ids) => {
+                  if (ids.length) onChartClick({ nodeId: ids[0] });
+                }
+              : undefined
+          }
           autoFit={autoFit}
         />
       );
@@ -273,7 +333,17 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
           minZoom={settings.minZoom as number | undefined}
           maxZoom={settings.maxZoom as number | undefined}
           autoFitBounds={settings.autoFitBounds !== false}
-          onMarkerClick={onChartClick ? (m) => onChartClick({ id: m.id, label: m.label, lat: m.lat, lng: m.lng }) : undefined}
+          onMarkerClick={
+            onChartClick
+              ? (m) =>
+                  onChartClick({
+                    id: m.id,
+                    label: m.label,
+                    lat: m.lat,
+                    lng: m.lng,
+                  })
+              : undefined
+          }
         />
       );
     }
@@ -283,7 +353,15 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
         <TableRenderer
           data={data}
           settings={settings}
-          onCellClick={onChartClick ? (info) => onChartClick({ _clickedColumn: info.column, _clickedValue: info.value }) : undefined}
+          onCellClick={
+            onChartClick
+              ? (info) =>
+                  onChartClick({
+                    _clickedColumn: info.column,
+                    _clickedValue: info.value,
+                  })
+              : undefined
+          }
           clickableColumns={clickableColumns}
           stylingRules={stylingRules}
           paramValues={paramValues}
@@ -306,14 +384,20 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
         <div className="p-4">
           <ParameterWidgetRenderer
             parameterName={pName}
-            parameterType={(settings.parameterType as ParameterType | undefined) ?? "select"}
+            parameterType={
+              (settings.parameterType as ParameterType | undefined) ?? "select"
+            }
             connectionId={connectionId}
-            seedQuery={(settings.seedQuery as string | undefined)}
-            parentParameterName={settings.parentParameterName as string | undefined}
+            seedQuery={settings.seedQuery as string | undefined}
+            parentParameterName={
+              settings.parentParameterName as string | undefined
+            }
             rangeMin={(settings.rangeMin as number | undefined) ?? 0}
             rangeMax={(settings.rangeMax as number | undefined) ?? 100}
             rangeStep={(settings.rangeStep as number | undefined) ?? 1}
-            placeholder={(settings.placeholder as string | undefined) || undefined}
+            placeholder={
+              (settings.placeholder as string | undefined) || undefined
+            }
             searchable={(settings.searchable as boolean | undefined) ?? true}
             widgetId={widgetId}
           />
@@ -342,9 +426,7 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
 
     case "markdown":
       return (
-        <MarkdownWidget
-          content={settings.content as string | undefined}
-        />
+        <MarkdownWidget content={settings.content as string | undefined} />
       );
 
     case "iframe":
@@ -408,7 +490,10 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
       );
 
     case "radar": {
-      const radarData = (data as RadarChartData) ?? { indicators: [], series: [] };
+      const radarData = (data as RadarChartData) ?? {
+        indicators: [],
+        series: [],
+      };
       return (
         <RadarChart
           data={radarData}
@@ -431,7 +516,9 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
           showLabels={settings.showLabels as boolean | undefined}
           showBreadcrumb={settings.showBreadcrumb as boolean | undefined}
           showValues={settings.showValues as boolean | undefined}
-          colorSaturation={settings.colorSaturation as "low" | "medium" | "high" | undefined}
+          colorSaturation={
+            settings.colorSaturation as "low" | "medium" | "high" | undefined
+          }
           colorPalette={settings.colorPalette as string | undefined}
           stylingRules={stylingRules}
           paramValues={paramValues}
diff --git a/app/src/components/dashboard-container.tsx b/app/src/components/dashboard-container.tsx
index 05fd68b2..936512ca 100644
--- a/app/src/components/dashboard-container.tsx
+++ b/app/src/components/dashboard-container.tsx
@@ -37,61 +37,56 @@ import {
   AlertDialogTitle,
 } from "@neoboard/components";
 
-interface DashboardContainerProps {
-  /** The active page to render. */
-  page: DashboardPage;
-  editable?: boolean;
+/** Widget action callbacks — grouped to reduce prop count. */
+export interface WidgetActions {
   onRemoveWidget?: (widgetId: string) => void;
   onEditWidget?: (widget: DashboardWidget) => void;
   onDuplicateWidget?: (widgetId: string) => void;
   onLayoutChange?: (gridLayout: GridLayoutItem[]) => void;
-  /**
-   * Called when a widget's settings are updated inline (e.g. column mapping).
-   * The caller should persist the updated widget to the dashboard layout.
-   */
   onWidgetSettingsChange?: (
     widgetId: string,
     settings: Record<string, unknown>,
   ) => void;
-  /** TanStack Query refetchInterval — periodically re-executes all widget queries. */
-  refetchInterval?: number | false;
-  /** Called when a click action navigates to a different page. */
   onNavigateToPage?: (pageId: string) => void;
-  /** Called when the user chooses "Save to Widget Lab" for a widget. */
   onSaveAsTemplate?: (widget: DashboardWidget) => void;
-  /** Map of template ID → template for outdated-sync detection. */
-  templateMap?: Record<string, WidgetTemplate>;
-  /** Called when the user confirms "Sync with template". */
   onSyncWidget?: (widget: DashboardWidget) => void;
-  /** Called when the user chooses "Detach from template". */
   onDetachWidget?: (widgetId: string) => void;
-  /** When false, the parameter bar is hidden. Defaults to true. */
+}
+
+interface DashboardContainerProps {
+  page: DashboardPage;
+  editable?: boolean;
+  actions?: WidgetActions;
+  refetchInterval?: number | false;
+  templateMap?: Record<string, WidgetTemplate>;
   showParameterBar?: boolean;
 }
 
 function getWidgetTitle(widget: DashboardWidget): string {
-  if (widget.settings?.title && typeof widget.settings.title === "string") {
-    return widget.settings.title;
-  }
+  const title = (widget.settings ?? {}).title;
+  if (title && typeof title === "string") return title;
   return getChartConfig(widget.chartType)?.label ?? widget.chartType;
 }
 
 export function DashboardContainer({
   page,
   editable = false,
-  onRemoveWidget,
-  onEditWidget,
-  onDuplicateWidget,
-  onLayoutChange,
-  onWidgetSettingsChange,
+  actions,
   refetchInterval,
-  onNavigateToPage,
-  onSaveAsTemplate,
   templateMap,
-  onSyncWidget,
-  onDetachWidget,
   showParameterBar = true,
 }: DashboardContainerProps) {
+  const {
+    onRemoveWidget,
+    onEditWidget,
+    onDuplicateWidget,
+    onLayoutChange,
+    onWidgetSettingsChange,
+    onNavigateToPage,
+    onSaveAsTemplate,
+    onSyncWidget,
+    onDetachWidget,
+  } = actions ?? {};
   const queryClient = useQueryClient();
   const [fullscreenWidget, setFullscreenWidget] =
     useState<DashboardWidget | null>(null);
@@ -210,92 +205,92 @@ export function DashboardContainer({
         </ParameterBar>
       )}
       <div className="w-full min-w-0">
-      <DashboardGrid
-        layout={page.gridLayout as GridLayoutItem[]}
-        onLayoutChange={(items) => onLayoutChange?.(items as GridLayoutItem[])}
-        isDraggable={editable}
-        isResizable={editable}
-      >
-        {page.widgets.map((widget) => {
-          const outdated = editable && isWidgetOutdated(widget);
-          const chartOpts = (widget.settings?.chartOptions ?? {}) as Record<
-            string,
-            unknown
-          >;
-          const showRefresh = shouldShowRefreshButton(chartOpts);
-          return (
-            <div
-              key={widget.id}
-              data-testid="widget-card"
-              data-widget-id={widget.id}
-            >
-              <WidgetCard
-                title={interpolateTitle(getWidgetTitle(widget), parameters)}
-                subtitle={undefined}
-                className="h-full"
-                draggable={editable}
-                actions={buildActions(widget)}
-                onRefresh={
-                  showRefresh
-                    ? () => {
-                        // Invalidate all TanStack Query entries matching this widget's
-                        // connection + query combo. This triggers a refetch.
-                        void queryClient.invalidateQueries({
-                          queryKey: [
-                            "widget-query",
-                            widget.connectionId,
-                            widget.query,
-                            widget.params,
-                          ],
-                        });
-                      }
-                    : undefined
-                }
-                headerExtra={
-                  <>
-                    {outdated && (
+        <DashboardGrid
+          layout={page.gridLayout as GridLayoutItem[]}
+          onLayoutChange={(items) =>
+            onLayoutChange?.(items as GridLayoutItem[])
+          }
+          isDraggable={editable}
+          isResizable={editable}
+        >
+          {page.widgets.map((widget) => {
+            const outdated = editable && isWidgetOutdated(widget);
+            const chartOpts = ((widget.settings ?? {}).chartOptions ??
+              {}) as Record<string, unknown>;
+            const showRefresh = shouldShowRefreshButton(chartOpts);
+            return (
+              <div
+                key={widget.id}
+                data-testid="widget-card"
+                data-widget-id={widget.id}
+              >
+                <WidgetCard
+                  title={interpolateTitle(getWidgetTitle(widget), parameters)}
+                  subtitle={undefined}
+                  className="h-full"
+                  draggable={editable}
+                  actions={buildActions(widget)}
+                  onRefresh={
+                    showRefresh
+                      ? () => {
+                          // Invalidate all TanStack Query entries matching this widget's
+                          // connection + query combo. This triggers a refetch.
+                          void queryClient.invalidateQueries({
+                            queryKey: [
+                              "widget-query",
+                              widget.connectionId,
+                              widget.query,
+                              widget.params,
+                            ],
+                          });
+                        }
+                      : undefined
+                  }
+                  headerExtra={
+                    <>
+                      {outdated && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 text-amber-500"
+                          onClick={() => setPendingSyncWidget(widget)}
+                          title="Template update available — click to sync"
+                        >
+                          <RefreshCw className="h-4 w-4" />
+                          <span className="sr-only">
+                            Template update available
+                          </span>
+                        </Button>
+                      )}
                       <Button
                         variant="ghost"
                         size="icon"
-                        className="h-8 w-8 text-amber-500"
-                        onClick={() => setPendingSyncWidget(widget)}
-                        title="Template update available — click to sync"
+                        className="h-8 w-8"
+                        onClick={() => openFullscreen(widget)}
                       >
-                        <RefreshCw className="h-4 w-4" />
-                        <span className="sr-only">
-                          Template update available
-                        </span>
+                        <Maximize2 className="h-4 w-4" />
+                        <span className="sr-only">Fullscreen</span>
                       </Button>
-                    )}
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8"
-                      onClick={() => openFullscreen(widget)}
-                    >
-                      <Maximize2 className="h-4 w-4" />
-                      <span className="sr-only">Fullscreen</span>
-                    </Button>
-                  </>
-                }
-              >
-                <CardContainer
-                  widget={widget}
-                  isEditMode={editable}
-                  onWidgetSettingsChange={
-                    onWidgetSettingsChange
-                      ? (settings) =>
-                          onWidgetSettingsChange(widget.id, settings)
-                      : undefined
+                    </>
                   }
-                  refetchInterval={refetchInterval}
-                  onNavigateToPage={onNavigateToPage}
-                />
-              </WidgetCard>
-            </div>
-          );
-        })}
-      </DashboardGrid>
+                >
+                  <CardContainer
+                    widget={widget}
+                    isEditMode={editable}
+                    onWidgetSettingsChange={
+                      onWidgetSettingsChange
+                        ? (settings) =>
+                            onWidgetSettingsChange(widget.id, settings)
+                        : undefined
+                    }
+                    refetchInterval={refetchInterval}
+                    onNavigateToPage={onNavigateToPage}
+                  />
+                </WidgetCard>
+              </div>
+            );
+          })}
+        </DashboardGrid>
       </div>
 
       <Dialog
diff --git a/app/src/components/widget-editor-modal.tsx b/app/src/components/widget-editor-modal.tsx
index c9d1dd96..042f9468 100644
--- a/app/src/components/widget-editor-modal.tsx
+++ b/app/src/components/widget-editor-modal.tsx
@@ -4,6 +4,7 @@ import React, {
   useState,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
 } from "react";
@@ -91,6 +92,7 @@ import { ParameterPreview } from "./widget-editor/parameter-preview";
 import type { FormFieldDef } from "@/lib/form-field-def";
 import { ActionRulesEditor } from "./widget-editor/action-rules-editor";
 import { StylingRulesEditor } from "./widget-editor/styling-rules-editor";
+import { useWidgetEditorStore } from "@/stores/widget-editor-store";
 import { migrateColorThresholds } from "@/lib/migrate-color-thresholds";
 
 export interface WidgetEditorModalProps {
@@ -809,6 +811,71 @@ export function WidgetEditorModal({
     return [];
   }, [previewQuery.data, initialPreviewData]);
 
+  // Sync local state → widget editor store (bridge for sub-editors reading from store).
+  // useLayoutEffect ensures the store is updated synchronously before paint,
+  // so sub-editors see current values on the first render (not stale from previous frame).
+  useLayoutEffect(() => {
+    useWidgetEditorStore.setState({ chartType, connectionId, query });
+  }, [chartType, connectionId, query]);
+  useLayoutEffect(() => {
+    useWidgetEditorStore.setState({ availableFields });
+  }, [availableFields]);
+  useLayoutEffect(() => {
+    useWidgetEditorStore.setState({ parameterSuggestions });
+  }, [parameterSuggestions]);
+
+  // Bidirectional sync for mutable state between local state and store.
+  const syncingFromStore = useRef(false);
+  useLayoutEffect(() => {
+    if (!syncingFromStore.current) {
+      useWidgetEditorStore.setState({
+        stylingRules,
+        actionRules,
+        formFields,
+        query,
+        chartOptions,
+        connectionId,
+        paramUIType,
+        dateSub,
+        multiSelect,
+        paramWidgetName,
+      });
+    }
+  }, [
+    stylingRules,
+    actionRules,
+    formFields,
+    query,
+    chartOptions,
+    connectionId,
+    paramUIType,
+    dateSub,
+    multiSelect,
+    paramWidgetName,
+  ]);
+  // Reverse: store → local when sub-editors modify state
+  useEffect(() => {
+    return useWidgetEditorStore.subscribe((state, prev) => {
+      syncingFromStore.current = true;
+      if (state.stylingRules !== prev.stylingRules)
+        setStylingRules(state.stylingRules);
+      if (state.actionRules !== prev.actionRules)
+        setActionRules(state.actionRules);
+      if (state.formFields !== prev.formFields) setFormFields(state.formFields);
+      if (state.query !== prev.query) setQuery(state.query);
+      if (state.chartOptions !== prev.chartOptions)
+        setChartOptions(state.chartOptions);
+      if (state.paramUIType !== prev.paramUIType)
+        setParamUIType(state.paramUIType);
+      if (state.dateSub !== prev.dateSub) setDateSub(state.dateSub);
+      if (state.multiSelect !== prev.multiSelect)
+        setMultiSelect(state.multiSelect);
+      if (state.paramWidgetName !== prev.paramWidgetName)
+        setParamWidgetName(state.paramWidgetName);
+      syncingFromStore.current = false;
+    });
+  }, []);
+
   const isParamSelect = chartType === "parameter-select";
   const isForm = chartType === "form";
   const isMarkdown = chartType === "markdown";
@@ -936,23 +1003,10 @@ export function WidgetEditorModal({
         className="max-w-[1200px] max-h-[90vh] flex flex-col overflow-hidden"
       >
         {dialogStep === "styling-rules" ? (
-          <StylingRulesEditor
-            rules={stylingRules}
-            onRulesChange={setStylingRules}
-            onBack={() => setDialogStep("main")}
-            chartType={chartType}
-            availableFields={availableFields}
-            parameterSuggestions={parameterSuggestions}
-            stylingTargets={getStylingTargets(chartType)}
-          />
+          <StylingRulesEditor onBack={() => setDialogStep("main")} />
         ) : dialogStep === "rules" ? (
           <ActionRulesEditor
-            rules={actionRules}
-            onRulesChange={setActionRules}
             onBack={() => setDialogStep("main")}
-            chartType={chartType}
-            availableFields={availableFields}
-            parameterSuggestions={parameterSuggestions}
             pages={(layout?.pages ?? []).map((p) => ({
               id: p.id,
               title: p.title,
@@ -1193,17 +1247,6 @@ export function WidgetEditorModal({
                       {/* Parameter config (when parameter-select) */}
                       {isParamSelect && (
                         <ParameterConfigSection
-                          paramUIType={paramUIType}
-                          onParamUITypeChange={setParamUIType}
-                          dateSub={dateSub}
-                          onDateSubChange={setDateSub}
-                          multiSelect={multiSelect}
-                          onMultiSelectChange={setMultiSelect}
-                          paramWidgetName={paramWidgetName}
-                          onParamWidgetNameChange={setParamWidgetName}
-                          chartOptions={chartOptions}
-                          onChartOptionsChange={setChartOptions}
-                          connectionId={connectionId}
                           seedQueryExecution={seedQueryExecution}
                           seedPreviewOptions={seedPreviewOptions}
                         />
@@ -1233,24 +1276,14 @@ export function WidgetEditorModal({
                       {/* Query editor (non-parameter and non-content types) */}
                       {!isParamSelect && !isContentOnly && (
                         <QueryEditorPanel
-                          chartType={chartType}
-                          query={query}
-                          onQueryChange={setQuery}
                           onRun={isForm ? undefined : handlePreview}
                           editorLanguage={editorLanguage}
-                          connectionId={connectionId}
                           running={previewQuery.isPending}
                         />
                       )}
 
                       {/* Form fields editor (form type only) */}
-                      {isForm && (
-                        <FormFieldsEditor
-                          fields={formFields}
-                          onChange={setFormFields}
-                          connectionId={connectionId}
-                        />
-                      )}
+                      {isForm && <FormFieldsEditor />}
                     </div>
                   }
                   styleTab={
@@ -1698,7 +1731,7 @@ export function WidgetEditorModal({
                       ? !paramWidgetName.trim() ||
                         (paramUIType === "select" &&
                           (!connectionId ||
-                            !(chartOptions.seedQuery as string)?.trim()))
+                            !String(chartOptions.seedQuery ?? "").trim()))
                       : isContentOnly
                         ? false
                         : isForm
diff --git a/app/src/components/widget-editor/action-rules-editor.tsx b/app/src/components/widget-editor/action-rules-editor.tsx
index c9bfb83e..0d4c58b9 100644
--- a/app/src/components/widget-editor/action-rules-editor.tsx
+++ b/app/src/components/widget-editor/action-rules-editor.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import type { ClickActionRule } from "@/lib/db/schema";
+import { useWidgetEditorStore } from "@/stores/widget-editor-store";
 import { ArrowLeft, Plus, Trash2 } from "lucide-react";
 import {
   Accordion,
@@ -23,24 +24,18 @@ import { useAccordionCrud } from "./use-accordion-crud";
 import { FieldSelectorInput } from "./field-selector-input";
 
 interface ActionRulesEditorProps {
-  rules: ClickActionRule[];
-  onRulesChange: (rules: ClickActionRule[]) => void;
   onBack: () => void;
-  chartType: string;
-  availableFields: string[];
-  parameterSuggestions: string[];
   pages: { id: string; title: string }[];
 }
 
-export function ActionRulesEditor({
-  rules,
-  onRulesChange,
-  onBack,
-  chartType,
-  availableFields,
-  parameterSuggestions,
-  pages,
-}: ActionRulesEditorProps) {
+export function ActionRulesEditor({ onBack, pages }: ActionRulesEditorProps) {
+  const rules = useWidgetEditorStore((s) => s.actionRules);
+  const onRulesChange = useWidgetEditorStore((s) => s.setActionRules);
+  const chartType = useWidgetEditorStore((s) => s.chartType);
+  const availableFields = useWidgetEditorStore((s) => s.availableFields);
+  const parameterSuggestions = useWidgetEditorStore(
+    (s) => s.parameterSuggestions,
+  );
   const isTable = chartType === "table";
 
   const { openItems, setOpenItems, addItem, removeItem, updateItem } =
@@ -59,8 +54,11 @@ export function ActionRulesEditor({
     addItem(() => ({
       id: crypto.randomUUID(),
       type: "set-parameter",
-      triggerColumn: isTable ? availableFields[0] ?? "" : undefined,
-      parameterMapping: { parameterName: "", sourceField: availableFields[0] ?? "" },
+      triggerColumn: isTable ? (availableFields[0] ?? "") : undefined,
+      parameterMapping: {
+        parameterName: "",
+        sourceField: availableFields[0] ?? "",
+      },
     }));
   }
 
@@ -82,9 +80,17 @@ export function ActionRulesEditor({
           </p>
         )}
 
-        <Accordion type="multiple" value={openItems} onValueChange={setOpenItems}>
+        <Accordion
+          type="multiple"
+          value={openItems}
+          onValueChange={setOpenItems}
+        >
           {rules.map((rule, index) => (
-            <AccordionItem key={rule.id} value={rule.id} className="border rounded-lg">
+            <AccordionItem
+              key={rule.id}
+              value={rule.id}
+              className="border rounded-lg"
+            >
               <div className="flex items-center pr-2">
                 <AccordionTrigger className="flex-1 px-4 py-3 text-sm font-medium">
                   Rule {index + 1}
@@ -108,7 +114,9 @@ export function ActionRulesEditor({
                     <Label>Trigger Column</Label>
                     <FieldSelectorInput
                       value={rule.triggerColumn ?? ""}
-                      onChange={(v) => updateItem(rule.id, { triggerColumn: v })}
+                      onChange={(v) =>
+                        updateItem(rule.id, { triggerColumn: v })
+                      }
                       fields={availableFields}
                       label="Trigger Column"
                       placeholder="Select column..."
@@ -131,15 +139,22 @@ export function ActionRulesEditor({
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="set-parameter">Set Parameter</SelectItem>
-                      <SelectItem value="navigate-to-page">Navigate to Page</SelectItem>
-                      <SelectItem value="set-parameter-and-navigate">Set Parameter & Navigate</SelectItem>
+                      <SelectItem value="set-parameter">
+                        Set Parameter
+                      </SelectItem>
+                      <SelectItem value="navigate-to-page">
+                        Navigate to Page
+                      </SelectItem>
+                      <SelectItem value="set-parameter-and-navigate">
+                        Set Parameter & Navigate
+                      </SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
 
                 {/* Parameter name */}
-                {(rule.type === "set-parameter" || rule.type === "set-parameter-and-navigate") && (
+                {(rule.type === "set-parameter" ||
+                  rule.type === "set-parameter-and-navigate") && (
                   <>
                     <div className="space-y-1.5">
                       <Label>Parameter Name</Label>
@@ -150,7 +165,8 @@ export function ActionRulesEditor({
                           updateItem(rule.id, {
                             parameterMapping: {
                               parameterName: v,
-                              sourceField: rule.parameterMapping?.sourceField ?? "",
+                              sourceField:
+                                rule.parameterMapping?.sourceField ?? "",
                             },
                           })
                         }
@@ -167,7 +183,8 @@ export function ActionRulesEditor({
                           onChange={(v) =>
                             updateItem(rule.id, {
                               parameterMapping: {
-                                parameterName: rule.parameterMapping?.parameterName ?? "",
+                                parameterName:
+                                  rule.parameterMapping?.parameterName ?? "",
                                 sourceField: v,
                               },
                             })
@@ -182,13 +199,16 @@ export function ActionRulesEditor({
                 )}
 
                 {/* Target page */}
-                {(rule.type === "navigate-to-page" || rule.type === "set-parameter-and-navigate") && (
+                {(rule.type === "navigate-to-page" ||
+                  rule.type === "set-parameter-and-navigate") && (
                   <div className="space-y-1.5">
                     <Label>Target Page</Label>
                     {pages.length > 0 ? (
                       <Select
                         value={rule.targetPageId ?? ""}
-                        onValueChange={(v) => updateItem(rule.id, { targetPageId: v })}
+                        onValueChange={(v) =>
+                          updateItem(rule.id, { targetPageId: v })
+                        }
                       >
                         <SelectTrigger aria-label="Target Page">
                           <SelectValue placeholder="Select a page..." />
@@ -213,7 +233,12 @@ export function ActionRulesEditor({
           ))}
         </Accordion>
 
-        <Button variant="outline" size="sm" onClick={addRule} className="w-full">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={addRule}
+          className="w-full"
+        >
           <Plus className="h-4 w-4 mr-1.5" />
           Add Rule
         </Button>
diff --git a/app/src/components/widget-editor/chart-type-selector.tsx b/app/src/components/widget-editor/chart-type-selector.tsx
index 3cb08625..b5ddde76 100644
--- a/app/src/components/widget-editor/chart-type-selector.tsx
+++ b/app/src/components/widget-editor/chart-type-selector.tsx
@@ -20,33 +20,42 @@ import {
   LayoutGrid,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
-import {
-  Label,
-  Combobox,
-} from "@neoboard/components";
+import { Label, Combobox } from "@neoboard/components";
 import type { ChartType } from "@/lib/chart-registry";
+import { getChartConfig } from "@/lib/chart-registry";
 
-/** Icon + label map for chart type dropdown (keeps chart-registry free of UI concerns) */
-export const chartTypeMeta: Record<ChartType, { label: string; Icon: LucideIcon }> = {
-  bar: { label: "Bar Chart", Icon: BarChart3 },
-  line: { label: "Line Chart", Icon: LineChartIcon },
-  pie: { label: "Pie Chart", Icon: PieChartIcon },
-  "single-value": { label: "Single Value", Icon: Hash },
-  graph: { label: "Graph", Icon: GitGraph },
-  map: { label: "Map", Icon: Map },
-  table: { label: "Data Table", Icon: Table2 },
-  json: { label: "JSON Viewer", Icon: Braces },
-  "parameter-select": { label: "Parameter Selector", Icon: SlidersHorizontal },
-  form: { label: "Form", Icon: FileEdit },
-  markdown: { label: "Markdown", Icon: FileText },
-  iframe: { label: "iFrame", Icon: Globe },
-  gauge: { label: "Gauge", Icon: Gauge },
-  sankey: { label: "Sankey", Icon: Workflow },
-  sunburst: { label: "Sunburst", Icon: Sun },
-  radar: { label: "Radar", Icon: Radar },
-  treemap: { label: "Treemap", Icon: LayoutGrid },
+/** Icon map for chart type dropdown (labels come from chartRegistry, icons stay in UI layer) */
+export const chartTypeIcons: Record<ChartType, LucideIcon> = {
+  bar: BarChart3,
+  line: LineChartIcon,
+  pie: PieChartIcon,
+  "single-value": Hash,
+  graph: GitGraph,
+  map: Map,
+  table: Table2,
+  json: Braces,
+  "parameter-select": SlidersHorizontal,
+  form: FileEdit,
+  markdown: FileText,
+  iframe: Globe,
+  gauge: Gauge,
+  sankey: Workflow,
+  sunburst: Sun,
+  radar: Radar,
+  treemap: LayoutGrid,
 };
 
+/** Get label + Icon for a chart type. Label from registry, Icon from UI layer. */
+export function getChartTypeMeta(type: ChartType): {
+  label: string;
+  Icon: LucideIcon;
+} {
+  return {
+    label: getChartConfig(type)?.label ?? type,
+    Icon: chartTypeIcons[type] ?? Braces,
+  };
+}
+
 interface ConnectionOption {
   id: string;
   name: string;
@@ -74,7 +83,7 @@ export function ChartTypeSelector({
 }: ChartTypeSelectorProps) {
   const chartTypeOptions = compatibleChartTypes.map((type) => ({
     value: type,
-    label: chartTypeMeta[type].label,
+    label: getChartTypeMeta(type).label,
   }));
 
   const chartTypeSelect = (
@@ -99,7 +108,9 @@ export function ChartTypeSelector({
   return (
     <div className="grid grid-cols-2 gap-3">
       <div className="space-y-1.5">
-        <Label>Connection <span className="text-destructive">*</span></Label>
+        <Label>
+          Connection <span className="text-destructive">*</span>
+        </Label>
         <Combobox
           value={connectionId}
           onChange={onConnectionChange}
diff --git a/app/src/components/widget-editor/form-fields-editor.tsx b/app/src/components/widget-editor/form-fields-editor.tsx
index 7bcdd764..0164e48c 100644
--- a/app/src/components/widget-editor/form-fields-editor.tsx
+++ b/app/src/components/widget-editor/form-fields-editor.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import { useWidgetEditorStore } from "@/stores/widget-editor-store";
 import { GripVertical, Plus, Trash2 } from "lucide-react";
 import {
   Accordion,
@@ -39,14 +40,14 @@ import type { FormFieldDef } from "@/lib/form-field-def";
 import type { ParameterType } from "@/stores/parameter-store";
 import { useAccordionCrud } from "./use-accordion-crud";
 
-interface FormFieldsEditorProps {
-  fields: FormFieldDef[];
-  onChange: (fields: FormFieldDef[]) => void;
-  connectionId: string;
-}
+// Props interface kept empty — FormFieldsEditor reads from widget-editor store.
+
+interface FormFieldsEditorProps {}
 
 function needsSeedQuery(type: ParameterType): boolean {
-  return type === "select" || type === "multi-select" || type === "cascading-select";
+  return (
+    type === "select" || type === "multi-select" || type === "cascading-select"
+  );
 }
 
 interface LabeledInputProps {
@@ -57,7 +58,13 @@ interface LabeledInputProps {
   type?: string;
 }
 
-function LabeledInput({ label, value, onChange, placeholder, type = "text" }: LabeledInputProps) {
+function LabeledInput({
+  label,
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+}: LabeledInputProps) {
   return (
     <div className="space-y-1">
       <Label className="text-xs">{label}</Label>
@@ -79,7 +86,12 @@ interface SortableFieldItemProps {
   onUpdate: (id: string, patch: Partial<FormFieldDef>) => void;
 }
 
-function SortableFieldItem({ field, index, onRemove, onUpdate }: SortableFieldItemProps) {
+function SortableFieldItem({
+  field,
+  index,
+  onRemove,
+  onUpdate,
+}: SortableFieldItemProps) {
   const {
     attributes,
     listeners,
@@ -98,7 +110,12 @@ function SortableFieldItem({ field, index, onRemove, onUpdate }: SortableFieldIt
   };
 
   return (
-    <AccordionItem ref={setNodeRef} style={style} value={field.id} className="border rounded-lg">
+    <AccordionItem
+      ref={setNodeRef}
+      style={style}
+      value={field.id}
+      className="border rounded-lg"
+    >
       <div className="flex items-center pr-1">
         <button
           type="button"
@@ -113,9 +130,7 @@ function SortableFieldItem({ field, index, onRemove, onUpdate }: SortableFieldIt
           <span className="flex items-center gap-2">
             Field {index + 1}
             {field.label ? ` — ${field.label}` : " — Untitled"}
-            {field.required && (
-              <span className="text-destructive">*</span>
-            )}
+            {field.required && <span className="text-destructive">*</span>}
             <Badge variant="outline" className="ml-1 text-xs">
               {field.parameterType}
             </Badge>
@@ -179,7 +194,9 @@ function SortableFieldItem({ field, index, onRemove, onUpdate }: SortableFieldIt
               <SelectItem value="date">Date Picker</SelectItem>
               <SelectItem value="date-range">Date Range</SelectItem>
               <SelectItem value="date-relative">Relative Date</SelectItem>
-              <SelectItem value="number-range">Number Range (Slider)</SelectItem>
+              <SelectItem value="number-range">
+                Number Range (Slider)
+              </SelectItem>
               <SelectItem value="cascading-select">Cascading Select</SelectItem>
             </SelectContent>
           </Select>
@@ -191,7 +208,9 @@ function SortableFieldItem({ field, index, onRemove, onUpdate }: SortableFieldIt
             <Label className="text-xs">Options Query</Label>
             <Textarea
               value={field.seedQuery ?? ""}
-              onChange={(e) => onUpdate(field.id, { seedQuery: e.target.value })}
+              onChange={(e) =>
+                onUpdate(field.id, { seedQuery: e.target.value })
+              }
               placeholder="SELECT value, label FROM ..."
               rows={3}
               className="text-xs font-mono"
@@ -268,13 +287,17 @@ function SortableFieldItem({ field, index, onRemove, onUpdate }: SortableFieldIt
   );
 }
 
-export function FormFieldsEditor({ fields, onChange }: FormFieldsEditorProps) {
+export function FormFieldsEditor(_props: FormFieldsEditorProps) {
+  const fields = useWidgetEditorStore((s) => s.formFields);
+  const onChange = useWidgetEditorStore((s) => s.setFormFields);
   const { openItems, setOpenItems, addItem, removeItem, updateItem } =
     useAccordionCrud<FormFieldDef>(fields, onChange);
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
   );
 
   function handleDragEnd(event: DragEndEvent) {
@@ -322,7 +345,10 @@ export function FormFieldsEditor({ fields, onChange }: FormFieldsEditorProps) {
           collisionDetection={closestCenter}
           onDragEnd={handleDragEnd}
         >
-          <SortableContext items={fields.map((f) => f.id)} strategy={verticalListSortingStrategy}>
+          <SortableContext
+            items={fields.map((f) => f.id)}
+            strategy={verticalListSortingStrategy}
+          >
             <Accordion
               type="multiple"
               value={openItems}
diff --git a/app/src/components/widget-editor/parameter-config-section.tsx b/app/src/components/widget-editor/parameter-config-section.tsx
index a728ead4..f0331cdb 100644
--- a/app/src/components/widget-editor/parameter-config-section.tsx
+++ b/app/src/components/widget-editor/parameter-config-section.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useEffect, useRef } from "react";
+import { useWidgetEditorStore } from "@/stores/widget-editor-store";
 import { Calendar, Type, ListFilter } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import {
@@ -23,7 +24,7 @@ export type DateSubType = "single" | "range" | "relative";
 export function resolveInternalParamType(
   ui: ParamUIType,
   dateSub: DateSubType,
-  multi: boolean
+  multi: boolean,
 ): string {
   if (ui === "date") {
     return dateSub === "range"
@@ -57,11 +58,12 @@ export function reverseParamTypeMapping(t: string): {
   }
 }
 
-const paramTypeMeta: Record<ParamUIType, { label: string; Icon: LucideIcon }> = {
-  date: { label: "Date Picker", Icon: Calendar },
-  freetext: { label: "Freetext", Icon: Type },
-  select: { label: "Select", Icon: ListFilter },
-};
+const paramTypeMeta: Record<ParamUIType, { label: string; Icon: LucideIcon }> =
+  {
+    date: { label: "Date Picker", Icon: Calendar },
+    freetext: { label: "Freetext", Icon: Type },
+    select: { label: "Select", Icon: ListFilter },
+  };
 
 const paramTypes = Object.keys(paramTypeMeta) as ParamUIType[];
 
@@ -80,7 +82,9 @@ function SeedQueryInput({
 }) {
   const [draft, setDraft] = useState(value);
   const onChangeRef = useRef(onChange);
-  useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
 
   useEffect(() => {
     setDraft(value);
@@ -114,36 +118,27 @@ export interface SeedQueryExecutionState {
 }
 
 export interface ParameterConfigSectionProps {
-  paramUIType: ParamUIType;
-  onParamUITypeChange: (v: ParamUIType) => void;
-  dateSub: DateSubType;
-  onDateSubChange: (v: DateSubType) => void;
-  multiSelect: boolean;
-  onMultiSelectChange: (v: boolean) => void;
-  paramWidgetName: string;
-  onParamWidgetNameChange: (v: string) => void;
-  chartOptions: Record<string, unknown>;
-  onChartOptionsChange: (updater: (prev: Record<string, unknown>) => Record<string, unknown>) => void;
-  connectionId: string;
   seedQueryExecution: SeedQueryExecutionState;
   seedPreviewOptions: { value: string; label: string }[] | null;
 }
 
 export function ParameterConfigSection({
-  paramUIType,
-  onParamUITypeChange,
-  dateSub,
-  onDateSubChange,
-  multiSelect,
-  onMultiSelectChange,
-  paramWidgetName,
-  onParamWidgetNameChange,
-  chartOptions,
-  onChartOptionsChange,
-  connectionId,
   seedQueryExecution,
   seedPreviewOptions,
 }: ParameterConfigSectionProps) {
+  const paramUIType = useWidgetEditorStore((s) => s.paramUIType);
+  const onParamUITypeChange = useWidgetEditorStore((s) => s.setParamUIType);
+  const dateSub = useWidgetEditorStore((s) => s.dateSub);
+  const onDateSubChange = useWidgetEditorStore((s) => s.setDateSub);
+  const multiSelect = useWidgetEditorStore((s) => s.multiSelect);
+  const onMultiSelectChange = useWidgetEditorStore((s) => s.setMultiSelect);
+  const paramWidgetName = useWidgetEditorStore((s) => s.paramWidgetName);
+  const onParamWidgetNameChange = useWidgetEditorStore(
+    (s) => s.setParamWidgetName,
+  );
+  const chartOptions = useWidgetEditorStore((s) => s.chartOptions);
+  const onChartOptionsChange = useWidgetEditorStore((s) => s.setChartOptions);
+  const connectionId = useWidgetEditorStore((s) => s.connectionId);
   return (
     <div className="space-y-4" data-testid="param-config-section">
       {/* Parameter Type dropdown */}
@@ -177,7 +172,10 @@ export function ParameterConfigSection({
       {paramUIType === "date" && (
         <div className="space-y-1.5">
           <Label>Date Mode</Label>
-          <Select value={dateSub} onValueChange={(v) => onDateSubChange(v as DateSubType)}>
+          <Select
+            value={dateSub}
+            onValueChange={(v) => onDateSubChange(v as DateSubType)}
+          >
             <SelectTrigger>
               <SelectValue />
             </SelectTrigger>
@@ -207,13 +205,20 @@ export function ParameterConfigSection({
       {/* Seed Query (only for select type) */}
       {paramUIType === "select" && (
         <div className="space-y-1.5">
-          <Label htmlFor="seed-query">Seed Query <span className="text-destructive">*</span></Label>
+          <Label htmlFor="seed-query">
+            Seed Query <span className="text-destructive">*</span>
+          </Label>
           <p className="text-xs text-muted-foreground">
-            Use columns named <code className="bg-muted px-1 rounded">value</code> and <code className="bg-muted px-1 rounded">label</code> (recommended), or first column = value, second = label
+            Use columns named{" "}
+            <code className="bg-muted px-1 rounded">value</code> and{" "}
+            <code className="bg-muted px-1 rounded">label</code> (recommended),
+            or first column = value, second = label
           </p>
           <SeedQueryInput
             value={(chartOptions.seedQuery as string) ?? ""}
-            onChange={(v) => onChartOptionsChange((prev) => ({ ...prev, seedQuery: v }))}
+            onChange={(v) =>
+              onChartOptionsChange((prev) => ({ ...prev, seedQuery: v }))
+            }
             placeholder="SELECT DISTINCT value FROM table ORDER BY value"
           />
           <Button
@@ -221,7 +226,9 @@ export function ParameterConfigSection({
             variant="outline"
             size="sm"
             className="mt-2"
-            disabled={!connectionId || !(chartOptions.seedQuery as string)?.trim()}
+            disabled={
+              !connectionId || !String(chartOptions.seedQuery ?? "").trim()
+            }
             onClick={() => {
               const sq = (chartOptions.seedQuery as string) ?? "";
               if (connectionId && sq.trim()) {
@@ -238,7 +245,8 @@ export function ParameterConfigSection({
           )}
           {seedPreviewOptions && seedPreviewOptions.length > 0 && (
             <p className="text-xs text-muted-foreground mt-1">
-              {seedPreviewOptions.length} option{seedPreviewOptions.length !== 1 ? "s" : ""} loaded — see preview
+              {seedPreviewOptions.length} option
+              {seedPreviewOptions.length !== 1 ? "s" : ""} loaded — see preview
             </p>
           )}
         </div>
@@ -246,7 +254,9 @@ export function ParameterConfigSection({
 
       {/* Parameter Name */}
       <div className="space-y-1.5">
-        <Label htmlFor="param-widget-name">Parameter Name <span className="text-destructive">*</span></Label>
+        <Label htmlFor="param-widget-name">
+          Parameter Name <span className="text-destructive">*</span>
+        </Label>
         <Input
           id="param-widget-name"
           value={paramWidgetName}
@@ -269,13 +279,19 @@ export function ParameterConfigSection({
                 $param_{paramWidgetName}
               </code>
             </p>
-            {paramUIType === "date" && (dateSub === "range" || dateSub === "relative") && (
-              <p>
-                Date range sub-parameters:{" "}
-                <code className="bg-muted px-1 py-0.5 rounded text-foreground">$param_{paramWidgetName}_from</code>,{" "}
-                <code className="bg-muted px-1 py-0.5 rounded text-foreground">$param_{paramWidgetName}_to</code>
-              </p>
-            )}
+            {paramUIType === "date" &&
+              (dateSub === "range" || dateSub === "relative") && (
+                <p>
+                  Date range sub-parameters:{" "}
+                  <code className="bg-muted px-1 py-0.5 rounded text-foreground">
+                    $param_{paramWidgetName}_from
+                  </code>
+                  ,{" "}
+                  <code className="bg-muted px-1 py-0.5 rounded text-foreground">
+                    $param_{paramWidgetName}_to
+                  </code>
+                </p>
+              )}
           </div>
         </div>
       )}
diff --git a/app/src/components/widget-editor/query-editor-panel.tsx b/app/src/components/widget-editor/query-editor-panel.tsx
index 21e3cb9c..1468b964 100644
--- a/app/src/components/widget-editor/query-editor-panel.tsx
+++ b/app/src/components/widget-editor/query-editor-panel.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { useWidgetEditorStore } from "@/stores/widget-editor-store";
 import { Info, RefreshCw } from "lucide-react";
 import {
   Label,
@@ -53,27 +54,23 @@ export const QUERY_HINTS: Partial<Record<ChartType, string>> = {
 };
 
 export interface QueryEditorPanelProps {
-  chartType: string;
-  query: string;
-  onQueryChange: (q: string) => void;
   /** When omitted, the Ctrl/Cmd+Enter run shortcut is disabled (e.g. form widgets). */
   onRun?: () => void;
   /** Connector type or language name — mapped to editor extension by the language resolver registry. */
   editorLanguage: string;
-  connectionId: string;
   /** When true, shows a running/loading indicator on the query editor. */
   running?: boolean;
 }
 
 export function QueryEditorPanel({
-  chartType,
-  query,
-  onQueryChange,
   onRun,
   editorLanguage,
-  connectionId,
   running,
 }: QueryEditorPanelProps) {
+  const chartType = useWidgetEditorStore((s) => s.chartType);
+  const query = useWidgetEditorStore((s) => s.query);
+  const onQueryChange = useWidgetEditorStore((s) => s.setQuery);
+  const connectionId = useWidgetEditorStore((s) => s.connectionId);
   // Prefetch schema for autocompletion. The hook caches for 10 min
   // and also writes to the Zustand store for synchronous reads.
   const { isFetching, refreshSchema } = useConnectionSchema(connectionId);
diff --git a/app/src/components/widget-editor/styling-rules-editor.tsx b/app/src/components/widget-editor/styling-rules-editor.tsx
index f2537268..5cd47f7d 100644
--- a/app/src/components/widget-editor/styling-rules-editor.tsx
+++ b/app/src/components/widget-editor/styling-rules-editor.tsx
@@ -2,6 +2,9 @@
 
 import React from "react";
 import type { StylingRule, StylingOperator } from "@/lib/db/schema";
+import { getOperatorGroups } from "@neoboard/components/charts";
+import { useWidgetEditorStore } from "@/stores/widget-editor-store";
+import { getStylingTargets } from "@/lib/chart-registry";
 import { ArrowLeft, GripVertical, Plus, Trash2, Bold } from "lucide-react";
 import {
   Accordion,
@@ -41,48 +44,19 @@ import { useAccordionCrud } from "./use-accordion-crud";
 import { FieldSelectorInput } from "./field-selector-input";
 import { ValueOrParamInput } from "./value-or-param-input";
 
-const OPERATOR_GROUPS: { label: string; operators: { value: StylingOperator; label: string }[] }[] = [
-  {
-    label: "Numeric",
-    operators: [
-      { value: "<=", label: "<= (less or equal)" },
-      { value: ">=", label: ">= (greater or equal)" },
-      { value: "<", label: "< (less than)" },
-      { value: ">", label: "> (greater than)" },
-      { value: "==", label: "== (equals)" },
-      { value: "!=", label: "!= (not equal)" },
-      { value: "between", label: "between" },
-    ],
-  },
-  {
-    label: "Text",
-    operators: [
-      { value: "contains", label: "contains" },
-      { value: "not_contains", label: "not contains" },
-      { value: "starts_with", label: "starts with" },
-      { value: "ends_with", label: "ends with" },
-    ],
-  },
-  {
-    label: "Null",
-    operators: [
-      { value: "is_null", label: "is null" },
-      { value: "is_not_null", label: "is not null" },
-    ],
-  },
-];
+// Operator groups derived from the shared registry (single source of truth)
+const OPERATOR_GROUPS = getOperatorGroups();
 
 const NULL_OPS = new Set<StylingOperator>(["is_null", "is_not_null"]);
-const STRING_OPS = new Set<StylingOperator>(["contains", "not_contains", "starts_with", "ends_with"]);
+const STRING_OPS = new Set<StylingOperator>([
+  "contains",
+  "not_contains",
+  "starts_with",
+  "ends_with",
+]);
 
 interface StylingRulesEditorProps {
-  rules: StylingRule[];
-  onRulesChange: (rules: StylingRule[]) => void;
   onBack: () => void;
-  chartType: string;
-  availableFields: string[];
-  parameterSuggestions: string[];
-  stylingTargets: { value: string; label: string }[];
 }
 
 function ruleSummary(rule: StylingRule): string {
@@ -143,7 +117,12 @@ function SortableRuleItem({
   const valuePlaceholder = STRING_OPS.has(rule.operator) ? "text value" : "0";
 
   return (
-    <AccordionItem ref={setNodeRef} style={style} value={rule.id} className="border rounded-lg">
+    <AccordionItem
+      ref={setNodeRef}
+      style={style}
+      value={rule.id}
+      className="border rounded-lg"
+    >
       <div className="flex items-center pr-2">
         <button
           type="button"
@@ -157,7 +136,8 @@ function SortableRuleItem({
         <AccordionTrigger className="flex-1 px-2 py-3 text-sm font-medium">
           Rule {index + 1}
           <span className="ml-1 text-xs font-normal text-muted-foreground">
-            {" — "}{ruleSummary(rule)}{" "}
+            {" — "}
+            {ruleSummary(rule)}{" "}
             <span
               className="inline-block w-3 h-3 rounded-sm border align-middle"
               style={{ backgroundColor: rule.color }}
@@ -218,45 +198,51 @@ function SortableRuleItem({
 
         {/* Compare against: Value or Parameter — hidden for null ops */}
         {!NULL_OPS.has(rule.operator) && rule.operator !== "between" && (
-        <div className="space-y-1.5">
-          <Label>Compare Against</Label>
-          <ValueOrParamInput
-            parameterRef={rule.parameterRef}
-            onParamRefChange={(ref) => onUpdate(rule.id, { parameterRef: ref })}
-            value={rule.value}
-            onValueChange={(v) => onUpdate(rule.id, { value: v })}
-            parameterSuggestions={parameterSuggestions}
-            inputType={inputType}
-            placeholder={valuePlaceholder}
-          />
-        </div>
-        )}
-
-        {/* Between: two-bound range input */}
-        {rule.operator === "between" && (
-        <div className="space-y-3">
           <div className="space-y-1.5">
-            <Label>From (min)</Label>
+            <Label>Compare Against</Label>
             <ValueOrParamInput
               parameterRef={rule.parameterRef}
-              onParamRefChange={(ref) => onUpdate(rule.id, { parameterRef: ref })}
+              onParamRefChange={(ref) =>
+                onUpdate(rule.id, { parameterRef: ref })
+              }
               value={rule.value}
               onValueChange={(v) => onUpdate(rule.id, { value: v })}
               parameterSuggestions={parameterSuggestions}
+              inputType={inputType}
+              placeholder={valuePlaceholder}
             />
           </div>
-          <div className="space-y-1.5">
-            <Label>To (max)</Label>
-            <ValueOrParamInput
-              parameterRef={rule.parameterRefTo}
-              onParamRefChange={(ref) => onUpdate(rule.id, { parameterRefTo: ref })}
-              value={rule.valueTo ?? ""}
-              onValueChange={(v) => onUpdate(rule.id, { valueTo: v })}
-              parameterSuggestions={parameterSuggestions}
-              placeholder="100"
-            />
+        )}
+
+        {/* Between: two-bound range input */}
+        {rule.operator === "between" && (
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <Label>From (min)</Label>
+              <ValueOrParamInput
+                parameterRef={rule.parameterRef}
+                onParamRefChange={(ref) =>
+                  onUpdate(rule.id, { parameterRef: ref })
+                }
+                value={rule.value}
+                onValueChange={(v) => onUpdate(rule.id, { value: v })}
+                parameterSuggestions={parameterSuggestions}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label>To (max)</Label>
+              <ValueOrParamInput
+                parameterRef={rule.parameterRefTo}
+                onParamRefChange={(ref) =>
+                  onUpdate(rule.id, { parameterRefTo: ref })
+                }
+                value={rule.valueTo ?? ""}
+                onValueChange={(v) => onUpdate(rule.id, { valueTo: v })}
+                parameterSuggestions={parameterSuggestions}
+                placeholder="100"
+              />
+            </div>
           </div>
-        </div>
         )}
 
         {/* Color */}
@@ -265,18 +251,14 @@ function SortableRuleItem({
           <div className="flex items-center gap-2">
             <Input
               value={rule.color}
-              onChange={(e) =>
-                onUpdate(rule.id, { color: e.target.value })
-              }
+              onChange={(e) => onUpdate(rule.id, { color: e.target.value })}
               placeholder="#3b82f6"
               className="flex-1"
             />
             <input
               type="color"
               value={rule.color}
-              onChange={(e) =>
-                onUpdate(rule.id, { color: e.target.value })
-              }
+              onChange={(e) => onUpdate(rule.id, { color: e.target.value })}
               className="h-9 w-9 rounded border cursor-pointer"
               aria-label="Pick color"
             />
@@ -329,15 +311,15 @@ function SortableRuleItem({
   );
 }
 
-export function StylingRulesEditor({
-  rules,
-  onRulesChange,
-  onBack,
-  chartType,
-  availableFields,
-  parameterSuggestions,
-  stylingTargets,
-}: StylingRulesEditorProps) {
+export function StylingRulesEditor({ onBack }: StylingRulesEditorProps) {
+  const rules = useWidgetEditorStore((s) => s.stylingRules);
+  const onRulesChange = useWidgetEditorStore((s) => s.setStylingRules);
+  const chartType = useWidgetEditorStore((s) => s.chartType);
+  const availableFields = useWidgetEditorStore((s) => s.availableFields);
+  const parameterSuggestions = useWidgetEditorStore(
+    (s) => s.parameterSuggestions,
+  );
+  const stylingTargets = getStylingTargets(chartType);
   const isTable = chartType === "table";
 
   const { openItems, setOpenItems, addItem, removeItem, updateItem } =
@@ -349,13 +331,15 @@ export function StylingRulesEditor({
       operator: "<=",
       value: 0,
       color: "#3b82f6",
-      target: stylingTargets[0]?.value as StylingRule["target"] ?? "color",
+      target: (stylingTargets[0]?.value as StylingRule["target"]) ?? "color",
     }));
   }
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
   );
 
   function handleDragEnd(event: DragEndEvent) {
@@ -393,8 +377,15 @@ export function StylingRulesEditor({
           collisionDetection={closestCenter}
           onDragEnd={handleDragEnd}
         >
-          <SortableContext items={rules.map((r) => r.id)} strategy={verticalListSortingStrategy}>
-            <Accordion type="multiple" value={openItems} onValueChange={setOpenItems}>
+          <SortableContext
+            items={rules.map((r) => r.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <Accordion
+              type="multiple"
+              value={openItems}
+              onValueChange={setOpenItems}
+            >
               {rules.map((rule, index) => (
                 <SortableRuleItem
                   key={rule.id}
@@ -412,7 +403,12 @@ export function StylingRulesEditor({
           </SortableContext>
         </DndContext>
 
-        <Button variant="outline" size="sm" onClick={addRule} className="w-full">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={addRule}
+          className="w-full"
+        >
           <Plus className="h-4 w-4 mr-1.5" />
           Add Rule
         </Button>
diff --git a/app/src/components/widget-editor/use-accordion-crud.ts b/app/src/components/widget-editor/use-accordion-crud.ts
index a1f38a12..35d7c58c 100644
--- a/app/src/components/widget-editor/use-accordion-crud.ts
+++ b/app/src/components/widget-editor/use-accordion-crud.ts
@@ -56,12 +56,19 @@ export function useAccordionCrud<T extends { id: string }>(
 
   useEffect(() => {
     const currentIds = items.map((item) => item.id);
-    setOpenItems((prev) => computeOpenItems(prevIdsRef.current, currentIds, prev));
+    setOpenItems((prev) =>
+      computeOpenItems(prevIdsRef.current, currentIds, prev),
+    );
     prevIdsRef.current = new Set(currentIds);
   }, [items]);
 
   function addItem(factory: () => T) {
-    onItemsChange(addItemToList(items, factory));
+    const newItem = factory();
+    prevIdsRef.current = new Set([...prevIdsRef.current, newItem.id]);
+    onItemsChange([...items, newItem]);
+    setOpenItems((prev) =>
+      prev.includes(newItem.id) ? prev : [...prev, newItem.id],
+    );
   }
 
   function removeItem(id: string) {
diff --git a/app/src/lib/capture-preview.ts b/app/src/lib/capture-preview.ts
index a7084bed..bcd61400 100644
--- a/app/src/lib/capture-preview.ts
+++ b/app/src/lib/capture-preview.ts
@@ -18,7 +18,9 @@ const JPEG_QUALITY = 0.7;
  * Attempt to capture a preview from an ECharts canvas inside the given element.
  * Returns a data-URI string or undefined.
  */
-export function captureEChartsPreview(container: HTMLElement): string | undefined {
+export function captureEChartsPreview(
+  container: HTMLElement,
+): string | undefined {
   // ECharts renders into a <canvas> inside a div with data-testid="widget-preview"
   const canvas = container.querySelector("canvas");
   if (!canvas) return undefined;
@@ -55,7 +57,9 @@ export function captureEChartsPreview(container: HTMLElement): string | undefine
  * Capture a preview for table-type widgets by rendering a simple thumbnail
  * of the first few rows.
  */
-export function captureTablePreview(container: HTMLElement): string | undefined {
+export function captureTablePreview(
+  container: HTMLElement,
+): string | undefined {
   const table = container.querySelector("table");
   if (!table) return undefined;
 
@@ -72,7 +76,9 @@ export function captureTablePreview(container: HTMLElement): string | undefined
     ctx.font = "11px system-ui, sans-serif";
 
     // Extract header and first few rows
-    const headers = Array.from(table.querySelectorAll("th")).map((th) => th.textContent ?? "");
+    const headers = Array.from(table.querySelectorAll("th")).map(
+      (th) => th.textContent ?? "",
+    );
     const rows = Array.from(table.querySelectorAll("tbody tr")).slice(0, 6);
 
     const colWidth = Math.floor((MAX_WIDTH - 16) / Math.max(headers.length, 1));
@@ -113,8 +119,7 @@ export function captureTablePreview(container: HTMLElement): string | undefined
   }
 }
 
-/** Chart types that use ECharts canvas rendering. */
-const ECHARTS_TYPES = new Set(["bar", "line", "pie", "single-value"]);
+import { getChartConfig } from "./chart-registry";
 
 /**
  * Capture a preview image from the widget preview container.
@@ -124,7 +129,7 @@ export function capturePreview(
   previewElement: HTMLElement,
   chartType: string,
 ): string | undefined {
-  if (ECHARTS_TYPES.has(chartType)) {
+  if (getChartConfig(chartType)?.isECharts) {
     return captureEChartsPreview(previewElement);
   }
   if (chartType === "table") {
diff --git a/app/src/lib/chart-registry.ts b/app/src/lib/chart-registry.ts
index 753c8c32..83c963fb 100644
--- a/app/src/lib/chart-registry.ts
+++ b/app/src/lib/chart-registry.ts
@@ -63,6 +63,14 @@ export interface ChartConfig {
    * can't apply conditional colors (graph, map, json, parameter-select, form).
    */
   supportsStyling?: boolean;
+  /** Whether this chart renders via ECharts (used by screenshot capture). */
+  isECharts?: boolean;
+  /** Whether this chart supports column mapping overlays. */
+  supportsColumnMapping?: boolean;
+  /** Available styling targets (backgroundColor, textColor, color, etc.). */
+  stylingTargets?: { value: string; label: string }[];
+  /** Whether this widget type needs a query to render. Defaults to true. */
+  requiresQuery?: boolean;
 }
 
 /**
@@ -90,7 +98,11 @@ function resolveLabelKey(keys: string[], mapping?: ColumnMapping): string {
 /**
  * Resolve value/series keys from a mapping, falling back to all non-label columns.
  */
-function resolveValueKeys(keys: string[], labelKey: string, mapping?: ColumnMapping): string[] {
+function resolveValueKeys(
+  keys: string[],
+  labelKey: string,
+  mapping?: ColumnMapping,
+): string[] {
   if (mapping?.yAxis && mapping.yAxis.length > 0) {
     const valid = mapping.yAxis.filter((k) => keys.includes(k));
     if (valid.length > 0) return valid;
@@ -115,7 +127,9 @@ function transformToBarData(data: unknown, mapping?: ColumnMapping): unknown {
   const valueKeys = resolveValueKeys(keys, labelKey, mapping);
 
   return records.map((r) => {
-    const point: Record<string, unknown> = { label: String(normalizeValue(r[labelKey]) ?? "") };
+    const point: Record<string, unknown> = {
+      label: String(normalizeValue(r[labelKey]) ?? ""),
+    };
     for (const k of valueKeys) {
       point[k] = Number(r[k]) || 0;
     }
@@ -161,7 +175,7 @@ function transformToPieData(data: unknown, mapping?: ColumnMapping): unknown {
   const valueKey =
     mapping?.yAxis?.[0] && keys.includes(mapping.yAxis[0])
       ? mapping.yAxis[0]
-      : keys.find((k) => k !== nameKey) ?? keys[1];
+      : (keys.find((k) => k !== nameKey) ?? keys[1]);
 
   return records.map((r) => ({
     name: String(normalizeValue(r[nameKey]) ?? ""),
@@ -192,10 +206,11 @@ function transformToTableData(data: unknown): unknown {
   return toRecords(data);
 }
 
-
 // ─── Graph helpers (extracted from transformToGraphData) ────────────────────
 
-function normalizeProps(props: Record<string, unknown>): Record<string, unknown> {
+function normalizeProps(
+  props: Record<string, unknown>,
+): Record<string, unknown> {
   const out: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(props)) {
     out[k] = normalizeValue(v) ?? v;
@@ -212,7 +227,13 @@ function isRelationship(v: Record<string, unknown>): boolean {
 }
 
 function isPath(v: Record<string, unknown>): boolean {
-  return "segments" in v && Array.isArray(v.segments) && "start" in v && "end" in v && !("type" in v);
+  return (
+    "segments" in v &&
+    Array.isArray(v.segments) &&
+    "start" in v &&
+    "end" in v &&
+    !("type" in v)
+  );
 }
 
 /**
@@ -243,7 +264,9 @@ function transformToGraphData(data: unknown): unknown {
 
   function addEdge(v: Record<string, unknown>) {
     const edgeId = String(
-      v.elementId ?? v.identity ?? `${v.startNodeElementId ?? v.start}-${v.type}-${v.endNodeElementId ?? v.end}`
+      v.elementId ??
+        v.identity ??
+        `${v.startNodeElementId ?? v.start}-${v.type}-${v.endNodeElementId ?? v.end}`,
     );
     if (!edgesMap.has(edgeId)) {
       const rawProps = (v.properties ?? {}) as Record<string, unknown>;
@@ -288,7 +311,10 @@ function transformToGraphData(data: unknown): unknown {
     }
   }
 
-  return { nodes: Array.from(nodesMap.values()), edges: Array.from(edgesMap.values()) };
+  return {
+    nodes: Array.from(nodesMap.values()),
+    edges: Array.from(edgesMap.values()),
+  };
 }
 
 /**
@@ -339,7 +365,9 @@ function transformToSelectData(data: unknown): unknown {
   if (!records.length) return [];
   const firstKey = Object.keys(records[0])[0];
   if (!firstKey) return [];
-  return records.map((r) => r[firstKey]).filter((v) => v !== null && v !== undefined);
+  return records
+    .map((r) => r[firstKey])
+    .filter((v) => v !== null && v !== undefined);
 }
 
 // ─── New chart type transforms ──────────────────────────────────────────────
@@ -357,7 +385,9 @@ function transformToGaugeData(data: unknown): unknown {
 
   // Look for explicit "value"/"name" keys, then fall back to positional
   const valueKey = keys.find((k) => /^value$/i.test(k)) ?? keys[0];
-  const nameKey = keys.find((k) => /^(name|label|title)$/i.test(k) && k !== valueKey) ?? keys[1];
+  const nameKey =
+    keys.find((k) => /^(name|label|title)$/i.test(k) && k !== valueKey) ??
+    keys[1];
 
   return [
     {
@@ -379,8 +409,15 @@ function transformToSankeyData(data: unknown): unknown {
 
   // Resolve source/target/value columns heuristically
   const sourceKey = keys.find((k) => /source|from|start/i.test(k)) ?? keys[0];
-  const targetKey = keys.find((k) => /target|to|end/i.test(k) && k !== sourceKey) ?? keys[1];
-  const valueKey = keys.find((k) => /value|count|weight|amount/i.test(k) && k !== sourceKey && k !== targetKey) ?? keys[2];
+  const targetKey =
+    keys.find((k) => /target|to|end/i.test(k) && k !== sourceKey) ?? keys[1];
+  const valueKey =
+    keys.find(
+      (k) =>
+        /value|count|weight|amount/i.test(k) &&
+        k !== sourceKey &&
+        k !== targetKey,
+    ) ?? keys[2];
 
   const nodeNames = new Set<string>();
   const links: Array<{ source: string; target: string; value: number }> = [];
@@ -422,8 +459,11 @@ function transformToHierarchicalData(data: unknown): unknown {
   // Case 2: flat with parent column — build hierarchy
   const hasParent = keys.includes("parent");
   if (hasParent) {
-    const nameKey = keys.find((k) => /^(name|label|title)$/i.test(k)) ?? keys[0];
-    const valueKey = keys.find((k) => /^(value|count|size)$/i.test(k) && k !== nameKey) ?? keys.find((k) => k !== nameKey && k !== "parent");
+    const nameKey =
+      keys.find((k) => /^(name|label|title)$/i.test(k)) ?? keys[0];
+    const valueKey =
+      keys.find((k) => /^(value|count|size)$/i.test(k) && k !== nameKey) ??
+      keys.find((k) => k !== nameKey && k !== "parent");
 
     type HierNode = { name: string; value: number; children?: HierNode[] };
     const nodeMap = new Map<string, HierNode>();
@@ -457,7 +497,8 @@ function transformToHierarchicalData(data: unknown): unknown {
   }
 
   // Case 3: flat name/value pairs
-  const nameKey = keys.find((k) => /^(name|label|title|category)$/i.test(k)) ?? keys[0];
+  const nameKey =
+    keys.find((k) => /^(name|label|title|category)$/i.test(k)) ?? keys[0];
   const valueKey = keys.find((k) => k !== nameKey) ?? keys[1];
 
   return records.map((r) => ({
@@ -477,10 +518,20 @@ function transformToRadarData(data: unknown): unknown {
   if (!records.length) return { indicators: [], series: [] };
 
   const keys = Object.keys(records[0]);
-  const indicatorKey = keys.find((k) => /^(indicator|axis|dimension|category)$/i.test(k));
-  const valueKey = keys.find((k) => /^(value|score)$/i.test(k) && k !== indicatorKey);
+  const indicatorKey = keys.find((k) =>
+    /^(indicator|axis|dimension|category)$/i.test(k),
+  );
+  const valueKey = keys.find(
+    (k) => /^(value|score)$/i.test(k) && k !== indicatorKey,
+  );
   const maxKey = keys.find((k) => /^(max|maximum)$/i.test(k));
-  const seriesKey = keys.find((k) => /^(series|group|name|label)$/i.test(k) && k !== indicatorKey && k !== valueKey && k !== maxKey);
+  const seriesKey = keys.find(
+    (k) =>
+      /^(series|group|name|label)$/i.test(k) &&
+      k !== indicatorKey &&
+      k !== valueKey &&
+      k !== maxKey,
+  );
 
   if (indicatorKey && valueKey) {
     // Long-format: one row per (series, indicator) combination
@@ -491,15 +542,24 @@ function transformToRadarData(data: unknown): unknown {
     for (const r of records) {
       const indName = String(normalizeValue(r[indicatorKey]) ?? "");
       const val = Number(r[valueKey]) || 0;
-      const serName = seriesKey ? String(normalizeValue(r[seriesKey]) ?? "Default") : "Default";
+      const serName = seriesKey
+        ? String(normalizeValue(r[seriesKey]) ?? "Default")
+        : "Default";
 
       if (maxKey) {
         const explicitMax = Number(r[maxKey]);
-        if (Number.isFinite(explicitMax) && explicitMax > 0 && !indicatorExplicitMax.has(indName)) {
+        if (
+          Number.isFinite(explicitMax) &&
+          explicitMax > 0 &&
+          !indicatorExplicitMax.has(indName)
+        ) {
           indicatorExplicitMax.set(indName, explicitMax);
         }
       }
-      indicatorMaxFromData.set(indName, Math.max(indicatorMaxFromData.get(indName) ?? 0, val));
+      indicatorMaxFromData.set(
+        indName,
+        Math.max(indicatorMaxFromData.get(indName) ?? 0, val),
+      );
       if (!seriesMap.has(serName)) seriesMap.set(serName, new Map());
       seriesMap.get(serName)!.set(indName, val);
     }
@@ -507,7 +567,8 @@ function transformToRadarData(data: unknown): unknown {
     // Use explicit max if provided, otherwise use a single global max across all
     // indicators so relative magnitudes are visible (e.g. 172 vs 9).
     const indicatorEntries = Array.from(indicatorMaxFromData.keys());
-    const globalMax = Math.ceil(Math.max(...indicatorMaxFromData.values()) * 1.1) || 100;
+    const globalMax =
+      Math.ceil(Math.max(...indicatorMaxFromData.values()) * 1.1) || 100;
     const indicators = indicatorEntries.map((name) => ({
       name,
       max: indicatorExplicitMax.get(name) ?? globalMax,
@@ -612,6 +673,8 @@ function validateMapData(data: unknown): string | null {
   return null;
 }
 
+const COLOR_TARGET = [{ value: "color", label: "Color" }];
+
 export const chartRegistry: Record<ChartType, ChartConfig> = {
   bar: {
     type: "bar",
@@ -620,6 +683,9 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     transformWithMapping: transformToBarData,
     validate: validateBarData,
     compatibleWith: ["neo4j", "postgresql"],
+    isECharts: true,
+    supportsColumnMapping: true,
+    stylingTargets: COLOR_TARGET,
   },
   line: {
     type: "line",
@@ -628,6 +694,9 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     transformWithMapping: transformToLineData,
     validate: validateLineData,
     compatibleWith: ["neo4j", "postgresql"],
+    isECharts: true,
+    supportsColumnMapping: true,
+    stylingTargets: COLOR_TARGET,
   },
   pie: {
     type: "pie",
@@ -636,6 +705,9 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     transformWithMapping: transformToPieData,
     validate: validatePieData,
     compatibleWith: ["neo4j", "postgresql"],
+    isECharts: true,
+    supportsColumnMapping: true,
+    stylingTargets: COLOR_TARGET,
   },
   table: {
     type: "table",
@@ -643,6 +715,10 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     transform: transformToTableData,
     transformWithMapping: transformToTableData,
     compatibleWith: ["neo4j", "postgresql"],
+    stylingTargets: [
+      { value: "backgroundColor", label: "Background Color" },
+      { value: "textColor", label: "Text Color" },
+    ],
   },
   "single-value": {
     type: "single-value",
@@ -652,8 +728,12 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     validate: validateValueData,
     compatibleWith: ["neo4j", "postgresql"],
     supportsClickAction: false,
+    isECharts: true,
+    stylingTargets: [
+      { value: "color", label: "Text Color" },
+      { value: "backgroundColor", label: "Background Color" },
+    ],
   },
-  // Graph visualization requires Neo4j node/relationship structures — not available from PostgreSQL.
   graph: {
     type: "graph",
     label: "Graph",
@@ -689,6 +769,7 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     compatibleWith: ["neo4j", "postgresql"],
     supportsClickAction: false,
     supportsStyling: false,
+    requiresQuery: false,
   },
   form: {
     type: "form",
@@ -697,6 +778,7 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     transformWithMapping: () => [],
     compatibleWith: ["neo4j", "postgresql"],
     supportsStyling: false,
+    requiresQuery: false,
   },
   markdown: {
     type: "markdown",
@@ -706,6 +788,7 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     compatibleWith: ["neo4j", "postgresql"],
     supportsClickAction: false,
     supportsStyling: false,
+    requiresQuery: false,
   },
   iframe: {
     type: "iframe",
@@ -715,6 +798,7 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     compatibleWith: ["neo4j", "postgresql"],
     supportsClickAction: false,
     supportsStyling: false,
+    requiresQuery: false,
   },
   gauge: {
     type: "gauge",
@@ -723,6 +807,8 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     transformWithMapping: transformToGaugeData,
     compatibleWith: ["neo4j", "postgresql"],
     supportsClickAction: false,
+    isECharts: true,
+    stylingTargets: [{ value: "color", label: "Gauge Color" }],
   },
   sankey: {
     type: "sankey",
@@ -730,6 +816,8 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     transform: transformToSankeyData,
     transformWithMapping: transformToSankeyData,
     compatibleWith: ["neo4j", "postgresql"],
+    isECharts: true,
+    stylingTargets: [{ value: "color", label: "Link Color" }],
   },
   sunburst: {
     type: "sunburst",
@@ -737,6 +825,8 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     transform: transformToHierarchicalData,
     transformWithMapping: transformToHierarchicalData,
     compatibleWith: ["neo4j", "postgresql"],
+    isECharts: true,
+    stylingTargets: [{ value: "color", label: "Segment Color" }],
   },
   radar: {
     type: "radar",
@@ -745,6 +835,8 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     transformWithMapping: transformToRadarData,
     compatibleWith: ["neo4j", "postgresql"],
     supportsClickAction: false,
+    isECharts: true,
+    stylingTargets: [{ value: "color", label: "Area Color" }],
   },
   treemap: {
     type: "treemap",
@@ -752,6 +844,8 @@ export const chartRegistry: Record<ChartType, ChartConfig> = {
     transform: transformToHierarchicalData,
     transformWithMapping: transformToHierarchicalData,
     compatibleWith: ["neo4j", "postgresql"],
+    isECharts: true,
+    stylingTargets: [{ value: "color", label: "Block Color" }],
   },
 };
 
@@ -779,36 +873,26 @@ export function chartSupportsStyling(type: string): boolean {
   return config.supportsStyling !== false;
 }
 
+/**
+ * Returns empty default chart settings for a type. Used by the widget editor
+ * store to initialize chart options without importing the component package.
+ * Returns an empty object — the actual defaults are applied at render time
+ * by the ChartOptionsPanel component.
+ */
+export function getChartDefaults(_type: string): Record<string, unknown> {
+  return {};
+}
+
 /**
  * Returns the available styling targets for a chart type.
- * Each target describes what visual property a styling rule can affect.
+ * Reads from the registry's `stylingTargets` field — no switch statement.
  */
-export function getStylingTargets(type: string): { value: string; label: string }[] {
-  if (!chartSupportsStyling(type)) return [];
-  switch (type) {
-    case "single-value":
-      return [
-        { value: "color", label: "Text Color" },
-        { value: "backgroundColor", label: "Background Color" },
-      ];
-    case "table":
-      return [
-        { value: "backgroundColor", label: "Background Color" },
-        { value: "textColor", label: "Text Color" },
-      ];
-    case "gauge":
-      return [{ value: "color", label: "Gauge Color" }];
-    case "sankey":
-      return [{ value: "color", label: "Link Color" }];
-    case "sunburst":
-      return [{ value: "color", label: "Segment Color" }];
-    case "radar":
-      return [{ value: "color", label: "Area Color" }];
-    case "treemap":
-      return [{ value: "color", label: "Block Color" }];
-    default:
-      return [{ value: "color", label: "Color" }];
-  }
+export function getStylingTargets(
+  type: string,
+): { value: string; label: string }[] {
+  const config = getChartConfig(type);
+  if (!config || config.supportsStyling === false) return [];
+  return config.stylingTargets ?? COLOR_TARGET;
 }
 
 /**
diff --git a/app/src/lib/collect-parameter-names.ts b/app/src/lib/collect-parameter-names.ts
index d5b87e53..81bb5cf4 100644
--- a/app/src/lib/collect-parameter-names.ts
+++ b/app/src/lib/collect-parameter-names.ts
@@ -13,7 +13,8 @@ export interface ParameterCollision {
 
 export function getWidgetParameterNames(widget: DashboardWidget): string[] {
   const names: string[] = [];
-  const clickAction = widget.settings?.clickAction as ClickAction | undefined;
+  const ws = widget.settings ?? {};
+  const clickAction = ws.clickAction as ClickAction | undefined;
 
   // Click action top-level parameterMapping
   if (clickAction?.parameterMapping?.parameterName) {
@@ -31,9 +32,7 @@ export function getWidgetParameterNames(widget: DashboardWidget): string[] {
 
   // Param-select chartOptions.parameterName
   if (widget.chartType === "parameter-select") {
-    const opts = widget.settings?.chartOptions as
-      | Record<string, unknown>
-      | undefined;
+    const opts = ws.chartOptions as Record<string, unknown> | undefined;
     if (opts?.parameterName && typeof opts.parameterName === "string") {
       names.push(opts.parameterName);
     }
@@ -93,7 +92,7 @@ export function findParameterCollisions(
     for (const widget of page.widgets) {
       if (widget.id === currentWidgetId) continue;
       if (getWidgetParameterNames(widget).includes(parameterName)) {
-        const titleSetting = widget.settings?.title;
+        const titleSetting = (widget.settings ?? {}).title;
         const title =
           titleSetting && typeof titleSetting === "string"
             ? titleSetting
diff --git a/app/src/lib/db/schema.ts b/app/src/lib/db/schema.ts
index c8731277..f30e5379 100644
--- a/app/src/lib/db/schema.ts
+++ b/app/src/lib/db/schema.ts
@@ -258,11 +258,12 @@ export interface ClickActionRule {
 
 // StylingRule, StylingConfig, StylingOperator — single source of truth in component package.
 // Re-exported here so app/ code can import from "@/lib/db/schema" without breaking existing imports.
+// Use direct chart path to avoid pulling in the full component barrel (breaks Vitest resolution).
 export type {
   StylingRule,
   StylingConfig,
   StylingOperator,
-} from "@neoboard/components";
+} from "@neoboard/components/charts";
 
 export interface ClickAction {
   type: "set-parameter" | "navigate-to-page" | "set-parameter-and-navigate";
diff --git a/app/src/lib/resolve-click-action.ts b/app/src/lib/resolve-click-action.ts
index 1fe23166..ce4d3288 100644
--- a/app/src/lib/resolve-click-action.ts
+++ b/app/src/lib/resolve-click-action.ts
@@ -1,7 +1,16 @@
-import type { DashboardWidget, ClickAction, ClickActionRule } from "./db/schema";
+import type {
+  DashboardWidget,
+  ClickAction,
+  ClickActionRule,
+} from "./db/schema";
 
 function isScalar(v: unknown): v is string | number | boolean | null {
-  return v === null || typeof v === "string" || typeof v === "number" || typeof v === "boolean";
+  return (
+    v === null ||
+    typeof v === "string" ||
+    typeof v === "number" ||
+    typeof v === "boolean"
+  );
 }
 
 export interface ClickActionResult {
@@ -22,7 +31,8 @@ export function resolveClickAction(
   widget: DashboardWidget,
   point: Record<string, unknown>,
 ): ClickActionResult | null {
-  const clickAction = widget.settings?.clickAction as ClickAction | undefined;
+  const ws = widget.settings ?? {};
+  const clickAction = ws.clickAction as ClickAction | undefined;
   if (!clickAction) return null;
 
   const { type } = clickAction;
@@ -40,10 +50,15 @@ export function resolveClickAction(
     // Cell-click: value comes directly from the clicked cell
     if ("_clickedValue" in point) {
       const clickedColumn = point._clickedColumn;
-      if (typeof clickedColumn !== "string" || !clickedColumn.trim()) return null;
+      if (typeof clickedColumn !== "string" || !clickedColumn.trim())
+        return null;
       // Validate clicked column against clickableColumns restriction
       const { clickableColumns } = clickAction;
-      if (clickableColumns && clickableColumns.length > 0 && !clickableColumns.includes(clickedColumn)) {
+      if (
+        clickableColumns &&
+        clickableColumns.length > 0 &&
+        !clickableColumns.includes(clickedColumn)
+      ) {
         return null;
       }
       value = point._clickedValue;
@@ -54,9 +69,13 @@ export function resolveClickAction(
     }
 
     if (value === undefined || !isScalar(value)) return null;
-    const label =
-      (widget.settings?.title as string) || widget.chartType;
-    result.setParameter = { parameterName, value, label, sourceField: effectiveSourceField };
+    const label = (ws.title as string) || widget.chartType;
+    result.setParameter = {
+      parameterName,
+      value,
+      label,
+      sourceField: effectiveSourceField,
+    };
   }
 
   // Resolve page navigation
@@ -97,8 +116,13 @@ function resolveRuleAction(
     }
 
     if (value === undefined || !isScalar(value)) return null;
-    const label = (widget.settings?.title as string) || widget.chartType;
-    result.setParameter = { parameterName, value, label, sourceField: effectiveSourceField };
+    const label = ((widget.settings ?? {}).title as string) || widget.chartType;
+    result.setParameter = {
+      parameterName,
+      value,
+      label,
+      sourceField: effectiveSourceField,
+    };
   }
 
   if (type === "navigate-to-page" || type === "set-parameter-and-navigate") {
@@ -142,7 +166,9 @@ export function resolveClickActions(
  * When rules exist, extracts triggerColumn values.
  * Falls back to legacy clickableColumns when no rules.
  */
-export function deriveClickableColumns(clickAction: ClickAction | undefined): string[] | undefined {
+export function deriveClickableColumns(
+  clickAction: ClickAction | undefined,
+): string[] | undefined {
   if (!clickAction) return undefined;
   if (!clickAction.rules?.length) return clickAction.clickableColumns;
   const cols = clickAction.rules
diff --git a/app/src/stores/__tests__/widget-editor-store.test.ts b/app/src/stores/__tests__/widget-editor-store.test.ts
new file mode 100644
index 00000000..7dd67629
--- /dev/null
+++ b/app/src/stores/__tests__/widget-editor-store.test.ts
@@ -0,0 +1,237 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useWidgetEditorStore } from "../widget-editor-store";
+
+function getState() {
+  return useWidgetEditorStore.getState();
+}
+
+describe("widget-editor-store", () => {
+  beforeEach(() => {
+    getState().resetForAdd();
+  });
+
+  describe("initial state", () => {
+    it("defaults to bar chart with empty connection", () => {
+      expect(getState().chartType).toBe("bar");
+      expect(getState().connectionId).toBe("");
+      expect(getState().query).toBe("");
+      expect(getState().title).toBe("");
+    });
+
+    it("defaults to styling and click action disabled", () => {
+      expect(getState().stylingEnabled).toBe(false);
+      expect(getState().clickActionEnabled).toBe(false);
+    });
+
+    it("defaults to dialog step 'main'", () => {
+      expect(getState().dialogStep).toBe("main");
+    });
+  });
+
+  describe("setChartType", () => {
+    it("updates chart type and resets chart options", () => {
+      getState().setChartType("pie");
+      expect(getState().chartType).toBe("pie");
+      // Chart options should be reset to defaults for new type
+      expect(getState().chartOptions).toBeDefined();
+    });
+
+    it("disables click action for unsupported types", () => {
+      getState().setClickActionEnabled(true);
+      getState().setChartType("single-value"); // doesn't support click action
+      expect(getState().clickActionEnabled).toBe(false);
+    });
+
+    it("disables styling for unsupported types", () => {
+      getState().setStylingEnabled(true);
+      getState().setChartType("graph"); // doesn't support styling
+      expect(getState().stylingEnabled).toBe(false);
+    });
+  });
+
+  describe("setChartOptions", () => {
+    it("accepts a direct object", () => {
+      getState().setChartOptions({ colorPalette: "neon" });
+      expect(getState().chartOptions).toEqual({ colorPalette: "neon" });
+    });
+
+    it("accepts an updater function", () => {
+      getState().setChartOptions({ existing: true });
+      getState().setChartOptions((prev) => ({ ...prev, added: "new" }));
+      expect(getState().chartOptions).toEqual({ existing: true, added: "new" });
+    });
+  });
+
+  describe("resetForAdd", () => {
+    it("resets all state to initial values", () => {
+      getState().setChartType("pie");
+      getState().setConnectionId("conn-1");
+      getState().setQuery("MATCH (n) RETURN n");
+      getState().setTitle("Test");
+      getState().setStylingEnabled(true);
+      getState().setClickActionEnabled(true);
+
+      getState().resetForAdd();
+
+      expect(getState().chartType).toBe("bar");
+      expect(getState().connectionId).toBe("");
+      expect(getState().query).toBe("");
+      expect(getState().title).toBe("");
+      expect(getState().stylingEnabled).toBe(false);
+      expect(getState().clickActionEnabled).toBe(false);
+    });
+  });
+
+  describe("loadFromWidget", () => {
+    it("loads basic widget properties", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "table",
+        connectionId: "conn-neo4j",
+        query: "MATCH (n) RETURN n",
+        settings: { title: "My Table" },
+      });
+
+      expect(getState().chartType).toBe("table");
+      expect(getState().connectionId).toBe("conn-neo4j");
+      expect(getState().query).toBe("MATCH (n) RETURN n");
+      expect(getState().title).toBe("My Table");
+    });
+
+    it("loads styling rules", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "bar",
+        connectionId: "c1",
+        query: "q",
+        settings: {
+          stylingConfig: {
+            enabled: true,
+            rules: [{ id: "r1", operator: ">=", value: 5, color: "#f00" }],
+          },
+        },
+      });
+
+      expect(getState().stylingEnabled).toBe(true);
+      expect(getState().stylingRules).toHaveLength(1);
+      expect(getState().stylingRules[0].color).toBe("#f00");
+    });
+
+    it("loads click action with parameter mapping", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "bar",
+        connectionId: "c1",
+        query: "q",
+        settings: {
+          clickAction: {
+            type: "set-parameter",
+            parameterMapping: {
+              parameterName: "year",
+              sourceField: "released",
+            },
+          },
+        },
+      });
+
+      expect(getState().clickActionEnabled).toBe(true);
+      expect(getState().parameterName).toBe("year");
+      expect(getState().sourceField).toBe("released");
+    });
+
+    it("loads color scales", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "table",
+        connectionId: "c1",
+        query: "q",
+        settings: {
+          conditionalFormatting: {
+            colorScales: [
+              { column: "score", minColor: "#f00", maxColor: "#0f0" },
+            ],
+          },
+        },
+      });
+
+      expect(getState().colorScales).toHaveLength(1);
+      expect(getState().colorScales[0].column).toBe("score");
+    });
+
+    it("migrates legacy colorThresholds to styling rules", () => {
+      getState().loadFromWidget({
+        id: "w1",
+        chartType: "bar",
+        connectionId: "c1",
+        query: "q",
+        settings: {
+          chartOptions: {
+            colorThresholds:
+              '[{"value":50,"color":"#aaa"},{"value":100,"color":"#bbb"}]',
+          },
+        },
+      });
+
+      expect(getState().stylingEnabled).toBe(true);
+      expect(getState().stylingRules).toHaveLength(2);
+    });
+  });
+
+  describe("buildStylingConfig", () => {
+    it("returns undefined when styling disabled", () => {
+      expect(getState().buildStylingConfig()).toBeUndefined();
+    });
+
+    it("returns config when styling enabled", () => {
+      getState().setStylingEnabled(true);
+      getState().setStylingRules([
+        { id: "r1", operator: ">=", value: 5, color: "#f00" },
+      ]);
+      const config = getState().buildStylingConfig();
+      expect(config?.enabled).toBe(true);
+      expect(config?.rules).toHaveLength(1);
+    });
+
+    it("returns undefined for unsupported chart types", () => {
+      getState().setChartType("graph");
+      getState().setStylingEnabled(true);
+      expect(getState().buildStylingConfig()).toBeUndefined();
+    });
+  });
+
+  describe("buildClickAction", () => {
+    it("returns undefined when click action disabled", () => {
+      expect(getState().buildClickAction()).toBeUndefined();
+    });
+
+    it("builds set-parameter action", () => {
+      getState().setClickActionEnabled(true);
+      getState().setClickActionType("set-parameter");
+      getState().setParameterName("year");
+      getState().setSourceField("released");
+      const action = getState().buildClickAction();
+      expect(action?.type).toBe("set-parameter");
+      expect(action?.parameterMapping?.parameterName).toBe("year");
+    });
+
+    it("returns undefined for empty parameter name", () => {
+      getState().setClickActionEnabled(true);
+      getState().setClickActionType("set-parameter");
+      getState().setParameterName("");
+      expect(getState().buildClickAction()).toBeUndefined();
+    });
+
+    it("uses action rules when present", () => {
+      getState().setClickActionEnabled(true);
+      getState().setActionRules([
+        {
+          id: "ar1",
+          type: "set-parameter",
+          parameterMapping: { parameterName: "x", sourceField: "y" },
+        },
+      ]);
+      const action = getState().buildClickAction();
+      expect(action?.rules).toHaveLength(1);
+    });
+  });
+});
diff --git a/app/src/stores/widget-editor-store.ts b/app/src/stores/widget-editor-store.ts
new file mode 100644
index 00000000..6d9b1810
--- /dev/null
+++ b/app/src/stores/widget-editor-store.ts
@@ -0,0 +1,402 @@
+import { create } from "zustand";
+import type {
+  DashboardWidget,
+  DashboardLayoutV2,
+  ClickAction,
+  ClickActionRule,
+  StylingRule,
+  StylingConfig,
+} from "@/lib/db/schema";
+import type { ColorScaleConfig } from "@neoboard/components/charts";
+import type { FormFieldDef } from "@/lib/form-field-def";
+import {
+  chartSupportsClickAction,
+  chartSupportsStyling,
+  getChartDefaults,
+} from "@/lib/chart-registry";
+import { migrateColorThresholds } from "@/lib/migrate-color-thresholds";
+
+// ParamUIType/DateSubType are string unions — define locally to avoid importing
+// the React component file (which pulls in @neoboard/components UI barrel).
+export type ParamUIType = "date" | "freetext" | "select";
+export type DateSubType = "single" | "range" | "relative";
+
+/** Reverse-map an internal parameterType to UI state. Duplicated from parameter-config-section to avoid UI import. */
+function reverseParamTypeMapping(internalType: string): {
+  uiType: ParamUIType;
+  dateSub: DateSubType;
+  multi: boolean;
+} {
+  switch (internalType) {
+    case "date":
+      return { uiType: "date", dateSub: "single", multi: false };
+    case "date-range":
+      return { uiType: "date", dateSub: "range", multi: false };
+    case "date-relative":
+      return { uiType: "date", dateSub: "relative", multi: false };
+    case "text":
+      return { uiType: "freetext", dateSub: "single", multi: false };
+    case "multi-select":
+      return { uiType: "select", dateSub: "single", multi: true };
+    default:
+      return { uiType: "select", dateSub: "single", multi: false };
+  }
+}
+
+// ---------------------------------------------------------------------------
+// State interface
+// ---------------------------------------------------------------------------
+
+export interface WidgetEditorState {
+  // ── Widget identity ─────────────────────────────────────────────
+  chartType: string;
+  connectionId: string;
+  query: string;
+  title: string;
+  templateId?: string;
+  templateSyncedAt?: string;
+
+  // ── Chart options ───────────────────────────────────────────────
+  chartOptions: Record<string, unknown>;
+  enableCache: boolean;
+  cacheTtlMinutes: number;
+
+  // ── Click actions ───────────────────────────────────────────────
+  clickActionEnabled: boolean;
+  clickActionType: ClickAction["type"];
+  parameterName: string;
+  sourceField: string;
+  targetPageId: string;
+  clickableColumns: string[];
+  actionRules: ClickActionRule[];
+
+  // ── Styling ─────────────────────────────────────────────────────
+  stylingEnabled: boolean;
+  stylingRules: StylingRule[];
+  colorScales: ColorScaleConfig[];
+
+  // ── Parameter widget ────────────────────────────────────────────
+  paramUIType: ParamUIType;
+  dateSub: DateSubType;
+  multiSelect: boolean;
+  paramWidgetName: string;
+
+  // ── Form widget ─────────────────────────────────────────────────
+  formFields: FormFieldDef[];
+  refreshWidgetIds: string[];
+
+  // ── Lab mode ────────────────────────────────────────────────────
+  labName: string;
+  labDescription: string;
+  labTagsInput: string;
+
+  // ── Derived / external data ──────────────────────────────────────
+  availableFields: string[];
+  parameterSuggestions: string[];
+
+  // ── UI state ────────────────────────────────────────────────────
+  dialogStep: "main" | "rules" | "styling-rules" | "templates";
+  connectorChanged: boolean;
+
+  // ── Actions ─────────────────────────────────────────────────────
+  setChartType: (t: string) => void;
+  setConnectionId: (id: string) => void;
+  setQuery: (q: string) => void;
+  setTitle: (t: string) => void;
+  setChartOptions: (
+    opts:
+      | Record<string, unknown>
+      | ((prev: Record<string, unknown>) => Record<string, unknown>),
+  ) => void;
+  setEnableCache: (v: boolean) => void;
+  setCacheTtlMinutes: (v: number) => void;
+
+  setClickActionEnabled: (v: boolean) => void;
+  setClickActionType: (v: ClickAction["type"]) => void;
+  setParameterName: (v: string) => void;
+  setSourceField: (v: string) => void;
+  setTargetPageId: (v: string) => void;
+  setClickableColumns: (v: string[]) => void;
+  setActionRules: (v: ClickActionRule[]) => void;
+
+  setStylingEnabled: (v: boolean) => void;
+  setStylingRules: (v: StylingRule[]) => void;
+  setColorScales: (v: ColorScaleConfig[]) => void;
+
+  setParamUIType: (v: ParamUIType) => void;
+  setDateSub: (v: DateSubType) => void;
+  setMultiSelect: (v: boolean) => void;
+  setParamWidgetName: (v: string) => void;
+
+  setFormFields: (v: FormFieldDef[]) => void;
+  setRefreshWidgetIds: (v: string[]) => void;
+
+  setLabName: (v: string) => void;
+  setLabDescription: (v: string) => void;
+  setLabTagsInput: (v: string) => void;
+
+  setAvailableFields: (v: string[]) => void;
+  setParameterSuggestions: (v: string[]) => void;
+  setDialogStep: (v: "main" | "rules" | "styling-rules" | "templates") => void;
+  setConnectorChanged: (v: boolean) => void;
+
+  // ── Bulk operations ─────────────────────────────────────────────
+  resetForAdd: () => void;
+  loadFromWidget: (widget: DashboardWidget) => void;
+
+  // ── Build helpers ───────────────────────────────────────────────
+  buildStylingConfig: () => StylingConfig | undefined;
+  buildClickAction: (layout?: DashboardLayoutV2) => ClickAction | undefined;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers (extracted to reduce buildClickAction cognitive complexity)
+// ---------------------------------------------------------------------------
+
+function validateActionRules(
+  rules: ClickActionRule[],
+  validPageIds: Set<string>,
+): boolean {
+  for (const rule of rules) {
+    const needsParam =
+      rule.type === "set-parameter" ||
+      rule.type === "set-parameter-and-navigate";
+    if (needsParam && !rule.parameterMapping?.parameterName?.trim())
+      return false;
+    const needsPage =
+      rule.type === "navigate-to-page" ||
+      rule.type === "set-parameter-and-navigate";
+    if (
+      needsPage &&
+      (!rule.targetPageId || !validPageIds.has(rule.targetPageId))
+    )
+      return false;
+  }
+  return true;
+}
+
+function buildLegacyClickAction(
+  s: Pick<
+    WidgetEditorState,
+    "clickActionType" | "parameterName" | "sourceField" | "targetPageId"
+  >,
+  validPageIds: Set<string>,
+  clickableColumns?: string[],
+): ClickAction | undefined {
+  const action: ClickAction = { type: s.clickActionType };
+  if (
+    s.clickActionType === "set-parameter" ||
+    s.clickActionType === "set-parameter-and-navigate"
+  ) {
+    if (!s.parameterName.trim()) return undefined;
+    action.parameterMapping = {
+      parameterName: s.parameterName,
+      sourceField: s.sourceField || s.parameterName,
+    };
+  }
+  if (
+    s.clickActionType === "navigate-to-page" ||
+    s.clickActionType === "set-parameter-and-navigate"
+  ) {
+    if (!s.targetPageId || !validPageIds.has(s.targetPageId)) return undefined;
+    action.targetPageId = s.targetPageId;
+  }
+  if (clickableColumns?.length) action.clickableColumns = clickableColumns;
+  return action;
+}
+
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
+
+function getInitialState() {
+  return {
+    chartType: "bar",
+    connectionId: "",
+    query: "",
+    title: "",
+    templateId: undefined as string | undefined,
+    templateSyncedAt: undefined as string | undefined,
+    chartOptions: getChartDefaults("bar"),
+    enableCache: true,
+    cacheTtlMinutes: 5,
+    clickActionEnabled: false,
+    clickActionType: "set-parameter" as ClickAction["type"],
+    parameterName: "",
+    sourceField: "",
+    targetPageId: "",
+    clickableColumns: [] as string[],
+    actionRules: [] as ClickActionRule[],
+    stylingEnabled: false,
+    stylingRules: [] as StylingRule[],
+    colorScales: [] as ColorScaleConfig[],
+    paramUIType: "select" as ParamUIType,
+    dateSub: "single" as DateSubType,
+    multiSelect: false,
+    paramWidgetName: "",
+    formFields: [] as FormFieldDef[],
+    refreshWidgetIds: [] as string[],
+    labName: "",
+    labDescription: "",
+    labTagsInput: "",
+    availableFields: [] as string[],
+    parameterSuggestions: [] as string[],
+    dialogStep: "main" as const,
+    connectorChanged: false,
+  };
+}
+
+export const useWidgetEditorStore = create<WidgetEditorState>((set, get) => ({
+  ...getInitialState(),
+
+  // ── Simple setters ──────────────────────────────────────────────
+  setChartType: (t) => {
+    set({ chartType: t, chartOptions: getChartDefaults(t) });
+    if (!chartSupportsClickAction(t)) set({ clickActionEnabled: false });
+    if (!chartSupportsStyling(t)) set({ stylingEnabled: false });
+  },
+  setConnectionId: (id) => set({ connectionId: id }),
+  setQuery: (q) => set({ query: q }),
+  setTitle: (t) => set({ title: t }),
+  setChartOptions: (opts) =>
+    set((s) => ({
+      chartOptions: typeof opts === "function" ? opts(s.chartOptions) : opts,
+    })),
+  setEnableCache: (v) => set({ enableCache: v }),
+  setCacheTtlMinutes: (v) => set({ cacheTtlMinutes: v }),
+
+  setClickActionEnabled: (v) => set({ clickActionEnabled: v }),
+  setClickActionType: (v) => set({ clickActionType: v }),
+  setParameterName: (v) => set({ parameterName: v }),
+  setSourceField: (v) => set({ sourceField: v }),
+  setTargetPageId: (v) => set({ targetPageId: v }),
+  setClickableColumns: (v) => set({ clickableColumns: v }),
+  setActionRules: (v) => set({ actionRules: v }),
+
+  setStylingEnabled: (v) => set({ stylingEnabled: v }),
+  setStylingRules: (v) => set({ stylingRules: v }),
+  setColorScales: (v) => set({ colorScales: v }),
+
+  setParamUIType: (v) => set({ paramUIType: v }),
+  setDateSub: (v) => set({ dateSub: v }),
+  setMultiSelect: (v) => set({ multiSelect: v }),
+  setParamWidgetName: (v) => set({ paramWidgetName: v }),
+
+  setFormFields: (v) => set({ formFields: v }),
+  setRefreshWidgetIds: (v) => set({ refreshWidgetIds: v }),
+
+  setLabName: (v) => set({ labName: v }),
+  setLabDescription: (v) => set({ labDescription: v }),
+  setLabTagsInput: (v) => set({ labTagsInput: v }),
+
+  setAvailableFields: (v) => set({ availableFields: v }),
+  setParameterSuggestions: (v) => set({ parameterSuggestions: v }),
+  setDialogStep: (v) => set({ dialogStep: v }),
+  setConnectorChanged: (v) => set({ connectorChanged: v }),
+
+  // ── Bulk operations ─────────────────────────────────────────────
+  resetForAdd: () => set(getInitialState()),
+
+  loadFromWidget: (widget) => {
+    const s = widget.settings ?? {};
+    const opts = (s.chartOptions as Record<string, unknown>) ?? {};
+    const ca = s.clickAction as ClickAction | undefined;
+    const caMapping = ca?.parameterMapping;
+    const sc = s.stylingConfig as StylingConfig | undefined;
+    const cf = s.conditionalFormatting as
+      | { colorScales?: ColorScaleConfig[] }
+      | undefined;
+
+    // Resolve styling (new format or migrated from legacy)
+    let stylingEnabled = false;
+    let stylingRules: StylingRule[] = [];
+    if (sc) {
+      stylingEnabled = sc.enabled;
+      stylingRules = sc.rules ?? [];
+    } else {
+      const legacyThresholds = opts.colorThresholds;
+      if (typeof legacyThresholds === "string" && legacyThresholds.trim()) {
+        const migrated = migrateColorThresholds(legacyThresholds);
+        stylingEnabled = !!migrated?.enabled;
+        stylingRules = migrated?.rules ?? [];
+      }
+    }
+
+    // Resolve parameter widget state
+    let paramUIType: ParamUIType = "select";
+    let dateSub: DateSubType = "single";
+    let multiSelect = false;
+    let paramWidgetName = "";
+    if (widget.chartType === "parameter-select") {
+      const paramOpts = s.chartOptions as Record<string, unknown> | undefined;
+      const internalType = (paramOpts?.parameterType as string) ?? "select";
+      const mapped = reverseParamTypeMapping(internalType);
+      paramUIType = mapped.uiType;
+      dateSub = mapped.dateSub;
+      multiSelect = mapped.multi;
+      paramWidgetName = (paramOpts?.parameterName as string) ?? "";
+    }
+
+    set({
+      chartType: widget.chartType,
+      connectionId: widget.connectionId,
+      query: widget.query,
+      title: (s.title as string) ?? "",
+      templateId: widget.templateId,
+      templateSyncedAt: widget.templateSyncedAt,
+      chartOptions:
+        Object.keys(opts).length > 0
+          ? opts
+          : getChartDefaults(widget.chartType),
+      enableCache: s.enableCache !== false,
+      cacheTtlMinutes: (s.cacheTtlMinutes as number | undefined) ?? 5,
+      clickActionEnabled: !!ca,
+      clickActionType: ca?.type ?? "set-parameter",
+      parameterName: caMapping?.parameterName ?? "",
+      sourceField: caMapping?.sourceField ?? "",
+      targetPageId: ca?.targetPageId ?? "",
+      clickableColumns: ca?.clickableColumns ?? [],
+      actionRules: ca?.rules ?? [],
+      stylingEnabled,
+      stylingRules,
+      colorScales: cf?.colorScales ?? [],
+      paramUIType,
+      dateSub,
+      multiSelect,
+      paramWidgetName,
+      formFields: (s.formFields as FormFieldDef[] | undefined) ?? [],
+      refreshWidgetIds: (opts.refreshWidgetIds as string[] | undefined) ?? [],
+      dialogStep: "main",
+      connectorChanged: false,
+    });
+  },
+
+  // ── Build helpers ───────────────────────────────────────────────
+  buildStylingConfig: () => {
+    const { stylingEnabled, chartType, stylingRules } = get();
+    if (!stylingEnabled || !chartSupportsStyling(chartType)) return undefined;
+    return { enabled: true, rules: stylingRules };
+  },
+
+  buildClickAction: (layout) => {
+    const s = get();
+    if (!s.clickActionEnabled || !chartSupportsClickAction(s.chartType))
+      return undefined;
+
+    const pageIds = new Set((layout?.pages ?? []).map((p) => p.id));
+    const cols = s.clickableColumns.length > 0 ? s.clickableColumns : undefined;
+
+    // Advanced rules mode
+    if (s.actionRules.length > 0) {
+      if (!validateActionRules(s.actionRules, pageIds)) return undefined;
+      return {
+        type: s.actionRules[0].type,
+        rules: s.actionRules,
+        clickableColumns: cols,
+      };
+    }
+
+    // Legacy single-rule mode
+    return buildLegacyClickAction(s, pageIds, cols);
+  },
+}));
diff --git a/component/src/charts/index.ts b/component/src/charts/index.ts
index f6766702..f83aa740 100644
--- a/component/src/charts/index.ts
+++ b/component/src/charts/index.ts
@@ -1,4 +1,9 @@
-export { BaseChart, CHART_COLORS, resolveChartColors, useDarkMode } from "./base-chart";
+export {
+  BaseChart,
+  CHART_COLORS,
+  resolveChartColors,
+  useDarkMode,
+} from "./base-chart";
 export {
   THEME_LIGHT,
   THEME_DARK,
@@ -9,8 +14,20 @@ export { COLOR_PALETTES, getPaletteColors } from "./palettes";
 export type { ColorPalette } from "./palettes";
 export type { ColorThreshold } from "./color-threshold";
 export { parseColorThresholds, resolveThresholdColor } from "./color-threshold";
-export type { StylingRule, StylingConfig, StylingOperator, ColorScaleConfig } from "./styling-rule";
-export { resolveStylingRuleColor, interpolateColor } from "./styling-rule";
+export type {
+  StylingRule,
+  StylingConfig,
+  StylingOperator,
+  ColorScaleConfig,
+  OperatorDef,
+  OperatorGroup,
+} from "./styling-rule";
+export {
+  resolveStylingRuleColor,
+  interpolateColor,
+  OPERATOR_REGISTRY,
+  getOperatorGroups,
+} from "./styling-rule";
 export { LineChart } from "./line-chart";
 export type { LineChartProps } from "./line-chart";
 export { BarChart } from "./bar-chart";
@@ -30,13 +47,23 @@ export { GaugeChart } from "./gauge-chart";
 export type { GaugeChartProps, GaugeDataPoint } from "./gauge-chart";
 
 export { SankeyChart } from "./sankey-chart";
-export type { SankeyChartProps, SankeyNode, SankeyLink, SankeyChartData } from "./sankey-chart";
+export type {
+  SankeyChartProps,
+  SankeyNode,
+  SankeyLink,
+  SankeyChartData,
+} from "./sankey-chart";
 
 export { SunburstChart } from "./sunburst-chart";
 export type { SunburstChartProps, SunburstDataItem } from "./sunburst-chart";
 
 export { RadarChart } from "./radar-chart";
-export type { RadarChartProps, RadarIndicator, RadarSeries, RadarChartData } from "./radar-chart";
+export type {
+  RadarChartProps,
+  RadarIndicator,
+  RadarSeries,
+  RadarChartData,
+} from "./radar-chart";
 
 export { TreemapChart } from "./treemap-chart";
 export type { TreemapChartProps, TreemapDataItem } from "./treemap-chart";
diff --git a/component/src/charts/styling-rule.ts b/component/src/charts/styling-rule.ts
index 03356643..3003b52a 100644
--- a/component/src/charts/styling-rule.ts
+++ b/component/src/charts/styling-rule.ts
@@ -1,8 +1,17 @@
 export type StylingOperator =
-  | "<=" | ">=" | "<" | ">" | "==" | "!="
+  | "<="
+  | ">="
+  | "<"
+  | ">"
+  | "=="
+  | "!="
   | "between"
-  | "contains" | "not_contains" | "starts_with" | "ends_with"
-  | "is_null" | "is_not_null";
+  | "contains"
+  | "not_contains"
+  | "starts_with"
+  | "ends_with"
+  | "is_null"
+  | "is_not_null";
 
 export interface StylingRule {
   id: string;
@@ -36,19 +45,80 @@ export interface ColorScaleConfig {
   maxColor: string;
 }
 
-const NUMERIC_OPS = new Set(["<=", ">=", "<", ">", "==", "!="]);
-const STRING_OPS = new Set(["contains", "not_contains", "starts_with", "ends_with"]);
-const NULL_OPS = new Set(["is_null", "is_not_null"]);
+// ---------------------------------------------------------------------------
+// Operator registry — single source of truth for all styling operators.
+// Consumed by both the evaluation engine and the editor UI.
+// ---------------------------------------------------------------------------
+
+export type OperatorGroup = "Numeric" | "Text" | "Null";
+
+export interface OperatorDef {
+  value: StylingOperator;
+  label: string;
+  group: OperatorGroup;
+}
+
+export const OPERATOR_REGISTRY: OperatorDef[] = [
+  // Numeric
+  { value: "<=", label: "<= (less or equal)", group: "Numeric" },
+  { value: ">=", label: ">= (greater or equal)", group: "Numeric" },
+  { value: "<", label: "< (less than)", group: "Numeric" },
+  { value: ">", label: "> (greater than)", group: "Numeric" },
+  { value: "==", label: "== (equals)", group: "Numeric" },
+  { value: "!=", label: "!= (not equal)", group: "Numeric" },
+  { value: "between", label: "between", group: "Numeric" },
+  // Text
+  { value: "contains", label: "contains", group: "Text" },
+  { value: "not_contains", label: "not contains", group: "Text" },
+  { value: "starts_with", label: "starts with", group: "Text" },
+  { value: "ends_with", label: "ends with", group: "Text" },
+  // Null
+  { value: "is_null", label: "is null", group: "Null" },
+  { value: "is_not_null", label: "is not null", group: "Null" },
+];
+
+/** Grouped operators for the editor UI dropdown. */
+export function getOperatorGroups(): {
+  label: string;
+  operators: OperatorDef[];
+}[] {
+  const groups = new Map<string, OperatorDef[]>();
+  for (const op of OPERATOR_REGISTRY) {
+    if (!groups.has(op.group)) groups.set(op.group, []);
+    groups.get(op.group)!.push(op);
+  }
+  return Array.from(groups.entries()).map(([label, operators]) => ({
+    label,
+    operators,
+  }));
+}
+
+const NUMERIC_OPS = new Set(
+  OPERATOR_REGISTRY.filter((o) => o.group === "Numeric").map((o) => o.value),
+);
+const STRING_OPS = new Set(
+  OPERATOR_REGISTRY.filter((o) => o.group === "Text").map((o) => o.value),
+);
+const NULL_OPS = new Set(
+  OPERATOR_REGISTRY.filter((o) => o.group === "Null").map((o) => o.value),
+);
 
 function evaluateNumeric(op: string, left: number, right: number): boolean {
   switch (op) {
-    case "<=": return left <= right;
-    case ">=": return left >= right;
-    case "<":  return left < right;
-    case ">":  return left > right;
-    case "==": return left === right;
-    case "!=": return left !== right;
-    default:   return false;
+    case "<=":
+      return left <= right;
+    case ">=":
+      return left >= right;
+    case "<":
+      return left < right;
+    case ">":
+      return left > right;
+    case "==":
+      return left === right;
+    case "!=":
+      return left !== right;
+    default:
+      return false;
   }
 }
 
@@ -56,13 +126,20 @@ function evaluateString(op: string, left: string, right: string): boolean {
   const l = left.toLowerCase();
   const r = right.toLowerCase();
   switch (op) {
-    case "contains":     return l.includes(r);
-    case "not_contains": return !l.includes(r);
-    case "starts_with":  return l.startsWith(r);
-    case "ends_with":    return l.endsWith(r);
-    case "==":           return l === r;
-    case "!=":           return l !== r;
-    default:             return false;
+    case "contains":
+      return l.includes(r);
+    case "not_contains":
+      return !l.includes(r);
+    case "starts_with":
+      return l.startsWith(r);
+    case "ends_with":
+      return l.endsWith(r);
+    case "==":
+      return l === r;
+    case "!=":
+      return l !== r;
+    default:
+      return false;
   }
 }
 
@@ -134,7 +211,11 @@ export function resolveStylingRuleColor(
     // String operators: coerce both to string
     if (STRING_OPS.has(op)) {
       if (cellValue == null) continue;
-      const result = evaluateString(op, String(cellValue), String(compareValue));
+      const result = evaluateString(
+        op,
+        String(cellValue),
+        String(compareValue),
+      );
       if (result) return rule.color;
       continue;
     }
@@ -151,7 +232,8 @@ export function resolveStylingRuleColor(
 
       // For == and !=, fall back to string comparison when not both numeric
       if ((op === "==" || op === "!=") && cellValue != null) {
-        if (evaluateString(op, String(cellValue), String(compareValue))) return rule.color;
+        if (evaluateString(op, String(cellValue), String(compareValue)))
+          return rule.color;
       }
       continue;
     }
@@ -198,13 +280,10 @@ export function interpolateColor(
   minColor: string,
   maxColor: string,
 ): string {
-  if (min === max) return minColor.length === 4 ? toHex(...parseHex(minColor)) : minColor;
+  if (min === max)
+    return minColor.length === 4 ? toHex(...parseHex(minColor)) : minColor;
   const t = Math.max(0, Math.min(1, (value - min) / (max - min)));
   const [r1, g1, b1] = parseHex(minColor);
   const [r2, g2, b2] = parseHex(maxColor);
-  return toHex(
-    r1 + t * (r2 - r1),
-    g1 + t * (g2 - g1),
-    b1 + t * (b2 - b1),
-  );
+  return toHex(r1 + t * (r2 - r1), g1 + t * (g2 - g1), b1 + t * (b2 - b1));
 }
diff --git a/component/src/components/composed/query-editor.tsx b/component/src/components/composed/query-editor.tsx
index b9769246..e37dfb11 100644
--- a/component/src/components/composed/query-editor.tsx
+++ b/component/src/components/composed/query-editor.tsx
@@ -104,7 +104,12 @@ async function buildExtensions(
   return [
     historyExt(),
     closeBrackets(),
-    keymap.of([...defaultKeymap, ...historyKeymap, ...completionKeymap, ...closeBracketsKeymap]),
+    keymap.of([
+      ...defaultKeymap,
+      ...historyKeymap,
+      ...completionKeymap,
+      ...closeBracketsKeymap,
+    ]),
     runKeymap,
     langCompartmentExt,
     autocompletion(),
@@ -218,15 +223,18 @@ function QueryEditor({
 
       if (typeof window === "undefined" || !containerRef.current) return;
 
-      // Remove leftover DOM nodes and clear the ready signal
+      // Remove leftover DOM nodes and clear the ready signal + stale E2E handle
       delete containerRef.current.dataset.editorReady;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      delete (containerRef.current as any).__cmView;
       while (containerRef.current.firstChild) {
         containerRef.current.removeChild(containerRef.current.firstChild);
       }
 
-      const [{ EditorView }, { EditorState, Compartment }] = await Promise.all(
-        [import("@codemirror/view"), import("@codemirror/state")],
-      );
+      const [{ EditorView }, { EditorState, Compartment }] = await Promise.all([
+        import("@codemirror/view"),
+        import("@codemirror/state"),
+      ]);
 
       if (abortSignal.aborted) return;
 
@@ -288,6 +296,10 @@ function QueryEditor({
       }
 
       containerRef.current?.setAttribute("data-editor-ready", "true");
+      // Expose the EditorView on the DOM element for E2E test access.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (containerRef.current)
+        (containerRef.current as any).__cmView = viewRef.current;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [placeholder],
diff --git a/connection/__tests__/connector-error.test.ts b/connection/__tests__/connector-error.test.ts
new file mode 100644
index 00000000..702f7d6c
--- /dev/null
+++ b/connection/__tests__/connector-error.test.ts
@@ -0,0 +1,116 @@
+import {
+  ConnectorError,
+  ConnectorErrorType,
+  detectNeo4jErrorType,
+  detectPostgresErrorType,
+  wrapError,
+} from "../src/generalized/ConnectorError";
+
+describe("ConnectorError", () => {
+  it("creates an error with type and original", () => {
+    const original = new Error("timeout");
+    const err = new ConnectorError(
+      "query timed out",
+      ConnectorErrorType.TIMEOUT,
+      original,
+    );
+    expect(err.message).toBe("query timed out");
+    expect(err.type).toBe(ConnectorErrorType.TIMEOUT);
+    expect(err.originalError).toBe(original);
+    expect(err.name).toBe("ConnectorError");
+    expect(err instanceof Error).toBe(true);
+  });
+
+  it("defaults to UNKNOWN type", () => {
+    const err = new ConnectorError("something");
+    expect(err.type).toBe(ConnectorErrorType.UNKNOWN);
+  });
+});
+
+describe("detectNeo4jErrorType", () => {
+  it("detects ServiceUnavailable as CONNECTION", () => {
+    expect(
+      detectNeo4jErrorType({ code: "ServiceUnavailable", message: "" }),
+    ).toBe(ConnectorErrorType.CONNECTION);
+  });
+
+  it("detects authentication errors", () => {
+    expect(
+      detectNeo4jErrorType({ code: "Neo.ClientError.Security.Unauthorized" }),
+    ).toBe(ConnectorErrorType.AUTHENTICATION);
+  });
+
+  it("detects timeout from transaction terminated message", () => {
+    expect(
+      detectNeo4jErrorType({
+        message: "The transaction has been terminated. Retry your query",
+      }),
+    ).toBe(ConnectorErrorType.TIMEOUT);
+  });
+
+  it("falls back to QUERY for other errors", () => {
+    expect(detectNeo4jErrorType({ message: "syntax error" })).toBe(
+      ConnectorErrorType.QUERY,
+    );
+  });
+
+  it("returns UNKNOWN for non-objects", () => {
+    expect(detectNeo4jErrorType(null)).toBe(ConnectorErrorType.UNKNOWN);
+    expect(detectNeo4jErrorType("string")).toBe(ConnectorErrorType.UNKNOWN);
+  });
+});
+
+describe("detectPostgresErrorType", () => {
+  it("detects timeout from error code 57014", () => {
+    expect(detectPostgresErrorType({ code: "57014" })).toBe(
+      ConnectorErrorType.TIMEOUT,
+    );
+  });
+
+  it("detects authentication from code 28P01", () => {
+    expect(detectPostgresErrorType({ code: "28P01" })).toBe(
+      ConnectorErrorType.AUTHENTICATION,
+    );
+  });
+
+  it("detects 3D000 (invalid database) as CONNECTION", () => {
+    expect(detectPostgresErrorType({ code: "3D000" })).toBe(
+      ConnectorErrorType.CONNECTION,
+    );
+  });
+
+  it("detects connection error from code 08001", () => {
+    expect(detectPostgresErrorType({ code: "08001" })).toBe(
+      ConnectorErrorType.CONNECTION,
+    );
+  });
+
+  it("detects read-only violation", () => {
+    expect(detectPostgresErrorType({ code: "25006" })).toBe(
+      ConnectorErrorType.READ_ONLY_VIOLATION,
+    );
+  });
+
+  it("falls back to QUERY for other codes", () => {
+    expect(
+      detectPostgresErrorType({ code: "42601", message: "syntax error" }),
+    ).toBe(ConnectorErrorType.QUERY);
+  });
+});
+
+describe("wrapError", () => {
+  it("wraps Neo4j error correctly", () => {
+    const raw = { code: "ServiceUnavailable", message: "Failed to connect" };
+    const wrapped = wrapError(raw, "neo4j");
+    expect(wrapped).toBeInstanceOf(ConnectorError);
+    expect(wrapped.type).toBe(ConnectorErrorType.CONNECTION);
+    expect(wrapped.originalError).toBe(raw);
+  });
+
+  it("wraps PostgreSQL error correctly", () => {
+    const raw = new Error("canceling statement due to statement timeout");
+    (raw as unknown as { code: string }).code = "57014";
+    const wrapped = wrapError(raw, "postgresql");
+    expect(wrapped.type).toBe(ConnectorErrorType.TIMEOUT);
+  });
+});
diff --git a/connection/src/generalized/ConnectorError.ts b/connection/src/generalized/ConnectorError.ts
new file mode 100644
index 00000000..b3488d76
--- /dev/null
+++ b/connection/src/generalized/ConnectorError.ts
@@ -0,0 +1,125 @@
+/**
+ * Standardized error types across all database connectors.
+ * Consumers catch ConnectorError instead of database-specific exceptions.
+ */
+export enum ConnectorErrorType {
+  TIMEOUT = "TIMEOUT",
+  AUTHENTICATION = "AUTHENTICATION",
+  CONNECTION = "CONNECTION",
+  READ_ONLY_VIOLATION = "READ_ONLY_VIOLATION",
+  QUERY = "QUERY",
+  UNKNOWN = "UNKNOWN",
+}
+
+export class ConnectorError extends Error {
+  public readonly type: ConnectorErrorType;
+  public readonly originalError?: unknown;
+
+  constructor(
+    message: string,
+    type: ConnectorErrorType = ConnectorErrorType.UNKNOWN,
+    originalError?: unknown,
+  ) {
+    super(message);
+    this.name = "ConnectorError";
+    this.type = type;
+    this.originalError = originalError;
+  }
+}
+
+/**
+ * Detect the error type from a Neo4j error.
+ */
+export function detectNeo4jErrorType(err: unknown): ConnectorErrorType {
+  if (!err || typeof err !== "object") return ConnectorErrorType.UNKNOWN;
+  const e = err as { code?: string; message?: string };
+  const msg = e.message ?? "";
+  const code = e.code ?? "";
+
+  if (code === "ServiceUnavailable" || msg.includes("Failed to connect")) {
+    return ConnectorErrorType.CONNECTION;
+  }
+  if (
+    code === "Neo.ClientError.Security.Unauthorized" ||
+    msg.includes("authentication")
+  ) {
+    return ConnectorErrorType.AUTHENTICATION;
+  }
+  if (
+    msg.startsWith("The transaction has been terminated") ||
+    msg.includes("transaction timeout") ||
+    msg.includes("has been terminated. Retry")
+  ) {
+    return ConnectorErrorType.TIMEOUT;
+  }
+  return ConnectorErrorType.QUERY;
+}
+
+/**
+ * Detect the error type from a PostgreSQL error.
+ */
+export function detectPostgresErrorType(err: unknown): ConnectorErrorType {
+  if (!err || typeof err !== "object") return ConnectorErrorType.UNKNOWN;
+  const e = err as { code?: string; message?: string };
+  const code = e.code ?? "";
+  const msg = (e.message ?? "").toLowerCase();
+
+  // Timeout errors
+  if (
+    code === "57014" ||
+    code === "57P01" ||
+    msg.includes("timeout") ||
+    msg.includes("canceling statement")
+  ) {
+    return ConnectorErrorType.TIMEOUT;
+  }
+  // Authentication errors
+  if (["28P01", "28000", "28001"].includes(code)) {
+    return ConnectorErrorType.AUTHENTICATION;
+  }
+  // 3D000 = invalid_catalog_name (missing database) — connection issue, not auth
+  if (code === "3D000") {
+    return ConnectorErrorType.CONNECTION;
+  }
+  // Connection errors
+  if (
+    code === "08001" ||
+    code === "08003" ||
+    code === "08006" ||
+    msg.includes("connect")
+  ) {
+    return ConnectorErrorType.CONNECTION;
+  }
+  // Read-only violation
+  if (code === "25006" || msg.includes("read-only")) {
+    return ConnectorErrorType.READ_ONLY_VIOLATION;
+  }
+  return ConnectorErrorType.QUERY;
+}
+
+/**
+ * Wrap a raw database error into a ConnectorError with detected type.
+ */
+export function wrapError(
+  err: unknown,
+  dbType: "neo4j" | "postgresql",
+): ConnectorError {
+  const type =
+    dbType === "neo4j"
+      ? detectNeo4jErrorType(err)
+      : detectPostgresErrorType(err);
+  let message: string;
+  if (err instanceof Error) {
+    message = err.message;
+  } else if (
+    typeof err === "object" &&
+    err !== null &&
+    "message" in err &&
+    typeof (err as { message?: unknown }).message === "string"
+  ) {
+    message = (err as { message: string }).message;
+  } else {
+    message = String(err);
+  }
+  return new ConnectorError(message, type, err);
+}