@yoamigo.com/core 0.3.0 → 0.3.1

package/dist/prod.d.ts

@@ -1,6 +1,6 @@
 export { a as ContentStore, E as ContentStoreMode, C as ContentStoreProvider, d as MarkdownText, e as MarkdownTextProps, P as PageInfo, b as StaticImage, c as StaticImageProps, M as StaticText, S as StaticTextProps, b as YaImage, c as YaImageProps, M as YaText, S as YaTextProps, u as useContentStore } from './MarkdownText-BUTYfqXS.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 export { Link, LinkProps, NavigateFunction, Router, RouterProps, useNavigate } from './router.js';
 export { Route, Switch, useParams } from 'wouter';
 export { A as AssetResolverFn, C as ContentRegistry, c as contentRegistry, a as getAllContent, g as getContent, h as hasContent, r as registerContent, b as resolveAssetUrl, s as setAssetResolver } from './asset-resolver-BnIvDkVv.js';
@@ -33,4 +33,98 @@ interface SafeHtmlProps {
 }
 declare function SafeHtml({ content, className }: SafeHtmlProps): react_jsx_runtime.JSX.Element;
 
-export { SafeHtml, type SafeHtmlProps, StaticLink, type StaticLinkProps, StaticLink as YaLink, type StaticLinkProps as YaLinkProps };
+interface BackgroundImageConfig {
+    src: string;
+    objectFit?: 'cover' | 'contain' | 'fill';
+    objectPosition?: string;
+    focalPoint?: {
+        x: number;
+        y: number;
+    };
+}
+interface OverlayConfig {
+    color: string;
+    opacity: number;
+}
+interface BackgroundConfig {
+    type: 'none' | 'color' | 'image';
+    backgroundColor?: string;
+    backgroundImage?: BackgroundImageConfig;
+    overlay?: OverlayConfig;
+}
+interface StaticContainerProps {
+    fieldId: string;
+    className?: string;
+    style?: CSSProperties;
+    as?: 'section' | 'div' | 'article' | 'header' | 'footer' | 'main' | 'aside';
+    children: ReactNode;
+    /** Fallback background config if not in store */
+    defaultBackground?: BackgroundConfig;
+}
+/**
+ * Parse background config from content store
+ */
+declare function parseBackgroundConfig(value: string): BackgroundConfig;
+/**
+ * Serialize background config for storage
+ */
+declare function serializeBackgroundConfig(config: BackgroundConfig): string;
+declare function StaticContainer({ fieldId, className, style, as: Tag, children, defaultBackground, }: StaticContainerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StaticVideo Component - Production version of YaVideo
+ *
+ * Renders video statically (uploaded, YouTube, or Vimeo embeds).
+ * No editing capabilities - pure display.
+ */
+interface VideoFieldValue {
+    /** Video source type */
+    type: 'upload' | 'youtube' | 'vimeo';
+    /** Video URL (for upload) or video ID (for embeds) */
+    src: string;
+    /** Poster image URL */
+    poster?: string;
+    /** Autoplay video (requires muted for browser policy) */
+    autoplay?: boolean;
+    /** Mute video audio */
+    muted?: boolean;
+    /** Loop video playback */
+    loop?: boolean;
+    /** Show video controls */
+    controls?: boolean;
+    /** Play inline on mobile (prevent fullscreen hijack) */
+    playsinline?: boolean;
+    /** Preload strategy */
+    preload?: 'none' | 'metadata' | 'auto';
+    /** CSS object-fit */
+    objectFit?: 'cover' | 'contain' | 'fill';
+    /** CSS aspect-ratio (e.g., "16/9") */
+    aspectRatio?: string;
+    /** Start playback at this time (seconds) */
+    startTime?: number;
+    /** End playback at this time (seconds) */
+    endTime?: number;
+}
+interface StaticVideoProps {
+    fieldId: string;
+    className?: string;
+    /** Default aspect ratio from props */
+    aspectRatio?: string;
+    /** Default object-fit */
+    objectFit?: 'cover' | 'contain' | 'fill';
+    /** Loading strategy */
+    loading?: 'lazy' | 'eager';
+    /** Default video value (used when nothing in content store) */
+    defaultValue?: VideoFieldValue;
+    /** Fallback for backward compatibility (deprecated: use defaultValue) */
+    fallbackSrc?: string;
+    /** Fallback poster image */
+    fallbackPoster?: string;
+}
+/**
+ * Serialize video field value for storage
+ */
+declare function serializeVideoValue(value: VideoFieldValue): string;
+declare function StaticVideo({ fieldId, className, aspectRatio: propAspectRatio, objectFit: propObjectFit, loading, defaultValue, fallbackSrc, fallbackPoster, }: StaticVideoProps): react_jsx_runtime.JSX.Element;
+
+export { type BackgroundConfig, type BackgroundImageConfig, type OverlayConfig, SafeHtml, type SafeHtmlProps, StaticContainer, type StaticContainerProps, StaticLink, type StaticLinkProps, StaticVideo, type StaticVideoProps, type VideoFieldValue, StaticContainer as YaContainer, type StaticContainerProps as YaContainerProps, StaticLink as YaLink, type StaticLinkProps as YaLinkProps, StaticVideo as YaVideo, type StaticVideoProps as YaVideoProps, parseBackgroundConfig, serializeBackgroundConfig, serializeVideoValue };

package/dist/prod.js

@@ -298,12 +298,301 @@ function MarkdownText({ content, className }) {
   return /* @__PURE__ */ jsx6("span", { className, children: elements });
 }
 
+// src/components/StaticContainer.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function parseBackgroundConfig(value) {
+  if (!value) {
+    return { type: "none" };
+  }
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed.type) {
+      return parsed;
+    }
+  } catch {
+  }
+  return { type: "none" };
+}
+function serializeBackgroundConfig(config) {
+  return JSON.stringify(config);
+}
+function getObjectPosition2(imageConfig) {
+  if (imageConfig.focalPoint) {
+    return `${imageConfig.focalPoint.x}% ${imageConfig.focalPoint.y}%`;
+  }
+  return imageConfig.objectPosition || "50% 50%";
+}
+function StaticContainer({
+  fieldId,
+  className,
+  style,
+  as: Tag = "section",
+  children,
+  defaultBackground
+}) {
+  const { getValue } = useContentStore();
+  const rawValue = getValue(fieldId);
+  const backgroundConfig = rawValue ? parseBackgroundConfig(rawValue) : defaultBackground || { type: "none" };
+  const hasBackground = backgroundConfig.type !== "none";
+  const backgroundStyles = {};
+  if (backgroundConfig.type === "color" && backgroundConfig.backgroundColor) {
+    backgroundStyles.backgroundColor = backgroundConfig.backgroundColor;
+  }
+  if (backgroundConfig.type === "image" && backgroundConfig.backgroundImage) {
+    const img = backgroundConfig.backgroundImage;
+    const resolvedSrc = resolveAssetUrl(img.src);
+    backgroundStyles.backgroundImage = `url(${resolvedSrc})`;
+    backgroundStyles.backgroundSize = img.objectFit || "cover";
+    backgroundStyles.backgroundPosition = getObjectPosition2(img);
+    backgroundStyles.backgroundRepeat = "no-repeat";
+  }
+  const overlayCustomProps = {};
+  if (backgroundConfig.overlay) {
+    overlayCustomProps["--ya-overlay-color"] = backgroundConfig.overlay.color;
+    overlayCustomProps["--ya-overlay-opacity"] = backgroundConfig.overlay.opacity;
+  }
+  return /* @__PURE__ */ jsx7(
+    Tag,
+    {
+      className: `ya-container ${hasBackground ? "ya-container-has-overlay" : ""} ${className || ""}`,
+      style: {
+        ...backgroundStyles,
+        ...overlayCustomProps,
+        ...style
+      },
+      "data-field-id": fieldId,
+      children
+    }
+  );
+}
+
+// src/components/StaticVideo.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function parseVideoValue(value) {
+  if (!value) {
+    return { type: "upload", src: "" };
+  }
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed.src) {
+      return {
+        type: parsed.type || "upload",
+        ...parsed
+      };
+    }
+  } catch {
+  }
+  return { type: "upload", src: value };
+}
+function serializeVideoValue(value) {
+  return JSON.stringify(value);
+}
+function buildYouTubeEmbedUrl(videoId, value) {
+  const params = new URLSearchParams({
+    rel: "0",
+    modestbranding: "1"
+  });
+  if (value.autoplay) params.set("autoplay", "1");
+  if (value.muted) params.set("mute", "1");
+  if (value.loop) {
+    params.set("loop", "1");
+    params.set("playlist", videoId);
+  }
+  if (value.controls === false) params.set("controls", "0");
+  if (value.startTime) params.set("start", String(Math.floor(value.startTime)));
+  if (value.endTime) params.set("end", String(Math.floor(value.endTime)));
+  return `https://www.youtube.com/embed/${videoId}?${params.toString()}`;
+}
+function buildVimeoEmbedUrl(videoId, value) {
+  const params = new URLSearchParams({
+    title: "0",
+    byline: "0",
+    portrait: "0"
+  });
+  if (value.autoplay) params.set("autoplay", "1");
+  if (value.muted) params.set("muted", "1");
+  if (value.loop) params.set("loop", "1");
+  if (value.controls === false) params.set("controls", "0");
+  let url = `https://player.vimeo.com/video/${videoId}?${params.toString()}`;
+  if (value.startTime) {
+    url += `#t=${Math.floor(value.startTime)}s`;
+  }
+  return url;
+}
+function StaticVideo({
+  fieldId,
+  className,
+  aspectRatio: propAspectRatio,
+  objectFit: propObjectFit,
+  loading = "lazy",
+  defaultValue,
+  fallbackSrc,
+  fallbackPoster
+}) {
+  const { getValue } = useContentStore();
+  const containerRef = useRef(null);
+  const videoRef = useRef(null);
+  const [isInView, setIsInView] = useState(loading === "eager");
+  const rawValue = getValue(fieldId);
+  const parsedValue = parseVideoValue(rawValue);
+  const videoData = parsedValue.src ? parsedValue : defaultValue || parsedValue;
+  const src = videoData.src || fallbackSrc || "";
+  const poster = videoData.poster || fallbackPoster || "";
+  const objectFit = videoData.objectFit || propObjectFit || "cover";
+  const aspectRatio = videoData.aspectRatio || propAspectRatio || "16/9";
+  const autoplay = videoData.autoplay ?? false;
+  const muted = videoData.muted ?? false;
+  const loop = videoData.loop ?? false;
+  const controls = videoData.controls ?? true;
+  const playsinline = videoData.playsinline ?? true;
+  const preload = videoData.preload ?? "metadata";
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (e) => {
+      setPrefersReducedMotion(e.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const effectiveAutoplay = autoplay && !prefersReducedMotion;
+  useEffect(() => {
+    if (loading === "eager" || isInView) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "200px" }
+    );
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => observer.disconnect();
+  }, [loading, isInView]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if ((e.key === " " || e.key === "Enter") && videoData.type === "upload" && controls) {
+        e.preventDefault();
+        const video = videoRef.current;
+        if (video) {
+          if (video.paused) {
+            video.play();
+          } else {
+            video.pause();
+          }
+        }
+      }
+    },
+    [videoData.type, controls]
+  );
+  const renderVideo = () => {
+    if (!src) return null;
+    if (!isInView && loading === "lazy") {
+      return /* @__PURE__ */ jsx8("div", { className: "ya-video-placeholder", style: { aspectRatio } });
+    }
+    if (videoData.type === "youtube" && src) {
+      const embedUrl = buildYouTubeEmbedUrl(src, videoData);
+      return /* @__PURE__ */ jsx8(
+        "iframe",
+        {
+          src: embedUrl,
+          className,
+          style: {
+            width: "100%",
+            height: "100%",
+            border: "none",
+            aspectRatio,
+            objectFit
+          },
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true,
+          loading
+        }
+      );
+    }
+    if (videoData.type === "vimeo" && src) {
+      const embedUrl = buildVimeoEmbedUrl(src, videoData);
+      return /* @__PURE__ */ jsx8(
+        "iframe",
+        {
+          src: embedUrl,
+          className,
+          style: {
+            width: "100%",
+            height: "100%",
+            border: "none",
+            aspectRatio,
+            objectFit
+          },
+          allow: "autoplay; fullscreen; picture-in-picture",
+          allowFullScreen: true,
+          loading
+        }
+      );
+    }
+    const resolvedSrc = resolveAssetUrl(src);
+    const resolvedPoster = poster ? resolveAssetUrl(poster) : void 0;
+    return /* @__PURE__ */ jsx8(
+      "video",
+      {
+        ref: videoRef,
+        src: resolvedSrc,
+        poster: resolvedPoster,
+        className,
+        style: {
+          objectFit,
+          aspectRatio
+        },
+        autoPlay: effectiveAutoplay,
+        muted,
+        loop,
+        controls,
+        playsInline: playsinline,
+        preload,
+        onLoadedMetadata: (e) => {
+          if (videoData.startTime) {
+            e.currentTarget.currentTime = videoData.startTime;
+          }
+        },
+        onTimeUpdate: (e) => {
+          if (videoData.endTime && e.currentTarget.currentTime >= videoData.endTime) {
+            if (loop) {
+              e.currentTarget.currentTime = videoData.startTime || 0;
+            } else {
+              e.currentTarget.pause();
+            }
+          }
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref: containerRef,
+      className: `ya-video-wrapper ${className || ""}`,
+      style: { aspectRatio },
+      "data-field-id": fieldId,
+      tabIndex: videoData.type === "upload" && controls ? 0 : void 0,
+      role: videoData.type === "upload" && controls ? "application" : void 0,
+      "aria-label": videoData.type === "upload" && controls ? "Video player. Press Space or Enter to play/pause." : void 0,
+      onKeyDown: handleKeyDown,
+      children: renderVideo()
+    }
+  );
+}
+
 // src/router/Link.tsx
 import { Link as WouterLink } from "wouter";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Link({ to, href, children, className, onClick, replace, ...props }) {
   const target = href ?? to ?? "/";
-  return /* @__PURE__ */ jsx7(WouterLink, { href: target, className, onClick, replace, ...props, children });
+  return /* @__PURE__ */ jsx9(WouterLink, { href: target, className, onClick, replace, ...props, children });
 }
 
 // src/router/useNavigate.ts
@@ -322,7 +611,7 @@ function useNavigate() {
 
 // src/router/Router.tsx
 import { Router as WouterRouter } from "wouter";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function detectBasename() {
   if (typeof window === "undefined") return "";
   const sessionMatch = window.location.pathname.match(/^\/session\/[^/]+/);
@@ -337,7 +626,7 @@ function detectBasename() {
 }
 function Router({ children, base }) {
   const basename = base ?? detectBasename();
-  return /* @__PURE__ */ jsx8(WouterRouter, { base: basename, children });
+  return /* @__PURE__ */ jsx10(WouterRouter, { base: basename, children });
 }
 
 // src/router/index.ts
@@ -349,19 +638,26 @@ export {
   Route,
   Router,
   SafeHtml,
+  StaticContainer,
   MpImage as StaticImage,
   StaticLink,
   MpText as StaticText,
+  StaticVideo,
   Switch,
+  StaticContainer as YaContainer,
   MpImage as YaImage,
   StaticLink as YaLink,
   MpText as YaText,
+  StaticVideo as YaVideo,
   contentRegistry,
   getAllContent,
   getContent,
   hasContent,
+  parseBackgroundConfig,
   registerContent,
   resolveAssetUrl,
+  serializeBackgroundConfig,
+  serializeVideoValue,
   setAssetResolver,
   useContentStore,
   useNavigate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoamigo.com/core",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Core components, router, and utilities for YoAmigo templates",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",