@open-aippt/core 1.13.2

package/src/app/lib/folders.ts

@@ -0,0 +1,239 @@
+import buildManifest from 'virtual:open-aippt/folders';
+import { useCallback, useEffect, useState } from 'react';
+import type { Folder, FolderIcon, FoldersManifest } from './sdk';
+
+const EMPTY: FoldersManifest = { folders: [], assignments: {} };
+
+async function getManifest(): Promise<FoldersManifest> {
+  // In dev the manifest is mutable: read live from the plugin endpoint so
+  // edits made in the sidebar reflect immediately. In a static build there
+  // is no server, so fall back to the bundled snapshot from the virtual
+  // module (populated at build time from slides/.folders.json).
+  if (import.meta.env.DEV) {
+    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 ?? {},
+    };
+  }
+  return {
+    folders: buildManifest.folders ?? [],
+    assignments: buildManifest.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 duplicateSlideReq(slideId: string, newId?: string): Promise<string> {
+  const init: RequestInit = { method: 'POST' };
+  if (newId !== undefined) {
+    init.headers = { 'content-type': 'application/json' };
+    init.body = JSON.stringify({ newId });
+  }
+  const res = await fetch(`/__slides/${slideId}/duplicate`, init);
+  if (!res.ok) throw new Error(`POST /__slides/${slideId}/duplicate ${res.status}`);
+  const body = (await res.json()) as { slideId?: unknown };
+  if (typeof body.slideId !== 'string') throw new Error('duplicate response missing slideId');
+  return body.slideId;
+}
+
+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}`);
+}
+
+async function putReorder(ids: string[]): Promise<void> {
+  const res = await fetch('/__folders/reorder', {
+    method: 'PUT',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ ids }),
+  });
+  if (!res.ok) throw new Error(`PUT /__folders/reorder ${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>;
+  reorder: (ids: string[]) => Promise<void>;
+  assign: (slideId: string, folderId: string | null) => Promise<void>;
+  renameSlide: (slideId: string, name: string) => Promise<void>;
+  duplicateSlide: (slideId: string, newId?: string) => Promise<string>;
+  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-aippt:files-changed', handler);
+    return () => {
+      import.meta.hot?.off('open-aippt: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 reorder = useCallback(
+    async (ids: string[]) => {
+      const prev = manifest;
+      const byId = new Map(prev.folders.map((f) => [f.id, f]));
+      const next = ids.map((id) => byId.get(id)).filter((f): f is Folder => Boolean(f));
+      if (next.length !== prev.folders.length) return;
+      setManifest({ ...prev, folders: next });
+      try {
+        await putReorder(ids);
+      } catch (err) {
+        setManifest(prev);
+        throw err;
+      }
+    },
+    [manifest],
+  );
+
+  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 duplicateSlide = useCallback(
+    async (slideId: string, newId?: string) => {
+      const duplicatedId = await duplicateSlideReq(slideId, newId);
+      await refresh();
+      return duplicatedId;
+    },
+    [refresh],
+  );
+
+  const deleteSlide = useCallback(
+    async (slideId: string) => {
+      await deleteSlideReq(slideId);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  return {
+    manifest,
+    loading,
+    create,
+    update,
+    remove,
+    reorder,
+    assign,
+    renameSlide,
+    duplicateSlide,
+    deleteSlide,
+    refresh,
+  };
+}

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

@@ -0,0 +1,154 @@
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { findSlideSource } from './fiber.ts';
+
+class FakeHTMLElement {
+  dataset: Record<string, string> = {};
+  private closestSelf: FakeHTMLElement | null = null;
+  setClosestSelfForSlideLoc() {
+    this.closestSelf = this;
+  }
+  closest(selector: string): FakeHTMLElement | null {
+    if (selector === '[data-slide-loc]') return this.closestSelf;
+    return null;
+  }
+}
+
+type DebugSource = { fileName?: string; lineNumber?: number; columnNumber?: number };
+type FakeFiber = {
+  return: FakeFiber | null;
+  stateNode?: unknown;
+  _debugSource?: DebugSource;
+};
+
+function makeEl(opts: { slideLoc?: string; fiber?: FakeFiber } = {}): FakeHTMLElement {
+  const el = new FakeHTMLElement();
+  if (opts.slideLoc) {
+    el.dataset.slideLoc = opts.slideLoc;
+    el.setClosestSelfForSlideLoc();
+  }
+  if (opts.fiber) {
+    (el as unknown as Record<string, FakeFiber>).__reactFiber$test = opts.fiber;
+  }
+  return el;
+}
+
+function makeFiber(opts: {
+  fileName?: string;
+  line?: number;
+  column?: number;
+  host?: boolean;
+  parent?: FakeFiber | null;
+}): FakeFiber {
+  const source: DebugSource | undefined =
+    opts.fileName !== undefined
+      ? { fileName: opts.fileName, lineNumber: opts.line, columnNumber: opts.column }
+      : undefined;
+  return {
+    return: opts.parent ?? null,
+    stateNode: opts.host ? new FakeHTMLElement() : undefined,
+    _debugSource: source,
+  };
+}
+
+beforeAll(() => {
+  vi.stubGlobal('HTMLElement', FakeHTMLElement);
+});
+
+afterAll(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('findSlideSource primary path', () => {
+  it('reads line:column from data-slide-loc', () => {
+    const el = makeEl({ slideLoc: '42:7' });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(42);
+    expect(hit?.column).toBe(7);
+    expect(hit?.anchor).toBe(el as unknown as HTMLElement);
+  });
+});
+
+describe('findSlideSource fallback', () => {
+  it('matches a POSIX fileName', () => {
+    const fiber = makeFiber({
+      fileName: '/repo/slides/cover/index.tsx',
+      line: 10,
+      column: 4,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(10);
+    expect(hit?.column).toBe(4);
+  });
+
+  it('matches a Windows-backslash fileName', () => {
+    const fiber = makeFiber({
+      fileName: 'C:\\repo\\slides\\cover\\index.tsx',
+      line: 11,
+      column: 2,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(11);
+    expect(hit?.column).toBe(2);
+  });
+
+  it('matches a fileName carrying an HMR ?t= query', () => {
+    const fiber = makeFiber({
+      fileName: '/repo/slides/cover/index.tsx?t=1700000000000',
+      line: 12,
+      column: 0,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(12);
+  });
+
+  it('matches a Windows fileName with an HMR query', () => {
+    const fiber = makeFiber({
+      fileName: 'C:\\repo\\slides\\cover\\index.tsx?t=1700000000000',
+      line: 13,
+      column: 1,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(13);
+    expect(hit?.column).toBe(1);
+  });
+
+  it('returns null when the fiber fileName points at a different slideId', () => {
+    const fiber = makeFiber({
+      fileName: '/repo/slides/other/index.tsx',
+      line: 10,
+      column: 4,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).toBeNull();
+  });
+
+  it('walks up the fiber chain until it finds a matching source', () => {
+    const parent = makeFiber({
+      fileName: '/repo/slides/cover/index.tsx',
+      line: 99,
+      column: 3,
+      host: true,
+    });
+    const leaf = makeFiber({ parent, host: true });
+    const el = makeEl({ fiber: leaf });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(99);
+    expect(hit?.column).toBe(3);
+  });
+});

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

@@ -0,0 +1,85 @@
+export type SlideSourceHit = {
+  line: number;
+  column: number;
+  anchor: HTMLElement;
+};
+
+export type FindSlideSourceOptions = {
+  // Visual editor uses this: skip component-invocation JSX (`<MyComp/>`)
+  // since most components don't forward `style`. Comments leave it off
+  // so any JSX can be annotated.
+  hostOnly?: boolean;
+};
+
+type FiberLike = {
+  return: FiberLike | null;
+  stateNode?: unknown;
+  _debugSource?: { fileName?: string; lineNumber?: number; columnNumber?: number };
+  memoizedProps?: { __source?: { fileName?: string; lineNumber?: number; columnNumber?: number } };
+};
+
+function getFiber(el: Element): FiberLike | null {
+  const key = Object.keys(el).find((k) => k.startsWith('__reactFiber$'));
+  if (!key) return null;
+  return (el as unknown as Record<string, FiberLike>)[key] ?? null;
+}
+
+function getSource(fiber: FiberLike) {
+  return fiber._debugSource ?? fiber.memoizedProps?.__source;
+}
+
+// `_debugSource.fileName` may carry Vite's HMR query (`?t=…`) and, on
+// Windows, backslash separators. Both break the naive `endsWith` match.
+function normalizeDebugFileName(fileName: string): string {
+  return fileName.split(/[?#]/)[0].replace(/\\/g, '/');
+}
+
+export function findSlideSource(
+  el: HTMLElement,
+  slideId: string,
+  opts?: FindSlideSourceOptions,
+): SlideSourceHit | null {
+  // Primary path: the `data-slide-loc` attribute injected by the
+  // loc-tags Vite plugin. Immune to HMR-stale fiber state.
+  const tagged = el.closest<HTMLElement>('[data-slide-loc]');
+  if (tagged) {
+    const loc = tagged.dataset.slideLoc;
+    if (loc) {
+      const idx = loc.indexOf(':');
+      if (idx > 0) {
+        const line = Number(loc.slice(0, idx));
+        const column = Number(loc.slice(idx + 1));
+        if (Number.isFinite(line) && Number.isFinite(column)) {
+          return { line, column, anchor: tagged };
+        }
+      }
+    }
+  }
+
+  // Fallback for JSX rendered from imported component files (which the
+  // loc-tags plugin doesn't transform).
+  const needle = `/slides/${slideId}/index.tsx`;
+  let fiber = getFiber(el);
+  let anchor: HTMLElement = el;
+  while (fiber) {
+    const src = getSource(fiber);
+    const isHost = fiber.stateNode instanceof HTMLElement;
+    if (
+      src?.fileName &&
+      normalizeDebugFileName(src.fileName).endsWith(needle) &&
+      src.lineNumber &&
+      (!opts?.hostOnly || isHost)
+    ) {
+      return {
+        line: src.lineNumber,
+        column: src.columnNumber ?? 0,
+        anchor: isHost ? (fiber.stateNode as HTMLElement) : anchor,
+      };
+    }
+    if (isHost) {
+      anchor = fiber.stateNode as HTMLElement;
+    }
+    fiber = fiber.return;
+  }
+  return null;
+}

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

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type SlideComment = {
+  id: string;
+  line: number;
+  ts: string;
+  note: string;
+  hint?: string;
+};
+
+type ListResponse = { comments: SlideComment[] };
+
+export function useComments(slideId: string) {
+  const [comments, setComments] = useState<SlideComment[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const refetch = useCallback(async () => {
+    if (!slideId) return;
+    try {
+      const res = await fetch(`/__comments?slideId=${encodeURIComponent(slideId)}`);
+      if (!res.ok) {
+        setError(`GET /__comments → ${res.status}`);
+        return;
+      }
+      const data = (await res.json()) as ListResponse;
+      setComments(data.comments);
+      setError(null);
+    } catch (e) {
+      setError(String((e as Error).message ?? e));
+    }
+  }, [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({ slideId, line, column, text }),
+      });
+      if (!res.ok) {
+        const body = (await res.json().catch(() => ({}))) as { error?: string };
+        throw new Error(body.error ?? `POST /__comments/add → ${res.status}`);
+      }
+      await refetch();
+    },
+    [slideId, refetch],
+  );
+
+  const remove = useCallback(
+    async (id: string) => {
+      const res = await fetch(`/__comments/${id}?slideId=${encodeURIComponent(slideId)}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) throw new Error(`DELETE /__comments/${id} → ${res.status}`);
+      await refetch();
+    },
+    [slideId, refetch],
+  );
+
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    const handler = () => refetch();
+    import.meta.hot.on('vite:afterUpdate', handler);
+    return () => {
+      import.meta.hot?.off('vite:afterUpdate', handler);
+    };
+  }, [refetch]);
+
+  return { comments, error, refetch, add, remove };
+}

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

@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+
+export type EditOp =
+  | { 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 };
+
+export type Edit = { line: number; column: number; ops: EditOp[] };
+
+export type EditResult = { ok: boolean; error?: string };
+
+export class NoOpEditError extends Error {
+  constructor() {
+    super(
+      'Edit completed but the source file did not change — the target JSX may already match, or the target element may not be directly editable here.',
+    );
+    this.name = 'NoOpEditError';
+  }
+}
+
+export function useEditor(slideId: string) {
+  const applyEdit = useCallback(
+    async (line: number, column: number, ops: EditOp[]) => {
+      const res = await fetch('/__edit', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ slideId, line, column, ops }),
+      });
+      const body = (await res.json().catch(() => ({}))) as { error?: string; changed?: boolean };
+      if (!res.ok) {
+        throw new Error(body.error ?? `POST /__edit → ${res.status}`);
+      }
+      if (body.changed === false) {
+        throw new NoOpEditError();
+      }
+    },
+    [slideId],
+  );
+
+  // Batch many element edits into one file write and one HMR tick.
+  // Returns one result per input edit so callers can keep failed
+  // edits buffered while clearing the ones that landed.
+  const applyEdits = useCallback(
+    async (edits: Edit[]): Promise<EditResult[]> => {
+      if (edits.length === 0) return [];
+      const res = await fetch('/__edit/batch', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ slideId, edits }),
+      });
+      const body = (await res.json().catch(() => ({}))) as {
+        error?: string;
+        results?: EditResult[];
+      };
+      if (!res.ok) {
+        throw new Error(body.error ?? `POST /__edit/batch → ${res.status}`);
+      }
+      return body.results ?? [];
+    },
+    [slideId],
+  );
+
+  return { applyEdit, applyEdits };
+}