@nice2dev/ui-api 1.0.20 → 1.0.22

package/dist/index.mjs

@@ -1,6 +1,1773 @@
-import { jsxs as t, jsx as e, Fragment as R } from "react/jsx-runtime";
-import { useState as w, useCallback as T, useRef as Z, useEffect as se } from "react";
-const ce = {
+import { jsx as r, jsxs as t, Fragment as J } from "react/jsx-runtime";
+import { useContext as me, createContext as M, memo as He, useState as g, useEffect as ye, useCallback as P, useRef as se, forwardRef as ke, useMemo as Te } from "react";
+const Ee = (e, a) => a, Ae = M(Ee);
+function Re() {
+  return { t: me(Ae) };
+}
+M({
+  dir: "ltr",
+  isRTL: !1,
+  flip: (e) => e,
+  value: (e) => e.ltr
+});
+M(null);
+M(null);
+const Pe = {
+  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"
+};
+M({
+  displayStyle: "default",
+  variantConfig: Pe,
+  setDisplayStyle: () => {
+  }
+});
+M({});
+M({
+  direction: "ltr",
+  isRTL: !1,
+  flip: (e) => e,
+  flipStyle: (e, a) => ({ [e]: a })
+});
+M({
+  permissions: {},
+  getAccessMode: () => "full"
+});
+M(null);
+const De = process.env.NODE_ENV === "development";
+let ue = {
+  enabled: De,
+  slowRenderThreshold: 16
+};
+const be = [], ce = /* @__PURE__ */ new Map(), he = /* @__PURE__ */ new Map();
+function Ie() {
+  be.length = 0, ce.clear(), he.clear();
+}
+function $e(e) {
+  const a = ue.slowRenderThreshold;
+  return be.filter((i) => i.actualDuration > a);
+}
+function W(e) {
+  return e < 1 ? `${(e * 1e3).toFixed(0)}μs` : e < 1e3 ? `${e.toFixed(2)}ms` : `${(e / 1e3).toFixed(2)}s`;
+}
+function Oe() {
+  const e = Array.from(ce.values()), a = $e(), i = e.reduce((u, f) => u + f.renderCount, 0), n = e.length > 0 ? e.reduce((u, f) => u + f.avgRenderTime, 0) / e.length : 0, s = Array.from(he.values());
+  return { stats: e, slowRenders: a, totalRenders: i, avgRenderTime: n, marks: s };
+}
+function Me() {
+  const e = Oe();
+  console.group(
+    "%c[Nice2Dev Performance Report]",
+    "color: var(--nice-info, #6366f1); font-weight: bold; font-size: 14px"
+  ), console.log(`Total renders: ${e.totalRenders}`), console.log(`Average render time: ${W(e.avgRenderTime)}`), console.log(`Slow renders: ${e.slowRenders.length}`), console.group("Component Stats"), console.table(
+    e.stats.sort((a, i) => i.totalRenderTime - a.totalRenderTime).map((a) => ({
+      Name: a.componentName,
+      Renders: a.renderCount,
+      "Avg Time": W(a.avgRenderTime),
+      "Max Time": W(a.maxRenderTime),
+      "Total Time": W(a.totalRenderTime),
+      "Slow Renders": a.slowRenderCount
+    }))
+  ), console.groupEnd(), e.slowRenders.length > 0 && (console.group("Slow Renders (last 10)"), console.table(
+    e.slowRenders.slice(-10).map((a) => ({
+      Component: a.componentName,
+      Phase: a.phase,
+      Duration: W(a.actualDuration),
+      Time: new Date(a.timestamp).toLocaleTimeString()
+    }))
+  ), console.groupEnd()), e.marks.length > 0 && (console.group("Custom Marks"), console.table(
+    e.marks.filter((a) => a.duration).map((a) => ({
+      Name: a.name,
+      Duration: W(a.duration)
+    }))
+  ), console.groupEnd()), console.groupEnd();
+}
+const Le = He(
+  ({ position: e = "bottom-right", defaultCollapsed: a = !0 }) => {
+    const [i, n] = g(a), [s, u] = g([]), [f, y] = g({ used: 0, total: 0 });
+    if (ye(() => {
+      const d = () => {
+        const k = Array.from(ce.values());
+        u(k.sort((T, _) => _.totalRenderTime - T.totalRenderTime).slice(0, 10));
+        const m = window.performance;
+        m.memory && y({
+          used: m.memory.usedJSHeapSize / 1024 / 1024,
+          total: m.memory.totalJSHeapSize / 1024 / 1024
+        });
+      };
+      d();
+      const v = setInterval(d, 2e3);
+      return () => clearInterval(v);
+    }, []), !ue.enabled)
+      return null;
+    const b = {
+      position: "fixed",
+      zIndex: 99999,
+      ...e.includes("top") ? { top: 8 } : { bottom: 8 },
+      ...e.includes("left") ? { left: 8 } : { right: 8 }
+    };
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          ...b,
+          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: i ? "4px 8px" : 8,
+          maxWidth: i ? "auto" : 300,
+          maxHeight: i ? "auto" : 400,
+          overflow: "auto"
+        },
+        children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              style: { cursor: "pointer", display: "flex", alignItems: "center", gap: 8 },
+              onClick: () => n((d) => !d),
+              children: [
+                /* @__PURE__ */ r("span", { style: { color: "var(--color-success, #22c55e)" }, children: "●" }),
+                /* @__PURE__ */ r("span", { children: "Profiler" }),
+                f.used > 0 && /* @__PURE__ */ t(
+                  "span",
+                  {
+                    style: {
+                      color: f.used > 100 ? "var(--color-warning, #f59e0b)" : "var(--text-muted, #64748b)"
+                    },
+                    children: [
+                      f.used.toFixed(0),
+                      "MB"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ r("span", { style: { marginLeft: "auto", opacity: 0.5 }, children: i ? "▼" : "▲" })
+              ]
+            }
+          ),
+          !i && /* @__PURE__ */ t("div", { style: { marginTop: 8 }, children: [
+            /* @__PURE__ */ r(
+              "div",
+              {
+                style: {
+                  borderBottom: "1px solid var(--border-color, #333)",
+                  paddingBottom: 4,
+                  marginBottom: 8
+                },
+                children: /* @__PURE__ */ r("strong", { children: "Top Components" })
+              }
+            ),
+            s.map((d) => /* @__PURE__ */ t("div", { style: { marginBottom: 4, display: "flex", gap: 8 }, children: [
+              /* @__PURE__ */ r("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: d.componentName }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  style: {
+                    color: d.avgRenderTime > 16 ? "var(--color-warning, #f59e0b)" : "var(--color-success, #22c55e)"
+                  },
+                  children: W(d.avgRenderTime)
+                }
+              ),
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  style: { color: "var(--text-muted, #64748b)", minWidth: 30, textAlign: "right" },
+                  children: [
+                    "x",
+                    d.renderCount
+                  ]
+                }
+              )
+            ] }, d.componentName)),
+            /* @__PURE__ */ t("div", { style: { marginTop: 8, display: "flex", gap: 8 }, children: [
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  onClick: Me,
+                  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__ */ r(
+                "button",
+                {
+                  onClick: Ie,
+                  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"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Le.displayName = "ProfilerOverlay";
+process.env.NODE_ENV;
+M(null);
+const Ue = M({
+  enabled: !0,
+  active: !1,
+  run: () => {
+  }
+});
+function je() {
+  return me(Ue);
+}
+function ee(e, a) {
+  if (!e)
+    return null;
+  if (e === !0)
+    return a && a.length > 0 ? a : null;
+  if (Array.isArray(e))
+    return e.length > 0 ? e : null;
+  const i = e.steps ?? a;
+  return i && i.length > 0 ? i : null;
+}
+function Ke(e, a) {
+  return e.map((i) => ({
+    target: i.target,
+    title: i.titleKey ? a(i.titleKey, i.title ?? "") : i.title ?? "",
+    content: i.contentKey ? a(i.contentKey, i.content ?? "") : i.content ?? "",
+    placement: i.placement,
+    highlightPadding: i.highlightPadding,
+    showArrow: i.showArrow,
+    scrollIntoView: i.scrollIntoView,
+    disableInteraction: i.disableInteraction
+  }));
+}
+const re = ({
+  steps: e,
+  autoStart: a,
+  label: i,
+  size: n = "md",
+  className: s,
+  style: u,
+  "data-testid": f
+}) => {
+  const { enabled: y, run: b } = je(), { t: d } = Re();
+  if (!y || !e || e.length === 0)
+    return null;
+  const v = i ?? d("tutorial.startAria", "Start tutorial");
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      className: `nice-tutorial-button nice-tutorial-button--${n}` + (s ? ` ${s}` : ""),
+      style: u,
+      "data-testid": f,
+      "aria-label": v,
+      title: v,
+      onClick: () => b(Ke(e, d), { autoStart: a }),
+      children: "?"
+    }
+  );
+}, de = "nice-tutorial-button-styles";
+if (typeof document < "u" && !document.getElementById(de)) {
+  const e = document.createElement("style");
+  e.id = de, e.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(e);
+}
+M(null);
+M(null);
+M(null);
+const ge = {
+  space1: "4px",
+  space2: "8px",
+  space3: "12px",
+  space4: "16px",
+  space5: "20px",
+  space6: "24px",
+  space8: "32px"
+}, ve = {
+  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
+}, _e = { fast: "120ms ease", normal: "200ms ease", slow: "300ms ease" }, we = (e) => ({
+  color: e,
+  radiusSm: "4px",
+  radiusMd: "6px",
+  radiusLg: "8px",
+  radiusXl: "12px",
+  radiusFull: "9999px"
+}), qe = {
+  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)"
+}, Be = {
+  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 l(e, a, i, n, s) {
+  return {
+    name: e,
+    darkMode: "light",
+    colors: {
+      ...a,
+      surface: a.surface ?? i.primary,
+      surfaceHover: a.surfaceHover ?? i.secondary
+    },
+    backgrounds: {
+      ...i,
+      elevated: i.elevated ?? i.primary,
+      inset: i.inset ?? i.tertiary,
+      canvas: i.canvas ?? i.primary
+    },
+    text: { ...n, inverse: n.inverse ?? "#ffffff" },
+    borders: we(s),
+    shadows: qe,
+    spacing: ge,
+    typography: ve,
+    transitions: _e
+  };
+}
+function R(e, a, i, n, s) {
+  return {
+    name: e,
+    darkMode: "dark",
+    colors: {
+      ...a,
+      surface: a.surface ?? i.secondary,
+      surfaceHover: a.surfaceHover ?? i.tertiary
+    },
+    backgrounds: {
+      ...i,
+      elevated: i.elevated ?? i.secondary,
+      inset: i.inset ?? i.primary,
+      canvas: i.canvas ?? i.primary
+    },
+    text: { ...n, inverse: n.inverse ?? "#0f172a" },
+    borders: we(s),
+    shadows: Be,
+    spacing: ge,
+    typography: ve,
+    transitions: _e
+  };
+}
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+R(
+  "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"
+);
+l(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+l(
+  "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"
+);
+R(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+l(
+  "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"
+);
+R(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+R(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+R(
+  "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"
+);
+R(
+  "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"
+);
+l(
+  "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"
+);
+l(
+  "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"
+);
+M(null);
+const Ve = [
+  {
+    target: ".nice-api-designer",
+    titleKey: "tutorial.apiDesigner.intro.title",
+    title: "API designer",
+    contentKey: "tutorial.apiDesigner.intro.content",
+    content: "Define endpoints, parameters, request/response schemas and security for your OpenAPI document.",
+    placement: "auto"
+  }
+], ze = {
   openapi: "3.0.3",
   info: {
     title: "New API",
@@ -13,247 +1780,249 @@ const ce = {
     securitySchemes: {}
   },
   tags: []
-}, ne = ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "HEAD"];
-function ie(i) {
-  var c, n;
+}, Ne = ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "HEAD"];
+function le(e) {
+  var i, n;
   const a = [];
-  return i.openapi || a.push({ path: "openapi", message: "OpenAPI version is required", severity: "error" }), (c = i.info) != null && c.title || a.push({ path: "info.title", message: "API title is required", severity: "error" }), (n = i.info) != null && n.version || a.push({ path: "info.version", message: "API version is required", severity: "error" }), Object.entries(i.paths || {}).forEach(([r, d]) => {
-    r.startsWith("/") || a.push({ path: `paths.${r}`, message: "Path must start with /", severity: "error" }), ne.forEach((o) => {
-      const b = d[o.toLowerCase()];
-      b && !b.responses && a.push({
-        path: `paths.${r}.${o.toLowerCase()}.responses`,
+  return e.openapi || a.push({ path: "openapi", message: "OpenAPI version is required", severity: "error" }), (i = e.info) != null && i.title || a.push({ path: "info.title", message: "API title is required", severity: "error" }), (n = e.info) != null && n.version || a.push({ path: "info.version", message: "API version is required", severity: "error" }), Object.entries(e.paths || {}).forEach(([s, u]) => {
+    s.startsWith("/") || a.push({ path: `paths.${s}`, message: "Path must start with /", severity: "error" }), Ne.forEach((f) => {
+      const y = u[f.toLowerCase()];
+      y && !y.responses && a.push({
+        path: `paths.${s}.${f.toLowerCase()}.responses`,
         message: "Responses are required",
         severity: "error"
       });
     });
   }), a;
 }
-function Pe({
-  schema: i,
+function _r({
+  schema: e,
   onChange: a,
-  onSave: c,
+  onSave: i,
   readOnly: n = !1,
-  className: r = ""
+  className: s = "",
+  tutorial: u
 }) {
   var O, q;
-  const [d, o] = w(i || ce), [b, u] = w(null), [p, x] = w(null), [h, _] = w("info"), [S, C] = w([]), E = T(
-    (v) => {
-      o((f) => {
-        const N = v(f);
-        return a == null || a(N), C(ie(N)), N;
+  const [f, y] = g(e || ze), [b, d] = g(null), [v, k] = g(null), [m, T] = g("info"), [_, I] = g([]), H = P(
+    (w) => {
+      y((x) => {
+        const S = w(x);
+        return a == null || a(S), I(le(S)), S;
       });
     },
     [a]
-  ), $ = T(() => {
-    const v = "/new-endpoint";
-    E((f) => ({
-      ...f,
+  ), j = P(() => {
+    const w = "/new-endpoint";
+    H((x) => ({
+      ...x,
       paths: {
-        ...f.paths,
-        [v]: {
+        ...x.paths,
+        [w]: {
           get: {
             summary: "New endpoint",
             responses: { 200: { description: "Success" } }
           }
         }
       }
-    })), u(v), x("get");
-  }, [E]), I = T(
-    (v) => {
-      E((f) => {
-        const { [v]: N, ...U } = f.paths;
-        return { ...f, paths: U };
-      }), u(null), x(null);
+    })), d(w), k("get");
+  }, [H]), K = P(
+    (w) => {
+      H((x) => {
+        const { [w]: S, ...B } = x.paths;
+        return { ...x, paths: B };
+      }), d(null), k(null);
     },
-    [E]
-  ), F = T(() => {
-    const v = "NewSchema";
-    E((f) => {
-      var N;
+    [H]
+  ), G = P(() => {
+    const w = "NewSchema";
+    H((x) => {
+      var S;
       return {
-        ...f,
+        ...x,
         components: {
-          ...f.components,
+          ...x.components,
           schemas: {
-            ...(N = f.components) == null ? void 0 : N.schemas,
-            [v]: { type: "object", properties: {} }
+            ...(S = x.components) == null ? void 0 : S.schemas,
+            [w]: { type: "object", properties: {} }
           }
         }
       };
     });
-  }, [E]), P = T(() => {
-    const v = ie(d);
-    C(v), v.filter((f) => f.severity === "error").length === 0 && (c == null || c(d));
-  }, [d, c]), j = Object.entries(d.paths).flatMap(
-    ([v, f]) => ne.filter((N) => f[N.toLowerCase()]).map(
-      (N) => ({
-        path: v,
-        method: N,
-        operation: f[N.toLowerCase()]
+  }, [H]), $ = P(() => {
+    const w = le(f);
+    I(w), w.filter((x) => x.severity === "error").length === 0 && (i == null || i(f));
+  }, [f, i]), U = Object.entries(f.paths).flatMap(
+    ([w, x]) => Ne.filter((S) => x[S.toLowerCase()]).map(
+      (S) => ({
+        path: w,
+        method: S,
+        operation: x[S.toLowerCase()]
       })
     )
   );
-  return /* @__PURE__ */ t("div", { className: `nice-api-designer ${r}`, children: [
+  return /* @__PURE__ */ t("div", { className: `nice-api-designer ${s}`, style: { position: "relative" }, children: [
+    u && /* @__PURE__ */ r("div", { style: { position: "absolute", top: 8, right: 8, zIndex: 5 }, children: /* @__PURE__ */ r(re, { steps: ee(u, Ve) }) }),
     /* @__PURE__ */ t("div", { className: "nice-api-designer__toolbar", children: [
-      /* @__PURE__ */ e("div", { className: "nice-api-designer__tabs", children: ["info", "paths", "schemas", "security", "preview"].map((v) => /* @__PURE__ */ e(
+      /* @__PURE__ */ r("div", { className: "nice-api-designer__tabs", children: ["info", "paths", "schemas", "security", "preview"].map((w) => /* @__PURE__ */ r(
         "button",
         {
-          className: `nice-api-designer__tab ${h === v ? "nice-api-designer__tab--active" : ""}`,
-          onClick: () => _(v),
-          children: v.charAt(0).toUpperCase() + v.slice(1)
+          className: `nice-api-designer__tab ${m === w ? "nice-api-designer__tab--active" : ""}`,
+          onClick: () => T(w),
+          children: w.charAt(0).toUpperCase() + w.slice(1)
         },
-        v
+        w
       )) }),
-      !n && /* @__PURE__ */ e("button", { className: "nice-api-designer__save-btn", onClick: P, children: "Save" })
+      !n && /* @__PURE__ */ r("button", { className: "nice-api-designer__save-btn", onClick: $, children: "Save" })
     ] }),
-    S.length > 0 && /* @__PURE__ */ e("div", { className: "nice-api-designer__errors", children: S.map((v, f) => /* @__PURE__ */ t(
+    _.length > 0 && /* @__PURE__ */ r("div", { className: "nice-api-designer__errors", children: _.map((w, x) => /* @__PURE__ */ t(
       "div",
       {
-        className: `nice-api-designer__error nice-api-designer__error--${v.severity}`,
+        className: `nice-api-designer__error nice-api-designer__error--${w.severity}`,
         children: [
           /* @__PURE__ */ t("strong", { children: [
-            v.path,
+            w.path,
             ":"
           ] }),
           " ",
-          v.message
+          w.message
         ]
       },
-      f
+      x
     )) }),
     /* @__PURE__ */ t("div", { className: "nice-api-designer__content", children: [
-      h === "info" && /* @__PURE__ */ e(le, { schema: d, onChange: E, readOnly: n }),
-      h === "paths" && /* @__PURE__ */ e(
-        oe,
+      m === "info" && /* @__PURE__ */ r(Fe, { schema: f, onChange: H, readOnly: n }),
+      m === "paths" && /* @__PURE__ */ r(
+        We,
         {
-          endpoints: j,
-          schema: d,
+          endpoints: U,
+          schema: f,
           selectedPath: b,
-          selectedMethod: p,
-          onSelectEndpoint: (v, f) => {
-            u(v), x(f);
+          selectedMethod: v,
+          onSelectEndpoint: (w, x) => {
+            d(w), k(x);
           },
-          onAdd: $,
-          onDelete: I,
-          onChange: E,
+          onAdd: j,
+          onDelete: K,
+          onChange: H,
           readOnly: n
         }
       ),
-      h === "schemas" && /* @__PURE__ */ e(
-        de,
+      m === "schemas" && /* @__PURE__ */ r(
+        Je,
         {
-          schemas: ((O = d.components) == null ? void 0 : O.schemas) || {},
-          onAdd: F,
-          onChange: (v) => E((f) => ({
-            ...f,
-            components: { ...f.components, schemas: v }
+          schemas: ((O = f.components) == null ? void 0 : O.schemas) || {},
+          onAdd: G,
+          onChange: (w) => H((x) => ({
+            ...x,
+            components: { ...x.components, schemas: w }
           })),
           readOnly: n
         }
       ),
-      h === "security" && /* @__PURE__ */ e(
-        pe,
+      m === "security" && /* @__PURE__ */ r(
+        Ge,
         {
-          schemes: ((q = d.components) == null ? void 0 : q.securitySchemes) || {},
-          onChange: (v) => E((f) => ({
-            ...f,
-            components: { ...f.components, securitySchemes: v }
+          schemes: ((q = f.components) == null ? void 0 : q.securitySchemes) || {},
+          onChange: (w) => H((x) => ({
+            ...x,
+            components: { ...x.components, securitySchemes: w }
           })),
           readOnly: n
         }
       ),
-      h === "preview" && /* @__PURE__ */ e(ue, { schema: d })
+      m === "preview" && /* @__PURE__ */ r(Xe, { schema: f })
     ] })
   ] });
 }
-function le({ schema: i, onChange: a, readOnly: c }) {
+function Fe({ schema: e, onChange: a, readOnly: i }) {
   return /* @__PURE__ */ t("div", { className: "nice-api-designer__info-editor", children: [
-    /* @__PURE__ */ e("h3", { children: "API Information" }),
+    /* @__PURE__ */ r("h3", { children: "API Information" }),
     /* @__PURE__ */ t("div", { className: "nice-api-designer__field", children: [
-      /* @__PURE__ */ e("label", { children: "Title" }),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r("label", { children: "Title" }),
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
-          value: i.info.title,
-          onChange: (n) => a((r) => ({
-            ...r,
-            info: { ...r.info, title: n.target.value }
+          value: e.info.title,
+          onChange: (n) => a((s) => ({
+            ...s,
+            info: { ...s.info, title: n.target.value }
           })),
-          disabled: c
+          disabled: i
         }
       )
     ] }),
     /* @__PURE__ */ t("div", { className: "nice-api-designer__field", children: [
-      /* @__PURE__ */ e("label", { children: "Version" }),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r("label", { children: "Version" }),
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
-          value: i.info.version,
-          onChange: (n) => a((r) => ({
-            ...r,
-            info: { ...r.info, version: n.target.value }
+          value: e.info.version,
+          onChange: (n) => a((s) => ({
+            ...s,
+            info: { ...s.info, version: n.target.value }
           })),
-          disabled: c
+          disabled: i
         }
       )
     ] }),
     /* @__PURE__ */ t("div", { className: "nice-api-designer__field", children: [
-      /* @__PURE__ */ e("label", { children: "Description" }),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r("label", { children: "Description" }),
+      /* @__PURE__ */ r(
         "textarea",
         {
-          value: i.info.description || "",
-          onChange: (n) => a((r) => ({
-            ...r,
-            info: { ...r.info, description: n.target.value }
+          value: e.info.description || "",
+          onChange: (n) => a((s) => ({
+            ...s,
+            info: { ...s.info, description: n.target.value }
           })),
-          disabled: c,
+          disabled: i,
           rows: 5
         }
       )
     ] }),
-    /* @__PURE__ */ e("h4", { children: "Servers" }),
-    (i.servers || []).map((n, r) => /* @__PURE__ */ t("div", { className: "nice-api-designer__server", children: [
-      /* @__PURE__ */ e(
+    /* @__PURE__ */ r("h4", { children: "Servers" }),
+    (e.servers || []).map((n, s) => /* @__PURE__ */ t("div", { className: "nice-api-designer__server", children: [
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
           value: n.url,
           placeholder: "Server URL",
-          onChange: (d) => a((o) => {
-            var b;
+          onChange: (u) => a((f) => {
+            var y;
             return {
-              ...o,
-              servers: (b = o.servers) == null ? void 0 : b.map(
-                (u, p) => p === r ? { ...u, url: d.target.value } : u
+              ...f,
+              servers: (y = f.servers) == null ? void 0 : y.map(
+                (b, d) => d === s ? { ...b, url: u.target.value } : b
               )
             };
           }),
-          disabled: c
+          disabled: i
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
           value: n.description || "",
           placeholder: "Description",
-          onChange: (d) => a((o) => {
-            var b;
+          onChange: (u) => a((f) => {
+            var y;
             return {
-              ...o,
-              servers: (b = o.servers) == null ? void 0 : b.map(
-                (u, p) => p === r ? { ...u, description: d.target.value } : u
+              ...f,
+              servers: (y = f.servers) == null ? void 0 : y.map(
+                (b, d) => d === s ? { ...b, description: u.target.value } : b
               )
             };
           }),
-          disabled: c
+          disabled: i
         }
       )
-    ] }, r)),
-    !c && /* @__PURE__ */ e(
+    ] }, s)),
+    !i && /* @__PURE__ */ r(
       "button",
       {
         onClick: () => a((n) => ({
@@ -265,192 +2034,192 @@ function le({ schema: i, onChange: a, readOnly: c }) {
     )
   ] });
 }
-function oe({
-  endpoints: i,
+function We({
+  endpoints: e,
   schema: a,
-  selectedPath: c,
+  selectedPath: i,
   selectedMethod: n,
-  onSelectEndpoint: r,
-  onAdd: d,
-  onDelete: o,
-  onChange: b,
-  readOnly: u
+  onSelectEndpoint: s,
+  onAdd: u,
+  onDelete: f,
+  onChange: y,
+  readOnly: b
 }) {
-  var x;
-  const p = c && n ? (x = a.paths[c]) == null ? void 0 : x[n] : null;
+  var v;
+  const d = i && n ? (v = a.paths[i]) == null ? void 0 : v[n] : null;
   return /* @__PURE__ */ t("div", { className: "nice-api-designer__paths-editor", children: [
     /* @__PURE__ */ t("div", { className: "nice-api-designer__endpoints-list", children: [
       /* @__PURE__ */ t("div", { className: "nice-api-designer__list-header", children: [
-        /* @__PURE__ */ e("h3", { children: "Endpoints" }),
-        !u && /* @__PURE__ */ e("button", { onClick: d, children: "+ Add" })
+        /* @__PURE__ */ r("h3", { children: "Endpoints" }),
+        !b && /* @__PURE__ */ r("button", { onClick: u, children: "+ Add" })
       ] }),
-      i.map(({ path: h, method: _ }) => /* @__PURE__ */ t(
+      e.map(({ path: k, method: m }) => /* @__PURE__ */ t(
         "div",
         {
-          className: `nice-api-designer__endpoint ${c === h && n === _.toLowerCase() ? "nice-api-designer__endpoint--selected" : ""}`,
-          onClick: () => r(h, _.toLowerCase()),
+          className: `nice-api-designer__endpoint ${i === k && n === m.toLowerCase() ? "nice-api-designer__endpoint--selected" : ""}`,
+          onClick: () => s(k, m.toLowerCase()),
           children: [
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ r(
               "span",
               {
-                className: `nice-api-designer__method nice-api-designer__method--${_.toLowerCase()}`,
-                children: _
+                className: `nice-api-designer__method nice-api-designer__method--${m.toLowerCase()}`,
+                children: m
               }
             ),
-            /* @__PURE__ */ e("span", { className: "nice-api-designer__path", children: h })
+            /* @__PURE__ */ r("span", { className: "nice-api-designer__path", children: k })
           ]
         },
-        `${_}-${h}`
+        `${m}-${k}`
       ))
     ] }),
-    p && c && n && /* @__PURE__ */ t("div", { className: "nice-api-designer__operation-editor", children: [
+    d && i && n && /* @__PURE__ */ t("div", { className: "nice-api-designer__operation-editor", children: [
       /* @__PURE__ */ t("h3", { children: [
         n.toUpperCase(),
         " ",
-        c
+        i
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-api-designer__field", children: [
-        /* @__PURE__ */ e("label", { children: "Summary" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Summary" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "text",
-            value: p.summary || "",
-            onChange: (h) => b((_) => ({
-              ..._,
+            value: d.summary || "",
+            onChange: (k) => y((m) => ({
+              ...m,
               paths: {
-                ..._.paths,
-                [c]: {
-                  ..._.paths[c],
+                ...m.paths,
+                [i]: {
+                  ...m.paths[i],
                   [n]: {
-                    ...p,
-                    summary: h.target.value
+                    ...d,
+                    summary: k.target.value
                   }
                 }
               }
             })),
-            disabled: u
+            disabled: b
           }
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-api-designer__field", children: [
-        /* @__PURE__ */ e("label", { children: "Description" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Description" }),
+        /* @__PURE__ */ r(
           "textarea",
           {
-            value: p.description || "",
-            onChange: (h) => b((_) => ({
-              ..._,
+            value: d.description || "",
+            onChange: (k) => y((m) => ({
+              ...m,
               paths: {
-                ..._.paths,
-                [c]: {
-                  ..._.paths[c],
+                ...m.paths,
+                [i]: {
+                  ...m.paths[i],
                   [n]: {
-                    ...p,
-                    description: h.target.value
+                    ...d,
+                    description: k.target.value
                   }
                 }
               }
             })),
-            disabled: u,
+            disabled: b,
             rows: 3
           }
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-api-designer__field", children: [
-        /* @__PURE__ */ e("label", { children: "Operation ID" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Operation ID" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "text",
-            value: p.operationId || "",
-            onChange: (h) => b((_) => ({
-              ..._,
+            value: d.operationId || "",
+            onChange: (k) => y((m) => ({
+              ...m,
               paths: {
-                ..._.paths,
-                [c]: {
-                  ..._.paths[c],
+                ...m.paths,
+                [i]: {
+                  ...m.paths[i],
                   [n]: {
-                    ...p,
-                    operationId: h.target.value
+                    ...d,
+                    operationId: k.target.value
                   }
                 }
               }
             })),
-            disabled: u
+            disabled: b
           }
         )
       ] }),
-      !u && /* @__PURE__ */ e(
+      !b && /* @__PURE__ */ r(
         "button",
         {
           className: "nice-api-designer__delete-btn",
-          onClick: () => o(c),
+          onClick: () => f(i),
           children: "Delete Endpoint"
         }
       )
     ] })
   ] });
 }
-function de({
-  schemas: i,
+function Je({
+  schemas: e,
   onAdd: a,
-  onChange: c,
+  onChange: i,
   readOnly: n
 }) {
-  const [r, d] = w(null);
+  const [s, u] = g(null);
   return /* @__PURE__ */ t("div", { className: "nice-api-designer__schemas-editor", children: [
     /* @__PURE__ */ t("div", { className: "nice-api-designer__schemas-list", children: [
       /* @__PURE__ */ t("div", { className: "nice-api-designer__list-header", children: [
-        /* @__PURE__ */ e("h3", { children: "Schemas" }),
-        !n && /* @__PURE__ */ e("button", { onClick: a, children: "+ Add" })
+        /* @__PURE__ */ r("h3", { children: "Schemas" }),
+        !n && /* @__PURE__ */ r("button", { onClick: a, children: "+ Add" })
       ] }),
-      Object.keys(i).map((o) => /* @__PURE__ */ e(
+      Object.keys(e).map((f) => /* @__PURE__ */ r(
         "div",
         {
-          className: `nice-api-designer__schema-item ${r === o ? "nice-api-designer__schema-item--selected" : ""}`,
-          onClick: () => d(o),
-          children: o
+          className: `nice-api-designer__schema-item ${s === f ? "nice-api-designer__schema-item--selected" : ""}`,
+          onClick: () => u(f),
+          children: f
         },
-        o
+        f
       ))
     ] }),
-    r && i[r] && /* @__PURE__ */ t("div", { className: "nice-api-designer__schema-editor", children: [
-      /* @__PURE__ */ e("h3", { children: r }),
+    s && e[s] && /* @__PURE__ */ t("div", { className: "nice-api-designer__schema-editor", children: [
+      /* @__PURE__ */ r("h3", { children: s }),
       /* @__PURE__ */ t("div", { className: "nice-api-designer__field", children: [
-        /* @__PURE__ */ e("label", { children: "Type" }),
+        /* @__PURE__ */ r("label", { children: "Type" }),
         /* @__PURE__ */ t(
           "select",
           {
-            value: i[r].type || "object",
-            onChange: (o) => c({
-              ...i,
-              [r]: {
-                ...i[r],
-                type: o.target.value
+            value: e[s].type || "object",
+            onChange: (f) => i({
+              ...e,
+              [s]: {
+                ...e[s],
+                type: f.target.value
               }
             }),
             disabled: n,
             children: [
-              /* @__PURE__ */ e("option", { value: "object", children: "object" }),
-              /* @__PURE__ */ e("option", { value: "array", children: "array" }),
-              /* @__PURE__ */ e("option", { value: "string", children: "string" }),
-              /* @__PURE__ */ e("option", { value: "number", children: "number" }),
-              /* @__PURE__ */ e("option", { value: "integer", children: "integer" }),
-              /* @__PURE__ */ e("option", { value: "boolean", children: "boolean" })
+              /* @__PURE__ */ r("option", { value: "object", children: "object" }),
+              /* @__PURE__ */ r("option", { value: "array", children: "array" }),
+              /* @__PURE__ */ r("option", { value: "string", children: "string" }),
+              /* @__PURE__ */ r("option", { value: "number", children: "number" }),
+              /* @__PURE__ */ r("option", { value: "integer", children: "integer" }),
+              /* @__PURE__ */ r("option", { value: "boolean", children: "boolean" })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-api-designer__field", children: [
-        /* @__PURE__ */ e("label", { children: "Description" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Description" }),
+        /* @__PURE__ */ r(
           "textarea",
           {
-            value: i[r].description || "",
-            onChange: (o) => c({
-              ...i,
-              [r]: { ...i[r], description: o.target.value }
+            value: e[s].description || "",
+            onChange: (f) => i({
+              ...e,
+              [s]: { ...e[s], description: f.target.value }
             }),
             disabled: n,
             rows: 3
@@ -458,15 +2227,15 @@ function de({
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-api-designer__field", children: [
-        /* @__PURE__ */ e("label", { children: "JSON Schema" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "JSON Schema" }),
+        /* @__PURE__ */ r(
           "textarea",
           {
-            value: JSON.stringify(i[r], null, 2),
-            onChange: (o) => {
+            value: JSON.stringify(e[s], null, 2),
+            onChange: (f) => {
               try {
-                const b = JSON.parse(o.target.value);
-                c({ ...i, [r]: b });
+                const y = JSON.parse(f.target.value);
+                i({ ...e, [s]: y });
               } catch {
               }
             },
@@ -479,30 +2248,39 @@ function de({
     ] })
   ] });
 }
-function pe({ schemes: i, onChange: a, readOnly: c }) {
+function Ge({ schemes: e, onChange: a, readOnly: i }) {
   return /* @__PURE__ */ t("div", { className: "nice-api-designer__security-editor", children: [
     /* @__PURE__ */ t("div", { className: "nice-api-designer__list-header", children: [
-      /* @__PURE__ */ e("h3", { children: "Security Schemes" }),
-      !c && /* @__PURE__ */ e("button", { onClick: () => {
+      /* @__PURE__ */ r("h3", { children: "Security Schemes" }),
+      !i && /* @__PURE__ */ r("button", { onClick: () => {
         a({
-          ...i,
+          ...e,
           newScheme: { type: "apiKey", name: "X-API-Key", in: "header" }
         });
       }, children: "+ Add" })
     ] }),
-    Object.entries(i).map(([r, d]) => /* @__PURE__ */ t("div", { className: "nice-api-designer__security-item", children: [
-      /* @__PURE__ */ e("h4", { children: r }),
-      /* @__PURE__ */ e("pre", { children: JSON.stringify(d, null, 2) })
-    ] }, r))
+    Object.entries(e).map(([s, u]) => /* @__PURE__ */ t("div", { className: "nice-api-designer__security-item", children: [
+      /* @__PURE__ */ r("h4", { children: s }),
+      /* @__PURE__ */ r("pre", { children: JSON.stringify(u, null, 2) })
+    ] }, s))
   ] });
 }
-function ue({ schema: i }) {
+function Xe({ schema: e }) {
   return /* @__PURE__ */ t("div", { className: "nice-api-designer__json-preview", children: [
-    /* @__PURE__ */ e("h3", { children: "OpenAPI Specification" }),
-    /* @__PURE__ */ e("pre", { className: "nice-api-designer__code", children: JSON.stringify(i, null, 2) })
+    /* @__PURE__ */ r("h3", { children: "OpenAPI Specification" }),
+    /* @__PURE__ */ r("pre", { className: "nice-api-designer__code", children: JSON.stringify(e, null, 2) })
   ] });
 }
-const he = ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "HEAD"], me = {
+const Ye = [
+  {
+    target: ".nice-api-tester",
+    titleKey: "tutorial.apiTester.intro.title",
+    title: "API tester",
+    contentKey: "tutorial.apiTester.intro.content",
+    content: "Build requests with collections and environment variables, send them and assert on the responses.",
+    placement: "auto"
+  }
+], Qe = ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "HEAD"], Ze = {
   id: "",
   name: "New Request",
   method: "GET",
@@ -510,334 +2288,336 @@ const he = ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "HEAD"], me = {
   headers: {},
   queryParams: {}
 };
-function Q(i, a) {
-  return i.replace(/\{\{(\w+)\}\}/g, (c, n) => a[n] || `{{${n}}}`);
+function ne(e, a) {
+  return e.replace(/\{\{(\w+)\}\}/g, (i, n) => a[n] || `{{${n}}}`);
 }
-function _e(i, a) {
-  const c = Object.entries(a).filter(([, n]) => n).map(([n, r]) => `${encodeURIComponent(n)}=${encodeURIComponent(r)}`).join("&");
-  return c ? `${i}?${c}` : i;
+function er(e, a) {
+  const i = Object.entries(a).filter(([, n]) => n).map(([n, s]) => `${encodeURIComponent(n)}=${encodeURIComponent(s)}`).join("&");
+  return i ? `${e}?${i}` : e;
 }
-function Oe({
-  collections: i = [],
+function wr({
+  collections: e = [],
   environments: a = [],
-  onRequest: c,
+  onRequest: i,
   onSaveCollection: n,
-  className: r = ""
+  className: s = "",
+  tutorial: u
 }) {
-  const [d, o] = w(i), [b, u] = w(a), [p, x] = w(
-    a.find((s) => s.isActive) || null
-  ), [h, _] = w({
-    ...me,
+  const [f, y] = g(e), [b, d] = g(a), [v, k] = g(
+    a.find((c) => c.isActive) || null
+  ), [m, T] = g({
+    ...Ze,
     id: crypto.randomUUID()
-  }), [S, C] = w(null), [E, $] = w(!1), [I, F] = w("none"), [P, j] = w(
+  }), [_, I] = g(null), [H, j] = g(!1), [K, G] = g("none"), [$, U] = g(
     "params"
-  ), [O, q] = w("body"), [v, f] = w(""), [N, U] = w(""), [L, V] = w([]), [H, J] = w([]), K = Z(null), z = T(async () => {
-    var B;
-    if (!h.url)
+  ), [O, q] = g("body"), [w, x] = g(""), [S, B] = g(""), [V, z] = g([]), [L, X] = g([]), F = se(null), Q = P(async () => {
+    var D;
+    if (!m.url)
       return;
-    $(!0), C(null), V([]);
-    const s = Object.fromEntries(
-      Object.entries((p == null ? void 0 : p.variables) || {}).map(([A, D]) => [A, D.value])
-    ), g = {
-      ...h,
-      url: Q(h.url, s),
+    j(!0), I(null), z([]);
+    const c = Object.fromEntries(
+      Object.entries((v == null ? void 0 : v.variables) || {}).map(([E, A]) => [E, A.value])
+    ), o = {
+      ...m,
+      url: ne(m.url, c),
       headers: Object.fromEntries(
-        Object.entries(h.headers).map(([A, D]) => [A, Q(D, s)])
+        Object.entries(m.headers).map(([E, A]) => [E, ne(A, c)])
       ),
       queryParams: Object.fromEntries(
-        Object.entries(h.queryParams).map(([A, D]) => [
-          A,
-          Q(D, s)
+        Object.entries(m.queryParams).map(([E, A]) => [
+          E,
+          ne(A, c)
         ])
       )
-    }, k = performance.now();
+    }, N = performance.now();
     try {
-      let A;
-      if (c)
-        A = await c(g);
+      let E;
+      if (i)
+        E = await i(o);
       else {
-        K.current = new AbortController();
-        const D = { ...g.headers };
-        h.auth && ge(D, h.auth);
-        const ae = _e(g.url, g.queryParams), ee = {
-          method: g.method,
-          headers: D,
-          signal: K.current.signal
+        F.current = new AbortController();
+        const A = { ...o.headers };
+        m.auth && rr(A, m.auth);
+        const Se = er(o.url, o.queryParams), oe = {
+          method: o.method,
+          headers: A,
+          signal: F.current.signal
         };
-        ["POST", "PUT", "PATCH"].includes(g.method) && ((B = h.body) != null && B.content) && (ee.body = typeof h.body.content == "string" ? h.body.content : JSON.stringify(h.body.content), h.body.type === "json" && (D["Content-Type"] = "application/json"));
-        const M = await fetch(ae, ee), X = await M.text();
-        let Y;
+        ["POST", "PUT", "PATCH"].includes(o.method) && ((D = m.body) != null && D.content) && (oe.body = typeof m.body.content == "string" ? m.body.content : JSON.stringify(m.body.content), m.body.type === "json" && (A["Content-Type"] = "application/json"));
+        const Z = await fetch(Se, oe), ae = await Z.text();
+        let ie;
         try {
-          Y = JSON.parse(X);
+          ie = JSON.parse(ae);
         } catch {
-          Y = X;
+          ie = ae;
         }
-        const re = performance.now();
-        A = {
-          status: M.status,
-          statusText: M.statusText,
-          headers: Object.fromEntries(M.headers.entries()),
-          body: Y,
-          time: Math.round(re - k),
-          size: new Blob([X]).size,
+        const Ce = performance.now();
+        E = {
+          status: Z.status,
+          statusText: Z.statusText,
+          headers: Object.fromEntries(Z.headers.entries()),
+          body: ie,
+          time: Math.round(Ce - N),
+          size: new Blob([ae]).size,
           timestamp: /* @__PURE__ */ new Date()
         };
       }
-      if (C(A), J(
-        (D) => [...D, { request: h, response: A }].slice(-50)
-      ), N) {
-        const D = ve(N, A);
-        V(D);
+      if (I(E), X(
+        (A) => [...A, { request: m, response: E }].slice(-50)
+      ), S) {
+        const A = ir(S, E);
+        z(A);
       }
-    } catch (A) {
-      A.name !== "AbortError" && C({
+    } catch (E) {
+      E.name !== "AbortError" && I({
         status: 0,
         statusText: "Error",
         headers: {},
-        body: { error: A.message },
-        time: Math.round(performance.now() - k),
+        body: { error: E.message },
+        time: Math.round(performance.now() - N),
         size: 0,
         timestamp: /* @__PURE__ */ new Date()
       });
     } finally {
-      $(!1), K.current = null;
+      j(!1), F.current = null;
     }
-  }, [h, p, c, N]), G = T(() => {
-    var s;
-    (s = K.current) == null || s.abort(), $(!1);
-  }, []), l = T(() => {
-    _((s) => ({
-      ...s,
-      headers: { ...s.headers, "": "" }
+  }, [m, v, i, S]), Y = P(() => {
+    var c;
+    (c = F.current) == null || c.abort(), j(!1);
+  }, []), p = P(() => {
+    T((c) => ({
+      ...c,
+      headers: { ...c.headers, "": "" }
     }));
-  }, []), m = T(() => {
-    _((s) => ({
-      ...s,
-      queryParams: { ...s.queryParams, "": "" }
+  }, []), h = P(() => {
+    T((c) => ({
+      ...c,
+      queryParams: { ...c.queryParams, "": "" }
     }));
-  }, []), y = T(() => {
-    if (d.length === 0) {
-      const s = {
+  }, []), C = P(() => {
+    if (f.length === 0) {
+      const c = {
         id: crypto.randomUUID(),
         name: "My Collection",
-        requests: [h]
+        requests: [m]
       };
-      o([s]), n == null || n(s);
+      y([c]), n == null || n(c);
     } else {
-      const s = {
-        ...d[0],
-        requests: [...d[0].requests, h]
+      const c = {
+        ...f[0],
+        requests: [...f[0].requests, m]
       };
-      o((g) => [s, ...g.slice(1)]), n == null || n(s);
+      y((o) => [c, ...o.slice(1)]), n == null || n(c);
     }
-  }, [d, h, n]);
-  return /* @__PURE__ */ t("div", { className: `nice-api-tester ${r}`, children: [
-    /* @__PURE__ */ e("div", { className: "nice-api-tester__toolbar", children: /* @__PURE__ */ e("div", { className: "nice-api-tester__env-selector", children: /* @__PURE__ */ t(
+  }, [f, m, n]);
+  return /* @__PURE__ */ t("div", { className: `nice-api-tester ${s}`, style: { position: "relative" }, children: [
+    u && /* @__PURE__ */ r("div", { style: { position: "absolute", top: 8, right: 8, zIndex: 5 }, children: /* @__PURE__ */ r(re, { steps: ee(u, Ye) }) }),
+    /* @__PURE__ */ r("div", { className: "nice-api-tester__toolbar", children: /* @__PURE__ */ r("div", { className: "nice-api-tester__env-selector", children: /* @__PURE__ */ t(
       "select",
       {
-        value: (p == null ? void 0 : p.id) || "",
-        onChange: (s) => x(b.find((g) => g.id === s.target.value) || null),
+        value: (v == null ? void 0 : v.id) || "",
+        onChange: (c) => k(b.find((o) => o.id === c.target.value) || null),
         children: [
-          /* @__PURE__ */ e("option", { value: "", children: "No Environment" }),
-          b.map((s) => /* @__PURE__ */ e("option", { value: s.id, children: s.name }, s.id))
+          /* @__PURE__ */ r("option", { value: "", children: "No Environment" }),
+          b.map((c) => /* @__PURE__ */ r("option", { value: c.id, children: c.name }, c.id))
         ]
       }
     ) }) }),
     /* @__PURE__ */ t("div", { className: "nice-api-tester__request-bar", children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "select",
         {
-          value: h.method,
-          onChange: (s) => _((g) => ({
-            ...g,
-            method: s.target.value
+          value: m.method,
+          onChange: (c) => T((o) => ({
+            ...o,
+            method: c.target.value
           })),
-          className: `nice-api-tester__method nice-api-tester__method--${h.method.toLowerCase()}`,
-          children: he.map((s) => /* @__PURE__ */ e("option", { value: s, children: s }, s))
+          className: `nice-api-tester__method nice-api-tester__method--${m.method.toLowerCase()}`,
+          children: Qe.map((c) => /* @__PURE__ */ r("option", { value: c, children: c }, c))
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
-          value: h.url,
-          onChange: (s) => _((g) => ({ ...g, url: s.target.value })),
+          value: m.url,
+          onChange: (c) => T((o) => ({ ...o, url: c.target.value })),
           placeholder: "Enter request URL",
           className: "nice-api-tester__url-input"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "button",
         {
-          onClick: E ? G : z,
-          className: `nice-api-tester__send-btn ${E ? "nice-api-tester__send-btn--loading" : ""}`,
-          children: E ? "Cancel" : "Send"
+          onClick: H ? Y : Q,
+          className: `nice-api-tester__send-btn ${H ? "nice-api-tester__send-btn--loading" : ""}`,
+          children: H ? "Cancel" : "Send"
         }
       ),
-      /* @__PURE__ */ e("button", { onClick: y, className: "nice-api-tester__save-btn", children: "Save" })
+      /* @__PURE__ */ r("button", { onClick: C, className: "nice-api-tester__save-btn", children: "Save" })
     ] }),
     /* @__PURE__ */ t("div", { className: "nice-api-tester__main", children: [
       /* @__PURE__ */ t("div", { className: "nice-api-tester__request-panel", children: [
-        /* @__PURE__ */ e("div", { className: "nice-api-tester__tabs", children: ["params", "headers", "body", "auth", "tests"].map((s) => /* @__PURE__ */ e(
+        /* @__PURE__ */ r("div", { className: "nice-api-tester__tabs", children: ["params", "headers", "body", "auth", "tests"].map((c) => /* @__PURE__ */ r(
           "button",
           {
-            className: `nice-api-tester__tab ${P === s ? "nice-api-tester__tab--active" : ""}`,
-            onClick: () => j(s),
-            children: s.charAt(0).toUpperCase() + s.slice(1)
+            className: `nice-api-tester__tab ${$ === c ? "nice-api-tester__tab--active" : ""}`,
+            onClick: () => U(c),
+            children: c.charAt(0).toUpperCase() + c.slice(1)
           },
-          s
+          c
         )) }),
         /* @__PURE__ */ t("div", { className: "nice-api-tester__tab-content", children: [
-          P === "params" && /* @__PURE__ */ e(
-            fe,
+          $ === "params" && /* @__PURE__ */ r(
+            nr,
             {
-              params: h.queryParams,
-              onChange: (s) => _((g) => ({ ...g, queryParams: s })),
-              onAdd: m
+              params: m.queryParams,
+              onChange: (c) => T((o) => ({ ...o, queryParams: c })),
+              onAdd: h
             }
           ),
-          P === "headers" && /* @__PURE__ */ e(
-            ye,
+          $ === "headers" && /* @__PURE__ */ r(
+            tr,
             {
-              headers: h.headers,
-              onChange: (s) => _((g) => ({ ...g, headers: s })),
-              onAdd: l
+              headers: m.headers,
+              onChange: (c) => T((o) => ({ ...o, headers: c })),
+              onAdd: p
             }
           ),
-          P === "body" && /* @__PURE__ */ e(
-            Ne,
+          $ === "body" && /* @__PURE__ */ r(
+            sr,
             {
-              body: h.body,
-              bodyTab: I,
-              onBodyTabChange: F,
-              onChange: (s) => _((g) => ({ ...g, body: s }))
+              body: m.body,
+              bodyTab: K,
+              onBodyTabChange: G,
+              onChange: (c) => T((o) => ({ ...o, body: c }))
             }
           ),
-          P === "auth" && /* @__PURE__ */ e(
-            we,
+          $ === "auth" && /* @__PURE__ */ r(
+            cr,
             {
-              auth: h.auth,
-              onChange: (s) => _((g) => ({ ...g, auth: s }))
+              auth: m.auth,
+              onChange: (c) => T((o) => ({ ...o, auth: c }))
             }
           ),
-          P === "tests" && /* @__PURE__ */ e(
-            Ce,
+          $ === "tests" && /* @__PURE__ */ r(
+            or,
             {
-              preRequestScript: v,
-              testScript: N,
-              onPreRequestChange: f,
-              onTestChange: U
+              preRequestScript: w,
+              testScript: S,
+              onPreRequestChange: x,
+              onTestChange: B
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "nice-api-tester__response-panel", children: S ? /* @__PURE__ */ t(R, { children: [
+      /* @__PURE__ */ r("div", { className: "nice-api-tester__response-panel", children: _ ? /* @__PURE__ */ t(J, { children: [
         /* @__PURE__ */ t("div", { className: "nice-api-tester__response-meta", children: [
           /* @__PURE__ */ t(
             "span",
             {
-              className: `nice-api-tester__status nice-api-tester__status--${Math.floor(S.status / 100)}`,
+              className: `nice-api-tester__status nice-api-tester__status--${Math.floor(_.status / 100)}`,
               children: [
-                S.status,
+                _.status,
                 " ",
-                S.statusText
+                _.statusText
               ]
             }
           ),
           /* @__PURE__ */ t("span", { className: "nice-api-tester__time", children: [
-            S.time,
+            _.time,
             "ms"
           ] }),
-          /* @__PURE__ */ e("span", { className: "nice-api-tester__size", children: be(S.size) })
+          /* @__PURE__ */ r("span", { className: "nice-api-tester__size", children: ar(_.size) })
         ] }),
-        /* @__PURE__ */ e("div", { className: "nice-api-tester__tabs", children: ["body", "headers", "tests"].map((s) => /* @__PURE__ */ t(
+        /* @__PURE__ */ r("div", { className: "nice-api-tester__tabs", children: ["body", "headers", "tests"].map((c) => /* @__PURE__ */ t(
           "button",
           {
-            className: `nice-api-tester__tab ${O === s ? "nice-api-tester__tab--active" : ""}`,
-            onClick: () => q(s),
+            className: `nice-api-tester__tab ${O === c ? "nice-api-tester__tab--active" : ""}`,
+            onClick: () => q(c),
             children: [
-              s.charAt(0).toUpperCase() + s.slice(1),
-              s === "tests" && L.length > 0 && /* @__PURE__ */ t("span", { className: "nice-api-tester__test-badge", children: [
-                L.filter((g) => g.passed).length,
+              c.charAt(0).toUpperCase() + c.slice(1),
+              c === "tests" && V.length > 0 && /* @__PURE__ */ t("span", { className: "nice-api-tester__test-badge", children: [
+                V.filter((o) => o.passed).length,
                 "/",
-                L.length
+                V.length
               ] })
             ]
           },
-          s
+          c
         )) }),
         /* @__PURE__ */ t("div", { className: "nice-api-tester__response-content", children: [
-          O === "body" && /* @__PURE__ */ e("pre", { className: "nice-api-tester__response-body", children: typeof S.body == "string" ? S.body : JSON.stringify(S.body, null, 2) }),
-          O === "headers" && /* @__PURE__ */ e("div", { className: "nice-api-tester__response-headers", children: Object.entries(S.headers).map(([s, g]) => /* @__PURE__ */ t("div", { className: "nice-api-tester__header-row", children: [
-            /* @__PURE__ */ e("span", { className: "nice-api-tester__header-key", children: s }),
-            /* @__PURE__ */ e("span", { className: "nice-api-tester__header-value", children: g })
-          ] }, s)) }),
-          O === "tests" && /* @__PURE__ */ e("div", { className: "nice-api-tester__test-results", children: L.map((s, g) => /* @__PURE__ */ t(
+          O === "body" && /* @__PURE__ */ r("pre", { className: "nice-api-tester__response-body", children: typeof _.body == "string" ? _.body : JSON.stringify(_.body, null, 2) }),
+          O === "headers" && /* @__PURE__ */ r("div", { className: "nice-api-tester__response-headers", children: Object.entries(_.headers).map(([c, o]) => /* @__PURE__ */ t("div", { className: "nice-api-tester__header-row", children: [
+            /* @__PURE__ */ r("span", { className: "nice-api-tester__header-key", children: c }),
+            /* @__PURE__ */ r("span", { className: "nice-api-tester__header-value", children: o })
+          ] }, c)) }),
+          O === "tests" && /* @__PURE__ */ r("div", { className: "nice-api-tester__test-results", children: V.map((c, o) => /* @__PURE__ */ t(
             "div",
             {
-              className: `nice-api-tester__test-result nice-api-tester__test-result--${s.passed ? "pass" : "fail"}`,
+              className: `nice-api-tester__test-result nice-api-tester__test-result--${c.passed ? "pass" : "fail"}`,
               children: [
-                /* @__PURE__ */ e("span", { className: "nice-api-tester__test-icon", children: s.passed ? "✓" : "✗" }),
-                /* @__PURE__ */ e("span", { className: "nice-api-tester__test-name", children: s.name }),
-                s.message && /* @__PURE__ */ e("span", { className: "nice-api-tester__test-message", children: s.message })
+                /* @__PURE__ */ r("span", { className: "nice-api-tester__test-icon", children: c.passed ? "✓" : "✗" }),
+                /* @__PURE__ */ r("span", { className: "nice-api-tester__test-name", children: c.name }),
+                c.message && /* @__PURE__ */ r("span", { className: "nice-api-tester__test-message", children: c.message })
               ]
             },
-            g
+            o
           )) })
         ] })
-      ] }) : /* @__PURE__ */ e("div", { className: "nice-api-tester__empty-response", children: E ? "Loading..." : "Send a request to see the response" }) })
+      ] }) : /* @__PURE__ */ r("div", { className: "nice-api-tester__empty-response", children: H ? "Loading..." : "Send a request to see the response" }) })
     ] }),
-    H.length > 0 && /* @__PURE__ */ t("div", { className: "nice-api-tester__history", children: [
-      /* @__PURE__ */ e("h4", { children: "History" }),
-      /* @__PURE__ */ e("div", { className: "nice-api-tester__history-list", children: H.slice().reverse().map(({ request: s, response: g }, k) => /* @__PURE__ */ t(
+    L.length > 0 && /* @__PURE__ */ t("div", { className: "nice-api-tester__history", children: [
+      /* @__PURE__ */ r("h4", { children: "History" }),
+      /* @__PURE__ */ r("div", { className: "nice-api-tester__history-list", children: L.slice().reverse().map(({ request: c, response: o }, N) => /* @__PURE__ */ t(
         "div",
         {
           className: "nice-api-tester__history-item",
-          onClick: () => _(s),
+          onClick: () => T(c),
           children: [
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ r(
               "span",
               {
-                className: `nice-api-tester__method nice-api-tester__method--${s.method.toLowerCase()}`,
-                children: s.method
+                className: `nice-api-tester__method nice-api-tester__method--${c.method.toLowerCase()}`,
+                children: c.method
               }
             ),
-            /* @__PURE__ */ e("span", { className: "nice-api-tester__history-url", children: s.url }),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ r("span", { className: "nice-api-tester__history-url", children: c.url }),
+            /* @__PURE__ */ r(
               "span",
               {
                 className: `nice-api-tester__status nice-api-tester__status--${Math.floor(
-                  g.status / 100
+                  o.status / 100
                 )}`,
-                children: g.status
+                children: o.status
               }
             )
           ]
         },
-        k
+        N
       )) })
     ] })
   ] });
 }
-function ge(i, a) {
-  var c, n, r, d, o;
+function rr(e, a) {
+  var i, n, s, u, f;
   switch (a.type) {
     case "bearer":
-      i.Authorization = `${((c = a.bearer) == null ? void 0 : c.prefix) || "Bearer"} ${(n = a.bearer) == null ? void 0 : n.token}`;
+      e.Authorization = `${((i = a.bearer) == null ? void 0 : i.prefix) || "Bearer"} ${(n = a.bearer) == null ? void 0 : n.token}`;
       break;
     case "basic":
-      i.Authorization = `Basic ${btoa(`${(r = a.basic) == null ? void 0 : r.username}:${(d = a.basic) == null ? void 0 : d.password}`)}`;
+      e.Authorization = `Basic ${btoa(`${(s = a.basic) == null ? void 0 : s.username}:${(u = a.basic) == null ? void 0 : u.password}`)}`;
       break;
     case "api-key":
-      ((o = a.apiKey) == null ? void 0 : o.in) === "header" && (i[a.apiKey.key] = a.apiKey.value);
+      ((f = a.apiKey) == null ? void 0 : f.in) === "header" && (e[a.apiKey.key] = a.apiKey.value);
       break;
   }
 }
-function be(i) {
-  return i < 1024 ? `${i} B` : i < 1024 * 1024 ? `${(i / 1024).toFixed(1)} KB` : `${(i / (1024 * 1024)).toFixed(1)} MB`;
+function ar(e) {
+  return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
 }
-function ve(i, a) {
-  const c = [], n = {
+function ir(e, a) {
+  const i = [], n = {
     response: {
       code: a.status,
       status: a.statusText,
@@ -846,153 +2626,153 @@ function ve(i, a) {
       text: () => typeof a.body == "string" ? a.body : JSON.stringify(a.body),
       responseTime: a.time
     },
-    test: (r, d) => {
-      const o = performance.now();
+    test: (s, u) => {
+      const f = performance.now();
       try {
-        d(), c.push({ name: r, passed: !0, duration: performance.now() - o });
-      } catch (b) {
-        c.push({
-          name: r,
+        u(), i.push({ name: s, passed: !0, duration: performance.now() - f });
+      } catch (y) {
+        i.push({
+          name: s,
           passed: !1,
-          message: b.message,
-          duration: performance.now() - o
+          message: y.message,
+          duration: performance.now() - f
         });
       }
     },
-    expect: (r) => ({
+    expect: (s) => ({
       to: {
-        equal: (d) => {
-          if (r !== d)
-            throw new Error(`Expected ${d} but got ${r}`);
+        equal: (u) => {
+          if (s !== u)
+            throw new Error(`Expected ${u} but got ${s}`);
         },
         be: {
-          oneOf: (d) => {
-            if (!d.includes(r))
-              throw new Error(`Expected ${r} to be one of ${d}`);
+          oneOf: (u) => {
+            if (!u.includes(s))
+              throw new Error(`Expected ${s} to be one of ${u}`);
           }
         },
         have: {
-          property: (d) => {
-            if (typeof r != "object" || r === null || !(d in r))
-              throw new Error(`Expected object to have property ${d}`);
+          property: (u) => {
+            if (typeof s != "object" || s === null || !(u in s))
+              throw new Error(`Expected object to have property ${u}`);
           }
         }
       }
     })
   };
   try {
-    new Function("pm", i)(n);
-  } catch (r) {
-    c.push({
+    new Function("pm", e)(n);
+  } catch (s) {
+    i.push({
       name: "Script Error",
       passed: !1,
-      message: r.message,
+      message: s.message,
       duration: 0
     });
   }
-  return c;
+  return i;
 }
-function te({
-  items: i,
+function xe({
+  items: e,
   onChange: a,
-  onAdd: c,
+  onAdd: i,
   keyPlaceholder: n = "Key",
-  valuePlaceholder: r = "Value"
+  valuePlaceholder: s = "Value"
 }) {
   return /* @__PURE__ */ t("div", { className: "nice-api-tester__kv-editor", children: [
-    Object.entries(i).map(([d, o], b) => /* @__PURE__ */ t("div", { className: "nice-api-tester__kv-row", children: [
-      /* @__PURE__ */ e(
+    Object.entries(e).map(([u, f], y) => /* @__PURE__ */ t("div", { className: "nice-api-tester__kv-row", children: [
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
-          value: d,
+          value: u,
           placeholder: n,
-          onChange: (u) => {
-            const p = Object.entries(i);
-            p[b] = [u.target.value, o], a(Object.fromEntries(p));
+          onChange: (b) => {
+            const d = Object.entries(e);
+            d[y] = [b.target.value, f], a(Object.fromEntries(d));
           }
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
-          value: o,
-          placeholder: r,
-          onChange: (u) => a({ ...i, [d]: u.target.value })
+          value: f,
+          placeholder: s,
+          onChange: (b) => a({ ...e, [u]: b.target.value })
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "button",
         {
           onClick: () => {
-            const { [d]: u, ...p } = i;
-            a(p);
+            const { [u]: b, ...d } = e;
+            a(d);
           },
           children: "×"
         }
       )
-    ] }, b)),
-    /* @__PURE__ */ e("button", { onClick: c, className: "nice-api-tester__add-btn", children: "+ Add" })
+    ] }, y)),
+    /* @__PURE__ */ r("button", { onClick: i, className: "nice-api-tester__add-btn", children: "+ Add" })
   ] });
 }
-function fe({
-  params: i,
+function nr({
+  params: e,
   onChange: a,
-  onAdd: c
+  onAdd: i
 }) {
-  return /* @__PURE__ */ e(
-    te,
+  return /* @__PURE__ */ r(
+    xe,
     {
-      items: i,
+      items: e,
       onChange: a,
-      onAdd: c,
+      onAdd: i,
       keyPlaceholder: "Parameter",
       valuePlaceholder: "Value"
     }
   );
 }
-function ye({
-  headers: i,
+function tr({
+  headers: e,
   onChange: a,
-  onAdd: c
+  onAdd: i
 }) {
-  return /* @__PURE__ */ e(
-    te,
+  return /* @__PURE__ */ r(
+    xe,
     {
-      items: i,
+      items: e,
       onChange: a,
-      onAdd: c,
+      onAdd: i,
       keyPlaceholder: "Header",
       valuePlaceholder: "Value"
     }
   );
 }
-function Ne({
-  body: i,
+function sr({
+  body: e,
   bodyTab: a,
-  onBodyTabChange: c,
+  onBodyTabChange: i,
   onChange: n
 }) {
   return /* @__PURE__ */ t("div", { className: "nice-api-tester__body-editor", children: [
-    /* @__PURE__ */ e("div", { className: "nice-api-tester__body-tabs", children: ["none", "json", "form-data", "raw"].map((r) => /* @__PURE__ */ t("label", { children: [
-      /* @__PURE__ */ e(
+    /* @__PURE__ */ r("div", { className: "nice-api-tester__body-tabs", children: ["none", "json", "form-data", "raw"].map((s) => /* @__PURE__ */ t("label", { children: [
+      /* @__PURE__ */ r(
         "input",
         {
           type: "radio",
-          checked: a === r,
+          checked: a === s,
           onChange: () => {
-            c(r), n({ type: r, content: "" });
+            i(s), n({ type: s, content: "" });
           }
         }
       ),
-      r
-    ] }, r)) }),
-    a !== "none" && /* @__PURE__ */ e(
+      s
+    ] }, s)) }),
+    a !== "none" && /* @__PURE__ */ r(
       "textarea",
       {
-        value: typeof (i == null ? void 0 : i.content) == "string" ? i.content : JSON.stringify(i == null ? void 0 : i.content, null, 2),
-        onChange: (r) => n({ type: a, content: r.target.value }),
+        value: typeof (e == null ? void 0 : e.content) == "string" ? e.content : JSON.stringify(e == null ? void 0 : e.content, null, 2),
+        onChange: (s) => n({ type: a, content: s.target.value }),
         placeholder: a === "json" ? '{ "key": "value" }' : "Enter body content",
         rows: 10,
         className: "nice-api-tester__body-textarea"
@@ -1000,46 +2780,46 @@ function Ne({
     )
   ] });
 }
-function we({
-  auth: i,
+function cr({
+  auth: e,
   onChange: a
 }) {
-  var c, n, r, d, o, b;
+  var i, n, s, u, f, y;
   return /* @__PURE__ */ t("div", { className: "nice-api-tester__auth-editor", children: [
     /* @__PURE__ */ t("div", { className: "nice-api-tester__field", children: [
-      /* @__PURE__ */ e("label", { children: "Type" }),
+      /* @__PURE__ */ r("label", { children: "Type" }),
       /* @__PURE__ */ t(
         "select",
         {
-          value: (i == null ? void 0 : i.type) || "none",
-          onChange: (u) => a({ type: u.target.value }),
+          value: (e == null ? void 0 : e.type) || "none",
+          onChange: (b) => a({ type: b.target.value }),
           children: [
-            /* @__PURE__ */ e("option", { value: "none", children: "No Auth" }),
-            /* @__PURE__ */ e("option", { value: "api-key", children: "API Key" }),
-            /* @__PURE__ */ e("option", { value: "bearer", children: "Bearer Token" }),
-            /* @__PURE__ */ e("option", { value: "basic", children: "Basic Auth" }),
-            /* @__PURE__ */ e("option", { value: "oauth2", children: "OAuth 2.0" })
+            /* @__PURE__ */ r("option", { value: "none", children: "No Auth" }),
+            /* @__PURE__ */ r("option", { value: "api-key", children: "API Key" }),
+            /* @__PURE__ */ r("option", { value: "bearer", children: "Bearer Token" }),
+            /* @__PURE__ */ r("option", { value: "basic", children: "Basic Auth" }),
+            /* @__PURE__ */ r("option", { value: "oauth2", children: "OAuth 2.0" })
           ]
         }
       )
     ] }),
-    (i == null ? void 0 : i.type) === "api-key" && /* @__PURE__ */ t(R, { children: [
+    (e == null ? void 0 : e.type) === "api-key" && /* @__PURE__ */ t(J, { children: [
       /* @__PURE__ */ t("div", { className: "nice-api-tester__field", children: [
-        /* @__PURE__ */ e("label", { children: "Key" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Key" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "text",
-            value: ((c = i.apiKey) == null ? void 0 : c.key) || "",
-            onChange: (u) => {
-              var p, x;
+            value: ((i = e.apiKey) == null ? void 0 : i.key) || "",
+            onChange: (b) => {
+              var d, v;
               return a({
-                ...i,
+                ...e,
                 apiKey: {
-                  ...i.apiKey,
-                  key: u.target.value,
-                  value: ((p = i.apiKey) == null ? void 0 : p.value) || "",
-                  in: ((x = i.apiKey) == null ? void 0 : x.in) || "header"
+                  ...e.apiKey,
+                  key: b.target.value,
+                  value: ((d = e.apiKey) == null ? void 0 : d.value) || "",
+                  in: ((v = e.apiKey) == null ? void 0 : v.in) || "header"
                 }
               });
             },
@@ -1048,21 +2828,21 @@ function we({
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-api-tester__field", children: [
-        /* @__PURE__ */ e("label", { children: "Value" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Value" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "text",
-            value: ((n = i.apiKey) == null ? void 0 : n.value) || "",
-            onChange: (u) => {
-              var p, x;
+            value: ((n = e.apiKey) == null ? void 0 : n.value) || "",
+            onChange: (b) => {
+              var d, v;
               return a({
-                ...i,
+                ...e,
                 apiKey: {
-                  ...i.apiKey,
-                  value: u.target.value,
-                  key: ((p = i.apiKey) == null ? void 0 : p.key) || "",
-                  in: ((x = i.apiKey) == null ? void 0 : x.in) || "header"
+                  ...e.apiKey,
+                  value: b.target.value,
+                  key: ((d = e.apiKey) == null ? void 0 : d.key) || "",
+                  in: ((v = e.apiKey) == null ? void 0 : v.in) || "header"
                 }
               });
             },
@@ -1071,59 +2851,59 @@ function we({
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-api-tester__field", children: [
-        /* @__PURE__ */ e("label", { children: "Add to" }),
+        /* @__PURE__ */ r("label", { children: "Add to" }),
         /* @__PURE__ */ t(
           "select",
           {
-            value: ((r = i.apiKey) == null ? void 0 : r.in) || "header",
-            onChange: (u) => {
-              var p, x;
+            value: ((s = e.apiKey) == null ? void 0 : s.in) || "header",
+            onChange: (b) => {
+              var d, v;
               return a({
-                ...i,
+                ...e,
                 apiKey: {
-                  ...i.apiKey,
-                  in: u.target.value,
-                  key: ((p = i.apiKey) == null ? void 0 : p.key) || "",
-                  value: ((x = i.apiKey) == null ? void 0 : x.value) || ""
+                  ...e.apiKey,
+                  in: b.target.value,
+                  key: ((d = e.apiKey) == null ? void 0 : d.key) || "",
+                  value: ((v = e.apiKey) == null ? void 0 : v.value) || ""
                 }
               });
             },
             children: [
-              /* @__PURE__ */ e("option", { value: "header", children: "Header" }),
-              /* @__PURE__ */ e("option", { value: "query", children: "Query Params" })
+              /* @__PURE__ */ r("option", { value: "header", children: "Header" }),
+              /* @__PURE__ */ r("option", { value: "query", children: "Query Params" })
             ]
           }
         )
       ] })
     ] }),
-    (i == null ? void 0 : i.type) === "bearer" && /* @__PURE__ */ t("div", { className: "nice-api-tester__field", children: [
-      /* @__PURE__ */ e("label", { children: "Token" }),
-      /* @__PURE__ */ e(
+    (e == null ? void 0 : e.type) === "bearer" && /* @__PURE__ */ t("div", { className: "nice-api-tester__field", children: [
+      /* @__PURE__ */ r("label", { children: "Token" }),
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
-          value: ((d = i.bearer) == null ? void 0 : d.token) || "",
-          onChange: (u) => a({ ...i, bearer: { token: u.target.value } }),
+          value: ((u = e.bearer) == null ? void 0 : u.token) || "",
+          onChange: (b) => a({ ...e, bearer: { token: b.target.value } }),
           placeholder: "your-bearer-token"
         }
       )
     ] }),
-    (i == null ? void 0 : i.type) === "basic" && /* @__PURE__ */ t(R, { children: [
+    (e == null ? void 0 : e.type) === "basic" && /* @__PURE__ */ t(J, { children: [
       /* @__PURE__ */ t("div", { className: "nice-api-tester__field", children: [
-        /* @__PURE__ */ e("label", { children: "Username" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Username" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "text",
-            value: ((o = i.basic) == null ? void 0 : o.username) || "",
-            onChange: (u) => {
-              var p;
+            value: ((f = e.basic) == null ? void 0 : f.username) || "",
+            onChange: (b) => {
+              var d;
               return a({
-                ...i,
+                ...e,
                 basic: {
-                  ...i.basic,
-                  username: u.target.value,
-                  password: ((p = i.basic) == null ? void 0 : p.password) || ""
+                  ...e.basic,
+                  username: b.target.value,
+                  password: ((d = e.basic) == null ? void 0 : d.password) || ""
                 }
               });
             }
@@ -1131,20 +2911,20 @@ function we({
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-api-tester__field", children: [
-        /* @__PURE__ */ e("label", { children: "Password" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Password" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "password",
-            value: ((b = i.basic) == null ? void 0 : b.password) || "",
-            onChange: (u) => {
-              var p;
+            value: ((y = e.basic) == null ? void 0 : y.password) || "",
+            onChange: (b) => {
+              var d;
               return a({
-                ...i,
+                ...e,
                 basic: {
-                  ...i.basic,
-                  password: u.target.value,
-                  username: ((p = i.basic) == null ? void 0 : p.username) || ""
+                  ...e.basic,
+                  password: b.target.value,
+                  username: ((d = e.basic) == null ? void 0 : d.username) || ""
                 }
               });
             }
@@ -1154,32 +2934,32 @@ function we({
     ] })
   ] });
 }
-function Ce({
-  preRequestScript: i,
+function or({
+  preRequestScript: e,
   testScript: a,
-  onPreRequestChange: c,
+  onPreRequestChange: i,
   onTestChange: n
 }) {
   return /* @__PURE__ */ t("div", { className: "nice-api-tester__tests-editor", children: [
     /* @__PURE__ */ t("div", { className: "nice-api-tester__script-section", children: [
-      /* @__PURE__ */ e("h4", { children: "Pre-request Script" }),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r("h4", { children: "Pre-request Script" }),
+      /* @__PURE__ */ r(
         "textarea",
         {
-          value: i,
-          onChange: (r) => c(r.target.value),
+          value: e,
+          onChange: (s) => i(s.target.value),
           placeholder: "// Code to run before the request",
           rows: 5
         }
       )
     ] }),
     /* @__PURE__ */ t("div", { className: "nice-api-tester__script-section", children: [
-      /* @__PURE__ */ e("h4", { children: "Tests" }),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r("h4", { children: "Tests" }),
+      /* @__PURE__ */ r(
         "textarea",
         {
           value: a,
-          onChange: (r) => n(r.target.value),
+          onChange: (s) => n(s.target.value),
           placeholder: `pm.test("Status code is 200", function () {
     pm.expect(pm.response.code).to.equal(200);
 });`,
@@ -1189,7 +2969,16 @@ function Ce({
     ] })
   ] });
 }
-const W = [
+const dr = [
+  {
+    target: ".nice-integration-builder",
+    titleKey: "tutorial.integrationBuilder.intro.title",
+    title: "Integration builder",
+    contentKey: "tutorial.integrationBuilder.intro.content",
+    content: "Wire a flow of nodes (triggers → actions → error handling) and connect them to build an integration.",
+    placement: "auto"
+  }
+], te = [
   { type: "trigger", label: "Trigger", icon: "⚡", category: "Control" },
   { type: "http-request", label: "HTTP Request", icon: "🌐", category: "Actions" },
   { type: "transform", label: "Transform", icon: "🔄", category: "Data" },
@@ -1203,7 +2992,7 @@ const W = [
   { type: "webhook", label: "Webhook", icon: "🔗", category: "Actions" },
   { type: "function", label: "Function", icon: "ƒ", category: "Actions" },
   { type: "error-handler", label: "Error Handler", icon: "⚠️", category: "Control" }
-], Ee = {
+], lr = {
   id: "",
   name: "New Flow",
   nodes: [],
@@ -1212,245 +3001,247 @@ const W = [
   triggers: [],
   errorHandling: { strategy: "stop" }
 };
-function Ie({
-  flow: i,
+function Nr({
+  flow: e,
   connectors: a = [],
-  onChange: c,
+  onChange: i,
   onSave: n,
-  onRun: r,
-  className: d = ""
+  onRun: s,
+  className: u = "",
+  tutorial: f
 }) {
-  const [o, b] = w(
-    i || { ...Ee, id: crypto.randomUUID() }
-  ), [u, p] = w(null), [x, h] = w(!0), [_, S] = w("canvas"), [C, E] = w(!1), [$, I] = w(null), [F, P] = w(!1), [j, O] = w(null), [q, v] = w(!1), f = Z(null), N = T(
-    (l) => {
-      b((m) => {
-        const y = l(m);
-        return c == null || c(y), y;
+  const [y, b] = g(
+    e || { ...lr, id: crypto.randomUUID() }
+  ), [d, v] = g(null), [k, m] = g(!0), [T, _] = g("canvas"), [I, H] = g(!1), [j, K] = g(null), [G, $] = g(!1), [U, O] = g(null), [q, w] = g(!1), x = se(null), S = P(
+    (p) => {
+      b((h) => {
+        const C = p(h);
+        return i == null || i(C), C;
       });
     },
-    [c]
-  ), U = T(
-    (l, m) => {
-      var s;
-      const y = {
+    [i]
+  ), B = P(
+    (p, h) => {
+      var c;
+      const C = {
         id: crypto.randomUUID(),
-        type: l,
-        name: ((s = W.find((g) => g.type === l)) == null ? void 0 : s.label) || l,
-        position: m,
-        config: xe(l),
-        inputs: l !== "trigger" ? ["input"] : [],
+        type: p,
+        name: ((c = te.find((o) => o.type === p)) == null ? void 0 : c.label) || p,
+        position: h,
+        config: fr(p),
+        inputs: p !== "trigger" ? ["input"] : [],
         outputs: ["output"]
       };
-      N((g) => ({
-        ...g,
-        nodes: [...g.nodes, y]
-      })), p(y);
+      S((o) => ({
+        ...o,
+        nodes: [...o.nodes, C]
+      })), v(C);
     },
-    [N]
-  ), L = T(
-    (l) => {
-      N((m) => ({
-        ...m,
-        nodes: m.nodes.filter((y) => y.id !== l),
-        connections: m.connections.filter(
-          (y) => y.sourceNodeId !== l && y.targetNodeId !== l
+    [S]
+  ), V = P(
+    (p) => {
+      S((h) => ({
+        ...h,
+        nodes: h.nodes.filter((C) => C.id !== p),
+        connections: h.connections.filter(
+          (C) => C.sourceNodeId !== p && C.targetNodeId !== p
         )
-      })), p(null);
+      })), v(null);
     },
-    [N]
-  ), V = T(
-    (l, m) => {
-      N((y) => ({
-        ...y,
-        nodes: y.nodes.map((s) => s.id === l ? { ...s, ...m } : s)
-      })), (u == null ? void 0 : u.id) === l && p((y) => y ? { ...y, ...m } : null);
+    [S]
+  ), z = P(
+    (p, h) => {
+      S((C) => ({
+        ...C,
+        nodes: C.nodes.map((c) => c.id === p ? { ...c, ...h } : c)
+      })), (d == null ? void 0 : d.id) === p && v((C) => C ? { ...C, ...h } : null);
     },
-    [N, u]
-  ), H = T(
-    (l, m, y, s) => {
-      l === y || o.connections.some(
-        (k) => k.sourceNodeId === l && k.targetNodeId === y && k.sourceOutput === m && k.targetInput === s
-      ) || N((k) => ({
-        ...k,
+    [S, d]
+  ), L = P(
+    (p, h, C, c) => {
+      p === C || y.connections.some(
+        (N) => N.sourceNodeId === p && N.targetNodeId === C && N.sourceOutput === h && N.targetInput === c
+      ) || S((N) => ({
+        ...N,
         connections: [
-          ...k.connections,
+          ...N.connections,
           {
             id: crypto.randomUUID(),
-            sourceNodeId: l,
-            sourceOutput: m,
-            targetNodeId: y,
-            targetInput: s
+            sourceNodeId: p,
+            sourceOutput: h,
+            targetNodeId: C,
+            targetInput: c
           }
         ]
       }));
     },
-    [o.connections, N]
-  ), J = T(
-    (l) => {
-      N((m) => ({
-        ...m,
-        connections: m.connections.filter((y) => y.id !== l)
+    [y.connections, S]
+  ), X = P(
+    (p) => {
+      S((h) => ({
+        ...h,
+        connections: h.connections.filter((C) => C.id !== p)
       }));
     },
-    [N]
-  ), K = T(
-    (l) => {
-      if (l.preventDefault(), !$ || !f.current)
+    [S]
+  ), F = P(
+    (p) => {
+      if (p.preventDefault(), !j || !x.current)
         return;
-      const m = f.current.getBoundingClientRect(), y = l.clientX - m.left, s = l.clientY - m.top;
-      U($, { x: y, y: s }), E(!1), I(null);
+      const h = x.current.getBoundingClientRect(), C = p.clientX - h.left, c = p.clientY - h.top;
+      B(j, { x: C, y: c }), H(!1), K(null);
     },
-    [$, U]
-  ), z = T(async () => {
-    if (r) {
-      v(!0);
+    [j, B]
+  ), Q = P(async () => {
+    if (s) {
+      w(!0);
       try {
-        await r(o);
+        await s(y);
       } finally {
-        v(!1);
+        w(!1);
       }
     }
-  }, [o, r]), G = T(() => {
-    n == null || n(o);
-  }, [o, n]);
-  return /* @__PURE__ */ t("div", { className: `nice-integration-builder ${d}`, children: [
+  }, [y, s]), Y = P(() => {
+    n == null || n(y);
+  }, [y, n]);
+  return /* @__PURE__ */ t("div", { className: `nice-integration-builder ${u}`, style: { position: "relative" }, children: [
+    f && /* @__PURE__ */ r("div", { style: { position: "absolute", top: 8, right: 8, zIndex: 5 }, children: /* @__PURE__ */ r(re, { steps: ee(f, dr) }) }),
     /* @__PURE__ */ t("div", { className: "nice-integration-builder__toolbar", children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
-          value: o.name,
-          onChange: (l) => N((m) => ({ ...m, name: l.target.value })),
+          value: y.name,
+          onChange: (p) => S((h) => ({ ...h, name: p.target.value })),
           className: "nice-integration-builder__name-input"
         }
       ),
-      /* @__PURE__ */ e("div", { className: "nice-integration-builder__tabs", children: ["canvas", "code", "variables", "settings"].map((l) => /* @__PURE__ */ e(
+      /* @__PURE__ */ r("div", { className: "nice-integration-builder__tabs", children: ["canvas", "code", "variables", "settings"].map((p) => /* @__PURE__ */ r(
         "button",
         {
-          className: `nice-integration-builder__tab ${_ === l ? "nice-integration-builder__tab--active" : ""}`,
-          onClick: () => S(l),
-          children: l.charAt(0).toUpperCase() + l.slice(1)
+          className: `nice-integration-builder__tab ${T === p ? "nice-integration-builder__tab--active" : ""}`,
+          onClick: () => _(p),
+          children: p.charAt(0).toUpperCase() + p.slice(1)
         },
-        l
+        p
       )) }),
       /* @__PURE__ */ t("div", { className: "nice-integration-builder__actions", children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r(
           "button",
           {
-            onClick: z,
+            onClick: Q,
             disabled: q,
             className: "nice-integration-builder__run-btn",
             children: q ? "⏳ Running..." : "▶ Run"
           }
         ),
-        /* @__PURE__ */ e("button", { onClick: G, className: "nice-integration-builder__save-btn", children: "💾 Save" })
+        /* @__PURE__ */ r("button", { onClick: Y, className: "nice-integration-builder__save-btn", children: "💾 Save" })
       ] })
     ] }),
     /* @__PURE__ */ t("div", { className: "nice-integration-builder__main", children: [
-      x && _ === "canvas" && /* @__PURE__ */ t("div", { className: "nice-integration-builder__palette", children: [
-        /* @__PURE__ */ e("h4", { children: "Nodes" }),
-        ["Control", "Actions", "Data"].map((l) => /* @__PURE__ */ t("div", { className: "nice-integration-builder__category", children: [
-          /* @__PURE__ */ e("h5", { children: l }),
-          W.filter((m) => m.category === l).map((m) => /* @__PURE__ */ t(
+      k && T === "canvas" && /* @__PURE__ */ t("div", { className: "nice-integration-builder__palette", children: [
+        /* @__PURE__ */ r("h4", { children: "Nodes" }),
+        ["Control", "Actions", "Data"].map((p) => /* @__PURE__ */ t("div", { className: "nice-integration-builder__category", children: [
+          /* @__PURE__ */ r("h5", { children: p }),
+          te.filter((h) => h.category === p).map((h) => /* @__PURE__ */ t(
             "div",
             {
               className: "nice-integration-builder__palette-item",
               draggable: !0,
               onDragStart: () => {
-                E(!0), I(m.type);
+                H(!0), K(h.type);
               },
               onDragEnd: () => {
-                E(!1), I(null);
+                H(!1), K(null);
               },
               children: [
-                /* @__PURE__ */ e("span", { className: "nice-integration-builder__palette-icon", children: m.icon }),
-                /* @__PURE__ */ e("span", { children: m.label })
+                /* @__PURE__ */ r("span", { className: "nice-integration-builder__palette-icon", children: h.icon }),
+                /* @__PURE__ */ r("span", { children: h.label })
               ]
             },
-            m.type
+            h.type
           ))
-        ] }, l)),
+        ] }, p)),
         a.length > 0 && /* @__PURE__ */ t("div", { className: "nice-integration-builder__category", children: [
-          /* @__PURE__ */ e("h5", { children: "Connectors" }),
-          a.map((l) => /* @__PURE__ */ t("div", { className: "nice-integration-builder__palette-item", children: [
-            /* @__PURE__ */ e("span", { className: "nice-integration-builder__palette-icon", children: "🔌" }),
-            /* @__PURE__ */ e("span", { children: l.name })
-          ] }, l.id))
+          /* @__PURE__ */ r("h5", { children: "Connectors" }),
+          a.map((p) => /* @__PURE__ */ t("div", { className: "nice-integration-builder__palette-item", children: [
+            /* @__PURE__ */ r("span", { className: "nice-integration-builder__palette-icon", children: "🔌" }),
+            /* @__PURE__ */ r("span", { children: p.name })
+          ] }, p.id))
         ] })
       ] }),
-      _ === "canvas" && /* @__PURE__ */ t(
+      T === "canvas" && /* @__PURE__ */ t(
         "div",
         {
-          ref: f,
-          className: `nice-integration-builder__canvas ${C ? "nice-integration-builder__canvas--dragging" : ""}`,
-          onDragOver: (l) => l.preventDefault(),
-          onDrop: K,
-          onClick: () => p(null),
+          ref: x,
+          className: `nice-integration-builder__canvas ${I ? "nice-integration-builder__canvas--dragging" : ""}`,
+          onDragOver: (p) => p.preventDefault(),
+          onDrop: F,
+          onClick: () => v(null),
           children: [
-            /* @__PURE__ */ e("svg", { className: "nice-integration-builder__connections", children: o.connections.map((l) => {
-              const m = o.nodes.find((D) => D.id === l.sourceNodeId), y = o.nodes.find((D) => D.id === l.targetNodeId);
-              if (!m || !y)
+            /* @__PURE__ */ r("svg", { className: "nice-integration-builder__connections", children: y.connections.map((p) => {
+              const h = y.nodes.find((A) => A.id === p.sourceNodeId), C = y.nodes.find((A) => A.id === p.targetNodeId);
+              if (!h || !C)
                 return null;
-              const s = m.position.x + 150, g = m.position.y + 30, k = y.position.x, B = y.position.y + 30, A = (s + k) / 2;
-              return /* @__PURE__ */ e("g", { onClick: () => J(l.id), children: /* @__PURE__ */ e(
+              const c = h.position.x + 150, o = h.position.y + 30, N = C.position.x, D = C.position.y + 30, E = (c + N) / 2;
+              return /* @__PURE__ */ r("g", { onClick: () => X(p.id), children: /* @__PURE__ */ r(
                 "path",
                 {
-                  d: `M ${s} ${g} C ${A} ${g}, ${A} ${B}, ${k} ${B}`,
+                  d: `M ${c} ${o} C ${E} ${o}, ${E} ${D}, ${N} ${D}`,
                   className: "nice-integration-builder__connection"
                 }
-              ) }, l.id);
+              ) }, p.id);
             }) }),
-            o.nodes.map((l) => /* @__PURE__ */ e(
-              Te,
+            y.nodes.map((p) => /* @__PURE__ */ r(
+              pr,
               {
-                node: l,
-                isSelected: (u == null ? void 0 : u.id) === l.id,
-                onSelect: () => p(l),
-                onDelete: () => L(l.id),
-                onPositionChange: (m) => V(l.id, { position: m }),
-                onStartConnection: (m) => {
-                  P(!0), O({ nodeId: l.id, output: m });
+                node: p,
+                isSelected: (d == null ? void 0 : d.id) === p.id,
+                onSelect: () => v(p),
+                onDelete: () => V(p.id),
+                onPositionChange: (h) => z(p.id, { position: h }),
+                onStartConnection: (h) => {
+                  $(!0), O({ nodeId: p.id, output: h });
                 },
-                onEndConnection: (m) => {
-                  j && H(j.nodeId, j.output, l.id, m), P(!1), O(null);
+                onEndConnection: (h) => {
+                  U && L(U.nodeId, U.output, p.id, h), $(!1), O(null);
                 }
               },
-              l.id
+              p.id
             )),
-            o.nodes.length === 0 && /* @__PURE__ */ e("div", { className: "nice-integration-builder__empty", children: "Drag nodes from the palette to build your flow" })
+            y.nodes.length === 0 && /* @__PURE__ */ r("div", { className: "nice-integration-builder__empty", children: "Drag nodes from the palette to build your flow" })
           ]
         }
       ),
-      _ === "code" && /* @__PURE__ */ e("div", { className: "nice-integration-builder__code-view", children: /* @__PURE__ */ e("pre", { children: JSON.stringify(o, null, 2) }) }),
-      _ === "variables" && /* @__PURE__ */ e(
-        Ae,
+      T === "code" && /* @__PURE__ */ r("div", { className: "nice-integration-builder__code-view", children: /* @__PURE__ */ r("pre", { children: JSON.stringify(y, null, 2) }) }),
+      T === "variables" && /* @__PURE__ */ r(
+        yr,
         {
-          variables: o.variables,
-          onChange: (l) => N((m) => ({ ...m, variables: l }))
+          variables: y.variables,
+          onChange: (p) => S((h) => ({ ...h, variables: p }))
         }
       ),
-      _ === "settings" && /* @__PURE__ */ e(
-        De,
+      T === "settings" && /* @__PURE__ */ r(
+        ur,
         {
-          errorHandling: o.errorHandling,
-          schedule: o.schedule,
-          onChange: (l, m) => N((y) => ({ ...y, errorHandling: l, schedule: m }))
+          errorHandling: y.errorHandling,
+          schedule: y.schedule,
+          onChange: (p, h) => S((C) => ({ ...C, errorHandling: p, schedule: h }))
         }
       ),
-      u && _ === "canvas" && /* @__PURE__ */ e(
-        Se,
+      d && T === "canvas" && /* @__PURE__ */ r(
+        mr,
         {
-          node: u,
-          onChange: (l) => V(u.id, l),
-          onClose: () => p(null)
+          node: d,
+          onChange: (p) => z(d.id, p),
+          onClose: () => v(null)
         }
       )
     ] })
   ] });
 }
-function xe(i) {
-  switch (i) {
+function fr(e) {
+  switch (e) {
     case "http-request":
       return { method: "GET", url: "", headers: {}, body: "" };
     case "transform":
@@ -1480,214 +3271,214 @@ return input;` };
       return {};
   }
 }
-function Te({
-  node: i,
+function pr({
+  node: e,
   isSelected: a,
-  onSelect: c,
+  onSelect: i,
   onDelete: n,
-  onPositionChange: r,
-  onStartConnection: d,
-  onEndConnection: o
+  onPositionChange: s,
+  onStartConnection: u,
+  onEndConnection: f
 }) {
-  const [b, u] = w(!1), [p, x] = w({ x: 0, y: 0 }), h = Z(null), _ = W.find((C) => C.type === i.type), S = (C) => {
-    C.button === 0 && (C.stopPropagation(), u(!0), x({
-      x: C.clientX - i.position.x,
-      y: C.clientY - i.position.y
-    }), c());
+  const [y, b] = g(!1), [d, v] = g({ x: 0, y: 0 }), k = se(null), m = te.find((_) => _.type === e.type), T = (_) => {
+    _.button === 0 && (_.stopPropagation(), b(!0), v({
+      x: _.clientX - e.position.x,
+      y: _.clientY - e.position.y
+    }), i());
   };
-  return se(() => {
-    if (!b)
+  return ye(() => {
+    if (!y)
       return;
-    const C = ($) => {
-      r({
-        x: $.clientX - p.x,
-        y: $.clientY - p.y
+    const _ = (H) => {
+      s({
+        x: H.clientX - d.x,
+        y: H.clientY - d.y
       });
-    }, E = () => {
-      u(!1);
+    }, I = () => {
+      b(!1);
     };
-    return window.addEventListener("mousemove", C), window.addEventListener("mouseup", E), () => {
-      window.removeEventListener("mousemove", C), window.removeEventListener("mouseup", E);
+    return window.addEventListener("mousemove", _), window.addEventListener("mouseup", I), () => {
+      window.removeEventListener("mousemove", _), window.removeEventListener("mouseup", I);
     };
-  }, [b, p, r]), /* @__PURE__ */ t(
+  }, [y, d, s]), /* @__PURE__ */ t(
     "div",
     {
-      ref: h,
-      className: `nice-integration-builder__node nice-integration-builder__node--${i.type} ${a ? "nice-integration-builder__node--selected" : ""}`,
+      ref: k,
+      className: `nice-integration-builder__node nice-integration-builder__node--${e.type} ${a ? "nice-integration-builder__node--selected" : ""}`,
       style: {
-        left: i.position.x,
-        top: i.position.y
+        left: e.position.x,
+        top: e.position.y
       },
-      onMouseDown: S,
+      onMouseDown: T,
       children: [
         /* @__PURE__ */ t("div", { className: "nice-integration-builder__node-header", children: [
-          /* @__PURE__ */ e("span", { className: "nice-integration-builder__node-icon", children: (_ == null ? void 0 : _.icon) || "📦" }),
-          /* @__PURE__ */ e("span", { className: "nice-integration-builder__node-name", children: i.name }),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r("span", { className: "nice-integration-builder__node-icon", children: (m == null ? void 0 : m.icon) || "📦" }),
+          /* @__PURE__ */ r("span", { className: "nice-integration-builder__node-name", children: e.name }),
+          /* @__PURE__ */ r(
             "button",
             {
               className: "nice-integration-builder__node-delete",
-              onClick: (C) => {
-                C.stopPropagation(), n();
+              onClick: (_) => {
+                _.stopPropagation(), n();
               },
               children: "×"
             }
           )
         ] }),
-        i.inputs.map((C) => /* @__PURE__ */ t(
+        e.inputs.map((_) => /* @__PURE__ */ t(
           "div",
           {
             className: "nice-integration-builder__port nice-integration-builder__port--input",
-            onMouseUp: () => o(C),
+            onMouseUp: () => f(_),
             children: [
-              /* @__PURE__ */ e("span", { className: "nice-integration-builder__port-dot" }),
-              /* @__PURE__ */ e("span", { className: "nice-integration-builder__port-label", children: C })
+              /* @__PURE__ */ r("span", { className: "nice-integration-builder__port-dot" }),
+              /* @__PURE__ */ r("span", { className: "nice-integration-builder__port-label", children: _ })
             ]
           },
-          C
+          _
         )),
-        i.outputs.map((C) => /* @__PURE__ */ t(
+        e.outputs.map((_) => /* @__PURE__ */ t(
           "div",
           {
             className: "nice-integration-builder__port nice-integration-builder__port--output",
-            onMouseDown: (E) => {
-              E.stopPropagation(), d(C);
+            onMouseDown: (I) => {
+              I.stopPropagation(), u(_);
             },
             children: [
-              /* @__PURE__ */ e("span", { className: "nice-integration-builder__port-label", children: C }),
-              /* @__PURE__ */ e("span", { className: "nice-integration-builder__port-dot" })
+              /* @__PURE__ */ r("span", { className: "nice-integration-builder__port-label", children: _ }),
+              /* @__PURE__ */ r("span", { className: "nice-integration-builder__port-dot" })
             ]
           },
-          C
+          _
         ))
       ]
     }
   );
 }
-function Se({
-  node: i,
+function mr({
+  node: e,
   onChange: a,
-  onClose: c
+  onClose: i
 }) {
   return /* @__PURE__ */ t("div", { className: "nice-integration-builder__properties", children: [
     /* @__PURE__ */ t("div", { className: "nice-integration-builder__properties-header", children: [
-      /* @__PURE__ */ e("h4", { children: i.name }),
-      /* @__PURE__ */ e("button", { onClick: c, children: "×" })
+      /* @__PURE__ */ r("h4", { children: e.name }),
+      /* @__PURE__ */ r("button", { onClick: i, children: "×" })
     ] }),
     /* @__PURE__ */ t("div", { className: "nice-integration-builder__properties-content", children: [
       /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-        /* @__PURE__ */ e("label", { children: "Name" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Name" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "text",
-            value: i.name,
+            value: e.name,
             onChange: (n) => a({ name: n.target.value })
           }
         )
       ] }),
-      i.type === "http-request" && /* @__PURE__ */ t(R, { children: [
+      e.type === "http-request" && /* @__PURE__ */ t(J, { children: [
         /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-          /* @__PURE__ */ e("label", { children: "Method" }),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r("label", { children: "Method" }),
+          /* @__PURE__ */ r(
             "select",
             {
-              value: i.config.method || "GET",
-              onChange: (n) => a({ config: { ...i.config, method: n.target.value } }),
-              children: ["GET", "POST", "PUT", "PATCH", "DELETE"].map((n) => /* @__PURE__ */ e("option", { value: n, children: n }, n))
+              value: e.config.method || "GET",
+              onChange: (n) => a({ config: { ...e.config, method: n.target.value } }),
+              children: ["GET", "POST", "PUT", "PATCH", "DELETE"].map((n) => /* @__PURE__ */ r("option", { value: n, children: n }, n))
             }
           )
         ] }),
         /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-          /* @__PURE__ */ e("label", { children: "URL" }),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r("label", { children: "URL" }),
+          /* @__PURE__ */ r(
             "input",
             {
               type: "text",
-              value: i.config.url || "",
-              onChange: (n) => a({ config: { ...i.config, url: n.target.value } }),
+              value: e.config.url || "",
+              onChange: (n) => a({ config: { ...e.config, url: n.target.value } }),
               placeholder: "https://api.example.com/endpoint"
             }
           )
         ] })
       ] }),
-      i.type === "delay" && /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-        /* @__PURE__ */ e("label", { children: "Duration (ms)" }),
-        /* @__PURE__ */ e(
+      e.type === "delay" && /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
+        /* @__PURE__ */ r("label", { children: "Duration (ms)" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "number",
-            value: i.config.duration || 1e3,
-            onChange: (n) => a({ config: { ...i.config, duration: parseInt(n.target.value, 10) } })
+            value: e.config.duration || 1e3,
+            onChange: (n) => a({ config: { ...e.config, duration: parseInt(n.target.value, 10) } })
           }
         )
       ] }),
-      i.type === "set-variable" && /* @__PURE__ */ t(R, { children: [
+      e.type === "set-variable" && /* @__PURE__ */ t(J, { children: [
         /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-          /* @__PURE__ */ e("label", { children: "Variable Name" }),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r("label", { children: "Variable Name" }),
+          /* @__PURE__ */ r(
             "input",
             {
               type: "text",
-              value: i.config.name || "",
-              onChange: (n) => a({ config: { ...i.config, name: n.target.value } })
+              value: e.config.name || "",
+              onChange: (n) => a({ config: { ...e.config, name: n.target.value } })
             }
           )
         ] }),
         /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-          /* @__PURE__ */ e("label", { children: "Value" }),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r("label", { children: "Value" }),
+          /* @__PURE__ */ r(
             "input",
             {
               type: "text",
-              value: i.config.value || "",
-              onChange: (n) => a({ config: { ...i.config, value: n.target.value } })
+              value: e.config.value || "",
+              onChange: (n) => a({ config: { ...e.config, value: n.target.value } })
             }
           )
         ] })
       ] }),
-      i.type === "function" && /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-        /* @__PURE__ */ e("label", { children: "Code" }),
-        /* @__PURE__ */ e(
+      e.type === "function" && /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
+        /* @__PURE__ */ r("label", { children: "Code" }),
+        /* @__PURE__ */ r(
           "textarea",
           {
-            value: i.config.code || "",
-            onChange: (n) => a({ config: { ...i.config, code: n.target.value } }),
+            value: e.config.code || "",
+            onChange: (n) => a({ config: { ...e.config, code: n.target.value } }),
             rows: 10,
             className: "nice-integration-builder__code-input"
           }
         )
       ] }),
-      i.type === "email" && /* @__PURE__ */ t(R, { children: [
+      e.type === "email" && /* @__PURE__ */ t(J, { children: [
         /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-          /* @__PURE__ */ e("label", { children: "To" }),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r("label", { children: "To" }),
+          /* @__PURE__ */ r(
             "input",
             {
               type: "text",
-              value: i.config.to || "",
-              onChange: (n) => a({ config: { ...i.config, to: n.target.value } })
+              value: e.config.to || "",
+              onChange: (n) => a({ config: { ...e.config, to: n.target.value } })
             }
           )
         ] }),
         /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-          /* @__PURE__ */ e("label", { children: "Subject" }),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r("label", { children: "Subject" }),
+          /* @__PURE__ */ r(
             "input",
             {
               type: "text",
-              value: i.config.subject || "",
-              onChange: (n) => a({ config: { ...i.config, subject: n.target.value } })
+              value: e.config.subject || "",
+              onChange: (n) => a({ config: { ...e.config, subject: n.target.value } })
             }
           )
         ] }),
         /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-          /* @__PURE__ */ e("label", { children: "Body" }),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r("label", { children: "Body" }),
+          /* @__PURE__ */ r(
             "textarea",
             {
-              value: i.config.body || "",
-              onChange: (n) => a({ config: { ...i.config, body: n.target.value } }),
+              value: e.config.body || "",
+              onChange: (n) => a({ config: { ...e.config, body: n.target.value } }),
               rows: 5
             }
           )
@@ -1696,125 +3487,343 @@ function Se({
     ] })
   ] });
 }
-function Ae({ variables: i, onChange: a }) {
-  const c = () => {
-    a({ ...i, newVariable: "" });
+function yr({ variables: e, onChange: a }) {
+  const i = () => {
+    a({ ...e, newVariable: "" });
   };
   return /* @__PURE__ */ t("div", { className: "nice-integration-builder__variables", children: [
-    /* @__PURE__ */ e("h4", { children: "Flow Variables" }),
-    /* @__PURE__ */ e("div", { className: "nice-integration-builder__variables-list", children: Object.entries(i).map(([n, r]) => /* @__PURE__ */ t("div", { className: "nice-integration-builder__variable-row", children: [
-      /* @__PURE__ */ e(
+    /* @__PURE__ */ r("h4", { children: "Flow Variables" }),
+    /* @__PURE__ */ r("div", { className: "nice-integration-builder__variables-list", children: Object.entries(e).map(([n, s]) => /* @__PURE__ */ t("div", { className: "nice-integration-builder__variable-row", children: [
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
           value: n,
-          onChange: (d) => {
-            const { [n]: o, ...b } = i;
-            a({ ...b, [d.target.value]: r });
+          onChange: (u) => {
+            const { [n]: f, ...y } = e;
+            a({ ...y, [u.target.value]: s });
           },
           placeholder: "Name"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
-          value: String(r),
-          onChange: (d) => a({ ...i, [n]: d.target.value }),
+          value: String(s),
+          onChange: (u) => a({ ...e, [n]: u.target.value }),
           placeholder: "Value"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "button",
         {
           onClick: () => {
-            const { [n]: d, ...o } = i;
-            a(o);
+            const { [n]: u, ...f } = e;
+            a(f);
           },
           children: "×"
         }
       )
     ] }, n)) }),
-    /* @__PURE__ */ e("button", { onClick: c, children: "+ Add Variable" })
+    /* @__PURE__ */ r("button", { onClick: i, children: "+ Add Variable" })
   ] });
 }
-function De({
-  errorHandling: i,
+function ur({
+  errorHandling: e,
   schedule: a,
-  onChange: c
+  onChange: i
 }) {
   return /* @__PURE__ */ t("div", { className: "nice-integration-builder__settings", children: [
-    /* @__PURE__ */ e("h4", { children: "Error Handling" }),
+    /* @__PURE__ */ r("h4", { children: "Error Handling" }),
     /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-      /* @__PURE__ */ e("label", { children: "Strategy" }),
+      /* @__PURE__ */ r("label", { children: "Strategy" }),
       /* @__PURE__ */ t(
         "select",
         {
-          value: i.strategy,
-          onChange: (n) => c(
-            { ...i, strategy: n.target.value },
+          value: e.strategy,
+          onChange: (n) => i(
+            { ...e, strategy: n.target.value },
             a
           ),
           children: [
-            /* @__PURE__ */ e("option", { value: "stop", children: "Stop on error" }),
-            /* @__PURE__ */ e("option", { value: "continue", children: "Continue on error" }),
-            /* @__PURE__ */ e("option", { value: "retry", children: "Retry on error" })
+            /* @__PURE__ */ r("option", { value: "stop", children: "Stop on error" }),
+            /* @__PURE__ */ r("option", { value: "continue", children: "Continue on error" }),
+            /* @__PURE__ */ r("option", { value: "retry", children: "Retry on error" })
           ]
         }
       )
     ] }),
-    i.strategy === "retry" && /* @__PURE__ */ t(R, { children: [
+    e.strategy === "retry" && /* @__PURE__ */ t(J, { children: [
       /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-        /* @__PURE__ */ e("label", { children: "Max Retries" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Max Retries" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "number",
-            value: i.maxRetries || 3,
-            onChange: (n) => c({ ...i, maxRetries: parseInt(n.target.value, 10) }, a)
+            value: e.maxRetries || 3,
+            onChange: (n) => i({ ...e, maxRetries: parseInt(n.target.value, 10) }, a)
           }
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-        /* @__PURE__ */ e("label", { children: "Retry Delay (ms)" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r("label", { children: "Retry Delay (ms)" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "number",
-            value: i.retryDelay || 1e3,
-            onChange: (n) => c({ ...i, retryDelay: parseInt(n.target.value, 10) }, a)
+            value: e.retryDelay || 1e3,
+            onChange: (n) => i({ ...e, retryDelay: parseInt(n.target.value, 10) }, a)
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ e("h4", { children: "Schedule" }),
-    /* @__PURE__ */ e("div", { className: "nice-integration-builder__field", children: /* @__PURE__ */ t("label", { children: [
-      /* @__PURE__ */ e(
+    /* @__PURE__ */ r("h4", { children: "Schedule" }),
+    /* @__PURE__ */ r("div", { className: "nice-integration-builder__field", children: /* @__PURE__ */ t("label", { children: [
+      /* @__PURE__ */ r(
         "input",
         {
           type: "checkbox",
           checked: (a == null ? void 0 : a.enabled) || !1,
-          onChange: (n) => c(i, { ...a, enabled: n.target.checked })
+          onChange: (n) => i(e, { ...a, enabled: n.target.checked })
         }
       ),
       "Enable scheduled execution"
     ] }) }),
     (a == null ? void 0 : a.enabled) && /* @__PURE__ */ t("div", { className: "nice-integration-builder__field", children: [
-      /* @__PURE__ */ e("label", { children: "Cron Expression" }),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r("label", { children: "Cron Expression" }),
+      /* @__PURE__ */ r(
         "input",
         {
           type: "text",
           value: a.cron || "",
-          onChange: (n) => c(i, { ...a, cron: n.target.value }),
+          onChange: (n) => i(e, { ...a, cron: n.target.value }),
           placeholder: "0 0 * * *"
         }
       )
     ] })
   ] });
 }
+const br = [
+  {
+    target: ".nice-webhook-tester",
+    titleKey: "tutorial.webhookTester.intro.title",
+    title: "Webhook tester",
+    contentKey: "tutorial.webhookTester.intro.content",
+    content: "Pick a saved payload (or write one), optionally sign it, send it to the endpoint and inspect the response.",
+    placement: "auto"
+  }
+];
+function fe(e) {
+  return e ? Object.entries(e).map(([a, i]) => ({ key: a, value: i })) : [];
+}
+function pe(e) {
+  const a = {};
+  for (const i of e)
+    i.key.trim() !== "" && (a[i.key] = i.value);
+  return a;
+}
+async function hr(e, a) {
+  var f;
+  const i = (f = globalThis.crypto) == null ? void 0 : f.subtle;
+  if (!i)
+    throw new Error("Web Crypto (crypto.subtle) is unavailable in this environment");
+  const n = new TextEncoder(), s = await i.importKey(
+    "raw",
+    n.encode(e),
+    { name: "HMAC", hash: "SHA-256" },
+    !1,
+    ["sign"]
+  ), u = await i.sign("HMAC", s, n.encode(a));
+  return [...new Uint8Array(u)].map((y) => y.toString(16).padStart(2, "0")).join("");
+}
+const xr = ke(
+  function(a, i) {
+    const {
+      url: n = "",
+      method: s = "POST",
+      headers: u,
+      payload: f = "",
+      samples: y = [],
+      onSend: b,
+      signing: d,
+      onSaveSample: v,
+      tutorial: k,
+      className: m,
+      style: T,
+      id: _,
+      "data-testid": I
+    } = a, [H, j] = g(n), [K, G] = g(s), [$, U] = g(() => fe(u)), [O, q] = g(f), [w, x] = g(""), [S, B] = g(!1), [V, z] = g(null), [L, X] = g(null), F = Te(() => {
+      const o = /* @__PURE__ */ new Map();
+      for (const N of y)
+        o.set(N.id, N);
+      return o;
+    }, [y]), Q = (o) => {
+      x(o);
+      const N = F.get(o);
+      N && (q(N.payload), N.headers && U(fe(N.headers)));
+    }, Y = (o, N) => {
+      U((D) => D.map((E, A) => A === o ? { ...E, ...N } : E));
+    }, p = async () => {
+      B(!0), z(null), X(null);
+      try {
+        const o = pe($);
+        if (d && d.secret) {
+          const A = await hr(d.secret, O);
+          o[d.header] = `${d.prefix ?? ""}${A}`;
+        }
+        const N = typeof performance < "u" ? performance.now() : Date.now(), D = await b({ url: H, method: K ?? "POST", headers: o, body: O }), E = Math.round(
+          (typeof performance < "u" ? performance.now() : Date.now()) - N
+        );
+        X({ ...D, durationMs: D.durationMs ?? E });
+      } catch (o) {
+        z(o instanceof Error ? o.message : String(o));
+      } finally {
+        B(!1);
+      }
+    }, h = () => {
+      var N;
+      if (!v)
+        return;
+      const o = typeof window < "u" && ((N = window.prompt) == null ? void 0 : N.call(window, "Sample name")) || "";
+      o && v({
+        id: `sample_${Date.now().toString(36)}`,
+        name: o,
+        payload: O,
+        headers: pe($)
+      });
+    }, C = L == null ? "" : L.status >= 200 && L.status < 300 ? " nice-webhook-tester__status--ok" : " nice-webhook-tester__status--error", c = "nice-webhook-tester" + (m ? ` ${m}` : "");
+    return /* @__PURE__ */ t("div", { ref: i, id: _, className: c, style: T, "data-testid": I, children: [
+      k && /* @__PURE__ */ r("div", { className: "nice-webhook-tester__tutorial", children: /* @__PURE__ */ r(re, { steps: ee(k, br) }) }),
+      /* @__PURE__ */ t("div", { className: "nice-webhook-tester__bar", children: [
+        /* @__PURE__ */ r(
+          "select",
+          {
+            className: "nice-webhook-tester__method",
+            value: K,
+            onChange: (o) => G(o.target.value),
+            "aria-label": "Method",
+            children: ["POST", "PUT", "GET", "PATCH", "DELETE"].map((o) => /* @__PURE__ */ r("option", { value: o, children: o }, o))
+          }
+        ),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "text",
+            className: "nice-webhook-tester__url",
+            value: H,
+            placeholder: "https://example.com/api/payments/stripe/webhook",
+            onChange: (o) => j(o.target.value),
+            "aria-label": "URL"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            className: "nice-webhook-tester__send",
+            onClick: () => void p(),
+            disabled: S || H.trim() === "",
+            children: S ? "Sending…" : "Send"
+          }
+        )
+      ] }),
+      y.length > 0 && /* @__PURE__ */ r("div", { className: "nice-webhook-tester__samples", children: /* @__PURE__ */ t("label", { children: [
+        "Sample:",
+        " ",
+        /* @__PURE__ */ t("select", { value: w, onChange: (o) => Q(o.target.value), children: [
+          /* @__PURE__ */ r("option", { value: "", children: "— choose a saved payload —" }),
+          y.map((o) => /* @__PURE__ */ r("option", { value: o.id, children: o.name }, o.id))
+        ] })
+      ] }) }),
+      /* @__PURE__ */ t("div", { className: "nice-webhook-tester__headers", children: [
+        /* @__PURE__ */ t("div", { className: "nice-webhook-tester__section-label", children: [
+          "Headers",
+          d && /* @__PURE__ */ t("span", { className: "nice-webhook-tester__signed", children: [
+            " ",
+            "· auto-signs ",
+            /* @__PURE__ */ r("code", { children: d.header })
+          ] })
+        ] }),
+        $.map((o, N) => /* @__PURE__ */ t("div", { className: "nice-webhook-tester__header-row", children: [
+          /* @__PURE__ */ r(
+            "input",
+            {
+              type: "text",
+              value: o.key,
+              placeholder: "Header",
+              onChange: (D) => Y(N, { key: D.target.value }),
+              "aria-label": "Header name"
+            }
+          ),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              type: "text",
+              value: o.value,
+              placeholder: "Value",
+              onChange: (D) => Y(N, { value: D.target.value }),
+              "aria-label": "Header value"
+            }
+          ),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: () => U((D) => D.filter((E, A) => A !== N)),
+              "aria-label": "Remove header",
+              children: "✕"
+            }
+          )
+        ] }, N)),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            className: "nice-webhook-tester__add-header",
+            onClick: () => U((o) => [...o, { key: "", value: "" }]),
+            children: "+ Header"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "nice-webhook-tester__payload", children: [
+        /* @__PURE__ */ t("div", { className: "nice-webhook-tester__section-label", children: [
+          "Payload",
+          v && /* @__PURE__ */ r("button", { type: "button", className: "nice-webhook-tester__save", onClick: h, children: "Save as sample" })
+        ] }),
+        /* @__PURE__ */ r(
+          "textarea",
+          {
+            className: "nice-webhook-tester__textarea",
+            value: O,
+            spellCheck: !1,
+            rows: 8,
+            placeholder: '{ "type": "payment.succeeded", "data": { ... } }',
+            onChange: (o) => q(o.target.value),
+            "aria-label": "Payload"
+          }
+        )
+      ] }),
+      V && /* @__PURE__ */ r("div", { className: "nice-webhook-tester__error", children: V }),
+      L && /* @__PURE__ */ t("div", { className: "nice-webhook-tester__response", children: [
+        /* @__PURE__ */ t("div", { className: "nice-webhook-tester__section-label", children: [
+          "Response",
+          " ",
+          /* @__PURE__ */ r("span", { className: "nice-webhook-tester__status" + C, children: L.status }),
+          L.durationMs != null && /* @__PURE__ */ t("span", { className: "nice-webhook-tester__time", children: [
+            " · ",
+            L.durationMs,
+            " ms"
+          ] })
+        ] }),
+        L.body != null && /* @__PURE__ */ r("pre", { className: "nice-webhook-tester__response-body", children: L.body })
+      ] })
+    ] });
+  }
+);
 export {
-  Pe as NiceAPIDesigner,
-  Oe as NiceAPITester,
-  Ie as NiceIntegrationBuilder
+  _r as NiceAPIDesigner,
+  wr as NiceAPITester,
+  Nr as NiceIntegrationBuilder,
+  xr as NiceWebhookTester
 };