@open-slide/core 0.0.9 → 0.0.11

package/src/app/components/ClickNavZones.tsx

@@ -19,7 +19,7 @@ export function ClickNavZones({ onPrev, onNext, canPrev, canNext }: Props) {
         onClick={onPrev}
         disabled={!canPrev}
         data-inspector-ui
-        className="absolute inset-y-0 left-0 z-20 w-[18%] min-w-12"
+        className="absolute inset-y-0 left-0 z-20 w-[18%] min-w-12 md:hidden"
       />
       <button
         type="button"
@@ -27,7 +27,7 @@ export function ClickNavZones({ onPrev, onNext, canPrev, canNext }: Props) {
         onClick={onNext}
         disabled={!canNext}
         data-inspector-ui
-        className="absolute inset-y-0 right-0 z-20 w-[18%] min-w-12"
+        className="absolute inset-y-0 right-0 z-20 w-[18%] min-w-12 md:hidden"
       />
     </>
   );

package/src/app/components/ThumbnailRail.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react';
-import { cn } from '@/lib/utils';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
 import type { Page } from '../lib/sdk';
+import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
 import { SlideCanvas } from './SlideCanvas';
-import { CANVAS_WIDTH, CANVAS_HEIGHT } from '../lib/sdk';
 
 type Props = {
   pages: Page[];

package/src/app/components/inspector/InspectorPanel.tsx

@@ -4,12 +4,20 @@ import {
   AlignLeft,
   AlignRight,
   Bold,
+  ImageIcon,
   Italic,
   Trash2,
   X,
 } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -25,9 +33,11 @@ import { Slider } from '@/components/ui/slider';
 import { Textarea } from '@/components/ui/textarea';
 import { Toggle } from '@/components/ui/toggle';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { type AssetEntry, useAssets } from '@/lib/assets';
 import { findSlideSource } from '@/lib/inspector/fiber';
 import type { SlideComment } from '@/lib/inspector/useComments';
 import type { EditOp } from '@/lib/inspector/useEditor';
+import { cn } from '@/lib/utils';
 import { type SelectedTarget, useInspector } from './InspectorProvider';
 
 const PANEL_W = 340;
@@ -43,6 +53,7 @@ type ElementSnapshot = {
   lineHeight: number | null;
   letterSpacing: number;
   text: string | null;
+  imageSrc: string | null;
 };
 
 export function InspectorPanel() {
@@ -199,6 +210,15 @@ export function InspectorPanel() {
               />
             </Section>
 
+            {pinSnapshot.imageSrc !== null && (
+              <>
+                <Separator />
+                <Section title="Image">
+                  <ImageField slideId={slideId} src={pinSnapshot.imageSrc} apply={apply} />
+                </Section>
+              </>
+            )}
+
             <Separator />
 
             <div className="mt-auto">
@@ -618,6 +638,124 @@ function NumberField({
   );
 }
 
+function ImageField({
+  slideId,
+  src,
+  apply,
+}: {
+  slideId: string;
+  src: string;
+  apply: (ops: EditOp[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-3">
+        <div className="flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-md border bg-[repeating-conic-gradient(theme(colors.muted)_0_25%,transparent_0_50%)] bg-[length:8px_8px]">
+          <img
+            src={src}
+            alt=""
+            className="size-full object-contain"
+            draggable={false}
+            onError={(e) => {
+              e.currentTarget.style.display = 'none';
+            }}
+          />
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="flex-1"
+          onClick={() => setOpen(true)}
+        >
+          <ImageIcon className="size-3.5" />
+          Replace…
+        </Button>
+      </div>
+      {open && (
+        <AssetPickerDialog
+          slideId={slideId}
+          onClose={() => setOpen(false)}
+          onPick={(asset) => {
+            setOpen(false);
+            apply([
+              {
+                kind: 'set-attr-asset',
+                attr: 'src',
+                assetPath: `./assets/${asset.name}`,
+                previewUrl: asset.url,
+              },
+            ]);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function AssetPickerDialog({
+  slideId,
+  onClose,
+  onPick,
+}: {
+  slideId: string;
+  onClose: () => void;
+  onPick: (asset: AssetEntry) => void;
+}) {
+  const { assets, loading } = useAssets(slideId);
+  const images = assets.filter((a) => a.mime.startsWith('image/'));
+  return (
+    <Dialog open onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Replace image</DialogTitle>
+          <DialogDescription>
+            Pick an asset from <span className="font-mono">slides/{slideId}/assets/</span>.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="max-h-[60vh] overflow-y-auto">
+          {loading ? (
+            <p className="px-1 py-6 text-center text-xs text-muted-foreground">Loading…</p>
+          ) : images.length === 0 ? (
+            <p className="px-1 py-6 text-center text-xs text-muted-foreground">
+              No images in this slide's assets folder yet. Add some from the Assets tab.
+            </p>
+          ) : (
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-3">
+              {images.map((asset) => (
+                <button
+                  key={asset.name}
+                  type="button"
+                  onClick={() => onPick(asset)}
+                  className={cn(
+                    'group flex flex-col overflow-hidden rounded-lg border bg-card text-left shadow-sm transition-all',
+                    'hover:-translate-y-0.5 hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none',
+                  )}
+                >
+                  <div className="flex aspect-square w-full items-center justify-center overflow-hidden bg-[repeating-conic-gradient(theme(colors.muted)_0_25%,transparent_0_50%)] bg-[length:12px_12px]">
+                    <img
+                      src={asset.url}
+                      alt=""
+                      className="size-full object-contain"
+                      draggable={false}
+                    />
+                  </div>
+                  <div className="border-t px-2 py-1.5">
+                    <div className="truncate text-[11px] font-medium" title={asset.name}>
+                      {asset.name}
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function CommentsSection({
   comments,
   selected,
@@ -714,6 +852,10 @@ function CommentsSection({
 function readSnapshot(el: HTMLElement): ElementSnapshot {
   const cs = getComputedStyle(el);
   const text = isSimpleTextElement(el) ? (el.textContent ?? '') : null;
+  const imageSrc =
+    el.tagName === 'IMG'
+      ? (el as HTMLImageElement).currentSrc || (el as HTMLImageElement).src || null
+      : null;
 
   return {
     fontSize: parseFloat(cs.fontSize) || 16,
@@ -725,6 +867,7 @@ function readSnapshot(el: HTMLElement): ElementSnapshot {
     lineHeight: parseLineHeight(cs.lineHeight, parseFloat(cs.fontSize) || 16),
     letterSpacing: parseLetterSpacing(cs.letterSpacing),
     text,
+    imageSrc,
   };
 }
 

package/src/app/components/inspector/InspectorProvider.tsx

@@ -19,15 +19,19 @@ export type SelectedTarget = {
   anchor: HTMLElement;
 };
 
+type AssetAttrOp = { assetPath: string; previewUrl: string };
+
 type Bucket = {
   line: number;
   column: number;
   styleOps: Map<string, string | null>;
   textOp: { value: string } | null;
+  attrOps: Map<string, AssetAttrOp>;
   // Pre-edit snapshot of the DOM, captured the first time we touch
-  // each style key / text. Used by `cancelEdits` to revert.
+  // each style key / text / attribute. Used by `cancelEdits` to revert.
   origStyle: Map<string, string>;
   origText: { value: string } | null;
+  origAttrs: Map<string, string | null>;
 };
 
 type InspectorCtx = {
@@ -75,7 +79,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
   const refreshCount = useCallback(() => {
     let n = 0;
     for (const b of pendingRef.current.values()) {
-      if (b.styleOps.size > 0 || b.textOp !== null) n++;
+      if (b.styleOps.size > 0 || b.textOp !== null || b.attrOps.size > 0) n++;
     }
     setPendingCount(n);
   }, []);
@@ -90,8 +94,10 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
           column,
           styleOps: new Map(),
           textOp: null,
+          attrOps: new Map(),
           origStyle: new Map(),
           origText: null,
+          origAttrs: new Map(),
         };
         pendingRef.current.set(key, bucket);
       }
@@ -109,6 +115,15 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
           }
           bucket.textOp = { value: op.value };
           if (anchor.isConnected) anchor.textContent = op.value;
+        } else if (op.kind === 'set-attr-asset') {
+          if (!bucket.origAttrs.has(op.attr)) {
+            bucket.origAttrs.set(
+              op.attr,
+              anchor.hasAttribute(op.attr) ? anchor.getAttribute(op.attr) : null,
+            );
+          }
+          bucket.attrOps.set(op.attr, { assetPath: op.assetPath, previewUrl: op.previewUrl });
+          if (anchor.isConnected) anchor.setAttribute(op.attr, op.previewUrl);
         }
       }
       refreshCount();
@@ -120,10 +135,18 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     const buckets = pendingRef.current;
     if (buckets.size === 0) return;
     const edits: Edit[] = [];
-    for (const { line, column, styleOps, textOp } of buckets.values()) {
+    for (const { line, column, styleOps, textOp, attrOps } of buckets.values()) {
       const list: EditOp[] = [];
       for (const [k, v] of styleOps) list.push({ kind: 'set-style', key: k, value: v });
       if (textOp !== null) list.push({ kind: 'set-text', value: textOp.value });
+      for (const [attr, op] of attrOps) {
+        list.push({
+          kind: 'set-attr-asset',
+          attr,
+          assetPath: op.assetPath,
+          previewUrl: op.previewUrl,
+        });
+      }
       if (list.length > 0) edits.push({ line, column, ops: list });
     }
     pendingRef.current = new Map();
@@ -146,6 +169,10 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       const style = el.style as unknown as Record<string, string>;
       for (const [k, v] of b.origStyle) style[k] = v;
       if (b.origText !== null) el.textContent = b.origText.value;
+      for (const [attr, value] of b.origAttrs) {
+        if (value === null) el.removeAttribute(attr);
+        else el.setAttribute(attr, value);
+      }
     }
     pendingRef.current = new Map();
     setPendingCount(0);
@@ -186,6 +213,9 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       if (bucket.textOp !== null && el.textContent !== bucket.textOp.value) {
         el.textContent = bucket.textOp.value;
       }
+      for (const [attr, op] of bucket.attrOps) {
+        if (el.getAttribute(attr) !== op.previewUrl) el.setAttribute(attr, op.previewUrl);
+      }
     };
 
     const replayAll = () => {

package/src/app/lib/assets.ts

@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type AssetEntry = {
+  name: string;
+  size: number;
+  mtime: number;
+  mime: string;
+  url: string;
+};
+
+export type UploadOptions = { overwrite?: boolean };
+
+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(
+  slideId: string,
+  file: File,
+  opts: UploadOptions = {},
+): Promise<Response> {
+  const qs = opts.overwrite ? '?overwrite=1' : '';
+  return fetch(`/__assets/${slideId}/${encodeURIComponent(file.name)}${qs}`, {
+    method: 'POST',
+    headers: {
+      'content-type': file.type || 'application/octet-stream',
+      'content-length': String(file.size),
+    },
+    body: file,
+  });
+}
+
+async function renameAsset(slideId: string, from: string, to: string): Promise<Response> {
+  return fetch(`/__assets/${slideId}/${encodeURIComponent(from)}`, {
+    method: 'PATCH',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ name: to }),
+  });
+}
+
+async function deleteAsset(slideId: string, name: string): Promise<Response> {
+  return fetch(`/__assets/${slideId}/${encodeURIComponent(name)}`, { method: 'DELETE' });
+}
+
+export type SvglItem = {
+  id: number;
+  title: string;
+  category: string | string[];
+  route: string | { light: string; dark: string };
+  url: string;
+};
+
+export async function searchSvgl(query: string, signal?: AbortSignal): Promise<SvglItem[]> {
+  const q = query.trim();
+  const params = new URLSearchParams();
+  if (q) params.set('q', q);
+  else params.set('limit', '24');
+  const res = await fetch(`/__svgl/search?${params.toString()}`, { signal });
+  // svgl returns 404 when a search has no matches — treat it as an empty list,
+  // not an error.
+  if (res.status === 404) return [];
+  if (!res.ok) throw new Error(`svgl ${res.status}`);
+  return (await res.json()) as SvglItem[];
+}
+
+export function svgProxyUrl(routeUrl: string): string {
+  return `/__svgl/svg?u=${encodeURIComponent(routeUrl)}`;
+}
+
+export async function fetchSvgAsFile(routeUrl: string, filename: string): Promise<File> {
+  const res = await fetch(svgProxyUrl(routeUrl));
+  if (!res.ok) throw new Error(`svgl route ${res.status}`);
+  const blob = await res.blob();
+  return new File([blob], filename, { type: 'image/svg+xml' });
+}
+
+export type UseAssetsResult = {
+  assets: AssetEntry[];
+  loading: boolean;
+  available: boolean;
+  upload: (file: File, opts?: UploadOptions) => Promise<{ ok: boolean; status: number }>;
+  rename: (from: string, to: string) => Promise<{ ok: boolean; status: number }>;
+  remove: (name: string) => Promise<{ ok: boolean; status: number }>;
+  refresh: () => Promise<void>;
+};
+
+const NOOP_RESULT = { ok: false, status: 0 } as const;
+
+export function useAssets(slideId: string): UseAssetsResult {
+  const available = import.meta.env.DEV;
+  const [assets, setAssets] = useState<AssetEntry[]>([]);
+  const [loading, setLoading] = useState(available);
+
+  const refresh = useCallback(async () => {
+    if (!available) return;
+    const next = await listAssets(slideId);
+    setAssets(next);
+  }, [slideId]);
+
+  useEffect(() => {
+    if (!available) return;
+    let cancelled = false;
+    setLoading(true);
+    listAssets(slideId)
+      .then((next) => {
+        if (!cancelled) {
+          setAssets(next);
+          setLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [slideId]);
+
+  useEffect(() => {
+    if (!available || !import.meta.hot) return;
+    const handler = (data: { slideId?: string } | undefined) => {
+      if (!data || data.slideId === slideId) {
+        refresh().catch(() => {});
+      }
+    };
+    import.meta.hot.on('open-slide:assets-changed', handler);
+    return () => {
+      import.meta.hot?.off('open-slide:assets-changed', handler);
+    };
+  }, [slideId, refresh]);
+
+  const upload = useCallback(
+    async (file: File, opts?: UploadOptions) => {
+      if (!available) return NOOP_RESULT;
+      const res = await uploadAsset(slideId, file, opts);
+      if (res.ok) await refresh();
+      return { ok: res.ok, status: res.status };
+    },
+    [slideId, refresh],
+  );
+
+  const rename = useCallback(
+    async (from: string, to: string) => {
+      if (!available) return NOOP_RESULT;
+      const res = await renameAsset(slideId, from, to);
+      if (res.ok) await refresh();
+      return { ok: res.ok, status: res.status };
+    },
+    [slideId, refresh],
+  );
+
+  const remove = useCallback(
+    async (name: string) => {
+      if (!available) return NOOP_RESULT;
+      const res = await deleteAsset(slideId, name);
+      if (res.ok) await refresh();
+      return { ok: res.ok, status: res.status };
+    },
+    [slideId, refresh],
+  );
+
+  return { assets, loading, available, upload, rename, remove, refresh };
+}

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

@@ -135,10 +135,7 @@ export async function exportSlideAsPdf(
     // settled, which matches "page X of N is being processed" mental model.
     const deadline = performance.now() + ANIMATION_TIMEOUT_MS;
     while (performance.now() < deadline) {
-      const settled = frames.reduce(
-        (n, frame) => (isFrameAnimationSettled(frame) ? n + 1 : n),
-        0,
-      );
+      const settled = frames.reduce((n, frame) => (isFrameAnimationSettled(frame) ? n + 1 : n), 0);
       onProgress?.({
         phase: 'processing',
         current: settled,

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

@@ -2,7 +2,8 @@ import { useCallback } from 'react';
 
 export type EditOp =
   | { kind: 'set-style'; key: string; value: string | null }
-  | { kind: 'set-text'; value: string };
+  | { kind: 'set-text'; value: string }
+  | { kind: 'set-attr-asset'; attr: string; assetPath: string; previewUrl: string };
 
 export type Edit = { line: number; column: number; ops: EditOp[] };