@open-slide/core 0.0.11 → 0.0.12

package/src/app/routes/{Home.tsx → home.tsx}

@@ -1,8 +1,15 @@
-import { FolderInput, FolderPlus, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  FolderInput,
+  FolderPlus,
+  MoreHorizontal,
+  Pencil,
+  Search,
+  Trash2,
+  X,
+} from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
 import {
   Dialog,
   DialogContent,
@@ -19,9 +26,9 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useFolders } from '@/lib/folders';
 import { cn } from '@/lib/utils';
-import { SlideCanvas } from '../components/SlideCanvas';
-import { FolderIconChip, SLIDE_DND_MIME } from '../components/sidebar/FolderItem';
-import { DRAFT_ID, Sidebar } from '../components/sidebar/Sidebar';
+import { FolderIconChip, SLIDE_DND_MIME } from '../components/sidebar/folder-item';
+import { DRAFT_ID, Sidebar } from '../components/sidebar/sidebar';
+import { SlideCanvas } from '../components/slide-canvas';
 import type { Folder, FolderIcon, SlideModule } from '../lib/sdk';
 import { loadSlide, slideIds } from '../lib/slides';
 
@@ -67,9 +74,27 @@ export function Home() {
 
   const title = selectedFolder?.name ?? 'Draft';
   const headerIcon = selectedFolder?.icon ?? { type: 'emoji' as const, value: '📝' };
+  const isDraft = selectedId === DRAFT_ID;
+
+  const [query, setQuery] = useState('');
+  const [titleMap, setTitleMap] = useState<Record<string, string>>({});
+  const reportTitle = useCallback((slideId: string, slideTitle: string) => {
+    setTitleMap((prev) => (prev[slideId] === slideTitle ? prev : { ...prev, [slideId]: slideTitle }));
+  }, []);
+
+  const trimmedQuery = query.trim().toLowerCase();
+  const filteredSlides = useMemo(() => {
+    if (!trimmedQuery) return visibleSlides;
+    return visibleSlides.filter((id) => {
+      if (id.toLowerCase().includes(trimmedQuery)) return true;
+      const t = titleMap[id]?.toLowerCase();
+      return t ? t.includes(trimmedQuery) : false;
+    });
+  }, [visibleSlides, titleMap, trimmedQuery]);
+  const isSearching = trimmedQuery.length > 0;
 
   return (
-    <div className="flex h-screen overflow-hidden bg-background">
+    <div className="flex h-dvh overflow-hidden bg-background text-foreground">
       <div className="hidden md:block">
         <Sidebar
           folders={manifest.folders}
@@ -88,9 +113,12 @@ export function Home() {
         />
       </div>
 
-      <div className="flex min-w-0 flex-1 flex-col overflow-y-auto">
-        <div className="border-b bg-card/40 px-4 py-3 md:hidden">
-          <div className="mb-2 font-heading text-lg font-bold tracking-tight">open-slide</div>
+      <div className="paper relative flex min-w-0 flex-1 flex-col overflow-y-auto bg-canvas">
+        {/* Mobile chrome */}
+        <div className="flex items-center justify-between border-b border-hairline bg-sidebar px-4 py-3 md:hidden">
+          <h1 className="font-heading text-lg font-bold tracking-tight">open-slide</h1>
+        </div>
+        <div className="border-b border-hairline bg-sidebar px-4 py-2 md:hidden">
           <div className="flex gap-2 overflow-x-auto pb-1">
             <MobileFolderPill
               icon={{ type: 'emoji', value: '📝' }}
@@ -112,20 +140,34 @@ export function Home() {
           </div>
         </div>
 
-        <div className="mx-auto w-full max-w-6xl px-4 py-6 md:px-8 md:py-12">
-          <header className="mb-6 flex items-center gap-3 md:mb-8">
-            <FolderIconChip icon={headerIcon} className="size-6 text-xl" />
-            <h2 className="font-heading text-xl font-bold tracking-tight md:text-2xl">{title}</h2>
-            <span className="text-sm text-muted-foreground">
-              {visibleSlides.length} slide{visibleSlides.length === 1 ? '' : 's'}
-            </span>
+        <div className="mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-12">
+          <header className="mb-8 md:mb-12">
+            <div className="flex flex-wrap items-center gap-3">
+              <FolderIconChip icon={headerIcon} className="size-7 text-2xl" />
+              <h1 className="font-heading text-[32px] font-semibold leading-[1.05] tracking-[-0.025em] md:text-[44px]">
+                {title}
+              </h1>
+              <span className="folio ml-1 self-end pb-2">
+                {(isSearching ? filteredSlides.length : visibleSlides.length)
+                  .toString()
+                  .padStart(2, '0')}
+                {isSearching && (
+                  <span className="opacity-40">/{visibleSlides.length.toString().padStart(2, '0')}</span>
+                )}
+              </span>
+              <div className="ml-auto w-full md:w-auto">
+                <SearchInput value={query} onChange={setQuery} />
+              </div>
+            </div>
           </header>
 
           {visibleSlides.length === 0 ? (
-            <EmptyState isDraft={selectedId === DRAFT_ID} folderName={selectedFolder?.name} />
+            <EmptyState isDraft={isDraft} folderName={selectedFolder?.name} />
+          ) : filteredSlides.length === 0 ? (
+            <NoResultsState query={query} onClear={() => setQuery('')} />
           ) : (
-            <ul className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4 md:grid-cols-[repeat(auto-fill,minmax(280px,1fr))] md:gap-5">
-              {visibleSlides.map((id) => (
+            <ul className="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-x-6 gap-y-9 md:grid-cols-[repeat(auto-fill,minmax(300px,1fr))]">
+              {filteredSlides.map((id) => (
                 <li key={id}>
                   <SlideCard
                     id={id}
@@ -134,6 +176,7 @@ export function Home() {
                     onRename={(name) => renameSlide(id, name)}
                     onMove={(folderId) => assign(id, folderId)}
                     onDelete={() => deleteSlide(id)}
+                    onTitleResolved={reportTitle}
                   />
                 </li>
               ))}
@@ -162,35 +205,93 @@ function MobileFolderPill({
     <button
       type="button"
       onClick={onClick}
-      className={
-        'flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ' +
-        (active
-          ? 'border-primary bg-primary/10 text-primary'
-          : 'border-border bg-background text-muted-foreground hover:text-foreground')
-      }
+      className={cn(
+        'flex shrink-0 items-center gap-1.5 rounded-[5px] border px-2.5 py-1 text-[11.5px] font-medium transition-colors',
+        active
+          ? 'border-foreground/40 bg-foreground text-background'
+          : 'border-border bg-card text-muted-foreground hover:text-foreground',
+      )}
     >
-      <FolderIconChip icon={icon} className="size-4 text-sm" />
+      <FolderIconChip icon={icon} className="size-3.5 text-sm" />
       <span className="truncate max-w-[8rem]">{label}</span>
-      <span className="tabular-nums opacity-70">{count}</span>
+      <span className="folio nums">{count.toString().padStart(2, '0')}</span>
     </button>
   );
 }
 
+function SearchInput({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="relative w-full md:w-[240px]">
+      <Search
+        className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground"
+        aria-hidden
+      />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Search slides"
+        className="h-8 w-full rounded-[6px] border border-border bg-background pl-8 pr-7 text-[12.5px] outline-none placeholder:text-muted-foreground/70 focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30"
+      />
+      {value && (
+        <button
+          type="button"
+          onClick={() => onChange('')}
+          aria-label="Clear search"
+          className="absolute right-1.5 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-[4px] text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <X className="size-3" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+function NoResultsState({ query, onClear }: { query: string; onClear: () => void }) {
+  return (
+    <div className="rounded-[10px] border border-dashed border-border bg-card/60 px-8 py-20">
+      <div className="mx-auto flex max-w-md flex-col items-center text-center">
+        <div className="flex size-12 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground">
+          <Search className="size-5" />
+        </div>
+        <p className="mt-4 font-heading text-[15px] font-semibold tracking-tight">No matches</p>
+        <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+          Nothing matches{' '}
+          <span className="font-medium text-foreground">&ldquo;{query}&rdquo;</span> in this folder.
+        </p>
+        <Button variant="ghost" size="sm" className="mt-4" onClick={onClear}>
+          Clear search
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 function EmptyState({ isDraft, folderName }: { isDraft: boolean; folderName?: string }) {
   return (
-    <Card className="border-dashed">
-      <CardContent className="flex flex-col items-center gap-3 py-16 text-center text-muted-foreground">
-        <FolderPlus className="size-8 opacity-50" />
+    <div className="rounded-[10px] border border-dashed border-border bg-card/60 px-8 py-20">
+      <div className="mx-auto flex max-w-md flex-col items-center text-center">
+        <div className="flex size-12 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground">
+          <FolderPlus className="size-5" />
+        </div>
         {isDraft ? (
           <>
-            <p>No slides yet.</p>
-            <p className="text-sm">
+            <p className="mt-4 font-heading text-[15px] font-semibold tracking-tight">
+              No slides yet
+            </p>
+            <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
               Create{' '}
-              <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
+              <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
                 slides/my-slide/index.tsx
               </code>{' '}
-              with{' '}
-              <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
+              that{' '}
+              <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
                 export default [Page1, Page2]
               </code>
               .
@@ -198,15 +299,62 @@ function EmptyState({ isDraft, folderName }: { isDraft: boolean; folderName?: st
           </>
         ) : (
           <>
-            <p>No slides in {folderName ?? 'this folder'}.</p>
-            <p className="text-sm">Drag a slide from Draft into the sidebar folder.</p>
+            <p className="mt-4 font-heading text-[15px] font-semibold tracking-tight">
+              {folderName ?? 'This folder'} is empty
+            </p>
+            <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+              Drag a slide from Draft into this folder in the sidebar.
+            </p>
           </>
         )}
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 }
 
+function createDragChip(title: string): HTMLElement | null {
+  if (typeof document === 'undefined') return null;
+  const chip = document.createElement('div');
+  chip.style.cssText = [
+    'position: fixed',
+    'top: -9999px',
+    'left: -9999px',
+    'display: inline-flex',
+    'align-items: center',
+    'gap: 8px',
+    'padding: 6px 10px 6px 6px',
+    'border-radius: 6px',
+    'background: var(--card)',
+    'color: var(--foreground)',
+    'border: 1px solid var(--border)',
+    'box-shadow: 0 12px 32px -8px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.08)',
+    'font: 500 12.5px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+    'white-space: nowrap',
+    'pointer-events: none',
+    'z-index: 9999',
+  ].join(';');
+
+  const thumb = document.createElement('span');
+  thumb.style.cssText = [
+    'display: inline-block',
+    'width: 30px',
+    'height: 18px',
+    'border-radius: 3px',
+    'background: var(--muted)',
+    'border: 1px solid var(--border)',
+    'flex: 0 0 auto',
+  ].join(';');
+
+  const label = document.createElement('span');
+  label.textContent = title;
+  label.style.cssText = 'overflow: hidden; text-overflow: ellipsis; max-width: 220px;';
+
+  chip.appendChild(thumb);
+  chip.appendChild(label);
+  document.body.appendChild(chip);
+  return chip;
+}
+
 type DialogKind = null | 'rename' | 'move' | 'delete';
 
 function SlideCard({
@@ -216,6 +364,7 @@ function SlideCard({
   onRename,
   onMove,
   onDelete,
+  onTitleResolved,
 }: {
   id: string;
   folders: Folder[];
@@ -223,6 +372,7 @@ function SlideCard({
   onRename: (name: string) => Promise<void> | void;
   onMove: (folderId: string | null) => Promise<void> | void;
   onDelete: () => Promise<void> | void;
+  onTitleResolved?: (id: string, title: string) => void;
 }) {
   const [slide, setSlide] = useState<SlideModule | null>(null);
   const [dragging, setDragging] = useState(false);
@@ -242,7 +392,10 @@ function SlideCard({
 
   const FirstPage = slide?.default[0];
   const displayTitle = slide?.meta?.title ?? id;
-  const pageCount = slide?.default.length ?? 0;
+
+  useEffect(() => {
+    if (slide && onTitleResolved) onTitleResolved(id, displayTitle);
+  }, [id, slide, displayTitle, onTitleResolved]);
 
   return (
     <>
@@ -252,67 +405,75 @@ function SlideCard({
         onDragStart={(e) => {
           e.dataTransfer.setData(SLIDE_DND_MIME, id);
           e.dataTransfer.effectAllowed = 'move';
+          const chip = createDragChip(displayTitle);
+          if (chip) {
+            e.dataTransfer.setDragImage(chip, 14, 14);
+            setTimeout(() => chip.remove(), 0);
+          }
           setDragging(true);
         }}
         onDragEnd={() => setDragging(false)}
-        className={cn('group relative', dragging && 'opacity-50')}
+        className={cn(
+          'group relative motion-safe:transition-opacity',
+          dragging && 'opacity-40',
+        )}
       >
-        <Link
-          to={`/s/${id}`}
-          className="block overflow-hidden rounded-xl bg-card text-card-foreground ring-1 ring-foreground/10 transition-all duration-200 hover:-translate-y-0.5 hover:ring-foreground/20 hover:shadow-lg"
-        >
-          <div className="relative aspect-video overflow-hidden bg-gradient-to-br from-indigo-50 to-violet-50">
+        <Link to={`/s/${id}`} className="block focus-visible:outline-none">
+          {/* Slide thumb — tight border, grey baseboard, no shadcn rounded-xl */}
+          <div className="relative aspect-video overflow-hidden rounded-[6px] border border-hairline bg-card shadow-edge ring-1 ring-foreground/[0.04] group-hover:shadow-floating group-hover:ring-foreground/20 motion-safe:transition-[box-shadow,--tw-ring-color] motion-safe:duration-200">
             {FirstPage ? (
-              <SlideCanvas flat>
-                <FirstPage />
-              </SlideCanvas>
+              <div className="h-full w-full motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]">
+                <SlideCanvas flat freezeMotion design={slide?.design}>
+                  <FirstPage />
+                </SlideCanvas>
+              </div>
             ) : (
-              <div className="grid h-full w-full place-items-center text-xs tracking-widest uppercase text-muted-foreground/60">
+              <div className="grid h-full w-full place-items-center text-[10px] tracking-[0.16em] uppercase text-muted-foreground/60">
                 Loading
               </div>
             )}
           </div>
-          <div className="flex items-baseline justify-between gap-3 px-4 py-3">
-            <span className="truncate text-sm font-medium">{displayTitle}</span>
-            {pageCount > 0 && (
-              <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-                {pageCount} page{pageCount === 1 ? '' : 's'}
-              </span>
-            )}
+
+          <div className="mt-3">
+            <h3 className="min-w-0 truncate font-heading text-[14px] font-medium tracking-tight">
+              {displayTitle}
+            </h3>
           </div>
         </Link>
 
-        <div className="absolute right-2 top-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                }}
-                className="flex size-7 items-center justify-center rounded-md bg-background/80 text-foreground shadow-sm ring-1 ring-foreground/10 opacity-0 backdrop-blur transition-opacity hover:bg-background group-hover:opacity-100 aria-expanded:opacity-100"
-                aria-label="Slide actions"
-              >
-                <MoreHorizontal className="size-4" />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="min-w-[160px]">
-              <DropdownMenuItem onSelect={() => setDialog('rename')}>
-                <Pencil />
-                Rename
-              </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => setDialog('move')}>
-                <FolderInput />
-                Move to folder
-              </DropdownMenuItem>
-              <DropdownMenuItem variant="destructive" onSelect={() => setDialog('delete')}>
-                <Trash2 />
-                Delete
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+        {import.meta.env.DEV && (
+          <div className="absolute right-2 top-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                  }}
+                  className="flex size-7 items-center justify-center rounded-[5px] bg-card/90 text-foreground shadow-edge ring-1 ring-border opacity-0 backdrop-blur hover:bg-card group-hover:opacity-100 aria-expanded:opacity-100 motion-safe:transition-opacity"
+                  aria-label="Slide actions"
+                >
+                  <MoreHorizontal className="size-3.5" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="min-w-[160px]">
+                <DropdownMenuItem onSelect={() => setDialog('rename')}>
+                  <Pencil />
+                  Rename
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={() => setDialog('move')}>
+                  <FolderInput />
+                  Move to folder…
+                </DropdownMenuItem>
+                <DropdownMenuItem variant="destructive" onSelect={() => setDialog('delete')}>
+                  <Trash2 />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )}
       </div>
 
       <RenameDialog
@@ -392,6 +553,7 @@ function RenameDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
+          <span className="eyebrow">Rename</span>
           <DialogTitle>Rename slide</DialogTitle>
           <DialogDescription>Give this slide a new display name.</DialogDescription>
         </DialogHeader>
@@ -407,10 +569,10 @@ function RenameDialog({
           }}
           maxLength={80}
           placeholder="Slide name"
-          className="h-9 w-full rounded-md border bg-background px-3 text-sm outline-none ring-ring/40 focus:ring-2"
+          className="h-9 w-full rounded-[6px] border border-border bg-background px-3 text-[13px] outline-none focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30"
         />
         <DialogFooter>
-          <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
+          <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button size="sm" disabled={submitting} onClick={submit}>
@@ -464,12 +626,13 @@ function MoveDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
+          <span className="eyebrow">Move</span>
           <DialogTitle>Move slide</DialogTitle>
           <DialogDescription>
             Choose a folder for <span className="font-medium text-foreground">{slideName}</span>.
           </DialogDescription>
         </DialogHeader>
-        <div className="max-h-[320px] overflow-y-auto rounded-md border">
+        <div className="max-h-[320px] overflow-y-auto rounded-[6px] border border-border bg-background">
           <FolderOption
             icon={{ type: 'emoji', value: '📝' }}
             label="Draft"
@@ -487,7 +650,7 @@ function MoveDialog({
           ))}
         </div>
         <DialogFooter>
-          <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
+          <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button size="sm" disabled={submitting || selected === currentFolderId} onClick={submit}>
@@ -515,13 +678,18 @@ function FolderOption({
       type="button"
       onClick={onClick}
       className={cn(
-        'flex w-full items-center gap-2 border-b px-3 py-2 text-left text-sm last:border-b-0 transition-colors',
-        active ? 'bg-primary/10 text-primary' : 'hover:bg-muted/60',
+        'flex w-full items-center gap-2 border-b border-hairline px-3 py-2 text-left text-[13px] transition-colors last:border-b-0',
+        active ? 'bg-muted text-foreground' : 'hover:bg-muted/60',
       )}
     >
       <FolderIconChip icon={icon} />
       <span className="truncate">{label}</span>
-      {active && <span className="ml-auto text-xs tracking-wide opacity-70">Selected</span>}
+      {active && (
+        <span className="ml-auto inline-flex items-center gap-1 text-[10.5px] text-brand">
+          <span className="inline-block size-1 rounded-full bg-brand" aria-hidden />
+          Selected
+        </span>
+      )}
     </button>
   );
 }
@@ -556,6 +724,7 @@ function DeleteDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
+          <span className="eyebrow text-destructive/80">Destructive</span>
           <DialogTitle>Delete slide?</DialogTitle>
           <DialogDescription>
             This permanently removes{' '}
@@ -564,7 +733,7 @@ function DeleteDialog({
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
+          <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button variant="destructive" size="sm" disabled={submitting} onClick={confirm}>