@portosaur/theme 0.1.4 → 0.2.0

package/theme/components/Preview/renderers/CodeRenderer.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { Highlight } from "prism-react-renderer";
+
 export default function CodeRenderer({ code, language, zoomLevel = 1 }) {
   const { siteConfig } = useDocusaurusContext();
   const isDark =
@@ -9,116 +10,87 @@ export default function CodeRenderer({ code, language, zoomLevel = 1 }) {
   const prismConfig = siteConfig?.themeConfig?.prism || {};
   const prismTheme = isDark ? prismConfig.darkTheme : prismConfig.theme;
   const normalizedLanguage = language === "patch" ? "diff" : language || "text";
-  return jsxDEV_7x81h0kn(
-    Highlight,
-    {
-      code,
-      language: normalizedLanguage,
-      theme: prismTheme,
-      ...(typeof window !== "undefined" && window.Prism
+
+  return (
+    <Highlight
+      code={code}
+      language={normalizedLanguage}
+      theme={prismTheme}
+      {...(typeof window !== "undefined" && window.Prism
         ? { prism: window.Prism }
-        : {}),
-      children: ({ className, style, tokens, getLineProps, getTokenProps }) =>
-        jsxDEV_7x81h0kn(
-          "pre",
-          {
-            className,
-            style: {
-              ...style,
-              margin: 0,
-              borderRadius: 0,
-              padding: "14px 0",
-              fontSize: `calc(0.85rem * ${zoomLevel})`,
-              lineHeight: 1.6,
-              minHeight: "100%",
-              background: "var(--ifm-background-color)",
-            },
-            children: tokens.map((line, i) => {
-              const lineProps = getLineProps({ line });
-              const lineContent = line.map((t) => t.content).join("");
-              let diffStyle = {};
-              if (normalizedLanguage === "diff") {
-                if (lineContent.startsWith("+")) {
-                  diffStyle = {
-                    background: "rgba(var(--ifm-color-success-rgb), 0.15)",
-                    borderLeft: "3px solid var(--ifm-color-success)",
-                  };
-                } else if (lineContent.startsWith("-")) {
-                  diffStyle = {
-                    background: "rgba(var(--ifm-color-danger-rgb), 0.15)",
-                    borderLeft: "3px solid var(--ifm-color-danger)",
-                  };
-                }
+        : {})}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className={className}
+          style={{
+            ...style,
+            margin: 0,
+            borderRadius: 0,
+            padding: "14px 0",
+            fontSize: `calc(0.85rem * ${zoomLevel})`,
+            lineHeight: 1.6,
+            minHeight: "100%",
+            background: "var(--ifm-background-color)",
+          }}
+        >
+          {tokens.map((line, i) => {
+            const lineProps = getLineProps({ line });
+            const lineContent = line.map((t) => t.content).join("");
+            let diffStyle = {};
+
+            if (normalizedLanguage === "diff") {
+              if (lineContent.startsWith("+")) {
+                diffStyle = {
+                  background: "rgba(var(--ifm-color-success-rgb), 0.15)",
+                  borderLeft: "3px solid var(--ifm-color-success)",
+                };
+              } else if (lineContent.startsWith("-")) {
+                diffStyle = {
+                  background: "rgba(var(--ifm-color-danger-rgb), 0.15)",
+                  borderLeft: "3px solid var(--ifm-color-danger)",
+                };
               }
-              return jsxDEV_7x81h0kn(
-                "div",
-                {
-                  ...lineProps,
-                  style: {
-                    ...lineProps.style,
-                    ...diffStyle,
-                    display: "flex",
-                    paddingLeft: diffStyle.borderLeft ? "0px" : "3px",
-                  },
-                  children: [
-                    jsxDEV_7x81h0kn(
-                      "span",
-                      {
-                        style: {
-                          display: "inline-block",
-                          width: "1.7em",
-                          textAlign: "right",
-                          marginRight: "12px",
-                          userSelect: "none",
-                          opacity: 0.35,
-                          flexShrink: 0,
-                          fontFamily: "var(--ifm-font-family-monospace)",
-                        },
-                        children: i + 1,
-                      },
-                      undefined,
-                      false,
-                      undefined,
-                      this,
-                    ),
-                    jsxDEV_7x81h0kn(
-                      "span",
-                      {
-                        style: { paddingRight: "14px", flex: 1 },
-                        children: line.map((token, key) =>
-                          jsxDEV_7x81h0kn(
-                            "span",
-                            { ...getTokenProps({ token }) },
-                            key,
-                            false,
-                            undefined,
-                            this,
-                          ),
-                        ),
-                      },
-                      undefined,
-                      false,
-                      undefined,
-                      this,
-                    ),
-                  ],
-                },
-                i,
-                true,
-                undefined,
-                this,
-              );
-            }),
-          },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-    },
-    undefined,
-    false,
-    undefined,
-    this,
+            }
+
+            return (
+              <div
+                key={i}
+                {...lineProps}
+                style={{
+                  ...lineProps.style,
+                  ...diffStyle,
+                  display: "flex",
+                  paddingLeft: diffStyle.borderLeft ? "0px" : "3px",
+                }}
+              >
+                {/* Line number gutter */}
+                <span
+                  style={{
+                    display: "inline-block",
+                    width: "1.7em",
+                    textAlign: "right",
+                    marginRight: "12px",
+                    userSelect: "none",
+                    opacity: 0.35,
+                    flexShrink: 0,
+                    fontFamily: "var(--ifm-font-family-monospace)",
+                  }}
+                >
+                  {i + 1}
+                </span>
+
+                {/* Token content */}
+                <span style={{ paddingRight: "14px", flex: 1 }}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
+                </span>
+              </div>
+            );
+          })}
+        </pre>
+      )}
+    </Highlight>
   );
 }

package/theme/components/Preview/renderers/ImageRenderer.jsx

@@ -1,74 +1,37 @@
 import React, { useState } from "react";
 import { LoadingState } from "../components/FeedbackStates";
 import styles from "../styles.module.css";
+
 export default function ImageRenderer({ fileUrl, label, zoomLevel, onError }) {
   const [loading, setLoading] = useState(true);
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      className: styles.imageView,
-      style: { "--zoom": zoomLevel, position: "relative" },
-      children: [
-        loading &&
-          jsxDEV_7x81h0kn(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                inset: 0,
-                zIndex: 5,
-                display: "flex",
-              },
-              children: jsxDEV_7x81h0kn(
-                LoadingState,
-                {},
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-            },
-            undefined,
-            false,
-            undefined,
-            this,
-          ),
-        jsxDEV_7x81h0kn(
-          "div",
-          {
-            className: styles.imageScrollArea,
-            style: {
-              opacity: loading ? 0 : 1,
-              transition: "opacity 0.3s ease",
-            },
-            children: jsxDEV_7x81h0kn(
-              "img",
-              {
-                src: fileUrl,
-                alt: label || "",
-                className: styles.image,
-                onLoad: () => setLoading(false),
-                onError: () => {
-                  setLoading(false);
-                  onError?.("Failed to load image.");
-                },
-              },
-              undefined,
-              false,
-              undefined,
-              this,
-            ),
-          },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-      ],
-    },
-    undefined,
-    true,
-    undefined,
-    this,
+
+  return (
+    <div
+      className={styles.imageView}
+      style={{ "--zoom": zoomLevel, position: "relative" }}
+    >
+      {loading && (
+        <div
+          style={{ position: "absolute", inset: 0, zIndex: 5, display: "flex" }}
+        >
+          <LoadingState />
+        </div>
+      )}
+      <div
+        className={styles.imageScrollArea}
+        style={{ opacity: loading ? 0 : 1, transition: "opacity 0.3s ease" }}
+      >
+        <img
+          src={fileUrl}
+          alt={label || ""}
+          className={styles.image}
+          onLoad={() => setLoading(false)}
+          onError={() => {
+            setLoading(false);
+            onError?.("Failed to load image.");
+          }}
+        />
+      </div>
+    </div>
   );
 }

package/theme/components/Preview/renderers/PdfRenderer.jsx

@@ -3,12 +3,15 @@ import { LoadingState } from "../components/FeedbackStates";
 import styles from "../styles.module.css";
 import "react-pdf/dist/Page/AnnotationLayer.css";
 import "react-pdf/dist/Page/TextLayer.css";
+
 let PdfDocument, PdfPage, pdfjs;
+
 export default function PdfRenderer({ fileUrl, zoomLevel, onError }) {
   const [pdfReady, setPdfReady] = useState(!!PdfDocument);
   const [numPages, setNumPages] = useState(null);
   const [containerWidth, setContainerWidth] = useState(760);
   const wrapperRef = useRef(null);
+
   useEffect(() => {
     if (PdfDocument) return;
     import("react-pdf").then((mod) => {
@@ -19,6 +22,7 @@ export default function PdfRenderer({ fileUrl, zoomLevel, onError }) {
       setPdfReady(true);
     });
   }, []);
+
   useEffect(() => {
     if (!wrapperRef.current) return;
     let timeoutId = null;
@@ -28,9 +32,7 @@ export default function PdfRenderer({ fileUrl, zoomLevel, onError }) {
       const diff = Math.abs(width - containerWidth);
       if (diff < 15) return;
       if (timeoutId) clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => {
-        setContainerWidth(width);
-      }, 150);
+      timeoutId = setTimeout(() => setContainerWidth(width), 150);
     });
     observer.observe(wrapperRef.current);
     return () => {
@@ -38,56 +40,33 @@ export default function PdfRenderer({ fileUrl, zoomLevel, onError }) {
       if (timeoutId) clearTimeout(timeoutId);
     };
   }, [pdfReady, containerWidth]);
+
   if (!pdfReady || !PdfDocument) {
-    return jsxDEV_7x81h0kn(LoadingState, {}, undefined, false, undefined, this);
+    return <LoadingState />;
   }
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      className: styles.pdfView,
-      ref: wrapperRef,
-      children: jsxDEV_7x81h0kn(
-        PdfDocument,
-        {
-          file: fileUrl,
-          onLoadSuccess: ({ numPages: n }) => setNumPages(n),
-          onLoadError: (err) =>
-            onError?.(err.message || "Invalid or missing PDF file."),
-          loading: jsxDEV_7x81h0kn(
-            LoadingState,
-            {},
-            undefined,
-            false,
-            undefined,
-            this,
-          ),
-          children: Array.from({ length: numPages || 0 }, (_, i) =>
-            jsxDEV_7x81h0kn(
-              PdfPage,
-              {
-                pageNumber: i + 1,
-                width: containerWidth,
-                scale: zoomLevel,
-                className: styles.pdfPage,
-                renderTextLayer: true,
-                renderAnnotationLayer: true,
-              },
-              i,
-              false,
-              undefined,
-              this,
-            ),
-          ),
-        },
-        undefined,
-        false,
-        undefined,
-        this,
-      ),
-    },
-    undefined,
-    false,
-    undefined,
-    this,
+
+  return (
+    <div className={styles.pdfView} ref={wrapperRef}>
+      <PdfDocument
+        file={fileUrl}
+        onLoadSuccess={({ numPages: n }) => setNumPages(n)}
+        onLoadError={(err) =>
+          onError?.(err.message || "Invalid or missing PDF file.")
+        }
+        loading={<LoadingState />}
+      >
+        {Array.from({ length: numPages || 0 }, (_, i) => (
+          <PdfPage
+            key={i}
+            pageNumber={i + 1}
+            width={containerWidth}
+            scale={zoomLevel}
+            className={styles.pdfPage}
+            renderTextLayer={true}
+            renderAnnotationLayer={true}
+          />
+        ))}
+      </PdfDocument>
+    </div>
   );
 }

package/theme/components/Preview/renderers/WebRenderer.jsx

@@ -1,10 +1,12 @@
 import { useState, useEffect, useRef } from "react";
 import { LoadingState } from "../components/FeedbackStates";
 import styles from "../styles.module.css";
+
 export default function WebRenderer({ fileUrl, label, onError }) {
   const [loaded, setLoaded] = useState(false);
   const loadedRef = useRef(false);
   const timeoutRef = useRef(null);
+
   useEffect(() => {
     setLoaded(false);
     loadedRef.current = false;
@@ -18,42 +20,26 @@ export default function WebRenderer({ fileUrl, label, onError }) {
     }, 1e4);
     return () => clearTimeout(timeoutRef.current);
   }, [fileUrl]);
+
   const handleLoad = () => {
     setLoaded(true);
     loadedRef.current = true;
     clearTimeout(timeoutRef.current);
   };
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      className: styles.webView,
-      children: [
-        !loaded &&
-          jsxDEV_7x81h0kn(LoadingState, {}, undefined, false, undefined, this),
-        jsxDEV_7x81h0kn(
-          "iframe",
-          {
-            src: fileUrl,
-            title: label,
-            className: styles.webFrame,
-            onLoad: handleLoad,
-            style: { opacity: loaded ? 1 : 0, transition: "opacity 0.3s ease" },
-            allow:
-              "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
-            allowFullScreen: true,
-            sandbox:
-              "allow-scripts allow-same-origin allow-popups allow-forms allow-presentation",
-          },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-      ],
-    },
-    undefined,
-    true,
-    undefined,
-    this,
+
+  return (
+    <div className={styles.webView}>
+      {!loaded && <LoadingState />}
+      <iframe
+        src={fileUrl}
+        title={label}
+        className={styles.webFrame}
+        onLoad={handleLoad}
+        style={{ opacity: loaded ? 1 : 0, transition: "opacity 0.3s ease" }}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen={true}
+        sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-presentation"
+      />
+    </div>
   );
 }

package/theme/components/Preview/state/index.jsx

@@ -3,11 +3,18 @@ import React, {
   useContext,
   useReducer,
   useCallback,
-  ReactNode,
 } from "react";
+
 const PreviewContext = createContext(null);
 const DEFAULT_SIZE = { width: 720, height: 400 };
 const DEFAULT_DOCK_PERCENTAGE = 0.42;
+
+export const PreviewMode = {
+  POPUP: "popup",
+  DOCK: "dock",
+  PIP: "pip",
+};
+
 function getInitialState() {
   if (typeof window === "undefined") {
     return {
@@ -22,6 +29,7 @@ function getInitialState() {
       floatingState: { ...DEFAULT_SIZE, x: null, y: null },
     };
   }
+
   let defaultDockWidth = Math.floor(
     window.innerWidth * DEFAULT_DOCK_PERCENTAGE,
   );
@@ -29,6 +37,7 @@ function getInitialState() {
     380,
     Math.min(defaultDockWidth, window.innerWidth * 0.8),
   );
+
   return {
     isOpen: false,
     mode: "popup",
@@ -41,6 +50,7 @@ function getInitialState() {
     floatingState: { ...DEFAULT_SIZE, x: null, y: null },
   };
 }
+
 function reducer(state, action) {
   switch (action.type) {
     case "OPEN":
@@ -85,8 +95,10 @@ function reducer(state, action) {
       return state;
   }
 }
+
 export function PreviewProvider({ children }) {
   const [state, dispatch] = useReducer(reducer, undefined, getInitialState);
+
   const openPreview = useCallback(
     (
       sources,
@@ -103,6 +115,7 @@ export function PreviewProvider({ children }) {
     },
     [],
   );
+
   const closePreview = useCallback(() => {
     if (typeof window !== "undefined") {
       window.history.replaceState(
@@ -113,28 +126,32 @@ export function PreviewProvider({ children }) {
     }
     dispatch({ type: "CLOSE" });
   }, []);
-  const setMode = useCallback((mode) => {
-    dispatch({ type: "SET_MODE", mode });
-  }, []);
-  const setActiveIndex = useCallback((index) => {
-    dispatch({ type: "SET_ACTIVE_INDEX", index });
-  }, []);
-  const setDockWidth = useCallback((width) => {
-    dispatch({ type: "SET_DOCK_WIDTH", width });
-  }, []);
-  const setPeekHeight = useCallback((height) => {
-    dispatch({ type: "SET_PEEK_HEIGHT", height });
-  }, []);
-  const setFloatingState = useCallback((newState) => {
-    dispatch({ type: "SET_FLOATING_STATE", state: newState });
-  }, []);
-  const toggleMode = useCallback(() => {
-    dispatch({ type: "TOGGLE_MODE" });
-  }, []);
-  return jsxDEV_7x81h0kn(
-    PreviewContext.Provider,
-    {
-      value: {
+
+  const setMode = useCallback(
+    (mode) => dispatch({ type: "SET_MODE", mode }),
+    [],
+  );
+  const setActiveIndex = useCallback(
+    (index) => dispatch({ type: "SET_ACTIVE_INDEX", index }),
+    [],
+  );
+  const setDockWidth = useCallback(
+    (width) => dispatch({ type: "SET_DOCK_WIDTH", width }),
+    [],
+  );
+  const setPeekHeight = useCallback(
+    (height) => dispatch({ type: "SET_PEEK_HEIGHT", height }),
+    [],
+  );
+  const setFloatingState = useCallback(
+    (newState) => dispatch({ type: "SET_FLOATING_STATE", state: newState }),
+    [],
+  );
+  const toggleMode = useCallback(() => dispatch({ type: "TOGGLE_MODE" }), []);
+
+  return (
+    <PreviewContext.Provider
+      value={{
         ...state,
         openPreview,
         closePreview,
@@ -144,15 +161,13 @@ export function PreviewProvider({ children }) {
         setPeekHeight,
         setFloatingState,
         toggleMode,
-      },
-      children,
-    },
-    undefined,
-    false,
-    undefined,
-    this,
+      }}
+    >
+      {children}
+    </PreviewContext.Provider>
   );
 }
+
 const DEFAULT_CTX = {
   isOpen: false,
   mode: "popup",
@@ -172,6 +187,7 @@ const DEFAULT_CTX = {
   setFloatingState: () => {},
   toggleMode: () => {},
 };
+
 export function usePreview() {
   return useContext(PreviewContext) ?? DEFAULT_CTX;
 }