@open-slide/core 1.3.0 → 1.5.0

package/src/app/components/asset-view.tsx

@@ -30,10 +30,14 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   type AssetEntry,
+  type AssetUsage,
   fetchSvgAsFile,
+  listAssetUsages,
   renamedCopy,
+  revertAssetUsage,
   type SvglItem,
   searchSvgl,
   useAssets,
@@ -41,7 +45,11 @@ import {
 import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 
-type Props = { slideId: string };
+type Props = { slideId: string | null };
+
+type Scope = 'slide' | 'global';
+
+const GLOBAL_SLIDE_ID = '@global';
 
 type ConflictState = {
   file: File;
@@ -49,11 +57,15 @@ type ConflictState = {
 };
 
 export function AssetView({ slideId }: Props) {
-  const { assets, loading, available, upload, rename, remove } = useAssets(slideId);
+  const lockedToGlobal = slideId === null;
+  const [scope, setScope] = useState<Scope>(lockedToGlobal ? 'global' : 'slide');
+  const effectiveSlideId = scope === 'global' || slideId === null ? GLOBAL_SLIDE_ID : slideId;
+  const { assets, loading, available, upload, rename, remove } = useAssets(effectiveSlideId);
   const [dragActive, setDragActive] = useState(false);
   const [conflict, setConflict] = useState<ConflictState | null>(null);
   const [preview, setPreview] = useState<AssetEntry | null>(null);
   const [confirmDelete, setConfirmDelete] = useState<AssetEntry | null>(null);
+  const [confirmDeleteUsages, setConfirmDeleteUsages] = useState<AssetUsage[] | null>(null);
   const [renaming, setRenaming] = useState<string | null>(null);
   const [logoSearchOpen, setLogoSearchOpen] = useState(false);
   const dragDepth = useRef(0);
@@ -133,10 +145,21 @@ export function AssetView({ slideId }: Props) {
       }}
     >
       <div className="flex shrink-0 items-center justify-between gap-3 border-b border-hairline bg-sidebar px-6 py-3">
-        <div className="min-w-0">
-          <span className="eyebrow">{t.asset.eyebrow}</span>
-          <p className="mt-0.5 truncate text-[12px] text-muted-foreground">
-            <span className="font-mono text-[11.5px]">slides/{slideId}/assets/</span>
+        <div className="flex min-w-0 items-center gap-3">
+          {lockedToGlobal ? (
+            <span className="eyebrow">{t.asset.eyebrow}</span>
+          ) : (
+            <Tabs value={scope} onValueChange={(next) => setScope(next as Scope)}>
+              <TabsList>
+                <TabsTrigger value="slide">{t.asset.scopeSlide}</TabsTrigger>
+                <TabsTrigger value="global">{t.asset.scopeGlobal}</TabsTrigger>
+              </TabsList>
+            </Tabs>
+          )}
+          <p className="min-w-0 truncate text-[12px] text-muted-foreground">
+            <span className="font-mono text-[11.5px]">
+              {scope === 'global' ? 'assets/' : `slides/${slideId}/assets/`}
+            </span>
             {!loading && (
               <>
                 <span className="mx-2 opacity-50">·</span>
@@ -226,7 +249,13 @@ export function AssetView({ slideId }: Props) {
                   asset={asset}
                   onPreview={() => setPreview(asset)}
                   onRename={() => setRenaming(asset.name)}
-                  onDelete={() => setConfirmDelete(asset)}
+                  onDelete={() => {
+                    setConfirmDelete(asset);
+                    setConfirmDeleteUsages(null);
+                    listAssetUsages(effectiveSlideId, asset.name)
+                      .then((u) => setConfirmDeleteUsages(u))
+                      .catch(() => setConfirmDeleteUsages([]));
+                  }}
                 />
               ),
             )}
@@ -263,18 +292,46 @@ export function AssetView({ slideId }: Props) {
       {confirmDelete && (
         <DeleteDialog
           asset={confirmDelete}
-          onCancel={() => setConfirmDelete(null)}
+          usages={confirmDeleteUsages}
+          onCancel={() => {
+            setConfirmDelete(null);
+            setConfirmDeleteUsages(null);
+          }}
           onConfirm={async () => {
             const target = confirmDelete;
+            const usages = confirmDeleteUsages ?? [];
             setConfirmDelete(null);
+            setConfirmDeleteUsages(null);
+            const assetPath =
+              scope === 'global' ? `@assets/${target.name}` : `./assets/${target.name}`;
+            for (const u of usages) {
+              const rev = await revertAssetUsage(u.slideId, assetPath);
+              if (!rev.ok) {
+                toast.error(format(t.asset.toastRevertFailed, { slideId: u.slideId }));
+                return;
+              }
+            }
             const res = await remove(target.name);
-            if (!res.ok) toast.error(format(t.asset.toastDeleteFailed, { status: res.status }));
-            else toast.success(format(t.asset.toastDeleted, { name: target.name }));
+            if (!res.ok) {
+              toast.error(format(t.asset.toastDeleteFailed, { status: res.status }));
+              return;
+            }
+            const totalUsages = usages.reduce((acc, u) => acc + u.count, 0);
+            if (totalUsages > 0) {
+              toast.success(
+                format(t.asset.toastDeletedWithRevert, {
+                  name: target.name,
+                  count: totalUsages,
+                }),
+              );
+            } else {
+              toast.success(format(t.asset.toastDeleted, { name: target.name }));
+            }
           }}
         />
       )}
 
-      {preview && <PreviewDialog asset={preview} onClose={() => setPreview(null)} />}
+      {preview && <PreviewDialog asset={preview} scope={scope} onClose={() => setPreview(null)} />}
 
       {logoSearchOpen && (
         <LogoSearchDialog
@@ -498,14 +555,19 @@ function ConflictDialog({
 
 function DeleteDialog({
   asset,
+  usages,
   onCancel,
   onConfirm,
 }: {
   asset: AssetEntry;
+  usages: AssetUsage[] | null;
   onCancel: () => void;
   onConfirm: () => void;
 }) {
   const t = useLocale();
+  const inUse = (usages?.length ?? 0) > 0;
+  const totalUses = usages?.reduce((acc, u) => acc + u.count, 0) ?? 0;
+  const slideCount = usages?.length ?? 0;
   const [descPrefix, descSuffix] = t.asset.deleteAssetDescription.split('{name}');
   return (
     <Dialog open onOpenChange={(open) => !open && onCancel()}>
@@ -513,17 +575,40 @@ function DeleteDialog({
         <DialogHeader>
           <DialogTitle>{t.asset.deleteAssetTitle}</DialogTitle>
           <DialogDescription>
-            {descPrefix}
-            <span className="font-mono">{asset.name}</span>
-            {descSuffix}
+            {inUse ? (
+              <>
+                {format(t.asset.deleteAssetInUseDescription, {
+                  name: asset.name,
+                  count: totalUses,
+                  slides: slideCount,
+                })}{' '}
+                {t.asset.deleteAssetInUseHint}
+              </>
+            ) : (
+              <>
+                {descPrefix}
+                <span className="font-mono">{asset.name}</span>
+                {descSuffix}
+              </>
+            )}
           </DialogDescription>
         </DialogHeader>
+        {inUse && usages && (
+          <ul className="max-h-40 overflow-y-auto rounded-[5px] border border-hairline bg-muted/40 px-3 py-2 font-mono text-[11.5px] leading-relaxed">
+            {usages.map((u) => (
+              <li key={u.slideId} className="flex items-center justify-between gap-3">
+                <span className="truncate">{u.slideId}</span>
+                <span className="text-muted-foreground">×{u.count}</span>
+              </li>
+            ))}
+          </ul>
+        )}
         <DialogFooter>
           <Button variant="outline" onClick={onCancel}>
             {t.common.cancel}
           </Button>
-          <Button variant="destructive" onClick={onConfirm}>
-            {t.common.delete}
+          <Button variant="destructive" onClick={onConfirm} disabled={usages === null}>
+            {inUse ? t.asset.deleteAndRevert : t.common.delete}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -542,9 +627,17 @@ function NoResultsMessage({ query, t }: { query: string; t: ReturnType<typeof us
   );
 }
 
-function PreviewDialog({ asset, onClose }: { asset: AssetEntry; onClose: () => void }) {
+function PreviewDialog({
+  asset,
+  scope,
+  onClose,
+}: {
+  asset: AssetEntry;
+  scope: Scope;
+  onClose: () => void;
+}) {
   const isImage = asset.mime.startsWith('image/');
-  const importPath = `./assets/${asset.name}`;
+  const importPath = scope === 'global' ? `@assets/${asset.name}` : `./assets/${asset.name}`;
   const t = useLocale();
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>

package/src/app/components/inspector/inspect-overlay.tsx

@@ -31,7 +31,7 @@ export function InspectOverlay() {
     };
 
     const onMove = (e: PointerEvent) => {
-      const el = pickElement(e.clientX, e.clientY);
+      const el = pickInspectorTarget(pickElement(e.clientX, e.clientY));
       if (!el) return setHover(null);
       const hit = findSlideSource(el, slideId, { hostOnly: true });
       if (!hit) return setHover(null);
@@ -40,7 +40,7 @@ export function InspectOverlay() {
 
     const onClick = (e: MouseEvent) => {
       if (e.target instanceof Element && e.target.closest('[data-inspector-ui]')) return;
-      const el = pickElement(e.clientX, e.clientY);
+      const el = pickInspectorTarget(pickElement(e.clientX, e.clientY));
       if (!el) return;
       const hit = findSlideSource(el, slideId, { hostOnly: true });
       if (!hit) return;
@@ -52,7 +52,7 @@ export function InspectOverlay() {
 
     const onDblClick = (e: MouseEvent) => {
       if (e.target instanceof Element && e.target.closest('[data-inspector-ui]')) return;
-      const el = pickElement(e.clientX, e.clientY);
+      const el = pickInspectorTarget(pickElement(e.clientX, e.clientY));
       if (!el) return;
       const hit = findSlideSource(el, slideId, { hostOnly: true });
       if (!hit) return;
@@ -221,3 +221,49 @@ function pickElement(x: number, y: number): HTMLElement | null {
   }
   return null;
 }
+
+const INLINE_TEXT_TAGS = new Set([
+  'B',
+  'CODE',
+  'DEL',
+  'EM',
+  'I',
+  'INS',
+  'MARK',
+  'S',
+  'SMALL',
+  'SPAN',
+  'STRONG',
+  'SUB',
+  'SUP',
+  'U',
+]);
+
+function pickInspectorTarget(el: HTMLElement | null): HTMLElement | null {
+  if (!el) return null;
+  const root = el.closest('[data-inspector-root]');
+  const startedOnInlineText = INLINE_TEXT_TAGS.has(el.tagName);
+  for (let cur: HTMLElement | null = el; cur && root?.contains(cur); cur = cur.parentElement) {
+    if (startedOnInlineText && INLINE_TEXT_TAGS.has(cur.tagName)) continue;
+    if (isEditableTextContainer(cur)) return cur;
+  }
+  return el;
+}
+
+function isEditableTextContainer(el: HTMLElement): boolean {
+  if (!el.textContent?.trim()) return false;
+  return hasOnlyInlineTextChildren(el);
+}
+
+function hasOnlyInlineTextChildren(el: HTMLElement): boolean {
+  for (const child of Array.from(el.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      continue;
+    } else if (child instanceof HTMLElement) {
+      if (child.tagName === 'BR') continue;
+      if (INLINE_TEXT_TAGS.has(child.tagName) && hasOnlyInlineTextChildren(child)) continue;
+    }
+    return false;
+  }
+  return true;
+}