@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

package/components/AI/input-message/examples.mdx

@@ -1,130 +0,0 @@
-import InputMessage from './index'
-import Button from '../../button'
-import { ChevronDown, Plus } from 'lucide-react'
-
-# Basics
-
-## Basic
-
-No props at all: the composer keeps its own draft, grows as you type and
-clears itself on Enter.
-
-<div className="w-full max-w-xl">
-  <InputMessage />
-</div>
-
-## Send Handler
-
-`onSend` receives the trimmed text and the attached files; an uncontrolled
-composer clears its own draft afterwards. The handler here is an empty
-arrow — in an app it is where the message joins the transcript.
-
-<div className="w-full max-w-xl">
-  <InputMessage
-    onSend={() => {}}
-    placeholder="Press Enter to send. Shift+Enter for newline."
-  />
-</div>
-
-## Disabled
-
-Dims the panel to 50% and drops pointer events — textarea, send button and
-drag-and-drop all go inert.
-
-<div className="w-full max-w-xl">
-  <InputMessage defaultValue="This composer is disabled" disabled />
-</div>
-
-# Content
-
-## Suggestions
-
-The ghost placeholder renders with a Tab keycap — Tab fills it into the
-composer. ArrowDown/ArrowUp walk the list below (focus stays in the
-textarea) and Enter or click fills the highlighted prompt; the first row
-shows a ↓ hint until a row is highlighted. Typing collapses the list.
-
-<div className="w-full max-w-xl">
-  <InputMessage
-    placeholderSuggestion="Why is every other input box so stiff?"
-    suggestions={[
-      'What is Fluid Functionalism about?',
-      'How does Micka tune the springs behind these animations?',
-      'Install the InputMessage component in my project',
-      'Draft a short thank-you note to Micka for the library',
-    ]}
-  />
-</div>
-
-## Attachments
-
-`defaultFiles` seeds the composer and turns attachment behavior on: drop a
-PNG, JPEG or PDF anywhere on the panel, or use the render-fn slot's
-`openFilePicker`. Images preview with object-cover, PDFs render their
-first page, anything else falls back to a document glyph — hover a tile
-for its × button.
-
-<div className="w-full max-w-xl">
-  <InputMessage
-    defaultFiles={[
-      new File(['<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#6B97FF" /></svg>'], 'swatch.svg', { type: 'image/svg+xml' }),
-      new File(['Quarterly notes'], 'notes.txt', { type: 'text/plain' }),
-    ]}
-    leftSlot={({ openFilePicker }) => (
-      <Button variant="ghost" size="icon-compact" aria-label="Attach" onClick={() => openFilePicker()}>
-        <Plus />
-      </Button>
-    )}
-  />
-</div>
-
-## Queued messages
-
-`defaultStatus="streaming"` plus `defaultQueue` runs the composer as if a
-response were in flight: the send button is a Queue action, so a typed
-message joins the rows above instead of sending. Drag a row (or Alt+↑/↓)
-to reorder, double-click to pull it back into the composer, × to drop it.
-Clear the draft and the button becomes Stop — pressing it ends the
-response, and that streaming→idle edge dispatches the row at the top.
-
-<div className="w-full max-w-xl">
-  <InputMessage
-    defaultStatus="streaming"
-    defaultQueue={[
-      { id: 'q1', text: 'Also add a dark-mode screenshot', files: [] },
-      { id: 'q2', text: 'And link the changelog entry', files: [] },
-    ]}
-  />
-</div>
-
-# Slots
-
-## Left Slot Only
-
-`leftSlot` takes the bottom-left action area — an attach button, a model
-switcher, a mode toggle.
-
-<div className="w-full max-w-xl">
-  <InputMessage
-    leftSlot={
-      <Button variant="ghost" size="icon-compact" aria-label="Attach">
-        <Plus />
-      </Button>
-    }
-  />
-</div>
-
-## Right Slot Only
-
-`rightSlot` sits in the bottom-right, just before the built-in send
-button.
-
-<div className="w-full max-w-xl">
-  <InputMessage
-    rightSlot={
-      <Button variant="ghost" size="compact" trailingIcon={ChevronDown}>
-        Sonnet 4.6
-      </Button>
-    }
-  />
-</div>

package/components/AI/input-message/file-thumbnail.tsx

@@ -1,173 +0,0 @@
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/default/file-thumbnail.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - `"use client"` directive dropped (no RSC here); the `@next/next/no-img-element`
- *   eslint-disable comment dropped (no Next.js).
- * - `@/lib/{utils,shape-context}` rewritten to `../../../lib/*`.
- * - The lazy `import("pdfjs-dist")` is kept as-is: verified against modo's own
- *   esbuild settings (bundle, `platform: "browser"`, `target: "es2022"`, both
- *   with and without `splitting: true`) — it resolves cleanly and lands in a
- *   ~790kB chunk that is only fetched when a PDF is actually attached. No CDN
- *   fallback was needed. The worker still comes from jsDelivr, so no
- *   bundler-side worker config is required.
- */
-
-import { useEffect, useState } from 'react'
-import { useShape } from '../../../lib/shape-context'
-import { cn } from '../../../lib/utils'
-
-// ─── Lazy pdfjs loader ────────────────────────────────────────────────────
-// Imports pdfjs-dist on first PDF, caches the module, and points the worker
-// at the matching CDN build. Consumers don't need bundler-side worker config.
-type PdfjsModule = typeof import('pdfjs-dist')
-let pdfjsPromise: Promise<PdfjsModule> | null = null
-
-async function loadPdfjs(): Promise<PdfjsModule> {
-  if (!pdfjsPromise) {
-    pdfjsPromise = import('pdfjs-dist').then(mod => {
-      if (!mod.GlobalWorkerOptions.workerSrc) {
-        mod.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${mod.version}/build/pdf.worker.min.mjs`
-      }
-      return mod
-    })
-  }
-  return pdfjsPromise
-}
-
-async function renderPdfFirstPage(file: File, targetWidth: number): Promise<string> {
-  const pdfjs = await loadPdfjs()
-  const buffer = await file.arrayBuffer()
-  const pdf = await pdfjs.getDocument({ data: buffer }).promise
-  const page = await pdf.getPage(1)
-  const baseViewport = page.getViewport({ scale: 1 })
-  const scale = (targetWidth * 2) / baseViewport.width // 2× for retina
-  const viewport = page.getViewport({ scale })
-  const canvas = document.createElement('canvas')
-  canvas.width = viewport.width
-  canvas.height = viewport.height
-  await page.render({ canvas, viewport }).promise
-  return canvas.toDataURL('image/png')
-}
-
-// ─── File thumbnail ───────────────────────────────────────────────────────
-// Read-only square preview of a File. Images use object-cover via
-// `URL.createObjectURL`; PDFs render the first page via pdfjs; while either is
-// resolving a spinner is shown. Self-contained (border + surface + sizing) so
-// it can be reused both inside the composer's preview row and to render
-// already-sent attachments in a chat transcript.
-interface FileThumbnailProps {
-  file: File
-  /** Side length of the square thumbnail in pixels. */
-  size: number
-  className?: string
-}
-
-function FileThumbnail({ file, size, className }: FileThumbnailProps) {
-  const shape = useShape()
-  const isImage = file.type.startsWith('image/')
-  const isPdf = file.type === 'application/pdf'
-
-  // Create blob URL inside an effect (NOT useMemo) so the cleanup-revoke
-  // and the URL-creation stay in sync. In React 18 StrictMode dev, a
-  // useMemo-created URL gets revoked by the simulated effect-cleanup but
-  // useMemo doesn't re-run on the simulated re-mount (no re-render happens),
-  // leaving the DOM with a stale, revoked `blob:` URL — broken image.
-  // Putting both in the same effect means the simulated re-mount creates a
-  // fresh URL and updates state. The one-frame "before URL" state is
-  // covered by the bg-accent (no fallback icon shown for images), so the
-  // transition is visually clean.
-  const [imageUrl, setImageUrl] = useState<string | null>(null)
-  useEffect(() => {
-    if (!isImage) {
-      // Clear stale state if the `file` prop swaps type on the same mount —
-      // otherwise a revoked blob URL would keep winning over the new preview.
-      setImageUrl(null)
-      return
-    }
-    const url = URL.createObjectURL(file)
-    setImageUrl(url)
-    return () => URL.revokeObjectURL(url)
-  }, [isImage, file])
-
-  // PDFs need async rendering — loading flash is unavoidable for the first
-  // ~100–300ms while pdfjs loads. Falls back to the generic icon on error
-  // (corrupt/password-protected file, CDN worker blocked).
-  const [pdfUrl, setPdfUrl] = useState<string | null>(null)
-  const [pdfError, setPdfError] = useState(false)
-  useEffect(() => {
-    setPdfError(false)
-    if (!isPdf) {
-      setPdfUrl(null)
-      return
-    }
-    let cancelled = false
-    renderPdfFirstPage(file, size)
-      .then(url => {
-        if (!cancelled) setPdfUrl(url)
-      })
-      .catch(() => {
-        if (!cancelled) setPdfError(true)
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [file, isPdf, size])
-
-  const previewUrl = imageUrl ?? pdfUrl
-  // Spinner only while a preview is genuinely pending; anything that can't
-  // produce one (failed PDF, unsupported type) gets the generic icon instead.
-  const isPending = (isImage && !imageUrl) || (isPdf && !pdfUrl && !pdfError)
-
-  return (
-    <div
-      className={cn('relative shrink-0 overflow-hidden bg-accent border border-border', shape.bg, className)}
-      style={{ width: size, height: size }}
-    >
-      {previewUrl ? (
-        <img src={previewUrl} alt={file.name} className="absolute inset-0 w-full h-full object-cover" />
-      ) : isPending ? (
-        // Circular spinner while we wait for the preview to be ready.
-        // Used for both images (brief URL-creation gap) and PDFs (longer
-        // pdfjs render). The thin ring is mostly subtle (border-border)
-        // with one quadrant accented (border-t-muted-foreground) so the
-        // `animate-spin` rotation reads as a moving arc.
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div
-            className="w-6 h-6 rounded-full border-2 border-border border-t-muted-foreground animate-spin"
-            aria-label="Loading preview"
-            role="status"
-          />
-        </div>
-      ) : (
-        // Generic document glyph for files with no renderable preview.
-        // Inline SVG (not the icon system) so the thumbnail stays
-        // self-contained for registry consumers.
-        <div
-          className="absolute inset-0 flex items-center justify-center text-muted-foreground"
-          role="img"
-          aria-label={file.name}
-        >
-          <svg
-            width={Math.max(16, size * 0.35)}
-            height={Math.max(16, size * 0.35)}
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
-            <path d="M14 3v5h5" />
-          </svg>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export type { FileThumbnailProps }
-export { FileThumbnail, loadPdfjs, renderPdfFirstPage }