@motiadev/workbench 0.0.6 → 0.0.7-build.20250529212805

package/dist/src/components/endpoints/hooks/utils.d.ts

@@ -0,0 +1 @@
+export declare const convertJsonSchemaToJson: (schema: Record<string, any>) => any;

package/dist/src/components/endpoints/hooks/utils.js

@@ -0,0 +1,29 @@
+export const convertJsonSchemaToJson = (schema) => {
+    if (!schema)
+        return {};
+    if (schema.type === 'object') {
+        const result = {};
+        if (schema.properties) {
+            Object.entries(schema.properties).forEach(([key, value]) => {
+                result[key] = convertJsonSchemaToJson(value);
+            });
+        }
+        return result;
+    }
+    switch (schema.type) {
+        case 'array':
+            return [convertJsonSchemaToJson(schema.items)];
+        case 'string':
+            return schema.description ?? 'string';
+        case 'number':
+            return schema.description ?? 0;
+        case 'integer':
+            return 0;
+        case 'boolean':
+            return schema.description ?? false;
+        case 'null':
+            return schema.description ?? null;
+        default:
+            return undefined;
+    }
+};

package/dist/src/components/endpoints/response-body.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    status: string;
+    body: Record<string, any>;
+};
+export declare const ResponseBody: React.FC<Props>;
+export {};

package/dist/src/components/endpoints/response-body.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
+export const ResponseBody = ({ status, body }) => {
+    const { body: responseBody } = useJsonSchemaToJson(body);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: status }), _jsx("span", { className: "text-xs font-mono dark:bg-black/50 bg-white/50 p-2 rounded-lg whitespace-pre-wrap", children: responseBody })] }));
+};

package/dist/src/components/endpoints/selected-endpoint.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ApiEndpoint } from './hooks/use-get-endpoints';
+type Props = {
+    endpoint: ApiEndpoint;
+};
+export declare const SelectedEndpoint: React.FC<Props>;
+export {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
+import { ResponseBody } from './response-body';
+export const SelectedEndpoint = ({ endpoint }) => {
+    const { body: requestBody } = useJsonSchemaToJson(endpoint.bodySchema);
+    return (_jsxs(_Fragment, { children: [endpoint.queryParams && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Query Params" }), _jsx("div", { className: "flex flex-col gap-2 flex-1 p-2 rounded-lg bg-muted table", children: endpoint.queryParams.map((param) => (_jsxs("span", { className: "text-xs table-row", children: [_jsx("span", { className: "font-bold table-cell", children: param.name }), _jsx("span", { className: "text-xs table-cell", children: param.description })] }, param.name))) })] })), requestBody && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Request Body" }), _jsx("span", { className: "text-xs font-mono dark:bg-black/50 bg-white/50 p-2 rounded-lg whitespace-pre-wrap", children: requestBody })] })), endpoint.responseSchema && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Response" }), Object.entries(endpoint.responseSchema).map(([status, schema]) => (_jsx(ResponseBody, { status: status, body: schema }, status)))] }))] }));
+};

package/dist/src/components/{log-console.d.ts → logs/log-console.d.ts}

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

package/dist/src/components/logs/log-console.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLogs } from '@/stores/use-logs';
+import { ChevronDown, ChevronUp, Trash2 } from 'lucide-react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Button } from '../ui/button';
+import { cn } from '@/lib/utils';
+import { Logs } from './logs';
+const MIN_HEIGHT = 100;
+const DEFAULT_HEIGHT = 200;
+const ClearLogsButton = () => {
+    const hasLog = useLogs((state) => state.logs.length > 0);
+    const resetLogs = useLogs((state) => state.resetLogs);
+    if (!hasLog) {
+        return null;
+    }
+    return (_jsxs(Button, { variant: "outline", onClick: resetLogs, children: [_jsx(Trash2, { className: "w-4 h-4" }), "Clear logs"] }));
+};
+export const LogConsole = () => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [height, setHeight] = useState(DEFAULT_HEIGHT);
+    const dragRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const contentRef = useRef(null);
+    const setUnreadLogsCount = useLogs((state) => state.setUnreadLogsCount);
+    const toggleExpand = useCallback(() => {
+        setIsExpanded((prev) => !prev);
+        setUnreadLogsCount(0);
+    }, [setUnreadLogsCount]);
+    const handleMouseDown = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(true);
+    }, []);
+    useEffect(() => {
+        const handleMouseUp = () => {
+            setIsDragging(false);
+        };
+        const handleMouseMove = (e) => {
+            if (!isDragging)
+                return;
+            const windowHeight = window.innerHeight;
+            const mouseY = e.clientY;
+            const newHeight = windowHeight - mouseY;
+            if (newHeight >= MIN_HEIGHT) {
+                setHeight(newHeight);
+            }
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging]);
+    useEffect(() => {
+        if (contentRef.current) {
+            if (isExpanded) {
+                contentRef.current.style.height = `${height}px`;
+            }
+            else {
+                contentRef.current.style.height = '0px';
+            }
+        }
+    }, [isExpanded, height]);
+    return (_jsxs("div", { className: "absolute bottom-0 left-0 right-0 bg-background/80 border border-solid border-border m-4 rounded-lg", children: [_jsx("div", { ref: dragRef, onMouseDown: handleMouseDown, className: cn('absolute -top-1 left-0 right-0 h-1 cursor-ns-resize hover:bg-background/40', isDragging && 'bg-background/40') }), _jsxs("div", { className: "text-muted-foreground flex justify-between w-full items-center p-4 gap-2", children: [_jsx("label", { className: "w-full text-left justify-start h-full text-md uppercase", children: "Logs" }), _jsx(ClearLogsButton, {}), _jsx(Button, { variant: "outline", onClick: toggleExpand, children: isExpanded ? _jsx(ChevronDown, { className: "w-4 h-4" }) : _jsx(ChevronUp, { className: "w-4 h-4" }) })] }), _jsx("div", { ref: contentRef, style: {
+                    overflow: 'hidden',
+                    transition: 'height 0.2s ease-out',
+                    height: isExpanded ? `${height}px` : '0px',
+                }, children: _jsx(Logs, {}) })] }));
+};

package/dist/src/components/logs/log-detail.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Log } from '../../stores/use-logs';
+type Props = {
+    log?: Log;
+    onClose: () => void;
+};
+export declare const LogDetail: React.FC<Props>;
+export {};

package/dist/src/components/logs/log-detail.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LogLevelBadge } from './log-level-badge';
+import { LogField } from './log-field';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet';
+const defaultProps = ['msg', 'time', 'level', 'step', 'flows', 'traceId'];
+export const LogDetail = ({ log, onClose }) => {
+    const isOpen = !!log;
+    const onOpenChange = (open) => {
+        if (!open) {
+            onClose();
+        }
+    };
+    const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key));
+    return (_jsx(Sheet, { open: isOpen, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "flex flex-col h-full", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Logs details" }), _jsx(SheetDescription, { children: "Log details and application." })] }), _jsx("div", { className: "font-mono overflow-y-auto", children: log && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(LogField, { label: "Level", value: _jsx(LogLevelBadge, { level: log.level }), className: "flex-1" }), _jsx(LogField, { label: "Time", value: new Date(log.time).toLocaleString(), className: "flex-1" })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(LogField, { label: "Step", value: log.step, className: "flex-1" }), _jsx(LogField, { label: "Flows", value: log.flows.join(', '), className: "flex-1" })] }), _jsx(LogField, { label: "Trace ID", value: log.traceId }), _jsx(LogField, { label: "Message", value: log.msg }), otherProps.map((key) => (_jsx(LogField, { label: key, value: log[key] }, key)))] })) })] }) }));
+};

package/dist/src/components/logs/log-field.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    label: string;
+    value: string | React.ReactNode;
+    className?: string;
+};
+export declare const LogField: ({ label, value, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/logs/log-field.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../../lib/utils';
+const Value = ({ value }) => {
+    const displayValue = typeof value === 'string' ? value : JSON.stringify(value);
+    return (_jsx("div", { className: "dark:text-gray-400 text-md", "aria-label": displayValue, children: displayValue }));
+};
+const LogValue = ({ value }) => {
+    if (React.isValidElement(value)) {
+        return value;
+    }
+    if (typeof value === 'object') {
+        const valueObject = value;
+        return (_jsx("div", { className: "flex flex-col gap-4", children: Object.keys(valueObject).map((key) => (_jsxs("div", { className: "ml-4 flex flex-col gap-2", children: [_jsx("span", { className: "text-md font-semibold", children: key }), _jsx("span", { className: "text-md", children: value ? (_jsx(LogValue, { value: valueObject[key] })) : (_jsx(Value, { value: valueObject[key] })) })] }, key))) }));
+    }
+    return _jsx(Value, { value: value });
+};
+export const LogField = ({ label, value, className }) => {
+    return (_jsx("div", { className: cn('flex row text-foreground p-2', className), children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-md font-semibold", children: label }), _jsx("span", { className: "", children: value ? _jsx(LogValue, { value: value }) : _jsx(Value, { value: value }) })] }) }));
+};

package/dist/src/components/{log-level-badge.d.ts → logs/log-level-badge.d.ts}

@@ -1,4 +1,5 @@
+import React from 'react';
 export declare const LogLevelBadge: React.FC<{
     level: string;
+    className?: string;
 }>;
-//# sourceMappingURL=log-level-badge.d.ts.map

package/dist/src/components/{log-level-badge.js → logs/log-level-badge.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge } from './ui/badge';
+import { Badge } from '../ui/badge';
 export const LogLevelBadge = (props) => {
     const map = {
         info: 'info',
@@ -7,5 +7,5 @@ export const LogLevelBadge = (props) => {
         warn: 'warning',
         debug: 'info',
     };
-    return _jsx(Badge, { variant: map[props.level], children: props.level });
+    return (_jsx(Badge, { variant: map[props.level], className: props.className, children: props.level }));
 };

package/dist/src/components/logs/log-level-dot.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const LogLevelDot: React.FC<{
+    level: string;
+}>;

package/dist/src/components/logs/log-level-dot.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+const badgeVariants = cva('text-xs font-medium tracking-wide w-2 h-2 rounded-full mx-1', {
+    variants: {
+        variant: {
+            info: 'bg-sky-500',
+            trace: 'bg-sky-500',
+            debug: 'bg-sky-500',
+            error: 'bg-rose-500',
+            fatal: 'bg-rose-500',
+            warn: 'bg-amber-500',
+        },
+    },
+});
+export const LogLevelDot = ({ level }) => {
+    return _jsx("div", { className: badgeVariants({ variant: level }) });
+};

package/dist/src/components/logs/logs.d.ts

@@ -0,0 +1 @@
+export declare const Logs: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/logs/logs.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
+import { useLogs } from '@/stores/use-logs';
+import { useState } from 'react';
+import { LogDetail } from './log-detail';
+import { LogLevelDot } from './log-level-dot';
+const timestamp = (time) => {
+    const date = new Date(Number(time));
+    return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+};
+export const Logs = () => {
+    const logs = useLogs((state) => state.logs);
+    const [selectedLog, setSelectedLog] = useState();
+    const handleLogClick = (log) => {
+        setSelectedLog(log);
+    };
+    return (_jsxs("div", { className: "overflow-y-auto h-full text-bold p-4", children: [_jsx(LogDetail, { log: selectedLog, onClose: () => setSelectedLog(undefined) }), _jsx(Table, { children: _jsx(TableBody, { className: "text-md font-mono", children: logs.map((log, index) => (_jsxs(TableRow, { className: "cursor-pointer even:bg-muted/50 border-0", onClick: () => handleLogClick(log), children: [_jsxs(TableCell, { "data-testid": `time-${index}`, className: "whitespace-nowrap flex items-center gap-2", children: [_jsx(LogLevelDot, { level: log.level }), timestamp(log.time)] }), _jsx(TableCell, { "data-testid": `trace-${log.traceId}`, className: "whitespace-nowrap text-md cursor-pointer hover:text-primary text-muted-foreground text-xs font-mono", children: log.traceId }), _jsx(TableCell, { "data-testid": `step-${index}`, "aria-label": log.step, className: "whitespace-nowrap text-md font-mono", children: log.step }), _jsx(TableCell, { "data-testid": `msg-${index}`, "aria-label": log.msg, className: "whitespace-nowrap text-md font-mono max-w-[500px] truncate w-full", children: log.msg })] }, index))) }) })] }));
+};

package/dist/src/components/root-motia.d.ts

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from 'react';
+export declare const RootMotia: React.FC<PropsWithChildren>;

package/dist/src/components/root-motia.js

@@ -0,0 +1,5 @@
+import { useLogListener } from '../hooks/use-log-listener';
+export const RootMotia = ({ children }) => {
+    useLogListener();
+    return children;
+};

package/dist/src/components/states/hooks/states-hooks.d.ts

@@ -0,0 +1,3 @@
+export declare const useGetTraces: () => string[];
+export declare const useGetFields: (traceId: string | undefined) => string[];
+export declare const useGetValues: (traceId: string | undefined, field: string | undefined) => any;

package/dist/src/components/states/hooks/states-hooks.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+export const useGetTraces = () => {
+    const [traces, setTraces] = useState([]);
+    useEffect(() => {
+        fetch('/motia/state')
+            .then((res) => res.json())
+            .then((data) => setTraces(data));
+    }, []);
+    return traces;
+};
+export const useGetFields = (traceId) => {
+    const [fields, setFields] = useState([]);
+    useEffect(() => {
+        if (!traceId) {
+            setFields([]);
+        }
+        else {
+            fetch(`/motia/state/${traceId}`)
+                .then((res) => res.json())
+                .then((data) => setFields(data));
+        }
+    }, [traceId]);
+    return fields;
+};
+export const useGetValues = (traceId, field) => {
+    const [values, setValues] = useState();
+    useEffect(() => {
+        setValues(undefined);
+        if (traceId && field) {
+            fetch(`/motia/state/${traceId}/${field}`)
+                .then((res) => res.json())
+                .then((data) => setValues(data));
+        }
+    }, [traceId, field]);
+    return values;
+};

package/dist/src/components/states/state-detail.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    state?: any;
+    onClose: () => void;
+};
+export declare const StateDetail: React.FC<Props>;
+export {};

package/dist/src/components/states/state-detail.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StateValue } from './state-value';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet';
+export const StateDetail = ({ state, onClose }) => {
+    const isOpen = !!state;
+    const onOpenChange = (open) => {
+        if (!open) {
+            onClose();
+        }
+    };
+    return (_jsx(Sheet, { open: isOpen, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "flex flex-col h-full", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "State details" }), _jsx(SheetDescription, { children: "State details and application." })] }), _jsx("div", { className: "font-mono overflow-y-auto", children: state && (_jsx("div", { className: "flex flex-col gap-2", children: _jsx(StateValue, { value: state, isRoot: true }) })) })] }) }));
+};

package/dist/src/components/states/state-value.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    value: unknown;
+    isRoot?: boolean;
+    label?: string;
+};
+export declare const StateValue: React.FC<Props>;
+export {};

package/dist/src/components/states/state-value.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { SquareMinus, SquarePlus } from 'lucide-react';
+import React, { useState } from 'react';
+import { cn } from '../../lib/utils';
+const valueVariants = cva('text-muted-foreground text-sm py-2', {
+    variants: {
+        variant: {
+            boolean: 'text-sky-400',
+            number: 'text-teal-400',
+            undefined: 'text-muted-foreground',
+            string: 'text-muted-foreground',
+            object: 'text-gray-800',
+        },
+    },
+    defaultVariants: {
+        variant: 'string',
+    },
+});
+const Value = ({ value, variant, label, }) => {
+    const displayValue = typeof value === 'string' ? value : JSON.stringify(value);
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [label && _jsx("div", { className: "text-md font-semibold py-2", children: label }), _jsx("div", { className: valueVariants({ variant }), children: displayValue })] }));
+};
+export const StateValue = ({ value, label, isRoot = false }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const toggle = () => setIsOpen(!isOpen);
+    if (React.isValidElement(value)) {
+        return value;
+    }
+    if (typeof value === 'boolean') {
+        return _jsx(Value, { label: label, variant: "boolean", value: value ? 'true' : 'false' });
+    }
+    if (typeof value === 'number') {
+        return _jsx(Value, { label: label, variant: "number", value: value });
+    }
+    if (typeof value === 'undefined') {
+        return _jsx(Value, { label: label, variant: "undefined", value: value });
+    }
+    if (typeof value === 'string') {
+        return _jsx(Value, { label: label, variant: "string", value: value });
+    }
+    const isArray = Array.isArray(value);
+    const [openBracket, closeBracket] = isRoot ? [] : isArray ? ['[', ']'] : ['{', '}'];
+    if (typeof value === 'object' && !!value) {
+        const valueObject = value;
+        return (_jsxs("div", { className: "flex flex-col gap-2", children: [(label || openBracket) && (_jsxs("div", { className: "flex gap-1 items-center text-md font-semibold hover:bg-gray-800 rounded-md py-2", onClick: toggle, children: [isOpen ? (_jsx(SquareMinus, { className: "w-4 h-4 text-muted-foreground" })) : (_jsx(SquarePlus, { className: "w-4 h-4 text-muted-foreground" })), label, ' ', !isRoot && (_jsxs("span", { className: "text-muted-foreground text-sm", children: [openBracket, !isOpen && ` ... ${closeBracket}`] }))] })), isOpen &&
+                    !!valueObject &&
+                    Object.keys(valueObject).map((key) => (_jsx("div", { className: cn('flex flex-col gap-2', !isRoot && 'ml-4'), children: _jsx("span", { className: "text-md", children: _jsx(StateValue, { label: isArray ? undefined : key, value: valueObject[key] }) }) }, key))), !isRoot && isOpen && _jsx("span", { className: "text-muted-foreground text-sm", children: closeBracket })] }));
+    }
+    return _jsx(Value, { value: undefined, variant: "object" });
+};

package/dist/src/components/states/states.d.ts

@@ -0,0 +1 @@
+export declare const States: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/states/states.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
+import { useState } from 'react';
+import { useGetFields, useGetTraces, useGetValues } from './hooks/states-hooks';
+import { StateDetail } from './state-detail';
+export const States = () => {
+    const [selectedTraceId, setSelectedTraceId] = useState();
+    const [selectedState, setSelectedState] = useState(); // eslint-disable-line @typescript-eslint/no-explicit-any
+    const traces = useGetTraces();
+    const fields = useGetFields(selectedTraceId);
+    const values = useGetValues(selectedTraceId, selectedState);
+    const handleTraceClick = (traceId) => {
+        setSelectedTraceId(traceId);
+        setSelectedState(undefined);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleStateClick = (state) => {
+        setSelectedState(state);
+    };
+    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", children: [_jsx(StateDetail, { state: values, onClose: () => setSelectedState(undefined) }), _jsx("div", { className: "flex flex-col gap-2 flex-1 pl-4 py-4", children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0", children: _jsx(TableRow, { children: _jsx(TableHead, { children: "Root Field (Trace ID)" }) }) }), _jsx(TableBody, { children: traces.map((trace) => (_jsx(TableRow, { "data-testid": `trace-${trace}`, onClick: () => handleTraceClick(trace), children: _jsx(TableCell, { className: `rounded-lg font-mono font-semibold ${selectedTraceId === trace ? 'bg-indigo-900/50 hover:bg-indigo-900/30' : ''}`, children: trace }) }, trace))) })] }) }), _jsx("div", { className: "flex flex-col gap-2 flex-1 pr-4 py-4", children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0", children: _jsx(TableRow, { children: _jsx(TableHead, { children: "Fields" }) }) }), _jsx(TableBody, { children: fields.map((field) => (_jsx(TableRow, { "data-testid": `field-${field}`, className: `font-semibold font-mono ${selectedState === field ? 'bg-indigo-900/50 hover:bg-indigo-900/30' : ''}`, onClick: () => handleStateClick(field), children: _jsx(TableCell, { children: field }) }, field))) })] }) })] }));
+};

package/dist/src/components/ui/badge.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "error" | "info" | "warning" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "info" | "error" | "warning" | "red-rounded" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
-declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
-export { Badge, badgeVariants };
-//# sourceMappingURL=badge.d.ts.map
+export declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
-const badgeVariants = cva('inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+const badgeVariants = cva('inline-flex items-center rounded-lg border px-2 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
     variants: {
         variant: {
             default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
             secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            info: 'border-transparent bg-sky-500 text-black hover:bg-sky/80',
+            info: 'border-transparent bg-[#47B2FF33] text-[#47B2FF] hover:bg-sky/80',
             error: 'border-transparent bg-rose-500 text-black shadow hover:bg-rose/80',
             warning: 'border-transparent bg-amber-300 text-amber-950 hover:bg-amber/80',
             destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+            'red-rounded': 'border-transparent bg-red-500 text-red-950 hover:bg-red/80 rounded-full',
             outline: 'text-foreground',
         },
     },
@@ -17,7 +18,6 @@ const badgeVariants = cva('inline-flex items-center rounded-md border px-2.5 py-
         variant: 'default',
     },
 });
-function Badge({ className, variant, ...props }) {
+export function Badge({ className, variant, ...props }) {
     return _jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
-export { Badge, badgeVariants };

package/dist/src/components/ui/button.d.ts

@@ -7,6 +7,5 @@ declare const buttonVariants: (props?: ({
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
 }
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { Button, buttonVariants };
-//# sourceMappingURL=button.d.ts.map
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
-const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+const buttonVariants = cva('inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
@@ -26,9 +26,8 @@ const buttonVariants = cva('inline-flex items-center justify-center gap-2 whites
         size: 'default',
     },
 });
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+export const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
     return _jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props });
 });
 Button.displayName = 'Button';
-export { Button, buttonVariants };

package/dist/src/components/ui/collapsible.d.ts

@@ -1,6 +1,5 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare const CollapsibleContent: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
-//# sourceMappingURL=collapsible.d.ts.map

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

@@ -1,4 +1,4 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 const Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;

package/dist/src/components/ui/dialog.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
@@ -17,4 +17,3 @@ declare const DialogFooter: {
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
-//# sourceMappingURL=dialog.d.ts.map

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

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import { cn } from "@/lib/utils";
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
-DialogHeader.displayName = "DialogHeader";
-const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
-DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props })));
+const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className), ...props }));
+DialogHeader.displayName = 'DialogHeader';
+const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+DialogFooter.displayName = 'DialogFooter';
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold leading-none tracking-tight', className), ...props })));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/src/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };