@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/dist/ui/extensions/flow/atoms/FlowNodeWrapper.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+/**
+ * FlowNodeWrapper Component
+ *
+ * Wrapper for node styling with design system tokens.
+ * Enhanced with support for resizing, grouped nodes (parent/child),
+ * custom styles, and animations.
+ *
+ * Single Responsibility: Provide consistent styling wrapper for nodes with advanced features.
+ */
+export interface FlowNodeWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    selected?: boolean;
+    children: ReactNode;
+    /**
+     * Whether this is a child node (inside a parent node)
+     */
+    isChild?: boolean;
+    /**
+     * Whether this is a parent node (contains child nodes)
+     */
+    isParent?: boolean;
+    /**
+     * Enable resizing capability (requires NodeResizer from @xyflow/react)
+     */
+    resizable?: boolean;
+    /**
+     * Animation variant
+     */
+    animation?: 'none' | 'fade' | 'slide' | 'scale';
+    /**
+     * Custom style override
+     */
+    customStyle?: React.CSSProperties;
+}
+export declare function FlowNodeWrapper({ variant, size, selected, className, children, isChild, isParent, resizable, animation, customStyle, ...props }: FlowNodeWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/atoms/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Flow Atoms
+ *
+ * Basic building blocks for Flow components.
+ */
+export { FlowHandle, type FlowHandleProps } from './FlowHandle';
+export { FlowNodeWrapper, type FlowNodeWrapperProps } from './FlowNodeWrapper';

package/dist/ui/extensions/flow/components/AddNodeButton.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Add Node Button Component
+ *
+ * Simple button to add new nodes to the canvas.
+ * Opens a dropdown menu to select node type (without previews).
+ */
+export declare function AddNodeButton(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/BackgroundConfigPanel.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Background Config Panel Component
+ *
+ * Panel for configuring FlowBackground with all options including
+ * variant, size, colors, presets, and live preview.
+ */
+import type { BackgroundConfig } from '../types/playgroundTypes';
+export interface BackgroundConfigPanelProps {
+    config: BackgroundConfig;
+    onChange: (config: BackgroundConfig) => void;
+    theme?: 'light' | 'dark';
+}
+export declare function BackgroundConfigPanel({ config, onChange, theme, }: BackgroundConfigPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/CodePreview.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Code Preview Component
+ *
+ * Live preview of generated React code
+ */
+import React from 'react';
+import type { Node, Edge } from '@xyflow/react';
+import type { FlowNodeData, FlowEdgeData } from '../organisms/FlowTypes';
+import type { ReactFlowConfig, BackgroundConfig } from '../types/playgroundTypes';
+export interface CodePreviewProps {
+    nodes: Node<FlowNodeData>[];
+    edges: Edge<FlowEdgeData>[];
+    reactFlowConfig: ReactFlowConfig;
+    backgroundConfig: BackgroundConfig;
+    theme: 'light' | 'dark';
+}
+/**
+ * Code Preview Component
+ */
+export declare const CodePreview: React.NamedExoticComponent<CodePreviewProps>;

package/dist/ui/extensions/flow/components/DatasetSelector.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Dataset Selector Component
+ *
+ * Component for selecting and loading flow templates/datasets.
+ */
+export declare function DatasetSelector(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/DragNDropSidebar.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Drag & Drop Sidebar Component
+ *
+ * Sidebar component for dragging nodes onto the canvas.
+ * Based on the React Flow DragNDrop example with design system integration.
+ */
+import React from 'react';
+import type { Node } from '@xyflow/react';
+export interface DragNDropSidebarProps {
+    /**
+     * Available node types to drag
+     */
+    nodeTypes?: Array<{
+        type: string;
+        label: string;
+        icon?: React.ReactNode;
+        description?: string;
+        defaultData?: Partial<Node['data']>;
+    }>;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Whether sidebar is visible
+     */
+    visible?: boolean;
+}
+export declare function DragNDropSidebar({ nodeTypes, className, visible, }: DragNDropSidebarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/extensions/flow/components/EdgeEditor.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Edge Editor Component
+ *
+ * Editor for editing selected edge properties
+ */
+import React from 'react';
+import type { Edge } from '@xyflow/react';
+import type { FlowEdgeData } from '../organisms/FlowTypes';
+export interface EdgeEditorProps {
+    edge: Edge<FlowEdgeData> | null;
+    nodes: Array<{
+        id: string;
+        data?: {
+            label?: string;
+        };
+    }>;
+    onUpdate: (edgeId: string, updates: Partial<Edge<FlowEdgeData>>) => void;
+    onDelete: (edgeId: string) => void;
+}
+/**
+ * Edge Editor Component
+ */
+export declare const EdgeEditor: React.NamedExoticComponent<EdgeEditorProps>;

package/dist/ui/extensions/flow/components/EdgeTypesPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Edge Types Panel Component
+ *
+ * Panel for demonstrating and previewing different edge types.
+ */
+export interface EdgeTypesPanelProps {
+    onSelectEdgeType?: (edgeType: string) => void;
+}
+export declare function EdgeTypesPanel({ onSelectEdgeType }: EdgeTypesPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/ExportPanel.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Export Panel Component
+ *
+ * Panel for exporting flows in multiple formats
+ */
+export interface ExportPanelProps {
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare function ExportPanel({ className }: ExportPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/FloatingEdgesCheckbox.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Floating Edges Checkbox Component
+ *
+ * Checkbox to enable/disable floating edges.
+ */
+export declare function FloatingEdgesCheckbox(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/HandlePositionsDropdown.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Handle Positions Dropdown Component
+ *
+ * Dropdown to select default handle positions for nodes.
+ */
+export type HandlePosition = 'top-bottom' | 'left-right' | 'all';
+export declare function HandlePositionsDropdown(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/LayoutApplier.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Layout Applier Component
+ *
+ * Component that applies layout algorithms to the flow
+ */
+import type { LayoutStrategyName, LayoutOptions } from '../organisms/FlowTypes';
+import type { Node, Edge } from '@xyflow/react';
+export interface LayoutApplierProps {
+    strategy: LayoutStrategyName | null;
+    nodes: Node[];
+    edges: Edge[];
+    options?: LayoutOptions;
+    shouldApply?: boolean;
+    onLayoutApplied?: () => void;
+}
+/**
+ * Layout Applier Component
+ *
+ * Applies layout algorithm when shouldApply is true
+ * Must be rendered inside FlowCanvas.Root to access ReactFlow context
+ */
+export declare function LayoutApplier({ strategy, nodes, edges, options, shouldApply, onLayoutApplied, }: LayoutApplierProps): null;

package/dist/ui/extensions/flow/components/LayoutConfigPanel.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Layout Config Panel Component
+ *
+ * Panel for configuring and applying layout algorithms to flows.
+ */
+import type { LayoutConfig } from '../types/playgroundTypes';
+export interface LayoutConfigPanelProps {
+    config: LayoutConfig;
+    onChange: (config: LayoutConfig) => void;
+    onApply?: () => void;
+}
+export declare function LayoutConfigPanel({ config, onChange, onApply, }: LayoutConfigPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/NodeEditor.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Node Editor Component
+ *
+ * Editor for editing selected node properties
+ */
+import React from 'react';
+import type { Node } from '@xyflow/react';
+import type { FlowNodeData } from '../organisms/FlowTypes';
+export interface NodeEditorProps {
+    node: Node<FlowNodeData> | null;
+    onUpdate: (nodeId: string, updates: Partial<Node<FlowNodeData>>) => void;
+    onDelete: (nodeId: string) => void;
+    onDuplicate: (node: Node<FlowNodeData>) => void;
+}
+/**
+ * Node Editor Component
+ */
+export declare const NodeEditor: React.NamedExoticComponent<NodeEditorProps>;

package/dist/ui/extensions/flow/components/NodeTypesPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Node Types Panel Component
+ *
+ * Panel for demonstrating and previewing different node types.
+ */
+export interface NodeTypesPanelProps {
+    onSelectNodeType?: (nodeType: string) => void;
+}
+export declare function NodeTypesPanel({ onSelectNodeType }: NodeTypesPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/NodesEdgesTabContent.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Nodes & Edges Tab Content Component
+ *
+ * Organizes content in exact sections matching the reference:
+ * - OPTIONS: Handle Positions, Floating Edges
+ * - NODES & EDGES: Dataset selector, Add new node button
+ * - NODE INSPECTOR: Editor for selected node/edge or empty message
+ */
+/**
+ * Main Nodes & Edges Tab Content Component
+ */
+export declare function NodesEdgesTabContent(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundBreadcrumbs.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Playground Breadcrumbs Component
+ *
+ * Shows the current location in the playground (tab and context).
+ * Provides visual feedback about where the user is in the navigation.
+ */
+import type { PlaygroundTabId } from './PlaygroundTabs';
+export interface PlaygroundBreadcrumbsProps {
+    activeTab: PlaygroundTabId;
+    context?: string;
+}
+export declare function PlaygroundBreadcrumbs({ activeTab, context }: PlaygroundBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundCanvas.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Playground Canvas Component
+ *
+ * Wrapper for the main React Flow canvas.
+ * Manages flow state and integrates with PlaygroundContext.
+ */
+/**
+ * Main PlaygroundCanvas component
+ * Wraps the inner component with FlowProvider
+ */
+export declare function PlaygroundCanvas(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundCanvasFooter.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Playground Canvas Footer Component
+ *
+ * Footer with tabs for Node Inspector and Viewport Logger.
+ * Positioned at bottom-right of the canvas.
+ */
+export declare function PlaygroundCanvasFooter(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundDevTools.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Playground Dev Tools Component
+ *
+ * Development tools panel with debug, state inspector, profiler, and logger.
+ */
+export interface PlaygroundDevToolsProps {
+    enabled?: boolean;
+    position?: 'bottom' | 'top' | 'left' | 'right';
+}
+/**
+ * Dev Tools Panel Component
+ */
+export declare function PlaygroundDevTools({ enabled, position }: PlaygroundDevToolsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/extensions/flow/components/PlaygroundErrorBoundary.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Playground Error Boundary
+ *
+ * Catches errors in the playground and displays a friendly error message.
+ */
+import React, { Component, type ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class PlaygroundErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    handleReset: () => 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 {};

package/dist/ui/extensions/flow/components/PlaygroundHeader.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Playground Header Component
+ *
+ * Professional header for the playground with Apply Changes functionality.
+ * Uses design system tokens for consistent styling.
+ */
+export declare function PlaygroundHeader(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundLayout.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Playground Layout Component
+ *
+ * Main layout component for the playground with split-view:
+ * - Left: Tabs and Content
+ * - Right: Canvas
+ *
+ * Uses design system tokens for consistent styling.
+ */
+export interface PlaygroundLayoutProps {
+    initialState?: Partial<import('../context/PlaygroundContext').PlaygroundState>;
+}
+/**
+ * Main Playground Layout Component
+ */
+export declare function PlaygroundLayout({ initialState }: PlaygroundLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundOnboarding.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Playground Onboarding Component
+ *
+ * Provides guided tour, contextual tooltips, and help panel for new users.
+ */
+export interface OnboardingStep {
+    id: string;
+    title: string;
+    description: string;
+    target?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+}
+export interface PlaygroundOnboardingProps {
+    onComplete?: () => void;
+    showOnFirstVisit?: boolean;
+}
+export declare function PlaygroundOnboarding({ onComplete, showOnFirstVisit }: PlaygroundOnboardingProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Help Panel Component
+ * Provides quick access to documentation and tips
+ */
+export declare function PlaygroundHelpPanel(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundSearch.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Enhanced Playground Search Component
+ *
+ * Advanced search functionality with filters, preview, and navigation.
+ */
+export interface PlaygroundSearchProps {
+    onResultSelect?: (result: {
+        type: 'node' | 'edge';
+        id: string;
+        label?: string;
+    }) => void;
+    className?: string;
+}
+export declare function PlaygroundSearch({ onResultSelect, className }: PlaygroundSearchProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundSidebar.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Playground Sidebar Component
+ *
+ * Professional sidebar for the playground with tabs and content.
+ * Enhanced with search, collapsible sections, and better organization.
+ * Uses design system tokens for consistent styling.
+ *
+ * Refactored to use SideNavbar component from the design system.
+ * Now uses all advanced features: collapsible, resizable, persistent, responsive.
+ */
+import { type PlaygroundTabId } from './PlaygroundTabs';
+export interface PlaygroundSidebarProps {
+    activeTab: PlaygroundTabId;
+    onTabChange: (tabId: PlaygroundTabId) => void;
+}
+export declare function PlaygroundSidebar({ activeTab, onTabChange, }: PlaygroundSidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundSidebarContent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Playground Sidebar Content Component
+ *
+ * Enhanced sidebar content with search/filter and collapsible sections.
+ * Provides better organization and navigation within tabs.
+ */
+import type { PlaygroundTabId } from './PlaygroundTabs';
+export interface PlaygroundSidebarContentProps {
+    activeTab: PlaygroundTabId;
+    searchQuery?: string;
+    onSearchChange?: (query: string) => void;
+}
+export declare function PlaygroundSidebarContent({ activeTab, searchQuery, onSearchChange, }: PlaygroundSidebarContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundStepper.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Playground Stepper Component
+ *
+ * Wrapper for Stepper component from design system.
+ * Renders steps dynamically based on active tab.
+ */
+import type { PlaygroundTabId } from './PlaygroundTabs';
+export interface PlaygroundStepperProps {
+    activeTab: PlaygroundTabId;
+    currentStep?: number;
+    defaultCurrentStep?: number;
+    onStepChange?: (stepIndex: number) => void;
+}
+/**
+ * @deprecated PlaygroundStepper is no longer used. Use tabs directly.
+ */
+export declare function PlaygroundStepper(_props: PlaygroundStepperProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/PlaygroundTabs.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Playground Tabs Component
+ *
+ * Wrapper for Tabs component from design system.
+ * Manages main category tabs for the playground.
+ * Uses design system tokens for consistent styling.
+ * Enhanced with better visual indicators and animations.
+ */
+import React from 'react';
+export type PlaygroundTabId = 'nodes-edges' | 'canvas' | 'background' | 'layout' | 'validation' | 'code' | 'settings';
+export interface PlaygroundTab {
+    id: PlaygroundTabId;
+    label: string;
+    icon?: React.ReactNode;
+    description?: string;
+    shortcut?: string;
+}
+export declare const playgroundTabs: PlaygroundTab[];
+export interface PlaygroundTabsProps {
+    activeTab: PlaygroundTabId;
+    onTabChange: (tabId: PlaygroundTabId) => void;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'full' | 'compact';
+}
+export declare function PlaygroundTabs({ activeTab, onTabChange, orientation, variant, }: PlaygroundTabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/ReactFlowPropsPanel.d.ts

@@ -0,0 +1,15 @@
+/**
+ * React Flow Props Panel
+ *
+ * Panel for configuring all ReactFlow props with tooltips
+ */
+import React from 'react';
+import type { ReactFlowConfig } from '../types/playgroundTypes';
+export interface ReactFlowPropsPanelProps {
+    config: ReactFlowConfig;
+    onChange: (config: ReactFlowConfig) => void;
+}
+/**
+ * React Flow Props Panel Component
+ */
+export declare const ReactFlowPropsPanel: React.NamedExoticComponent<ReactFlowPropsPanelProps>;

package/dist/ui/extensions/flow/components/SettingsPanel.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Settings Panel Component
+ *
+ * Panel for general playground settings (theme, performance, debug).
+ */
+export interface SettingsPanelProps {
+    theme: 'light' | 'dark';
+    onThemeChange: (theme: 'light' | 'dark') => void;
+    performanceMode?: boolean;
+    onPerformanceModeChange?: (enabled: boolean) => void;
+    debugMode?: boolean;
+    onDebugModeChange?: (enabled: boolean) => void;
+}
+export declare function SettingsPanel({ theme, onThemeChange, performanceMode, onPerformanceModeChange, debugMode, onDebugModeChange, }: SettingsPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/ViewportLogger.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Viewport Logger Component
+ *
+ * Displays current viewport state (x, y, zoom) in real-time
+ */
+export declare function ViewportLogger(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/extensions/flow/components/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Playground Components
+ */
+export { ReactFlowPropsPanel } from './ReactFlowPropsPanel';
+export type { ReactFlowPropsPanelProps } from './ReactFlowPropsPanel';
+export { NodeEditor } from './NodeEditor';
+export type { NodeEditorProps } from './NodeEditor';
+export { EdgeEditor } from './EdgeEditor';
+export type { EdgeEditorProps } from './EdgeEditor';
+export { CodePreview } from './CodePreview';
+export type { CodePreviewProps } from './CodePreview';
+export { LayoutApplier } from './LayoutApplier';
+export type { LayoutApplierProps } from './LayoutApplier';
+export { ViewportLogger } from './ViewportLogger';
+export { DragNDropSidebar } from './DragNDropSidebar';
+export type { DragNDropSidebarProps } from './DragNDropSidebar';
+export { BackgroundConfigPanel } from './BackgroundConfigPanel';
+export type { BackgroundConfigPanelProps } from './BackgroundConfigPanel';
+export { LayoutConfigPanel } from './LayoutConfigPanel';
+export type { LayoutConfigPanelProps } from './LayoutConfigPanel';
+export { SettingsPanel } from './SettingsPanel';
+export type { SettingsPanelProps } from './SettingsPanel';
+export { NodeTypesPanel } from './NodeTypesPanel';
+export type { NodeTypesPanelProps } from './NodeTypesPanel';
+export { EdgeTypesPanel } from './EdgeTypesPanel';
+export type { EdgeTypesPanelProps } from './EdgeTypesPanel';
+export { PlaygroundLayout } from './PlaygroundLayout';
+export type { PlaygroundLayoutProps } from './PlaygroundLayout';
+export { PlaygroundTabs } from './PlaygroundTabs';
+export type { PlaygroundTabsProps, PlaygroundTabId, PlaygroundTab } from './PlaygroundTabs';
+export { PlaygroundCanvas } from './PlaygroundCanvas';
+export { DatasetSelector } from './DatasetSelector';
+export { NodesEdgesTabContent } from './NodesEdgesTabContent';
+export { AddNodeButton } from './AddNodeButton';
+export { HandlePositionsDropdown } from './HandlePositionsDropdown';
+export { FloatingEdgesCheckbox } from './FloatingEdgesCheckbox';
+export { PlaygroundHeader } from './PlaygroundHeader';
+export { PlaygroundSidebar } from './PlaygroundSidebar';
+export type { PlaygroundSidebarProps } from './PlaygroundSidebar';
+export { PlaygroundSidebarContent } from './PlaygroundSidebarContent';
+export type { PlaygroundSidebarContentProps } from './PlaygroundSidebarContent';
+export { PlaygroundBreadcrumbs } from './PlaygroundBreadcrumbs';
+export type { PlaygroundBreadcrumbsProps } from './PlaygroundBreadcrumbs';
+export { PlaygroundSearch } from './PlaygroundSearch';
+export type { PlaygroundSearchProps } from './PlaygroundSearch';
+export { PlaygroundOnboarding, PlaygroundHelpPanel } from './PlaygroundOnboarding';
+export type { PlaygroundOnboardingProps, OnboardingStep } from './PlaygroundOnboarding';
+export { PlaygroundErrorBoundary } from './PlaygroundErrorBoundary';
+export { PlaygroundDevTools } from './PlaygroundDevTools';
+export type { PlaygroundDevToolsProps } from './PlaygroundDevTools';
+export { PlaygroundCanvasFooter } from './PlaygroundCanvasFooter';
+export { ExportPanel } from './ExportPanel';
+export type { ExportPanelProps } from './ExportPanel';

package/dist/ui/extensions/flow/context/FlowEventContext.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Flow Event Context
+ *
+ * Context for managing custom events and event bus.
+ */
+import type { ReactNode } from 'react';
+/**
+ * Flow Event Types
+ */
+export type FlowEventType = 'node:add' | 'node:remove' | 'node:update' | 'node:select' | 'node:deselect' | 'edge:add' | 'edge:remove' | 'edge:update' | 'edge:select' | 'edge:deselect' | 'viewport:change' | 'selection:change' | 'validation:change' | 'custom';
+/**
+ * Flow Event
+ */
+export interface FlowEvent<T = unknown> {
+    type: FlowEventType;
+    payload: T;
+    timestamp: number;
+    source?: string;
+}
+/**
+ * Event Handler
+ */
+export type FlowEventHandler<T = unknown> = (event: FlowEvent<T>) => void;
+/**
+ * Event Subscription
+ */
+export interface EventSubscription {
+    unsubscribe: () => void;
+}
+/**
+ * Flow Event Context Value
+ */
+export interface FlowEventContextValue {
+    subscribe: <T = unknown>(eventType: FlowEventType, handler: FlowEventHandler<T>) => EventSubscription;
+    unsubscribe: (eventType: FlowEventType, handler: FlowEventHandler) => void;
+    emit: <T = unknown>(eventType: FlowEventType, payload: T, source?: string) => void;
+    once: <T = unknown>(eventType: FlowEventType, handler: FlowEventHandler<T>) => EventSubscription;
+    filter: <T = unknown>(eventType: FlowEventType, predicate: (event: FlowEvent<T>) => boolean, handler: FlowEventHandler<T>) => EventSubscription;
+    getHistory: (eventType?: FlowEventType, limit?: number) => FlowEvent[];
+    clearHistory: () => void;
+}
+/**
+ * Hook to access Flow Event context
+ */
+export declare function useFlowEventContext(): FlowEventContextValue;
+/**
+ * Flow Event Provider Props
+ */
+export interface FlowEventProviderProps {
+    children: ReactNode;
+    maxHistorySize?: number;
+    enableHistory?: boolean;
+}
+/**
+ * Flow Event Provider
+ *
+ * Provides event bus functionality for Flow components.
+ */
+export declare function FlowEventProvider({ children, maxHistorySize, enableHistory, }: FlowEventProviderProps): import("react/jsx-runtime").JSX.Element;