@datatechsolutions/ui 3.13.1 → 3.14.0

package/dist/platform/pages/index.mjs

@@ -1,24 +1,24 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-4VEQJAXJ.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-4VEQJAXJ.mjs';
-import { DIALECT_CATEGORIES, DatasourceModal, findDialect, findCategory } from '../../chunk-4MNKVDTJ.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-4MNKVDTJ.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel, defaultRuleCondition, defaultRuleAction, RuleConditionBuilder, RuleActionBuilder } from '../../chunk-RSCRIDMW.mjs';
+import { WorkflowWorkspace } from '../../chunk-U7VMFQFN.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-U7VMFQFN.mjs';
+import { DIALECT_CATEGORIES, DatasourceModal, findDialect, findCategory } from '../../chunk-Q5TZTA6H.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-Q5TZTA6H.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel, defaultRuleCondition, defaultRuleAction, RuleConditionBuilder, RuleActionBuilder } from '../../chunk-WTSMTLSP.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-TRNDFSM6.mjs';
-import { HeroSection, SearchBar, FormSection, ChipPicker, PageLoadingState, PageEmptyState, 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, StepIndicator, FilterTileButton, FormToggle, Spinner, StatusBadge, FormCheckbox, SegmentedControl, DatePicker, TimePicker } from '../../chunk-QEACOJXX.mjs';
-import '../../chunk-ZEFNBGYI.mjs';
+import '../../chunk-33ZWFDVG.mjs';
+import { HeroSection, SearchBar, FormSection, ChipPicker, PageLoadingState, PageEmptyState, 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, StepIndicator, FilterTileButton, PickerTile, FormToggle, Spinner, StatusBadge, FormCheckbox, SegmentedControl, DatePicker, TimePicker } from '../../chunk-F4KHAKTP.mjs';
 import '../../chunk-NBW6WJQT.mjs';
 import '../../chunk-3AY5HIQ6.mjs';
-import '../../chunk-VPRAESA7.mjs';
-import { Button, Badge } from '../../chunk-O4RZCDP2.mjs';
+import '../../chunk-ZEFNBGYI.mjs';
+import '../../chunk-KDDXDQR2.mjs';
+import { Button, Badge } from '../../chunk-2SBVFLPZ.mjs';
 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, BellAlertIcon, GlobeAltIcon, PencilIcon, ArrowUpCircleIcon, SparklesIcon } from '@heroicons/react/24/outline';
+import { CubeTransparentIcon, CpuChipIcon, ChatBubbleLeftEllipsisIcon, WrenchScrewdriverIcon, AdjustmentsHorizontalIcon, CircleStackIcon, RectangleStackIcon, ClockIcon, LinkIcon, KeyIcon, ArrowPathIcon, TrashIcon, PlusIcon, PencilSquareIcon, CodeBracketIcon, ServerStackIcon, SparklesIcon, BoltIcon, CloudIcon, BeakerIcon, GlobeAltIcon, BellAlertIcon, PencilIcon, ArrowUpCircleIcon } from '@heroicons/react/24/outline';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function AgentsModelsPageView({ labels, models, loading }) {
@@ -3740,14 +3740,13 @@ function AgentNewWizardPageView({
           /* @__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.avatarLabel }),
             /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: EMOJI_PALETTE.map((e) => /* @__PURE__ */ jsx(
-              "button",
+              PickerTile,
               {
-                type: "button",
                 onClick: () => {
                   setEmoji(e);
                   markTouched();
                 },
-                "aria-pressed": emoji === e,
+                selected: emoji === e,
                 className: [
                   "flex h-9 w-9 items-center justify-center rounded-lg text-base transition-all",
                   emoji === e ? `bg-gradient-to-br ${activePreset.accent} shadow-sm ring-2 ring-indigo-500/70 ring-offset-1 ring-offset-transparent` : "liquid-surface hover:border-indigo-400/40 focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1"
@@ -3878,52 +3877,34 @@ function AgentNewWizardPageView({
             subtitle: labels.behaviorSubtitle
           },
           children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("label", { htmlFor: "wizard-system-prompt", className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: labels.promptSystemPrompt }),
-                /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
-                  systemPrompt.length,
-                  " chars"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  id: "wizard-system-prompt",
-                  value: systemPrompt,
-                  onChange: (e) => {
-                    setSystemPrompt(e.target.value);
-                    markTouched();
-                  },
-                  rows: 8,
-                  className: "w-full resize-y rounded-lg bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm border border-slate-200/50 dark:border-white/10 px-3 py-2.5 font-mono text-xs leading-relaxed text-slate-700 outline-none transition-colors placeholder:text-slate-400 focus:ring-indigo-500/70 focus:ring-offset-1 motion-reduce:transition-none dark:text-slate-300 dark:placeholder:text-slate-500",
-                  placeholder: labels.promptPlaceholder
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("label", { htmlFor: "wizard-user-prompt", className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: labels.userPromptLabel }),
-                /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
-                  userPrompt.length,
-                  " chars"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  id: "wizard-user-prompt",
-                  value: userPrompt,
-                  onChange: (e) => {
-                    setUserPrompt(e.target.value);
-                    markTouched();
-                  },
-                  rows: 5,
-                  className: "w-full resize-y rounded-lg bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm border border-slate-200/50 dark:border-white/10 px-3 py-2.5 font-mono text-xs leading-relaxed text-slate-700 outline-none transition-colors placeholder:text-slate-400 focus:ring-indigo-500/70 focus:ring-offset-1 motion-reduce:transition-none dark:text-slate-300 dark:placeholder:text-slate-500",
-                  placeholder: labels.userPromptPlaceholder
-                }
-              )
-            ] }),
+            /* @__PURE__ */ jsx(
+              FormTextarea,
+              {
+                label: labels.promptSystemPrompt,
+                value: systemPrompt,
+                onValueChange: (v) => {
+                  setSystemPrompt(v);
+                  markTouched();
+                },
+                rows: 8,
+                placeholder: labels.promptPlaceholder,
+                hint: `${systemPrompt.length} chars`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormTextarea,
+              {
+                label: labels.userPromptLabel,
+                value: userPrompt,
+                onValueChange: (v) => {
+                  setUserPrompt(v);
+                  markTouched();
+                },
+                rows: 5,
+                placeholder: labels.userPromptPlaceholder,
+                hint: `${userPrompt.length} chars`
+              }
+            ),
             /* @__PURE__ */ jsx(
               RangeSliderField,
               {
@@ -3986,28 +3967,22 @@ function AgentNewWizardPageView({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("label", { htmlFor: "wizard-max-tokens", className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: labels.maxTokens }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-slate-900 dark:text-white", children: maxTokens.toLocaleString() })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: "wizard-max-tokens",
-                  type: "number",
-                  value: maxTokens,
-                  onChange: (e) => {
-                    setMaxTokens(Math.max(1, Math.floor(Number(e.target.value) || 0)));
-                    markTouched();
-                  },
-                  min: 1,
-                  max: 32e3,
-                  step: 1,
-                  className: "w-full rounded-lg bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm border border-slate-200/50 dark:border-white/10 px-3 py-2.5 text-sm tabular-nums text-slate-700 outline-none transition-colors focus:ring-indigo-500/70 focus:ring-offset-1 motion-reduce:transition-none dark:text-slate-300"
-                }
-              )
-            ] }),
+            /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                label: labels.maxTokens,
+                type: "number",
+                value: String(maxTokens),
+                onValueChange: (v) => {
+                  setMaxTokens(Math.max(1, Math.floor(Number(v) || 0)));
+                  markTouched();
+                },
+                min: 1,
+                max: 32e3,
+                step: 1,
+                hint: maxTokens.toLocaleString()
+              }
+            ),
             /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-slate-200/30 dark:border-white/10", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-px bg-slate-200/30 dark:bg-white/10", children: [
               /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
                 /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-slate-400 dark:text-slate-500", children: labels.model }),
@@ -4044,14 +4019,13 @@ function AgentNewWizardPageView({
                 const selected = difficulty === opt.id;
                 const label = opt.id === "beginner" ? labels.difficultyBeginner : opt.id === "intermediate" ? labels.difficultyIntermediate : opt.id === "advanced" ? labels.difficultyAdvanced : labels.difficultyExpert;
                 return /* @__PURE__ */ jsxs(
-                  "button",
+                  PickerTile,
                   {
-                    type: "button",
                     onClick: () => {
                       setDifficulty(opt.id);
                       markTouched();
                     },
-                    "aria-pressed": selected,
+                    selected,
                     className: [
                       "liquid-surface flex items-center gap-2 rounded-xl px-3 py-2 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"
@@ -4921,7 +4895,7 @@ function DatasourceNewWizardPageView({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.fieldAllowedTables }),
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-slate-500 dark:text-slate-400", children: labels.fieldAllowedTables }),
             /* @__PURE__ */ jsx(
               ChipPicker,
               {
@@ -4945,7 +4919,7 @@ function DatasourceNewWizardPageView({
             /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-500 dark:text-slate-400", children: labels.fieldAllowedTablesHint })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.fieldBlockedColumns }),
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-slate-500 dark:text-slate-400", children: labels.fieldBlockedColumns }),
             /* @__PURE__ */ jsx(
               ChipPicker,
               {
@@ -5094,8 +5068,8 @@ function DatasourceNewWizardPageView({
 }
 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 })
+    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-500", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-slate-900 dark:text-white", children: value })
   ] });
 }
 async function simulateTest() {
@@ -5945,7 +5919,473 @@ function humanReadableAction(action, labels, tiles, actionTileId) {
   const paramSummary = action.params ? Object.entries(action.params).slice(0, 3).map(([k, v]) => `${k}=${String(v)}`).join(", ") : "";
   return paramSummary ? `${tileLabel} \u2014 ${paramSummary}` : tileLabel;
 }
+function AgentNewModal({ open, onClose, ...wizardProps }) {
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      maxWidth: "2xl",
+      closeOnBackdrop: false,
+      closeLabel: wizardProps.labels.wizardCancel,
+      children: /* @__PURE__ */ jsx(AgentNewWizardPageView, { ...wizardProps })
+    }
+  );
+}
+function DatasourceNewModal({ open, onClose, ...wizardProps }) {
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      maxWidth: "2xl",
+      closeOnBackdrop: false,
+      closeLabel: wizardProps.labels.wizardCancel,
+      children: /* @__PURE__ */ jsx(DatasourceNewWizardPageView, { ...wizardProps })
+    }
+  );
+}
+function RuleNewModal({ open, onClose, ...wizardProps }) {
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      maxWidth: "2xl",
+      closeOnBackdrop: false,
+      closeLabel: wizardProps.labels.wizardCancel,
+      children: /* @__PURE__ */ jsx(RuleNewWizardPageView, { ...wizardProps })
+    }
+  );
+}
+var AWS_REGIONS = [
+  { value: "us-east-1", label: "us-east-1 (N. Virginia)" },
+  { value: "us-east-2", label: "us-east-2 (Ohio)" },
+  { value: "us-west-2", label: "us-west-2 (Oregon)" },
+  { value: "eu-west-1", label: "eu-west-1 (Ireland)" },
+  { value: "eu-central-1", label: "eu-central-1 (Frankfurt)" },
+  { value: "ap-southeast-1", label: "ap-southeast-1 (Singapore)" },
+  { value: "sa-east-1", label: "sa-east-1 (S\xE3o Paulo)" }
+];
+var GCP_REGIONS = [
+  { value: "us-central1", label: "us-central1 (Iowa)" },
+  { value: "us-east1", label: "us-east1 (S. Carolina)" },
+  { value: "us-west1", label: "us-west1 (Oregon)" },
+  { value: "europe-west1", label: "europe-west1 (Belgium)" },
+  { value: "europe-west4", label: "europe-west4 (Netherlands)" },
+  { value: "asia-southeast1", label: "asia-southeast1 (Singapore)" },
+  { value: "southamerica-east1", label: "southamerica-east1 (S\xE3o Paulo)" }
+];
+var AZURE_REGIONS = [
+  { value: "eastus", label: "eastus" },
+  { value: "westus2", label: "westus2" },
+  { value: "northeurope", label: "northeurope" },
+  { value: "westeurope", label: "westeurope" },
+  { value: "brazilsouth", label: "brazilsouth" }
+];
+var MODEL_PROVIDERS = [
+  { value: "anthropic_api", label: "Anthropic API", category: "managed" },
+  { value: "openai_api", label: "OpenAI API", category: "managed" },
+  { value: "aws_bedrock", label: "AWS Bedrock", category: "cloud", needsRegion: true, defaultRegion: "us-east-1", regions: AWS_REGIONS },
+  { value: "google_vertex", label: "Google Vertex AI", category: "cloud", needsRegion: true, defaultRegion: "us-central1", regions: GCP_REGIONS },
+  { value: "azure_openai", label: "Azure OpenAI", category: "cloud", needsRegion: true, needsEndpoint: true, defaultRegion: "eastus", regions: AZURE_REGIONS },
+  { value: "groq", label: "Groq", category: "managed" },
+  { value: "mistral", label: "Mistral API", category: "managed" },
+  { value: "huggingface", label: "Hugging Face", category: "hosted", needsEndpoint: true },
+  { value: "ollama", label: "Ollama", category: "local", needsEndpoint: true },
+  { value: "custom", label: "Custom / OpenAI-compatible", category: "custom", needsEndpoint: true }
+];
+var PROVIDER_ICON = {
+  anthropic_api: SparklesIcon,
+  openai_api: BeakerIcon,
+  aws_bedrock: CloudIcon,
+  google_vertex: CloudIcon,
+  azure_openai: CloudIcon,
+  groq: BoltIcon,
+  mistral: SparklesIcon,
+  huggingface: ServerStackIcon,
+  ollama: CpuChipIcon,
+  custom: CodeBracketIcon
+};
+var PROVIDER_COLOR = {
+  anthropic_api: "amber",
+  openai_api: "emerald",
+  aws_bedrock: "amber",
+  google_vertex: "blue",
+  azure_openai: "sky",
+  groq: "purple",
+  mistral: "pink",
+  huggingface: "amber",
+  ollama: "slate",
+  custom: "slate"
+};
+var TOTAL_STEPS4 = 4;
+function ModelNewWizardPageView({
+  labels,
+  initialStep,
+  onStepChange,
+  onSubmit,
+  onCancel,
+  onTestConnection
+}) {
+  const clampedInitial = Math.min(TOTAL_STEPS4, Math.max(1, initialStep ?? 1));
+  const [step, setStep] = useState(clampedInitial);
+  const [providerSlug, setProviderSlug] = useState("anthropic_api");
+  const [name, setName] = useState("");
+  const [region, setRegion] = useState("");
+  const [endpoint, setEndpoint] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [modelFilterItems, setModelFilterItems] = useState([]);
+  const [modelFilterSelected, setModelFilterSelected] = useState([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [touched, setTouched] = useState(false);
+  const [testStatus, setTestStatus] = useState("idle");
+  const preset = useMemo(
+    () => MODEL_PROVIDERS.find((p) => p.value === providerSlug) ?? MODEL_PROVIDERS[0],
+    [providerSlug]
+  );
+  useEffect(() => {
+    if (preset.defaultRegion && !region) setRegion(preset.defaultRegion);
+  }, [providerSlug]);
+  useEffect(() => {
+    const next = Math.min(TOTAL_STEPS4, 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_STEPS4, Math.max(1, next));
+    setStep(clamped);
+    onStepChange?.(clamped);
+  }, [onStepChange]);
+  function canAdvance(from) {
+    if (from === 1) return Boolean(providerSlug);
+    if (from === 2) return name.trim().length > 0;
+    return true;
+  }
+  const goNext = useCallback(() => {
+    if (!canAdvance(step)) return;
+    if (step < TOTAL_STEPS4) goToStep(step + 1);
+  }, [step, providerSlug, 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() {
+    return {
+      providerSlug,
+      name: name.trim(),
+      region: region.trim() || void 0,
+      endpoint: endpoint.trim() || void 0,
+      apiKey: apiKey || void 0,
+      modelFilters: modelFilterSelected.length > 0 ? [...modelFilterSelected] : void 0
+    };
+  }
+  async function handleTestConnection() {
+    if (!onTestConnection) return;
+    setTestStatus("testing");
+    try {
+      const ok = await onTestConnection(buildPayload());
+      setTestStatus(ok ? "success" : "failed");
+      setTimeout(() => setTestStatus("idle"), 3500);
+    } catch {
+      setTestStatus("failed");
+      setTimeout(() => setTestStatus("idle"), 3500);
+    }
+  }
+  async function submit() {
+    setSubmitting(true);
+    try {
+      await onSubmit(buildPayload());
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  const stepTitles = [labels.step1Title, labels.step2Title, labels.step3Title, labels.step4Title];
+  const stepSubtitles = [labels.step1Subtitle, labels.step2Subtitle, labels.step3Subtitle, labels.step4Subtitle];
+  const indicatorSteps = stepTitles.map((title, idx) => ({ id: String(idx + 1), title }));
+  const counter = labels.wizardStepCounter.replace("{current}", String(step)).replace("{total}", String(TOTAL_STEPS4));
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(CubeTransparentIcon, { className: "h-5 w-5" }),
+      label: counter,
+      title: labels.pageTitle,
+      subtitle: stepSubtitles[step - 1] ?? labels.pageSubtitle,
+      gradient: "from-emerald-500 to-teal-700",
+      children: /* @__PURE__ */ jsx(
+        StepIndicator,
+        {
+          accent: "indigo",
+          currentStep: step - 1,
+          onStepChange: (idx) => goToStep(idx + 1),
+          progressLabel: labels.pageTitle,
+          steps: indicatorSteps
+        }
+      )
+    }
+  );
+  function renderStep1() {
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: { title: labels.providerLabel, subtitle: labels.step1Subtitle },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "radiogroup",
+            "aria-label": labels.providerLabel,
+            className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+            children: MODEL_PROVIDERS.map((p) => {
+              const Icon = PROVIDER_ICON[p.value] ?? GlobeAltIcon;
+              const color = PROVIDER_COLOR[p.value] ?? "slate";
+              const selected = providerSlug === p.value;
+              return /* @__PURE__ */ jsx(
+                FilterTileButton,
+                {
+                  isActive: selected,
+                  color,
+                  icon: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }),
+                  label: p.label,
+                  count: p.category,
+                  onClick: () => {
+                    setProviderSlug(p.value);
+                    markTouched();
+                  }
+                },
+                p.value
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+  function renderStep2() {
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: { title: preset.label, subtitle: labels.step2Subtitle },
+        children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs(FormGrid, { children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.nameLabel,
+              value: name,
+              onValueChange: (v) => {
+                setName(v);
+                markTouched();
+              },
+              placeholder: labels.namePlaceholder || `${preset.label} \u2014 produ\xE7\xE3o`,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.apiKeyLabel,
+              type: "password",
+              value: apiKey,
+              onValueChange: (v) => {
+                setApiKey(v);
+                markTouched();
+              },
+              placeholder: labels.apiKeyPlaceholder
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+  function renderStep3() {
+    const showRegion = preset.needsRegion === true;
+    const showEndpoint = preset.needsEndpoint === true;
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: { title: labels.step3Title, subtitle: labels.step3Subtitle },
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs(FormGrid, { children: [
+            showRegion && (preset.regions ? /* @__PURE__ */ jsx(
+              FormSelect,
+              {
+                label: labels.regionLabel,
+                value: region,
+                onValueChange: (v) => {
+                  setRegion(v);
+                  markTouched();
+                },
+                options: [...preset.regions]
+              }
+            ) : /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                label: labels.regionLabel,
+                value: region,
+                onValueChange: (v) => {
+                  setRegion(v);
+                  markTouched();
+                },
+                placeholder: labels.regionPlaceholder ?? preset.defaultRegion
+              }
+            )),
+            showEndpoint && /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                label: labels.endpointLabel,
+                type: "url",
+                value: endpoint,
+                onValueChange: (v) => {
+                  setEndpoint(v);
+                  markTouched();
+                },
+                placeholder: labels.endpointPlaceholder ?? "https://\u2026"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-slate-500 dark:text-slate-400", children: labels.modelFilterLabel }),
+            /* @__PURE__ */ jsx(
+              ChipPicker,
+              {
+                items: modelFilterItems,
+                selectedIds: modelFilterSelected,
+                onChange: (ids) => {
+                  setModelFilterSelected(ids);
+                  markTouched();
+                },
+                onItemsChange: (items) => {
+                  setModelFilterItems(items);
+                  markTouched();
+                },
+                allowCustom: true,
+                showActions: false,
+                addPlaceholder: labels.modelFilterPlaceholder,
+                addAriaLabel: labels.modelFilterLabel
+              }
+            )
+          ] }),
+          onTestConnection && /* @__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 renderStep4() {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: { title: labels.step1Title, subtitle: labels.step1Subtitle },
+          actions: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(1), children: labels.wizardReviewEdit }),
+          children: /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: /* @__PURE__ */ jsx(ReviewRow4, { label: labels.reviewProviderLabel, value: preset.label }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: { title: labels.step2Title, subtitle: labels.step2Subtitle },
+          actions: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(2), children: labels.wizardReviewEdit }),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow4, { label: labels.reviewNameLabel, value: name || labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(ReviewRow4, { label: labels.reviewApiKeyLabel, value: apiKey ? labels.reviewApiKeyRedacted : labels.reviewNoneValue })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: { title: labels.step3Title, subtitle: labels.step3Subtitle },
+          actions: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(3), children: labels.wizardReviewEdit }),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow4, { label: labels.reviewRegionLabel, value: region || labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(ReviewRow4, { label: labels.reviewEndpointLabel, value: endpoint || labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(
+              ReviewRow4,
+              {
+                label: labels.reviewModelsLabel,
+                value: modelFilterSelected.length > 0 ? modelFilterSelected.join(", ") : labels.reviewNoneValue
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  }
+  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_STEPS4 ? /* @__PURE__ */ jsx(Button, { type: "button", color: "emerald", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext }) : /* @__PURE__ */ jsx(Button, { type: "button", color: "emerald", onClick: () => void submit(), disabled: submitting || !name.trim(), children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate })
+    ] })
+  ] });
+  const content = /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (step < TOTAL_STEPS4) goNext();
+        else void submit();
+      },
+      className: "space-y-4",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "liquid-surface rounded-2xl p-5 sm:p-8", children: stepBody }),
+        footer
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    hero,
+    content
+  ] });
+}
+function ReviewRow4({ 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-slate-400 dark:text-slate-500", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-slate-900 dark:text-white", children: value })
+  ] });
+}
+function ModelNewModal({ open, onClose, ...wizardProps }) {
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      maxWidth: "2xl",
+      closeOnBackdrop: false,
+      closeLabel: wizardProps.labels.wizardCancel,
+      children: /* @__PURE__ */ jsx(ModelNewWizardPageView, { ...wizardProps })
+    }
+  );
+}
 
-export { AgentNewWizardPageView, AgentsConfigPageView, AgentsIndexPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, AgentsWorkspacePageView, ConnectionsPageView, CredentialsPageView, DashboardPageView, DatasourceNewWizardPageView, DatasourcesPageView, RuleNewWizardPageView, RulesPageView, RunTimelinePageView, TOOL_TYPES, WorkflowRunsPageView, WorkflowsPageView, jsonSchemaToParameters, parametersToJsonSchema };
+export { AgentNewModal, AgentNewWizardPageView, AgentsConfigPageView, AgentsIndexPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, AgentsWorkspacePageView, ConnectionsPageView, CredentialsPageView, DashboardPageView, DatasourceNewModal, DatasourceNewWizardPageView, DatasourcesPageView, MODEL_PROVIDERS, ModelNewModal, ModelNewWizardPageView, RuleNewModal, RuleNewWizardPageView, RulesPageView, RunTimelinePageView, TOOL_TYPES, WorkflowRunsPageView, WorkflowsPageView, jsonSchemaToParameters, parametersToJsonSchema };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map