@motiadev/workbench 0.3.1-beta.87 → 0.3.1-beta.88-041205

package/dist/src/stores/use-logs.js

@@ -1,52 +0,0 @@
-import { useSyncExternalStore, useCallback } from 'react';
-const listeners = new Set();
-let currentLogs = [];
-let currentUnreadLogsCount = 0;
-let memoizedSnapshot;
-const updateMemoizedSnapshot = () => {
-    memoizedSnapshot = {
-        logs: currentLogs,
-        unreadLogsCount: currentUnreadLogsCount,
-        addLog: storeActions.addLog,
-        resetLogs: storeActions.resetLogs,
-        setUnreadLogsCount: storeActions.setUnreadLogsCount,
-    };
-};
-const notify = () => {
-    listeners.forEach((listener) => listener());
-};
-const storeActions = {
-    addLog: (log) => {
-        currentLogs = [log, ...currentLogs];
-        currentUnreadLogsCount += 1;
-        updateMemoizedSnapshot();
-        notify();
-    },
-    resetLogs: () => {
-        if (currentLogs.length === 0 && currentUnreadLogsCount === 0) {
-            return;
-        }
-        currentLogs = [];
-        currentUnreadLogsCount = 0;
-        updateMemoizedSnapshot();
-        notify();
-    },
-    setUnreadLogsCount: (count) => {
-        if (currentUnreadLogsCount === count) {
-            return;
-        }
-        currentUnreadLogsCount = count;
-        updateMemoizedSnapshot();
-        notify();
-    },
-};
-updateMemoizedSnapshot();
-// Stable subscribe function so React doesn't unnecessarily tear down the subscription
-const subscribe = (onStoreChange) => {
-    listeners.add(onStoreChange);
-    return () => listeners.delete(onStoreChange);
-};
-export function useLogs(selector = (state) => state) {
-    const getSnapshot = useCallback(() => selector(memoizedSnapshot), [selector]);
-    return useSyncExternalStore(subscribe, getSnapshot);
-}

package/dist/src/views/flow/arrow-head.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-type Props = {
-    color?: string;
-    id: string;
-    className?: string;
-};
-export declare const ArrowHead: React.FC<Props>;
-export {};

package/dist/src/views/flow/arrow-head.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ArrowHead = (props) => {
-    // Use CSS custom property for theme-aware coloring, fallback to provided color
-    const strokeColor = props.color || 'var(--arrow-color, #B3B3B3)';
-    return (_jsxs("marker", { id: props.id, viewBox: "-5 -5 10 10", markerUnits: "strokeWidth", markerWidth: "10", markerHeight: "10", className: props.className, children: [_jsx("line", { x1: 0, y1: 0, x2: 2, y2: -2, stroke: strokeColor, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" }), _jsx("line", { x1: -2, y1: -2, x2: 0, y2: 0, stroke: strokeColor, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" })] }));
-};

package/dist/src/views/flow/flow-view.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogConsole } from '@/components/logs/log-console';
-import { Background, BackgroundVariant, ReactFlow, } from '@xyflow/react';
-import { useCallback, useMemo, useState } from 'react';
-import { ArrowHead } from './arrow-head';
-import { BaseEdge } from './base-edge';
-import { FlowLoader } from './flow-loader';
-import { useGetFlowState } from './hooks/use-get-flow-state';
-import { Legend } from './legend';
-import { NodeOrganizer } from './node-organizer';
-import '@xyflow/react/dist/style.css';
-const edgeTypes = {
-    base: BaseEdge,
-};
-export const FlowView = ({ flow, flowConfig }) => {
-    const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow, flowConfig);
-    const [initialized, setInitialized] = useState(false);
-    const [hoveredType, setHoveredType] = useState(null);
-    const onInitialized = useCallback(() => {
-        setInitialized(true);
-    }, []);
-    const getClassName = useCallback((nodeType) => {
-        if (!hoveredType)
-            return '';
-        if (nodeType) {
-            return nodeType === hoveredType
-                ? 'border border-border scale-[1.02] transition-all duration-300'
-                : 'opacity-30 transition-all duration-300';
-        }
-        // If no nodeType is provided, this is an edge
-        return 'opacity-30 transition-all duration-300';
-    }, [hoveredType]);
-    const nodesWithHighlights = useMemo(() => nodes.map((node) => ({
-        ...node,
-        className: getClassName(node.data.type),
-    })), [nodes, getClassName]);
-    const edgesWithHighlights = useMemo(() => edges.map((edge) => ({
-        ...edge,
-        className: getClassName(), // No argument means it's an edge
-    })), [edges, getClassName]);
-    const onNodesChangeHandler = useCallback((changes) => {
-        onNodesChange(changes);
-    }, [onNodesChange]);
-    if (!nodeTypes) {
-        return null;
-    }
-    return (_jsxs("div", { className: "w-full h-full relative bg-background", children: [!initialized && _jsx(FlowLoader, {}), _jsx(Legend, { onHover: setHoveredType }), _jsxs(ReactFlow, { nodes: nodesWithHighlights, edges: edgesWithHighlights, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChangeHandler, onEdgesChange: onEdgesChange, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 50, size: 2, className: "[--xy-background-color-dots:theme(colors.muted.DEFAULT)] [--xy-background-color:theme(colors.background)]" }), _jsx(NodeOrganizer, { onInitialized: onInitialized }), _jsx("svg", { className: "[--arrow-color:theme(colors.muted.foreground)]", children: _jsx("defs", { children: _jsx(ArrowHead, { id: "arrowhead" }) }) })] }), _jsx(LogConsole, {})] }));
-};

package/dist/src/views/flow/hooks/use-get-flow-state.d.ts

@@ -1,52 +0,0 @@
-import { Edge, Node } from '@xyflow/react';
-import React from 'react';
-import type { EdgeData, NodeData } from '../nodes/nodes.types';
-type Emit = string | {
-    topic: string;
-    label?: string;
-};
-type FlowStep = {
-    id: string;
-    name: string;
-    type: 'event' | 'api' | 'noop' | 'cron';
-    description?: string;
-    subscribes?: string[];
-    emits: Emit[];
-    virtualEmits?: Emit[];
-    action?: 'webhook';
-    webhookUrl?: string;
-    language?: string;
-    nodeComponentPath?: string;
-    filePath?: string;
-};
-export type FlowResponse = {
-    id: string;
-    name: string;
-    steps: FlowStep[];
-    edges: FlowEdge[];
-    error?: string;
-};
-export type FlowConfigResponse = {
-    id: string;
-    config: {
-        [stepName: string]: Position;
-    };
-};
-type FlowEdge = {
-    id: string;
-    source: string;
-    target: string;
-    data: EdgeData;
-};
-type Position = {
-    x: number;
-    y: number;
-};
-export declare const useGetFlowState: (flow: FlowResponse, flowConfig: FlowConfigResponse) => {
-    nodes: Node<NodeData>[];
-    edges: Edge<EdgeData>[];
-    onNodesChange: import("@xyflow/react").OnNodesChange<Node<NodeData>>;
-    onEdgesChange: import("@xyflow/react").OnEdgesChange<Edge<EdgeData>>;
-    nodeTypes: Record<string, React.ComponentType<any>>;
-};
-export {};

package/dist/src/views/flow/legend.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-export declare const Legend: FC<{
-    onHover: (type: string | null) => void;
-}>;

package/dist/src/views/flow/legend.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import { LayoutList, X } from 'lucide-react';
-import { useState } from 'react';
-import { colorMap } from '@/publicComponents/colorMap';
-const EdgeSwatch = ({ color, dashed }) => (_jsx("svg", { className: "my-1", width: "48", height: "10", viewBox: "0 0 48 10", xmlns: "http://www.w3.org/2000/svg", children: _jsx("line", { x1: "0", y1: "5", x2: "48", y2: "5", stroke: color, strokeWidth: "2", strokeDasharray: dashed ? '4' : 'none', strokeLinecap: "round" }) }));
-const legendItems = [
-    {
-        label: 'Event (Core)',
-        type: 'event',
-        color: colorMap.event,
-        description: 'Core logic components that process events.',
-    },
-    {
-        label: 'API',
-        type: 'api',
-        color: colorMap.api,
-        description: 'HTTP endpoints that trigger flows.',
-    },
-    {
-        label: 'Noop (Non-Operation)',
-        type: 'noop',
-        color: colorMap.noop,
-        description: 'Placeholder nodes for external processes.',
-    },
-    {
-        label: 'Cron',
-        type: 'cron',
-        color: colorMap.cron,
-        description: 'Scheduled tasks that run at specified intervals.',
-    },
-];
-const edgeLegendItems = [
-    {
-        label: 'Event Edge',
-        color: colorMap.event,
-        description: 'Represents an event emitted and subscribed by steps.',
-        dashed: true,
-    },
-    {
-        label: 'Virtual Edge',
-        color: 'hsl(var(--muted-foreground))',
-        description: 'Represents virtual connections.',
-        dashed: true,
-    },
-];
-export const Legend = ({ onHover }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsx("div", { className: 'absolute right-4 top-4 z-10 max-w-[500px]', children: _jsxs("div", { className: cn('rounded-lg border border-border bg-background/90 p-4 flex flex-col', !isExpanded && 'rounded-b-lg', isExpanded && 'gap-4'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [isExpanded && _jsx("div", { className: "text-sm text-muted-foreground uppercase", children: "Flow Legend" }), _jsx("div", { className: "flex-1 flex justify-end", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsExpanded(!isExpanded), className: "p-2 hover:bg-muted", children: isExpanded ? _jsx(X, { size: 16 }) : _jsx(LayoutList, { size: 16 }) }) })] }), _jsx("div", { className: cn('overflow-hidden transition-all duration-200 ease-in-out', isExpanded ? 'max-h-[600px] opacity-100' : 'max-h-0 opacity-0'), children: isExpanded && (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-2 gap-3", children: legendItems.map((item) => (_jsx("div", { onMouseEnter: () => onHover(item.type), onMouseLeave: () => onHover(null), className: "group cursor-pointer transition-all hover:bg-muted/20 rounded-md p-2", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "w-[8px] h-[8px] mt-[4px] rounded-full", style: { backgroundColor: item.color } }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-foreground text-sm font-medium", children: item.label }), _jsx("div", { className: "text-muted-foreground text-sm mt-0.5", children: item.description })] })] }) }, item.type))) }), _jsx("div", { className: "h-px bg-border my-4" }), _jsx("div", { className: "text-sm text-muted-foreground uppercase pb-4", children: "Edge Legend" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: edgeLegendItems.map((item) => (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(EdgeSwatch, { color: item.color, dashed: item.dashed }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-foreground text-sm font-medium", children: item.label }), _jsx("div", { className: "text-muted-foreground text-sm mt-0.5", children: item.description })] })] }, item.label))) })] })) })] }) }));
-};

package/dist/src/views/flow/nodes/api-flow-node.d.ts

@@ -1,4 +0,0 @@
-import { ApiNodeData } from './nodes.types';
-export declare const ApiFlowNode: ({ data }: {
-    data: ApiNodeData;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/views/flow/nodes/event-flow-node.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { EventNode } from '../../../publicComponents/event-node';
-export const EventFlowNode = ({ data }) => {
-    return _jsx(EventNode, { className: "relative", data: data });
-};

package/dist/src/views/flow/nodes/noop-flow-node.d.ts

@@ -1,4 +0,0 @@
-import { NoopNodeData } from './nodes.types';
-export declare const NoopFlowNode: ({ data }: {
-    data: NoopNodeData;
-}) => import("react/jsx-runtime").JSX.Element;