polen 0.10.0-next.21 → 0.10.0-next.22

package/build/template/components/GraphQLInteractive/GraphQLInteractive.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { React as ReactHooks } from '#dep/react/index';
+import { Box } from '@radix-ui/themes';
+import { GraphQLErrorBoundary } from './components/GraphQLErrorBoundary.js';
+import { GraphQLTokenPopover } from './components/GraphQLTokenPopover.js';
+import { usePopoverState } from './hooks/use-popover-state.js';
+import { parseGraphQLWithTreeSitter } from './lib/parser.js';
+/**
+ * Main component that renders an interactive GraphQL code block
+ *
+ * This component:
+ * 1. Parses the GraphQL code into tokens using tree-sitter
+ * 2. Renders each token with appropriate styling
+ * 3. Adds interactivity to certain token types (types and fields)
+ * 4. Shows loading/error states during parsing
+ */
+/**
+ * Internal GraphQL Interactive implementation
+ * Wrapped by error boundary in the main export
+ */
+const GraphQLInteractiveImpl = ({ codeblock, schema, showWarningIfNoSchema = true, }) => {
+    // State to hold the parsed tokens
+    const [tokens, setTokens] = ReactHooks.useState(null);
+    // Loading state while parser initializes and processes the code
+    const [isLoading, setIsLoading] = ReactHooks.useState(true);
+    // Error state if parsing fails
+    const [error, setError] = ReactHooks.useState(null);
+    // Retry attempt counter
+    const [retryCount, setRetryCount] = ReactHooks.useState(0);
+    // Popover state management - must be called at top level for hooks rules
+    const popoverState = usePopoverState({
+        showDelay: 300,
+        hideDelay: 100,
+        allowMultiplePins: true,
+    });
+    // Memoize token parsing to avoid re-computation on unrelated renders
+    const parseTokens = ReactHooks.useCallback(async () => {
+        try {
+            setIsLoading(true);
+            setError(null);
+            // Parse the code into tokens with semantic analysis
+            const parsedTokens = await parseGraphQLWithTreeSitter(codeblock.code, codeblock.annotations, schema);
+            setTokens(parsedTokens);
+            setRetryCount(0); // Reset retry count on success
+        }
+        catch (err) {
+            // Provide detailed error information to users
+            const errorMessage = err instanceof Error ? err.message : 'Unknown parsing error';
+            setError(errorMessage);
+            setTokens([]); // Set empty tokens on error for fallback rendering
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [codeblock.code, codeblock.annotations, schema]);
+    // Retry function for users
+    const handleRetry = ReactHooks.useCallback(() => {
+        setRetryCount(prev => prev + 1);
+        parseTokens();
+    }, [parseTokens]);
+    // Parse the GraphQL code whenever dependencies change
+    ReactHooks.useEffect(() => {
+        parseTokens();
+    }, [parseTokens]);
+    // Render loading state
+    // Shows the code with reduced opacity and a loading indicator
+    if (isLoading) {
+        return (_jsxs("div", { className: 'graphql-loading', children: [_jsx("pre", { style: { opacity: 0.5 }, children: _jsx("code", { children: codeblock.code }) }), _jsx("div", { style: {
+                        position: 'absolute',
+                        top: '8px',
+                        right: '8px',
+                        fontSize: '12px',
+                        color: '#666',
+                        backgroundColor: '#f0f0f0',
+                        padding: '2px 6px',
+                        borderRadius: '3px',
+                    }, children: "Loading tree-sitter..." })] }));
+    }
+    // Render error state with retry option
+    if (error) {
+        return (_jsxs(Box, { className: 'graphql-error', p: '4', style: {
+                borderRadius: 'var(--radius-2)',
+                backgroundColor: 'var(--gray-2)',
+                position: 'relative',
+                borderLeft: '3px solid var(--red-9)',
+            }, children: [_jsx("pre", { style: { margin: 0, whiteSpace: 'pre' }, children: _jsx("code", { children: codeblock.code }) }), _jsxs("div", { style: {
+                        color: 'var(--red-11)',
+                        fontSize: '12px',
+                        marginTop: '8px',
+                        padding: '8px',
+                        backgroundColor: 'var(--red-a3)',
+                        borderRadius: '3px',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }, children: [_jsxs("span", { children: ["Interactive parsing failed: ", error] }), retryCount < 3 && (_jsxs("button", { onClick: handleRetry, style: {
+                                backgroundColor: 'var(--red-9)',
+                                color: 'white',
+                                border: 'none',
+                                padding: '4px 8px',
+                                borderRadius: '3px',
+                                fontSize: '11px',
+                                cursor: 'pointer',
+                            }, children: ["Retry (", retryCount + 1, "/3)"] }))] })] }));
+    }
+    // Fallback if no tokens were parsed or parsing failed
+    if (!tokens || tokens.length === 0) {
+        return (_jsxs(Box, { className: 'graphql-fallback', p: '4', style: {
+                borderRadius: 'var(--radius-2)',
+                backgroundColor: 'var(--gray-2)',
+                position: 'relative',
+            }, children: [_jsx("pre", { style: { margin: 0, whiteSpace: 'pre' }, children: _jsx("code", { children: codeblock.code }) }), error && (_jsx("div", { style: {
+                        position: 'absolute',
+                        top: '8px',
+                        right: '8px',
+                        fontSize: '12px',
+                        color: 'var(--red-11)',
+                        backgroundColor: 'var(--red-a3)',
+                        padding: '2px 6px',
+                        borderRadius: '3px',
+                        maxWidth: '200px',
+                    }, title: error, children: "Interactive features unavailable" }))] }));
+    }
+    // Main render: Show the parsed and interactive code
+    return (_jsxs(Box, { className: 'graphql-interactive', p: '4', position: 'relative', style: {
+            borderRadius: 'var(--radius-2)',
+            backgroundColor: 'var(--gray-2)',
+            overflowX: 'auto',
+            maxWidth: '100%',
+        }, children: [_jsx("pre", { style: { margin: 0, whiteSpace: 'pre' }, children: _jsx("code", { children: tokens.map((token, index) => {
+                        const tokenId = `${token.start}-${token.end}-${index}`;
+                        return (_jsx(TokenComponent, { token: token, tokenId: tokenId, popoverState: popoverState, schema: schema }, tokenId));
+                    }) }) }), !schema && showWarningIfNoSchema && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    top: '8px',
+                    right: '8px',
+                    fontSize: '12px',
+                    color: 'var(--amber-11)',
+                    backgroundColor: 'var(--amber-a3)',
+                    padding: '2px 6px',
+                    borderRadius: '3px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px',
+                }, title: 'Interactive features are not available because no GraphQL schema is configured', children: [_jsxs("svg", { width: '12', height: '12', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', children: [_jsx("path", { d: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' }), _jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }), _jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' })] }), "No schema configured"] }))] }));
+};
+/**
+ * Component that renders a single token with interactive features
+ *
+ * This component handles:
+ * - Applying syntax highlighting based on token type
+ * - Hover effects for interactive tokens
+ * - Click handlers for navigation
+ * - Visual feedback for CodeHike annotations
+ */
+const TokenComponent = ({ token, tokenId, popoverState, schema }) => {
+    // Track hover state for interactive tokens
+    const [isHovered, setIsHovered] = ReactHooks.useState(false);
+    // Handle clicks on interactive tokens - memoized to prevent unnecessary re-renders
+    const handleClick = ReactHooks.useCallback((e) => {
+        if (token.polen.isInteractive()) {
+            e.preventDefault();
+            e.stopPropagation();
+            // Don't allow pinning for invalid fields
+            if (token.semantic && 'kind' in token.semantic && token.semantic.kind === 'InvalidField') {
+                return;
+            }
+            // Toggle popover pin state only - no navigation
+            popoverState.onTogglePin(tokenId);
+        }
+    }, [token, tokenId, popoverState]);
+    // Show hover effects when mouse enters an interactive token - memoized
+    const handleMouseEnter = ReactHooks.useCallback(() => {
+        if (token.polen.isInteractive()) {
+            setIsHovered(true);
+            popoverState.onHoverStart(tokenId);
+        }
+    }, [token, tokenId, popoverState]);
+    // Hide hover effects when mouse leaves - memoized
+    const handleMouseLeave = ReactHooks.useCallback(() => {
+        setIsHovered(false);
+        popoverState.onHoverEnd(tokenId);
+    }, [tokenId, popoverState]);
+    // Get the appropriate CSS class from the token
+    const baseClass = token.highlighter.getCssClass();
+    // Map class names to inline styles
+    const getBaseStyle = () => {
+        switch (baseClass) {
+            case 'graphql-keyword':
+                return { color: 'var(--red-11)', fontWeight: 'bold' };
+            case 'graphql-type-interactive':
+                return { color: 'var(--blue-11)', fontWeight: 500 };
+            case 'graphql-field-interactive':
+                return { color: 'var(--violet-11)' };
+            case 'graphql-field-error':
+                return {
+                    color: 'var(--red-11)',
+                };
+            case 'graphql-error-hint':
+                return {
+                    color: 'var(--red-11)',
+                    fontSize: '0.9em',
+                    fontStyle: 'italic',
+                    opacity: 0.5,
+                };
+            case 'graphql-comment':
+                return {
+                    color: 'var(--gray-11)',
+                    fontStyle: 'italic',
+                    opacity: 0.6,
+                };
+            case 'graphql-operation':
+                return { color: 'var(--violet-11)', fontStyle: 'italic' };
+            case 'graphql-fragment':
+                return { color: 'var(--violet-11)', fontStyle: 'italic' };
+            case 'graphql-variable':
+                return { color: 'var(--orange-11)' };
+            case 'graphql-argument':
+                return { color: 'var(--gray-12)' };
+            case 'graphql-string':
+                return { color: 'var(--blue-11)' };
+            case 'graphql-number':
+                return { color: 'var(--blue-11)' };
+            case 'graphql-punctuation':
+                return { color: 'var(--gray-11)', opacity: 0.5 };
+            default:
+                return { color: 'var(--gray-12)' };
+        }
+    };
+    // Check if this is an invalid field
+    const isInvalidField = token.semantic && 'kind' in token.semantic && token.semantic.kind === 'InvalidField';
+    // Build the style object for this token
+    const style = {
+        ...getBaseStyle(),
+        // Interactive tokens get special styling (except invalid fields)
+        ...(token.polen.isInteractive() && !isInvalidField && {
+            cursor: 'pointer',
+            textDecoration: isHovered ? 'underline' : 'none',
+            backgroundColor: isHovered ? 'var(--accent-a3)' : 'transparent',
+        }),
+        // Invalid fields get different hover styling - no cursor change, no underline
+        ...(isInvalidField && {
+            cursor: 'default',
+            textDecoration: 'underline wavy var(--red-a5)',
+            textUnderlineOffset: '2px',
+            // Subtle background change on hover to show it's interactive for popover
+            backgroundColor: isHovered ? 'var(--red-a2)' : 'transparent',
+        }),
+        // Tokens with CodeHike annotations get highlighted
+        ...(token.codeHike.annotations.length > 0 && {
+            position: 'relative',
+            backgroundColor: 'var(--yellow-a3)',
+        }),
+    };
+    // Build the span element
+    const tokenSpan = (_jsx("span", { className: baseClass, style: style, "data-token-class": baseClass, "data-interactive": token.polen.isInteractive(), children: token.text }));
+    // Wrap in popover if token has semantic information
+    return (_jsx(GraphQLTokenPopover, { token: token, open: popoverState.isOpen(tokenId), pinned: popoverState.isPinned(tokenId), onTriggerHover: handleMouseEnter, onTriggerLeave: handleMouseLeave, onTriggerClick: handleClick, onContentHover: () => popoverState.onPopoverHover(tokenId), onContentLeave: () => popoverState.onPopoverLeave(tokenId), onClose: () => popoverState.unpin(tokenId), children: tokenSpan }));
+};
+/**
+ * Main GraphQL Interactive component with error boundary protection
+ *
+ * This is the component that should be used in user code. It wraps the
+ * internal implementation with an error boundary that provides graceful
+ * fallback to static code rendering if interactive features fail.
+ */
+export const GraphQLInteractive = (props) => {
+    return (_jsx(GraphQLErrorBoundary, { fallbackCode: props.codeblock.code, onError: (error, errorInfo) => {
+            // Log error for debugging (only in development)
+            if (process.env['NODE_ENV'] === 'development') {
+                console.error('GraphQL Interactive Error Boundary:', error, errorInfo);
+            }
+        }, children: _jsx(GraphQLInteractiveImpl, { ...props }) }));
+};
+//# sourceMappingURL=GraphQLInteractive.js.map

package/build/template/components/GraphQLInteractive/GraphQLInteractive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphQLInteractive.js","sourceRoot":"","sources":["../../../../src/template/components/GraphQLInteractive/GraphQLInteractive.tsx"],"names":[],"mappings":"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"}

package/build/template/components/GraphQLInteractive/components/GraphQLErrorBoundary.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Error boundary for GraphQL Interactive components
+ *
+ * Provides graceful fallback rendering when the interactive GraphQL parser
+ * encounters errors. Falls back to static syntax highlighting.
+ */
+import type { React } from '#dep/react/index';
+import { React as ReactHooks } from '#dep/react/index';
+interface GraphQLErrorBoundaryProps {
+    /** Child components to protect */
+    children: React.ReactNode;
+    /** Fallback code to display if interactive parsing fails */
+    fallbackCode: string;
+    /** Optional callback when errors occur */
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+interface GraphQLErrorBoundaryState {
+    hasError: boolean;
+    error?: Error;
+}
+/**
+ * Error boundary that catches React errors in GraphQL Interactive components
+ * and provides a fallback static code display.
+ *
+ * @example
+ * ```tsx
+ * <GraphQLErrorBoundary fallbackCode={codeblock.code}>
+ *   <GraphQLInteractive codeblock={codeblock} schema={schema} />
+ * </GraphQLErrorBoundary>
+ * ```
+ */
+export declare class GraphQLErrorBoundary extends ReactHooks.Component<GraphQLErrorBoundaryProps, GraphQLErrorBoundaryState> {
+    constructor(props: GraphQLErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): GraphQLErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};
+//# sourceMappingURL=GraphQLErrorBoundary.d.ts.map

package/build/template/components/GraphQLInteractive/components/GraphQLErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphQLErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../../src/template/components/GraphQLInteractive/components/GraphQLErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAGtD,UAAU,yBAAyB;IACjC,kCAAkC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,4DAA4D;IAC5D,YAAY,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAA;CAC7D;AAED,UAAU,yBAAyB;IACjC,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED;;;;;;;;;;GAUG;AACH,qBAAa,oBAAqB,SAAQ,UAAU,CAAC,SAAS,CAC5D,yBAAyB,EACzB,yBAAyB,CAC1B;gBACa,KAAK,EAAE,yBAAyB;IAK5C,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,yBAAyB;IAK/D,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;IAQ1D,MAAM;CAqChB"}

package/build/template/components/GraphQLInteractive/components/GraphQLErrorBoundary.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { React as ReactHooks } from '#dep/react/index';
+import { Box } from '@radix-ui/themes';
+/**
+ * Error boundary that catches React errors in GraphQL Interactive components
+ * and provides a fallback static code display.
+ *
+ * @example
+ * ```tsx
+ * <GraphQLErrorBoundary fallbackCode={codeblock.code}>
+ *   <GraphQLInteractive codeblock={codeblock} schema={schema} />
+ * </GraphQLErrorBoundary>
+ * ```
+ */
+export class GraphQLErrorBoundary extends ReactHooks.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        // Log the error or send to error reporting service
+        console.error('GraphQL Interactive Error:', error, errorInfo);
+        // Call optional error handler
+        this.props.onError?.(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsxs(Box, { className: 'graphql-error-fallback', p: '4', style: {
+                    borderRadius: 'var(--radius-2)',
+                    backgroundColor: 'var(--gray-2)',
+                    position: 'relative',
+                    borderLeft: '3px solid var(--red-9)',
+                }, children: [_jsx("pre", { style: { margin: 0, whiteSpace: 'pre' }, children: _jsx("code", { children: this.props.fallbackCode }) }), _jsx("div", { style: {
+                            position: 'absolute',
+                            top: '8px',
+                            right: '8px',
+                            fontSize: '12px',
+                            color: 'var(--red-11)',
+                            backgroundColor: 'var(--red-a3)',
+                            padding: '2px 6px',
+                            borderRadius: '3px',
+                        }, title: this.state.error?.message || 'Interactive features failed to load', children: "Interactive mode unavailable" })] }));
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=GraphQLErrorBoundary.js.map

package/build/template/components/GraphQLInteractive/components/GraphQLErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphQLErrorBoundary.js","sourceRoot":"","sources":["../../../../../src/template/components/GraphQLInteractive/components/GraphQLErrorBoundary.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;AAgBtC;;;;;;;;;;GAUG;AACH,MAAM,OAAO,oBAAqB,SAAQ,UAAU,CAAC,SAGpD;IACC,YAAY,KAAgC;QAC1C,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;IAClC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,4DAA4D;QAC5D,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;IAClC,CAAC;IAEQ,iBAAiB,CAAC,KAAY,EAAE,SAA0B;QACjE,mDAAmD;QACnD,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,KAAK,EAAE,SAAS,CAAC,CAAA;QAE7D,8BAA8B;QAC9B,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IACxC,CAAC;IAEQ,MAAM;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,OAAO,CACL,MAAC,GAAG,IACF,SAAS,EAAC,wBAAwB,EAClC,CAAC,EAAE,GAAG,EACN,KAAK,EAAE;oBACL,YAAY,EAAE,iBAAiB;oBAC/B,eAAe,EAAE,eAAe;oBAChC,QAAQ,EAAE,UAAU;oBACpB,UAAU,EAAE,wBAAwB;iBACrC,aAED,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,YAC1C,yBAAO,IAAI,CAAC,KAAK,CAAC,YAAY,GAAQ,GAClC,EACN,cACE,KAAK,EAAE;4BACL,QAAQ,EAAE,UAAU;4BACpB,GAAG,EAAE,KAAK;4BACV,KAAK,EAAE,KAAK;4BACZ,QAAQ,EAAE,MAAM;4BAChB,KAAK,EAAE,eAAe;4BACtB,eAAe,EAAE,eAAe;4BAChC,OAAO,EAAE,SAAS;4BAClB,YAAY,EAAE,KAAK;yBACpB,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,IAAI,qCAAqC,6CAGrE,IACF,CACP,CAAA;QACH,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC5B,CAAC;CACF"}

package/build/template/components/GraphQLInteractive/components/GraphQLTokenPopover.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Popover component for GraphQL tokens
+ *
+ * Provides rich overlays with type information that can be triggered by hover
+ * and pinned by clicking. Supports multiple simultaneous popovers.
+ */
+import type { React } from '#dep/react/index';
+import type { GraphQLToken } from '../lib/parser.js';
+interface GraphQLTokenPopoverProps {
+    /** The token to create a popover for */
+    token: GraphQLToken;
+    /** Child element that triggers the popover */
+    children: React.ReactNode;
+    /** Whether the popover is open */
+    open: boolean;
+    /** Whether the popover is pinned */
+    pinned: boolean;
+    /** Called when mouse enters the trigger */
+    onTriggerHover: () => void;
+    /** Called when mouse leaves the trigger */
+    onTriggerLeave: () => void;
+    /** Called when trigger is clicked */
+    onTriggerClick: (e: React.MouseEvent) => void;
+    /** Called when popover content is hovered */
+    onContentHover: () => void;
+    /** Called when mouse leaves popover content */
+    onContentLeave: () => void;
+    /** Called when close button is clicked */
+    onClose: () => void;
+}
+export declare const GraphQLTokenPopover: React.FC<GraphQLTokenPopoverProps>;
+export {};
+//# sourceMappingURL=GraphQLTokenPopover.d.ts.map

package/build/template/components/GraphQLInteractive/components/GraphQLTokenPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphQLTokenPopover.d.ts","sourceRoot":"","sources":["../../../../../src/template/components/GraphQLInteractive/components/GraphQLTokenPopover.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAG7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAUpD,UAAU,wBAAwB;IAChC,wCAAwC;IACxC,KAAK,EAAE,YAAY,CAAA;IAEnB,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB,kCAAkC;IAClC,IAAI,EAAE,OAAO,CAAA;IAEb,oCAAoC;IACpC,MAAM,EAAE,OAAO,CAAA;IAEf,2CAA2C;IAC3C,cAAc,EAAE,MAAM,IAAI,CAAA;IAE1B,2CAA2C;IAC3C,cAAc,EAAE,MAAM,IAAI,CAAA;IAE1B,qCAAqC;IACrC,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IAE7C,6CAA6C;IAC7C,cAAc,EAAE,MAAM,IAAI,CAAA;IAE1B,+CAA+C;IAC/C,cAAc,EAAE,MAAM,IAAI,CAAA;IAE1B,0CAA0C;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AA2HD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA8TlE,CAAA"}