@bendyline/docblocks-react 0.1.0 → 1.1.0

package/dist/DocBlocksShell/DocBlocksShell.js

@@ -9,8 +9,8 @@ import { useState, useCallback, useEffect, useRef } from 'react';
 import { EditorShell } from '@bendyline/squisq-editor-react';
 import '@bendyline/squisq-editor-react/styles';
 import { MediaContext } from '@bendyline/squisq-react';
-import { createMediaProviderFromContainer } from '@bendyline/squisq/storage';
-import { IndexedDBFileSystemProvider, IndexedDBContentContainer, openNativeFolder, restoreNativeFolder, removeDirectoryHandle, } from '@bendyline/docblocks/filesystem';
+import { IndexedDBFileSystemProvider, ElectronFileSystemProvider, FileSystemContentContainer, createFileMediaProvider, openNativeFolder, restoreNativeFolder, removeDirectoryHandle, } from '@bendyline/docblocks/filesystem';
+import { isElectronHost, getDocblocksHost } from '@bendyline/docblocks/host';
 import { ensureDefaultWorkspace, getWorkspace, listWorkspaces, removeWorkspace, saveWorkspace, touchWorkspace, } from '@bendyline/docblocks/workspace';
 import { AppMenu } from '../AppMenu/AppMenu.js';
 import { FileExplorer } from '../FileExplorer/FileExplorer.js';
@@ -50,6 +50,56 @@ function parseHash() {
         filePath: '/' + decodeURIComponent(raw.slice(slashIdx + 1)),
     };
 }
+const LAST_STATE_KEY = 'docblocks:lastState';
+function saveLastState(state) {
+    try {
+        localStorage.setItem(LAST_STATE_KEY, JSON.stringify(state));
+    }
+    catch {
+        // ignore quota errors
+    }
+}
+function loadLastState() {
+    try {
+        const raw = localStorage.getItem(LAST_STATE_KEY);
+        if (!raw)
+            return null;
+        return JSON.parse(raw);
+    }
+    catch {
+        return null;
+    }
+}
+const THEME_PREF_KEY = 'docblocks:themePreference';
+function loadThemePreference() {
+    try {
+        const raw = localStorage.getItem(THEME_PREF_KEY);
+        if (raw === 'light' || raw === 'dark' || raw === 'auto')
+            return raw;
+    }
+    catch {
+        // ignore
+    }
+    return 'auto';
+}
+function saveThemePreference(pref) {
+    try {
+        localStorage.setItem(THEME_PREF_KEY, pref);
+    }
+    catch {
+        // ignore quota errors
+    }
+}
+function dirnameOf(p) {
+    const clean = p.replace(/^\/+/, '');
+    const idx = clean.lastIndexOf('/');
+    return idx === -1 ? '' : clean.slice(0, idx);
+}
+function basenameOf(p) {
+    const clean = p.replace(/^\/+/, '');
+    const idx = clean.lastIndexOf('/');
+    return idx === -1 ? clean : clean.slice(idx + 1);
+}
 function useIsMobile(breakpoint = 768) {
     const [isMobile, setIsMobile] = useState(() => typeof window !== 'undefined' && window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
     useEffect(() => {
@@ -60,9 +110,22 @@ function useIsMobile(breakpoint = 768) {
     }, [breakpoint]);
     return isMobile;
 }
-export function DocBlocksShell({ theme = 'auto', logoUrl }) {
+function FolderGlyph() {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M3 7a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7z" }) }));
+}
+function FileGlyph() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M6 3h8l5 5v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" }), _jsx("path", { d: "M14 3v5h5" })] }));
+}
+export function DocBlocksShell({ theme: _themeProp = 'auto', logoUrl }) {
     const osTheme = useOsTheme();
-    const resolvedTheme = theme === 'auto' ? osTheme : theme;
+    const [themePreference, setThemePreference] = useState(loadThemePreference);
+    // "System default" (auto) always follows the OS — the host's theme prop
+    // is kept only for API back-compat and does not override OS detection.
+    const resolvedTheme = themePreference === 'light' || themePreference === 'dark' ? themePreference : osTheme;
+    const handleThemeChange = useCallback((pref) => {
+        setThemePreference(pref);
+        saveThemePreference(pref);
+    }, []);
     const isMobile = useIsMobile();
     const [mobileShowEditor, setMobileShowEditor] = useState(false);
     const [provider, setProvider] = useState(null);
@@ -76,15 +139,14 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
     const [initialView, setInitialView] = useState('wysiwyg');
     /** Suppress popstate handling during programmatic navigation. */
     const skipPopState = useRef(false);
-    /** Persistent media container backed by IndexedDB (survives page refresh). */
+    /**
+     * Per-file media container: for `notes.md`, images live in
+     * `notes_files/` next to the markdown. Created lazily on first write,
+     * picked up automatically if it already exists. Set up by the effect
+     * below whenever the selected file (or backing provider) changes.
+     */
     const mediaContainerRef = useRef(null);
     const [mediaProvider, setMediaProvider] = useState(null);
-    /** Set up persistent media container for a workspace. */
-    const setupMediaContainer = useCallback((workspaceId) => {
-        const mc = new IndexedDBContentContainer(workspaceId);
-        mediaContainerRef.current = mc;
-        setMediaProvider(createMediaProviderFromContainer(mc));
-    }, []);
     /** Push a new history entry with the given hash. */
     const pushHash = useCallback((wsId, filePath) => {
         const hash = buildHash(wsId, filePath);
@@ -93,17 +155,28 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
             window.history.pushState(null, '', hash);
         }
     }, []);
-    /** Open a workspace (and optionally a file) from identifiers. */
-    const openFromIds = useCallback(async (wsId, filePath, push) => {
+    /** Open a workspace (and optionally a file) from identifiers.
+     *  Returns the FileSystemProvider on success, or null on failure. */
+    const openFromIds = useCallback(async (wsId, filePath, push, view) => {
         const workspaces = await listWorkspaces();
         const ws = workspaces.find((w) => w.id === wsId);
         if (!ws)
-            return false;
+            return null;
         let fsProvider = null;
-        if (ws.type === 'native') {
+        if (ws.type === 'electron-native') {
+            if (!ws.rootPath)
+                return null;
+            await getDocblocksHost().workspaces.register({
+                id: ws.id,
+                name: ws.name,
+                rootPath: ws.rootPath,
+            });
+            fsProvider = new ElectronFileSystemProvider(ws.id, ws.name, ws.rootPath);
+        }
+        else if (ws.type === 'native') {
             const restored = await restoreNativeFolder(ws.id);
             if (!restored)
-                return false;
+                return null;
             fsProvider = restored;
         }
         else {
@@ -112,7 +185,6 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
         await touchWorkspace(ws.id);
         setProvider(fsProvider);
         setActiveWorkspaceId(ws.id);
-        setupMediaContainer(ws.id);
         if (filePath) {
             const content = await fsProvider.readFile(filePath);
             if (content !== null) {
@@ -120,8 +192,10 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
                 setSelectedFolder(null);
                 setFolderEntries([]);
                 setEditorContent(content);
-                setInitialView('wysiwyg');
+                const effectiveView = view ?? 'wysiwyg';
+                setInitialView(effectiveView);
                 setEditorKey((k) => k + 1);
+                saveLastState({ workspaceId: wsId, filePath, view: effectiveView });
             }
             else {
                 setSelectedFile(null);
@@ -141,22 +215,24 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
         if (push) {
             pushHash(ws.id, filePath);
         }
-        return true;
-    }, [pushHash, setupMediaContainer]);
+        return fsProvider;
+    }, [pushHash]);
     const seedWelcomeFile = useCallback(async (fs) => {
         const entries = await fs.readDirectory('/');
         // If the only file is the welcome doc, auto-select it
         if (entries.length === 1 &&
             entries[0].kind === 'file' &&
-            entries[0].path === '/aboutDocblocks.md') {
-            const content = await fs.readFile('/aboutDocblocks.md');
+            entries[0].path.replace(/^\//, '') === 'aboutDocblocks.md') {
+            const aboutPath = entries[0].path;
+            const content = await fs.readFile(aboutPath);
             if (content !== null) {
-                setSelectedFile('/aboutDocblocks.md');
+                setSelectedFile(aboutPath);
                 setEditorContent(content);
                 setInitialView('preview');
                 setEditorKey((k) => k + 1);
                 setExplorerKey((k) => k + 1);
-                pushHash(fs.id, '/aboutDocblocks.md');
+                pushHash(fs.id, aboutPath);
+                saveLastState({ workspaceId: fs.id, filePath: aboutPath, view: 'preview' });
             }
             return;
         }
@@ -193,6 +269,7 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
         setEditorKey((k) => k + 1);
         setExplorerKey((k) => k + 1);
         pushHash(fs.id, welcomePath);
+        saveLastState({ workspaceId: fs.id, filePath: welcomePath, view: 'preview' });
     }, [pushHash]);
     // Initialise workspace on mount — restore from hash or last-used
     useEffect(() => {
@@ -200,23 +277,55 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
             // Try restoring from URL hash first
             const hashState = parseHash();
             if (hashState) {
-                const ok = await openFromIds(hashState.workspaceId, hashState.filePath, false);
-                if (ok)
+                const restoredProvider = await openFromIds(hashState.workspaceId, hashState.filePath, false);
+                if (restoredProvider) {
+                    // If the hash had no file, check whether we should auto-select the welcome doc
+                    if (!hashState.filePath) {
+                        await seedWelcomeFile(restoredProvider);
+                    }
+                    return;
+                }
+            }
+            // Try restoring last viewed document from localStorage
+            const lastState = loadLastState();
+            if (lastState) {
+                const restoredProvider = await openFromIds(lastState.workspaceId, lastState.filePath, true, lastState.view);
+                if (restoredProvider)
                     return;
             }
             let fsProvider = null;
+            const electron = isElectronHost();
             const workspaces = await listWorkspaces();
+            // On desktop, hide web-only workspaces (indexeddb/native) — only
+            // folder-based workspaces are valid.
+            const candidates = electron
+                ? workspaces.filter((w) => w.type === 'electron-native')
+                : workspaces.filter((w) => w.type !== 'electron-native');
             // Pick the most recently opened workspace
-            const sorted = [...workspaces].sort((a, b) => (b.lastOpened ?? '').localeCompare(a.lastOpened ?? ''));
+            const sorted = [...candidates].sort((a, b) => (b.lastOpened ?? '').localeCompare(a.lastOpened ?? ''));
             for (const ws of sorted) {
-                if (ws.type === 'native') {
+                if (ws.type === 'electron-native') {
+                    if (!ws.rootPath)
+                        continue;
+                    await getDocblocksHost().workspaces.register({
+                        id: ws.id,
+                        name: ws.name,
+                        rootPath: ws.rootPath,
+                    });
+                    const p = new ElectronFileSystemProvider(ws.id, ws.name, ws.rootPath);
+                    await touchWorkspace(ws.id);
+                    fsProvider = p;
+                    setProvider(p);
+                    setActiveWorkspaceId(ws.id);
+                    break;
+                }
+                else if (ws.type === 'native') {
                     const restored = await restoreNativeFolder(ws.id);
                     if (restored) {
                         await touchWorkspace(ws.id);
                         fsProvider = restored;
                         setProvider(restored);
                         setActiveWorkspaceId(ws.id);
-                        setupMediaContainer(ws.id);
                         break;
                     }
                 }
@@ -226,25 +335,42 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
                     fsProvider = p;
                     setProvider(p);
                     setActiveWorkspaceId(ws.id);
-                    setupMediaContainer(ws.id);
                     break;
                 }
             }
             if (!fsProvider) {
-                // No workspaces yet — create default
-                const defaultWs = await ensureDefaultWorkspace();
-                const p = new IndexedDBFileSystemProvider(defaultWs.id, defaultWs.name);
-                fsProvider = p;
-                setProvider(p);
-                setActiveWorkspaceId(defaultWs.id);
-                setupMediaContainer(defaultWs.id);
+                if (electron) {
+                    // Desktop: ask the host for the default folder workspace
+                    // (creates ~/Documents/DocBlocks on first launch).
+                    const info = await getDocblocksHost().workspaces.getDefault();
+                    const descriptor = {
+                        id: info.id,
+                        name: info.name,
+                        type: 'electron-native',
+                        rootPath: info.rootPath,
+                        lastOpened: new Date().toISOString(),
+                    };
+                    await saveWorkspace(descriptor);
+                    const p = new ElectronFileSystemProvider(info.id, info.name, info.rootPath);
+                    fsProvider = p;
+                    setProvider(p);
+                    setActiveWorkspaceId(info.id);
+                }
+                else {
+                    // Web: create the IndexedDB default workspace
+                    const defaultWs = await ensureDefaultWorkspace();
+                    const p = new IndexedDBFileSystemProvider(defaultWs.id, defaultWs.name);
+                    fsProvider = p;
+                    setProvider(p);
+                    setActiveWorkspaceId(defaultWs.id);
+                }
             }
             // Set initial hash
             pushHash(fsProvider.id, null);
             // Seed welcome file if workspace is empty
             await seedWelcomeFile(fsProvider);
         })();
-    }, [openFromIds, pushHash, seedWelcomeFile, setupMediaContainer]);
+    }, [openFromIds, pushHash, seedWelcomeFile]);
     // Handle browser back/forward
     useEffect(() => {
         const onPopState = () => {
@@ -260,23 +386,86 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
         window.addEventListener('popstate', onPopState);
         return () => window.removeEventListener('popstate', onPopState);
     }, [openFromIds]);
+    // Track view mode changes (Editor/Raw/Play tabs) and persist to localStorage
+    useEffect(() => {
+        const handler = (e) => {
+            const target = e.target.closest?.('[data-view]');
+            if (target) {
+                const view = target.getAttribute('data-view');
+                if (view && activeWorkspaceId && selectedFile) {
+                    saveLastState({ workspaceId: activeWorkspaceId, filePath: selectedFile, view });
+                }
+            }
+        };
+        window.addEventListener('click', handler, true);
+        return () => window.removeEventListener('click', handler, true);
+    }, [activeWorkspaceId, selectedFile]);
     // Auto-save current file
     useAutoSave(provider, selectedFile, editorContent);
+    // Per-file media: for `notes.md` images live in `notes_files/` beside it.
+    // Rebuilds whenever the provider or selected file changes.
+    useEffect(() => {
+        if (!provider || !selectedFile) {
+            mediaContainerRef.current = null;
+            setMediaProvider(null);
+            return;
+        }
+        const parentDir = dirnameOf(selectedFile);
+        const base = basenameOf(selectedFile);
+        const container = new FileSystemContentContainer(provider, parentDir);
+        const mp = createFileMediaProvider(container, base);
+        mediaContainerRef.current = container;
+        setMediaProvider(mp);
+        return () => {
+            mp.dispose();
+        };
+    }, [provider, selectedFile]);
+    // React to external file changes watched by the Electron host (chokidar).
+    useEffect(() => {
+        if (!isElectronHost())
+            return;
+        if (!provider || !(provider instanceof ElectronFileSystemProvider))
+            return;
+        const unwatch = provider.watch(() => {
+            setExplorerKey((k) => k + 1);
+            // If the open file's contents changed on disk, reload it (best-effort).
+            if (selectedFile) {
+                (async () => {
+                    const content = await provider.readFile(selectedFile);
+                    if (content !== null && content !== editorContent) {
+                        setEditorContent(content);
+                        setEditorKey((k) => k + 1);
+                    }
+                })();
+            }
+        });
+        return unwatch;
+    }, [provider, selectedFile, editorContent]);
     const handleWorkspaceSelect = useCallback(async (ws) => {
         await touchWorkspace(ws.id);
-        if (ws.type === 'native') {
+        let nextProvider = null;
+        if (ws.type === 'electron-native') {
+            if (!ws.rootPath)
+                return;
+            await getDocblocksHost().workspaces.register({
+                id: ws.id,
+                name: ws.name,
+                rootPath: ws.rootPath,
+            });
+            nextProvider = new ElectronFileSystemProvider(ws.id, ws.name, ws.rootPath);
+        }
+        else if (ws.type === 'native') {
             const restored = await restoreNativeFolder(ws.id);
-            if (restored) {
-                setProvider(restored);
-            }
-            else {
+            if (!restored) {
                 // Permission denied or handle lost — fall through without changing provider
                 return;
             }
+            nextProvider = restored;
         }
         else {
-            setProvider(new IndexedDBFileSystemProvider(ws.id, ws.name));
+            nextProvider = new IndexedDBFileSystemProvider(ws.id, ws.name);
         }
+        setProvider(nextProvider);
         setActiveWorkspaceId(ws.id);
         setSelectedFile(null);
         setSelectedFolder(null);
@@ -284,10 +473,32 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
         setEditorContent('');
         setEditorKey((k) => k + 1);
         pushHash(ws.id, null);
-        setupMediaContainer(ws.id);
-    }, [pushHash, setupMediaContainer]);
+    }, [pushHash]);
     const handleOpenFolder = useCallback(async () => {
         try {
+            if (isElectronHost()) {
+                const info = await getDocblocksHost().workspaces.pickFolder();
+                if (!info)
+                    return; // user cancelled
+                const descriptor = {
+                    id: info.id,
+                    name: info.name,
+                    type: 'electron-native',
+                    rootPath: info.rootPath,
+                    lastOpened: new Date().toISOString(),
+                };
+                await saveWorkspace(descriptor);
+                const provider = new ElectronFileSystemProvider(info.id, info.name, info.rootPath);
+                setProvider(provider);
+                setActiveWorkspaceId(descriptor.id);
+                setSelectedFile(null);
+                setSelectedFolder(null);
+                setFolderEntries([]);
+                setEditorContent('');
+                setEditorKey((k) => k + 1);
+                pushHash(descriptor.id, null);
+                return;
+            }
             const nativeProvider = await openNativeFolder();
             const descriptor = {
                 id: nativeProvider.id,
@@ -304,12 +515,104 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
             setEditorContent('');
             setEditorKey((k) => k + 1);
             pushHash(descriptor.id, null);
-            setupMediaContainer(descriptor.id);
         }
         catch {
             // User cancelled or API not supported
         }
-    }, [pushHash, setupMediaContainer]);
+    }, [pushHash]);
+    const handleNewFile = useCallback(async () => {
+        if (!provider)
+            return;
+        const name = prompt('New document name:', 'Untitled.md');
+        if (!name)
+            return;
+        const filename = /\.[a-zA-Z0-9]+$/.test(name) ? name : `${name}.md`;
+        await provider.writeFile(filename, '# ' + filename.replace(/\.[^.]+$/, '') + '\n');
+        setSelectedFile('/' + filename);
+        setEditorContent('# ' + filename.replace(/\.[^.]+$/, '') + '\n');
+        setInitialView('wysiwyg');
+        setEditorKey((k) => k + 1);
+        setExplorerKey((k) => k + 1);
+        if (activeWorkspaceId) {
+            pushHash(activeWorkspaceId, '/' + filename);
+        }
+    }, [provider, activeWorkspaceId, pushHash]);
+    const handleRevealWorkspace = useCallback(async () => {
+        if (!isElectronHost() || !activeWorkspaceId)
+            return;
+        const ws = await getWorkspace(activeWorkspaceId);
+        if (ws?.type === 'electron-native' && ws.rootPath) {
+            await getDocblocksHost().shell.revealInFolder(ws.rootPath);
+        }
+    }, [activeWorkspaceId]);
+    // Subscribe to native menu commands (Electron host).
+    useEffect(() => {
+        if (!isElectronHost())
+            return;
+        const host = getDocblocksHost();
+        return host.onMenuCommand((cmd) => {
+            switch (cmd) {
+                case 'file:new':
+                    handleNewFile();
+                    break;
+                case 'file:openFolder':
+                    handleOpenFolder();
+                    break;
+                case 'file:revealWorkspace':
+                    handleRevealWorkspace();
+                    break;
+                case 'help:viewOnGitHub':
+                    host.shell.openExternal('https://github.com/bendyline/docblocks');
+                    break;
+                case 'help:checkForUpdates':
+                    host.updater.checkForUpdates().catch(() => {
+                        // errors surface via updater.onStatus
+                    });
+                    break;
+                case 'help:about':
+                    (async () => {
+                        const version = await host.updater.getVersion();
+                        alert(`DocBlocks ${version}`);
+                    })();
+                    break;
+                default:
+                    break;
+            }
+        });
+    }, [handleNewFile, handleOpenFolder, handleRevealWorkspace]);
+    // Subscribe to open-file / deep-link requests from the OS.
+    useEffect(() => {
+        if (!isElectronHost())
+            return;
+        const host = getDocblocksHost();
+        return host.onOpenRequest(async (req) => {
+            if (req.filePath) {
+                const workspaces = (await listWorkspaces()).filter((w) => w.type === 'electron-native' && w.rootPath);
+                const match = workspaces.find((w) => req.filePath.startsWith((w.rootPath ?? '') + '/') || req.filePath === w.rootPath);
+                if (match && match.rootPath) {
+                    const rel = '/' + req.filePath.slice(match.rootPath.length).replace(/^\/+/, '');
+                    await openFromIds(match.id, rel, true);
+                }
+            }
+            else if (req.url) {
+                try {
+                    const u = new URL(req.url);
+                    const path = u.searchParams.get('path');
+                    if (path) {
+                        const workspaces = (await listWorkspaces()).filter((w) => w.type === 'electron-native' && w.rootPath);
+                        const match = workspaces.find((w) => path.startsWith((w.rootPath ?? '') + '/') || path === w.rootPath);
+                        if (match && match.rootPath) {
+                            const rel = '/' + path.slice(match.rootPath.length).replace(/^\/+/, '');
+                            await openFromIds(match.id, rel, true);
+                        }
+                    }
+                }
+                catch {
+                    // bad URL, ignore
+                }
+            }
+        });
+    }, [openFromIds]);
     const handleSelect = useCallback(async (path, kind) => {
         if (!provider || !activeWorkspaceId)
             return;
@@ -331,6 +634,7 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
             setInitialView('wysiwyg');
             setEditorKey((k) => k + 1);
             pushHash(activeWorkspaceId, path);
+            saveLastState({ workspaceId: activeWorkspaceId, filePath: path, view: 'wysiwyg' });
             if (isMobile)
                 setMobileShowEditor(true);
         }
@@ -354,19 +658,24 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
             setFolderEntries(entries);
         }
     }, [provider, selectedFile, selectedFolder, activeWorkspaceId, pushHash]);
-    /** Copy non-markdown files from an imported container into persistent media storage. */
-    const persistContainerMedia = useCallback(async (source) => {
-        const mc = mediaContainerRef.current;
-        if (!mc)
-            return;
+    /**
+     * Copy non-markdown files from an imported container into the target
+     * markdown file's `_files/` sibling folder, preserving the source's
+     * relative structure.
+     */
+    const persistImportedMedia = useCallback(async (source, target, importedMarkdownPath) => {
+        const parentDir = dirnameOf(importedMarkdownPath);
+        const folder = basenameOf(importedMarkdownPath).replace(/\.[^.]+$/, '') + '_files';
+        const mediaRoot = parentDir ? `${parentDir}/${folder}` : folder;
         const entries = await source.listFiles();
         for (const entry of entries) {
             if (entry.path.endsWith('.md'))
                 continue;
             const data = await source.readFile(entry.path);
-            if (data) {
-                await mc.writeFile(entry.path, new Uint8Array(data), entry.mimeType);
-            }
+            if (!data)
+                continue;
+            const cleanPath = entry.path.replace(/^\/+/, '');
+            await target.writeBinary(`${mediaRoot}/${cleanPath}`, new Uint8Array(data));
         }
     }, []);
     const handleImportFiles = useCallback(async (files) => {
@@ -385,19 +694,19 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
                     const { docxToContainer } = await import('@bendyline/squisq-formats/docx');
                     const container = await docxToContainer(await file.arrayBuffer());
                     markdown = (await container.readDocument()) ?? '';
-                    await persistContainerMedia(container);
+                    await persistImportedMedia(container, provider, destPath);
                 }
                 else if (ext === '.pdf') {
                     const { pdfToContainer } = await import('@bendyline/squisq-formats/pdf');
                     const container = await pdfToContainer(await file.arrayBuffer());
                     markdown = (await container.readDocument()) ?? '';
-                    await persistContainerMedia(container);
+                    await persistImportedMedia(container, provider, destPath);
                 }
                 else if (ext === '.dbk' || ext === '.zip') {
                     const { zipToContainer } = await import('@bendyline/squisq-formats/container');
                     const container = await zipToContainer(await file.arrayBuffer());
                     markdown = (await container.readDocument()) ?? '';
-                    await persistContainerMedia(container);
+                    await persistImportedMedia(container, provider, destPath);
                 }
                 else {
                     continue;
@@ -408,14 +717,9 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
                 console.error(`Failed to import ${file.name}:`, err);
             }
         }
-        // Refresh media provider once after all imports (not per-file)
-        const mc = mediaContainerRef.current;
-        if (mc) {
-            setMediaProvider(createMediaProviderFromContainer(mc));
-        }
-        // Refresh file tree
+        // Refresh file tree so the new markdown files + _files folders show up.
         setExplorerKey((k) => k + 1);
-    }, [provider, persistContainerMedia]);
+    }, [provider, persistImportedMedia]);
     const handleEditorChange = useCallback((source) => {
         setEditorContent(source);
     }, []);
@@ -431,7 +735,7 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
         await saveWorkspace({ ...ws, name: newName });
         // Bump key to trigger re-render — workspace name is read from the descriptor, not the provider
         setEditorKey((k) => k + 1);
-    }, [activeWorkspaceId, provider]);
+    }, [activeWorkspaceId]);
     const handleDownloadWorkspace = useCallback(async () => {
         if (!provider)
             return;
@@ -459,16 +763,50 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
     const handleRemoveWorkspace = useCallback(async () => {
         if (!activeWorkspaceId)
             return;
-        if (!confirm('Remove this workspace? This cannot be undone.'))
+        const confirmMsg = isElectronHost()
+            ? 'Remove this workspace from DocBlocks? The files on disk will not be deleted.'
+            : 'Remove this workspace? This cannot be undone.';
+        if (!confirm(confirmMsg))
             return;
-        await removeDirectoryHandle(activeWorkspaceId);
+        const ws = await getWorkspace(activeWorkspaceId);
+        if (ws?.type === 'electron-native') {
+            try {
+                await getDocblocksHost().workspaces.unregister(activeWorkspaceId);
+            }
+            catch {
+                // ignore — host cleanup is best-effort
+            }
+        }
+        else {
+            await removeDirectoryHandle(activeWorkspaceId);
+        }
         await removeWorkspace(activeWorkspaceId);
+        const electron = isElectronHost();
         // Switch to most recent remaining workspace or create default
-        const remaining = await listWorkspaces();
+        const remaining = (await listWorkspaces()).filter((w) => electron ? w.type === 'electron-native' : w.type !== 'electron-native');
         if (remaining.length > 0) {
             const next = remaining[0];
             await handleWorkspaceSelect(next);
         }
+        else if (electron) {
+            const info = await getDocblocksHost().workspaces.getDefault();
+            const descriptor = {
+                id: info.id,
+                name: info.name,
+                type: 'electron-native',
+                rootPath: info.rootPath,
+                lastOpened: new Date().toISOString(),
+            };
+            await saveWorkspace(descriptor);
+            const p = new ElectronFileSystemProvider(info.id, info.name, info.rootPath);
+            setProvider(p);
+            setActiveWorkspaceId(info.id);
+            setSelectedFile(null);
+            setSelectedFolder(null);
+            setFolderEntries([]);
+            setEditorContent('');
+            setEditorKey((k) => k + 1);
+        }
         else {
             const defaultWs = await ensureDefaultWorkspace();
             const fsProvider = new IndexedDBFileSystemProvider(defaultWs.id, defaultWs.name);
@@ -479,9 +817,8 @@ export function DocBlocksShell({ theme = 'auto', logoUrl }) {
             setFolderEntries([]);
             setEditorContent('');
             setEditorKey((k) => k + 1);
-            setupMediaContainer(defaultWs.id);
         }
-    }, [activeWorkspaceId, handleWorkspaceSelect, setupMediaContainer]);
-    return (_jsx("div", { className: `db-shell${isMobile ? ' db-shell--mobile' : ''}`, "data-theme": resolvedTheme, children: _jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [(!isMobile || !mobileShowEditor) && (_jsxs("div", { className: "db-shell-sidebar", children: [_jsxs("div", { className: "db-shell-sidebar-header", children: [_jsx(AppMenu, { logoUrl: logoUrl }), _jsx(WorkspacePicker, { activeWorkspaceId: activeWorkspaceId, onSelect: handleWorkspaceSelect, onOpenFolder: handleOpenFolder }), _jsx(WorkspaceSettingsButton, { onRename: handleRenameWorkspace, onDownload: handleDownloadWorkspace, onRemove: handleRemoveWorkspace })] }), _jsx(FileExplorer, { provider: provider, onSelect: handleSelect, onTreeChange: handleTreeChange, onImportFiles: handleImportFiles }, explorerKey), _jsx("div", { className: "db-shell-sidebar-footer", children: _jsx("a", { href: "https://github.com/bendyline/docblocks/blob/main/LICENSE", target: "_blank", rel: "noopener noreferrer", children: "Terms of Use" }) })] })), (!isMobile || mobileShowEditor) && (_jsx("div", { style: { flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }, children: selectedFile && mediaProvider ? (_jsx(MediaContext.Provider, { value: mediaProvider, children: _jsx(EditorShell, { initialMarkdown: editorContent, initialView: initialView, articleId: selectedFile, onChange: handleEditorChange, theme: resolvedTheme, height: "100%", mediaProvider: mediaProvider, container: mediaContainerRef.current ?? undefined, toolbarSlotLeft: isMobile ? (_jsx("button", { className: "db-mobile-back", onClick: () => setMobileShowEditor(false), children: _jsx("span", { className: "db-mobile-back-arrow", children: "\u2190" }) })) : undefined, toolbarSlotRight: _jsx(ExportToolbarControls, { selectedFile: selectedFile, mediaContainer: mediaContainerRef.current }) }, `${selectedFile}-${editorKey}`) })) : selectedFolder ? (_jsxs("div", { className: "db-folder-view", children: [isMobile && (_jsxs("button", { className: "db-mobile-back", onClick: () => setMobileShowEditor(false), children: [_jsx("span", { className: "db-mobile-back-arrow", children: "\u2190" }), "Back to files"] })), _jsxs("div", { className: "db-folder-view-header", children: [_jsx("span", { className: "db-folder-view-icon", children: "\uD83D\uDCC1" }), _jsx("span", { className: "db-folder-view-path", children: selectedFolder })] }), folderEntries.length === 0 ? (_jsx("p", { className: "db-folder-view-empty", children: "This folder is empty." })) : (_jsx("ul", { className: "db-folder-view-list", children: folderEntries.map((entry) => (_jsxs("li", { className: "db-folder-view-item", onClick: () => handleSelect(entry.path, entry.kind), children: [_jsx("span", { className: "db-folder-view-item-icon", children: entry.kind === 'directory' ? '📁' : '📄' }), entry.name] }, entry.path))) }))] })) : (_jsx("div", { className: "db-shell-empty", children: _jsx("p", { children: "Select a file to start editing, or create a new one." }) })) }))] }) }));
+    }, [activeWorkspaceId, handleWorkspaceSelect]);
+    return (_jsx("div", { className: `db-shell${isMobile ? ' db-shell--mobile' : ''}`, "data-theme": resolvedTheme, children: _jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [(!isMobile || !mobileShowEditor) && (_jsxs("div", { className: "db-shell-sidebar", children: [_jsxs("div", { className: "db-shell-sidebar-header", children: [_jsx(AppMenu, { logoUrl: logoUrl, themePreference: themePreference, onThemeChange: handleThemeChange }), _jsx(WorkspacePicker, { activeWorkspaceId: activeWorkspaceId, onSelect: handleWorkspaceSelect, onOpenFolder: handleOpenFolder }), _jsx(WorkspaceSettingsButton, { onRename: handleRenameWorkspace, onDownload: handleDownloadWorkspace, onRemove: handleRemoveWorkspace })] }), _jsx(FileExplorer, { provider: provider, onSelect: handleSelect, onTreeChange: handleTreeChange, onImportFiles: handleImportFiles }, explorerKey), _jsx("div", { className: "db-shell-sidebar-footer", children: _jsx("a", { href: "https://github.com/bendyline/docblocks/blob/main/LICENSE", target: "_blank", rel: "noopener noreferrer", children: "Terms of Use" }) })] })), (!isMobile || mobileShowEditor) && (_jsx("div", { style: { flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }, children: selectedFile && mediaProvider ? (_jsx(MediaContext.Provider, { value: mediaProvider, children: _jsx(EditorShell, { initialMarkdown: editorContent, initialView: initialView, articleId: selectedFile, onChange: handleEditorChange, theme: resolvedTheme, height: "100%", mediaProvider: mediaProvider, container: mediaContainerRef.current ?? undefined, toolbarSlotLeft: isMobile ? (_jsx("button", { className: "db-mobile-back", onClick: () => setMobileShowEditor(false), children: _jsx("span", { className: "db-mobile-back-arrow", children: "\u2190" }) })) : undefined, toolbarSlotRight: _jsx(ExportToolbarControls, { selectedFile: selectedFile, mediaContainer: mediaContainerRef.current }) }, `${selectedFile}-${editorKey}`) })) : selectedFolder ? (_jsxs("div", { className: "db-folder-view", children: [isMobile && (_jsxs("button", { className: "db-mobile-back", onClick: () => setMobileShowEditor(false), children: [_jsx("span", { className: "db-mobile-back-arrow", children: "\u2190" }), "Back to files"] })), _jsxs("div", { className: "db-folder-view-header", children: [_jsx("span", { className: "db-folder-view-icon", children: _jsx(FolderGlyph, {}) }), _jsx("span", { className: "db-folder-view-path", children: selectedFolder })] }), folderEntries.length === 0 ? (_jsx("p", { className: "db-folder-view-empty", children: "This folder is empty." })) : (_jsx("ul", { className: "db-folder-view-list", children: folderEntries.map((entry) => (_jsxs("li", { className: "db-folder-view-item", onClick: () => handleSelect(entry.path, entry.kind), children: [_jsx("span", { className: "db-folder-view-item-icon", children: entry.kind === 'directory' ? _jsx(FolderGlyph, {}) : _jsx(FileGlyph, {}) }), entry.name] }, entry.path))) }))] })) : (_jsx("div", { className: "db-shell-empty", children: _jsx("p", { children: "Select a file to start editing, or create a new one." }) })) }))] }) }));
 }
 //# sourceMappingURL=DocBlocksShell.js.map