@flowdrop/flowdrop 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/themes/drafter.js

@@ -0,0 +1,15 @@
+import { drafterSkin } from '../skins/drafter.js';
+export const drafterTheme = {
+    name: 'drafter',
+    skin: drafterSkin,
+    config: {
+        sidebar: {
+            defaultOpen: true,
+            categoriesDefaultOpen: false
+        },
+        // Blueprint square line grid (any theme can opt into a grid variant here)
+        canvas: {
+            grid: 'lines'
+        }
+    }
+};

package/dist/themes/index.d.ts

@@ -1,6 +1,7 @@
 import type { FlowDropTheme, FlowDropThemeName } from '../types/theme.js';
 import { defaultTheme } from './default.js';
 import { minimalTheme } from './minimal.js';
+import { drafterTheme } from './drafter.js';
 /**
  * Resolve a theme prop to a complete FlowDropTheme object.
  *
@@ -10,4 +11,4 @@ import { minimalTheme } from './minimal.js';
  *   → minimal theme + { skin.tokens.primary: '#e11d48' }
  */
 export declare function resolveTheme(theme: FlowDropTheme | FlowDropThemeName | undefined): FlowDropTheme;
-export { defaultTheme, minimalTheme };
+export { defaultTheme, minimalTheme, drafterTheme };

package/dist/themes/index.js

@@ -1,8 +1,10 @@
 import { defaultTheme } from './default.js';
 import { minimalTheme } from './minimal.js';
+import { drafterTheme } from './drafter.js';
 const builtinThemes = {
     default: defaultTheme,
-    minimal: minimalTheme
+    minimal: minimalTheme,
+    drafter: drafterTheme
 };
 /**
  * Resolve a theme prop to a complete FlowDropTheme object.
@@ -35,10 +37,14 @@ export function resolveTheme(theme) {
                 sidebar: {
                     ...base.config?.sidebar,
                     ...theme.config?.sidebar
+                },
+                canvas: {
+                    ...base.config?.canvas,
+                    ...theme.config?.canvas
                 }
             }
         };
     }
     return theme;
 }
-export { defaultTheme, minimalTheme };
+export { defaultTheme, minimalTheme, drafterTheme };

package/dist/types/events.d.ts

@@ -203,6 +203,24 @@ export interface FlowDropFeatures {
      * @default true
      */
     enableNodeSwap?: boolean;
+    /**
+     * Register the built-in heavy form editors (markdown / code / template).
+     *
+     * The full editor is batteries-included: node config fields with
+     * `format: 'markdown'` / `'code'` / `'template'` render real CodeMirror
+     * editors out of the box. Their chunks are code-split and load lazily, so
+     * an editor that never opens such a field never downloads CodeMirror/marked.
+     *
+     * Set to `false` only if you want to strip those editors (e.g. to shave the
+     * lazy chunks) and either live with the textarea fallback or register your
+     * own field components via `instance.fields.register(...)`.
+     *
+     * This does not affect the standalone `@flowdrop/flowdrop/form` primitive,
+     * which stays opt-in regardless.
+     *
+     * @default true
+     */
+    builtinEditors?: boolean;
 }
 /**
  * Default feature values

package/dist/types/events.js

@@ -15,7 +15,8 @@ export const DEFAULT_FEATURES = {
     autoSaveDraft: true,
     autoSaveDraftInterval: 30000,
     showToasts: true,
-    enableNodeSwap: true
+    enableNodeSwap: true,
+    builtinEditors: true
 };
 /**
  * Merge user-provided features with defaults

package/dist/types/settings.d.ts

@@ -56,7 +56,7 @@ export interface UISettings {
     /** Enable compact mode for denser UI */
     compactMode: boolean;
     /** Active theme name — overridden by the theme prop when explicitly provided */
-    theme: 'default' | 'minimal';
+    theme: 'default' | 'minimal' | 'drafter';
     /** Whether the command console panel is open */
     consoleOpen: boolean;
     /** Height of the command console panel in pixels */

package/dist/types/settings.js

@@ -37,7 +37,7 @@ export const SETTINGS_CATEGORY_ICONS = {
  * Default theme settings
  */
 export const DEFAULT_THEME_SETTINGS = {
-    preference: 'dark'
+    preference: 'light'
 };
 /**
  * Default editor settings

package/dist/types/skin.d.ts

@@ -28,4 +28,4 @@ export interface FlowDropSkin {
     /** CSS token overrides injected as [data-theme='dark'] rules — active in dark mode only */
     darkTokens?: FlowDropSkinTokens;
 }
-export type FlowDropSkinName = 'default' | 'slate';
+export type FlowDropSkinName = 'default' | 'slate' | 'drafter';

package/dist/types/theme.d.ts

@@ -1,4 +1,14 @@
 import type { FlowDropSkin } from './skin.js';
+/**
+ * Canvas background grid pattern. Mirrors xyflow's BackgroundVariant values:
+ *   'dots'  — a square grid of dots (the default)
+ *   'lines' — a square grid of solid lines (a "blueprint" / drafter look)
+ *   'cross' — small plus-marks at each grid intersection
+ *
+ * The grid's color is driven separately by the `--fd-grid-pattern-color` token,
+ * so any skin can recolor whichever variant a theme chooses.
+ */
+export type FlowDropGridVariant = 'dots' | 'lines' | 'cross';
 /**
  * Behavioral configuration bundled with a theme.
  * These are initial-state flags, not CSS — they control runtime defaults.
@@ -10,11 +20,15 @@ export interface FlowDropThemeConfig {
         /** Whether category <details> accordion sections start open in card mode. Defaults to false. */
         categoriesDefaultOpen?: boolean;
     };
+    canvas?: {
+        /** Background grid pattern applied when this theme is selected. Defaults to 'dots'. */
+        grid?: FlowDropGridVariant;
+    };
 }
 /**
  * A FlowDrop theme bundles a visual skin (CSS tokens) with UI config (behavioral defaults).
  *
- * Built-in themes: 'default' | 'minimal'
+ * Built-in themes: 'default' | 'minimal' | 'drafter'
  *
  * @example
  * // Use a built-in theme by name
@@ -32,4 +46,4 @@ export interface FlowDropTheme {
     /** Behavioral configuration defaults */
     config?: FlowDropThemeConfig;
 }
-export type FlowDropThemeName = 'default' | 'minimal';
+export type FlowDropThemeName = 'default' | 'minimal' | 'drafter';

package/dist/utils/connections.js

@@ -253,8 +253,17 @@ export function getConnectionSuggestions(checker, nodeId, nodes, nodeTypes) {
  * @returns True if any cycle exists in the workflow
  */
 export function hasCycles(nodes, edges) {
-    // Build adjacency map once (O(E)) so the DFS inner loop is O(1) per lookup
-    // instead of scanning all edges on every recursive call (which was O(V*E)).
+    return detectCycles(nodes, edges);
+}
+/**
+ * Detect whether a directed graph contains a cycle, using DFS over a pre-built
+ * adjacency map (O(E) build, O(1) per neighbour lookup — avoids the O(V*E) of
+ * re-scanning every edge on each recursive call).
+ *
+ * Shared by `hasCycles` (all edges) and `hasInvalidCycles` (loopback edges
+ * pre-filtered out by the caller).
+ */
+function detectCycles(nodes, edges) {
     const adjacencyMap = new Map();
     for (const node of nodes) {
         adjacencyMap.set(node.id, []);
@@ -274,7 +283,6 @@ export function hasCycles(nodes, edges) {
             return false;
         visited.add(nodeId);
         recursionStack.add(nodeId);
-        // Use pre-built adjacency map instead of filtering all edges each call
         const neighbors = adjacencyMap.get(nodeId) || [];
         for (const target of neighbors) {
             if (hasCycleUtil(target))
@@ -283,7 +291,6 @@ export function hasCycles(nodes, edges) {
         recursionStack.delete(nodeId);
         return false;
     }
-    // Check each node
     for (const node of nodes) {
         if (!visited.has(node.id)) {
             if (hasCycleUtil(node.id))
@@ -309,53 +316,10 @@ export function hasCycles(nodes, edges) {
  * ```
  */
 export function hasInvalidCycles(nodes, edges) {
-    // Filter out loopback edges - these create valid cycles for loop iteration
+    // Filter out loopback edges - these create valid cycles for loop iteration,
+    // then reuse the shared detector over the remaining edges.
     const nonLoopbackEdges = edges.filter((edge) => !isLoopbackEdge(edge));
-    // Build adjacency map from non-loopback edges once (O(E)) so the DFS inner
-    // loop is O(1) per lookup instead of scanning all edges on every recursive
-    // call (which was O(V*E)).
-    const adjacencyMap = new Map();
-    for (const node of nodes) {
-        adjacencyMap.set(node.id, []);
-    }
-    for (const edge of nonLoopbackEdges) {
-        const neighbors = adjacencyMap.get(edge.source);
-        if (neighbors) {
-            neighbors.push(edge.target);
-        }
-    }
-    // Check for cycles using only non-loopback edges
-    const visited = new Set();
-    const recursionStack = new Set();
-    /**
-     * DFS utility to detect cycles in the graph
-     * @param nodeId - Current node being visited
-     * @returns True if a cycle is found from this node
-     */
-    function hasCycleUtil(nodeId) {
-        if (recursionStack.has(nodeId))
-            return true;
-        if (visited.has(nodeId))
-            return false;
-        visited.add(nodeId);
-        recursionStack.add(nodeId);
-        // Use pre-built adjacency map instead of filtering all edges each call
-        const neighbors = adjacencyMap.get(nodeId) || [];
-        for (const target of neighbors) {
-            if (hasCycleUtil(target))
-                return true;
-        }
-        recursionStack.delete(nodeId);
-        return false;
-    }
-    // Check each node for cycles
-    for (const node of nodes) {
-        if (!visited.has(node.id)) {
-            if (hasCycleUtil(node.id))
-                return true;
-        }
-    }
-    return false;
+    return detectCycles(nodes, nonLoopbackEdges);
 }
 /**
  * Get the execution order for a workflow (topological sort)

package/package.json

@@ -3,7 +3,7 @@
   "description": "A drop-in visual workflow editor for any web application. You own the backend. You own the data. You own the orchestration.",
   "license": "MIT",
   "private": false,
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"