@burdenoff/fluidgrids-fe-sdk 2026.510.105

package/README.md

@@ -0,0 +1,149 @@
+# @burdenoff/fluidgrids-fe-sdk
+
+FluidGrids Workflow Builder SDK - Embeddable visual workflow automation for React applications.
+
+## Installation
+
+```bash
+npm install @burdenoff/fluidgrids-fe-sdk
+# or
+bun add @burdenoff/fluidgrids-fe-sdk
+```
+
+## Quick Start
+
+### Standalone Workflow Builder
+
+Use `WorkflowBuilder` when you want a self-contained workflow builder with its own Apollo client:
+
+```tsx
+import { WorkflowBuilder } from '@burdenoff/fluidgrids-fe-sdk';
+import '@burdenoff/fluidgrids-fe-sdk/styles.css';
+
+function App() {
+  return (
+    <WorkflowBuilder
+      apiGatewayUrl={process.env.NEXT_PUBLIC_FLUIDGRIDS_API_URL!}
+      authToken="your-auth-token"
+      workspaceId="your-workspace-id"
+      onSave={(workflow) => {
+        console.log('Workflow saved:', workflow);
+      }}
+      onExecute={(runId) => {
+        console.log('Execution started:', runId);
+      }}
+    />
+  );
+}
+```
+
+### Full Workflow Module with Routing
+
+Use `FluidGridsRoot` for complete workflow management including list, builder, runs, and credentials:
+
+```tsx
+import { FluidGridsRoot } from '@burdenoff/fluidgrids-fe-sdk';
+import '@burdenoff/fluidgrids-fe-sdk/styles.css';
+import { useNavigate } from 'react-router-dom';
+
+function App() {
+  const navigate = useNavigate();
+
+  return (
+    <FluidGridsRoot
+      basePath="/workflows"
+      apiGatewayUrl={process.env.NEXT_PUBLIC_FLUIDGRIDS_API_URL!}
+      authToken="your-auth-token"
+      workspaceId="your-workspace-id"
+      navigate={(path) => navigate(path)}
+      onWorkflowSave={(workflow) => {
+        console.log('Workflow saved:', workflow);
+      }}
+    />
+  );
+}
+```
+
+### Core Builder (BYO Apollo Client)
+
+Use `WorkflowBuilderCore` when you want to provide your own Apollo client:
+
+```tsx
+import { WorkflowBuilderCore, FluidGridsProvider } from '@burdenoff/fluidgrids-fe-sdk';
+import { ApolloProvider } from '@apollo/client';
+import { yourApolloClient } from './apollo';
+
+function App() {
+  return (
+    <FluidGridsProvider
+      apiGatewayUrl={process.env.NEXT_PUBLIC_FLUIDGRIDS_API_URL!}
+      authToken="your-auth-token"
+      workspaceId="your-workspace-id"
+      trustedOrigins={[window.location.origin]}
+      apolloClient={yourApolloClient}
+    >
+      <WorkflowBuilderCore
+        workflow={yourWorkflowData}
+        onSave={(workflow) => console.log('Saved:', workflow)}
+      />
+    </FluidGridsProvider>
+  );
+}
+```
+
+## API Reference
+
+### WorkflowBuilder Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `apiGatewayUrl` | `string` | Yes | Workspace API Gateway URL |
+| `authToken` | `string` | No | Authentication token |
+| `workspaceId` | `string` | Yes | Current workspace ID |
+| `tenantId` | `string` | No | Current tenant ID |
+| `workflowId` | `string` | No | Workflow ID to load |
+| `workflowVersion` | `string` | No | Workflow version to load |
+| `initialWorkflow` | `WorkflowData` | No | Initial workflow data |
+| `readonly` | `boolean` | No | Disable editing |
+| `hideHeader` | `boolean` | No | Hide the header toolbar |
+| `hideSidebar` | `boolean` | No | Hide the sidebar |
+| `hideLogsPanel` | `boolean` | No | Hide the logs panel |
+| `onSave` | `(workflow) => void` | No | Save callback |
+| `onExecute` | `(runId) => void` | No | Execute callback |
+| `onNodeClick` | `(node) => void` | No | Node click callback |
+| `onBack` | `() => void` | No | Back button callback |
+| `className` | `string` | No | Custom CSS class |
+
+### FluidGridsRoot Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `basePath` | `string` | No | Base path for routing |
+| `apiGatewayUrl` | `string` | Yes | Workspace API Gateway URL |
+| `authToken` | `string` | No | Authentication token |
+| `workspaceId` | `string` | Yes | Current workspace ID |
+| `tenantId` | `string` | No | Current tenant ID |
+| `currentUser` | `User` | No | Current user info |
+| `navigate` | `(path) => void` | No | Navigation function |
+| `readonly` | `boolean` | No | Global readonly mode |
+| `onWorkflowSave` | `(workflow) => void` | No | Save callback |
+| `onWorkflowExecute` | `(runId, workflowId) => void` | No | Execute callback |
+| `className` | `string` | No | Custom CSS class |
+
+## Styling
+
+The SDK uses Tailwind CSS for styling. Make sure you have Tailwind configured in your project, or import the pre-built styles:
+
+```tsx
+import '@burdenoff/fluidgrids-fe-sdk/styles.css';
+```
+
+## Security Notes
+
+- Pass runtime URLs through environment variables instead of hardcoded localhost defaults.
+- Use `trustedOrigins` when embedding the SDK into known host applications.
+- Avoid logging or persisting `authToken` values in app telemetry or error reports.
+
+## License
+
+Proprietary - Copyright Burdenoff Consultancy Services Pvt Ltd.

package/dist/ExecutionDetailPage-3EVS3WEC.js

@@ -0,0 +1,6 @@
+export { ExecutionDetailPage } from './chunk-GY66IQWN.js';
+import './chunk-WD52O45G.js';
+import './chunk-FGYVIXQ7.js';
+import './chunk-5BDQNSP3.js';
+//# sourceMappingURL=ExecutionDetailPage-3EVS3WEC.js.map
+//# sourceMappingURL=ExecutionDetailPage-3EVS3WEC.js.map

package/dist/ExecutionDetailPage-3EVS3WEC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ExecutionDetailPage-3EVS3WEC.js"}

package/dist/ExecutionsListPage-NH2JLL2D.js

@@ -0,0 +1,8 @@
+export { ExecutionsListPage } from './chunk-UOCR65PI.js';
+import './chunk-WD52O45G.js';
+import './chunk-4FFPGQD3.js';
+import './chunk-FGYVIXQ7.js';
+import './chunk-5BDQNSP3.js';
+import './chunk-WWU2O2SR.js';
+//# sourceMappingURL=ExecutionsListPage-NH2JLL2D.js.map
+//# sourceMappingURL=ExecutionsListPage-NH2JLL2D.js.map

package/dist/ExecutionsListPage-NH2JLL2D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ExecutionsListPage-NH2JLL2D.js"}

package/dist/TemplateConfigurationModal-UJAGRE7X.js

@@ -0,0 +1,258 @@
+import { Label } from './chunk-G7B4SYFM.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Input, DialogFooter } from './chunk-NDJSUC4W.js';
+import { Badge, Button } from './chunk-Z54K22LP.js';
+import { useState, useMemo } from 'react';
+import { Sparkles, KeyRound, Download, CheckCircle2, ShoppingCart, AlertTriangle, Loader2 } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function TemplateConfigurationModal({
+  open,
+  onOpenChange,
+  template,
+  content,
+  nodeCheckResult,
+  onConfirm,
+  importing = false
+}) {
+  const [workflowName, setWorkflowName] = useState(
+    content?.defaultWorkflowName || template?.name || ""
+  );
+  const [inputValues, setInputValues] = useState({});
+  useMemo(() => {
+    if (template) {
+      setWorkflowName(content?.defaultWorkflowName || template.name || "");
+      const defaults = {};
+      if (content?.requiredInputs) {
+        for (const input of content.requiredInputs) {
+          if (input.defaultValue) {
+            defaults[input.name] = input.defaultValue;
+          }
+        }
+      }
+      setInputValues(defaults);
+    }
+  }, [template?.id]);
+  const requiredInputs = content?.requiredInputs || [];
+  const hasRequiredInputs = requiredInputs.length > 0;
+  nodeCheckResult && (nodeCheckResult.missing.length > 0 || nodeCheckResult.missingPaid.length > 0);
+  const hasRequiredCredentials = (content?.requiredCredentialTypes?.length ?? 0) > 0;
+  const hasPaidBlockers = (nodeCheckResult?.missingPaid.length ?? 0) > 0;
+  const isValid = useMemo(() => {
+    if (!workflowName.trim()) return false;
+    for (const input of requiredInputs) {
+      if (input.required && !inputValues[input.name]?.trim()) {
+        return false;
+      }
+    }
+    return true;
+  }, [workflowName, inputValues, requiredInputs]);
+  const handleInputChange = (name, value) => {
+    setInputValues((prev) => ({ ...prev, [name]: value }));
+  };
+  const handleConfirm = () => {
+    onConfirm({
+      name: workflowName.trim(),
+      templateInputs: inputValues
+    });
+  };
+  if (!template || !content) return null;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      size: "lg",
+      className: "!flex !flex-col !max-h-[85vh] overflow-hidden p-0 gap-0",
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { className: "px-6 pt-6 pb-4 border-b shrink-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: "size-5 text-primary" }),
+            /* @__PURE__ */ jsxs(DialogTitle, { className: "text-xl", children: [
+              'Import "',
+              template.name,
+              '"'
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: "Configure and import this workflow template into your workspace" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-6 py-5 space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "workflow-name", className: "text-sm font-medium", children: "Workflow Name" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "workflow-name",
+                value: workflowName,
+                onChange: (e) => setWorkflowName(e.target.value),
+                placeholder: "Enter workflow name"
+              }
+            )
+          ] }),
+          hasRequiredInputs && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("h4", { className: "text-sm font-semibold text-foreground flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(KeyRound, { className: "size-4" }),
+              "Required Configuration"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-3", children: requiredInputs.map((input) => /* @__PURE__ */ jsx(
+              TemplateInputField,
+              {
+                input,
+                value: inputValues[input.name] || "",
+                onChange: (value) => handleInputChange(input.name, value)
+              },
+              input.name
+            )) })
+          ] }),
+          nodeCheckResult && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("h4", { className: "text-sm font-semibold text-foreground flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Download, { className: "size-4" }),
+              "Node Dependencies"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              nodeCheckResult.installed.map((node) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex items-center gap-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-green-500 shrink-0" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      node.displayName || node.nodeType,
+                      " v",
+                      node.nodeVersion
+                    ] }),
+                    /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs ml-auto", children: "Installed" })
+                  ]
+                },
+                node.nodeType
+              )),
+              nodeCheckResult.missing.map((node) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex items-center gap-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsx(Download, { className: "size-4 text-blue-500 shrink-0" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      node.displayName || node.nodeType,
+                      " v",
+                      node.nodeVersion
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: "text-xs ml-auto border-blue-500/30 text-blue-500",
+                        children: "Will install"
+                      }
+                    )
+                  ]
+                },
+                node.nodeType
+              )),
+              nodeCheckResult.missingPaid.map((node) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex items-center gap-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4 text-amber-500 shrink-0" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      node.displayName || node.nodeType,
+                      " v",
+                      node.nodeVersion
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: "text-xs ml-auto border-amber-500/30 text-amber-500",
+                        children: "Purchase required"
+                      }
+                    )
+                  ]
+                },
+                node.nodeType
+              ))
+            ] })
+          ] }),
+          hasRequiredCredentials && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("h4", { className: "text-sm font-semibold text-foreground flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(KeyRound, { className: "size-4" }),
+              "Credentials Needed"
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "You'll need to configure these credentials after importing:" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: content.requiredCredentialTypes?.map((cred) => /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-xs", children: [
+              /* @__PURE__ */ jsx(KeyRound, { className: "size-3 mr-1" }),
+              cred
+            ] }, cred)) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted/50 p-3 text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+            "The workflow will be created as a ",
+            /* @__PURE__ */ jsx("strong", { children: "DRAFT" }),
+            ". You can review and edit it in the builder before activating."
+          ] }) }),
+          hasPaidBlockers && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-amber-500/10 border border-amber-500/30 p-3 text-sm text-amber-700 dark:text-amber-400 flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { className: "size-4 mt-0.5 shrink-0" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Purchase required" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", children: "Some nodes require purchase from the store before this template can be fully imported. The workflow will be created but those nodes may not function until installed." })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "px-6 py-4 border-t shrink-0", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: () => onOpenChange(false),
+              disabled: importing,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, disabled: !isValid || importing, children: importing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-4 mr-2 animate-spin" }),
+            "Importing..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: "size-4 mr-2" }),
+            "Import & Open in Builder"
+          ] }) })
+        ] })
+      ]
+    }
+  ) });
+}
+function TemplateInputField({
+  input,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs(Label, { htmlFor: `template-input-${input.name}`, className: "text-sm", children: [
+      input.label,
+      input.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
+    input.type === "select" && input.options ? /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: `template-input-${input.name}`,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+          input.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: `template-input-${input.name}`,
+        type: input.type === "secret" ? "password" : input.type === "number" ? "number" : "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder: input.placeholder
+      }
+    ),
+    input.helpText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: input.helpText })
+  ] });
+}
+
+export { TemplateConfigurationModal };
+//# sourceMappingURL=TemplateConfigurationModal-UJAGRE7X.js.map
+//# sourceMappingURL=TemplateConfigurationModal-UJAGRE7X.js.map

package/dist/TemplateConfigurationModal-UJAGRE7X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/builder/components/flow-builder/components/templates/TemplateConfigurationModal.tsx"],"names":[],"mappings":"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","file":"TemplateConfigurationModal-UJAGRE7X.js","sourcesContent":["import { useState, useMemo } from \"react\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n} from \"../../../../../ui/dialog\";\nimport { Input } from \"../../../../../ui/input\";\nimport { Button } from \"../../../../../ui/button\";\nimport { Badge } from \"../../../../../ui/badge\";\nimport { Label } from \"../../../../../ui/label\";\nimport type { StoreProduct } from \"../../../../../generated/global-types\";\nimport type {\n  WorkflowTemplateContent,\n  TemplateNodeCheckResult,\n  TemplateRequiredInput,\n} from \"../../../../../types/workflow-template-content\";\nimport {\n  Loader2,\n  CheckCircle2,\n  Download,\n  ShoppingCart,\n  KeyRound,\n  Sparkles,\n  AlertTriangle,\n} from \"lucide-react\";\n\nexport interface TemplateConfigurationModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  template: StoreProduct | null;\n  content: WorkflowTemplateContent | null;\n  nodeCheckResult: TemplateNodeCheckResult | null;\n  onConfirm: (config: {\n    name: string;\n    templateInputs: Record<string, string | number>;\n  }) => void;\n  importing?: boolean;\n}\n\n/**\n * Configuration modal shown before importing a template that has:\n * - Required user inputs (e.g., Slack webhook URL)\n * - Missing node dependencies\n * - Required credential types\n *\n * Allows the user to review what will happen and fill in required fields.\n */\nexport function TemplateConfigurationModal({\n  open,\n  onOpenChange,\n  template,\n  content,\n  nodeCheckResult,\n  onConfirm,\n  importing = false,\n}: TemplateConfigurationModalProps) {\n  const [workflowName, setWorkflowName] = useState(\n    content?.defaultWorkflowName || template?.name || \"\",\n  );\n  const [inputValues, setInputValues] = useState<Record<string, string>>({});\n\n  // Reset form when template changes\n  useMemo(() => {\n    if (template) {\n      setWorkflowName(content?.defaultWorkflowName || template.name || \"\");\n      // Pre-fill default values\n      const defaults: Record<string, string> = {};\n      if (content?.requiredInputs) {\n        for (const input of content.requiredInputs) {\n          if (input.defaultValue) {\n            defaults[input.name] = input.defaultValue;\n          }\n        }\n      }\n      setInputValues(defaults);\n    }\n  }, [template?.id]);\n\n  const requiredInputs = content?.requiredInputs || [];\n  const hasRequiredInputs = requiredInputs.length > 0;\n  const hasMissingNodes =\n    nodeCheckResult &&\n    (nodeCheckResult.missing.length > 0 ||\n      nodeCheckResult.missingPaid.length > 0);\n  const hasRequiredCredentials =\n    (content?.requiredCredentialTypes?.length ?? 0) > 0;\n  const hasPaidBlockers = (nodeCheckResult?.missingPaid.length ?? 0) > 0;\n\n  // Check if all required fields are filled\n  const isValid = useMemo(() => {\n    if (!workflowName.trim()) return false;\n    for (const input of requiredInputs) {\n      if (input.required && !inputValues[input.name]?.trim()) {\n        return false;\n      }\n    }\n    return true;\n  }, [workflowName, inputValues, requiredInputs]);\n\n  const handleInputChange = (name: string, value: string) => {\n    setInputValues((prev) => ({ ...prev, [name]: value }));\n  };\n\n  const handleConfirm = () => {\n    onConfirm({\n      name: workflowName.trim(),\n      templateInputs: inputValues,\n    });\n  };\n\n  if (!template || !content) return null;\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        size=\"lg\"\n        className=\"!flex !flex-col !max-h-[85vh] overflow-hidden p-0 gap-0\"\n      >\n        <DialogHeader className=\"px-6 pt-6 pb-4 border-b shrink-0\">\n          <div className=\"flex items-center gap-2\">\n            <Sparkles className=\"size-5 text-primary\" />\n            <DialogTitle className=\"text-xl\">\n              Import \"{template.name}\"\n            </DialogTitle>\n          </div>\n          <DialogDescription>\n            Configure and import this workflow template into your workspace\n          </DialogDescription>\n        </DialogHeader>\n\n        {/* Scrollable Content */}\n        <div className=\"flex-1 overflow-y-auto px-6 py-5 space-y-6\">\n          {/* Workflow Name */}\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"workflow-name\" className=\"text-sm font-medium\">\n              Workflow Name\n            </Label>\n            <Input\n              id=\"workflow-name\"\n              value={workflowName}\n              onChange={(e) => setWorkflowName(e.target.value)}\n              placeholder=\"Enter workflow name\"\n            />\n          </div>\n\n          {/* Required Configuration Inputs */}\n          {hasRequiredInputs && (\n            <div className=\"space-y-3\">\n              <h4 className=\"text-sm font-semibold text-foreground flex items-center gap-2\">\n                <KeyRound className=\"size-4\" />\n                Required Configuration\n              </h4>\n              <div className=\"space-y-3\">\n                {requiredInputs.map((input) => (\n                  <TemplateInputField\n                    key={input.name}\n                    input={input}\n                    value={inputValues[input.name] || \"\"}\n                    onChange={(value) => handleInputChange(input.name, value)}\n                  />\n                ))}\n              </div>\n            </div>\n          )}\n\n          {/* Node Dependencies */}\n          {nodeCheckResult && (\n            <div className=\"space-y-3\">\n              <h4 className=\"text-sm font-semibold text-foreground flex items-center gap-2\">\n                <Download className=\"size-4\" />\n                Node Dependencies\n              </h4>\n              <div className=\"space-y-2\">\n                {/* Installed nodes */}\n                {nodeCheckResult.installed.map((node) => (\n                  <div\n                    key={node.nodeType}\n                    className=\"flex items-center gap-2 text-sm\"\n                  >\n                    <CheckCircle2 className=\"size-4 text-green-500 shrink-0\" />\n                    <span>\n                      {node.displayName || node.nodeType} v{node.nodeVersion}\n                    </span>\n                    <Badge variant=\"secondary\" className=\"text-xs ml-auto\">\n                      Installed\n                    </Badge>\n                  </div>\n                ))}\n\n                {/* Missing free nodes (will be installed) */}\n                {nodeCheckResult.missing.map((node) => (\n                  <div\n                    key={node.nodeType}\n                    className=\"flex items-center gap-2 text-sm\"\n                  >\n                    <Download className=\"size-4 text-blue-500 shrink-0\" />\n                    <span>\n                      {node.displayName || node.nodeType} v{node.nodeVersion}\n                    </span>\n                    <Badge\n                      variant=\"outline\"\n                      className=\"text-xs ml-auto border-blue-500/30 text-blue-500\"\n                    >\n                      Will install\n                    </Badge>\n                  </div>\n                ))}\n\n                {/* Missing paid nodes (need purchase) */}\n                {nodeCheckResult.missingPaid.map((node) => (\n                  <div\n                    key={node.nodeType}\n                    className=\"flex items-center gap-2 text-sm\"\n                  >\n                    <ShoppingCart className=\"size-4 text-amber-500 shrink-0\" />\n                    <span>\n                      {node.displayName || node.nodeType} v{node.nodeVersion}\n                    </span>\n                    <Badge\n                      variant=\"outline\"\n                      className=\"text-xs ml-auto border-amber-500/30 text-amber-500\"\n                    >\n                      Purchase required\n                    </Badge>\n                  </div>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {/* Required Credentials */}\n          {hasRequiredCredentials && (\n            <div className=\"space-y-3\">\n              <h4 className=\"text-sm font-semibold text-foreground flex items-center gap-2\">\n                <KeyRound className=\"size-4\" />\n                Credentials Needed\n              </h4>\n              <p className=\"text-xs text-muted-foreground\">\n                You'll need to configure these credentials after importing:\n              </p>\n              <div className=\"flex flex-wrap gap-2\">\n                {content.requiredCredentialTypes?.map((cred) => (\n                  <Badge key={cred} variant=\"outline\" className=\"text-xs\">\n                    <KeyRound className=\"size-3 mr-1\" />\n                    {cred}\n                  </Badge>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {/* Info Banner */}\n          <div className=\"rounded-lg bg-muted/50 p-3 text-sm text-muted-foreground\">\n            <p>\n              The workflow will be created as a <strong>DRAFT</strong>. You can\n              review and edit it in the builder before activating.\n            </p>\n          </div>\n\n          {/* Paid Node Blocker Warning */}\n          {hasPaidBlockers && (\n            <div className=\"rounded-lg bg-amber-500/10 border border-amber-500/30 p-3 text-sm text-amber-700 dark:text-amber-400 flex items-start gap-2\">\n              <AlertTriangle className=\"size-4 mt-0.5 shrink-0\" />\n              <div>\n                <p className=\"font-medium\">Purchase required</p>\n                <p className=\"mt-1 text-xs\">\n                  Some nodes require purchase from the store before this\n                  template can be fully imported. The workflow will be created\n                  but those nodes may not function until installed.\n                </p>\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <DialogFooter className=\"px-6 py-4 border-t shrink-0\">\n          <Button\n            variant=\"outline\"\n            onClick={() => onOpenChange(false)}\n            disabled={importing}\n          >\n            Cancel\n          </Button>\n          <Button onClick={handleConfirm} disabled={!isValid || importing}>\n            {importing ? (\n              <>\n                <Loader2 className=\"size-4 mr-2 animate-spin\" />\n                Importing...\n              </>\n            ) : (\n              <>\n                <Sparkles className=\"size-4 mr-2\" />\n                Import & Open in Builder\n              </>\n            )}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n// ============================================================================\n// Sub-component: Template Input Field\n// ============================================================================\n\nfunction TemplateInputField({\n  input,\n  value,\n  onChange,\n}: {\n  input: TemplateRequiredInput;\n  value: string;\n  onChange: (value: string) => void;\n}) {\n  return (\n    <div className=\"space-y-1.5\">\n      <Label htmlFor={`template-input-${input.name}`} className=\"text-sm\">\n        {input.label}\n        {input.required && <span className=\"text-destructive ml-1\">*</span>}\n      </Label>\n      {input.type === \"select\" && input.options ? (\n        <select\n          id={`template-input-${input.name}`}\n          value={value}\n          onChange={(e) => onChange(e.target.value)}\n          className=\"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n        >\n          <option value=\"\">Select...</option>\n          {input.options.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </select>\n      ) : (\n        <Input\n          id={`template-input-${input.name}`}\n          type={\n            input.type === \"secret\"\n              ? \"password\"\n              : input.type === \"number\"\n                ? \"number\"\n                : \"text\"\n          }\n          value={value}\n          onChange={(e) => onChange(e.target.value)}\n          placeholder={input.placeholder}\n        />\n      )}\n      {input.helpText && (\n        <p className=\"text-xs text-muted-foreground\">{input.helpText}</p>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/TemplateDetailPanel-UXH6KPCH.js

@@ -0,0 +1,172 @@
+import { Button, Badge } from './chunk-Z54K22LP.js';
+import { X, Sparkles, Star, Download, Eye, User, Calendar, Tag, ExternalLink } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function formatNumber(count) {
+  if (count >= 1e6) {
+    return `${(count / 1e6).toFixed(1)}M`;
+  }
+  if (count >= 1e3) {
+    return `${(count / 1e3).toFixed(1)}k`;
+  }
+  return count.toString();
+}
+function formatDate(dateStr) {
+  if (!dateStr) return "Unknown";
+  try {
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+  } catch {
+    return "Unknown";
+  }
+}
+function TemplateDetailPanel({
+  template,
+  onClose,
+  onUseTemplate
+}) {
+  const previewImage = template.screenshots?.[0] || template.icon;
+  template.videoUrls && template.videoUrls.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full md:w-1/2 lg:w-2/5 border-l bg-background overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-between px-4 py-3 bg-background border-b", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold truncate pr-4", children: "Template Details" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: onClose,
+          className: "size-8 shrink-0",
+          children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative aspect-video w-full rounded-lg overflow-hidden bg-gradient-to-br from-primary/5 to-primary/10", children: [
+        previewImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: previewImage,
+            alt: template.name,
+            className: "w-full h-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-16 text-primary/30" }) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2", children: template.pricingModel === "FREE" ? /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "secondary",
+            className: "bg-green-500 text-white border-0",
+            children: "Free"
+          }
+        ) : /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "default",
+            className: "bg-blue-500 text-white border-0",
+            children: [
+              "$",
+              template.price?.toString() || "0"
+            ]
+          }
+        ) }),
+        template.featured && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "default",
+            className: "bg-gradient-to-r from-yellow-500 to-orange-500 text-white border-0 shadow-lg",
+            children: [
+              /* @__PURE__ */ jsx(Star, { className: "size-3 mr-1 fill-white" }),
+              "Featured"
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: template.name }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1.5 leading-relaxed", children: template.longDescription || template.description || "No description available" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: [
+        template.rating && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Star, { className: "size-4 fill-yellow-400 text-yellow-400" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: template.rating.toFixed(1) }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "(",
+            template.reviewCount || 0,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Download, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { children: formatNumber(template.downloads || 0) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Eye, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { children: formatNumber(template.viewCount || 0) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(User, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: template.authorName || template.publisher?.name || "Unknown" }),
+        template.publisher?.isVerified && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs px-1.5 py-0", children: "Verified" })
+      ] }),
+      template.publishedAt && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "size-4" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Published ",
+          formatDate(template.publishedAt)
+        ] })
+      ] }),
+      (template.category || template.tags && template.tags.length > 0) && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Tag, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { children: "Category & Tags" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+          template.category && /* @__PURE__ */ jsx(Badge, { variant: "default", className: "text-xs", children: template.category }),
+          template.tags?.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: tag }, tag))
+        ] })
+      ] }),
+      template.compatibleProducts && template.compatibleProducts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: "Compatible with: " }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: template.compatibleProducts.join(", ") })
+      ] }),
+      template.screenshots && template.screenshots.length > 1 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Screenshots" }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: template.screenshots.slice(1, 5).map((screenshot, i) => /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: screenshot,
+            alt: `${template.name} screenshot ${i + 2}`,
+            className: "w-full h-auto rounded-md border"
+          },
+          i
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "pt-2 space-y-2", children: [
+        /* @__PURE__ */ jsxs(Button, { className: "w-full", onClick: () => onUseTemplate(template), children: [
+          /* @__PURE__ */ jsx(Sparkles, { className: "size-4 mr-2" }),
+          "Use This Template"
+        ] }),
+        template.publisher?.websiteUrl && /* @__PURE__ */ jsx(Button, { variant: "outline", className: "w-full", asChild: true, children: /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: template.publisher.websiteUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [
+              /* @__PURE__ */ jsx(ExternalLink, { className: "size-4 mr-2" }),
+              "View Publisher"
+            ]
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+
+export { TemplateDetailPanel };
+//# sourceMappingURL=TemplateDetailPanel-UXH6KPCH.js.map
+//# sourceMappingURL=TemplateDetailPanel-UXH6KPCH.js.map