@particle-academy/react-fancy 4.8.1 → 4.10.0

package/dist/index.js

@@ -11654,11 +11654,10 @@ function ContentRenderer({
   );
 }
 ContentRenderer.displayName = "ContentRenderer";
-function toHtml(value, outputFormat, unsafe) {
+function toHtml(value, outputFormat, unsafe, valueFormat = "auto") {
   if (!value) return "";
   const raw = (() => {
-    if (outputFormat === "html") return value;
-    const format = detectFormat(value);
+    const format = valueFormat !== "auto" ? valueFormat : outputFormat === "html" ? "html" : detectFormat(value);
     if (format === "html") return value;
     return marked.parse(value, { async: false }).trim();
   })();
@@ -11671,6 +11670,7 @@ function EditorRoot({
   defaultValue = "",
   onChange,
   outputFormat = "html",
+  valueFormat = "auto",
   lineSpacing = 1.6,
   placeholder,
   mode: modeProp,
@@ -11682,13 +11682,13 @@ function EditorRoot({
   const mode = useFieldMode(modeProp);
   const isView = mode === "view";
   const initialHtml = useMemo(
-    () => toHtml(value, outputFormat, unsafe),
+    () => toHtml(value, outputFormat, unsafe, valueFormat),
     // Seed the contentEditable from the LIVE value when (re)entering edit mode.
     // EditorContent reads this once on mount, and it only mounts in edit mode —
     // so this captures the current value on view→edit, not a stale mount snapshot,
     // and does NOT re-run on every keystroke.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isView, outputFormat, unsafe]
+    [isView, outputFormat, unsafe, valueFormat]
   );
   const extensions = useMemo(
     () => mergeExtensions(instanceExtensions),
@@ -11765,7 +11765,7 @@ function EditorRoot({
           ContentRenderer,
           {
             value,
-            format: outputFormat,
+            format: valueFormat !== "auto" ? valueFormat : outputFormat,
             lineSpacing,
             extensions: instanceExtensions,
             unsafe,
@@ -13024,6 +13024,108 @@ TreeNavRoot.displayName = "TreeNav";
 var TreeNav = Object.assign(TreeNavRoot, {
   Node: TreeNode
 });
+
+// src/utils/media-type.ts
+var IMAGE_EXTS = /* @__PURE__ */ new Set([
+  "png",
+  "jpg",
+  "jpeg",
+  "jfif",
+  "pjpeg",
+  "gif",
+  "webp",
+  "avif",
+  "bmp",
+  "ico",
+  "cur",
+  "svg",
+  "svgz",
+  "apng",
+  "tif",
+  "tiff",
+  "heic",
+  "heif"
+]);
+var VIDEO_EXTS = /* @__PURE__ */ new Set([
+  "mp4",
+  "m4v",
+  "webm",
+  "ogv",
+  "ogm",
+  "mov",
+  "mkv",
+  "avi",
+  "wmv",
+  "flv",
+  "3gp",
+  "3g2",
+  "mpg",
+  "mpeg"
+]);
+var AUDIO_EXTS = /* @__PURE__ */ new Set([
+  "mp3",
+  "wav",
+  "wave",
+  "ogg",
+  "oga",
+  "m4a",
+  "m4b",
+  "aac",
+  "flac",
+  "opus",
+  "weba",
+  "mid",
+  "midi",
+  "aiff",
+  "aif"
+]);
+function mimeToKind(mime) {
+  const m = mime.toLowerCase().split(";")[0].trim();
+  if (!m) return "unknown";
+  if (m === "application/pdf" || m === "application/x-pdf") return "pdf";
+  if (m.startsWith("image/")) return "image";
+  if (m.startsWith("video/")) return "video";
+  if (m.startsWith("audio/")) return "audio";
+  if (m === "application/ogg") return "audio";
+  return "unknown";
+}
+function extToKind(ext) {
+  const e = ext.toLowerCase();
+  if (e === "pdf") return "pdf";
+  if (IMAGE_EXTS.has(e)) return "image";
+  if (VIDEO_EXTS.has(e)) return "video";
+  if (AUDIO_EXTS.has(e)) return "audio";
+  return "unknown";
+}
+function extFromSrc(src) {
+  const clean = src.split(/[?#]/, 1)[0];
+  const lastSeg = clean.split("/").pop() ?? "";
+  const dot = lastSeg.lastIndexOf(".");
+  if (dot <= 0 || dot === lastSeg.length - 1) return null;
+  return lastSeg.slice(dot + 1);
+}
+function mimeFromDataUri(src) {
+  if (!/^data:/i.test(src)) return null;
+  const header = src.slice(5).split(",", 1)[0];
+  const mt = header.split(";")[0].trim();
+  return mt || null;
+}
+function resolveMediaType({ mime, src }) {
+  if (mime) {
+    const k = mimeToKind(mime);
+    if (k !== "unknown") return k;
+  }
+  if (src) {
+    const dataMime = mimeFromDataUri(src);
+    if (dataMime) {
+      const k = mimeToKind(dataMime);
+      if (k !== "unknown") return k;
+    }
+    const ext = extFromSrc(src);
+    if (ext) return extToKind(ext);
+  }
+  return "unknown";
+}
 var CONFIDENCE_TIERS = [
   { min: 0.85, color: "#10b981", label: "high" },
   { min: 0.6, color: "#f59e0b", label: "medium" },
@@ -14296,7 +14398,447 @@ function caretRect(ta, start, end) {
   const y = taRect.top - parentRect.top + offsetY - ta.scrollTop;
   return { x, y };
 }
+var DEFAULT_VIEWPORT = { panX: 0, panY: 0, zoom: 1 };
+var fitClasses = {
+  contain: "h-full w-full object-contain",
+  cover: "h-full w-full object-cover",
+  none: "max-w-none object-none"
+};
+function clamp2(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+var ImageViewer = forwardRef(
+  ({
+    src,
+    alt = "",
+    fit = "contain",
+    zoomable = true,
+    pannable = true,
+    controls,
+    minZoom = 0.25,
+    maxZoom = 8,
+    checkerboard = true,
+    viewport,
+    defaultViewport,
+    onViewportChange,
+    onLoad,
+    onError,
+    className,
+    style
+  }, ref) => {
+    const containerRef = useRef(null);
+    const [status, setStatus] = useState("loading");
+    const isControlled = viewport !== void 0;
+    const [internal, setInternal] = useState(
+      defaultViewport ?? DEFAULT_VIEWPORT
+    );
+    const current = isControlled ? viewport : internal;
+    const currentRef = useRef(current);
+    currentRef.current = current;
+    const setViewport = useCallback(
+      (next) => {
+        const resolved = typeof next === "function" ? next(currentRef.current) : next;
+        if (!isControlled) setInternal(resolved);
+        onViewportChange?.(resolved);
+      },
+      [isControlled, onViewportChange]
+    );
+    const interactive = status === "loaded";
+    const { containerProps, isPanning } = usePanZoom({
+      viewport: current,
+      setViewport,
+      minZoom,
+      maxZoom,
+      pannable: pannable && interactive,
+      zoomable: zoomable && interactive,
+      containerRef
+    });
+    const zoomBy = useCallback(
+      (factor) => {
+        const el = containerRef.current;
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        const cx = rect.width / 2;
+        const cy = rect.height / 2;
+        setViewport((prev) => {
+          const newZoom = clamp2(prev.zoom * factor, minZoom, maxZoom);
+          const ratio = newZoom / prev.zoom;
+          return {
+            zoom: newZoom,
+            panX: cx - (cx - prev.panX) * ratio,
+            panY: cy - (cy - prev.panY) * ratio
+          };
+        });
+      },
+      [setViewport, minZoom, maxZoom]
+    );
+    const reset = useCallback(() => setViewport(DEFAULT_VIEWPORT), [setViewport]);
+    const showControls = (controls ?? zoomable) && interactive;
+    const transform = `translate(${current.panX}px, ${current.panY}px) scale(${current.zoom})`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-image-viewer": "",
+        className: cn(
+          "relative isolate overflow-hidden rounded-md select-none",
+          checkerboard ? "fancy-checkerboard" : "bg-zinc-100 dark:bg-zinc-900",
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: containerRef,
+              "data-canvas-bg": "",
+              className: cn(
+                "absolute inset-0 flex items-center justify-center",
+                isPanning ? "cursor-grabbing" : pannable && interactive ? "cursor-grab" : ""
+              ),
+              style: {
+                transform,
+                transformOrigin: "0 0",
+                willChange: "transform",
+                touchAction: zoomable || pannable ? "none" : void 0
+              },
+              onDoubleClick: zoomable ? reset : void 0,
+              ...containerProps,
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src,
+                  alt,
+                  draggable: false,
+                  onLoad: () => {
+                    setStatus("loaded");
+                    onLoad?.();
+                  },
+                  onError: () => {
+                    setStatus("error");
+                    onError?.();
+                  },
+                  className: cn(
+                    "pointer-events-none block",
+                    status === "error" && "hidden",
+                    fitClasses[fit]
+                  )
+                }
+              )
+            }
+          ),
+          status === "error" && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-react-fancy-image-viewer-error": "",
+              className: "absolute inset-0 flex flex-col items-center justify-center gap-1 p-4 text-center text-sm text-zinc-500 dark:text-zinc-400",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Couldn't load image" }),
+                /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-xs opacity-70", children: alt || src })
+              ]
+            }
+          ),
+          showControls && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-react-fancy-image-viewer-controls": "",
+              className: "absolute bottom-2 right-2 flex items-center gap-0.5 rounded-md border border-zinc-200 bg-white/90 p-0.5 text-zinc-700 shadow-sm backdrop-blur dark:border-zinc-700 dark:bg-zinc-900/90 dark:text-zinc-200",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Zoom out",
+                    onClick: () => zoomBy(1 / 1.25),
+                    className: "flex h-6 w-6 items-center justify-center rounded text-base leading-none hover:bg-zinc-100 dark:hover:bg-zinc-800",
+                    children: "\u2212"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Reset zoom",
+                    onClick: reset,
+                    className: "min-w-[3rem] rounded px-1 text-center text-xs tabular-nums hover:bg-zinc-100 dark:hover:bg-zinc-800",
+                    children: [
+                      Math.round(current.zoom * 100),
+                      "%"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Zoom in",
+                    onClick: () => zoomBy(1.25),
+                    className: "flex h-6 w-6 items-center justify-center rounded text-base leading-none hover:bg-zinc-100 dark:hover:bg-zinc-800",
+                    children: "+"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageViewer.displayName = "ImageViewer";
+var VideoViewer = forwardRef(
+  ({
+    src,
+    poster,
+    controls = true,
+    autoPlay = false,
+    loop = false,
+    muted = false,
+    fit = "contain",
+    onError,
+    className,
+    style
+  }, ref) => {
+    const [errored, setErrored] = useState(false);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-react-fancy-video-viewer": "",
+        className: cn(
+          "relative flex items-center justify-center overflow-hidden rounded-md bg-black",
+          className
+        ),
+        style,
+        children: errored ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1 p-4 text-center text-sm text-zinc-400", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Couldn't load video" }),
+          /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-xs opacity-70", children: src })
+        ] }) : /* @__PURE__ */ jsx(
+          "video",
+          {
+            src,
+            poster,
+            controls,
+            autoPlay,
+            loop,
+            muted,
+            playsInline: true,
+            onError: () => {
+              setErrored(true);
+              onError?.();
+            },
+            className: cn(
+              "max-h-full max-w-full",
+              fit === "cover" ? "h-full w-full object-cover" : "object-contain"
+            )
+          }
+        )
+      }
+    );
+  }
+);
+VideoViewer.displayName = "VideoViewer";
+var AudioViewer = forwardRef(
+  ({
+    src,
+    title,
+    controls = true,
+    autoPlay = false,
+    loop = false,
+    onError,
+    className,
+    style
+  }, ref) => {
+    const [errored, setErrored] = useState(false);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-audio-viewer": "",
+        className: cn(
+          "flex flex-col gap-2 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900",
+          className
+        ),
+        style,
+        children: [
+          title && /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-zinc-700 dark:text-zinc-200", children: title }),
+          errored ? /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Couldn't load audio." }) : /* @__PURE__ */ jsx(
+            "audio",
+            {
+              src,
+              controls,
+              autoPlay,
+              loop,
+              onError: () => {
+                setErrored(true);
+                onError?.();
+              },
+              className: "w-full"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AudioViewer.displayName = "AudioViewer";
+var PdfViewer = forwardRef(
+  ({ src, title = "PDF document", className, style }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-react-fancy-pdf-viewer": "",
+        className: cn(
+          "relative h-full min-h-[20rem] w-full overflow-hidden rounded-md bg-zinc-100 dark:bg-zinc-900",
+          className
+        ),
+        style,
+        children: /* @__PURE__ */ jsxs("object", { data: src, type: "application/pdf", className: "h-full w-full", children: [
+          /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              src,
+              title,
+              className: "h-full w-full border-0"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-4 text-center text-sm text-zinc-500 dark:text-zinc-400", children: [
+            /* @__PURE__ */ jsx("span", { children: "This browser can't display the PDF inline." }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: src,
+                download: true,
+                className: "font-medium text-blue-600 hover:underline dark:text-blue-400",
+                children: "Download PDF"
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+);
+PdfViewer.displayName = "PdfViewer";
+function basename(src) {
+  if (/^(data|blob):/i.test(src)) return null;
+  const seg = src.split(/[?#]/, 1)[0].split("/").pop();
+  return seg ? decodeURIComponent(seg) : null;
+}
+function MediaFallback({ src, mime, label, className }) {
+  const name = label || basename(src);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-react-fancy-media-fallback": "",
+      className: cn(
+        "flex flex-col items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white p-6 text-center dark:border-zinc-700 dark:bg-zinc-900",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-200", children: "No preview available" }),
+        (name || mime) && /* @__PURE__ */ jsxs("span", { className: "max-w-full truncate text-xs text-zinc-500 dark:text-zinc-400", children: [
+          name,
+          name && mime ? " \xB7 " : "",
+          mime
+        ] }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: src,
+            download: name ?? void 0,
+            className: "text-xs font-medium text-blue-600 hover:underline dark:text-blue-400",
+            children: "Download"
+          }
+        )
+      ]
+    }
+  );
+}
+var MediaViewer = forwardRef(
+  ({
+    src,
+    mime,
+    alt,
+    kind,
+    imageProps,
+    videoProps,
+    audioProps,
+    pdfProps,
+    fallback,
+    onError,
+    className,
+    style
+  }, ref) => {
+    const resolved = kind ?? resolveMediaType({ mime, src });
+    switch (resolved) {
+      case "image":
+        return /* @__PURE__ */ jsx(
+          ImageViewer,
+          {
+            ref,
+            src,
+            alt: alt ?? "",
+            onError,
+            className,
+            style,
+            ...imageProps
+          }
+        );
+      case "video":
+        return /* @__PURE__ */ jsx(
+          VideoViewer,
+          {
+            ref,
+            src,
+            onError,
+            className,
+            style,
+            ...videoProps
+          }
+        );
+      case "audio":
+        return /* @__PURE__ */ jsx(
+          AudioViewer,
+          {
+            ref,
+            src,
+            title: alt,
+            onError,
+            className,
+            style,
+            ...audioProps
+          }
+        );
+      case "pdf":
+        return /* @__PURE__ */ jsx(
+          PdfViewer,
+          {
+            ref,
+            src,
+            title: alt,
+            className,
+            style,
+            ...pdfProps
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            "data-react-fancy-media-viewer": "",
+            className,
+            style,
+            children: fallback ?? /* @__PURE__ */ jsx(MediaFallback, { src, mime, label: alt })
+          }
+        );
+    }
+  }
+);
+MediaViewer.displayName = "MediaViewer";
 
-export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Button, Calendar, Callout, Card, Carousel, Chart, ChatDrawer, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, DisplayValue, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, FauxClient, Field, FieldModeContext, FileUpload, Form, FormProvider, Heading, Icon, Input, InputTag, Kanban, MagicWand, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, StickyNote, Switch, Table, Tabs, Text, Textarea, TimeGrid, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, AudioViewer, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Button, Calendar, Callout, Card, Carousel, Chart, ChatDrawer, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, DisplayValue, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, FauxClient, Field, FieldModeContext, FileUpload, Form, FormProvider, Heading, Icon, ImageViewer, Input, InputTag, Kanban, MagicWand, MediaViewer, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, PdfViewer, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, StickyNote, Switch, Table, Tabs, Text, Textarea, TimeGrid, TimePicker, Timeline, Toast, Tooltip, TreeNav, VideoViewer, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map