@motiadev/workbench 0.2.1-beta.44 → 0.2.1-beta.46

package/dist/middleware.js

@@ -4,18 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyMiddleware = void 0;
-const autoprefixer_1 = __importDefault(require("autoprefixer"));
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
-const tailwindcss_1 = __importDefault(require("tailwindcss"));
 const vite_1 = require("vite");
-const tailwind_config_1 = __importDefault(require("./tailwind.config"));
+const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
 const applyMiddleware = async (app) => {
     const vite = await (0, vite_1.createServer)({
         appType: 'spa',
         root: __dirname,
         server: {
             middlewareMode: true,
+            host: true,
             fs: {
                 allow: [__dirname, path_1.default.join(process.cwd(), './steps')],
             },
@@ -23,11 +22,7 @@ const applyMiddleware = async (app) => {
         resolve: {
             alias: { '@': path_1.default.resolve(__dirname, './src') },
         },
-        css: {
-            postcss: {
-                plugins: [(0, autoprefixer_1.default)(), (0, tailwindcss_1.default)(tailwind_config_1.default)],
-            },
-        },
+        plugins: [(0, plugin_react_1.default)()],
     });
     app.use(vite.middlewares);
     app.use('*', async (req, res, next) => {

package/dist/postcss.config.mjs

@@ -0,0 +1,9 @@
+import path from 'path'
+
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {
+      base: path.join(import.meta.dirname, './src'),
+    },
+  }
+}

package/dist/src/components/endpoints/endpoint-call.js

@@ -7,6 +7,7 @@ import { Textarea } from '../ui/textarea';
 import { EndpointBadge } from './endpoint-badge';
 import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
 import { usePathParams } from './hooks/use-path-params';
+import { useStateStream } from './hooks/use-state-stream';
 export const EndpointCall = ({ endpoint, onClose }) => {
     const shouldHaveBody = ['post', 'put', 'patch'].includes(endpoint.method.toLowerCase());
     const [isRequestLoading, setIsRequestLoading] = useState(false);
@@ -17,6 +18,7 @@ export const EndpointCall = ({ endpoint, onClose }) => {
     const pathParams = usePathParams(endpoint.path);
     const [pathParamsValues, setPathParamsValues] = useState(pathParams?.reduce((acc, param) => ({ ...acc, [param]: '' }), {}));
     const [queryParamsValues, setQueryParamsValues] = useState(endpoint.queryParams?.reduce((acc, param) => ({ ...acc, [param.name]: '' }), {}) ?? {});
+    const { data: responseBodyData, isStreamed } = useStateStream(responseBody);
     const isPlayEnabled = useMemo(() => {
         if (!pathParams)
             return true;
@@ -51,5 +53,5 @@ export const EndpointCall = ({ endpoint, onClose }) => {
         setExecutionTime(executionTime);
         setIsRequestLoading(false);
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2 overflow-y-auto", children: [_jsxs("div", { className: "text-xs flex flex-row gap-2 items-center justify-between w-full", children: [_jsx("span", { className: "font-bold", children: "Request" }), _jsx("div", { className: "flex flex-row gap-2 items-center hover:bg-white/10 rounded-md p-1", children: _jsx(X, { className: "cursor-pointer w-4 h-4", onClick: onClose }) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-center", children: [_jsx(EndpointBadge, { variant: endpoint.method, children: endpoint.method.toUpperCase() }), _jsx("span", { className: "text-md font-bold", children: endpoint.path })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: endpoint.description }), !!pathParams.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Path Params" }), _jsx("div", { className: "flex flex-col gap-4", children: pathParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param }), _jsx(Input, { className: "w-full", value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) })] }, param))) })] })), !!endpoint.queryParams?.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Query Params" }), _jsx("div", { className: "flex flex-col gap-4", children: endpoint.queryParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param.name }), _jsx(Input, { className: "w-full", value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) })] }, param.name))) })] })), shouldHaveBody && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Body" }), _jsx(Textarea, { className: "w-full font-mono font-medium min-h-[200px]", value: body, onChange: (e) => setBody(e.target.value) })] })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, disabled: isRequestLoading || !isPlayEnabled, children: [isRequestLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Play, {}), " Play"] }), responseCode !== undefined && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsxs("span", { className: "text-xs font-bold", children: [_jsx(EndpointBadge, { variant: responseCode >= 400 ? 'DELETE' : 'GET', children: responseCode }), " Execution time: ", _jsxs("span", { className: "text-muted-foreground", children: [executionTime, "ms"] })] }), _jsx("span", { className: "text-xs font-mono font-bold bg-black/50 p-2 rounded-lg whitespace-pre-wrap", children: JSON.stringify(responseBody, null, 2) })] }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2 overflow-y-auto", children: [_jsxs("div", { className: "text-xs flex flex-row gap-2 items-center justify-between w-full", children: [_jsx("span", { className: "font-bold", children: "Request" }), _jsx("div", { className: "flex flex-row gap-2 items-center hover:bg-white/10 rounded-md p-1", children: _jsx(X, { className: "cursor-pointer w-4 h-4", onClick: onClose }) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-center", children: [_jsx(EndpointBadge, { variant: endpoint.method, children: endpoint.method.toUpperCase() }), _jsx("span", { className: "text-md font-bold", children: endpoint.path })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: endpoint.description }), !!pathParams.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Path Params" }), _jsx("div", { className: "flex flex-col gap-4", children: pathParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param }), _jsx(Input, { className: "w-full", value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) })] }, param))) })] })), !!endpoint.queryParams?.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Query Params" }), _jsx("div", { className: "flex flex-col gap-4", children: endpoint.queryParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param.name }), _jsx(Input, { className: "w-full", value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) })] }, param.name))) })] })), shouldHaveBody && (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Body" }), _jsx(Textarea, { className: "w-full font-mono font-medium min-h-[200px]", value: body, onChange: (e) => setBody(e.target.value) })] })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, disabled: isRequestLoading || !isPlayEnabled, children: [isRequestLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Play, {}), " Play"] }), responseCode !== undefined && (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted", children: [_jsxs("span", { className: "text-xs font-bold", children: [_jsx(EndpointBadge, { variant: responseCode >= 400 ? 'DELETE' : 'GET', children: responseCode }), " Execution time: ", _jsxs("span", { className: "text-muted-foreground", children: [executionTime, "ms"] })] }), isStreamed && (_jsxs("span", { className: "flex flex-row items-center font-medium text-muted-foreground text-xs", children: [_jsxs("span", { className: "ml-1 inline-block w-2 h-2 rounded-full bg-green-500 mr-2 relative", children: [_jsx("span", { className: "absolute inset-0 rounded-full bg-green-500 animate-[ping_1.5s_ease-in-out_infinite]" }), _jsx("span", { className: "absolute inset-0 rounded-full bg-green-500" })] }), "Object is being streamed, this is not the actual response from the API Endpoint"] })), _jsx("span", { className: "text-xs font-mono font-bold bg-black/50 p-2 rounded-lg whitespace-pre-wrap", children: JSON.stringify(responseBodyData, null, 2) })] }))] }));
 };

package/dist/src/components/endpoints/hooks/use-get-endpoints.js

@@ -1,19 +1,8 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useSocket } from '../../../hooks/use-socket';
+import { useStreamGroup } from '@motiadev/stream-client-react';
 export const useGetEndpoints = () => {
-    const { socket } = useSocket();
-    const [endpoints, setEndpoints] = useState([]);
-    const fetchEndpoints = useCallback(() => {
-        fetch(`/api-endpoints`)
-            .then((res) => res.json())
-            .then((endpoints) => setEndpoints(endpoints));
-    }, []);
-    useEffect(() => {
-        fetchEndpoints();
-        socket.on('api-endpoint-changed', fetchEndpoints);
-        return () => {
-            socket.off('api-endpoint-changed', fetchEndpoints);
-        };
-    }, [socket, fetchEndpoints]);
+    const { data: endpoints } = useStreamGroup({
+        streamName: '__motia.api-endpoints',
+        groupId: 'default',
+    });
     return endpoints;
 };

package/dist/src/components/endpoints/hooks/use-state-stream.d.ts

@@ -0,0 +1,4 @@
+export declare const useStateStream: (object: Record<string, any> | undefined) => {
+    data: {} | undefined;
+    isStreamed: boolean;
+};

package/dist/src/components/endpoints/hooks/use-state-stream.js

@@ -0,0 +1,8 @@
+import { useStreamItem } from '@motiadev/stream-client-react';
+export const useStateStream = (object) => {
+    const { data } = useStreamItem(object?.__motia);
+    return {
+        data: data || object,
+        isStreamed: !!data,
+    };
+};

package/dist/src/components/ui/sidebar.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '@/lib/utils';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { Button } from './button';
 export const Sidebar = ({ children }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
-    return (_jsxs("div", { className: cn('max-h-screen overflow-y-auto transition-[width] duration-300 border-r border-zinc-800 border-solid', isCollapsed ? 'w-[50px]' : 'w-[250px]'), children: [_jsx("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(PanelLeftOpen, { className: "w-4 h-4" }) : _jsx(PanelLeftClose, { className: "w-4 h-4" }) }) }), !isCollapsed && _jsx("div", { className: "overflow-y-auto w-[250px]", children: children })] }));
+    return (_jsxs("div", { className: cn('max-h-screen overflow-y-auto transition-[width] duration-300 border-r border-zinc-800 border-solid overflow-hidden', isCollapsed ? 'w-[50px]' : 'w-[250px]'), children: [_jsx("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(PanelLeftOpen, { className: "w-4 h-4" }) : _jsx(PanelLeftClose, { className: "w-4 h-4" }) }) }), !isCollapsed && _jsx("div", { className: "overflow-y-auto w-[250px]", children: children })] }));
 };
 export const SidebarGroup = ({ children, title }) => {
     return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h2", { className: "text-xs font-bold text-muted-foreground px-4 py-2 uppercase", children: title }), children] }));

package/dist/src/hooks/use-list-flows.d.ts

@@ -4,6 +4,5 @@ type Flow = {
 };
 export declare const useListFlows: () => {
     flows: Flow[];
-    isLoading: boolean;
 };
 export {};

package/dist/src/hooks/use-list-flows.js

@@ -1,20 +1,8 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useFlowListener } from './use-flow-listener';
+import { useStreamGroup } from '@motiadev/stream-client-react';
 export const useListFlows = () => {
-    const [isLoading, setIsLoading] = useState(true);
-    const [flows, setFlows] = useState([]);
-    const onFlowAdded = useCallback((flowName) => {
-        setFlows((prev) => [...prev, { id: flowName, name: flowName }]);
-    }, [setFlows]);
-    const onFlowRemoved = useCallback((flowName) => {
-        setFlows((prev) => prev.filter((flow) => flow.id !== flowName));
-    }, [setFlows]);
-    useFlowListener({ onFlowAdded, onFlowRemoved });
-    useEffect(() => {
-        fetch('/flows')
-            .then((res) => res.json())
-            .then(setFlows)
-            .finally(() => setIsLoading(false));
-    }, []);
-    return { flows, isLoading };
+    const { data: flows } = useStreamGroup({
+        streamName: '__motia.flows',
+        groupId: 'default',
+    });
+    return { flows };
 };

package/dist/src/hooks/use-log-listener.js

@@ -1,14 +1,7 @@
-import { useEffect } from 'react';
 import { useLogs } from '@/stores/use-logs';
-import { useSocket } from './use-socket';
+import { useStreamEventHandler, useStreamGroup } from '@motiadev/stream-client-react';
 export const useLogListener = () => {
-    const { socket } = useSocket();
     const addLog = useLogs((state) => state.addLog);
-    useEffect(() => {
-        const onLog = (log) => addLog(log);
-        socket.on('log', onLog);
-        return () => {
-            socket.off('log', onLog);
-        };
-    }, [socket, addLog]);
+    const { event } = useStreamGroup({ streamName: '__motia.logs', groupId: 'default' });
+    useStreamEventHandler({ event, type: 'log', listener: addLog }, [addLog]);
 };

package/dist/src/index.css

@@ -1,154 +1,126 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@config "../tailwind.config.js";
 
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
+@custom-variant dark (&:is(.dark *));
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-size: 16px;
 
   color-scheme: light dark;
-  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
-
-:root {
   width: 100%;
-  color-scheme: light dark;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
   font-optical-sizing: auto;
+
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(0.98 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
 
 body {
@@ -158,108 +130,18 @@ body {
   width: 100%;
 }
 
-button,
-textarea {
-  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
-}
-
-strong {
-  font-weight: 800;
-}
-
 body,
 #root {
   width: 100dvw;
   height: 100dvh;
 }
 
-.react-flow__attribution {
-  display: none;
+strong {
+  font-weight: 800;
 }
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 4%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 4%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 4%;
-    --primary: 0 0% 11%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96%;
-    --secondary-foreground: 0 0% 11%;
-    --muted: 0 0% 96%;
-    --muted-foreground: 0 0% 46%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 0 0% 11%;
-    --destructive: 0 0% 60%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 91%;
-    --input: 0 0% 91%;
-    --ring: 0 0% 4%;
-    --chart-1: 0 0% 70%;
-    --chart-2: 0 0% 55%;
-    --chart-3: 0 0% 40%;
-    --chart-4: 0 0% 25%;
-    --chart-5: 0 0% 10%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 0 0% 26%;
-    --sidebar-primary: 0 0% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 0 0% 96%;
-    --sidebar-accent-foreground: 0 0% 10%;
-    --sidebar-border: 0 0% 91%;
-    --sidebar-ring: 0 0% 60%;
-  }
-  .dark {
-    --background: 0 0% 1%;
-    --border: 0 0% 18%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 4%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 4%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 11%;
-    --secondary: 0 0% 17%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 8%;
-    --muted-foreground: 0 0% 65%;
-    --accent: 0 0% 17%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 0% 31%;
-    --destructive-foreground: 0 0% 98%;
-    --input: 0 0% 17%;
-    --ring: 0 0% 84%;
-    --chart-1: 0 0% 80%;
-    --chart-2: 0 0% 65%;
-    --chart-3: 0 0% 50%;
-    --chart-4: 0 0% 35%;
-    --chart-5: 0 0% 20%;
-    --sidebar-background: 0 0% 10%;
-    --sidebar-foreground: 0 0% 96%;
-    --sidebar-primary: 0 0% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 0 0% 16%;
-    --sidebar-accent-foreground: 0 0% 96%;
-    --sidebar-border: 0 0% 16%;
-    --sidebar-ring: 0 0% 60%;
-  }
-  
-  .text-md {
-    font-size: 14px;
-  }
-
-  .text-lg {
-    font-size: 16px !important;
-  }
-
-  * {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
+.react-flow__attribution {
+  display: none;
 }
 
 @layer base {
@@ -284,25 +166,4 @@ body,
   stroke-dasharray: 5; /* length of dash pattern */
   stroke-linecap: round; /* round the dash ends */
   animation: flowDash 1s linear infinite;
-}
-
-.resize-handle:hover {
-  background-color: rgba(74, 222, 128, 0.2);
-}
-.resize-handle.dragging {
-  background-color: rgba(74, 222, 128, 0.4);
-}
-
-.bg-muted {
-  background-color: rgba(120, 120, 120, 0.10);
-}
-
-.text-muted {
-  color: rgba(120, 120, 120, 0.5);
-}
-
-.text-muted-foreground {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-
+}

package/dist/src/main.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MotiaStreamProvider } from '@motiadev/stream-client-react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from 'react-router';
+import { RootMotia } from './components/root-motia';
 import './index.css';
+import { RouteWrapper } from './route-wrapper';
 import { Index } from './routes';
+import { EndpointsPage } from './routes/endpoints-page';
 import { Flow } from './routes/flow';
-import { RouteWrapper } from './route-wrapper';
 import { LogsPage } from './routes/logs-page';
-import { RootMotia } from './components/root-motia';
 import { StatesPage } from './routes/states-page';
-import { EndpointsPage } from './routes/endpoints-page';
 // Render the app
 const rootElement = document.getElementById('root');
 if (!rootElement.innerHTML) {
     const root = createRoot(rootElement);
-    root.render(_jsx(StrictMode, { children: _jsx(BrowserRouter, { children: _jsx(RootMotia, { children: _jsx(RouteWrapper, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Index, {}) }), _jsx(Route, { path: "/flow/:id", element: _jsx(Flow, {}) }), _jsx(Route, { path: "/logs", element: _jsx(LogsPage, {}) }), _jsx(Route, { path: "/states", element: _jsx(StatesPage, {}) }), _jsx(Route, { path: "/endpoints", element: _jsx(EndpointsPage, {}) })] }) }) }) }) }));
+    root.render(_jsx(StrictMode, { children: _jsx(MotiaStreamProvider, { address: "ws://localhost:3000", children: _jsx(BrowserRouter, { children: _jsx(RootMotia, { children: _jsx(RouteWrapper, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Index, {}) }), _jsx(Route, { path: "/flow/:id", element: _jsx(Flow, {}) }), _jsx(Route, { path: "/logs", element: _jsx(LogsPage, {}) }), _jsx(Route, { path: "/states", element: _jsx(StatesPage, {}) }), _jsx(Route, { path: "/endpoints", element: _jsx(EndpointsPage, {}) })] }) }) }) }) }) }));
 }

package/dist/src/routes/flow.js

@@ -2,7 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { FlowView } from '@/views/flow/flow-view';
 import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router';
-import { useFlowUpdateListener } from '../hooks/use-flow-update-listener';
 export const Flow = () => {
     const { id } = useParams();
     const flowId = id;
@@ -17,7 +16,6 @@ export const Flow = () => {
         });
     }, [flowId]);
     useEffect(fetchFlow, [fetchFlow]);
-    useFlowUpdateListener(flowId, fetchFlow);
     if (!flow)
         return null;
     return (_jsx("div", { className: "w-full h-screen", children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));