ai-design-system 0.1.111 → 0.1.113

package/components/composites/FileTreeExplorer/index.ts

@@ -1,9 +1,15 @@
 export {
   FileTreeExplorer,
 } from "./FileTreeExplorer"
+export {
+  FileTreeDrawer,
+} from "./FileTreeDrawer"
 
 export type {
   FileDownloadResult,
   FileTreeExplorerProps,
   FileTreeNode,
 } from "./FileTreeExplorer"
+export type {
+  FileTreeDrawerProps,
+} from "./FileTreeDrawer"

package/components/composites/ProjectSwitcher/ProjectSwitcher.tsx

@@ -17,33 +17,81 @@ import {
   PopoverTrigger,
 } from "@/components/primitives/Popover"
 
-export interface Project {
+export interface ProjectSwitcherItem {
   id: string
   name: string
 }
 
+// Backwards compatibility alias
+export type Project = ProjectSwitcherItem
+
 export interface ProjectSwitcherProps {
-  projects: Project[]
+  /** List of projects / channels / workspaces to switch between */
+  projects?: ProjectSwitcherItem[]
+  /** Generic alias for projects */
+  items?: ProjectSwitcherItem[]
+  /** ID of the currently selected item */
   selectedProjectId?: string | null
-  onSelectProject: (id: string) => void
-  onCreateProject: () => void
+  /** Generic alias for selectedProjectId */
+  selectedId?: string | null
+  /** Callback fired when an item is selected */
+  onSelectProject?: (id: string) => void
+  /** Generic alias for onSelectProject */
+  onSelect?: (id: string) => void
+  /** Callback fired when creating a new item */
+  onCreateProject?: () => void
+  /** Generic alias for onCreateProject */
+  onCreate?: () => void
+  /** Custom CSS class names */
   className?: string
+  /**
+   * Domain entity name used to automatically derive labels (e.g. "Project", "Channel", "Workspace").
+   * @default "Project"
+   */
+  entityName?: string
+  /** Placeholder when nothing is selected. Defaults to "Select <entityName>..." */
+  placeholder?: string
+  /** Search input placeholder. Defaults to "Find <entityName>..." */
+  searchPlaceholder?: string
+  /** Empty state message. Defaults to "No <entityName.toLowerCase()>s, yet!" */
+  emptyMessage?: string
+  /** Create button label. Defaults to "Create <entityName>" */
+  createButtonText?: string
 }
 
 export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
   ({
-    projects = [],
+    projects,
+    items,
     selectedProjectId,
-    onSelectProject = () => {},
-    onCreateProject = () => {},
+    selectedId,
+    onSelectProject,
+    onSelect,
+    onCreateProject,
+    onCreate,
     className,
+    entityName = "Project",
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    createButtonText,
   }) => {
     const [open, setOpen] = React.useState(false)
 
-    const selectedProject = projects.find((p) => String(p.id) === String(selectedProjectId))
-    const displayLabel = selectedProject ? selectedProject.name : "Select Project..."
+    const list = items ?? projects ?? []
+    const activeId = selectedId !== undefined ? selectedId : selectedProjectId
+    const handleSelect = onSelect ?? onSelectProject ?? (() => {})
+    const handleCreate = onCreate ?? onCreateProject ?? (() => {})
+
+    const resolvedPlaceholder = placeholder ?? `Select ${entityName}...`
+    const resolvedSearchPlaceholder = searchPlaceholder ?? `Find ${entityName}...`
+    const resolvedEmptyMessage = emptyMessage ?? `No ${entityName.toLowerCase()}s, yet!`
+    const resolvedCreateButtonText = createButtonText ?? `Create ${entityName}`
+
+    const selectedItem = list.find((p) => String(p.id) === String(activeId))
+    const displayLabel = selectedItem ? selectedItem.name : resolvedPlaceholder
 
-    const defaultValue = selectedProject ? `${selectedProject.name}-${selectedProject.id}` : undefined
+    const defaultValue = selectedItem ? `${selectedItem.name}-${selectedItem.id}` : undefined
 
     return (
       <Popover open={open} onOpenChange={setOpen}>
@@ -64,7 +112,7 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
           <Command defaultValue={defaultValue}>
             <div className="flex items-center justify-between border-b border-neutral-600 px-3" cmdk-input-wrapper="">
               <CommandPrimitive.Input
-                placeholder="Find Project..."
+                placeholder={resolvedSearchPlaceholder}
                 className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
               />
               <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-neutral-700 bg-neutral-800 px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">Esc</kbd>
@@ -72,27 +120,28 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
             <CommandList className="max-h-[300px]">
               <CommandEmpty>
                 <div className="flex flex-col items-center justify-center p-6 text-center text-sm text-muted-foreground">
-                  No projects, yet!
+                  {resolvedEmptyMessage}
                 </div>
               </CommandEmpty>
-              {projects.length > 0 && (
+              {list.length > 0 && (
                 <CommandGroup>
-                  {projects.map((project) => (
+                  {list.map((item) => (
                     <CommandItem
-                      key={project.id}
-                      value={`${project.name}-${project.id}`}
+                      key={item.id}
+                      value={`${item.name}-${item.id}`}
                       onSelect={() => {
-                        onSelectProject(project.id)
+                        handleSelect(item.id)
                         setOpen(false)
                       }}
                       className="mb-1 last:mb-0 cursor-pointer flex items-center justify-between"
                     >
                       <div className="flex items-center">
-                        {project.name}
+                        {item.name}
                       </div>
-                      <Icon name="check"
+                      <Icon
+                        name="check"
                         className={`h-4 w-4 ${
-                          String(selectedProjectId) === String(project.id) ? "opacity-100" : "opacity-0"
+                          String(activeId) === String(item.id) ? "opacity-100" : "opacity-0"
                         }`}
                       />
                     </CommandItem>
@@ -107,11 +156,11 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
                 className="w-full justify-start text-sm font-normal"
                 onClick={() => {
                   setOpen(false)
-                  onCreateProject()
+                  handleCreate()
                 }}
               >
                 <Icon name="plus" size="sm" className="mr-2 h-4 w-4" />
-                Create Project
+                {resolvedCreateButtonText}
               </Button>
             </div>
           </Command>

package/components/composites/WorkspaceEmptyState/WorkspaceEmptyState.tsx

@@ -13,6 +13,12 @@ export interface WorkspaceEmptyStateProps {
   isWaking?: boolean
   /** Additional CSS classes applied to the root container. */
   className?: string
+  /** Label for secondary or general action button */
+  actionLabel?: string
+  /** Callback for action button */
+  onAction?: () => void
+  /** Additional CSS classes for action button */
+  actionClassName?: string
 }
 
 /**
@@ -34,7 +40,7 @@ export interface WorkspaceEmptyStateProps {
  * ```
  */
 export const WorkspaceEmptyState = React.memo<WorkspaceEmptyStateProps>(
-  ({ label, onWake, isWaking, className }) => {
+  ({ label, onWake, isWaking, actionLabel, onAction, actionClassName, className }) => {
     return (
       <div
         className={`flex flex-col items-center justify-center gap-3 h-full w-full${className ? ` ${className}` : ''}`}
@@ -52,6 +58,16 @@ export const WorkspaceEmptyState = React.memo<WorkspaceEmptyStateProps>(
             {isWaking ? 'Starting…' : 'Start workspace'}
           </Button>
         )}
+        {onAction && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onAction}
+            className={actionClassName}
+          >
+            {actionLabel ?? 'Browse files'}
+          </Button>
+        )}
       </div>
     )
   }

package/components/composites/index.ts

@@ -196,7 +196,7 @@ export type { EmptyStateProps } from './EmptyState'
 
 // ProjectSwitcher Composite
 export { ProjectSwitcher } from './ProjectSwitcher'
-export type { ProjectSwitcherProps, Project } from './ProjectSwitcher'
+export type { ProjectSwitcherProps, ProjectSwitcherItem, Project } from './ProjectSwitcher'
 
 // DashboardChart Composite
 export { DashboardChart } from './DashboardChart'
@@ -294,4 +294,8 @@ export type { StoryPlayerProps, ScenePlayerProps, StorySegment, SceneItem } from
 export { AccountDialog, AccountButton } from './AccountDialog'
 export type { AccountDialogProps, AccountButtonProps, AccountUser } from './AccountDialog'
 
+// FileTreeExplorer Composite
+export { FileTreeExplorer, FileTreeDrawer } from './FileTreeExplorer'
+export type { FileTreeExplorerProps, FileTreeDrawerProps, FileTreeNode, FileDownloadResult } from './FileTreeExplorer'
+
 

package/components/features/TextEditor/TextEditor.stories.tsx

@@ -69,6 +69,14 @@ export const Empty: Story = {
  * multiple documents. Uses mock hook for realistic interaction simulation.
  */
 export const WithStateManagement: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Multi-tab interactive mode with full state management. On desktop (>= 768px), displays a split view with the file explorer and document editor. On mobile (< 768px), the editor pane takes 100% width, and the file explorer is opened via a mobile Drawer triggered from the tab bar or files button.',
+      },
+    },
+  },
   render: () => {
     const mockState = useTextEditorMock({
       multiDoc: true,

package/components/features/TextEditor/TextEditor.tsx

@@ -36,12 +36,12 @@ import React, { useCallback, useMemo } from 'react'
 import { DocumentEditorWithComments } from '@/components/blocks/DocumentEditorWithComments'
 import { DocumentTabBar } from '@/components/composites/DocumentTabBar'
 import { AdjustableLayout } from '@/components/composites/AdjustableLayout'
-import { FileTreeExplorer } from '@/components/composites/FileTreeExplorer'
+import { FileTreeExplorer, FileTreeDrawer } from '@/components/composites/FileTreeExplorer'
 import type { FileDownloadResult, FileTreeNode } from '@/components/composites/FileTreeExplorer'
 import { cn } from '@/lib/utils'
 import type { JSONContent } from '@tiptap/core'
 import type { Annotation, User } from '@/types/ai-editor/annotations'
-import type { DocumentFile, DocumentWithAnnotations } from '@/types/ai-editor/editor'
+import type { DocumentWithAnnotations } from '@/types/ai-editor/editor'
 import { StreamingMarkdown } from '@/components/composites/StreamingMarkdown'
 import { MediaPreview, isMediaFile } from '@/components/composites/MediaPreview'
 import { WorkspaceEmptyState } from '@/components/composites/WorkspaceEmptyState'
@@ -128,6 +128,10 @@ export interface TextEditorMultiTabProps {
    * of the normal editor UI.
    */
   workspace?: TextEditorWorkspaceProps
+  /** Active section in mobile view ('explorer' or 'editor') */
+  mobileSection?: 'explorer' | 'editor'
+  /** Callback when mobile section changes */
+  onMobileSectionChange?: (section: 'explorer' | 'editor') => void
 }
 
 /**
@@ -174,6 +178,23 @@ function formatJson(text: string): string {
   }
 }
 
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth < 768
+    }
+    return false
+  })
+
+  React.useEffect(() => {
+    const onResize = () => setIsMobile(window.innerWidth < 768)
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  return isMobile
+}
+
 /**
  * TextEditor - Document editor with inline comment annotations
  * 
@@ -281,6 +302,33 @@ export const TextEditor = React.memo<TextEditorProps>(
 
     const handleTabSelect = isMultiTab ? (props as TextEditorMultiTabProps).onTabSelect : undefined
 
+    const isMobile = useIsMobile()
+    const [isDrawerOpenState, setIsDrawerOpenState] = React.useState(false)
+
+    const isDrawerOpen =
+      (isMultiTab && (props as TextEditorMultiTabProps).mobileSection === 'explorer') ||
+      isDrawerOpenState
+
+    const handleOpenChange = useCallback(
+      (open: boolean) => {
+        setIsDrawerOpenState(open)
+        if (isMultiTab) {
+          (props as TextEditorMultiTabProps).onMobileSectionChange?.(open ? 'explorer' : 'editor')
+        }
+      },
+      [isMultiTab, props]
+    )
+
+    const handleFileSelect = useCallback(
+      (path: string) => {
+        if (handleTabSelect) {
+          handleTabSelect(path)
+        }
+        handleOpenChange(false)
+      },
+      [handleTabSelect, handleOpenChange]
+    )
+
     const LinkComponent = useCallback((linkProps: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
       const { href, ...rest } = linkProps
       const isExternal = href?.startsWith('http://') || href?.startsWith('https://') || href?.startsWith('mailto:')
@@ -338,6 +386,7 @@ export const TextEditor = React.memo<TextEditorProps>(
           if (handleTabSelect) {
             handleTabSelect(targetId)
           }
+          handleOpenChange(false)
         }
       }
 
@@ -345,7 +394,7 @@ export const TextEditor = React.memo<TextEditorProps>(
         return <a href={href} target="_blank" rel="noopener noreferrer" {...rest} />
       }
       return <a href={href} onClick={handleClick} className="text-primary hover:underline cursor-pointer" {...rest} />
-    }, [handleTabSelect, isMultiTab, props.activeDocumentId, props.documents])
+    }, [handleOpenChange, handleTabSelect, isMultiTab, props.activeDocumentId, props.documents])
 
     const markdownComponents = useMemo(() => ({ a: LinkComponent }), [LinkComponent])
 
@@ -363,7 +412,7 @@ export const TextEditor = React.memo<TextEditorProps>(
           ? `\`\`\`${format}\n${format === 'json' ? formatJson(contentStr) : contentStr}\n\`\`\``
           : contentStr
         return (
-          <div className={cn('text-editor p-6 flex flex-col h-screen w-full flex-1', className)}>
+          <div className={cn('text-editor p-3 sm:p-6 flex flex-col h-full min-h-0 w-full flex-1 overflow-auto', className)}>
             <StreamingMarkdown mode="static" isAnimating={false} components={markdownComponents}>
               {content}
             </StreamingMarkdown>
@@ -371,7 +420,7 @@ export const TextEditor = React.memo<TextEditorProps>(
         )
       }
       return (
-        <div className={cn('text-editor flex flex-col h-screen w-full flex-1', className)}>
+        <div className={cn('text-editor flex flex-col h-full min-h-0 w-full flex-1', className)}>
           <DocumentEditorWithComments
             content={props.content}
             format={props.format}
@@ -382,7 +431,7 @@ export const TextEditor = React.memo<TextEditorProps>(
             readOnly={mode === 'readonly'}
             onAnnotationAdd={handleAnnotationAdd}
             onAnnotationUpdate={handleAnnotationUpdate}
-            className={cn('text-editor p-6 h-full flex flex-col', className)}
+            className={cn('text-editor p-3 sm:p-6 h-full flex flex-col', className)}
           />
         </div>
       )
@@ -421,11 +470,22 @@ export const TextEditor = React.memo<TextEditorProps>(
               activeTabId={props.activeDocumentId}
               onTabSelect={props.onTabSelect}
               onTabClose={props.onTabClose}
+              onToggleExplorer={() => handleOpenChange(true)}
             />
           )}
-          <div className="flex-1 flex items-center justify-center p-6 text-muted-foreground">
-            No documents selected
-          </div>
+          {hideTabBar && (
+            <DocumentTabBar
+              tabs={[]}
+              onToggleExplorer={() => handleOpenChange(true)}
+              className="md:hidden"
+            />
+          )}
+          <WorkspaceEmptyState
+            label="No documents selected"
+            actionLabel="Browse files"
+            onAction={() => handleOpenChange(true)}
+            actionClassName="md:hidden"
+          />
         </div>
       )
     } else if (isMediaFile(currentDocument.file)) {
@@ -438,6 +498,14 @@ export const TextEditor = React.memo<TextEditorProps>(
               activeTabId={props.activeDocumentId}
               onTabSelect={props.onTabSelect}
               onTabClose={props.onTabClose}
+              onToggleExplorer={() => handleOpenChange(true)}
+            />
+          )}
+          {hideTabBar && (
+            <DocumentTabBar
+              tabs={[]}
+              onToggleExplorer={() => handleOpenChange(true)}
+              className="md:hidden"
             />
           )}
           <div className="flex-1 overflow-auto">
@@ -468,6 +536,14 @@ export const TextEditor = React.memo<TextEditorProps>(
               activeTabId={props.activeDocumentId}
               onTabSelect={props.onTabSelect}
               onTabClose={props.onTabClose}
+              onToggleExplorer={() => handleOpenChange(true)}
+            />
+          )}
+          {hideTabBar && (
+            <DocumentTabBar
+              tabs={[]}
+              onToggleExplorer={() => handleOpenChange(true)}
+              className="md:hidden"
             />
           )}
           <div className="flex-1 overflow-auto">
@@ -476,7 +552,7 @@ export const TextEditor = React.memo<TextEditorProps>(
                 Loading document content...
               </div>
             ) : renderAsStreamdown ? (
-              <div className="p-6">
+              <div className="p-3 sm:p-6">
                 <StreamingMarkdown
                   mode="static"
                   isAnimating={false}
@@ -499,7 +575,7 @@ export const TextEditor = React.memo<TextEditorProps>(
                 readOnly={mode === 'readonly'}
                 onAnnotationAdd={handleAnnotationAdd}
                 onAnnotationUpdate={handleAnnotationUpdate}
-                className="text-editor p-6 min-h-full"
+                className="text-editor p-3 sm:p-6 min-h-full"
               />
             )}
           </div>
@@ -507,13 +583,35 @@ export const TextEditor = React.memo<TextEditorProps>(
       )
     }
 
+    const fileTreeDrawer = (
+      <FileTreeDrawer
+        open={isDrawerOpen}
+        onOpenChange={handleOpenChange}
+        tree={fileTreeNodes}
+        selectedPath={props.activeDocumentId}
+        onSelect={handleFileSelect}
+        onDownload={onDownloadAllFiles}
+      />
+    )
+
+    if (isMobile) {
+      return (
+        <div className={cn("text-editor flex-1 h-full min-h-0 w-full bg-background flex flex-col relative", className)}>
+          {editorPane}
+          {fileTreeDrawer}
+        </div>
+      )
+    }
+
     return (
       <AdjustableLayout
-        className={cn("flex-1 h-screen w-full bg-background", className)}
+        className={cn("flex-1 h-full min-h-0 w-full bg-background", className)}
         orientation="horizontal"
+        mobileBehavior="none"
         sections={[
           {
             id: 'explorer',
+            label: 'Files',
             defaultSize: 20,
             minSize: 15,
             maxSize: 30,
@@ -524,13 +622,14 @@ export const TextEditor = React.memo<TextEditorProps>(
                 headerClassName="border-b"
                 tree={fileTreeNodes}
                 selectedPath={props.activeDocumentId}
-                onSelect={props.onTabSelect}
+                onSelect={handleFileSelect}
                 onDownload={onDownloadAllFiles}
               />
             ),
           },
           {
             id: 'editor',
+            label: 'Editor',
             defaultSize: 80,
             minSize: 50,
             className: 'rounded-none border-0',

package/components/index.ts

@@ -54,6 +54,7 @@ export type {
   ActionRequest,
   ReviewConfig,
   ProjectSwitcherProps,
+  ProjectSwitcherItem,
   Project,
   FormReportsDrawerFormProps,
   SessionHeaderProps,