@proteos/ui 0.31.0

package/src/components/file-field/file-field.tsx

@@ -0,0 +1,285 @@
+import {
+  File as FileIcon,
+  FileArchive,
+  FileImage,
+  FileSpreadsheet,
+  FileText,
+  Loader2,
+  Paperclip,
+  X,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { DropZone, FileTrigger, Heading, Text } from 'react-aria-components'
+import { tv } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { Button } from '../button'
+import {
+  PopoverContent,
+  PopoverPanelBody,
+  PopoverPanelFooter,
+  PopoverPanelHeader,
+  Popover,
+} from '../popover'
+
+/* =========================================================================
+   FileField — presentational control for a single-file attachment.
+
+   Pure presentation: it knows nothing about the storage-service. The
+   consumer wires uploads/downloads/deletes through the callbacks. Two
+   states:
+
+     - empty  → a click-to-pick control that doubles as a drop zone
+                (highlights on drag-over). Picking or dropping a file
+                calls `onSelectFile`.
+     - filled → a card showing a file-type icon, the name (clicking the
+                card calls `onDownload`), and below it the size + an (x)
+                that opens a confirm popover before calling `onDelete`.
+
+   One file per field — selecting a new file replaces the current one.
+   ========================================================================= */
+
+export interface FileFieldValue {
+  /** Filename shown as the label. */
+  name: string
+  /** Size in bytes — rendered when known (resolved from storage on read). */
+  sizeInBytes?: number
+  /** MIME type — picks the file-type icon when known. */
+  contentType?: string
+}
+
+export interface FileFieldProps {
+  /** The attached file, or null/undefined when empty. */
+  value?: FileFieldValue | null
+  /** True while an upload is in flight — shows a spinner, blocks re-pick. */
+  isUploading?: boolean
+  /** Read-only: no picker, no delete — download still works. */
+  isReadOnly?: boolean
+  /** Restrict the native picker (e.g. `['image/*', '.pdf']`). */
+  acceptedFileTypes?: string[]
+  /** Called with the picked/dropped File. */
+  onSelectFile?: (file: File) => void
+  /** Called when the filled card is clicked. */
+  onDownload?: () => void
+  /** Called after the user confirms removal in the (x) popover. */
+  onDelete?: () => void
+  /** Inline validation message (edit surface). */
+  errorMessage?: string
+  /** True iff the field is touched and currently invalid. */
+  isInvalid?: boolean
+  className?: string
+}
+
+const dropZoneStyles = tv({
+  base: [
+    'flex items-center justify-center gap-2 rounded-md border border-dashed border-rule',
+    'bg-surface-2/40 px-3 py-4 text-ink-3 transition-colors duration-150 outline-none',
+    'data-[drop-target]:border-ink-4 data-[drop-target]:bg-surface-2 data-[drop-target]:text-ink',
+    'focus-visible:shadow-[var(--shadow-focus)]',
+  ],
+  variants: {
+    isInvalid: { true: 'border-danger' },
+  },
+})
+
+const cardStyles = tv({
+  base: [
+    'group relative flex w-full items-start gap-3 rounded-md border border-rule bg-surface px-3 py-2.5',
+    'text-left transition-colors duration-150',
+  ],
+  variants: {
+    isClickable: {
+      true: 'cursor-pointer hover:border-ink-4 hover:bg-surface-2 outline-none focus-visible:shadow-[var(--shadow-focus)]',
+      false: 'cursor-default',
+    },
+  },
+})
+
+/** Maps a MIME type to a file-type glyph. Falls back to a generic file. */
+export function iconForContentType(contentType?: string): LucideIcon {
+  if (!contentType) return FileIcon
+  if (contentType.startsWith('image/')) return FileImage
+  if (contentType === 'application/pdf') return FileText
+  if (contentType.startsWith('text/')) return FileText
+  if (
+    contentType.includes('spreadsheet') ||
+    contentType.includes('excel') ||
+    contentType === 'text/csv'
+  ) {
+    return FileSpreadsheet
+  }
+  if (
+    contentType.includes('zip') ||
+    contentType.includes('tar') ||
+    contentType.includes('compressed') ||
+    contentType.includes('archive')
+  ) {
+    return FileArchive
+  }
+  return FileIcon
+}
+
+/** Human-readable byte size (1 KB = 1024 B). */
+export function formatFileSize(bytes: number | undefined): string {
+  if (bytes == null || !Number.isFinite(bytes) || bytes < 0) return ''
+  if (bytes < 1024) return `${bytes} B`
+  const units = ['KB', 'MB', 'GB', 'TB']
+  let size = bytes / 1024
+  let unit = 0
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024
+    unit += 1
+  }
+  return `${size < 10 ? size.toFixed(1) : Math.round(size)} ${units[unit]}`
+}
+
+export function FileField({
+  value,
+  isUploading = false,
+  isReadOnly = false,
+  acceptedFileTypes,
+  onSelectFile,
+  onDownload,
+  onDelete,
+  errorMessage,
+  isInvalid = false,
+  className,
+}: FileFieldProps) {
+  const handleSelect = (files: FileList | null) => {
+    const file = files?.item(0)
+    if (file) onSelectFile?.(file)
+  }
+
+  const handleDrop: NonNullable<ComponentProps<typeof DropZone>['onDrop']> = async (event) => {
+    const item = event.items.find((candidate) => candidate.kind === 'file')
+    if (item && item.kind === 'file') {
+      onSelectFile?.(await item.getFile())
+    }
+  }
+
+  // ---- Empty state -------------------------------------------------------
+  if (!value) {
+    if (isReadOnly) {
+      return <span className={cn('text-ink-4', className)}>—</span>
+    }
+
+    if (isUploading) {
+      return (
+        <div className={cn(dropZoneStyles({ isInvalid }), className)}>
+          <Loader2 className="size-3.5 animate-spin" aria-hidden />
+          <span className="font-sans text-[12.5px]">Uploading…</span>
+        </div>
+      )
+    }
+
+    return (
+      <div className={className}>
+        <DropZone
+          aria-label="Drop a file to upload"
+          onDrop={handleDrop}
+          className={dropZoneStyles({ isInvalid })}
+        >
+          <Paperclip className="size-3.5 shrink-0" aria-hidden />
+          <Text slot="label" className="font-sans text-[12.5px]">
+            Drop a file here, or
+          </Text>
+          <FileTrigger
+            onSelect={handleSelect}
+            {...(acceptedFileTypes ? { acceptedFileTypes } : {})}
+          >
+            <Button variant="ghost" size="sm">
+              Browse
+            </Button>
+          </FileTrigger>
+        </DropZone>
+        {isInvalid && errorMessage ? (
+          <p className="mt-1 font-sans text-[11.5px] text-danger">{errorMessage}</p>
+        ) : null}
+      </div>
+    )
+  }
+
+  // ---- Filled state ------------------------------------------------------
+  const Icon = isUploading ? Loader2 : iconForContentType(value.contentType)
+  const isClickable = Boolean(onDownload) && !isUploading
+
+  return (
+    <div className={className}>
+      <div className={cardStyles({ isClickable })}>
+        {/* Download surface — the icon + name + size. A button so the whole
+            card is one click target; the (x) is a sibling, never nested. */}
+        <Button
+          variant="subtle"
+          // Reset button chrome — this is a borderless full-bleed click target.
+          className="m-0 flex min-w-0 flex-1 items-start gap-3 border-0 bg-transparent p-0 text-left hover:bg-transparent"
+          isDisabled={!isClickable}
+          {...(onDownload ? { onPress: onDownload } : {})}
+        >
+          <Icon
+            className={cn('mt-0.5 size-5 shrink-0 text-ink-3', isUploading && 'animate-spin')}
+            aria-hidden
+            strokeWidth={1.6}
+          />
+          <span className="flex min-w-0 flex-col">
+            <span className="truncate font-sans text-[13px] text-ink">{value.name}</span>
+            <span className="font-sans text-[11.5px] text-ink-4">
+              {isUploading ? 'Uploading…' : formatFileSize(value.sizeInBytes)}
+            </span>
+          </span>
+        </Button>
+
+        {!isReadOnly && onDelete && !isUploading ? (
+          <Popover>
+            <Button
+              aria-label="Remove file"
+              size="icon-sm"
+              variant="subtle"
+              className="shrink-0 text-ink-4 hover:text-danger"
+            >
+              <X className="size-3.5" />
+            </Button>
+            <PopoverContent placement="top end" panelClassName="w-[260px]">
+              {({ close }) => (
+                <>
+                  <PopoverPanelHeader>
+                    <Heading
+                      slot="title"
+                      className="m-0 font-sans text-[12.5px] font-medium text-ink"
+                    >
+                      Delete this file?
+                    </Heading>
+                  </PopoverPanelHeader>
+                  <PopoverPanelBody className="px-3.5 py-3">
+                    <p className="m-0 font-sans text-[12px] leading-snug text-ink-2">
+                      This removes the attachment from this record.
+                    </p>
+                  </PopoverPanelBody>
+                  <PopoverPanelFooter>
+                    <Button variant="ghost" size="sm" onPress={close}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      className={cn('bg-danger border-danger', 'hover:bg-danger hover:border-danger')}
+                      onPress={() => {
+                        onDelete()
+                        close()
+                      }}
+                    >
+                      Delete
+                    </Button>
+                  </PopoverPanelFooter>
+                </>
+              )}
+            </PopoverContent>
+          </Popover>
+        ) : null}
+      </div>
+      {isInvalid && errorMessage ? (
+        <p className="mt-1 font-sans text-[11.5px] text-danger">{errorMessage}</p>
+      ) : null}
+    </div>
+  )
+}

package/src/components/file-field/index.ts

@@ -0,0 +1,2 @@
+export type { FileFieldProps, FileFieldValue } from './file-field'
+export { FileField, formatFileSize, iconForContentType } from './file-field'

package/src/components/file-viewer/fallback-card.tsx

@@ -0,0 +1,68 @@
+import { Download } from 'lucide-react'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { Button } from '../button/button'
+import { formatFileSize, iconForContentType } from '../file-field/file-field'
+
+/* =========================================================================
+   FileViewerFallbackCard — what the FileViewer shows when it cannot render
+   the file inline (unpreviewable type, load error, oversized). Mirrors the
+   FileField card chrome: type icon, name, meta line, download action.
+   ========================================================================= */
+
+export const fileViewerFallbackCardStyles = tv({
+  base: [
+    'flex w-full items-start gap-3 rounded-md border border-rule bg-surface px-3 py-2.5',
+    'text-left',
+  ],
+})
+
+export type FileViewerFallbackCardVariants = VariantProps<typeof fileViewerFallbackCardStyles>
+
+export interface FileViewerFallbackCardProps {
+  name: string
+  contentType?: string
+  sizeInBytes?: number
+  /** Why the preview is unavailable (e.g. "Too large to preview"). */
+  note?: string
+  /** Load failure — rendered in the danger tone, wins over `note`. */
+  errorMessage?: string
+  onDownload?: () => void
+  className?: string
+}
+
+export function FileViewerFallbackCard({
+  name,
+  contentType,
+  sizeInBytes,
+  note,
+  errorMessage,
+  onDownload,
+  className,
+}: FileViewerFallbackCardProps) {
+  const Icon = iconForContentType(contentType)
+  const size = formatFileSize(sizeInBytes)
+  const meta = [size, note].filter(Boolean).join(' · ')
+
+  return (
+    <div className={cn(fileViewerFallbackCardStyles(), className)}>
+      <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-surface-2 text-ink-3">
+        <Icon aria-hidden className="size-4" />
+      </span>
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate font-sans text-[13px] font-medium text-ink">{name}</span>
+        {errorMessage ? (
+          <span className="truncate font-sans text-[12px] text-danger">{errorMessage}</span>
+        ) : meta ? (
+          <span className="truncate font-sans text-[12px] text-ink-3">{meta}</span>
+        ) : null}
+      </span>
+      {onDownload ? (
+        <Button variant="ghost" size="icon-sm" aria-label={`Download ${name}`} onPress={onDownload}>
+          <Download aria-hidden />
+        </Button>
+      ) : null}
+    </div>
+  )
+}

package/src/components/file-viewer/file-viewer.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { FileViewer } from './file-viewer'
+
+// Inline data URI so stories need no network.
+const SAMPLE_IMAGE = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="420"><rect width="640" height="420" fill="#d8cfc0"/><circle cx="180" cy="150" r="70" fill="#8a8171"/><path d="M0 420 L220 200 L380 340 L520 230 L640 300 V420 Z" fill="#a89f8d"/></svg>',
+)}`
+
+const meta: Meta<typeof FileViewer> = {
+  title: 'Components/FileViewer',
+  component: FileViewer,
+  tags: ['autodocs'],
+  args: {
+    name: 'sunset.png',
+    contentType: 'image/png',
+    src: SAMPLE_IMAGE,
+    heightPx: 420,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof FileViewer>
+
+export const Image: Story = {}
+
+export const Loading: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => <FileViewer name="pending.png" contentType="image/png" heightPx={420} />,
+}
+
+export const FallbackCard: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <FileViewer
+      name="quarterly-report.docx"
+      contentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+      sizeInBytes={48213}
+      onDownload={() => {}}
+    />
+  ),
+}
+
+export const Oversized: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <FileViewer
+      name="raw-footage.mp4"
+      contentType="video/mp4"
+      sizeInBytes={120 * 1024 * 1024}
+      isOversized
+      onDownload={() => {}}
+    />
+  ),
+}
+
+export const LoadError: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <FileViewer
+      name="contract.pdf"
+      contentType="application/pdf"
+      errorMessage="Download failed"
+      onDownload={() => {}}
+    />
+  ),
+}

package/src/components/file-viewer/file-viewer.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { FileViewer, viewerKindForContentType } from './file-viewer'
+
+// pdf.js cannot run in jsdom — stub the lazy-loaded pane.
+vi.mock('./pdf-view', () => ({
+  default: ({ name }: { name: string }) => <div data-testid="pdf-view">{name}</div>,
+}))
+
+const IMAGE_DATA_URI = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"/>')}`
+
+describe('viewerKindForContentType', () => {
+  it.each([
+    ['image/png', 'image'],
+    ['image/svg+xml', 'image'],
+    ['video/mp4', 'video'],
+    ['application/pdf', 'pdf'],
+    ['application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'none'],
+    [undefined, 'none'],
+  ])('maps %s to %s', (contentType, kind) => {
+    expect(viewerKindForContentType(contentType)).toBe(kind)
+  })
+})
+
+describe('FileViewer', () => {
+  it('renders the image pane for image content', () => {
+    render(<FileViewer name="photo.png" contentType="image/png" src={IMAGE_DATA_URI} />)
+    expect(screen.getByRole('button', { name: 'Preview photo.png' })).toBeInTheDocument()
+    expect(screen.getByAltText('photo.png')).toBeInTheDocument()
+  })
+
+  it('renders the video pane for video content', () => {
+    render(<FileViewer name="clip.mp4" contentType="video/mp4" src="blob:clip" />)
+    expect(screen.getByLabelText('clip.mp4')).toBeInTheDocument()
+  })
+
+  it('renders the pdf pane for pdf content', async () => {
+    render(<FileViewer name="contract.pdf" contentType="application/pdf" src="blob:pdf" />)
+    expect(await screen.findByTestId('pdf-view')).toHaveTextContent('contract.pdf')
+  })
+
+  it('renders the fallback card for unpreviewable content', () => {
+    render(
+      <FileViewer
+        name="deck.pptx"
+        contentType="application/vnd.ms-powerpoint"
+        sizeInBytes={2048}
+        onDownload={() => {}}
+      />,
+    )
+    expect(screen.getByText('deck.pptx')).toBeInTheDocument()
+    expect(screen.getByText('2.0 KB')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Download deck.pptx' })).toBeInTheDocument()
+  })
+
+  it('renders the fallback card with a note when oversized, even for previewable content', () => {
+    render(<FileViewer name="huge.png" contentType="image/png" src={IMAGE_DATA_URI} isOversized />)
+    expect(screen.getByText('Too large to preview')).toBeInTheDocument()
+    expect(screen.queryByAltText('huge.png')).not.toBeInTheDocument()
+  })
+
+  it('renders the fallback card with the error message on load failure', () => {
+    render(
+      <FileViewer name="broken.pdf" contentType="application/pdf" errorMessage="Download failed" />,
+    )
+    expect(screen.getByText('Download failed')).toBeInTheDocument()
+  })
+
+  it('renders a loading skeleton while previewable bytes are unresolved', () => {
+    render(<FileViewer name="photo.png" contentType="image/png" />)
+    expect(screen.getByLabelText('Loading preview of photo.png')).toBeInTheDocument()
+  })
+
+  it('fires onDownload from the fallback card action', () => {
+    const onDownload = vi.fn()
+    render(<FileViewer name="data.zip" contentType="application/zip" onDownload={onDownload} />)
+    screen.getByRole('button', { name: 'Download data.zip' }).click()
+    expect(onDownload).toHaveBeenCalledOnce()
+  })
+})

package/src/components/file-viewer/file-viewer.tsx

@@ -0,0 +1,116 @@
+import { lazy, Suspense } from 'react'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { Skeleton } from '../skeleton/skeleton'
+import { FileViewerFallbackCard } from './fallback-card'
+import { ImageView } from './image-view'
+import { VideoView } from './video-view'
+
+/* =========================================================================
+   FileViewer — inline preview for a stored file. Renders the file itself
+   when the content type is previewable (image / video / PDF), otherwise a
+   file-type card with a download action. Pure presentation: the consumer
+   fetches the bytes (authenticated) and hands in a blob object URL — the
+   viewer never fetches anything itself.
+
+   The PDF renderer (react-pdf + the pdf.js worker) is lazy-loaded so it
+   lands in its own chunk and non-PDF surfaces never pay for it.
+   ========================================================================= */
+
+// Code-split: pdf.js is heavy and only needed when a PDF is actually shown.
+const PdfView = lazy(() => import('./pdf-view'))
+
+export const fileViewerStyles = tv({
+  base: [
+    'relative flex w-full flex-col overflow-hidden',
+    'rounded-md border border-rule bg-surface-2',
+  ],
+})
+
+export type FileViewerVariants = VariantProps<typeof fileViewerStyles>
+
+/** Which renderer a content type maps to (`none` → fallback card). */
+export type FileViewerKind = 'image' | 'video' | 'pdf' | 'none'
+
+/**
+ * Maps a MIME type to the viewer that can render it inline. Consumers use
+ * this to decide whether fetching the bytes is worthwhile at all.
+ */
+export function viewerKindForContentType(contentType?: string): FileViewerKind {
+  if (!contentType) return 'none'
+  if (contentType.startsWith('image/')) return 'image'
+  if (contentType.startsWith('video/')) return 'video'
+  if (contentType === 'application/pdf') return 'pdf'
+  return 'none'
+}
+
+export interface FileViewerProps {
+  /** Filename — labels, alt text and the fallback card. */
+  name: string
+  /** MIME type; unknown/unpreviewable types render the fallback card. */
+  contentType?: string
+  /** Blob object URL of the file bytes. While undefined (and previewable), the skeleton renders. */
+  src?: string
+  /** Size in bytes — shown on the fallback card when known. */
+  sizeInBytes?: number
+  /** Viewer height in px for previewable files (the fallback card keeps its natural height). */
+  heightPx?: number
+  /** Error loading the file — renders the fallback card with the message. */
+  errorMessage?: string
+  /** File too large for inline preview — renders the fallback card. */
+  isOversized?: boolean
+  /** When set, download actions render (card button, lightbox, PDF toolbar). */
+  onDownload?: () => void
+  className?: string
+}
+
+const DEFAULT_HEIGHT_PX = 640
+
+export function FileViewer({
+  name,
+  contentType,
+  src,
+  sizeInBytes,
+  heightPx = DEFAULT_HEIGHT_PX,
+  errorMessage,
+  isOversized = false,
+  onDownload,
+  className,
+}: FileViewerProps) {
+  const kind = viewerKindForContentType(contentType)
+
+  const fallback = (
+    <FileViewerFallbackCard
+      name={name}
+      {...(contentType !== undefined ? { contentType } : {})}
+      {...(sizeInBytes !== undefined ? { sizeInBytes } : {})}
+      {...(errorMessage !== undefined ? { errorMessage } : {})}
+      {...(isOversized ? { note: 'Too large to preview' } : {})}
+      {...(onDownload ? { onDownload } : {})}
+      {...(className !== undefined ? { className } : {})}
+    />
+  )
+
+  if (kind === 'none' || errorMessage || isOversized) return fallback
+
+  const skeleton = (
+    <Skeleton aria-label={`Loading preview of ${name}`} className="h-full w-full rounded-none" />
+  )
+
+  return (
+    <div className={cn(fileViewerStyles(), className)} style={{ height: heightPx }}>
+      {!src ? (
+        skeleton
+      ) : kind === 'image' ? (
+        <ImageView name={name} src={src} {...(onDownload ? { onDownload } : {})} />
+      ) : kind === 'video' ? (
+        <VideoView name={name} src={src} />
+      ) : (
+        <Suspense fallback={skeleton}>
+          <PdfView name={name} src={src} {...(onDownload ? { onDownload } : {})} />
+        </Suspense>
+      )}
+    </div>
+  )
+}

package/src/components/file-viewer/image-view.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { Button as AriaButton } from 'react-aria-components'
+
+import { ImageLightbox } from '../image-lightbox/image-lightbox'
+
+/* =========================================================================
+   ImageView — the FileViewer's image pane. The image letterboxes inside
+   the viewer box; pressing it opens the full-viewport lightbox.
+   ========================================================================= */
+
+export interface ImageViewProps {
+  name: string
+  src: string
+  onDownload?: () => void
+}
+
+export function ImageView({ name, src, onDownload }: ImageViewProps) {
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+
+  return (
+    <>
+      <AriaButton
+        aria-label={`Preview ${name}`}
+        onPress={() => setIsLightboxOpen(true)}
+        className="flex h-full w-full cursor-zoom-in items-center justify-center outline-none focus-visible:shadow-[var(--shadow-focus)]"
+      >
+        <img src={src} alt={name} className="max-h-full max-w-full object-contain" />
+      </AriaButton>
+      <ImageLightbox
+        isOpen={isLightboxOpen}
+        onOpenChange={setIsLightboxOpen}
+        src={src}
+        name={name}
+        {...(onDownload ? { onDownload } : {})}
+      />
+    </>
+  )
+}

package/src/components/file-viewer/index.ts

@@ -0,0 +1,7 @@
+export type {
+  FileViewerFallbackCardProps,
+  FileViewerFallbackCardVariants,
+} from './fallback-card'
+export { FileViewerFallbackCard, fileViewerFallbackCardStyles } from './fallback-card'
+export type { FileViewerKind, FileViewerProps, FileViewerVariants } from './file-viewer'
+export { FileViewer, fileViewerStyles, viewerKindForContentType } from './file-viewer'