@drawnagency/primitives 0.1.38 → 0.1.40

package/src/components/primitives/MediaSettingsForms.tsx

@@ -7,14 +7,17 @@ import { Select } from "../shared/Select";
 export function ImageSettingsForm({
   border,
   objectFit,
+  invertFrom: initialInvertFrom,
   onChange,
 }: {
   border?: boolean;
   objectFit?: "cover" | "contain";
-  onChange: (update: { border?: boolean; objectFit?: "cover" | "contain" }) => void;
+  invertFrom?: string;
+  onChange: (update: { border?: boolean; objectFit?: "cover" | "contain"; invertFrom?: string }) => void;
 }) {
   const [itemBorder, setItemBorder] = useState(border);
   const [fit, setFit] = useState(objectFit);
+  const [invertFrom, setInvertFrom] = useState(initialInvertFrom ?? "");
 
   return (
     <div className="space-y-4">
@@ -24,7 +27,7 @@ export function ImageSettingsForm({
         onChange={(v) => {
           const val = (v || undefined) as "cover" | "contain" | undefined;
           setFit(val);
-          onChange({ border: itemBorder, objectFit: val });
+          onChange({ border: itemBorder, objectFit: val, invertFrom: invertFrom || undefined });
         }}
         options={[
           { value: "", label: "Default (inherit from grid)" },
@@ -32,12 +35,25 @@ export function ImageSettingsForm({
           { value: "cover", label: "Crop to fill" },
         ]}
       />
+      <Select
+        label="Invert colors"
+        value={invertFrom}
+        onChange={(v) => {
+          setInvertFrom(v);
+          onChange({ border: itemBorder, objectFit: fit, invertFrom: v || undefined });
+        }}
+        options={[
+          { value: "", label: "None" },
+          { value: "light", label: "Invert on light theme" },
+          { value: "dark", label: "Invert on dark theme" },
+        ]}
+      />
       <Checkbox
         checked={itemBorder ?? false}
         onChange={(v) => {
           const val = v || undefined;
           setItemBorder(val);
-          onChange({ border: val, objectFit: fit });
+          onChange({ border: val, objectFit: fit, invertFrom: invertFrom || undefined });
         }}
         label="Override border settings"
       />
@@ -48,18 +64,20 @@ export function ImageSettingsForm({
 export function DoDontImageSettingsForm({
   border,
   objectFit,
+  invertFrom,
   doDont: initialDoDont,
   onChange,
 }: {
   border?: boolean;
   objectFit?: "cover" | "contain";
+  invertFrom?: string;
   doDont: "do" | "dont";
-  onChange: (update: { border?: boolean; objectFit?: "cover" | "contain"; doDont: "do" | "dont" }) => void;
+  onChange: (update: { border?: boolean; objectFit?: "cover" | "contain"; invertFrom?: string; doDont: "do" | "dont" }) => void;
 }) {
   const [doDont, setDoDont] = useState<"do" | "dont">(initialDoDont);
-  const latestRef = useRef<{ border?: boolean; objectFit?: "cover" | "contain" }>({ border, objectFit });
+  const latestRef = useRef<{ border?: boolean; objectFit?: "cover" | "contain"; invertFrom?: string }>({ border, objectFit, invertFrom });
 
-  const handleBaseChange = (updated: { border?: boolean; objectFit?: "cover" | "contain" }) => {
+  const handleBaseChange = (updated: { border?: boolean; objectFit?: "cover" | "contain"; invertFrom?: string }) => {
     latestRef.current = updated;
     onChange({ ...updated, doDont });
   };
@@ -69,6 +87,7 @@ export function DoDontImageSettingsForm({
       <ImageSettingsForm
         border={border}
         objectFit={objectFit}
+        invertFrom={invertFrom}
         onChange={handleBaseChange}
       />
       <hr className="border-base-200" />

package/src/components/primitives/ResolvedMedia.tsx

@@ -9,6 +9,7 @@ interface ResolvedMediaProps {
   alt?: string;
   className?: string;
   imgClassName?: string;
+  invertFrom?: string;
 }
 
 export function ResolvedMedia({
@@ -18,6 +19,7 @@ export function ResolvedMedia({
   alt: propAlt,
   className,
   imgClassName,
+  invertFrom,
 }: ResolvedMediaProps) {
   const resolved = useResolvedMedia(imageId);
   const src = propSrc || resolved.src;
@@ -26,7 +28,12 @@ export function ResolvedMedia({
   const alt = propAlt ?? resolved.alt;
   const kind = resolved.kind;
 
-  const mediaClass = cn("h-full w-full", imgClassName);
+  const invertClass =
+    invertFrom === "light" ? "invert dark:invert-0" :
+    invertFrom === "dark" ? "dark:invert" :
+    undefined;
+
+  const mediaClass = cn("h-full w-full", imgClassName, invertClass);
 
   return (
     <div className={className}>

package/src/components/sections/MediaGrid/MediaGrid.tsx

@@ -77,6 +77,7 @@ function MediaGridEditable({ media, columns, square, border, crop, showCaptions,
         <DoDontImageSettingsForm
           border={item.border}
           objectFit={item.objectFit}
+          invertFrom={item.invertFrom}
           doDont={item.doDont}
           onChange={(updated) => {
             const newMedia = media.map((m, i) => i === index ? { ...m, ...updated } : m);
@@ -90,6 +91,7 @@ function MediaGridEditable({ media, columns, square, border, crop, showCaptions,
         <ImageSettingsForm
           border={item.border}
           objectFit={item.objectFit}
+          invertFrom={item.invertFrom}
           onChange={(updated) => {
             const newMedia = media.map((m, i) => i === index ? { ...m, ...updated } : m);
             onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts } as SectionContent);
@@ -173,6 +175,7 @@ function MediaGridItem({
       alt={itemAny.alt as string | undefined}
       className="h-full w-full"
       imgClassName={fitClass}
+      invertFrom={item.invertFrom}
     />
   );
 

package/src/components/shell/EditorShell.tsx

@@ -8,6 +8,7 @@ import type { Audience } from "../../auth/types";
 import type { MediaManifest } from "../../media/types";
 import type { QueueItem } from "../../media/queue";
 import { SiteConfigSchema } from "../../schemas/site-config";
+import { ensureSanitizer } from "../../lib/sanitize";
 import { EditorProvider, useEditorContext } from "./EditorContext";
 import { EditorModalProvider, useEditorModal } from "./EditorModalContext";
 import { EditorModal } from "./EditorModal";
@@ -112,6 +113,7 @@ export default function EditorShell({
   const siteIndexRef = useRef<SiteIndex>({ siteId, order: [], sections: {} });
   const fontLinkRef = useRef<HTMLLinkElement | null>(null);
   useEffect(() => { siteIndexRef.current = siteIndex; }, [siteIndex]);
+  useEffect(() => { void ensureSanitizer(); }, []);
 
   const persistence = useEditorPersistence(siteIndexRef);
 
@@ -188,6 +190,7 @@ export default function EditorShell({
     root.style.setProperty("--color-primary-contrast", config.primaryContrast);
     root.style.setProperty("--font-heading", `${config.headingFont}, system-ui, sans-serif`);
     root.style.setProperty("--font-body", `${config.bodyFont}, system-ui, sans-serif`);
+    root.style.setProperty("--heading-text-transform", config.uppercaseHeadings ? "uppercase" : "none");
 
     if (config.googleFontsUrl) {
       if (fontLinkRef.current?.href !== config.googleFontsUrl) {

package/src/components/shell/MediaLibraryModal.tsx

@@ -4,7 +4,7 @@ import { cn } from "../../lib/cn";
 import { Button } from "../shared/Button";
 import { Select } from "../shared/Select";
 import type { MediaItem, MediaKind } from "../../media/types";
-import { displayFilenameExt, mimeToExt } from "../../media/utils";
+import { displayFilename, mimeToExt } from "../../media/utils";
 
 export interface MediaLibraryModalProps {
   mode: "select" | "manage";
@@ -39,9 +39,6 @@ function thumbnailSrc(item: MediaItem, localUrls: Record<string, string>): strin
   return `/api/media/${item.id}/poster.webp`;
 }
 
-function displayFilename(item: MediaItem): string {
-  return `${item.originalName}${displayFilenameExt(item.mimeType)}`;
-}
 
 function UploadZone({ onUpload }: { onUpload: (files: File[]) => void }) {
   const [dragging, setDragging] = useState(false);
@@ -342,7 +339,7 @@ export function MediaLibraryModal({
                   {/* Filename overlay — bottom, visible on hover */}
                   <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent px-2 pb-1.5 pt-4 opacity-0 transition-opacity group-hover:opacity-100">
                     <p className="truncate text-[11px] text-white">
-                      {displayFilename(item)}
+                      {displayFilename(item.originalName, item.mimeType)}
                     </p>
                   </div>
                 </div>

package/src/components/shell/SiteSettingsDisplay.tsx

@@ -1,3 +1,4 @@
+import { Checkbox } from "../shared/Checkbox";
 import { ColorPicker } from "../shared/ColorPicker";
 import { FontPicker } from "../shared/FontPicker";
 import { Input } from "../shared/Input";
@@ -68,6 +69,12 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
         onChange={(family) => handleFontChange("headingFont", family)}
       />
 
+      <Checkbox
+        checked={siteConfig.uppercaseHeadings}
+        onChange={(v) => update({ uppercaseHeadings: v })}
+        label="Uppercase headings"
+      />
+
       <FontPicker
         label="Body font"
         value={siteConfig.bodyFont}

package/src/components/shell/SiteSettingsModal.tsx

@@ -29,7 +29,7 @@ type TabId = "users" | "viewer-access" | "display";
 
 export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigChange, onAudiencesChange, capabilities, currentUser }: Props) {
   const tabs: { id: TabId; label: string; show: boolean }[] = [
-    { id: "users", label: "Users", show: capabilities.userManagement },
+    { id: "users", label: "Users", show: capabilities.userManagement && currentUser?.role === "owner" },
     { id: "viewer-access", label: "Viewer Access", show: true },
     { id: "display", label: "Display", show: true },
   ];

package/src/hooks/useBuildStatus.ts

@@ -25,8 +25,10 @@ export function useBuildStatus(): BuildStatusResult {
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const clearRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const fadeRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const isPolling = useRef(false);
+  const mountedRef = useRef(true);
 
   const stopTimer = useCallback(() => {
     if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; }
@@ -61,6 +63,8 @@ export function useBuildStatus(): BuildStatusResult {
 
   const handleStatusUpdate = useCallback(
     (data: BuildStatusResponse | null, isInitialLoad: boolean) => {
+      if (!mountedRef.current) return;
+
       if (!data) {
         if (isInitialLoad) {
           setState("idle");
@@ -80,13 +84,17 @@ export function useBuildStatus(): BuildStatusResult {
         stopTimer();
         if (data.state === "ready") {
           clearRef.current = setTimeout(() => {
+            if (!mountedRef.current) return;
             setState("fading");
-            clearRef.current = setTimeout(() => setState("idle"), FADE_DURATION);
+            fadeRef.current = setTimeout(() => {
+              if (!mountedRef.current) return;
+              setState("idle");
+            }, FADE_DURATION);
           }, AUTO_CLEAR_DELAY);
         }
       }
     },
-    [stopPolling],
+    [stopPolling, stopTimer],
   );
 
   const startPolling = useCallback(() => {
@@ -117,11 +125,13 @@ export function useBuildStatus(): BuildStatusResult {
 
     return () => {
       cancelled = true;
+      mountedRef.current = false;
       stopPolling();
       stopTimer();
       if (clearRef.current) clearTimeout(clearRef.current);
+      if (fadeRef.current) clearTimeout(fadeRef.current);
     };
-  }, [fetchStatus, handleStatusUpdate, startPolling, stopPolling]);
+  }, [fetchStatus, handleStatusUpdate, startPolling, stopPolling, stopTimer]);
 
   const startTracking = useCallback(() => {
     if (clearRef.current) { clearTimeout(clearRef.current); clearRef.current = null; }

package/src/hooks/useEditorPersistence.ts

@@ -25,15 +25,27 @@ export function useEditorPersistence(siteIndexRef: React.RefObject<SiteIndex>) {
       sectionId,
       content,
     }));
+    const wasIndexDirty = s.indexDirty;
 
+    // Clear optimistically so new edits during the await go into a fresh set
     s.pendingSections = new Map();
-    const wasIndexDirty = s.indexDirty;
     s.indexDirty = false;
 
-    await persistAll(
-      entries,
-      wasIndexDirty ? siteIndexRef.current : undefined,
-    );
+    try {
+      await persistAll(
+        entries,
+        wasIndexDirty ? siteIndexRef.current : undefined,
+      );
+    } catch (err) {
+      // Restore: merge back any entries that weren't re-dirtied during the await
+      for (const { sectionId, content } of entries) {
+        if (!s.pendingSections.has(sectionId)) {
+          s.pendingSections.set(sectionId, content);
+        }
+      }
+      if (wasIndexDirty) s.indexDirty = true;
+      console.error("Failed to flush to Dexie:", err);
+    }
   }, [siteIndexRef]);
 
   const scheduleFlush = useCallback(() => {
@@ -44,8 +56,9 @@ export function useEditorPersistence(siteIndexRef: React.RefObject<SiteIndex>) {
   useEffect(() => {
     return () => {
       if (flushTimerRef.current) clearTimeout(flushTimerRef.current);
+      void flushToDexie();
     };
-  }, []);
+  }, [flushToDexie]);
 
   const markSectionDirty = useCallback(
     (sectionId: string, content: SectionContent) => {

package/src/hooks/useEditorPublish.ts

@@ -62,6 +62,7 @@ export function useEditorPublish({
   const [publishAction, setPublishAction] = useState<PublishAction>("idle");
   const [publishFeedback, setPublishFeedback] = useState<string | null>(null);
   const feedbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const inFlightRef = useRef(false);
 
   useEffect(() => {
     return () => {
@@ -184,11 +185,16 @@ export function useEditorPublish({
       throw new Error(errorBody.error || "Save failed");
     }
 
-    return response.json();
+    const responseData = await response.json().catch(() => null);
+    if (!responseData?.sha) {
+      throw new Error("Save response missing SHA");
+    }
+    return responseData;
   }
 
   const handleSave = useCallback(async () => {
-    if (!siteConfig) return;
+    if (!siteConfig || inFlightRef.current) return;
+    inFlightRef.current = true;
 
     setPublishAction("saving");
     setPublishFeedback(null);
@@ -222,9 +228,10 @@ export function useEditorPublish({
       console.error("Save failed:", error);
       showFeedback("Save failed", 5000);
     } finally {
+      inFlightRef.current = false;
       setPublishAction("idle");
     }
-  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback]);
+  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, deletedSectionIds, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback]);
 
   const handlePublish = useCallback(async () => {
     setPublishAction("publishing");
@@ -241,7 +248,11 @@ export function useEditorPublish({
         throw new Error(errorBody.error || "Publish failed");
       }
 
-      const { sha } = await response.json();
+      const responseData = await response.json().catch(() => null);
+      if (!responseData?.sha) {
+        throw new Error("Publish response missing SHA");
+      }
+      const { sha } = responseData;
 
       onShasUpdated(null, sha);
       onPublishComplete?.();
@@ -254,7 +265,8 @@ export function useEditorPublish({
   }, [onShasUpdated, showFeedback, onPublishComplete]);
 
   const handleSaveAndPublish = useCallback(async () => {
-    if (!siteConfig) return;
+    if (!siteConfig || inFlightRef.current) return;
+    inFlightRef.current = true;
 
     setPublishAction("saving");
     setPublishFeedback(null);
@@ -287,7 +299,11 @@ export function useEditorPublish({
         throw new Error(errorBody.error || "Publish failed");
       }
 
-      const { sha } = await publishResponse.json();
+      const publishData = await publishResponse.json().catch(() => null);
+      if (!publishData?.sha) {
+        throw new Error("Publish response missing SHA");
+      }
+      const { sha } = publishData;
 
       if (hasLocalEdits) {
         await discardLocalChanges();
@@ -304,6 +320,7 @@ export function useEditorPublish({
       console.error("Publish failed:", error);
       showFeedback("Publish failed", 5000);
     } finally {
+      inFlightRef.current = false;
       setPublishAction("idle");
     }
   }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback, onPublishComplete]);

package/src/hooks/useMediaPipeline.ts

@@ -59,6 +59,7 @@ export function useMediaPipeline({
 
   const queueRef = useRef<ProcessingQueue | null>(null);
   const uploadCallbacksRef = useRef<Map<string, (imageId: string) => void>>(new Map());
+  const destroyedRef = useRef(false);
 
   // --- Processing queue ---
 
@@ -68,6 +69,7 @@ export function useMediaPipeline({
 
   useEffect(() => {
     if (!siteConfig) return;
+    destroyedRef.current = false;
     const mediaConfig = siteConfig.media;
     const queue = new ProcessingQueue({
       sizes: mediaConfig.sizes,
@@ -93,6 +95,7 @@ export function useMediaPipeline({
             width: number,
             height: number,
           ) => {
+            if (destroyedRef.current) return;
             const item: LibraryMediaItem = {
               id: event.item.hash,
               hash: event.item.hash,
@@ -163,7 +166,11 @@ export function useMediaPipeline({
       },
     });
     queueRef.current = queue;
-    return () => queue.destroy();
+    return () => {
+      destroyedRef.current = true;
+      queue.destroy();
+      uploadCallbacksRef.current = new Map();
+    };
   // eslint-disable-next-line react-hooks/exhaustive-deps -- rebuild only when processing params change, not on every siteConfig reference change
   }, [mediaConfigKey, setLocalChangesExist]);
 
@@ -198,14 +205,20 @@ export function useMediaPipeline({
     const idSet = new Set(ids);
     const pendingIds = new Set(pendingMediaItems.filter((i) => idSet.has(i.id)).map((i) => i.id));
 
-    for (const id of ids) {
-      if (pendingIds.has(id)) {
-        await removePendingMediaItem(id);
-      } else {
-        await markPendingMediaDeleted(id);
+    try {
+      for (const id of ids) {
+        if (pendingIds.has(id)) {
+          await removePendingMediaItem(id);
+        } else {
+          await markPendingMediaDeleted(id);
+        }
       }
+    } catch (err) {
+      console.error("Failed to delete media:", err);
+      throw err;
     }
 
+    // Only update React state after all Dexie writes succeed
     setPendingMediaItems((prev) => prev.filter((i) => !idSet.has(i.id)));
     setPendingLocalUrls((prev) => {
       const next = { ...prev };
@@ -271,9 +284,11 @@ export function useMediaPipeline({
     const mediaConfig = siteConfig.media;
     if (file.size > mediaConfig.maxFileSize) return;
 
+    const currentQueue = queueRef.current;
     (async () => {
       try {
         const buffer = await file.arrayBuffer();
+        if (queueRef.current !== currentQueue) return; // queue was rebuilt, skip
         const hash = await hashFileBuffer(buffer);
 
         const isDeleted = pendingDeletions.includes(hash);

package/src/lib/dexie.ts

@@ -184,14 +184,13 @@ export async function restoreLocalChanges(): Promise<{
 
 export async function discardLocalChanges(): Promise<void> {
   const database = getDb();
-  await database.transaction("rw", [database.sections, database.siteIndex, database.meta, database.siteConfig, database.pendingMedia, database.pendingMediaDeletions, database.mediaManifest], async () => {
+  await database.transaction("rw", [database.sections, database.siteIndex, database.meta, database.siteConfig, database.pendingMedia, database.pendingMediaDeletions], async () => {
     await database.sections.clear();
     await database.siteIndex.clear();
     await database.meta.clear();
     await database.siteConfig.clear();
     await database.pendingMedia.clear();
     await database.pendingMediaDeletions.clear();
-    await database.mediaManifest.clear();
   });
 }
 

package/src/lib/index.ts

@@ -2,7 +2,7 @@ export { env } from "./env";
 export { cn } from "./cn";
 export { generateNavLinks, toSectionId, type NavItem } from "./nav";
 export { deriveContrast } from "./contrast";
-export { sanitizeHtml } from "./sanitize";
+export { sanitizeHtml, ensureSanitizer } from "./sanitize";
 export { gridColsClass } from "./grid";
 export { getIcon, curatedIcons, type IconEntry } from "./icons";
 export { buildGoogleFontsUrl } from "./google-fonts";

package/src/lib/loader.ts

@@ -24,6 +24,7 @@ export function mergeSiteContent(
   const sections: LoadedSection[] = [];
 
   const canValidate = getAllSchemas().length >= 2;
+  const schema = canValidate ? getSectionSchema() : null;
 
   for (const id of index.order) {
     const raw = sectionFiles[id];
@@ -31,8 +32,8 @@ export function mergeSiteContent(
       console.warn(`Section file missing for id: ${id}, skipping`);
       continue;
     }
-    if (canValidate) {
-      const result = getSectionSchema().safeParse(raw);
+    if (canValidate && schema) {
+      const result = schema.safeParse(raw);
       if (!result.success) {
         const type = (raw as Record<string, unknown>).type ?? "unknown";
         console.warn(`Skipping section "${id}" (type: ${type}): invalid schema`);

package/src/lib/nav.ts

@@ -9,11 +9,19 @@ export interface NavItem {
 }
 
 export function toSectionId(text: string): string {
-  return text
+  const slug = text
+    .normalize("NFKD")
+    .replace(/[̀-ͯ]/g, "")
     .toLowerCase()
     .replace(/[^\w\s-]/g, "")
-    .trim()
-    .replace(/\s+/g, "-");
+    .replace(/\s+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  if (slug) return slug;
+  let hash = 0;
+  for (let i = 0; i < text.length; i++) {
+    hash = ((hash << 5) - hash + text.charCodeAt(i)) | 0;
+  }
+  return `section-${Math.abs(hash).toString(36)}`;
 }
 
 export function generateNavLinks(
@@ -37,6 +45,10 @@ export function generateNavLinks(
     if (!role) continue;
 
     if (role === "h1") {
+      if (content.excludeFromNav) {
+        currentParent = null;
+        continue;
+      }
       currentParent = {
         href: `#${toSectionId(content.heading)}`,
         label: content.heading,

package/src/lib/sanitize.ts

@@ -1,10 +1,29 @@
-let purifier: { sanitize: (html: string) => string } | undefined;
+let purifierPromise: Promise<typeof import("dompurify")> | null = null;
+let purifier: ((html: string) => string) | null = null;
 
 if (typeof window !== "undefined") {
-  import("dompurify").then((m) => { purifier = m.default; });
+  purifierPromise = import("dompurify").then((mod) => {
+    const DOMPurify = mod.default ?? mod;
+    purifier = (html: string) => DOMPurify.sanitize(html);
+    return mod;
+  });
 }
 
+/**
+ * Synchronous sanitizer — returns sanitized HTML if DOMPurify has loaded,
+ * otherwise returns raw HTML. Call `ensureSanitizer()` during component mount
+ * to guarantee the purifier is ready before first render.
+ */
 export function sanitizeHtml(html: string): string {
   if (!html) return "";
-  return purifier ? purifier.sanitize(html) : html;
+  return purifier ? purifier(html) : html;
+}
+
+/**
+ * Await this during component mount (e.g. useEffect) to guarantee
+ * DOMPurify is loaded before `sanitizeHtml` is called.
+ */
+export async function ensureSanitizer(): Promise<void> {
+  if (typeof window === "undefined") return;
+  if (!purifier && purifierPromise) await purifierPromise;
 }

package/src/lib/text.ts

@@ -1,5 +1,9 @@
 export function stripHtmlToPlainText(html: string): string {
-  return html.replace(/<\/[^>]+>/g, " ").replace(/<[^>]*>/g, "").replace(/\s+/g, " ").trim();
+  return html
+    .replace(/<(script|style)\b[^>]*>[\s\S]*?<\/\1>/gi, "")
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
 }
 
 export function truncate(text: string, maxLength: number): string {

package/src/media/queue.ts

@@ -156,7 +156,9 @@ export class ProcessingQueue {
   }
 
   destroy(): void {
-    for (const [id, worker] of this.activeWorkers) {
+    for (const [id, worker] of Array.from(this.activeWorkers)) {
+      worker.onmessage = null;
+      worker.onerror = null;
       worker.terminate();
       this.activeWorkers.delete(id);
     }

package/src/media/utils.ts

@@ -46,3 +46,11 @@ export function displayFilenameExt(mime: string): string {
   const ext = MIME_TO_EXT[mime];
   return ext ? `.${ext}` : "";
 }
+
+export function displayFilename(originalName: string, mimeType: string): string {
+  const ext = MIME_TO_EXT[mimeType];
+  if (!ext) return originalName;
+  const suffix = `.${ext}`;
+  if (originalName.endsWith(suffix)) return originalName;
+  return `${originalName}${suffix}`;
+}