@open-slide/core 1.2.0 → 1.4.0

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/export-pdf.ts

@@ -65,6 +65,12 @@ const PRINT_STYLES = `
 }
 `;
 
+export function isSafari(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent;
+  return /Safari/.test(ua) && !/Chrome|Chromium|Edg|OPR|Firefox/.test(ua);
+}
+
 export type PdfExportProgress = {
   phase: 'processing' | 'printing' | 'done';
   /** Number of pages whose intro animations have finished (0..total). */

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

@@ -1,8 +1,16 @@
 import { useCallback } from 'react';
 
 export type EditOp =
-  | { kind: 'set-style'; key: string; value: string | null }
+  | { kind: 'set-style'; key: string; value: string | null; prevText?: string }
   | { kind: 'set-text'; value: string; prevText?: string }
+  | {
+      kind: 'set-text-range-style';
+      start: number;
+      end: number;
+      key: string;
+      value: string | null;
+      prevText?: string;
+    }
   | { kind: 'set-attr-asset'; attr: string; assetPath: string; previewUrl: string }
   | { kind: 'replace-placeholder-with-image'; assetPath: 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,8 +1,24 @@
-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);
 }
+
+export function slideChangeIncludes(data: unknown, slideId: string): boolean {
+  if (!data || typeof data !== 'object') return false;
+  const payload = data as { slideId?: unknown; slideIds?: unknown };
+  if (payload.slideId === slideId) return true;
+  return Array.isArray(payload.slideIds) && payload.slideIds.includes(slideId);
+}

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/lib/use-slide-module.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { SlideModule } from './sdk';
+import { loadSlide, slideChangeIncludes } from './slides';
+
+export function useSlideModule(slideId: string) {
+  const [slide, setSlide] = useState<SlideModule | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const loadSeqRef = useRef(0);
+
+  const reload = useCallback(
+    (reset: boolean) => {
+      const seq = ++loadSeqRef.current;
+      if (reset) setSlide(null);
+      setError(null);
+      loadSlide(slideId)
+        .then((mod) => {
+          if (seq === loadSeqRef.current) setSlide(mod);
+        })
+        .catch((e) => {
+          if (seq === loadSeqRef.current) setError(String(e?.message ?? e));
+        });
+    },
+    [slideId],
+  );
+
+  useEffect(() => {
+    reload(true);
+  }, [reload]);
+
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    let cancelled = false;
+    const handler = (data: unknown) => {
+      if (slideChangeIncludes(data, slideId)) {
+        queueMicrotask(() => {
+          if (!cancelled) reload(false);
+        });
+      }
+    };
+    import.meta.hot.on('open-slide:slide-changed', handler);
+    return () => {
+      cancelled = true;
+      import.meta.hot?.off('open-slide:slide-changed', handler);
+    };
+  }, [slideId, reload]);
+
+  return { slide, error, reload };
+}

package/src/app/routes/assets.tsx

@@ -0,0 +1,9 @@
+import { AssetView } from '../components/asset-view';
+
+export function AssetsPage() {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <AssetView slideId={null} />
+    </div>
+  );
+}

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

@@ -0,0 +1,194 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import { useAssets } from '@/lib/assets';
+import { useFolders } from '@/lib/folders';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+import { MobileFolderPill } from '../components/sidebar/mobile-pill';
+import { ASSETS_ID, 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;
+  if (pathname === '/assets') return ASSETS_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 === ASSETS_ID) navigate('/assets', { replace: true });
+      else if (id === DRAFT_ID) navigate('/', { replace: true });
+      else navigate(`/?f=${encodeURIComponent(id)}`, { replace: true });
+    },
+    [navigate],
+  );
+
+  const { assets: globalAssets } = useAssets('@global');
+  const isAssetsRoute = location.pathname === '/assets';
+
+  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}
+          assetsCount={globalAssets.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)}
+            />
+            <MobileFolderPill
+              icon={{ type: 'emoji', value: '🗂️' }}
+              label={t.home.assets}
+              count={globalAssets.length}
+              active={selectedId === ASSETS_ID}
+              onClick={() => selectFolder(ASSETS_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={cn(
+            isAssetsRoute
+              ? 'flex min-h-0 flex-1 flex-col'
+              : 'mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-12',
+          )}
+        >
+          <Outlet context={ctx} />
+        </div>
+      </div>
+    </div>
+  );
+}