@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/blocks/sidebar-app/search-field.tsx

@@ -0,0 +1,48 @@
+// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
+/*
+ * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
+ * `registry/blocks/sidebar-app/search-field.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
+ * Local modifications:
+ * - `"use client"` dropped; `@/components/ui/{sidebar,dropdown}` → `../../components/*`,
+ *   `@/lib/sidebar-menu-grid` → `./menu-grid`, `@/lib/*` → `../../lib/*`.
+ * - Styling reads DS tokens (AGENTS.md styling): `text-[11px]` → `text-micro`;
+ *   `duration-80` → `duration-fast`.
+ */
+
+import { type ComponentProps } from 'react'
+import { SidebarInput } from '../../components/navigation/sidebar'
+import { useIcon } from '../../lib/icon-context'
+import { useSize } from '../../lib/size-context'
+
+// ---------------------------------------------------------------------------
+// The header's search field, on the menu rows' own rhythm. The leading icon
+// sits on the rows' 16px leading axis; pl-8 starts the text on the rows'
+// 32px text axis; and the shortcut chip waits at the trailing edge, revealed
+// on hover/focus — the placeholder owns the field at rest.
+// ---------------------------------------------------------------------------
+
+export interface SidebarSearchFieldProps extends Omit<ComponentProps<typeof SidebarInput>, 'className'> {
+  /** Keystroke shown in the trailing chip. Pass null to drop the chip. */
+  shortcut?: string | null
+}
+
+export function SidebarSearchField({ placeholder = 'Search…', shortcut = '⌘K', ...props }: SidebarSearchFieldProps) {
+  const iconSize = useSize().icon
+  const SearchIcon = useIcon('search')
+  return (
+    <div className="group/search relative">
+      <SearchIcon
+        size={iconSize}
+        strokeWidth={1.5}
+        className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+      />
+      <SidebarInput placeholder={placeholder} aria-label="Search" className="pl-8 pr-12" {...props} />
+      {shortcut && (
+        <kbd className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 font-sans text-micro text-muted-foreground opacity-0 transition-opacity duration-fast group-hover/search:opacity-100 group-focus-within/search:opacity-100">
+          {shortcut}
+        </kbd>
+      )}
+    </div>
+  )
+}

package/blocks/sidebar-app/user-footer.tsx

@@ -0,0 +1,67 @@
+// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
+/*
+ * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
+ * `registry/blocks/sidebar-user-footer.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
+ * Local modifications:
+ * - `"use client"` dropped; `@/components/ui/{sidebar,dropdown}` → `../../components/*`,
+ *   `@/lib/sidebar-menu-grid` → `./menu-grid`, `@/lib/*` → `../../lib/*`.
+ * - Styling reads DS tokens (AGENTS.md styling): `text-[13px]` → `text-body`.
+ */
+
+import { type ReactNode } from 'react'
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '../../components/navigation/sidebar'
+import { DropdownContent, DropdownMenu, DropdownTrigger } from '../../components/overlays/dropdown'
+import { useIcon } from '../../lib/icon-context'
+import { useSize } from '../../lib/size-context'
+import { cn } from '../../lib/utils'
+import { SIDEBAR_MENU_POPUP } from './menu-grid'
+
+// ---------------------------------------------------------------------------
+// Footer user row: identity anchors the sidebar's outer edge. The 20px
+// avatar pulls -ml-0.5 to centre on the rows' leading icon axis; the
+// chevron rides a 24px slot pulled -mr-0.5 onto the trailing action axis —
+// the same axes every other sidebar row uses. Its menu opens upward on the
+// shared sidebar menu grid, so labels and trailing glyphs line up with the
+// trigger row exactly.
+// ---------------------------------------------------------------------------
+
+export interface SidebarUserFooterProps {
+  /** Display name shown in the row. */
+  name: ReactNode
+  /** 20px avatar — e.g. <img className="size-5 rounded-full" …/>. The row
+   *  positions it on the leading icon axis; the element owns its look. */
+  avatar: ReactNode
+  /** Dropdown content (MenuItem rows). */
+  menu: ReactNode
+  /** Extra classes for the wrapping SidebarMenu — pass "min-w-0 flex-1" when
+   *  the row shares a horizontal footer line with icon buttons. */
+  className?: string
+}
+
+export function SidebarUserFooter({ name, avatar, menu, className }: SidebarUserFooterProps) {
+  const iconSize = useSize().icon
+  const ChevronsUpDown = useIcon('chevrons-up-down')
+  return (
+    <SidebarMenu aria-label="User" className={cn(className)}>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownTrigger
+            render={
+              <SidebarMenuButton aria-label="Open user menu">
+                <span className="-ml-0.5 -mr-0.5 flex size-5 shrink-0 items-center justify-center">{avatar}</span>
+                <span className="min-w-0 truncate text-body text-foreground">{name}</span>
+                <span className="ml-auto -mr-0.5 flex size-6 shrink-0 items-center justify-center">
+                  <ChevronsUpDown size={iconSize} strokeWidth={1.5} className="text-muted-foreground" />
+                </span>
+              </SidebarMenuButton>
+            }
+          />
+          <DropdownContent className={SIDEBAR_MENU_POPUP} side="top" align="start" sideOffset={6}>
+            {menu}
+          </DropdownContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/blocks/sidebar-app/workspace-header.tsx

@@ -0,0 +1,129 @@
+// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
+/*
+ * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
+ * `registry/blocks/sidebar-workspace-header.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
+ * Local modifications:
+ * - `"use client"` dropped; `@/components/ui/{sidebar,dropdown}` → `../../components/*`,
+ *   `@/lib/sidebar-menu-grid` → `./menu-grid`, `@/lib/*` → `../../lib/*`.
+ * - Styling reads DS tokens (AGENTS.md styling): inline
+ *   `fontVariationSettings` → `weight-semibold`; `text-[13px]` / `text-[10px]`
+ *   → `text-body` / `text-micro-compact`; `duration-80` → `duration-fast`.
+ * - `defaultCheckedIndex` passed through to the menu, so a switcher keeps its
+ *   own pick (the Dropdown's uncontrolled selection).
+ * - No peek trigger: the sidebar opens on hover in flow (the provider's
+ *   `openOnHover`), the topbar's trigger stays beside it, so the tile no
+ *   longer cross-fades with a trigger over the row.
+ */
+
+import { type ReactNode } from 'react'
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '../../components/navigation/sidebar'
+import { DropdownContent, DropdownMenu, DropdownTrigger } from '../../components/overlays/dropdown'
+import { useIcon } from '../../lib/icon-context'
+import { useShape } from '../../lib/shape-context'
+import { useSize } from '../../lib/size-context'
+import { cn } from '../../lib/utils'
+import { SIDEBAR_MENU_POPUP } from './menu-grid'
+
+// ---------------------------------------------------------------------------
+// Workspace brand row for a sidebar header. The row's pl-8 keeps the name on
+// the rows' 32px text axis, the tile in the leading slot.
+// ---------------------------------------------------------------------------
+
+export interface SidebarWorkspaceHeaderProps {
+  /** Workspace or product name shown in the row. */
+  name: ReactNode
+  /** 20px mark for the leading slot — a letter tile (see WorkspaceTile), a
+   *  logo, an avatar. The header positions and cross-fades it; the mark owns
+   *  its own colors and rounding. */
+  tile: ReactNode
+  /** Dropdown content (MenuItem rows). Omit to render a non-interactive logo
+   *  lockup instead of a workspace switcher. */
+  menu?: ReactNode
+  /** Index of the checked menu row, forwarded to DropdownContent. */
+  checkedIndex?: number
+  /** Initially checked menu row, for a switcher that keeps its own pick. */
+  defaultCheckedIndex?: number
+}
+
+export function SidebarWorkspaceHeader({
+  name,
+  tile,
+  menu,
+  checkedIndex,
+  defaultCheckedIndex,
+}: SidebarWorkspaceHeaderProps) {
+  const iconSize = useSize().icon
+  const ChevronDown = useIcon('chevron-down')
+
+  // The tile sits absolutely in the row's leading slot — 20px at left-1.5
+  // centres it on the rows' 16px leading icon axis.
+  const tileSlot = (
+    <span aria-hidden className="pointer-events-none absolute left-1.5 top-1/2 -translate-y-1/2">
+      {tile}
+    </span>
+  )
+  const nameSpan = <span className="min-w-0 truncate text-body weight-semibold text-foreground">{name}</span>
+
+  if (!menu) {
+    // Not interactive, so it renders outside SidebarMenu — a menu row would
+    // track the traveling hover background.
+    return (
+      <div className="relative flex h-8 items-center pl-8 pr-2">
+        {tileSlot}
+        {nameSpan}
+      </div>
+    )
+  }
+  return (
+    // @container: the row hides its dropdown chevron once it gets too narrow
+    // to show a useful slice of the name (squeezed by trailing header actions
+    // or a mid-drag width) — the text keeps whatever room is left.
+    <SidebarMenu aria-label="Workspace" className="@container">
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownTrigger
+            render={
+              <SidebarMenuButton aria-label="Switch workspace" className="pl-8">
+                {tileSlot}
+                {nameSpan}
+                <span className="ml-auto inline-flex @max-[7rem]:hidden">
+                  <ChevronDown size={iconSize} strokeWidth={1.5} className="text-muted-foreground" />
+                </span>
+              </SidebarMenuButton>
+            }
+          />
+          {/* Trigger-width popup on the shared sidebar menu grid: items start
+              at the row's edge, icon slots land on the leading axis, and the
+              check sits on the chevron's vertical axis. */}
+          <DropdownContent
+            className={SIDEBAR_MENU_POPUP}
+            align="start"
+            sideOffset={4}
+            checkedIndex={checkedIndex}
+            defaultCheckedIndex={defaultCheckedIndex}
+          >
+            {menu}
+          </DropdownContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
+
+/** The 20px letter-tile treatment the switcher's trigger and its menu rows
+ *  share — squared to the shape system, semibold 10px glyph. */
+export function WorkspaceTile({ children, className }: { children: ReactNode; className?: string }) {
+  const shape = useShape()
+  return (
+    <span
+      className={cn(
+        'flex size-5 shrink-0 items-center justify-center bg-foreground text-micro-compact weight-semibold text-background',
+        shape.bgRadius >= 20 ? 'rounded-full' : 'rounded-md',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  )
+}

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

@@ -0,0 +1,124 @@
+import InputMessage from './index'
+import Button from '../../button'
+import { ChevronDown, Plus } from 'lucide-react'
+
+# 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>
+
+# 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>
+
+# 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>
+
+# 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>

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

@@ -0,0 +1,173 @@
+/*
+ * 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 }