@tangle-network/ui 11.12.0 → 11.13.1

package/dist/editor/tiptap-editor.js

@@ -0,0 +1,271 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { loadCollaborationPeers } from "./editor-peers.js";
+import { retryableLazyEditor } from "./editor-lazy.js";
+import { useEditorContext } from "./editor-provider.js";
+import { EditorLoadingPlaceholder } from "./editor-loading.js";
+import { EditorToolbar } from "./editor-toolbar.js";
+import { Suspense, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/editor/tiptap-editor.tsx
+/**
+* Cursor colors with contrasting text.
+*/
+const cursorColors = {
+	"#FF6B6B": {
+		background: "#FF6B6B",
+		text: "#FFFFFF"
+	},
+	"#4ECDC4": {
+		background: "#4ECDC4",
+		text: "#000000"
+	},
+	"#45B7D1": {
+		background: "#45B7D1",
+		text: "#000000"
+	},
+	"#96CEB4": {
+		background: "#96CEB4",
+		text: "#000000"
+	},
+	"#FFEAA7": {
+		background: "#FFEAA7",
+		text: "#000000"
+	},
+	"#DDA0DD": {
+		background: "#DDA0DD",
+		text: "#000000"
+	},
+	"#98D8C8": {
+		background: "#98D8C8",
+		text: "#000000"
+	},
+	"#F7DC6F": {
+		background: "#F7DC6F",
+		text: "#000000"
+	},
+	"#BB8FCE": {
+		background: "#BB8FCE",
+		text: "#000000"
+	},
+	"#85C1E9": {
+		background: "#85C1E9",
+		text: "#000000"
+	}
+};
+/**
+* Get cursor label colors based on user color.
+*/
+function getCursorColors(color) {
+	return cursorColors[color] ?? {
+		background: color,
+		text: "#FFFFFF"
+	};
+}
+/**
+* Builds the collaborative editor against loaded tiptap namespaces. The peers
+* arrive as an argument so that this module reaches them through type-only
+* imports, which a bundler erases.
+*/
+function createTiptapEditor(peers) {
+	const { EditorContent, useEditor } = peers.react;
+	const StarterKit = peers.starterKit.default;
+	const Collaboration = peers.collaboration.default;
+	const CollaborationCaret = peers.collaborationCaret.default;
+	return function TiptapEditor({ initialContent, placeholder = "Start writing...", readOnly = false, autoFocus = false, className, contentClassName, onUpdate, onSelectionUpdate, onReady }) {
+		const { doc, provider, connectionState } = useEditorContext();
+		const fragment = useMemo(() => doc.getXmlFragment("prosemirror"), [doc]);
+		const extensions = useMemo(() => {
+			const baseExtensions = [StarterKit.configure({
+				history: false,
+				codeBlock: { HTMLAttributes: { class: "hljs" } }
+			}), Collaboration.configure({ fragment })];
+			if (provider?.awareness) baseExtensions.push(CollaborationCaret.configure({
+				provider,
+				user: provider.awareness.getLocalState()?.user ?? {
+					name: "Anonymous",
+					color: "#808080"
+				},
+				render: (user) => {
+					const { background, text } = getCursorColors(user.color);
+					const cursor = document.createElement("span");
+					cursor.className = "collaboration-cursor";
+					cursor.style.borderColor = background;
+					const label = document.createElement("span");
+					label.className = "collaboration-cursor-label";
+					label.style.backgroundColor = background;
+					label.style.color = text;
+					label.textContent = user.name;
+					cursor.appendChild(label);
+					return cursor;
+				}
+			}));
+			return baseExtensions;
+		}, [fragment, provider]);
+		const editor = useEditor({
+			extensions,
+			editable: !readOnly,
+			autofocus: autoFocus,
+			editorProps: { attributes: {
+				class: cn("prose prose-sm sm:prose-base dark:prose-invert max-w-none", "focus:outline-none", contentClassName),
+				"data-placeholder": placeholder
+			} },
+			onUpdate: ({ editor: ed }) => {
+				onUpdate?.(ed);
+			},
+			onSelectionUpdate: ({ editor: ed }) => {
+				onSelectionUpdate?.(ed);
+			},
+			onCreate: ({ editor: ed }) => {
+				onReady?.(ed);
+			}
+		});
+		useEffect(() => {
+			if (editor) editor.setEditable(!readOnly);
+		}, [editor, readOnly]);
+		useEffect(() => {
+			if (editor && initialContent && connectionState === "synced" && editor.isEmpty) editor.commands.setContent(initialContent);
+		}, [
+			editor,
+			initialContent,
+			connectionState
+		]);
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("relative min-h-[200px] w-full rounded-lg border border-border", "bg-background", className),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-2 right-2 z-10",
+					children: /* @__PURE__ */ jsx(ConnectionIndicator, { state: connectionState })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "p-4 pt-10",
+					children: /* @__PURE__ */ jsx(EditorContent, { editor })
+				}),
+				/* @__PURE__ */ jsx("style", { children: `
+        .ProseMirror p.is-editor-empty:first-child::before {
+          content: attr(data-placeholder);
+          float: left;
+          color: var(--muted-foreground, #999);
+          pointer-events: none;
+          height: 0;
+        }
+
+        .collaboration-cursor {
+          position: relative;
+          border-left: 2px solid;
+          margin-left: -1px;
+          margin-right: -1px;
+          pointer-events: none;
+          word-break: normal;
+        }
+
+        .collaboration-cursor-label {
+          position: absolute;
+          top: -1.4em;
+          left: -1px;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: normal;
+          padding: 2px 6px;
+          border-radius: 4px 4px 4px 0;
+          white-space: nowrap;
+          user-select: none;
+        }
+
+        .ProseMirror pre {
+          background: var(--muted, #f4f4f5);
+          border-radius: 0.375rem;
+          padding: 0.75rem 1rem;
+          font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+          font-size: 0.875rem;
+          overflow-x: auto;
+        }
+
+        .dark .ProseMirror pre {
+          background: var(--muted, #27272a);
+        }
+
+        .ProseMirror code {
+          background: var(--muted, #f4f4f5);
+          border-radius: 0.25rem;
+          padding: 0.125rem 0.25rem;
+          font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+          font-size: 0.875em;
+        }
+
+        .dark .ProseMirror code {
+          background: var(--muted, #27272a);
+        }
+
+        .ProseMirror pre code {
+          background: transparent;
+          padding: 0;
+          font-size: inherit;
+        }
+      ` })
+			]
+		});
+	};
+}
+const lazyTiptapEditor = retryableLazyEditor(async () => createTiptapEditor(await loadCollaborationPeers()));
+/**
+* TiptapEditor - Collaborative markdown editor with Y.js sync.
+* Must be used within an EditorProvider. Loads its tiptap, Hocuspocus and
+* yjs peers on first render.
+*/
+function TiptapEditor(props) {
+	const LazyTiptapEditor = lazyTiptapEditor();
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(EditorLoadingPlaceholder, { className: cn("min-h-[200px]", props.className) }),
+		children: /* @__PURE__ */ jsx(LazyTiptapEditor, { ...props })
+	});
+}
+/**
+* Connection status indicator component.
+*/
+function ConnectionIndicator({ state }) {
+	const config = {
+		disconnected: {
+			color: "bg-red-500",
+			label: "Disconnected"
+		},
+		connecting: {
+			color: "bg-yellow-500 animate-pulse",
+			label: "Connecting..."
+		},
+		connected: {
+			color: "bg-blue-500",
+			label: "Connected"
+		},
+		synced: {
+			color: "bg-green-500",
+			label: "Synced"
+		}
+	}[state];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5 text-muted-foreground text-xs",
+		children: [/* @__PURE__ */ jsx("span", { className: cn("h-2 w-2 rounded-full", config.color) }), /* @__PURE__ */ jsx("span", { children: config.label })]
+	});
+}
+/**
+* Collaborators list component.
+* Shows active users in the document.
+*/
+function CollaboratorsList({ collaborators, className }) {
+	if (collaborators.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-1", className),
+		children: [collaborators.slice(0, 5).map((collab) => /* @__PURE__ */ jsx("div", {
+			className: "flex h-6 w-6 items-center justify-center rounded-full font-medium text-xs",
+			style: { backgroundColor: collab.user.color },
+			title: collab.user.name,
+			children: collab.user.name.charAt(0).toUpperCase()
+		}, collab.clientId)), collaborators.length > 5 && /* @__PURE__ */ jsxs("div", {
+			className: "flex h-6 w-6 items-center justify-center rounded-full bg-muted font-medium text-xs",
+			children: ["+", collaborators.length - 5]
+		})]
+	});
+}
+//#endregion
+export { CollaboratorsList, EditorToolbar, TiptapEditor, createTiptapEditor };

package/dist/editor/use-editor.d.ts

@@ -0,0 +1,67 @@
+import { Collaborator, ConnectionState } from "./editor-provider.js";
+import { HocuspocusProvider } from "@hocuspocus/provider";
+//#region src/editor/use-editor.d.ts
+/**
+ * Hook to get the current connection state and helpers.
+ */
+export declare function useEditorConnection(): {
+  /** Current connection state string */
+  state: ConnectionState;
+  /** Whether connected to the server (connected or synced) */
+  isConnected: boolean;
+  /** Whether currently attempting to connect */
+  isConnecting: boolean;
+  /** Whether disconnected from the server */
+  isDisconnected: boolean;
+  /** Whether the document is synced with the server */
+  isSynced: boolean;
+  /** Connect to the collaboration server */
+  connect: () => void;
+  /** Disconnect from the collaboration server */
+  disconnect: () => void;
+};
+/**
+ * Hook to get the list of active collaborators.
+ */
+export declare function useCollaborators(): {
+  /** List of active collaborators (excluding self) */
+  collaborators: Collaborator[];
+  /** Number of other collaborators */
+  count: number;
+  /** Whether there are other collaborators present */
+  hasOthers: boolean;
+};
+/**
+ * Hook to track a specific collaborator's presence.
+ */
+export declare function useCollaboratorPresence(userId: string): Collaborator | null;
+/**
+ * Hook to sync local state with the Y.Doc.
+ * Useful for persisting editor metadata.
+ */
+export declare function useYjsState<T>(key: string, initialValue: T): [T, (value: T) => void];
+/**
+ * Hook to track document changes.
+ * Returns true if there are unsaved changes since the last save.
+ */
+export declare function useDocumentChanges(onSave?: () => Promise<void>): {
+  /** Whether there are unsaved changes */
+  isDirty: boolean;
+  /** Whether save is in progress */
+  isSaving: boolean;
+  /** When the document was last saved */
+  lastSaved: Date | null;
+  /** Save the document */
+  save: () => Promise<void>;
+};
+/**
+ * Hook to get awareness state for presence features.
+ * Provides lower-level access to the Hocuspocus awareness.
+ */
+export declare function useAwareness(): {
+  localState: Record<string, unknown>;
+  setLocalState: (state: Record<string, unknown>) => void;
+  setLocalStateField: (field: string, value: unknown) => void;
+  awareness: HocuspocusProvider["awareness"] | undefined;
+};
+//#endregion

package/dist/editor/use-editor.js

@@ -0,0 +1,158 @@
+"use client";
+import { useEditorContext } from "./editor-provider.js";
+import { useCallback, useEffect, useState } from "react";
+//#region src/editor/use-editor.ts
+/**
+* Hook to get the current connection state and helpers.
+*/
+function useEditorConnection() {
+	const { connectionState, isSynced, connect, disconnect } = useEditorContext();
+	return {
+		/** Current connection state string */
+		state: connectionState,
+		/** Whether connected to the server (connected or synced) */
+		isConnected: connectionState === "connected" || connectionState === "synced",
+		/** Whether currently attempting to connect */
+		isConnecting: connectionState === "connecting",
+		/** Whether disconnected from the server */
+		isDisconnected: connectionState === "disconnected",
+		/** Whether the document is synced with the server */
+		isSynced,
+		/** Connect to the collaboration server */
+		connect,
+		/** Disconnect from the collaboration server */
+		disconnect
+	};
+}
+/**
+* Hook to get the list of active collaborators.
+*/
+function useCollaborators() {
+	const { collaborators } = useEditorContext();
+	const count = collaborators.length;
+	return {
+		/** List of active collaborators (excluding self) */
+		collaborators,
+		/** Number of other collaborators */
+		count,
+		/** Whether there are other collaborators present */
+		hasOthers: count > 0
+	};
+}
+/**
+* Hook to track a specific collaborator's presence.
+*/
+function useCollaboratorPresence(userId) {
+	const { collaborators } = useEditorContext();
+	return collaborators.find((c) => c.user.userId === userId) ?? null;
+}
+/**
+* Hook to sync local state with the Y.Doc.
+* Useful for persisting editor metadata.
+*/
+function useYjsState(key, initialValue) {
+	const { doc } = useEditorContext();
+	const [value, setLocalValue] = useState(initialValue);
+	const metaMap = doc.getMap("metadata");
+	useEffect(() => {
+		const updateValue = () => {
+			const stored = metaMap.get(key);
+			if (stored !== void 0) setLocalValue(stored);
+		};
+		updateValue();
+		metaMap.observe(updateValue);
+		return () => {
+			metaMap.unobserve(updateValue);
+		};
+	}, [metaMap, key]);
+	return [value, useCallback((newValue) => {
+		doc.transact(() => {
+			metaMap.set(key, newValue);
+		});
+	}, [
+		doc,
+		metaMap,
+		key
+	])];
+}
+/**
+* Hook to track document changes.
+* Returns true if there are unsaved changes since the last save.
+*/
+function useDocumentChanges(onSave) {
+	const { doc } = useEditorContext();
+	const [isDirty, setIsDirty] = useState(false);
+	const [isSaving, setIsSaving] = useState(false);
+	const [lastSaved, setLastSaved] = useState(null);
+	useEffect(() => {
+		const handleUpdate = () => {
+			setIsDirty(true);
+		};
+		doc.on("update", handleUpdate);
+		return () => {
+			doc.off("update", handleUpdate);
+		};
+	}, [doc]);
+	return {
+		/** Whether there are unsaved changes */
+		isDirty,
+		/** Whether save is in progress */
+		isSaving,
+		/** When the document was last saved */
+		lastSaved,
+		/** Save the document */
+		save: useCallback(async () => {
+			if (!onSave || isSaving) return;
+			setIsSaving(true);
+			try {
+				await onSave();
+				setIsDirty(false);
+				setLastSaved(/* @__PURE__ */ new Date());
+			} finally {
+				setIsSaving(false);
+			}
+		}, [onSave, isSaving])
+	};
+}
+/**
+* Hook to get awareness state for presence features.
+* Provides lower-level access to the Hocuspocus awareness.
+*/
+function useAwareness() {
+	const { provider } = useEditorContext();
+	const [localState, setLocalStateValue] = useState({});
+	const awareness = provider?.awareness;
+	useEffect(() => {
+		if (!awareness) return;
+		const updateState = () => {
+			setLocalStateValue(awareness.getLocalState() ?? {});
+		};
+		updateState();
+		awareness.on("change", updateState);
+		return () => {
+			awareness.off("change", updateState);
+		};
+	}, [awareness]);
+	return {
+		/** Current local awareness state */
+		localState,
+		/** Set the entire local state (merges with existing) */
+		setLocalState: useCallback((state) => {
+			if (!awareness) return;
+			const current = awareness.getLocalState() ?? {};
+			awareness.setLocalState({
+				...current,
+				...state
+			});
+		}, [awareness]),
+		/** Set a single field in the local state */
+		setLocalStateField: useCallback((field, value) => {
+			if (!awareness) return;
+			awareness.setLocalStateField(field, value);
+		}, [awareness]),
+		/** The raw awareness instance */
+		awareness
+	};
+}
+//#endregion
+export { useAwareness, useCollaboratorPresence, useCollaborators, useDocumentChanges, useEditorConnection, useYjsState };

package/dist/editor.d.ts

@@ -1,119 +1,6 @@
-import { a as DocumentEditorPaneProps, c as EditorContextValue, d as EditorTokenRefreshResult, f as EditorUser, i as DocumentEditorPaneCollaborationConfig, l as EditorProvider, n as DocumentEditorMode, o as Collaborator, p as useEditorContext, r as DocumentEditorPane, s as ConnectionState, t as DocumentEditorBackend, u as EditorProviderProps } from "./document-editor-pane-BilJfiCo.js";
-import "react";
-import { HocuspocusProvider } from "@hocuspocus/provider";
-import { Editor } from "@tiptap/react";
-//#region src/editor/editor-toolbar.d.ts
-/**
- * Editor toolbar component.
- * Provides basic formatting controls.
- */
-export declare function EditorToolbar({ editor, className }: {
-  editor: Editor | null;
-  className?: string;
-}): import("react").JSX.Element | null;
-//#endregion
-//#region src/editor/tiptap-editor.d.ts
-/**
- * Props for TiptapEditor component.
- */
-interface TiptapEditorProps {
-  /** Initial content for new documents (markdown string) */
-  initialContent?: string;
-  /** Placeholder text when editor is empty */
-  placeholder?: string;
-  /** Whether the editor is read-only */
-  readOnly?: boolean;
-  /** Whether to auto-focus on mount */
-  autoFocus?: boolean;
-  /** Custom className for the editor wrapper */
-  className?: string;
-  /** Custom className for the editor content area */
-  contentClassName?: string;
-  /** Callback when content changes */
-  onUpdate?: (editor: Editor) => void;
-  /** Callback when selection changes */
-  onSelectionUpdate?: (editor: Editor) => void;
-  /** Callback when editor is ready */
-  onReady?: (editor: Editor) => void;
-}
-/**
- * TiptapEditor - Collaborative markdown editor with Y.js sync.
- * Must be used within an EditorProvider. Loads its tiptap, Hocuspocus and
- * yjs peers on first render.
- */
-export declare function TiptapEditor(props: TiptapEditorProps): import("react").JSX.Element;
-/**
- * Collaborators list component.
- * Shows active users in the document.
- */
-export declare function CollaboratorsList({ collaborators, className }: {
-  collaborators: Collaborator[];
-  className?: string;
-}): import("react").JSX.Element | null;
-//#endregion
-//#region src/editor/use-editor.d.ts
-/**
- * Hook to get the current connection state and helpers.
- */
-export declare function useEditorConnection(): {
-  /** Current connection state string */
-  state: ConnectionState;
-  /** Whether connected to the server (connected or synced) */
-  isConnected: boolean;
-  /** Whether currently attempting to connect */
-  isConnecting: boolean;
-  /** Whether disconnected from the server */
-  isDisconnected: boolean;
-  /** Whether the document is synced with the server */
-  isSynced: boolean;
-  /** Connect to the collaboration server */
-  connect: () => void;
-  /** Disconnect from the collaboration server */
-  disconnect: () => void;
-};
-/**
- * Hook to get the list of active collaborators.
- */
-export declare function useCollaborators(): {
-  /** List of active collaborators (excluding self) */
-  collaborators: Collaborator[];
-  /** Number of other collaborators */
-  count: number;
-  /** Whether there are other collaborators present */
-  hasOthers: boolean;
-};
-/**
- * Hook to track a specific collaborator's presence.
- */
-export declare function useCollaboratorPresence(userId: string): Collaborator | null;
-/**
- * Hook to sync local state with the Y.Doc.
- * Useful for persisting editor metadata.
- */
-export declare function useYjsState<T>(key: string, initialValue: T): [T, (value: T) => void];
-/**
- * Hook to track document changes.
- * Returns true if there are unsaved changes since the last save.
- */
-export declare function useDocumentChanges(onSave?: () => Promise<void>): {
-  /** Whether there are unsaved changes */
-  isDirty: boolean;
-  /** Whether save is in progress */
-  isSaving: boolean;
-  /** When the document was last saved */
-  lastSaved: Date | null;
-  /** Save the document */
-  save: () => Promise<void>;
-};
-/**
- * Hook to get awareness state for presence features.
- * Provides lower-level access to the Hocuspocus awareness.
- */
-export declare function useAwareness(): {
-  localState: Record<string, unknown>;
-  setLocalState: (state: Record<string, unknown>) => void;
-  setLocalStateField: (field: string, value: unknown) => void;
-  awareness: HocuspocusProvider["awareness"] | undefined;
-};
-//#endregion
-export { type Collaborator, type ConnectionState, type DocumentEditorBackend, type DocumentEditorMode, DocumentEditorPane, type DocumentEditorPaneCollaborationConfig, type DocumentEditorPaneProps, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorTokenRefreshResult, type EditorUser, type TiptapEditorProps, useEditorContext };
+import { Collaborator, ConnectionState, EditorContextValue, EditorProvider, EditorProviderProps, EditorTokenRefreshResult, EditorUser, useEditorContext } from "./editor/editor-provider.js";
+import { EditorToolbar } from "./editor/editor-toolbar.js";
+import { CollaboratorsList, TiptapEditor, TiptapEditorProps } from "./editor/tiptap-editor.js";
+import { DocumentEditorBackend, DocumentEditorMode, DocumentEditorPane, DocumentEditorPaneCollaborationConfig, DocumentEditorPaneProps } from "./editor/document-editor-pane.js";
+import { useAwareness, useCollaboratorPresence, useCollaborators, useDocumentChanges, useEditorConnection, useYjsState } from "./editor/use-editor.js";
+export { type Collaborator, CollaboratorsList, type ConnectionState, type DocumentEditorBackend, type DocumentEditorMode, DocumentEditorPane, type DocumentEditorPaneCollaborationConfig, type DocumentEditorPaneProps, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorTokenRefreshResult, EditorToolbar, type EditorUser, TiptapEditor, type TiptapEditorProps, useAwareness, useCollaboratorPresence, useCollaborators, useDocumentChanges, useEditorConnection, useEditorContext, useYjsState };

package/dist/editor.js

@@ -1,2 +1,6 @@
-import { a as useCollaborators, c as useYjsState, d as EditorToolbar, f as EditorProvider, i as useCollaboratorPresence, l as CollaboratorsList, o as useDocumentChanges, p as useEditorContext, r as useAwareness, s as useEditorConnection, t as DocumentEditorPane, u as TiptapEditor } from "./document-editor-pane-POsq5Q0o.js";
+import { EditorProvider, useEditorContext } from "./editor/editor-provider.js";
+import { EditorToolbar } from "./editor/editor-toolbar.js";
+import { CollaboratorsList, TiptapEditor } from "./editor/tiptap-editor.js";
+import { useAwareness, useCollaboratorPresence, useCollaborators, useDocumentChanges, useEditorConnection, useYjsState } from "./editor/use-editor.js";
+import { DocumentEditorPane } from "./editor/document-editor-pane.js";
 export { CollaboratorsList, DocumentEditorPane, EditorProvider, EditorToolbar, TiptapEditor, useAwareness, useCollaboratorPresence, useCollaborators, useDocumentChanges, useEditorConnection, useEditorContext, useYjsState };

package/dist/files/file-artifact-pane.d.ts

@@ -0,0 +1,47 @@
+import { ArtifactPaneProps } from "../primitives/artifact-pane.js";
+import { DocumentEditorBackend, DocumentEditorMode, DocumentEditorPaneCollaborationConfig } from "../editor/document-editor-pane.js";
+import { FilePreviewProps } from "./file-preview.js";
+import { FileTabData } from "./file-tabs.js";
+//#region src/files/file-artifact-pane.d.ts
+export interface FileArtifactPaneEditorOptions {
+  enabled?: boolean;
+  /** Persisted baseline when content is the current draft. */
+  savedContent?: string;
+  mode?: DocumentEditorMode;
+  defaultMode?: DocumentEditorMode;
+  onModeChange?: (mode: DocumentEditorMode) => void;
+  backend?: DocumentEditorBackend;
+  collaboration?: DocumentEditorPaneCollaborationConfig;
+  placeholder?: string;
+  autoFocus?: boolean;
+  readOnly?: boolean;
+  saving?: boolean;
+  saveLabel?: string;
+  onChange?: (markdown: string) => void;
+  onSave?: (markdown: string) => Promise<void> | void;
+  previewClassName?: string;
+  editorClassName?: string;
+}
+export interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className"> {
+  path?: string;
+  tabs?: FileTabData[];
+  activeTabId?: string;
+  onTabSelect?: (id: string) => void;
+  onTabClose?: (id: string) => void;
+  eyebrow?: ArtifactPaneProps["eyebrow"];
+  meta?: ArtifactPaneProps["meta"];
+  toolbar?: ArtifactPaneProps["toolbar"];
+  footer?: ArtifactPaneProps["footer"];
+  className?: string;
+  headerClassName?: ArtifactPaneProps["headerClassName"];
+  hideTitleBlock?: ArtifactPaneProps["hideTitleBlock"];
+  editor?: FileArtifactPaneEditorOptions;
+}
+/**
+ * FileArtifactPane — opinionated artifact frame for file previews with tabs and
+ * header actions. The body is `FilePreview`, so every kind it renders (image,
+ * PDF, video, audio, CSV, spreadsheet, markdown, code, text) renders here too;
+ * `onDownload` drives both the header button and the body's download cards.
+ */
+export declare function FileArtifactPane({ filename, content, blobUrl, mimeType, size, onClose, onDownload, urlTransform, path, tabs, activeTabId, onTabSelect, onTabClose, eyebrow, meta, toolbar, footer, className, headerClassName, hideTitleBlock, editor }: FileArtifactPaneProps): import("react").JSX.Element;
+//#endregion