@deneb-ui/ui 2.0.0

package/dist/EditableSection.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { BoxSpacing } from './EditableBox';
+export interface EditableSectionProps extends React.HTMLAttributes<HTMLElement> {
+    as?: React.ElementType;
+    /**
+     * Required fivora design section identifier (e.g. 'home-hero', 'home-introduction', 'home-features').
+     * Automatically sets `data-design-section` to satisfy strict Fivora validator rules.
+     */
+    name: string;
+    /**
+     * Vertical section padding ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' or custom CSS).
+     */
+    padding?: BoxSpacing;
+    /**
+     * Background color or CSS variable.
+     */
+    bg?: string;
+    /**
+     * Text color for the section.
+     */
+    color?: string;
+    /**
+     * Max width for the section container content.
+     */
+    maxWidth?: string | number;
+    /**
+     * Section border style.
+     */
+    border?: string | boolean;
+}
+/**
+ * EditableSection standardizes section spacing and automatically applies the required
+ * `data-design-section` marker for 100% fivora contract compliance.
+ */
+export declare function EditableSection({ as: Component, name, padding, bg, color, maxWidth, border, className, style, children, ...props }: EditableSectionProps): React.JSX.Element;

package/dist/EditableSection.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableSection = EditableSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SECTION_PADDING_MAP = {
+    none: '0',
+    xs: '1.5rem 0',
+    sm: '2.5rem 0',
+    md: '4rem 0',
+    lg: '6rem 0',
+    xl: '8rem 0',
+    '2xl': '10rem 0',
+};
+/**
+ * EditableSection standardizes section spacing and automatically applies the required
+ * `data-design-section` marker for 100% fivora contract compliance.
+ */
+function EditableSection({ as: Component = 'section', name, padding = 'lg', bg, color, maxWidth, border, className = '', style, children, ...props }) {
+    const resolvedPadding = padding !== undefined ? (SECTION_PADDING_MAP[String(padding)] || String(padding)) : undefined;
+    const resolvedBorder = border === true
+        ? '1px solid var(--border-color, rgba(226, 232, 240, 0.8))'
+        : typeof border === 'string'
+            ? border
+            : undefined;
+    const sectionStyle = {
+        ...(resolvedPadding ? { padding: resolvedPadding } : {}),
+        ...(bg ? { background: bg } : {}),
+        ...(color ? { color } : {}),
+        ...(maxWidth !== undefined ? { maxWidth, marginLeft: 'auto', marginRight: 'auto' } : {}),
+        ...(resolvedBorder ? { borderBottom: resolvedBorder } : {}),
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-design-section": name, className: `editable-section ${className}`.trim(), style: sectionStyle, ...props, children: children }));
+}

package/dist/EditableServiceCard.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+export interface ServiceItem {
+    id?: string | number;
+    name?: string;
+    title?: string;
+    description?: string;
+    imageUrl?: string;
+    image?: string;
+    features?: unknown[];
+    [key: string]: unknown;
+}
+export interface EditableServiceCardProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * The item path, e.g. "services[0]".
+     */
+    itemPath: string;
+    /**
+     * The service data object.
+     */
+    service: ServiceItem;
+    /**
+     * Fallback image URL if image is missing.
+     */
+    imageFallback?: string;
+    /**
+     * HTML wrapper tag (default: 'article').
+     */
+    as?: React.ElementType;
+    /**
+     * Text/content alignment for the card ('left' | 'center' | 'right').
+     */
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * EditableServiceCard standardizes service presentation across Home and Services pages.
+ * Supports service name, description, image, and repeatable features checklist.
+ */
+export declare function EditableServiceCard({ itemPath, service, imageFallback, as: Component, align, className, style, children, ...props }: EditableServiceCardProps): React.JSX.Element;

package/dist/EditableServiceCard.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableServiceCard = EditableServiceCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditableText_1 = require("./EditableText");
+const EditableImage_1 = require("./EditableImage");
+/**
+ * EditableServiceCard standardizes service presentation across Home and Services pages.
+ * Supports service name, description, image, and repeatable features checklist.
+ */
+function EditableServiceCard({ itemPath, service, imageFallback = '/placeholder.svg', as: Component = 'article', align = 'left', className = '', style, children, ...props }) {
+    const name = String(service?.name || service?.title || '');
+    const description = String(service?.description || '');
+    const imageUrl = String(service?.imageUrl || service?.image || '');
+    const features = Array.isArray(service?.features) ? service.features : [];
+    const mergedStyle = {
+        textAlign: align,
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, className: `editable-service-card ${className}`.trim(), style: mergedStyle, ...props, children: [(imageUrl || service?.imageUrl !== undefined || service?.image !== undefined) && ((0, jsx_runtime_1.jsx)("div", { className: "service-card-image-wrap", children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.imageUrl`, "data-preview-field-path": `${itemPath}.imageUrl`, src: imageUrl, fallbackSrc: imageFallback, alt: name, className: "service-card-image" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "service-card-body", children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h2", id: `${itemPath}.name`, "data-preview-field-path": `${itemPath}.name`, defaultValue: name, className: "service-card-title" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.description`, "data-preview-field-path": `${itemPath}.description`, defaultValue: description, className: "service-card-description" }), (features.length > 0 || Array.isArray(service?.features)) && ((0, jsx_runtime_1.jsx)("ul", { "data-preview-list-path": `${itemPath}.features`, className: "service-card-features", children: features.map((feature, featureIndex) => {
+                            const featureText = typeof feature === 'string'
+                                ? feature
+                                : typeof feature?.title === 'string'
+                                    ? feature.title
+                                    : String(feature ?? '');
+                            return ((0, jsx_runtime_1.jsx)("li", { "data-preview-item-path": `${itemPath}.features[${featureIndex}]`, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: `${itemPath}.features[${featureIndex}]`, "data-preview-field-path": `${itemPath}.features[${featureIndex}]`, defaultValue: featureText }) }, featureIndex));
+                        }) })), children] })] }));
+}

package/dist/EditableTestimonialCard.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface TestimonialItem {
+    id?: string | number;
+    quote?: string;
+    author?: string;
+    role?: string;
+    company?: string;
+    avatar?: string;
+    rating?: number;
+    [key: string]: unknown;
+}
+export interface EditableTestimonialCardProps extends React.HTMLAttributes<HTMLElement> {
+    itemPath: string;
+    item: TestimonialItem;
+    as?: React.ElementType;
+}
+export declare function EditableTestimonialCard({ itemPath, item, as: Component, className, style, ...props }: EditableTestimonialCardProps): React.JSX.Element;

package/dist/EditableTestimonialCard.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableTestimonialCard = EditableTestimonialCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditableText_1 = require("./EditableText");
+const EditableImage_1 = require("./EditableImage");
+function EditableTestimonialCard({ itemPath, item, as: Component = 'div', className = '', style, ...props }) {
+    const quote = String(item?.quote || 'Exceptional quality and service. Highly recommended!');
+    const author = String(item?.author || 'Customer Name');
+    const role = String(item?.role || item?.company || 'Verified Buyer');
+    const avatar = String(item?.avatar || '');
+    const rating = Number(item?.rating || 5);
+    const cardStyle = {
+        backgroundColor: '#ffffff',
+        border: '1px solid #f1f5f9',
+        borderRadius: '16px',
+        padding: '2rem',
+        boxShadow: '0 4px 20px -2px rgba(0, 0, 0, 0.04)',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, style: cardStyle, className: `editable-testimonial-card ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '3px', marginBottom: '1.25rem' }, children: [...Array(5)].map((_, i) => ((0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: i < rating ? '#f59e0b' : '#e2e8f0', "data-preview-static": "testimonial-star", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, i))) }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.quote`, defaultValue: quote, style: {
+                            fontSize: '1rem',
+                            lineHeight: 1.6,
+                            color: 'var(--page-text, #334155)',
+                            fontStyle: 'italic',
+                            marginBottom: '1.5rem',
+                        } })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.875rem' }, children: [(0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.avatar`, src: avatar, alt: author, style: {
+                            width: '44px',
+                            height: '44px',
+                            borderRadius: '9999px',
+                            objectFit: 'cover',
+                        } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h4", id: `${itemPath}.author`, defaultValue: author, style: {
+                                    fontSize: '0.95rem',
+                                    fontWeight: 700,
+                                    color: 'var(--heading-color, #0f172a)',
+                                    lineHeight: 1.2,
+                                } }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.role`, defaultValue: role, style: {
+                                    fontSize: '0.825rem',
+                                    color: 'var(--muted-text, #64748b)',
+                                    marginTop: '0.125rem',
+                                } })] })] })] }));
+}

package/dist/EditableText.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+export type TextSemanticColor = 'primary' | 'secondary' | 'accent' | 'heading' | 'text' | 'muted' | 'white' | 'dark' | 'inherit' | 'initial';
+export type TextColor = TextSemanticColor | (string & {});
+export type TextSize = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 'hero' | (string & {});
+export type TextWeight = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | number | (string & {});
+export type TextLineHeight = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | number | (string & {});
+export type TextLetterSpacing = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | (string & {});
+export type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'lead' | 'eyebrow' | 'caption' | 'badge';
+export declare const SIZE_MAP: Record<string, string>;
+export declare const WEIGHT_MAP: Record<string, number | string>;
+export declare const LINE_HEIGHT_MAP: Record<string, number | string>;
+export declare const LETTER_SPACING_MAP: Record<string, string>;
+export declare const COLOR_MAP: Record<string, string>;
+export declare const VARIANT_DEFAULTS: Record<TextVariant, {
+    as: React.ElementType;
+    size?: TextSize;
+    weight?: TextWeight;
+    lineHeight?: TextLineHeight;
+    transform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+    letterSpacing?: TextLetterSpacing;
+    color?: TextColor;
+    fontFamily?: string;
+}>;
+export declare const FONT_FAMILY_MAP: Record<string, string>;
+export interface EditableTextProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Field path in siteData (e.g. "home.heroTitle").
+     */
+    id?: string;
+    /**
+     * Explicit fivora visual editing attribute for strict static analysis.
+     */
+    'data-preview-field-path'?: string;
+    defaultValue?: string;
+    as?: React.ElementType;
+    /**
+     * Semantic typography variant providing instant preset styles (h1-h6, p, lead, eyebrow, caption, badge).
+     */
+    variant?: TextVariant;
+    /**
+     * Text color: preset tokens ('primary' | 'secondary' | 'accent' | 'heading' | 'text' | 'muted' | 'white' | 'dark')
+     * or any valid CSS color string (hex, rgb, hsl, or CSS variable).
+     */
+    color?: TextColor;
+    /**
+     * Font size preset ('xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | 'hero')
+     * or any custom CSS size string (e.g. '2.5rem', '32px', 'clamp(1.5rem, 3vw, 3rem)').
+     */
+    size?: TextSize;
+    /**
+     * Font weight ('thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | number).
+     */
+    weight?: TextWeight;
+    /**
+     * Line height preset ('none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose') or number / CSS string.
+     */
+    lineHeight?: TextLineHeight;
+    /**
+     * Text alignment ('left' | 'center' | 'right' | 'justify').
+     */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /**
+     * Text transform ('uppercase' | 'lowercase' | 'capitalize' | 'none').
+     */
+    transform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+    /**
+     * Letter spacing / tracking preset ('tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest') or custom CSS string.
+     */
+    letterSpacing?: TextLetterSpacing;
+    /**
+     * Font family: 'heading' | 'body' or custom CSS font-family string.
+     */
+    fontFamily?: 'heading' | 'body' | (string & {});
+}
+/**
+ * EditableText provides full typography controls (color, size, weight, line-height, alignment, transform, variants)
+ * alongside strict Fivora visual editing bindings.
+ */
+export declare function EditableText({ id, 'data-preview-field-path': previewFieldPath, defaultValue, children, as: ComponentOverride, variant, color, size, weight, lineHeight, align, transform, letterSpacing, fontFamily, style, ...props }: EditableTextProps): React.JSX.Element;
+export interface EditableHeadingProps extends Omit<EditableTextProps, 'variant'> {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+export declare function EditableHeading({ level, as, ...props }: EditableHeadingProps): React.JSX.Element;
+export interface EditableParagraphProps extends Omit<EditableTextProps, 'variant'> {
+    lead?: boolean;
+}
+export declare function EditableParagraph({ lead, as, ...props }: EditableParagraphProps): React.JSX.Element;
+export declare function EditableLead({ as, ...props }: Omit<EditableTextProps, 'variant'>): React.JSX.Element;
+export interface EditableBadgeProps extends Omit<EditableTextProps, 'variant'> {
+    badgeVariant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'glass' | 'glow';
+}
+export declare function EditableBadge({ as, badgeVariant, className, style, ...props }: EditableBadgeProps): React.JSX.Element;
+export interface EditableQuoteProps extends Omit<EditableTextProps, 'variant'> {
+    cite?: string;
+}
+export declare function EditableQuote({ as, cite, className, style, ...props }: EditableQuoteProps): React.JSX.Element;
+export interface EditableLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    id?: string;
+    'data-preview-field-path'?: string;
+    targetPage?: string;
+    defaultValue?: string;
+}
+/**
+ * EditableLink enforces Fivora's strict selected-page contract:
+ * - Injects data-target-page on wrapper
+ * - Omits rendering if targetPage is not in requirements.requiredPages
+ */
+export declare function EditableLink({ id, 'data-preview-field-path': previewFieldPath, targetPage, defaultValue, href, children, className, ...props }: EditableLinkProps): React.JSX.Element;
+export interface EditableButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    id?: string;
+    'data-preview-field-path'?: string;
+    defaultValue?: string;
+    targetPage?: string;
+    btnVariant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'glass';
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function EditableButton({ id, 'data-preview-field-path': previewFieldPath, defaultValue, targetPage, btnVariant, size, children, className, style, ...props }: EditableButtonProps): React.JSX.Element;

package/dist/EditableText.js

@@ -0,0 +1,319 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FONT_FAMILY_MAP = exports.VARIANT_DEFAULTS = exports.COLOR_MAP = exports.LETTER_SPACING_MAP = exports.LINE_HEIGHT_MAP = exports.WEIGHT_MAP = exports.SIZE_MAP = void 0;
+exports.EditableText = EditableText;
+exports.EditableHeading = EditableHeading;
+exports.EditableParagraph = EditableParagraph;
+exports.EditableLead = EditableLead;
+exports.EditableBadge = EditableBadge;
+exports.EditableQuote = EditableQuote;
+exports.EditableLink = EditableLink;
+exports.EditableButton = EditableButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+exports.SIZE_MAP = {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+    '5xl': '3rem',
+    '6xl': '3.75rem',
+    '7xl': '4.5rem',
+    '8xl': '6rem',
+    hero: 'clamp(2.25rem, 5vw, 4rem)',
+};
+exports.WEIGHT_MAP = {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+};
+exports.LINE_HEIGHT_MAP = {
+    none: 1,
+    tight: 1.15,
+    snug: 1.3,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+};
+exports.LETTER_SPACING_MAP = {
+    tighter: '-0.05em',
+    tight: '-0.025em',
+    normal: '0em',
+    wide: '0.025em',
+    wider: '0.05em',
+    widest: '0.1em',
+};
+exports.COLOR_MAP = {
+    primary: 'var(--brand-color, #2563eb)',
+    secondary: 'var(--brand-secondary, #0f172a)',
+    accent: 'var(--brand-accent, #14b8a6)',
+    heading: 'var(--heading-color, var(--brand-secondary, #0f172a))',
+    text: 'var(--page-text, #0f172a)',
+    muted: 'var(--muted-text, #64748b)',
+    white: '#ffffff',
+    dark: '#0f172a',
+    inherit: 'inherit',
+    initial: 'initial',
+};
+exports.VARIANT_DEFAULTS = {
+    h1: { as: 'h1', size: '4xl', weight: 'bold', lineHeight: 'tight', color: 'heading', fontFamily: 'var(--heading-font)' },
+    h2: { as: 'h2', size: '3xl', weight: 'bold', lineHeight: 'tight', color: 'heading', fontFamily: 'var(--heading-font)' },
+    h3: { as: 'h3', size: '2xl', weight: 'semibold', lineHeight: 'snug', color: 'heading', fontFamily: 'var(--heading-font)' },
+    h4: { as: 'h4', size: 'xl', weight: 'semibold', lineHeight: 'snug', color: 'heading', fontFamily: 'var(--heading-font)' },
+    h5: { as: 'h5', size: 'lg', weight: 'medium', lineHeight: 'normal', color: 'heading', fontFamily: 'var(--heading-font)' },
+    h6: { as: 'h6', size: 'base', weight: 'medium', lineHeight: 'normal', color: 'heading', fontFamily: 'var(--heading-font)' },
+    p: { as: 'p', size: 'base', weight: 'normal', lineHeight: 'normal', color: 'text' },
+    lead: { as: 'p', size: 'lg', weight: 'normal', lineHeight: 'relaxed', color: 'muted' },
+    eyebrow: { as: 'span', size: 'xs', weight: 'bold', transform: 'uppercase', letterSpacing: 'wider', color: 'primary' },
+    caption: { as: 'span', size: 'xs', weight: 'normal', lineHeight: 'normal', color: 'muted' },
+    badge: { as: 'span', size: 'xs', weight: 'semibold', lineHeight: 'none', color: 'primary' },
+};
+exports.FONT_FAMILY_MAP = {
+    'Editorial Serif': "'Playfair Display', Georgia, 'Times New Roman', serif",
+    'Plus Jakarta Sans': "'Plus Jakarta Sans', system-ui, sans-serif",
+    'Inter': "'Inter', system-ui, sans-serif",
+    'Playfair Display': "'Playfair Display', Georgia, serif",
+    'Outfit': "'Outfit', system-ui, sans-serif",
+    'Cormorant Garamond': "'Cormorant Garamond', Georgia, serif",
+    'Montserrat': "'Montserrat', system-ui, sans-serif",
+    'System Sans': "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    heading: 'var(--heading-font, Inter, sans-serif)',
+    body: 'var(--body-font, Inter, sans-serif)',
+};
+function toCssUnit(value) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    const str = String(value).trim();
+    if (!str)
+        return undefined;
+    if (/^-?\d+(\.\d+)?$/.test(str)) {
+        return `${str}px`;
+    }
+    return str;
+}
+/**
+ * EditableText provides full typography controls (color, size, weight, line-height, alignment, transform, variants)
+ * alongside strict Fivora visual editing bindings.
+ */
+function EditableText({ id, 'data-preview-field-path': previewFieldPath, defaultValue, children, as: ComponentOverride, variant, color, size, weight, lineHeight, align, transform, letterSpacing, fontFamily, style, ...props }) {
+    const path = previewFieldPath || id;
+    const content = children !== undefined ? children : defaultValue;
+    const dynamicStyle = (0, SiteDataProvider_1.useFieldStyle)(path);
+    const variantDefaults = variant ? exports.VARIANT_DEFAULTS[variant] : undefined;
+    const Component = ComponentOverride || variantDefaults?.as || 'span';
+    const effectiveColor = color || variantDefaults?.color;
+    const effectiveSize = size || variantDefaults?.size;
+    const effectiveWeight = weight || variantDefaults?.weight;
+    const effectiveLineHeight = lineHeight || variantDefaults?.lineHeight;
+    const effectiveTransform = transform || variantDefaults?.transform;
+    const effectiveLetterSpacing = letterSpacing || variantDefaults?.letterSpacing;
+    const effectiveFontFamily = fontFamily || variantDefaults?.fontFamily;
+    const resolvedColor = effectiveColor ? (exports.COLOR_MAP[effectiveColor] || effectiveColor) : undefined;
+    const resolvedSize = effectiveSize ? (exports.SIZE_MAP[effectiveSize] || effectiveSize) : undefined;
+    const resolvedWeight = effectiveWeight !== undefined ? (exports.WEIGHT_MAP[String(effectiveWeight)] || effectiveWeight) : undefined;
+    const resolvedLineHeight = effectiveLineHeight !== undefined ? (exports.LINE_HEIGHT_MAP[String(effectiveLineHeight)] || effectiveLineHeight) : undefined;
+    const resolvedLetterSpacing = effectiveLetterSpacing
+        ? (exports.LETTER_SPACING_MAP[effectiveLetterSpacing] || effectiveLetterSpacing)
+        : undefined;
+    const resolvedFontFamily = effectiveFontFamily
+        ? (exports.FONT_FAMILY_MAP[effectiveFontFamily] || effectiveFontFamily)
+        : undefined;
+    // Dynamic visual editor overrides
+    const dynamicColor = dynamicStyle?.color
+        ? (exports.COLOR_MAP[String(dynamicStyle.color)] || String(dynamicStyle.color))
+        : undefined;
+    const dynamicSize = dynamicStyle?.fontSize !== undefined && dynamicStyle?.fontSize !== ''
+        ? (exports.SIZE_MAP[String(dynamicStyle.fontSize)] || toCssUnit(dynamicStyle.fontSize))
+        : undefined;
+    const dynamicLineHeight = dynamicStyle?.lineHeight !== undefined && dynamicStyle?.lineHeight !== ''
+        ? (exports.LINE_HEIGHT_MAP[String(dynamicStyle.lineHeight)] || dynamicStyle.lineHeight)
+        : undefined;
+    const dynamicFontFamily = dynamicStyle?.fontFamily
+        ? (exports.FONT_FAMILY_MAP[String(dynamicStyle.fontFamily)] || String(dynamicStyle.fontFamily))
+        : undefined;
+    const dynamicAlign = dynamicStyle?.textAlign;
+    const dynamicMarginTop = toCssUnit(dynamicStyle?.spacingTop);
+    const dynamicMarginBottom = toCssUnit(dynamicStyle?.spacingBottom);
+    const dynamicMarginLeft = toCssUnit(dynamicStyle?.spacingLeft);
+    const dynamicMarginRight = toCssUnit(dynamicStyle?.spacingRight);
+    const typographyStyle = {
+        ...(resolvedColor ? { color: resolvedColor } : {}),
+        ...(resolvedSize ? { fontSize: resolvedSize } : {}),
+        ...(resolvedWeight ? { fontWeight: resolvedWeight } : {}),
+        ...(resolvedLineHeight ? { lineHeight: resolvedLineHeight } : {}),
+        ...(align ? { textAlign: align } : {}),
+        ...(effectiveTransform ? { textTransform: effectiveTransform } : {}),
+        ...(resolvedLetterSpacing ? { letterSpacing: resolvedLetterSpacing } : {}),
+        ...(resolvedFontFamily ? { fontFamily: resolvedFontFamily } : {}),
+        ...style,
+        // Visual editor overrides take highest precedence:
+        ...(dynamicColor ? { color: dynamicColor } : {}),
+        ...(dynamicSize ? { fontSize: dynamicSize } : {}),
+        ...(dynamicLineHeight ? { lineHeight: dynamicLineHeight } : {}),
+        ...(dynamicAlign ? { textAlign: dynamicAlign } : {}),
+        ...(dynamicFontFamily ? { fontFamily: dynamicFontFamily } : {}),
+        ...(dynamicMarginTop !== undefined ? { marginTop: dynamicMarginTop } : {}),
+        ...(dynamicMarginBottom !== undefined ? { marginBottom: dynamicMarginBottom } : {}),
+        ...(dynamicMarginLeft !== undefined ? { marginLeft: dynamicMarginLeft } : {}),
+        ...(dynamicMarginRight !== undefined ? { marginRight: dynamicMarginRight } : {}),
+    };
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": path, style: typographyStyle, ...props, children: content }));
+}
+function EditableHeading({ level = 2, as, ...props }) {
+    const variant = `h${level}`;
+    const headingTag = (as || `h${level}`);
+    return (0, jsx_runtime_1.jsx)(EditableText, { variant: variant, as: headingTag, ...props });
+}
+function EditableParagraph({ lead = false, as = 'p', ...props }) {
+    return (0, jsx_runtime_1.jsx)(EditableText, { variant: lead ? 'lead' : 'p', as: as, ...props });
+}
+function EditableLead({ as = 'p', ...props }) {
+    return (0, jsx_runtime_1.jsx)(EditableText, { variant: "lead", as: as, ...props });
+}
+function EditableBadge({ as = 'span', badgeVariant = 'primary', className = '', style, ...props }) {
+    const badgeStyles = {
+        primary: {
+            backgroundColor: 'rgba(37, 99, 235, 0.1)',
+            color: 'var(--brand-color, #2563eb)',
+            border: '1px solid rgba(37, 99, 235, 0.2)',
+        },
+        secondary: {
+            backgroundColor: 'rgba(15, 23, 42, 0.08)',
+            color: 'var(--brand-secondary, #0f172a)',
+            border: '1px solid rgba(15, 23, 42, 0.15)',
+        },
+        accent: {
+            backgroundColor: 'rgba(20, 184, 166, 0.12)',
+            color: 'var(--brand-accent, #14b8a6)',
+            border: '1px solid rgba(20, 184, 166, 0.25)',
+        },
+        outline: {
+            backgroundColor: 'transparent',
+            color: 'var(--page-text, #0f172a)',
+            border: '1px solid currentColor',
+        },
+        glass: {
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+            color: 'var(--page-text, #0f172a)',
+            border: '1px solid rgba(255, 255, 255, 0.3)',
+        },
+        glow: {
+            backgroundColor: 'rgba(37, 99, 235, 0.15)',
+            color: 'var(--brand-color, #2563eb)',
+            boxShadow: '0 0 12px rgba(37, 99, 235, 0.35)',
+            border: '1px solid rgba(37, 99, 235, 0.3)',
+        },
+    };
+    const defaultBadgeLayout = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.375rem',
+        padding: '0.25rem 0.75rem',
+        borderRadius: '9999px',
+        fontSize: '0.75rem',
+        fontWeight: 600,
+        letterSpacing: '0.025em',
+        lineHeight: 1,
+        ...(badgeStyles[badgeVariant] || badgeStyles.primary),
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsx)(EditableText, { variant: "badge", as: as, style: defaultBadgeLayout, className: `editable-badge ${className}`.trim(), ...props }));
+}
+function EditableQuote({ as = 'blockquote', cite, className = '', style, ...props }) {
+    const quoteStyle = {
+        fontStyle: 'italic',
+        borderLeft: '3px solid var(--brand-color, #2563eb)',
+        paddingLeft: '1.25rem',
+        margin: '1.5rem 0',
+        color: 'var(--muted-text, #64748b)',
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsx)(EditableText, { as: as, style: quoteStyle, className: `editable-quote ${className}`.trim(), ...(cite ? { cite } : {}), ...props }));
+}
+/**
+ * EditableLink enforces Fivora's strict selected-page contract:
+ * - Injects data-target-page on wrapper
+ * - Omits rendering if targetPage is not in requirements.requiredPages
+ */
+function EditableLink({ id, 'data-preview-field-path': previewFieldPath, targetPage, defaultValue, href = '#', children, className = '', ...props }) {
+    const path = previewFieldPath || id;
+    const content = children !== undefined ? children : defaultValue;
+    const linkEl = ((0, jsx_runtime_1.jsx)("a", { href: href, className: `editable-link ${className}`.trim(), ...props, children: path ? ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": path, children: content })) : (content) }));
+    if (targetPage) {
+        return (0, jsx_runtime_1.jsx)("span", { "data-target-page": targetPage, children: linkEl });
+    }
+    return linkEl;
+}
+function EditableButton({ id, 'data-preview-field-path': previewFieldPath, defaultValue, targetPage, btnVariant = 'primary', size = 'md', children, className = '', style, ...props }) {
+    const path = previewFieldPath || id;
+    const content = children !== undefined ? children : defaultValue;
+    const sizeStyles = {
+        sm: { padding: '0.375rem 0.875rem', fontSize: '0.875rem', borderRadius: '6px' },
+        md: { padding: '0.625rem 1.25rem', fontSize: '1rem', borderRadius: '8px' },
+        lg: { padding: '0.875rem 1.75rem', fontSize: '1.125rem', borderRadius: '12px' },
+    };
+    const variantStyles = {
+        primary: {
+            backgroundColor: 'var(--brand-color, #2563eb)',
+            color: '#ffffff',
+            border: 'none',
+            boxShadow: '0 4px 14px 0 rgba(37, 99, 235, 0.35)',
+        },
+        secondary: {
+            backgroundColor: 'var(--brand-secondary, #0f172a)',
+            color: '#ffffff',
+            border: 'none',
+        },
+        accent: {
+            backgroundColor: 'var(--brand-accent, #14b8a6)',
+            color: '#ffffff',
+            border: 'none',
+        },
+        outline: {
+            backgroundColor: 'transparent',
+            color: 'var(--page-text, #0f172a)',
+            border: '1.5px solid currentColor',
+        },
+        ghost: {
+            backgroundColor: 'transparent',
+            color: 'var(--page-text, #0f172a)',
+            border: 'none',
+        },
+        glass: {
+            backgroundColor: 'rgba(255, 255, 255, 0.25)',
+            backdropFilter: 'blur(12px)',
+            WebkitBackdropFilter: 'blur(12px)',
+            color: 'var(--page-text, #0f172a)',
+            border: '1px solid rgba(255, 255, 255, 0.4)',
+        },
+    };
+    const baseStyle = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: 600,
+        cursor: 'pointer',
+        transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        ...sizeStyles[size],
+        ...variantStyles[btnVariant],
+        ...style,
+    };
+    const buttonEl = ((0, jsx_runtime_1.jsx)("button", { style: baseStyle, className: `editable-btn ${className}`.trim(), ...props, children: path ? ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": path, children: content })) : (content) }));
+    if (targetPage) {
+        return (0, jsx_runtime_1.jsx)("span", { "data-target-page": targetPage, children: buttonEl });
+    }
+    return buttonEl;
+}