@burdenoff/fluidgrids-fe-sdk 2026.1028.6 → 2026.1028.8

package/dist/{chunk-FO22JCOW.js → chunk-EAF47LYM.js}

@@ -1,17 +1,18 @@
-import { CreateWorkflowRefusalDialog, firstWorkflowProgress, GUIDED_TOUR_STATE, builderPathFor } from './chunk-A2JSAGNQ.js';
-import { useExecutions } from './chunk-3VJ3AIFS.js';
-import { QuotaExhaustedDialog } from './chunk-HHN2TIK2.js';
-import { useCreateWorkflow, useWorkflowDefinitions, useLazyWorkflowDefinition, useImportWorkflow, useDuplicateWorkflow, useDeleteWorkflow } from './chunk-RZQPHWFV.js';
+import { CreateWorkflowRefusalDialog, firstWorkflowProgress, GUIDED_TOUR_STATE, builderPathFor } from './chunk-OAFNNQN7.js';
+import { useExecutions } from './chunk-YNOR2AGJ.js';
+import { useExportWorkflowAs, downloadWorkflowExport, importAcceptAttribute, QuotaExhaustedDialog, importFileKind, parseWorkflowImport, CODE_EXPORT_FORMATS, ImportSourceError, assertImportByteSize, MAX_IMPORT_ARCHIVE_BYTES, readProjectArchive, checkTypeScriptImport, MAX_IMPORT_SOURCE_BYTES, typeScriptModuleFile, typeScriptImportSource, workflowNameFromFile, primaryImportModule } from './chunk-M62CJVTR.js';
+import { useCreateWorkflow, useWorkflowDefinitions, useLazyWorkflowDefinition, useImportWorkflow, useDuplicateWorkflow, useDeleteWorkflow } from './chunk-YQZ7HBOJ.js';
 import { workflowsListControls } from './chunk-D3UWK7GY.js';
 import { useFluidGridsPageControls } from './chunk-PJAWNFJV.js';
 import { FluidGridsDocsLink } from './chunk-4VJ3MDOV.js';
-import { createThenOpen, useFluidGridsPermission, FLUIDGRIDS_PERMISSIONS, SdkPermissionButton, BILLING_PLANS_PATH, useFlowStore, SdkPermissionGate, isQuotaExhaustedFailure } from './chunk-C4AY6JI2.js';
+import { useFluidGridsFlag, FLUIDGRIDS_FLAGS } from './chunk-77NA7TPJ.js';
+import { createThenOpen, useFluidGridsPermission, FLUIDGRIDS_PERMISSIONS, SdkPermissionButton, BILLING_PLANS_PATH, describeOperationError, useFlowStore, SdkPermissionGate, isQuotaExhaustedFailure } from './chunk-NVUJFHTQ.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { useState, useRef, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 import { v4 } from 'uuid';
 import { Icon } from '@iconify/react';
-import { NextSteps, Button, Badge, Input, IllustratedEmptyState, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Label, Textarea, DialogFooter, Skeleton, TooltipProvider, Card, Tooltip, TooltipTrigger, TooltipContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@burdenoff/fe-libs/ui';
+import { NextSteps, Button, Badge, Input, IllustratedEmptyState, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Label, Textarea, DialogFooter, Skeleton, TooltipProvider, Card, Tooltip, TooltipTrigger, TooltipContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@burdenoff/fe-libs/ui';
 import { cn } from '@burdenoff/fe-libs/utils';
 import { TagBadge } from '@burdenoff/fe-libs/tag';
 import { toast } from 'sonner';
@@ -269,6 +270,72 @@ function WorkflowStatusPill({ status }) {
     info.label
   ] });
 }
+function exportFormatLabel(tr, format) {
+  switch (format) {
+    case "TYPESCRIPT" /* Typescript */:
+      return tr(
+        "fluidgrids.builder.cardWorkflow.exportAsTypeScript",
+        "Export as TypeScript"
+      );
+    case "PYTHON" /* Python */:
+      return tr(
+        "fluidgrids.builder.cardWorkflow.exportAsPython",
+        "Export as Python"
+      );
+    default:
+      return tr(
+        "fluidgrids.builder.cardWorkflow.exportAsJson",
+        "Export as JSON"
+      );
+  }
+}
+var FORMAT_ICON = {
+  ["TYPESCRIPT" /* Typescript */]: "mynaui:code",
+  ["PYTHON" /* Python */]: "mynaui:code-square",
+  ["JSON" /* Json */]: "mynaui:file-text"
+};
+function WorkflowExportMenu({
+  onExportAs,
+  exporting
+}) {
+  const tr = useTr();
+  const label = tr("fluidgrids.builder.cardWorkflow.exportMenu", "Export");
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "size-8",
+          "aria-label": label,
+          "data-testid": "fluidgrids-card-export-menu",
+          disabled: exporting !== null,
+          children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: exporting ? "mynaui:spinner" : "mynaui:download",
+              className: exporting ? "size-4 animate-spin" : "size-4"
+            }
+          )
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx("p", { children: label }) })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", "data-card-action": "", children: CODE_EXPORT_FORMATS.map((format) => /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        onClick: () => onExportAs(format),
+        "data-testid": `fluidgrids-card-export-${format.toLowerCase()}`,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: FORMAT_ICON[format], className: "mr-2 size-4" }),
+          exportFormatLabel(tr, format)
+        ]
+      },
+      format
+    )) })
+  ] });
+}
 function relativeTime(iso) {
   if (!iso) return "\u2014";
   const then = new Date(iso).getTime();
@@ -289,7 +356,9 @@ function relativeTime(iso) {
 var CardWorkflow = ({
   workflow,
   onUpdateSuccess,
-  onExport
+  onExport,
+  onExportAs,
+  exportingFormat = null
 }) => {
   const tr = useTr();
   const navigate = useNavigate();
@@ -492,7 +561,13 @@ var CardWorkflow = ({
                   "Sharing is not available for workflows yet"
                 ) }) })
               ] }),
-              onExport && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              onExportAs ? /* @__PURE__ */ jsx("span", { "data-card-action": "", children: /* @__PURE__ */ jsx(
+                WorkflowExportMenu,
+                {
+                  onExportAs,
+                  exporting: exportingFormat
+                }
+              ) }) : onExport ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -511,7 +586,7 @@ var CardWorkflow = ({
                   "fluidgrids.builder.cardWorkflow.exportWorkflow",
                   "Export workflow JSON"
                 ) }) })
-              ] }),
+              ] }) : null,
               /* @__PURE__ */ jsx(
                 SdkPermissionGate,
                 {
@@ -621,91 +696,89 @@ var CardWorkflow = ({
     )
   ] });
 };
-
-// src/utils/workflow-transfer.ts
-function asRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value) ? value : null;
+function formatMiB(bytes) {
+  const mib = bytes / (1024 * 1024);
+  return Number.isInteger(mib) ? String(mib) : mib.toFixed(1);
 }
-function collectWorkflowNodeReferences(definition) {
-  const root = asRecord(definition);
-  const data = asRecord(root?.data);
-  const nodes = data?.nodes;
-  if (!Array.isArray(nodes)) return [];
-  const seen = /* @__PURE__ */ new Set();
-  const references = [];
-  for (const candidate of nodes) {
-    const node = asRecord(candidate);
-    const nodeData = asRecord(node?.data);
-    const nodeId = typeof node?.id === "string" ? node.id : null;
-    const nodeType = typeof nodeData?.nodeId === "string" ? nodeData.nodeId : node?.type;
-    if (!nodeId || typeof nodeType !== "string") continue;
-    const nodeVersion = typeof nodeData?.nodeVersion === "string" ? nodeData.nodeVersion : null;
-    const key = `${nodeId}:${nodeType}:${nodeVersion ?? ""}`;
-    if (seen.has(key)) continue;
-    seen.add(key);
-    references.push({ nodeId, nodeType, nodeVersion });
+function describeImportSourceProblem(tr, problem) {
+  switch (problem.code) {
+    case "too-large":
+      return tr(
+        "fluidgrids.workflowsList.importSourceTooLarge",
+        "The workflow sources are larger than {{size}} MiB, the import limit.",
+        { size: formatMiB(problem.limitBytes) }
+      );
+    case "too-many-files":
+      return tr(
+        "fluidgrids.workflowsList.importSourceTooManyFiles",
+        "An import holds at most {{limit}} files.",
+        { limit: String(problem.limit) }
+      );
+    case "invalid-archive":
+      return tr(
+        "fluidgrids.workflowsList.importSourceInvalidArchive",
+        "The file is not a readable .zip archive."
+      );
+    case "no-module":
+      return tr(
+        "fluidgrids.workflowsList.importSourceNoModule",
+        "No TypeScript workflow module (workflows/*.ts) was found."
+      );
+    case "python-needs-cli":
+      return tr(
+        "fluidgrids.workflowsList.importSourcePythonNeedsCli",
+        "Python workflows are imported with the FluidGrids CLI (fluidgrids push)."
+      );
+    case "needs-node-clients":
+      return tr(
+        "fluidgrids.workflowsList.importSourceNeedsNodeClients",
+        "{{path}} imports the generated node clients (.fluidgrids/nodes.ts). Import the .zip that Export as TypeScript downloads, which includes them.",
+        { path: problem.path }
+      );
   }
-  return references;
 }
-function createWorkflowExportPayload(workflow) {
-  const definitionJson = asRecord(workflow.definitionJson);
-  if (!definitionJson)
-    throw new Error("Workflow definition JSON must be an object");
-  return {
-    format: "fluidgrids.workflow",
-    schemaVersion: 1,
-    exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
-    workflowKey: workflow.workflowKey,
-    version: workflow.version,
-    name: workflow.name,
-    description: workflow.description ?? null,
-    definitionJson,
-    context: asRecord(workflow.context),
-    tags: workflow.tags,
-    tagsV2: workflow.tagsV2,
-    icon: workflow.icon ?? null,
-    category: workflow.category ?? null,
-    nodeReferences: collectWorkflowNodeReferences(definitionJson)
-  };
-}
-function downloadWorkflowExport(workflow) {
-  const payload = createWorkflowExportPayload(workflow);
-  const blob = new Blob([JSON.stringify(payload, null, 2)], {
-    type: "application/json"
-  });
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = `${workflow.workflowKey}-${workflow.version}.fluidgrids.json`;
-  anchor.click();
-  URL.revokeObjectURL(url);
+function WorkflowImportIssues({
+  issues
+}) {
+  const tr = useTr();
+  const errors = issues.errors.length > 0 ? issues.errors : issues.message ? [issues.message] : [];
+  if (errors.length === 0 && issues.warnings.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "data-testid": "fluidgrids-import-issues",
+      className: "space-y-2 rounded-lg border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bg)] p-3 text-xs",
+      children: [
+        errors.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-[var(--color-status-error-text)]", children: tr(
+            "fluidgrids.workflowsList.importErrorsTitle",
+            "The workflow could not be imported"
+          ) }),
+          /* @__PURE__ */ jsx("ul", { className: "mt-1 list-disc space-y-0.5 pl-4 text-[var(--color-status-error-text)]", children: errors.map((error, index) => /* @__PURE__ */ jsx("li", { className: "break-words", children: error }, `e-${index}`)) })
+        ] }),
+        issues.warnings.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-[var(--color-status-warning-text)]", children: tr("fluidgrids.workflowsList.importWarningsTitle", "Warnings") }),
+          /* @__PURE__ */ jsx("ul", { className: "mt-1 list-disc space-y-0.5 pl-4 text-[var(--color-status-warning-text)]", children: issues.warnings.map((warning, index) => /* @__PURE__ */ jsx("li", { className: "break-words", children: warning }, `w-${index}`)) })
+        ] })
+      ]
+    }
+  );
 }
-function parseWorkflowImport(raw) {
-  const parsed = JSON.parse(raw);
-  const root = asRecord(parsed);
-  if (!root) throw new Error("Import must contain a JSON object");
-  const definitionJson = asRecord(root.definitionJson) ?? root;
-  const name = typeof root.name === "string" && root.name.trim() ? root.name : "Imported workflow";
-  return {
-    definitionJson,
-    name,
-    workflowKey: typeof root.workflowKey === "string" ? root.workflowKey : void 0,
-    version: typeof root.version === "string" ? root.version : void 0,
-    description: typeof root.description === "string" ? root.description : void 0,
-    context: asRecord(root.context) ?? void 0,
-    tags: Array.isArray(root.tags) && root.tags.every((tag) => typeof tag === "string") ? root.tags : void 0,
-    tagsV2: root.tagsV2,
-    icon: typeof root.icon === "string" ? root.icon : void 0,
-    category: typeof root.category === "string" ? root.category : void 0,
-    nodeReferences: Array.isArray(root.nodeReferences) ? root.nodeReferences : collectWorkflowNodeReferences(definitionJson)
-  };
+function declaredLength(response) {
+  const value = Number(response.headers.get("content-length"));
+  return Number.isFinite(value) && value > 0 ? value : null;
 }
 function WorkflowImportDialog({
   onImported
 }) {
   const tr = useTr();
-  const { importWorkflow, loading } = useImportWorkflow();
+  const codeFirst = useFluidGridsFlag(FLUIDGRIDS_FLAGS.codeFirst);
+  const { importWorkflow, loading, error: importError } = useImportWorkflow();
   const [open, setOpen] = useState(false);
+  const [typeScript, setTypeScript] = useState(null);
+  const [issues, setIssues] = useState(null);
+  const [submitted, setSubmitted] = useState(false);
   const [rawJson, setRawJson] = useState("");
   const [url, setUrl] = useState("");
   const [parsed, setParsed] = useState(null);
@@ -720,8 +793,53 @@ function WorkflowImportDialog({
     setName("");
     setWorkflowKey("");
     setVersion("");
+    setTypeScript(null);
+    setIssues(null);
+    setSubmitted(false);
+  };
+  const selectTypeScript = (label, files) => {
+    setParsed(null);
+    setIssues(null);
+    setSubmitted(false);
+    setTypeScript({ label, files });
+    setName(workflowNameFromFile(primaryImportModule(files)?.path ?? label));
+    setWorkflowKey("");
+    setVersion("");
+  };
+  const refuseSource = (error) => {
+    setTypeScript(null);
+    setParsed(null);
+    setSubmitted(false);
+    setIssues({
+      errors: [describeImportSourceProblem(tr, error.problem)],
+      warnings: []
+    });
+  };
+  const readCodeSource = async (kind, label, size, read) => {
+    if (!codeFirst || kind === null || kind === "json") return false;
+    try {
+      if (kind === "python") {
+        throw new ImportSourceError({ code: "python-needs-cli" });
+      }
+      if (kind === "archive") {
+        if (size !== null) assertImportByteSize(size, MAX_IMPORT_ARCHIVE_BYTES);
+        const files2 = await readProjectArchive(await read.bytes());
+        selectTypeScript(label, checkTypeScriptImport(files2));
+        return true;
+      }
+      if (size !== null) assertImportByteSize(size, MAX_IMPORT_SOURCE_BYTES);
+      const files = [typeScriptModuleFile(label, await read.text())];
+      selectTypeScript(label, checkTypeScriptImport(files));
+    } catch (error) {
+      if (!(error instanceof ImportSourceError)) throw error;
+      refuseSource(error);
+    }
+    return true;
   };
   const parse = (value) => {
+    setTypeScript(null);
+    setIssues(null);
+    setSubmitted(false);
     try {
       const next = parseWorkflowImport(value);
       setParsed(next);
@@ -741,10 +859,19 @@ function WorkflowImportDialog({
   const handleFile = async (file) => {
     if (!file) return;
     try {
-      parse(await file.text());
+      const handled = await readCodeSource(
+        importFileKind(file.name),
+        file.name,
+        file.size,
+        { text: () => file.text(), bytes: () => file.arrayBuffer() }
+      );
+      if (!handled) parse(await file.text());
     } catch (error) {
       toast.error(
-        error instanceof Error ? error.message : "Unable to read import file"
+        error instanceof Error ? error.message : tr(
+          "fluidgrids.workflowsList.importReadFileFailed",
+          "Unable to read import file"
+        )
       );
     }
   };
@@ -754,10 +881,18 @@ function WorkflowImportDialog({
     try {
       parsedUrl = new URL(url.trim());
       if (parsedUrl.protocol !== "https:")
-        throw new Error("Import URLs must use HTTPS");
+        throw new Error(
+          tr(
+            "fluidgrids.workflowsList.importUrlNotHttps",
+            "Import URLs must use HTTPS"
+          )
+        );
     } catch (error) {
       toast.error(
-        error instanceof Error ? error.message : "Invalid import URL"
+        error instanceof Error ? error.message : tr(
+          "fluidgrids.workflowsList.importUrlInvalid",
+          "Invalid import URL"
+        )
       );
       return;
     }
@@ -765,18 +900,72 @@ function WorkflowImportDialog({
     try {
       const response = await fetch(parsedUrl, { credentials: "omit" });
       if (!response.ok)
-        throw new Error(`Import URL returned HTTP ${response.status}`);
-      parse(await response.text());
+        throw new Error(
+          tr(
+            "fluidgrids.workflowsList.importUrlHttpError",
+            "Import URL returned HTTP {{status}}",
+            { status: String(response.status) }
+          )
+        );
+      const segments = parsedUrl.pathname.split("/").filter(Boolean);
+      const handled = await readCodeSource(
+        importFileKind(parsedUrl.pathname),
+        decodeURIComponent(segments[segments.length - 1] ?? "workflow.ts"),
+        declaredLength(response),
+        { text: () => response.text(), bytes: () => response.arrayBuffer() }
+      );
+      if (!handled) parse(await response.text());
     } catch (error) {
       toast.error(
-        error instanceof Error ? error.message : "Unable to fetch import URL"
+        error instanceof Error ? error.message : tr(
+          "fluidgrids.workflowsList.importUrlFetchFailed",
+          "Unable to fetch import URL"
+        )
       );
     } finally {
       setLoadingUrl(false);
     }
   };
+  const handleTypeScriptImport = async (source) => {
+    setIssues(null);
+    setSubmitted(true);
+    const input = {
+      workflowKey: workflowKey.trim() || void 0,
+      version: version.trim() || void 0,
+      name: name.trim(),
+      source: typeScriptImportSource(source.files),
+      allowMissingNodes: false
+    };
+    const imported = await importWorkflow(input);
+    if (!imported) return;
+    if (!imported.success || !imported.workflow) {
+      setIssues({
+        errors: imported.validation.errors,
+        warnings: imported.validation.warnings,
+        message: imported.message || tr(
+          "fluidgrids.workflowsList.importValidationFailed",
+          "Workflow import validation failed"
+        )
+      });
+      return;
+    }
+    toast.success(
+      tr("fluidgrids.workflowsList.importSuccess", "Workflow imported")
+    );
+    setOpen(false);
+    reset();
+    onImported();
+  };
   const handleImport = async () => {
+    if (typeScript && name.trim()) {
+      await handleTypeScriptImport(typeScript);
+      return;
+    }
     if (!parsed || !name.trim()) return;
+    if (codeFirst) {
+      setIssues(null);
+      setSubmitted(true);
+    }
     const input = {
       workflowKey: workflowKey.trim() || `${name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-")}-${Date.now()}`,
       version: version.trim() || "v1",
@@ -793,6 +982,17 @@ function WorkflowImportDialog({
     const imported = await importWorkflow(input);
     if (!imported) return;
     if (!imported.success || !imported.workflow) {
+      if (codeFirst) {
+        setIssues({
+          errors: imported.validation.errors,
+          warnings: imported.validation.warnings,
+          message: imported.message || tr(
+            "fluidgrids.workflowsList.importValidationFailed",
+            "Workflow import validation failed"
+          )
+        });
+        return;
+      }
       const validationMessage = [
         ...imported.validation.errors,
         ...imported.validation.warnings
@@ -836,8 +1036,17 @@ function WorkflowImportDialog({
         ),
         /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-2xl", children: [
           /* @__PURE__ */ jsxs(DialogHeader, { children: [
-            /* @__PURE__ */ jsx(DialogTitle, { children: tr("fluidgrids.workflowsList.importTitle", "Import workflow JSON") }),
-            /* @__PURE__ */ jsx(DialogDescription, { children: tr(
+            /* @__PURE__ */ jsx(DialogTitle, { children: codeFirst ? tr(
+              "fluidgrids.workflowsList.importTitleCode",
+              "Import workflow"
+            ) : tr(
+              "fluidgrids.workflowsList.importTitle",
+              "Import workflow JSON"
+            ) }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: codeFirst ? tr(
+              "fluidgrids.workflowsList.importDescriptionCode",
+              "Import a workflow JSON file, a TypeScript workflow module, or the .zip that Export as TypeScript downloads, from a file, an HTTPS URL, or pasted JSON. Credentials remain references and must be configured in this workspace."
+            ) : tr(
               "fluidgrids.workflowsList.importDescription",
               "Import from a file, an HTTPS URL, or pasted JSON. Credentials remain references and must be configured in this workspace."
             ) })
@@ -851,7 +1060,10 @@ function WorkflowImportDialog({
                   className: "inline-flex cursor-pointer items-center gap-2 rounded-md border border-border px-3 py-2 text-sm hover:bg-accent",
                   children: [
                     /* @__PURE__ */ jsx(Icon, { icon: "mynaui:upload", className: "size-4" }),
-                    tr(
+                    codeFirst ? tr(
+                      "fluidgrids.workflowsList.importChooseFileCode",
+                      "Choose JSON, TypeScript or .zip file"
+                    ) : tr(
                       "fluidgrids.workflowsList.importChooseFile",
                       "Choose JSON file"
                     )
@@ -863,7 +1075,7 @@ function WorkflowImportDialog({
                 {
                   id: "fluidgrids-workflow-import-file",
                   type: "file",
-                  accept: "application/json,.json",
+                  accept: importAcceptAttribute(codeFirst),
                   className: "sr-only",
                   onChange: (event) => void handleFile(event.currentTarget.files?.[0])
                 }
@@ -876,7 +1088,10 @@ function WorkflowImportDialog({
                   value: url,
                   onChange: (event) => setUrl(event.target.value),
                   placeholder: "https://example.com/workflow.json",
-                  "aria-label": tr(
+                  "aria-label": codeFirst ? tr(
+                    "fluidgrids.workflowsList.importUrlLabelCode",
+                    "Workflow JSON, TypeScript or .zip URL"
+                  ) : tr(
                     "fluidgrids.workflowsList.importUrlLabel",
                     "Workflow JSON URL"
                   )
@@ -888,7 +1103,7 @@ function WorkflowImportDialog({
                   variant: "outline",
                   onClick: () => void handleUrl(),
                   disabled: loadingUrl || !url.trim(),
-                  children: loadingUrl ? "Loading\u2026" : tr("fluidgrids.workflowsList.importFetchUrl", "Fetch")
+                  children: loadingUrl ? tr("fluidgrids.workflowsList.importFetchingUrl", "Loading\u2026") : tr("fluidgrids.workflowsList.importFetchUrl", "Fetch")
                 }
               )
             ] }),
@@ -912,15 +1127,33 @@ function WorkflowImportDialog({
                 )
               }
             ),
-            parsed && /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border bg-muted/30 p-3", children: [
-              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            (parsed || typeScript) && /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border bg-muted/30 p-3", children: [
+              parsed ? /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
                 parsed.nodeReferences.length,
                 " ",
                 tr(
                   "fluidgrids.workflowsList.importNodeReferences",
                   "node references found"
                 )
-              ] }),
+              ] }) : typeScript ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-xs text-muted-foreground",
+                  "data-testid": "fluidgrids-import-typescript",
+                  children: typeScript.files.length > 1 ? tr(
+                    "fluidgrids.workflowsList.importTypeScriptProject",
+                    "{{file}}: {{count}} project files. The service builds the TypeScript and checks the workflow it defines before creating a draft.",
+                    {
+                      file: typeScript.label,
+                      count: String(typeScript.files.length)
+                    }
+                  ) : tr(
+                    "fluidgrids.workflowsList.importTypeScriptFile",
+                    "TypeScript module {{file}}: the service builds it and checks the workflow it defines before creating a draft.",
+                    { file: typeScript.label }
+                  )
+                }
+              ) : null,
               /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [
                 /* @__PURE__ */ jsxs("div", { className: "space-y-1 sm:col-span-3", children: [
                   /* @__PURE__ */ jsx(Label, { htmlFor: "fluidgrids-import-name", children: tr("fluidgrids.workflowsList.importName", "Name") }),
@@ -960,7 +1193,17 @@ function WorkflowImportDialog({
                   )
                 ] })
               ] })
-            ] })
+            ] }),
+            codeFirst && !loading && (issues || submitted && importError) && /* @__PURE__ */ jsx(
+              WorkflowImportIssues,
+              {
+                issues: issues ?? {
+                  errors: [],
+                  warnings: [],
+                  message: importError?.message ?? null
+                }
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxs(DialogFooter, { children: [
             /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: tr("fluidgrids.workflowsList.importCancel", "Cancel") }),
@@ -968,7 +1211,7 @@ function WorkflowImportDialog({
               Button,
               {
                 onClick: () => void handleImport(),
-                disabled: loading || !parsed || !name.trim(),
+                disabled: loading || !parsed && !typeScript || !name.trim(),
                 children: loading ? tr("fluidgrids.workflowsList.importing", "Importing\u2026") : tr("fluidgrids.workflowsList.importConfirm", "Import workflow")
               }
             )
@@ -1267,6 +1510,22 @@ function WorkflowsList() {
     ]
   );
   useFluidGridsPageControls(assistantControls);
+  const codeFirst = useFluidGridsFlag(FLUIDGRIDS_FLAGS.codeFirst);
+  const { exportAs, exporting } = useExportWorkflowAs();
+  const [exportingKey, setExportingKey] = useState(null);
+  const handleExportAs = async (workflowKey, version, format) => {
+    setExportingKey(workflowKey);
+    try {
+      await exportAs({ workflowKey, version, format });
+    } catch (error2) {
+      toast.error(
+        tr("fluidgrids.workflowsList.exportFailed", "Export failed"),
+        { description: describeOperationError(error2) }
+      );
+    } finally {
+      setExportingKey(null);
+    }
+  };
   const handleExport = async (id) => {
     const workflow = await getWorkflow(void 0, id);
     if (!workflow) return;
@@ -1507,7 +1766,13 @@ function WorkflowsList() {
                   }))
                 },
                 onUpdateSuccess: () => refetch(),
-                onExport: () => void handleExport(workflow.id)
+                onExport: () => void handleExport(workflow.id),
+                onExportAs: codeFirst ? (format) => void handleExportAs(
+                  workflow.workflowKey,
+                  workflow.version,
+                  format
+                ) : void 0,
+                exportingFormat: exportingKey === workflow.workflowKey ? exporting : null
               },
               workflow.id
             )) })