ai-design-system 0.1.9 → 0.1.11

package/components/composites/StateNode/StateNode.tsx

@@ -14,6 +14,8 @@ export type StateNodeData = {
   label: string;
   description?: string;
   type: "state";
+  /** True for terminal states — marks workflow completion, no outgoing transitions */
+  isTerminal?: boolean;
   status?: "idle" | "running" | "success" | "error";
   enabled?: boolean;
 };
@@ -61,12 +63,14 @@ export const StateNode = memo(({ data, selected, id }: StateNodeProps) => {
   const displayDescription = data.description;
   const status = data.status;
   const isDisabled = data.enabled === false;
+  const isTerminal = data.isTerminal === true;
 
   return (
     <Node
       className={cn(
-        "relative flex h-auto w-auto min-w-[120px] max-w-[180px] flex-col items-center justify-center bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 shadow-none transition-all duration-150 ease-out",
+        "relative flex h-auto w-auto min-w-[120px] max-w-[180px] flex-col items-center justify-center border border-border bg-card shadow-none transition-all duration-150 ease-out",
         selected && "border-primary border-2",
+        isTerminal && "border-2 border-primary",
         isDisabled && "opacity-50"
       )}
       data-testid={`state-node-${id}`}

package/components/composites/TransitionNode/TransitionNode.tsx

@@ -10,10 +10,27 @@ import {
 } from "@/components/ai-elements/node";
 import { cn } from "@/lib/utils";
 
+export type TransitionNodeConfig = {
+  /** For conditional transitions: form field comparison e.g. "{{record.orderValue}} > {{record.acceptedRange}}" */
+  condition?: string;
+  /** For human transitions: roles allowed to approve */
+  allowed_roles?: string[];
+  /** For scheduled transitions: delay in seconds */
+  delay_seconds?: number;
+  /** For plugin transitions: plugin identifier */
+  plugin_id?: string;
+  /** For plugin transitions: plugin input values */
+  plugin_inputs?: Record<string, unknown>;
+};
+
 export type TransitionNodeData = {
   label: string;
   description?: string;
   type: "transition";
+  /** Transition execution type */
+  transitionType?: "human" | "conditional" | "scheduled" | "plugin";
+  /** Transition-type-specific configuration */
+  config?: TransitionNodeConfig;
   status?: "idle" | "running" | "success" | "error";
   enabled?: boolean;
 };
@@ -36,7 +53,7 @@ export const TransitionNode = memo(
     return (
       <Node
         className={cn(
-          "flex h-auto w-auto min-w-[120px] max-w-[180px] flex-col items-center justify-center bg-slate-50 dark:bg-slate-900/30 border border-slate-200 dark:border-slate-700 shadow-none transition-all duration-150 ease-out",
+          "flex h-auto w-auto min-w-[120px] max-w-[180px] flex-col items-center justify-center border border-border bg-muted/40 shadow-none transition-all duration-150 ease-out",
           selected && "border-primary border-2"
         )}
         data-testid={`transition-node-${id}`}

package/dist/index.cjs

@@ -7085,12 +7085,14 @@ var StateNode = React33.memo(({ data, selected, id }) => {
   const displayDescription = data.description;
   const status = data.status;
   const isDisabled = data.enabled === false;
+  const isTerminal = data.isTerminal === true;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Node2,
     {
       className: cn(
-        "relative flex h-auto w-auto min-w-[120px] max-w-[180px] flex-col items-center justify-center bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 shadow-none transition-all duration-150 ease-out",
+        "relative flex h-auto w-auto min-w-[120px] max-w-[180px] flex-col items-center justify-center border border-border bg-card shadow-none transition-all duration-150 ease-out",
         selected && "border-primary border-2",
+        isTerminal && "border-2 border-primary",
         isDisabled && "opacity-50"
       ),
       "data-testid": `state-node-${id}`,
@@ -7124,7 +7126,7 @@ var TransitionNode = React33.memo(
       Node2,
       {
         className: cn(
-          "flex h-auto w-auto min-w-[120px] max-w-[180px] flex-col items-center justify-center bg-slate-50 dark:bg-slate-900/30 border border-slate-200 dark:border-slate-700 shadow-none transition-all duration-150 ease-out",
+          "flex h-auto w-auto min-w-[120px] max-w-[180px] flex-col items-center justify-center border border-border bg-muted/40 shadow-none transition-all duration-150 ease-out",
           selected && "border-primary border-2"
         ),
         "data-testid": `transition-node-${id}`,