@frontlit/page-builder 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/{chunk-7W6Q4WA7.js → chunk-36QHCIPM.js}

@@ -1,95 +1,154 @@
 "use client";
-import { Button2, Button } from './chunk-RBJBODQP.js';
-import * as React2 from 'react';
-import { useRef, useState, useId, useEffect } from 'react';
+import { cn } from './chunk-J7Z4UW45.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Play, X, Sun, Moon } from 'lucide-react';
-export { TextRenderer, truncateTextEditorContent } from '@frontlit/text-editor';
+import * as React from 'react';
+import { useState, useEffect, useRef } from 'react';
+export { TextRenderer } from '@frontlit/text-editor/renderer';
+import { Play, X } from 'lucide-react';
 
-var SandboxedEmbed = ({
-  content,
-  className,
-  style,
-  id
-}) => {
-  const iframeRef = useRef(null);
-  const [height, setHeight] = useState("100px");
-  const generatedId = useId();
-  const iframeId = id || generatedId;
-  useEffect(() => {
-    const handleMessage = (event) => {
-      if (event.data?.type === "embed-resize" && event.data?.id === iframeId && event.data?.height) {
-        setHeight(`${event.data.height}px`);
+var imageAttributesResolver = null;
+function setImageAttributesResolver(resolver) {
+  imageAttributesResolver = resolver;
+}
+var roundedMap = {
+  0: "rounded-none",
+  1: "rounded-sm",
+  2: "rounded",
+  3: "rounded-md",
+  4: "rounded-lg",
+  5: "rounded-xl",
+  6: "rounded-2xl",
+  7: "rounded-3xl",
+  8: "rounded-full"
+};
+var objectFitClass = {
+  cover: "object-cover",
+  contain: "object-contain",
+  fill: "object-fill",
+  none: "object-none",
+  "scale-down": "object-scale-down"
+};
+var Image = (props) => {
+  const {
+    src,
+    alt = "",
+    defaultImage,
+    priority = false,
+    loading = priority ? "eager" : "lazy",
+    sizes,
+    noDefaultImage = false,
+    className = "",
+    classes = "",
+    width = "w-full",
+    height = "h-auto",
+    objectFit = "cover",
+    borderRadius
+  } = props;
+  const source = src || defaultImage;
+  const radiusClass = typeof borderRadius === "number" ? roundedMap[borderRadius] ?? "rounded" : borderRadius;
+  if (!source) {
+    if (noDefaultImage) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative aspect-video overflow-hidden bg-muted",
+          width,
+          height,
+          radiusClass,
+          classes,
+          className
+        )
       }
-    };
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [iframeId]);
-  const srcDoc = `
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <style>
-                html, body { margin: 0; padding: 0; overflow: hidden; }
-                #content-wrapper { overflow: hidden; height: auto; }
-            </style>
-        </head>
-        <body>
-            <div id="content-wrapper">
-                ${content || ""}
-            </div>
-            <script>
-                const iframeId = "${iframeId}";
-                
-                function sendHeight() {
-                    const wrapper = document.getElementById('content-wrapper');
-                    const height = wrapper ? wrapper.scrollHeight : document.body.scrollHeight;
-                    window.parent.postMessage({ type: "embed-resize", id: iframeId, height: height }, "*");
-                }
-
-                // Use a ResizeObserver to detect size changes
-                const resizeObserver = new ResizeObserver(entries => {
-                    sendHeight();
-                });
-                const target = document.getElementById('content-wrapper') || document.body;
-                resizeObserver.observe(target);
-                
-                // Use MutationObserver to detect DOM changes
-                const mutationObserver = new MutationObserver(() => {
-                    sendHeight();
-                });
-                mutationObserver.observe(target, { childList: true, subtree: true, attributes: true });
-                
-                // Poll for a few seconds to catch late-loading content
-                let interval = setInterval(sendHeight, 500);
-                setTimeout(() => clearInterval(interval), 10000);
-                
-                window.addEventListener('load', sendHeight);
-                window.addEventListener('resize', sendHeight);
-                
-                // Initial send
-                sendHeight();
-            </script>
-        </body>
-        </html>
-    `;
+    );
+  }
+  const optimized = imageAttributesResolver?.({ src: source, alt, sizes, priority });
   return /* @__PURE__ */ jsx(
-    "iframe",
+    "div",
     {
-      ref: iframeRef,
-      srcDoc,
-      className,
-      style: {
-        width: "100%",
+      className: cn(
+        "relative aspect-video overflow-hidden",
+        width,
         height,
-        border: "none",
-        ...style
-      },
-      sandbox: "allow-scripts allow-popups allow-forms allow-same-origin",
-      title: "Embedded Content"
+        radiusClass,
+        classes,
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: source,
+          alt,
+          sizes,
+          loading,
+          decoding: "async",
+          fetchPriority: priority ? "high" : void 0,
+          ...optimized,
+          className: cn(
+            "absolute inset-0 h-full w-full",
+            radiusClass,
+            objectFitClass[objectFit]
+          )
+        }
+      )
     }
   );
 };
+var LINK_CONTEXT_KEY = /* @__PURE__ */ Symbol.for("@frontlit/page-builder/link-context");
+var globalRegistry = globalThis;
+var PageBuilderLinkContext = globalRegistry[LINK_CONTEXT_KEY] ?? (globalRegistry[LINK_CONTEXT_KEY] = React.createContext(null));
+function PageBuilderLinkProvider({
+  component,
+  children
+}) {
+  return /* @__PURE__ */ jsx(PageBuilderLinkContext.Provider, { value: component ?? null, children });
+}
+function usePageBuilderLinkComponent() {
+  return React.useContext(PageBuilderLinkContext);
+}
+function NavLink({
+  href,
+  children,
+  openInSameTab = true,
+  style,
+  className = "",
+  onClick
+}) {
+  const LinkComponent = usePageBuilderLinkComponent();
+  const isInternal = Boolean(href && href.startsWith("/"));
+  const isInPageNavigation = Boolean(href && href.startsWith("#"));
+  const target = openInSameTab ? void 0 : "_blank";
+  const rel = target === "_blank" ? "noopener noreferrer" : void 0;
+  const handleClick = () => {
+    onClick?.();
+  };
+  if (!isInPageNavigation && isInternal && LinkComponent) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href,
+        style,
+        className,
+        onClick: handleClick,
+        target,
+        rel,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      style,
+      className,
+      target,
+      rel,
+      onClick: handleClick,
+      children
+    }
+  );
+}
 
 // src/utils/extract-video-id.ts
 var YOUTUBE_HOSTNAMES = /* @__PURE__ */ new Set([
@@ -101,11 +160,7 @@ var YOUTUBE_HOSTNAMES = /* @__PURE__ */ new Set([
   "www.youtube-nocookie.com",
   "youtu.be"
 ]);
-var VIMEO_HOSTNAMES = /* @__PURE__ */ new Set([
-  "vimeo.com",
-  "www.vimeo.com",
-  "player.vimeo.com"
-]);
+var VIMEO_HOSTNAMES = /* @__PURE__ */ new Set(["vimeo.com", "www.vimeo.com", "player.vimeo.com"]);
 var isNumeric = (value) => /^\d+$/.test(value);
 var extractYouTubeVideoId = (parsedUrl) => {
   const hostname = parsedUrl.hostname.toLowerCase();
@@ -259,65 +314,52 @@ function VideoWithPreview({
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: aspectRatio === "9/16" ? "max-w-xs mx-auto" : "", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "relative overflow-hidden",
-        style: aspectRatioStyle(),
-        children: !modal && isPlaying ? (
-          // In-place video player
-          /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: videoType !== "self-hosted" ? /* @__PURE__ */ jsx(
-            "iframe",
-            {
-              src: getEmbedUrl(),
-              className: "w-full h-full",
-              allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-              allowFullScreen: true
-            }
-          ) : /* @__PURE__ */ jsx(
-            "video",
-            {
-              src: videoUrl,
-              controls: true,
-              controlsList: "nodownload",
-              onContextMenu: (e) => e.preventDefault(),
-              autoPlay: true,
-              className: "w-full h-full",
-              children: "Your browser does not support the video tag."
-            }
-          ) })
-        ) : (
-          // Thumbnail with play button
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "cursor-pointer group w-full h-full",
-              onClick: handleThumbnailClick,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: getThumbnailUrl() || "/placeholder.svg",
-                    alt: `Thumbnail for ${title}`,
-                    className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsx("span", { className: "absolute -inset-1.5 rounded-full bg-gray-200/50 animate-pulse duration-[3000ms]" }),
-                  /* @__PURE__ */ jsx("div", { className: "relative z-1 rounded-full bg-primary p-4 text-primary-foreground", children: /* @__PURE__ */ jsx(
-                    Play,
-                    {
-                      className: "h-8 w-8",
-                      fill: "currentColor"
-                    }
-                  ) })
-                ] }) })
-              ]
-            }
-          )
-        )
-      }
-    ),
+    /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", style: aspectRatioStyle(), children: !modal && isPlaying ? (
+      // In-place video player
+      /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: videoType !== "self-hosted" ? /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src: getEmbedUrl(),
+          className: "w-full h-full",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true
+        }
+      ) : /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: videoUrl,
+          controls: true,
+          controlsList: "nodownload",
+          onContextMenu: (e) => e.preventDefault(),
+          autoPlay: true,
+          className: "w-full h-full",
+          children: "Your browser does not support the video tag."
+        }
+      ) })
+    ) : (
+      // Thumbnail with play button
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "cursor-pointer group w-full h-full",
+          onClick: handleThumbnailClick,
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: getThumbnailUrl() || "/placeholder.svg",
+                alt: `Thumbnail for ${title}`,
+                className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx("span", { className: "absolute -inset-1.5 rounded-full bg-gray-200/50 animate-pulse duration-[3000ms]" }),
+              /* @__PURE__ */ jsx("div", { className: "relative z-1 rounded-full bg-primary p-4 text-primary-foreground", children: /* @__PURE__ */ jsx(Play, { className: "h-8 w-8", fill: "currentColor" }) })
+            ] }) })
+          ]
+        }
+      )
+    ) }),
     modal && isModalOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 bg-black/95 z-50 flex items-center justify-center p-4 sm:p-6 md:p-10", children: [
       /* @__PURE__ */ jsx(
         "button",
@@ -364,152 +406,80 @@ function VideoWithPreview({
     ] })
   ] });
 }
-var objectFitClass = {
-  cover: "object-cover",
-  contain: "object-contain",
-  fill: "object-fill",
-  none: "object-none",
-  "scale-down": "object-scale-down"
-};
-var Image = (props) => {
-  const {
-    src,
-    alt = "",
-    defaultImage,
-    loading = "lazy",
-    noDefaultImage = false,
-    className = "",
-    classes = "",
-    width = "w-full",
-    height = "h-auto",
-    objectFit = "cover"
-  } = props;
-  const source = src || defaultImage;
-  if (!source) {
-    if (noDefaultImage) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `relative ${width} ${height} aspect-video overflow-hidden bg-muted ${classes} ${className}`
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `relative ${width} ${height} aspect-video overflow-hidden ${classes} ${className}`,
-      children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: source,
-          alt,
-          loading,
-          className: `absolute inset-0 h-full w-full ${objectFitClass[objectFit]}`
-        }
-      )
+var HOISTED_LINK = /<link\b[^>]*(?:rel=["']?(?:preconnect|dns-prefetch|preload)|href=["'][^"']*fonts?\.)[^>]*>/gi;
+function prepareEmbed(content) {
+  const links = content.match(HOISTED_LINK)?.join("") ?? "";
+  const markup = content.replace(HOISTED_LINK, "").replace(/<!doctype[^>]*>|<\/?(?:html|head|body)\b[^>]*>/gi, "").replace(
+    /<script\b[^>]*>(?:(?!<\/script>)[\s\S])*window\.parent[\s\S]*?<\/script>/gi,
+    ""
+  ).replace(
+    /<style\b([^>]*)>([\s\S]*?)<\/style>/gi,
+    (_, attrs, css) => {
+      const scoped = css.replace(/:root\b/g, ":host").replace(/(^|[\s,{}])html\.dark\b/g, "$1:host(.dark)").replace(/(^|[\s,{}])html(?=[\s,{:.[>~+])/g, "$1:host").replace(/(^|[\s,{}])body(?=[\s,{:.[>~+])/g, "$1[data-embed-body]").replace(/min-height\s*:\s*100d?vh/gi, "min-height:0").replace(/(\d*\.?\d+)vw\b/gi, "$1cqw").replace(
+        /@media\s+(?:only\s+)?(?:screen\s+and\s+)?(\([^{]*\bwidth\b[^{]*)\{/gi,
+        "@container $1{"
+      );
+      return `<style${attrs}>${scoped}</style>`;
     }
   );
-};
-var PageBuilderLinkContext = React2.createContext(null);
-function PageBuilderLinkProvider({
-  component,
-  children
-}) {
-  return /* @__PURE__ */ jsx(PageBuilderLinkContext.Provider, { value: component ?? null, children });
-}
-function usePageBuilderLinkComponent() {
-  return React2.useContext(PageBuilderLinkContext);
+  const body = `<style>:host{display:block;container-type:inline-size;overflow-x:clip}</style><div data-embed-body>${markup}</div>`;
+  return { links, body };
 }
-function NavLink({
-  href,
-  children,
-  openInSameTab = true,
-  style,
-  className = "",
-  onClick
-}) {
-  const LinkComponent = usePageBuilderLinkComponent();
-  const isInternal = Boolean(href && href.startsWith("/"));
-  const isInPageNavigation = Boolean(href && href.startsWith("#"));
-  const target = openInSameTab ? void 0 : "_blank";
-  const rel = target === "_blank" ? "noopener noreferrer" : void 0;
-  const handleClick = () => {
-    onClick?.();
-  };
-  if (!isInPageNavigation && isInternal && LinkComponent) {
-    return /* @__PURE__ */ jsx(
-      LinkComponent,
-      {
-        href,
-        style,
-        className,
-        onClick: handleClick,
-        target,
-        rel,
-        children
-      }
-    );
+function runScripts(root) {
+  for (const old of root.querySelectorAll("script")) {
+    const script = document.createElement("script");
+    for (const { name, value } of old.attributes) script.setAttribute(name, value);
+    script.textContent = old.textContent;
+    old.replaceWith(script);
   }
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href,
-      style,
-      className,
-      target,
-      rel,
-      onClick: handleClick,
-      children
-    }
-  );
 }
-function ThemeModeSwitcher({
-  resolved,
-  onToggle,
-  theme,
-  className,
-  size,
-  variant
-}) {
-  const [mounted, setMounted] = useState(false);
+var InlineEmbed = ({ content, className, style }) => {
+  const hostRef = useRef(null);
+  const appliedRef = useRef(null);
+  const { links, body } = prepareEmbed(content);
   useEffect(() => {
-    setMounted(true);
-  }, []);
-  const painted = mounted ? resolved : "light";
-  const next = painted === "dark" ? "light" : "dark";
-  const label = next === "dark" ? "Switch to dark mode" : "Switch to light mode";
-  const Icon = painted === "dark" ? Sun : Moon;
-  if (theme) {
-    return /* @__PURE__ */ jsx(
-      Button2,
-      {
-        type: "button",
-        variant: variant ?? "outline",
-        size: size ?? "sm",
-        theme,
-        title: label,
-        "aria-label": label,
-        className,
-        onClick: onToggle,
-        children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
-      }
+    const host = hostRef.current;
+    if (!host) return;
+    const root = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+    if (appliedRef.current === body) return;
+    if (appliedRef.current !== null || !root.hasChildNodes()) {
+      root.innerHTML = body;
+      runScripts(root);
+    }
+    appliedRef.current = body;
+  }, [body]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const sync = () => host.classList.toggle(
+      "dark",
+      !!host.parentElement?.closest(".dark") || document.documentElement.classList.contains("dark")
     );
-  }
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, []);
   return /* @__PURE__ */ jsx(
-    Button,
+    "div",
     {
-      type: "button",
-      variant: "outline",
-      size: "icon",
-      title: label,
-      "aria-label": label,
+      ref: hostRef,
       className,
-      onClick: onToggle,
-      children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+      style,
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: {
+        // Only the HTML parser turns the template into a shadow root; on the
+        // client the effect attaches it instead.
+        __html: typeof window === "undefined" ? `${links}<template shadowrootmode="open">${body}</template>` : links
+      }
     }
   );
-}
+};
 
-export { Image, NavLink, PageBuilderLinkProvider, SandboxedEmbed, ThemeModeSwitcher, VideoWithPreview, usePageBuilderLinkComponent };
-//# sourceMappingURL=chunk-7W6Q4WA7.js.map
-//# sourceMappingURL=chunk-7W6Q4WA7.js.map
+export { Image, InlineEmbed, NavLink, PageBuilderLinkProvider, VideoWithPreview, prepareEmbed, roundedMap, setImageAttributesResolver, usePageBuilderLinkComponent };
+//# sourceMappingURL=chunk-36QHCIPM.js.map
+//# sourceMappingURL=chunk-36QHCIPM.js.map