@autono/open-pages 0.1.0

package/src/app/components/sidebar/sidebar.tsx

@@ -0,0 +1,302 @@
+import { Plus } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { LanguageToggle } from '@/components/language-toggle';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { Folder, FolderIcon } from '@/lib/sdk';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+import { CommandMenuTrigger } from '../command/command-menu';
+import { FolderIconChip, FolderItem } from './folder-item';
+import { IconPicker, PRESET_COLORS } from './icon-picker';
+import { SidebarFooter } from './sidebar-footer';
+
+export const ALL_DOCS_ID = '__all__';
+export const DRAFT_ID = 'draft';
+export const THEMES_ID = '__themes__';
+export const ASSETS_ID = '__assets__';
+
+export const FOLDER_DND_MIME = 'application/x-folder-id';
+
+export function Sidebar({
+  folders,
+  countFor,
+  allCount,
+  themesCount,
+  assetsCount,
+  selectedId,
+  onSelect,
+  onCreate,
+  onRename,
+  onChangeIcon,
+  onDelete,
+  onDropToFolder,
+  onDropToDraft,
+  onReorder,
+  onOpenCommandMenu,
+}: {
+  folders: Folder[];
+  countFor: (folderId: string | null) => number;
+  allCount: number;
+  themesCount: number;
+  assetsCount: number;
+  selectedId: string;
+  onSelect: (id: string) => void;
+  onCreate: (name: string, icon: FolderIcon) => Promise<Folder> | undefined;
+  onRename: (id: string, name: string) => void;
+  onChangeIcon: (id: string, icon: FolderIcon) => void;
+  onDelete: (id: string) => void;
+  onDropToFolder: (folderId: string, pageId: string) => void;
+  onDropToDraft: (pageId: string) => void;
+  onReorder: (ids: string[]) => void;
+  onOpenCommandMenu: () => void;
+}) {
+  const [dragId, setDragId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<{ id: string; before: boolean } | null>(null);
+
+  const finishReorder = (toId: string, before: boolean) => {
+    const fromId = dragId;
+    setDragId(null);
+    setDropTarget(null);
+    if (!fromId || fromId === toId) return;
+    const ids = folders.map((f) => f.id);
+    if (!ids.includes(fromId) || !ids.includes(toId)) return;
+    const next = ids.filter((id) => id !== fromId);
+    next.splice(next.indexOf(toId) + (before ? 0 : 1), 0, fromId);
+    if (next.every((id, i) => id === ids[i])) return;
+    onReorder(next);
+  };
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newIcon, setNewIcon] = useState<FolderIcon>(() => ({
+    type: 'color',
+    value: PRESET_COLORS[0],
+  }));
+  const [iconOpen, setIconOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const t = useLocale();
+
+  const startCreating = () => {
+    const color = PRESET_COLORS[folders.length % PRESET_COLORS.length];
+    setNewIcon({ type: 'color', value: color });
+    setNewName('');
+    setCreating(true);
+  };
+
+  useEffect(() => {
+    if (creating) inputRef.current?.focus();
+  }, [creating]);
+
+  const stateRef = useRef({ name: newName, icon: newIcon, iconOpen });
+  stateRef.current = { name: newName, icon: newIcon, iconOpen };
+
+  const exitCreate = () => {
+    setCreating(false);
+    setNewName('');
+    setIconOpen(false);
+  };
+
+  const commitCreate = async () => {
+    const trimmed = stateRef.current.name.trim();
+    const icon = stateRef.current.icon;
+    if (!trimmed) {
+      exitCreate();
+      return;
+    }
+    exitCreate();
+    try {
+      const folder = await onCreate(trimmed, icon);
+      toast.success(format(t.home.toastFolderCreated, { name: folder?.name ?? trimmed }));
+    } catch {
+      toast.error(t.home.toastFolderCreateFailed);
+    }
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: commitCreate reads latest state via stateRef
+  useEffect(() => {
+    if (!creating) return;
+    const onDown = (e: MouseEvent) => {
+      if (stateRef.current.iconOpen) return;
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+      if (target.closest('[data-folder-create]')) return;
+      if (target.closest('[data-slot="popover-content"]')) return;
+      commitCreate();
+    };
+    document.addEventListener('mousedown', onDown);
+    return () => document.removeEventListener('mousedown', onDown);
+  }, [creating]);
+
+  return (
+    <aside className="relative flex h-full w-[16.5rem] shrink-0 flex-col border-r border-hairline bg-sidebar text-sidebar-foreground">
+      <div className="flex items-center justify-between px-4 pt-5 pb-4">
+        <h1 className="font-heading text-lg font-bold tracking-tight">{t.home.appTitle}</h1>
+        <div className="-mr-1.5 flex items-center">
+          <CommandMenuTrigger onClick={onOpenCommandMenu} />
+          <LanguageToggle />
+          <ThemeToggle />
+        </div>
+      </div>
+
+      <div className="px-2">
+        <FolderItem
+          row={{ kind: 'all' }}
+          count={allCount}
+          selected={selectedId === ALL_DOCS_ID}
+          onSelect={() => onSelect(ALL_DOCS_ID)}
+          onDropDoc={() => {}}
+        />
+        <FolderItem
+          row={{ kind: 'themes' }}
+          count={themesCount}
+          selected={selectedId === THEMES_ID}
+          onSelect={() => onSelect(THEMES_ID)}
+          onDropDoc={() => {}}
+        />
+        {import.meta.env.DEV && (
+          <FolderItem
+            row={{ kind: 'assets' }}
+            count={assetsCount}
+            selected={selectedId === ASSETS_ID}
+            onSelect={() => onSelect(ASSETS_ID)}
+            onDropDoc={() => {}}
+          />
+        )}
+      </div>
+
+      <div className="mt-5 flex items-center gap-2 px-4 pb-1.5">
+        <span className="eyebrow">{t.home.folders}</span>
+        <span className="h-px flex-1 bg-hairline" aria-hidden />
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-2 pb-2">
+        <FolderItem
+          row={{ kind: 'draft' }}
+          count={countFor(null)}
+          selected={selectedId === DRAFT_ID}
+          onSelect={() => onSelect(DRAFT_ID)}
+          onDropDoc={onDropToDraft}
+        />
+        {folders.map((folder) => {
+          const isDropTarget = dropTarget?.id === folder.id;
+          const before = isDropTarget && dropTarget.before;
+          const after = isDropTarget && !dropTarget.before;
+          return (
+            // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop handle wraps the row
+            <div
+              key={folder.id}
+              className={cn(
+                'relative',
+                before &&
+                  'before:absolute before:inset-x-2 before:-top-px before:h-[2px] before:rounded-full before:bg-brand',
+                after &&
+                  'after:absolute after:inset-x-2 after:-bottom-px after:h-[2px] after:rounded-full after:bg-brand',
+                dragId === folder.id && 'opacity-50',
+              )}
+              draggable={import.meta.env.DEV}
+              onDragStart={(e) => {
+                if (!import.meta.env.DEV) return;
+                e.dataTransfer.setData(FOLDER_DND_MIME, folder.id);
+                e.dataTransfer.effectAllowed = 'move';
+                setDragId(folder.id);
+              }}
+              onDragEnd={() => {
+                setDragId(null);
+                setDropTarget(null);
+              }}
+              onDragOver={(e) => {
+                if (!e.dataTransfer.types.includes(FOLDER_DND_MIME)) return;
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+                const rect = e.currentTarget.getBoundingClientRect();
+                const isBefore = e.clientY < rect.top + rect.height / 2;
+                if (!dropTarget || dropTarget.id !== folder.id || dropTarget.before !== isBefore) {
+                  setDropTarget({ id: folder.id, before: isBefore });
+                }
+              }}
+              onDragLeave={(e) => {
+                if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
+                if (dropTarget?.id === folder.id) setDropTarget(null);
+              }}
+              onDrop={(e) => {
+                const fromId = e.dataTransfer.getData(FOLDER_DND_MIME);
+                if (!fromId) return;
+                e.preventDefault();
+                e.stopPropagation();
+                const rect = e.currentTarget.getBoundingClientRect();
+                const isBefore = e.clientY < rect.top + rect.height / 2;
+                finishReorder(folder.id, isBefore);
+              }}
+            >
+              <FolderItem
+                row={{
+                  kind: 'folder',
+                  folder,
+                  onRename: (name) => onRename(folder.id, name),
+                  onChangeIcon: (icon) => onChangeIcon(folder.id, icon),
+                  onDelete: () => onDelete(folder.id),
+                }}
+                count={countFor(folder.id)}
+                selected={selectedId === folder.id}
+                onSelect={() => onSelect(folder.id)}
+                onDropDoc={(pageId) => onDropToFolder(folder.id, pageId)}
+              />
+            </div>
+          );
+        })}
+
+        {import.meta.env.DEV &&
+          (creating ? (
+            <div
+              data-folder-create
+              className="mt-1 flex items-center gap-2.5 rounded-[5px] border border-dashed border-foreground/30 bg-card px-2 py-[5px]"
+            >
+              <Popover open={iconOpen} onOpenChange={setIconOpen}>
+                <PopoverTrigger
+                  render={
+                    <button
+                      type="button"
+                      className="flex size-5 shrink-0 items-center justify-center rounded transition-transform hover:scale-110"
+                      aria-label={t.home.pickIcon}
+                    >
+                      <FolderIconChip icon={newIcon} />
+                    </button>
+                  }
+                />
+                <PopoverContent side="right" align="start" className="w-auto p-2">
+                  <IconPicker value={newIcon} onChange={setNewIcon} />
+                </PopoverContent>
+              </Popover>
+              <input
+                ref={inputRef}
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.nativeEvent.isComposing) return;
+                  if (e.key === 'Enter') commitCreate();
+                  if (e.key === 'Escape') exitCreate();
+                }}
+                placeholder={t.home.folderName}
+                maxLength={40}
+                className="min-w-0 flex-1 bg-transparent text-[12.5px] outline-none placeholder:text-muted-foreground/60"
+              />
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={startCreating}
+              className="mt-1 flex w-full items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
+            >
+              <Plus className="size-3.5" />
+              <span>{t.home.newFolder}</span>
+            </button>
+          ))}
+      </div>
+
+      <div className="border-t border-hairline">
+        <SidebarFooter />
+      </div>
+    </aside>
+  );
+}

package/src/app/components/theme-toggle.tsx

@@ -0,0 +1,66 @@
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import { IconTooltip } from '@/components/icon-tooltip';
+import { buttonVariants } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { TooltipTrigger } from '@/components/ui/tooltip';
+import { useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const t = useLocale();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <DropdownMenu>
+      <IconTooltip label={t.themeToggle.title}>
+        <DropdownMenuTrigger
+          render={
+            <TooltipTrigger
+              type="button"
+              aria-label={t.themeToggle.toggleAria}
+              className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), 'relative')}
+            />
+          }
+        >
+          <Sun className="size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+        </DropdownMenuTrigger>
+      </IconTooltip>
+      <DropdownMenuContent align="end" className="min-w-[140px]">
+        <DropdownMenuItem
+          onClick={() => setTheme('light')}
+          data-active={mounted && theme === 'light'}
+        >
+          <Sun />
+          {t.themeToggle.light}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme('dark')}
+          data-active={mounted && theme === 'dark'}
+        >
+          <Moon />
+          {t.themeToggle.dark}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme('system')}
+          data-active={mounted && theme === 'system'}
+        >
+          <Monitor />
+          {t.themeToggle.system}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/app/components/themes/theme-detail.tsx

@@ -0,0 +1,226 @@
+import { ChevronDown, ChevronLeft } from 'lucide-react';
+import { Fragment, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+import { frameUrl } from '../../lib/frame';
+import { PageThumb } from '../../lib/page-thumb';
+import { loadPage, pageKinds, pagesByTheme } from '../../lib/pages';
+import type { PageModule } from '../../lib/sdk';
+import { themes } from '../../lib/themes';
+
+export function ThemeDetail({ themeId, onBack }: { themeId: string; onBack: () => void }) {
+  const t = useLocale();
+  const theme = useMemo(() => themes.find((th) => th.id === themeId), [themeId]);
+  const usedByDocIds = useMemo(() => (theme ? pagesByTheme(theme.id) : []), [theme]);
+
+  const promptRef = useRef<HTMLPreElement>(null);
+  const [promptExpanded, setPromptExpanded] = useState(false);
+  const [promptOverflows, setPromptOverflows] = useState(false);
+
+  const themeBody = theme?.body;
+  useEffect(() => {
+    setPromptExpanded(false);
+    const el = promptRef.current;
+    if (!el || !themeBody) return;
+    setPromptOverflows(el.scrollHeight > PROMPT_COLLAPSED_PX + 8);
+  }, [themeBody]);
+
+  if (!theme) {
+    return (
+      <div className="px-8 py-12">
+        <Button variant="ghost" size="sm" onClick={onBack}>
+          <ChevronLeft className="size-4" />
+          {t.themes.backToGallery}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6 md:gap-8">
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="sm" onClick={onBack} className="-ml-2">
+          <ChevronLeft className="size-4" />
+          {t.themes.backToGallery}
+        </Button>
+      </div>
+
+      <header className="flex flex-wrap items-baseline gap-3">
+        <h2 className="font-heading text-[26px] font-semibold leading-[1.05] tracking-[-0.025em] md:text-[32px]">
+          {theme.name}
+        </h2>
+        {theme.description ? (
+          <p className="basis-full text-[13px] leading-relaxed text-muted-foreground">
+            {theme.description}
+          </p>
+        ) : null}
+      </header>
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] lg:gap-8">
+        <div className="flex min-w-0 flex-col gap-6">
+          <div className="flex flex-col gap-3">
+            <div className="relative aspect-video overflow-hidden rounded-[8px] border border-hairline bg-card shadow-edge ring-1 ring-foreground/[0.04]">
+              {!theme.hasDemo ? (
+                <NoDemoLargeState />
+              ) : (
+                <iframe
+                  title={theme.name}
+                  src={frameUrl({ themeId: theme.id })}
+                  className="h-full w-full border-0 bg-white"
+                />
+              )}
+            </div>
+          </div>
+
+          <div className="relative">
+            <pre
+              ref={promptRef}
+              style={
+                promptOverflows && !promptExpanded ? { maxHeight: PROMPT_COLLAPSED_PX } : undefined
+              }
+              className={cn(
+                'w-full rounded-[8px] border border-hairline bg-card p-4 font-mono text-[11.5px] leading-relaxed text-foreground/90',
+                promptOverflows && !promptExpanded ? 'overflow-hidden' : 'overflow-auto',
+              )}
+            >
+              {renderBodyWithSwatches(theme.body)}
+            </pre>
+            {promptOverflows && !promptExpanded ? (
+              <button
+                type="button"
+                aria-label={t.themes.expandPromptAria}
+                onClick={() => setPromptExpanded(true)}
+                className="absolute inset-x-0 bottom-0 flex h-24 items-end justify-center rounded-b-[8px] bg-gradient-to-t from-card via-card/85 to-transparent pb-3 text-muted-foreground transition-colors hover:text-foreground"
+              >
+                <ChevronDown className="size-4" />
+              </button>
+            ) : null}
+            {promptOverflows && promptExpanded ? (
+              <div className="mt-2 flex justify-center">
+                <button
+                  type="button"
+                  aria-label={t.themes.collapsePromptAria}
+                  onClick={() => setPromptExpanded(false)}
+                  className="flex size-8 items-center justify-center text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <ChevronDown className="size-4 rotate-180" />
+                </button>
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        <aside className="flex min-w-0 flex-col gap-4">
+          <div className="flex flex-wrap items-baseline gap-3">
+            <span className="eyebrow">{t.themes.usedBy}</span>
+            {usedByDocIds.length > 0 ? (
+              <span className="folio">{usedByDocIds.length.toString().padStart(2, '0')}</span>
+            ) : null}
+          </div>
+          {usedByDocIds.length === 0 ? (
+            <p className="text-[12.5px] leading-relaxed text-muted-foreground">
+              {t.themes.usedByEmpty}
+            </p>
+          ) : (
+            <ul className="flex flex-col gap-5">
+              {usedByDocIds.map((id) => (
+                <li key={id}>
+                  <ThemeDocCard id={id} />
+                </li>
+              ))}
+            </ul>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function ThemeDocCard({ id }: { id: string }) {
+  const [page, setPage] = useState<PageModule | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadPage(id)
+      .then((mod) => {
+        if (!cancelled) setPage(mod);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [id]);
+
+  const displayTitle = page?.meta?.title ?? id;
+
+  return (
+    <Link to={`/p/${id}`} className="group block focus-visible:outline-none">
+      <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">
+        <div className="h-full w-full motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]">
+          <PageThumb source={{ pageId: id, kind: pageKinds[id] }} title={displayTitle} />
+        </div>
+      </div>
+      <div className="mt-2.5">
+        <h3 className="min-w-0 truncate font-heading text-[13px] font-medium tracking-tight">
+          {displayTitle}
+        </h3>
+        <p className="mt-0.5 truncate font-mono text-[10.5px] text-muted-foreground/80">{id}</p>
+      </div>
+    </Link>
+  );
+}
+
+const PROMPT_COLLAPSED_PX = 320;
+
+const HEX_RE = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})\b/g;
+
+function renderBodyWithSwatches(body: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null = HEX_RE.exec(body);
+  let key = 0;
+  while (match !== null) {
+    if (match.index > lastIndex) {
+      out.push(<Fragment key={`t${key}`}>{body.slice(lastIndex, match.index)}</Fragment>);
+    }
+    const hex = match[0];
+    out.push(
+      <span
+        key={`s${key}`}
+        aria-hidden
+        className="mr-[0.25em] -translate-y-[0.1em] inline-block size-[0.85em] rounded-[2px] align-middle ring-1 ring-foreground/15"
+        style={{ background: hex }}
+      />,
+    );
+    out.push(<Fragment key={`h${key}`}>{hex}</Fragment>);
+    lastIndex = match.index + hex.length;
+    key += 1;
+    match = HEX_RE.exec(body);
+  }
+  if (lastIndex < body.length) {
+    out.push(<Fragment key={`t${key}`}>{body.slice(lastIndex)}</Fragment>);
+  }
+  return out;
+}
+
+function NoDemoLargeState() {
+  const t = useLocale();
+  return (
+    <div className="grid h-full w-full place-items-center bg-muted/40 px-8 text-center">
+      <div className="max-w-sm">
+        <p className="font-heading text-[15px] font-semibold tracking-tight">
+          {t.themes.noDemoYet}
+        </p>
+        <p className="mt-1.5 text-[12.5px] leading-relaxed text-muted-foreground">
+          {t.themes.noDemoHintPrefix}
+          <code className="rounded-[4px] bg-card px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
+            /create-theme
+          </code>
+          {t.themes.noDemoHintSuffix}
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/app/components/themes/themes-gallery.tsx

@@ -0,0 +1,104 @@
+import { format, useLocale } from '@/lib/use-locale';
+import { PageThumb } from '../../lib/page-thumb';
+import { type Theme, themes } from '../../lib/themes';
+
+export function ThemesGallery({ onOpen }: { onOpen: (id: string) => void }) {
+  const t = useLocale();
+
+  if (themes.length === 0) {
+    return <ThemesEmptyState />;
+  }
+
+  return (
+    <ul className="grid grid-cols-[repeat(auto-fill,minmax(min(240px,100%),1fr))] gap-x-6 gap-y-9 md:grid-cols-[repeat(auto-fill,minmax(340px,1fr))]">
+      {themes.map((theme) => (
+        <li key={theme.id}>
+          <ThemeCard
+            theme={theme}
+            onOpen={() => onOpen(theme.id)}
+            ariaLabel={format(t.themes.openThemeAria, { name: theme.name })}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function ThemeCard({
+  theme,
+  onOpen,
+  ariaLabel,
+}: {
+  theme: Theme;
+  onOpen: () => void;
+  ariaLabel: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      aria-label={ariaLabel}
+      className="group block w-full text-left focus-visible:outline-none"
+    >
+      <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">
+        <ThemePreview theme={theme} />
+      </div>
+      <div className="mt-3">
+        <h3 className="min-w-0 truncate font-heading text-[14px] font-medium tracking-tight">
+          {theme.name}
+        </h3>
+      </div>
+      {theme.description ? (
+        <p className="mt-1 line-clamp-2 text-[12px] leading-snug text-muted-foreground">
+          {theme.description}
+        </p>
+      ) : null}
+    </button>
+  );
+}
+
+function ThemePreview({ theme }: { theme: Theme }) {
+  if (!theme.hasDemo) return <NoDemoState />;
+  return <PageThumb source={{ themeId: theme.id }} title={theme.name} />;
+}
+
+function NoDemoState() {
+  const t = useLocale();
+  return (
+    <div className="grid h-full w-full place-items-center bg-muted/40 px-6 text-center">
+      <div>
+        <p className="font-heading text-[12px] font-semibold tracking-tight text-foreground/80">
+          {t.themes.noDemoYet}
+        </p>
+        <p className="mt-1 text-[10.5px] leading-snug text-muted-foreground">
+          {t.themes.noDemoHintPrefix}
+          <code className="rounded-[3px] bg-card px-1 py-0.5 font-mono text-[10px] text-foreground">
+            /create-theme
+          </code>
+          {t.themes.noDemoHintSuffix}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function ThemesEmptyState() {
+  const t = useLocale();
+  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="text-2xl">🎨</div>
+        <p className="mt-3 font-heading text-[15px] font-semibold tracking-tight">
+          {t.themes.noThemesTitle}
+        </p>
+        <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+          {t.themes.noThemesHintPrefix}
+          <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
+            /create-theme
+          </code>
+          {t.themes.noThemesHintSuffix}
+        </p>
+      </div>
+    </div>
+  );
+}