@proteos/ui 0.31.0

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

@@ -0,0 +1,122 @@
+import { ChevronLeft, ChevronRight, Download } from 'lucide-react'
+import pdfWorkerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
+import { useEffect, useRef, useState } from 'react'
+import { Document, Page, pdfjs } from 'react-pdf'
+
+import { Button } from '../button/button'
+import { Skeleton } from '../skeleton/skeleton'
+
+/* =========================================================================
+   PdfView — the FileViewer's PDF pane, backed by react-pdf (pdf.js).
+   Lazy-loaded by the FileViewer (default export) so pdf.js and its worker
+   stay out of the main bundle. Text/annotation layers are off: this is a
+   read-only preview and the layers would need pdf.js's own stylesheets,
+   which the token-based design system deliberately doesn't import.
+   ========================================================================= */
+
+// The worker must come from the SAME pdfjs-dist instance react-pdf renders
+// with (API/worker version mismatch throws). `?url` lets Vite emit it as an
+// asset and hand back the served URL. In the published dist build the `?url`
+// module is rewritten to a version-pinned CDN URL (see tsup.config.ts), and
+// the guard lets consumers pre-set their own workerSrc before this lazy
+// chunk loads.
+if (!pdfjs.GlobalWorkerOptions.workerSrc) {
+  pdfjs.GlobalWorkerOptions.workerSrc = pdfWorkerUrl
+}
+
+export interface PdfViewProps {
+  name: string
+  /** Blob object URL of the PDF bytes. */
+  src: string
+  onDownload?: () => void
+}
+
+export default function PdfView({ name, src, onDownload }: PdfViewProps) {
+  const [pageCount, setPageCount] = useState<number | null>(null)
+  const [pageNumber, setPageNumber] = useState(1)
+  const [loadError, setLoadError] = useState(false)
+
+  // Fit-width: render the page at the scroll area's current width.
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+  const [pageWidth, setPageWidth] = useState<number | null>(null)
+  useEffect(() => {
+    const element = scrollRef.current
+    if (!element) return
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) setPageWidth(Math.floor(entry.contentRect.width))
+    })
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [])
+
+  if (loadError) {
+    return (
+      <div className="flex h-full w-full items-center justify-center p-4">
+        <span className="font-sans text-[13px] text-danger">
+          Could not display this PDF. Download it instead.
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full w-full flex-col">
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-auto">
+        <Document
+          file={src}
+          onLoadSuccess={({ numPages }) => {
+            setPageCount(numPages)
+            setPageNumber(1)
+          }}
+          onLoadError={() => setLoadError(true)}
+          loading={
+            <Skeleton aria-label={`Loading ${name}`} className="h-full w-full rounded-none" />
+          }
+          error={null}
+        >
+          {pageWidth ? (
+            <Page
+              pageNumber={pageNumber}
+              width={pageWidth}
+              renderTextLayer={false}
+              renderAnnotationLayer={false}
+            />
+          ) : null}
+        </Document>
+      </div>
+      <div className="flex shrink-0 items-center justify-center gap-1.5 border-t border-rule bg-surface px-2 py-1">
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Previous page"
+          isDisabled={pageNumber <= 1}
+          onPress={() => setPageNumber((page) => Math.max(1, page - 1))}
+        >
+          <ChevronLeft aria-hidden />
+        </Button>
+        <span className="min-w-14 text-center font-sans text-[12px] tabular-nums text-ink-3">
+          {pageCount ? `${pageNumber} / ${pageCount}` : '–'}
+        </span>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Next page"
+          isDisabled={pageCount === null || pageNumber >= pageCount}
+          onPress={() => setPageNumber((page) => Math.min(pageCount ?? page, page + 1))}
+        >
+          <ChevronRight aria-hidden />
+        </Button>
+        {onDownload ? (
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            aria-label={`Download ${name}`}
+            onPress={onDownload}
+          >
+            <Download aria-hidden />
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+/* =========================================================================
+   VideoView — the FileViewer's video pane. Native playback controls; the
+   video letterboxes inside the viewer box.
+   ========================================================================= */
+
+export interface VideoViewProps {
+  name: string
+  src: string
+}
+
+export function VideoView({ name, src }: VideoViewProps) {
+  return (
+    // biome-ignore lint/a11y/useMediaCaption: user-stored files carry no caption tracks
+    <video controls src={src} aria-label={name} className="h-full w-full object-contain" />
+  )
+}

package/src/components/image-attachment/image-attachment.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ImageAttachment } from './image-attachment'
+
+// 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="280" height="180"><rect width="280" height="180" fill="#d8cfc0"/><circle cx="80" cy="70" r="34" fill="#8a8171"/><path d="M0 180 L100 90 L170 150 L230 100 L280 130 V180 Z" fill="#a89f8d"/></svg>',
+)}`
+
+const meta: Meta<typeof ImageAttachment> = {
+  title: 'Components/ImageAttachment',
+  component: ImageAttachment,
+  tags: ['autodocs'],
+  args: {
+    name: 'sunset.png',
+    src: SAMPLE_IMAGE,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ImageAttachment>
+
+export const Playground: Story = {}
+
+export const Loading: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => <ImageAttachment name="pending.png" />,
+}
+
+export const Row: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex flex-wrap gap-1.5">
+      <ImageAttachment name="sunset.png" src={SAMPLE_IMAGE} />
+      <ImageAttachment name="pending.png" />
+      <ImageAttachment name="hills.png" src={SAMPLE_IMAGE} />
+    </div>
+  ),
+}

package/src/components/image-attachment/image-attachment.test.tsx

@@ -0,0 +1,54 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { ImageAttachment } from './image-attachment'
+import { isPreviewableImageName } from './is-previewable-image-name'
+
+const SVG_DATA_URI = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"/>')}`
+
+describe('isPreviewableImageName', () => {
+  it.each(['photo.png', 'photo.PNG', 'pic.jpeg', 'anim.gif', 'a.webp', 'icon.svg', 'shot.avif'])(
+    'accepts %s',
+    (name) => {
+      expect(isPreviewableImageName(name)).toBe(true)
+    },
+  )
+
+  it.each(['doc.pdf', 'archive.tar.gz', 'noext', '.png', 'photo.', 'movie.mp4'])(
+    'rejects %s',
+    (name) => {
+      expect(isPreviewableImageName(name)).toBe(false)
+    },
+  )
+})
+
+describe('ImageAttachment', () => {
+  it('renders a skeleton and no img while src is unresolved', () => {
+    render(<ImageAttachment name="photo.png" />)
+    expect(screen.getByRole('button', { name: 'Preview photo.png' })).toBeInTheDocument()
+    expect(screen.queryByAltText('photo.png')).not.toBeInTheDocument()
+  })
+
+  it('renders the image with the name as alt text', () => {
+    render(<ImageAttachment name="photo.png" src={SVG_DATA_URI} />)
+    expect(screen.getByAltText('photo.png')).toHaveAttribute('src', SVG_DATA_URI)
+  })
+
+  it('fires onPress when the thumbnail is pressed', async () => {
+    const user = userEvent.setup()
+    const onPress = vi.fn()
+    render(<ImageAttachment name="photo.png" src={SVG_DATA_URI} onPress={onPress} />)
+
+    await user.click(screen.getByRole('button', { name: 'Preview photo.png' }))
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  it('fires onLoadError when the image fails to load', () => {
+    const onLoadError = vi.fn()
+    render(<ImageAttachment name="photo.png" src="/broken.png" onLoadError={onLoadError} />)
+
+    fireEvent.error(screen.getByAltText('photo.png'))
+    expect(onLoadError).toHaveBeenCalledOnce()
+  })
+})

package/src/components/image-attachment/image-attachment.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react'
+import { Button as AriaButton } from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { Skeleton } from '../skeleton/skeleton'
+
+/* =========================================================================
+   ImageAttachment — a pressable image thumbnail for chat/message rows.
+   Shows a skeleton while the URL resolves and the image loads, then the
+   image constrained to a Slack-style thumbnail box. Pure presentation:
+   the consumer resolves the src, opens the lightbox on press, and decides
+   what to do when the image fails to load (typically fall back to a
+   plain file chip).
+   ========================================================================= */
+
+export const imageAttachmentStyles = tv({
+  base: [
+    'relative block overflow-hidden',
+    'rounded-[8px] border border-rule bg-surface-2',
+    'cursor-pointer outline-none focus-visible:shadow-[var(--shadow-focus)]',
+  ],
+})
+
+export type ImageAttachmentVariants = VariantProps<typeof imageAttachmentStyles>
+
+export interface ImageAttachmentProps {
+  /** File name — the alt text and the accessible button name. */
+  name: string
+  /** Resolved image URL. While undefined, the skeleton placeholder renders. */
+  src?: string
+  /** Fired when the browser fails to load `src` (e.g. not actually an image). */
+  onLoadError?: () => void
+  /** Fired on thumbnail press (consumer opens the lightbox). */
+  onPress?: () => void
+  className?: string
+}
+
+export function ImageAttachment({
+  name,
+  src,
+  onLoadError,
+  onPress,
+  className,
+}: ImageAttachmentProps) {
+  // Tracks which src has finished loading, so a swapped-out URL goes back to
+  // the skeleton instead of flashing the stale image.
+  const [loadedSrc, setLoadedSrc] = useState<string | null>(null)
+  const isLoaded = src !== undefined && loadedSrc === src
+
+  return (
+    <AriaButton
+      aria-label={`Preview ${name}`}
+      {...(onPress ? { onPress } : {})}
+      className={cn(imageAttachmentStyles(), className)}
+    >
+      {src ? (
+        // Kept in the DOM (invisible) while loading so onLoad still fires
+        // behind the skeleton.
+        <img
+          src={src}
+          alt={name}
+          loading="lazy"
+          onLoad={() => setLoadedSrc(src)}
+          onError={() => onLoadError?.()}
+          className={cn(
+            'block max-h-[220px] max-w-[280px] object-contain',
+            !isLoaded && 'invisible absolute inset-0',
+          )}
+        />
+      ) : null}
+      {/* Fixed footprint — intrinsic dimensions are unknown until load, and a
+          0-height placeholder would make the row jump. */}
+      {!isLoaded ? <Skeleton className="h-[140px] w-[200px]" /> : null}
+    </AriaButton>
+  )
+}

package/src/components/image-attachment/index.ts

@@ -0,0 +1,3 @@
+export type { ImageAttachmentProps, ImageAttachmentVariants } from './image-attachment'
+export { ImageAttachment, imageAttachmentStyles } from './image-attachment'
+export { isPreviewableImageName } from './is-previewable-image-name'

package/src/components/image-attachment/is-previewable-image-name.ts

@@ -0,0 +1,14 @@
+const PREVIEWABLE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'svg', 'bmp'])
+
+/**
+ * True when a filename's extension is one the browser renders natively in
+ * `<img>`. A heuristic for contexts where only a name is known (e.g. a
+ * FileRef carries no MIME type) — a wrong guess should degrade gracefully via
+ * the consumer's img-error fallback. SVG is deliberately included: scripts do
+ * not execute in an `<img>` context.
+ */
+export function isPreviewableImageName(name: string): boolean {
+  const dot = name.lastIndexOf('.')
+  if (dot <= 0 || dot === name.length - 1) return false
+  return PREVIEWABLE_EXTENSIONS.has(name.slice(dot + 1).toLowerCase())
+}

package/src/components/image-lightbox/image-lightbox.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Button } from '../button/button'
+import { ImageLightbox } from './image-lightbox'
+
+// 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="960" height="600"><rect width="960" height="600" fill="#d8cfc0"/><circle cx="240" cy="200" r="90" fill="#8a8171"/><path d="M0 600 L340 280 L560 480 L760 320 L960 430 V600 Z" fill="#a89f8d"/></svg>',
+)}`
+
+const meta: Meta<typeof ImageLightbox> = {
+  title: 'Components/ImageLightbox',
+  component: ImageLightbox,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ImageLightbox>
+
+export const Playground: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => {
+    const [isOpen, setOpen] = useState(false)
+    return (
+      <>
+        <Button onPress={() => setOpen(true)}>Open lightbox</Button>
+        <ImageLightbox
+          isOpen={isOpen}
+          onOpenChange={setOpen}
+          src={SAMPLE_IMAGE}
+          name="landscape.png"
+          onDownload={() => alert('download')}
+        />
+      </>
+    )
+  },
+}

package/src/components/image-lightbox/image-lightbox.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { ImageLightbox } from './image-lightbox'
+
+const SVG_DATA_URI = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"/>')}`
+
+function renderLightbox({
+  isOpen = true,
+  onOpenChange = vi.fn(),
+  onDownload,
+}: {
+  isOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+  onDownload?: () => void
+} = {}) {
+  render(
+    <ImageLightbox
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      src={SVG_DATA_URI}
+      name="photo.png"
+      {...(onDownload ? { onDownload } : {})}
+    />,
+  )
+}
+
+describe('ImageLightbox', () => {
+  it('renders nothing while closed', () => {
+    renderLightbox({ isOpen: false })
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('renders a dialog named after the file with the image inside', () => {
+    renderLightbox()
+    expect(screen.getByRole('dialog', { name: 'photo.png' })).toBeInTheDocument()
+    expect(screen.getByAltText('photo.png')).toHaveAttribute('src', SVG_DATA_URI)
+  })
+
+  it('closes on Escape', async () => {
+    const user = userEvent.setup()
+    const onOpenChange = vi.fn()
+    renderLightbox({ onOpenChange })
+
+    await user.keyboard('{Escape}')
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('closes via the close button', async () => {
+    const user = userEvent.setup()
+    const onOpenChange = vi.fn()
+    renderLightbox({ onOpenChange })
+
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+    expect(onOpenChange).toHaveBeenLastCalledWith(false)
+  })
+
+  it('fires onDownload from the caption bar', async () => {
+    const user = userEvent.setup()
+    const onDownload = vi.fn()
+    renderLightbox({ onDownload })
+
+    await user.click(screen.getByRole('button', { name: 'Download photo.png' }))
+    expect(onDownload).toHaveBeenCalledOnce()
+  })
+
+  it('omits the download button when no handler is given', () => {
+    renderLightbox()
+    expect(screen.queryByRole('button', { name: 'Download photo.png' })).not.toBeInTheDocument()
+  })
+})

package/src/components/image-lightbox/image-lightbox.tsx

@@ -0,0 +1,92 @@
+import { Download, X } from 'lucide-react'
+import {
+  Dialog as AriaDialog,
+  Modal as AriaModal,
+  ModalOverlay as AriaModalOverlay,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { Button } from '../button/button'
+
+/* =========================================================================
+   ImageLightbox — a full-viewport image overlay (Slack-style). Unlike
+   Modal there is no surface panel: the image floats on a deep scrim with
+   a small caption bar (file name + optional download + close) beneath it.
+   Controlled-only — the trigger is the consumer's thumbnail, so there is
+   no DialogTrigger composition. RAC provides Esc dismissal, backdrop
+   click, and focus trap/restore.
+   ========================================================================= */
+
+export const imageLightboxStyles = tv({
+  base: [
+    'fixed inset-0 z-50 flex items-center justify-center p-4',
+    // Deeper scrim than Modal's 40% — the image needs the page fully dimmed.
+    'bg-[color-mix(in_oklab,var(--color-ink)_72%,transparent)]',
+    'entering:animate-in entering:fade-in-0 entering:duration-150',
+    'exiting:animate-out exiting:fade-out-0 exiting:duration-100',
+  ],
+})
+
+export type ImageLightboxVariants = VariantProps<typeof imageLightboxStyles>
+
+export interface ImageLightboxProps {
+  isOpen: boolean
+  onOpenChange: (isOpen: boolean) => void
+  /** Full-size image URL; nothing renders in the frame while undefined. */
+  src?: string
+  /** File name — the dialog's accessible name, alt text, and caption. */
+  name: string
+  /** When set, a download action renders in the caption bar. */
+  onDownload?: () => void
+}
+
+export function ImageLightbox({ isOpen, onOpenChange, src, name, onDownload }: ImageLightboxProps) {
+  return (
+    <AriaModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      isDismissable
+      className={imageLightboxStyles()}
+    >
+      <AriaModal className="outline-none">
+        <AriaDialog
+          aria-label={name}
+          className="outline-none flex flex-col items-center gap-3"
+        >
+          {src ? (
+            <img
+              src={src}
+              alt={name}
+              className="block max-h-[82dvh] max-w-[90dvw] rounded-[8px] object-contain"
+            />
+          ) : null}
+          {/* Caption chip sits on its own surface so tokens stay legible over
+              the dark scrim. */}
+          <div
+            className={cn(
+              'flex items-center gap-1.5',
+              'rounded-[8px] border border-rule bg-surface py-1 pl-3 pr-1',
+              'shadow-[var(--shadow-float)]',
+            )}
+          >
+            <span className="max-w-[320px] truncate font-sans text-[12.5px] text-ink">{name}</span>
+            {onDownload ? (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                aria-label={`Download ${name}`}
+                onPress={onDownload}
+              >
+                <Download aria-hidden />
+              </Button>
+            ) : null}
+            <Button slot="close" variant="ghost" size="icon-sm" aria-label="Close">
+              <X aria-hidden />
+            </Button>
+          </div>
+        </AriaDialog>
+      </AriaModal>
+    </AriaModalOverlay>
+  )
+}

package/src/components/image-lightbox/index.ts

@@ -0,0 +1,2 @@
+export type { ImageLightboxProps, ImageLightboxVariants } from './image-lightbox'
+export { ImageLightbox, imageLightboxStyles } from './image-lightbox'

package/src/components/input/index.ts

@@ -0,0 +1,2 @@
+export type { InputProps } from './input'
+export { Input } from './input'

package/src/components/input/input.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Input } from './input'
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  args: {
+    label: 'Company name',
+    placeholder: 'Meridian Freight, Inc.',
+  },
+  argTypes: {
+    isDisabled: { control: { type: 'boolean' } },
+    isInvalid: { control: { type: 'boolean' } },
+    isReadOnly: { control: { type: 'boolean' } },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[440px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+export const Playground: Story = {}
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Describe the system',
+    placeholder: 'A mid-size freight broker. Quotes, loads, carriers, lanes…',
+    description: 'Plain language. Proteos will infer entities, workflows and reports.',
+  },
+}
+
+export const Invalid: Story = {
+  args: {
+    label: 'State',
+    placeholder: 'Error example',
+    isInvalid: true,
+    errorMessage: 'Required — tell us what to build.',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Company name',
+    defaultValue: 'Meridian Freight, Inc.',
+    isDisabled: true,
+  },
+}
+
+export const AllStates: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="grid gap-5 w-[440px]">
+      <Input label="Rest" placeholder="Hairline border, paper fill" />
+      <Input
+        label="Filled"
+        defaultValue="Meridian Freight, Inc."
+        description="Hover or focus to see the indigo shift."
+      />
+      <Input label="Invalid" isInvalid errorMessage="Required — tell us what to build." />
+      <Input label="Disabled" defaultValue="Can't touch this" isDisabled />
+    </div>
+  ),
+}

package/src/components/input/input.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+
+import { Input } from './input'
+
+describe('Input', () => {
+  it('renders a labelled textbox', () => {
+    render(<Input label="Company name" placeholder="Meridian Freight, Inc." />)
+    expect(screen.getByLabelText('Company name')).toBeInTheDocument()
+  })
+
+  it('accepts user input', async () => {
+    const user = userEvent.setup()
+    render(<Input label="Company name" />)
+
+    const input = screen.getByLabelText('Company name')
+    await user.type(input, 'Proteos')
+    expect(input).toHaveValue('Proteos')
+  })
+
+  it('shows its description slot', () => {
+    render(<Input label="Industry" description="Plain language is fine." />)
+    expect(screen.getByText('Plain language is fine.')).toBeInTheDocument()
+  })
+
+  it('renders the error message when invalid', () => {
+    render(<Input label="State" isInvalid errorMessage="Required — tell us what to build." />)
+    expect(screen.getByText('Required — tell us what to build.')).toBeInTheDocument()
+  })
+
+  it('forwards disabled state to the underlying input', () => {
+    render(<Input label="Industry" isDisabled />)
+    expect(screen.getByLabelText('Industry')).toBeDisabled()
+  })
+})