@wildo-ai/saas-frontend-lib 1.1.9 → 1.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wildo-ai/saas-frontend-lib",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Complete React frontend SaaS infrastructure",
   "author": "Wildo AI",
@@ -59,6 +59,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^3.1.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@lottiefiles/dotlottie-react": "^0.18.2",
@@ -70,11 +71,11 @@
     "@standard-schema/utils": "^0.3.0",
     "@tanstack/react-table": "^8.21.3",
     "@types/mdast": "^4.0.4",
-    "@wildo-ai/external-connectors-models": "1.1.9",
-    "@wildo-ai/external-connectors-public": "1.1.9",
-    "@wildo-ai/presets-components-models": "1.1.9",
-    "@wildo-ai/saas-models": "1.1.9",
-    "@wildo-ai/zod-decorators": "1.1.9",
+    "@wildo-ai/external-connectors-models": "1.1.11",
+    "@wildo-ai/external-connectors-public": "1.1.11",
+    "@wildo-ai/presets-components-models": "1.1.11",
+    "@wildo-ai/saas-models": "1.1.11",
+    "@wildo-ai/zod-decorators": "1.1.11",
     "ai": "7.0.29",
     "axios": "^1.6.8",
     "big.js": "^6.2.2",

package/dist/esm/components/flows-actors/flow-node.d.ts

@@ -1,28 +0,0 @@
-import * as React from "react";
-import { Card } from "../../components/sections/card";
-import type { ComponentProps } from "react";
-export type FlowStepCategory = "agentic" | "artifact" | "control" | "state" | "event" | "error" | "human";
-export type AI_FlowNodeProps = ComponentProps<typeof Card> & {
-    stepKind: string;
-    stepName: string;
-    stepDescription?: string;
-    status?: string;
-    handles?: {
-        target?: boolean;
-        source?: boolean;
-        sourceCount?: number;
-    };
-};
-export declare const AI_FlowNode: ({ stepKind, stepName, stepDescription, status, handles, className, children, ...props }: AI_FlowNodeProps) => React.JSX.Element;
-export type AI_FlowTriggerNodeProps = ComponentProps<typeof Card> & {
-    triggerType: string;
-    displayName: string;
-    description?: string;
-    status?: string;
-};
-export declare const AI_FlowTriggerNode: ({ triggerType, displayName, description, status, className, children, ...props }: AI_FlowTriggerNodeProps) => React.JSX.Element | null;
-export type AI_FlowFinishNodeProps = ComponentProps<typeof Card> & {
-    status?: string;
-};
-export declare const AI_FlowFinishNode: ({ status, className, ...props }: AI_FlowFinishNodeProps) => React.JSX.Element | null;
-//# sourceMappingURL=flow-node.d.ts.map

package/dist/esm/components/flows-actors/flow-node.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"flow-node.d.ts","sourceRoot":"","sources":["../../../../../src/components/flows-actors/flow-node.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAmE,MAAM,8CAA8C,CAAC;AAOrI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAgB5C,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,UAAU,GACV,SAAS,GACT,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,CAAC;AAgGZ,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yFASzB,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAmD/B,CAAC;AAMF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kFAQhC,uBAAuB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAsChD,CAAC;AAUF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,iCAI/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA4B/C,CAAC"}

package/dist/esm/components/flows-actors/flow-node.js

@@ -1,115 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Handle, Position } from "@xyflow/react";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/sections/card.js";
-import { Badge } from "../../components/data-display/badge.js";
-import { useI18n } from "../../core/i18n/useI18n.js";
-import { useIconRegistry } from '../../core/icons/useIconRegistry.js';
-import { IconSize, StandardIconReference } from '../../core/icons/icon-registry.frontend.schemas.js';
-import { cn } from "../../core/ui/cn.js";
-import { FrontendComponentType } from "@wildo-ai/presets-components-models";
-import { FlowsActorsUIUtils } from "./flows-actors-ui.utils.js";
-import { AI_FlowNodeStatusBadge, AI_FlowNodeStepBadge } from "./flow-node-badges.js";
-const STEP_KIND_CATEGORY = {
-    "agent.call": "agentic",
-    "function": "agentic",
-    "connector": "agentic",
-    "compute.resource.operation": "agentic",
-    "compute.custom": "agentic",
-    "flow.subflow": "agentic",
-    "artifact.write": "artifact",
-    "artifact.read": "artifact",
-    "control.branch": "control",
-    "control.switch": "control",
-    "control.loop": "control",
-    "control.parallel": "control",
-    "control.delay": "control",
-    "control.retry": "control",
-    "state.memory.read": "state",
-    "state.memory.write": "state",
-    "event.emit": "event",
-    "event.wait": "event",
-    "error.catch": "error",
-    "error.compensate": "error",
-    "error.finally": "error",
-    "human.in.the.loop": "human",
-    "actor.system.call": "human",
-};
-const CATEGORY_STYLES = {
-    agentic: "border-s-primary",
-    artifact: "border-s-chart-2",
-    control: "border-s-chart-3",
-    state: "border-s-chart-4",
-    event: "border-s-chart-5",
-    error: "border-s-destructive",
-    human: "border-s-warning",
-};
-const STATUS_STYLES = {
-    ready: "ring-muted",
-    pending: "ring-warning/50",
-    processing: "ring-primary ring-2 animate-pulse",
-    completed: "ring-success ring-2",
-    failed: "ring-destructive ring-2",
-    cancelled: "ring-muted",
-    aborted: "ring-destructive ring-2",
-};
-const CATEGORY_ICONS = {
-    agentic: StandardIconReference.BRAIN,
-    artifact: StandardIconReference.FILE,
-    control: StandardIconReference.CHEVRONS_UP_DOWN,
-    state: StandardIconReference.BOOKMARK,
-    event: StandardIconReference.CLOCK,
-    error: StandardIconReference.WARNING,
-    human: StandardIconReference.USERS,
-};
-const TRIGGER_TYPE_ICONS = {
-    manual: StandardIconReference.CORNER_DOWN_LEFT,
-    schedule: StandardIconReference.CALENDAR,
-    webhook: StandardIconReference.EXTERNAL_LINK,
-    resource_event: StandardIconReference.DOT,
-    event: StandardIconReference.CLOCK,
-    task_completion: StandardIconReference.CHECK_CIRCLE,
-};
-const TRIGGER_TYPE_LABEL_KEYS = {
-    manual: "triggerManual",
-    schedule: "triggerSchedule",
-    webhook: "triggerWebhook",
-    resource_event: "triggerResourceEvent",
-    event: "triggerEvent",
-    task_completion: "triggerTaskCompletion",
-};
-function getStepCategory(kind) {
-    return STEP_KIND_CATEGORY[kind] ?? "agentic";
-}
-function getCategoryIcon(category) {
-    return CATEGORY_ICONS[category];
-}
-function getTriggerTypeIcon(triggerType) {
-    return TRIGGER_TYPE_ICONS[triggerType] ?? StandardIconReference.DOT;
-}
-function getTriggerTypeLabelKey(triggerType) {
-    return TRIGGER_TYPE_LABEL_KEYS[triggerType] ?? triggerType;
-}
-export const AI_FlowNode = ({ stepKind, stepName, stepDescription, status, handles = { target: true, source: true }, className, children, ...props }) => {
-    const category = getStepCategory(stepKind);
-    const { renderIcon } = useIconRegistry();
-    const sourceCount = handles.sourceCount ?? (FlowsActorsUIUtils.isControlMultiSourceKind(stepKind) ? 2 : 1);
-    return (_jsxs(Card, { className: cn("node-container relative size-full h-auto w-sm gap-0 rounded-md border-s-4 p-0", CATEGORY_STYLES[category], status && STATUS_STYLES[status], className), ...props, children: [handles.target && _jsx(Handle, { position: Position.Left, type: "target" }), _jsxs(CardHeader, { className: "gap-0.5 rounded-t-md border-b bg-secondary p-card-sm!", children: [_jsxs("div", { className: "flex items-center gap-element", children: [_jsx("span", { className: "text-muted-foreground", children: renderIcon(CATEGORY_ICONS[category], { size: IconSize.SM }) }), _jsx(AI_FlowNodeStepBadge, { category: category, kind: stepKind }), _jsx(CardTitle, { className: "text-sm", children: stepName })] }), stepDescription && (_jsx(CardDescription, { className: "text-xs", children: stepDescription }))] }), children && _jsx(CardContent, { className: "p-card-sm", children: children }), status && (_jsx(CardFooter, { className: "rounded-b-md border-t bg-secondary p-card-sm!", children: _jsx(AI_FlowNodeStatusBadge, { status: status }) })), handles.source && sourceCount > 1
-                ? Array.from({ length: sourceCount }, (_, i) => (_jsx(Handle, { type: "source", position: Position.Right, id: `source-${i}`, style: { top: `${((i + 1) / (sourceCount + 1)) * 100}%` } }, `source-${i}`)))
-                : handles.source && _jsx(Handle, { position: Position.Right, type: "source" })] }));
-};
-export const AI_FlowTriggerNode = ({ triggerType, displayName, description, status, className, children, ...props }) => {
-    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_AI_FLOW_NODE });
-    const { renderIcon } = useIconRegistry();
-    if (!isReady)
-        return null;
-    return (_jsxs(Card, { className: cn("node-container relative size-full h-auto w-sm gap-0 rounded-md border-s-4 border-s-success p-0", status && STATUS_STYLES[status], className), ...props, children: [_jsxs(CardHeader, { className: "gap-0.5 rounded-t-md border-b bg-success/10 p-card-sm!", children: [_jsxs("div", { className: "flex items-center gap-element", children: [_jsx("span", { className: "text-success", children: renderIcon(getTriggerTypeIcon(triggerType), { size: IconSize.SM }) }), _jsx(Badge, { variant: "outline", className: "text-2xs", children: tComponent(FrontendComponentType.LOW_LEVEL_AI_FLOW_NODE, "trigger") }), _jsx(Badge, { variant: "secondary", className: "text-2xs", children: tComponent(FrontendComponentType.LOW_LEVEL_AI_FLOW_NODE, getTriggerTypeLabelKey(triggerType)) })] }), _jsx(CardTitle, { className: "text-sm", children: displayName }), description && (_jsx(CardDescription, { className: "text-xs", children: description }))] }), children && _jsx(CardContent, { className: "p-card-sm", children: children }), _jsx(Handle, { position: Position.Right, type: "source" })] }));
-};
-export const AI_FlowFinishNode = ({ status, className, ...props }) => {
-    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_AI_FLOW_NODE });
-    const { renderIcon } = useIconRegistry();
-    if (!isReady)
-        return null;
-    return (_jsxs(Card, { className: cn("node-container relative size-full h-auto w-sm gap-0 rounded-md border-s-4 border-s-muted-foreground p-0", status && STATUS_STYLES[status], className), ...props, children: [_jsx(Handle, { position: Position.Left, type: "target" }), _jsx(CardHeader, { className: "rounded-md bg-secondary p-card-sm!", children: _jsxs("div", { className: "flex items-center gap-element", children: [_jsx("span", { className: "text-muted-foreground", children: renderIcon(StandardIconReference.CHECK_CIRCLE, { size: IconSize.SM }) }), _jsx(CardTitle, { className: "text-sm text-muted-foreground", children: tComponent(FrontendComponentType.LOW_LEVEL_AI_FLOW_NODE, "finish") })] }) })] }));
-};
-//# sourceMappingURL=flow-node.js.map

package/dist/esm/components/flows-actors/flow-node.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"flow-node.js","sourceRoot":"","sources":["../../../../../src/components/flows-actors/flow-node.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Handle, Position } from \"@xyflow/react\";\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from \"~wildo-frontend-lib/components/sections/card\";\nimport { Badge } from \"~wildo-frontend-lib/components/data-display/badge\";\nimport { useI18n } from \"~wildo-frontend-lib/core/i18n/useI18n\";\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { IconSize, StandardIconReference } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { cn } from \"~wildo-frontend-lib/core/ui/cn\";\nimport { FrontendComponentType } from \"@wildo-ai/presets-components-models\";\nimport type { ComponentProps } from \"react\";\nimport { FlowsActorsUIUtils } from \"./flows-actors-ui.utils\";\nimport { AI_FlowNodeStatusBadge, AI_FlowNodeStepBadge } from \"./flow-node-badges\";\n\n//===============================================================\n//  Flow Step Kind → Visual Category Mapping\n//\n// BACKEND DEPENDENCY: flows.shared.schemas.ts lines 141-161\n// 23 Flow_Step_Kind enum values exist, but only 21 have Flow_Step union variants\n// (HUMAN_IN_THE_LOOP and ACTOR_SYSTEM_CALL are missing from the union).\n// All 21 existing sub-schemas have `/* TODO */` placeholder configs.\n// Until those are fleshed out, step configuration display is unavailable.\n// This file provides step-kind AWARENESS (icons, colors, badges)\n// but NOT step CONFIGURATION (forms, parameter editing).\n//===============================================================\n\nexport type FlowStepCategory =\n  | \"agentic\"\n  | \"artifact\"\n  | \"control\"\n  | \"state\"\n  | \"event\"\n  | \"error\"\n  | \"human\";\n\nconst STEP_KIND_CATEGORY: Record<string, FlowStepCategory> = {\n  \"agent.call\": \"agentic\",\n  \"function\": \"agentic\",\n  \"connector\": \"agentic\",\n  \"compute.resource.operation\": \"agentic\",\n  \"compute.custom\": \"agentic\",\n  \"flow.subflow\": \"agentic\",\n  \"artifact.write\": \"artifact\",\n  \"artifact.read\": \"artifact\",\n  \"control.branch\": \"control\",\n  \"control.switch\": \"control\",\n  \"control.loop\": \"control\",\n  \"control.parallel\": \"control\",\n  \"control.delay\": \"control\",\n  \"control.retry\": \"control\",\n  \"state.memory.read\": \"state\",\n  \"state.memory.write\": \"state\",\n  \"event.emit\": \"event\",\n  \"event.wait\": \"event\",\n  \"error.catch\": \"error\",\n  \"error.compensate\": \"error\",\n  \"error.finally\": \"error\",\n  \"human.in.the.loop\": \"human\",\n  \"actor.system.call\": \"human\",\n};\n\nconst CATEGORY_STYLES: Record<FlowStepCategory, string> = {\n  agentic: \"border-s-primary\",\n  artifact: \"border-s-chart-2\",\n  control: \"border-s-chart-3\",\n  state: \"border-s-chart-4\",\n  event: \"border-s-chart-5\",\n  error: \"border-s-destructive\",\n  human: \"border-s-warning\",\n};\n\nconst STATUS_STYLES: Record<string, string> = {\n  ready: \"ring-muted\",\n  pending: \"ring-warning/50\",\n  processing: \"ring-primary ring-2 animate-pulse\",\n  completed: \"ring-success ring-2\",\n  failed: \"ring-destructive ring-2\",\n  cancelled: \"ring-muted\",\n  aborted: \"ring-destructive ring-2\",\n};\n\nconst CATEGORY_ICONS: Record<FlowStepCategory, StandardIconReference> = {\n  agentic: StandardIconReference.BRAIN,\n  artifact: StandardIconReference.FILE,\n  control: StandardIconReference.CHEVRONS_UP_DOWN,\n  state: StandardIconReference.BOOKMARK,\n  event: StandardIconReference.CLOCK,\n  error: StandardIconReference.WARNING,\n  human: StandardIconReference.USERS,\n};\n\nconst TRIGGER_TYPE_ICONS: Record<string, StandardIconReference> = {\n  manual: StandardIconReference.CORNER_DOWN_LEFT,\n  schedule: StandardIconReference.CALENDAR,\n  webhook: StandardIconReference.EXTERNAL_LINK,\n  resource_event: StandardIconReference.DOT,\n  event: StandardIconReference.CLOCK,\n  task_completion: StandardIconReference.CHECK_CIRCLE,\n};\n\nconst TRIGGER_TYPE_LABEL_KEYS: Record<string, string> = {\n  manual: \"triggerManual\",\n  schedule: \"triggerSchedule\",\n  webhook: \"triggerWebhook\",\n  resource_event: \"triggerResourceEvent\",\n  event: \"triggerEvent\",\n  task_completion: \"triggerTaskCompletion\",\n};\n\nfunction getStepCategory(kind: string): FlowStepCategory {\n  return STEP_KIND_CATEGORY[kind] ?? \"agentic\";\n}\n\nfunction getCategoryIcon(category: FlowStepCategory): StandardIconReference {\n  return CATEGORY_ICONS[category];\n}\n\nfunction getTriggerTypeIcon(triggerType: string): StandardIconReference {\n  return TRIGGER_TYPE_ICONS[triggerType] ?? StandardIconReference.DOT;\n}\n\nfunction getTriggerTypeLabelKey(triggerType: string): string {\n  return TRIGGER_TYPE_LABEL_KEYS[triggerType] ?? triggerType;\n}\n\n//===============================================================\n//  AI_FlowNode\n//===============================================================\n\nexport type AI_FlowNodeProps = ComponentProps<typeof Card> & {\n  stepKind: string;\n  stepName: string;\n  stepDescription?: string;\n  status?: string;\n  handles?: {\n    target?: boolean;\n    source?: boolean;\n    sourceCount?: number;\n  };\n};\n\nexport const AI_FlowNode = ({\n  stepKind,\n  stepName,\n  stepDescription,\n  status,\n  handles = { target: true, source: true },\n  className,\n  children,\n  ...props\n}: AI_FlowNodeProps): React.JSX.Element => {\n  const category = getStepCategory(stepKind);\n  const { renderIcon } = useIconRegistry();\n  const sourceCount = handles.sourceCount ?? (FlowsActorsUIUtils.isControlMultiSourceKind(stepKind) ? 2 : 1);\n\n  return (\n    <Card\n      className={cn(\n        \"node-container relative size-full h-auto w-sm gap-0 rounded-md border-s-4 p-0\",\n        CATEGORY_STYLES[category],\n        status && STATUS_STYLES[status],\n        className\n      )}\n      {...props}\n    >\n      {handles.target && <Handle position={Position.Left} type=\"target\" />}\n\n      <CardHeader className=\"gap-0.5 rounded-t-md border-b bg-secondary p-card-sm!\">\n        <div className=\"flex items-center gap-element\">\n          <span className=\"text-muted-foreground\">\n            {renderIcon(CATEGORY_ICONS[category], { size: IconSize.SM })}\n          </span>\n          <AI_FlowNodeStepBadge category={category} kind={stepKind} />\n          <CardTitle className=\"text-sm\">{stepName}</CardTitle>\n        </div>\n        {stepDescription && (\n          <CardDescription className=\"text-xs\">{stepDescription}</CardDescription>\n        )}\n      </CardHeader>\n\n      {children && <CardContent className=\"p-card-sm\">{children}</CardContent>}\n\n      {status && (\n        <CardFooter className=\"rounded-b-md border-t bg-secondary p-card-sm!\">\n          <AI_FlowNodeStatusBadge status={status} />\n        </CardFooter>\n      )}\n\n      {handles.source && sourceCount > 1\n        ? Array.from({ length: sourceCount }, (_, i) => (\n            <Handle\n              key={`source-${i}`}\n              type=\"source\"\n              position={Position.Right}\n              id={`source-${i}`}\n              style={{ top: `${((i + 1) / (sourceCount + 1)) * 100}%` }}\n            />\n          ))\n        : handles.source && <Handle position={Position.Right} type=\"source\" />}\n    </Card>\n  );\n};\n\n//===============================================================\n//  AI_FlowTriggerNode\n//===============================================================\n\nexport type AI_FlowTriggerNodeProps = ComponentProps<typeof Card> & {\n  triggerType: string;\n  displayName: string;\n  description?: string;\n  status?: string;\n};\n\nexport const AI_FlowTriggerNode = ({\n  triggerType,\n  displayName,\n  description,\n  status,\n  className,\n  children,\n  ...props\n}: AI_FlowTriggerNodeProps): React.JSX.Element | null => {\n  const { tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_AI_FLOW_NODE });\n  const { renderIcon } = useIconRegistry();\n\n  if (!isReady) return null;\n\n  return (\n    <Card\n      className={cn(\n        \"node-container relative size-full h-auto w-sm gap-0 rounded-md border-s-4 border-s-success p-0\",\n        status && STATUS_STYLES[status],\n        className\n      )}\n      {...props}\n    >\n      <CardHeader className=\"gap-0.5 rounded-t-md border-b bg-success/10 p-card-sm!\">\n        <div className=\"flex items-center gap-element\">\n          <span className=\"text-success\">\n            {renderIcon(getTriggerTypeIcon(triggerType), { size: IconSize.SM })}\n          </span>\n          <Badge variant=\"outline\" className=\"text-2xs\">\n            {tComponent(FrontendComponentType.LOW_LEVEL_AI_FLOW_NODE, \"trigger\")}\n          </Badge>\n          <Badge variant=\"secondary\" className=\"text-2xs\">\n            {tComponent(FrontendComponentType.LOW_LEVEL_AI_FLOW_NODE, getTriggerTypeLabelKey(triggerType) as any)}\n          </Badge>\n        </div>\n        <CardTitle className=\"text-sm\">{displayName}</CardTitle>\n        {description && (\n          <CardDescription className=\"text-xs\">{description}</CardDescription>\n        )}\n      </CardHeader>\n\n      {children && <CardContent className=\"p-card-sm\">{children}</CardContent>}\n\n      <Handle position={Position.Right} type=\"source\" />\n    </Card>\n  );\n};\n\n//===============================================================\n//  AI_FlowFinishNode\n//\n// BACKEND DEPENDENCY: flows.shared.schemas.ts lines 169-174\n// Flow_FinishSchema is empty z.object({}).\n// When resolved: add finish configuration display (outputs, status).\n//===============================================================\n\nexport type AI_FlowFinishNodeProps = ComponentProps<typeof Card> & {\n  status?: string;\n};\n\nexport const AI_FlowFinishNode = ({\n  status,\n  className,\n  ...props\n}: AI_FlowFinishNodeProps): React.JSX.Element | null => {\n  const { tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_AI_FLOW_NODE });\n  const { renderIcon } = useIconRegistry();\n\n  if (!isReady) return null;\n\n  return (\n    <Card\n      className={cn(\n        \"node-container relative size-full h-auto w-sm gap-0 rounded-md border-s-4 border-s-muted-foreground p-0\",\n        status && STATUS_STYLES[status],\n        className\n      )}\n      {...props}\n    >\n      <Handle position={Position.Left} type=\"target\" />\n      <CardHeader className=\"rounded-md bg-secondary p-card-sm!\">\n        <div className=\"flex items-center gap-element\">\n          <span className=\"text-muted-foreground\">\n            {renderIcon(StandardIconReference.CHECK_CIRCLE, { size: IconSize.SM })}\n          </span>\n          <CardTitle className=\"text-sm text-muted-foreground\">\n            {tComponent(FrontendComponentType.LOW_LEVEL_AI_FLOW_NODE, \"finish\")}\n          </CardTitle>\n        </div>\n      </CardHeader>\n    </Card>\n  );\n};\n"]}

package/dist/esm/components/resources/CollectionSelectionHeaderRail.d.ts

@@ -1,30 +0,0 @@
-/**
- * CollectionSelectionHeaderRail — the CARDS-mode select-all, standing in the same column as the
- * rows it commands.
- *
- * The TABLE body already had this: its `__select` column puts the header checkbox directly above
- * every row checkbox, which is what makes "check this one and all of them are checked" readable at
- * a glance. Cards had no such header, so the select-all lived in the toolbar — a different row, a
- * different inset, several unrelated controls to its right — and in TABLE mode it was a SECOND
- * select-all competing with the table's own.
- *
- * So the rule is now uniform across both displays: **the checkbox that selects rows sits in the
- * rows' column**, and the toolbar keeps only the selection SUMMARY (the live count and clear),
- * which belongs beside the bulk actions that consume it.
- *
- * Its horizontal geometry is not restated here — it reads the same three constants
- * `ResourceListItemRenderer` builds its own leading rail from, so the two cannot drift apart on the
- * next padding change. See `collection-card-layout.utils`.
- */
-import React from 'react';
-export interface CollectionSelectionHeaderRailProps {
-    /** Whether every item on the current page is selected. */
-    allSelected: boolean;
-    /** Toggle selection of every current-page item. */
-    onToggleAll: () => void;
-    /** Extra classes for the label itself. The host owns the WRAPPER (an `<li>` inside the bordered
-     *  list, or a bordered box above a grid) — see `resolveCardsSelectionRailClass`. */
-    className?: string;
-}
-export declare function CollectionSelectionHeaderRail({ allSelected, onToggleAll, className, }: CollectionSelectionHeaderRailProps): React.JSX.Element;
-//# sourceMappingURL=CollectionSelectionHeaderRail.d.ts.map

package/dist/esm/components/resources/CollectionSelectionHeaderRail.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CollectionSelectionHeaderRail.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/CollectionSelectionHeaderRail.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,WAAW,kCAAkC;IACjD,0DAA0D;IAC1D,WAAW,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB;wFACoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,6BAA6B,CAAC,EAC5C,WAAW,EACX,WAAW,EACX,SAAS,GACV,EAAE,kCAAkC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwBxD"}

package/dist/esm/components/resources/CollectionSelectionHeaderRail.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../core/ui/cn.js';
-import { FrontendComponentType } from '@wildo-ai/presets-components-models';
-import { useI18n } from '../../core/i18n/useI18n.js';
-import { CheckboxRoot } from '../../components/form/controls/boolean/checkbox.js';
-import { CARD_ROW_PADDING_INLINE_CLASS, CARD_SELECTION_RAIL_CLASS, CARD_SELECTION_SLOT_CLASS, } from '../../components/resources/collection-card-layout.utils.js';
-export function CollectionSelectionHeaderRail({ allSelected, onToggleAll, className, }) {
-    const { tComponent } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST });
-    const selectAllLabel = tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'selectAll');
-    return (
-    // A LABEL, so the words are part of the target: a lone checkbox in a header row is an
-    // unexplained control, and a caption beside it that does NOT activate it is worse than none.
-    // `w-fit` keeps the target on the words rather than across the whole row, where a click in
-    // empty space would select everything by surprise.
-    _jsxs("label", { "data-slot": "collection-selection-rail", className: cn(CARD_ROW_PADDING_INLINE_CLASS, CARD_SELECTION_RAIL_CLASS, 'w-fit items-center py-item cursor-pointer', className), children: [_jsx("span", { className: CARD_SELECTION_SLOT_CLASS, children: _jsx(CheckboxRoot, { checked: allSelected, onCheckedChange: () => onToggleAll() }) }), _jsx("span", { className: "text-sm text-muted-foreground select-none", children: selectAllLabel })] }));
-}
-//# sourceMappingURL=CollectionSelectionHeaderRail.js.map

package/dist/esm/components/resources/CollectionSelectionHeaderRail.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CollectionSelectionHeaderRail.js","sourceRoot":"","sources":["../../../../../src/components/resources/CollectionSelectionHeaderRail.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,+DAA+D,CAAC;AAC7F,OAAO,EACL,6BAA6B,EAC7B,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,uEAAuE,CAAC;AAY/E,MAAM,UAAU,6BAA6B,CAAC,EAC5C,WAAW,EACX,WAAW,EACX,SAAS,GAC0B;IACnC,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,qBAAqB,CAAC,sBAAsB,EAAE,CAAC,CAAC;IAC5F,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,CAAC,sBAAsB,EAAE,WAAW,CAAC,CAAC;IAE7F,OAAO;IACL,sFAAsF;IACtF,6FAA6F;IAC7F,2FAA2F;IAC3F,mDAAmD;IACnD,8BACY,2BAA2B,EACrC,SAAS,EAAE,EAAE,CACX,6BAA6B,EAC7B,yBAAyB,EACzB,2CAA2C,EAC3C,SAAS,CACV,aAED,eAAM,SAAS,EAAE,yBAAyB,YACxC,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,GAAI,GACvE,EACP,eAAM,SAAS,EAAC,2CAA2C,YAAE,cAAc,GAAQ,IAC7E,CACT,CAAC;AACJ,CAAC","sourcesContent":["/**\n * CollectionSelectionHeaderRail — the CARDS-mode select-all, standing in the same column as the\n * rows it commands.\n *\n * The TABLE body already had this: its `__select` column puts the header checkbox directly above\n * every row checkbox, which is what makes \"check this one and all of them are checked\" readable at\n * a glance. Cards had no such header, so the select-all lived in the toolbar — a different row, a\n * different inset, several unrelated controls to its right — and in TABLE mode it was a SECOND\n * select-all competing with the table's own.\n *\n * So the rule is now uniform across both displays: **the checkbox that selects rows sits in the\n * rows' column**, and the toolbar keeps only the selection SUMMARY (the live count and clear),\n * which belongs beside the bulk actions that consume it.\n *\n * Its horizontal geometry is not restated here — it reads the same three constants\n * `ResourceListItemRenderer` builds its own leading rail from, so the two cannot drift apart on the\n * next padding change. See `collection-card-layout.utils`.\n */\n\nimport React from 'react';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { CheckboxRoot } from '~wildo-frontend-lib/components/form/controls/boolean/checkbox';\nimport {\n  CARD_ROW_PADDING_INLINE_CLASS,\n  CARD_SELECTION_RAIL_CLASS,\n  CARD_SELECTION_SLOT_CLASS,\n} from '~wildo-frontend-lib/components/resources/collection-card-layout.utils';\n\nexport interface CollectionSelectionHeaderRailProps {\n  /** Whether every item on the current page is selected. */\n  allSelected: boolean;\n  /** Toggle selection of every current-page item. */\n  onToggleAll: () => void;\n  /** Extra classes for the label itself. The host owns the WRAPPER (an `<li>` inside the bordered\n   *  list, or a bordered box above a grid) — see `resolveCardsSelectionRailClass`. */\n  className?: string;\n}\n\nexport function CollectionSelectionHeaderRail({\n  allSelected,\n  onToggleAll,\n  className,\n}: CollectionSelectionHeaderRailProps): React.JSX.Element {\n  const { tComponent } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST });\n  const selectAllLabel = tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'selectAll');\n\n  return (\n    // A LABEL, so the words are part of the target: a lone checkbox in a header row is an\n    // unexplained control, and a caption beside it that does NOT activate it is worse than none.\n    // `w-fit` keeps the target on the words rather than across the whole row, where a click in\n    // empty space would select everything by surprise.\n    <label\n      data-slot=\"collection-selection-rail\"\n      className={cn(\n        CARD_ROW_PADDING_INLINE_CLASS,\n        CARD_SELECTION_RAIL_CLASS,\n        'w-fit items-center py-item cursor-pointer',\n        className,\n      )}\n    >\n      <span className={CARD_SELECTION_SLOT_CLASS}>\n        <CheckboxRoot checked={allSelected} onCheckedChange={() => onToggleAll()} />\n      </span>\n      <span className=\"text-sm text-muted-foreground select-none\">{selectAllLabel}</span>\n    </label>\n  );\n}\n"]}