@inkindcards/semantic-layer 2.2.6 → 2.3.0

package/dist/components.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SemanticField, d as FieldType, Q as QueryResult } from './types-c5qj4BKB.cjs';
+import { S as SemanticField, d as FieldType, Q as QueryResult, T as TimeGrain } from './types-c5qj4BKB.cjs';
 import React__default from 'react';
 
 interface MetricPickerProps {
@@ -84,20 +84,51 @@ interface FieldMatch {
     suggestedField: SemanticField | null;
     confidence: MatchConfidence;
 }
+interface ChartAnalysis {
+    dimensionColumns: string[];
+    metricColumns: string[];
+}
+/**
+ * Best-effort match of a single column name against the catalog.
+ */
+declare function matchField(column: string, catalog: SemanticField[]): {
+    field: SemanticField | null;
+    confidence: MatchConfidence;
+};
 /**
  * Match an array of column names against the semantic layer field catalog.
  * Uses three layers: exact name match, normalized match, then display name match.
  */
 declare function matchFields(columns: string[], catalog: SemanticField[]): FieldMatch[];
+/**
+ * Analyze chart data to classify columns as dimensions (string/date values)
+ * or metrics (numeric values). Used by the inspector modal to build the
+ * query builder UI instead of a flat column-to-field mapping.
+ */
+declare function analyzeChartData(columns: string[], sampleValues: Record<string, unknown>[]): ChartAnalysis;
 
 interface FieldMapping {
     column: string;
     field: SemanticField | null;
 }
+interface DimensionMapping {
+    column: string;
+    field: SemanticField;
+}
+interface MigrationConfig {
+    componentLabel: string;
+    dimensions: DimensionMapping[];
+    metrics: SemanticField[];
+    grain: TimeGrain | null;
+    originalMetricColumns: string[];
+}
 /**
  * Generate a ready-to-paste Lovable prompt that tells the AI how to migrate
- * a component from its current data to a useSemanticQuery() call.
+ * a component from hardcoded data to a useSemanticQuery() call.
+ *
+ * Understands the distinction between dimensions (groupBy) and metrics (values),
+ * and produces correct query config with data reshaping instructions.
  */
-declare function generateMigrationPrompt(componentLabel: string, mappings: FieldMapping[]): string;
+declare function generateMigrationPrompt(config: MigrationConfig): string;
 
-export { AdminDashboard, type AdminDashboardProps, DataCatalog, type DataCatalogProps, DataInspector, type DataInspectorProps, type FieldMapping, type FieldMatch, Inspectable, type InspectableProps, type MatchConfidence, MetricPicker, type MetricPickerProps, ResultsTable, type ResultsTableProps, generateMigrationPrompt, matchFields };
+export { AdminDashboard, type AdminDashboardProps, type ChartAnalysis, DataCatalog, type DataCatalogProps, DataInspector, type DataInspectorProps, type DimensionMapping, type FieldMapping, type FieldMatch, Inspectable, type InspectableProps, type MatchConfidence, MetricPicker, type MetricPickerProps, type MigrationConfig, ResultsTable, type ResultsTableProps, analyzeChartData, generateMigrationPrompt, matchField, matchFields };

package/dist/components.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SemanticField, d as FieldType, Q as QueryResult } from './types-c5qj4BKB.js';
+import { S as SemanticField, d as FieldType, Q as QueryResult, T as TimeGrain } from './types-c5qj4BKB.js';
 import React__default from 'react';
 
 interface MetricPickerProps {
@@ -84,20 +84,51 @@ interface FieldMatch {
     suggestedField: SemanticField | null;
     confidence: MatchConfidence;
 }
+interface ChartAnalysis {
+    dimensionColumns: string[];
+    metricColumns: string[];
+}
+/**
+ * Best-effort match of a single column name against the catalog.
+ */
+declare function matchField(column: string, catalog: SemanticField[]): {
+    field: SemanticField | null;
+    confidence: MatchConfidence;
+};
 /**
  * Match an array of column names against the semantic layer field catalog.
  * Uses three layers: exact name match, normalized match, then display name match.
  */
 declare function matchFields(columns: string[], catalog: SemanticField[]): FieldMatch[];
+/**
+ * Analyze chart data to classify columns as dimensions (string/date values)
+ * or metrics (numeric values). Used by the inspector modal to build the
+ * query builder UI instead of a flat column-to-field mapping.
+ */
+declare function analyzeChartData(columns: string[], sampleValues: Record<string, unknown>[]): ChartAnalysis;
 
 interface FieldMapping {
     column: string;
     field: SemanticField | null;
 }
+interface DimensionMapping {
+    column: string;
+    field: SemanticField;
+}
+interface MigrationConfig {
+    componentLabel: string;
+    dimensions: DimensionMapping[];
+    metrics: SemanticField[];
+    grain: TimeGrain | null;
+    originalMetricColumns: string[];
+}
 /**
  * Generate a ready-to-paste Lovable prompt that tells the AI how to migrate
- * a component from its current data to a useSemanticQuery() call.
+ * a component from hardcoded data to a useSemanticQuery() call.
+ *
+ * Understands the distinction between dimensions (groupBy) and metrics (values),
+ * and produces correct query config with data reshaping instructions.
  */
-declare function generateMigrationPrompt(componentLabel: string, mappings: FieldMapping[]): string;
+declare function generateMigrationPrompt(config: MigrationConfig): string;
 
-export { AdminDashboard, type AdminDashboardProps, DataCatalog, type DataCatalogProps, DataInspector, type DataInspectorProps, type FieldMapping, type FieldMatch, Inspectable, type InspectableProps, type MatchConfidence, MetricPicker, type MetricPickerProps, ResultsTable, type ResultsTableProps, generateMigrationPrompt, matchFields };
+export { AdminDashboard, type AdminDashboardProps, type ChartAnalysis, DataCatalog, type DataCatalogProps, DataInspector, type DataInspectorProps, type DimensionMapping, type FieldMapping, type FieldMatch, Inspectable, type InspectableProps, type MatchConfidence, MetricPicker, type MetricPickerProps, type MigrationConfig, ResultsTable, type ResultsTableProps, analyzeChartData, generateMigrationPrompt, matchField, matchFields };

package/dist/components.js

@@ -996,48 +996,83 @@ function matchDisplayName(column, catalog) {
   if (lower.length < 3) return null;
   return catalog.find((f) => f.displayName.toLowerCase().includes(lower)) ?? catalog.find((f) => f.description.toLowerCase().includes(lower)) ?? null;
 }
+function matchField(column, catalog) {
+  const exact = matchExact(column, catalog);
+  if (exact) return { field: exact, confidence: "exact" };
+  const normalized = matchNormalized(column, catalog);
+  if (normalized) return { field: normalized, confidence: "fuzzy" };
+  const display = matchDisplayName(column, catalog);
+  if (display) return { field: display, confidence: "fuzzy" };
+  return { field: null, confidence: "manual" };
+}
 function matchFields(columns, catalog) {
   return columns.map((column) => {
-    const exact = matchExact(column, catalog);
-    if (exact) return { column, suggestedField: exact, confidence: "exact" };
-    const normalized = matchNormalized(column, catalog);
-    if (normalized) return { column, suggestedField: normalized, confidence: "fuzzy" };
-    const display = matchDisplayName(column, catalog);
-    if (display) return { column, suggestedField: display, confidence: "fuzzy" };
-    return { column, suggestedField: null, confidence: "manual" };
+    const { field, confidence } = matchField(column, catalog);
+    return { column, suggestedField: field, confidence };
   });
 }
+function analyzeChartData(columns, sampleValues) {
+  const dimensionColumns = [];
+  const metricColumns = [];
+  for (const col of columns) {
+    const values = sampleValues.map((row) => row[col]).filter((v) => v !== null && v !== void 0);
+    if (values.length === 0) {
+      dimensionColumns.push(col);
+      continue;
+    }
+    const numericCount = values.filter((v) => typeof v === "number" || typeof v === "string" && !isNaN(Number(v)) && v.trim() !== "").length;
+    const isNumeric = numericCount / values.length > 0.5;
+    if (isNumeric) {
+      metricColumns.push(col);
+    } else {
+      dimensionColumns.push(col);
+    }
+  }
+  return { dimensionColumns, metricColumns };
+}
 
 // src/components/prompt-generator.ts
-function generateMigrationPrompt(componentLabel, mappings) {
-  const resolved = mappings.filter((m) => m.field !== null);
-  if (resolved.length === 0) {
+function generateMigrationPrompt(config) {
+  const { componentLabel, dimensions, metrics, grain, originalMetricColumns } = config;
+  if (dimensions.length === 0 && metrics.length === 0) {
     return `Replace the sample/hardcoded data in the "${componentLabel}" component with live data from the semantic layer using useSemanticQuery. Use the DataCatalog to find the right field names.`;
   }
-  const metrics = resolved.filter((m) => m.field.type === "metric").map((m) => m.field.name);
-  const timeDims = resolved.filter((m) => m.field.type === "time_dimension").map((m) => m.field.name);
-  const dims = resolved.filter((m) => m.field.type === "dimension").map((m) => m.field.name);
-  const groupBy = [...timeDims, ...dims];
   const parts = [
-    `Replace the sample/hardcoded data in the "${componentLabel}" component with a useSemanticQuery call using:`
+    `Replace the sample/hardcoded data in the "${componentLabel}" component with a useSemanticQuery call using:`,
+    ""
   ];
   if (metrics.length > 0) {
-    parts.push(`  metrics: [${metrics.map((n) => `'${n}'`).join(", ")}]`);
+    parts.push(`  metrics: [${metrics.map((m) => `'${m.name}'`).join(", ")}]`);
   }
-  if (groupBy.length > 0) {
+  if (dimensions.length > 0) {
+    const groupBy = dimensions.map((d) => d.field.name);
     parts.push(`  groupBy: [${groupBy.map((n) => `'${n}'`).join(", ")}]`);
   }
-  if (timeDims.length > 0) {
-    parts.push(`  grain: 'month'`);
+  if (grain) {
+    parts.push(`  grain: '${grain}'`);
   }
   parts.push("");
-  parts.push("Map the query result columns to the component's props:");
-  for (const m of resolved) {
-    parts.push(`  "${m.column}" \u2192 data column "${m.field.name}"`);
+  const sampleRow = [];
+  for (const d of dimensions) {
+    sampleRow.push(`${d.field.name}: "..."`);
+  }
+  for (const m of metrics) {
+    sampleRow.push(`${m.name}: 1234`);
+  }
+  parts.push("The query returns rows like:");
+  parts.push(`  { ${sampleRow.join(", ")} }`);
+  parts.push("");
+  parts.push("Map to the chart's expected format:");
+  for (const d of dimensions) {
+    parts.push(`  X-axis / category: "${d.field.name}" (was "${d.column}" in the hardcoded data)`);
+  }
+  if (metrics.length > 0 && originalMetricColumns.length > 0) {
+    parts.push(`  Series / values: each metric (${metrics.map((m) => `"${m.name}"`).join(", ")}) becomes a line/area/bar in the chart`);
+    parts.push(`  (replaces the old columns: ${originalMetricColumns.map((c) => `"${c}"`).join(", ")})`);
   }
   parts.push("");
   parts.push(
-    "Remove the old hardcoded/sample data and any fetch logic it used. Use the data, isLoading, and error values from useSemanticQuery to render the component."
+    "Remove the old hardcoded/sample data and any fetch logic it used. Use the data, isLoading, and error values from useSemanticQuery to render the component. Show a loading spinner while isLoading is true. Show an error message if error is not null."
   );
   return parts.join("\n");
 }
@@ -1147,30 +1182,53 @@ function InspectorModal({
   onClose
 }) {
   const { fields: catalog, error: catalogError, isLoading: catalogLoading } = useMetrics();
-  const initialMatches = useMemo(
-    () => matchFields(entry.columns, catalog),
-    [entry.columns, catalog]
-  );
-  const [mappings, setMappings] = useState(
-    () => new Map(initialMatches.map((m) => [m.column, m.suggestedField]))
+  const analysis = useMemo(
+    () => analyzeChartData(entry.columns, entry.sampleValues),
+    [entry.columns, entry.sampleValues]
   );
+  const dimensions = catalog.filter((f) => f.type === "dimension" || f.type === "time_dimension");
+  const metrics = catalog.filter((f) => f.type === "metric");
+  const initialDimMappings = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const col of analysis.dimensionColumns) {
+      const { field } = matchField(col, dimensions);
+      map.set(col, field);
+    }
+    return map;
+  }, [analysis.dimensionColumns, dimensions]);
+  const [dimMappings, setDimMappings] = useState(initialDimMappings);
   useEffect(() => {
-    setMappings(new Map(initialMatches.map((m) => [m.column, m.suggestedField])));
-  }, [initialMatches]);
+    setDimMappings(initialDimMappings);
+  }, [initialDimMappings]);
+  const [selectedMetrics, setSelectedMetrics] = useState([]);
+  const hasTimeDim = Array.from(dimMappings.values()).some((f) => f?.type === "time_dimension");
+  const [grain, setGrain] = useState("month");
   const [copied, setCopied] = useState(false);
-  const handleFieldChange = useCallback((column, field) => {
-    setMappings((prev) => {
+  const handleDimChange = useCallback((col, field) => {
+    setDimMappings((prev) => {
       const next = new Map(prev);
-      next.set(column, field);
+      next.set(col, field);
       return next;
     });
   }, []);
+  const handleToggleMetric = useCallback((field) => {
+    setSelectedMetrics(
+      (prev) => prev.some((m) => m.name === field.name) ? prev.filter((m) => m.name !== field.name) : [...prev, field]
+    );
+  }, []);
   const handleGenerate = useCallback(async () => {
-    const fieldMappings = entry.columns.map((col) => ({
-      column: col,
-      field: mappings.get(col) ?? null
-    }));
-    const prompt = generateMigrationPrompt(entry.label, fieldMappings);
+    const resolvedDims = [];
+    for (const [col, field] of dimMappings) {
+      if (field) resolvedDims.push({ column: col, field });
+    }
+    const migrationConfig = {
+      componentLabel: entry.label,
+      dimensions: resolvedDims,
+      metrics: selectedMetrics,
+      grain: hasTimeDim && grain ? grain : null,
+      originalMetricColumns: analysis.metricColumns
+    };
+    const prompt = generateMigrationPrompt(migrationConfig);
     try {
       await navigator.clipboard.writeText(prompt);
       setCopied(true);
@@ -1185,12 +1243,8 @@ function InspectorModal({
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
     }
-  }, [entry, mappings]);
-  const confidenceMap = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const m of initialMatches) map.set(m.column, m.confidence);
-    return map;
-  }, [initialMatches]);
+  }, [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: [
@@ -1204,92 +1258,175 @@ function InspectorModal({
         ] }),
         /* @__PURE__ */ jsx("button", { onClick: onClose, style: closeBtnStyle, children: "\xD7" })
       ] }),
-      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: sectionStyle, children: [
-        /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: "Field Mapping" }),
-        /* @__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: "Confidence" }),
-            /* @__PURE__ */ jsx("th", { style: mappingThStyle, children: "Semantic Layer Field" })
+      /* @__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)) })
           ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: entry.columns.map((col) => /* @__PURE__ */ jsx(
-            MappingRow,
-            {
-              column: col,
-              confidence: confidenceMap.get(col) ?? "manual",
-              selectedField: mappings.get(col) ?? null,
-              catalog,
-              onChange: (field) => handleFieldChange(col, field)
-            },
-            col
-          )) })
+          /* @__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",
+            ")"
+          ] })
+        ] }),
+        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" })
+                ]
+              }
+            )
+          ] })
         ] }),
-        catalog.length === 0 && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#9ca3af", marginTop: 8, textAlign: "center" }, 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: "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(", "),
+              ")"
+            ] })
+          ] }),
+          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",
+              {
+                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
+                },
+                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 })
+                ]
+              },
+              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: {
+            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("button", { onClick: handleGenerate, style: generateBtnStyle, children: copied ? "Copied to clipboard!" : "Generate Migration Prompt" }) })
+      /* @__PURE__ */ jsx("div", { style: { padding: "12px 20px", borderTop: "1px solid #e5e7eb" }, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleGenerate,
+          disabled: !canGenerate,
+          style: {
+            ...generateBtnStyle,
+            opacity: canGenerate ? 1 : 0.5,
+            cursor: canGenerate ? "pointer" : "not-allowed"
+          },
+          children: copied ? "Copied to clipboard!" : "Generate Migration Prompt"
+        }
+      ) })
     ] })
   ] });
 }
-function MappingRow({
-  column,
-  confidence,
-  selectedField,
-  catalog,
-  onChange
-}) {
-  const badgeColors = {
-    exact: { bg: "#dcfce7", color: "#15803d" },
-    fuzzy: { bg: "#fef9c3", color: "#a16207" },
-    manual: { bg: "#fee2e2", color: "#dc2626" }
-  };
-  const badge = badgeColors[confidence] ?? badgeColors.manual;
-  return /* @__PURE__ */ jsxs("tr", { children: [
-    /* @__PURE__ */ jsx("td", { style: mappingTdStyle, children: /* @__PURE__ */ jsx("code", { style: { fontSize: 12, color: "#6366f1", fontFamily: "monospace" }, children: column }) }),
-    /* @__PURE__ */ jsx("td", { style: { ...mappingTdStyle, textAlign: "center" }, children: /* @__PURE__ */ jsx(
-      "span",
-      {
-        style: {
-          display: "inline-block",
-          padding: "1px 6px",
-          fontSize: 10,
-          fontWeight: 600,
-          borderRadius: 4,
-          backgroundColor: badge.bg,
-          color: badge.color
-        },
-        children: confidence
-      }
-    ) }),
-    /* @__PURE__ */ jsx("td", { style: mappingTdStyle, children: catalog.length > 0 ? /* @__PURE__ */ jsxs(
-      "select",
-      {
-        value: selectedField?.name ?? "",
-        onChange: (e) => {
-          const field = catalog.find((f) => f.name === e.target.value) ?? null;
-          onChange(field);
-        },
-        style: selectStyle2,
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "-- none --" }),
-          catalog.map((f) => /* @__PURE__ */ jsxs("option", { value: f.name, children: [
-            f.displayName,
-            " (",
-            f.type,
-            ") \u2014 ",
-            f.name
-          ] }, f.name))
-        ]
-      }
-    ) : /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#9ca3af" }, children: selectedField ? selectedField.name : "No catalog" }) })
-  ] });
-}
 var backdropStyle = {
   position: "fixed",
   inset: 0,
@@ -1302,8 +1439,8 @@ var modalStyle = {
   left: "50%",
   transform: "translate(-50%, -50%)",
   zIndex: 100001,
-  width: "min(640px, 90vw)",
-  maxHeight: "80vh",
+  width: "min(700px, 90vw)",
+  maxHeight: "85vh",
   backgroundColor: "#fff",
   borderRadius: 12,
   boxShadow: "0 8px 30px rgba(0,0,0,0.2)",
@@ -1329,9 +1466,7 @@ var closeBtnStyle = {
   lineHeight: 1
 };
 var sectionStyle = {
-  padding: "12px 20px",
-  overflow: "auto",
-  flex: 1
+  padding: "12px 20px"
 };
 var sectionTitleStyle = {
   fontSize: 11,
@@ -1339,7 +1474,7 @@ var sectionTitleStyle = {
   textTransform: "uppercase",
   letterSpacing: "0.05em",
   color: "#6b7280",
-  marginBottom: 8
+  marginBottom: 4
 };
 var previewTableStyle = {
   width: "100%",
@@ -1394,10 +1529,9 @@ var generateBtnStyle = {
   color: "#fff",
   backgroundColor: "#3b82f6",
   border: "none",
-  borderRadius: 8,
-  cursor: "pointer"
+  borderRadius: 8
 };
 
-export { AdminDashboard, DataCatalog, DataInspector, Inspectable, MetricPicker, ResultsTable, generateMigrationPrompt, matchFields };
+export { AdminDashboard, DataCatalog, DataInspector, Inspectable, MetricPicker, ResultsTable, analyzeChartData, generateMigrationPrompt, matchField, matchFields };
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map