@open-aippt/core 1.13.2

package/src/app/components/history-provider.tsx

@@ -0,0 +1,120 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+export type HistoryEntry = {
+  undo: () => void;
+  redo: () => void;
+  coalesceKey?: string;
+  ts: number;
+};
+
+type HistoryCtx = {
+  canUndo: boolean;
+  canRedo: boolean;
+  record: (entry: Omit<HistoryEntry, 'ts'>) => void;
+  undo: () => void;
+  redo: () => void;
+  clear: () => void;
+  isSuppressed: () => boolean;
+};
+
+const COALESCE_WINDOW_MS = 500;
+
+const Ctx = createContext<HistoryCtx | null>(null);
+
+export function useHistory(): HistoryCtx {
+  const v = useContext(Ctx);
+  if (!v) throw new Error('useHistory must be used inside <HistoryProvider>');
+  return v;
+}
+
+export function HistoryProvider({ children }: { children: ReactNode }) {
+  const [past, setPast] = useState<HistoryEntry[]>([]);
+  const [future, setFuture] = useState<HistoryEntry[]>([]);
+  // Set while invoking an entry's undo/redo so providers can skip
+  // re-recording the resulting state mutation.
+  const suppressedRef = useRef(false);
+
+  const record = useCallback((entry: Omit<HistoryEntry, 'ts'>) => {
+    if (suppressedRef.current) return;
+    const ts = Date.now();
+    setPast((prev) => {
+      const top = prev.at(-1);
+      if (
+        top &&
+        entry.coalesceKey !== undefined &&
+        top.coalesceKey === entry.coalesceKey &&
+        ts - top.ts < COALESCE_WINDOW_MS
+      ) {
+        const merged: HistoryEntry = {
+          undo: top.undo,
+          redo: entry.redo,
+          coalesceKey: entry.coalesceKey,
+          ts,
+        };
+        return [...prev.slice(0, -1), merged];
+      }
+      return [...prev, { ...entry, ts }];
+    });
+    setFuture([]);
+  }, []);
+
+  const undo = useCallback(() => {
+    setPast((prev) => {
+      const top = prev.at(-1);
+      if (!top) return prev;
+      suppressedRef.current = true;
+      try {
+        top.undo();
+      } finally {
+        suppressedRef.current = false;
+      }
+      setFuture((f) => [...f, top]);
+      return prev.slice(0, -1);
+    });
+  }, []);
+
+  const redo = useCallback(() => {
+    setFuture((prev) => {
+      const top = prev.at(-1);
+      if (!top) return prev;
+      suppressedRef.current = true;
+      try {
+        top.redo();
+      } finally {
+        suppressedRef.current = false;
+      }
+      setPast((p) => [...p, top]);
+      return prev.slice(0, -1);
+    });
+  }, []);
+
+  const clear = useCallback(() => {
+    setPast([]);
+    setFuture([]);
+  }, []);
+
+  const isSuppressed = useCallback(() => suppressedRef.current, []);
+
+  const value = useMemo<HistoryCtx>(
+    () => ({
+      canUndo: past.length > 0,
+      canRedo: future.length > 0,
+      record,
+      undo,
+      redo,
+      clear,
+      isSuppressed,
+    }),
+    [past.length, future.length, record, undo, redo, clear, isSuppressed],
+  );
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+}

package/src/app/components/image-placeholder.tsx

@@ -0,0 +1,243 @@
+import { type CSSProperties, type HTMLAttributes, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { uploadWithAutoRename } from '@/lib/assets';
+import { useLocale } from '@/lib/use-locale';
+
+export type ImagePlaceholderProps = {
+  hint: string;
+  width?: number;
+  height?: number;
+  style?: CSSProperties;
+  className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'>;
+
+export function ImagePlaceholder({
+  hint,
+  width,
+  height,
+  style,
+  className,
+  ...rest
+}: ImagePlaceholderProps) {
+  const dims = width && height ? `${width} × ${height}` : null;
+  const [dragActive, setDragActive] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const dragDepth = useRef(0);
+  const t = useLocale();
+
+  const dndProps = import.meta.env.DEV
+    ? {
+        onDragEnter: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          dragDepth.current += 1;
+          setDragActive(true);
+        },
+        onDragOver: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = 'copy';
+        },
+        onDragLeave: () => {
+          dragDepth.current = Math.max(0, dragDepth.current - 1);
+          if (dragDepth.current === 0) setDragActive(false);
+        },
+        onDrop: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          dragDepth.current = 0;
+          setDragActive(false);
+          const file = pickImageFile(e.dataTransfer.files);
+          if (!file) return;
+          const root = e.currentTarget;
+          const slideId = root.closest<HTMLElement>('[data-slide-id]')?.dataset.slideId;
+          const loc = root.dataset.slideLoc;
+          if (!slideId || !loc) return;
+          const idx = loc.indexOf(':');
+          if (idx <= 0) return;
+          const line = Number(loc.slice(0, idx));
+          const column = Number(loc.slice(idx + 1));
+          if (!Number.isFinite(line) || !Number.isFinite(column)) return;
+          setUploading(true);
+          handleDrop(slideId, file, line, column)
+            .catch(() => toast.error(t.imagePlaceholder.uploadFailed))
+            .finally(() => setUploading(false));
+        },
+      }
+    : null;
+
+  return (
+    <div
+      {...rest}
+      {...dndProps}
+      data-slide-placeholder={hint}
+      data-placeholder-w={width}
+      data-placeholder-h={height}
+      role="img"
+      aria-label={hint}
+      style={{
+        position: 'relative',
+        width: width ?? '100%',
+        height: height ?? '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        gap: 14,
+        border: '1px dashed rgba(120, 120, 130, 0.35)',
+        borderRadius: 12,
+        background:
+          'linear-gradient(135deg, rgba(120,120,130,0.06) 0%, rgba(120,120,130,0.02) 50%, rgba(120,120,130,0.06) 100%)',
+        color: 'rgba(90, 90, 100, 0.7)',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif',
+        textAlign: 'center',
+        padding: 24,
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+        ...style,
+      }}
+      className={className}
+    >
+      <PlaceholderIcon />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 6,
+          maxWidth: '85%',
+        }}
+      >
+        <span
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            letterSpacing: '0.14em',
+            textTransform: 'uppercase',
+            opacity: 0.55,
+          }}
+        >
+          Image
+        </span>
+        <span
+          style={{
+            fontSize: 16,
+            fontWeight: 500,
+            lineHeight: 1.4,
+            color: 'rgba(60, 60, 70, 0.85)',
+          }}
+        >
+          {hint}
+        </span>
+        {dims && (
+          <span
+            style={{
+              fontSize: 11,
+              fontVariantNumeric: 'tabular-nums',
+              fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+              opacity: 0.5,
+              marginTop: 2,
+            }}
+          >
+            {dims}
+          </span>
+        )}
+      </div>
+      {import.meta.env.DEV && (dragActive || uploading) && (
+        <DropOverlay
+          label={uploading ? t.imagePlaceholder.uploading : t.imagePlaceholder.dropOverlay}
+        />
+      )}
+    </div>
+  );
+}
+
+function DropOverlay({ label }: { label: string }) {
+  return (
+    <div
+      aria-hidden
+      style={{
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+        borderRadius: 12,
+        border: '2px dashed oklch(0.62 0.18 250)',
+        background: 'oklch(0.62 0.18 250 / 0.08)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <span
+        style={{
+          fontSize: 12,
+          fontWeight: 600,
+          letterSpacing: '0.02em',
+          color: 'oklch(0.45 0.16 250)',
+          background: 'rgba(255,255,255,0.92)',
+          padding: '6px 10px',
+          borderRadius: 6,
+          boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
+        }}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}
+
+function hasImageFile(e: React.DragEvent): boolean {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i] === 'Files') return true;
+  }
+  return false;
+}
+
+function pickImageFile(files: FileList): File | null {
+  for (let i = 0; i < files.length; i++) {
+    const f = files[i];
+    if (f.type.startsWith('image/')) return f;
+  }
+  return null;
+}
+
+async function handleDrop(slideId: string, file: File, line: number, column: number) {
+  const { ok, entry } = await uploadWithAutoRename(slideId, file);
+  if (!ok || !entry) throw new Error('upload failed');
+  const res = await fetch('/__edit', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({
+      slideId,
+      line,
+      column,
+      ops: [{ kind: 'replace-placeholder-with-image', assetPath: `./assets/${entry.name}` }],
+    }),
+  });
+  if (!res.ok) throw new Error(`edit failed (${res.status})`);
+}
+
+function PlaceholderIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ opacity: 0.55 }}
+      role="img"
+      aria-label="image placeholder"
+    >
+      <title>image placeholder</title>
+      <rect x="4" y="6" width="24" height="20" rx="2.5" />
+      <circle cx="11" cy="13" r="2" />
+      <path d="M4 22l7-7 6 6 4-4 7 7" />
+    </svg>
+  );
+}

package/src/app/components/inspector/asset-picker-dialog.tsx

@@ -0,0 +1,196 @@
+import { ArrowDownToLine, Loader2, Upload } from 'lucide-react';
+import type React from 'react';
+import { useCallback, useId, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { type AssetEntry, uploadWithAutoRename, useAssets } from '@/lib/assets';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+export type PickerScope = 'slide' | 'global';
+const GLOBAL_PICKER_SLIDE_ID = '@global';
+
+export function AssetPickerDialog({
+  slideId,
+  onClose,
+  onPick,
+}: {
+  slideId: string;
+  onClose: () => void;
+  onPick: (asset: AssetEntry, scope: PickerScope) => void;
+}) {
+  const [scope, setScope] = useState<PickerScope>('slide');
+  const effectiveSlideId = scope === 'global' ? GLOBAL_PICKER_SLIDE_ID : slideId;
+  const { assets, loading, refresh } = useAssets(effectiveSlideId);
+  const images = assets.filter((a) => a.mime.startsWith('image/'));
+  const t = useLocale();
+  const path = scope === 'global' ? 'assets/' : `slides/${slideId}/assets/`;
+  const [descPrefix, descSuffix] = t.inspector.replaceImageDescription.split('{path}');
+  const [uploading, setUploading] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
+  const dragDepth = useRef(0);
+  const inputId = useId();
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      if (!file.type.startsWith('image/')) return;
+      setUploading(true);
+      try {
+        const { ok, status, entry } = await uploadWithAutoRename(effectiveSlideId, file);
+        if (!ok || !entry) {
+          toast.error(format(t.asset.toastUploadFailed, { status }));
+          return;
+        }
+        await refresh().catch(() => {});
+        onPick(entry, scope);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [effectiveSlideId, scope, refresh, onPick, t],
+  );
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>{t.inspector.replaceImageDialogTitle}</DialogTitle>
+          <DialogDescription>
+            {descPrefix}
+            <span className="font-mono">{path}</span>
+            {descSuffix}
+          </DialogDescription>
+        </DialogHeader>
+        <Tabs value={scope} onValueChange={(next) => setScope(next as PickerScope)}>
+          <TabsList>
+            <TabsTrigger value="slide">{t.asset.scopeSlide}</TabsTrigger>
+            <TabsTrigger value="global">{t.asset.scopeGlobal}</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <label
+          htmlFor={inputId}
+          className={cn(
+            'absolute right-12 top-3.5 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-[5px] border border-border bg-card px-2 text-[12px] font-medium transition-colors',
+            'hover:bg-muted/60 hover:border-foreground/20 active:translate-y-px',
+            uploading && 'pointer-events-none opacity-60',
+          )}
+        >
+          {uploading ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <Upload className="size-3.5" />
+          )}
+          <span>{t.asset.upload}</span>
+        </label>
+        <input
+          id={inputId}
+          type="file"
+          accept="image/*"
+          className="sr-only"
+          disabled={uploading}
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            e.target.value = '';
+            if (file) handleFile(file).catch(() => {});
+          }}
+        />
+        <section
+          aria-label={t.inspector.replaceImageDialogTitle}
+          className="relative max-h-[60vh] overflow-y-auto"
+          onDragEnter={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            dragDepth.current += 1;
+            setDragActive(true);
+          }}
+          onDragOver={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+          }}
+          onDragLeave={() => {
+            dragDepth.current = Math.max(0, dragDepth.current - 1);
+            if (dragDepth.current === 0) setDragActive(false);
+          }}
+          onDrop={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            dragDepth.current = 0;
+            setDragActive(false);
+            const file = e.dataTransfer.files?.[0];
+            if (file) handleFile(file).catch(() => {});
+          }}
+        >
+          {loading ? (
+            <p className="px-1 py-6 text-center text-xs text-muted-foreground">
+              {t.inspector.pickerLoading}
+            </p>
+          ) : images.length === 0 ? (
+            <p className="px-1 py-6 text-center text-xs text-muted-foreground">
+              {t.inspector.pickerEmpty}
+            </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, scope)}
+                  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>
+          )}
+          {dragActive && (
+            <div
+              className="pointer-events-none absolute inset-0 z-10 animate-in fade-in-0 duration-200"
+              aria-hidden
+            >
+              <div className="absolute inset-0 bg-brand/5" />
+              <div className="absolute inset-1 rounded-[8px] border border-dashed border-brand/40" />
+              <div className="absolute inset-x-0 bottom-4 flex justify-center">
+                <div className="flex items-center gap-2 rounded-[6px] border border-border bg-card px-3 py-1.5 text-[12px] font-medium shadow-floating">
+                  <ArrowDownToLine className="size-3.5 text-brand" />
+                  <span>{t.asset.dropToUpload}</span>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function hasFiles(e: React.DragEvent): boolean {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i] === 'Files') return true;
+  }
+  return false;
+}

package/src/app/components/inspector/comment-widget.tsx

@@ -0,0 +1,93 @@
+import { MessageSquare, Trash2, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { format, plural, useLocale } from '@/lib/use-locale';
+import { useInspector } from './inspector-provider';
+
+export function CommentWidget() {
+  const t = useLocale();
+  const { comments, remove, error } = useInspector();
+  const [open, setOpen] = useState(false);
+  const count = comments.length;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (!ref.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [open]);
+
+  return (
+    <div
+      ref={ref}
+      data-inspector-ui
+      className="absolute right-4 bottom-4 z-20 flex flex-col items-end gap-2"
+    >
+      {open && (
+        <div className="w-80 rounded-md border bg-card shadow-xl animate-in fade-in-0 slide-in-from-bottom-2 duration-200">
+          <div className="flex items-center justify-between border-b px-3 py-2">
+            <span className="text-xs font-semibold">
+              {format(plural(count, t.inspector.commentsCount), { count })}
+            </span>
+            <button
+              type="button"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={() => setOpen(false)}
+            >
+              <X className="size-3.5" />
+            </button>
+          </div>
+          {error && <p className="px-3 py-2 text-xs text-red-600">{error}</p>}
+          {count === 0 ? (
+            <p className="px-3 py-6 text-center text-xs text-muted-foreground">
+              {t.inspector.commentsEmpty}
+            </p>
+          ) : (
+            <>
+              <ul className="max-h-72 overflow-auto">
+                {comments.map((c) => (
+                  <li
+                    key={c.id}
+                    className="flex items-start gap-2 border-b px-3 py-2 last:border-0"
+                  >
+                    <div className="min-w-0 flex-1">
+                      <div className="text-[10px] font-mono text-muted-foreground">
+                        {format(t.inspector.commentLineLabel, { n: c.line })}
+                      </div>
+                      <div className="mt-0.5 text-xs break-words">{c.note}</div>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => remove(c.id)}
+                      className="shrink-0 rounded p-1 text-muted-foreground hover:bg-muted hover:text-red-600"
+                      title={t.inspector.commentDeleteAria}
+                    >
+                      <Trash2 className="size-3.5" />
+                    </button>
+                  </li>
+                ))}
+              </ul>
+              <div className="border-t px-3 py-2 text-[11px] text-muted-foreground">
+                {t.inspector.commentsApplyHintPrefix}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono text-foreground">
+                  /apply-comments
+                </code>
+                {t.inspector.commentsApplyHintSuffix}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center gap-2 rounded-full border bg-card px-3 py-2 text-xs font-medium shadow-lg hover:bg-muted"
+      >
+        <MessageSquare className="size-4" />
+        {count}
+      </button>
+    </div>
+  );
+}