@motiadev/workbench 0.0.1 → 0.0.3

package/dist/src/publicComponents/event-node.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { EventNodeProps } from './node-props';
+type Props = PropsWithChildren<EventNodeProps & {
+    excludePubsub?: boolean;
+    className?: string;
+}>;
+export declare const EventNode: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=event-node.d.ts.map

package/dist/src/publicComponents/event-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-node.d.ts","sourceRoot":"","sources":["../../../src/publicComponents/event-node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAIzC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7C,KAAK,KAAK,GAAG,iBAAiB,CAC5B,cAAc,GAAG;IACf,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CACF,CAAA;AAED,eAAO,MAAM,SAAS,UAAW,KAAK,4CAqBrC,CAAA"}

package/dist/src/publicComponents/event-node.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LanguageIndicator } from '../views/flow/nodes/language-indicator';
+import { BaseNode } from './base-node';
+import { Emits } from './emits';
+import { Subscribe } from './subscribe';
+export const EventNode = (props) => {
+    const { data, excludePubsub, children } = props;
+    return (_jsxs(BaseNode, { variant: "event", title: data.name, disableSourceHandle: !data.emits.length, disableTargetHandle: !data.subscribes.length, headerChildren: _jsx(LanguageIndicator, { language: data.language }), children: [data.description && _jsx("div", { className: "text-sm max-w-[300px] text-white/60", children: data.description }), children, !excludePubsub && (_jsx("div", { className: "space-y-2 pt-2 border-t border-white/10", children: _jsx(Subscribe, { data: data }) })), _jsx(Emits, { emits: data.emits })] }));
+};

package/dist/src/publicComponents/node-props.d.ts

@@ -0,0 +1,12 @@
+import { EventNodeData, ApiNodeData, NoopNodeData } from '../views/flow/nodes/nodes.types';
+export type BaseNodeProps = EventNodeProps | NoopNodeProps | ApiNodeProps;
+export type EventNodeProps = {
+    data: EventNodeData;
+};
+export type NoopNodeProps = {
+    data: NoopNodeData;
+};
+export type ApiNodeProps = {
+    data: ApiNodeData;
+};
+//# sourceMappingURL=node-props.d.ts.map

package/dist/src/publicComponents/node-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-props.d.ts","sourceRoot":"","sources":["../../../src/publicComponents/node-props.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAE1F,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,YAAY,CAAA;AAEzE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,YAAY,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,WAAW,CAAA;CAClB,CAAA"}

package/dist/src/publicComponents/node-props.js

@@ -0,0 +1 @@
+export {};

package/dist/src/publicComponents/noop-node.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { NoopNodeData } from '../views/flow/nodes/nodes.types';
+type Props = PropsWithChildren<{
+    data: NoopNodeData;
+}>;
+export declare const NoopNode: ({ data, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=noop-node.d.ts.map

package/dist/src/publicComponents/noop-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noop-node.d.ts","sourceRoot":"","sources":["../../../src/publicComponents/noop-node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAG9D,KAAK,KAAK,GAAG,iBAAiB,CAAC;IAC7B,IAAI,EAAE,YAAY,CAAA;CACnB,CAAC,CAAA;AAEF,eAAO,MAAM,QAAQ,uBAAwB,KAAK,4CAYjD,CAAA"}

package/dist/src/publicComponents/noop-node.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseNode } from './base-node';
+export const NoopNode = ({ data, children }) => {
+    return (_jsxs(BaseNode, { variant: "noop", title: data.name, disableSourceHandle: !data.emits?.length, disableTargetHandle: !data.subscribes?.length, children: [data.description && _jsx("div", { className: "text-sm max-w-[300px] text-white/60", children: data.description }), children] }));
+};

package/dist/src/publicComponents/subscribe.d.ts

@@ -0,0 +1,5 @@
+import { EventNodeData } from '../views/flow/nodes/nodes.types';
+export declare const Subscribe: React.FC<{
+    data: EventNodeData;
+}>;
+//# sourceMappingURL=subscribe.d.ts.map

package/dist/src/publicComponents/subscribe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"subscribe.d.ts","sourceRoot":"","sources":["../../../src/publicComponents/subscribe.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAA;AAE/D,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAevD,CAAA"}

package/dist/src/publicComponents/subscribe.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Eye } from 'lucide-react';
+export const Subscribe = ({ data }) => {
+    return (_jsx(_Fragment, { children: data.subscribes.map((subscribe) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-white/60", "data-testid": `subscribes__${subscribe}`, children: [_jsx(Eye, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono tracking-wider", children: subscribe })] }, subscribe))) }));
+};

package/dist/src/route-wrapper.d.ts

@@ -0,0 +1,4 @@
+export declare const RouteWrapper: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=route-wrapper.d.ts.map

package/dist/src/route-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-wrapper.d.ts","sourceRoot":"","sources":["../../src/route-wrapper.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,iBAAkB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAKvE,CAAA"}

package/dist/src/route-wrapper.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppSidebar } from './components/app-sidebar';
+import { SidebarProvider } from './components/ui/sidebar';
+export const RouteWrapper = ({ children }) => (_jsxs(SidebarProvider, { children: [_jsx(AppSidebar, {}), children] }));

package/dist/src/routeTree.gen.d.ts

@@ -0,0 +1,53 @@
+import { Route as rootRoute } from './routes/__root';
+import { Route as IndexImport } from './routes/index';
+import { Route as FlowIdImport } from './routes/flow/$id';
+declare const IndexRoute: import("@tanstack/react-router").Route<import("@tanstack/react-router").RootRoute<undefined, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown, unknown>, "/", "/", "/", "/", undefined, Record<never, string>, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown>;
+declare const FlowIdRoute: import("@tanstack/react-router").Route<import("@tanstack/react-router").RootRoute<undefined, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown, unknown>, "/flow/$id", "/flow/$id", "/flow/$id", "/flow/$id", undefined, Record<"id", string>, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, ({ params }: import("@tanstack/react-router").LoaderFnContext<import("@tanstack/react-router").RootRoute<undefined, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown, unknown>, "/flow/$id", Record<"id", string>, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext>) => Promise<{
+    flow: any;
+}>, unknown>;
+declare module '@tanstack/react-router' {
+    interface FileRoutesByPath {
+        '/': {
+            id: '/';
+            path: '/';
+            fullPath: '/';
+            preLoaderRoute: typeof IndexImport;
+            parentRoute: typeof rootRoute;
+        };
+        '/flow/$id': {
+            id: '/flow/$id';
+            path: '/flow/$id';
+            fullPath: '/flow/$id';
+            preLoaderRoute: typeof FlowIdImport;
+            parentRoute: typeof rootRoute;
+        };
+    }
+}
+export interface FileRoutesByFullPath {
+    '/': typeof IndexRoute;
+    '/flow/$id': typeof FlowIdRoute;
+}
+export interface FileRoutesByTo {
+    '/': typeof IndexRoute;
+    '/flow/$id': typeof FlowIdRoute;
+}
+export interface FileRoutesById {
+    __root__: typeof rootRoute;
+    '/': typeof IndexRoute;
+    '/flow/$id': typeof FlowIdRoute;
+}
+export interface FileRouteTypes {
+    fileRoutesByFullPath: FileRoutesByFullPath;
+    fullPaths: '/' | '/flow/$id';
+    fileRoutesByTo: FileRoutesByTo;
+    to: '/' | '/flow/$id';
+    id: '__root__' | '/' | '/flow/$id';
+    fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+    IndexRoute: typeof IndexRoute;
+    FlowIdRoute: typeof FlowIdRoute;
+}
+export declare const routeTree: import("@tanstack/react-router").RootRoute<undefined, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>;
+export {};
+//# sourceMappingURL=routeTree.gen.d.ts.map

package/dist/src/routeTree.gen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"routeTree.gen.d.ts","sourceRoot":"","sources":["../../src/routeTree.gen.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIzD,QAAA,MAAM,UAAU,mbAIP,CAAA;AAET,QAAA,MAAM,WAAW;;YAIR,CAAA;AAIT,OAAO,QAAQ,wBAAwB,CAAC;IACtC,UAAU,gBAAgB;QACxB,GAAG,EAAE;YACH,EAAE,EAAE,GAAG,CAAA;YACP,IAAI,EAAE,GAAG,CAAA;YACT,QAAQ,EAAE,GAAG,CAAA;YACb,cAAc,EAAE,OAAO,WAAW,CAAA;YAClC,WAAW,EAAE,OAAO,SAAS,CAAA;SAC9B,CAAA;QACD,WAAW,EAAE;YACX,EAAE,EAAE,WAAW,CAAA;YACf,IAAI,EAAE,WAAW,CAAA;YACjB,QAAQ,EAAE,WAAW,CAAA;YACrB,cAAc,EAAE,OAAO,YAAY,CAAA;YACnC,WAAW,EAAE,OAAO,SAAS,CAAA;SAC9B,CAAA;KACF;CACF;AAID,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,OAAO,UAAU,CAAA;IACtB,WAAW,EAAE,OAAO,WAAW,CAAA;CAChC;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,OAAO,UAAU,CAAA;IACtB,WAAW,EAAE,OAAO,WAAW,CAAA;CAChC;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,OAAO,SAAS,CAAA;IAC1B,GAAG,EAAE,OAAO,UAAU,CAAA;IACtB,WAAW,EAAE,OAAO,WAAW,CAAA;CAChC;AAED,MAAM,WAAW,cAAc;IAC7B,oBAAoB,EAAE,oBAAoB,CAAA;IAC1C,SAAS,EAAE,GAAG,GAAG,WAAW,CAAA;IAC5B,cAAc,EAAE,cAAc,CAAA;IAC9B,EAAE,EAAE,GAAG,GAAG,WAAW,CAAA;IACrB,EAAE,EAAE,UAAU,GAAG,GAAG,GAAG,WAAW,CAAA;IAClC,cAAc,EAAE,cAAc,CAAA;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,OAAO,UAAU,CAAA;IAC7B,WAAW,EAAE,OAAO,WAAW,CAAA;CAChC;AAOD,eAAO,MAAM,SAAS,uMAAgF,CAAA"}

package/dist/src/routeTree.gen.js

@@ -0,0 +1,45 @@
+/* eslint-disable */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+// Import Routes
+import { Route as rootRoute } from './routes/__root';
+import { Route as IndexImport } from './routes/index';
+import { Route as FlowIdImport } from './routes/flow/$id';
+// Create/Update Routes
+const IndexRoute = IndexImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => rootRoute,
+});
+const FlowIdRoute = FlowIdImport.update({
+    id: '/flow/$id',
+    path: '/flow/$id',
+    getParentRoute: () => rootRoute,
+});
+const rootRouteChildren = {
+    IndexRoute: IndexRoute,
+    FlowIdRoute: FlowIdRoute,
+};
+export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileTypes();
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/flow/$id"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/flow/$id": {
+      "filePath": "flow/$id.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

package/dist/src/routes/__root.d.ts

@@ -0,0 +1,2 @@
+export declare const Route: import("@tanstack/react-router").RootRoute<undefined, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown, unknown>;
+//# sourceMappingURL=__root.d.ts.map

package/dist/src/routes/__root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"__root.d.ts","sourceRoot":"","sources":["../../../src/routes/__root.tsx"],"names":[],"mappings":"AAyBA,eAAO,MAAM,KAAK,sLAAiD,CAAA"}

package/dist/src/routes/__root.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RouteWrapper } from '@/route-wrapper';
+import { createRootRoute, Outlet } from '@tanstack/react-router';
+import React, { Suspense } from 'react';
+const TanStackRouterDevtools = process.env.NODE_ENV === 'production'
+    ? () => null // Render nothing in production
+    : React.lazy(() => 
+    // Lazy load in development
+    import('@tanstack/router-devtools').then((res) => ({
+        default: res.TanStackRouterDevtools,
+        // For Embedded Mode
+        // default: res.TanStackRouterDevtoolsPanel
+    })));
+const RouteComponent = () => (_jsxs(RouteWrapper, { children: [_jsx(Outlet, {}), _jsx(Suspense, { children: _jsx(TanStackRouterDevtools, {}) })] }));
+export const Route = createRootRoute({ component: RouteComponent });

package/dist/src/routes/flow/$id.d.ts

@@ -0,0 +1,4 @@
+export declare const Route: import("@tanstack/react-router").Route<import("@tanstack/react-router").RootRoute<undefined, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown, unknown>, "/flow/$id", "/flow/$id", "/flow/$id", "/flow/$id", undefined, Record<"id", string>, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, ({ params }: import("@tanstack/react-router").LoaderFnContext<import("@tanstack/react-router").RootRoute<undefined, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown, unknown>, "/flow/$id", Record<"id", string>, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext>) => Promise<{
+    flow: any;
+}>, unknown>;
+//# sourceMappingURL=$id.d.ts.map

package/dist/src/routes/flow/$id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"$id.d.ts","sourceRoot":"","sources":["../../../../src/routes/flow/$id.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;YAOhB,CAAA"}

package/dist/src/routes/flow/$id.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FlowView } from '@/views/flow/flow-view';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/flow/$id')({
+    component: Flow,
+    loader: async ({ params }) => {
+        return fetch(`/flows/${params.id}`)
+            .then((res) => res.json())
+            .then((flow) => ({ flow }));
+    },
+});
+function Flow() {
+    const { flow } = Route.useLoaderData();
+    return (_jsx("div", { className: "w-screen h-screen", children: _jsx(FlowView, { flow: flow }) }));
+}

package/dist/src/routes/index.d.ts

@@ -0,0 +1,2 @@
+export declare const Route: import("@tanstack/react-router").Route<import("@tanstack/react-router").RootRoute<undefined, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown, unknown>, "/", "/", "/", "/", undefined, Record<never, string>, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, unknown>;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/routes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/routes/index.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,mbAEhB,CAAA"}

package/dist/src/routes/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+    component: Index,
+});
+function Index() {
+    return (_jsx("div", { className: "flex items-center justify-center w-full h-screen", children: _jsx("p", { className: "text-gray-500", children: "Select a flow" }) }));
+}

package/dist/src/stores/use-logs.d.ts

@@ -0,0 +1,15 @@
+export type Log = {
+    level: string;
+    time: number;
+    msg: string;
+    traceId: string;
+    flows: string[];
+    [key: string]: any;
+};
+export type LogsState = {
+    logs: Log[];
+    addLog: (log: Log) => void;
+    resetLogs: () => void;
+};
+export declare const useLogs: import("zustand").UseBoundStore<import("zustand").StoreApi<LogsState>>;
+//# sourceMappingURL=use-logs.d.ts.map

package/dist/src/stores/use-logs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-logs.d.ts","sourceRoot":"","sources":["../../../src/stores/use-logs.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAAG,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,OAAO,wEAIjB,CAAA"}

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

@@ -0,0 +1,6 @@
+import { create } from 'zustand';
+export const useLogs = create()((set) => ({
+    logs: [],
+    addLog: (log) => set((state) => ({ ...state, logs: [...state.logs, log] })),
+    resetLogs: () => set({ logs: [] }),
+}));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    color: string;
+    id: string;
+};
+export declare const ArrowHead: React.FC<Props>;
+export {};
+//# sourceMappingURL=arrow-head.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-head.d.ts","sourceRoot":"","sources":["../../../../src/views/flow/arrow-head.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKrC,CAAA"}

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ArrowHead = (props) => (_jsxs("marker", { id: props.id, viewBox: "-5 -5 10 10", markerUnits: "strokeWidth", markerWidth: "10", markerHeight: "10", children: [_jsx("line", { x1: 0, y1: 0, x2: 2, y2: -2, stroke: props.color, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" }), _jsx("line", { x1: -2, y1: -2, x2: 0, y2: 0, stroke: props.color, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" })] }));

package/dist/src/views/flow/base-edge.d.ts

@@ -0,0 +1,4 @@
+import { EdgeProps } from '@xyflow/react';
+import React from 'react';
+export declare const BaseEdge: React.FC<EdgeProps>;
+//# sourceMappingURL=base-edge.d.ts.map

package/dist/src/views/flow/base-edge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-edge.d.ts","sourceRoot":"","sources":["../../../../src/views/flow/base-edge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,SAAS,EAAqB,MAAM,eAAe,CAAA;AAC3F,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2BxC,CAAA"}

package/dist/src/views/flow/base-edge.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseEdge as BaseReactFlowEdge, getSmoothStepPath } from '@xyflow/react';
+export const BaseEdge = (props) => {
+    const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props;
+    const [edgePath] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+        borderRadius: 20,
+        offset: 10,
+    });
+    return (_jsx(BaseReactFlowEdge, { path: edgePath, style: {
+            stroke: data?.variant === 'virtual' ? 'rgb(147, 169, 197)' : 'rgb(133, 176, 132)',
+            strokeWidth: 0.5,
+            shapeRendering: 'geometricPrecision',
+            fill: 'none',
+            mixBlendMode: 'screen',
+        }, className: "edge-animated" }));
+};

package/dist/src/views/flow/flow-loader.d.ts

@@ -0,0 +1,2 @@
+export declare const FlowLoader: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=flow-loader.d.ts.map

package/dist/src/views/flow/flow-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-loader.d.ts","sourceRoot":"","sources":["../../../../src/views/flow/flow-loader.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,+CAEtB,CAAA"}

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FlowLoader = () => {
+    return _jsx("div", { className: "absolute z-10 inset-0 w-full h-full bg-[#060911]" });
+};

package/dist/src/views/flow/flow-view.d.ts

@@ -0,0 +1,8 @@
+import '@xyflow/react/dist/style.css';
+import { FlowResponse } from './hooks/use-get-flow-state';
+type Props = {
+    flow: FlowResponse;
+};
+export declare const FlowView: React.FC<Props>;
+export {};
+//# sourceMappingURL=flow-view.d.ts.map

package/dist/src/views/flow/flow-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-view.d.ts","sourceRoot":"","sources":["../../../../src/views/flow/flow-view.tsx"],"names":[],"mappings":"AACA,OAAO,8BAA8B,CAAA;AAGrC,OAAO,EAAmB,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAY1E,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,YAAY,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmDpC,CAAA"}

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Background, BackgroundVariant, ReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { BaseEdge } from './base-edge';
+import { ArrowHead } from './arrow-head';
+import { useGetFlowState } from './hooks/use-get-flow-state';
+import { useCallback, useEffect, useState } from 'react';
+import { NodeOrganizer } from './node-organizer';
+import { FlowLoader } from './flow-loader';
+import { useLogListener } from '@/hooks/use-log-listener';
+import { LogConsole } from '@/components/log-console';
+import { Legend } from './legend';
+const edgeTypes = {
+    base: BaseEdge,
+};
+export const FlowView = ({ flow }) => {
+    const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow);
+    const [initialized, setInitialized] = useState(false);
+    const [hoveredType, setHoveredType] = useState(null);
+    useLogListener();
+    useEffect(() => setInitialized(false), [flow]);
+    const onInitialized = useCallback(() => {
+        setTimeout(() => setInitialized(true), 10);
+    }, []);
+    const highlightClass = (nodeType) => {
+        if (!hoveredType)
+            return '';
+        return nodeType === hoveredType
+            ? 'shadow-[0_0_15px_rgba(255,255,255,0.15)] border border-white/30 scale-[1.02] transition-all duration-300'
+            : 'opacity-30 transition-all duration-300';
+    };
+    const nodesWithHighlights = nodes.map((node) => ({
+        ...node,
+        className: highlightClass(node.data.type), // Access type from `data.type`
+    }));
+    if (!nodeTypes) {
+        return null;
+    }
+    return (_jsxs("div", { className: "w-full h-full relative bg-black", children: [!initialized && _jsx(FlowLoader, {}), _jsx(Legend, { onHover: setHoveredType }), _jsxs(ReactFlow, { nodes: nodesWithHighlights, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1, color: "#444" }), _jsx(NodeOrganizer, { onInitialized: onInitialized }), _jsx("svg", { children: _jsx("defs", { children: _jsx(ArrowHead, { color: "#B3B3B3", id: "arrowhead" }) }) })] }), _jsx(LogConsole, {})] }));
+};

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

@@ -0,0 +1,40 @@
+import { Edge, Node } from '@xyflow/react';
+import type { EdgeData, NodeData } from '../nodes/nodes.types';
+type Emit = string | {
+    type: string;
+    label?: string;
+};
+type FlowStep = {
+    id: string;
+    name: string;
+    type: 'event' | 'api' | 'noop';
+    description?: string;
+    subscribes?: string[];
+    emits: Emit[];
+    virtualEmits?: Emit[];
+    action?: 'webhook';
+    webhookUrl?: string;
+    language?: string;
+    nodeComponentPath?: string;
+};
+export type FlowResponse = {
+    id: string;
+    name: string;
+    steps: FlowStep[];
+    edges: FlowEdge[];
+};
+type FlowEdge = {
+    id: string;
+    source: string;
+    target: string;
+    data: EdgeData;
+};
+export declare const useGetFlowState: (flow: FlowResponse) => {
+    nodes: Node<NodeData>[];
+    edges: Edge<EdgeData>[];
+    onNodesChange: import("@xyflow/react").OnNodesChange<Node<NodeData>>;
+    onEdgesChange: import("@xyflow/react").OnEdgesChange<Edge<EdgeData>>;
+    nodeTypes: Record<string, import("react").ComponentType<any>> | undefined;
+};
+export {};
+//# sourceMappingURL=use-get-flow-state.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-get-flow-state.d.ts","sourceRoot":"","sources":["../../../../../src/views/flow/hooks/use-get-flow-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAgC,MAAM,eAAe,CAAA;AAExE,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAK9D,KAAK,IAAI,GAAG,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAErD,KAAK,QAAQ,GAAG;IACd,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,KAAK,EAAE,QAAQ,EAAE,CAAA;CAClB,CAAA;AAED,KAAK,QAAQ,GAAG;IACd,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,QAAQ,CAAA;CACf,CAAA;AAyCD,eAAO,MAAM,eAAe,SAAU,YAAY;;;;;;CAgBjD,CAAA"}

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

@@ -0,0 +1,48 @@
+import { useEdgesState, useNodesState } from '@xyflow/react';
+import { useEffect, useState } from 'react';
+import { ApiFlowNode } from '../nodes/api-flow-node';
+import { NoopFlowNode } from '../nodes/noop-flow-node';
+import { EventFlowNode } from '../nodes/event-flow-node';
+async function importFlow(flow) {
+    const nodeTypes = {
+        event: EventFlowNode,
+        api: ApiFlowNode,
+        noop: NoopFlowNode,
+    };
+    // Load custom node components if they exist
+    for (const step of flow.steps) {
+        if (step.nodeComponentPath) {
+            const module = await import(/* @vite-ignore */ step.nodeComponentPath);
+            nodeTypes[step.nodeComponentPath] = module.default;
+        }
+    }
+    // Create nodes from steps
+    const nodes = flow.steps.map((step) => ({
+        id: step.id,
+        type: step.nodeComponentPath ? step.nodeComponentPath : step.type,
+        position: { x: 0, y: 0 },
+        data: step,
+        language: step.language,
+    }));
+    // Use the edges provided by the API, adding required ReactFlow properties
+    const edges = flow.edges.map((edge) => ({
+        ...edge,
+        type: 'base',
+    }));
+    return { nodes, edges, nodeTypes };
+}
+export const useGetFlowState = (flow) => {
+    const [nodeTypes, setNodeTypes] = useState();
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    useEffect(() => {
+        if (!flow)
+            return;
+        importFlow(flow).then(({ nodes, edges, nodeTypes }) => {
+            setNodes(nodes);
+            setEdges(edges);
+            setNodeTypes(nodeTypes);
+        });
+    }, [flow]);
+    return { nodes, edges, onNodesChange, onEdgesChange, nodeTypes };
+};

package/dist/src/views/flow/hooks/use-organize-nodes.d.ts

@@ -0,0 +1,4 @@
+import { Edge, Node } from '@xyflow/react';
+import { EventNodeData, EdgeData, ApiNodeData } from '../nodes/nodes.types';
+export declare const useOrganizeNodes: (nodes: Node<EventNodeData | ApiNodeData>[], edges: Edge<EdgeData>[], setNodes: (nodes: Node<EventNodeData | ApiNodeData>[]) => void) => void;
+//# sourceMappingURL=use-organize-nodes.d.ts.map

package/dist/src/views/flow/hooks/use-organize-nodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-organize-nodes.d.ts","sourceRoot":"","sources":["../../../../../src/views/flow/hooks/use-organize-nodes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAG1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AA0C3E,eAAO,MAAM,gBAAgB,UACpB,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC,EAAE,SACnC,IAAI,CAAC,QAAQ,CAAC,EAAE,YACb,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC,EAAE,KAAK,IAAI,SAW/D,CAAA"}

package/dist/src/views/flow/hooks/use-organize-nodes.js

@@ -0,0 +1,43 @@
+import dagre from 'dagre';
+import { useEffect, useRef } from 'react';
+const organizeNodes = (nodes, edges) => {
+    const dagreGraph = new dagre.graphlib.Graph({ compound: true });
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    // Top-to-bottom layout
+    dagreGraph.setGraph({ rankdir: 'TB', ranksep: 80, nodesep: 60, edgesep: 20, ranker: 'tight-tree' });
+    nodes.forEach((node) => {
+        dagreGraph.setNode(node.id, { width: node.measured?.width, height: node.measured?.height });
+    });
+    edges.forEach((edge) => {
+        if (typeof edge.label === 'string') {
+            dagreGraph.setEdge(edge.source, edge.target, {
+                label: edge.label ?? '',
+                width: edge.label.length * 40, // Add width for the label
+                height: 30, // Add height for the label
+                labelpos: 'c', // Position label in center
+            });
+        }
+        else {
+            dagreGraph.setEdge(edge.source, edge.target);
+        }
+    });
+    dagre.layout(dagreGraph);
+    return nodes.map((node) => {
+        const { x, y } = dagreGraph.node(node.id);
+        const position = {
+            x: x - (node.measured?.width ?? 0) / 2,
+            y: y - (node.measured?.height ?? 0) / 2,
+        };
+        return { ...node, position };
+    });
+};
+export const useOrganizeNodes = (nodes, edges, setNodes) => {
+    const organizedRef = useRef(false);
+    useEffect(() => {
+        if (!nodes.length || !edges.length || !nodes[0].measured || organizedRef.current)
+            return;
+        const layoutedNodes = organizeNodes(nodes, edges);
+        setNodes(layoutedNodes);
+        organizedRef.current = true;
+    }, [nodes, edges, setNodes]);
+};

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

@@ -0,0 +1,4 @@
+export declare const Legend: ({ onHover }: {
+    onHover: (type: string | null) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=legend.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../../src/views/flow/legend.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,gBAAiB;IAAE,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAAE,4CA+F7E,CAAA"}