@gntik-ai/templates 0.9.0 → 0.10.0

package/src/workflow-builder/Page.tsx

@@ -1,17 +1,21 @@
 import {
   CodePanel,
+  builderNodes,
+  builderEdges,
+  cleanFlowGraph,
   type CodePanelProps,
   FlowBuilder,
   type ConsoleEntry,
   type FlowBuilderProps,
   type FlowEdge,
+  type FlowGraph,
   type FlowNode,
   type FlowNodeKind,
   type PaletteItem,
 } from '@gntik-ai/blocks';
 import { Save, Upload } from '@gntik-ai/icons';
-import { Breadcrumbs, Button, CanvasLayout, StatusTag, type BreadcrumbItem } from '@gntik-ai/ui';
-import { useState } from 'react';
+import { Breadcrumbs, Button, CanvasLayout, StatusTag, useI18n, type BreadcrumbItem } from '@gntik-ai/ui';
+import { useRef, useState } from 'react';
 import { flowBuilderBreadcrumbs, flowBuilderContent } from './data';
 
 export interface FlowBuilderPageProps<Kind extends string = FlowNodeKind> extends Pick<
@@ -25,6 +29,8 @@ export interface FlowBuilderPageProps<Kind extends string = FlowNodeKind> extend
   | 'mode'
   | 'nodeStatus'
   | 'onNodeSelect'
+  | 'graph'
+  | 'onGraphChange'
 > {
   /** Optional companion code panel; run mode forces readOnly. */
   codePanel?: CodePanelProps;
@@ -43,7 +49,7 @@ export interface FlowBuilderPageProps<Kind extends string = FlowNodeKind> extend
   defaultConsoleEntries: ConsoleEntry[];
   onConsoleChange: (entries: ConsoleEntry[]) => void;
   onConsoleClear: () => void;
-  onSave: () => void | Promise<void>;
+  onSave: (graph: FlowGraph<Kind>) => void | Promise<void>;
   onPublish: () => void;
   breadcrumbs: BreadcrumbItem[];
   /** Builder height in px on wide screens. */
@@ -61,8 +67,8 @@ export default function FlowBuilderPage<Kind extends string = FlowNodeKind>(
   const {
     title = flowBuilderContent.title,
     status = flowBuilderContent.status,
-    nodes,
-    edges,
+    nodes = builderNodes,
+    edges = builderEdges,
     palette,
     onRun,
     consoleEntries,
@@ -80,19 +86,32 @@ export default function FlowBuilderPage<Kind extends string = FlowNodeKind>(
     mode,
     nodeStatus,
     onNodeSelect,
+    graph,
+    onGraphChange,
     codePanel,
     breadcrumbs = flowBuilderBreadcrumbs,
     height = 640,
     fullScreen = true,
   } = props;
   const [saving, setSaving] = useState(false);
-  const [savedNote, setSavedNote] = useState(flowBuilderContent.lastSaved);
+  const [initialGraph] = useState<FlowGraph<Kind>>(() => ({ nodes, edges }));
+  const [latestGraph, setLatestGraph] = useState<FlowGraph<Kind>>();
+  const [saveState, setSaveState] = useState<'initial' | 'unsaved' | 'saved'>('initial');
+  const revision = useRef(0);
+  const { t } = useI18n();
+  const savedNote =
+    saveState === 'initial'
+      ? flowBuilderContent.lastSaved
+      : t(saveState === 'unsaved' ? 'actionBar.unsaved' : 'actionBar.saved');
 
   const save = async () => {
     setSaving(true);
+    const savedRevision = revision.current;
     try {
-      await onSave?.();
-      setSavedNote('All changes saved');
+      await onSave?.(cleanFlowGraph(graph ?? latestGraph ?? initialGraph));
+      if (revision.current === savedRevision) setSaveState('saved');
+    } catch {
+      // The host owns persistence errors; retain the unsaved note and allow a retry.
     } finally {
       setSaving(false);
     }
@@ -133,6 +152,13 @@ export default function FlowBuilderPage<Kind extends string = FlowNodeKind>(
           title={title}
           nodes={nodes}
           edges={edges}
+          graph={graph}
+          onGraphChange={(next, change) => {
+            revision.current += 1;
+            setLatestGraph(next);
+            setSaveState('unsaved');
+            onGraphChange?.(next, change);
+          }}
           palette={palette}
           onRun={onRun}
           consoleEntries={consoleEntries}

package/src/workflow-builder/examples/SaveGraph.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import { builderNodes, builderEdges, cleanFlowGraph, type FlowGraph } from '@gntik-ai/blocks';
+import WorkflowBuilderPage from '../Page';
+
+/** Save the graph currently on screen to browser storage; products own persistence. */
+export default function SaveGraph() {
+  const [graph, setGraph] = useState<FlowGraph>(() => cleanFlowGraph({ nodes: builderNodes, edges: builderEdges }));
+  return (
+    <WorkflowBuilderPage
+      graph={graph}
+      onGraphChange={setGraph}
+      onSave={(next) => {
+        localStorage.setItem('workflow-builder-example', JSON.stringify(next));
+      }}
+    />
+  );
+}

package/src/workflow-builder/template.meta.ts

@@ -6,7 +6,7 @@ export const meta: TemplateMeta = {
   priority: 'P3',
   status: 'experimental',
   description:
-    'Full-screen workflow editor with optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode="run", nodeStatus and onNodeSelect passed to FlowBuilder; codePanel passes readOnly, markers, onValidityChange, onMonacoReady and loader to an optional CodePanel (branch, parallel, sequence and worker-backed YAML examples). The app must import \'@gntik-ai/flow/styles.css\' once for the canvas styles. Optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode, nodeStatus and onNodeSelect pass to FlowBuilder unchanged (see its branch, parallel and sequence examples). mode="run" hides Save, Publish and the saved notice, and preserves focus and node selection. Optional codePanel renders a companion CodePanel and passes all its extensions: readOnly, markers, onValidityChange, onMonacoReady and loader; run mode forces its readOnly to true. For example, WorkflowBuilderPage mode="run" nodeStatus={{step:"running"}} onNodeSelect={openDetails}; codePanel={{files,problems:[],loader:yamlLoader,markers}} uses consumer-owned same-origin YAML workers and inline schemas.',
+    'onSave(graph) receives the graph on screen (controlled graph, latest reported edit, or initial starter graph), without selected, dragging or measured node fields. Zero-argument handlers remain valid. Optional graph and onGraphChange pass through to FlowBuilder. Committed edits show actionBar.unsaved, a resolved save shows actionBar.saved, and a rejected save retains unsaved status and releases loading. Edits during a pending save remain unsaved. examples/SaveGraph.tsx shows a controlled graph and onSave={(graph) => localStorage.setItem("workflow-builder-example", JSON.stringify(graph))}; hosts own persistence. Full-screen workflow editor with optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode="run", nodeStatus and onNodeSelect passed to FlowBuilder; codePanel passes readOnly, markers, onValidityChange, onMonacoReady and loader to an optional CodePanel (branch, parallel, sequence and worker-backed YAML examples). The app must import \'@gntik-ai/flow/styles.css\' once for the canvas styles. Optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode, nodeStatus and onNodeSelect pass to FlowBuilder unchanged (see its branch, parallel and sequence examples). mode="run" hides Save, Publish and the saved notice, and preserves focus and node selection. Optional codePanel renders a companion CodePanel and passes all its extensions: readOnly, markers, onValidityChange, onMonacoReady and loader; run mode forces its readOnly to true. For example, WorkflowBuilderPage mode="run" nodeStatus={{step:"running"}} onNodeSelect={openDetails}; codePanel={{files,problems:[],loader:yamlLoader,markers}} uses consumer-owned same-origin YAML workers and inline schemas.',
   layout: 'CanvasLayout',
   blocks: ['flow-builder', 'code-panel'],
 };