@open-slide/core 1.1.0 → 1.3.0

package/src/app/components/ui/context-menu.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
+}
+
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'flex cursor-default items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12.5px] outline-hidden select-none focus:bg-foreground focus:text-background data-[inset]:pl-8 data-[state=open]:bg-muted',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-3.5 opacity-60" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        'z-50 min-w-[9rem] overflow-hidden rounded-[8px] border border-border bg-popover p-1 text-popover-foreground shadow-floating',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          'z-50 max-h-(--radix-context-menu-content-available-height) min-w-[9rem] origin-(--radix-context-menu-content-transform-origin)',
+          'overflow-x-hidden overflow-y-auto rounded-[8px] border border-border bg-popover p-1 text-popover-foreground shadow-floating',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        'relative flex cursor-default items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12.5px] outline-hidden select-none transition-colors',
+        'focus:bg-foreground focus:text-background',
+        'data-[active=true]:bg-muted data-[active=true]:text-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[inset]:pl-8',
+        'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive data-[variant=destructive]:focus:text-white',
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-current [&_svg]:opacity-80",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        'relative flex cursor-default items-center gap-2 rounded-[5px] py-1.5 pr-2 pl-8 text-[12.5px] outline-hidden select-none focus:bg-foreground focus:text-background data-[disabled]:pointer-events-none data-[disabled]:opacity-45',
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-3.5" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        'relative flex cursor-default items-center gap-2 rounded-[5px] py-1.5 pr-2 pl-8 text-[12.5px] outline-hidden select-none focus:bg-foreground focus:text-background data-[disabled]:pointer-events-none data-[disabled]:opacity-45',
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn('eyebrow px-2 py-1.5 data-[inset]:pl-8', className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('-mx-1 my-1 h-px bg-hairline', className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        'ml-auto font-mono text-[10.5px] tracking-[0.06em] text-muted-foreground/80',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

package/src/app/lib/assets.ts

@@ -10,14 +10,14 @@ export type AssetEntry = {
 
 export type UploadOptions = { overwrite?: boolean };
 
-async function listAssets(slideId: string): Promise<AssetEntry[]> {
+export async function listAssets(slideId: string): Promise<AssetEntry[]> {
   const res = await fetch(`/__assets/${slideId}`);
   if (!res.ok) throw new Error(`GET /__assets/${slideId} ${res.status}`);
   const data = (await res.json()) as { assets?: AssetEntry[] };
   return data.assets ?? [];
 }
 
-async function uploadAsset(
+export async function uploadAsset(
   slideId: string,
   file: File,
   opts: UploadOptions = {},
@@ -45,6 +45,59 @@ async function deleteAsset(slideId: string, name: string): Promise<Response> {
   return fetch(`/__assets/${slideId}/${encodeURIComponent(name)}`, { method: 'DELETE' });
 }
 
+export async function uploadWithAutoRename(
+  slideId: string,
+  file: File,
+): Promise<{ ok: boolean; status: number; entry: AssetEntry | null }> {
+  // Vite's default `assetsInclude` matches asset extensions case-sensitively,
+  // so `<img src="./assets/foo.JPG" />` (which the placeholder edit rewrites
+  // into a real `import`) fails to parse. Lowercase the extension so the
+  // import path is always one Vite recognizes.
+  let uploaded = lowercaseExtension(file);
+  let res = await uploadAsset(slideId, uploaded);
+  if (res.status === 409) {
+    const list = await listAssets(slideId);
+    const taken = new Set(list.map((a) => a.name));
+    uploaded = renamedCopy(uploaded, taken);
+    res = await uploadAsset(slideId, uploaded);
+  }
+  if (!res.ok) return { ok: false, status: res.status, entry: null };
+  const body = (await res.json().catch(() => null)) as Partial<AssetEntry> | null;
+  const entry: AssetEntry = {
+    name: body?.name ?? uploaded.name,
+    size: body?.size ?? uploaded.size,
+    mtime: body?.mtime ?? Date.now(),
+    mime: body?.mime ?? uploaded.type ?? 'application/octet-stream',
+    url: body?.url ?? `/__assets/${slideId}/${encodeURIComponent(uploaded.name)}`,
+  };
+  return { ok: true, status: res.status, entry };
+}
+
+function lowercaseExtension(file: File): File {
+  const dot = file.name.lastIndexOf('.');
+  if (dot <= 0) return file;
+  const ext = file.name.slice(dot);
+  const lower = ext.toLowerCase();
+  if (ext === lower) return file;
+  return new File([file], file.name.slice(0, dot) + lower, {
+    type: file.type,
+    lastModified: file.lastModified,
+  });
+}
+
+export function renamedCopy(file: File, taken: Set<string>): File {
+  const dot = file.name.lastIndexOf('.');
+  const stem = dot > 0 ? file.name.slice(0, dot) : file.name;
+  const ext = dot > 0 ? file.name.slice(dot) : '';
+  let i = 1;
+  let next = `${stem}-${i}${ext}`;
+  while (taken.has(next)) {
+    i += 1;
+    next = `${stem}-${i}${ext}`;
+  }
+  return new File([file], next, { type: file.type, lastModified: file.lastModified });
+}
+
 export type SvglItem = {
   id: number;
   title: string;

package/src/app/lib/inspector/use-notes.ts

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export type NoteSaveStatus =
+  | { kind: 'idle' }
+  | { kind: 'saving' }
+  | { kind: 'saved' }
+  | { kind: 'error'; message: string };
+
+const DEBOUNCE_MS = 600;
+
+type Target = { slideId: string; index: number };
+
+// HMR is suppressed for our writes, so the cached slide module's `notes`
+// stays stale across navigation. Cache last-saved text per target so
+// switching slides and back doesn't surface the old value.
+const sessionCache = new Map<string, string>();
+const cacheKey = (slideId: string, index: number) => `${slideId}:${index}`;
+
+// Remap the per-target cache after a reorder. `order[i]` is the original
+// page index that lands at new position `i`, matching the contract used by
+// the `/__slides/:id/reorder` endpoint.
+export function remapNotesSessionCacheAfterReorder(slideId: string, order: number[]): void {
+  const prev = new Map<number, string>();
+  for (let i = 0; i < order.length; i++) {
+    const cached = sessionCache.get(cacheKey(slideId, i));
+    if (cached !== undefined) prev.set(i, cached);
+    sessionCache.delete(cacheKey(slideId, i));
+  }
+  for (let newIdx = 0; newIdx < order.length; newIdx++) {
+    const oldIdx = order[newIdx];
+    const text = prev.get(oldIdx);
+    if (text !== undefined) sessionCache.set(cacheKey(slideId, newIdx), text);
+  }
+}
+
+export function useNotes(slideId: string, index: number, initial: string | undefined) {
+  const initialText = sessionCache.get(cacheKey(slideId, index)) ?? initial ?? '';
+  const [value, setValueState] = useState(initialText);
+  const [status, setStatus] = useState<NoteSaveStatus>({ kind: 'idle' });
+
+  const lastSavedRef = useRef(initialText);
+  const dirtyRef = useRef(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const inflightRef = useRef<AbortController | null>(null);
+  const targetRef = useRef<Target>({ slideId, index });
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const cancelTimer = useCallback(() => {
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const persist = useCallback(async (target: Target, text: string) => {
+    inflightRef.current?.abort();
+    const ctl = new AbortController();
+    inflightRef.current = ctl;
+    setStatus({ kind: 'saving' });
+    try {
+      const res = await fetch('/__notes', {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ slideId: target.slideId, index: target.index, text }),
+        signal: ctl.signal,
+      });
+      const body = (await res.json().catch(() => ({}))) as { error?: string };
+      if (!res.ok) throw new Error(body.error ?? `PUT /__notes → ${res.status}`);
+      sessionCache.set(cacheKey(target.slideId, target.index), text);
+      if (inflightRef.current !== ctl) return;
+      lastSavedRef.current = text;
+      dirtyRef.current = false;
+      setStatus({ kind: 'saved' });
+    } catch (err) {
+      if ((err as { name?: string }).name === 'AbortError') return;
+      setStatus({ kind: 'error', message: String((err as Error).message ?? err) });
+    } finally {
+      if (inflightRef.current === ctl) inflightRef.current = null;
+    }
+  }, []);
+
+  const flush = useCallback(async () => {
+    cancelTimer();
+    if (!dirtyRef.current) return;
+    const target = targetRef.current;
+    await persist(target, valueRef.current);
+  }, [cancelTimer, persist]);
+
+  // When the (slideId, index) target changes, flush pending edits for the
+  // previous target before adopting the new initial text.
+  useEffect(() => {
+    const prev = targetRef.current;
+    const targetChanged = prev.slideId !== slideId || prev.index !== index;
+    if (targetChanged && dirtyRef.current) {
+      cancelTimer();
+      const pending = valueRef.current;
+      if (lastSavedRef.current !== pending) void persist(prev, pending);
+    }
+    targetRef.current = { slideId, index };
+    cancelTimer();
+    setValueState(initialText);
+    lastSavedRef.current = initialText;
+    dirtyRef.current = false;
+    setStatus({ kind: 'idle' });
+  }, [slideId, index, initialText, persist, cancelTimer]);
+
+  useEffect(() => {
+    return () => {
+      cancelTimer();
+      inflightRef.current?.abort();
+    };
+  }, [cancelTimer]);
+
+  const setValue = useCallback(
+    (next: string) => {
+      setValueState(next);
+      dirtyRef.current = next !== lastSavedRef.current;
+      cancelTimer();
+      if (!dirtyRef.current) {
+        setStatus({ kind: 'idle' });
+        return;
+      }
+      const target = targetRef.current;
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        void persist(target, next);
+      }, DEBOUNCE_MS);
+    },
+    [persist, cancelTimer],
+  );
+
+  return { value, setValue, status, flush };
+}

package/src/app/lib/sdk.ts

@@ -5,6 +5,7 @@ export type Page = ComponentType;
 
 export type SlideMeta = {
   title?: string;
+  theme?: string;
 };
 
 export type SlideModule = {

package/src/app/lib/slides.ts

@@ -1,7 +1,16 @@
-import { slideIds as ids, loadSlide as load } from 'virtual:open-slide/slides';
+import {
+  slideIds as ids,
+  loadSlide as load,
+  slideThemes as themes,
+} from 'virtual:open-slide/slides';
 import type { SlideModule } from './sdk';
 
 export const slideIds: string[] = ids;
+export const slideThemes: Record<string, string> = themes;
+
+export function slidesByTheme(themeId: string): string[] {
+  return slideIds.filter((id) => slideThemes[id] === themeId);
+}
 
 export async function loadSlide(id: string): Promise<SlideModule> {
   return load(id);

package/src/app/lib/themes.ts

@@ -0,0 +1,22 @@
+import { loadThemeDemo as load, themes as raw } from 'virtual:open-slide/themes';
+import type { DesignSystem } from './design';
+import type { Page } from './sdk';
+
+export type Theme = {
+  id: string;
+  name: string;
+  description: string;
+  body: string;
+  hasDemo: boolean;
+};
+
+export type ThemeDemoModule = {
+  default: Page[];
+  design?: DesignSystem;
+};
+
+export const themes: Theme[] = raw;
+
+export async function loadThemeDemo(id: string): Promise<ThemeDemoModule> {
+  return load(id);
+}

package/src/app/lib/use-agent-socket.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export function useAgentSocketConnected() {
+  const [connected, setConnected] = useState(true);
+  useEffect(() => {
+    const hot = import.meta.hot;
+    if (!hot) return;
+    const onConnect = () => setConnected(true);
+    const onDisconnect = () => setConnected(false);
+    hot.on('vite:ws:connect', onConnect);
+    hot.on('vite:ws:disconnect', onDisconnect);
+    return () => {
+      hot.off('vite:ws:connect', onConnect);
+      hot.off('vite:ws:disconnect', onDisconnect);
+    };
+  }, []);
+  return connected;
+}

package/src/app/routes/home-shell.tsx

@@ -0,0 +1,173 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import { useFolders } from '@/lib/folders';
+import { format, useLocale } from '@/lib/use-locale';
+import { MobileFolderPill } from '../components/sidebar/mobile-pill';
+import { DRAFT_ID, Sidebar, THEMES_ID } from '../components/sidebar/sidebar';
+import type { FoldersManifest } from '../lib/sdk';
+import { slideIds } from '../lib/slides';
+import { themes as themeRegistry } from '../lib/themes';
+
+export type HomeOutletContext = {
+  manifest: FoldersManifest;
+  loading: boolean;
+  draftSlides: string[];
+  slidesByFolder: Record<string, string[]>;
+  /** Selected folder id when on `/`; equals DRAFT_ID, a folder id, or THEMES_ID. */
+  selectedId: string;
+  reportTitle: (slideId: string, title: string) => void;
+  titleMap: Record<string, string>;
+  assign: (slideId: string, folderId: string | null) => Promise<void>;
+  renameSlide: (slideId: string, name: string) => Promise<void>;
+  deleteSlide: (slideId: string) => Promise<void>;
+};
+
+function pathToSelectedId(pathname: string, search: URLSearchParams): string {
+  if (pathname === '/themes' || pathname.startsWith('/themes/')) return THEMES_ID;
+  return search.get('f') ?? DRAFT_ID;
+}
+
+export function HomeShell() {
+  const { manifest, loading, create, update, remove, assign, renameSlide, deleteSlide } =
+    useFolders();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const t = useLocale();
+
+  const selectedId = pathToSelectedId(location.pathname, searchParams);
+
+  const [titleMap, setTitleMap] = useState<Record<string, string>>({});
+  const reportTitle = useCallback((slideId: string, slideTitle: string) => {
+    setTitleMap((prev) =>
+      prev[slideId] === slideTitle ? prev : { ...prev, [slideId]: slideTitle },
+    );
+  }, []);
+
+  const selectFolder = useCallback(
+    (id: string) => {
+      if (id === THEMES_ID) navigate('/themes', { replace: true });
+      else if (id === DRAFT_ID) navigate('/', { replace: true });
+      else navigate(`/?f=${encodeURIComponent(id)}`, { replace: true });
+    },
+    [navigate],
+  );
+
+  const { draftSlides, slidesByFolder } = useMemo(() => {
+    const byFolder: Record<string, string[]> = {};
+    const draft: string[] = [];
+    const known = new Set(manifest.folders.map((f) => f.id));
+    for (const id of slideIds) {
+      const folderId = manifest.assignments[id];
+      if (folderId && known.has(folderId)) {
+        byFolder[folderId] ??= [];
+        byFolder[folderId].push(id);
+      } else {
+        draft.push(id);
+      }
+    }
+    return { draftSlides: draft, slidesByFolder: byFolder };
+  }, [manifest]);
+
+  const countFor = (folderId: string | null) =>
+    folderId === null ? draftSlides.length : (slidesByFolder[folderId]?.length ?? 0);
+
+  const moveSlideWithToast = useCallback(
+    async (slideId: string, folderId: string | null) => {
+      if (manifest.assignments[slideId] === (folderId ?? undefined)) return;
+      const slideName = titleMap[slideId] ?? slideId;
+      const folderName =
+        folderId === null
+          ? t.home.draft
+          : (manifest.folders.find((f) => f.id === folderId)?.name ?? folderId);
+      try {
+        await assign(slideId, folderId);
+        toast.success(format(t.home.toastSlideMoved, { slide: slideName, folder: folderName }));
+      } catch {
+        toast.error(t.home.toastSlideMoveFailed);
+      }
+    },
+    [assign, manifest, titleMap, t],
+  );
+
+  const ctx: HomeOutletContext = {
+    manifest,
+    loading,
+    draftSlides,
+    slidesByFolder,
+    selectedId,
+    reportTitle,
+    titleMap,
+    assign,
+    renameSlide,
+    deleteSlide,
+  };
+
+  return (
+    <div className="flex h-dvh overflow-hidden bg-background text-foreground">
+      <div className="hidden md:block">
+        <Sidebar
+          folders={manifest.folders}
+          countFor={countFor}
+          themesCount={themeRegistry.length}
+          selectedId={selectedId}
+          onSelect={selectFolder}
+          onCreate={(name, icon) => create(name, icon)}
+          onRename={(id, name) => update(id, { name })}
+          onChangeIcon={(id, icon) => update(id, { icon })}
+          onDelete={async (id) => {
+            const name = manifest.folders.find((f) => f.id === id)?.name ?? id;
+            if (selectedId === id) selectFolder(DRAFT_ID);
+            try {
+              await remove(id);
+              toast.success(format(t.home.toastFolderDeleted, { name }));
+            } catch {
+              toast.error(t.home.toastFolderDeleteFailed);
+            }
+          }}
+          onDropToFolder={(folderId, slideId) => moveSlideWithToast(slideId, folderId)}
+          onDropToDraft={(slideId) => moveSlideWithToast(slideId, null)}
+        />
+      </div>
+
+      <div className="paper relative flex min-w-0 flex-1 flex-col overflow-y-auto bg-canvas">
+        <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">{t.home.appTitle}</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: '📝' }}
+              label={t.home.draft}
+              count={countFor(null)}
+              active={selectedId === DRAFT_ID}
+              onClick={() => selectFolder(DRAFT_ID)}
+            />
+            <MobileFolderPill
+              icon={{ type: 'emoji', value: '🎨' }}
+              label={t.home.themes}
+              count={themeRegistry.length}
+              active={selectedId === THEMES_ID}
+              onClick={() => selectFolder(THEMES_ID)}
+            />
+            {manifest.folders.map((f) => (
+              <MobileFolderPill
+                key={f.id}
+                icon={f.icon}
+                label={f.name}
+                count={countFor(f.id)}
+                active={selectedId === f.id}
+                onClick={() => selectFolder(f.id)}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-12">
+          <Outlet context={ctx} />
+        </div>
+      </div>
+    </div>
+  );
+}