fix: harden IndexedDB open, remove broken in-preview editing (#18)

Author: developeranku

src/app/new/NewDeckGallery.tsx

@@ -69,17 +69,22 @@ export function NewDeckGallery() {
   const router = useRouter();
 
   const create = async (preset: TemplatePreset) => {
-    const deck = await createDeck({
-      source: preset.seed,
-      theme: {
-        styleId: preset.styleId,
-        paletteId: preset.paletteId,
-        density: preset.density,
-        mode: preset.mode,
-      },
-      templateName: preset.id === 'blank' ? undefined : preset.name,
-    });
-    router.push(`/d/${deck.id}/edit`);
+    try {
+      const deck = await createDeck({
+        source: preset.seed,
+        theme: {
+          styleId: preset.styleId,
+          paletteId: preset.paletteId,
+          density: preset.density,
+          mode: preset.mode,
+        },
+        templateName: preset.id === 'blank' ? undefined : preset.name,
+      });
+      router.push(`/d/${deck.id}/edit`);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Could not create deck';
+      window.alert(`Could not create the deck: ${message}`);
+    }
   };
 
   const totalChoices = TEMPLATE_PRESETS.length + 1;

src/app/templates/TemplatesGallery.tsx

@@ -24,17 +24,22 @@ export function TemplatesGallery() {
   const router = useRouter();
 
   const applyTemplate = async (preset: TemplatePreset) => {
-    const deck = await createDeck({
-      source: preset.seed,
-      theme: {
-        styleId: preset.styleId,
-        paletteId: preset.paletteId,
-        density: preset.density,
-        mode: preset.mode,
-      },
-      templateName: preset.name,
-    });
-    router.push(`/d/${deck.id}/edit`);
+    try {
+      const deck = await createDeck({
+        source: preset.seed,
+        theme: {
+          styleId: preset.styleId,
+          paletteId: preset.paletteId,
+          density: preset.density,
+          mode: preset.mode,
+        },
+        templateName: preset.name,
+      });
+      router.push(`/d/${deck.id}/edit`);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Could not create deck';
+      window.alert(`Could not create the deck: ${message}`);
+    }
   };
 
   return (

src/editor/Editor.tsx

@@ -7,7 +7,6 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ParseError, parseDeck } from '@/ir/parse';
 import { planDeck } from '@/ir/plan';
 import { reorderSlide } from '@/ir/source-edit';
-import { replaceHeadingOccurrence, type EditableKind } from '@/ir/text-edit';
 import { lintColors } from '@/render/lint';
 import { resolveTheme } from '@/render/theme-resolver';
 import type { Brand, Deck, Density, Mode, ThemeRef } from '@/ir/schema';
@@ -184,10 +183,6 @@ export function Editor({ deckId }: Props) {
     setSelectedSlide(to);
   }, []);
 
-  const handleHeadingEdit = useCallback((kind: EditableKind, index: number, nextText: string) => {
-    setSource((s) => replaceHeadingOccurrence(s, kind, index, nextText));
-  }, []);
-
   const handleInsert = useCallback((snippet: string) => {
     insertRef.current?.(snippet);
   }, []);
@@ -358,7 +353,6 @@ export function Editor({ deckId }: Props) {
               selectedSlide={selectedSlide}
               onSelectSlide={handleSelectSlide}
               onReorderSlide={handleReorderSlide}
-              onHeadingEdit={handleHeadingEdit}
             />
           ) : (
             <div className="editor__error">
@@ -471,13 +465,11 @@ function PreviewStage({
   selectedSlide,
   onSelectSlide,
   onReorderSlide,
-  onHeadingEdit,
 }: {
   deck: Deck;
   selectedSlide: number;
   onSelectSlide: (i: number) => void;
   onReorderSlide: (from: number, to: number) => void;
-  onHeadingEdit: (kind: EditableKind, index: number, nextText: string) => void;
 }) {
   const total = deck.slides.length;
   const safeIndex = Math.min(Math.max(selectedSlide, 0), Math.max(total - 1, 0));
@@ -502,88 +494,10 @@ function PreviewStage({
     return () => window.removeEventListener('keydown', onKey);
   }, [safeIndex, total, onSelectSlide]);
 
-  const slideRef = useRef<HTMLDivElement>(null);
-
-  const beginEdit = useCallback(
-    (el: HTMLElement) => {
-      const tag = el.tagName.toLowerCase();
-      if (!/^h[1-4]$/.test(tag)) return;
-      // Compute occurrence index across the FULL deck, not just the visible
-      // slide. We render slides individually, so we have to look through deck.
-      const kind = tag as EditableKind;
-      const targetText = el.textContent ?? '';
-      let occurrence = 0;
-      const targetLevel = Number(kind.slice(1));
-      outer: for (let s = 0; s < deck.slides.length; s++) {
-        const blocks = deck.slides[s].blocks;
-        const stack: typeof blocks = [...blocks];
-        while (stack.length > 0) {
-          const b = stack.shift()!;
-          if (b.type === 'heading') {
-            if (b.level === targetLevel) {
-              if (s === safeIndex && b.text === targetText) {
-                break outer;
-              }
-              occurrence++;
-            }
-          } else if (b.type === 'box') {
-            stack.unshift(...b.children);
-          } else if (b.type === 'columns') {
-            stack.unshift(...b.columns.flat());
-          } else if (b.type === 'grid' || b.type === 'cell') {
-            stack.unshift(...b.children);
-          }
-        }
-      }
-      el.contentEditable = 'true';
-      el.classList.add('preview-editable');
-      el.focus();
-      const range = document.createRange();
-      range.selectNodeContents(el);
-      const sel = window.getSelection();
-      sel?.removeAllRanges();
-      sel?.addRange(range);
-
-      const finish = () => {
-        el.removeEventListener('blur', finish);
-        el.removeEventListener('keydown', onKey);
-        el.contentEditable = 'false';
-        el.classList.remove('preview-editable');
-        const next = (el.textContent ?? '').trim();
-        if (next && next !== targetText) onHeadingEdit(kind, occurrence, next);
-      };
-      const onKey = (ke: KeyboardEvent) => {
-        if (ke.key === 'Enter' && !ke.shiftKey) {
-          ke.preventDefault();
-          el.blur();
-        } else if (ke.key === 'Escape') {
-          ke.preventDefault();
-          el.textContent = targetText;
-          el.blur();
-        }
-      };
-      el.addEventListener('blur', finish);
-      el.addEventListener('keydown', onKey);
-    },
-    [deck, safeIndex, onHeadingEdit],
-  );
-
-  const onDoubleClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      const t = e.target as HTMLElement;
-      const heading = t.closest('h1, h2, h3, h4') as HTMLElement | null;
-      if (heading && slideRef.current?.contains(heading)) {
-        e.preventDefault();
-        beginEdit(heading);
-      }
-    },
-    [beginEdit],
-  );
-
   return (
     <div className="stage">
       <div className="stage__viewport">
-        <div className="stage__slide" ref={slideRef} onDoubleClick={onDoubleClick}>
+        <div className="stage__slide">
           <DeckRenderer deck={visibleDeck} />
         </div>
       </div>

src/editor/editor.css

@@ -1425,22 +1425,6 @@
 /* Print
    --------------------------------------------------------------------------*/
 
-/* ─── In-preview editing ──────────────────────────────────────────────── */
-
-.stage__slide h1,
-.stage__slide h2,
-.stage__slide h3,
-.stage__slide h4 {
-  cursor: text;
-}
-
-.preview-editable {
-  outline: 2px solid var(--accent, #6ee7b7);
-  outline-offset: 4px;
-  border-radius: 4px;
-  background: rgba(110, 231, 183, 0.08);
-}
-
 /* ─── Export PDF menu ────────────────────────────────────────────────── */
 
 .export-pdf {

src/ir/text-edit.ts

@@ -34,11 +34,30 @@ export function DeckLibrary() {
   const [query, setQuery] = useState('');
   const [sort, setSort] = useState<SortKey>('recent');
 
+  const [loadError, setLoadError] = useState<string | null>(null);
+
   useEffect(() => {
-    listDecks().then(setDecks);
+    listDecks()
+      .then((d) => {
+        setDecks(d);
+        setLoadError(null);
+      })
+      .catch((err: unknown) => {
+        const message = err instanceof Error ? err.message : 'Could not load decks';
+        setLoadError(message);
+        setDecks([]);
+      });
   }, []);
 
-  const refresh = async () => setDecks(await listDecks());
+  const refresh = async () => {
+    try {
+      setDecks(await listDecks());
+      setLoadError(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Could not load decks';
+      setLoadError(message);
+    }
+  };
 
   const visibleDecks = useMemo(() => {
     if (!decks) return null;
@@ -83,7 +102,11 @@ export function DeckLibrary() {
       />
 
       <PageMain className="library__main">
-        {decks === null ? (
+        {loadError ? (
+          <Mono as="div" className="library__loading" role="alert">
+            {loadError}
+          </Mono>
+        ) : decks === null ? (
           <Mono as="div" className="library__loading">
             Loading decks
           </Mono>

src/library/DeckLibrary.tsx

@@ -12,8 +12,18 @@ let dbPromise: Promise<IDBDatabase> | null = null;
 
 function openDb(): Promise<IDBDatabase> {
   if (dbPromise) return dbPromise;
-  dbPromise = new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_NAME, DB_VERSION);
+  dbPromise = new Promise<IDBDatabase>((resolve, reject) => {
+    if (typeof indexedDB === 'undefined') {
+      reject(new Error('IndexedDB is not available in this environment'));
+      return;
+    }
+    let req: IDBOpenDBRequest;
+    try {
+      req = indexedDB.open(DB_NAME, DB_VERSION);
+    } catch (err) {
+      reject(err as Error);
+      return;
+    }
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains(STORE_DECKS)) {
@@ -31,8 +41,23 @@ function openDb(): Promise<IDBDatabase> {
         store.createIndex('createdAt', 'createdAt');
       }
     };
-    req.onsuccess = () => resolve(req.result);
-    req.onerror = () => reject(req.error);
+    req.onsuccess = () => {
+      const db = req.result;
+      // Let other tabs upgrade us out by closing our connection on demand.
+      db.onversionchange = () => db.close();
+      resolve(db);
+    };
+    req.onerror = () => reject(req.error ?? new Error('IndexedDB open failed'));
+    req.onblocked = () =>
+      reject(
+        new Error(
+          'IndexedDB upgrade blocked by another open tab. Close other tabs of this app and reload.',
+        ),
+      );
+  });
+  // Don't poison future calls if this one rejects.
+  dbPromise.catch(() => {
+    dbPromise = null;
   });
   return dbPromise;
 }