@deneb-ui/ui 2.0.32 → 2.0.34

package/dist/EditableText.js

@@ -151,7 +151,7 @@ function EditableText({ id, 'data-preview-field-path': previewFieldPath, default
         ...styleVars,
         ...style,
     };
-    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": path, "data-preview-style-target": path, "data-preview-style-type": "text", "data-preview-placeholder": isPlaceholderActive ? 'true' : undefined, className: `deneb-text ${className}`.trim(), style: typographyStyle, ...props, children: displayContent }));
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": path, "data-preview-style-target": path, "data-preview-style-type": "text", "data-preview-placeholder": isPlaceholderActive ? 'true' : undefined, className: `deneb-text ${className}`.trim(), style: typographyStyle, suppressHydrationWarning: true, ...props, children: displayContent }));
 }
 function EditableHeading({ level = 2, as, ...props }) {
     const variant = `h${level}`;

package/dist/PreviewField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type PreviewFieldProps<T extends React.ElementType = 'span'> = {
+    as?: T;
+    path: string;
+    children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'children'>;
+/**
+ * Leaf node for Fivora visual editing. Uses suppressHydrationWarning because the
+ * preview focus bridge may annotate the DOM before React hydrates.
+ */
+export declare function PreviewField<T extends React.ElementType = 'span'>({ as, path, children, ...rest }: PreviewFieldProps<T>): React.JSX.Element;

package/dist/PreviewField.js

@@ -0,0 +1,13 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewField = PreviewField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Leaf node for Fivora visual editing. Uses suppressHydrationWarning because the
+ * preview focus bridge may annotate the DOM before React hydrates.
+ */
+function PreviewField({ as, path, children, ...rest }) {
+    const Component = (as || 'span');
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": path, suppressHydrationWarning: true, ...rest, children: children }));
+}

package/dist/business/HeritageCollage.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface CollageImageItem {
+    id?: string;
+    image?: string | null;
+    caption?: string | null;
+}
+export interface HeritageCollageProps {
+    collageHeading?: React.ReactNode;
+    collageDescription?: React.ReactNode;
+    historyHeading?: React.ReactNode;
+    history?: React.ReactNode;
+    images?: CollageImageItem[];
+    collageHeadingPath?: string;
+    collageDescriptionPath?: string;
+    historyHeadingPath?: string;
+    historyPath?: string;
+    listPath?: string;
+    className?: string;
+}
+/**
+ * Heritage collage + history block for About pages.
+ * List images use standard Fivora list/item/field path attributes.
+ */
+export declare function HeritageCollage({ collageHeading, collageDescription, historyHeading, history, images, collageHeadingPath, collageDescriptionPath, historyHeadingPath, historyPath, listPath, className, }: HeritageCollageProps): React.JSX.Element | null;

package/dist/business/HeritageCollage.js

@@ -0,0 +1,51 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeritageCollage = HeritageCollage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const urls_1 = require("../utils/urls");
+const COLLAGE_LAYOUT = [
+    'row-span-2 min-h-[220px]',
+    'min-h-[140px]',
+    'min-h-[140px]',
+    'col-span-2 min-h-[180px]',
+];
+/**
+ * Heritage collage + history block for About pages.
+ * List images use standard Fivora list/item/field path attributes.
+ */
+function HeritageCollage({ collageHeading, collageDescription, historyHeading, history, images = [], collageHeadingPath, collageDescriptionPath, historyHeadingPath, historyPath, listPath = 'about.collageImages', className = '', }) {
+    const hasContent = images.length > 0 ||
+        (typeof collageDescription === 'string' ? collageDescription.trim() : collageDescription) ||
+        (typeof history === 'string' ? history.trim() : history);
+    if (!hasContent)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("section", { className: `deneb-heritage-collage ${className}`.trim(), "data-design-section": "heritage-collage", style: { marginTop: '3rem', paddingTop: '2.5rem', borderTop: '1px solid var(--color-border, #e2e8f0)' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+                gap: '2rem',
+                alignItems: 'start',
+            }, children: [images.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": listPath, style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(2, 1fr)',
+                        gap: '0.75rem',
+                        gridAutoRows: 'minmax(120px, auto)',
+                    }, children: images.map((item, idx) => ((0, jsx_runtime_1.jsxs)("figure", { "data-preview-item-path": `${listPath}[${idx}]`, className: COLLAGE_LAYOUT[idx] ?? COLLAGE_LAYOUT[1], style: {
+                            position: 'relative',
+                            overflow: 'hidden',
+                            borderRadius: '1rem',
+                            border: '1px solid var(--color-border, #e2e8f0)',
+                            margin: 0,
+                            minHeight: '140px',
+                            background: 'var(--color-secondary, #f1f5f9)',
+                        }, children: [(0, jsx_runtime_1.jsx)("img", { src: (0, urls_1.withBasePath)(item.image || '/placeholder.svg'), alt: "", "data-preview-field-path": `${listPath}[${idx}].image`, style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } }), item.caption ? ((0, jsx_runtime_1.jsx)("figcaption", { style: {
+                                    position: 'absolute',
+                                    insetInline: 0,
+                                    bottom: 0,
+                                    padding: '0.75rem 1rem',
+                                    background: 'linear-gradient(transparent, rgba(15,23,42,0.85))',
+                                    color: '#fff',
+                                    fontSize: '0.8125rem',
+                                    fontWeight: 600,
+                                }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${listPath}[${idx}].caption`, children: item.caption }) })) : null] }, item.id || `collage-${idx}`))) })) : null, (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [collageHeading ? ((0, jsx_runtime_1.jsx)("h2", { ...(collageHeadingPath ? { 'data-preview-field-path': collageHeadingPath } : {}), style: { fontSize: '1.5rem', fontWeight: 700, margin: 0 }, children: collageHeading })) : null, collageDescription ? ((0, jsx_runtime_1.jsx)("p", { ...(collageDescriptionPath ? { 'data-preview-field-path': collageDescriptionPath } : {}), style: { margin: 0, lineHeight: 1.6, color: 'var(--color-muted, #64748b)' }, children: collageDescription })) : null, historyHeading ? ((0, jsx_runtime_1.jsx)("h3", { ...(historyHeadingPath ? { 'data-preview-field-path': historyHeadingPath } : {}), style: { fontSize: '1.125rem', fontWeight: 700, margin: '0.5rem 0 0' }, children: historyHeading })) : null, history ? ((0, jsx_runtime_1.jsx)("p", { ...(historyPath ? { 'data-preview-field-path': historyPath } : {}), style: { margin: 0, lineHeight: 1.7 }, children: history })) : null] })] }) }));
+}

package/dist/business/index.d.ts

@@ -1 +1,2 @@
 export * from './BusinessHours';
+export * from './HeritageCollage';

package/dist/business/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BusinessHours"), exports);
+__exportStar(require("./HeritageCollage"), exports);

package/dist/core/ListActionCta.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ListActionCtaProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** List path without index, e.g. `seasonal.preOrderCta`. */
+    listPath: string;
+    itemIndex?: number;
+    /** When true, stamps list/item paths and editable label + hidden URL (use on first card only). */
+    editable?: boolean;
+    buttonLabel: string;
+    buttonUrl: string;
+    urlMode?: 'auto' | 'external';
+    /** Optional icons or extra content rendered before the label span. */
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+}
+/**
+ * Shared list CTA for grids (Pre-Order, Add to Tray, etc.).
+ * Edit via the first card's button; other cards mirror the same label/URL statically.
+ */
+export declare function ListActionCta({ listPath, itemIndex, editable, buttonLabel, buttonUrl, urlMode, leading, trailing, className, ...rest }: ListActionCtaProps): React.JSX.Element;

package/dist/core/ListActionCta.js

@@ -0,0 +1,20 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListActionCta = ListActionCta;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const urls_1 = require("../utils/urls");
+/**
+ * Shared list CTA for grids (Pre-Order, Add to Tray, etc.).
+ * Edit via the first card's button; other cards mirror the same label/URL statically.
+ */
+function ListActionCta({ listPath, itemIndex = 0, editable = true, buttonLabel, buttonUrl, urlMode = 'auto', leading, trailing, className, ...rest }) {
+    const href = (0, urls_1.resolveActionUrl)(buttonUrl, urlMode);
+    const labelPath = `${listPath}[${itemIndex}].buttonLabel`;
+    const urlPath = `${listPath}[${itemIndex}].buttonUrl`;
+    const opensNewTab = Boolean(href && /^https?:\/\//i.test(href));
+    const link = ((0, jsx_runtime_1.jsxs)("a", { href: href || '#', target: opensNewTab ? '_blank' : undefined, rel: opensNewTab ? 'noopener noreferrer' : undefined, className: className, "data-preview-static": editable ? undefined : 'list-action-cta', ...rest, children: [leading, editable ? ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": labelPath, children: buttonLabel })) : ((0, jsx_runtime_1.jsx)("span", { "data-preview-static": "list-action-cta-label", children: buttonLabel })), trailing] }));
+    if (!editable)
+        return link;
+    return ((0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": listPath, children: (0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": `${listPath}[${itemIndex}]`, children: [link, (0, jsx_runtime_1.jsx)("span", { hidden: true, "aria-hidden": "true", "data-preview-field-path": urlPath, children: buttonUrl })] }) }));
+}

package/dist/core/SplitFieldAction.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface SplitFieldActionProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Visible button / link label (inspector reads textContent). */
+    label: React.ReactNode;
+    /** Raw URL stored in site data (hidden from the visible label). */
+    urlValue: string;
+    labelFieldPath: string;
+    urlFieldPath: string;
+    /** When `auto`, bare phone numbers become WhatsApp links. */
+    urlMode?: 'auto' | 'external';
+    icon?: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link';
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * Fivora-safe action link: editable label on the anchor, URL on a hidden sibling span.
+ * Never put the URL on the same node as the label — the inspector overwrites paired fields.
+ */
+export declare function SplitFieldAction({ label, urlValue, labelFieldPath, urlFieldPath, urlMode, href, icon, variant, size, className, style, children, ...rest }: SplitFieldActionProps): React.JSX.Element | null;

package/dist/core/SplitFieldAction.js

@@ -0,0 +1,66 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitFieldAction = SplitFieldAction;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const urls_1 = require("../utils/urls");
+/**
+ * Fivora-safe action link: editable label on the anchor, URL on a hidden sibling span.
+ * Never put the URL on the same node as the label — the inspector overwrites paired fields.
+ */
+function SplitFieldAction({ label, urlValue, labelFieldPath, urlFieldPath, urlMode = 'auto', href, icon, variant = 'primary', size = 'md', className = '', style, children, ...rest }) {
+    const resolvedHref = href || (0, urls_1.resolveActionUrl)(urlValue, urlMode);
+    if (!resolvedHref && !label && !children)
+        return null;
+    const baseStyles = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '0.5rem',
+        fontWeight: 500,
+        textDecoration: 'none',
+        transition: 'all 0.2s ease',
+        cursor: 'pointer',
+        borderRadius: '0.5rem',
+        ...style,
+    };
+    const sizeStyles = {
+        sm: { fontSize: '0.875rem', padding: '0.375rem 0.75rem' },
+        md: { fontSize: '0.95rem', padding: '0.5rem 1rem' },
+        lg: { fontSize: '1.05rem', padding: '0.75rem 1.5rem' },
+    };
+    const variantStyles = {
+        primary: {
+            backgroundColor: 'var(--color-primary, #0f172a)',
+            color: '#ffffff',
+        },
+        secondary: {
+            backgroundColor: 'var(--color-secondary, #f1f5f9)',
+            color: 'var(--color-text, #0f172a)',
+        },
+        outline: {
+            backgroundColor: 'transparent',
+            border: '1px solid var(--color-border, #e2e8f0)',
+            color: 'var(--color-text, #0f172a)',
+        },
+        ghost: {
+            backgroundColor: 'transparent',
+            color: 'var(--color-text, #0f172a)',
+        },
+        link: {
+            backgroundColor: 'transparent',
+            color: 'var(--color-primary, #2563eb)',
+            padding: 0,
+            textDecoration: 'underline',
+            borderRadius: 0,
+        },
+    };
+    const mergedStyles = {
+        ...baseStyles,
+        ...(variant !== 'link' ? sizeStyles[size] : {}),
+        ...variantStyles[variant],
+    };
+    const finalHref = resolvedHref || '#';
+    const opensNewTab = finalHref !== '#' && /^https?:\/\//i.test(finalHref);
+    return ((0, jsx_runtime_1.jsxs)("span", { className: "deneb-split-field-action", style: { display: 'contents' }, children: [(0, jsx_runtime_1.jsxs)("a", { href: finalHref, "data-preview-static": "split-field-action", target: opensNewTab ? '_blank' : undefined, rel: opensNewTab ? 'noopener noreferrer' : undefined, className: `deneb-split-field-action-link ${className}`.trim(), style: mergedStyles, ...rest, children: [icon, children, (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": labelFieldPath, children: label })] }), (0, jsx_runtime_1.jsx)("span", { hidden: true, "aria-hidden": "true", "data-preview-field-path": urlFieldPath, children: urlValue })] }));
+}

package/dist/core/index.d.ts

@@ -1 +1,3 @@
 export * from './DenebAction';
+export * from './SplitFieldAction';
+export * from './ListActionCta';

package/dist/core/index.js

@@ -15,3 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DenebAction"), exports);
+__exportStar(require("./SplitFieldAction"), exports);
+__exportStar(require("./ListActionCta"), exports);

package/dist/index.d.ts

@@ -2,6 +2,7 @@
  * DENEB UI — The Visual-First React Framework for High-Converting Storefronts
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
+export * from './PreviewField';
 export * from './EditableText';
 export * from './EditableImage';
 export * from './EditableList';

package/dist/index.js

@@ -20,6 +20,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = exports.FAQ = exports.Accordion = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.CustomerReviews = exports.ProductDetail = exports.ProductGrid = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = exports.collectStyleTargetsFromHtml = exports.validateStyleTree = exports.styleToCssVariables = exports.patchStyleByPath = exports.patchElementStyle = exports.STYLE_TYPE_ATTRIBUTE = exports.STYLE_TARGET_ATTRIBUTE = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.formatResponsiveFontSize = exports.resolveInstallableFont = exports.normalizeFontId = exports.lookupFontDefinition = exports.listFontsByCategory = exports.collectFontIdsFromSiteData = exports.buildGoogleFontsStylesheetUrl = exports.DENEB_GOOGLE_FONT_COUNT = exports.DENEB_FONT_REGISTRY = exports.useDenebFonts = exports.DENEB_FONTS_LINK_ID = exports.FontLoader = exports.DenebComponentStyles = exports.ResponsiveBaseStyles = void 0;
 exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = void 0;
+__exportStar(require("./PreviewField"), exports);
 __exportStar(require("./EditableText"), exports);
 __exportStar(require("./EditableImage"), exports);
 __exportStar(require("./EditableList"), exports);

package/dist/location/LocationCard.d.ts

@@ -1,13 +1,18 @@
 import React from 'react';
 export interface LocationCardProps {
+    name?: string | null;
     title?: string;
     titleFieldPath?: string;
     address?: string | null;
     city?: string | null;
+    state?: string | null;
     country?: string | null;
     postalCode?: string | null;
     mapUrl?: string | null;
+    addressUrl?: string | null;
+    url?: string | null;
     fieldPath?: string;
+    nameFieldPath?: string;
     addressFieldPath?: string;
     mapUrlFieldPath?: string;
     directionsLabel?: string;
@@ -17,4 +22,4 @@ export interface LocationCardProps {
 /**
  * Premium storefront LocationCard displaying address, pin icon, and Google Maps directions button.
  */
-export declare function LocationCard({ title, titleFieldPath, address, city, country, postalCode, mapUrl, fieldPath, addressFieldPath, mapUrlFieldPath, directionsLabel, className, style, }: LocationCardProps): React.JSX.Element | null;
+export declare function LocationCard({ name, title, titleFieldPath, address, city, state, country, postalCode, mapUrl, addressUrl, url, fieldPath, nameFieldPath, addressFieldPath, mapUrlFieldPath, directionsLabel, className, style, }: LocationCardProps): React.JSX.Element | null;

package/dist/location/LocationCard.js

@@ -9,8 +9,11 @@ const EditableText_1 = require("../EditableText");
 /**
  * Premium storefront LocationCard displaying address, pin icon, and Google Maps directions button.
  */
-function LocationCard({ title = 'Our Location', titleFieldPath, address, city, country, postalCode, mapUrl, fieldPath, addressFieldPath = 'common.business.location.address', mapUrlFieldPath = 'common.business.location.mapUrl', directionsLabel = 'Get Directions →', className = '', style, }) {
-    if (!address && !city && !country && !mapUrl) {
+function LocationCard({ name, title = 'Our Location', titleFieldPath, address, city, state, country, postalCode, mapUrl, addressUrl, url, fieldPath, nameFieldPath, addressFieldPath = 'common.business.location.address', mapUrlFieldPath = 'common.business.location.addressUrl', directionsLabel = 'Get Directions →', className = '', style, }) {
+    const explicitUrl = (addressUrl || mapUrl || url || '').trim();
+    const cardTitle = name || title || 'Our Location';
+    const resolvedTitleFieldPath = nameFieldPath || titleFieldPath || (fieldPath ? `${fieldPath}.name` : 'contact.locationTitle');
+    if (!address && !city && !country && !explicitUrl && !name) {
         return null;
     }
     const cardStyles = {
@@ -37,5 +40,5 @@ function LocationCard({ title = 'Our Location', titleFieldPath, address, city, c
         alignItems: 'center',
         justifyContent: 'center',
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-location-card ${className}`.trim(), style: cardStyles, children: [(0, jsx_runtime_1.jsx)("div", { style: iconCircleStyles, children: (0, jsx_runtime_1.jsxs)("svg", { "data-preview-static": "location-card-icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "10", r: "3" })] }) }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: titleFieldPath || (fieldPath ? `${fieldPath}.title` : 'contact.locationTitle'), defaultValue: title, style: { margin: 0, fontSize: '1.25rem', fontWeight: 600, color: 'var(--color-text, #0f172a)' } }), (0, jsx_runtime_1.jsx)(Address_1.Address, { address: address, city: city, country: country, postalCode: postalCode, fieldPath: fieldPath, addressFieldPath: addressFieldPath }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '0.5rem', width: '100%' }, children: (0, jsx_runtime_1.jsx)(MapLink_1.MapLink, { mapUrl: mapUrl, address: address, city: city, country: country, label: directionsLabel, fieldPath: mapUrlFieldPath, variant: "primary", size: "md", style: { width: '100%' } }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-location-card ${className}`.trim(), style: cardStyles, children: [(0, jsx_runtime_1.jsx)("div", { style: iconCircleStyles, children: (0, jsx_runtime_1.jsxs)("svg", { "data-preview-static": "location-card-icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "10", r: "3" })] }) }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: titleFieldPath || (fieldPath ? `${fieldPath}.title` : 'contact.locationTitle'), defaultValue: cardTitle, style: { margin: 0, fontSize: '1.25rem', fontWeight: 600, color: 'var(--color-text, #0f172a)' } }), (0, jsx_runtime_1.jsx)(Address_1.Address, { address: address, city: city, country: country, postalCode: postalCode, fieldPath: fieldPath, addressFieldPath: addressFieldPath }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '0.5rem', width: '100%' }, children: (0, jsx_runtime_1.jsx)(MapLink_1.MapLink, { name: name, mapUrl: explicitUrl, addressUrl: explicitUrl, url: explicitUrl, address: address, city: city, state: state, country: country, postalCode: postalCode, label: directionsLabel, urlFieldPath: mapUrlFieldPath, variant: "primary", size: "md", style: { width: '100%' } }) })] }));
 }

package/dist/location/LocationLink.js

@@ -8,7 +8,7 @@ const MapLink_1 = require("./MapLink");
 /**
  * Combines physical address with an interactive "Get Directions" action.
  */
-function LocationLink({ address, city, country, mapUrl, fieldPath, addressFieldPath = 'common.business.location.address', mapUrlFieldPath = 'common.business.location.mapUrl', directionsLabel = 'Get Directions', showAddress = true, className = '', style, }) {
+function LocationLink({ address, city, country, mapUrl, fieldPath, addressFieldPath = 'common.business.location.address', mapUrlFieldPath = 'common.business.location.addressUrl', directionsLabel = 'Get Directions', showAddress = true, className = '', style, }) {
     if (!address && !city && !country && !mapUrl) {
         return null;
     }

package/dist/location/MapLink.d.ts

@@ -1,13 +1,26 @@
 import React from 'react';
 export interface MapLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    name?: string | null;
     mapUrl?: string | null;
+    addressUrl?: string | null;
+    url?: string | null;
     address?: string | null;
     city?: string | null;
+    state?: string | null;
     country?: string | null;
+    postalCode?: string | null;
     label?: React.ReactNode;
+    /** Visible label field path, e.g. `contact.directionsLabel`. */
+    labelFieldPath?: string;
+    /** Hidden URL field path, e.g. `contact.directionsUrl`. */
+    urlFieldPath?: string;
+    /** @deprecated Use `urlFieldPath` instead. */
     fieldPath?: string;
     variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link';
     size?: 'sm' | 'md' | 'lg';
     icon?: React.ReactNode;
 }
-export declare function MapLink({ mapUrl, address, city, country, label, fieldPath, variant, size, icon, className, style, ...rest }: MapLinkProps): React.JSX.Element | null;
+/**
+ * Directions CTA with Fivora-safe split fields: label on the button, URL on a hidden sibling.
+ */
+export declare function MapLink({ name, mapUrl, addressUrl, url, address, city, state, country, postalCode, label, labelFieldPath, urlFieldPath, fieldPath, variant, size, icon, className, style, ...rest }: MapLinkProps): React.JSX.Element | null;

package/dist/location/MapLink.js

@@ -4,11 +4,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapLink = MapLink;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const urls_1 = require("../utils/urls");
-function MapLink({ mapUrl, address, city, country, label = 'Get Directions', fieldPath = 'common.business.location.mapUrl', variant = 'outline', size = 'md', icon, className = '', style, ...rest }) {
-    const resolvedHref = (0, urls_1.createMapUrl)({ mapUrl, address, city, country });
-    const hasFieldPath = Boolean(fieldPath && fieldPath.trim());
-    const finalHref = resolvedHref || (hasFieldPath ? '#' : '');
-    if (!finalHref)
+/**
+ * Directions CTA with Fivora-safe split fields: label on the button, URL on a hidden sibling.
+ */
+function MapLink({ name, mapUrl, addressUrl, url, address, city, state, country, postalCode, label = 'Get Directions', labelFieldPath, urlFieldPath, fieldPath, variant = 'outline', size = 'md', icon, className = '', style, ...rest }) {
+    const resolvedUrlFieldPath = urlFieldPath || fieldPath || 'contact.directionsUrl';
+    const resolvedLabelFieldPath = labelFieldPath || resolvedUrlFieldPath.replace(/Url$/, 'Label');
+    const explicitUrl = (addressUrl || mapUrl || url || '').trim();
+    const resolvedHref = (0, urls_1.createMapUrl)({ name, mapUrl: explicitUrl, addressUrl: explicitUrl, url: explicitUrl, address, city, state, country, postalCode });
+    const urlText = explicitUrl || resolvedHref;
+    const finalHref = resolvedHref || '#';
+    if (!finalHref && !label)
         return null;
     const defaultIcon = ((0, jsx_runtime_1.jsxs)("svg", { "data-preview-static": "map-link-icon", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "10", r: "3" })] }));
     const baseStyles = {
@@ -59,5 +65,6 @@ function MapLink({ mapUrl, address, city, country, label = 'Get Directions', fie
         ...(variant !== 'link' ? sizeStyles[size] : {}),
         ...variantStyles[variant],
     };
-    return ((0, jsx_runtime_1.jsxs)("a", { href: finalHref, "data-preview-field-path": fieldPath, target: finalHref !== '#' ? '_blank' : undefined, rel: finalHref !== '#' ? 'noopener noreferrer' : undefined, className: `deneb-map-link ${className}`.trim(), style: mergedStyles, ...rest, children: [icon !== undefined ? icon : defaultIcon, label] }));
+    const opensNewTab = finalHref !== '#';
+    return ((0, jsx_runtime_1.jsxs)("span", { className: "deneb-map-link-group", style: { display: 'contents' }, children: [(0, jsx_runtime_1.jsxs)("a", { href: finalHref, "data-preview-static": "map-link", target: opensNewTab ? '_blank' : undefined, rel: opensNewTab ? 'noopener noreferrer' : undefined, className: `deneb-map-link ${className}`.trim(), style: mergedStyles, ...rest, children: [icon !== undefined ? icon : defaultIcon, (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": resolvedLabelFieldPath, children: label })] }), (0, jsx_runtime_1.jsx)("span", { hidden: true, "aria-hidden": "true", "data-preview-field-path": resolvedUrlFieldPath, children: urlText })] }));
 }

package/dist/utils/urls.d.ts

@@ -3,10 +3,27 @@
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
 export interface MapLocationInput {
+    /** Location or branch name, e.g. "Main Roastery", "Downtown Cafe". */
+    name?: string | null;
+    /** Alternative title property. */
+    title?: string | null;
+    /** Explicit Google Maps or destination URL. */
     mapUrl?: string | null;
+    /** Fivora-paired sibling of `address` (`addressUrl` shares the `address` inspector stem). */
+    addressUrl?: string | null;
+    /** Generic external or map URL. */
+    url?: string | null;
+    /** Link URL alias. */
+    linkUrl?: string | null;
+    /** Street address. */
     address?: string | null;
     city?: string | null;
+    state?: string | null;
     country?: string | null;
+    postalCode?: string | null;
+    zipCode?: string | null;
+    /** Permissive index signature so custom or template-specific keys never trigger TS2561. */
+    [key: string]: any;
 }
 /**
  * Creates a valid WhatsApp click-to-chat URL.
@@ -26,6 +43,11 @@ export declare function createEmailUrl(email?: string | null, subject?: string |
  * Prefers an explicit mapUrl, otherwise constructs a query using address, city, and country.
  */
 export declare function createMapUrl(location?: MapLocationInput | string | null): string;
+/**
+ * Resolves a merchant-entered action URL for CTAs (WhatsApp, tel, mailto, or external http(s)).
+ * Phone-like values without a scheme become WhatsApp links when `mode` is `auto`.
+ */
+export declare function resolveActionUrl(raw?: string | null, mode?: 'auto' | 'external'): string;
 /**
  * Validates if a string is a safe, valid external link (prevents script injection).
  */
@@ -37,4 +59,7 @@ export declare function withBasePath(value?: string | null): string;
 /**
  * Resolves standard page route from pageKey.
  */
-export declare function pageRoute(pageKey: string): string;
+export declare function resolvePageRoute(pageKey: string, pages?: Array<{
+    id: string;
+    route: string;
+}>): string;

package/dist/utils/urls.js

@@ -8,9 +8,10 @@ exports.createWhatsAppUrl = createWhatsAppUrl;
 exports.createPhoneUrl = createPhoneUrl;
 exports.createEmailUrl = createEmailUrl;
 exports.createMapUrl = createMapUrl;
+exports.resolveActionUrl = resolveActionUrl;
 exports.isSafeExternalLink = isSafeExternalLink;
 exports.withBasePath = withBasePath;
-exports.pageRoute = pageRoute;
+exports.resolvePageRoute = resolvePageRoute;
 /**
  * Creates a valid WhatsApp click-to-chat URL.
  * Automatically cleans spaces, dashes, and special characters from the phone number.
@@ -65,17 +66,48 @@ function createMapUrl(location) {
         }
         return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(location)}`;
     }
-    if (location.mapUrl && location.mapUrl.trim()) {
-        return location.mapUrl.trim();
+    const explicitUrl = (location.addressUrl ||
+        location.mapUrl ||
+        location.url ||
+        location.linkUrl ||
+        '').trim();
+    if (explicitUrl) {
+        return explicitUrl;
     }
-    const queryParts = [location.address, location.city, location.country]
-        .filter((part) => Boolean(part && part.trim()))
-        .map((part) => part.trim());
+    const queryParts = [
+        location.name || location.title,
+        location.address,
+        location.city,
+        location.state,
+        location.country,
+        location.postalCode || location.zipCode,
+    ]
+        .filter((part) => Boolean(part && String(part).trim()))
+        .map((part) => String(part).trim());
     if (queryParts.length > 0) {
         return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(queryParts.join(', '))}`;
     }
     return '';
 }
+/**
+ * Resolves a merchant-entered action URL for CTAs (WhatsApp, tel, mailto, or external http(s)).
+ * Phone-like values without a scheme become WhatsApp links when `mode` is `auto`.
+ */
+function resolveActionUrl(raw, mode = 'auto') {
+    const value = raw?.trim() ?? '';
+    if (!value)
+        return '';
+    if (mode === 'external') {
+        return isSafeExternalLink(value) ? value : '';
+    }
+    if (/^https?:\/\//i.test(value) || /^tel:/i.test(value) || /^mailto:/i.test(value)) {
+        return value;
+    }
+    if (/^\+?[\d\s().-]+$/.test(value)) {
+        return createWhatsAppUrl(value);
+    }
+    return isSafeExternalLink(value) ? value : '';
+}
 /**
  * Validates if a string is a safe, valid external link (prevents script injection).
  */
@@ -105,6 +137,7 @@ function withBasePath(value) {
 /**
  * Resolves standard page route from pageKey.
  */
-function pageRoute(pageKey) {
-    return pageKey === 'home' ? '/' : `/${pageKey}`;
+function resolvePageRoute(pageKey, pages) {
+    const match = pages?.find((page) => page.id === pageKey);
+    return match?.route ?? `/${pageKey.replace(/_/g, '/')}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.32",
+  "version": "2.0.34",
   "description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -49,7 +49,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@deneb-ui/core": "^2.0.32"
+    "@deneb-ui/core": "^2.0.34"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",