@inkindcards/semantic-layer 2.3.0 → 2.4.0

package/dist/components.js

@@ -809,6 +809,7 @@ function InspectableRegistry({ children }) {
   const [entries, setEntries] = useState(/* @__PURE__ */ new Map());
   const [inspectActive, setInspectActive] = useState(false);
   const [selectedId, setSelectedId] = useState(null);
+  const [modalTab, setModalTab] = useState(null);
   const register = useCallback((entry) => {
     setEntries((prev) => {
       const next = new Map(prev);
@@ -831,7 +832,9 @@ function InspectableRegistry({ children }) {
     inspectActive,
     setInspectActive,
     selectedId,
-    setSelectedId
+    setSelectedId,
+    modalTab,
+    setModalTab
   };
   return /* @__PURE__ */ jsx(InspectableRegistryContext.Provider, { value, children });
 }
@@ -1076,6 +1079,229 @@ function generateMigrationPrompt(config) {
   );
   return parts.join("\n");
 }
+
+// src/components/report-prompt-generator.ts
+var PALETTE = [
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#ef4444",
+  "#8b5cf6",
+  "#ec4899",
+  "#06b6d4",
+  "#84cc16",
+  "#f97316",
+  "#6366f1"
+];
+function generateReportPrompt(config) {
+  const { dashboardTitle, layout, widgets, sharedFilters } = config;
+  if (widgets.length === 0) {
+    return `Create a new dashboard page called "${dashboardTitle}". Use @inkindcards/semantic-layer to connect to live data. Start by adding a DataCatalog so the user can browse available metrics and dimensions.`;
+  }
+  const parts = [];
+  parts.push(`Create a dashboard page called "${dashboardTitle}" using the @inkindcards/semantic-layer SDK to query live data from the dbt Semantic Layer.`);
+  parts.push("");
+  parts.push("## Setup");
+  parts.push("");
+  parts.push("Install dependencies if not already present:");
+  parts.push("  npm install @inkindcards/semantic-layer recharts");
+  parts.push("");
+  parts.push("Imports needed:");
+  parts.push("```tsx");
+  parts.push(`import { useSemanticQuery } from "@inkindcards/semantic-layer/react";`);
+  const chartTypes = new Set(widgets.map((w) => w.type));
+  const rechartsImports = ["ResponsiveContainer", "Tooltip", "Legend"];
+  if (chartTypes.has("line")) rechartsImports.push("LineChart", "Line", "XAxis", "YAxis", "CartesianGrid");
+  if (chartTypes.has("bar")) rechartsImports.push("BarChart", "Bar", "XAxis", "YAxis", "CartesianGrid");
+  if (chartTypes.has("area")) rechartsImports.push("AreaChart", "Area", "XAxis", "YAxis", "CartesianGrid");
+  if (chartTypes.has("pie")) rechartsImports.push("PieChart", "Pie", "Cell");
+  const unique = [...new Set(rechartsImports)];
+  if (unique.length > 3) {
+    parts.push(`import { ${unique.join(", ")} } from "recharts";`);
+  }
+  parts.push("```");
+  parts.push("");
+  if (sharedFilters.length > 0) {
+    parts.push("## Shared Filters");
+    parts.push("");
+    parts.push("Create state variables for cross-widget filtering. Render a filter bar at the top of the dashboard with a select/dropdown for each filter. All useSemanticQuery calls below should include the `filters` object so every widget responds to filter changes.");
+    parts.push("");
+    parts.push("```tsx");
+    for (const f of sharedFilters) {
+      parts.push(`const [filter_${sanitize(f.dimension.name)}, setFilter_${sanitize(f.dimension.name)}] = useState<string[]>([]);`);
+    }
+    parts.push("");
+    parts.push("const filters: Record<string, string[]> = {");
+    for (const f of sharedFilters) {
+      parts.push(`  "${f.dimension.name}": filter_${sanitize(f.dimension.name)},`);
+    }
+    parts.push("};");
+    parts.push("```");
+    parts.push("");
+    parts.push("For each filter dropdown, query the distinct values of the dimension using useSemanticQuery with that dimension as a groupBy and any single metric, then populate the dropdown options from the returned rows.");
+    parts.push("");
+  }
+  parts.push("## Layout");
+  parts.push("");
+  parts.push(layoutInstructions(layout, widgets));
+  parts.push("");
+  parts.push("## Color Palette");
+  parts.push("");
+  parts.push(`Use this consistent color palette for all charts: ${PALETTE.slice(0, 6).map((c) => `\`${c}\``).join(", ")}. Assign colors to metrics in order so the same metric has the same color everywhere.`);
+  parts.push("");
+  parts.push("## Widgets");
+  parts.push("");
+  for (let i = 0; i < widgets.length; i++) {
+    const w = widgets[i];
+    parts.push(`### ${i + 1}. ${w.title} (${widgetLabel(w.type)})`);
+    parts.push("");
+    parts.push(widgetPrompt(w, sharedFilters.length > 0));
+    parts.push("");
+  }
+  parts.push("## Styling");
+  parts.push("");
+  parts.push("- Use a clean, modern design with rounded corners (border-radius: 12px) and subtle shadows on each card.");
+  parts.push("- Background: white cards on a light gray page (#f9fafb).");
+  parts.push("- Use system-ui / -apple-system font stack, 14px base size.");
+  parts.push("- Each widget should be wrapped in a card with a title header, padding 20px, and a subtle 1px border (#e5e7eb).");
+  parts.push("- Show a shimmer/skeleton loading state while isLoading is true.");
+  parts.push("- Show a styled error banner if error is not null.");
+  parts.push("- Format numbers with Intl.NumberFormat: use commas for large numbers, currency format for revenue/dollar metrics, percentage format for rate metrics.");
+  parts.push("- Charts should fill their container width using ResponsiveContainer with height 300px.");
+  parts.push("- On mobile (< 768px), stack everything in a single column.");
+  parts.push("");
+  return parts.join("\n");
+}
+function widgetPrompt(w, hasFilters, index) {
+  const lines = [];
+  const metricsArr = w.metrics.map((m) => `'${m.name}'`).join(", ");
+  const groupByArr = w.groupBy.map((d) => `'${d.name}'`).join(", ");
+  lines.push("Query:");
+  lines.push("```tsx");
+  lines.push(`const { data, isLoading, error } = useSemanticQuery({`);
+  if (w.metrics.length > 0) lines.push(`  metrics: [${metricsArr}],`);
+  if (w.groupBy.length > 0) lines.push(`  groupBy: [${groupByArr}],`);
+  if (w.grain) lines.push(`  grain: '${w.grain}',`);
+  if (hasFilters) lines.push(`  filters,`);
+  lines.push(`});`);
+  lines.push("```");
+  lines.push("");
+  switch (w.type) {
+    case "line":
+    case "area": {
+      const ChartTag = w.type === "line" ? "LineChart" : "AreaChart";
+      const SeriesTag = w.type === "line" ? "Line" : "Area";
+      const xField = w.groupBy[0];
+      lines.push(`Render a ${ChartTag} inside a ResponsiveContainer (height 300).`);
+      if (xField) lines.push(`X-axis: "${xField.name}" (label: "${xField.displayName}").`);
+      lines.push(`Add a ${SeriesTag} for each metric:`);
+      for (let i = 0; i < w.metrics.length; i++) {
+        const m = w.metrics[i];
+        lines.push(`  - dataKey="${m.name}" name="${m.displayName}" stroke="${PALETTE[i % PALETTE.length]}"${w.type === "area" ? ` fill="${PALETTE[i % PALETTE.length]}" fillOpacity={0.15}` : ""}`);
+      }
+      lines.push("Include CartesianGrid (strokeDasharray='3 3'), Tooltip, and Legend.");
+      break;
+    }
+    case "bar": {
+      const xField = w.groupBy[0];
+      lines.push("Render a BarChart inside a ResponsiveContainer (height 300).");
+      if (xField) lines.push(`X-axis: "${xField.name}" (label: "${xField.displayName}").`);
+      lines.push("Add a Bar for each metric:");
+      for (let i = 0; i < w.metrics.length; i++) {
+        const m = w.metrics[i];
+        lines.push(`  - dataKey="${m.name}" name="${m.displayName}" fill="${PALETTE[i % PALETTE.length]}" radius={[4,4,0,0]}`);
+      }
+      lines.push("Include CartesianGrid (strokeDasharray='3 3'), Tooltip, and Legend.");
+      break;
+    }
+    case "pie": {
+      const m = w.metrics[0];
+      const dim = w.groupBy[0];
+      lines.push("Render a PieChart inside a ResponsiveContainer (height 300).");
+      if (m && dim) {
+        lines.push(`Pie dataKey="${m.name}" nameKey="${dim.name}". Label each slice with the dimension value and percentage.`);
+      }
+      lines.push(`Use Cell components to apply these fill colors in order: ${PALETTE.slice(0, 6).map((c) => `"${c}"`).join(", ")}.`);
+      lines.push("Include Tooltip and Legend.");
+      break;
+    }
+    case "table": {
+      lines.push("Render a styled data table with:");
+      lines.push("  - Sticky header row with a light gray background.");
+      lines.push("  - Sortable columns (click header to toggle asc/desc).");
+      lines.push("  - Zebra-striped rows for readability.");
+      const allFields = [...w.groupBy, ...w.metrics];
+      if (allFields.length > 0) {
+        lines.push("Columns:");
+        for (const f of allFields) {
+          const align = f.type === "metric" ? "right-aligned, number-formatted" : "left-aligned";
+          lines.push(`  - "${f.displayName}" (key: "${f.name}") \u2014 ${align}`);
+        }
+      }
+      break;
+    }
+    case "kpi": {
+      const m = w.metrics[0];
+      lines.push("Render a KPI card showing:");
+      if (m) {
+        lines.push(`  - Large formatted number for "${m.displayName}" (key: "${m.name}").`);
+        lines.push(`  - Use Intl.NumberFormat with appropriate style (currency for revenue/dollar fields, decimal otherwise).`);
+        lines.push(`  - Subtitle label: "${m.displayName}".`);
+      }
+      if (w.comparisonMetric) {
+        lines.push(`  - Below the main number, show a comparison badge for "${w.comparisonMetric.displayName}" with a green up-arrow or red down-arrow indicating positive/negative change.`);
+      }
+      if (w.grain && w.groupBy.length > 0) {
+        lines.push(`  - Query with grain '${w.grain}' and take the most recent period's value. Optionally show a sparkline of the trend.`);
+      } else {
+        lines.push("  - Query without groupBy to get the aggregate total.");
+      }
+      break;
+    }
+  }
+  return lines.join("\n");
+}
+function layoutInstructions(layout, widgets) {
+  const kpiCount = widgets.filter((w) => w.type === "kpi").length;
+  const chartCount = widgets.filter((w) => w.type !== "kpi" && w.type !== "table").length;
+  const tableCount = widgets.filter((w) => w.type === "table").length;
+  switch (layout) {
+    case "single":
+      return "Stack all widgets in a single column, full width. Use a flex column with gap 24px.";
+    case "two-column":
+      return "Use a CSS grid with `grid-template-columns: repeat(2, 1fr)` and gap 24px. KPI cards can be smaller \u2014 place up to 3 per row using `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))` in a sub-grid. Tables span full width (`grid-column: 1 / -1`).";
+    case "dashboard":
+      return [
+        "Use a dashboard layout with three zones:",
+        kpiCount > 0 ? `  1. **KPI row** at the top: ${kpiCount} KPI card(s) in a horizontal flex row with gap 16px, equal width.` : "  1. **KPI row**: (none configured \u2014 skip this zone).",
+        chartCount > 0 ? `  2. **Charts zone**: ${chartCount} chart(s) in a 2-column CSS grid (gap 24px). If only 1 chart, span full width.` : "  2. **Charts zone**: (none configured).",
+        tableCount > 0 ? `  3. **Table zone** at the bottom: full-width data table(s), stacked.` : "  3. **Table zone**: (none configured)."
+      ].join("\n");
+  }
+}
+function widgetLabel(type) {
+  const labels = {
+    line: "Line Chart",
+    bar: "Bar Chart",
+    area: "Area Chart",
+    pie: "Pie / Donut Chart",
+    table: "Data Table",
+    kpi: "KPI Card"
+  };
+  return labels[type];
+}
+function sanitize(name) {
+  return name.replace(/[^a-zA-Z0-9_]/g, "_");
+}
+var LOVABLE_CHAR_LIMIT = 5e4;
+function canOpenInLovable(prompt) {
+  return prompt.length <= LOVABLE_CHAR_LIMIT;
+}
+function openInLovable(prompt) {
+  const encoded = encodeURIComponent(prompt);
+  const url = `https://lovable.dev/?autosubmit=true#prompt=${encoded}`;
+  window.open(url, "_blank", "noopener");
+}
 function DataInspector({ children }) {
   return /* @__PURE__ */ jsxs(InspectableRegistry, { children: [
     /* @__PURE__ */ jsx(InspectorOverlay, {}),
@@ -1085,7 +1311,15 @@ function DataInspector({ children }) {
 function InspectorOverlay() {
   const registry = useContext(InspectableRegistryContext);
   if (!registry) return null;
-  const { inspectActive, setInspectActive, selectedId, setSelectedId, entries } = registry;
+  const {
+    inspectActive,
+    setInspectActive,
+    selectedId,
+    setSelectedId,
+    entries,
+    modalTab,
+    setModalTab
+  } = registry;
   useEffect(() => {
     function handleKeyDown(e) {
       if (e.ctrlKey && e.shiftKey && e.key === "I") {
@@ -1096,38 +1330,60 @@ function InspectorOverlay() {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [inspectActive, setInspectActive]);
+  useEffect(() => {
+    if (selectedId) setModalTab("migrate");
+  }, [selectedId, setModalTab]);
   const selectedEntry = selectedId ? entries.get(selectedId) ?? null : null;
+  const handleClose = useCallback(() => {
+    setModalTab(null);
+    setSelectedId(null);
+  }, [setModalTab, setSelectedId]);
+  const handleToggle = useCallback(() => {
+    if (modalTab) {
+      handleClose();
+      setInspectActive(false);
+    } else {
+      setModalTab("build");
+      setInspectActive(true);
+    }
+  }, [modalTab, handleClose, setModalTab, setInspectActive]);
+  const handleTabChange = useCallback((tab) => {
+    setModalTab(tab);
+    if (tab === "build") setSelectedId(null);
+  }, [setModalTab, setSelectedId]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       ToggleButton,
       {
         active: inspectActive,
+        modalOpen: modalTab !== null,
         count: entries.size,
-        onToggle: () => {
-          setInspectActive(!inspectActive);
-          if (inspectActive) setSelectedId(null);
-        }
+        onToggle: handleToggle
       }
     ),
-    selectedEntry && /* @__PURE__ */ jsx(
-      InspectorModal,
+    modalTab && /* @__PURE__ */ jsx(
+      UnifiedModal,
       {
+        tab: modalTab,
+        onTabChange: handleTabChange,
         entry: selectedEntry,
-        onClose: () => setSelectedId(null)
+        onClose: handleClose
       }
     )
   ] });
 }
 function ToggleButton({
   active,
+  modalOpen,
   count,
   onToggle
 }) {
+  const lit = active || modalOpen;
   return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: onToggle,
-      title: active ? "Exit inspect mode (Ctrl+Shift+I)" : "Enter inspect mode (Ctrl+Shift+I)",
+      title: lit ? "Close data tools (Ctrl+Shift+I)" : "Open data tools (Ctrl+Shift+I)",
       style: {
         position: "fixed",
         bottom: 20,
@@ -1140,9 +1396,9 @@ function ToggleButton({
         fontSize: 13,
         fontWeight: 600,
         fontFamily: "system-ui, -apple-system, sans-serif",
-        color: active ? "#fff" : "#374151",
-        backgroundColor: active ? "#3b82f6" : "#fff",
-        border: `1px solid ${active ? "#2563eb" : "#d1d5db"}`,
+        color: lit ? "#fff" : "#374151",
+        backgroundColor: lit ? "#3b82f6" : "#fff",
+        border: `1px solid ${lit ? "#2563eb" : "#d1d5db"}`,
         borderRadius: 999,
         cursor: "pointer",
         boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
@@ -1153,8 +1409,8 @@ function ToggleButton({
           /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
           /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
         ] }),
-        active ? "Inspecting" : "Inspect Data",
-        /* @__PURE__ */ jsx(
+        lit ? "Active" : "Data Tools",
+        count > 0 && /* @__PURE__ */ jsx(
           "span",
           {
             style: {
@@ -1166,8 +1422,8 @@ function ToggleButton({
               fontSize: 11,
               fontWeight: 700,
               borderRadius: 999,
-              backgroundColor: active ? "rgba(255,255,255,0.25)" : "#e5e7eb",
-              color: active ? "#fff" : "#6b7280",
+              backgroundColor: lit ? "rgba(255,255,255,0.25)" : "#e5e7eb",
+              color: lit ? "#fff" : "#6b7280",
               padding: "0 5px"
             },
             children: count
@@ -1177,11 +1433,66 @@ function ToggleButton({
     }
   );
 }
-function InspectorModal({
+function UnifiedModal({
+  tab,
+  onTabChange,
   entry,
   onClose
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { onClick: onClose, style: backdropStyle }),
+    /* @__PURE__ */ jsxs("div", { style: modalStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: modalHeaderStyle, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 0 }, children: [
+          /* @__PURE__ */ jsx(TabButton, { label: "Migrate", active: tab === "migrate", onClick: () => onTabChange("migrate") }),
+          /* @__PURE__ */ jsx(TabButton, { label: "Build", active: tab === "build", onClick: () => onTabChange("build") })
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: onClose, style: closeBtnStyle, children: "\xD7" })
+      ] }),
+      tab === "migrate" ? /* @__PURE__ */ jsx(MigrateTab, { entry, onClose }) : /* @__PURE__ */ jsx(BuildTab, {})
+    ] })
+  ] });
+}
+function TabButton({ label, active, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        padding: "8px 20px",
+        fontSize: 13,
+        fontWeight: 600,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        color: active ? "#3b82f6" : "#6b7280",
+        backgroundColor: "transparent",
+        border: "none",
+        borderBottom: active ? "2px solid #3b82f6" : "2px solid transparent",
+        cursor: "pointer",
+        transition: "all 0.15s ease"
+      },
+      children: label
+    }
+  );
+}
+function MigrateTab({
+  entry,
+  onClose: _onClose
 }) {
   const { fields: catalog, error: catalogError, isLoading: catalogLoading } = useMetrics();
+  if (!entry) {
+    return /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: 40 }, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", color: "#9ca3af" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 500, marginBottom: 8 }, children: "No component selected" }),
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 12 }, children: "Enable inspect mode (Ctrl+Shift+I) then click on a data component to map it to the semantic layer." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(MigrateTabContent, { entry, catalog, catalogError, catalogLoading });
+}
+function MigrateTabContent({
+  entry,
+  catalog,
+  catalogError,
+  catalogLoading
+}) {
   const analysis = useMemo(
     () => analyzeChartData(entry.columns, entry.sampleValues),
     [entry.columns, entry.sampleValues]
@@ -1229,204 +1540,601 @@ function InspectorModal({
       originalMetricColumns: analysis.metricColumns
     };
     const prompt = generateMigrationPrompt(migrationConfig);
-    try {
-      await navigator.clipboard.writeText(prompt);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-      const ta = document.createElement("textarea");
-      ta.value = prompt;
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand("copy");
-      document.body.removeChild(ta);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    }
+    await copyToClipboard(prompt);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
   }, [entry, dimMappings, selectedMetrics, grain, hasTimeDim, analysis.metricColumns]);
   const canGenerate = selectedMetrics.length > 0 || Array.from(dimMappings.values()).some(Boolean);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { onClick: onClose, style: backdropStyle }),
-    /* @__PURE__ */ jsxs("div", { style: modalStyle, children: [
-      /* @__PURE__ */ jsxs("div", { style: modalHeaderStyle, children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 700, color: "#111827" }, children: entry.label }),
-          /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: [
-            "Source: ",
-            entry.currentSource
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("button", { onClick: onClose, style: closeBtnStyle, children: "\xD7" })
+    /* @__PURE__ */ jsxs("div", { style: { overflow: "auto", flex: 1 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 15, fontWeight: 700, color: "#111827" }, children: entry.label }),
+        /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: [
+          "Source: ",
+          entry.currentSource
+        ] })
+      ] }),
+      entry.sampleValues.length > 0 && /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
+        /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: "Current Data Preview" }),
+        /* @__PURE__ */ jsx("div", { style: { overflow: "auto" }, children: /* @__PURE__ */ jsxs("table", { style: previewTableStyle, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: entry.columns.map((col) => /* @__PURE__ */ jsx("th", { style: previewThStyle, children: col }, col)) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: entry.sampleValues.map((row, i) => /* @__PURE__ */ jsx("tr", { children: entry.columns.map((col) => /* @__PURE__ */ jsx("td", { style: previewTdStyle, children: row[col] === null || row[col] === void 0 ? "\u2014" : String(row[col]) }, col)) }, i)) })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, fontSize: 11, color: "#9ca3af" }, children: [
+          "Detected: ",
+          analysis.dimensionColumns.length,
+          " dimension column",
+          analysis.dimensionColumns.length !== 1 ? "s" : "",
+          " (",
+          analysis.dimensionColumns.join(", ") || "none",
+          ")",
+          " \xB7 ",
+          analysis.metricColumns.length,
+          " value column",
+          analysis.metricColumns.length !== 1 ? "s" : "",
+          " (",
+          analysis.metricColumns.join(", ") || "none",
+          ")"
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { overflow: "auto", flex: 1 }, children: [
-        entry.sampleValues.length > 0 && /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
-          /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: "Current Data Preview" }),
-          /* @__PURE__ */ jsx("div", { style: { overflow: "auto" }, children: /* @__PURE__ */ jsxs("table", { style: previewTableStyle, children: [
-            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: entry.columns.map((col) => /* @__PURE__ */ jsx("th", { style: previewThStyle, children: col }, col)) }) }),
-            /* @__PURE__ */ jsx("tbody", { children: entry.sampleValues.map((row, i) => /* @__PURE__ */ jsx("tr", { children: entry.columns.map((col) => /* @__PURE__ */ jsx("td", { style: previewTdStyle, children: row[col] === null || row[col] === void 0 ? "\u2014" : String(row[col]) }, col)) }, i)) })
+      catalog.length === 0 && /* @__PURE__ */ jsx("div", { style: { ...sectionStyle, textAlign: "center" }, children: /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#9ca3af" }, children: catalogLoading ? "Loading catalog..." : catalogError ? `Error loading catalog: ${catalogError}` : "No semantic layer catalog available. Connect to the gateway to enable smart matching." }) }),
+      catalog.length > 0 && /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
+        /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: "Dimensions (Group By)" }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#9ca3af", marginBottom: 8 }, children: "What categories define the rows?" }),
+        analysis.dimensionColumns.length === 0 ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#9ca3af", fontStyle: "italic" }, children: "No dimension columns detected." }) : /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13 }, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { style: mappingThStyle, children: "Current Column" }),
+            /* @__PURE__ */ jsx("th", { style: mappingThStyle, children: "Sample Values" }),
+            /* @__PURE__ */ jsx("th", { style: mappingThStyle, children: "Semantic Layer Dimension" })
           ] }) }),
-          /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, fontSize: 11, color: "#9ca3af" }, children: [
-            "Detected: ",
-            analysis.dimensionColumns.length,
-            " dimension column",
-            analysis.dimensionColumns.length !== 1 ? "s" : "",
-            " (",
-            analysis.dimensionColumns.join(", ") || "none",
-            ")",
-            " \xB7 ",
-            analysis.metricColumns.length,
-            " value column",
-            analysis.metricColumns.length !== 1 ? "s" : "",
-            " (",
-            analysis.metricColumns.join(", ") || "none",
+          /* @__PURE__ */ jsx("tbody", { children: analysis.dimensionColumns.map((col) => {
+            const sampleVals = entry.sampleValues.map((row) => row[col]).filter((v) => v !== null && v !== void 0).slice(0, 4).map(String);
+            return /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("td", { style: mappingTdStyle, children: /* @__PURE__ */ jsx("code", { style: { fontSize: 12, color: "#6366f1", fontFamily: "monospace" }, children: col }) }),
+              /* @__PURE__ */ jsxs("td", { style: { ...mappingTdStyle, fontSize: 11, color: "#9ca3af" }, children: [
+                sampleVals.join(", "),
+                sampleVals.length >= 4 ? ", ..." : ""
+              ] }),
+              /* @__PURE__ */ jsx("td", { style: mappingTdStyle, children: /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  value: dimMappings.get(col)?.name ?? "",
+                  onChange: (e) => {
+                    const f = dimensions.find((d) => d.name === e.target.value) ?? null;
+                    handleDimChange(col, f);
+                  },
+                  style: selectStyle2,
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: "-- select dimension --" }),
+                    dimensions.map((f) => /* @__PURE__ */ jsxs("option", { value: f.name, children: [
+                      f.displayName,
+                      " (",
+                      f.type,
+                      ") \\u2014 ",
+                      f.name
+                    ] }, f.name))
+                  ]
+                }
+              ) })
+            ] }, col);
+          }) })
+        ] }),
+        hasTimeDim && /* @__PURE__ */ jsxs("div", { style: { marginTop: 10, display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx("label", { style: { fontSize: 12, fontWeight: 600, color: "#374151" }, children: "Time Grain:" }),
+          /* @__PURE__ */ jsxs("select", { value: grain, onChange: (e) => setGrain(e.target.value), style: { ...selectStyle2, width: "auto" }, children: [
+            /* @__PURE__ */ jsx("option", { value: "day", children: "Day" }),
+            /* @__PURE__ */ jsx("option", { value: "week", children: "Week" }),
+            /* @__PURE__ */ jsx("option", { value: "month", children: "Month" }),
+            /* @__PURE__ */ jsx("option", { value: "quarter", children: "Quarter" }),
+            /* @__PURE__ */ jsx("option", { value: "year", children: "Year" })
+          ] })
+        ] })
+      ] }),
+      catalog.length > 0 && /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
+        /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: "Metrics (Values)" }),
+        /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: "#9ca3af", marginBottom: 8 }, children: [
+          "Which metrics should be queried?",
+          analysis.metricColumns.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
+            " (replaces: ",
+            analysis.metricColumns.join(", "),
             ")"
           ] })
         ] }),
-        catalog.length === 0 && /* @__PURE__ */ jsx("div", { style: { ...sectionStyle, textAlign: "center" }, children: /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#9ca3af" }, children: catalogLoading ? "Loading catalog..." : catalogError ? `Error loading catalog: ${catalogError}` : "No semantic layer catalog available. Connect to the gateway to enable smart matching." }) }),
-        catalog.length > 0 && /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
-          /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: "Dimensions (Group By)" }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#9ca3af", marginBottom: 8 }, children: "What categories define the rows? (X-axis, grouping)" }),
-          analysis.dimensionColumns.length === 0 ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#9ca3af", fontStyle: "italic" }, children: "No dimension columns detected in the data." }) : /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13 }, children: [
-            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx("th", { style: mappingThStyle, children: "Current Column" }),
-              /* @__PURE__ */ jsx("th", { style: mappingThStyle, children: "Sample Values" }),
-              /* @__PURE__ */ jsx("th", { style: mappingThStyle, children: "Semantic Layer Dimension" })
-            ] }) }),
-            /* @__PURE__ */ jsx("tbody", { children: analysis.dimensionColumns.map((col) => {
-              const sampleVals = entry.sampleValues.map((row) => row[col]).filter((v) => v !== null && v !== void 0).slice(0, 4).map(String);
-              return /* @__PURE__ */ jsxs("tr", { children: [
-                /* @__PURE__ */ jsx("td", { style: mappingTdStyle, children: /* @__PURE__ */ jsx("code", { style: { fontSize: 12, color: "#6366f1", fontFamily: "monospace" }, children: col }) }),
-                /* @__PURE__ */ jsxs("td", { style: { ...mappingTdStyle, fontSize: 11, color: "#9ca3af" }, children: [
-                  sampleVals.join(", "),
-                  sampleVals.length >= 4 ? ", ..." : ""
-                ] }),
-                /* @__PURE__ */ jsx("td", { style: mappingTdStyle, children: /* @__PURE__ */ jsxs(
-                  "select",
-                  {
-                    value: dimMappings.get(col)?.name ?? "",
-                    onChange: (e) => {
-                      const field = dimensions.find((f) => f.name === e.target.value) ?? null;
-                      handleDimChange(col, field);
-                    },
-                    style: selectStyle2,
-                    children: [
-                      /* @__PURE__ */ jsx("option", { value: "", children: "-- select dimension --" }),
-                      dimensions.map((f) => /* @__PURE__ */ jsxs("option", { value: f.name, children: [
-                        f.displayName,
-                        " (",
-                        f.type,
-                        ") \u2014 ",
-                        f.name
-                      ] }, f.name))
-                    ]
-                  }
-                ) })
-              ] }, col);
-            }) })
-          ] }),
-          hasTimeDim && /* @__PURE__ */ jsxs("div", { style: { marginTop: 10, display: "flex", alignItems: "center", gap: 8 }, children: [
-            /* @__PURE__ */ jsx("label", { style: { fontSize: 12, fontWeight: 600, color: "#374151" }, children: "Time Grain:" }),
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                value: grain,
-                onChange: (e) => setGrain(e.target.value),
-                style: { ...selectStyle2, width: "auto" },
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "day", children: "Day" }),
-                  /* @__PURE__ */ jsx("option", { value: "week", children: "Week" }),
-                  /* @__PURE__ */ jsx("option", { value: "month", children: "Month" }),
-                  /* @__PURE__ */ jsx("option", { value: "quarter", children: "Quarter" }),
-                  /* @__PURE__ */ jsx("option", { value: "year", children: "Year" })
-                ]
-              }
-            )
+        metrics.length === 0 ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#9ca3af", fontStyle: "italic" }, children: "No metrics available." }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4, maxHeight: 200, overflow: "auto" }, children: metrics.map((m) => {
+          const isSel = selectedMetrics.some((s) => s.name === m.name);
+          return /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 8px", borderRadius: 4, cursor: "pointer", backgroundColor: isSel ? "#eff6ff" : "transparent", border: isSel ? "1px solid #bfdbfe" : "1px solid transparent", fontSize: 12 }, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", checked: isSel, onChange: () => handleToggleMetric(m), style: { margin: 0 } }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, color: "#111827" }, children: m.displayName }),
+            /* @__PURE__ */ jsx("code", { style: { fontSize: 10, color: "#6366f1", fontFamily: "monospace" }, children: m.name }),
+            m.category && /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", fontSize: 10, color: "#9ca3af" }, children: m.category })
+          ] }, m.name);
+        }) }),
+        selectedMetrics.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, fontSize: 11, color: "#6b7280" }, children: [
+          "Selected: ",
+          selectedMetrics.map((m) => m.displayName).join(", ")
+        ] })
+      ] }),
+      canGenerate && /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
+        /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: "Query Preview" }),
+        /* @__PURE__ */ jsx("pre", { style: codePreviewStyle, children: `useSemanticQuery({${selectedMetrics.length > 0 ? `
+  metrics: [${selectedMetrics.map((m) => `'${m.name}'`).join(", ")}],` : ""}${Array.from(dimMappings.values()).some(Boolean) ? `
+  groupBy: [${Array.from(dimMappings.values()).filter(Boolean).map((f) => `'${f.name}'`).join(", ")}],` : ""}${hasTimeDim && grain ? `
+  grain: '${grain}',` : ""}
+})` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { padding: "12px 20px", borderTop: "1px solid #e5e7eb" }, children: /* @__PURE__ */ jsx("button", { onClick: handleGenerate, disabled: !canGenerate, style: { ...primaryBtnStyle, width: "100%", opacity: canGenerate ? 1 : 0.5, cursor: canGenerate ? "pointer" : "not-allowed" }, children: copied ? "Copied to clipboard!" : "Generate Migration Prompt" }) })
+  ] });
+}
+var _nextWidgetId = 1;
+function nextWidgetId() {
+  return `w${_nextWidgetId++}`;
+}
+var WIDGET_TYPES = [
+  { type: "kpi", label: "KPI", icon: "#" },
+  { type: "line", label: "Line", icon: "\u2571" },
+  { type: "bar", label: "Bar", icon: "\u2581\u2583\u2585" },
+  { type: "area", label: "Area", icon: "\u25E2" },
+  { type: "pie", label: "Pie", icon: "\u25D4" },
+  { type: "table", label: "Table", icon: "\u2637" }
+];
+function BuildTab() {
+  const { fields: catalog, isLoading: catalogLoading } = useMetrics();
+  const allMetrics = useMemo(() => catalog.filter((f) => f.type === "metric"), [catalog]);
+  const allDimensions = useMemo(() => catalog.filter((f) => f.type === "dimension" || f.type === "time_dimension"), [catalog]);
+  const [dashboardTitle, setDashboardTitle] = useState("Dashboard");
+  const [layout, setLayout] = useState("dashboard");
+  const [widgets, setWidgets] = useState([]);
+  const [sharedFilters, setSharedFilters] = useState([]);
+  const [catalogSearch, setCatalogSearch] = useState("");
+  const [copied, setCopied] = useState(false);
+  const [lovableSent, setLovableSent] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const addWidget = useCallback((type) => {
+    setWidgets((prev) => [...prev, {
+      id: nextWidgetId(),
+      title: `${WIDGET_TYPES.find((t) => t.type === type)?.label ?? "Widget"} ${prev.length + 1}`,
+      type,
+      metrics: [],
+      groupBy: [],
+      grain: null
+    }]);
+  }, []);
+  const removeWidget = useCallback((id) => {
+    setWidgets((prev) => prev.filter((w) => w.id !== id));
+  }, []);
+  const updateWidget = useCallback((id, patch) => {
+    setWidgets((prev) => prev.map((w) => w.id === id ? { ...w, ...patch } : w));
+  }, []);
+  const addFilter = useCallback((dim) => {
+    if (sharedFilters.some((f) => f.dimension.name === dim.name)) return;
+    setSharedFilters((prev) => [...prev, { dimension: dim, label: dim.displayName }]);
+  }, [sharedFilters]);
+  const removeFilter = useCallback((name) => {
+    setSharedFilters((prev) => prev.filter((f) => f.dimension.name !== name));
+  }, []);
+  const addFieldToWidget = useCallback((widgetId, field) => {
+    setWidgets((prev) => prev.map((w) => {
+      if (w.id !== widgetId) return w;
+      if (field.type === "metric") {
+        if (w.metrics.some((m) => m.name === field.name)) return w;
+        return { ...w, metrics: [...w.metrics, field] };
+      } else {
+        if (w.groupBy.some((d) => d.name === field.name)) return w;
+        return { ...w, groupBy: [...w.groupBy, field] };
+      }
+    }));
+  }, []);
+  const removeFieldFromWidget = useCallback((widgetId, fieldName, role) => {
+    setWidgets((prev) => prev.map((w) => {
+      if (w.id !== widgetId) return w;
+      if (role === "metric") return { ...w, metrics: w.metrics.filter((m) => m.name !== fieldName) };
+      return { ...w, groupBy: w.groupBy.filter((d) => d.name !== fieldName) };
+    }));
+  }, []);
+  const reportConfig = useMemo(() => ({
+    dashboardTitle,
+    layout,
+    widgets,
+    sharedFilters
+  }), [dashboardTitle, layout, widgets, sharedFilters]);
+  const prompt = useMemo(() => generateReportPrompt(reportConfig), [reportConfig]);
+  const canGenerate = widgets.length > 0 && widgets.some((w) => w.metrics.length > 0);
+  const canLovable = canGenerate && canOpenInLovable(prompt);
+  const handleCopy = useCallback(async () => {
+    await copyToClipboard(prompt);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, [prompt]);
+  const handleLovable = useCallback(() => {
+    openInLovable(prompt);
+    setLovableSent(true);
+    setTimeout(() => setLovableSent(false), 3e3);
+  }, [prompt]);
+  const filteredMetrics = useMemo(() => {
+    const q = catalogSearch.toLowerCase();
+    if (!q) return allMetrics;
+    return allMetrics.filter((f) => f.displayName.toLowerCase().includes(q) || f.name.toLowerCase().includes(q) || f.description.toLowerCase().includes(q));
+  }, [allMetrics, catalogSearch]);
+  const filteredDimensions = useMemo(() => {
+    const q = catalogSearch.toLowerCase();
+    if (!q) return allDimensions;
+    return allDimensions.filter((f) => f.displayName.toLowerCase().includes(q) || f.name.toLowerCase().includes(q) || f.description.toLowerCase().includes(q));
+  }, [allDimensions, catalogSearch]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { style: { overflow: "auto", flex: 1, display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { ...sectionStyle, display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: dashboardTitle,
+            onChange: (e) => setDashboardTitle(e.target.value),
+            placeholder: "Dashboard title",
+            style: { ...inputStyle2, flex: 1, minWidth: 160, fontSize: 15, fontWeight: 700 }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: ["single", "two-column", "dashboard"].map((l) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setLayout(l),
+            style: {
+              padding: "4px 10px",
+              fontSize: 11,
+              fontWeight: 600,
+              fontFamily: "system-ui, -apple-system, sans-serif",
+              borderRadius: 4,
+              border: layout === l ? "1px solid #3b82f6" : "1px solid #d1d5db",
+              backgroundColor: layout === l ? "#eff6ff" : "#fff",
+              color: layout === l ? "#3b82f6" : "#6b7280",
+              cursor: "pointer"
+            },
+            children: l === "single" ? "1-Col" : l === "two-column" ? "2-Col" : "Dashboard"
+          },
+          l
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flex: 1, minHeight: 0 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { width: 220, borderRight: "1px solid #e5e7eb", overflow: "auto", flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsx("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: catalogSearch,
+              onChange: (e) => setCatalogSearch(e.target.value),
+              placeholder: "Search fields...",
+              style: { ...inputStyle2, width: "100%", fontSize: 12 }
+            }
+          ) }),
+          catalogLoading ? /* @__PURE__ */ jsx("div", { style: { padding: 12, fontSize: 12, color: "#9ca3af" }, children: "Loading catalog..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { style: { padding: "4px 12px" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { ...sectionTitleStyle, marginBottom: 4 }, children: [
+                "Metrics (",
+                filteredMetrics.length,
+                ")"
+              ] }),
+              filteredMetrics.map((f) => /* @__PURE__ */ jsx(CatalogChip, { field: f, widgets, onAddToWidget: addFieldToWidget }, f.name)),
+              filteredMetrics.length === 0 && /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#9ca3af", padding: "4px 0" }, children: "None found" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { padding: "4px 12px" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { ...sectionTitleStyle, marginBottom: 4 }, children: [
+                "Dimensions (",
+                filteredDimensions.length,
+                ")"
+              ] }),
+              filteredDimensions.map((f) => /* @__PURE__ */ jsx(CatalogChip, { field: f, widgets, onAddToWidget: addFieldToWidget, onAddAsFilter: addFilter }, f.name)),
+              filteredDimensions.length === 0 && /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#9ca3af", padding: "4px 0" }, children: "None found" })
+            ] })
           ] })
         ] }),
-        catalog.length > 0 && /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
-          /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: "Metrics (Values)" }),
-          /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: "#9ca3af", marginBottom: 8 }, children: [
-            "Which metrics should be queried? These become the series/values in the chart.",
-            analysis.metricColumns.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
-              " (replaces: ",
-              analysis.metricColumns.join(", "),
-              ")"
-            ] })
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", padding: "12px 16px" }, children: widgets.length === 0 ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "40px 20px", color: "#9ca3af" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 500, marginBottom: 12 }, children: "Compose your dashboard" }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, marginBottom: 20 }, children: "Add widgets below, then pick metrics and dimensions from the catalog on the left." }),
+          /* @__PURE__ */ jsx(AddWidgetBar, { onAdd: addWidget })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          widgets.map((w) => /* @__PURE__ */ jsx(
+            WidgetCard,
+            {
+              widget: w,
+              onUpdate: updateWidget,
+              onRemove: removeWidget,
+              onRemoveField: removeFieldFromWidget,
+              allDimensions
+            },
+            w.id
+          )),
+          /* @__PURE__ */ jsx(AddWidgetBar, { onAdd: addWidget }),
+          /* @__PURE__ */ jsxs("div", { style: { marginTop: 16, padding: "12px 0", borderTop: "1px solid #f3f4f6" }, children: [
+            /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: "Shared Filters" }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#9ca3af", marginBottom: 8 }, children: "Dimensions that filter all widgets together. Add from the catalog sidebar." }),
+            sharedFilters.length === 0 ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#d1d5db", fontStyle: "italic" }, children: "None added yet" }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: sharedFilters.map((f) => /* @__PURE__ */ jsxs("span", { style: chipStyle, children: [
+              f.label,
+              /* @__PURE__ */ jsx("button", { onClick: () => removeFilter(f.dimension.name), style: chipRemoveStyle, children: "\xD7" })
+            ] }, f.dimension.name)) })
           ] }),
-          metrics.length === 0 ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#9ca3af", fontStyle: "italic" }, children: "No metrics available in the catalog." }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4, maxHeight: 200, overflow: "auto" }, children: metrics.map((m) => {
-            const isSelected = selectedMetrics.some((s) => s.name === m.name);
-            return /* @__PURE__ */ jsxs(
-              "label",
+          canGenerate && /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
               {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  padding: "4px 8px",
-                  borderRadius: 4,
-                  cursor: "pointer",
-                  backgroundColor: isSelected ? "#eff6ff" : "transparent",
-                  border: isSelected ? "1px solid #bfdbfe" : "1px solid transparent",
-                  fontSize: 12
-                },
+                onClick: () => setPreviewOpen(!previewOpen),
+                style: { fontSize: 11, fontWeight: 600, color: "#6b7280", background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "system-ui, -apple-system, sans-serif" },
                 children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: isSelected,
-                      onChange: () => handleToggleMetric(m),
-                      style: { margin: 0 }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, color: "#111827" }, children: m.displayName }),
-                  /* @__PURE__ */ jsx("code", { style: { fontSize: 10, color: "#6366f1", fontFamily: "monospace" }, children: m.name }),
-                  m.category && /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", fontSize: 10, color: "#9ca3af" }, children: m.category })
+                  previewOpen ? "\u25BC" : "\u25B6",
+                  " Prompt Preview"
                 ]
-              },
-              m.name
-            );
-          }) }),
-          selectedMetrics.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, fontSize: 11, color: "#6b7280" }, children: [
-            "Selected: ",
-            selectedMetrics.map((m) => m.displayName).join(", ")
+              }
+            ),
+            previewOpen && /* @__PURE__ */ jsx("pre", { style: { ...codePreviewStyle, marginTop: 8, maxHeight: 200, overflow: "auto", fontSize: 10 }, children: prompt })
           ] })
-        ] }),
-        canGenerate && /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
-          /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: "Query Preview" }),
-          /* @__PURE__ */ jsx("pre", { style: {
-            fontSize: 11,
-            fontFamily: "monospace",
-            backgroundColor: "#f9fafb",
-            border: "1px solid #e5e7eb",
-            borderRadius: 6,
-            padding: "8px 12px",
-            whiteSpace: "pre-wrap",
-            color: "#374151",
-            margin: 0
-          }, children: `useSemanticQuery({${selectedMetrics.length > 0 ? `
-  metrics: [${selectedMetrics.map((m) => `'${m.name}'`).join(", ")}],` : ""}${Array.from(dimMappings.values()).some(Boolean) ? `
-  groupBy: [${Array.from(dimMappings.values()).filter(Boolean).map((f) => `'${f.name}'`).join(", ")}],` : ""}${hasTimeDim && grain ? `
-  grain: '${grain}',` : ""}
-})` })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { style: { padding: "12px 20px", borderTop: "1px solid #e5e7eb" }, children: /* @__PURE__ */ jsx(
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { padding: "12px 20px", borderTop: "1px solid #e5e7eb", display: "flex", gap: 10 }, children: [
+      /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: handleGenerate,
+          onClick: handleCopy,
           disabled: !canGenerate,
           style: {
-            ...generateBtnStyle,
+            ...secondaryBtnStyle,
+            flex: 1,
             opacity: canGenerate ? 1 : 0.5,
             cursor: canGenerate ? "pointer" : "not-allowed"
           },
-          children: copied ? "Copied to clipboard!" : "Generate Migration Prompt"
+          children: copied ? "Copied!" : "Copy Prompt"
         }
-      ) })
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: handleLovable,
+          disabled: !canLovable,
+          title: canGenerate && !canLovable ? "Prompt exceeds 50,000 character limit for direct send" : void 0,
+          style: {
+            ...primaryBtnStyle,
+            flex: 1.5,
+            opacity: canLovable ? 1 : 0.4,
+            cursor: canLovable ? "pointer" : "not-allowed",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 6
+          },
+          children: [
+            lovableSent ? "Opening Lovable..." : "Build in Lovable",
+            !lovableSent && /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("path", { d: "M7 17L17 7" }),
+              /* @__PURE__ */ jsx("path", { d: "M7 7h10v10" })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function CatalogChip({
+  field,
+  widgets,
+  onAddToWidget,
+  onAddAsFilter
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const typeIcon = field.type === "metric" ? "\u2581" : field.type === "time_dimension" ? "\u25F7" : "\u2022";
+  const typeColor = field.type === "metric" ? "#10b981" : field.type === "time_dimension" ? "#f59e0b" : "#6366f1";
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => {
+          if (widgets.length === 1) {
+            onAddToWidget(widgets[0].id, field);
+          } else if (widgets.length > 1) {
+            setMenuOpen(!menuOpen);
+          }
+        },
+        title: `${field.displayName}
+${field.description}`,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          width: "100%",
+          textAlign: "left",
+          padding: "3px 6px",
+          fontSize: 11,
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          color: "#374151",
+          backgroundColor: "transparent",
+          border: "none",
+          borderRadius: 3,
+          cursor: widgets.length > 0 ? "pointer" : "default",
+          opacity: widgets.length > 0 ? 1 : 0.6
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#f3f4f6";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { color: typeColor, fontSize: 10, flexShrink: 0 }, children: typeIcon }),
+          /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: field.displayName })
+        ]
+      }
+    ),
+    menuOpen && widgets.length > 1 && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", left: 0, top: "100%", zIndex: 10, backgroundColor: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, boxShadow: "0 4px 12px rgba(0,0,0,0.1)", minWidth: 160, padding: "4px 0" }, children: [
+      widgets.map((w) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            onAddToWidget(w.id, field);
+            setMenuOpen(false);
+          },
+          style: { display: "block", width: "100%", textAlign: "left", padding: "4px 10px", fontSize: 11, fontFamily: "system-ui, -apple-system, sans-serif", border: "none", backgroundColor: "transparent", cursor: "pointer", color: "#374151" },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "#f3f4f6";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          },
+          children: w.title
+        },
+        w.id
+      )),
+      onAddAsFilter && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid #e5e7eb", margin: "4px 0" } }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              onAddAsFilter(field);
+              setMenuOpen(false);
+            },
+            style: { display: "block", width: "100%", textAlign: "left", padding: "4px 10px", fontSize: 11, fontFamily: "system-ui, -apple-system, sans-serif", border: "none", backgroundColor: "transparent", cursor: "pointer", color: "#6b7280", fontStyle: "italic" },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#f3f4f6";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+            },
+            children: "+ Add as shared filter"
+          }
+        )
+      ] })
     ] })
   ] });
 }
+function AddWidgetBar({ onAdd }) {
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, justifyContent: "center", padding: "8px 0", flexWrap: "wrap" }, children: WIDGET_TYPES.map((wt) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => onAdd(wt.type),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 2,
+        padding: "6px 12px",
+        fontSize: 10,
+        fontWeight: 600,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        color: "#6b7280",
+        backgroundColor: "#fff",
+        border: "1px dashed #d1d5db",
+        borderRadius: 6,
+        cursor: "pointer",
+        transition: "all 0.1s",
+        minWidth: 56
+      },
+      onMouseEnter: (e) => {
+        const el = e.currentTarget;
+        el.style.borderColor = "#3b82f6";
+        el.style.color = "#3b82f6";
+      },
+      onMouseLeave: (e) => {
+        const el = e.currentTarget;
+        el.style.borderColor = "#d1d5db";
+        el.style.color = "#6b7280";
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 16, lineHeight: 1 }, children: wt.icon }),
+        wt.label
+      ]
+    },
+    wt.type
+  )) });
+}
+function WidgetCard({
+  widget,
+  onUpdate,
+  onRemove,
+  onRemoveField,
+  allDimensions
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  const hasTimeDim = widget.groupBy.some((d) => d.type === "time_dimension");
+  return /* @__PURE__ */ jsxs("div", { style: { border: "1px solid #e5e7eb", borderRadius: 8, marginBottom: 10, backgroundColor: "#fff" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", borderBottom: collapsed ? "none" : "1px solid #f3f4f6" }, children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => setCollapsed(!collapsed), style: { background: "none", border: "none", cursor: "pointer", padding: 0, fontSize: 10, color: "#9ca3af" }, children: collapsed ? "\u25B6" : "\u25BC" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: widget.title,
+          onChange: (e) => onUpdate(widget.id, { title: e.target.value }),
+          style: { ...inputStyle2, flex: 1, fontSize: 13, fontWeight: 600, padding: "2px 4px" }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 2 }, children: WIDGET_TYPES.map((wt) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onUpdate(widget.id, { type: wt.type }),
+          title: wt.label,
+          style: {
+            width: 24,
+            height: 24,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 12,
+            borderRadius: 4,
+            border: widget.type === wt.type ? "1px solid #3b82f6" : "1px solid transparent",
+            backgroundColor: widget.type === wt.type ? "#eff6ff" : "transparent",
+            color: widget.type === wt.type ? "#3b82f6" : "#9ca3af",
+            cursor: "pointer"
+          },
+          children: wt.icon
+        },
+        wt.type
+      )) }),
+      /* @__PURE__ */ jsx("button", { onClick: () => onRemove(widget.id), style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "#d1d5db", padding: "0 2px" }, title: "Remove widget", children: "\xD7" })
+    ] }),
+    !collapsed && /* @__PURE__ */ jsxs("div", { style: { padding: "8px 12px" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: 8 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 10, fontWeight: 600, color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 4 }, children: "Metrics" }),
+        widget.metrics.length === 0 ? /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#d1d5db", fontStyle: "italic" }, children: "Click a metric in the catalog to add" }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4, flexWrap: "wrap" }, children: widget.metrics.map((m) => /* @__PURE__ */ jsxs("span", { style: { ...chipStyle, backgroundColor: "#ecfdf5", borderColor: "#a7f3d0", color: "#065f46" }, children: [
+          m.displayName,
+          /* @__PURE__ */ jsx("button", { onClick: () => onRemoveField(widget.id, m.name, "metric"), style: chipRemoveStyle, children: "\xD7" })
+        ] }, m.name)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: 8 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 10, fontWeight: 600, color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 4 }, children: "Group By" }),
+        widget.groupBy.length === 0 ? /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#d1d5db", fontStyle: "italic" }, children: "Click a dimension in the catalog to add" }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4, flexWrap: "wrap" }, children: widget.groupBy.map((d) => /* @__PURE__ */ jsxs("span", { style: { ...chipStyle, backgroundColor: "#eef2ff", borderColor: "#c7d2fe", color: "#3730a3" }, children: [
+          d.displayName,
+          /* @__PURE__ */ jsx("button", { onClick: () => onRemoveField(widget.id, d.name, "groupBy"), style: chipRemoveStyle, children: "\xD7" })
+        ] }, d.name)) })
+      ] }),
+      hasTimeDim && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 10, fontWeight: 600, color: "#6b7280", textTransform: "uppercase" }, children: "Grain" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: widget.grain ?? "",
+            onChange: (e) => onUpdate(widget.id, { grain: e.target.value || null }),
+            style: { ...selectStyle2, width: "auto", fontSize: 11 },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "None" }),
+              /* @__PURE__ */ jsx("option", { value: "day", children: "Day" }),
+              /* @__PURE__ */ jsx("option", { value: "week", children: "Week" }),
+              /* @__PURE__ */ jsx("option", { value: "month", children: "Month" }),
+              /* @__PURE__ */ jsx("option", { value: "quarter", children: "Quarter" }),
+              /* @__PURE__ */ jsx("option", { value: "year", children: "Year" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+async function copyToClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand("copy");
+    document.body.removeChild(ta);
+  }
+}
 var backdropStyle = {
   position: "fixed",
   inset: 0,
@@ -1439,7 +2147,7 @@ var modalStyle = {
   left: "50%",
   transform: "translate(-50%, -50%)",
   zIndex: 100001,
-  width: "min(700px, 90vw)",
+  width: "min(900px, 95vw)",
   maxHeight: "85vh",
   backgroundColor: "#fff",
   borderRadius: 12,
@@ -1452,8 +2160,8 @@ var modalStyle = {
 var modalHeaderStyle = {
   display: "flex",
   justifyContent: "space-between",
-  alignItems: "flex-start",
-  padding: "16px 20px",
+  alignItems: "center",
+  padding: "0 20px",
   borderBottom: "1px solid #e5e7eb"
 };
 var closeBtnStyle = {
@@ -1469,7 +2177,7 @@ var sectionStyle = {
   padding: "12px 20px"
 };
 var sectionTitleStyle = {
-  fontSize: 11,
+  fontSize: 10,
   fontWeight: 700,
   textTransform: "uppercase",
   letterSpacing: "0.05em",
@@ -1513,7 +2221,6 @@ var mappingTdStyle = {
   verticalAlign: "middle"
 };
 var selectStyle2 = {
-  width: "100%",
   padding: "4px 6px",
   fontSize: 12,
   border: "1px solid #d1d5db",
@@ -1521,17 +2228,69 @@ var selectStyle2 = {
   backgroundColor: "#fff",
   color: "#111827"
 };
-var generateBtnStyle = {
-  width: "100%",
+var inputStyle2 = {
+  padding: "4px 8px",
+  fontSize: 12,
+  border: "1px solid #d1d5db",
+  borderRadius: 4,
+  backgroundColor: "#fff",
+  color: "#111827",
+  outline: "none",
+  fontFamily: "system-ui, -apple-system, sans-serif"
+};
+var codePreviewStyle = {
+  fontSize: 11,
+  fontFamily: "monospace",
+  backgroundColor: "#f9fafb",
+  border: "1px solid #e5e7eb",
+  borderRadius: 6,
+  padding: "8px 12px",
+  whiteSpace: "pre-wrap",
+  color: "#374151",
+  margin: 0
+};
+var primaryBtnStyle = {
   padding: "10px 16px",
   fontSize: 14,
   fontWeight: 600,
   color: "#fff",
   backgroundColor: "#3b82f6",
   border: "none",
-  borderRadius: 8
+  borderRadius: 8,
+  fontFamily: "system-ui, -apple-system, sans-serif"
+};
+var secondaryBtnStyle = {
+  padding: "10px 16px",
+  fontSize: 14,
+  fontWeight: 600,
+  color: "#374151",
+  backgroundColor: "#fff",
+  border: "1px solid #d1d5db",
+  borderRadius: 8,
+  fontFamily: "system-ui, -apple-system, sans-serif"
+};
+var chipStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  padding: "2px 8px",
+  fontSize: 11,
+  fontWeight: 500,
+  borderRadius: 999,
+  border: "1px solid #e5e7eb",
+  backgroundColor: "#f9fafb",
+  color: "#374151"
+};
+var chipRemoveStyle = {
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  fontSize: 12,
+  color: "#9ca3af",
+  padding: 0,
+  lineHeight: 1
 };
 
-export { AdminDashboard, DataCatalog, DataInspector, Inspectable, MetricPicker, ResultsTable, analyzeChartData, generateMigrationPrompt, matchField, matchFields };
+export { AdminDashboard, DataCatalog, DataInspector, Inspectable, MetricPicker, ResultsTable, analyzeChartData, canOpenInLovable, generateMigrationPrompt, generateReportPrompt, matchField, matchFields, openInLovable };
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map