@nice2dev/ui-bi 1.0.21 → 1.0.22

package/dist/index.mjs

@@ -1,6 +1,1773 @@
-import { jsxs as t, jsx as e, Fragment as F } from "react/jsx-runtime";
-import { useState as S, useCallback as w, useRef as q } from "react";
-const Y = {
+import { jsx as e, jsxs as a, Fragment as $ } from "react/jsx-runtime";
+import { useContext as J, createContext as L, memo as ce, useState as D, useEffect as oe, useCallback as k, useRef as Q } from "react";
+const de = (r, i) => i, se = L(de);
+function le() {
+  return { t: J(se) };
+}
+L({
+  dir: "ltr",
+  isRTL: !1,
+  flip: (r) => r,
+  value: (r) => r.ltr
+});
+L(null);
+L(null);
+const fe = {
+  radius: "md",
+  shadow: "md",
+  fill: "solid",
+  buttonStyle: "flat",
+  inputStyle: "bordered",
+  cardStyle: "elevated",
+  badgeStyle: "solid",
+  tabStyle: "underline",
+  toggleStyle: "default",
+  tooltipStyle: "dark",
+  modalStyle: "default",
+  tableStyle: "default",
+  menuStyle: "default",
+  animation: "normal",
+  density: "normal"
+};
+L({
+  displayStyle: "default",
+  variantConfig: fe,
+  setDisplayStyle: () => {
+  }
+});
+L({});
+L({
+  direction: "ltr",
+  isRTL: !1,
+  flip: (r) => r,
+  flipStyle: (r, i) => ({ [r]: i })
+});
+L({
+  permissions: {},
+  getAccessMode: () => "full"
+});
+L(null);
+const ue = process.env.NODE_ENV === "development";
+let Z = {
+  enabled: ue,
+  slowRenderThreshold: 16
+};
+const ee = [], Y = /* @__PURE__ */ new Map(), re = /* @__PURE__ */ new Map();
+function pe() {
+  ee.length = 0, Y.clear(), re.clear();
+}
+function me(r) {
+  const i = Z.slowRenderThreshold;
+  return ee.filter((n) => n.actualDuration > i);
+}
+function B(r) {
+  return r < 1 ? `${(r * 1e3).toFixed(0)}μs` : r < 1e3 ? `${r.toFixed(2)}ms` : `${(r / 1e3).toFixed(2)}s`;
+}
+function ye() {
+  const r = Array.from(Y.values()), i = me(), n = r.reduce((u, m) => u + m.renderCount, 0), s = r.length > 0 ? r.reduce((u, m) => u + m.avgRenderTime, 0) / r.length : 0, c = Array.from(re.values());
+  return { stats: r, slowRenders: i, totalRenders: n, avgRenderTime: s, marks: c };
+}
+function be() {
+  const r = ye();
+  console.group(
+    "%c[Nice2Dev Performance Report]",
+    "color: var(--nice-info, #6366f1); font-weight: bold; font-size: 14px"
+  ), console.log(`Total renders: ${r.totalRenders}`), console.log(`Average render time: ${B(r.avgRenderTime)}`), console.log(`Slow renders: ${r.slowRenders.length}`), console.group("Component Stats"), console.table(
+    r.stats.sort((i, n) => n.totalRenderTime - i.totalRenderTime).map((i) => ({
+      Name: i.componentName,
+      Renders: i.renderCount,
+      "Avg Time": B(i.avgRenderTime),
+      "Max Time": B(i.maxRenderTime),
+      "Total Time": B(i.totalRenderTime),
+      "Slow Renders": i.slowRenderCount
+    }))
+  ), console.groupEnd(), r.slowRenders.length > 0 && (console.group("Slow Renders (last 10)"), console.table(
+    r.slowRenders.slice(-10).map((i) => ({
+      Component: i.componentName,
+      Phase: i.phase,
+      Duration: B(i.actualDuration),
+      Time: new Date(i.timestamp).toLocaleTimeString()
+    }))
+  ), console.groupEnd()), r.marks.length > 0 && (console.group("Custom Marks"), console.table(
+    r.marks.filter((i) => i.duration).map((i) => ({
+      Name: i.name,
+      Duration: B(i.duration)
+    }))
+  ), console.groupEnd()), console.groupEnd();
+}
+const he = ce(
+  ({ position: r = "bottom-right", defaultCollapsed: i = !0 }) => {
+    const [n, s] = D(i), [c, u] = D([]), [m, o] = D({ used: 0, total: 0 });
+    if (oe(() => {
+      const d = () => {
+        const l = Array.from(Y.values());
+        u(l.sort((E, T) => T.totalRenderTime - E.totalRenderTime).slice(0, 10));
+        const g = window.performance;
+        g.memory && o({
+          used: g.memory.usedJSHeapSize / 1024 / 1024,
+          total: g.memory.totalJSHeapSize / 1024 / 1024
+        });
+      };
+      d();
+      const h = setInterval(d, 2e3);
+      return () => clearInterval(h);
+    }, []), !Z.enabled)
+      return null;
+    const v = {
+      position: "fixed",
+      zIndex: 99999,
+      ...r.includes("top") ? { top: 8 } : { bottom: 8 },
+      ...r.includes("left") ? { left: 8 } : { right: 8 }
+    };
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        style: {
+          ...v,
+          background: "var(--nice-overlay-85, rgba(0, 0, 0, 0.85))",
+          color: "var(--bg-primary, #fff)",
+          borderRadius: 8,
+          fontSize: 11,
+          fontFamily: "Monaco, Consolas, monospace",
+          padding: n ? "4px 8px" : 8,
+          maxWidth: n ? "auto" : 300,
+          maxHeight: n ? "auto" : 400,
+          overflow: "auto"
+        },
+        children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              style: { cursor: "pointer", display: "flex", alignItems: "center", gap: 8 },
+              onClick: () => s((d) => !d),
+              children: [
+                /* @__PURE__ */ e("span", { style: { color: "var(--color-success, #22c55e)" }, children: "●" }),
+                /* @__PURE__ */ e("span", { children: "Profiler" }),
+                m.used > 0 && /* @__PURE__ */ a(
+                  "span",
+                  {
+                    style: {
+                      color: m.used > 100 ? "var(--color-warning, #f59e0b)" : "var(--text-muted, #64748b)"
+                    },
+                    children: [
+                      m.used.toFixed(0),
+                      "MB"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e("span", { style: { marginLeft: "auto", opacity: 0.5 }, children: n ? "▼" : "▲" })
+              ]
+            }
+          ),
+          !n && /* @__PURE__ */ a("div", { style: { marginTop: 8 }, children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  borderBottom: "1px solid var(--border-color, #333)",
+                  paddingBottom: 4,
+                  marginBottom: 8
+                },
+                children: /* @__PURE__ */ e("strong", { children: "Top Components" })
+              }
+            ),
+            c.map((d) => /* @__PURE__ */ a("div", { style: { marginBottom: 4, display: "flex", gap: 8 }, children: [
+              /* @__PURE__ */ e("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: d.componentName }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    color: d.avgRenderTime > 16 ? "var(--color-warning, #f59e0b)" : "var(--color-success, #22c55e)"
+                  },
+                  children: B(d.avgRenderTime)
+                }
+              ),
+              /* @__PURE__ */ a(
+                "span",
+                {
+                  style: { color: "var(--text-muted, #64748b)", minWidth: 30, textAlign: "right" },
+                  children: [
+                    "x",
+                    d.renderCount
+                  ]
+                }
+              )
+            ] }, d.componentName)),
+            /* @__PURE__ */ a("div", { style: { marginTop: 8, display: "flex", gap: 8 }, children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: be,
+                  style: {
+                    flex: 1,
+                    padding: "4px 8px",
+                    background: "var(--bg-tertiary, #333)",
+                    border: "none",
+                    borderRadius: 4,
+                    color: "var(--bg-primary, #fff)",
+                    cursor: "pointer",
+                    fontSize: 10
+                  },
+                  children: "Print Report"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: pe,
+                  style: {
+                    flex: 1,
+                    padding: "4px 8px",
+                    background: "var(--bg-tertiary, #333)",
+                    border: "none",
+                    borderRadius: 4,
+                    color: "var(--bg-primary, #fff)",
+                    cursor: "pointer",
+                    fontSize: 10
+                  },
+                  children: "Clear"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+he.displayName = "ProfilerOverlay";
+process.env.NODE_ENV;
+L(null);
+const ve = L({
+  enabled: !0,
+  active: !1,
+  run: () => {
+  }
+});
+function ge() {
+  return J(ve);
+}
+function X(r, i) {
+  if (!r)
+    return null;
+  if (r === !0)
+    return i && i.length > 0 ? i : null;
+  if (Array.isArray(r))
+    return r.length > 0 ? r : null;
+  const n = r.steps ?? i;
+  return n && n.length > 0 ? n : null;
+}
+function _e(r, i) {
+  return r.map((n) => ({
+    target: n.target,
+    title: n.titleKey ? i(n.titleKey, n.title ?? "") : n.title ?? "",
+    content: n.contentKey ? i(n.contentKey, n.content ?? "") : n.content ?? "",
+    placement: n.placement,
+    highlightPadding: n.highlightPadding,
+    showArrow: n.showArrow,
+    scrollIntoView: n.scrollIntoView,
+    disableInteraction: n.disableInteraction
+  }));
+}
+const K = ({
+  steps: r,
+  autoStart: i,
+  label: n,
+  size: s = "md",
+  className: c,
+  style: u,
+  "data-testid": m
+}) => {
+  const { enabled: o, run: v } = ge(), { t: d } = le();
+  if (!o || !r || r.length === 0)
+    return null;
+  const h = n ?? d("tutorial.startAria", "Start tutorial");
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: `nice-tutorial-button nice-tutorial-button--${s}` + (c ? ` ${c}` : ""),
+      style: u,
+      "data-testid": m,
+      "aria-label": h,
+      title: h,
+      onClick: () => v(_e(r, d), { autoStart: i }),
+      children: "?"
+    }
+  );
+}, j = "nice-tutorial-button-styles";
+if (typeof document < "u" && !document.getElementById(j)) {
+  const r = document.createElement("style");
+  r.id = j, r.textContent = `
+    .nice-tutorial-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--nice-border, #cbd5e1);
+      background: var(--nice-bg, #fff);
+      color: var(--nice-text-secondary, #475569);
+      border-radius: var(--nice-radius-full, 9999px);
+      cursor: help;
+      font-weight: 700;
+      line-height: 1;
+      padding: 0;
+      transition: background var(--nice-transition, 200ms ease), color var(--nice-transition, 200ms ease), border-color var(--nice-transition, 200ms ease);
+    }
+    .nice-tutorial-button:hover {
+      background: var(--nice-primary, #2563eb);
+      border-color: var(--nice-primary, #2563eb);
+      color: var(--nice-text-inverse, #fff);
+    }
+    .nice-tutorial-button:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--nice-bg, #fff), 0 0 0 4px var(--nice-primary, #2563eb);
+    }
+    .nice-tutorial-button--sm { width: 16px; height: 16px; font-size: 11px; }
+    .nice-tutorial-button--md { width: 20px; height: 20px; font-size: 12px; }
+  `, document.head.appendChild(r);
+}
+L(null);
+L(null);
+L(null);
+const ae = {
+  space1: "4px",
+  space2: "8px",
+  space3: "12px",
+  space4: "16px",
+  space5: "20px",
+  space6: "24px",
+  space8: "32px"
+}, ie = {
+  fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
+  fontSizeXs: "0.75rem",
+  fontSizeSm: "0.8125rem",
+  fontSizeMd: "0.875rem",
+  fontSizeLg: "1rem",
+  fontSizeXl: "1.125rem",
+  fontWeightNormal: 400,
+  fontWeightMedium: 500,
+  fontWeightSemibold: 600,
+  fontWeightBold: 700,
+  lineHeight: 1.5
+}, ne = { fast: "120ms ease", normal: "200ms ease", slow: "300ms ease" }, te = (r) => ({
+  color: r,
+  radiusSm: "4px",
+  radiusMd: "6px",
+  radiusLg: "8px",
+  radiusXl: "12px",
+  radiusFull: "9999px"
+}), we = {
+  sm: "0 1px 2px rgba(0,0,0,0.05)",
+  md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
+  lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
+  xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)"
+}, xe = {
+  sm: "0 1px 2px rgba(0,0,0,0.3)",
+  md: "0 4px 6px -1px rgba(0,0,0,0.4)",
+  lg: "0 10px 15px -3px rgba(0,0,0,0.4)",
+  xl: "0 20px 25px -5px rgba(0,0,0,0.4)"
+};
+function f(r, i, n, s, c) {
+  return {
+    name: r,
+    darkMode: "light",
+    colors: {
+      ...i,
+      surface: i.surface ?? n.primary,
+      surfaceHover: i.surfaceHover ?? n.secondary
+    },
+    backgrounds: {
+      ...n,
+      elevated: n.elevated ?? n.primary,
+      inset: n.inset ?? n.tertiary,
+      canvas: n.canvas ?? n.primary
+    },
+    text: { ...s, inverse: s.inverse ?? "#ffffff" },
+    borders: te(c),
+    shadows: we,
+    spacing: ae,
+    typography: ie,
+    transitions: ne
+  };
+}
+function H(r, i, n, s, c) {
+  return {
+    name: r,
+    darkMode: "dark",
+    colors: {
+      ...i,
+      surface: i.surface ?? n.secondary,
+      surfaceHover: i.surfaceHover ?? n.tertiary
+    },
+    backgrounds: {
+      ...n,
+      elevated: n.elevated ?? n.secondary,
+      inset: n.inset ?? n.primary,
+      canvas: n.canvas ?? n.primary
+    },
+    text: { ...s, inverse: s.inverse ?? "#0f172a" },
+    borders: te(c),
+    shadows: xe,
+    spacing: ae,
+    typography: ie,
+    transitions: ne
+  };
+}
+f(
+  "Slate",
+  {
+    primary: "#64748b",
+    primaryHover: "#475569",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
+  { primary: "#1e293b", secondary: "#475569", muted: "#94a3b8" },
+  "#cbd5e1"
+);
+f(
+  "Zinc",
+  {
+    primary: "#71717a",
+    primaryHover: "#52525b",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#fafafa", secondary: "#f4f4f5", tertiary: "#e4e4e7", hover: "#e4e4e7" },
+  { primary: "#18181b", secondary: "#3f3f46", muted: "#a1a1aa" },
+  "#d4d4d8"
+);
+f(
+  "Stone",
+  {
+    primary: "#78716c",
+    primaryHover: "#57534e",
+    success: "#16a34a",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fafaf9", secondary: "#f5f5f4", tertiary: "#e7e5e4", hover: "#e7e5e4" },
+  { primary: "#1c1917", secondary: "#44403c", muted: "#a8a29e" },
+  "#d6d3d1"
+);
+f(
+  "Cool Gray",
+  {
+    primary: "#6b7280",
+    primaryHover: "#4b5563",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#3b82f6"
+  },
+  { primary: "#f9fafb", secondary: "#f3f4f6", tertiary: "#e5e7eb", hover: "#e5e7eb" },
+  { primary: "#111827", secondary: "#374151", muted: "#9ca3af" },
+  "#d1d5db"
+);
+f(
+  "Warm Gray",
+  {
+    primary: "#7c7568",
+    primaryHover: "#5c564c",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#faf9f7", secondary: "#f5f4f0", tertiary: "#e8e6e1", hover: "#e8e6e1" },
+  { primary: "#1f1d19", secondary: "#4a463d", muted: "#a09888" },
+  "#d4d0c8"
+);
+f(
+  "Silver",
+  {
+    primary: "#94a3b8",
+    primaryHover: "#64748b",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#38bdf8"
+  },
+  { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
+  { primary: "#334155", secondary: "#64748b", muted: "#94a3b8" },
+  "#cbd5e1"
+);
+f(
+  "Charcoal",
+  {
+    primary: "#374151",
+    primaryHover: "#1f2937",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#f9fafb", secondary: "#f3f4f6", tertiary: "#e5e7eb", hover: "#e5e7eb" },
+  { primary: "#111827", secondary: "#374151", muted: "#6b7280" },
+  "#d1d5db"
+);
+f(
+  "Ivory",
+  {
+    primary: "#92876d",
+    primaryHover: "#7a6f55",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fffef7", secondary: "#faf6eb", tertiary: "#f0ead6", hover: "#f0ead6" },
+  { primary: "#2b2517", secondary: "#5c5340", muted: "#9c9280" },
+  "#ddd8c4"
+);
+f(
+  "Rose",
+  {
+    primary: "#e11d48",
+    primaryHover: "#be123c",
+    success: "#16a34a",
+    warning: "#ea580c",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
+  { primary: "#4c0519", secondary: "#881337", muted: "#f43f5e" },
+  "#fda4af"
+);
+f(
+  "Emerald",
+  {
+    primary: "#059669",
+    primaryHover: "#047857",
+    success: "#16a34a",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
+  { primary: "#064e3b", secondary: "#065f46", muted: "#34d399" },
+  "#6ee7b7"
+);
+f(
+  "Amber",
+  {
+    primary: "#d97706",
+    primaryHover: "#b45309",
+    success: "#16a34a",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
+  { primary: "#451a03", secondary: "#78350f", muted: "#f59e0b" },
+  "#fcd34d"
+);
+f(
+  "Violet",
+  {
+    primary: "#7c3aed",
+    primaryHover: "#6d28d9",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f5f3ff", secondary: "#ede9fe", tertiary: "#ddd6fe", hover: "#ede9fe" },
+  { primary: "#2e1065", secondary: "#4c1d95", muted: "#a78bfa" },
+  "#c4b5fd"
+);
+f(
+  "Teal",
+  {
+    primary: "#0d9488",
+    primaryHover: "#0f766e",
+    success: "#16a34a",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#f0fdfa", secondary: "#ccfbf1", tertiary: "#99f6e4", hover: "#ccfbf1" },
+  { primary: "#134e4a", secondary: "#115e59", muted: "#2dd4bf" },
+  "#5eead4"
+);
+f(
+  "Indigo",
+  {
+    primary: "#4f46e5",
+    primaryHover: "#4338ca",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#eef2ff", secondary: "#e0e7ff", tertiary: "#c7d2fe", hover: "#e0e7ff" },
+  { primary: "#1e1b4b", secondary: "#312e81", muted: "#818cf8" },
+  "#a5b4fc"
+);
+f(
+  "Cyan",
+  {
+    primary: "#0891b2",
+    primaryHover: "#0e7490",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#0284c7"
+  },
+  { primary: "#ecfeff", secondary: "#cffafe", tertiary: "#a5f3fc", hover: "#cffafe" },
+  { primary: "#164e63", secondary: "#155e75", muted: "#22d3ee" },
+  "#67e8f9"
+);
+f(
+  "Lime",
+  {
+    primary: "#65a30d",
+    primaryHover: "#4d7c0f",
+    success: "#16a34a",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#f7fee7", secondary: "#ecfccb", tertiary: "#d9f99d", hover: "#ecfccb" },
+  { primary: "#1a2e05", secondary: "#365314", muted: "#84cc16" },
+  "#bef264"
+);
+f(
+  "Pink",
+  {
+    primary: "#db2777",
+    primaryHover: "#be185d",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#dc2626",
+    info: "#06b6d4"
+  },
+  { primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
+  { primary: "#500724", secondary: "#831843", muted: "#f472b6" },
+  "#f9a8d4"
+);
+f(
+  "Orange",
+  {
+    primary: "#ea580c",
+    primaryHover: "#c2410c",
+    success: "#16a34a",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
+  { primary: "#431407", secondary: "#7c2d12", muted: "#fb923c" },
+  "#fdba74"
+);
+f(
+  "Fuchsia",
+  {
+    primary: "#c026d3",
+    primaryHover: "#a21caf",
+    success: "#10b981",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#fdf4ff", secondary: "#fae8ff", tertiary: "#f5d0fe", hover: "#fae8ff" },
+  { primary: "#4a044e", secondary: "#701a75", muted: "#d946ef" },
+  "#e879f9"
+);
+f(
+  "Sky",
+  {
+    primary: "#0284c7",
+    primaryHover: "#0369a1",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
+  { primary: "#0c4a6e", secondary: "#075985", muted: "#38bdf8" },
+  "#7dd3fc"
+);
+f(
+  "Ruby",
+  {
+    primary: "#be123c",
+    primaryHover: "#9f1239",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
+  { primary: "#4c0519", secondary: "#881337", muted: "#fb7185" },
+  "#fda4af"
+);
+f(
+  "Coral",
+  {
+    primary: "#f97316",
+    primaryHover: "#ea580c",
+    success: "#10b981",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
+  { primary: "#431407", secondary: "#9a3412", muted: "#fb923c" },
+  "#fdba74"
+);
+H(
+  "Midnight",
+  {
+    primary: "#818cf8",
+    primaryHover: "#6366f1",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#22d3ee"
+  },
+  { primary: "#020617", secondary: "#0f172a", tertiary: "#1e293b", hover: "#1e293b" },
+  { primary: "#f1f5f9", secondary: "#94a3b8", muted: "#475569" },
+  "#1e293b"
+);
+H(
+  "Obsidian",
+  {
+    primary: "#a78bfa",
+    primaryHover: "#8b5cf6",
+    success: "#4ade80",
+    warning: "#facc15",
+    error: "#fb7185",
+    info: "#38bdf8"
+  },
+  { primary: "#09090b", secondary: "#18181b", tertiary: "#27272a", hover: "#27272a" },
+  { primary: "#fafafa", secondary: "#a1a1aa", muted: "#52525b" },
+  "#3f3f46"
+);
+H(
+  "Eclipse",
+  {
+    primary: "#c084fc",
+    primaryHover: "#a855f7",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#67e8f9"
+  },
+  { primary: "#0c0a1d", secondary: "#1a1533", tertiary: "#2a2248", hover: "#2a2248" },
+  { primary: "#f5f3ff", secondary: "#a78bfa", muted: "#6d5eac" },
+  "#3b3266"
+);
+H(
+  "Onyx",
+  {
+    primary: "#60a5fa",
+    primaryHover: "#3b82f6",
+    success: "#4ade80",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#22d3ee"
+  },
+  { primary: "#000000", secondary: "#0a0a0a", tertiary: "#171717", hover: "#171717" },
+  { primary: "#ffffff", secondary: "#a3a3a3", muted: "#525252" },
+  "#262626"
+);
+H(
+  "Carbon",
+  {
+    primary: "#38bdf8",
+    primaryHover: "#0ea5e9",
+    success: "#4ade80",
+    warning: "#facc15",
+    error: "#f87171",
+    info: "#67e8f9"
+  },
+  { primary: "#161616", secondary: "#262626", tertiary: "#393939", hover: "#393939" },
+  { primary: "#f4f4f4", secondary: "#c6c6c6", muted: "#6f6f6f" },
+  "#525252"
+);
+H(
+  "Cosmos",
+  {
+    primary: "#6366f1",
+    primaryHover: "#4f46e5",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#22d3ee"
+  },
+  { primary: "#030712", secondary: "#111827", tertiary: "#1f2937", hover: "#1f2937" },
+  { primary: "#e5e7eb", secondary: "#9ca3af", muted: "#4b5563" },
+  "#374151"
+);
+H(
+  "Nebula",
+  {
+    primary: "#e879f9",
+    primaryHover: "#d946ef",
+    success: "#4ade80",
+    warning: "#fbbf24",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#0d0117", secondary: "#1a0533", tertiary: "#2d0a52", hover: "#2d0a52" },
+  { primary: "#fae8ff", secondary: "#d8b4fe", muted: "#7c3aed" },
+  "#581c87"
+);
+H(
+  "Abyss",
+  {
+    primary: "#22d3ee",
+    primaryHover: "#06b6d4",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#38bdf8"
+  },
+  { primary: "#001219", secondary: "#002a3a", tertiary: "#003e54", hover: "#003e54" },
+  { primary: "#e0f2fe", secondary: "#7dd3fc", muted: "#0369a1" },
+  "#075985"
+);
+H(
+  "Shadow",
+  {
+    primary: "#a3a3a3",
+    primaryHover: "#737373",
+    success: "#4ade80",
+    warning: "#facc15",
+    error: "#f87171",
+    info: "#38bdf8"
+  },
+  { primary: "#171717", secondary: "#1f1f1f", tertiary: "#2a2a2a", hover: "#2a2a2a" },
+  { primary: "#e5e5e5", secondary: "#a3a3a3", muted: "#525252" },
+  "#404040"
+);
+H(
+  "Emerald Dark",
+  {
+    primary: "#34d399",
+    primaryHover: "#10b981",
+    success: "#4ade80",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#22d3ee"
+  },
+  { primary: "#022c22", secondary: "#064e3b", tertiary: "#065f46", hover: "#065f46" },
+  { primary: "#ecfdf5", secondary: "#6ee7b7", muted: "#047857" },
+  "#047857"
+);
+f(
+  "Forest",
+  {
+    primary: "#166534",
+    primaryHover: "#14532d",
+    success: "#22c55e",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
+  { primary: "#052e16", secondary: "#166534", muted: "#4ade80" },
+  "#86efac"
+);
+f(
+  "Ocean",
+  {
+    primary: "#0369a1",
+    primaryHover: "#075985",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
+  { primary: "#0c4a6e", secondary: "#0369a1", muted: "#38bdf8" },
+  "#7dd3fc"
+);
+f(
+  "Desert",
+  {
+    primary: "#b45309",
+    primaryHover: "#92400e",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fefce8", secondary: "#fef9c3", tertiary: "#fef08a", hover: "#fef9c3" },
+  { primary: "#422006", secondary: "#713f12", muted: "#ca8a04" },
+  "#fde047"
+);
+f(
+  "Sunset",
+  {
+    primary: "#ea580c",
+    primaryHover: "#c2410c",
+    success: "#16a34a",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
+  { primary: "#431407", secondary: "#9a3412", muted: "#f97316" },
+  "#fdba74"
+);
+f(
+  "Aurora",
+  {
+    primary: "#0d9488",
+    primaryHover: "#0f766e",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f0fdfa", secondary: "#ccfbf1", tertiary: "#99f6e4", hover: "#ccfbf1" },
+  { primary: "#134e4a", secondary: "#115e59", muted: "#2dd4bf" },
+  "#5eead4"
+);
+f(
+  "Lavender",
+  {
+    primary: "#7e22ce",
+    primaryHover: "#6b21a8",
+    success: "#16a34a",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#faf5ff", secondary: "#f3e8ff", tertiary: "#e9d5ff", hover: "#f3e8ff" },
+  { primary: "#3b0764", secondary: "#581c87", muted: "#a855f7" },
+  "#d8b4fe"
+);
+f(
+  "Autumn",
+  {
+    primary: "#c2410c",
+    primaryHover: "#9a3412",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fef2f2", secondary: "#fee2e2", tertiary: "#fecaca", hover: "#fee2e2" },
+  { primary: "#450a0a", secondary: "#7f1d1d", muted: "#f87171" },
+  "#fca5a5"
+);
+f(
+  "Spring",
+  {
+    primary: "#16a34a",
+    primaryHover: "#15803d",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
+  { primary: "#14532d", secondary: "#166534", muted: "#4ade80" },
+  "#86efac"
+);
+f(
+  "Arctic",
+  {
+    primary: "#0ea5e9",
+    primaryHover: "#0284c7",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
+  { primary: "#0c4a6e", secondary: "#0369a1", muted: "#7dd3fc" },
+  "#bae6fd"
+);
+f(
+  "Tropical",
+  {
+    primary: "#0d9488",
+    primaryHover: "#0f766e",
+    success: "#16a34a",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
+  { primary: "#064e3b", secondary: "#065f46", muted: "#6ee7b7" },
+  "#a7f3d0"
+);
+f(
+  "Pastel Rose",
+  {
+    primary: "#f472b6",
+    primaryHover: "#ec4899",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
+  { primary: "#831843", secondary: "#9d174d", muted: "#f9a8d4" },
+  "#f9a8d4"
+);
+f(
+  "Pastel Sky",
+  {
+    primary: "#38bdf8",
+    primaryHover: "#0ea5e9",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
+  { primary: "#075985", secondary: "#0369a1", muted: "#7dd3fc" },
+  "#bae6fd"
+);
+f(
+  "Pastel Mint",
+  {
+    primary: "#34d399",
+    primaryHover: "#10b981",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
+  { primary: "#065f46", secondary: "#047857", muted: "#6ee7b7" },
+  "#a7f3d0"
+);
+f(
+  "Pastel Peach",
+  {
+    primary: "#fb923c",
+    primaryHover: "#f97316",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
+  { primary: "#7c2d12", secondary: "#9a3412", muted: "#fdba74" },
+  "#fed7aa"
+);
+f(
+  "Pastel Lavender",
+  {
+    primary: "#a78bfa",
+    primaryHover: "#8b5cf6",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#f5f3ff", secondary: "#ede9fe", tertiary: "#ddd6fe", hover: "#ede9fe" },
+  { primary: "#4c1d95", secondary: "#5b21b6", muted: "#c4b5fd" },
+  "#ddd6fe"
+);
+f(
+  "Pastel Lemon",
+  {
+    primary: "#facc15",
+    primaryHover: "#eab308",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#fefce8", secondary: "#fef9c3", tertiary: "#fef08a", hover: "#fef9c3" },
+  { primary: "#713f12", secondary: "#854d0e", muted: "#fde047" },
+  "#fef08a"
+);
+f(
+  "Pastel Sage",
+  {
+    primary: "#86efac",
+    primaryHover: "#4ade80",
+    success: "#22c55e",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
+  { primary: "#166534", secondary: "#15803d", muted: "#86efac" },
+  "#bbf7d0"
+);
+f(
+  "Pastel Coral",
+  {
+    primary: "#fb7185",
+    primaryHover: "#f43f5e",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#ef4444",
+    info: "#67e8f9"
+  },
+  { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
+  { primary: "#881337", secondary: "#9f1239", muted: "#fda4af" },
+  "#fecdd3"
+);
+f(
+  "Banking",
+  {
+    primary: "#1e3a5f",
+    primaryHover: "#152c4a",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
+  { primary: "#0f172a", secondary: "#334155", muted: "#94a3b8" },
+  "#cbd5e1"
+);
+f(
+  "Healthcare",
+  {
+    primary: "#0891b2",
+    primaryHover: "#0e7490",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#f0fdfa", secondary: "#e0f7fa", tertiary: "#b2ebf2", hover: "#e0f7fa" },
+  { primary: "#134e4a", secondary: "#1a6b6a", muted: "#80cbc4" },
+  "#b2dfdb"
+);
+f(
+  "Legal",
+  {
+    primary: "#1e293b",
+    primaryHover: "#0f172a",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#fafaf9", secondary: "#f5f5f4", tertiary: "#e7e5e4", hover: "#e7e5e4" },
+  { primary: "#0f172a", secondary: "#44403c", muted: "#a8a29e" },
+  "#d6d3d1"
+);
+f(
+  "Tech Startup",
+  {
+    primary: "#7c3aed",
+    primaryHover: "#6d28d9",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#faf5ff", secondary: "#f3e8ff", tertiary: "#e9d5ff", hover: "#f3e8ff" },
+  { primary: "#1e1b4b", secondary: "#4c1d95", muted: "#a78bfa" },
+  "#c4b5fd"
+);
+f(
+  "Enterprise",
+  {
+    primary: "#1e40af",
+    primaryHover: "#1e3a8a",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#eff6ff", secondary: "#dbeafe", tertiary: "#bfdbfe", hover: "#dbeafe" },
+  { primary: "#1e3a5f", secondary: "#1e40af", muted: "#60a5fa" },
+  "#93c5fd"
+);
+f(
+  "Government",
+  {
+    primary: "#1d4ed8",
+    primaryHover: "#1e40af",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
+  { primary: "#0f172a", secondary: "#1e293b", muted: "#64748b" },
+  "#cbd5e1"
+);
+f(
+  "Education",
+  {
+    primary: "#059669",
+    primaryHover: "#047857",
+    success: "#16a34a",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#0891b2"
+  },
+  { primary: "#f0fdf9", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
+  { primary: "#064e3b", secondary: "#065f46", muted: "#6ee7b7" },
+  "#a7f3d0"
+);
+f(
+  "Real Estate",
+  {
+    primary: "#92400e",
+    primaryHover: "#78350f",
+    success: "#059669",
+    warning: "#b45309",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
+  { primary: "#422006", secondary: "#713f12", muted: "#d97706" },
+  "#fcd34d"
+);
+f(
+  "Nord",
+  {
+    primary: "#5e81ac",
+    primaryHover: "#4c6b90",
+    success: "#a3be8c",
+    warning: "#ebcb8b",
+    error: "#bf616a",
+    info: "#88c0d0"
+  },
+  { primary: "#eceff4", secondary: "#e5e9f0", tertiary: "#d8dee9", hover: "#d8dee9" },
+  { primary: "#2e3440", secondary: "#3b4252", muted: "#4c566a" },
+  "#d8dee9"
+);
+H(
+  "Dracula",
+  {
+    primary: "#bd93f9",
+    primaryHover: "#9d79d9",
+    success: "#50fa7b",
+    warning: "#f1fa8c",
+    error: "#ff5555",
+    info: "#8be9fd"
+  },
+  { primary: "#282a36", secondary: "#343746", tertiary: "#44475a", hover: "#44475a" },
+  { primary: "#f8f8f2", secondary: "#c0c0c0", muted: "#6272a4" },
+  "#44475a"
+);
+f(
+  "Solarized Light",
+  {
+    primary: "#268bd2",
+    primaryHover: "#1a6da0",
+    success: "#859900",
+    warning: "#b58900",
+    error: "#dc322f",
+    info: "#2aa198"
+  },
+  { primary: "#fdf6e3", secondary: "#eee8d5", tertiary: "#e0dbc7", hover: "#eee8d5" },
+  { primary: "#073642", secondary: "#586e75", muted: "#93a1a1" },
+  "#eee8d5"
+);
+H(
+  "Solarized Dark",
+  {
+    primary: "#268bd2",
+    primaryHover: "#3d98db",
+    success: "#859900",
+    warning: "#b58900",
+    error: "#dc322f",
+    info: "#2aa198"
+  },
+  { primary: "#002b36", secondary: "#073642", tertiary: "#0a4858", hover: "#073642" },
+  { primary: "#eee8d5", secondary: "#93a1a1", muted: "#586e75" },
+  "#073642"
+);
+H(
+  "Monokai",
+  {
+    primary: "#66d9ef",
+    primaryHover: "#45c0d6",
+    success: "#a6e22e",
+    warning: "#e6db74",
+    error: "#f92672",
+    info: "#66d9ef"
+  },
+  { primary: "#272822", secondary: "#34352e", tertiary: "#3e3d32", hover: "#3e3d32" },
+  { primary: "#f8f8f2", secondary: "#cfcfc2", muted: "#75715e" },
+  "#3e3d32"
+);
+H(
+  "One Dark",
+  {
+    primary: "#61afef",
+    primaryHover: "#4b9ee0",
+    success: "#98c379",
+    warning: "#e5c07b",
+    error: "#e06c75",
+    info: "#56b6c2"
+  },
+  { primary: "#282c34", secondary: "#2c313a", tertiary: "#353b45", hover: "#353b45" },
+  { primary: "#abb2bf", secondary: "#828997", muted: "#545862" },
+  "#3e4452"
+);
+H(
+  "Synthwave",
+  {
+    primary: "#ff7edb",
+    primaryHover: "#e660c2",
+    success: "#72f1b8",
+    warning: "#fede5d",
+    error: "#fe4450",
+    info: "#36f9f6"
+  },
+  { primary: "#241b2f", secondary: "#2d2140", tertiary: "#362a50", hover: "#362a50" },
+  { primary: "#f0e4fc", secondary: "#b4a0cc", muted: "#6c5c84" },
+  "#4a3866"
+);
+f(
+  "Vaporwave",
+  {
+    primary: "#ff71ce",
+    primaryHover: "#e655b5",
+    success: "#78dcca",
+    warning: "#ffb86c",
+    error: "#ff5555",
+    info: "#76e8fc"
+  },
+  { primary: "#fce4f7", secondary: "#e8d0f4", tertiary: "#d4bcf0", hover: "#e8d0f4" },
+  { primary: "#4a1a4e", secondary: "#7b3f7d", muted: "#c080c0" },
+  "#d8a8e8"
+);
+H(
+  "Terminal Green",
+  {
+    primary: "#00ff41",
+    primaryHover: "#00cc34",
+    success: "#00ff41",
+    warning: "#ffff00",
+    error: "#ff0000",
+    info: "#00ffff"
+  },
+  { primary: "#0a0a0a", secondary: "#0d1a0d", tertiary: "#1a2e1a", hover: "#1a2e1a" },
+  { primary: "#00ff41", secondary: "#00cc33", muted: "#008822" },
+  "#003300"
+);
+f(
+  "Sepia",
+  {
+    primary: "#8b6914",
+    primaryHover: "#704f10",
+    success: "#6b8e23",
+    warning: "#cd853f",
+    error: "#b22222",
+    info: "#5f9ea0"
+  },
+  { primary: "#faf0e6", secondary: "#f5e6d3", tertiary: "#eddcc7", hover: "#f5e6d3" },
+  { primary: "#3e2723", secondary: "#5d4037", muted: "#a1887f" },
+  "#d7ccc8"
+);
+f(
+  "Vintage",
+  {
+    primary: "#8d6e63",
+    primaryHover: "#6d4c41",
+    success: "#66bb6a",
+    warning: "#ffb300",
+    error: "#e53935",
+    info: "#29b6f6"
+  },
+  { primary: "#efebe9", secondary: "#d7ccc8", tertiary: "#bcaaa4", hover: "#d7ccc8" },
+  { primary: "#3e2723", secondary: "#5d4037", muted: "#a1887f" },
+  "#bcaaa4"
+);
+H(
+  "Cyberpunk",
+  {
+    primary: "#00f0ff",
+    primaryHover: "#00c8d4",
+    success: "#39ff14",
+    warning: "#ffff00",
+    error: "#ff003c",
+    info: "#bf00ff"
+  },
+  { primary: "#0a0e17", secondary: "#131824", tertiary: "#1c2333", hover: "#1c2333" },
+  { primary: "#e0fbfc", secondary: "#80d4dd", muted: "#3a6b72" },
+  "#1c3a44"
+);
+H(
+  "Neon",
+  {
+    primary: "#ff00ff",
+    primaryHover: "#cc00cc",
+    success: "#00ff00",
+    warning: "#ffff00",
+    error: "#ff0000",
+    info: "#00ffff"
+  },
+  { primary: "#0d0d0d", secondary: "#1a1a1a", tertiary: "#262626", hover: "#262626" },
+  { primary: "#ffffff", secondary: "#cccccc", muted: "#666666" },
+  "#333333"
+);
+H(
+  "Retrowave",
+  {
+    primary: "#f77fbe",
+    primaryHover: "#e462a3",
+    success: "#72f1b8",
+    warning: "#ffe261",
+    error: "#ff4444",
+    info: "#79e8fb"
+  },
+  { primary: "#1b0a2e", secondary: "#261440", tertiary: "#321e52", hover: "#321e52" },
+  { primary: "#ffe6f7", secondary: "#c9a0c9", muted: "#6b4c7a" },
+  "#4a2d66"
+);
+f(
+  "Christmas",
+  {
+    primary: "#c41e3a",
+    primaryHover: "#a01830",
+    success: "#228b22",
+    warning: "#ffd700",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fef2f2", secondary: "#fde8e8", tertiary: "#f8d0d0", hover: "#fde8e8" },
+  { primary: "#3b0a0a", secondary: "#7f1d1d", muted: "#dc6868" },
+  "#e8a0a0"
+);
+H(
+  "Halloween",
+  {
+    primary: "#ff6600",
+    primaryHover: "#e05500",
+    success: "#4ade80",
+    warning: "#fbbf24",
+    error: "#ff0000",
+    info: "#9333ea"
+  },
+  { primary: "#1a0a00", secondary: "#2d1500", tertiary: "#402000", hover: "#402000" },
+  { primary: "#ffedd5", secondary: "#fdba74", muted: "#9a5c28" },
+  "#5c3400"
+);
+f(
+  "Valentine",
+  {
+    primary: "#e11d48",
+    primaryHover: "#be123c",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#dc2626",
+    info: "#ec4899"
+  },
+  { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
+  { primary: "#4c0519", secondary: "#881337", muted: "#f9a8d4" },
+  "#fda4af"
+);
+f(
+  "Easter",
+  {
+    primary: "#a78bfa",
+    primaryHover: "#8b5cf6",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#fef9ff", secondary: "#f3e8ff", tertiary: "#e8d5ff", hover: "#f3e8ff" },
+  { primary: "#581c87", secondary: "#6d28d9", muted: "#c4b5fd" },
+  "#ddd6fe"
+);
+f(
+  "Summer Beach",
+  {
+    primary: "#0ea5e9",
+    primaryHover: "#0284c7",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
+  { primary: "#0c4a6e", secondary: "#0369a1", muted: "#7dd3fc" },
+  "#fcd34d"
+);
+f(
+  "Winter Frost",
+  {
+    primary: "#3b82f6",
+    primaryHover: "#2563eb",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
+  { primary: "#1e3a5f", secondary: "#1e40af", muted: "#93c5fd" },
+  "#bfdbfe"
+);
+f(
+  "Cherry Blossom",
+  {
+    primary: "#ec4899",
+    primaryHover: "#db2777",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
+  { primary: "#831843", secondary: "#9d174d", muted: "#f9a8d4" },
+  "#fbcfe8"
+);
+f(
+  "Harvest",
+  {
+    primary: "#b45309",
+    primaryHover: "#92400e",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
+  { primary: "#451a03", secondary: "#78350f", muted: "#d97706" },
+  "#fcd34d"
+);
+f(
+  "Japanese Zen",
+  {
+    primary: "#6b7280",
+    primaryHover: "#4b5563",
+    success: "#6b8e23",
+    warning: "#d4a017",
+    error: "#c0392b",
+    info: "#5f9ea0"
+  },
+  { primary: "#faf9f6", secondary: "#f0ece3", tertiary: "#e6e0d4", hover: "#f0ece3" },
+  { primary: "#2c2c2c", secondary: "#5c5c5c", muted: "#a0998a" },
+  "#d5cec0"
+);
+f(
+  "Moroccan",
+  {
+    primary: "#c2410c",
+    primaryHover: "#9a3412",
+    success: "#15803d",
+    warning: "#ca8a04",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fffbf0", secondary: "#fef3e0", tertiary: "#fde6c4", hover: "#fef3e0" },
+  { primary: "#3a1a00", secondary: "#7c2d12", muted: "#d97706" },
+  "#f5d0a0"
+);
+f(
+  "Scandinavian",
+  {
+    primary: "#4b5563",
+    primaryHover: "#374151",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#ffffff", secondary: "#f9fafb", tertiary: "#f3f4f6", hover: "#f3f4f6" },
+  { primary: "#111827", secondary: "#374151", muted: "#9ca3af" },
+  "#e5e7eb"
+);
+f(
+  "Mediterranean",
+  {
+    primary: "#1e40af",
+    primaryHover: "#1e3a8a",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#eff6ff", secondary: "#dbeafe", tertiary: "#bfdbfe", hover: "#dbeafe" },
+  { primary: "#1e3a5f", secondary: "#2563eb", muted: "#93c5fd" },
+  "#bfdbfe"
+);
+f(
+  "Chinese New Year",
+  {
+    primary: "#dc2626",
+    primaryHover: "#b91c1c",
+    success: "#16a34a",
+    warning: "#d4a017",
+    error: "#ef4444",
+    info: "#0891b2"
+  },
+  { primary: "#fef2f2", secondary: "#fee2e2", tertiary: "#fecaca", hover: "#fee2e2" },
+  { primary: "#450a0a", secondary: "#991b1b", muted: "#f87171" },
+  "#fca5a5"
+);
+f(
+  "Indian Festive",
+  {
+    primary: "#d97706",
+    primaryHover: "#b45309",
+    success: "#16a34a",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#7c3aed"
+  },
+  { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
+  { primary: "#451a03", secondary: "#92400e", muted: "#f59e0b" },
+  "#fcd34d"
+);
+f(
+  "Brazilian Carnival",
+  {
+    primary: "#16a34a",
+    primaryHover: "#15803d",
+    success: "#22c55e",
+    warning: "#facc15",
+    error: "#ef4444",
+    info: "#0ea5e9"
+  },
+  { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
+  { primary: "#052e16", secondary: "#166534", muted: "#4ade80" },
+  "#86efac"
+);
+f(
+  "African Earth",
+  {
+    primary: "#92400e",
+    primaryHover: "#78350f",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#faf5f0", secondary: "#f0e6d6", tertiary: "#e6d5bb", hover: "#f0e6d6" },
+  { primary: "#2b1a0e", secondary: "#5c3d1e", muted: "#a08060" },
+  "#d4b896"
+);
+H(
+  "High Contrast Dark",
+  {
+    primary: "#ffff00",
+    primaryHover: "#cccc00",
+    success: "#00ff00",
+    warning: "#ff8c00",
+    error: "#ff0000",
+    info: "#00ffff"
+  },
+  { primary: "#000000", secondary: "#1a1a1a", tertiary: "#333333", hover: "#333333" },
+  { primary: "#ffffff", secondary: "#ffffff", muted: "#cccccc" },
+  "#ffffff"
+);
+f(
+  "Monochrome",
+  {
+    primary: "#404040",
+    primaryHover: "#262626",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fafafa", secondary: "#f0f0f0", tertiary: "#e0e0e0", hover: "#e0e0e0" },
+  { primary: "#1a1a1a", secondary: "#404040", muted: "#808080" },
+  "#c0c0c0"
+);
+f(
+  "Enhanced Contrast",
+  {
+    primary: "#0050b3",
+    primaryHover: "#003d8c",
+    success: "#006400",
+    warning: "#cc7000",
+    error: "#cc0000",
+    info: "#006680"
+  },
+  { primary: "#ffffff", secondary: "#f5f5f5", tertiary: "#ebebeb", hover: "#ebebeb" },
+  { primary: "#000000", secondary: "#1a1a1a", muted: "#595959" },
+  "#8c8c8c"
+);
+f(
+  "Minimalist",
+  {
+    primary: "#18181b",
+    primaryHover: "#27272a",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#3b82f6"
+  },
+  { primary: "#ffffff", secondary: "#fafafa", tertiary: "#f5f5f5", hover: "#f5f5f5" },
+  { primary: "#0a0a0a", secondary: "#404040", muted: "#a3a3a3" },
+  "#e5e5e5"
+);
+H(
+  "Warm Dark",
+  {
+    primary: "#f59e0b",
+    primaryHover: "#d97706",
+    success: "#10b981",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#38bdf8"
+  },
+  { primary: "#1c1917", secondary: "#292524", tertiary: "#44403c", hover: "#44403c" },
+  { primary: "#fafaf9", secondary: "#d6d3d1", muted: "#78716c" },
+  "#57534e"
+);
+H(
+  "Soft Dark",
+  {
+    primary: "#a78bfa",
+    primaryHover: "#8b5cf6",
+    success: "#34d399",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#1e1e2e", secondary: "#262637", tertiary: "#313147", hover: "#313147" },
+  { primary: "#e8e8f0", secondary: "#a0a0b8", muted: "#5c5c74" },
+  "#3e3e58"
+);
+f(
+  "Coffee",
+  {
+    primary: "#6f4e37",
+    primaryHover: "#5c3d28",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#faf6f1", secondary: "#f0e8dc", tertiary: "#e6d8c6", hover: "#f0e8dc" },
+  { primary: "#2c1a0e", secondary: "#5c3d28", muted: "#a08868" },
+  "#d4c4a8"
+);
+f(
+  "Wine",
+  {
+    primary: "#7f1d1d",
+    primaryHover: "#641717",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fef2f2", secondary: "#fde8e8", tertiary: "#f8d0d0", hover: "#fde8e8" },
+  { primary: "#3b0a0a", secondary: "#7f1d1d", muted: "#dc6868" },
+  "#e8a0a0"
+);
+L(null);
+const Ne = [
+  {
+    target: ".nice-report-builder",
+    titleKey: "tutorial.biReportBuilder.intro.title",
+    title: "Report builder",
+    contentKey: "tutorial.biReportBuilder.intro.content",
+    content: "Drag elements from the palette onto the report, bind them to data sources, switch design/preview, then export to PDF or Excel.",
+    placement: "auto"
+  }
+], Se = {
   id: "",
   name: "New Report",
   dataSource: "",
@@ -20,7 +1787,7 @@ const Y = {
     alternateRowColors: !0,
     gridLines: !0
   }
-}, W = [
+}, G = [
   { type: "table", label: "Table", icon: "📊" },
   { type: "chart", label: "Chart", icon: "📈" },
   { type: "text", label: "Text", icon: "📝" },
@@ -31,155 +1798,157 @@ const Y = {
   { type: "subreport", label: "Subreport", icon: "📋" },
   { type: "page-break", label: "Page Break", icon: "📄" }
 ];
-function he({
-  report: i,
-  dataSources: l = [],
-  onChange: o,
+function Qe({
+  report: r,
+  dataSources: i = [],
+  onChange: n,
   onPreview: s,
-  onExport: d,
-  className: m = ""
+  onExport: c,
+  className: u = "",
+  tutorial: m
 }) {
-  const [a, y] = S(
-    i || { ...Y, id: crypto.randomUUID() }
-  ), [r, v] = S(null), [_, p] = S("design"), [f, M] = S(null), [T, L] = S(100), b = w(
-    (n) => {
-      y((h) => {
-        const g = n(h);
-        return o == null || o(g), g;
+  const [o, v] = D(
+    r || { ...Se, id: crypto.randomUUID() }
+  ), [d, h] = D(null), [l, g] = D("design"), [E, T] = D(null), [M, N] = D(100), C = k(
+    (t) => {
+      v((b) => {
+        const _ = t(b);
+        return n == null || n(_), _;
       });
     },
-    [o]
-  ), D = w(
-    (n, h) => {
-      const g = {
+    [n]
+  ), P = k(
+    (t, b) => {
+      const _ = {
         id: crypto.randomUUID(),
-        type: n,
+        type: t,
         position: {
-          x: h.x,
-          y: h.y,
+          x: b.x,
+          y: b.y,
           width: 200,
-          height: n === "page-break" ? 20 : 100
+          height: t === "page-break" ? 20 : 100
         },
-        config: B(n),
+        config: Ce(t),
         style: {}
       };
-      b((k) => ({
-        ...k,
+      C((R) => ({
+        ...R,
         layout: {
-          ...k.layout,
-          elements: [...k.layout.elements, g]
+          ...R.layout,
+          elements: [...R.layout.elements, _]
         }
-      })), v(g);
+      })), h(_);
     },
-    [b]
-  ), z = w(
-    (n, h) => {
-      b((g) => ({
-        ...g,
+    [C]
+  ), I = k(
+    (t, b) => {
+      C((_) => ({
+        ..._,
         layout: {
-          ...g.layout,
-          elements: g.layout.elements.map(
-            (k) => k.id === n ? { ...k, ...h } : k
+          ..._.layout,
+          elements: _.layout.elements.map(
+            (R) => R.id === t ? { ...R, ...b } : R
           )
         }
-      })), (r == null ? void 0 : r.id) === n && v((g) => g ? { ...g, ...h } : null);
+      })), (d == null ? void 0 : d.id) === t && h((_) => _ ? { ..._, ...b } : null);
     },
-    [b, r]
-  ), C = w(
-    (n) => {
-      b((h) => ({
-        ...h,
+    [C, d]
+  ), S = k(
+    (t) => {
+      C((b) => ({
+        ...b,
         layout: {
-          ...h.layout,
-          elements: h.layout.elements.filter((g) => g.id !== n)
+          ...b.layout,
+          elements: b.layout.elements.filter((_) => _.id !== t)
         }
-      })), v(null);
+      })), h(null);
     },
-    [b]
-  ), E = w(
-    (n) => {
-      if (n.preventDefault(), !f)
+    [C]
+  ), z = k(
+    (t) => {
+      if (t.preventDefault(), !E)
         return;
-      const h = n.currentTarget.getBoundingClientRect(), g = (n.clientX - h.left) * (100 / T), k = (n.clientY - h.top) * (100 / T);
-      D(f, { x: g, y: k }), M(null);
+      const b = t.currentTarget.getBoundingClientRect(), _ = (t.clientX - b.left) * (100 / M), R = (t.clientY - b.top) * (100 / M);
+      P(E, { x: _, y: R }), T(null);
     },
-    [f, D, T]
-  ), P = w(() => {
-    s == null || s(a);
-  }, [a, s]), U = w(
-    (n) => {
-      d == null || d(a, n);
+    [E, P, M]
+  ), A = k(() => {
+    s == null || s(o);
+  }, [o, s]), U = k(
+    (t) => {
+      c == null || c(o, t);
     },
-    [a, d]
-  ), u = l.find((n) => n.id === a.dataSource);
-  return /* @__PURE__ */ t("div", { className: `nice-report-builder ${m}`, children: [
-    /* @__PURE__ */ t("div", { className: "nice-report-builder__toolbar", children: [
+    [o, c]
+  ), y = i.find((t) => t.id === o.dataSource);
+  return /* @__PURE__ */ a("div", { className: `nice-report-builder ${u}`, children: [
+    /* @__PURE__ */ a("div", { className: "nice-report-builder__toolbar", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
-          value: a.name,
-          onChange: (n) => b((h) => ({ ...h, name: n.target.value })),
+          value: o.name,
+          onChange: (t) => C((b) => ({ ...b, name: t.target.value })),
           className: "nice-report-builder__name-input"
         }
       ),
-      /* @__PURE__ */ e("div", { className: "nice-report-builder__tabs", children: ["design", "data", "parameters", "formatting"].map((n) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "nice-report-builder__tabs", children: ["design", "data", "parameters", "formatting"].map((t) => /* @__PURE__ */ e(
         "button",
         {
-          className: `nice-report-builder__tab ${_ === n ? "nice-report-builder__tab--active" : ""}`,
-          onClick: () => p(n),
-          children: n.charAt(0).toUpperCase() + n.slice(1)
+          className: `nice-report-builder__tab ${l === t ? "nice-report-builder__tab--active" : ""}`,
+          onClick: () => g(t),
+          children: t.charAt(0).toUpperCase() + t.slice(1)
         },
-        n
+        t
       )) }),
-      /* @__PURE__ */ t("div", { className: "nice-report-builder__zoom", children: [
-        /* @__PURE__ */ e("button", { onClick: () => L((n) => Math.max(25, n - 25)), children: "−" }),
-        /* @__PURE__ */ t("span", { children: [
-          T,
+      /* @__PURE__ */ a("div", { className: "nice-report-builder__zoom", children: [
+        /* @__PURE__ */ e("button", { onClick: () => N((t) => Math.max(25, t - 25)), children: "−" }),
+        /* @__PURE__ */ a("span", { children: [
+          M,
           "%"
         ] }),
-        /* @__PURE__ */ e("button", { onClick: () => L((n) => Math.min(200, n + 25)), children: "+" })
+        /* @__PURE__ */ e("button", { onClick: () => N((t) => Math.min(200, t + 25)), children: "+" })
       ] }),
-      /* @__PURE__ */ t("div", { className: "nice-report-builder__actions", children: [
-        /* @__PURE__ */ e("button", { onClick: P, children: "👁 Preview" }),
+      /* @__PURE__ */ a("div", { className: "nice-report-builder__actions", children: [
+        /* @__PURE__ */ e("button", { onClick: A, children: "👁 Preview" }),
         /* @__PURE__ */ e("button", { onClick: () => U("pdf"), children: "📄 PDF" }),
-        /* @__PURE__ */ e("button", { onClick: () => U("excel"), children: "📊 Excel" })
+        /* @__PURE__ */ e("button", { onClick: () => U("excel"), children: "📊 Excel" }),
+        /* @__PURE__ */ e(K, { steps: X(m, Ne) })
       ] })
     ] }),
-    /* @__PURE__ */ t("div", { className: "nice-report-builder__main", children: [
-      _ === "design" && /* @__PURE__ */ t("div", { className: "nice-report-builder__palette", children: [
+    /* @__PURE__ */ a("div", { className: "nice-report-builder__main", children: [
+      l === "design" && /* @__PURE__ */ a("div", { className: "nice-report-builder__palette", children: [
         /* @__PURE__ */ e("h4", { children: "Elements" }),
-        W.map((n) => /* @__PURE__ */ t(
+        G.map((t) => /* @__PURE__ */ a(
           "div",
           {
             className: "nice-report-builder__palette-item",
             draggable: !0,
-            onDragStart: () => M(n.type),
-            onDragEnd: () => M(null),
+            onDragStart: () => T(t.type),
+            onDragEnd: () => T(null),
             children: [
-              /* @__PURE__ */ e("span", { className: "nice-report-builder__palette-icon", children: n.icon }),
-              /* @__PURE__ */ e("span", { children: n.label })
+              /* @__PURE__ */ e("span", { className: "nice-report-builder__palette-icon", children: t.icon }),
+              /* @__PURE__ */ e("span", { children: t.label })
             ]
           },
-          n.type
+          t.type
         )),
         /* @__PURE__ */ e("h4", { children: "Data Source" }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "select",
           {
-            value: a.dataSource,
-            onChange: (n) => b((h) => ({ ...h, dataSource: n.target.value })),
+            value: o.dataSource,
+            onChange: (t) => C((b) => ({ ...b, dataSource: t.target.value })),
             children: [
               /* @__PURE__ */ e("option", { value: "", children: "Select data source..." }),
-              l.map((n) => /* @__PURE__ */ e("option", { value: n.id, children: n.name }, n.id))
+              i.map((t) => /* @__PURE__ */ e("option", { value: t.id, children: t.name }, t.id))
             ]
           }
         ),
-        (u == null ? void 0 : u.schema) && /* @__PURE__ */ t("div", { className: "nice-report-builder__fields", children: [
+        (y == null ? void 0 : y.schema) && /* @__PURE__ */ a("div", { className: "nice-report-builder__fields", children: [
           /* @__PURE__ */ e("h5", { children: "Fields" }),
-          u.schema.tables.map((n) => /* @__PURE__ */ t("div", { className: "nice-report-builder__table-fields", children: [
-            /* @__PURE__ */ e("strong", { children: n.name }),
-            n.columns.map((h) => /* @__PURE__ */ t(
+          y.schema.tables.map((t) => /* @__PURE__ */ a("div", { className: "nice-report-builder__table-fields", children: [
+            /* @__PURE__ */ e("strong", { children: t.name }),
+            t.columns.map((b) => /* @__PURE__ */ a(
               "div",
               {
                 className: "nice-report-builder__field",
@@ -187,88 +1956,88 @@ function he({
                 onDragStart: () => {
                 },
                 children: [
-                  h.name,
+                  b.name,
                   " ",
-                  /* @__PURE__ */ t("small", { children: [
+                  /* @__PURE__ */ a("small", { children: [
                     "(",
-                    h.type,
+                    b.type,
                     ")"
                   ] })
                 ]
               },
-              h.name
+              b.name
             ))
-          ] }, n.name))
+          ] }, t.name))
         ] })
       ] }),
-      _ === "design" && /* @__PURE__ */ e("div", { className: "nice-report-builder__canvas-container", children: /* @__PURE__ */ t(
+      l === "design" && /* @__PURE__ */ e("div", { className: "nice-report-builder__canvas-container", children: /* @__PURE__ */ a(
         "div",
         {
           className: "nice-report-builder__canvas",
           style: {
-            transform: `scale(${T / 100})`,
+            transform: `scale(${M / 100})`,
             transformOrigin: "top left",
-            width: a.layout.orientation === "landscape" ? "297mm" : "210mm",
-            height: a.layout.orientation === "landscape" ? "210mm" : "297mm"
+            width: o.layout.orientation === "landscape" ? "297mm" : "210mm",
+            height: o.layout.orientation === "landscape" ? "210mm" : "297mm"
           },
-          onDragOver: (n) => n.preventDefault(),
-          onDrop: E,
-          onClick: () => v(null),
+          onDragOver: (t) => t.preventDefault(),
+          onDrop: z,
+          onClick: () => h(null),
           children: [
-            a.layout.elements.map((n) => /* @__PURE__ */ e(
-              O,
+            o.layout.elements.map((t) => /* @__PURE__ */ e(
+              De,
               {
-                element: n,
-                isSelected: (r == null ? void 0 : r.id) === n.id,
-                onSelect: () => v(n),
-                onUpdate: (h) => z(n.id, h),
-                onDelete: () => C(n.id)
+                element: t,
+                isSelected: (d == null ? void 0 : d.id) === t.id,
+                onSelect: () => h(t),
+                onUpdate: (b) => I(t.id, b),
+                onDelete: () => S(t.id)
               },
-              n.id
+              t.id
             )),
-            a.layout.elements.length === 0 && /* @__PURE__ */ e("div", { className: "nice-report-builder__canvas-empty", children: "Drag elements here to build your report" })
+            o.layout.elements.length === 0 && /* @__PURE__ */ e("div", { className: "nice-report-builder__canvas-empty", children: "Drag elements here to build your report" })
           ]
         }
       ) }),
-      _ === "data" && /* @__PURE__ */ e(
-        X,
+      l === "data" && /* @__PURE__ */ e(
+        He,
         {
-          report: a,
-          dataSource: u,
-          onChange: (n) => b((h) => ({ ...h, query: n }))
+          report: o,
+          dataSource: y,
+          onChange: (t) => C((b) => ({ ...b, query: t }))
         }
       ),
-      _ === "parameters" && /* @__PURE__ */ e(
-        H,
+      l === "parameters" && /* @__PURE__ */ e(
+        ke,
         {
-          parameters: a.parameters,
-          calculations: a.calculations,
-          onChange: (n, h) => b((g) => ({ ...g, parameters: n, calculations: h }))
+          parameters: o.parameters,
+          calculations: o.calculations,
+          onChange: (t, b) => C((_) => ({ ..._, parameters: t, calculations: b }))
         }
       ),
-      _ === "formatting" && /* @__PURE__ */ e(
-        j,
+      l === "formatting" && /* @__PURE__ */ e(
+        Te,
         {
-          formatting: a.formatting,
-          grouping: a.grouping,
-          sorting: a.sorting,
-          onChange: (n, h, g) => b((k) => ({ ...k, formatting: n, grouping: h, sorting: g }))
+          formatting: o.formatting,
+          grouping: o.grouping,
+          sorting: o.sorting,
+          onChange: (t, b, _) => C((R) => ({ ...R, formatting: t, grouping: b, sorting: _ }))
         }
       ),
-      r && _ === "design" && /* @__PURE__ */ e(
-        G,
+      d && l === "design" && /* @__PURE__ */ e(
+        Re,
         {
-          element: r,
-          dataSource: u,
-          onChange: (n) => z(r.id, n),
-          onClose: () => v(null)
+          element: d,
+          dataSource: y,
+          onChange: (t) => I(d.id, t),
+          onClose: () => h(null)
         }
       )
     ] })
   ] });
 }
-function B(i) {
-  switch (i) {
+function Ce(r) {
+  switch (r) {
     case "table":
       return { columns: [], showHeader: !0, showFooter: !1 };
     case "chart":
@@ -295,66 +2064,66 @@ function B(i) {
       return {};
   }
 }
-function O({
-  element: i,
-  isSelected: l,
-  onSelect: o,
+function De({
+  element: r,
+  isSelected: i,
+  onSelect: n,
   onUpdate: s,
-  onDelete: d
+  onDelete: c
 }) {
-  var L;
-  const [m, a] = S(!1), [y, r] = S(!1), v = (b) => {
-    if (b.button !== 0)
+  var M;
+  const [u, m] = D(!1), [o, v] = D(!1), d = (N) => {
+    if (N.button !== 0)
       return;
-    b.stopPropagation(), o(), a(!0);
-    const D = b.clientX, z = b.clientY, C = { ...i.position }, E = (U) => {
-      const u = U.clientX - D, n = U.clientY - z;
+    N.stopPropagation(), n(), m(!0);
+    const C = N.clientX, P = N.clientY, I = { ...r.position }, S = (A) => {
+      const U = A.clientX - C, y = A.clientY - P;
       s({
         position: {
-          ...C,
-          x: Math.max(0, C.x + u),
-          y: Math.max(0, C.y + n)
+          ...I,
+          x: Math.max(0, I.x + U),
+          y: Math.max(0, I.y + y)
         }
       });
-    }, P = () => {
-      a(!1), window.removeEventListener("mousemove", E), window.removeEventListener("mouseup", P);
+    }, z = () => {
+      m(!1), window.removeEventListener("mousemove", S), window.removeEventListener("mouseup", z);
     };
-    window.addEventListener("mousemove", E), window.addEventListener("mouseup", P);
-  }, _ = (b, D) => {
-    b.stopPropagation(), r(!0);
-    const z = b.clientX, C = b.clientY, E = { ...i.position }, P = (u) => {
-      const n = u.clientX - z, h = u.clientY - C, g = { ...E };
-      D.includes("e") && (g.width = Math.max(50, E.width + n)), D.includes("s") && (g.height = Math.max(30, E.height + h)), D.includes("w") && (g.x = E.x + n, g.width = Math.max(50, E.width - n)), D.includes("n") && (g.y = E.y + h, g.height = Math.max(30, E.height - h)), s({ position: g });
-    }, U = () => {
-      r(!1), window.removeEventListener("mousemove", P), window.removeEventListener("mouseup", U);
+    window.addEventListener("mousemove", S), window.addEventListener("mouseup", z);
+  }, h = (N, C) => {
+    N.stopPropagation(), v(!0);
+    const P = N.clientX, I = N.clientY, S = { ...r.position }, z = (U) => {
+      const y = U.clientX - P, t = U.clientY - I, b = { ...S };
+      C.includes("e") && (b.width = Math.max(50, S.width + y)), C.includes("s") && (b.height = Math.max(30, S.height + t)), C.includes("w") && (b.x = S.x + y, b.width = Math.max(50, S.width - y)), C.includes("n") && (b.y = S.y + t, b.height = Math.max(30, S.height - t)), s({ position: b });
+    }, A = () => {
+      v(!1), window.removeEventListener("mousemove", z), window.removeEventListener("mouseup", A);
     };
-    window.addEventListener("mousemove", P), window.addEventListener("mouseup", U);
-  }, p = W.find((b) => b.type === i.type), { padding: f, ...M } = i.style ?? {}, T = typeof f == "object" && f !== null ? `${f.top}px ${f.right}px ${f.bottom}px ${f.left}px` : f;
-  return /* @__PURE__ */ t(
+    window.addEventListener("mousemove", z), window.addEventListener("mouseup", A);
+  }, l = G.find((N) => N.type === r.type), { padding: g, ...E } = r.style ?? {}, T = typeof g == "object" && g !== null ? `${g.top}px ${g.right}px ${g.bottom}px ${g.left}px` : g;
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: `nice-report-builder__element nice-report-builder__element--${i.type} ${l ? "nice-report-builder__element--selected" : ""}`,
+      className: `nice-report-builder__element nice-report-builder__element--${r.type} ${i ? "nice-report-builder__element--selected" : ""}`,
       style: {
-        left: i.position.x,
-        top: i.position.y,
-        width: i.position.width,
-        height: i.position.height,
-        ...M,
+        left: r.position.x,
+        top: r.position.y,
+        width: r.position.width,
+        height: r.position.height,
+        ...E,
         padding: T
       },
-      onMouseDown: v,
+      onMouseDown: d,
       children: [
-        /* @__PURE__ */ t("div", { className: "nice-report-builder__element-content", children: [
-          /* @__PURE__ */ e("span", { className: "nice-report-builder__element-icon", children: p == null ? void 0 : p.icon }),
-          /* @__PURE__ */ e("span", { className: "nice-report-builder__element-label", children: ((L = i.binding) == null ? void 0 : L.field) || (p == null ? void 0 : p.label) })
+        /* @__PURE__ */ a("div", { className: "nice-report-builder__element-content", children: [
+          /* @__PURE__ */ e("span", { className: "nice-report-builder__element-icon", children: l == null ? void 0 : l.icon }),
+          /* @__PURE__ */ e("span", { className: "nice-report-builder__element-label", children: ((M = r.binding) == null ? void 0 : M.field) || (l == null ? void 0 : l.label) })
         ] }),
-        l && /* @__PURE__ */ t(F, { children: [
+        i && /* @__PURE__ */ a($, { children: [
           /* @__PURE__ */ e(
             "button",
             {
               className: "nice-report-builder__element-delete",
-              onClick: (b) => {
-                b.stopPropagation(), d();
+              onClick: (N) => {
+                N.stopPropagation(), c();
               },
               children: "×"
             }
@@ -363,21 +2132,21 @@ function O({
             "div",
             {
               className: "nice-report-builder__resize-handle nice-report-builder__resize-handle--se",
-              onMouseDown: (b) => _(b, "se")
+              onMouseDown: (N) => h(N, "se")
             }
           ),
           /* @__PURE__ */ e(
             "div",
             {
               className: "nice-report-builder__resize-handle nice-report-builder__resize-handle--e",
-              onMouseDown: (b) => _(b, "e")
+              onMouseDown: (N) => h(N, "e")
             }
           ),
           /* @__PURE__ */ e(
             "div",
             {
               className: "nice-report-builder__resize-handle nice-report-builder__resize-handle--s",
-              onMouseDown: (b) => _(b, "s")
+              onMouseDown: (N) => h(N, "s")
             }
           )
         ] })
@@ -385,50 +2154,50 @@ function O({
     }
   );
 }
-function X({
-  report: i,
-  dataSource: l,
-  onChange: o
+function He({
+  report: r,
+  dataSource: i,
+  onChange: n
 }) {
-  var m, a, y, r;
-  const [s, d] = S("builder");
-  return /* @__PURE__ */ t("div", { className: "nice-report-builder__query-builder", children: [
-    /* @__PURE__ */ t("div", { className: "nice-report-builder__query-tabs", children: [
-      /* @__PURE__ */ e("button", { className: s === "builder" ? "active" : "", onClick: () => d("builder"), children: "Query Builder" }),
-      /* @__PURE__ */ e("button", { className: s === "sql" ? "active" : "", onClick: () => d("sql"), children: "SQL" })
+  var u, m, o, v;
+  const [s, c] = D("builder");
+  return /* @__PURE__ */ a("div", { className: "nice-report-builder__query-builder", children: [
+    /* @__PURE__ */ a("div", { className: "nice-report-builder__query-tabs", children: [
+      /* @__PURE__ */ e("button", { className: s === "builder" ? "active" : "", onClick: () => c("builder"), children: "Query Builder" }),
+      /* @__PURE__ */ e("button", { className: s === "sql" ? "active" : "", onClick: () => c("sql"), children: "SQL" })
     ] }),
-    s === "builder" ? /* @__PURE__ */ t("div", { className: "nice-report-builder__visual-query", children: [
+    s === "builder" ? /* @__PURE__ */ a("div", { className: "nice-report-builder__visual-query", children: [
       /* @__PURE__ */ e("h4", { children: "Tables" }),
-      (m = l == null ? void 0 : l.schema) == null ? void 0 : m.tables.map((v) => {
-        var _, p;
-        return /* @__PURE__ */ e("div", { className: "nice-report-builder__query-table", children: /* @__PURE__ */ t("label", { children: [
+      (u = i == null ? void 0 : i.schema) == null ? void 0 : u.tables.map((d) => {
+        var h, l;
+        return /* @__PURE__ */ e("div", { className: "nice-report-builder__query-table", children: /* @__PURE__ */ a("label", { children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
-              checked: ((p = (_ = i.query) == null ? void 0 : _.tables) == null ? void 0 : p.includes(v.name)) || !1,
-              onChange: (f) => {
-                var T, L;
-                const M = f.target.checked ? [...((T = i.query) == null ? void 0 : T.tables) || [], v.name] : (((L = i.query) == null ? void 0 : L.tables) || []).filter((b) => b !== v.name);
-                o({ ...i.query, type: "builder", tables: M });
+              checked: ((l = (h = r.query) == null ? void 0 : h.tables) == null ? void 0 : l.includes(d.name)) || !1,
+              onChange: (g) => {
+                var T, M;
+                const E = g.target.checked ? [...((T = r.query) == null ? void 0 : T.tables) || [], d.name] : (((M = r.query) == null ? void 0 : M.tables) || []).filter((N) => N !== d.name);
+                n({ ...r.query, type: "builder", tables: E });
               }
             }
           ),
-          v.name
-        ] }) }, v.name);
+          d.name
+        ] }) }, d.name);
       }),
       /* @__PURE__ */ e("h4", { children: "Columns" }),
-      /* @__PURE__ */ e("div", { className: "nice-report-builder__column-list", children: (y = (a = i.query) == null ? void 0 : a.tables) == null ? void 0 : y.map((v) => {
-        var p;
-        const _ = (p = l == null ? void 0 : l.schema) == null ? void 0 : p.tables.find((f) => f.name === v);
-        return _ == null ? void 0 : _.columns.map((f) => /* @__PURE__ */ t("div", { className: "nice-report-builder__column-item", children: [
+      /* @__PURE__ */ e("div", { className: "nice-report-builder__column-list", children: (o = (m = r.query) == null ? void 0 : m.tables) == null ? void 0 : o.map((d) => {
+        var l;
+        const h = (l = i == null ? void 0 : i.schema) == null ? void 0 : l.tables.find((g) => g.name === d);
+        return h == null ? void 0 : h.columns.map((g) => /* @__PURE__ */ a("div", { className: "nice-report-builder__column-item", children: [
           /* @__PURE__ */ e("input", { type: "checkbox" }),
-          /* @__PURE__ */ t("span", { children: [
-            v,
+          /* @__PURE__ */ a("span", { children: [
+            d,
             ".",
-            f.name
+            g.name
           ] }),
-          /* @__PURE__ */ t("select", { children: [
+          /* @__PURE__ */ a("select", { children: [
             /* @__PURE__ */ e("option", { value: "", children: "No aggregate" }),
             /* @__PURE__ */ e("option", { value: "sum", children: "SUM" }),
             /* @__PURE__ */ e("option", { value: "avg", children: "AVG" }),
@@ -436,56 +2205,56 @@ function X({
             /* @__PURE__ */ e("option", { value: "min", children: "MIN" }),
             /* @__PURE__ */ e("option", { value: "max", children: "MAX" })
           ] })
-        ] }, `${v}.${f.name}`));
+        ] }, `${d}.${g.name}`));
       }) })
     ] }) : /* @__PURE__ */ e("div", { className: "nice-report-builder__sql-editor", children: /* @__PURE__ */ e(
       "textarea",
       {
-        value: ((r = i.query) == null ? void 0 : r.text) || "",
-        onChange: (v) => o({ ...i.query, type: "sql", text: v.target.value }),
+        value: ((v = r.query) == null ? void 0 : v.text) || "",
+        onChange: (d) => n({ ...r.query, type: "sql", text: d.target.value }),
         placeholder: "SELECT * FROM table_name",
         rows: 15
       }
     ) })
   ] });
 }
-function H({
-  parameters: i,
-  calculations: l,
-  onChange: o
+function ke({
+  parameters: r,
+  calculations: i,
+  onChange: n
 }) {
   const s = () => {
-    const m = {
+    const u = {
       id: crypto.randomUUID(),
-      name: "param" + (i.length + 1),
-      label: "Parameter " + (i.length + 1),
+      name: "param" + (r.length + 1),
+      label: "Parameter " + (r.length + 1),
       type: "text"
     };
-    o([...i, m], l);
-  }, d = () => {
-    const m = {
+    n([...r, u], i);
+  }, c = () => {
+    const u = {
       id: crypto.randomUUID(),
-      name: "calc" + (l.length + 1),
+      name: "calc" + (i.length + 1),
       expression: ""
     };
-    o(i, [...l, m]);
+    n(r, [...i, u]);
   };
-  return /* @__PURE__ */ t("div", { className: "nice-report-builder__parameters-editor", children: [
-    /* @__PURE__ */ t("section", { children: [
-      /* @__PURE__ */ t("div", { className: "nice-report-builder__section-header", children: [
+  return /* @__PURE__ */ a("div", { className: "nice-report-builder__parameters-editor", children: [
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ a("div", { className: "nice-report-builder__section-header", children: [
         /* @__PURE__ */ e("h4", { children: "Parameters" }),
         /* @__PURE__ */ e("button", { onClick: s, children: "+ Add" })
       ] }),
-      i.map((m, a) => /* @__PURE__ */ t("div", { className: "nice-report-builder__param-row", children: [
+      r.map((u, m) => /* @__PURE__ */ a("div", { className: "nice-report-builder__param-row", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "text",
-            value: m.name,
+            value: u.name,
             placeholder: "Name",
-            onChange: (y) => {
-              const r = [...i];
-              r[a] = { ...m, name: y.target.value }, o(r, l);
+            onChange: (o) => {
+              const v = [...r];
+              v[m] = { ...u, name: o.target.value }, n(v, i);
             }
           }
         ),
@@ -493,21 +2262,21 @@ function H({
           "input",
           {
             type: "text",
-            value: m.label,
+            value: u.label,
             placeholder: "Label",
-            onChange: (y) => {
-              const r = [...i];
-              r[a] = { ...m, label: y.target.value }, o(r, l);
+            onChange: (o) => {
+              const v = [...r];
+              v[m] = { ...u, label: o.target.value }, n(v, i);
             }
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "select",
           {
-            value: m.type,
-            onChange: (y) => {
-              const r = [...i];
-              r[a] = { ...m, type: y.target.value }, o(r, l);
+            value: u.type,
+            onChange: (o) => {
+              const v = [...r];
+              v[m] = { ...u, type: o.target.value }, n(v, i);
             },
             children: [
               /* @__PURE__ */ e("option", { value: "text", children: "Text" }),
@@ -523,31 +2292,31 @@ function H({
           "button",
           {
             onClick: () => {
-              o(
-                i.filter((y) => y.id !== m.id),
-                l
+              n(
+                r.filter((o) => o.id !== u.id),
+                i
               );
             },
             children: "×"
           }
         )
-      ] }, m.id))
+      ] }, u.id))
     ] }),
-    /* @__PURE__ */ t("section", { children: [
-      /* @__PURE__ */ t("div", { className: "nice-report-builder__section-header", children: [
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ a("div", { className: "nice-report-builder__section-header", children: [
         /* @__PURE__ */ e("h4", { children: "Calculated Fields" }),
-        /* @__PURE__ */ e("button", { onClick: d, children: "+ Add" })
+        /* @__PURE__ */ e("button", { onClick: c, children: "+ Add" })
       ] }),
-      l.map((m, a) => /* @__PURE__ */ t("div", { className: "nice-report-builder__calc-row", children: [
+      i.map((u, m) => /* @__PURE__ */ a("div", { className: "nice-report-builder__calc-row", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "text",
-            value: m.name,
+            value: u.name,
             placeholder: "Name",
-            onChange: (y) => {
-              const r = [...l];
-              r[a] = { ...m, name: y.target.value }, o(i, r);
+            onChange: (o) => {
+              const v = [...i];
+              v[m] = { ...u, name: o.target.value }, n(r, v);
             }
           }
         ),
@@ -555,11 +2324,11 @@ function H({
           "input",
           {
             type: "text",
-            value: m.expression,
+            value: u.expression,
             placeholder: "Expression (e.g., [Sales] * [Quantity])",
-            onChange: (y) => {
-              const r = [...l];
-              r[a] = { ...m, expression: y.target.value }, o(i, r);
+            onChange: (o) => {
+              const v = [...i];
+              v[m] = { ...u, expression: o.target.value }, n(r, v);
             }
           }
         ),
@@ -567,57 +2336,57 @@ function H({
           "button",
           {
             onClick: () => {
-              o(
-                i,
-                l.filter((y) => y.id !== m.id)
+              n(
+                r,
+                i.filter((o) => o.id !== u.id)
               );
             },
             children: "×"
           }
         )
-      ] }, m.id))
+      ] }, u.id))
     ] })
   ] });
 }
-function j({
-  formatting: i,
-  grouping: l,
-  sorting: o,
+function Te({
+  formatting: r,
+  grouping: i,
+  sorting: n,
   onChange: s
 }) {
-  return /* @__PURE__ */ t("div", { className: "nice-report-builder__formatting-editor", children: [
-    /* @__PURE__ */ t("section", { children: [
+  return /* @__PURE__ */ a("div", { className: "nice-report-builder__formatting-editor", children: [
+    /* @__PURE__ */ a("section", { children: [
       /* @__PURE__ */ e("h4", { children: "General" }),
-      /* @__PURE__ */ t("label", { children: [
+      /* @__PURE__ */ a("label", { children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "checkbox",
-            checked: i.alternateRowColors,
-            onChange: (d) => s({ ...i, alternateRowColors: d.target.checked }, l, o)
+            checked: r.alternateRowColors,
+            onChange: (c) => s({ ...r, alternateRowColors: c.target.checked }, i, n)
           }
         ),
         "Alternate row colors"
       ] }),
-      /* @__PURE__ */ t("label", { children: [
+      /* @__PURE__ */ a("label", { children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "checkbox",
-            checked: i.gridLines,
-            onChange: (d) => s({ ...i, gridLines: d.target.checked }, l, o)
+            checked: r.gridLines,
+            onChange: (c) => s({ ...r, gridLines: c.target.checked }, i, n)
           }
         ),
         "Show grid lines"
       ] })
     ] }),
-    /* @__PURE__ */ t("section", { children: [
+    /* @__PURE__ */ a("section", { children: [
       /* @__PURE__ */ e("h4", { children: "Conditional Formatting" }),
       /* @__PURE__ */ e(
         "button",
         {
           onClick: () => {
-            const d = {
+            const c = {
               id: crypto.randomUUID(),
               condition: { column: "", operator: "gt", value: 0 },
               style: { backgroundColor: "#ffcccc" },
@@ -625,92 +2394,92 @@ function j({
             };
             s(
               {
-                ...i,
-                conditionalFormats: [...i.conditionalFormats, d]
+                ...r,
+                conditionalFormats: [...r.conditionalFormats, c]
               },
-              l,
-              o
+              i,
+              n
             );
           },
           children: "+ Add Rule"
         }
       ),
-      i.conditionalFormats.map((d) => /* @__PURE__ */ t("div", { className: "nice-report-builder__format-rule", children: [
-        /* @__PURE__ */ t("span", { children: [
+      r.conditionalFormats.map((c) => /* @__PURE__ */ a("div", { className: "nice-report-builder__format-rule", children: [
+        /* @__PURE__ */ a("span", { children: [
           "If column ",
-          d.condition.operator,
+          c.condition.operator,
           " ",
-          String(d.condition.value)
+          String(c.condition.value)
         ] }),
         /* @__PURE__ */ e(
           "input",
           {
             type: "color",
-            value: d.style.backgroundColor || "var(--nice-bg, #fff)",
-            onChange: (m) => {
+            value: c.style.backgroundColor || "var(--nice-bg, #fff)",
+            onChange: (u) => {
               s(
                 {
-                  ...i,
-                  conditionalFormats: i.conditionalFormats.map(
-                    (a) => a.id === d.id ? { ...a, style: { ...a.style, backgroundColor: m.target.value } } : a
+                  ...r,
+                  conditionalFormats: r.conditionalFormats.map(
+                    (m) => m.id === c.id ? { ...m, style: { ...m.style, backgroundColor: u.target.value } } : m
                   )
                 },
-                l,
-                o
+                i,
+                n
               );
             }
           }
         )
-      ] }, d.id))
+      ] }, c.id))
     ] })
   ] });
 }
-function G({
-  element: i,
-  dataSource: l,
-  onChange: o,
+function Re({
+  element: r,
+  dataSource: i,
+  onChange: n,
   onClose: s
 }) {
-  var d, m, a, y, r, v, _;
-  return /* @__PURE__ */ t("div", { className: "nice-report-builder__properties", children: [
-    /* @__PURE__ */ t("div", { className: "nice-report-builder__properties-header", children: [
-      /* @__PURE__ */ t("h4", { children: [
-        (d = W.find((p) => p.type === i.type)) == null ? void 0 : d.label,
+  var c, u, m, o, v, d, h;
+  return /* @__PURE__ */ a("div", { className: "nice-report-builder__properties", children: [
+    /* @__PURE__ */ a("div", { className: "nice-report-builder__properties-header", children: [
+      /* @__PURE__ */ a("h4", { children: [
+        (c = G.find((l) => l.type === r.type)) == null ? void 0 : c.label,
         " Properties"
       ] }),
       /* @__PURE__ */ e("button", { onClick: s, children: "×" })
     ] }),
-    /* @__PURE__ */ t("div", { className: "nice-report-builder__properties-content", children: [
-      /* @__PURE__ */ t("div", { className: "nice-report-builder__field", children: [
+    /* @__PURE__ */ a("div", { className: "nice-report-builder__properties-content", children: [
+      /* @__PURE__ */ a("div", { className: "nice-report-builder__field", children: [
         /* @__PURE__ */ e("label", { children: "Data Binding" }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "select",
           {
-            value: ((m = i.binding) == null ? void 0 : m.field) || "",
-            onChange: (p) => o({ binding: { ...i.binding, field: p.target.value } }),
+            value: ((u = r.binding) == null ? void 0 : u.field) || "",
+            onChange: (l) => n({ binding: { ...r.binding, field: l.target.value } }),
             children: [
               /* @__PURE__ */ e("option", { value: "", children: "None" }),
-              (a = l == null ? void 0 : l.schema) == null ? void 0 : a.tables.flatMap(
-                (p) => p.columns.map((f) => /* @__PURE__ */ t("option", { value: `${p.name}.${f.name}`, children: [
-                  p.name,
+              (m = i == null ? void 0 : i.schema) == null ? void 0 : m.tables.flatMap(
+                (l) => l.columns.map((g) => /* @__PURE__ */ a("option", { value: `${l.name}.${g.name}`, children: [
+                  l.name,
                   ".",
-                  f.name
-                ] }, `${p.name}.${f.name}`))
+                  g.name
+                ] }, `${l.name}.${g.name}`))
               )
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ t("div", { className: "nice-report-builder__field", children: [
+      /* @__PURE__ */ a("div", { className: "nice-report-builder__field", children: [
         /* @__PURE__ */ e("label", { children: "Position" }),
-        /* @__PURE__ */ t("div", { className: "nice-report-builder__position-inputs", children: [
+        /* @__PURE__ */ a("div", { className: "nice-report-builder__position-inputs", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
-              value: i.position.x,
-              onChange: (p) => o({
-                position: { ...i.position, x: parseInt(p.target.value, 10) || 0 }
+              value: r.position.x,
+              onChange: (l) => n({
+                position: { ...r.position, x: parseInt(l.target.value, 10) || 0 }
               }),
               placeholder: "X"
             }
@@ -719,9 +2488,9 @@ function G({
             "input",
             {
               type: "number",
-              value: i.position.y,
-              onChange: (p) => o({
-                position: { ...i.position, y: parseInt(p.target.value, 10) || 0 }
+              value: r.position.y,
+              onChange: (l) => n({
+                position: { ...r.position, y: parseInt(l.target.value, 10) || 0 }
               }),
               placeholder: "Y"
             }
@@ -730,9 +2499,9 @@ function G({
             "input",
             {
               type: "number",
-              value: i.position.width,
-              onChange: (p) => o({
-                position: { ...i.position, width: parseInt(p.target.value, 10) || 50 }
+              value: r.position.width,
+              onChange: (l) => n({
+                position: { ...r.position, width: parseInt(l.target.value, 10) || 50 }
               }),
               placeholder: "W"
             }
@@ -741,44 +2510,44 @@ function G({
             "input",
             {
               type: "number",
-              value: i.position.height,
-              onChange: (p) => o({
-                position: { ...i.position, height: parseInt(p.target.value, 10) || 30 }
+              value: r.position.height,
+              onChange: (l) => n({
+                position: { ...r.position, height: parseInt(l.target.value, 10) || 30 }
               }),
               placeholder: "H"
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ t("div", { className: "nice-report-builder__field", children: [
+      /* @__PURE__ */ a("div", { className: "nice-report-builder__field", children: [
         /* @__PURE__ */ e("label", { children: "Background Color" }),
         /* @__PURE__ */ e(
           "input",
           {
             type: "color",
-            value: ((y = i.style) == null ? void 0 : y.backgroundColor) || "var(--nice-bg, #fff)",
-            onChange: (p) => o({ style: { ...i.style, backgroundColor: p.target.value } })
+            value: ((o = r.style) == null ? void 0 : o.backgroundColor) || "var(--nice-bg, #fff)",
+            onChange: (l) => n({ style: { ...r.style, backgroundColor: l.target.value } })
           }
         )
       ] }),
-      /* @__PURE__ */ t("div", { className: "nice-report-builder__field", children: [
+      /* @__PURE__ */ a("div", { className: "nice-report-builder__field", children: [
         /* @__PURE__ */ e("label", { children: "Border" }),
-        /* @__PURE__ */ t("div", { className: "nice-report-builder__border-inputs", children: [
+        /* @__PURE__ */ a("div", { className: "nice-report-builder__border-inputs", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "color",
-              value: ((r = i.style) == null ? void 0 : r.borderColor) || "var(--nice-text, #000000)",
-              onChange: (p) => o({ style: { ...i.style, borderColor: p.target.value } })
+              value: ((v = r.style) == null ? void 0 : v.borderColor) || "var(--nice-text, #000000)",
+              onChange: (l) => n({ style: { ...r.style, borderColor: l.target.value } })
             }
           ),
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
-              value: ((v = i.style) == null ? void 0 : v.borderWidth) || 0,
-              onChange: (p) => o({
-                style: { ...i.style, borderWidth: parseInt(p.target.value, 10) || 0 }
+              value: ((d = r.style) == null ? void 0 : d.borderWidth) || 0,
+              onChange: (l) => n({
+                style: { ...r.style, borderWidth: parseInt(l.target.value, 10) || 0 }
               }),
               placeholder: "Width",
               min: 0,
@@ -787,27 +2556,27 @@ function G({
           )
         ] })
       ] }),
-      i.type === "text" && /* @__PURE__ */ t(F, { children: [
-        /* @__PURE__ */ t("div", { className: "nice-report-builder__field", children: [
+      r.type === "text" && /* @__PURE__ */ a($, { children: [
+        /* @__PURE__ */ a("div", { className: "nice-report-builder__field", children: [
           /* @__PURE__ */ e("label", { children: "Content" }),
           /* @__PURE__ */ e(
             "textarea",
             {
-              value: i.config.content || "",
-              onChange: (p) => o({ config: { ...i.config, content: p.target.value } }),
+              value: r.config.content || "",
+              onChange: (l) => n({ config: { ...r.config, content: l.target.value } }),
               rows: 3
             }
           )
         ] }),
-        /* @__PURE__ */ t("div", { className: "nice-report-builder__field", children: [
+        /* @__PURE__ */ a("div", { className: "nice-report-builder__field", children: [
           /* @__PURE__ */ e("label", { children: "Font Size" }),
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
-              value: ((_ = i.style) == null ? void 0 : _.fontSize) || 12,
-              onChange: (p) => o({
-                style: { ...i.style, fontSize: parseInt(p.target.value, 10) || 12 }
+              value: ((h = r.style) == null ? void 0 : h.fontSize) || 12,
+              onChange: (l) => n({
+                style: { ...r.style, fontSize: parseInt(l.target.value, 10) || 12 }
               }),
               min: 8,
               max: 72
@@ -815,13 +2584,13 @@ function G({
           )
         ] })
       ] }),
-      i.type === "chart" && /* @__PURE__ */ t("div", { className: "nice-report-builder__field", children: [
+      r.type === "chart" && /* @__PURE__ */ a("div", { className: "nice-report-builder__field", children: [
         /* @__PURE__ */ e("label", { children: "Chart Type" }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "select",
           {
-            value: i.config.chartType || "bar",
-            onChange: (p) => o({ config: { ...i.config, chartType: p.target.value } }),
+            value: r.config.chartType || "bar",
+            onChange: (l) => n({ config: { ...r.config, chartType: l.target.value } }),
             children: [
               /* @__PURE__ */ e("option", { value: "bar", children: "Bar" }),
               /* @__PURE__ */ e("option", { value: "line", children: "Line" }),
@@ -835,7 +2604,16 @@ function G({
     ] })
   ] });
 }
-const Q = {
+const Ee = [
+  {
+    target: ".nice-dashboard-studio",
+    titleKey: "tutorial.dashboardStudio.intro.title",
+    title: "Dashboard studio",
+    contentKey: "tutorial.dashboardStudio.intro.content",
+    content: "Drag widgets from the palette onto the grid, bind them to data sources, add filters, then toggle Edit/View, refresh and save.",
+    placement: "auto"
+  }
+], Me = {
   id: "",
   name: "New Dashboard",
   layout: {
@@ -846,7 +2624,7 @@ const Q = {
   },
   widgets: [],
   filters: []
-}, V = [
+}, q = [
   { type: "chart", label: "Chart", icon: "📈", category: "Visualization" },
   { type: "table", label: "Table", icon: "📊", category: "Visualization" },
   { type: "card", label: "KPI Card", icon: "🎯", category: "Visualization" },
@@ -862,176 +2640,178 @@ const Q = {
   { type: "text", label: "Text", icon: "📝", category: "Layout" },
   { type: "image", label: "Image", icon: "🖼️", category: "Layout" }
 ];
-function pe({
-  dashboard: i,
-  dataSources: l = [],
-  onChange: o,
+function Ze({
+  dashboard: r,
+  dataSources: i = [],
+  onChange: n,
   onWidgetAdd: s,
-  onRefresh: d,
-  className: m = ""
+  onRefresh: c,
+  className: u = "",
+  tutorial: m
 }) {
-  const [a, y] = S(
-    i || { ...Q, id: crypto.randomUUID() }
-  ), [r, v] = S(null), [_, p] = S(!0), [f, M] = S(null), [T, L] = S(!0), b = q(null), D = w(
-    (u) => {
-      y((n) => {
-        const h = u(n);
-        return o == null || o(h), h;
+  const [o, v] = D(
+    r || { ...Me, id: crypto.randomUUID() }
+  ), [d, h] = D(null), [l, g] = D(!0), [E, T] = D(null), [M, N] = D(!0), C = Q(null), P = k(
+    (y) => {
+      v((t) => {
+        const b = y(t);
+        return n == null || n(b), b;
       });
     },
-    [o]
-  ), z = w(
-    (u, n) => {
-      var g;
-      const h = {
+    [n]
+  ), I = k(
+    (y, t) => {
+      var _;
+      const b = {
         id: crypto.randomUUID(),
-        type: u,
-        title: ((g = V.find((k) => k.type === u)) == null ? void 0 : g.label) || u,
+        type: y,
+        title: ((_ = q.find((R) => R.type === y)) == null ? void 0 : _.label) || y,
         position: {
-          x: (n == null ? void 0 : n.x) ?? 0,
-          y: (n == null ? void 0 : n.y) ?? K(a.widgets),
-          width: (n == null ? void 0 : n.width) ?? J(u),
-          height: (n == null ? void 0 : n.height) ?? Z(u)
+          x: (t == null ? void 0 : t.x) ?? 0,
+          y: (t == null ? void 0 : t.y) ?? Pe(o.widgets),
+          width: (t == null ? void 0 : t.width) ?? Le(y),
+          height: (t == null ? void 0 : t.height) ?? Ie(y)
         },
-        config: ee(u)
+        config: ze(y)
       };
-      D((k) => ({
-        ...k,
-        widgets: [...k.widgets, h]
-      })), v(h), s == null || s(u);
+      P((R) => ({
+        ...R,
+        widgets: [...R.widgets, b]
+      })), h(b), s == null || s(y);
     },
-    [a.widgets, D, s]
-  ), C = w(
-    (u, n) => {
-      D((h) => ({
-        ...h,
-        widgets: h.widgets.map((g) => g.id === u ? { ...g, ...n } : g)
-      })), (r == null ? void 0 : r.id) === u && v((h) => h ? { ...h, ...n } : null);
+    [o.widgets, P, s]
+  ), S = k(
+    (y, t) => {
+      P((b) => ({
+        ...b,
+        widgets: b.widgets.map((_) => _.id === y ? { ..._, ...t } : _)
+      })), (d == null ? void 0 : d.id) === y && h((b) => b ? { ...b, ...t } : null);
     },
-    [D, r]
-  ), E = w(
-    (u) => {
-      D((n) => ({
-        ...n,
-        widgets: n.widgets.filter((h) => h.id !== u)
-      })), v(null);
+    [P, d]
+  ), z = k(
+    (y) => {
+      P((t) => ({
+        ...t,
+        widgets: t.widgets.filter((b) => b.id !== y)
+      })), h(null);
     },
-    [D]
-  ), P = w(
-    (u) => {
-      if (u.preventDefault(), !f || !b.current)
+    [P]
+  ), A = k(
+    (y) => {
+      if (y.preventDefault(), !E || !C.current)
         return;
-      const n = b.current.getBoundingClientRect(), h = n.width / (a.layout.columns || 12), g = Math.floor((u.clientX - n.left) / h), k = Math.floor((u.clientY - n.top) / (a.layout.rowHeight || 50));
-      z(f, { x: g, y: k }), M(null);
+      const t = C.current.getBoundingClientRect(), b = t.width / (o.layout.columns || 12), _ = Math.floor((y.clientX - t.left) / b), R = Math.floor((y.clientY - t.top) / (o.layout.rowHeight || 50));
+      I(E, { x: _, y: R }), T(null);
     },
-    [f, a.layout, z]
-  ), U = w(() => {
-    d == null || d();
-  }, [d]);
-  return /* @__PURE__ */ t("div", { className: `nice-dashboard-studio ${m}`, children: [
-    /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__toolbar", children: [
+    [E, o.layout, I]
+  ), U = k(() => {
+    c == null || c();
+  }, [c]);
+  return /* @__PURE__ */ a("div", { className: `nice-dashboard-studio ${u}`, children: [
+    /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__toolbar", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
-          value: a.name,
-          onChange: (u) => D((n) => ({ ...n, name: u.target.value })),
+          value: o.name,
+          onChange: (y) => P((t) => ({ ...t, name: y.target.value })),
           className: "nice-dashboard-studio__name-input",
-          disabled: !_
+          disabled: !l
         }
       ),
-      /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__actions", children: [
+      /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__actions", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            className: `nice-dashboard-studio__action ${_ ? "active" : ""}`,
-            onClick: () => p(!_),
-            children: _ ? "✏️ Editing" : "👁 Viewing"
+            className: `nice-dashboard-studio__action ${l ? "active" : ""}`,
+            onClick: () => g(!l),
+            children: l ? "✏️ Editing" : "👁 Viewing"
           }
         ),
-        /* @__PURE__ */ t("button", { onClick: () => L(!T), children: [
+        /* @__PURE__ */ a("button", { onClick: () => N(!M), children: [
           "🔍 Filters ",
-          T ? "▲" : "▼"
+          M ? "▲" : "▼"
         ] }),
         /* @__PURE__ */ e("button", { onClick: U, children: "🔄 Refresh" }),
         /* @__PURE__ */ e("button", { children: "📤 Share" }),
-        /* @__PURE__ */ e("button", { children: "💾 Save" })
+        /* @__PURE__ */ e("button", { children: "💾 Save" }),
+        /* @__PURE__ */ e(K, { steps: X(m, Ee) })
       ] })
     ] }),
-    T && a.filters.length > 0 && /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__filters-bar", children: a.filters.map((u) => /* @__PURE__ */ e(ne, { filter: u }, u.id)) }),
-    /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__main", children: [
-      _ && /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__palette", children: [
+    M && o.filters.length > 0 && /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__filters-bar", children: o.filters.map((y) => /* @__PURE__ */ e(Fe, { filter: y }, y.id)) }),
+    /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__main", children: [
+      l && /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__palette", children: [
         /* @__PURE__ */ e("h4", { children: "Widgets" }),
-        ["Visualization", "Controls", "Layout"].map((u) => /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__category", children: [
-          /* @__PURE__ */ e("h5", { children: u }),
-          V.filter((n) => n.category === u).map((n) => /* @__PURE__ */ t(
+        ["Visualization", "Controls", "Layout"].map((y) => /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__category", children: [
+          /* @__PURE__ */ e("h5", { children: y }),
+          q.filter((t) => t.category === y).map((t) => /* @__PURE__ */ a(
             "div",
             {
               className: "nice-dashboard-studio__palette-item",
               draggable: !0,
-              onDragStart: () => M(n.type),
-              onDragEnd: () => M(null),
+              onDragStart: () => T(t.type),
+              onDragEnd: () => T(null),
               children: [
-                /* @__PURE__ */ e("span", { className: "nice-dashboard-studio__palette-icon", children: n.icon }),
-                /* @__PURE__ */ e("span", { children: n.label })
+                /* @__PURE__ */ e("span", { className: "nice-dashboard-studio__palette-icon", children: t.icon }),
+                /* @__PURE__ */ e("span", { children: t.label })
               ]
             },
-            n.type
+            t.type
           ))
-        ] }, u)),
+        ] }, y)),
         /* @__PURE__ */ e("h4", { children: "Data Sources" }),
-        l.map((u) => /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__datasource", children: /* @__PURE__ */ t("span", { children: [
+        i.map((y) => /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__datasource", children: /* @__PURE__ */ a("span", { children: [
           "🗄️ ",
-          u.name
-        ] }) }, u.id))
+          y.name
+        ] }) }, y.id))
       ] }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ a(
         "div",
         {
-          ref: b,
-          className: `nice-dashboard-studio__grid ${_ ? "nice-dashboard-studio__grid--editing" : ""}`,
+          ref: C,
+          className: `nice-dashboard-studio__grid ${l ? "nice-dashboard-studio__grid--editing" : ""}`,
           style: {
-            "--columns": a.layout.columns || 12,
-            "--row-height": `${a.layout.rowHeight || 50}px`,
-            "--gap": `${a.layout.gap || 8}px`
+            "--columns": o.layout.columns || 12,
+            "--row-height": `${o.layout.rowHeight || 50}px`,
+            "--gap": `${o.layout.gap || 8}px`
           },
-          onDragOver: (u) => u.preventDefault(),
-          onDrop: P,
-          onClick: () => v(null),
+          onDragOver: (y) => y.preventDefault(),
+          onDrop: A,
+          onClick: () => h(null),
           children: [
-            a.widgets.map((u) => /* @__PURE__ */ e(
-              ie,
+            o.widgets.map((y) => /* @__PURE__ */ e(
+              Ae,
               {
-                widget: u,
-                isSelected: (r == null ? void 0 : r.id) === u.id,
-                isEditing: _,
-                onSelect: () => v(u),
-                onUpdate: (n) => C(u.id, n),
-                onDelete: () => E(u.id)
+                widget: y,
+                isSelected: (d == null ? void 0 : d.id) === y.id,
+                isEditing: l,
+                onSelect: () => h(y),
+                onUpdate: (t) => S(y.id, t),
+                onDelete: () => z(y.id)
               },
-              u.id
+              y.id
             )),
-            a.widgets.length === 0 && _ && /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__empty", children: "Drag widgets from the palette to build your dashboard" })
+            o.widgets.length === 0 && l && /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__empty", children: "Drag widgets from the palette to build your dashboard" })
           ]
         }
       ),
-      r && _ && /* @__PURE__ */ e(
-        ae,
+      d && l && /* @__PURE__ */ e(
+        $e,
         {
-          widget: r,
-          dataSources: l,
-          onChange: (u) => C(r.id, u),
-          onClose: () => v(null)
+          widget: d,
+          dataSources: i,
+          onChange: (y) => S(d.id, y),
+          onClose: () => h(null)
         }
       )
     ] })
   ] });
 }
-function K(i) {
-  return i.length === 0 ? 0 : Math.max(...i.map((l) => l.position.y + l.position.height));
+function Pe(r) {
+  return r.length === 0 ? 0 : Math.max(...r.map((i) => i.position.y + i.position.height));
 }
-function J(i) {
-  switch (i) {
+function Le(r) {
+  switch (r) {
     case "card":
       return 3;
     case "gauge":
@@ -1050,8 +2830,8 @@ function J(i) {
       return 4;
   }
 }
-function Z(i) {
-  switch (i) {
+function Ie(r) {
+  switch (r) {
     case "card":
       return 2;
     case "gauge":
@@ -1070,8 +2850,8 @@ function Z(i) {
       return 4;
   }
 }
-function ee(i) {
-  switch (i) {
+function ze(r) {
+  switch (r) {
     case "chart":
       return { chartType: "bar", series: [], axes: [], legend: { show: !0, position: "bottom" } };
     case "table":
@@ -1094,71 +2874,71 @@ function ee(i) {
       return {};
   }
 }
-function ie({
-  widget: i,
-  isSelected: l,
-  isEditing: o,
+function Ae({
+  widget: r,
+  isSelected: i,
+  isEditing: n,
   onSelect: s,
-  onUpdate: d,
-  onDelete: m
+  onUpdate: c,
+  onDelete: u
 }) {
-  const a = (r) => {
-    if (!o || r.button !== 0)
+  const m = (v) => {
+    if (!n || v.button !== 0)
       return;
-    r.stopPropagation(), s();
-    const v = r.clientX, _ = r.clientY, p = { ...i.position }, f = (T) => {
-      const L = Math.round((T.clientX - v) / 50), b = Math.round((T.clientY - _) / 50);
-      d({
+    v.stopPropagation(), s();
+    const d = v.clientX, h = v.clientY, l = { ...r.position }, g = (T) => {
+      const M = Math.round((T.clientX - d) / 50), N = Math.round((T.clientY - h) / 50);
+      c({
         position: {
-          ...p,
-          x: Math.max(0, p.x + L),
-          y: Math.max(0, p.y + b)
+          ...l,
+          x: Math.max(0, l.x + M),
+          y: Math.max(0, l.y + N)
         }
       });
-    }, M = () => {
-      window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", M);
+    }, E = () => {
+      window.removeEventListener("mousemove", g), window.removeEventListener("mouseup", E);
     };
-    window.addEventListener("mousemove", f), window.addEventListener("mouseup", M);
-  }, y = V.find((r) => r.type === i.type);
-  return /* @__PURE__ */ t(
+    window.addEventListener("mousemove", g), window.addEventListener("mouseup", E);
+  }, o = q.find((v) => v.type === r.type);
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: `nice-dashboard-studio__widget nice-dashboard-studio__widget--${i.type} ${l ? "nice-dashboard-studio__widget--selected" : ""}`,
+      className: `nice-dashboard-studio__widget nice-dashboard-studio__widget--${r.type} ${i ? "nice-dashboard-studio__widget--selected" : ""}`,
       style: {
-        gridColumn: `${i.position.x + 1} / span ${i.position.width}`,
-        gridRow: `${i.position.y + 1} / span ${i.position.height}`
+        gridColumn: `${r.position.x + 1} / span ${r.position.width}`,
+        gridRow: `${r.position.y + 1} / span ${r.position.height}`
       },
-      onMouseDown: a,
+      onMouseDown: m,
       children: [
-        /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__widget-header", children: [
-          /* @__PURE__ */ e("span", { className: "nice-dashboard-studio__widget-icon", children: y == null ? void 0 : y.icon }),
-          /* @__PURE__ */ e("span", { className: "nice-dashboard-studio__widget-title", children: i.title }),
-          o && /* @__PURE__ */ e(
+        /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__widget-header", children: [
+          /* @__PURE__ */ e("span", { className: "nice-dashboard-studio__widget-icon", children: o == null ? void 0 : o.icon }),
+          /* @__PURE__ */ e("span", { className: "nice-dashboard-studio__widget-title", children: r.title }),
+          n && /* @__PURE__ */ e(
             "button",
             {
               className: "nice-dashboard-studio__widget-delete",
-              onClick: (r) => {
-                r.stopPropagation(), m();
+              onClick: (v) => {
+                v.stopPropagation(), u();
               },
               children: "×"
             }
           )
         ] }),
-        /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__widget-content", children: /* @__PURE__ */ e(te, { widget: i }) })
+        /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__widget-content", children: /* @__PURE__ */ e(Ue, { widget: r }) })
       ]
     }
   );
 }
-function te({ widget: i }) {
-  switch (i.type) {
+function Ue({ widget: r }) {
+  switch (r.type) {
     case "card":
-      return /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__card", children: [
-        /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__card-value", children: String(i.config.value || "0") }),
-        /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__card-label", children: String(i.config.label || "Label") })
+      return /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__card", children: [
+        /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__card-value", children: String(r.config.value || "0") }),
+        /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__card-label", children: String(r.config.label || "Label") })
       ] });
     case "gauge": {
-      const l = Number(i.config.value) || 0, o = Number(i.config.max) || 100, s = l / o * 100;
-      return /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__gauge", children: /* @__PURE__ */ t("svg", { viewBox: "0 0 100 60", children: [
+      const i = Number(r.config.value) || 0, n = Number(r.config.max) || 100, s = i / n * 100;
+      return /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__gauge", children: /* @__PURE__ */ a("svg", { viewBox: "0 0 100 60", children: [
         /* @__PURE__ */ e(
           "path",
           {
@@ -1178,27 +2958,27 @@ function te({ widget: i }) {
             strokeDasharray: `${s * 1.26} 126`
           }
         ),
-        /* @__PURE__ */ t("text", { x: "50", y: "50", textAnchor: "middle", fontSize: "16", fontWeight: "bold", children: [
-          l,
+        /* @__PURE__ */ a("text", { x: "50", y: "50", textAnchor: "middle", fontSize: "16", fontWeight: "bold", children: [
+          i,
           "%"
         ] })
       ] }) });
     }
     case "chart":
-      return /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__chart-placeholder", children: [
+      return /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__chart-placeholder", children: [
         /* @__PURE__ */ e("span", { children: "📊" }),
-        /* @__PURE__ */ t("span", { children: [
-          String(i.config.chartType || "bar"),
+        /* @__PURE__ */ a("span", { children: [
+          String(r.config.chartType || "bar"),
           " chart"
         ] })
       ] });
     case "table":
-      return /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__table-placeholder", children: [
+      return /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__table-placeholder", children: [
         /* @__PURE__ */ e("span", { children: "📋" }),
         /* @__PURE__ */ e("span", { children: "Data table" })
       ] });
     case "map":
-      return /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__map-placeholder", children: [
+      return /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__map-placeholder", children: [
         /* @__PURE__ */ e("span", { children: "🗺️" }),
         /* @__PURE__ */ e("span", { children: "Map visualization" })
       ] });
@@ -1207,95 +2987,95 @@ function te({ widget: i }) {
         "div",
         {
           className: "nice-dashboard-studio__text",
-          style: { fontSize: Number(i.config.fontSize) || 14 },
-          children: String(i.config.content || "")
+          style: { fontSize: Number(r.config.fontSize) || 14 },
+          children: String(r.config.content || "")
         }
       );
     default:
-      return /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__widget-placeholder", children: i.type });
+      return /* @__PURE__ */ e("div", { className: "nice-dashboard-studio__widget-placeholder", children: r.type });
   }
 }
-function ne({ filter: i }) {
-  const [l, o] = S(i.defaultValue);
-  switch (i.type) {
+function Fe({ filter: r }) {
+  const [i, n] = D(r.defaultValue);
+  switch (r.type) {
     case "dropdown":
-      return /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__filter", children: [
-        /* @__PURE__ */ e("label", { children: i.label }),
-        /* @__PURE__ */ e("select", { value: String(l || ""), onChange: (s) => o(s.target.value), children: /* @__PURE__ */ e("option", { value: "", children: "All" }) })
+      return /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__filter", children: [
+        /* @__PURE__ */ e("label", { children: r.label }),
+        /* @__PURE__ */ e("select", { value: String(i || ""), onChange: (s) => n(s.target.value), children: /* @__PURE__ */ e("option", { value: "", children: "All" }) })
       ] });
     case "daterange":
-      return /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__filter", children: [
-        /* @__PURE__ */ e("label", { children: i.label }),
+      return /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__filter", children: [
+        /* @__PURE__ */ e("label", { children: r.label }),
         /* @__PURE__ */ e("input", { type: "date" }),
         /* @__PURE__ */ e("span", { children: "to" }),
         /* @__PURE__ */ e("input", { type: "date" })
       ] });
     case "slider":
-      return /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__filter", children: [
-        /* @__PURE__ */ e("label", { children: i.label }),
+      return /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__filter", children: [
+        /* @__PURE__ */ e("label", { children: r.label }),
         /* @__PURE__ */ e("input", { type: "range" })
       ] });
     default:
-      return /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__filter", children: [
-        /* @__PURE__ */ e("label", { children: i.label }),
+      return /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__filter", children: [
+        /* @__PURE__ */ e("label", { children: r.label }),
         /* @__PURE__ */ e(
           "input",
           {
             type: "text",
-            value: String(l || ""),
-            onChange: (s) => o(s.target.value)
+            value: String(i || ""),
+            onChange: (s) => n(s.target.value)
           }
         )
       ] });
   }
 }
-function ae({
-  widget: i,
-  dataSources: l,
-  onChange: o,
+function $e({
+  widget: r,
+  dataSources: i,
+  onChange: n,
   onClose: s
 }) {
-  return /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__properties", children: [
-    /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__properties-header", children: [
+  return /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__properties", children: [
+    /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__properties-header", children: [
       /* @__PURE__ */ e("h4", { children: "Widget Properties" }),
       /* @__PURE__ */ e("button", { onClick: s, children: "×" })
     ] }),
-    /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__properties-content", children: [
-      /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__field", children: [
+    /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__properties-content", children: [
+      /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__field", children: [
         /* @__PURE__ */ e("label", { children: "Title" }),
         /* @__PURE__ */ e(
           "input",
           {
             type: "text",
-            value: i.title || "",
-            onChange: (d) => o({ title: d.target.value })
+            value: r.title || "",
+            onChange: (c) => n({ title: c.target.value })
           }
         )
       ] }),
-      /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__field", children: [
+      /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__field", children: [
         /* @__PURE__ */ e("label", { children: "Data Source" }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "select",
           {
-            value: i.dataSource || "",
-            onChange: (d) => o({ dataSource: d.target.value }),
+            value: r.dataSource || "",
+            onChange: (c) => n({ dataSource: c.target.value }),
             children: [
               /* @__PURE__ */ e("option", { value: "", children: "Select..." }),
-              l.map((d) => /* @__PURE__ */ e("option", { value: d.id, children: d.name }, d.id))
+              i.map((c) => /* @__PURE__ */ e("option", { value: c.id, children: c.name }, c.id))
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__field", children: [
+      /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__field", children: [
         /* @__PURE__ */ e("label", { children: "Size" }),
-        /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__size-inputs", children: [
+        /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__size-inputs", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
-              value: i.position.width,
-              onChange: (d) => o({
-                position: { ...i.position, width: parseInt(d.target.value, 10) || 1 }
+              value: r.position.width,
+              onChange: (c) => n({
+                position: { ...r.position, width: parseInt(c.target.value, 10) || 1 }
               }),
               min: 1,
               max: 12
@@ -1306,9 +3086,9 @@ function ae({
             "input",
             {
               type: "number",
-              value: i.position.height,
-              onChange: (d) => o({
-                position: { ...i.position, height: parseInt(d.target.value, 10) || 1 }
+              value: r.position.height,
+              onChange: (c) => n({
+                position: { ...r.position, height: parseInt(c.target.value, 10) || 1 }
               }),
               min: 1,
               max: 20
@@ -1316,13 +3096,13 @@ function ae({
           )
         ] })
       ] }),
-      i.type === "chart" && /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__field", children: [
+      r.type === "chart" && /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__field", children: [
         /* @__PURE__ */ e("label", { children: "Chart Type" }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "select",
           {
-            value: String(i.config.chartType || "bar"),
-            onChange: (d) => o({ config: { ...i.config, chartType: d.target.value } }),
+            value: String(r.config.chartType || "bar"),
+            onChange: (c) => n({ config: { ...r.config, chartType: c.target.value } }),
             children: [
               /* @__PURE__ */ e("option", { value: "bar", children: "Bar" }),
               /* @__PURE__ */ e("option", { value: "line", children: "Line" }),
@@ -1334,50 +3114,50 @@ function ae({
           }
         )
       ] }),
-      i.type === "card" && /* @__PURE__ */ t(F, { children: [
-        /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__field", children: [
+      r.type === "card" && /* @__PURE__ */ a($, { children: [
+        /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__field", children: [
           /* @__PURE__ */ e("label", { children: "Value Field" }),
           /* @__PURE__ */ e(
             "input",
             {
               type: "text",
-              value: String(i.config.value || ""),
-              onChange: (d) => o({ config: { ...i.config, value: d.target.value } }),
+              value: String(r.config.value || ""),
+              onChange: (c) => n({ config: { ...r.config, value: c.target.value } }),
               placeholder: "e.g., SUM(Sales)"
             }
           )
         ] }),
-        /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__field", children: [
+        /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__field", children: [
           /* @__PURE__ */ e("label", { children: "Label" }),
           /* @__PURE__ */ e(
             "input",
             {
               type: "text",
-              value: String(i.config.label || ""),
-              onChange: (d) => o({ config: { ...i.config, label: d.target.value } })
+              value: String(r.config.label || ""),
+              onChange: (c) => n({ config: { ...r.config, label: c.target.value } })
             }
           )
         ] })
       ] }),
-      i.type === "text" && /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__field", children: [
+      r.type === "text" && /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__field", children: [
         /* @__PURE__ */ e("label", { children: "Content" }),
         /* @__PURE__ */ e(
           "textarea",
           {
-            value: String(i.config.content || ""),
-            onChange: (d) => o({ config: { ...i.config, content: d.target.value } }),
+            value: String(r.config.content || ""),
+            onChange: (c) => n({ config: { ...r.config, content: c.target.value } }),
             rows: 4
           }
         )
       ] }),
-      /* @__PURE__ */ t("div", { className: "nice-dashboard-studio__field", children: [
+      /* @__PURE__ */ a("div", { className: "nice-dashboard-studio__field", children: [
         /* @__PURE__ */ e("label", { children: "Refresh Interval (seconds)" }),
         /* @__PURE__ */ e(
           "input",
           {
             type: "number",
-            value: i.refreshInterval || 0,
-            onChange: (d) => o({ refreshInterval: parseInt(d.target.value, 10) || 0 }),
+            value: r.refreshInterval || 0,
+            onChange: (c) => n({ refreshInterval: parseInt(c.target.value, 10) || 0 }),
             min: 0,
             placeholder: "0 = manual"
           }
@@ -1386,14 +3166,23 @@ function ae({
     ] })
   ] });
 }
-const le = {
+const Be = [
+  {
+    target: ".nice-etl-builder",
+    titleKey: "tutorial.etlBuilder.intro.title",
+    title: "ETL builder",
+    contentKey: "tutorial.etlBuilder.intro.content",
+    content: "Wire sources → transformations → destinations into a pipeline, switch the views, then run it and save the configuration.",
+    placement: "auto"
+  }
+], Oe = {
   id: "",
   name: "New Pipeline",
   sources: [],
   transformations: [],
   destinations: [],
   version: 1
-}, R = [
+}, V = [
   { type: "filter", label: "Filter", icon: "🔍" },
   { type: "map", label: "Map", icon: "🔄" },
   { type: "aggregate", label: "Aggregate", icon: "∑" },
@@ -1411,309 +3200,311 @@ const le = {
   { type: "cleanse", label: "Cleanse", icon: "🧹" },
   { type: "custom", label: "Custom", icon: "ƒ" }
 ];
-function me({
-  pipeline: i,
-  dataSources: l = [],
-  onChange: o,
+function er({
+  pipeline: r,
+  dataSources: i = [],
+  onChange: n,
   onRun: s,
-  onSchedule: d,
-  className: m = ""
+  onSchedule: c,
+  className: u = "",
+  tutorial: m
 }) {
-  const [a, y] = S(
-    i || { ...le, id: crypto.randomUUID() }
-  ), [r, v] = S(null), [_, p] = S("design"), [f, M] = S(!1), [T, L] = S([]), [b, D] = S(null), z = q(null), C = w(
-    (c) => {
-      y((N) => {
-        const x = c(N);
-        return o == null || o(x), x;
+  const [o, v] = D(
+    r || { ...Oe, id: crypto.randomUUID() }
+  ), [d, h] = D(null), [l, g] = D("design"), [E, T] = D(!1), [M, N] = D([]), [C, P] = D(null), I = Q(null), S = k(
+    (p) => {
+      v((w) => {
+        const x = p(w);
+        return n == null || n(x), x;
       });
     },
-    [o]
-  ), E = w(
-    (c) => {
+    [n]
+  ), z = k(
+    (p) => {
       var x;
-      const N = {
+      const w = {
         id: crypto.randomUUID(),
-        type: c.type,
-        name: c.name,
-        config: c.config,
-        schema: (x = c.schema) == null ? void 0 : x.tables[0]
+        type: p.type,
+        name: p.name,
+        config: p.config,
+        schema: (x = p.schema) == null ? void 0 : x.tables[0]
       };
-      C((I) => ({
-        ...I,
-        sources: [...I.sources, N]
+      S((F) => ({
+        ...F,
+        sources: [...F.sources, w]
       }));
     },
-    [C]
-  ), P = w(
-    (c, N) => {
-      var I;
+    [S]
+  ), A = k(
+    (p, w) => {
+      var F;
       const x = {
         id: crypto.randomUUID(),
-        type: c,
-        name: ((I = R.find(($) => $.type === c)) == null ? void 0 : I.label) || c,
+        type: p,
+        name: ((F = V.find((O) => O.type === p)) == null ? void 0 : F.label) || p,
         input: [],
         output: crypto.randomUUID(),
-        config: re(c)
+        config: Ve(p)
       };
-      C(($) => ({
-        ...$,
-        transformations: [...$.transformations, x]
-      })), v({ type: "transformation", id: x.id });
+      S((O) => ({
+        ...O,
+        transformations: [...O.transformations, x]
+      })), h({ type: "transformation", id: x.id });
     },
-    [C]
-  ), U = w(() => {
-    const c = {
+    [S]
+  ), U = k(() => {
+    const p = {
       id: crypto.randomUUID(),
       type: "database",
       name: "New Destination",
       config: {},
       writeMode: "append"
     };
-    C((N) => ({
-      ...N,
-      destinations: [...N.destinations, c]
-    })), v({ type: "destination", id: c.id });
-  }, [C]), u = w(
-    (c, N) => {
-      C((x) => {
-        switch (c) {
+    S((w) => ({
+      ...w,
+      destinations: [...w.destinations, p]
+    })), h({ type: "destination", id: p.id });
+  }, [S]), y = k(
+    (p, w) => {
+      S((x) => {
+        switch (p) {
           case "source":
-            return { ...x, sources: x.sources.filter((I) => I.id !== N) };
+            return { ...x, sources: x.sources.filter((F) => F.id !== w) };
           case "transformation":
             return {
               ...x,
-              transformations: x.transformations.filter((I) => I.id !== N)
+              transformations: x.transformations.filter((F) => F.id !== w)
             };
           case "destination":
-            return { ...x, destinations: x.destinations.filter((I) => I.id !== N) };
+            return { ...x, destinations: x.destinations.filter((F) => F.id !== w) };
           default:
             return x;
         }
-      }), v(null);
+      }), h(null);
     },
-    [C]
-  ), n = w(async () => {
+    [S]
+  ), t = k(async () => {
     if (s) {
-      M(!0);
+      T(!0);
       try {
-        const c = await s(a);
-        L((N) => [c, ...N].slice(0, 50));
+        const p = await s(o);
+        N((w) => [p, ...w].slice(0, 50));
       } finally {
-        M(!1);
+        T(!1);
       }
     }
-  }, [a, s]), h = w(
-    (c) => {
-      C((N) => ({ ...N, schedule: c })), d == null || d(a, c);
+  }, [o, s]), b = k(
+    (p) => {
+      S((w) => ({ ...w, schedule: p })), c == null || c(o, p);
     },
-    [a, C, d]
-  ), g = w(
-    (c) => {
-      if (c.preventDefault(), !!b) {
-        if (b.startsWith("transform:")) {
-          const N = b.replace("transform:", "");
-          P(N);
+    [o, S, c]
+  ), _ = k(
+    (p) => {
+      if (p.preventDefault(), !!C) {
+        if (C.startsWith("transform:")) {
+          const w = C.replace("transform:", "");
+          A(w);
         }
-        D(null);
+        P(null);
       }
     },
-    [b, P]
-  ), k = () => {
-    if (!r)
+    [C, A]
+  ), R = () => {
+    if (!d)
       return null;
-    switch (r.type) {
+    switch (d.type) {
       case "source":
-        return a.sources.find((c) => c.id === r.id);
+        return o.sources.find((p) => p.id === d.id);
       case "transformation":
-        return a.transformations.find((c) => c.id === r.id);
+        return o.transformations.find((p) => p.id === d.id);
       case "destination":
-        return a.destinations.find((c) => c.id === r.id);
+        return o.destinations.find((p) => p.id === d.id);
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ t("div", { className: `nice-etl-builder ${m}`, children: [
-    /* @__PURE__ */ t("div", { className: "nice-etl-builder__toolbar", children: [
+  return /* @__PURE__ */ a("div", { className: `nice-etl-builder ${u}`, children: [
+    /* @__PURE__ */ a("div", { className: "nice-etl-builder__toolbar", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
-          value: a.name,
-          onChange: (c) => C((N) => ({ ...N, name: c.target.value })),
+          value: o.name,
+          onChange: (p) => S((w) => ({ ...w, name: p.target.value })),
           className: "nice-etl-builder__name-input"
         }
       ),
-      /* @__PURE__ */ e("div", { className: "nice-etl-builder__tabs", children: ["design", "code", "schedule", "history"].map((c) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "nice-etl-builder__tabs", children: ["design", "code", "schedule", "history"].map((p) => /* @__PURE__ */ e(
         "button",
         {
-          className: `nice-etl-builder__tab ${_ === c ? "nice-etl-builder__tab--active" : ""}`,
-          onClick: () => p(c),
-          children: c.charAt(0).toUpperCase() + c.slice(1)
+          className: `nice-etl-builder__tab ${l === p ? "nice-etl-builder__tab--active" : ""}`,
+          onClick: () => g(p),
+          children: p.charAt(0).toUpperCase() + p.slice(1)
         },
-        c
+        p
       )) }),
-      /* @__PURE__ */ t("div", { className: "nice-etl-builder__actions", children: [
-        /* @__PURE__ */ e("button", { onClick: n, disabled: f, className: "nice-etl-builder__run-btn", children: f ? "⏳ Running..." : "▶ Run" }),
-        /* @__PURE__ */ e("button", { className: "nice-etl-builder__save-btn", children: "💾 Save" })
+      /* @__PURE__ */ a("div", { className: "nice-etl-builder__actions", children: [
+        /* @__PURE__ */ e("button", { onClick: t, disabled: E, className: "nice-etl-builder__run-btn", children: E ? "⏳ Running..." : "▶ Run" }),
+        /* @__PURE__ */ e("button", { className: "nice-etl-builder__save-btn", children: "💾 Save" }),
+        /* @__PURE__ */ e(K, { steps: X(m, Be) })
       ] })
     ] }),
-    /* @__PURE__ */ t("div", { className: "nice-etl-builder__main", children: [
-      _ === "design" && /* @__PURE__ */ t("div", { className: "nice-etl-builder__palette", children: [
+    /* @__PURE__ */ a("div", { className: "nice-etl-builder__main", children: [
+      l === "design" && /* @__PURE__ */ a("div", { className: "nice-etl-builder__palette", children: [
         /* @__PURE__ */ e("h4", { children: "Sources" }),
-        l.map((c) => /* @__PURE__ */ t(
+        i.map((p) => /* @__PURE__ */ a(
           "div",
           {
             className: "nice-etl-builder__palette-item",
-            onClick: () => E(c),
+            onClick: () => z(p),
             children: [
               /* @__PURE__ */ e("span", { className: "nice-etl-builder__palette-icon", children: "🗄️" }),
-              /* @__PURE__ */ e("span", { children: c.name })
+              /* @__PURE__ */ e("span", { children: p.name })
             ]
           },
-          c.id
+          p.id
         )),
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => E({ id: "", name: "New Source", type: "database", config: {} }),
+            onClick: () => z({ id: "", name: "New Source", type: "database", config: {} }),
             children: "+ Add Source"
           }
         ),
         /* @__PURE__ */ e("h4", { children: "Transformations" }),
-        R.map((c) => /* @__PURE__ */ t(
+        V.map((p) => /* @__PURE__ */ a(
           "div",
           {
             className: "nice-etl-builder__palette-item",
             draggable: !0,
-            onDragStart: () => D(`transform:${c.type}`),
-            onDragEnd: () => D(null),
+            onDragStart: () => P(`transform:${p.type}`),
+            onDragEnd: () => P(null),
             children: [
-              /* @__PURE__ */ e("span", { className: "nice-etl-builder__palette-icon", children: c.icon }),
-              /* @__PURE__ */ e("span", { children: c.label })
+              /* @__PURE__ */ e("span", { className: "nice-etl-builder__palette-icon", children: p.icon }),
+              /* @__PURE__ */ e("span", { children: p.label })
             ]
           },
-          c.type
+          p.type
         )),
         /* @__PURE__ */ e("h4", { children: "Destinations" }),
         /* @__PURE__ */ e("button", { onClick: U, children: "+ Add Destination" })
       ] }),
-      _ === "design" && /* @__PURE__ */ e(
+      l === "design" && /* @__PURE__ */ e(
         "div",
         {
-          ref: z,
+          ref: I,
           className: "nice-etl-builder__canvas",
-          onDragOver: (c) => c.preventDefault(),
-          onDrop: g,
-          onClick: () => v(null),
-          children: /* @__PURE__ */ t("div", { className: "nice-etl-builder__flow", children: [
-            /* @__PURE__ */ t("div", { className: "nice-etl-builder__column", children: [
+          onDragOver: (p) => p.preventDefault(),
+          onDrop: _,
+          onClick: () => h(null),
+          children: /* @__PURE__ */ a("div", { className: "nice-etl-builder__flow", children: [
+            /* @__PURE__ */ a("div", { className: "nice-etl-builder__column", children: [
               /* @__PURE__ */ e("h5", { children: "Sources" }),
-              a.sources.map((c) => /* @__PURE__ */ e(
-                A,
+              o.sources.map((p) => /* @__PURE__ */ e(
+                W,
                 {
-                  node: c,
+                  node: p,
                   nodeType: "source",
                   icon: "🗄️",
-                  isSelected: (r == null ? void 0 : r.id) === c.id,
-                  onSelect: () => v({ type: "source", id: c.id }),
-                  onDelete: () => u("source", c.id)
+                  isSelected: (d == null ? void 0 : d.id) === p.id,
+                  onSelect: () => h({ type: "source", id: p.id }),
+                  onDelete: () => y("source", p.id)
                 },
-                c.id
+                p.id
               ))
             ] }),
             /* @__PURE__ */ e("div", { className: "nice-etl-builder__arrow", children: "→" }),
-            /* @__PURE__ */ t("div", { className: "nice-etl-builder__column nice-etl-builder__column--transforms", children: [
+            /* @__PURE__ */ a("div", { className: "nice-etl-builder__column nice-etl-builder__column--transforms", children: [
               /* @__PURE__ */ e("h5", { children: "Transformations" }),
-              a.transformations.map((c) => {
-                const N = R.find((x) => x.type === c.type);
+              o.transformations.map((p) => {
+                const w = V.find((x) => x.type === p.type);
                 return /* @__PURE__ */ e(
-                  A,
+                  W,
                   {
-                    node: c,
+                    node: p,
                     nodeType: "transformation",
-                    icon: (N == null ? void 0 : N.icon) || "🔄",
-                    isSelected: (r == null ? void 0 : r.id) === c.id,
-                    onSelect: () => v({ type: "transformation", id: c.id }),
-                    onDelete: () => u("transformation", c.id)
+                    icon: (w == null ? void 0 : w.icon) || "🔄",
+                    isSelected: (d == null ? void 0 : d.id) === p.id,
+                    onSelect: () => h({ type: "transformation", id: p.id }),
+                    onDelete: () => y("transformation", p.id)
                   },
-                  c.id
+                  p.id
                 );
               }),
-              a.transformations.length === 0 && /* @__PURE__ */ e("div", { className: "nice-etl-builder__empty-column", children: "Drag transformations here" })
+              o.transformations.length === 0 && /* @__PURE__ */ e("div", { className: "nice-etl-builder__empty-column", children: "Drag transformations here" })
             ] }),
             /* @__PURE__ */ e("div", { className: "nice-etl-builder__arrow", children: "→" }),
-            /* @__PURE__ */ t("div", { className: "nice-etl-builder__column", children: [
+            /* @__PURE__ */ a("div", { className: "nice-etl-builder__column", children: [
               /* @__PURE__ */ e("h5", { children: "Destinations" }),
-              a.destinations.map((c) => /* @__PURE__ */ e(
-                A,
+              o.destinations.map((p) => /* @__PURE__ */ e(
+                W,
                 {
-                  node: c,
+                  node: p,
                   nodeType: "destination",
                   icon: "📥",
-                  isSelected: (r == null ? void 0 : r.id) === c.id,
-                  onSelect: () => v({ type: "destination", id: c.id }),
-                  onDelete: () => u("destination", c.id)
+                  isSelected: (d == null ? void 0 : d.id) === p.id,
+                  onSelect: () => h({ type: "destination", id: p.id }),
+                  onDelete: () => y("destination", p.id)
                 },
-                c.id
+                p.id
               ))
             ] })
           ] })
         }
       ),
-      _ === "code" && /* @__PURE__ */ e("div", { className: "nice-etl-builder__code-view", children: /* @__PURE__ */ e("pre", { children: JSON.stringify(a, null, 2) }) }),
-      _ === "schedule" && /* @__PURE__ */ e(
-        oe,
+      l === "code" && /* @__PURE__ */ e("div", { className: "nice-etl-builder__code-view", children: /* @__PURE__ */ e("pre", { children: JSON.stringify(o, null, 2) }) }),
+      l === "schedule" && /* @__PURE__ */ e(
+        qe,
         {
-          schedule: a.schedule,
-          monitoring: a.monitoring,
-          onChange: h
+          schedule: o.schedule,
+          monitoring: o.monitoring,
+          onChange: b
         }
       ),
-      _ === "history" && /* @__PURE__ */ e(de, { runs: T }),
-      r && _ === "design" && /* @__PURE__ */ e(
-        ce,
+      l === "history" && /* @__PURE__ */ e(Ye, { runs: M }),
+      d && l === "design" && /* @__PURE__ */ e(
+        We,
         {
-          nodeType: r.type,
-          node: k() ?? null,
-          dataSources: l,
-          onChange: (c) => {
-            C((N) => {
-              switch (r.type) {
+          nodeType: d.type,
+          node: R() ?? null,
+          dataSources: i,
+          onChange: (p) => {
+            S((w) => {
+              switch (d.type) {
                 case "source":
                   return {
-                    ...N,
-                    sources: N.sources.map(
-                      (x) => x.id === r.id ? { ...x, ...c } : x
+                    ...w,
+                    sources: w.sources.map(
+                      (x) => x.id === d.id ? { ...x, ...p } : x
                     )
                   };
                 case "transformation":
                   return {
-                    ...N,
-                    transformations: N.transformations.map(
-                      (x) => x.id === r.id ? { ...x, ...c } : x
+                    ...w,
+                    transformations: w.transformations.map(
+                      (x) => x.id === d.id ? { ...x, ...p } : x
                     )
                   };
                 case "destination":
                   return {
-                    ...N,
-                    destinations: N.destinations.map(
-                      (x) => x.id === r.id ? { ...x, ...c } : x
+                    ...w,
+                    destinations: w.destinations.map(
+                      (x) => x.id === d.id ? { ...x, ...p } : x
                     )
                   };
                 default:
-                  return N;
+                  return w;
               }
             });
           },
-          onClose: () => v(null)
+          onClose: () => h(null)
         }
       )
     ] })
   ] });
 }
-function re(i) {
-  switch (i) {
+function Ve(r) {
+  switch (r) {
     case "filter":
       return { condition: "" };
     case "map":
@@ -1745,30 +3536,30 @@ return data;` };
       return {};
   }
 }
-function A({
-  node: i,
-  nodeType: l,
-  icon: o,
+function W({
+  node: r,
+  nodeType: i,
+  icon: n,
   isSelected: s,
-  onSelect: d,
-  onDelete: m
+  onSelect: c,
+  onDelete: u
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: `nice-etl-builder__node nice-etl-builder__node--${l} ${s ? "nice-etl-builder__node--selected" : ""}`,
-      onClick: (a) => {
-        a.stopPropagation(), d();
+      className: `nice-etl-builder__node nice-etl-builder__node--${i} ${s ? "nice-etl-builder__node--selected" : ""}`,
+      onClick: (m) => {
+        m.stopPropagation(), c();
       },
       children: [
-        /* @__PURE__ */ e("span", { className: "nice-etl-builder__node-icon", children: o }),
-        /* @__PURE__ */ e("span", { className: "nice-etl-builder__node-name", children: i.name }),
+        /* @__PURE__ */ e("span", { className: "nice-etl-builder__node-icon", children: n }),
+        /* @__PURE__ */ e("span", { className: "nice-etl-builder__node-name", children: r.name }),
         /* @__PURE__ */ e(
           "button",
           {
             className: "nice-etl-builder__node-delete",
-            onClick: (a) => {
-              a.stopPropagation(), m();
+            onClick: (m) => {
+              m.stopPropagation(), u();
             },
             children: "×"
           }
@@ -1777,42 +3568,42 @@ function A({
     }
   );
 }
-function ce({
-  nodeType: i,
-  node: l,
-  dataSources: o,
+function We({
+  nodeType: r,
+  node: i,
+  dataSources: n,
   onChange: s,
-  onClose: d
+  onClose: c
 }) {
-  var m;
-  return l ? /* @__PURE__ */ t("div", { className: "nice-etl-builder__properties", children: [
-    /* @__PURE__ */ t("div", { className: "nice-etl-builder__properties-header", children: [
-      /* @__PURE__ */ t("h4", { children: [
-        i.charAt(0).toUpperCase() + i.slice(1),
+  var u;
+  return i ? /* @__PURE__ */ a("div", { className: "nice-etl-builder__properties", children: [
+    /* @__PURE__ */ a("div", { className: "nice-etl-builder__properties-header", children: [
+      /* @__PURE__ */ a("h4", { children: [
+        r.charAt(0).toUpperCase() + r.slice(1),
         " Properties"
       ] }),
-      /* @__PURE__ */ e("button", { onClick: d, children: "×" })
+      /* @__PURE__ */ e("button", { onClick: c, children: "×" })
     ] }),
-    /* @__PURE__ */ t("div", { className: "nice-etl-builder__properties-content", children: [
-      /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+    /* @__PURE__ */ a("div", { className: "nice-etl-builder__properties-content", children: [
+      /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
         /* @__PURE__ */ e("label", { children: "Name" }),
         /* @__PURE__ */ e(
           "input",
           {
             type: "text",
-            value: l.name,
-            onChange: (a) => s({ name: a.target.value })
+            value: i.name,
+            onChange: (m) => s({ name: m.target.value })
           }
         )
       ] }),
-      i === "source" && /* @__PURE__ */ t(F, { children: [
-        /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+      r === "source" && /* @__PURE__ */ a($, { children: [
+        /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
           /* @__PURE__ */ e("label", { children: "Type" }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ a(
             "select",
             {
-              value: l.type,
-              onChange: (a) => s({ type: a.target.value }),
+              value: i.type,
+              onChange: (m) => s({ type: m.target.value }),
               children: [
                 /* @__PURE__ */ e("option", { value: "database", children: "Database" }),
                 /* @__PURE__ */ e("option", { value: "api", children: "API" }),
@@ -1822,19 +3613,19 @@ function ce({
             }
           )
         ] }),
-        /* @__PURE__ */ e("div", { className: "nice-etl-builder__field", children: /* @__PURE__ */ t("label", { children: [
+        /* @__PURE__ */ e("div", { className: "nice-etl-builder__field", children: /* @__PURE__ */ a("label", { children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
-              checked: ((m = l.incremental) == null ? void 0 : m.enabled) || !1,
-              onChange: (a) => {
-                var y;
+              checked: ((u = i.incremental) == null ? void 0 : u.enabled) || !1,
+              onChange: (m) => {
+                var o;
                 return s({
                   incremental: {
-                    ...l.incremental,
-                    enabled: a.target.checked,
-                    column: ((y = l.incremental) == null ? void 0 : y.column) || ""
+                    ...i.incremental,
+                    enabled: m.target.checked,
+                    column: ((o = i.incremental) == null ? void 0 : o.column) || ""
                   }
                 });
               }
@@ -1843,50 +3634,50 @@ function ce({
           "Incremental Load"
         ] }) })
       ] }),
-      i === "transformation" && /* @__PURE__ */ t(F, { children: [
-        /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+      r === "transformation" && /* @__PURE__ */ a($, { children: [
+        /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
           /* @__PURE__ */ e("label", { children: "Type" }),
-          /* @__PURE__ */ e("span", { children: l.type })
+          /* @__PURE__ */ e("span", { children: i.type })
         ] }),
-        l.type === "filter" && /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+        i.type === "filter" && /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
           /* @__PURE__ */ e("label", { children: "Condition" }),
           /* @__PURE__ */ e(
             "textarea",
             {
-              value: String(l.config.condition || ""),
-              onChange: (a) => s({
-                config: { ...l.config, condition: a.target.value }
+              value: String(i.config.condition || ""),
+              onChange: (m) => s({
+                config: { ...i.config, condition: m.target.value }
               }),
               placeholder: "e.g., age > 18 AND status = 'active'",
               rows: 3
             }
           )
         ] }),
-        l.type === "derive" && /* @__PURE__ */ t(F, { children: [
-          /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+        i.type === "derive" && /* @__PURE__ */ a($, { children: [
+          /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
             /* @__PURE__ */ e("label", { children: "Column Name" }),
             /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
-                value: String(l.config.name || ""),
-                onChange: (a) => s({
-                  config: { ...l.config, name: a.target.value }
+                value: String(i.config.name || ""),
+                onChange: (m) => s({
+                  config: { ...i.config, name: m.target.value }
                 })
               }
             )
           ] }),
-          /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+          /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
             /* @__PURE__ */ e("label", { children: "Expression" }),
             /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
-                value: String(l.config.expression || ""),
-                onChange: (a) => s({
+                value: String(i.config.expression || ""),
+                onChange: (m) => s({
                   config: {
-                    ...l.config,
-                    expression: a.target.value
+                    ...i.config,
+                    expression: m.target.value
                   }
                 }),
                 placeholder: "e.g., price * quantity"
@@ -1894,14 +3685,14 @@ function ce({
             )
           ] })
         ] }),
-        l.type === "custom" && /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+        i.type === "custom" && /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
           /* @__PURE__ */ e("label", { children: "Code" }),
           /* @__PURE__ */ e(
             "textarea",
             {
-              value: String(l.config.code || ""),
-              onChange: (a) => s({
-                config: { ...l.config, code: a.target.value }
+              value: String(i.config.code || ""),
+              onChange: (m) => s({
+                config: { ...i.config, code: m.target.value }
               }),
               rows: 10,
               className: "nice-etl-builder__code-input"
@@ -1909,14 +3700,14 @@ function ce({
           )
         ] })
       ] }),
-      i === "destination" && /* @__PURE__ */ t(F, { children: [
-        /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+      r === "destination" && /* @__PURE__ */ a($, { children: [
+        /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
           /* @__PURE__ */ e("label", { children: "Type" }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ a(
             "select",
             {
-              value: l.type,
-              onChange: (a) => s({ type: a.target.value }),
+              value: i.type,
+              onChange: (m) => s({ type: m.target.value }),
               children: [
                 /* @__PURE__ */ e("option", { value: "database", children: "Database" }),
                 /* @__PURE__ */ e("option", { value: "file", children: "File" }),
@@ -1926,13 +3717,13 @@ function ce({
             }
           )
         ] }),
-        /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+        /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
           /* @__PURE__ */ e("label", { children: "Write Mode" }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ a(
             "select",
             {
-              value: l.writeMode,
-              onChange: (a) => s({ writeMode: a.target.value }),
+              value: i.writeMode,
+              onChange: (m) => s({ writeMode: m.target.value }),
               children: [
                 /* @__PURE__ */ e("option", { value: "append", children: "Append" }),
                 /* @__PURE__ */ e("option", { value: "overwrite", children: "Overwrite" }),
@@ -1944,56 +3735,56 @@ function ce({
         ] })
       ] })
     ] })
-  ] }) : /* @__PURE__ */ e(F, {});
+  ] }) : /* @__PURE__ */ e($, {});
 }
-function oe({
-  schedule: i,
-  monitoring: l,
-  onChange: o
+function qe({
+  schedule: r,
+  monitoring: i,
+  onChange: n
 }) {
-  const [s, d] = S(i || { enabled: !1 });
-  return /* @__PURE__ */ t("div", { className: "nice-etl-builder__schedule-editor", children: [
+  const [s, c] = D(r || { enabled: !1 });
+  return /* @__PURE__ */ a("div", { className: "nice-etl-builder__schedule-editor", children: [
     /* @__PURE__ */ e("h4", { children: "Schedule Configuration" }),
-    /* @__PURE__ */ e("div", { className: "nice-etl-builder__field", children: /* @__PURE__ */ t("label", { children: [
+    /* @__PURE__ */ e("div", { className: "nice-etl-builder__field", children: /* @__PURE__ */ a("label", { children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "checkbox",
           checked: s.enabled,
-          onChange: (m) => {
-            const a = { ...s, enabled: m.target.checked };
-            d(a), o(a);
+          onChange: (u) => {
+            const m = { ...s, enabled: u.target.checked };
+            c(m), n(m);
           }
         }
       ),
       "Enable scheduled execution"
     ] }) }),
-    s.enabled && /* @__PURE__ */ t(F, { children: [
-      /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+    s.enabled && /* @__PURE__ */ a($, { children: [
+      /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
         /* @__PURE__ */ e("label", { children: "Cron Expression" }),
         /* @__PURE__ */ e(
           "input",
           {
             type: "text",
             value: s.cron || "",
-            onChange: (m) => {
-              const a = { ...s, cron: m.target.value };
-              d(a);
+            onChange: (u) => {
+              const m = { ...s, cron: u.target.value };
+              c(m);
             },
             placeholder: "0 0 * * * (every hour)"
           }
         ),
         /* @__PURE__ */ e("small", { children: "Format: minute hour day month weekday" })
       ] }),
-      /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+      /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
         /* @__PURE__ */ e("label", { children: "Timezone" }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "select",
           {
             value: s.timezone || "UTC",
-            onChange: (m) => {
-              const a = { ...s, timezone: m.target.value };
-              d(a);
+            onChange: (u) => {
+              const m = { ...s, timezone: u.target.value };
+              c(m);
             },
             children: [
               /* @__PURE__ */ e("option", { value: "UTC", children: "UTC" }),
@@ -2006,16 +3797,16 @@ function oe({
           }
         )
       ] }),
-      /* @__PURE__ */ e("button", { onClick: () => o(s), children: "Save Schedule" })
+      /* @__PURE__ */ e("button", { onClick: () => n(s), children: "Save Schedule" })
     ] }),
     /* @__PURE__ */ e("h4", { children: "Monitoring" }),
-    /* @__PURE__ */ e("div", { className: "nice-etl-builder__field", children: /* @__PURE__ */ t("label", { children: [
-      /* @__PURE__ */ e("input", { type: "checkbox", checked: (l == null ? void 0 : l.alertOnFailure) || !1, disabled: !0 }),
+    /* @__PURE__ */ e("div", { className: "nice-etl-builder__field", children: /* @__PURE__ */ a("label", { children: [
+      /* @__PURE__ */ e("input", { type: "checkbox", checked: (i == null ? void 0 : i.alertOnFailure) || !1, disabled: !0 }),
       "Alert on failure"
     ] }) }),
-    /* @__PURE__ */ t("div", { className: "nice-etl-builder__field", children: [
+    /* @__PURE__ */ a("div", { className: "nice-etl-builder__field", children: [
       /* @__PURE__ */ e("label", { children: "Log Level" }),
-      /* @__PURE__ */ t("select", { value: (l == null ? void 0 : l.logLevel) || "info", disabled: !0, children: [
+      /* @__PURE__ */ a("select", { value: (i == null ? void 0 : i.logLevel) || "info", disabled: !0, children: [
         /* @__PURE__ */ e("option", { value: "error", children: "Error" }),
         /* @__PURE__ */ e("option", { value: "warn", children: "Warning" }),
         /* @__PURE__ */ e("option", { value: "info", children: "Info" }),
@@ -2024,49 +3815,98 @@ function oe({
     ] })
   ] });
 }
-function de({ runs: i }) {
-  return /* @__PURE__ */ t("div", { className: "nice-etl-builder__history-view", children: [
+function Ye({ runs: r }) {
+  return /* @__PURE__ */ a("div", { className: "nice-etl-builder__history-view", children: [
     /* @__PURE__ */ e("h4", { children: "Run History" }),
-    i.length === 0 ? /* @__PURE__ */ e("div", { className: "nice-etl-builder__no-history", children: "No runs yet" }) : /* @__PURE__ */ t("table", { className: "nice-etl-builder__history-table", children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { children: [
+    r.length === 0 ? /* @__PURE__ */ e("div", { className: "nice-etl-builder__no-history", children: "No runs yet" }) : /* @__PURE__ */ a("table", { className: "nice-etl-builder__history-table", children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { children: [
         /* @__PURE__ */ e("th", { children: "Status" }),
         /* @__PURE__ */ e("th", { children: "Start Time" }),
         /* @__PURE__ */ e("th", { children: "Duration" }),
         /* @__PURE__ */ e("th", { children: "Rows" }),
         /* @__PURE__ */ e("th", { children: "Errors" })
       ] }) }),
-      /* @__PURE__ */ e("tbody", { children: i.map((l) => /* @__PURE__ */ t(
+      /* @__PURE__ */ e("tbody", { children: r.map((i) => /* @__PURE__ */ a(
         "tr",
         {
-          className: `nice-etl-builder__run nice-etl-builder__run--${l.status}`,
+          className: `nice-etl-builder__run nice-etl-builder__run--${i.status}`,
           children: [
-            /* @__PURE__ */ e("td", { children: /* @__PURE__ */ t(
+            /* @__PURE__ */ e("td", { children: /* @__PURE__ */ a(
               "span",
               {
-                className: `nice-etl-builder__status nice-etl-builder__status--${l.status}`,
+                className: `nice-etl-builder__status nice-etl-builder__status--${i.status}`,
                 children: [
-                  l.status === "success" ? "✓" : l.status === "failed" ? "✗" : "⏳",
-                  l.status
+                  i.status === "success" ? "✓" : i.status === "failed" ? "✗" : "⏳",
+                  i.status
                 ]
               }
             ) }),
-            /* @__PURE__ */ e("td", { children: l.startTime.toLocaleString() }),
-            /* @__PURE__ */ e("td", { children: l.endTime ? `${Math.round((l.endTime.getTime() - l.startTime.getTime()) / 1e3)}s` : "-" }),
-            /* @__PURE__ */ t("td", { children: [
-              l.rowsProcessed.toLocaleString(),
+            /* @__PURE__ */ e("td", { children: i.startTime.toLocaleString() }),
+            /* @__PURE__ */ e("td", { children: i.endTime ? `${Math.round((i.endTime.getTime() - i.startTime.getTime()) / 1e3)}s` : "-" }),
+            /* @__PURE__ */ a("td", { children: [
+              i.rowsProcessed.toLocaleString(),
               " / ",
-              l.rowsWritten.toLocaleString()
+              i.rowsWritten.toLocaleString()
             ] }),
-            /* @__PURE__ */ e("td", { children: l.errors.length })
+            /* @__PURE__ */ e("td", { children: i.errors.length })
           ]
         },
-        l.id
+        i.id
       )) })
     ] })
   ] });
 }
+const Xe = {
+  chart: "chart",
+  table: "dataGrid",
+  card: "card",
+  gauge: "gauge",
+  map: "map",
+  text: "text",
+  image: "image",
+  filter: "select",
+  slicer: "select",
+  timeline: "timeline",
+  treemap: "treemap",
+  funnel: "funnel",
+  sankey: "sankey",
+  heatmap: "heatmap"
+};
+let Ke = 0;
+const Ge = (r) => `${r}-${Date.now().toString(36)}-${(Ke++).toString(36)}`;
+function rr(r) {
+  var c;
+  const i = ((c = r.layout) == null ? void 0 : c.columns) ?? 12, n = Array.from(
+    new Set(r.widgets.map((u) => u.dataSource).filter((u) => !!u))
+  ), s = r.widgets.map(
+    (u) => {
+      var m, o;
+      return {
+        id: u.id,
+        controlType: Xe[u.type] ?? "card",
+        props: {
+          ...u.title ? { title: u.title } : {},
+          ...u.dataSource ? { dataSource: u.dataSource } : {},
+          ...u.config ?? {}
+        },
+        colSpan: ((m = u.position) == null ? void 0 : m.width) ?? 4,
+        ...(o = u.position) != null && o.height ? { rowSpan: u.position.height } : {}
+      };
+    }
+  );
+  return {
+    id: r.id,
+    name: r.name,
+    version: 2,
+    columns: i,
+    dataSources: n.map((u) => ({ key: u, type: "rest", autoLoad: !0 })),
+    rows: [{ id: Ge("dash-row"), cells: s }],
+    meta: { description: r.description, tags: ["dashboard"] }
+  };
+}
 export {
-  pe as NiceDashboardStudio,
-  me as NiceETLBuilder,
-  he as NiceReportBuilder
+  Ze as NiceDashboardStudio,
+  er as NiceETLBuilder,
+  Qe as NiceReportBuilder,
+  rr as dashboardToV2
 };