@yoamigo.com/core 0.3.16 → 0.4.0

package/dist/{MarkdownText-DHJo0ofY.d.ts → MarkdownText-_ykp-njt.d.ts}

@@ -154,4 +154,4 @@ interface MarkdownTextProps {
  */
 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 };
+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 EmbedFieldValue as f, type YaEmbedProps as g, type EmbedType as h, YaLink as i, type YaLinkProps as j, parseEmbedUrl as p, serializeEmbedValue as s, useContentStore as u };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 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 { f as EmbedFieldValue } from './MarkdownText-_ykp-njt.js';
+export { C as ContentStoreProviderProd, 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, g as YaEmbedProps, i as YaLink, j as YaLinkProps, p as parseEmbedUrl, s as serializeEmbedValue, u as useContentStoreProd } from './MarkdownText-_ykp-njt.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';
@@ -229,6 +230,109 @@ interface SafeTriangleBelowProps {
  */
 declare function SafeTriangleBelow({ triggerRef, popoverRef, isVisible, onLeave, onStayInside, }: SafeTriangleBelowProps): null;
 
+/**
+ * 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;
+
 /**
  * Animation state for a single field
  */
@@ -675,4 +779,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 BackgroundConfig, type BackgroundImageConfig, type ContentStoreContextType, type ContentStoreMode, ContentStoreProvider, EmbedFieldValue, 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, background, buildIntermediateText, calculateAnimationTiming, computeTextDiff, containsHtml, embed, getTextCursorPosition, image, imageCrossfadeStrategy, linkTransitionStrategy, parseBackgroundConfig, serializeBackgroundConfig, serializeImageValue, serializeVideoValue, stripHtml, text, textTypingStrategy, useAIEditAnimation, useAIEditContext, useAIEditContextOptional, useAnimatedText, useContentStore, useSafeTriangle, video };

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");
@@ -3552,7 +3552,7 @@ function YaImage({
   fallbackSrc,
   fallbackAlt
 }) {
-  const { getValue, mode } = useContentStore();
+  const { getValue, setValue, mode } = useContentStore();
   const containerRef = useRef8(null);
   const imgRef = useRef8(null);
   const [isSelected, setIsSelected] = useState7(false);
@@ -3560,12 +3560,14 @@ function YaImage({
   const [isSmallImage, setIsSmallImage] = useState7(false);
   const [isDropMode, setIsDropMode] = useState7(false);
   const [isDropHover, setIsDropHover] = useState7(false);
+  const [previewOverride, setPreviewOverride] = useState7(null);
   const rawValue = getValue(fieldId);
   const imageData = parseImageValue(rawValue);
-  const src = imageData.src || fallbackSrc || PLACEHOLDER_SVG;
-  const altText = imageData.alt || alt || fallbackAlt || "";
-  const objectFit = imageData.objectFit || propObjectFit || "cover";
-  const objectPosition = getObjectPosition(imageData) || propObjectPosition || "50% 50%";
+  const displayData = previewOverride || imageData;
+  const src = displayData.src || fallbackSrc || PLACEHOLDER_SVG;
+  const altText = displayData.alt || alt || fallbackAlt || "";
+  const objectFit = displayData.objectFit || propObjectFit || "cover";
+  const objectPosition = getObjectPosition(displayData) || propObjectPosition || "50% 50%";
   const handleClick = useCallback9(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
@@ -3598,17 +3600,23 @@ function YaImage({
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_IMAGE_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
+        const value = event.data.value;
+        setValue(fieldId, serializeImageValue(value), "user");
+        setPreviewOverride(null);
         setIsSelected(false);
       }
       if (event.data?.type === "YA_IMAGE_EDIT_CANCEL" && event.data.fieldId === fieldId) {
+        setPreviewOverride(null);
         setIsSelected(false);
       }
       if (event.data?.type === "YA_IMAGE_UPDATE_PREVIEW" && event.data.fieldId === fieldId) {
+        const value = event.data.value;
+        setPreviewOverride(value);
       }
     };
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
-  }, [mode, fieldId]);
+  }, [mode, fieldId, setValue]);
   useEffect8(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
@@ -3970,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();
           }
         }
       }
@@ -4902,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);
@@ -4962,7 +4970,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       FontSize2,
       FontWeight2
     ],
-    content: text,
+    content: text2,
     editable: true,
     editorProps: {
       attributes: {
@@ -4991,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);
@@ -5120,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");
@@ -5205,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,
@@ -5336,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(
@@ -6053,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" },
@@ -6287,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,
@@ -6307,15 +6332,18 @@ export {
   YaLink,
   YaText,
   YaVideo,
+  background,
   buildIntermediateText,
   calculateAnimationTiming,
   computeTextDiff,
   containsHtml,
   contentRegistry,
+  embed,
   getAllContent,
   getContent,
   getTextCursorPosition,
   hasContent,
+  image,
   imageCrossfadeStrategy,
   initBuilderSelection,
   linkTransitionStrategy,
@@ -6329,6 +6357,7 @@ export {
   serializeVideoValue,
   setAssetResolver,
   stripHtml,
+  text,
   textTypingStrategy,
   useAIEditAnimation,
   useAIEditContext,
@@ -6338,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, 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-_ykp-njt.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/package.json

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