@morphika/andami 0.2.24 → 0.2.25

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/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.25";

package/package.json

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