@yoamigo.com/core 0.3.17 → 0.4.1

package/dist/content-helpers-kWphH5Tn.d.ts

@@ -0,0 +1,376 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { ReactNode, CSSProperties } from 'react';
+
+type EditMode = 'read-only' | 'inline-edit';
+interface ContentStore {
+    getValue: (fieldId: string) => string;
+    setValue: (fieldId: string, value: string) => void;
+    mode: EditMode;
+    setMode: (mode: EditMode) => void;
+    subscribe: (listener: () => void) => () => void;
+    saveToWorker?: (fieldId: string, value: string) => Promise<void>;
+}
+declare function useContentStore(): ContentStore;
+interface ContentStoreProviderProps {
+    children: ReactNode;
+    initialContent?: Record<string, string>;
+    initialMode?: EditMode;
+}
+declare function ContentStoreProvider({ children, initialContent }: ContentStoreProviderProps): react_jsx_runtime.JSX.Element;
+
+interface ImageFieldValue {
+    src: string;
+    alt?: string;
+    objectFit?: 'cover' | 'contain' | 'fill';
+    objectPosition?: string;
+    focalPoint?: {
+        x: number;
+        y: number;
+    };
+}
+interface YaImageProps {
+    fieldId: string;
+    className?: string;
+    alt?: string;
+    objectFit?: 'cover' | 'contain' | 'fill';
+    objectPosition?: string;
+    loading?: 'lazy' | 'eager';
+    /** Fallback for backward compatibility with config.ts images */
+    fallbackSrc?: string;
+    /** Fallback alt text */
+    fallbackAlt?: string;
+}
+/**
+ * Serialize image field value for storage
+ */
+declare function serializeImageValue(value: ImageFieldValue): string;
+declare function YaImage({ fieldId, className, alt, objectFit: propObjectFit, objectPosition: propObjectPosition, loading, fallbackSrc, fallbackAlt, }: YaImageProps): react_jsx_runtime.JSX.Element;
+
+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 YaVideoProps {
+    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 YaVideo({ fieldId, className, aspectRatio: propAspectRatio, objectFit: propObjectFit, loading, defaultValue, fallbackSrc, fallbackPoster, }: YaVideoProps): react_jsx_runtime.JSX.Element;
+
+type EmbedType = 'spotify' | 'soundcloud' | 'twitter' | 'instagram' | 'custom';
+interface EmbedFieldValue {
+    /** Embed platform type */
+    type: EmbedType;
+    /** Embed URL or ID (platform-specific) */
+    src: string;
+    /** Original URL pasted by user (for editing) */
+    originalUrl?: string;
+    /** CSS aspect-ratio (e.g., "16/9", "1/1") */
+    aspectRatio?: string;
+    /** Fixed height in pixels (for audio players) */
+    height?: number;
+    /** Spotify-specific: content type */
+    spotifyType?: 'track' | 'album' | 'playlist' | 'episode' | 'show';
+}
+interface YaEmbedProps {
+    fieldId: string;
+    className?: string;
+    /** Default aspect ratio from props */
+    aspectRatio?: string;
+    /** Max width constraint */
+    maxWidth?: number;
+    /** Loading strategy */
+    loading?: 'lazy' | 'eager';
+    /** Default embed value (used when nothing in content store) */
+    defaultValue?: EmbedFieldValue;
+}
+interface ParsedEmbed {
+    type: EmbedType;
+    src: string;
+    originalUrl: string;
+    aspectRatio?: string;
+    height?: number;
+    spotifyType?: EmbedFieldValue['spotifyType'];
+}
+/**
+ * Parse a URL and detect the embed platform
+ */
+declare function parseEmbedUrl(url: string): ParsedEmbed | null;
+/**
+ * Serialize embed field value for storage
+ */
+declare function serializeEmbedValue(value: EmbedFieldValue): string;
+declare function YaEmbed({ fieldId, className, aspectRatio: propAspectRatio, maxWidth, loading, defaultValue, }: YaEmbedProps): react_jsx_runtime.JSX.Element;
+
+interface PageInfo {
+    path: string;
+    label: string;
+}
+interface YaLinkProps {
+    fieldId: string;
+    /** Default href if not set in content store */
+    href?: string;
+    className?: string;
+    /** Inline styles to apply to the link element */
+    style?: React$1.CSSProperties;
+    as?: 'a' | 'span';
+    children?: React$1.ReactNode;
+    /** Available pages for href dropdown (injected by template) */
+    availablePages?: PageInfo[];
+    /** Optional click handler called after navigation */
+    onClick?: () => void;
+    /** Target attribute for the link (e.g., "_blank" to open in new tab) */
+    target?: string;
+    /** Rel attribute for the link (e.g., "noopener noreferrer" for security) */
+    rel?: string;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            setFontSize: (fontSize: string) => ReturnType;
+            unsetFontSize: () => ReturnType;
+        };
+        fontWeight: {
+            setFontWeight: (fontWeight: string) => ReturnType;
+            unsetFontWeight: () => ReturnType;
+        };
+    }
+}
+declare function YaLink({ fieldId, href: defaultHref, className, style, as: Component, children, availablePages, onClick, target, rel }: YaLinkProps): react_jsx_runtime.JSX.Element;
+
+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 YaContainerProps {
+    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 YaContainer({ fieldId, className, style, as: Tag, children, defaultBackground, }: YaContainerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StaticText Component - Production-only static text renderer
+ *
+ * This component replaces MpText in production builds via Vite alias.
+ * No editing capabilities, no Tiptap, no DOMPurify - minimal bundle size.
+ *
+ * Content from content.json is trusted because:
+ * 1. It's created in the builder using Tiptap (which controls allowed markup)
+ * 2. It's sanitized by SafeHtml when displayed in the builder
+ * 3. Users can't inject arbitrary HTML
+ */
+/** Common HTML elements that MpText can render as */
+type MpTextElement = 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'strong' | 'em';
+interface MpTextProps {
+    fieldId: string;
+    className?: string;
+    as?: MpTextElement;
+    /** Optional fallback content (used if fieldId not in store) */
+    children?: React.ReactNode;
+}
+declare function MpText({ fieldId, className, as: Component, children }: MpTextProps): react_jsx_runtime.JSX.Element;
+
+type StaticTextProps = MpTextProps;
+
+/**
+ * StaticImage Component - Production-only static image renderer
+ *
+ * This component replaces MpImage in production builds via Vite alias.
+ * No editing overlay, no click handlers, no postMessage - minimal bundle size.
+ */
+interface MpImageProps {
+    fieldId: string;
+    className?: string;
+    alt?: string;
+    objectFit?: 'cover' | 'contain' | 'fill';
+    objectPosition?: string;
+    loading?: 'lazy' | 'eager';
+    /** Fallback for backward compatibility with config.ts images */
+    fallbackSrc?: string;
+    /** Fallback alt text */
+    fallbackAlt?: string;
+}
+declare function MpImage({ fieldId, className, alt, objectFit: propObjectFit, objectPosition: propObjectPosition, loading, fallbackSrc, fallbackAlt, }: MpImageProps): react_jsx_runtime.JSX.Element;
+
+type StaticImageProps = MpImageProps;
+
+interface MarkdownTextProps {
+    content: string;
+    className?: string;
+}
+/**
+ * MarkdownText component - renders markdown content safely
+ */
+declare function MarkdownText({ content, className }: MarkdownTextProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Content Helpers for content.ts
+ *
+ * Type-safe helper functions for creating content values.
+ * These eliminate the need for manual JSON.stringify() and escaping.
+ *
+ * Usage:
+ * ```ts
+ * import { text, image, background, video, embed } from '@yoamigo.com/core'
+ *
+ * export default {
+ *   "hero.title": text("Welcome to Our Site"),
+ *   "profile.image": image({ src: "/photo.jpg", alt: "Headshot" }),
+ *   "hero.background": background({ type: "color", backgroundColor: "#000" }),
+ * } as const satisfies Record<string, string>
+ * ```
+ */
+
+/**
+ * Text content for YaText fields.
+ *
+ * Supports HTML formatting:
+ * - `<strong>`, `<b>` for bold
+ * - `<em>`, `<i>` for italic
+ * - `<a href="...">` for links
+ * - `<span style="...">` for inline styles
+ * - `<br>` for line breaks
+ *
+ * Allowed inline styles: font-size, font-weight
+ *
+ * @example
+ * text("Hello World")
+ * text("Welcome to <strong>YoAmigo</strong>")
+ * text('<span style="font-size: 20px">Large text</span>')
+ */
+declare function text(content: string): string;
+/**
+ * Image field value for YaImage components.
+ *
+ * @example
+ * image({ src: "/photo.jpg", alt: "Description" })
+ * image({ src: "/hero.jpg", objectFit: "cover", objectPosition: "center top" })
+ * image({ src: "/profile.jpg", focalPoint: { x: 50, y: 30 } })
+ */
+declare function image(config: ImageFieldValue): string;
+/**
+ * Background config for YaContainer components.
+ *
+ * @example
+ * // Solid color
+ * background({ type: "color", backgroundColor: "#000" })
+ *
+ * // Image background
+ * background({
+ *   type: "image",
+ *   backgroundImage: { src: "/bg.jpg", objectFit: "cover" }
+ * })
+ *
+ * // Image with overlay
+ * background({
+ *   type: "image",
+ *   backgroundImage: { src: "/bg.jpg" },
+ *   overlay: { color: "#000", opacity: 0.5 }
+ * })
+ *
+ * // No background (transparent)
+ * background({ type: "none" })
+ */
+declare function background(config: BackgroundConfig): string;
+/**
+ * Video field value for YaVideo components.
+ *
+ * @example
+ * // YouTube video
+ * video({ type: "youtube", src: "dQw4w9WgXcQ" })
+ *
+ * // Vimeo video
+ * video({ type: "vimeo", src: "123456789" })
+ *
+ * // Uploaded video
+ * video({ type: "upload", src: "/videos/intro.mp4" })
+ *
+ * // With options
+ * video({ type: "youtube", src: "dQw4w9WgXcQ", autoplay: true, muted: true, loop: true })
+ */
+declare function video(config: VideoFieldValue): string;
+/**
+ * Embed field value for YaEmbed components.
+ *
+ * Supports: Spotify, SoundCloud, Twitter/X, Instagram
+ *
+ * @example
+ * // Spotify track
+ * embed({ type: "spotify", src: "track/4PTG3Z6", spotifyType: "track" })
+ *
+ * // Spotify playlist
+ * embed({ type: "spotify", src: "playlist/37i9dQZF1DXcBWIGoYBM5M", spotifyType: "playlist" })
+ *
+ * // SoundCloud
+ * embed({ type: "soundcloud", src: "user/track" })
+ */
+declare function embed(config: EmbedFieldValue): string;
+
+export { serializeBackgroundConfig as A, type YaContainerProps as B, ContentStoreProvider as C, type BackgroundConfig as D, type EditMode as E, type BackgroundImageConfig as F, type ImageFieldValue as I, MpText as M, type OverlayConfig as O, type PageInfo as P, type StaticTextProps as S, type VideoFieldValue as V, YaImage as Y, type ContentStore as a, background as b, MpImage as c, type StaticImageProps as d, embed as e, MarkdownText as f, type MarkdownTextProps as g, type YaImageProps as h, image as i, YaVideo as j, serializeVideoValue as k, type YaVideoProps as l, YaEmbed as m, serializeEmbedValue as n, type YaEmbedProps as o, parseEmbedUrl as p, type EmbedFieldValue as q, type EmbedType as r, serializeImageValue as s, text as t, useContentStore as u, video as v, YaLink as w, type YaLinkProps as x, YaContainer as y, parseBackgroundConfig as z };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ReactNode, CSSProperties } from 'react';
-export { C as ContentStoreProviderProd, g as EmbedFieldValue, h as EmbedType, d as MarkdownText, e as MarkdownTextProps, P as PageInfo, b as StaticImage, c as StaticImageProps, M as StaticText, S as StaticTextProps, Y as YaEmbed, f as YaEmbedProps, i as YaLink, j as YaLinkProps, p as parseEmbedUrl, s as serializeEmbedValue, u as useContentStoreProd } from './MarkdownText-DHJo0ofY.js';
+import React$1, { ReactNode } from 'react';
+export { D as BackgroundConfig, F as BackgroundImageConfig, C as ContentStoreProviderProd, q as EmbedFieldValue, r as EmbedType, I as ImageFieldValue, f as MarkdownText, g as MarkdownTextProps, O as OverlayConfig, P as PageInfo, c as StaticImage, d as StaticImageProps, M as StaticText, S as StaticTextProps, V as VideoFieldValue, y as YaContainer, B as YaContainerProps, m as YaEmbed, o as YaEmbedProps, Y as YaImage, h as YaImageProps, w as YaLink, x as YaLinkProps, j as YaVideo, l as YaVideoProps, b as background, e as embed, i as image, z as parseBackgroundConfig, p as parseEmbedUrl, A as serializeBackgroundConfig, n as serializeEmbedValue, s as serializeImageValue, k as serializeVideoValue, t as text, u as useContentStoreProd, v as video } from './content-helpers-kWphH5Tn.js';
 export { Link, LinkProps, NavigateFunction, Router, RouterProps, ScrollRestoration, 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';
@@ -62,122 +62,6 @@ declare module '@tiptap/core' {
 }
 declare function YaText({ fieldId, className, as: Component, children }: YaTextProps): react_jsx_runtime.JSX.Element;
 
-interface ImageFieldValue {
-    src: string;
-    alt?: string;
-    objectFit?: 'cover' | 'contain' | 'fill';
-    objectPosition?: string;
-    focalPoint?: {
-        x: number;
-        y: number;
-    };
-}
-interface YaImageProps {
-    fieldId: string;
-    className?: string;
-    alt?: string;
-    objectFit?: 'cover' | 'contain' | 'fill';
-    objectPosition?: string;
-    loading?: 'lazy' | 'eager';
-    /** Fallback for backward compatibility with config.ts images */
-    fallbackSrc?: string;
-    /** Fallback alt text */
-    fallbackAlt?: string;
-}
-/**
- * Serialize image field value for storage
- */
-declare function serializeImageValue(value: ImageFieldValue): string;
-declare function YaImage({ fieldId, className, alt, objectFit: propObjectFit, objectPosition: propObjectPosition, loading, fallbackSrc, fallbackAlt, }: YaImageProps): react_jsx_runtime.JSX.Element;
-
-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 YaVideoProps {
-    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 YaVideo({ fieldId, className, aspectRatio: propAspectRatio, objectFit: propObjectFit, loading, defaultValue, fallbackSrc, fallbackPoster, }: YaVideoProps): react_jsx_runtime.JSX.Element;
-
-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 YaContainerProps {
-    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 YaContainer({ fieldId, className, style, as: Tag, children, defaultBackground, }: YaContainerProps): react_jsx_runtime.JSX.Element;
-
 /**
  * SafeHtml Component - Secure HTML Renderer
  *
@@ -675,4 +559,4 @@ interface UseSafeTriangleReturn<T extends HTMLElement, U extends HTMLElement> {
  */
 declare function useSafeTriangle<T extends HTMLElement = HTMLElement, U extends HTMLElement = HTMLDivElement>(options?: UseSafeTriangleOptions): UseSafeTriangleReturn<T, U>;
 
-export { type AIEditContextValue, AIEditProvider, type AnimatedTextOptions, type AnimatedTextResult, type AnimationConfig, type AnimationMetadata, type AnimationOptions, type AnimationPhase, type AnimationResult, type AnimationState, type AnimationStrategy, type BackgroundConfig, type BackgroundImageConfig, type ContentStoreContextType, type ContentStoreMode, ContentStoreProvider, type ImageFieldValue, type ImageValue, type LinkValue, type OverlayConfig, SafeHtml, type SafeHtmlProps, SafeTriangleBelow, type TextAnimationMetadata, type TextDiff, type VideoFieldValue, YaContainer, type YaContainerProps, YaImage, type YaImageProps, YaText, type YaTextProps, YaVideo, type YaVideoProps, buildIntermediateText, calculateAnimationTiming, computeTextDiff, containsHtml, getTextCursorPosition, imageCrossfadeStrategy, linkTransitionStrategy, parseBackgroundConfig, serializeBackgroundConfig, serializeImageValue, serializeVideoValue, stripHtml, textTypingStrategy, useAIEditAnimation, useAIEditContext, useAIEditContextOptional, useAnimatedText, useContentStore, useSafeTriangle };
+export { type AIEditContextValue, AIEditProvider, type AnimatedTextOptions, type AnimatedTextResult, type AnimationConfig, type AnimationMetadata, type AnimationOptions, type AnimationPhase, type AnimationResult, type AnimationState, type AnimationStrategy, type ContentStoreContextType, type ContentStoreMode, ContentStoreProvider, type ImageValue, type LinkValue, SafeHtml, type SafeHtmlProps, SafeTriangleBelow, type TextAnimationMetadata, type TextDiff, YaText, type YaTextProps, buildIntermediateText, calculateAnimationTiming, computeTextDiff, containsHtml, getTextCursorPosition, imageCrossfadeStrategy, linkTransitionStrategy, stripHtml, textTypingStrategy, useAIEditAnimation, useAIEditContext, useAIEditContextOptional, useAnimatedText, useContentStore, useSafeTriangle };

package/dist/index.js

@@ -395,12 +395,12 @@ var BuilderSelectionManager = class {
       return this.toTitleCase(el.dataset.mpSelectable);
     }
     const tag = el.tagName.toLowerCase();
-    const text = el.textContent?.trim().slice(0, 30) || "";
+    const text2 = el.textContent?.trim().slice(0, 30) || "";
     if (tag === "button" || el.getAttribute("role") === "button") {
-      return text ? `"${text}" Button` : "Button";
+      return text2 ? `"${text2}" Button` : "Button";
     }
     if (tag === "a") {
-      return text ? `"${text}" Link` : "Link";
+      return text2 ? `"${text2}" Link` : "Link";
     }
     if (tag === "img") {
       return el.alt || "Image";
@@ -422,7 +422,7 @@ var BuilderSelectionManager = class {
       return caption ? `Figure: ${caption.slice(0, 20)}` : "Figure";
     }
     if (tag === "figcaption") {
-      return text ? `Caption: ${text.slice(0, 20)}` : "Caption";
+      return text2 ? `Caption: ${text2.slice(0, 20)}` : "Caption";
     }
     if (tag === "input") {
       const type = el.type || "text";
@@ -440,19 +440,19 @@ var BuilderSelectionManager = class {
       return "Dropdown";
     }
     if (tag === "label") {
-      return text ? `Label: ${text.slice(0, 20)}` : "Label";
+      return text2 ? `Label: ${text2.slice(0, 20)}` : "Label";
     }
     if (tag === "form") {
       return "Form";
     }
     if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(tag)) {
-      return text ? `Heading: ${text.slice(0, 25)}` : `${tag.toUpperCase()} Heading`;
+      return text2 ? `Heading: ${text2.slice(0, 25)}` : `${tag.toUpperCase()} Heading`;
     }
     if (tag === "p") {
-      return text ? `Paragraph: ${text.slice(0, 20)}...` : "Paragraph";
+      return text2 ? `Paragraph: ${text2.slice(0, 20)}...` : "Paragraph";
     }
     if (tag === "blockquote") {
-      return text ? `Quote: ${text.slice(0, 20)}...` : "Block Quote";
+      return text2 ? `Quote: ${text2.slice(0, 20)}...` : "Block Quote";
     }
     if (tag === "table") {
       return "Table";
@@ -461,7 +461,7 @@ var BuilderSelectionManager = class {
       return "Table Row";
     }
     if (tag === "td" || tag === "th") {
-      return text ? `Cell: ${text.slice(0, 15)}` : "Table Cell";
+      return text2 ? `Cell: ${text2.slice(0, 15)}` : "Table Cell";
     }
     if (tag === "ol") {
       return "Ordered List";
@@ -470,7 +470,7 @@ var BuilderSelectionManager = class {
       return "Unordered List";
     }
     if (tag === "li") {
-      const preview = text.length > 20 ? text.slice(0, 20) + "..." : text;
+      const preview = text2.length > 20 ? text2.slice(0, 20) + "..." : text2;
       return preview ? `List Item: ${preview}` : "List Item";
     }
     if (tag === "section") {
@@ -490,7 +490,7 @@ var BuilderSelectionManager = class {
     if (tag === "footer") {
       return "Footer";
     }
-    return text || this.toTitleCase(tag);
+    return text2 || this.toTitleCase(tag);
   }
   /**
    * Convert kebab-case or tag names to Title Case
@@ -1409,8 +1409,8 @@ function extractLinkDisplayText(href) {
   if (href.startsWith("/")) {
     const segments = href.split("/").filter(Boolean);
     const lastSegment = segments[segments.length - 1] || "home";
-    const text = lastSegment.replace(/-/g, " ").replace(/^\w/, (c) => c.toUpperCase());
-    return { text, isExternal: false };
+    const text2 = lastSegment.replace(/-/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+    return { text: text2, isExternal: false };
   }
   if (href.startsWith("mailto:")) {
     return { text: "email", isExternal: true };
@@ -1532,14 +1532,14 @@ function SafeHtml({ content, className, mode = "read-only" }) {
       clearTimeout(hideTimerRef.current);
       showTimerRef.current = window.setTimeout(() => {
         const href = link.getAttribute("href") || "";
-        const { text, isExternal } = extractLinkDisplayText(href);
+        const { text: text2, isExternal } = extractLinkDisplayText(href);
         const rect = link.getBoundingClientRect();
         const top = rect.bottom + window.scrollY + 8;
         const left = rect.left + rect.width / 2 + window.scrollX;
         setPopoverState({
           isVisible: true,
           href,
-          displayText: text,
+          displayText: text2,
           isExternal,
           position: { top, left }
         });
@@ -1859,8 +1859,8 @@ function useAIEditAnimation(fieldId, value, options) {
 }
 
 // src/lib/text-diff.ts
-function containsHtml(text) {
-  return /<[^>]+>/.test(text);
+function containsHtml(text2) {
+  return /<[^>]+>/.test(text2);
 }
 function stripHtml(html) {
   const withNewlines = html.replace(/<br\s*\/?>/gi, "\n");
@@ -3978,12 +3978,12 @@ function YaVideo({
     (e) => {
       if ((e.key === " " || e.key === "Enter") && videoData.type === "upload" && controls) {
         e.preventDefault();
-        const video = videoRef.current;
-        if (video) {
-          if (video.paused) {
-            video.play();
+        const video2 = videoRef.current;
+        if (video2) {
+          if (video2.paused) {
+            video2.play();
           } else {
-            video.pause();
+            video2.pause();
           }
         }
       }
@@ -4910,13 +4910,13 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
   const storeText = getValue(textFieldId);
   const storeHref = getValue(hrefFieldId);
   const isIconMode = children != null && typeof children !== "string";
-  const text = storeText || (typeof children === "string" ? children : "");
+  const text2 = storeText || (typeof children === "string" ? children : "");
   const href = storeHref || defaultHref;
   const isExternal = isExternalHref(href);
   const effectiveTarget = target ?? (isExternal ? "_blank" : void 0);
   const effectiveRel = rel ?? (isExternal ? "noopener noreferrer" : void 0);
   const [editingMode, setEditingMode] = useState12(null);
-  const [originalText, setOriginalText] = useState12(text);
+  const [originalText, setOriginalText] = useState12(text2);
   const [originalHref, setOriginalHref] = useState12(href);
   const [currentHref, setCurrentHref] = useState12(href);
   const [isExternalUrl, setIsExternalUrl] = useState12(false);
@@ -4970,7 +4970,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       FontSize2,
       FontWeight2
     ],
-    content: text,
+    content: text2,
     editable: true,
     editorProps: {
       attributes: {
@@ -4999,11 +4999,11 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
   });
   useEffect13(() => {
     if (editor && editingMode !== "text") {
-      if (editor.getHTML() !== text) {
-        editor.commands.setContent(text);
+      if (editor.getHTML() !== text2) {
+        editor.commands.setContent(text2);
       }
     }
-  }, [text, editor, editingMode]);
+  }, [text2, editor, editingMode]);
   useEffect13(() => {
     if (editingMode !== "link") {
       setCurrentHref(href);
@@ -5128,12 +5128,12 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }));
     } else {
       setEditingMode("text");
-      setOriginalText(text);
+      setOriginalText(text2);
       setTimeout(() => {
         editor?.chain().focus().selectAll().run();
       }, 20);
     }
-  }, [text, editor, hideEditPopover, isIconMode, fieldId]);
+  }, [text2, editor, hideEditPopover, isIconMode, fieldId]);
   const startEditLink = useCallback14(() => {
     hideEditPopover();
     setEditingMode("link");
@@ -5213,7 +5213,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     return attrs.fontWeight || "";
   };
   if (mode === "read-only") {
-    const content = isIconMode ? children : /* @__PURE__ */ jsx15(SafeHtml, { content: text, mode });
+    const content = isIconMode ? children : /* @__PURE__ */ jsx15(SafeHtml, { content: text2, mode });
     if (isInternalPath(href)) {
       return /* @__PURE__ */ jsx15(
         WouterLink,
@@ -5344,8 +5344,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
               ),
               document.body
             )
-          ] }) : /* @__PURE__ */ jsx15(SafeHtml, { content: text, mode })
-        ] }) : /* @__PURE__ */ jsx15(SafeHtml, { content: text, mode })
+          ] }) : /* @__PURE__ */ jsx15(SafeHtml, { content: text2, mode })
+        ] }) : /* @__PURE__ */ jsx15(SafeHtml, { content: text2, mode })
       }
     ),
     showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs9(
@@ -6061,9 +6061,9 @@ function MpImage({
 // src/components/MarkdownText.tsx
 import { Fragment as Fragment6 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
-function tokenize(text) {
+function tokenize(text2) {
   const tokens = [];
-  let remaining = text;
+  let remaining = text2;
   const patterns = [
     // Bold: **text**
     { regex: /^\*\*(.+?)\*\*/, type: "bold" },
@@ -6295,6 +6295,23 @@ function ScrollRestoration() {
 
 // src/router/index.ts
 import { Route, Switch, useParams } from "wouter";
+
+// src/lib/content-helpers.ts
+function text(content) {
+  return content;
+}
+function image(config) {
+  return JSON.stringify(config);
+}
+function background(config) {
+  return JSON.stringify(config);
+}
+function video(config) {
+  return JSON.stringify(config);
+}
+function embed(config) {
+  return JSON.stringify(config);
+}
 export {
   AIEditProvider,
   ContentStoreProvider,
@@ -6315,15 +6332,18 @@ export {
   YaLink,
   YaText,
   YaVideo,
+  background,
   buildIntermediateText,
   calculateAnimationTiming,
   computeTextDiff,
   containsHtml,
   contentRegistry,
+  embed,
   getAllContent,
   getContent,
   getTextCursorPosition,
   hasContent,
+  image,
   imageCrossfadeStrategy,
   initBuilderSelection,
   linkTransitionStrategy,
@@ -6337,6 +6357,7 @@ export {
   serializeVideoValue,
   setAssetResolver,
   stripHtml,
+  text,
   textTypingStrategy,
   useAIEditAnimation,
   useAIEditContext,
@@ -6346,5 +6367,6 @@ export {
   useContentStore2 as useContentStoreProd,
   useNavigate,
   useParams,
-  useSafeTriangle
+  useSafeTriangle,
+  video
 };

package/dist/prod.d.ts

@@ -1,4 +1,4 @@
-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, p as parseEmbedUrl, u as useContentStore } from './MarkdownText-DHJo0ofY.js';
+export { a as ContentStore, E as ContentStoreMode, C as ContentStoreProvider, f as MarkdownText, g as MarkdownTextProps, P as PageInfo, c as StaticImage, d as StaticImageProps, M as StaticText, S as StaticTextProps, c as YaImage, d as YaImageProps, M as YaText, S as YaTextProps, b as background, e as embed, i as image, p as parseEmbedUrl, t as text, u as useContentStore, v as video } from './content-helpers-kWphH5Tn.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { CSSProperties, ReactNode } from 'react';
 export { Link, LinkProps, NavigateFunction, Router, RouterProps, ScrollRestoration, useNavigate } from './router.js';

package/dist/prod.js

@@ -241,9 +241,9 @@ function StaticLink({ fieldId, href: defaultHref = "#", className, style, as: Co
 // src/components/MarkdownText.tsx
 import { Fragment } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-function tokenize(text) {
+function tokenize(text2) {
   const tokens = [];
-  let remaining = text;
+  let remaining = text2;
   const patterns = [
     // Bold: **text**
     { regex: /^\*\*(.+?)\*\*/, type: "bold" },
@@ -515,12 +515,12 @@ function StaticVideo({
     (e) => {
       if ((e.key === " " || e.key === "Enter") && videoData.type === "upload" && controls) {
         e.preventDefault();
-        const video = videoRef.current;
-        if (video) {
-          if (video.paused) {
-            video.play();
+        const video2 = videoRef.current;
+        if (video2) {
+          if (video2.paused) {
+            video2.play();
           } else {
-            video.pause();
+            video2.pause();
           }
         }
       }
@@ -1051,6 +1051,23 @@ function ScrollRestoration() {
 
 // src/router/index.ts
 import { Route, Switch, useParams } from "wouter";
+
+// src/lib/content-helpers.ts
+function text(content) {
+  return content;
+}
+function image(config) {
+  return JSON.stringify(config);
+}
+function background(config) {
+  return JSON.stringify(config);
+}
+function video(config) {
+  return JSON.stringify(config);
+}
+function embed(config) {
+  return JSON.stringify(config);
+}
 export {
   ContentStoreProvider,
   Link,
@@ -1072,10 +1089,13 @@ export {
   StaticLink as YaLink,
   MpText as YaText,
   StaticVideo as YaVideo,
+  background,
   contentRegistry,
+  embed,
   getAllContent,
   getContent,
   hasContent,
+  image,
   parseBackgroundConfig,
   parseEmbedUrl,
   registerContent,
@@ -1084,7 +1104,9 @@ export {
   serializeEmbedValue,
   serializeVideoValue,
   setAssetResolver,
+  text,
   useContentStore,
   useNavigate,
-  useParams
+  useParams,
+  video
 };

package/package.json

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

package/dist/MarkdownText-DHJo0ofY.d.ts

@@ -1,157 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ReactNode } from 'react';
-
-type EditMode = 'read-only' | 'inline-edit';
-interface ContentStore {
-    getValue: (fieldId: string) => string;
-    setValue: (fieldId: string, value: string) => void;
-    mode: EditMode;
-    setMode: (mode: EditMode) => void;
-    subscribe: (listener: () => void) => () => void;
-    saveToWorker?: (fieldId: string, value: string) => Promise<void>;
-}
-declare function useContentStore(): ContentStore;
-interface ContentStoreProviderProps {
-    children: ReactNode;
-    initialContent?: Record<string, string>;
-    initialMode?: EditMode;
-}
-declare function ContentStoreProvider({ children, initialContent }: ContentStoreProviderProps): react_jsx_runtime.JSX.Element;
-
-type EmbedType = 'spotify' | 'soundcloud' | 'twitter' | 'instagram' | 'custom';
-interface EmbedFieldValue {
-    /** Embed platform type */
-    type: EmbedType;
-    /** Embed URL or ID (platform-specific) */
-    src: string;
-    /** Original URL pasted by user (for editing) */
-    originalUrl?: string;
-    /** CSS aspect-ratio (e.g., "16/9", "1/1") */
-    aspectRatio?: string;
-    /** Fixed height in pixels (for audio players) */
-    height?: number;
-    /** Spotify-specific: content type */
-    spotifyType?: 'track' | 'album' | 'playlist' | 'episode' | 'show';
-}
-interface YaEmbedProps {
-    fieldId: string;
-    className?: string;
-    /** Default aspect ratio from props */
-    aspectRatio?: string;
-    /** Max width constraint */
-    maxWidth?: number;
-    /** Loading strategy */
-    loading?: 'lazy' | 'eager';
-    /** Default embed value (used when nothing in content store) */
-    defaultValue?: EmbedFieldValue;
-}
-interface ParsedEmbed {
-    type: EmbedType;
-    src: string;
-    originalUrl: string;
-    aspectRatio?: string;
-    height?: number;
-    spotifyType?: EmbedFieldValue['spotifyType'];
-}
-/**
- * Parse a URL and detect the embed platform
- */
-declare function parseEmbedUrl(url: string): ParsedEmbed | null;
-/**
- * Serialize embed field value for storage
- */
-declare function serializeEmbedValue(value: EmbedFieldValue): string;
-declare function YaEmbed({ fieldId, className, aspectRatio: propAspectRatio, maxWidth, loading, defaultValue, }: YaEmbedProps): react_jsx_runtime.JSX.Element;
-
-interface PageInfo {
-    path: string;
-    label: string;
-}
-interface YaLinkProps {
-    fieldId: string;
-    /** Default href if not set in content store */
-    href?: string;
-    className?: string;
-    /** Inline styles to apply to the link element */
-    style?: React$1.CSSProperties;
-    as?: 'a' | 'span';
-    children?: React$1.ReactNode;
-    /** Available pages for href dropdown (injected by template) */
-    availablePages?: PageInfo[];
-    /** Optional click handler called after navigation */
-    onClick?: () => void;
-    /** Target attribute for the link (e.g., "_blank" to open in new tab) */
-    target?: string;
-    /** Rel attribute for the link (e.g., "noopener noreferrer" for security) */
-    rel?: string;
-}
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        fontSize: {
-            setFontSize: (fontSize: string) => ReturnType;
-            unsetFontSize: () => ReturnType;
-        };
-        fontWeight: {
-            setFontWeight: (fontWeight: string) => ReturnType;
-            unsetFontWeight: () => ReturnType;
-        };
-    }
-}
-declare function YaLink({ fieldId, href: defaultHref, className, style, as: Component, children, availablePages, onClick, target, rel }: YaLinkProps): react_jsx_runtime.JSX.Element;
-
-/**
- * StaticText Component - Production-only static text renderer
- *
- * This component replaces MpText in production builds via Vite alias.
- * No editing capabilities, no Tiptap, no DOMPurify - minimal bundle size.
- *
- * Content from content.json is trusted because:
- * 1. It's created in the builder using Tiptap (which controls allowed markup)
- * 2. It's sanitized by SafeHtml when displayed in the builder
- * 3. Users can't inject arbitrary HTML
- */
-/** Common HTML elements that MpText can render as */
-type MpTextElement = 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'strong' | 'em';
-interface MpTextProps {
-    fieldId: string;
-    className?: string;
-    as?: MpTextElement;
-    /** Optional fallback content (used if fieldId not in store) */
-    children?: React.ReactNode;
-}
-declare function MpText({ fieldId, className, as: Component, children }: MpTextProps): react_jsx_runtime.JSX.Element;
-
-type StaticTextProps = MpTextProps;
-
-/**
- * StaticImage Component - Production-only static image renderer
- *
- * This component replaces MpImage in production builds via Vite alias.
- * No editing overlay, no click handlers, no postMessage - minimal bundle size.
- */
-interface MpImageProps {
-    fieldId: string;
-    className?: string;
-    alt?: string;
-    objectFit?: 'cover' | 'contain' | 'fill';
-    objectPosition?: string;
-    loading?: 'lazy' | 'eager';
-    /** Fallback for backward compatibility with config.ts images */
-    fallbackSrc?: string;
-    /** Fallback alt text */
-    fallbackAlt?: string;
-}
-declare function MpImage({ fieldId, className, alt, objectFit: propObjectFit, objectPosition: propObjectPosition, loading, fallbackSrc, fallbackAlt, }: MpImageProps): react_jsx_runtime.JSX.Element;
-
-type StaticImageProps = MpImageProps;
-
-interface MarkdownTextProps {
-    content: string;
-    className?: string;
-}
-/**
- * MarkdownText component - renders markdown content safely
- */
-declare function MarkdownText({ content, className }: MarkdownTextProps): react_jsx_runtime.JSX.Element;
-
-export { ContentStoreProvider as C, type EditMode as E, MpText as M, type PageInfo as P, type StaticTextProps as S, YaEmbed as Y, type ContentStore as a, MpImage as b, type StaticImageProps as c, MarkdownText as d, type MarkdownTextProps as e, type YaEmbedProps as f, type EmbedFieldValue as g, type EmbedType as h, YaLink as i, type YaLinkProps as j, parseEmbedUrl as p, serializeEmbedValue as s, useContentStore as u };