@datatechsolutions/ui 3.9.0 → 3.10.0

package/dist/platform/pages/index.mjs

@@ -1,14 +1,14 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-GQWC4EKE.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-GQWC4EKE.mjs';
-import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-6QJI5YOJ.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-6QJI5YOJ.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-AXBD6OAF.mjs';
+import { WorkflowWorkspace } from '../../chunk-5U43K6G3.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-5U43K6G3.mjs';
+import { DatasourceModal, findDialect, findCategory, DIALECT_CATEGORIES } from '../../chunk-FD376DZ6.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-FD376DZ6.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel, defaultRuleCondition, defaultRuleAction, RuleConditionBuilder, RuleActionBuilder } from '../../chunk-A256OE5E.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-EAIE4QGD.mjs';
-import { HeroSection, PageLoadingState, PageEmptyState, SearchBar, EntityCard, CreateActionButton, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId, ListCard, ListCardItem, Avatar, SectionCard, Tabs, TabsList, TabsTrigger, TabsContent, StepTimeline } from '../../chunk-ZQRUAXGP.mjs';
+import '../../chunk-DA3H7ERQ.mjs';
+import { HeroSection, PageLoadingState, PageEmptyState, SearchBar, EntityCard, CreateActionButton, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId, ListCard, ListCardItem, Avatar, SectionCard, Tabs, TabsList, TabsTrigger, TabsContent, StepTimeline, FilterTileButton, FormToggle, Spinner, StatusBadge, FormCheckbox, SegmentedControl, DatePicker, TimePicker } from '../../chunk-5KI7FB3E.mjs';
 import '../../chunk-7VJ7CMMT.mjs';
 import '../../chunk-RHRJXK5R.mjs';
 import '../../chunk-3AY5HIQ6.mjs';
@@ -18,7 +18,7 @@ import '../../chunk-D2JF6C3E.mjs';
 import { useLink } from '../../chunk-QWG2FMUN.mjs';
 import '../../chunk-G7JQ4OCE.mjs';
 import { useState, useMemo, useEffect, useCallback } from 'react';
-import { CubeTransparentIcon, CpuChipIcon, ChatBubbleLeftEllipsisIcon, WrenchScrewdriverIcon, AdjustmentsHorizontalIcon, CircleStackIcon, RectangleStackIcon, ClockIcon, LinkIcon, KeyIcon, ArrowPathIcon, TrashIcon, PlusIcon, PencilSquareIcon } from '@heroicons/react/24/outline';
+import { CubeTransparentIcon, CpuChipIcon, ChatBubbleLeftEllipsisIcon, WrenchScrewdriverIcon, AdjustmentsHorizontalIcon, CircleStackIcon, RectangleStackIcon, ClockIcon, LinkIcon, KeyIcon, ArrowPathIcon, TrashIcon, PlusIcon, PencilSquareIcon, BellAlertIcon, GlobeAltIcon, PencilIcon, ArrowUpCircleIcon, SparklesIcon } from '@heroicons/react/24/outline';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function AgentsModelsPageView({ labels, models, loading }) {
@@ -944,8 +944,12 @@ function setFromJson(set, key, raw) {
     set(key, raw);
   }
 }
-function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete }) {
+function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete, onAddClick }) {
   const [createOpen, setCreateOpen] = useState(false);
+  const openCreate = () => {
+    if (onAddClick) onAddClick();
+    else setCreateOpen(true);
+  };
   const [editing, setEditing] = useState(null);
   const [searchTerm, setSearchTerm] = useState("");
   const allRules = rules;
@@ -964,7 +968,7 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
         {
           mode: "desktop",
           label: labels.addRule,
-          onClick: () => setCreateOpen(true),
+          onClick: openCreate,
           accent: "fuchsia"
         }
       )
@@ -975,7 +979,7 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
     {
       mode: "mobile",
       label: labels.addRule,
-      onClick: () => setCreateOpen(true),
+      onClick: openCreate,
       accent: "fuchsia"
     }
   );
@@ -1259,9 +1263,14 @@ function DatasourcesPageView({
   labels,
   datasources: externalDatasources,
   useSampleData = false,
-  onCreate
+  onCreate,
+  onAddClick
 }) {
   const [modalOpen, setModalOpen] = useState(false);
+  const openCreate = () => {
+    if (onAddClick) onAddClick();
+    else setModalOpen(true);
+  };
   const [searchTerm, setSearchTerm] = useState("");
   const [localDatasources, setLocalDatasources] = useState(
     useSampleData ? SAMPLE_DATASOURCES : []
@@ -1306,7 +1315,7 @@ function DatasourcesPageView({
           {
             mode: "desktop",
             label: labels.addDatasource,
-            onClick: () => setModalOpen(true),
+            onClick: openCreate,
             accent: "amber"
           }
         )
@@ -1317,7 +1326,7 @@ function DatasourcesPageView({
       {
         mode: "mobile",
         label: labels.addDatasource,
-        onClick: () => setModalOpen(true),
+        onClick: openCreate,
         accent: "amber"
       }
     ),
@@ -2796,12 +2805,12 @@ function deriveInitials(name) {
   return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 }
 var AGENT_PRESETS = [
-  { id: "sales", emoji: "\u{1F4BC}", name: "Sales Specialist", role: "Lead qualification & CRM", systemPrompt: "You are a sales assistant. Help qualify leads, manage CRM entries, and schedule follow-ups. Always be professional and proactive.", temperature: 0.7, maxTokens: 2048, accent: "from-emerald-500 to-teal-600", framework: "anthropic" },
-  { id: "support", emoji: "\u{1F3A7}", name: "Customer Support", role: "Ticket resolution & escalation", systemPrompt: "You are a customer support agent. Resolve tickets, answer questions, and escalate complex issues. Prioritize customer satisfaction.", temperature: 0.3, maxTokens: 2048, accent: "from-sky-500 to-indigo-600", framework: "crewai" },
-  { id: "finance", emoji: "\u{1F4CA}", name: "Financial Analyst", role: "Revenue, margins, reports", systemPrompt: "You are a financial analyst. Analyze revenue, calculate margins, generate performance reports, and identify trends. Use data-driven insights for recommendations.", temperature: 0.4, maxTokens: 4096, accent: "from-amber-500 to-orange-600", framework: "langchain" },
-  { id: "security", emoji: "\u{1F6E1}\uFE0F", name: "Security Analyst", role: "Threat monitoring & compliance", systemPrompt: "You are a security analyst. Monitor for threats, audit data access, ensure compliance with privacy regulations, and manage incident response.", temperature: 0.3, maxTokens: 2048, accent: "from-rose-500 to-red-600", framework: "anthropic" },
-  { id: "data", emoji: "\u{1F52C}", name: "Data Analyst", role: "Pattern detection & cleaning", systemPrompt: "You are a data analyst. Process raw data inputs, identify patterns, clean datasets, and prepare structured analysis for downstream agents.", temperature: 0.5, maxTokens: 4096, accent: "from-violet-500 to-purple-600", framework: "google-adk" },
-  { id: "custom", emoji: "\u2728", name: "", role: "", systemPrompt: "", temperature: 0.2, maxTokens: 2048, accent: "from-slate-500 to-slate-700" }
+  { id: "sales", emoji: "\u{1F4BC}", name: "Sales Specialist", role: "Lead qualification & CRM", systemPrompt: "You are a sales assistant. Help qualify leads, manage CRM entries, and schedule follow-ups. Always be professional and proactive.", temperature: 0.7, maxTokens: 2048, accent: "from-emerald-500 to-teal-600", framework: "anthropic", tileColor: "emerald" },
+  { id: "support", emoji: "\u{1F3A7}", name: "Customer Support", role: "Ticket resolution & escalation", systemPrompt: "You are a customer support agent. Resolve tickets, answer questions, and escalate complex issues. Prioritize customer satisfaction.", temperature: 0.3, maxTokens: 2048, accent: "from-sky-500 to-indigo-600", framework: "crewai", tileColor: "sky" },
+  { id: "finance", emoji: "\u{1F4CA}", name: "Financial Analyst", role: "Revenue, margins, reports", systemPrompt: "You are a financial analyst. Analyze revenue, calculate margins, generate performance reports, and identify trends. Use data-driven insights for recommendations.", temperature: 0.4, maxTokens: 4096, accent: "from-amber-500 to-orange-600", framework: "langchain", tileColor: "amber" },
+  { id: "security", emoji: "\u{1F6E1}\uFE0F", name: "Security Analyst", role: "Threat monitoring & compliance", systemPrompt: "You are a security analyst. Monitor for threats, audit data access, ensure compliance with privacy regulations, and manage incident response.", temperature: 0.3, maxTokens: 2048, accent: "from-rose-500 to-red-600", framework: "anthropic", tileColor: "rose" },
+  { id: "data", emoji: "\u{1F52C}", name: "Data Analyst", role: "Pattern detection & cleaning", systemPrompt: "You are a data analyst. Process raw data inputs, identify patterns, clean datasets, and prepare structured analysis for downstream agents.", temperature: 0.5, maxTokens: 4096, accent: "from-violet-500 to-purple-600", framework: "google-adk", tileColor: "violet" },
+  { id: "custom", emoji: "\u2728", name: "", role: "", systemPrompt: "", temperature: 0.2, maxTokens: 2048, accent: "from-slate-500 to-slate-700", tileColor: "slate" }
 ];
 var DIFFICULTY_OPTIONS = [
   { id: "beginner", emoji: "\u{1F331}", accent: "from-emerald-500 to-teal-600" },
@@ -2820,14 +2829,14 @@ function RangeSliderField({
   step,
   zones,
   trackGradient,
-  formatValue,
+  formatValue: formatValue2,
   ariaLabel
 }) {
   const percent = (value - min) / (max - min) * 100;
   const activeZone = zones?.find((z) => value <= z.max) ?? zones?.[zones.length - 1];
   const thumbColor = activeZone?.thumbColor ?? "#6366f1";
   const glow = hexToGlow(thumbColor);
-  const displayValue = formatValue ? formatValue(value) : value.toString();
+  const displayValue = formatValue2 ? formatValue2(value) : value.toString();
   const ariaText = activeZone ? `${displayValue} \u2014 ${activeZone.label}` : displayValue;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
@@ -3085,35 +3094,29 @@ function AgentNewWizardPageView({
           title: labels.presetTitle,
           subtitle: labels.presetSubtitle
         },
-        children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", children: AGENT_PRESETS.map((preset) => {
-          const selected = preset.id === presetId;
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => applyPreset(preset),
-              className: [
-                "liquid-surface group flex items-center gap-3 rounded-xl px-3 py-2.5 text-left transition-all",
-                selected ? "ring-2 ring-indigo-500/70 ring-offset-1 ring-offset-transparent" : "hover:border-indigo-400/40 focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1"
-              ].join(" "),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${preset.accent} text-base shadow-sm`,
-                    children: preset.emoji
-                  }
-                ),
-                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-semibold text-slate-900 dark:text-white", children: preset.id === "custom" ? labels.presetCustom : preset.name }),
-                  /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-500 dark:text-slate-400", children: preset.role || labels.presetCustomHint })
-                ] })
-              ]
-            },
-            preset.id
-          );
-        }) })
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "radiogroup",
+            "aria-label": labels.presetTitle,
+            className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+            children: AGENT_PRESETS.map((preset) => {
+              const selected = preset.id === presetId;
+              return /* @__PURE__ */ jsx(
+                FilterTileButton,
+                {
+                  isActive: selected,
+                  color: preset.tileColor,
+                  icon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-base leading-none", children: preset.emoji }),
+                  label: preset.id === "custom" ? labels.presetCustom : preset.name,
+                  count: preset.role || labels.presetCustomHint,
+                  onClick: () => applyPreset(preset)
+                },
+                preset.id
+              );
+            })
+          }
+        )
       }
     );
   }
@@ -3604,7 +3607,7 @@ function AgentNewWizardPageView({
             }
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full space-y-5", children: [
           stepBody,
           footer
         ] })
@@ -3622,7 +3625,1709 @@ function ReviewRow({ label, value }) {
     /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-gray-900 dark:text-white", children: value })
   ] });
 }
+var DIALECT_LOGO_SRC = {
+  bigquery: "/logos/datasources/bigquery.svg",
+  postgres: "/logos/datasources/postgres.svg",
+  postgresql: "/logos/datasources/postgres.svg",
+  mysql: "/logos/datasources/mysql.svg",
+  mariadb: "/logos/datasources/mariadb.svg",
+  snowflake: "/logos/datasources/snowflake.svg",
+  mongodb: "/logos/datasources/mongodb.svg",
+  redis: "/logos/datasources/redis.svg",
+  clickhouse: "/logos/datasources/clickhouse.svg",
+  elasticsearch: "/logos/datasources/elasticsearch.svg",
+  duckdb: "/logos/datasources/duckdb.svg",
+  sqlite: "/logos/datasources/sqlite.svg",
+  oracle: "/logos/datasources/oracle.svg",
+  mssql: "/logos/datasources/mssql.svg",
+  sqlserver: "/logos/datasources/mssql.svg",
+  cassandra: "/logos/datasources/cassandra.svg",
+  dynamodb: "/logos/datasources/dynamodb.svg",
+  cockroach: "/logos/datasources/cockroachdb.svg",
+  cockroachdb: "/logos/datasources/cockroachdb.svg",
+  supabase: "/logos/datasources/supabase.svg",
+  firebase: "/logos/datasources/firebase.svg",
+  neo4j: "/logos/datasources/neo4j.svg",
+  neptune: "/logos/datasources/neptune.svg",
+  timestream: "/logos/datasources/timestream.svg",
+  opensearch: "/logos/datasources/opensearch.svg"
+};
+var CATEGORY_COLOR = {
+  relational: "blue",
+  nosql: "emerald",
+  warehouse: "purple",
+  timeseries: "sky",
+  graph: "pink",
+  keyvalue: "red",
+  search: "amber"
+};
+var TOTAL_STEPS2 = 4;
+function DatasourceNewWizardPageView({
+  labels,
+  initialStep,
+  onStepChange,
+  onSubmit,
+  onCancel,
+  onTestConnection
+}) {
+  const clampedInitial = Math.min(TOTAL_STEPS2, Math.max(1, initialStep ?? 1));
+  const [step, setStep] = useState(clampedInitial);
+  const [dialect, setDialect] = useState("");
+  const [name, setName] = useState("");
+  const [host, setHost] = useState("");
+  const [port, setPort] = useState("");
+  const [database, setDatabase] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [schema, setSchema] = useState("");
+  const [connectionString, setConnectionString] = useState("");
+  const [projectId, setProjectId] = useState("");
+  const [dataset, setDataset] = useState("");
+  const [keyFile, setKeyFile] = useState("");
+  const [account, setAccount] = useState("");
+  const [warehouseField, setWarehouseField] = useState("");
+  const [region, setRegion] = useState("");
+  const [bucket, setBucket] = useState("");
+  const [token, setToken] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [environment, setEnvironment] = useState("");
+  const [index, setIndex] = useState("");
+  const [ssl, setSsl] = useState(true);
+  const [readOnly, setReadOnly] = useState(true);
+  const [maxPoolSize, setMaxPoolSize] = useState("5");
+  const [timeoutMs, setTimeoutMs] = useState("5000");
+  const [allowedTables, setAllowedTables] = useState("");
+  const [blockedColumns, setBlockedColumns] = useState("");
+  const [maskPii, setMaskPii] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [touched, setTouched] = useState(false);
+  const [testStatus, setTestStatus] = useState("idle");
+  const dialectOption = useMemo(() => dialect ? findDialect(dialect) : null, [dialect]);
+  const category = useMemo(() => dialect ? findCategory(dialect) : null, [dialect]);
+  useEffect(() => {
+    if (dialectOption?.defaultPort && (port === "" || /^[0-9]+$/.test(port))) {
+      setPort(String(dialectOption.defaultPort));
+    }
+  }, [dialect]);
+  useEffect(() => {
+    const next = Math.min(TOTAL_STEPS2, Math.max(1, initialStep ?? 1));
+    if (next !== step) setStep(next);
+  }, [initialStep]);
+  function markTouched() {
+    if (!touched) setTouched(true);
+  }
+  const goToStep = useCallback((next) => {
+    const clamped = Math.min(TOTAL_STEPS2, Math.max(1, next));
+    setStep(clamped);
+    onStepChange?.(clamped);
+  }, [onStepChange]);
+  function canAdvance(from) {
+    if (from === 1) return Boolean(dialect);
+    if (from === 2) return name.trim().length > 0;
+    return true;
+  }
+  const goNext = useCallback(() => {
+    if (!canAdvance(step)) return;
+    if (step < TOTAL_STEPS2) goToStep(step + 1);
+  }, [step, dialect, name]);
+  const goBack = useCallback(() => {
+    if (step > 1) goToStep(step - 1);
+  }, [step, goToStep]);
+  const cancelWithConfirm = useCallback(() => {
+    if (touched && !window.confirm(labels.wizardCancelConfirm)) return;
+    onCancel();
+  }, [touched, labels.wizardCancelConfirm, onCancel]);
+  function buildPayload() {
+    const payload = {
+      name: name.trim(),
+      dialect,
+      ssl,
+      readOnly
+    };
+    if (host.trim()) payload.host = host.trim();
+    const portNum = Number(port);
+    if (Number.isFinite(portNum) && portNum > 0) payload.port = portNum;
+    if (database.trim()) payload.database = database.trim();
+    if (username.trim()) payload.username = username.trim();
+    if (password) payload.password = password;
+    if (schema.trim()) payload.schema = schema.trim();
+    if (connectionString.trim()) payload.connectionString = connectionString.trim();
+    if (projectId.trim()) payload.projectId = projectId.trim();
+    if (dataset.trim()) payload.dataset = dataset.trim();
+    if (keyFile.trim()) payload.keyFile = keyFile.trim();
+    if (account.trim()) payload.account = account.trim();
+    if (warehouseField.trim()) payload.warehouse = warehouseField.trim();
+    if (region.trim()) payload.region = region.trim();
+    if (bucket.trim()) payload.bucket = bucket.trim();
+    if (token) payload.token = token;
+    if (apiKey) payload.apiKey = apiKey;
+    if (environment.trim()) payload.environment = environment.trim();
+    if (index.trim()) payload.index = index.trim();
+    const pool = Number(maxPoolSize);
+    if (Number.isFinite(pool) && pool > 0) payload.maxPoolSize = pool;
+    const timeout = Number(timeoutMs);
+    if (Number.isFinite(timeout) && timeout > 0) payload.timeoutMs = timeout;
+    const allowed = splitList(allowedTables);
+    if (allowed.length > 0) payload.allowedTables = allowed;
+    const blocked = splitList(blockedColumns);
+    if (blocked.length > 0) payload.blockedColumns = blocked;
+    return payload;
+  }
+  async function handleTestConnection() {
+    setTestStatus("testing");
+    try {
+      const ok = onTestConnection ? await onTestConnection(buildPayload()) : await simulateTest();
+      setTestStatus(ok ? "success" : "failed");
+      setTimeout(() => setTestStatus("idle"), 3500);
+    } catch {
+      setTestStatus("failed");
+      setTimeout(() => setTestStatus("idle"), 3500);
+    }
+  }
+  async function submit() {
+    setSubmitting(true);
+    try {
+      const payload = {
+        ...buildPayload(),
+        ...maskPii ? { maskPii: true } : {}
+      };
+      await onSubmit(payload);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  useEffect(() => {
+    function onKey(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancelWithConfirm();
+        return;
+      }
+      if (e.key === "Enter") {
+        const target = e.target;
+        const tag = target?.tagName?.toLowerCase();
+        if (tag === "textarea" || tag === "select" || tag === "input" || tag === "button") return;
+        e.preventDefault();
+        if (step < TOTAL_STEPS2) goNext();
+        else void submit();
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [step, dialect, name, touched]);
+  const stepTitles = [
+    labels.wizardStep1Title,
+    labels.wizardStep2Title,
+    labels.wizardStep3Title,
+    labels.wizardStep4Title
+  ];
+  const stepSubtitles = [
+    labels.wizardStep1Subtitle,
+    labels.wizardStep2Subtitle,
+    labels.wizardStep3Subtitle,
+    labels.wizardStep4Subtitle
+  ];
+  const timelineSteps = stepTitles.map((title, idx) => ({
+    id: String(idx + 1),
+    name: title,
+    description: stepSubtitles[idx],
+    status: idx + 1 < step ? "complete" : idx + 1 === step ? "current" : "upcoming"
+  }));
+  const counter = labels.wizardStepCounter.replace("{current}", String(step)).replace("{total}", String(TOTAL_STEPS2));
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-5 w-5" }),
+      label: counter,
+      title: labels.pageTitle,
+      subtitle: stepSubtitles[step - 1] ?? labels.pageSubtitle,
+      gradient: category?.gradient ?? "from-amber-500 to-orange-600"
+    }
+  );
+  function renderStep1() {
+    return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: DIALECT_CATEGORIES.map((cat) => {
+      const color = CATEGORY_COLOR[cat.id] ?? "slate";
+      const categoryLabel = labels[cat.labelKey] ?? cat.id;
+      return /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: {
+            title: categoryLabel,
+            icon: /* @__PURE__ */ jsx(cat.icon, { className: "h-4 w-4" }),
+            gradient: cat.gradient
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "radiogroup",
+              "aria-label": categoryLabel,
+              className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
+              children: cat.dialects.map((opt) => {
+                const selected = opt.value === dialect;
+                const logoSrc = DIALECT_LOGO_SRC[opt.value.toLowerCase()];
+                return /* @__PURE__ */ jsx(
+                  FilterTileButton,
+                  {
+                    isActive: selected,
+                    color,
+                    icon: logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: opt.label, className: "h-5 w-5 object-contain" }) : /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-5 w-5" }),
+                    label: opt.label,
+                    count: opt.formType.replace("-", " "),
+                    onClick: () => {
+                      setDialect(opt.value);
+                      markTouched();
+                    }
+                  },
+                  opt.value
+                );
+              })
+            }
+          )
+        },
+        cat.id
+      );
+    }) });
+  }
+  function renderConnectionFields() {
+    if (!dialectOption) return null;
+    switch (dialectOption.formType) {
+      case "standard":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldHost,
+              value: host,
+              onValueChange: (v) => {
+                setHost(v);
+                markTouched();
+              },
+              placeholder: labels.fieldHostPlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldPort,
+              type: "number",
+              value: port,
+              onValueChange: (v) => {
+                setPort(v);
+                markTouched();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldDatabase,
+              value: database,
+              onValueChange: (v) => {
+                setDatabase(v);
+                markTouched();
+              },
+              placeholder: labels.fieldDatabasePlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldUsername,
+              value: username,
+              onValueChange: (v) => {
+                setUsername(v);
+                markTouched();
+              },
+              placeholder: labels.fieldUsernamePlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldPassword,
+              type: "password",
+              value: password,
+              onValueChange: (v) => {
+                setPassword(v);
+                markTouched();
+              },
+              placeholder: labels.fieldPasswordPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldSchema,
+              value: schema,
+              onValueChange: (v) => {
+                setSchema(v);
+                markTouched();
+              },
+              placeholder: labels.fieldSchemaPlaceholder
+            }
+          )
+        ] });
+      case "connection-string":
+        return /* @__PURE__ */ jsx("div", { className: "col-span-full", children: /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: labels.fieldConnectionString,
+            value: connectionString,
+            onValueChange: (v) => {
+              setConnectionString(v);
+              markTouched();
+            },
+            placeholder: labels.fieldConnectionStringPlaceholder,
+            required: true
+          }
+        ) });
+      case "cloud-bigquery":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldProjectId,
+              value: projectId,
+              onValueChange: (v) => {
+                setProjectId(v);
+                markTouched();
+              },
+              placeholder: labels.fieldProjectIdPlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldDataset,
+              value: dataset,
+              onValueChange: (v) => {
+                setDataset(v);
+                markTouched();
+              },
+              placeholder: labels.fieldDatasetPlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "col-span-full", children: /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldKeyFile,
+              value: keyFile,
+              onValueChange: (v) => {
+                setKeyFile(v);
+                markTouched();
+              },
+              placeholder: labels.fieldKeyFilePlaceholder
+            }
+          ) })
+        ] });
+      case "cloud-snowflake":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldAccount,
+              value: account,
+              onValueChange: (v) => {
+                setAccount(v);
+                markTouched();
+              },
+              placeholder: labels.fieldAccountPlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldWarehouse,
+              value: warehouseField,
+              onValueChange: (v) => {
+                setWarehouseField(v);
+                markTouched();
+              },
+              placeholder: labels.fieldWarehousePlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldDatabase,
+              value: database,
+              onValueChange: (v) => {
+                setDatabase(v);
+                markTouched();
+              },
+              placeholder: labels.fieldDatabasePlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldUsername,
+              value: username,
+              onValueChange: (v) => {
+                setUsername(v);
+                markTouched();
+              },
+              placeholder: labels.fieldUsernamePlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldPassword,
+              type: "password",
+              value: password,
+              onValueChange: (v) => {
+                setPassword(v);
+                markTouched();
+              },
+              placeholder: labels.fieldPasswordPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldSchema,
+              value: schema,
+              onValueChange: (v) => {
+                setSchema(v);
+                markTouched();
+              },
+              placeholder: labels.fieldSchemaPlaceholder
+            }
+          )
+        ] });
+      case "cloud-key":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldRegion,
+              value: region,
+              onValueChange: (v) => {
+                setRegion(v);
+                markTouched();
+              },
+              placeholder: labels.fieldRegionPlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldToken,
+              type: "password",
+              value: token,
+              onValueChange: (v) => {
+                setToken(v);
+                markTouched();
+              },
+              placeholder: labels.fieldTokenPlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldBucket,
+              value: bucket,
+              onValueChange: (v) => {
+                setBucket(v);
+                markTouched();
+              },
+              placeholder: labels.fieldBucketPlaceholder
+            }
+          )
+        ] });
+      case "vector-key":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldApiKey,
+              type: "password",
+              value: apiKey,
+              onValueChange: (v) => {
+                setApiKey(v);
+                markTouched();
+              },
+              placeholder: labels.fieldApiKeyPlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldEnvironment,
+              value: environment,
+              onValueChange: (v) => {
+                setEnvironment(v);
+                markTouched();
+              },
+              placeholder: labels.fieldEnvironmentPlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldIndex,
+              value: index,
+              onValueChange: (v) => {
+                setIndex(v);
+                markTouched();
+              },
+              placeholder: labels.fieldIndexPlaceholder
+            }
+          )
+        ] });
+    }
+  }
+  function renderStep2() {
+    if (!dialectOption) {
+      return /* @__PURE__ */ jsxs(SectionCard, { variant: "glass", header: { title: labels.wizardStep1Title }, children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-700 dark:text-slate-200", children: labels.wizardStep1Subtitle }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: () => goToStep(1), children: labels.wizardBack }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: {
+          title: dialectOption.label,
+          subtitle: labels.wizardStep2Subtitle,
+          icon: category?.icon ? /* @__PURE__ */ jsx(category.icon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-4 w-4" }),
+          gradient: category?.gradient
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldName,
+              value: name,
+              onValueChange: (v) => {
+                setName(v);
+                markTouched();
+              },
+              placeholder: labels.fieldNamePlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(FormGrid, { children: renderConnectionFields() }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6 pt-1", children: [
+            /* @__PURE__ */ jsx(
+              FormToggle,
+              {
+                checked: ssl,
+                onChange: (v) => {
+                  setSsl(v);
+                  markTouched();
+                },
+                label: labels.fieldSsl,
+                variant: "inline"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormToggle,
+              {
+                checked: readOnly,
+                onChange: (v) => {
+                  setReadOnly(v);
+                  markTouched();
+                },
+                label: labels.fieldReadOnly,
+                variant: "inline"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: labels.fieldReadOnlyHelp }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 border-t border-slate-200/60 pt-4 dark:border-white/10", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                outline: true,
+                onClick: () => void handleTestConnection(),
+                disabled: testStatus === "testing",
+                children: testStatus === "testing" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Spinner, { size: "xs" }),
+                  labels.testing
+                ] }) : labels.testConnection
+              }
+            ),
+            testStatus === "success" && /* @__PURE__ */ jsx(StatusBadge, { status: "success", label: labels.connectionSuccess }),
+            testStatus === "failed" && /* @__PURE__ */ jsx(StatusBadge, { status: "error", label: labels.connectionFailed })
+          ] })
+        ] })
+      }
+    );
+  }
+  function renderStep3() {
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: {
+          title: labels.governanceSectionTitle,
+          subtitle: labels.governanceSectionSubtitle
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs(FormGrid, { children: [
+            /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                label: labels.fieldMaxPoolSize,
+                type: "number",
+                min: 1,
+                max: 100,
+                value: maxPoolSize,
+                onValueChange: (v) => {
+                  setMaxPoolSize(v);
+                  markTouched();
+                },
+                hint: labels.fieldMaxPoolSizeHint
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                label: labels.fieldTimeoutMs,
+                type: "number",
+                min: 100,
+                value: timeoutMs,
+                onValueChange: (v) => {
+                  setTimeoutMs(v);
+                  markTouched();
+                },
+                hint: labels.fieldTimeoutMsHint
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldAllowedTables,
+              value: allowedTables,
+              onValueChange: (v) => {
+                setAllowedTables(v);
+                markTouched();
+              },
+              placeholder: labels.fieldAllowedTablesPlaceholder,
+              hint: labels.fieldAllowedTablesHint
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.fieldBlockedColumns,
+              value: blockedColumns,
+              onValueChange: (v) => {
+                setBlockedColumns(v);
+                markTouched();
+              },
+              placeholder: labels.fieldBlockedColumnsPlaceholder,
+              hint: labels.fieldBlockedColumnsHint
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormCheckbox,
+            {
+              checked: maskPii,
+              onChange: (v) => {
+                setMaskPii(v);
+                markTouched();
+              },
+              label: labels.fieldMaskPii,
+              description: labels.fieldMaskPiiDescription
+            }
+          )
+        ] })
+      }
+    );
+  }
+  function renderStep4() {
+    const categoryLabel = category ? labels[category.labelKey] ?? category.id : labels.reviewNoneValue;
+    const dialectLabel = dialectOption?.label ?? labels.reviewNoneValue;
+    const allowed = splitList(allowedTables);
+    const blocked = splitList(blockedColumns);
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: {
+            title: labels.wizardStep1Title,
+            subtitle: labels.wizardStep1Subtitle
+          },
+          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(1), children: [
+            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
+          ] }),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewCategoryLabel, value: categoryLabel }),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewDialectLabel, value: dialectLabel })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: {
+            title: labels.wizardStep2Title,
+            subtitle: labels.wizardStep2Subtitle
+          },
+          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(2), children: [
+            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
+          ] }),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewNameLabel, value: name || labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewCredentialsLabel, value: labels.reviewCredentialsRedacted }),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewSslLabel, value: ssl ? labels.reviewYes : labels.reviewNo }),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewReadOnlyLabel, value: readOnly ? labels.reviewYes : labels.reviewNo })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: {
+            title: labels.wizardStep3Title,
+            subtitle: labels.wizardStep3Subtitle
+          },
+          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(3), children: [
+            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
+          ] }),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewPoolLabel, value: maxPoolSize || labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewTimeoutLabel, value: timeoutMs ? `${timeoutMs}ms` : labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(
+              ReviewRow2,
+              {
+                label: labels.reviewAllowedTablesLabel,
+                value: allowed.length > 0 ? allowed.join(", ") : labels.reviewNoneValue
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ReviewRow2,
+              {
+                label: labels.reviewBlockedColumnsLabel,
+                value: blocked.length > 0 ? blocked.join(", ") : labels.reviewNoneValue
+              }
+            ),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewMaskPiiLabel, value: maskPii ? labels.reviewYes : labels.reviewNo })
+          ] })
+        }
+      )
+    ] });
+  }
+  const stepBody = step === 1 ? renderStep1() : step === 2 ? renderStep2() : step === 3 ? renderStep3() : renderStep4();
+  const advanceDisabled = !canAdvance(step);
+  const footer = /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-slate-200/60 pt-4 dark:border-white/10", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: goBack, disabled: step === 1 || submitting, children: labels.wizardBack }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: cancelWithConfirm, disabled: submitting, children: labels.wizardCancel }),
+      step < TOTAL_STEPS2 ? /* @__PURE__ */ jsx(Button, { type: "button", color: "amber", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext }) : /* @__PURE__ */ jsx(Button, { type: "button", color: "amber", onClick: () => void submit(), disabled: submitting || !dialect || !name.trim(), children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate })
+    ] })
+  ] });
+  const content = /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (step < TOTAL_STEPS2) goNext();
+        else void submit();
+      },
+      className: "space-y-5",
+      children: [
+        /* @__PURE__ */ jsx(
+          StepTimeline,
+          {
+            steps: timelineSteps,
+            progressLabel: labels.pageTitle,
+            onStepClick: (idx) => goToStep(idx + 1)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "w-full space-y-5", children: [
+          stepBody,
+          footer
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    hero,
+    content
+  ] });
+}
+function ReviewRow2({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-slate-200/60 bg-white/40 px-3 py-2 dark:border-white/10 dark:bg-white/[0.04]", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-gray-900 dark:text-white", children: value })
+  ] });
+}
+function splitList(raw) {
+  return raw.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+}
+async function simulateTest() {
+  await new Promise((r) => setTimeout(r, 1500));
+  return true;
+}
+function RangeSliderField2({
+  sliderId,
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  zones,
+  trackGradient,
+  formatValue: formatValue2,
+  ariaLabel
+}) {
+  const percent = (value - min) / (max - min) * 100;
+  const activeZone = zones?.find((z) => value <= z.max) ?? zones?.[zones.length - 1];
+  const thumbColor = activeZone?.thumbColor ?? "#6366f1";
+  const glow = hexToGlow2(thumbColor);
+  const displayValue = formatValue2 ? formatValue2(value) : value.toString();
+  const ariaText = activeZone ? `${displayValue} \u2014 ${activeZone.label}` : displayValue;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: sliderId, className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: displayValue })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full rounded-full transition-all duration-300 ease-out motion-reduce:transition-none",
+          style: {
+            width: `${Math.max(0, Math.min(100, percent))}%`,
+            background: trackGradient ?? `linear-gradient(90deg, ${thumbColor}, ${thumbColor})`
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: sliderId,
+          "data-slider-id": sliderId,
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: (e) => onChange(parseFloat(e.target.value)),
+          "aria-label": ariaLabel ?? label,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          "aria-valuetext": ariaText,
+          className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-gray-900"
+        }
+      ),
+      /* @__PURE__ */ jsx("style", { children: `[data-slider-id="${sliderId}"]::-webkit-slider-thumb { background: ${thumbColor}; box-shadow: 0 0 8px ${glow}; } [data-slider-id="${sliderId}"]::-moz-range-thumb { background: ${thumbColor}; border: 2px solid white; box-shadow: 0 0 8px ${glow}; }` })
+    ] }),
+    zones && zones.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center justify-between", children: zones.map((z) => {
+      const isActive = z.label === activeZone?.label;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-[10px] font-medium transition-colors motion-reduce:transition-none ${isActive ? z.color : "text-gray-400 dark:text-gray-500"}`,
+          children: z.label
+        },
+        z.label
+      );
+    }) })
+  ] });
+}
+function hexToGlow2(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex);
+  if (!m) return "rgba(99,102,241,0.5)";
+  const int = parseInt(m[1], 16);
+  const r = int >> 16 & 255;
+  const g = int >> 8 & 255;
+  const b = int & 255;
+  return `rgba(${r},${g},${b},0.5)`;
+}
+var ACTION_TILES = [
+  { id: "notify", color: "sky", icon: BellAlertIcon, labelKey: "actionNotifyLabel", descriptionKey: "actionNotifyDescription" },
+  { id: "call-webhook", color: "indigo", icon: GlobeAltIcon, labelKey: "actionWebhookLabel", descriptionKey: "actionWebhookDescription" },
+  { id: "mutate", color: "amber", icon: PencilIcon, labelKey: "actionMutateLabel", descriptionKey: "actionMutateDescription" },
+  { id: "escalate", color: "rose", icon: ArrowUpCircleIcon, labelKey: "actionEscalateLabel", descriptionKey: "actionEscalateDescription" },
+  { id: "route-to-agent", color: "violet", icon: SparklesIcon, labelKey: "actionRouteLabel", descriptionKey: "actionRouteDescription" }
+];
+var WEEKDAYS = [
+  { id: "mon", labelKey: "weekdayMon" },
+  { id: "tue", labelKey: "weekdayTue" },
+  { id: "wed", labelKey: "weekdayWed" },
+  { id: "thu", labelKey: "weekdayThu" },
+  { id: "fri", labelKey: "weekdayFri" },
+  { id: "sat", labelKey: "weekdaySat" },
+  { id: "sun", labelKey: "weekdaySun" }
+];
+var TOTAL_STEPS3 = 5;
+function RuleNewWizardPageView({
+  labels,
+  initialStep,
+  onStepChange,
+  onSubmit,
+  onCancel
+}) {
+  const clampedInitial = Math.min(TOTAL_STEPS3, Math.max(1, initialStep ?? 1));
+  const [step, setStep] = useState(clampedInitial);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [priority, setPriority] = useState(50);
+  const [enabled, setEnabled] = useState(true);
+  const [status, setStatus] = useState("active");
+  const [tagsInput, setTagsInput] = useState("");
+  const [combinator, setCombinator] = useState("and");
+  const [condition, setCondition] = useState(defaultRuleCondition());
+  const [actionTileId, setActionTileId] = useState("");
+  const [action, setAction] = useState(defaultRuleAction());
+  const [validFromDate, setValidFromDate] = useState(null);
+  const [validFromTime, setValidFromTime] = useState(null);
+  const [validUntilDate, setValidUntilDate] = useState(null);
+  const [validUntilTime, setValidUntilTime] = useState(null);
+  const [noExpiry, setNoExpiry] = useState(true);
+  const [recurrence, setRecurrence] = useState("one-off");
+  const [cronExpression, setCronExpression] = useState("");
+  const [weekdays, setWeekdays] = useState([]);
+  const [recurringTime, setRecurringTime] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [touched, setTouched] = useState(false);
+  function markTouched() {
+    if (!touched) setTouched(true);
+  }
+  useEffect(() => {
+    const next = Math.min(TOTAL_STEPS3, Math.max(1, initialStep ?? 1));
+    if (next !== step) setStep(next);
+  }, [initialStep]);
+  const goToStep = useCallback((next) => {
+    const clamped = Math.min(TOTAL_STEPS3, Math.max(1, next));
+    setStep(clamped);
+    onStepChange?.(clamped);
+  }, [onStepChange]);
+  function canAdvance(from) {
+    if (from === 1) return name.trim().length > 0;
+    if (from === 3) return actionTileId.length > 0;
+    return true;
+  }
+  const goNext = useCallback(() => {
+    if (!canAdvance(step)) return;
+    if (step < TOTAL_STEPS3) goToStep(step + 1);
+  }, [step, name, actionTileId]);
+  const goBack = useCallback(() => {
+    if (step > 1) goToStep(step - 1);
+  }, [step, goToStep]);
+  const cancelWithConfirm = useCallback(() => {
+    if (touched && !window.confirm(labels.wizardCancelConfirm)) return;
+    onCancel();
+  }, [touched, labels.wizardCancelConfirm, onCancel]);
+  function combineDateTime(date, time) {
+    if (!date) return null;
+    const next = new Date(date);
+    next.setHours(time?.hours ?? 0, time?.minutes ?? 0, 0, 0);
+    return next.toISOString();
+  }
+  const tags = useMemo(
+    () => tagsInput.split(",").map((t) => t.trim()).filter((t) => t.length > 0),
+    [tagsInput]
+  );
+  function buildPayload() {
+    const validFrom = combineDateTime(validFromDate, validFromTime);
+    const validUntil = noExpiry ? null : combineDateTime(validUntilDate, validUntilTime);
+    const conditionWithCombinator = combinator === "not" ? {
+      operator: "boolean_expression",
+      combinator: "and",
+      operands: [condition],
+      // The engine ignores extra fields, so this is forward-compat.
+      ...{ notFlag: true }
+    } : combinator === "or" ? {
+      operator: "boolean_expression",
+      combinator: "or",
+      operands: [condition]
+    } : condition;
+    const finalAction = {
+      type: action.type,
+      params: {
+        ...action.params ?? {},
+        actionVariant: actionTileId,
+        recurrence,
+        ...recurrence === "cron" && cronExpression ? { cronExpression } : {},
+        ...recurrence === "recurring" ? {
+          weekdays,
+          ...recurringTime ? { timeOfDay: `${pad(recurringTime.hours)}:${pad(recurringTime.minutes)}` } : {}
+        } : {}
+      }
+    };
+    const wireStatus = status === "paused" ? "draft" : status;
+    return {
+      name: name.trim() || "Untitled Rule",
+      description: description.trim() || void 0,
+      enabled,
+      priority,
+      status: wireStatus,
+      validFrom,
+      validUntil,
+      tags,
+      condition: conditionWithCombinator,
+      action: finalAction
+    };
+  }
+  async function submit() {
+    setSubmitting(true);
+    try {
+      await onSubmit(buildPayload());
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  useEffect(() => {
+    function onKey(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancelWithConfirm();
+        return;
+      }
+      if (e.key === "Enter") {
+        const target = e.target;
+        const tag = target?.tagName?.toLowerCase();
+        if (tag === "textarea" || tag === "select" || tag === "input" || tag === "button") return;
+        e.preventDefault();
+        if (step < TOTAL_STEPS3) goNext();
+        else void submit();
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [step, name, actionTileId, touched]);
+  const stepTitles = [
+    labels.wizardStep1Title,
+    labels.wizardStep2Title,
+    labels.wizardStep3Title,
+    labels.wizardStep4Title,
+    labels.wizardStep5Title
+  ];
+  const stepSubtitles = [
+    labels.wizardStep1Subtitle,
+    labels.wizardStep2Subtitle,
+    labels.wizardStep3Subtitle,
+    labels.wizardStep4Subtitle,
+    labels.wizardStep5Subtitle
+  ];
+  const timelineSteps = stepTitles.map((title, idx) => ({
+    id: String(idx + 1),
+    name: title,
+    description: stepSubtitles[idx],
+    status: idx + 1 < step ? "complete" : idx + 1 === step ? "current" : "upcoming"
+  }));
+  const counter = labels.wizardStepCounter.replace("{current}", String(step)).replace("{total}", String(TOTAL_STEPS3));
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "h-5 w-5" }),
+      label: counter,
+      title: labels.pageTitle,
+      subtitle: stepSubtitles[step - 1] ?? labels.pageSubtitle,
+      gradient: "from-fuchsia-500 to-purple-700"
+    }
+  );
+  function renderStep1() {
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: {
+          title: labels.wizardStep1Title,
+          subtitle: labels.wizardStep1Subtitle
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.nameLabel,
+              value: name,
+              onValueChange: (v) => {
+                setName(v);
+                markTouched();
+              },
+              placeholder: labels.namePlaceholder,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormTextarea,
+            {
+              label: labels.descriptionLabel,
+              value: description,
+              onValueChange: (v) => {
+                setDescription(v);
+                markTouched();
+              },
+              placeholder: labels.descriptionPlaceholder,
+              rows: 3
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RangeSliderField2,
+            {
+              sliderId: "wizard-rule-priority",
+              label: labels.priorityLabel,
+              value: priority,
+              onChange: (v) => {
+                setPriority(Math.round(v));
+                markTouched();
+              },
+              min: 0,
+              max: 100,
+              step: 1,
+              trackGradient: "linear-gradient(90deg, #10b981, #38bdf8 33%, #f59e0b 66%, #f43f5e)",
+              formatValue: (v) => String(Math.round(v)),
+              zones: [
+                { label: labels.priorityLow, max: 25, color: "text-emerald-500", thumbColor: "#10b981" },
+                { label: labels.priorityNormal, max: 50, color: "text-sky-500", thumbColor: "#38bdf8" },
+                { label: labels.priorityHigh, max: 75, color: "text-amber-500", thumbColor: "#f59e0b" },
+                { label: labels.priorityCritical, max: 100, color: "text-rose-500", thumbColor: "#f43f5e" }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormToggle,
+            {
+              checked: enabled,
+              onChange: (v) => {
+                setEnabled(v);
+                markTouched();
+              },
+              label: labels.enabledLabel,
+              variant: "card"
+            }
+          )
+        ] })
+      }
+    );
+  }
+  function renderStep2() {
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: {
+          title: labels.conditionSectionTitle,
+          subtitle: labels.conditionSectionSubtitle
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.combinatorLabel }),
+            /* @__PURE__ */ jsx(
+              SegmentedControl,
+              {
+                segments: [
+                  { value: "and", label: labels.combinatorAnd },
+                  { value: "or", label: labels.combinatorOr },
+                  { value: "not", label: labels.combinatorNot }
+                ],
+                value: combinator,
+                onChange: (v) => {
+                  setCombinator(v);
+                  markTouched();
+                },
+                size: "sm"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            RuleConditionBuilder,
+            {
+              value: condition,
+              onChange: (next) => {
+                setCondition(next);
+                markTouched();
+              }
+            }
+          )
+        ] })
+      }
+    );
+  }
+  function renderStep3() {
+    const selectedTile = ACTION_TILES.find((t) => t.id === actionTileId) ?? null;
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: {
+          title: labels.actionSectionTitle,
+          subtitle: labels.actionSectionSubtitle
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "radiogroup",
+              "aria-label": labels.actionSectionTitle,
+              className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+              children: ACTION_TILES.map((tile) => {
+                const Icon = tile.icon;
+                const selected = tile.id === actionTileId;
+                const label = labels[tile.labelKey] ?? tile.id;
+                const description2 = labels[tile.descriptionKey] ?? "";
+                return /* @__PURE__ */ jsx(
+                  FilterTileButton,
+                  {
+                    isActive: selected,
+                    color: tile.color,
+                    icon: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }),
+                    label,
+                    count: description2,
+                    onClick: () => {
+                      setActionTileId(tile.id);
+                      markTouched();
+                    }
+                  },
+                  tile.id
+                );
+              })
+            }
+          ),
+          selectedTile && /* @__PURE__ */ jsx(
+            SectionCard,
+            {
+              variant: "glass",
+              header: {
+                title: labels[selectedTile.labelKey] ?? selectedTile.id,
+                subtitle: labels.actionConfigSubtitle
+              },
+              children: /* @__PURE__ */ jsx(
+                RuleActionBuilder,
+                {
+                  value: action,
+                  onChange: (next) => {
+                    setAction(next);
+                    markTouched();
+                  }
+                }
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+  function renderStep4() {
+    return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: {
+          title: labels.scheduleSectionTitle,
+          subtitle: labels.scheduleSectionSubtitle
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+          /* @__PURE__ */ jsxs(FormGrid, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.validFromLabel }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  DatePicker,
+                  {
+                    value: validFromDate,
+                    onChange: (d) => {
+                      setValidFromDate(d);
+                      markTouched();
+                    },
+                    placeholder: labels.validFromDateLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TimePicker,
+                  {
+                    value: validFromTime,
+                    onChange: (t) => {
+                      setValidFromTime(t);
+                      markTouched();
+                    },
+                    placeholder: labels.validFromTimeLabel
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.validUntilLabel }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  DatePicker,
+                  {
+                    value: validUntilDate,
+                    onChange: (d) => {
+                      setValidUntilDate(d);
+                      markTouched();
+                    },
+                    placeholder: labels.validUntilDateLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TimePicker,
+                  {
+                    value: validUntilTime,
+                    onChange: (t) => {
+                      setValidUntilTime(t);
+                      markTouched();
+                    },
+                    placeholder: labels.validUntilTimeLabel
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            FormCheckbox,
+            {
+              checked: noExpiry,
+              onChange: (v) => {
+                setNoExpiry(v);
+                markTouched();
+              },
+              label: labels.noExpiryLabel,
+              description: labels.noExpiryDescription
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.statusLabel }),
+            /* @__PURE__ */ jsx(
+              SegmentedControl,
+              {
+                segments: [
+                  { value: "active", label: labels.statusActive },
+                  { value: "paused", label: labels.statusPaused },
+                  { value: "archived", label: labels.statusArchived }
+                ],
+                value: status,
+                onChange: (v) => {
+                  setStatus(v);
+                  markTouched();
+                },
+                size: "sm"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.tagsLabel,
+              value: tagsInput,
+              onValueChange: (v) => {
+                setTagsInput(v);
+                markTouched();
+              },
+              placeholder: labels.tagsPlaceholder,
+              hint: labels.tagsHint
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.recurrenceLabel }),
+            /* @__PURE__ */ jsx(
+              SegmentedControl,
+              {
+                segments: [
+                  { value: "one-off", label: labels.recurrenceOneOff },
+                  { value: "cron", label: labels.recurrenceCron },
+                  { value: "recurring", label: labels.recurrenceRecurring }
+                ],
+                value: recurrence,
+                onChange: (v) => {
+                  setRecurrence(v);
+                  markTouched();
+                },
+                size: "sm"
+              }
+            )
+          ] }),
+          recurrence === "cron" && /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.cronExpressionLabel,
+              value: cronExpression,
+              onValueChange: (v) => {
+                setCronExpression(v);
+                markTouched();
+              },
+              placeholder: labels.cronExpressionPlaceholder,
+              hint: labels.cronExpressionHint
+            }
+          ),
+          recurrence === "recurring" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.weekdaysLabel }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: WEEKDAYS.map((d) => {
+                const selected = weekdays.includes(d.id);
+                const label = labels[d.labelKey] ?? d.id;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": selected,
+                    onClick: () => {
+                      setWeekdays(
+                        (current) => current.includes(d.id) ? current.filter((id) => id !== d.id) : [...current, d.id]
+                      );
+                      markTouched();
+                    },
+                    className: [
+                      "inline-flex h-9 min-w-9 items-center justify-center rounded-full px-3 text-xs font-semibold transition",
+                      selected ? "bg-fuchsia-500 text-white shadow ring-2 ring-fuchsia-300/70" : "liquid-surface text-slate-700 dark:text-slate-300 hover:bg-fuchsia-500/10"
+                    ].join(" "),
+                    children: label
+                  },
+                  d.id
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.timeOfDayLabel }),
+              /* @__PURE__ */ jsx(
+                TimePicker,
+                {
+                  value: recurringTime,
+                  onChange: (t) => {
+                    setRecurringTime(t);
+                    markTouched();
+                  },
+                  placeholder: labels.timeOfDayLabel
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ) });
+  }
+  function renderStep5() {
+    const payload = buildPayload();
+    const conditionSentence = humanReadableCondition(payload.condition, labels);
+    const actionSentence = humanReadableAction(payload.action, labels, ACTION_TILES, actionTileId);
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: {
+            title: labels.wizardStep1Title,
+            subtitle: labels.wizardStep1Subtitle
+          },
+          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(1), children: [
+            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
+          ] }),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow3, { label: labels.reviewNameLabel, value: payload.name }),
+            /* @__PURE__ */ jsx(ReviewRow3, { label: labels.reviewPriorityLabel, value: String(payload.priority) }),
+            /* @__PURE__ */ jsx(ReviewRow3, { label: labels.reviewEnabledLabel, value: payload.enabled ? labels.reviewYes : labels.reviewNo }),
+            /* @__PURE__ */ jsx(
+              ReviewRow3,
+              {
+                label: labels.reviewDescriptionLabel,
+                value: payload.description ?? labels.reviewNoneValue
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        SectionCard,
+        {
+          variant: "glass",
+          header: {
+            title: labels.wizardStep2Title,
+            subtitle: labels.wizardStep2Subtitle
+          },
+          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(2), children: [
+            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
+          ] }),
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm text-slate-700 dark:text-slate-200", children: conditionSentence }),
+            /* @__PURE__ */ jsx(ReviewRow3, { label: labels.reviewCombinatorLabel, value: combinator.toUpperCase() }),
+            /* @__PURE__ */ jsx("pre", { className: "mt-3 max-h-48 overflow-auto rounded-lg border border-slate-200/70 bg-slate-50/60 p-2 text-xs text-slate-700 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-200", children: JSON.stringify(payload.condition, null, 2) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        SectionCard,
+        {
+          variant: "glass",
+          header: {
+            title: labels.wizardStep3Title,
+            subtitle: labels.wizardStep3Subtitle
+          },
+          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(3), children: [
+            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
+          ] }),
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm text-slate-700 dark:text-slate-200", children: actionSentence }),
+            /* @__PURE__ */ jsx("pre", { className: "mt-3 max-h-48 overflow-auto rounded-lg border border-slate-200/70 bg-slate-50/60 p-2 text-xs text-slate-700 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-200", children: JSON.stringify(payload.action, null, 2) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: {
+            title: labels.wizardStep4Title,
+            subtitle: labels.wizardStep4Subtitle
+          },
+          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(4), children: [
+            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
+          ] }),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(
+              ReviewRow3,
+              {
+                label: labels.reviewValidFromLabel,
+                value: payload.validFrom ?? labels.reviewNoneValue
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ReviewRow3,
+              {
+                label: labels.reviewValidUntilLabel,
+                value: payload.validUntil ?? (noExpiry ? labels.noExpiryLabel : labels.reviewNoneValue)
+              }
+            ),
+            /* @__PURE__ */ jsx(ReviewRow3, { label: labels.reviewStatusLabel, value: payload.status ?? "active" }),
+            /* @__PURE__ */ jsx(
+              ReviewRow3,
+              {
+                label: labels.reviewTagsLabel,
+                value: payload.tags && payload.tags.length > 0 ? payload.tags.join(", ") : labels.reviewNoneValue
+              }
+            ),
+            /* @__PURE__ */ jsx(ReviewRow3, { label: labels.reviewRecurrenceLabel, value: recurrence })
+          ] })
+        }
+      )
+    ] });
+  }
+  const stepBody = step === 1 ? renderStep1() : step === 2 ? renderStep2() : step === 3 ? renderStep3() : step === 4 ? renderStep4() : renderStep5();
+  const advanceDisabled = !canAdvance(step);
+  const footer = /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-slate-200/60 pt-4 dark:border-white/10", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: goBack, disabled: step === 1 || submitting, children: labels.wizardBack }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: cancelWithConfirm, disabled: submitting, children: labels.wizardCancel }),
+      step < TOTAL_STEPS3 ? /* @__PURE__ */ jsx(Button, { type: "button", color: "fuchsia", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext }) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          color: "fuchsia",
+          onClick: () => void submit(),
+          disabled: submitting || !name.trim() || !actionTileId,
+          children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate
+        }
+      )
+    ] })
+  ] });
+  const content = /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (step < TOTAL_STEPS3) goNext();
+        else void submit();
+      },
+      className: "space-y-5",
+      children: [
+        /* @__PURE__ */ jsx(
+          StepTimeline,
+          {
+            steps: timelineSteps,
+            progressLabel: labels.pageTitle,
+            onStepClick: (idx) => goToStep(idx + 1)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "w-full space-y-5", children: [
+          stepBody,
+          footer
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    hero,
+    content
+  ] });
+}
+function ReviewRow3({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-slate-200/60 bg-white/40 px-3 py-2 dark:border-white/10 dark:bg-white/[0.04]", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 whitespace-pre-wrap break-words text-xs font-semibold text-gray-900 dark:text-white", children: value })
+  ] });
+}
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+function humanReadableCondition(cond, labels) {
+  if (!cond) return labels.reviewNoneValue;
+  if (cond.operator === "boolean_expression" && Array.isArray(cond.operands)) {
+    const inner = cond.operands.map((o) => humanReadableCondition(o, labels)).join(` ${cond.combinator?.toUpperCase() ?? "AND"} `);
+    return `(${inner})`;
+  }
+  const field = cond.field ?? "?";
+  switch (cond.operator) {
+    case "truthy":
+      return `${field} is set`;
+    case "eq":
+      return `${field} = ${formatValue(cond.value)}`;
+    case "neq":
+      return `${field} \u2260 ${formatValue(cond.value)}`;
+    case "gt":
+      return `${field} > ${formatValue(cond.value)}`;
+    case "gte":
+      return `${field} \u2265 ${formatValue(cond.value)}`;
+    case "lt":
+      return `${field} < ${formatValue(cond.value)}`;
+    case "lte":
+      return `${field} \u2264 ${formatValue(cond.value)}`;
+    case "contains":
+      return `${field} contains "${formatValue(cond.value)}"`;
+    case "regex_match":
+      return `${field} matches /${cond.pattern ?? ""}/`;
+    case "threshold":
+      return `${field} ${cond.comparison ?? "gte"} ${formatValue(cond.value)}`;
+    case "time_window":
+      return `${field} within time-window(${(cond.windows ?? []).length})`;
+    default:
+      return `${cond.operator}(${field})`;
+  }
+}
+function formatValue(v) {
+  if (v === null || v === void 0) return "";
+  return String(v);
+}
+function humanReadableAction(action, labels, tiles, actionTileId) {
+  const tile = tiles.find((t) => t.id === actionTileId);
+  const tileLabel = tile ? labels[tile.labelKey] ?? tile.id : action.type;
+  const paramSummary = action.params ? Object.entries(action.params).slice(0, 3).map(([k, v]) => `${k}=${String(v)}`).join(", ") : "";
+  return paramSummary ? `${tileLabel} \u2014 ${paramSummary}` : tileLabel;
+}
 
-export { AgentNewWizardPageView, AgentsConfigPageView, AgentsIndexPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, AgentsWorkspacePageView, ConnectionsPageView, CredentialsPageView, DashboardPageView, DatasourcesPageView, RulesPageView, RunTimelinePageView, TOOL_TYPES, WorkflowRunsPageView, WorkflowsPageView, jsonSchemaToParameters, parametersToJsonSchema };
+export { AgentNewWizardPageView, AgentsConfigPageView, AgentsIndexPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, AgentsWorkspacePageView, ConnectionsPageView, CredentialsPageView, DashboardPageView, DatasourceNewWizardPageView, DatasourcesPageView, RuleNewWizardPageView, RulesPageView, RunTimelinePageView, TOOL_TYPES, WorkflowRunsPageView, WorkflowsPageView, jsonSchemaToParameters, parametersToJsonSchema };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map