@d34dman/flowdrop 0.0.25 → 0.0.27

package/dist/types/index.d.ts

@@ -147,6 +147,190 @@ export type BuiltinNodeType = 'note' | 'simple' | 'square' | 'tool' | 'gateway'
  * ```
  */
 export type NodeType = BuiltinNodeType | (string & Record<never, never>);
+/**
+ * HTTP method types for dynamic schema endpoints
+ */
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH';
+/**
+ * Dynamic schema endpoint configuration
+ * Used when the config schema needs to be fetched at runtime from a REST endpoint
+ *
+ * @example
+ * ```typescript
+ * const schemaEndpoint: DynamicSchemaEndpoint = {
+ *   url: "/api/nodes/{nodeTypeId}/schema",
+ *   method: "GET",
+ *   headers: { "X-Custom-Header": "value" },
+ *   parameterMapping: {
+ *     nodeTypeId: "metadata.id",
+ *     instanceId: "id"
+ *   }
+ * };
+ * ```
+ */
+export interface DynamicSchemaEndpoint {
+    /**
+     * The URL to fetch the schema from.
+     * Supports template variables in curly braces (e.g., "/api/nodes/{nodeTypeId}/schema")
+     * Variables are resolved from node metadata, config, or instance data.
+     */
+    url: string;
+    /**
+     * HTTP method to use for fetching the schema.
+     * @default "GET"
+     */
+    method?: HttpMethod;
+    /**
+     * Custom headers to include in the request
+     */
+    headers?: Record<string, string>;
+    /**
+     * Maps template variables to their source paths.
+     * Keys are variable names used in the URL, values are dot-notation paths
+     * to resolve from the node context (e.g., "metadata.id", "config.apiKey", "id")
+     */
+    parameterMapping?: Record<string, string>;
+    /**
+     * Request body for POST/PUT/PATCH methods.
+     * Can include template variables like the URL.
+     */
+    body?: Record<string, unknown>;
+    /**
+     * Timeout in milliseconds for the schema fetch request
+     * @default 10000
+     */
+    timeout?: number;
+    /**
+     * Whether to cache the fetched schema per node instance
+     * @default true
+     */
+    cacheSchema?: boolean;
+}
+/**
+ * External edit link configuration
+ * Used when the node configuration should be handled by an external 3rd party form
+ *
+ * @example
+ * ```typescript
+ * const editLink: ExternalEditLink = {
+ *   url: "https://admin.example.com/nodes/{nodeTypeId}/edit/{instanceId}",
+ *   label: "Configure in Admin Panel",
+ *   parameterMapping: {
+ *     nodeTypeId: "metadata.id",
+ *     instanceId: "id"
+ *   },
+ *   openInNewTab: true
+ * };
+ * ```
+ */
+export interface ExternalEditLink {
+    /**
+     * The URL to the external edit form.
+     * Supports template variables in curly braces (e.g., "/admin/nodes/{nodeTypeId}/edit")
+     * Variables are resolved from node metadata, config, or instance data.
+     */
+    url: string;
+    /**
+     * Display label for the edit link button
+     * @default "Configure Externally"
+     */
+    label?: string;
+    /**
+     * Icon to display alongside the label (Iconify icon name)
+     * @default "heroicons:arrow-top-right-on-square"
+     */
+    icon?: string;
+    /**
+     * Maps template variables to their source paths.
+     * Keys are variable names used in the URL, values are dot-notation paths
+     * to resolve from the node context (e.g., "metadata.id", "config.apiKey", "id")
+     */
+    parameterMapping?: Record<string, string>;
+    /**
+     * Whether to open the link in a new tab
+     * @default true
+     */
+    openInNewTab?: boolean;
+    /**
+     * Optional tooltip/description for the link
+     */
+    description?: string;
+    /**
+     * Callback URL parameter name for FlowDrop to receive updates
+     * If set, the external form should redirect back with config updates
+     */
+    callbackUrlParam?: string;
+}
+/**
+ * Admin/Edit configuration for nodes with dynamic or external configuration
+ * Used when the config schema cannot be determined at workflow load time
+ * or when configuration is handled by a 3rd party system.
+ *
+ * @example
+ * ```typescript
+ * // Option 1: External edit link only (opens external form in new tab)
+ * const configEdit: ConfigEditOptions = {
+ *   externalEditLink: {
+ *     url: "https://admin.example.com/configure/{nodeId}",
+ *     label: "Open Configuration Portal"
+ *   }
+ * };
+ *
+ * // Option 2: Dynamic schema (fetches schema from REST endpoint)
+ * const configEdit: ConfigEditOptions = {
+ *   dynamicSchema: {
+ *     url: "/api/nodes/{nodeTypeId}/schema",
+ *     method: "GET"
+ *   }
+ * };
+ *
+ * // Option 3: Both (user can choose)
+ * const configEdit: ConfigEditOptions = {
+ *   externalEditLink: {
+ *     url: "https://admin.example.com/configure/{nodeId}",
+ *     label: "Advanced Configuration"
+ *   },
+ *   dynamicSchema: {
+ *     url: "/api/nodes/{nodeTypeId}/schema"
+ *   },
+ *   preferDynamicSchema: true
+ * };
+ * ```
+ */
+export interface ConfigEditOptions {
+    /**
+     * External link configuration for 3rd party form
+     * When configured, shows a link/button to open external configuration
+     */
+    externalEditLink?: ExternalEditLink;
+    /**
+     * Dynamic schema endpoint configuration
+     * When configured, fetches the config schema from the specified endpoint
+     */
+    dynamicSchema?: DynamicSchemaEndpoint;
+    /**
+     * When both externalEditLink and dynamicSchema are configured,
+     * determines which to use by default
+     * @default false (prefer external link)
+     */
+    preferDynamicSchema?: boolean;
+    /**
+     * Show a "Refresh Schema" button when using dynamic schema
+     * Allows users to manually refresh the schema
+     * @default true
+     */
+    showRefreshButton?: boolean;
+    /**
+     * Message to display when schema is being loaded
+     * @default "Loading configuration options..."
+     */
+    loadingMessage?: string;
+    /**
+     * Message to display when schema fetch fails
+     * @default "Failed to load configuration. Use external editor instead."
+     */
+    errorMessage?: string;
+}
 /**
  * UI-related extension settings for nodes
  * Used to control visual behavior in the workflow editor
@@ -183,6 +367,11 @@ export interface NodeExtensions {
      * Used to control visual behavior in the workflow editor
      */
     ui?: NodeUIExtensions;
+    /**
+     * Per-instance admin/edit configuration override
+     * Allows overriding the node type's configEdit settings for specific instances
+     */
+    configEdit?: ConfigEditOptions;
     /**
      * Namespaced extension data from 3rd party integrations
      * Use your package/organization name as the key (e.g., "myapp", "acme:analyzer")
@@ -214,6 +403,30 @@ export interface NodeMetadata {
     /** Default configuration values for this node type */
     config?: Record<string, unknown>;
     tags?: string[];
+    /**
+     * Admin/Edit configuration for nodes with dynamic or external configuration.
+     * Used when the config schema cannot be determined at workflow load time
+     * or when configuration is handled by a 3rd party system.
+     *
+     * Supports two options:
+     * 1. External edit link - Opens a 3rd party form in a new tab
+     * 2. Dynamic schema - Fetches the config schema from a REST endpoint
+     *
+     * @example
+     * ```typescript
+     * configEdit: {
+     *   externalEditLink: {
+     *     url: "https://admin.example.com/nodes/{nodeTypeId}/configure",
+     *     label: "Configure in Admin Portal"
+     *   },
+     *   dynamicSchema: {
+     *     url: "/api/nodes/{nodeTypeId}/schema",
+     *     method: "GET"
+     *   }
+     * }
+     * ```
+     */
+    configEdit?: ConfigEditOptions;
     /**
      * Custom extension properties for 3rd party integrations
      * Allows storing additional configuration and UI state data at the node type level

package/package.json

@@ -1,156 +1,164 @@
 {
-  "name": "@d34dman/flowdrop",
-  "license": "MIT",
-  "private": false,
-  "version": "0.0.25",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run prepack",
-    "build:drupal": "vite build --config vite.config.drupal.ts",
-    "build:production": "vite build --config vite.config.production.ts",
-    "watch:build:drupal": "npm-watch build:drupal",
-    "watch:build:production": "npm-watch build:production",
-    "watch:build": "npm-watch build",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
-    "prepack": "svelte-kit sync && svelte-package && publint",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "eslint . && prettier --check .",
-    "test:unit": "vitest",
-    "test": "npm run test:unit -- --run && npm run test:e2e",
-    "test:e2e": "playwright test",
-    "format": "prettier --write .",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "watch": {
-    "build": {
-      "ignore": "build",
-      "patterns": [
-        "src"
-      ],
-      "extensions": "js,ts,svelte,html,css,svg",
-      "quiet": true,
-      "legacyWatch": true,
-      "delay": 2500,
-      "runOnChangeOnly": false
-    },
-    "build:drupal": {
-      "ignore": "build",
-      "patterns": [
-        "src"
-      ],
-      "extensions": "js,ts,svelte,html,css,svg",
-      "quiet": true,
-      "legacyWatch": true,
-      "delay": 2500,
-      "runOnChangeOnly": false
-    },
-    "build:production": {
-      "ignore": "build",
-      "patterns": [
-        "src"
-      ],
-      "extensions": "js,ts,svelte,html,css,svg",
-      "quiet": true,
-      "legacyWatch": true,
-      "delay": 2500,
-      "runOnChangeOnly": false
-    }
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "sideEffects": [
-    "**/*.css",
-    "./dist/styles/base.css"
-  ],
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./styles/base.css": "./dist/styles/base.css"
-  },
-  "peerDependencies": {
-    "@sveltejs/kit": "^2.0.0",
-    "svelte": "^5.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/d34dman/flowdrop.git"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
-    "@eslint/compat": "^1.2.5",
-    "@eslint/js": "^9.18.0",
-    "@iconify/svelte": "^5.0.0",
-    "@playwright/test": "^1.49.1",
-    "@storybook/addon-docs": "^9.0.15",
-    "@storybook/addon-svelte-csf": "^5.0.4",
-    "@storybook/addon-vitest": "^9.0.15",
-    "@storybook/sveltekit": "^9.0.15",
-    "@sveltejs/adapter-auto": "^6.0.0",
-    "@sveltejs/adapter-node": "^5.4.0",
-    "@sveltejs/kit": "^2.49.2",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "@types/marked": "^6.0.0",
-    "@types/node": "^20",
-    "@types/uuid": "^10.0.0",
-    "@vitest/browser": "^3.2.3",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-storybook": "^9.0.15",
-    "eslint-plugin-svelte": "^3.0.0",
-    "globals": "^16.0.0",
-    "msw": "^2.12.7",
-    "npm-watch": "^0.13.0",
-    "playwright": "^1.53.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.2",
-    "storybook": "^9.0.15",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "terser": "^5.43.1",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^6.2.6",
-    "vite-plugin-devtools-json": "^0.2.1",
-    "vitest": "^3.2.3",
-    "vitest-browser-svelte": "^0.1.0"
-  },
-  "overrides": {
-    "@sveltejs/kit": {
-      "cookie": "0.7.2"
-    }
-  },
-  "keywords": [
-    "svelte"
-  ],
-  "dependencies": {
-    "@codemirror/autocomplete": "^6.20.0",
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lint": "^6.9.2",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@xyflow/svelte": "~1.2",
-    "codemirror": "^6.0.2",
-    "easymde": "^2.20.0",
-    "marked": "^16.1.1",
-    "svelte-5-french-toast": "^2.0.6",
-    "uuid": "^11.1.0"
-  },
-  "msw": {
-    "workerDirectory": [
-      "static"
-    ]
-  }
-}
+	"name": "@d34dman/flowdrop",
+	"license": "MIT",
+	"private": false,
+	"version": "0.0.27",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"build:drupal": "vite build --config vite.config.drupal.ts",
+		"build:production": "vite build --config vite.config.production.ts",
+		"watch:build:drupal": "npm-watch build:drupal",
+		"watch:build:production": "npm-watch build:production",
+		"watch:build": "npm-watch build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "eslint . && prettier --check .",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:ui": "vitest --ui",
+		"test:coverage": "vitest run --coverage",
+		"test:e2e": "playwright test",
+		"test:e2e:ui": "playwright test --ui",
+		"test:e2e:debug": "playwright test --debug",
+		"test:all": "npm run test && npm run test:e2e",
+		"format": "prettier --write .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"watch": {
+		"build": {
+			"ignore": "build",
+			"patterns": [
+				"src"
+			],
+			"extensions": "js,ts,svelte,html,css,svg",
+			"quiet": true,
+			"legacyWatch": true,
+			"delay": 2500,
+			"runOnChangeOnly": false
+		},
+		"build:drupal": {
+			"ignore": "build",
+			"patterns": [
+				"src"
+			],
+			"extensions": "js,ts,svelte,html,css,svg",
+			"quiet": true,
+			"legacyWatch": true,
+			"delay": 2500,
+			"runOnChangeOnly": false
+		},
+		"build:production": {
+			"ignore": "build",
+			"patterns": [
+				"src"
+			],
+			"extensions": "js,ts,svelte,html,css,svg",
+			"quiet": true,
+			"legacyWatch": true,
+			"delay": 2500,
+			"runOnChangeOnly": false
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css",
+		"./dist/styles/base.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./styles/base.css": "./dist/styles/base.css"
+	},
+	"peerDependencies": {
+		"@sveltejs/kit": "^2.0.0",
+		"svelte": "^5.0.0"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/d34dman/flowdrop.git"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^4.0.1",
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@iconify/svelte": "^5.0.0",
+		"@playwright/test": "^1.49.1",
+		"@storybook/addon-docs": "^9.0.15",
+		"@storybook/addon-svelte-csf": "^5.0.4",
+		"@storybook/addon-vitest": "^9.0.15",
+		"@storybook/sveltekit": "^9.0.15",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/adapter-node": "^5.4.0",
+		"@sveltejs/kit": "^2.49.2",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@types/marked": "^6.0.0",
+		"@types/node": "^20",
+		"@types/uuid": "^10.0.0",
+		"@vitest/browser": "^3.2.3",
+		"@vitest/coverage-v8": "^3.2.4",
+		"@vitest/ui": "^3.2.4",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-storybook": "^9.0.15",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"happy-dom": "^20.0.11",
+		"msw": "^2.12.7",
+		"npm-watch": "^0.13.0",
+		"playwright": "^1.53.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"publint": "^0.3.2",
+		"storybook": "^9.0.15",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"terser": "^5.43.1",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.2.6",
+		"vite-plugin-devtools-json": "^0.2.1",
+		"vitest": "^3.2.3",
+		"vitest-browser-svelte": "^0.1.0"
+	},
+	"overrides": {
+		"@sveltejs/kit": {
+			"cookie": "0.7.2"
+		}
+	},
+	"keywords": [
+		"svelte"
+	],
+	"dependencies": {
+		"@codemirror/autocomplete": "^6.20.0",
+		"@codemirror/lang-json": "^6.0.2",
+		"@codemirror/lint": "^6.9.2",
+		"@codemirror/theme-one-dark": "^6.1.3",
+		"@xyflow/svelte": "~1.2",
+		"codemirror": "^6.0.2",
+		"easymde": "^2.20.0",
+		"marked": "^16.1.1",
+		"svelte-5-french-toast": "^2.0.6",
+		"uuid": "^11.1.0"
+	},
+	"msw": {
+		"workerDirectory": [
+			"static"
+		]
+	}
+}