@open-slide/core 1.2.0 → 1.3.0

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

@@ -9,10 +9,12 @@ import { FolderIconChip, FolderItem } from './folder-item';
 import { IconPicker, PRESET_COLORS } from './icon-picker';
 
 export const DRAFT_ID = 'draft';
+export const THEMES_ID = '__themes__';
 
 export function Sidebar({
   folders,
   countFor,
+  themesCount,
   selectedId,
   onSelect,
   onCreate,
@@ -24,6 +26,7 @@ export function Sidebar({
 }: {
   folders: Folder[];
   countFor: (folderId: string | null) => number;
+  themesCount: number;
   selectedId: string;
   onSelect: (id: string) => void;
   onCreate: (name: string, icon: FolderIcon) => Promise<Folder> | undefined;
@@ -111,6 +114,13 @@ export function Sidebar({
           onSelect={() => onSelect(DRAFT_ID)}
           onDropSlide={onDropToDraft}
         />
+        <FolderItem
+          row={{ kind: 'themes' }}
+          count={themesCount}
+          selected={selectedId === THEMES_ID}
+          onSelect={() => onSelect(THEMES_ID)}
+          onDropSlide={() => {}}
+        />
       </div>
 
       <div className="mt-5 flex items-center gap-2 px-4 pb-1.5">

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

@@ -0,0 +1,300 @@
+import { ChevronDown, ChevronLeft, ChevronRight } 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 { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+import type { SlideModule } from '../../lib/sdk';
+import { loadSlide, slidesByTheme } from '../../lib/slides';
+import { loadThemeDemo, type ThemeDemoModule, themes } from '../../lib/themes';
+import { SlideCanvas } from '../slide-canvas';
+
+export function ThemeDetail({ themeId, onBack }: { themeId: string; onBack: () => void }) {
+  const t = useLocale();
+  const theme = useMemo(() => themes.find((th) => th.id === themeId), [themeId]);
+  const [demo, setDemo] = useState<ThemeDemoModule | null>(null);
+  const [pageIndex, setPageIndex] = useState(0);
+
+  useEffect(() => {
+    setPageIndex(0);
+    setDemo(null);
+    if (!theme?.hasDemo) return;
+    let cancelled = false;
+    loadThemeDemo(theme.id)
+      .then((mod) => {
+        if (!cancelled) setDemo(mod);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [theme]);
+
+  const pages = demo?.default ?? [];
+  const totalPages = pages.length;
+  const usedBySlideIds = useMemo(() => (theme ? slidesByTheme(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]);
+
+  useEffect(() => {
+    if (totalPages <= 1) return;
+    const onKey = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement | null)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+        setPageIndex((i) => Math.min(totalPages - 1, i + 1));
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+        setPageIndex((i) => Math.max(0, i - 1));
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [totalPages]);
+
+  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>
+    );
+  }
+
+  const Current = pages[pageIndex];
+
+  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 />
+              ) : !demo ? (
+                <div className="grid h-full w-full place-items-center text-[11px] tracking-[0.16em] uppercase text-muted-foreground/60">
+                  {t.common.loading}
+                </div>
+              ) : Current ? (
+                <SlideCanvas flat freezeMotion design={demo.design}>
+                  <Current />
+                </SlideCanvas>
+              ) : null}
+            </div>
+
+            {totalPages > 1 ? (
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  aria-label={t.themes.prevPageAria}
+                  disabled={pageIndex === 0}
+                  onClick={() => setPageIndex((i) => Math.max(0, i - 1))}
+                  className="flex size-8 items-center justify-center rounded-[6px] border border-border bg-card text-foreground transition-colors hover:bg-muted disabled:opacity-40"
+                >
+                  <ChevronLeft className="size-4" />
+                </button>
+                <span className="folio">
+                  {format(t.themes.pageOf, { n: pageIndex + 1, total: totalPages })}
+                </span>
+                <button
+                  type="button"
+                  aria-label={t.themes.nextPageAria}
+                  disabled={pageIndex === totalPages - 1}
+                  onClick={() => setPageIndex((i) => Math.min(totalPages - 1, i + 1))}
+                  className="flex size-8 items-center justify-center rounded-[6px] border border-border bg-card text-foreground transition-colors hover:bg-muted disabled:opacity-40"
+                >
+                  <ChevronRight className="size-4" />
+                </button>
+              </div>
+            ) : null}
+          </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>
+            {usedBySlideIds.length > 0 ? (
+              <span className="folio">{usedBySlideIds.length.toString().padStart(2, '0')}</span>
+            ) : null}
+          </div>
+          {usedBySlideIds.length === 0 ? (
+            <p className="text-[12.5px] leading-relaxed text-muted-foreground">
+              {t.themes.usedByEmpty}
+            </p>
+          ) : (
+            <ul className="flex flex-col gap-5">
+              {usedBySlideIds.map((id) => (
+                <li key={id}>
+                  <ThemeSlideCard id={id} />
+                </li>
+              ))}
+            </ul>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function ThemeSlideCard({ id }: { id: string }) {
+  const t = useLocale();
+  const [slide, setSlide] = useState<SlideModule | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadSlide(id)
+      .then((mod) => {
+        if (!cancelled) setSlide(mod);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [id]);
+
+  const FirstPage = slide?.default[0];
+  const displayTitle = slide?.meta?.title ?? id;
+
+  return (
+    <Link to={`/s/${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">
+        {FirstPage ? (
+          <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-[10px] tracking-[0.16em] uppercase text-muted-foreground/60">
+            {t.common.loading}
+          </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,146 @@
+import { useEffect, useState } from 'react';
+import { format, useLocale } from '@/lib/use-locale';
+import { loadThemeDemo, type Theme, type ThemeDemoModule, themes } from '../../lib/themes';
+import { SlideCanvas } from '../slide-canvas';
+
+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 }) {
+  const t = useLocale();
+  const demo = useThemeDemo(theme);
+
+  if (!theme.hasDemo) {
+    return <NoDemoState />;
+  }
+  if (!demo) {
+    return (
+      <div className="grid h-full w-full place-items-center text-[10px] tracking-[0.16em] uppercase text-muted-foreground/60">
+        {t.common.loading}
+      </div>
+    );
+  }
+  const FirstPage = demo.default[0];
+  if (!FirstPage) return <NoDemoState />;
+
+  return (
+    <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={demo.design}>
+        <FirstPage />
+      </SlideCanvas>
+    </div>
+  );
+}
+
+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>
+  );
+}
+
+function useThemeDemo(theme: Theme): ThemeDemoModule | null {
+  const [demo, setDemo] = useState<ThemeDemoModule | null>(null);
+  useEffect(() => {
+    if (!theme.hasDemo) {
+      setDemo(null);
+      return;
+    }
+    let cancelled = false;
+    loadThemeDemo(theme.id)
+      .then((mod) => {
+        if (!cancelled) setDemo(mod);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [theme.id, theme.hasDemo]);
+  return demo;
+}

package/src/app/components/thumbnail-rail.tsx

@@ -47,9 +47,13 @@ type Props = {
   onReorder?: (from: number, to: number) => void;
   actions?: ThumbnailActions;
   orientation?: Orientation;
+  /** Vertical-only: total rail width in px. Thumbnails scale to fit. */
+  width?: number;
 };
 
-const VERTICAL_THUMB_WIDTH = 184;
+const DEFAULT_VERTICAL_THUMB_WIDTH = 184;
+const VERTICAL_RAIL_CHROME = 80;
+const MIN_VERTICAL_THUMB_WIDTH = 120;
 const HORIZONTAL_THUMB_HEIGHT = 64;
 
 export function ThumbnailRail({
@@ -60,6 +64,7 @@ export function ThumbnailRail({
   onReorder,
   actions,
   orientation = 'vertical',
+  width,
 }: Props) {
   const activeRef = useRef<HTMLButtonElement | null>(null);
   const t = useLocale();
@@ -105,7 +110,7 @@ export function ThumbnailRail({
                   </span>
                   <div
                     className={cn(
-                      'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
+                      'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-[border-color,box-shadow]',
                       active
                         ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
                         : 'border-hairline group-hover/thumb:border-foreground/25',
@@ -138,7 +143,11 @@ export function ThumbnailRail({
     );
   }
 
-  const scale = VERTICAL_THUMB_WIDTH / CANVAS_WIDTH;
+  const thumbWidth =
+    width != null
+      ? Math.max(MIN_VERTICAL_THUMB_WIDTH, width - VERTICAL_RAIL_CHROME)
+      : DEFAULT_VERTICAL_THUMB_WIDTH;
+  const scale = thumbWidth / CANVAS_WIDTH;
   const height = CANVAS_HEIGHT * scale;
 
   const renderThumb = (PageComp: Page, i: number) => {
@@ -150,6 +159,7 @@ export function ThumbnailRail({
         page={PageComp}
         design={design}
         scale={scale}
+        thumbWidth={thumbWidth}
         height={height}
       />
     );
@@ -230,6 +240,7 @@ function ThumbContents({
   page: PageComp,
   design,
   scale,
+  thumbWidth,
   height,
 }: {
   index: number;
@@ -237,6 +248,7 @@ function ThumbContents({
   page: Page;
   design?: DesignSystem;
   scale: number;
+  thumbWidth: number;
   height: number;
 }) {
   return (
@@ -251,12 +263,12 @@ function ThumbContents({
       </span>
       <div
         className={cn(
-          'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
+          'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-[border-color,box-shadow]',
           active
             ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
             : 'border-hairline group-hover/thumb:border-foreground/25',
         )}
-        style={{ width: VERTICAL_THUMB_WIDTH, height }}
+        style={{ width: thumbWidth, height }}
       >
         <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
           <PageComp />

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/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);
+}