@cere/cere-design-system 0.0.45 → 0.1.0

package/dist/third-party.d.mts

@@ -0,0 +1,637 @@
+import React__default, { ReactNode } from 'react';
+import { ReactFlowProps, Node, Edge, OnNodesChange, OnEdgesChange, NodeTypes, EdgeTypes, BackgroundVariant, MiniMapProps, ReactFlowInstance, NodeProps } from 'reactflow';
+export { Background, BackgroundVariant, ConnectionLineType, Controls, Edge, EdgeTypes, MiniMap, Node, NodeTypes, OnEdgesChange, OnNodesChange, Panel, ReactFlowInstance } from 'reactflow';
+import { BoxProps } from '@mui/material';
+import { Monaco } from '@monaco-editor/react';
+import { editor } from 'monaco-editor';
+import { d as WorkflowNodeType } from './WorkflowNode-BnxXO6t_.mjs';
+import '@mui/material/Paper';
+
+interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
+    /**
+     * Nodes to display in the flow
+     */
+    nodes: Node[];
+    /**
+     * Edges to display in the flow
+     */
+    edges: Edge[];
+    /**
+     * Callback when nodes change
+     */
+    onNodesChange?: OnNodesChange;
+    /**
+     * Callback when edges change
+     */
+    onEdgesChange?: OnEdgesChange;
+    /**
+     * Custom node types
+     */
+    nodeTypes?: NodeTypes;
+    /**
+     * Custom edge types
+     */
+    edgeTypes?: EdgeTypes;
+    /**
+     * Height of the flow editor
+     * @default '600px'
+     */
+    height?: string | number;
+    /**
+     * Show background grid
+     * @default true
+     */
+    showBackground?: boolean;
+    /**
+     * Background variant
+     * @default 'dots'
+     */
+    backgroundVariant?: BackgroundVariant;
+    /**
+     * Show controls
+     * @default true
+     */
+    showControls?: boolean;
+    /**
+     * Show minimap
+     * @default false
+     */
+    showMinimap?: boolean;
+    /**
+     * Allow nodes to be dragged by the user
+     * @default true
+     */
+    nodesDraggable?: boolean;
+    /**
+     * Show border around the container
+     * @default true
+     */
+    showBorder?: boolean;
+    /**
+     * Border radius of the container in theme spacing units (e.g. 1 = 8px, 2 = 16px)
+     * @default 1
+     */
+    borderRadius?: number;
+    /**
+     * Container props
+     */
+    containerProps?: BoxProps;
+    /**
+     * Props passed directly to the ReactFlow MiniMap component, allowing full customization
+     * of colors, mask, style, and any other MiniMap option. Consumer values override defaults.
+     */
+    minimapProps?: Partial<MiniMapProps>;
+    /**
+     * Callback when flow instance is initialized
+     */
+    onInit?: (instance: ReactFlowInstance) => void;
+}
+/**
+ * FlowEditor component - wrapper around ReactFlow with theme integration
+ *
+ * @example
+ * ```tsx
+ * <FlowEditor
+ *   nodes={nodes}
+ *   edges={edges}
+ *   onNodesChange={onNodesChange}
+ *   onEdgesChange={onEdgesChange}
+ *   height="500px"
+ *   showBackground
+ *   showControls
+ * />
+ * ```
+ */
+declare const FlowEditor: React__default.FC<FlowEditorProps>;
+
+type CodeEditorLanguage = 'typescript' | 'javascript' | 'json' | 'html' | 'css' | 'python' | 'yaml' | 'markdown' | 'sql' | 'xml' | 'plaintext';
+interface CodeEditorProps {
+    /**
+     * Current value of the editor
+     */
+    value: string;
+    /**
+     * Callback when value changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Programming language
+     * @default 'typescript'
+     */
+    language?: CodeEditorLanguage;
+    /**
+     * Height of the editor
+     * @default '400px'
+     */
+    height?: string | number;
+    /**
+     * Minimum height
+     */
+    minHeight?: string | number;
+    /**
+     * Theme ('light' | 'dark' | 'vs-dark' | 'hc-black')
+     * If not provided, will use theme from design system
+     */
+    theme?: string;
+    /**
+     * Show line numbers
+     * @default 'on'
+     */
+    lineNumbers?: 'on' | 'off' | 'relative' | 'interval';
+    /**
+     * Editor options (monaco editor options)
+     */
+    options?: editor.IStandaloneEditorConstructionOptions;
+    /**
+     * Callback when editor is mounted
+     */
+    onMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
+    /**
+     * Callback for validation errors
+     */
+    onValidate?: (markers: editor.IMarker[]) => void;
+    /**
+     * Ref to editor instance
+     */
+    editorRef?: React__default.MutableRefObject<editor.IStandaloneCodeEditor | null>;
+    /**
+     * Ref to Monaco instance
+     */
+    monacoRef?: React__default.MutableRefObject<Monaco | null>;
+    /**
+     * Callback when fullscreen state changes
+     */
+    onFullscreenChange?: (isFullscreen: boolean) => void;
+    /**
+     * Props for the container Box.
+     */
+    containerProps?: BoxProps;
+    /**
+     * Additional TypeScript type definitions to add to the editor context.
+     * Can be a string with type definitions or an array of type definition strings.
+     * Each string will be added as a separate extra lib to Monaco.
+     *
+     * @example
+     * ```tsx
+     * <CodeEditor
+     *   value={code}
+     *   onChange={setCode}
+     *   typeDefinitions={`
+     *     declare interface MyCustomType {
+     *       id: string;
+     *       name: string;
+     *     }
+     *   `}
+     * />
+     * ```
+     */
+    typeDefinitions?: string | string[];
+    /**
+     * When true, the editor skips internal value syncing and lets an external
+     * source (e.g. useCodeEditorWorkspace) manage Monaco models directly.
+     * The `value` prop is still used as the initial/display value but won't
+     * be force-synced to the editor.
+     * @default false
+     */
+    externalModelManagement?: boolean;
+}
+/**
+ * CodeEditor component - wrapper around Monaco Editor matching dynamic-indexer-client implementation
+ *
+ * @example
+ * ```tsx
+ * <CodeEditor
+ *   value={code}
+ *   onChange={setCode}
+ *   language="typescript"
+ *   height="500px"
+ *   onValidate={(markers) => console.log('Errors:', markers)}
+ * />
+ * ```
+ */
+declare const CodeEditor: React__default.FC<CodeEditorProps>;
+
+/** Data shape expected by the WorkflowNodeHandle custom ReactFlow node */
+interface WorkflowNodeData {
+    /** Workflow node type — drives accent color, icon, and badge */
+    nodeType: WorkflowNodeType;
+    /** Primary title */
+    title: string;
+    /** Optional description */
+    description?: string;
+    /** Override default icon */
+    icon?: React__default.ReactNode;
+    /** Override default badge label */
+    badgeLabel?: string;
+}
+/**
+ * Thin ReactFlow custom-node wrapper around WorkflowNode.
+ *
+ * Renders a target Handle (top), the WorkflowNode card, and a source Handle (bottom).
+ * Register as a custom nodeType:
+ *
+ * @example
+ * ```tsx
+ * const nodeTypes = { workflowNode: WorkflowNodeHandle };
+ * <FlowEditor nodes={nodes} edges={edges} nodeTypes={nodeTypes} />
+ * ```
+ */
+declare const WorkflowNodeHandle: React__default.FC<NodeProps<WorkflowNodeData>>;
+
+/**
+ * Represents a single file in the workspace.
+ */
+interface CodeEditorFile {
+    /** Unique file path, e.g. "src/index.ts" */
+    path: string;
+    /** Programming language (auto-detected from extension when omitted) */
+    language?: CodeEditorLanguage;
+    /** File content */
+    value: string;
+}
+/**
+ * Represents an open tab in the editor.
+ */
+interface CodeEditorTab {
+    /** File path this tab corresponds to */
+    path: string;
+    /** Display label (defaults to the filename portion of path) */
+    label?: string;
+    /** Whether the file has unsaved changes */
+    isDirty?: boolean;
+    /** Git sync status — distinct from isDirty (editor changes) */
+    syncStatus?: 'new' | 'modified';
+}
+/** Git sync status for a file tree node. */
+type FileTreeNodeStatus = 'new' | 'modified' | 'deleted';
+/**
+ * A node in the file tree.
+ */
+interface FileTreeNode {
+    /** Display name */
+    name: string;
+    /** Full path (unique identifier) */
+    path: string;
+    /** Whether this is a file or folder */
+    type: 'file' | 'folder';
+    /** Children nodes (only for folders) */
+    children?: FileTreeNode[];
+    /** Optional custom icon */
+    icon?: ReactNode;
+    /** Git sync status indicator (new / modified / deleted) */
+    status?: FileTreeNodeStatus;
+}
+/**
+ * Git repository information passed into the workspace.
+ * The consuming app is responsible for fetching this data.
+ */
+interface GitInfo {
+    /** Current branch name, e.g. "feat/advanced-code-editor" */
+    branch: string;
+    /** Whether the working tree has uncommitted changes */
+    isDirty?: boolean;
+    /** Short commit hash of HEAD */
+    commitHash?: string;
+    /** Remote name, e.g. "origin" */
+    remote?: string;
+    /** Number of commits ahead of remote */
+    ahead?: number;
+    /** Number of commits behind remote */
+    behind?: number;
+}
+/**
+ * A custom item to render in the status bar.
+ */
+interface CodeEditorStatusBarItem {
+    /** Unique key */
+    id: string;
+    /** Content to display (string or ReactNode) */
+    content: ReactNode;
+    /** Side of the status bar */
+    align?: 'left' | 'right';
+    /** Optional click handler */
+    onClick?: () => void;
+    /** Tooltip text */
+    tooltip?: string;
+}
+/**
+ * Map from file extension to CodeEditorLanguage.
+ */
+declare const EXTENSION_LANGUAGE_MAP: Record<string, CodeEditorLanguage>;
+/**
+ * Detect language from a file path extension.
+ */
+declare function detectLanguage(path: string): CodeEditorLanguage;
+/**
+ * Extract the filename from a path.
+ */
+declare function getFileName(path: string): string;
+
+interface UseCodeEditorWorkspaceOptions {
+    /** All files available in the workspace */
+    files: CodeEditorFile[];
+    /** File paths to open as tabs initially */
+    initialOpenPaths?: string[];
+    /** Called when a file's content is modified in the editor */
+    onFileChange?: (path: string, value: string) => void;
+    /** Called when validation markers change across all open models */
+    onValidationChange?: (markers: Record<string, editor.IMarker[]>) => void;
+}
+interface UseCodeEditorWorkspaceReturn {
+    /** Currently open tabs */
+    openTabs: CodeEditorTab[];
+    /** Path of the active file (shown in editor) */
+    activeFilePath: string | null;
+    /** Open a file by path (creates tab if not already open, sets it active) */
+    openFile: (path: string) => void;
+    /** Close a tab by path */
+    closeFile: (path: string) => void;
+    /** Set a specific file as active */
+    setActiveFile: (path: string) => void;
+    /** Programmatically update file content */
+    updateFileContent: (path: string, value: string) => void;
+    /** Get the current content of a file */
+    getFileContent: (path: string) => string | undefined;
+    /** Get the active file data */
+    activeFile: CodeEditorFile | undefined;
+    /** Ref to hold the Monaco instance — pass to CodeEditor's monacoRef */
+    monacoRef: React.MutableRefObject<Monaco | null>;
+    /** Ref to hold the editor instance — pass to CodeEditor's editorRef */
+    editorRef: React.MutableRefObject<editor.IStandaloneCodeEditor | null>;
+    /** Handler to pass to CodeEditor's onMount */
+    handleEditorMount: (editorInstance: editor.IStandaloneCodeEditor, monacoInstance: Monaco) => void;
+    /** Handler to pass to CodeEditor's onChange */
+    handleEditorChange: (value: string) => void;
+    /** Aggregated validation markers keyed by file path */
+    validationMarkers: Record<string, editor.IMarker[]>;
+    /** Mark a file as saved (clears dirty flag) */
+    markSaved: (path: string) => void;
+    /** Mark all files as saved */
+    markAllSaved: () => void;
+    /** Current cursor position in the active editor */
+    cursorPosition: {
+        line: number;
+        column: number;
+    } | null;
+}
+/**
+ * Headless hook for managing a multi-file Monaco editor workspace.
+ *
+ * Manages Monaco models, open tabs, active file, and dirty tracking.
+ * Pass the returned refs/handlers to a `CodeEditor` component.
+ *
+ * @example
+ * ```tsx
+ * const workspace = useCodeEditorWorkspace({ files, onFileChange });
+ *
+ * <CodeEditorTabs
+ *   tabs={workspace.openTabs}
+ *   activeTab={workspace.activeFilePath}
+ *   onTabSelect={workspace.setActiveFile}
+ *   onTabClose={workspace.closeFile}
+ * />
+ * <CodeEditor
+ *   value={workspace.activeFile?.value ?? ''}
+ *   onChange={workspace.handleEditorChange}
+ *   language={workspace.activeFile?.language}
+ *   editorRef={workspace.editorRef}
+ *   monacoRef={workspace.monacoRef}
+ *   onMount={workspace.handleEditorMount}
+ * />
+ * ```
+ */
+declare function useCodeEditorWorkspace({ files, initialOpenPaths, onFileChange, onValidationChange, }: UseCodeEditorWorkspaceOptions): UseCodeEditorWorkspaceReturn;
+
+interface CodeEditorTabRenderProps {
+    tab: CodeEditorTab;
+    isActive: boolean;
+    onSelect: () => void;
+    onClose: () => void;
+}
+interface CodeEditorTabsProps {
+    /** Open tabs to display */
+    tabs: CodeEditorTab[];
+    /** Path of the currently active tab */
+    activeTab?: string | null;
+    /** Called when a tab is selected */
+    onTabSelect?: (path: string) => void;
+    /** Called when a tab's close button is clicked */
+    onTabClose?: (path: string) => void;
+    /**
+     * Render prop for full tab customisation.
+     * When provided, default tab rendering is skipped entirely.
+     */
+    renderTab?: (props: CodeEditorTabRenderProps) => React__default.ReactNode;
+    /** Props for the outer container */
+    containerProps?: BoxProps;
+}
+/**
+ * Tab bar for the CodeEditor workspace.
+ *
+ * Provides default MUI-based rendering, but consumers can fully replace it
+ * via the `renderTab` render prop.
+ *
+ * @example
+ * ```tsx
+ * <CodeEditorTabs
+ *   tabs={workspace.openTabs}
+ *   activeTab={workspace.activeFilePath}
+ *   onTabSelect={workspace.setActiveFile}
+ *   onTabClose={workspace.closeFile}
+ * />
+ * ```
+ */
+declare const CodeEditorTabs: React__default.FC<CodeEditorTabsProps>;
+
+interface FileTreeNodeRenderProps {
+    node: FileTreeNode;
+    depth: number;
+    isSelected: boolean;
+    isExpanded: boolean;
+    onSelect: () => void;
+    onToggle: () => void;
+}
+interface CodeEditorFileTreeProps {
+    /** Tree data to render */
+    tree: FileTreeNode[];
+    /** Currently selected file path */
+    selectedPath?: string | null;
+    /** Called when a file node is clicked */
+    onFileSelect?: (path: string) => void;
+    /** Called when a folder is expanded/collapsed */
+    onFolderToggle?: (path: string, isExpanded: boolean) => void;
+    /**
+     * Render prop for full node customisation.
+     * When provided, default rendering is skipped.
+     */
+    renderNode?: (props: FileTreeNodeRenderProps) => React__default.ReactNode;
+    /** Paths of folders that should be expanded initially */
+    defaultExpandedPaths?: string[];
+    /** Width of the file tree panel */
+    width?: string | number;
+    /** Props for the outer container */
+    containerProps?: BoxProps;
+}
+/**
+ * File tree navigator for the CodeEditor workspace.
+ *
+ * Provides default MUI-based rendering with collapsible folders.
+ * Consumers can fully replace rendering via `renderNode`.
+ *
+ * @example
+ * ```tsx
+ * <CodeEditorFileTree
+ *   tree={fileTree}
+ *   selectedPath={workspace.activeFilePath}
+ *   onFileSelect={workspace.openFile}
+ * />
+ * ```
+ */
+declare const CodeEditorFileTree: React__default.FC<CodeEditorFileTreeProps>;
+
+interface CodeEditorStatusBarRenderProps {
+    gitInfo?: GitInfo;
+    language?: CodeEditorLanguage;
+    cursorPosition?: {
+        line: number;
+        column: number;
+    };
+    items?: CodeEditorStatusBarItem[];
+}
+interface CodeEditorStatusBarProps {
+    /** Git repository information */
+    gitInfo?: GitInfo;
+    /** Language of the active file */
+    language?: CodeEditorLanguage;
+    /** Current cursor position */
+    cursorPosition?: {
+        line: number;
+        column: number;
+    };
+    /** Additional custom items */
+    items?: CodeEditorStatusBarItem[];
+    /**
+     * Render prop for full status bar customisation.
+     * When provided, default rendering is skipped entirely.
+     */
+    renderStatusBar?: (props: CodeEditorStatusBarRenderProps) => React__default.ReactNode;
+    /** Called when the user clicks the branch name in the status bar */
+    onBranchClick?: () => void;
+    /** Props for the outer container */
+    containerProps?: BoxProps;
+}
+/**
+ * Status bar for the CodeEditor workspace.
+ *
+ * Displays git branch info, cursor position, file language, and custom items.
+ * Fully replaceable via `renderStatusBar` render prop.
+ *
+ * @example
+ * ```tsx
+ * <CodeEditorStatusBar
+ *   gitInfo={{ branch: 'main', isDirty: true, commitHash: 'a1b2c3d' }}
+ *   language="typescript"
+ *   cursorPosition={{ line: 10, column: 5 }}
+ * />
+ * ```
+ */
+declare const CodeEditorStatusBar: React__default.FC<CodeEditorStatusBarProps>;
+
+interface CodeEditorWelcomeScreenProps {
+    /** Custom logo or icon displayed in the center. Defaults to the Cere logo. */
+    logo?: React__default.ReactNode;
+    /**
+     * Content rendered below the logo. Accepts any ReactNode —
+     * shortcut hints, action buttons, descriptive text, etc.
+     */
+    children?: React__default.ReactNode;
+    /** Props forwarded to the outer container `Box`. */
+    containerProps?: BoxProps;
+}
+/**
+ * Default empty-state screen shown inside `CodeEditorWorkspace` when no file
+ * is open.  Renders a centered logo with an optional content slot underneath.
+ *
+ * @example
+ * ```tsx
+ * <CodeEditorWelcomeScreen>
+ *   <Typography variant="body2" color="text.secondary">
+ *     Open a file from the tree to start editing
+ *   </Typography>
+ * </CodeEditorWelcomeScreen>
+ * ```
+ */
+declare const CodeEditorWelcomeScreen: React__default.FC<CodeEditorWelcomeScreenProps>;
+
+interface CodeEditorWorkspaceProps extends Pick<UseCodeEditorWorkspaceOptions, 'files' | 'initialOpenPaths' | 'onFileChange' | 'onValidationChange'> {
+    /** File tree data. When omitted the file tree panel is hidden. */
+    fileTree?: FileTreeNode[];
+    /** Paths of folders expanded by default in the file tree */
+    defaultExpandedPaths?: string[];
+    /** Whether to show the tab bar. @default true */
+    showTabs?: boolean;
+    /** Whether to show the file tree panel. @default true (when fileTree is provided) */
+    showFileTree?: boolean;
+    /** Width of the file tree panel */
+    fileTreeWidth?: string | number;
+    /** Overall height of the workspace */
+    height?: string | number;
+    /** Props passed through to the inner CodeEditor */
+    editorProps?: Partial<Omit<CodeEditorProps, 'value' | 'onChange' | 'language' | 'editorRef' | 'monacoRef' | 'onMount'>>;
+    /** Props for the outer container */
+    containerProps?: BoxProps;
+    /** Replace the default tab bar rendering */
+    renderTabs?: (props: CodeEditorTabsProps & {
+        workspace: UseCodeEditorWorkspaceReturn;
+    }) => React__default.ReactNode;
+    /** Replace the default file tree rendering */
+    renderFileTree?: (props: CodeEditorFileTreeProps & {
+        workspace: UseCodeEditorWorkspaceReturn;
+    }) => React__default.ReactNode;
+    /** Replace the default editor rendering */
+    renderEditor?: (workspace: UseCodeEditorWorkspaceReturn) => React__default.ReactNode;
+    /** Replace the default status bar rendering */
+    renderStatusBar?: (props: CodeEditorStatusBarProps & {
+        workspace: UseCodeEditorWorkspaceReturn;
+    }) => React__default.ReactNode;
+    /** Replace the default welcome screen rendering (shown when no file is open) */
+    renderWelcomeScreen?: (workspace: UseCodeEditorWorkspaceReturn) => React__default.ReactNode;
+    /** Static ReactNode that replaces the default welcome screen entirely */
+    welcomeScreen?: React__default.ReactNode;
+    /** Props forwarded to the default `CodeEditorWelcomeScreen` (ignored when `welcomeScreen` or `renderWelcomeScreen` is provided) */
+    welcomeScreenProps?: CodeEditorWelcomeScreenProps;
+    /** Git repository information to display in the status bar */
+    gitInfo?: GitInfo;
+    /** Whether to show the status bar. @default true */
+    showStatusBar?: boolean;
+    /** Additional custom items for the status bar */
+    statusBarItems?: CodeEditorStatusBarItem[];
+    /** Expose the workspace instance to the parent via ref-like callback */
+    onWorkspaceReady?: (workspace: UseCodeEditorWorkspaceReturn) => void;
+    /** Called when the user presses Ctrl+S / Cmd+S. Receives all dirty files. */
+    onSave?: (dirtyFiles: CodeEditorFile[]) => void;
+    /** Called when the user clicks the branch name in the status bar */
+    onBranchClick?: () => void;
+}
+/**
+ * Convenience composed workspace that combines `CodeEditorFileTree`,
+ * `CodeEditorTabs`, and `CodeEditor` into a single layout.
+ *
+ * For full control, use `useCodeEditorWorkspace` directly and assemble
+ * the pieces yourself.
+ *
+ * @example
+ * ```tsx
+ * <CodeEditorWorkspace
+ *   files={files}
+ *   fileTree={tree}
+ *   initialOpenPaths={['src/index.ts']}
+ *   height="600px"
+ *   gitInfo={{ branch: 'main', isDirty: true, commitHash: 'a1b2c3d' }}
+ *   onFileChange={(path, value) => console.log(path, value)}
+ * />
+ * ```
+ */
+declare const CodeEditorWorkspace: React__default.FC<CodeEditorWorkspaceProps>;
+
+export { CodeEditor, type CodeEditorFile, CodeEditorFileTree, type CodeEditorFileTreeProps, type CodeEditorLanguage, type CodeEditorProps, CodeEditorStatusBar, type CodeEditorStatusBarItem, type CodeEditorStatusBarProps, type CodeEditorStatusBarRenderProps, type CodeEditorTab, type CodeEditorTabRenderProps, CodeEditorTabs, type CodeEditorTabsProps, CodeEditorWelcomeScreen, type CodeEditorWelcomeScreenProps, CodeEditorWorkspace, type CodeEditorWorkspaceProps, EXTENSION_LANGUAGE_MAP, type FileTreeNode, type FileTreeNodeRenderProps, FlowEditor, type FlowEditorProps, type GitInfo, type UseCodeEditorWorkspaceOptions, type UseCodeEditorWorkspaceReturn, type WorkflowNodeData, WorkflowNodeHandle, detectLanguage, getFileName, useCodeEditorWorkspace };