ai-design-system 0.1.77 → 0.1.79

package/components/blocks/AIConversation/AIConversation.stories.tsx

@@ -127,6 +127,92 @@ export const MultipleAgents: Story = {
   },
 }
 
+export const NestedSubAgents: Story = {
+  args: {
+    messages: [
+      {
+        id: '1',
+        type: 'human',
+        role: 'user',
+        content: 'Generate a 30 second product demo video with motion graphics overlays',
+        avatarSrc: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+        avatarName: 'User',
+      },
+      {
+        id: '2',
+        type: 'ai',
+        role: 'orchestrator',
+        content: '',
+        avatarSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
+        avatarName: 'Coordinator',
+        subAgents: [
+          {
+            id: 'call_00_soED4oref3iyY11T',
+            name: 'task',
+            subAgentName: 'media-generator-agent',
+            input: 'Generate a 30 second product demo video with motion graphics overlays',
+            status: 'active',
+            // Nested children — video-sequencer and motion-graphics are both
+            // dispatched by media-generator-agent (task() calls), and stream
+            // their own tool-call-started/tool-output-delta/tool-finished
+            // events. This is what AIConversation must render one level deep.
+            subAgents: [
+              {
+                id: 'call_00_9LyCOvjRGrApV6II',
+                name: 'task',
+                subAgentName: 'video-sequencer',
+                input: 'Sequence the raw clips into a 30s cut with transitions',
+                output: 'Sequenced 12 clips into a 30s timeline. Exported sequence.json (30069 bytes).',
+                status: 'completed',
+              },
+              {
+                id: 'call_00_pQZBX2VUDWwmKQUz',
+                name: 'task',
+                subAgentName: 'motion-graphics',
+                input: 'Add lower-thirds, logo animation, and title card overlays',
+                output: 'Rendering title card overlay (2 of 4 assets)...',
+                status: 'active',
+              },
+            ],
+          },
+        ],
+        blocks: [
+          { type: 'text', id: 'text-1', text: "I'll generate this using two specialized sub-agents." },
+          {
+            type: 'subAgent',
+            id: 'call_00_soED4oref3iyY11T',
+            subAgent: {
+              id: 'call_00_soED4oref3iyY11T',
+              name: 'task',
+              subAgentName: 'media-generator-agent',
+              input: 'Generate a 30 second product demo video with motion graphics overlays',
+              status: 'active',
+              subAgents: [
+                {
+                  id: 'call_00_9LyCOvjRGrApV6II',
+                  name: 'task',
+                  subAgentName: 'video-sequencer',
+                  input: 'Sequence the raw clips into a 30s cut with transitions',
+                  output: 'Sequenced 12 clips into a 30s timeline. Exported sequence.json (30069 bytes).',
+                  status: 'completed',
+                },
+                {
+                  id: 'call_00_pQZBX2VUDWwmKQUz',
+                  name: 'task',
+                  subAgentName: 'motion-graphics',
+                  input: 'Add lower-thirds, logo animation, and title card overlays',
+                  output: 'Rendering title card overlay (2 of 4 assets)...',
+                  status: 'active',
+                },
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+}
+
 export const Empty: Story = {
   args: {
     messages: [],

package/components/blocks/AIConversation/AIConversation.tsx

@@ -34,6 +34,21 @@ type AIMessageBlock =
   | { type: 'toolCall'; id: string; toolCall: ToolCall }
   | { type: 'subAgent'; id: string; subAgent: SubAgent }
 
+// SpecialistMessage's `subAgents` prop expects string-only `output`, while
+// SubAgent allows structured output — normalize recursively when nesting.
+function toNestedSubAgents(
+  agents?: SubAgent[]
+): { id: string; subAgentName: string; status: SubAgent['status']; input?: string | Record<string, unknown>; output?: string; subAgents?: ReturnType<typeof toNestedSubAgents> }[] | undefined {
+  return agents?.map((a) => ({
+    id: a.id,
+    subAgentName: a.subAgentName,
+    status: a.status,
+    input: a.input,
+    output: typeof a.output === 'string' ? a.output : a.output ? JSON.stringify(a.output) : undefined,
+    subAgents: toNestedSubAgents(a.subAgents),
+  }));
+}
+
 interface AIMessage {
   id: string;
   type: 'human' | 'ai';
@@ -354,6 +369,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                                   content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
                                   status: subAgent.status,
                                   toolCalls: [],
+                                  subAgents: toNestedSubAgents(subAgent.subAgents),
                                 }}
                                 isNested={true}
                               />
@@ -380,6 +396,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                                 content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
                                 status: subAgent.status,
                                 toolCalls: [],
+                                subAgents: toNestedSubAgents(subAgent.subAgents),
                               }}
                               isNested={true}
                             />

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -60,21 +60,20 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
 
     // Compute default sizes (server-safe — no localStorage access)
     const defaultSizes = React.useMemo(() => {
-      const raw = sections.map(section => section.defaultSize ?? (100 / sections.length))
+      const raw = sections.map((section) => section.defaultSize ?? (100 / sections.length))
       const total = raw.reduce((sum, size) => sum + size, 0)
-      return raw.map(size => (size / total) * 100)
+      return raw.map((size) => (size / total) * 100)
     }, [sections])
 
     const [sizes, setSizes] = React.useState<number[]>(defaultSizes)
 
     // Sync sizes if the number of sections changes (e.g. data loads and new section appears)
+    const prevSectionsLengthRef = React.useRef(sections.length)
     React.useEffect(() => {
-      setSizes((prevSizes) => {
-        if (prevSizes.length !== sections.length) {
-          return defaultSizes;
-        }
-        return prevSizes;
-      });
+      if (prevSectionsLengthRef.current !== sections.length) {
+        prevSectionsLengthRef.current = sections.length
+        setSizes(defaultSizes)
+      }
     }, [sections.length, defaultSizes])
 
     // After hydration, overwrite with persisted sizes if available
@@ -90,8 +89,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       } catch {
         // ignore malformed storage
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [storageKey])
+    }, [storageKey, sections.length])
 
     const [draggingIndex, setDraggingIndex] = React.useState<number | null>(null)
     const [startX, setStartX] = React.useState(0)

package/components/composites/AgentIndicator/AgentIndicator.tsx

@@ -17,6 +17,7 @@ export interface SubAgent {
   input: string | Record<string, unknown>
   output?: string | Record<string, unknown>
   status: "pending" | "active" | "completed" | "error" | "running" | "in_progress"
+  subAgents?: SubAgent[]
 }
 
 export interface AgentIndicatorProps {

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -55,6 +55,7 @@ export interface EnhancedDataTableProps {
   rightActions?: React.ReactNode
   onCreateClick?: () => void
   createButtonLabel?: string
+  rowActions?: Array<{ key: string; label: string; icon?: string }>
 }
 
 function toRowId(row: DashboardRow, schema: DynamicTableSchema): number | string {
@@ -96,6 +97,7 @@ export function EnhancedDataTable({
   rightActions,
   onCreateClick,
   createButtonLabel = "Create",
+  rowActions,
 }: EnhancedDataTableProps) {
   const [searchQuery, setSearchQuery] = React.useState("")
 
@@ -341,45 +343,100 @@ export function EnhancedDataTable({
       }))
     )
 
-    dynamicColumns.push({
-      id: "actions",
-      cell: ({ row }) => (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="flex size-8 text-muted-foreground data-[state=open]:bg-muted" size="icon">
-              <Icon name="more-vertical" size="sm" />
-              <span className="sr-only">Open menu</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-40">
-            <DropdownMenuItem
-              onClick={() => {
-                setEditingRowId(String(toRowId(row.original, tableSchema)))
-                emitRowAction("edit", row.original)
-              }}
-            >
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => emitRowAction("copy", row.original)}>Make a copy</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => emitRowAction("favorite", row.original)}>Favorite</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={() => {
-                if (editingRowId === String(toRowId(row.original, tableSchema))) {
-                  setEditingRowId(null)
-                }
-                emitRowAction("delete", row.original)
-              }}
-            >
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ),
-    })
+    if (rowActions && rowActions.length === 0) {
+      // No actions column if rowActions is explicitly empty
+    } else if (rowActions && rowActions.length === 1) {
+      const singleAction = rowActions[0]
+      const iconName = singleAction.icon || (singleAction.key === "retry" ? "refresh-cw" : "more-vertical")
+      dynamicColumns.push({
+        id: "actions",
+        cell: ({ row }) => (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="flex size-8 text-muted-foreground hover:text-foreground"
+            onClick={(e) => {
+              e.stopPropagation()
+              emitRowAction(singleAction.key, row.original)
+            }}
+            title={singleAction.label}
+            aria-label={singleAction.label}
+          >
+            <Icon name={iconName} size="sm" />
+          </Button>
+        ),
+      })
+    } else if (rowActions && rowActions.length > 1) {
+      dynamicColumns.push({
+        id: "actions",
+        cell: ({ row }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="flex size-8 text-muted-foreground data-[state=open]:bg-muted" size="icon">
+                <Icon name="more-vertical" size="sm" />
+                <span className="sr-only">Open menu</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              {rowActions.map((action) => (
+                <DropdownMenuItem
+                  key={action.key}
+                  onClick={() => {
+                    if (action.key === "edit") {
+                      setEditingRowId(String(toRowId(row.original, tableSchema)))
+                    }
+                    emitRowAction(action.key, row.original)
+                  }}
+                >
+                  {action.icon && <Icon name={action.icon} size="xs" className="mr-2 inline" />}
+                  {action.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
+      })
+    } else {
+      dynamicColumns.push({
+        id: "actions",
+        cell: ({ row }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="flex size-8 text-muted-foreground data-[state=open]:bg-muted" size="icon">
+                <Icon name="more-vertical" size="sm" />
+                <span className="sr-only">Open menu</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              <DropdownMenuItem
+                onClick={() => {
+                  setEditingRowId(String(toRowId(row.original, tableSchema)))
+                  emitRowAction("edit", row.original)
+                }}
+              >
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => emitRowAction("copy", row.original)}>Make a copy</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => emitRowAction("favorite", row.original)}>Favorite</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => {
+                  if (editingRowId === String(toRowId(row.original, tableSchema))) {
+                    setEditingRowId(null)
+                  }
+                  emitRowAction("delete", row.original)
+                }}
+              >
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
+      })
+    }
 
     return dynamicColumns
-  }, [editingRowId, emitRowAction, renderEditableCell, renderReadonlyCell, tableSchema])
+  }, [editingRowId, emitRowAction, renderEditableCell, renderReadonlyCell, rowActions, tableSchema])
 
   const filterKeys = React.useMemo(() => tableSchema.columns.map((column) => column.key), [tableSchema.columns])
 

package/components/composites/DataTable/table-types.ts

@@ -8,7 +8,7 @@ export type DashboardRow = z.infer<typeof dashboardRowSchema>
 
 export type DashboardInlineEditableField = "target" | "limit"
 
-export type DashboardRowAction = "edit" | "copy" | "favorite" | "delete"
+export type DashboardRowAction = "edit" | "copy" | "favorite" | "delete" | string
 
 export interface DashboardPaginationState {
   pageIndex: number

package/components/composites/FormReports/FormReportsTable.tsx

@@ -18,6 +18,7 @@ export type FormReportsColumn = TableColumn
 export interface FormReportsRowAction {
   key: string
   label: string
+  icon?: string
 }
 
 export interface FormReportsTableHandlers {
@@ -64,7 +65,7 @@ const dashboardToFormReportsActionMap: Record<DashboardRowAction, string> = {
 export type { DashboardPaginationState }
 
 export const FormReportsTable = React.memo<FormReportsTableProps>(
-  ({ items, columns, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel, enableRowSelection }) => {
+  ({ items, columns, rowActions, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel, enableRowSelection }) => {
     const { rows, originalById, tableSchema } = React.useMemo(() => {
       const byId = new Map<string, FormReportsEntity>()
       const tableColumns: DynamicTableSchema["columns"] = columns
@@ -185,6 +186,7 @@ export const FormReportsTable = React.memo<FormReportsTableProps>(
         rightActions={rightActions}
         onCreateClick={onCreateClick}
         createButtonLabel={createButtonLabel}
+        rowActions={rowActions}
       />
     )
   }

package/components/composites/MediaPreview/MediaPreview.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MediaPreview } from './MediaPreview'
+
+const meta = {
+  title: 'Composites/MediaPreview',
+  component: MediaPreview,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof MediaPreview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Video: Story = {
+  args: {
+    file: {
+      id: 'video-1',
+      name: 'sample-video.mp4',
+      format: 'mp4',
+      mediaType: 'video/mp4',
+      url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    },
+  },
+}
+
+export const Audio: Story = {
+  args: {
+    file: {
+      id: 'audio-1',
+      name: 'sample-audio.mp3',
+      format: 'mp3',
+      mediaType: 'audio/mp3',
+      url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+    },
+  },
+}
+
+export const Image: Story = {
+  args: {
+    file: {
+      id: 'image-1',
+      name: 'sample-image.png',
+      format: 'png',
+      mediaType: 'image/png',
+      url: 'https://picsum.photos/800/600',
+    },
+  },
+}
+
+export const NoUrl: Story = {
+  args: {
+    file: {
+      id: 'file-1',
+      name: 'unknown-media.bin',
+      format: 'bin',
+    },
+  },
+}

package/components/composites/MediaPreview/MediaPreview.tsx

@@ -0,0 +1,186 @@
+/**
+ * MediaPreview Composite Component
+ * 
+ * Renders native preview players and viewers for binary media files
+ * (video, audio, images, documents) within the TextEditor pane.
+ */
+
+import React from 'react'
+import type { DocumentFile } from '@/types/ai-editor/editor'
+import { cn } from '@/lib/utils'
+import { Icon } from '@/components/primitives/Icon'
+
+export interface MediaFileLike {
+  id?: string
+  name?: string
+  format?: 'json' | 'markdown' | string
+  url?: string
+  mediaType?: string
+  isDirty?: boolean
+  lastModified?: number
+}
+
+export interface MediaPreviewProps {
+  file: MediaFileLike
+  className?: string
+}
+
+export function isVideoFile(file: MediaFileLike): boolean {
+  const format = file.format?.toLowerCase() || ''
+  const ext = file.name?.split('.').pop()?.toLowerCase() || ''
+  if (['mp4', 'webm', 'mov', 'mkv', 'avi'].includes(format) || ['mp4', 'webm', 'mov', 'mkv', 'avi'].includes(ext)) return true
+  if (file.mediaType?.startsWith('video/')) return true
+  if (file.url && /\.(mp4|webm|mov|mkv)(\?.*)?$/i.test(file.url)) return true
+  return false
+}
+
+export function isAudioFile(file: MediaFileLike): boolean {
+  const format = file.format?.toLowerCase() || ''
+  const ext = file.name?.split('.').pop()?.toLowerCase() || ''
+  if (['wav', 'mp3', 'ogg', 'm4a', 'flac', 'aac', 'wma'].includes(format) || ['wav', 'mp3', 'ogg', 'm4a', 'flac', 'aac', 'wma'].includes(ext)) return true
+  if (file.mediaType?.startsWith('audio/')) return true
+  if (file.url && /\.(wav|mp3|ogg|m4a|flac|aac)(\?.*)?$/i.test(file.url)) return true
+  return false
+}
+
+export function isImageFile(file: MediaFileLike): boolean {
+  const format = file.format?.toLowerCase() || ''
+  const ext = file.name?.split('.').pop()?.toLowerCase() || ''
+  if (['png', 'jpg', 'jpeg', 'webp', 'gif', 'svg', 'ico', 'bmp'].includes(format) || ['png', 'jpg', 'jpeg', 'webp', 'gif', 'svg', 'ico', 'bmp'].includes(ext)) return true
+  if (file.mediaType?.startsWith('image/')) return true
+  if (file.url && /\.(png|jpg|jpeg|webp|gif|svg)(\?.*)?$/i.test(file.url)) return true
+  return false
+}
+
+export function isPdfFile(file: MediaFileLike): boolean {
+  const format = file.format?.toLowerCase() || ''
+  const ext = file.name?.split('.').pop()?.toLowerCase() || ''
+  return format === 'pdf' || ext === 'pdf' || file.mediaType === 'application/pdf'
+}
+
+export function isMediaFile(file: MediaFileLike): boolean {
+  return isVideoFile(file) || isAudioFile(file) || isImageFile(file) || isPdfFile(file)
+}
+
+export const MediaPreview: React.FC<MediaPreviewProps> = ({ file, className }) => {
+  const isVideo = isVideoFile(file)
+  const isAudio = isAudioFile(file)
+  const isImage = isImageFile(file)
+  const isPdf = isPdfFile(file)
+
+  const mediaUrl = file.url
+
+  if (!mediaUrl) {
+    return (
+      <div className={cn('flex flex-col items-center justify-center h-full p-8 text-center', className)}>
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/60 mb-4 text-muted-foreground">
+          {isVideo && <Icon name="film" className="h-8 w-8" />}
+          {isAudio && <Icon name="music" className="h-8 w-8" />}
+          {isImage && <Icon name="image" className="h-8 w-8" />}
+          {isPdf && <Icon name="file-text" className="h-8 w-8" />}
+          {!isVideo && !isAudio && !isImage && !isPdf && <Icon name="alert-circle" className="h-8 w-8" />}
+        </div>
+        <h3 className="text-base font-medium text-foreground mb-1">{file.name || 'Media File'}</h3>
+        <p className="text-sm text-muted-foreground max-w-sm">
+          No direct stream URL is available for this file yet.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex flex-col h-full w-full overflow-y-auto p-6 bg-background/50', className)}>
+      {/* Header Info */}
+      <div className="flex items-center justify-between pb-4 mb-6 border-b border-border">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            {isVideo && <Icon name="film" className="h-5 w-5" />}
+            {isAudio && <Icon name="music" className="h-5 w-5" />}
+            {isImage && <Icon name="image" className="h-5 w-5" />}
+            {isPdf && <Icon name="file-text" className="h-5 w-5" />}
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-foreground tracking-tight">{file.name}</h2>
+            <p className="text-xs text-muted-foreground">
+              {file.mediaType || file.format?.toUpperCase() || 'Binary Media'}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <a
+            href={mediaUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            download={file.name}
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border bg-background hover:bg-muted text-foreground transition-colors shadow-sm"
+          >
+            <Icon name="download" className="h-3.5 w-3.5" />
+            Download
+          </a>
+          <a
+            href={mediaUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border bg-background hover:bg-muted text-foreground transition-colors shadow-sm"
+          >
+            <Icon name="external-link" className="h-3.5 w-3.5" />
+            Open
+          </a>
+        </div>
+      </div>
+
+      {/* Main Media Player / Viewer */}
+      <div className="flex-1 flex flex-col items-center justify-center min-h-[300px]">
+        {isVideo && (
+          <div className="w-full max-w-4xl flex flex-col items-center justify-center bg-black/95 rounded-2xl overflow-hidden shadow-lg border border-border/40">
+            <video
+              controls
+              playsInline
+              preload="metadata"
+              src={mediaUrl}
+              className="max-h-[65vh] w-auto max-w-full rounded-2xl"
+            >
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        )}
+
+        {isAudio && (
+          <div className="w-full max-w-xl p-8 rounded-2xl border border-border bg-card shadow-sm flex flex-col items-center gap-6">
+            <div className="flex h-20 w-20 items-center justify-center rounded-full bg-primary/10 text-primary">
+              <Icon name="music" className="h-10 w-10 animate-pulse" />
+            </div>
+            <div className="text-center">
+              <h3 className="text-base font-semibold text-foreground mb-1">{file.name}</h3>
+              <span className="text-xs text-muted-foreground uppercase tracking-wider">Audio Playback</span>
+            </div>
+            <audio controls preload="metadata" src={mediaUrl} className="w-full h-12">
+              Your browser does not support the audio element.
+            </audio>
+          </div>
+        )}
+
+        {isImage && (
+          <div className="flex items-center justify-center w-full max-w-4xl rounded-2xl border border-border bg-muted/20 p-4 shadow-sm">
+            <img
+              src={mediaUrl}
+              alt={file.name}
+              className="max-h-[68vh] w-auto max-w-full rounded-xl object-contain shadow-md"
+            />
+          </div>
+        )}
+
+        {isPdf && (
+          <div className="w-full h-full min-h-[500px] rounded-2xl overflow-hidden border border-border shadow-sm">
+            <iframe
+              src={mediaUrl}
+              title={file.name}
+              className="w-full h-full min-h-[500px]"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/components/composites/MediaPreview/index.ts

@@ -0,0 +1,9 @@
+export {
+  MediaPreview,
+  isVideoFile,
+  isAudioFile,
+  isImageFile,
+  isPdfFile,
+  isMediaFile,
+} from './MediaPreview'
+export type { MediaPreviewProps, MediaFileLike } from './MediaPreview'