@morphika/andami 0.2.24 → 0.2.26

package/components/blocks/CoverSectionRenderer.tsx

@@ -151,7 +151,7 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
           style={{
             position: "absolute",
             inset: 0,
-            backgroundImage: `url(${bgImageSrc})`,
+            backgroundImage: `url("${bgImageSrc}")`,
             backgroundSize: section.background_size || "cover",
             backgroundPosition: section.background_position || "center center",
             backgroundRepeat: "no-repeat",

package/components/blocks/ParallaxSlideRenderer.tsx

@@ -130,7 +130,7 @@ export default function ParallaxSlideRenderer({
                 left: 0,
                 width: "100%",
                 height: bgInnerHeight,
-                backgroundImage: `url(${bgUrl})`,
+                backgroundImage: `url("${bgUrl}")`,
                 backgroundSize: "cover",
                 backgroundPosition: bgPosition,
                 backgroundRepeat: "no-repeat",

package/components/builder/CoverSectionCanvas.tsx

@@ -7,7 +7,7 @@ import type { DeviceViewport } from "../../lib/builder/types";
 import SectionV2Canvas from "./SectionV2Canvas";
 import CoverRowResizeHandle from "./CoverRowResizeHandle";
 import { DEVICE_HEIGHTS } from "../../lib/builder/types";
-import { useAssetUrl } from "../../lib/contexts/AssetContext";
+import { adminAssetUrl } from "../../lib/assets";
 
 /**
  * CoverSectionCanvas — renders a CoverSection in the builder canvas.
@@ -51,7 +51,6 @@ export default function CoverSectionCanvas({
   const store = useBuilderStore();
   const activeViewport = store.activeViewport || "desktop";
   const previewMode = store.previewMode;
-  const assetUrl = useAssetUrl();
   const [isSectionHovered, setIsSectionHovered] = useState(false);
 
   const vhPixels = DEVICE_HEIGHTS[activeViewport];
@@ -59,7 +58,10 @@ export default function CoverSectionCanvas({
   const containerHeight = Math.round(vhPixels * heightMultiplier);
 
   const bgImageUrl = section.background_type === "image" && section.background_image
-    ? assetUrl(section.background_image)
+    ? adminAssetUrl(section.background_image)
+    : null;
+  const bgVideoUrl = section.background_type === "video" && section.background_video
+    ? adminAssetUrl(section.background_video)
     : null;
 
   const effectiveRows = useMemo(
@@ -135,27 +137,37 @@ export default function CoverSectionCanvas({
         className="relative"
         style={{ height: containerHeight }}
       >
-        {/* Background preview — clipped to container bounds */}
+        {/* Background preview — image */}
         {bgImageUrl && (
           <div
-            className="absolute inset-0 pointer-events-none"
+            className="absolute inset-0 bg-cover bg-center pointer-events-none"
             style={{
-              backgroundImage: `url(${bgImageUrl})`,
+              backgroundImage: `url("${bgImageUrl}")`,
               backgroundSize: section.background_size || "cover",
               backgroundPosition: section.background_position || "center center",
-              opacity: 0.15,
-              overflow: "hidden",
+              opacity: 0.12,
             }}
           />
         )}
+
+        {/* Background preview — video */}
+        {bgVideoUrl && (
+          <video
+            src={bgVideoUrl}
+            muted
+            playsInline
+            autoPlay
+            loop
+            className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+            style={{ opacity: 0.12 }}
+          />
+        )}
+
+        {/* Background preview — solid color */}
         {section.background_type === "color" && section.background_color && (
           <div
             className="absolute inset-0 pointer-events-none"
-            style={{
-              backgroundColor: section.background_color,
-              opacity: 0.25,
-              overflow: "hidden",
-            }}
+            style={{ backgroundColor: section.background_color, opacity: 0.25 }}
           />
         )}
 

package/components/builder/ParallaxGroupCanvas.tsx

@@ -135,7 +135,7 @@ export default function ParallaxGroupCanvas({
                 <div
                   className="absolute inset-0 bg-cover bg-center pointer-events-none"
                   style={{
-                    backgroundImage: `url(${bgImagePath})`,
+                    backgroundImage: `url("${bgImagePath}")`,
                     backgroundPosition: slide.background_position || "center center",
                     opacity: 0.12,
                   }}

package/components/builder/ReadOnlyFrame.tsx

@@ -149,7 +149,7 @@ const ReadOnlyParallaxSlide = memo(function ReadOnlyParallaxSlide({
         <div
           className="absolute inset-0 bg-cover bg-center pointer-events-none"
           style={{
-            backgroundImage: `url(/api/assets/${slide.background_image})`,
+            backgroundImage: `url("/api/assets/${slide.background_image}")`,
             backgroundPosition: slide.background_position || "center center",
             opacity: 0.15,
           }}
@@ -401,17 +401,31 @@ const ReadOnlyCoverSection = memo(function ReadOnlyCoverSection({
         </span>
       </div>
       <div style={{ position: "relative", height: containerHeight, overflow: "hidden" }}>
+        {/* Background preview — image */}
         {section.background_type === "image" && section.background_image && (
           <div
             className="absolute inset-0 pointer-events-none"
             style={{
-              backgroundImage: `url(/api/assets/${section.background_image})`,
+              backgroundImage: `url("/api/assets/${section.background_image}")`,
               backgroundSize: section.background_size || "cover",
               backgroundPosition: section.background_position || "center center",
               opacity: 0.15,
             }}
           />
         )}
+        {/* Background preview — video */}
+        {section.background_type === "video" && section.background_video && (
+          <video
+            src={`/api/assets/${section.background_video}`}
+            muted
+            playsInline
+            autoPlay
+            loop
+            className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+            style={{ opacity: 0.15 }}
+          />
+        )}
+        {/* Background preview — color */}
         {section.background_type === "color" && section.background_color && (
           <div
             className="absolute inset-0 pointer-events-none"

package/lib/version.ts

@@ -6,4 +6,4 @@
  * Exposed as a plain constant so it can be imported without reading
  * package.json at runtime.
  */
-export const ANDAMI_VERSION = "0.2.24";
+export const ANDAMI_VERSION = "0.2.26";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",