ai-design-system 0.1.13 → 0.1.15

package/components/features/AIDocEditor/index.ts

@@ -2,7 +2,23 @@
  * AIDocEditor Feature Component
  * 
  * Complete document editor with inline comment annotations
+ * Supports both single-document and multi-tab modes
  */
 
 export { AIDocEditor } from './AIDocEditor'
-export type { AIDocEditorProps } from './AIDocEditor'
+export type {
+  AIDocEditorProps,
+  AIDocEditorSingleProps,
+  AIDocEditorMultiTabProps,
+} from './AIDocEditor'
+
+export { useAIDocEditorMock, useAIMultiTabDocEditorMock } from './useAIDocEditor.mock'
+export type { UseAIDocEditorReturn, UseAIMultiTabDocEditorReturn } from './useAIDocEditor'
+
+export {
+  sampleContent,
+  currentUser,
+  sampleAnnotations,
+  sampleDocumentFiles,
+  sampleMultiTabDocuments,
+} from './AIDocEditor.mocks'

package/components/features/AIDocEditor/useAIDocEditor.d.ts

@@ -46,9 +46,12 @@
  */
 
 import type { Annotation } from '@/types/ai-editor/annotations'
+import type { DocumentFile, DocumentWithAnnotations } from '@/types/ai-editor/editor'
+import type { JSONContent } from '@tiptap/core'
 
 /**
- * Return type for useAIDocEditor hook
+ * Return type for useAIDocEditor hook (single document)
+ * @deprecated Use UseAIMultiTabDocEditorReturn for multi-tab support
  */
 export interface UseAIDocEditorReturn {
   /**
@@ -81,8 +84,73 @@ export interface UseAIDocEditorReturn {
 }
 
 /**
- * Hook for managing document annotations
+ * Return type for multi-tab document editor hook
+ */
+export interface UseAIMultiTabDocEditorReturn {
+  /**
+   * Array of open documents
+   */
+  documents: DocumentWithAnnotations[]
+
+  /**
+   * ID of currently active document
+   */
+  activeDocumentId?: string
+
+  /**
+   * Add a new document tab
+   * @param file - Document metadata
+   * @param content - Initial document content
+   */
+  addDocument: (file: DocumentFile, content: JSONContent | string) => void,
+
+  /**
+   * Close a document tab
+   * @param documentId - ID of the document to close
+   */
+  closeDocument: (documentId: string) => void
+
+  /**
+   * Switch to a different document tab
+   * @param documentId - ID of the document to switch to
+   */
+  switchDocument: (documentId: string) => void
+
+  /**
+    * Add annotation to the currently active document
+   * @param annotation - The annotation to add
+   */
+    addAnnotation: (annotation: Annotation) => Promise<void> | void
+
+  /**
+    * Update annotation in the currently active document
+   * @param annotation - The updated annotation
+   */
+    updateAnnotation: (annotation: Annotation) => Promise<void> | void
+
+  /**
+    * Delete annotation from the currently active document
+   * @param annotationId - ID of the annotation to delete
+   */
+    deleteAnnotation: (annotationId: string) => Promise<void> | void
+
+  /**
+   * Mark document as dirty
+   * @param documentId - ID of the document
+   * @param isDirty - Whether document has unsaved changes
+   */
+  setDocumentDirty: (documentId: string, isDirty: boolean) => void
+
+  /**
+   * Loading state for async operations
+   */
+  loading: boolean
+}
+
+/**
+ * Hook for managing document annotations (single document, backward compatible)
  * 
+ * @deprecated Use useAIMultiTabDocEditor for multi-tab support
  * Applications must implement this hook to provide real data management.
  * The hook should handle:
  * - Fetching annotations from API
@@ -95,3 +163,18 @@ export interface UseAIDocEditorReturn {
  * @returns Object containing annotations array and mutation methods
  */
 export function useAIDocEditor(documentId: string): UseAIDocEditorReturn
+
+/**
+ * Hook for managing multi-tab documents with annotations
+ * 
+ * Applications must implement this hook to provide real data management.
+ * The hook should handle:
+ * - Managing multiple open documents
+ * - Tracking active document
+ * - Fetching/creating annotations per document
+ * - Document dirty state tracking
+ * - Adding/removing document tabs
+ * 
+ * @returns Object containing documents array, active document ID, and mutation methods
+ */
+export function useAIMultiTabDocEditor(): UseAIMultiTabDocEditorReturn

package/components/features/AIDocEditor/useAIDocEditor.mock.ts

@@ -7,33 +7,26 @@
 
 import { useState, useCallback } from 'react'
 import type { Annotation } from '@/types/ai-editor/annotations'
-import type { UseAIDocEditorReturn } from './useAIDocEditor'
+import type { DocumentFile, DocumentWithAnnotations } from '@/types/ai-editor'
+import type { UseAIDocEditorReturn, UseAIMultiTabDocEditorReturn } from './useAIDocEditor'
 
-/**
- * Mock hook for managing document annotations in Storybook
- * 
- * Simulates async operations with setTimeout to demonstrate loading states
- * and realistic user interactions.
- * 
- * @param initialAnnotations - Initial annotations to display
- * @returns Mock implementation of UseAIDocEditorReturn
- */
-export function useAIDocEditorMock(
-  initialAnnotations: Annotation[] = []
+type MultiDocMockConfig = {
+  multiDoc: true
+  initialDocuments?: DocumentWithAnnotations[]
+}
+
+function useSingleDocEditorMockState(
+  initialAnnotations: Annotation[]
 ): UseAIDocEditorReturn {
   const [annotations, setAnnotations] = useState<Annotation[]>(initialAnnotations)
   const [loading, setLoading] = useState(false)
 
-  /**
-   * Add a new annotation with simulated async delay
-   */
   const addAnnotation = useCallback(async (annotation: Annotation) => {
     console.log('[AIDocEditor Mock] Adding annotation:', annotation)
     setLoading(true)
-    
-    // Simulate API call delay
+
     await new Promise(resolve => setTimeout(resolve, 500))
-    
+
     setAnnotations(prev => {
       const updated = [...prev, annotation]
       console.log('[AIDocEditor Mock] Annotations after add:', updated)
@@ -42,16 +35,12 @@ export function useAIDocEditorMock(
     setLoading(false)
   }, [])
 
-  /**
-   * Update an existing annotation with simulated async delay
-   */
   const updateAnnotation = useCallback(async (annotation: Annotation) => {
     console.log('[AIDocEditor Mock] Updating annotation:', annotation)
     setLoading(true)
-    
-    // Simulate API call delay
+
     await new Promise(resolve => setTimeout(resolve, 500))
-    
+
     setAnnotations(prev => {
       const updated = prev.map(a => (a.id === annotation.id ? annotation : a))
       console.log('[AIDocEditor Mock] Annotations after update:', updated)
@@ -60,15 +49,11 @@ export function useAIDocEditorMock(
     setLoading(false)
   }, [])
 
-  /**
-   * Delete an annotation with simulated async delay
-   */
   const deleteAnnotation = useCallback(async (annotationId: string) => {
     setLoading(true)
-    
-    // Simulate API call delay
+
     await new Promise(resolve => setTimeout(resolve, 500))
-    
+
     setAnnotations(prev => prev.filter(a => a.id !== annotationId))
     setLoading(false)
   }, [])
@@ -81,3 +66,167 @@ export function useAIDocEditorMock(
     loading,
   }
 }
+
+function useMultiTabDocEditorMockState(
+  initialDocuments: DocumentWithAnnotations[]
+): UseAIMultiTabDocEditorReturn {
+  const [documents, setDocuments] = useState(initialDocuments)
+  const [activeDocumentId, setActiveDocumentId] = useState<string | undefined>(
+    initialDocuments[0]?.file.id
+  )
+  const [loading, setLoading] = useState(false)
+
+  const addDocument = useCallback((file: DocumentFile, content: any) => {
+    console.log('[Multi-Tab Mock] Adding document:', file.name)
+    setDocuments(prev => [...prev, { file, content, annotations: [] }])
+    setActiveDocumentId(file.id)
+  }, [])
+
+  const closeDocument = useCallback((documentId: string) => {
+    console.log('[Multi-Tab Mock] Closing document:', documentId)
+    setDocuments(prev => {
+      const filtered = prev.filter(doc => doc.file.id !== documentId)
+      if (activeDocumentId === documentId && filtered.length > 0) {
+        setActiveDocumentId(filtered[0].file.id)
+      }
+      if (filtered.length === 0) {
+        setActiveDocumentId(undefined)
+      }
+      return filtered
+    })
+  }, [activeDocumentId])
+
+  const switchDocument = useCallback((documentId: string) => {
+    console.log('[Multi-Tab Mock] Switching to document:', documentId)
+    setActiveDocumentId(documentId)
+  }, [])
+
+  const addAnnotation = useCallback(async (annotation: Annotation) => {
+    if (!activeDocumentId) {
+      return
+    }
+
+    setLoading(true)
+    await new Promise(resolve => setTimeout(resolve, 500))
+
+    setDocuments(prev =>
+      prev.map(doc =>
+        doc.file.id === activeDocumentId
+          ? { ...doc, annotations: [...doc.annotations, annotation] }
+          : doc
+      )
+    )
+    setLoading(false)
+  }, [activeDocumentId])
+
+  const updateAnnotation = useCallback(async (annotation: Annotation) => {
+    if (!activeDocumentId) {
+      return
+    }
+
+    setLoading(true)
+    await new Promise(resolve => setTimeout(resolve, 500))
+
+    setDocuments(prev =>
+      prev.map(doc =>
+        doc.file.id === activeDocumentId
+          ? {
+              ...doc,
+              annotations: doc.annotations.map(a =>
+                a.id === annotation.id ? annotation : a
+              ),
+            }
+          : doc
+      )
+    )
+    setLoading(false)
+  }, [activeDocumentId])
+
+  const deleteAnnotation = useCallback(async (annotationId: string) => {
+    if (!activeDocumentId) {
+      return
+    }
+
+    setLoading(true)
+    await new Promise(resolve => setTimeout(resolve, 500))
+
+    setDocuments(prev =>
+      prev.map(doc =>
+        doc.file.id === activeDocumentId
+          ? {
+              ...doc,
+              annotations: doc.annotations.filter(a => a.id !== annotationId),
+            }
+          : doc
+      )
+    )
+    setLoading(false)
+  }, [activeDocumentId])
+
+  const setDocumentDirty = useCallback((documentId: string, isDirty: boolean) => {
+    setDocuments(prev =>
+      prev.map(doc =>
+        doc.file.id === documentId
+          ? { ...doc, file: { ...doc.file, isDirty } }
+          : doc
+      )
+    )
+  }, [])
+
+  return {
+    documents,
+    activeDocumentId,
+    addDocument,
+    closeDocument,
+    switchDocument,
+    addAnnotation,
+    updateAnnotation,
+    deleteAnnotation,
+    setDocumentDirty,
+    loading,
+  }
+}
+
+/**
+ * Mock hook for managing document annotations in Storybook
+ * 
+ * Simulates async operations with setTimeout to demonstrate loading states
+ * and realistic user interactions.
+ * 
+ * @param initialAnnotations - Initial annotations to display
+ * @returns Mock implementation of UseAIDocEditorReturn
+ */
+export function useAIDocEditorMock(
+  initialAnnotations: Annotation[]
+): UseAIDocEditorReturn
+export function useAIDocEditorMock(config: MultiDocMockConfig): UseAIMultiTabDocEditorReturn
+export function useAIDocEditorMock(
+  initialAnnotationsOrConfig: Annotation[] | MultiDocMockConfig = []
+): UseAIDocEditorReturn | UseAIMultiTabDocEditorReturn {
+  const isMultiDoc = !Array.isArray(initialAnnotationsOrConfig) && initialAnnotationsOrConfig.multiDoc === true
+  const singleInitialAnnotations = Array.isArray(initialAnnotationsOrConfig) ? initialAnnotationsOrConfig : []
+  const multiInitialDocuments = !Array.isArray(initialAnnotationsOrConfig)
+    ? (initialAnnotationsOrConfig.initialDocuments ?? [])
+    : []
+
+  const singleState = useSingleDocEditorMockState(singleInitialAnnotations)
+  const multiState = useMultiTabDocEditorMockState(multiInitialDocuments)
+
+  if (isMultiDoc) {
+    return multiState
+  }
+
+  return singleState
+}
+
+/**
+ * Mock hook for managing multi-tab documents in Storybook
+ * 
+ * Simulates multi-document state management with tab switching, closing, and annotation updates.
+ * 
+ * @param initialDocuments - Initial documents to display
+ * @returns Mock implementation of UseAIMultiTabDocEditorReturn
+ */
+export function useAIMultiTabDocEditorMock(initialDocuments: any[] = []): UseAIMultiTabDocEditorReturn {
+  return useMultiTabDocEditorMockState(initialDocuments as DocumentWithAnnotations[])
+}

package/dist/index.cjs

@@ -6479,6 +6479,85 @@ var ModeToggle = React33__namespace.memo(({ className }) => {
   ] });
 });
 ModeToggle.displayName = "ModeToggle";
+var DocumentTabBar = React33__namespace.default.memo(
+  ({ tabs, activeTabId, onTabSelect, onTabClose, className }) => {
+    var _a;
+    if (tabs.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center border-b border-border bg-background",
+          className
+        ),
+        "data-slot": "document-tab-bar",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea2, { orientation: "horizontal", className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Tabs2,
+          {
+            value: activeTabId || ((_a = tabs[0]) == null ? void 0 : _a.id),
+            onValueChange: onTabSelect,
+            className: "h-auto flex-1",
+            children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "h-10 rounded-none border-none bg-transparent p-0 w-full justify-start gap-0", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center border-r border-border/50 last:border-r-0",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    TabsTrigger,
+                    {
+                      value: tab.id,
+                      className: cn(
+                        "data-[state=inactive]:bg-muted/20 data-[state=inactive]:text-muted-foreground",
+                        "rounded-none border-b-2 border-transparent data-[state=active]:border-primary",
+                        "px-3 py-2 text-sm font-medium whitespace-nowrap",
+                        "flex items-center gap-2 h-10",
+                        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0",
+                        "transition-colors"
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                        tab.isDirty && /* @__PURE__ */ jsxRuntime.jsx(
+                          lucideReact.Circle,
+                          {
+                            className: "size-2 fill-primary text-primary flex-shrink-0",
+                            "aria-label": "unsaved changes"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[200px]", children: tab.name })
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button2,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onTabClose == null ? void 0 : onTabClose(tab.id);
+                      },
+                      className: cn(
+                        "h-8 w-8 mr-0.5",
+                        "hover:bg-destructive/10 hover:text-destructive",
+                        "focus-visible:ring-2 focus-visible:ring-ring",
+                        "transition-colors"
+                      ),
+                      "aria-label": `Close ${tab.name}`,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3" })
+                    }
+                  )
+                ]
+              },
+              tab.id
+            )) })
+          }
+        ) })
+      }
+    );
+  }
+);
+DocumentTabBar.displayName = "DocumentTabBar";
 var ThemeSelector = React33__namespace.memo(
   ({ themes, value, onValueChange, placeholder = "Select theme", className }) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(Select2, { value, onValueChange, children: [
@@ -6797,25 +6876,27 @@ var AdjustableLayout = React33__namespace.memo(
       muted: "group-hover:bg-muted/30"
     };
     const containerRef = React33__namespace.useRef(null);
-    const [sizes, setSizes] = React33__namespace.useState(() => {
-      if (storageKey && typeof window !== "undefined") {
-        const saved = localStorage.getItem(storageKey);
-        if (saved) {
-          try {
-            return JSON.parse(saved);
-          } catch (e) {
-          }
+    const defaultSizes = React33__namespace.useMemo(() => {
+      const raw = sections.map((section) => {
+        var _a2;
+        return (_a2 = section.defaultSize) != null ? _a2 : 100 / sections.length;
+      });
+      const total = raw.reduce((sum, size) => sum + size, 0);
+      return raw.map((size) => size / total * 100);
+    }, [sections]);
+    const [sizes, setSizes] = React33__namespace.useState(defaultSizes);
+    React33__namespace.useEffect(() => {
+      if (!storageKey) return;
+      const saved = localStorage.getItem(storageKey);
+      if (!saved) return;
+      try {
+        const parsed = JSON.parse(saved);
+        if (Array.isArray(parsed) && parsed.length === sections.length) {
+          setSizes(parsed);
         }
+      } catch (e) {
       }
-      const defaultSizes = sections.map(
-        (section) => {
-          var _a2;
-          return (_a2 = section.defaultSize) != null ? _a2 : 100 / sections.length;
-        }
-      );
-      const total = defaultSizes.reduce((sum, size) => sum + size, 0);
-      return defaultSizes.map((size) => size / total * 100);
-    });
+    }, [storageKey]);
     const [draggingIndex, setDraggingIndex] = React33__namespace.useState(null);
     const [startX, setStartX] = React33__namespace.useState(0);
     const [startSizes, setStartSizes] = React33__namespace.useState([]);
@@ -8065,18 +8146,28 @@ var SpecNavigator = React33__namespace.memo(
   }
 );
 SpecNavigator.displayName = "SpecNavigator";
+function isMultiTabMode(props) {
+  return "documents" in props && props.documents !== void 0;
+}
 var AIDocEditor = React33__namespace.default.memo(
-  ({
-    content,
-    format = "json",
-    annotations,
-    selectedAnnotationId,
-    currentUser,
-    mode,
-    onAnnotationAdd,
-    onAnnotationUpdate,
-    className
-  }) => {
+  (props) => {
+    var _a, _b;
+    const {
+      currentUser: currentUser2,
+      mode,
+      onAnnotationAdd,
+      onAnnotationUpdate,
+      onAnnotationDelete: _onAnnotationDelete,
+      // Callback for consumers; passed through on demand
+      className
+    } = props;
+    const isMultiTab = isMultiTabMode(props);
+    const currentDocument = React33.useMemo(() => {
+      if (isMultiTab && props.documents) {
+        return props.documents.find((doc) => doc.file.id === props.activeDocumentId) || props.documents[0];
+      }
+      return null;
+    }, [isMultiTab, props]);
     const handleAnnotationAdd = React33.useCallback(
       (annotation) => {
         onAnnotationAdd == null ? void 0 : onAnnotationAdd(annotation);
@@ -8089,21 +8180,62 @@ var AIDocEditor = React33__namespace.default.memo(
       },
       [onAnnotationUpdate]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      DocumentEditorWithComments,
-      {
-        content,
-        format,
-        annotations,
-        selectedAnnotationId,
-        currentUserId: currentUser.id,
-        currentUserName: currentUser.name,
-        readOnly: mode === "readonly",
-        onAnnotationAdd: handleAnnotationAdd,
-        onAnnotationUpdate: handleAnnotationUpdate,
-        className: cn("ai-doc-editor p-6", className)
-      }
-    );
+    if (!isMultiTab) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DocumentEditorWithComments,
+        {
+          content: props.content,
+          format: props.format,
+          annotations: props.annotations,
+          selectedAnnotationId: props.selectedAnnotationId,
+          currentUserId: currentUser2.id,
+          currentUserName: currentUser2.name,
+          readOnly: mode === "readonly",
+          onAnnotationAdd: handleAnnotationAdd,
+          onAnnotationUpdate: handleAnnotationUpdate,
+          className: cn("ai-doc-editor p-6", className)
+        }
+      );
+    }
+    if (!currentDocument) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("ai-doc-editor flex flex-col h-full", className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DocumentTabBar,
+          {
+            tabs: ((_a = props.documents) == null ? void 0 : _a.map((doc) => doc.file)) || [],
+            activeTabId: props.activeDocumentId,
+            onTabSelect: props.onTabSelect,
+            onTabClose: props.onTabClose
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center p-6 text-muted-foreground", children: "No documents open" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("ai-doc-editor flex flex-col h-full", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DocumentTabBar,
+        {
+          tabs: ((_b = props.documents) == null ? void 0 : _b.map((doc) => doc.file)) || [],
+          activeTabId: props.activeDocumentId,
+          onTabSelect: props.onTabSelect,
+          onTabClose: props.onTabClose
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        DocumentEditorWithComments,
+        {
+          content: currentDocument.content,
+          format: currentDocument.file.format,
+          annotations: currentDocument.annotations,
+          currentUserId: currentUser2.id,
+          currentUserName: currentUser2.name,
+          readOnly: mode === "readonly",
+          onAnnotationAdd: handleAnnotationAdd,
+          onAnnotationUpdate: handleAnnotationUpdate,
+          className: "p-6"
+        }
+      ) })
+    ] });
   }
 );
 AIDocEditor.displayName = "AIDocEditor";
@@ -8244,6 +8376,7 @@ exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.DocumentEditor = DocumentEditor;
 exports.DocumentEditorWithComments = DocumentEditorWithComments;
+exports.DocumentTabBar = DocumentTabBar;
 exports.Drawer = Drawer2;
 exports.DrawerClose = DrawerClose2;
 exports.DrawerContent = DrawerContent2;