@open-slide/core 0.0.2 → 0.0.4

package/src/app/lib/export-html.ts

@@ -0,0 +1,313 @@
+// Exports a slide as a standalone HTML file (or a .zip bundle if the slide
+// references bundled assets). The export is a static snapshot of each page's
+// post-mount DOM — runtime interactivity (useState click handlers, timers,
+// etc.) is captured at snapshot time only.
+
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { SlideModule } from './sdk';
+
+type AssetEntry = { name: string; bytes: Uint8Array };
+
+const ASSET_EXT_RE = /\.(?:png|jpe?g|gif|svg|webp|avif|mp4|webm|mov|woff2?|ttf|otf|mp3|wav|ogg)(?:\?[^#]*)?(?:#.*)?$/i;
+
+export async function exportSlideAsHtml(slide: SlideModule, slideId: string): Promise<void> {
+  const pages = slide.default ?? [];
+  if (pages.length === 0) return;
+  const title = slide.meta?.title ?? slideId;
+
+  const pagesHtml = await renderPagesToHtml(pages);
+  const bundledCss = collectCss();
+  const externalLinks = collectExternalStylesheetLinks();
+
+  const assets = new Map<string, AssetEntry>();
+  const usedNames = new Set<string>();
+
+  const urls = new Set<string>([
+    ...findHtmlAssetUrls(pagesHtml.join('\n')),
+    ...findCssAssetUrls(bundledCss),
+  ]);
+
+  for (const url of urls) {
+    const absolute = toAbsolute(url);
+    if (!absolute) continue;
+    try {
+      const res = await fetch(absolute);
+      if (!res.ok) continue;
+      const buf = new Uint8Array(await res.arrayBuffer());
+      const name = uniqueAssetName(absolute, usedNames);
+      assets.set(url, { name, bytes: buf });
+    } catch {
+      // ignore unreachable assets
+    }
+  }
+
+  const rewrittenPages = pagesHtml.map((html) => rewriteUrls(html, assets, 'html'));
+  const rewrittenCss = rewriteUrls(bundledCss, assets, 'css');
+
+  const html = buildHtml({
+    title,
+    pagesHtml: rewrittenPages,
+    bundledCss: rewrittenCss,
+    externalLinks,
+  });
+
+  const htmlBytes = new TextEncoder().encode(html);
+
+  if (assets.size === 0) {
+    downloadBlob(new Blob([htmlBytes as BlobPart], { type: 'text/html' }), `${slideId}.html`);
+    return;
+  }
+
+  const { zipSync } = await import('fflate');
+  const zipTree: Record<string, Uint8Array | Record<string, Uint8Array>> = {
+    [`${slideId}.html`]: htmlBytes,
+    assets: {},
+  };
+  for (const { name, bytes } of assets.values()) {
+    (zipTree.assets as Record<string, Uint8Array>)[name] = bytes;
+  }
+  const zipped = zipSync(zipTree as Parameters<typeof zipSync>[0]);
+  downloadBlob(new Blob([zipped as BlobPart], { type: 'application/zip' }), `${slideId}.zip`);
+}
+
+async function renderPagesToHtml(pages: NonNullable<SlideModule['default']>): Promise<string[]> {
+  const container = document.createElement('div');
+  container.setAttribute('aria-hidden', 'true');
+  Object.assign(container.style, {
+    position: 'fixed',
+    left: '-99999px',
+    top: '0',
+    width: '1920px',
+    height: '1080px',
+    pointerEvents: 'none',
+  });
+  document.body.appendChild(container);
+
+  const result: string[] = [];
+  try {
+    for (const Page of pages) {
+      const host = document.createElement('div');
+      host.style.width = '1920px';
+      host.style.height = '1080px';
+      container.appendChild(host);
+      const root = createRoot(host);
+      root.render(createElement(Page));
+      await nextPaint();
+      await nextPaint();
+      result.push(host.innerHTML);
+      root.unmount();
+      container.removeChild(host);
+    }
+  } finally {
+    container.remove();
+  }
+  return result;
+}
+
+function nextPaint(): Promise<void> {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
+function collectCss(): string {
+  const chunks: string[] = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRuleList | null = null;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (!rules) continue;
+    for (const rule of Array.from(rules)) {
+      chunks.push(rule.cssText);
+    }
+  }
+  return chunks.join('\n');
+}
+
+function collectExternalStylesheetLinks(): string {
+  const links: string[] = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      void sheet.cssRules;
+    } catch {
+      if (sheet.href) {
+        links.push(`<link rel="stylesheet" href="${escapeAttr(sheet.href)}">`);
+      }
+    }
+  }
+  return links.join('\n');
+}
+
+function findHtmlAssetUrls(html: string): string[] {
+  const out: string[] = [];
+  const attrRe = /\s(?:src|href)="([^"]+)"/g;
+  for (const m of html.matchAll(attrRe)) {
+    if (looksLikeAsset(m[1])) out.push(m[1]);
+  }
+  const srcsetRe = /\ssrcset="([^"]+)"/g;
+  for (const m of html.matchAll(srcsetRe)) {
+    for (const part of m[1].split(',')) {
+      const url = part.trim().split(/\s+/)[0];
+      if (url && looksLikeAsset(url)) out.push(url);
+    }
+  }
+  return out;
+}
+
+function findCssAssetUrls(css: string): string[] {
+  const out: string[] = [];
+  const re = /url\(\s*(['"]?)([^)'"]+)\1\s*\)/g;
+  for (const m of css.matchAll(re)) {
+    const url = m[2].trim();
+    if (looksLikeAsset(url)) out.push(url);
+  }
+  return out;
+}
+
+function looksLikeAsset(url: string): boolean {
+  if (!url) return false;
+  if (url.startsWith('data:') || url.startsWith('blob:') || url.startsWith('#')) return false;
+  if (url.startsWith('mailto:') || url.startsWith('javascript:')) return false;
+  const abs = toAbsolute(url);
+  if (!abs) return false;
+  // Same-origin only: we can only fetch local assets.
+  try {
+    const u = new URL(abs);
+    if (u.origin !== window.location.origin) return false;
+  } catch {
+    return false;
+  }
+  return ASSET_EXT_RE.test(url);
+}
+
+function toAbsolute(url: string): string | null {
+  try {
+    return new URL(url, window.location.href).toString();
+  } catch {
+    return null;
+  }
+}
+
+function uniqueAssetName(absoluteUrl: string, used: Set<string>): string {
+  let base: string;
+  try {
+    const u = new URL(absoluteUrl);
+    base = u.pathname.split('/').pop() || 'asset';
+  } catch {
+    base = 'asset';
+  }
+  if (!used.has(base)) {
+    used.add(base);
+    return base;
+  }
+  const hash = shortHash(absoluteUrl);
+  const dot = base.lastIndexOf('.');
+  const name = dot > 0 ? `${base.slice(0, dot)}-${hash}${base.slice(dot)}` : `${base}-${hash}`;
+  used.add(name);
+  return name;
+}
+
+function shortHash(input: string): string {
+  let h = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    h ^= input.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0).toString(36).slice(0, 6);
+}
+
+function rewriteUrls(source: string, assets: Map<string, AssetEntry>, kind: 'html' | 'css'): string {
+  let out = source;
+  for (const [orig, { name }] of assets) {
+    const replacement = kind === 'css' ? `./assets/${name}` : `assets/${name}`;
+    out = out.split(orig).join(replacement);
+  }
+  return out;
+}
+
+function buildHtml(opts: {
+  title: string;
+  pagesHtml: string[];
+  bundledCss: string;
+  externalLinks: string;
+}): string {
+  const pagesMarkup = opts.pagesHtml
+    .map((page, i) => `<div class="os-page" data-idx="${i}"${i === 0 ? '' : ' hidden'}>${page}</div>`)
+    .join('');
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(opts.title)}</title>
+${opts.externalLinks}
+<style>
+html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: system-ui, sans-serif; }
+.os-stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
+.os-frame { width: 1920px; height: 1080px; background: #fff; color: #000; transform-origin: center center; overflow: hidden; position: relative; }
+.os-page { position: absolute; inset: 0; }
+.os-page[hidden] { display: none !important; }
+.os-counter { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,.5); padding: 2px 10px; border-radius: 999px; font-size: 12px; z-index: 10; font-variant-numeric: tabular-nums; }
+</style>
+<style>${opts.bundledCss}</style>
+</head>
+<body>
+<div class="os-stage"><div class="os-frame" id="os-frame">${pagesMarkup}</div></div>
+<div class="os-counter"><span id="os-cur">1</span> / <span id="os-total">${opts.pagesHtml.length}</span></div>
+<script>
+(function () {
+  var pages = document.querySelectorAll('.os-page');
+  var idx = 0;
+  var frame = document.getElementById('os-frame');
+  var cur = document.getElementById('os-cur');
+  function fit() {
+    var s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
+    frame.style.transform = 'scale(' + s + ')';
+  }
+  function go(i) {
+    idx = Math.max(0, Math.min(pages.length - 1, i));
+    pages.forEach(function (p, n) { p.hidden = n !== idx; });
+    cur.textContent = String(idx + 1);
+  }
+  window.addEventListener('resize', fit);
+  window.addEventListener('keydown', function (e) {
+    if (['ArrowRight','ArrowDown','PageDown',' '].indexOf(e.key) >= 0) { e.preventDefault(); go(idx + 1); }
+    else if (['ArrowLeft','ArrowUp','PageUp'].indexOf(e.key) >= 0) { e.preventDefault(); go(idx - 1); }
+    else if (e.key === 'Home') { e.preventDefault(); go(0); }
+    else if (e.key === 'End') { e.preventDefault(); go(pages.length - 1); }
+  });
+  fit();
+  go(0);
+})();
+</script>
+</body>
+</html>`;
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function escapeAttr(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
+
+function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.rel = 'noopener';
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}

package/src/app/lib/folders.ts

@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { Folder, FolderIcon, FoldersManifest } from './sdk';
+
+const EMPTY: FoldersManifest = { folders: [], assignments: {} };
+
+async function getManifest(): Promise<FoldersManifest> {
+  const res = await fetch('/__folders');
+  if (!res.ok) throw new Error(`GET /__folders ${res.status}`);
+  const raw = (await res.json()) as Partial<FoldersManifest>;
+  return {
+    folders: raw.folders ?? [],
+    assignments: raw.assignments ?? {},
+  };
+}
+
+async function patchSlideName(slideId: string, name: string): Promise<void> {
+  const res = await fetch(`/__slides/${slideId}`, {
+    method: 'PATCH',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ name }),
+  });
+  if (!res.ok) throw new Error(`PATCH /__slides/${slideId} ${res.status}`);
+}
+
+async function deleteSlideReq(slideId: string): Promise<void> {
+  const res = await fetch(`/__slides/${slideId}`, { method: 'DELETE' });
+  if (!res.ok) throw new Error(`DELETE /__slides/${slideId} ${res.status}`);
+}
+
+async function postFolder(name: string, icon: FolderIcon): Promise<Folder> {
+  const res = await fetch('/__folders', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ name, icon }),
+  });
+  if (!res.ok) throw new Error(`POST /__folders ${res.status}`);
+  return (await res.json()) as Folder;
+}
+
+async function patchFolder(
+  id: string,
+  patch: { name?: string; icon?: FolderIcon },
+): Promise<Folder> {
+  const res = await fetch(`/__folders/${id}`, {
+    method: 'PATCH',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(patch),
+  });
+  if (!res.ok) throw new Error(`PATCH /__folders/${id} ${res.status}`);
+  return (await res.json()) as Folder;
+}
+
+async function deleteFolder(id: string): Promise<void> {
+  const res = await fetch(`/__folders/${id}`, { method: 'DELETE' });
+  if (!res.ok) throw new Error(`DELETE /__folders/${id} ${res.status}`);
+}
+
+async function putAssign(slideId: string, folderId: string | null): Promise<void> {
+  const res = await fetch('/__folders/assign', {
+    method: 'PUT',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ slideId, folderId }),
+  });
+  if (!res.ok) throw new Error(`PUT /__folders/assign ${res.status}`);
+}
+
+export type UseFoldersResult = {
+  manifest: FoldersManifest;
+  loading: boolean;
+  create: (name: string, icon: FolderIcon) => Promise<Folder>;
+  update: (id: string, patch: { name?: string; icon?: FolderIcon }) => Promise<void>;
+  remove: (id: string) => Promise<void>;
+  assign: (slideId: string, folderId: string | null) => Promise<void>;
+  renameSlide: (slideId: string, name: string) => Promise<void>;
+  deleteSlide: (slideId: string) => Promise<void>;
+  refresh: () => Promise<void>;
+};
+
+export function useFolders(): UseFoldersResult {
+  const [manifest, setManifest] = useState<FoldersManifest>(EMPTY);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    const m = await getManifest();
+    setManifest(m);
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    getManifest()
+      .then((m) => {
+        if (!cancelled) {
+          setManifest(m);
+          setLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    const handler = () => {
+      refresh().catch(() => {});
+    };
+    import.meta.hot.on('open-slide:files-changed', handler);
+    return () => {
+      import.meta.hot?.off('open-slide:files-changed', handler);
+    };
+  }, [refresh]);
+
+  const create = useCallback(
+    async (name: string, icon: FolderIcon) => {
+      const folder = await postFolder(name, icon);
+      await refresh();
+      return folder;
+    },
+    [refresh],
+  );
+
+  const update = useCallback(
+    async (id: string, patch: { name?: string; icon?: FolderIcon }) => {
+      await patchFolder(id, patch);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const remove = useCallback(
+    async (id: string) => {
+      await deleteFolder(id);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const assign = useCallback(
+    async (slideId: string, folderId: string | null) => {
+      await putAssign(slideId, folderId);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const renameSlide = useCallback(
+    async (slideId: string, name: string) => {
+      await patchSlideName(slideId, name);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const deleteSlide = useCallback(
+    async (slideId: string) => {
+      await deleteSlideReq(slideId);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  return { manifest, loading, create, update, remove, assign, renameSlide, deleteSlide, refresh };
+}

package/src/app/lib/inspector/fiber.ts

@@ -21,8 +21,8 @@ function getSource(fiber: FiberLike) {
   return fiber._debugSource ?? fiber.memoizedProps?.__source;
 }
 
-export function findSlideSource(el: HTMLElement, deckId: string): SlideSourceHit | null {
-  const needle = `/slides/${deckId}/index.tsx`;
+export function findSlideSource(el: HTMLElement, slideId: string): SlideSourceHit | null {
+  const needle = `/slides/${slideId}/index.tsx`;
   let fiber = getFiber(el);
   let anchor: HTMLElement = el;
   while (fiber) {

package/src/app/lib/inspector/useComments.ts

@@ -10,14 +10,14 @@ export type SlideComment = {
 
 type ListResponse = { comments: SlideComment[] };
 
-export function useComments(deckId: string) {
+export function useComments(slideId: string) {
   const [comments, setComments] = useState<SlideComment[]>([]);
   const [error, setError] = useState<string | null>(null);
 
   const refetch = useCallback(async () => {
-    if (!deckId) return;
+    if (!slideId) return;
     try {
-      const res = await fetch(`/__comments?deckId=${encodeURIComponent(deckId)}`);
+      const res = await fetch(`/__comments?slideId=${encodeURIComponent(slideId)}`);
       if (!res.ok) {
         setError(`GET /__comments → ${res.status}`);
         return;
@@ -28,14 +28,14 @@ export function useComments(deckId: string) {
     } catch (e) {
       setError(String((e as Error).message ?? e));
     }
-  }, [deckId]);
+  }, [slideId]);
 
   const add = useCallback(
     async (line: number, column: number, text: string) => {
       const res = await fetch('/__comments/add', {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ deckId, line, column, text }),
+        body: JSON.stringify({ slideId, line, column, text }),
       });
       if (!res.ok) {
         const body = (await res.json().catch(() => ({}))) as { error?: string };
@@ -43,18 +43,18 @@ export function useComments(deckId: string) {
       }
       await refetch();
     },
-    [deckId, refetch],
+    [slideId, refetch],
   );
 
   const remove = useCallback(
     async (id: string) => {
-      const res = await fetch(`/__comments/${id}?deckId=${encodeURIComponent(deckId)}`, {
+      const res = await fetch(`/__comments/${id}?slideId=${encodeURIComponent(slideId)}`, {
         method: 'DELETE',
       });
       if (!res.ok) throw new Error(`DELETE /__comments/${id} → ${res.status}`);
       await refetch();
     },
-    [deckId, refetch],
+    [slideId, refetch],
   );
 
   useEffect(() => {

package/src/app/lib/sdk.ts

@@ -1,15 +1,28 @@
 import type { ComponentType } from 'react';
 
-export type SlidePage = ComponentType;
+export type Page = ComponentType;
 
-export type DeckMeta = {
+export type SlideMeta = {
   title?: string;
   theme?: 'light' | 'dark';
 };
 
-export type DeckModule = {
-  default: SlidePage[];
-  meta?: DeckMeta;
+export type SlideModule = {
+  default: Page[];
+  meta?: SlideMeta;
+};
+
+export type FolderIcon = { type: 'emoji'; value: string } | { type: 'color'; value: string };
+
+export type Folder = {
+  id: string;
+  name: string;
+  icon: FolderIcon;
+};
+
+export type FoldersManifest = {
+  folders: Folder[];
+  assignments: Record<string, string>;
 };
 
 export const CANVAS_WIDTH = 1920;

package/src/app/lib/slides.ts

@@ -0,0 +1,8 @@
+import type { SlideModule } from './sdk';
+import { slideIds as ids, loadSlide as load } from 'virtual:open-slide/slides';
+
+export const slideIds: string[] = ids;
+
+export async function loadSlide(id: string): Promise<SlideModule> {
+  return load(id);
+}