@deneb-ui/ui 2.0.0

package/README.md

@@ -0,0 +1,182 @@
+# DENEB
+
+### A modern UI system for the web.
+
+> **DENEB UI — Build beautiful interfaces, effortlessly.**  
+> The premier visual-first React component ecosystem.  
+> Created by **Chamika Gayashan (CEE G)**.
+
+[![Framework: DENEB UI](https://img.shields.io/badge/Framework-DENEB_UI_v2.0-blue.svg)](https://github.com/chamikathereal)
+[![License: MIT](https://img.shields.io/badge/License-MIT-orange.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## Quick Installation
+
+```bash
+npm install @deneb-ui/ui
+# Or with yarn / pnpm
+pnpm add @deneb-ui/ui
+```
+
+```tsx
+import {
+  Button,
+  Card,
+  Dialog,
+  ContactActions,
+  WhatsAppButton,
+  LocationCard,
+  SocialLinks,
+  BusinessHours,
+} from "@deneb-ui/ui";
+```
+
+---
+
+## What is DENEB UI?
+
+**DENEB UI** is a modern, modular design system and component framework engineered specifically for live visual editing, dynamic theming, and high-converting commerce storefronts.
+
+Every component in DENEB UI:
+- **Zero-Breakage Visual Editing**: Automatically connects to the bidirectional live editor protocol (`DENEB_PREVIEW_SITE_DATA` / `FIVORA_PREVIEW_SITE_DATA`, `DENEB_PREVIEW_READY`, `DENEB_PREVIEW_FOCUS_PAGE`).
+- **Auto-Balancing Layouts**: Columns and card heights automatically adapt across desktop, tablet, and mobile regardless of content length.
+- **Smart Contact & Location Actions**: One-click WhatsApp, call, email, and Google Maps generation from raw phone numbers and addresses.
+- **Dynamic Tokenized Theming**: Fully integrated with tokenized custom properties (`--color-primary`, `--color-secondary`, fonts, spacing) and AI-assisted restyling.
+- **Selected-Page Route Guard**: Automatically respects `requirements.requiredPages`, ensuring zero dead links or validation warnings.
+
+---
+
+## Component Catalog
+
+### 1. Smart Template & Action Components
+- `<ContactActions />` — Auto-detects and renders active communication channels (`phone`, `whatsapp`, `email`). When a merchant adds a phone number in `site-data.json`, the button appears automatically with zero template changes.
+- `<WhatsAppButton />` — One-click WhatsApp click-to-chat button with built-in SVG icon and automatic `https://wa.me/...` URL generation from raw phone numbers.
+- `<PhoneButton />` — One-click calling button with `tel:` handler and raw number editing bindings.
+- `<EmailButton />` — One-click email button with `mailto:` handler and optional subject lines.
+- `<ContactButton />` — Base unified action button supporting WhatsApp, phone, email, and forms.
+- `<LocationCard />` — High-converting location card with pin icon, formatted address, and Google Maps directions button.
+- `<LocationLink />` — Semantic address display paired with a "Get Directions" action.
+- `<MapLink />` — Direct link button to open Google Maps directions or search queries.
+- `<MapEmbed />` — Responsive map embed iframe with safe graceful fallback to `MapLink` when embed URLs are unconfigured.
+- `<Address />` — Structured `<address>` component with individual street, locality, and country field markers.
+- `<SocialLinks />` — Smart social media container that filters out unconfigured platforms automatically.
+- `<SocialButton />` — Brand-colored social button with built-in SVGs (Instagram, Facebook, TikTok, YouTube, LinkedIn, X, Twitter, Pinterest, GitHub).
+- `<BusinessHours />` — Weekly operating schedule renderer with a dynamic live **Open Now** / **Closed** status badge.
+- `<DenebAction />` (or `<ActionLink />`) — Universal action primitive connecting action types, URL generation, and visual editing markers.
+
+### 2. Interactive Primitives
+- `<Button />` (or `<EditableButton />`) — Modern button with `primary`, `secondary`, `accent`, `glass`, `ghost` styles and `targetPage` guard.
+- `<Dialog />` (or `<EditableDialog />`) — Accessible popup modal with backdrop blur, smooth entrance, keyboard ESC exit, title, description, and footer actions.
+- `<Card />` (or `<EditableCard />`) — Flexible surface card with auto-balancing content layout.
+- `<Text />`, `<Heading />`, `<Paragraph />` — Typography components with responsive sizing and live editor binding.
+- `<Badge />` — Status indicators, tags, and promotional pills (`primary`, `secondary`, `accent`, `glass`, `glow`).
+- `<Link />` — Route link that automatically validates against `requirements.requiredPages`.
+- `<Quote />` — Editorial pull quotes and callouts.
+
+### 3. Sections & Commerce
+- `<ProductCard />` — 4 visual variants (`modern-glass`, `classic`, `minimal`, `horizontal`) with discount tags and pricing.
+- `<PricingCard />` — Subscription/pricing tiers with feature checklist.
+- `<TestimonialCard />` — Customer reviews with 1–5 stars and author avatar.
+- `<ContactForm />` — Direct submission form connected to shared API endpoint.
+- `<Navbar />` — Sticky header with logo, mobile drawer, and filtered navigation.
+- `<Footer />` — Responsive footer with copyright and route filtering.
+- `<Hero />` & `<HeroSplit />` — High-impact hero sections with eyebrow badges and dual CTAs.
+- `<Grid />` — Auto-balancing CSS grid with equal height.
+- `<Accordion />` / `<FAQ />` — Collapsible Q&A list.
+- `<Image />` — Aspect ratio locked image with SVG fallback placeholder.
+
+---
+
+## URL Utility Layer
+
+DENEB UI exports a dedicated utility suite for URL formatting and generation:
+
+```tsx
+import {
+  createWhatsAppUrl,
+  createPhoneUrl,
+  createEmailUrl,
+  createMapUrl,
+  isSafeExternalLink,
+} from "@deneb-ui/ui";
+
+// Generates: https://wa.me/94771234567?text=Hello%20Store
+const waUrl = createWhatsAppUrl("+94 77 123 4567", "Hello Store");
+
+// Generates: tel:+94112345678
+const telUrl = createPhoneUrl("+94 11 234 5678");
+
+// Generates: mailto:hello@store.com?subject=Enquiry
+const mailUrl = createEmailUrl("hello@store.com", "Enquiry");
+
+// Generates Google Maps directions search URL
+const mapUrl = createMapUrl({ address: "123 Main Street", city: "Colombo", country: "Sri Lanka" });
+```
+
+---
+
+## Example Usage
+
+```tsx
+import {
+  SiteDataProvider,
+  Navbar,
+  Hero,
+  ProductCard,
+  ContactActions,
+  LocationCard,
+  BusinessHours,
+  SocialLinks,
+  Footer,
+  useSiteData,
+} from '@deneb-ui/ui';
+
+import siteData from '@/data/site-data.json';
+
+export default function HomePage() {
+  const data = useSiteData();
+  const business = data.content?.common?.business || {};
+
+  return (
+    <SiteDataProvider initialSiteData={siteData}>
+      <Navbar />
+
+      <main data-preview-page-key="home">
+        <Hero />
+
+        {/* Smart Contact & Actions */}
+        <section className="py-12 max-w-5xl mx-auto px-6 flex flex-col items-center gap-6">
+          <ContactActions
+            phone={business.phone}
+            whatsapp={business.whatsapp}
+            email={business.email}
+          />
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full mt-6">
+            <LocationCard
+              address={business.location?.address}
+              city={business.location?.city}
+              country={business.location?.country}
+              mapUrl={business.location?.mapUrl}
+            />
+
+            <BusinessHours hours={business.hours} />
+          </div>
+
+          <SocialLinks social={business.social} />
+        </section>
+      </main>
+
+      <Footer />
+    </SiteDataProvider>
+  );
+}
+```
+
+---
+
+## Author & Credits
+
+Created and architected by **Chamika Gayashan (CEE G)**.  
+Built for the global React and storefront developer ecosystem.

package/dist/EditableBox.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+export type BoxRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {}) | number;
+export type BoxShadow = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | (string & {});
+export type BoxSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | (string & {}) | number;
+export type BoxAspectRatio = '1/1' | '16/9' | '4/3' | '3/4' | '9/16' | '2/3' | '3/2' | 'square' | 'video' | 'portrait' | 'landscape' | (string & {});
+export interface EditableBoxProps extends React.HTMLAttributes<HTMLElement> {
+    as?: React.ElementType;
+    /**
+     * Field path or item path in siteData.
+     */
+    id?: string;
+    'data-preview-field-path'?: string;
+    'data-preview-item-path'?: string;
+    'data-preview-static'?: string;
+    /**
+     * Sizing controls
+     */
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    height?: string | number;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    aspectRatio?: BoxAspectRatio;
+    /**
+     * Auto-balance: expands and balances item within flex/grid rows to match available space evenly.
+     */
+    balance?: boolean;
+    grow?: boolean | number;
+    shrink?: boolean | number;
+    /**
+     * Spacing & styling
+     */
+    padding?: BoxSpacing;
+    margin?: BoxSpacing;
+    bg?: string;
+    color?: string;
+    radius?: BoxRadius;
+    shadow?: BoxShadow;
+    border?: string | boolean;
+    /**
+     * Visual layout & alignment
+     */
+    display?: 'block' | 'flex' | 'grid' | 'inline-block' | 'inline-flex';
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    gap?: BoxSpacing;
+    overflow?: 'visible' | 'hidden' | 'auto' | 'scroll';
+}
+/**
+ * EditableBox is a flexible, smart container ("div-like") component with built-in
+ * width/height resizing, aspect-ratio controls, and auto-balancing for fivora cards.
+ */
+export declare function EditableBox({ as: Component, id, 'data-preview-field-path': previewFieldPath, 'data-preview-item-path': previewItemPath, 'data-preview-static': previewStatic, width, minWidth, maxWidth, height, minHeight, maxHeight, aspectRatio, balance, grow, shrink, padding, margin, bg, color, radius, shadow, border, display, direction, wrap, align, justify, gap, overflow, style, children, className, ...props }: EditableBoxProps): React.JSX.Element;

package/dist/EditableBox.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableBox = EditableBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+const RADIUS_MAP = {
+    none: '0px',
+    sm: '4px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+    '2xl': '24px',
+    full: '9999px',
+};
+const SHADOW_MAP = {
+    none: 'none',
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+};
+const SPACING_MAP = {
+    none: '0',
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '1rem',
+    lg: '1.5rem',
+    xl: '2rem',
+    '2xl': '3rem',
+};
+const ASPECT_MAP = {
+    square: '1 / 1',
+    '1/1': '1 / 1',
+    video: '16 / 9',
+    '16/9': '16 / 9',
+    portrait: '3 / 4',
+    '3/4': '3 / 4',
+    '4/3': '4 / 3',
+    landscape: '4 / 3',
+    '9/16': '9 / 16',
+    '2/3': '2 / 3',
+    '3/2': '3 / 2',
+};
+/**
+ * EditableBox is a flexible, smart container ("div-like") component with built-in
+ * width/height resizing, aspect-ratio controls, and auto-balancing for fivora cards.
+ */
+function EditableBox({ as: Component = 'div', id, 'data-preview-field-path': previewFieldPath, 'data-preview-item-path': previewItemPath, 'data-preview-static': previewStatic, width, minWidth, maxWidth, height, minHeight, maxHeight, aspectRatio, balance, grow, shrink, padding, margin, bg, color, radius, shadow, border, display, direction, wrap, align, justify, gap, overflow, style, children, className = '', ...props }) {
+    const resolvedRadius = radius !== undefined ? (RADIUS_MAP[String(radius)] || String(radius)) : undefined;
+    const resolvedShadow = shadow ? (SHADOW_MAP[shadow] || shadow) : undefined;
+    const resolvedPadding = padding !== undefined ? (SPACING_MAP[String(padding)] || String(padding)) : undefined;
+    const resolvedMargin = margin !== undefined ? (SPACING_MAP[String(margin)] || String(margin)) : undefined;
+    const resolvedGap = gap !== undefined ? (SPACING_MAP[String(gap)] || String(gap)) : undefined;
+    const resolvedAspect = aspectRatio ? (ASPECT_MAP[aspectRatio] || aspectRatio) : undefined;
+    const resolvedAlign = align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : align;
+    const resolvedJustify = justify === 'start'
+        ? 'flex-start'
+        : justify === 'end'
+            ? 'flex-end'
+            : justify === 'between'
+                ? 'space-between'
+                : justify === 'around'
+                    ? 'space-around'
+                    : justify === 'evenly'
+                        ? 'space-evenly'
+                        : justify;
+    const resolvedWrap = typeof wrap === 'boolean' ? (wrap ? 'wrap' : 'nowrap') : wrap;
+    const resolvedBorder = border === true
+        ? '1px solid var(--border-color, rgba(226, 232, 240, 0.8))'
+        : typeof border === 'string'
+            ? border
+            : undefined;
+    const path = previewFieldPath || id || previewItemPath;
+    const dynamicStyle = (0, SiteDataProvider_1.useFieldStyle)(path);
+    const dynamicMarginTop = dynamicStyle?.spacingTop !== undefined && dynamicStyle?.spacingTop !== '' ? `${dynamicStyle.spacingTop}px` : undefined;
+    const dynamicMarginBottom = dynamicStyle?.spacingBottom !== undefined && dynamicStyle?.spacingBottom !== '' ? `${dynamicStyle.spacingBottom}px` : undefined;
+    const dynamicMarginLeft = dynamicStyle?.spacingLeft !== undefined && dynamicStyle?.spacingLeft !== '' ? `${dynamicStyle.spacingLeft}px` : undefined;
+    const dynamicMarginRight = dynamicStyle?.spacingRight !== undefined && dynamicStyle?.spacingRight !== '' ? `${dynamicStyle.spacingRight}px` : undefined;
+    const boxStyle = {
+        ...(width !== undefined ? { width } : {}),
+        ...(minWidth !== undefined ? { minWidth } : {}),
+        ...(maxWidth !== undefined ? { maxWidth } : {}),
+        ...(height !== undefined ? { height } : {}),
+        ...(minHeight !== undefined ? { minHeight } : {}),
+        ...(maxHeight !== undefined ? { maxHeight } : {}),
+        ...(resolvedAspect ? { aspectRatio: resolvedAspect } : {}),
+        ...(balance ? { flex: '1 1 0%', minWidth: 0, height: '100%' } : {}),
+        ...(grow !== undefined ? { flexGrow: typeof grow === 'boolean' ? (grow ? 1 : 0) : grow } : {}),
+        ...(shrink !== undefined ? { flexShrink: typeof shrink === 'boolean' ? (shrink ? 1 : 0) : shrink } : {}),
+        ...(bg ? { background: bg } : {}),
+        ...(color ? { color } : {}),
+        ...(resolvedRadius ? { borderRadius: resolvedRadius } : {}),
+        ...(resolvedShadow ? { boxShadow: resolvedShadow } : {}),
+        ...(resolvedBorder ? { border: resolvedBorder } : {}),
+        ...(resolvedPadding ? { padding: resolvedPadding } : {}),
+        ...(resolvedMargin ? { margin: resolvedMargin } : {}),
+        ...(display ? { display } : {}),
+        ...(direction ? { flexDirection: direction } : {}),
+        ...(resolvedWrap ? { flexWrap: resolvedWrap } : {}),
+        ...(resolvedAlign ? { alignItems: resolvedAlign } : {}),
+        ...(resolvedJustify ? { justifyContent: resolvedJustify } : {}),
+        ...(resolvedGap ? { gap: resolvedGap } : {}),
+        ...(overflow ? { overflow } : {}),
+        ...style,
+        ...(dynamicMarginTop ? { marginTop: dynamicMarginTop } : {}),
+        ...(dynamicMarginBottom ? { marginBottom: dynamicMarginBottom } : {}),
+        ...(dynamicMarginLeft ? { marginLeft: dynamicMarginLeft } : {}),
+        ...(dynamicMarginRight ? { marginRight: dynamicMarginRight } : {}),
+        ...(dynamicStyle?.color ? { color: String(dynamicStyle.color) } : {}),
+    };
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": previewFieldPath || id, "data-preview-item-path": previewItemPath, "data-preview-static": previewStatic, className: `editable-box ${className}`.trim(), style: boxStyle, ...props, children: children }));
+}

package/dist/EditableCard.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { BoxAspectRatio, BoxRadius, BoxShadow, BoxSpacing } from './EditableBox';
+export interface CardItem {
+    id?: string | number;
+    title?: string;
+    name?: string;
+    body?: string;
+    description?: string;
+    imageUrl?: string;
+    [key: string]: unknown;
+}
+export interface EditableCardProps extends React.HTMLAttributes<HTMLElement> {
+    itemPath: string;
+    item: CardItem;
+    titleKey?: string;
+    bodyKey?: string;
+    imageKey?: string;
+    imageFallback?: string;
+    as?: React.ElementType;
+    /**
+     * Card sizing and dimension controls
+     */
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    height?: string | number;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    aspectRatio?: BoxAspectRatio;
+    /**
+     * Auto-balance: ensures card stretches evenly in flex/grid to match adjacent cards.
+     */
+    balance?: boolean;
+    /**
+     * Styling controls
+     */
+    radius?: BoxRadius;
+    shadow?: BoxShadow;
+    bg?: string;
+    border?: string | boolean;
+    padding?: BoxSpacing;
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * Reusable card for services, features, or list items across pages with
+ * responsive width/height sizing and auto-balancing space support.
+ */
+export declare function EditableCard({ itemPath, item, titleKey, bodyKey, imageKey, imageFallback, as: Component, width, minWidth, maxWidth, height, minHeight, maxHeight, aspectRatio, balance, radius, shadow, bg, border, padding, align, className, style, children, ...props }: EditableCardProps): React.JSX.Element;

package/dist/EditableCard.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableCard = EditableCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditableText_1 = require("./EditableText");
+const EditableImage_1 = require("./EditableImage");
+const RADIUS_MAP = {
+    none: '0px',
+    sm: '4px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+    '2xl': '24px',
+    full: '9999px',
+};
+const SHADOW_MAP = {
+    none: 'none',
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+};
+const SPACING_MAP = {
+    none: '0',
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '1rem',
+    lg: '1.5rem',
+    xl: '2rem',
+    '2xl': '3rem',
+};
+const ASPECT_MAP = {
+    square: '1 / 1',
+    '1/1': '1 / 1',
+    video: '16 / 9',
+    '16/9': '16 / 9',
+    portrait: '3 / 4',
+    '3/4': '3 / 4',
+    '4/3': '4 / 3',
+    landscape: '4 / 3',
+};
+/**
+ * Reusable card for services, features, or list items across pages with
+ * responsive width/height sizing and auto-balancing space support.
+ */
+function EditableCard({ itemPath, item, titleKey = 'title', bodyKey = 'body', imageKey = 'imageUrl', imageFallback = '/placeholder.svg', as: Component = 'article', width, minWidth, maxWidth, height, minHeight, maxHeight, aspectRatio, balance, radius, shadow, bg, border, padding, align, className = '', style, children, ...props }) {
+    const title = String(item?.[titleKey] ?? item?.name ?? '');
+    const body = String(item?.[bodyKey] ?? item?.description ?? '');
+    const imageUrl = item?.[imageKey] !== undefined ? String(item[imageKey]) : undefined;
+    const resolvedRadius = radius !== undefined ? (RADIUS_MAP[String(radius)] || String(radius)) : undefined;
+    const resolvedShadow = shadow ? (SHADOW_MAP[shadow] || shadow) : undefined;
+    const resolvedPadding = padding !== undefined ? (SPACING_MAP[String(padding)] || String(padding)) : undefined;
+    const resolvedAspect = aspectRatio ? (ASPECT_MAP[aspectRatio] || aspectRatio) : undefined;
+    const resolvedBorder = border === true
+        ? '1px solid var(--border-color, rgba(226, 232, 240, 0.8))'
+        : typeof border === 'string'
+            ? border
+            : undefined;
+    const cardStyle = {
+        ...(width !== undefined ? { width } : {}),
+        ...(minWidth !== undefined ? { minWidth } : {}),
+        ...(maxWidth !== undefined ? { maxWidth } : {}),
+        ...(height !== undefined ? { height } : {}),
+        ...(minHeight !== undefined ? { minHeight } : {}),
+        ...(maxHeight !== undefined ? { maxHeight } : {}),
+        ...(resolvedAspect ? { aspectRatio: resolvedAspect } : {}),
+        ...(balance
+            ? {
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+                flex: '1 1 0%',
+            }
+            : {}),
+        ...(bg ? { background: bg } : {}),
+        ...(resolvedRadius ? { borderRadius: resolvedRadius } : {}),
+        ...(resolvedShadow ? { boxShadow: resolvedShadow } : {}),
+        ...(resolvedBorder ? { border: resolvedBorder } : {}),
+        ...(resolvedPadding ? { padding: resolvedPadding } : {}),
+        ...(align ? { textAlign: align } : {}),
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, className: `editable-card ${className}`.trim(), style: cardStyle, ...props, children: [imageUrl !== undefined && ((0, jsx_runtime_1.jsx)("div", { className: "editable-card-image-wrap", children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, src: imageUrl, fallbackSrc: imageFallback, alt: title, className: "editable-card-image" }) })), (0, jsx_runtime_1.jsx)("div", { className: "editable-card-body", style: balance ? { display: 'flex', flexDirection: 'column', flex: '1 1 auto' } : undefined, children: children ? (children) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { variant: "h3", color: "heading", id: `${itemPath}.${titleKey}`, "data-preview-field-path": `${itemPath}.${titleKey}`, defaultValue: title, className: "editable-card-title" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { variant: "p", color: "muted", id: `${itemPath}.${bodyKey}`, "data-preview-field-path": `${itemPath}.${bodyKey}`, defaultValue: body, className: "editable-card-body-text" })] })) })] }));
+}

package/dist/EditableContactForm.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface EditableContactFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    endpoint?: string;
+    formTitle?: string;
+    formTitlePath?: string;
+    submitButtonText?: string;
+    submitLabelPath?: string;
+    successMessage?: string;
+    showPhone?: boolean;
+}
+export declare function EditableContactForm({ endpoint, formTitle, formTitlePath, submitButtonText, submitLabelPath, successMessage, showPhone, className, style, ...props }: EditableContactFormProps): React.JSX.Element;

package/dist/EditableContactForm.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableContactForm = EditableContactForm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact', formTitle, formTitlePath, submitButtonText = 'Send Message', submitLabelPath = 'contact.submitLabel', successMessage = 'Thank you! Your message has been sent successfully.', showPhone = false, className = '', style, ...props }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const [status, setStatus] = (0, react_1.useState)('idle');
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
+    const contactContent = siteData?.content?.contact;
+    const resolvedSubmitText = String(contactContent?.submitLabel || submitButtonText);
+    const resolvedFormTitle = formTitle || contactContent?.formTitle;
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setStatus('submitting');
+        setErrorMessage('');
+        const form = e.currentTarget;
+        const formData = new FormData(form);
+        const payload = {
+            projectId: siteData?.project?.id || 'demo-project',
+            name: formData.get('name'),
+            email: formData.get('email'),
+            phone: showPhone ? formData.get('phone') : undefined,
+            message: formData.get('message'),
+        };
+        try {
+            const res = await fetch(endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+            });
+            if (!res.ok) {
+                throw new Error(`Submission error: ${res.statusText || 'Unable to send message'}`);
+            }
+            setStatus('success');
+            form.reset();
+        }
+        catch (err) {
+            setStatus('error');
+            setErrorMessage(err.message || 'Something went wrong. Please try again.');
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, "data-fivora-contact-disabled": true, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1.25rem',
+            ...style,
+        }, className: `editable-contact-form ${className}`.trim(), ...props, children: [(resolvedFormTitle || formTitlePath) && ((0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": formTitlePath || 'contact.formTitle', style: {
+                    fontSize: '1.5rem',
+                    fontWeight: 700,
+                    color: 'var(--heading-color, #0f172a)',
+                    margin: '0 0 0.5rem 0',
+                }, children: resolvedFormTitle })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-name", "data-preview-static": "contact-label-name", style: {
+                            display: 'block',
+                            fontSize: '0.875rem',
+                            fontWeight: 600,
+                            marginBottom: '0.375rem',
+                            color: 'var(--heading-color, #0f172a)',
+                        }, children: "Your Name" }), (0, jsx_runtime_1.jsx)("input", { id: "contact-name", name: "name", type: "text", required: true, placeholder: "John Doe", style: {
+                            width: '100%',
+                            padding: '0.75rem 1rem',
+                            borderRadius: '10px',
+                            border: '1px solid #cbd5e1',
+                            fontSize: '0.95rem',
+                            outline: 'none',
+                            backgroundColor: '#ffffff',
+                            boxSizing: 'border-box',
+                        } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-email", "data-preview-static": "contact-label-email", style: {
+                            display: 'block',
+                            fontSize: '0.875rem',
+                            fontWeight: 600,
+                            marginBottom: '0.375rem',
+                            color: 'var(--heading-color, #0f172a)',
+                        }, children: "Email Address" }), (0, jsx_runtime_1.jsx)("input", { id: "contact-email", name: "email", type: "email", required: true, placeholder: "john@example.com", style: {
+                            width: '100%',
+                            padding: '0.75rem 1rem',
+                            borderRadius: '10px',
+                            border: '1px solid #cbd5e1',
+                            fontSize: '0.95rem',
+                            outline: 'none',
+                            backgroundColor: '#ffffff',
+                            boxSizing: 'border-box',
+                        } })] }), showPhone && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-phone", "data-preview-static": "contact-label-phone", style: {
+                            display: 'block',
+                            fontSize: '0.875rem',
+                            fontWeight: 600,
+                            marginBottom: '0.375rem',
+                            color: 'var(--heading-color, #0f172a)',
+                        }, children: "Phone Number" }), (0, jsx_runtime_1.jsx)("input", { id: "contact-phone", name: "phone", type: "tel", placeholder: "+1 (555) 000-0000", style: {
+                            width: '100%',
+                            padding: '0.75rem 1rem',
+                            borderRadius: '10px',
+                            border: '1px solid #cbd5e1',
+                            fontSize: '0.95rem',
+                            outline: 'none',
+                            backgroundColor: '#ffffff',
+                            boxSizing: 'border-box',
+                        } })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-message", "data-preview-static": "contact-label-message", style: {
+                            display: 'block',
+                            fontSize: '0.875rem',
+                            fontWeight: 600,
+                            marginBottom: '0.375rem',
+                            color: 'var(--heading-color, #0f172a)',
+                        }, children: "Message" }), (0, jsx_runtime_1.jsx)("textarea", { id: "contact-message", name: "message", rows: 5, required: true, placeholder: "Tell us how we can help...", style: {
+                            width: '100%',
+                            padding: '0.75rem 1rem',
+                            borderRadius: '10px',
+                            border: '1px solid #cbd5e1',
+                            fontSize: '0.95rem',
+                            outline: 'none',
+                            backgroundColor: '#ffffff',
+                            boxSizing: 'border-box',
+                            fontFamily: 'inherit',
+                        } })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: status === 'submitting', style: {
+                    padding: '0.875rem 1.5rem',
+                    borderRadius: '10px',
+                    border: 'none',
+                    backgroundColor: 'var(--brand-color, #2563eb)',
+                    color: '#ffffff',
+                    fontSize: '1rem',
+                    fontWeight: 600,
+                    cursor: status === 'submitting' ? 'not-allowed' : 'pointer',
+                    opacity: status === 'submitting' ? 0.7 : 1,
+                    boxShadow: '0 4px 14px 0 rgba(37, 99, 235, 0.35)',
+                    transition: 'all 0.2s ease',
+                }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": submitLabelPath, children: status === 'submitting' ? 'Sending Message...' : resolvedSubmitText }) }), status === 'success' && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    padding: '1rem',
+                    borderRadius: '10px',
+                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
+                    border: '1px solid rgba(34, 197, 94, 0.3)',
+                    color: '#15803d',
+                    fontSize: '0.925rem',
+                    fontWeight: 500,
+                    textAlign: 'center',
+                }, children: successMessage })), status === 'error' && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    padding: '1rem',
+                    borderRadius: '10px',
+                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                    border: '1px solid rgba(239, 68, 68, 0.3)',
+                    color: '#b91c1c',
+                    fontSize: '0.925rem',
+                    fontWeight: 500,
+                    textAlign: 'center',
+                }, children: errorMessage }))] }));
+}