@inkindcards/semantic-layer 2.4.0 → 2.4.1

package/dist/components.cjs

@@ -1083,6 +1083,14 @@ function generateMigrationPrompt(config) {
 }
 
 // src/components/report-prompt-generator.ts
+var TIME_PRESET_LABELS = {
+  "12m": "12 months",
+  "6m": "6 months",
+  "3m": "3 months",
+  "1m": "1 month",
+  "1w": "1 week",
+  "1d": "1 day"
+};
 var PALETTE = [
   "#3b82f6",
   "#10b981",
@@ -1140,8 +1148,19 @@ function generateReportPrompt(config) {
     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("");
+    const timeFilters = sharedFilters.filter((f) => f.dimension.type === "time_dimension" && f.timePreset);
+    const dimFilters = sharedFilters.filter((f) => f.dimension.type !== "time_dimension" || !f.timePreset);
+    if (timeFilters.length > 0) {
+      parts.push("For time filters, compute a date range relative to today:");
+      for (const f of timeFilters) {
+        parts.push(`  - "${f.dimension.name}": default to the last ${TIME_PRESET_LABELS[f.timePreset]}. Compute a start date (e.g. \`new Date(); startDate.setMonth(startDate.getMonth() - N)\`) and pass it as a filter value. Include preset buttons (${Object.values(TIME_PRESET_LABELS).join(", ")}) so the user can switch ranges.`);
+      }
+      parts.push("");
+    }
+    if (dimFilters.length > 0) {
+      parts.push("For each dimension 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("");
@@ -1296,6 +1315,13 @@ function sanitize(name) {
   return name.replace(/[^a-zA-Z0-9_]/g, "_");
 }
 var LOVABLE_CHAR_LIMIT = 5e4;
+function isRunningInIframe() {
+  try {
+    return window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
 function canOpenInLovable(prompt) {
   return prompt.length <= LOVABLE_CHAR_LIMIT;
 }
@@ -1441,16 +1467,48 @@ function UnifiedModal({
   entry,
   onClose
 }) {
+  const [dragPos, setDragPos] = react.useState(null);
+  const dragRef = react.useRef(null);
+  const modalRef = react.useRef(null);
+  const handleHeaderMouseDown = react.useCallback((e) => {
+    if (e.target.closest("button")) return;
+    e.preventDefault();
+    const modal = modalRef.current;
+    if (!modal) return;
+    const rect = modal.getBoundingClientRect();
+    dragRef.current = { startX: e.clientX, startY: e.clientY, origX: rect.left, origY: rect.top };
+    const onMove = (ev) => {
+      if (!dragRef.current) return;
+      const dx = ev.clientX - dragRef.current.startX;
+      const dy = ev.clientY - dragRef.current.startY;
+      setDragPos({ x: dragRef.current.origX + dx, y: dragRef.current.origY + dy });
+    };
+    const onUp = () => {
+      dragRef.current = null;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, []);
+  const positionStyle = dragPos ? { position: "fixed", top: dragPos.y, left: dragPos.x, transform: "none" } : { position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: onClose, style: backdropStyle }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyle, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalHeaderStyle, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 0 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TabButton, { label: "Migrate", active: tab === "migrate", onClick: () => onTabChange("migrate") }),
-          /* @__PURE__ */ jsxRuntime.jsx(TabButton, { label: "Build", active: tab === "build", onClick: () => onTabChange("build") })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, style: closeBtnStyle, children: "\xD7" })
-      ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: modalRef, style: { ...modalStyle, ...positionStyle }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          onMouseDown: handleHeaderMouseDown,
+          style: { ...modalHeaderStyle, cursor: dragRef.current ? "grabbing" : "grab" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TabButton, { label: "Migrate", active: tab === "migrate", onClick: () => onTabChange("migrate") }),
+              /* @__PURE__ */ jsxRuntime.jsx(TabButton, { label: "Build", active: tab === "build", onClick: () => onTabChange("build") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, style: closeBtnStyle, children: "\xD7" })
+          ]
+        }
+      ),
       tab === "migrate" ? /* @__PURE__ */ jsxRuntime.jsx(MigrateTab, { entry, onClose }) : /* @__PURE__ */ jsxRuntime.jsx(BuildTab, {})
     ] })
   ] });
@@ -1683,7 +1741,14 @@ var WIDGET_TYPES = [
 function BuildTab() {
   const { fields: catalog, isLoading: catalogLoading } = chunkT2C43AAL_cjs.useMetrics();
   const allMetrics = react.useMemo(() => catalog.filter((f) => f.type === "metric"), [catalog]);
-  const allDimensions = react.useMemo(() => catalog.filter((f) => f.type === "dimension" || f.type === "time_dimension"), [catalog]);
+  const allDimensions = react.useMemo(() => {
+    const dims = catalog.filter((f) => f.type === "dimension" || f.type === "time_dimension");
+    return dims.sort((a, b) => {
+      if (a.name === "metric_time") return -1;
+      if (b.name === "metric_time") return 1;
+      return 0;
+    });
+  }, [catalog]);
   const [dashboardTitle, setDashboardTitle] = react.useState("Dashboard");
   const [layout, setLayout] = react.useState("dashboard");
   const [widgets, setWidgets] = react.useState([]);
@@ -1692,29 +1757,74 @@ function BuildTab() {
   const [copied, setCopied] = react.useState(false);
   const [lovableSent, setLovableSent] = react.useState(false);
   const [previewOpen, setPreviewOpen] = react.useState(false);
+  const [catalogWidth, setCatalogWidth] = react.useState(220);
+  const catalogDragRef = react.useRef(null);
+  const inIframe = react.useMemo(() => isRunningInIframe(), []);
+  const handleCatalogDragStart = react.useCallback((e) => {
+    e.preventDefault();
+    catalogDragRef.current = { startX: e.clientX, startW: catalogWidth };
+    const onMove = (ev) => {
+      if (!catalogDragRef.current) return;
+      const delta = ev.clientX - catalogDragRef.current.startX;
+      setCatalogWidth(Math.max(160, Math.min(400, catalogDragRef.current.startW + delta)));
+    };
+    const onUp = () => {
+      catalogDragRef.current = null;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, [catalogWidth]);
   const addWidget = react.useCallback((type) => {
+    const isTimeSeries = type === "line" || type === "area" || type === "kpi";
+    const metricTime = allDimensions.find((d) => d.name === "metric_time");
     setWidgets((prev) => [...prev, {
       id: nextWidgetId(),
       title: `${WIDGET_TYPES.find((t) => t.type === type)?.label ?? "Widget"} ${prev.length + 1}`,
       type,
       metrics: [],
-      groupBy: [],
-      grain: null
+      groupBy: isTimeSeries && metricTime ? [metricTime] : [],
+      grain: isTimeSeries && metricTime ? "month" : null
     }]);
-  }, []);
+  }, [allDimensions]);
   const removeWidget = react.useCallback((id) => {
     setWidgets((prev) => prev.filter((w) => w.id !== id));
   }, []);
   const updateWidget = react.useCallback((id, patch) => {
     setWidgets((prev) => prev.map((w) => w.id === id ? { ...w, ...patch } : w));
   }, []);
+  const duplicateWidget = react.useCallback((id) => {
+    setWidgets((prev) => {
+      const source = prev.find((w) => w.id === id);
+      if (!source) return prev;
+      const copy = {
+        ...source,
+        id: nextWidgetId(),
+        title: `${source.title} (2)`,
+        metrics: [...source.metrics],
+        groupBy: [...source.groupBy]
+      };
+      const idx = prev.findIndex((w) => w.id === id);
+      return [...prev.slice(0, idx + 1), copy, ...prev.slice(idx + 1)];
+    });
+  }, []);
   const addFilter = react.useCallback((dim) => {
     if (sharedFilters.some((f) => f.dimension.name === dim.name)) return;
-    setSharedFilters((prev) => [...prev, { dimension: dim, label: dim.displayName }]);
+    setSharedFilters((prev) => [...prev, {
+      dimension: dim,
+      label: dim.displayName,
+      timePreset: dim.type === "time_dimension" ? "12m" : null
+    }]);
   }, [sharedFilters]);
   const removeFilter = react.useCallback((name) => {
     setSharedFilters((prev) => prev.filter((f) => f.dimension.name !== name));
   }, []);
+  const updateFilterPreset = react.useCallback((name, preset) => {
+    setSharedFilters((prev) => prev.map(
+      (f) => f.dimension.name === name ? { ...f, timePreset: preset } : f
+    ));
+  }, []);
   const addFieldToWidget = react.useCallback((widgetId, field) => {
     setWidgets((prev) => prev.map((w) => {
       if (w.id !== widgetId) return w;
@@ -1748,11 +1858,17 @@ function BuildTab() {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, [prompt]);
-  const handleLovable = react.useCallback(() => {
-    openInLovable(prompt);
-    setLovableSent(true);
-    setTimeout(() => setLovableSent(false), 3e3);
-  }, [prompt]);
+  const handleLovable = react.useCallback(async () => {
+    if (inIframe) {
+      await copyToClipboard(prompt);
+      setLovableSent(true);
+      setTimeout(() => setLovableSent(false), 3e3);
+    } else {
+      openInLovable(prompt);
+      setLovableSent(true);
+      setTimeout(() => setLovableSent(false), 3e3);
+    }
+  }, [prompt, inIframe]);
   const filteredMetrics = react.useMemo(() => {
     const q = catalogSearch.toLowerCase();
     if (!q) return allMetrics;
@@ -1796,7 +1912,7 @@ function BuildTab() {
         )) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flex: 1, minHeight: 0 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: 220, borderRight: "1px solid #e5e7eb", overflow: "auto", flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: catalogWidth, borderRight: "1px solid #e5e7eb", overflow: "auto", flexShrink: 0 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -1822,11 +1938,40 @@ function BuildTab() {
                 filteredDimensions.length,
                 ")"
               ] }),
-              filteredDimensions.map((f) => /* @__PURE__ */ jsxRuntime.jsx(CatalogChip, { field: f, widgets, onAddToWidget: addFieldToWidget, onAddAsFilter: addFilter }, f.name)),
+              filteredDimensions.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+                CatalogChip,
+                {
+                  field: f,
+                  widgets,
+                  onAddToWidget: addFieldToWidget,
+                  onAddAsFilter: addFilter,
+                  suffix: f.name === "metric_time" ? " (recommended)" : void 0
+                },
+                f.name
+              )),
               filteredDimensions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "#9ca3af", padding: "4px 0" }, children: "None found" })
             ] })
           ] })
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onMouseDown: handleCatalogDragStart,
+            style: {
+              width: 4,
+              cursor: "col-resize",
+              backgroundColor: "transparent",
+              flexShrink: 0,
+              position: "relative"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#d1d5db";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+            }
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflow: "auto", padding: "12px 16px" }, children: widgets.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "40px 20px", color: "#9ca3af" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, fontWeight: 500, marginBottom: 12 }, children: "Compose your dashboard" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, marginBottom: 20 }, children: "Add widgets below, then pick metrics and dimensions from the catalog on the left." }),
@@ -1838,6 +1983,7 @@ function BuildTab() {
               widget: w,
               onUpdate: updateWidget,
               onRemove: removeWidget,
+              onDuplicate: duplicateWidget,
               onRemoveField: removeFieldFromWidget,
               allDimensions
             },
@@ -1847,9 +1993,31 @@ function BuildTab() {
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 16, padding: "12px 0", borderTop: "1px solid #f3f4f6" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: sectionTitleStyle, children: "Shared Filters" }),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#d1d5db", fontStyle: "italic" }, children: "None added yet" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: sharedFilters.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("span", { style: chipStyle, children: [
-              f.label,
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => removeFilter(f.dimension.name), style: chipRemoveStyle, children: "\xD7" })
+            sharedFilters.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#d1d5db", fontStyle: "italic" }, children: "None added yet" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: sharedFilters.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: chipStyle, children: [
+                f.label,
+                /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => removeFilter(f.dimension.name), style: chipRemoveStyle, children: "\xD7" })
+              ] }) }),
+              f.dimension.type === "time_dimension" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4, marginTop: 4, marginLeft: 4 }, children: Object.keys(TIME_PRESET_LABELS).map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => updateFilterPreset(f.dimension.name, p),
+                  style: {
+                    padding: "2px 8px",
+                    fontSize: 10,
+                    fontWeight: 600,
+                    fontFamily: "system-ui, -apple-system, sans-serif",
+                    borderRadius: 999,
+                    border: f.timePreset === p ? "1px solid #3b82f6" : "1px solid #e5e7eb",
+                    backgroundColor: f.timePreset === p ? "#eff6ff" : "#fff",
+                    color: f.timePreset === p ? "#3b82f6" : "#9ca3af",
+                    cursor: "pointer",
+                    transition: "all 0.1s"
+                  },
+                  children: TIME_PRESET_LABELS[p]
+                },
+                p
+              )) })
             ] }, f.dimension.name)) })
           ] }),
           canGenerate && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12 }, children: [
@@ -1901,8 +2069,8 @@ function BuildTab() {
             gap: 6
           },
           children: [
-            lovableSent ? "Opening Lovable..." : "Build in Lovable",
-            !lovableSent && /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            lovableSent ? inIframe ? "Copied! Paste into Lovable chat" : "Opening Lovable..." : inIframe ? "Send to Lovable \u2764\uFE0F" : "Build in Lovable \u2764\uFE0F",
+            !lovableSent && !inIframe && /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
               /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 17L17 7" }),
               /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 7h10v10" })
             ] })
@@ -1916,7 +2084,8 @@ function CatalogChip({
   field,
   widgets,
   onAddToWidget,
-  onAddAsFilter
+  onAddAsFilter,
+  suffix
 }) {
   const [menuOpen, setMenuOpen] = react.useState(false);
   const typeIcon = field.type === "metric" ? "\u2581" : field.type === "time_dimension" ? "\u25F7" : "\u2022";
@@ -1958,7 +2127,10 @@ ${field.description}`,
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: typeColor, fontSize: 10, flexShrink: 0 }, children: typeIcon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: field.displayName })
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+            field.displayName,
+            suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#9ca3af", fontWeight: 400 }, children: suffix })
+          ] })
         ]
       }
     ),
@@ -2048,6 +2220,7 @@ function WidgetCard({
   widget,
   onUpdate,
   onRemove,
+  onDuplicate,
   onRemoveField,
   allDimensions
 }) {
@@ -2086,6 +2259,7 @@ function WidgetCard({
         },
         wt.type
       )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onDuplicate(widget.id), style: { background: "none", border: "none", cursor: "pointer", fontSize: 12, color: "#d1d5db", padding: "0 2px" }, title: "Duplicate widget", children: "\u2398" }),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { padding: "8px 12px" }, children: [
@@ -2144,12 +2318,9 @@ var backdropStyle = {
   zIndex: 1e5
 };
 var modalStyle = {
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
   zIndex: 100001,
   width: "min(900px, 95vw)",
+  height: "85vh",
   maxHeight: "85vh",
   backgroundColor: "#fff",
   borderRadius: 12,
@@ -2303,6 +2474,7 @@ exports.analyzeChartData = analyzeChartData;
 exports.canOpenInLovable = canOpenInLovable;
 exports.generateMigrationPrompt = generateMigrationPrompt;
 exports.generateReportPrompt = generateReportPrompt;
+exports.isRunningInIframe = isRunningInIframe;
 exports.matchField = matchField;
 exports.matchFields = matchFields;
 exports.openInLovable = openInLovable;