@deneb-ui/ui 2.0.111 → 2.0.113

package/dist/EditableIcon.d.ts

@@ -0,0 +1,67 @@
+/**
+ * EditableIcon — DENEB UI Framework
+ *
+ * Universal, developer-friendly editable vector icon component for all templates
+ * (Automotive, Gym, Restaurant, Bookshop, Real Estate, E-Commerce, etc.).
+ *
+ * Core capabilities:
+ * 1. Dynamic name-to-SVG resolution for 40+ standard business glyphs (speedometer, fuel,
+ *    transmission, scale/compare, heart/saved, whatsapp, calculator, check, dumbbell, etc.).
+ * 2. Visual Editor Integration: When `fieldPath` is provided, attaches `data-preview-field-path`,
+ *    `data-preview-control="icon-picker"`, and `data-preview-icon={name}` so Deneb Studio opens
+ *    the Icon Picker modal.
+ * 3. Supports Lucide kebab-case ("file-check-2"), camelCase ("fileCheck2"), and PascalCase ("FileCheck2").
+ * 4. Extensible via `iconMap` or `customIcon` slot for template-specific graphics.
+ * 5. Zero-dependency: Renders crisp, scalable SVGs directly with zero layout shift.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+import React from 'react';
+export interface EditableIconProps extends React.SVGAttributes<SVGSVGElement> {
+    /**
+     * The name of the icon (e.g. "gauge", "fuel", "settings", "scale", "heart", "whatsapp",
+     * "calculator", "file-check", "dumbbell", "book", "utensils", "clock", "pin", "user").
+     */
+    name?: string;
+    /**
+     * Field path in site-data.json (e.g. "cards.vehicles[0].specs.mileage.icon" or "home.benefits[0].icon").
+     * When supplied, marks this element as an editable icon in Deneb Studio.
+     */
+    fieldPath?: string;
+    /**
+     * Size of the icon in pixels (number) or CSS string (e.g. 16, 20, 24, "1rem", "1.25rem").
+     * Defaults to 16.
+     */
+    size?: number | string;
+    /**
+     * Stroke width for outline icons. Defaults to 2.
+     */
+    strokeWidth?: number | string;
+    /**
+     * Optional custom icon node to render instead of built-in glyphs.
+     */
+    customIcon?: React.ReactNode;
+    /**
+     * Fallback icon name if the given name is not found in the icon dictionary. Defaults to 'circle'.
+     */
+    fallback?: string;
+    /**
+     * Optional title for accessibility / tooltip.
+     */
+    title?: string;
+    /**
+     * Dictionary of custom SVG paths or renderers to merge with standard icons.
+     */
+    iconMap?: Record<string, React.ReactNode>;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+}
+export declare const EditableIcon: React.FC<EditableIconProps>;
+export declare const DynamicIcon: React.FC<EditableIconProps>;
+export declare const Icon: React.FC<EditableIconProps>;

package/dist/EditableIcon.js

@@ -0,0 +1,251 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = exports.DynamicIcon = exports.EditableIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+const BUILTIN_ICONS = {
+    // Vehicle & Specs
+    gauge: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "m12 14 4-4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M3.34 19a10 10 0 1 1 17.32 0", strokeWidth: strokeWidth })] })),
+    fuel: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "15", y1: "22", y2: "22", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "4", x2: "14", y1: "9", y2: "9", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2a2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5", strokeWidth: strokeWidth })] })),
+    settings: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "3", strokeWidth: strokeWidth })] })),
+    // Action, Social & Utility
+    scale: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M7 21h10", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 3v18", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2", strokeWidth: strokeWidth })] })),
+    whatsapp: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 21l1.65-3.8a9 9 0 1 1 3.4 2.9L3 21", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M9 10a.5.5 0 0 0 1 0V9a.5.5 0 0 0-1 0v1a5 5 0 0 0 5 5h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1", strokeWidth: strokeWidth })] })),
+    heart: ({ strokeWidth }) => ((0, jsx_runtime_1.jsx)("path", { d: "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z", strokeWidth: strokeWidth })),
+    calculator: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "16", y1: "6", y2: "6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "16", x2: "16", y1: "14", y2: "18", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M16 10h.01", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 10h.01", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M8 10h.01", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 14h.01", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M8 14h.01", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 18h.01", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M8 18h.01", strokeWidth: strokeWidth })] })),
+    'file-check': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("polyline", { points: "14 2 14 8 20 8", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m3 15 2 2 4-4", strokeWidth: strokeWidth })] })),
+    'file-check-2': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("polyline", { points: "14 2 14 8 20 8", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m3 15 2 2 4-4", strokeWidth: strokeWidth })] })),
+    'message-circle': ({ strokeWidth }) => ((0, jsx_runtime_1.jsx)("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z", strokeWidth: strokeWidth })),
+    'message-square': ({ strokeWidth }) => ((0, jsx_runtime_1.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", strokeWidth: strokeWidth })),
+    'search-check': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "8", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m21 21-4.3-4.3", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m8 11 2 2 4-4", strokeWidth: strokeWidth })] })),
+    search: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "8", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m21 21-4.3-4.3", strokeWidth: strokeWidth })] })),
+    // Fitness / Gym
+    dumbbell: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "m6.5 6.5 11 11", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m21 21-1-1", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m3 3 1 1", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m18 22 4-4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m2 6 4-4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m3 10 7-7", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m14 21 7-7", strokeWidth: strokeWidth })] })),
+    'heart-pulse': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M3.22 12H9.5l1.5-3 2 6 1.5-3h4.78", strokeWidth: strokeWidth })] })),
+    timer: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: "10", x2: "14", y1: "2", y2: "2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "12", x2: "15", y1: "14", y2: "11", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "14", r: "8", strokeWidth: strokeWidth })] })),
+    // Bookshop / Education
+    book: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z", strokeWidth: strokeWidth })] })),
+    'book-open': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z", strokeWidth: strokeWidth })] })),
+    'pen-tool': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "m12 19 7-7 3 3-7 7-3-3z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m2 2 7.586 7.586", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "2", strokeWidth: strokeWidth })] })),
+    // Restaurant / Food
+    utensils: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M18 2v6a3 3 0 0 1-3 3 3 3 0 0 1-3-3V2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M15 11v11", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M5 2v14a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M7 2v5", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M21 15V2a5 5 0 0 0-5 5v3a2 2 0 0 0 2 2h3Z", strokeWidth: strokeWidth })] })),
+    coffee: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 2v2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M14 2v2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h12Z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M6 2v2", strokeWidth: strokeWidth })] })),
+    // Florist / Botanical / Eco
+    flower: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "3", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 16.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 1 1 12 7.5a4.5 4.5 0 1 1 4.5 4.5 4.5 4.5 0 1 1-4.5 4.5", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M8 12H4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 8V4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M16 12h4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 16v4", strokeWidth: strokeWidth })] })),
+    'flower-2': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1m3 2a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3h-1m-2 3a3 3 0 1 1-3 3m3-3a3 3 0 1 0-3-3m3 3v-1m-3-2a3 3 0 1 1-3-3m3 3a3 3 0 1 0 3-3m-3 3h1", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "2", strokeWidth: strokeWidth })] })),
+    leaf: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12", strokeWidth: strokeWidth })] })),
+    sprout: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 20h10", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M10 20c5.5-2.5.8-6.4 3-10", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z", strokeWidth: strokeWidth })] })),
+    wallet: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4", strokeWidth: strokeWidth })] })),
+    'refresh-cw': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M21 3v5h-5", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M8 16H3v5", strokeWidth: strokeWidth })] })),
+    navigation: ({ strokeWidth }) => ((0, jsx_runtime_1.jsx)("polygon", { points: "3 11 22 2 13 21 11 13 3 11", strokeWidth: strokeWidth })),
+    'arrow-up-right': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: "7", x2: "17", y1: "17", y2: "7", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("polyline", { points: "7 7 17 7 17 17", strokeWidth: strokeWidth })] })),
+    // Common Business & UI
+    clock: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("polyline", { points: "12 6 12 12 16 14", strokeWidth: strokeWidth })] })),
+    'map-pin': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "10", r: "3", strokeWidth: strokeWidth })] })),
+    phone: ({ strokeWidth }) => ((0, jsx_runtime_1.jsx)("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z", strokeWidth: strokeWidth })),
+    mail: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7", strokeWidth: strokeWidth })] })),
+    calendar: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "16", x2: "16", y1: "2", y2: "6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "8", y1: "2", y2: "6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "21", y1: "10", y2: "10", strokeWidth: strokeWidth })] })),
+    user: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "7", r: "4", strokeWidth: strokeWidth })] })),
+    users: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75", strokeWidth: strokeWidth })] })),
+    check: ({ strokeWidth }) => ((0, jsx_runtime_1.jsx)("polyline", { points: "20 6 9 17 4 12", strokeWidth: strokeWidth })),
+    'check-circle': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("polyline", { points: "22 4 12 14.01 9 11.01", strokeWidth: strokeWidth })] })),
+    star: ({ strokeWidth }) => ((0, jsx_runtime_1.jsx)("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2", strokeWidth: strokeWidth })),
+    shield: ({ strokeWidth }) => ((0, jsx_runtime_1.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", strokeWidth: strokeWidth })),
+    zap: ({ strokeWidth }) => ((0, jsx_runtime_1.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2", strokeWidth: strokeWidth })),
+    sparkles: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M5 3v4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M19 17v4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M3 5h4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M17 19h4", strokeWidth: strokeWidth })] })),
+    award: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "8", r: "7", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("polyline", { points: "8.21 13.89 7 23 12 20 17 23 15.79 13.88", strokeWidth: strokeWidth })] })),
+    circle: ({ strokeWidth }) => ((0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "8", strokeWidth: strokeWidth })),
+    car: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "m21 8-2 2-1.5-3.7A2 2 0 0 0 15.64 5H8.36a2 2 0 0 0-1.86 1.3L5 10l-2-2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M7 14h.01", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M17 14h.01", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("rect", { width: "18", height: "8", x: "3", y: "10", rx: "2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M5 18v2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M19 18v2", strokeWidth: strokeWidth })] })),
+    camera: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "13", r: "3", strokeWidth: strokeWidth })] })),
+    handshake: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "m11 17 2 2a1 1 0 0 0 1.4 0l4.6-4.6a2 2 0 0 0 0-2.8l-3.2-3.2a2 2 0 0 0-2.8 0L11 10.4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m18 11 3-3a2 2 0 0 0 0-2.8l-1.2-1.2a2 2 0 0 0-2.8 0L13.4 7.6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m2 11 3-3a2 2 0 0 1 2.8 0l1.2 1.2a2 2 0 0 1 0 2.8L5.4 15.6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m13 17-2 2a1 1 0 0 1-1.4 0L5 14.4a2 2 0 0 1 0-2.8l3.2-3.2a2 2 0 0 1 2.8 0L13 10.4", strokeWidth: strokeWidth })] })),
+    eye: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "3", strokeWidth: strokeWidth })] })),
+    'file-search': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("polyline", { points: "14 2 14 8 20 8", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: "11.5", cy: "14.5", r: "3.5", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m14 17 2 2", strokeWidth: strokeWidth })] })),
+    'file-text': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M10 9H8", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M16 13H8", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M16 17H8", strokeWidth: strokeWidth })] })),
+    'clipboard-list': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 11h4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 16h4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M8 11h.01", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M8 16h.01", strokeWidth: strokeWidth })] })),
+    bell: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0", strokeWidth: strokeWidth })] })),
+    landmark: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "21", y1: "22", y2: "22", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "6", x2: "6", y1: "18", y2: "11", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "10", x2: "10", y1: "18", y2: "11", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "14", x2: "14", y1: "18", y2: "11", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "18", x2: "18", y1: "18", y2: "11", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("polygon", { points: "12 2 20 7 4 7", strokeWidth: strokeWidth })] })),
+    'calendar-check': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "16", x2: "16", y1: "2", y2: "6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "8", y1: "2", y2: "6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "21", y1: "10", y2: "10", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m9 16 2 2 4-4", strokeWidth: strokeWidth })] })),
+    trophy: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M6 9H4.5a2.5 2.5 0 0 1 0-5H6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M18 9h1.5a2.5 2.5 0 0 0 0-5H18", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M4 22h16", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M18 2H6v7a6 6 0 0 0 12 0V2Z", strokeWidth: strokeWidth })] })),
+    wand: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "m15 4-2 2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m15 2 2 2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m12 7 2-2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M9 11 3 17l4 4 6-6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "m19 9-2 2", strokeWidth: strokeWidth })] })),
+    copy: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", strokeWidth: strokeWidth })] })),
+    info: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 16v-4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M12 8h.01", strokeWidth: strokeWidth })] })),
+    'rotate-ccw': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: "M3 3v5h5", strokeWidth: strokeWidth })] })),
+    'sliders-horizontal': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: "21", x2: "14", y1: "4", y2: "4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "10", x2: "3", y1: "4", y2: "4", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "21", x2: "12", y1: "12", y2: "12", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "3", y1: "12", y2: "12", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "21", x2: "16", y1: "20", y2: "20", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "12", x2: "3", y1: "20", y2: "20", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "14", x2: "14", y1: "2", y2: "6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "8", y1: "10", y2: "14", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "16", x2: "16", y1: "18", y2: "22", strokeWidth: strokeWidth })] })),
+    'layout-grid': ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", strokeWidth: strokeWidth })] })),
+    list: ({ strokeWidth }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "21", y1: "6", y2: "6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "21", y1: "12", y2: "12", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "21", y1: "18", y2: "18", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "3.01", y1: "6", y2: "6", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "3.01", y1: "12", y2: "12", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "3.01", y1: "18", y2: "18", strokeWidth: strokeWidth })] })),
+};
+// ── Aliases & Normalization ───────────────────────────────────────────────────
+const ICON_ALIASES = {
+    speedometer: 'gauge',
+    odometer: 'gauge',
+    mileage: 'gauge',
+    gas: 'fuel',
+    petrol: 'fuel',
+    diesel: 'fuel',
+    electric: 'zap',
+    battery: 'zap',
+    power: 'zap',
+    transmission: 'settings',
+    gear: 'settings',
+    gearbox: 'settings',
+    cog: 'settings',
+    compare: 'scale',
+    balance: 'scale',
+    scales: 'scale',
+    saved: 'heart',
+    favorite: 'heart',
+    like: 'heart',
+    document: 'file-check',
+    evidence: 'file-check',
+    report: 'file-check',
+    chat: 'message-circle',
+    message: 'message-circle',
+    comments: 'message-square',
+    calc: 'calculator',
+    loan: 'calculator',
+    finance: 'calculator',
+    sourcing: 'search-check',
+    verified: 'check-circle',
+    gym: 'dumbbell',
+    fitness: 'dumbbell',
+    weight: 'dumbbell',
+    menu: 'utensils',
+    dish: 'utensils',
+    food: 'utensils',
+    restaurant: 'utensils',
+    duration: 'clock',
+    time: 'clock',
+    location: 'map-pin',
+    pin: 'map-pin',
+    address: 'map-pin',
+    call: 'phone',
+    telephone: 'phone',
+    email: 'mail',
+    directions: 'navigation',
+    navigate: 'navigation',
+    compass: 'navigation',
+    money: 'wallet',
+    wallet: 'wallet',
+    ownership: 'wallet',
+    cycle: 'refresh-cw',
+    refresh: 'refresh-cw',
+    'trade-in': 'refresh-cw',
+    arrow: 'arrow-up-right',
+    external: 'arrow-up-right',
+    'up-right': 'arrow-up-right',
+    rose: 'flower',
+    tulip: 'flower',
+    bloom: 'flower',
+    blossom: 'flower',
+    floral: 'flower',
+    flowers: 'flower',
+    plant: 'sprout',
+    seedling: 'sprout',
+    nature: 'leaf',
+    eco: 'leaf',
+    tree: 'leaf',
+    'car-front': 'car',
+    auto: 'car',
+    automobile: 'car',
+    vehicle: 'car',
+    'wand-2': 'wand',
+    magic: 'wand',
+    grid: 'layout-grid',
+    table: 'layout-grid',
+    sliders: 'sliders-horizontal',
+    filters: 'sliders-horizontal',
+    bank: 'landmark',
+    alert: 'bell',
+    notification: 'bell',
+    'plug-zap': 'zap',
+    ev: 'zap',
+    hybrid: 'zap',
+};
+function normalizeIconName(name) {
+    if (!name)
+        return 'circle';
+    // Strip "Icon" suffix e.g. "GaugeIcon" -> "gauge"
+    let clean = name.replace(/Icon$/i, '');
+    // Convert PascalCase or camelCase to kebab-case
+    clean = clean
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .toLowerCase()
+        .trim();
+    if (ICON_ALIASES[clean]) {
+        return ICON_ALIASES[clean];
+    }
+    return clean;
+}
+function resolveFieldFromPath(obj, pathStr) {
+    if (!obj || !pathStr)
+        return undefined;
+    const parts = pathStr.replace(/\[(\d+)\]/g, '.$1').split('.').filter(Boolean);
+    let cur = obj;
+    for (const p of parts) {
+        if (cur == null)
+            return undefined;
+        cur = cur[p];
+    }
+    return cur;
+}
+// ── Component Implementation ──────────────────────────────────────────────────
+const EditableIcon = ({ name = 'circle', fieldPath, size = 16, strokeWidth = 2, customIcon, fallback = 'circle', title, iconMap, className = '', style = {}, ...svgProps }) => {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const content = siteData?.content || siteData;
+    // If a fieldPath is provided, check if the data store overrides the icon name string
+    const resolvedNameFromStore = fieldPath
+        ? (resolveFieldFromPath(content, fieldPath) ?? resolveFieldFromPath(siteData, fieldPath))
+        : undefined;
+    const activeName = (typeof resolvedNameFromStore === 'string' && resolvedNameFromStore.trim())
+        ? resolvedNameFromStore.trim()
+        : name;
+    const normalized = normalizeIconName(activeName);
+    // 1. Custom icon slot
+    if (customIcon) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: `deneb-editable-icon ${className}`, style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                lineHeight: 1,
+                ...style,
+            }, ...(fieldPath ? {
+                'data-preview-field-path': fieldPath,
+                'data-preview-control': 'icon-picker',
+                'data-preview-icon-type': 'lucide',
+                'data-preview-icon': activeName,
+            } : {}), children: customIcon }));
+    }
+    // 2. Custom dictionary override
+    if (iconMap && iconMap[normalized]) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: `deneb-editable-icon ${className}`, style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                lineHeight: 1,
+                ...style,
+            }, ...(fieldPath ? {
+                'data-preview-field-path': fieldPath,
+                'data-preview-control': 'icon-picker',
+                'data-preview-icon-type': 'lucide',
+                'data-preview-icon': activeName,
+            } : {}), children: iconMap[normalized] }));
+    }
+    // 3. Built-in SVG lookup
+    const renderer = BUILTIN_ICONS[normalized] || BUILTIN_ICONS[fallback] || BUILTIN_ICONS.circle;
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, className: `deneb-editable-icon ${className}`, style: {
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            flexShrink: 0,
+            ...style,
+        }, "aria-hidden": !title, role: title ? 'img' : undefined, ...(fieldPath ? {
+            'data-preview-field-path': fieldPath,
+            'data-preview-control': 'icon-picker',
+            'data-preview-icon-type': 'lucide',
+            'data-preview-icon': activeName,
+        } : {}), ...svgProps, children: [title && (0, jsx_runtime_1.jsx)("title", { children: title }), renderer({ strokeWidth })] }));
+};
+exports.EditableIcon = EditableIcon;
+// Aliases for developer convenience
+exports.DynamicIcon = exports.EditableIcon;
+exports.Icon = exports.EditableIcon;

package/dist/EditableProductCard.js

@@ -156,13 +156,15 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
     const originalPriceKey = 'compareAtPrice' in (product || {}) && !('originalPrice' in (product || {}) && product.originalPrice !== undefined)
         ? 'compareAtPrice'
         : 'originalPrice';
-    const descriptionKey = 'desc' in (product || {}) && !('description' in (product || {}) && product.description)
-        ? 'desc'
-        : 'description';
-    const description = String(product?.description || product?.desc || product?.details || '');
+    const descriptionKey = ['details', 'description', 'desc'].find((key) => product && key in product && product[key]) ||
+        ['details', 'description', 'desc'].find((key) => product && key in product) ||
+        'details';
+    const description = String(product?.[descriptionKey] || product?.description || product?.desc || product?.details || '');
+    const hasDescriptionField = Boolean(product && ('details' in product || 'description' in product || 'desc' in product));
     const category = String(product?.category || '');
     const badgeKey = 'tag' in (product || {}) && !('badge' in (product || {}) && product.badge) ? 'tag' : 'badge';
     const badge = String(product?.badge || product?.tag || '');
+    const hasBadgeField = Boolean(product && ('badge' in product || 'tag' in product));
     const fallbackImage = imageFallback || 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=800&q=80';
     const rawImage = product?.imageUrl ||
         product?.image ||
@@ -321,7 +323,20 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
                             if (onDetailClick) {
                                 onDetailClick(product, resolvedDetailHref);
                             }
-                        }, "data-preview-static": "Open the stable live product detail page", style: { display: 'block', width: '100%', height: '100%', textDecoration: 'none' }, title: `View details for ${name}`, children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, "data-preview-field-path": `${itemPath}.${imageKey}`, src: currentImage, fallbackSrc: imageFallback, alt: name, aspectRatio: isHorizontal ? 'square' : '4/3', fit: "cover", hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } }) })) : ((0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, "data-preview-field-path": `${itemPath}.${imageKey}`, src: currentImage, fallbackSrc: imageFallback, alt: name, aspectRatio: isHorizontal ? 'square' : '4/3', fit: "cover", hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } })), badge && ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: '10px', left: '10px', zIndex: 10 }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableBadge, { id: `${itemPath}.${badgeKey}`, "data-preview-field-path": `${itemPath}.${badgeKey}`, defaultValue: badge, badgeVariant: "primary" }) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, "data-preview-static": "Open the stable live product detail page", style: { display: 'block', width: '100%', height: '100%', textDecoration: 'none' }, title: `View details for ${name}`, children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, "data-preview-field-path": `${itemPath}.${imageKey}`, src: currentImage, fallbackSrc: imageFallback, alt: name, aspectRatio: isHorizontal ? 'square' : '4/3', fit: "cover", hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } }) })) : ((0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, "data-preview-field-path": `${itemPath}.${imageKey}`, src: currentImage, fallbackSrc: imageFallback, alt: name, aspectRatio: isHorizontal ? 'square' : '4/3', fit: "cover", hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } })), hasBadgeField ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: '10px',
+                            left: '10px',
+                            zIndex: 10,
+                            ...(badge
+                                ? {}
+                                : {
+                                    width: 1,
+                                    height: 1,
+                                    overflow: 'hidden',
+                                    clip: 'rect(0, 0, 0, 0)',
+                                }),
+                        }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableBadge, { id: `${itemPath}.${badgeKey}`, "data-preview-field-path": `${itemPath}.${badgeKey}`, defaultValue: badge, badgeVariant: "primary" }) })) : null] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                     padding: '1.25rem',
                     display: 'flex',
                     flexDirection: 'column',
@@ -363,10 +378,11 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
                                     lineHeight: 1.35,
                                     color: 'var(--heading-color, #ffffff)',
                                     marginBottom: '0.375rem',
-                                } })), showDescription && description ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.${descriptionKey}`, "data-preview-field-path": `${itemPath}.${descriptionKey}`, defaultValue: description, style: {
+                                } })), showDescription && (description || hasDescriptionField) ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.${descriptionKey}`, "data-preview-field-path": `${itemPath}.${descriptionKey}`, defaultValue: description, style: {
                                     fontSize: '0.875rem',
                                     color: 'var(--muted-text, #94a3b8)',
                                     lineHeight: 1.5,
+                                    minHeight: description ? undefined : '1.25em',
                                     marginBottom: '0.625rem',
                                     display: '-webkit-box',
                                     WebkitLineClamp: 2,

package/dist/EditableUniversalCard.d.ts

@@ -0,0 +1,99 @@
+/**
+ * EditableUniversalCard — DENEB UI Framework
+ *
+ * Universal, multi-industry listing card for all commerce and business templates:
+ * - 🚗 Automotive & Equipment: Make/model, year & condition, mileage, fuel, gearbox, price
+ * - 📚 Bookshops & Publishers: Cover photo, book title, author, published year, pages, price
+ * - 🏋️ Gyms & Fitness: Membership tier, duration, meal plan, 24/7 access, trainer, price
+ * - 🍽️ Restaurants & Menus: Dish photo, title, dietary tags, ingredients, prep time, price
+ * - 🏠 Real Estate & Rentals: Property image, location, beds, baths, sqft, price
+ * - 💼 Services & Agencies: Service title, duration, deliverable checklist, pricing
+ *
+ * Designed with strict editability architecture:
+ * 1. Automatically resolves fields from `useSiteData()` via `itemPath` or explicit field paths.
+ * 2. Properly manages z-index layers so title links never block clicks/hovers on inner text/specs.
+ * 3. Supports grid, list, compact, and horizontal orientations.
+ * 4. Extensible slots for images, badges, custom spec icons, and action buttons.
+ */
+import React from 'react';
+export interface UniversalCardSpec {
+    /** Machine identifier or field key (e.g. "mileage", "author", "duration", "mealPlan") */
+    key: string;
+    /** Optional human-readable label shown before or above the value (e.g. "Written by", "Validity") */
+    label?: string;
+    /** Spec display value (e.g. "52,000 km", "Harper Lee", "12 Months", "Vegetarian") */
+    value: string;
+    /** Optional decorative icon or badge rendered alongside the spec (ReactNode or icon name string) */
+    icon?: React.ReactNode | string;
+    /** Optional icon name string (e.g. "gauge", "fuel", "settings", "dumbbell", "book", "utensils") */
+    iconName?: string;
+    /** Explicit custom data-preview-field-path for the icon itself */
+    iconFieldPath?: string;
+    /** Explicit custom data-preview-field-path override */
+    fieldPath?: string;
+}
+export interface UniversalCardImageProps {
+    src?: string;
+    alt?: string;
+    aspectRatio?: '16/10' | '16/9' | '4/3' | '3/4' | '1/1' | string;
+    fit?: 'cover' | 'contain';
+    fallbackSrc?: string;
+    fieldPath?: string;
+}
+export interface UniversalCardCTA {
+    label: string;
+    href?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    fieldPath?: string;
+}
+export interface UniversalCardProps {
+    /**
+     * Root path in site-data.json for this card item.
+     * e.g. "cards.vehicles.am-1001", "cards.books.book-42", "cards.plans.gold"
+     * All sub-fields inherit this prefix unless individually overridden.
+     */
+    itemPath?: string;
+    /** Primary image configuration or image URL string */
+    image?: UniversalCardImageProps | string;
+    /** Slot to render a custom image component (e.g. Next Image, VehicleImage, CoverImage) */
+    imageSlot?: React.ReactNode;
+    /** Top floating badge label (e.g. "Available", "Bestseller", "New", "Chef's Pick") */
+    badge?: string;
+    badgeVariant?: 'default' | 'success' | 'warning' | 'primary' | 'muted';
+    badgeSlot?: React.ReactNode;
+    /** Eyebrow / Overline text (e.g. "2018 · Registered", "Science Fiction", "Tier 1") */
+    overline?: string;
+    /** Main entity title / heading (e.g. "Mercedes-Benz C200", "Dune", "Gold Membership") */
+    title: string;
+    /** Link URL for the title and card navigation */
+    href?: string;
+    /** Subtitle / Edition / Summary / Author text */
+    subtitle?: string;
+    /** Optional longer description or excerpt */
+    description?: string;
+    /** Dynamic key-value specifications, attributes, or feature pills */
+    specs?: UniversalCardSpec[];
+    /** Primary price display string (e.g. "LKR 27,500,000", "$19.99", "$49") */
+    price?: string;
+    /** Compare-at or original strike-through price */
+    originalPrice?: string;
+    /** Price label shown above the price (e.g. "Price", "Starting from", "Membership") */
+    priceLabel?: string;
+    /** Suffix appended after the price (e.g. "/mo", "/year", "/person") */
+    priceSuffix?: string;
+    /** Call-to-action button configuration */
+    cta?: UniversalCardCTA;
+    /** Custom slot for secondary action buttons (e.g. Save, Compare, Bookmark, Share) */
+    actionsSlot?: React.ReactNode;
+    /** Layout orientation */
+    layout?: 'grid' | 'list' | 'compact' | 'horizontal';
+    /** Outer CSS class */
+    className?: string;
+    /** Outer inline style */
+    style?: React.CSSProperties;
+    /** Extra children rendered at the bottom of the card */
+    children?: React.ReactNode;
+}
+export declare function EditableUniversalCard({ itemPath, image, imageSlot, badge, badgeVariant, badgeSlot, overline, title, href, subtitle, description, specs, price, originalPrice, priceLabel, priceSuffix, cta, actionsSlot, layout, className, style, children, }: UniversalCardProps): React.ReactElement;
+export { EditableUniversalCard as UniversalCard, EditableUniversalCard as EditableListingCard, EditableUniversalCard as ListingCard, EditableUniversalCard as EditableEntityCard, EditableUniversalCard as EntityCard, };

package/dist/EditableUniversalCard.js

@@ -0,0 +1,220 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableUniversalCard = EditableUniversalCard;
+exports.UniversalCard = EditableUniversalCard;
+exports.EditableListingCard = EditableUniversalCard;
+exports.ListingCard = EditableUniversalCard;
+exports.EditableEntityCard = EditableUniversalCard;
+exports.EntityCard = EditableUniversalCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+const EditableImage_1 = require("./EditableImage");
+const EditableIcon_1 = require("./EditableIcon");
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function resolveFieldFromPath(content, fullPath) {
+    if (!content || typeof content !== 'object' || !fullPath)
+        return undefined;
+    const parts = fullPath.split('.');
+    let curr = content;
+    for (const part of parts) {
+        if (curr && typeof curr === 'object' && part in curr) {
+            curr = curr[part];
+        }
+        else {
+            return undefined;
+        }
+    }
+    return typeof curr === 'string' && curr ? curr : undefined;
+}
+// ─── Component Implementation ─────────────────────────────────────────────────
+function EditableUniversalCard({ itemPath, image, imageSlot, badge, badgeVariant = 'primary', badgeSlot, overline, title, href, subtitle, description, specs = [], price, originalPrice, priceLabel, priceSuffix, cta, actionsSlot, layout = 'grid', className = '', style, children, }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const content = siteData?.content;
+    // Resolve item-level field paths
+    const fp = (subKey) => (itemPath ? `${itemPath}.${subKey}` : undefined);
+    // Resolved dynamic values with live siteData overrides
+    const resolvedOverline = (itemPath ? resolveFieldFromPath(content, fp('overline') || '') : undefined) ||
+        (itemPath ? resolveFieldFromPath(content, fp('meta') || '') : undefined) ||
+        overline;
+    const resolvedTitle = (itemPath ? resolveFieldFromPath(content, fp('title') || '') : undefined) ||
+        (itemPath ? resolveFieldFromPath(content, fp('name') || '') : undefined) ||
+        title;
+    const resolvedSubtitle = (itemPath ? resolveFieldFromPath(content, fp('subtitle') || '') : undefined) ||
+        (itemPath ? resolveFieldFromPath(content, fp('details') || '') : undefined) ||
+        (itemPath ? resolveFieldFromPath(content, fp('author') || '') : undefined) ||
+        subtitle;
+    const resolvedDescription = (itemPath ? resolveFieldFromPath(content, fp('description') || '') : undefined) ||
+        (itemPath ? resolveFieldFromPath(content, fp('summary') || '') : undefined) ||
+        description;
+    const resolvedBadge = (itemPath ? resolveFieldFromPath(content, fp('badge') || '') : undefined) ||
+        (itemPath ? resolveFieldFromPath(content, fp('status') || '') : undefined) ||
+        badge;
+    const resolvedPrice = (itemPath ? resolveFieldFromPath(content, fp('price') || '') : undefined) ||
+        price;
+    const resolvedOriginalPrice = (itemPath ? resolveFieldFromPath(content, fp('originalPrice') || '') : undefined) ||
+        originalPrice;
+    const resolvedPriceLabel = (itemPath ? resolveFieldFromPath(content, fp('priceLabel') || '') : undefined) ||
+        priceLabel;
+    // Image source normalization
+    const imageObj = typeof image === 'string'
+        ? { src: image }
+        : image || {};
+    const isList = layout === 'list' || layout === 'horizontal';
+    // Badge variant styling
+    const badgeStyles = {
+        default: { backgroundColor: 'var(--tag-bg, rgba(255,255,255,0.9))', color: 'var(--text-color, #0f172a)' },
+        primary: { backgroundColor: 'var(--brand-accent, #0284c7)', color: '#ffffff' },
+        success: { backgroundColor: '#10b981', color: '#ffffff' },
+        warning: { backgroundColor: '#f59e0b', color: '#0f172a' },
+        muted: { backgroundColor: 'rgba(100, 116, 139, 0.85)', color: '#ffffff' },
+    };
+    return ((0, jsx_runtime_1.jsxs)("article", { "data-preview-item-path": itemPath, className: `deneb-universal-card ${className}`, style: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: isList ? 'row' : 'column',
+            borderRadius: 'var(--card-radius, 0.75rem)',
+            border: '1px solid var(--card-border, rgba(226, 232, 240, 0.8))',
+            backgroundColor: 'var(--card-bg, #ffffff)',
+            overflow: 'hidden',
+            transition: 'transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease',
+            ...style,
+        }, children: [(imageSlot || imageObj.src) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: 'relative',
+                    zIndex: 10,
+                    overflow: 'hidden',
+                    width: isList ? '40%' : '100%',
+                    flexShrink: 0,
+                }, children: [imageSlot ? (imageSlot) : imageObj.src ? ((0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: imageObj.fieldPath || fp('image') || fp('imageUrl') || 'image', "data-preview-field-path": imageObj.fieldPath || fp('image') || fp('imageUrl'), src: imageObj.src, alt: imageObj.alt || resolvedTitle, fallbackSrc: imageObj.fallbackSrc, aspectRatio: imageObj.aspectRatio || (isList ? '1/1' : '16/10'), fit: imageObj.fit || 'cover', hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } })) : null, (badgeSlot || resolvedBadge) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: '0.75rem',
+                            left: '0.75rem',
+                            zIndex: 20,
+                            pointerEvents: 'auto',
+                        }, children: badgeSlot ? (badgeSlot) : ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fp('badge'), "data-preview-style-target": fp('badge'), "data-preview-style-type": "text", style: {
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                padding: '0.25rem 0.625rem',
+                                fontSize: '0.75rem',
+                                fontWeight: 700,
+                                borderRadius: '9999px',
+                                boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
+                                backdropFilter: 'blur(4px)',
+                                ...badgeStyles[badgeVariant],
+                            }, children: resolvedBadge })) }))] })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                    padding: '1.25rem',
+                    gap: '0.875rem',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.35rem' }, children: [resolvedOverline && ((0, jsx_runtime_1.jsx)("p", { style: {
+                                    position: 'relative',
+                                    zIndex: 10,
+                                    fontSize: '0.75rem',
+                                    fontWeight: 600,
+                                    letterSpacing: '0.05em',
+                                    textTransform: 'uppercase',
+                                    color: 'var(--muted-text, #64748b)',
+                                    margin: 0,
+                                }, "data-preview-field-path": fp('overline') || fp('meta'), "data-preview-style-target": fp('overline') || fp('meta'), "data-preview-style-type": "text", children: resolvedOverline })), (0, jsx_runtime_1.jsx)("h3", { style: {
+                                    fontSize: '1.25rem',
+                                    fontWeight: 700,
+                                    lineHeight: 1.3,
+                                    color: 'var(--heading-color, #0f172a)',
+                                    margin: 0,
+                                }, children: href ? ((0, jsx_runtime_1.jsx)("a", { href: href, "data-preview-field-path": fp('title') || fp('name'), "data-preview-style-target": fp('title') || fp('name'), "data-preview-style-type": "text", style: {
+                                        color: 'inherit',
+                                        textDecoration: 'none',
+                                        outline: 'none',
+                                    }, children: resolvedTitle })) : ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fp('title') || fp('name'), "data-preview-style-target": fp('title') || fp('name'), "data-preview-style-type": "text", children: resolvedTitle })) }), resolvedSubtitle && ((0, jsx_runtime_1.jsx)("p", { style: {
+                                    position: 'relative',
+                                    zIndex: 10,
+                                    fontSize: '0.875rem',
+                                    color: 'var(--muted-text, #64748b)',
+                                    margin: 0,
+                                }, "data-preview-field-path": fp('subtitle') || fp('details'), "data-preview-style-target": fp('subtitle') || fp('details'), "data-preview-style-type": "text", children: resolvedSubtitle })), resolvedDescription && ((0, jsx_runtime_1.jsx)("p", { style: {
+                                    position: 'relative',
+                                    zIndex: 10,
+                                    fontSize: '0.825rem',
+                                    lineHeight: 1.5,
+                                    color: 'var(--body-text, #334155)',
+                                    margin: '0.25rem 0 0 0',
+                                    display: '-webkit-box',
+                                    WebkitLineClamp: 2,
+                                    WebkitBoxOrient: 'vertical',
+                                    overflow: 'hidden',
+                                }, "data-preview-field-path": fp('description') || fp('summary'), "data-preview-style-target": fp('description') || fp('summary'), "data-preview-style-type": "text", children: resolvedDescription }))] }), specs.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { "aria-label": "Attributes", style: {
+                            position: 'relative',
+                            zIndex: 10,
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            gap: '0.5rem 1rem',
+                            listStyle: 'none',
+                            padding: 0,
+                            margin: '0.25rem 0',
+                        }, children: specs.map((spec) => {
+                            const specField = spec.fieldPath || (itemPath ? `${itemPath}.specs.${spec.key}` : spec.key);
+                            const dynamicVal = itemPath
+                                ? resolveFieldFromPath(content, specField) ||
+                                    resolveFieldFromPath(content, `${itemPath}.${spec.key}`) ||
+                                    spec.value
+                                : spec.value;
+                            return ((0, jsx_runtime_1.jsxs)("li", { style: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: '0.375rem',
+                                    fontSize: '0.825rem',
+                                    color: 'var(--muted-text, #64748b)',
+                                }, "data-preview-field-path": specField, "data-preview-style-target": specField, "data-preview-style-type": "text", children: [spec.icon && ((0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: typeof spec.icon === 'string' ? ((0, jsx_runtime_1.jsx)(EditableIcon_1.EditableIcon, { name: spec.icon, fieldPath: spec.iconFieldPath || (itemPath ? `${itemPath}.specs.${spec.key}.icon` : undefined), size: 14 })) : (spec.icon) })), !spec.icon && spec.iconName && ((0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: (0, jsx_runtime_1.jsx)(EditableIcon_1.EditableIcon, { name: spec.iconName, fieldPath: spec.iconFieldPath || (itemPath ? `${itemPath}.specs.${spec.key}.icon` : undefined), size: 14 }) })), spec.label && (0, jsx_runtime_1.jsxs)("span", { style: { fontWeight: 500 }, children: [spec.label, ":"] }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 600, color: 'var(--body-text, #1e293b)' }, children: dynamicVal })] }, spec.key));
+                        }) })), (resolvedPrice || cta || actionsSlot) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            position: 'relative',
+                            zIndex: 10,
+                            marginTop: 'auto',
+                            paddingTop: '0.75rem',
+                            borderTop: '1px solid var(--card-border, rgba(226, 232, 240, 0.7))',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: '0.75rem',
+                            flexWrap: 'wrap',
+                        }, children: [resolvedPrice && ((0, jsx_runtime_1.jsxs)("div", { children: [resolvedPriceLabel && ((0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": fp('priceLabel'), "data-preview-style-target": fp('priceLabel'), "data-preview-style-type": "text", style: {
+                                            fontSize: '0.7rem',
+                                            color: 'var(--muted-text, #64748b)',
+                                            margin: 0,
+                                        }, children: resolvedPriceLabel })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'baseline', gap: '0.35rem' }, children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fp('price'), "data-preview-style-target": fp('price'), "data-preview-style-type": "text", style: {
+                                                    fontSize: '1.25rem',
+                                                    fontWeight: 800,
+                                                    color: 'var(--price-color, var(--heading-color, #0f172a))',
+                                                    fontVariantNumeric: 'tabular-nums',
+                                                }, children: resolvedPrice }), resolvedOriginalPrice && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fp('originalPrice'), "data-preview-style-target": fp('originalPrice'), "data-preview-style-type": "text", style: {
+                                                    fontSize: '0.825rem',
+                                                    textDecoration: 'line-through',
+                                                    color: 'var(--muted-text, #94a3b8)',
+                                                }, children: resolvedOriginalPrice })), priceSuffix && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.75rem', color: 'var(--muted-text, #64748b)' }, children: priceSuffix }))] })] })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', marginLeft: 'auto' }, children: [actionsSlot, cta && (cta.href ? ((0, jsx_runtime_1.jsx)("a", { href: cta.href, "data-preview-field-path": cta.fieldPath || fp('ctaText') || fp('ctaLabel'), "data-preview-style-target": cta.fieldPath || fp('ctaText') || fp('ctaLabel'), "data-preview-style-type": "text", style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            padding: '0.45rem 0.875rem',
+                                            fontSize: '0.825rem',
+                                            fontWeight: 600,
+                                            borderRadius: 'var(--button-radius, 0.5rem)',
+                                            backgroundColor: 'var(--brand-accent, #0284c7)',
+                                            color: '#ffffff',
+                                            textDecoration: 'none',
+                                            transition: 'opacity 0.15s ease',
+                                        }, children: cta.label })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: cta.onClick, "data-preview-field-path": cta.fieldPath || fp('ctaText') || fp('ctaLabel'), "data-preview-style-target": cta.fieldPath || fp('ctaText') || fp('ctaLabel'), "data-preview-style-type": "text", style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            padding: '0.45rem 0.875rem',
+                                            fontSize: '0.825rem',
+                                            fontWeight: 600,
+                                            borderRadius: 'var(--button-radius, 0.5rem)',
+                                            backgroundColor: 'var(--brand-accent, #0284c7)',
+                                            color: '#ffffff',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            transition: 'opacity 0.15s ease',
+                                        }, children: cta.label })))] })] })), children] })] }));
+}

package/dist/EditableVehicleCard.d.ts

@@ -0,0 +1,107 @@
+/**
+ * EditableVehicleCard — Deneb UI
+ *
+ * A generic, fully Deneb-editable vehicle / product listing card for
+ * automotive dealership templates.
+ *
+ * Field path convention:
+ *   cards.vehicles.{id}.name          — Car name
+ *   cards.vehicles.{id}.meta          — "Year · Condition"
+ *   cards.vehicles.{id}.details       — Variant / trim level
+ *   cards.vehicles.{id}.badge         — Status label (Available / Reserved / Sold)
+ *   cards.vehicles.{id}.mileage       — Mileage string (e.g. "68,500 km")
+ *   cards.vehicles.{id}.fuel          — Fuel type string
+ *   cards.vehicles.{id}.transmission  — Transmission string
+ *   cards.vehicles.{id}.price         — Display price string (e.g. "LKR 9,450,000")
+ *   photos.vehicles.{id}.image0       — Primary photo (replaced by editor)
+ *
+ * Usage:
+ *   <EditableVehicleCard vehicleId="am-1001" href="/cars/2015-toyota-aqua-..." />
+ *
+ * The component reads field values from the SiteDataProvider context.
+ * It renders nothing if used outside a SiteDataProvider (graceful no-op).
+ */
+import React from 'react';
+export interface VehicleCardFields {
+    name?: string;
+    meta?: string;
+    details?: string;
+    badge?: string;
+    mileage?: string;
+    fuel?: string;
+    transmission?: string;
+    price?: string;
+}
+export interface EditableVehicleCardProps {
+    /** Vehicle ID — must match a key in cards.vehicles and photos.vehicles */
+    vehicleId: string;
+    /** Link href for the card */
+    href?: string;
+    /** CSS class for the outer article element */
+    className?: string;
+    /** Slot for the image element (usually <VehicleImage />) */
+    imageSlot?: React.ReactNode;
+    /** Slot for action buttons (CTA, save, compare) */
+    actionsSlot?: React.ReactNode;
+    /** Layout orientation */
+    layout?: 'grid' | 'list';
+    /** Children rendered inside the card body (fallback / extra content) */
+    children?: React.ReactNode;
+}
+declare function readField(content: unknown, vehicleId: string, field: string, fallback?: string): string;
+export declare function vehicleFieldPath(vehicleId: string, field: string): string;
+/**
+ * EditableVehicleCard renders a skeleton vehicle card driven by site-data.json.
+ * Templates should wrap or extend this component with their own visual design.
+ *
+ * Each text span has data-preview-field-path set so the Deneb Lab can edit
+ * it directly.
+ */
+export declare function EditableVehicleCard({ vehicleId, href, className, imageSlot, actionsSlot, layout, children, }: EditableVehicleCardProps): React.ReactElement | null;
+export interface EditableBrandCardProps {
+    /** Make slug — must match a key in cards.brands (e.g. "toyota", "bmw") */
+    makeSlug: string;
+    /** Link href */
+    href?: string;
+    className?: string;
+    /** Fallback display name when no site-data value is set */
+    fallbackName?: string;
+    /** Fallback count label */
+    fallbackCountLabel?: string;
+    children?: React.ReactNode;
+}
+declare function readBrandField(content: unknown, makeSlug: string, field: string, fallback?: string): string;
+/**
+ * EditableBrandCard — renders a brand filter card with editable name and count.
+ */
+export declare function EditableBrandCard({ makeSlug, href, className, fallbackName, fallbackCountLabel, children, }: EditableBrandCardProps): React.ReactElement | null;
+export interface EditableBodyTypeCardProps {
+    /** Body type slug — must match a key in cards.bodyTypes (e.g. "hatchback", "suv") */
+    typeSlug: string;
+    href?: string;
+    className?: string;
+    fallbackName?: string;
+    fallbackDescription?: string;
+    imageSlot?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare function readBodyTypeField(content: unknown, typeSlug: string, field: string, fallback?: string): string;
+/**
+ * EditableBodyTypeCard — renders a body-type filter card with editable name and description.
+ */
+export declare function EditableBodyTypeCard({ typeSlug, href, className, fallbackName, fallbackDescription, imageSlot, children, }: EditableBodyTypeCardProps): React.ReactElement | null;
+export interface EditableShowroomCardProps {
+    showroomId: string;
+    fallbackName?: string;
+    fallbackAddress?: string;
+    fallbackNotes?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare function readShowroomField(content: unknown, id: string, field: string, fallback?: string): string;
+/**
+ * EditableShowroomCard — renders showroom name, address, and notes
+ * with data-preview-field-path attributes for Deneb Lab editing.
+ */
+export declare function EditableShowroomCard({ showroomId, fallbackName, fallbackAddress, fallbackNotes, className, children, }: EditableShowroomCardProps): React.ReactElement | null;
+export { readField as readVehicleCardField, readBrandField, readBodyTypeField, readShowroomField, };

package/dist/EditableVehicleCard.js

@@ -0,0 +1,117 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vehicleFieldPath = vehicleFieldPath;
+exports.EditableVehicleCard = EditableVehicleCard;
+exports.EditableBrandCard = EditableBrandCard;
+exports.EditableBodyTypeCard = EditableBodyTypeCard;
+exports.EditableShowroomCard = EditableShowroomCard;
+exports.readVehicleCardField = readField;
+exports.readBrandField = readBrandField;
+exports.readBodyTypeField = readBodyTypeField;
+exports.readShowroomField = readShowroomField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+const EditableIcon_1 = require("./EditableIcon");
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function readField(content, vehicleId, field, fallback = '') {
+    const cards = content
+        ?.cards;
+    const vehicles = cards?.vehicles;
+    const entry = vehicles?.[vehicleId];
+    const val = entry?.[field];
+    return typeof val === 'string' && val ? val : fallback;
+}
+function vehicleFieldPath(vehicleId, field) {
+    return `cards.vehicles.${vehicleId}.${field}`;
+}
+// ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * EditableVehicleCard renders a skeleton vehicle card driven by site-data.json.
+ * Templates should wrap or extend this component with their own visual design.
+ *
+ * Each text span has data-preview-field-path set so the Deneb Lab can edit
+ * it directly.
+ */
+function EditableVehicleCard({ vehicleId, href, className, imageSlot, actionsSlot, layout = 'grid', children, }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    if (!siteData)
+        return null;
+    const c = siteData.content;
+    const name = readField(c, vehicleId, 'name');
+    const meta = readField(c, vehicleId, 'meta');
+    const details = readField(c, vehicleId, 'details');
+    const badge = readField(c, vehicleId, 'badge');
+    const mileage = readField(c, vehicleId, 'mileage');
+    const fuel = readField(c, vehicleId, 'fuel');
+    const transmission = readField(c, vehicleId, 'transmission');
+    const price = readField(c, vehicleId, 'price');
+    const fp = (field) => vehicleFieldPath(vehicleId, field);
+    return ((0, jsx_runtime_1.jsxs)("article", { className: className, "data-preview-item-path": `cards.vehicles.${vehicleId}`, children: [imageSlot, badge && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fp('badge'), "data-preview-style-target": fp('badge'), "data-preview-style-type": "text", children: badge })), (0, jsx_runtime_1.jsxs)("div", { children: [meta && ((0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": fp('meta'), "data-preview-style-target": fp('meta'), "data-preview-style-type": "text", children: meta })), href ? ((0, jsx_runtime_1.jsx)("a", { href: href, "data-preview-field-path": fp('name'), "data-preview-style-target": fp('name'), "data-preview-style-type": "text", children: name })) : ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fp('name'), "data-preview-style-target": fp('name'), "data-preview-style-type": "text", children: name })), details && ((0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": fp('details'), "data-preview-style-target": fp('details'), "data-preview-style-type": "text", children: details })), (0, jsx_runtime_1.jsxs)("ul", { children: [mileage && ((0, jsx_runtime_1.jsxs)("li", { "data-preview-field-path": fp('mileage'), "data-preview-style-target": fp('mileage'), "data-preview-style-type": "text", children: [(0, jsx_runtime_1.jsx)(EditableIcon_1.EditableIcon, { name: "gauge", fieldPath: fp('specs.mileage.icon'), size: 14, style: { marginRight: '0.25rem' } }), mileage] })), fuel && ((0, jsx_runtime_1.jsxs)("li", { "data-preview-field-path": fp('fuel'), "data-preview-style-target": fp('fuel'), "data-preview-style-type": "text", children: [(0, jsx_runtime_1.jsx)(EditableIcon_1.EditableIcon, { name: "fuel", fieldPath: fp('specs.fuel.icon'), size: 14, style: { marginRight: '0.25rem' } }), fuel] })), transmission && ((0, jsx_runtime_1.jsxs)("li", { "data-preview-field-path": fp('transmission'), "data-preview-style-target": fp('transmission'), "data-preview-style-type": "text", children: [(0, jsx_runtime_1.jsx)(EditableIcon_1.EditableIcon, { name: "settings", fieldPath: fp('specs.transmission.icon'), size: 14, style: { marginRight: '0.25rem' } }), transmission] }))] }), price && ((0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": fp('price'), "data-preview-style-target": fp('price'), "data-preview-style-type": "text", children: price }))] }), actionsSlot, children] }));
+}
+function readBrandField(content, makeSlug, field, fallback = '') {
+    const cards = content
+        ?.cards;
+    const brands = cards?.brands;
+    const entry = brands?.[makeSlug];
+    const val = entry?.[field];
+    return typeof val === 'string' && val ? val : fallback;
+}
+/**
+ * EditableBrandCard — renders a brand filter card with editable name and count.
+ */
+function EditableBrandCard({ makeSlug, href, className, fallbackName = '', fallbackCountLabel = '', children, }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const c = siteData?.content;
+    const displayName = readBrandField(c, makeSlug, 'displayName', fallbackName);
+    const countLabel = readBrandField(c, makeSlug, 'countLabel', fallbackCountLabel);
+    const bfp = (field) => `cards.brands.${makeSlug}.${field}`;
+    const inner = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": bfp('displayName'), "data-preview-style-target": bfp('displayName'), "data-preview-style-type": "text", children: displayName }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": bfp('countLabel'), "data-preview-style-target": bfp('countLabel'), "data-preview-style-type": "text", children: countLabel }), children] }));
+    if (href) {
+        return (0, jsx_runtime_1.jsx)("a", { href: href, className: className, "data-preview-item-path": `cards.brands.${makeSlug}`, children: inner });
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: className, "data-preview-item-path": `cards.brands.${makeSlug}`, children: inner });
+}
+function readBodyTypeField(content, typeSlug, field, fallback = '') {
+    const cards = content
+        ?.cards;
+    const bodyTypes = cards?.bodyTypes;
+    const entry = bodyTypes?.[typeSlug];
+    const val = entry?.[field];
+    return typeof val === 'string' && val ? val : fallback;
+}
+/**
+ * EditableBodyTypeCard — renders a body-type filter card with editable name and description.
+ */
+function EditableBodyTypeCard({ typeSlug, href, className, fallbackName = '', fallbackDescription = '', imageSlot, children, }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const c = siteData?.content;
+    const displayName = readBodyTypeField(c, typeSlug, 'displayName', fallbackName);
+    const description = readBodyTypeField(c, typeSlug, 'description', fallbackDescription);
+    const tfp = (field) => `cards.bodyTypes.${typeSlug}.${field}`;
+    const inner = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [imageSlot, (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": tfp('displayName'), "data-preview-style-target": tfp('displayName'), "data-preview-style-type": "text", children: displayName }), description && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": tfp('description'), "data-preview-style-target": tfp('description'), "data-preview-style-type": "text", children: description })), children] }));
+    if (href) {
+        return (0, jsx_runtime_1.jsx)("a", { href: href, className: className, "data-preview-item-path": `cards.bodyTypes.${typeSlug}`, children: inner });
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: className, "data-preview-item-path": `cards.bodyTypes.${typeSlug}`, children: inner });
+}
+function readShowroomField(content, id, field, fallback = '') {
+    const showrooms = content
+        ?.showrooms;
+    const entry = showrooms?.[id];
+    const val = entry?.[field];
+    return typeof val === 'string' && val ? val : fallback;
+}
+/**
+ * EditableShowroomCard — renders showroom name, address, and notes
+ * with data-preview-field-path attributes for Deneb Lab editing.
+ */
+function EditableShowroomCard({ showroomId, fallbackName = '', fallbackAddress = '', fallbackNotes = '', className, children, }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const c = siteData?.content;
+    const name = readShowroomField(c, showroomId, 'name', fallbackName);
+    const address = readShowroomField(c, showroomId, 'address', fallbackAddress);
+    const notes = readShowroomField(c, showroomId, 'notes', fallbackNotes);
+    const sfp = (field) => `showrooms.${showroomId}.${field}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, "data-preview-item-path": `showrooms.${showroomId}`, children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": sfp('name'), "data-preview-style-target": sfp('name'), "data-preview-style-type": "text", children: name }), (0, jsx_runtime_1.jsx)("address", { "data-preview-field-path": sfp('address'), "data-preview-style-target": sfp('address'), "data-preview-style-type": "text", children: address }), notes && ((0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": sfp('notes'), "data-preview-style-target": sfp('notes'), "data-preview-style-type": "text", children: notes })), children] }));
+}

package/dist/SiteDataProvider.d.ts

@@ -102,16 +102,7 @@ export declare const DenebDataProvider: typeof SiteDataProvider;
 export declare const useDenebData: typeof useSiteData;
 export declare const DenebDataContext: React.Context<SiteData | typeof UNINITIALIZED_SITE_DATA>;
 export type DenebData = SiteData;
-/**
- * Hook to retrieve products cleanly from SiteData, supporting both
- * top-level content.products and nested content.home.products.
- */
-/**
- * Universal Bidirectional Product Normalizer:
- * Ensures every product object has both canonical and alias keys simultaneously populated
- * with clean numbers and resolved image URLs, so any template component code works flawlessly
- * regardless of whether the developer wrote .title or .name, .cost or .price, .image or .imageUrl.
- */
+export declare function formatWeeklyHoursToString(value: unknown): string;
 export declare function normalizeProductItem(p: unknown): ProductItem;
 /**
  * Universal Service Normalizer

package/dist/SiteDataProvider.js

@@ -18,6 +18,7 @@ exports.contentNumber = contentNumber;
 exports.parseFieldPath = parseFieldPath;
 exports.getFieldStyle = getFieldStyle;
 exports.useFieldStyle = useFieldStyle;
+exports.formatWeeklyHoursToString = formatWeeklyHoursToString;
 exports.normalizeProductItem = normalizeProductItem;
 exports.normalizeServiceItem = normalizeServiceItem;
 exports.useProducts = useProducts;
@@ -356,9 +357,11 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
                         }
                     }
                     if (live.shop.openingHours) {
+                        const hoursStr = formatWeeklyHoursToString(live.shop.openingHours);
+                        const liveText = hoursStr || (typeof live.shop.openingHours === "string" ? live.shop.openingHours : "");
                         nextContact.hours = live.shop.openingHours;
-                        nextContact.openingHours = live.shop.openingHours;
-                        nextCommon.openingHours = live.shop.openingHours;
+                        nextContact.openingHours = liveText;
+                        nextCommon.openingHours = liveText;
                         nextCommon.hours = live.shop.openingHours;
                         nextHome.businessHours = live.shop.openingHours;
                     }
@@ -718,6 +721,78 @@ exports.DenebDataContext = exports.SiteDataContext;
  * with clean numbers and resolved image URLs, so any template component code works flawlessly
  * regardless of whether the developer wrote .title or .name, .cost or .price, .image or .imageUrl.
  */
+function formatTime12(timeStr) {
+    if (!timeStr)
+        return "";
+    const clean = timeStr.trim();
+    if (/am|pm/i.test(clean))
+        return clean;
+    const [hourStr, minStr = "00"] = clean.split(":");
+    const hour = parseInt(hourStr, 10);
+    if (isNaN(hour))
+        return clean;
+    const ampm = hour >= 12 ? "PM" : "AM";
+    const formattedHour = hour % 12 === 0 ? 12 : hour % 12;
+    return `${formattedHour}:${minStr.padStart(2, "0")} ${ampm}`;
+}
+function formatWeeklyHoursToString(value) {
+    if (typeof value === "string")
+        return value.trim();
+    if (!value || typeof value !== "object" || Array.isArray(value))
+        return "";
+    const days = [
+        ["monday", "Mon"],
+        ["tuesday", "Tue"],
+        ["wednesday", "Wed"],
+        ["thursday", "Thu"],
+        ["friday", "Fri"],
+        ["saturday", "Sat"],
+        ["sunday", "Sun"],
+    ];
+    const entries = [];
+    const rec = value;
+    for (const [key, label] of days) {
+        const day = rec[key];
+        if (!day)
+            continue;
+        if (typeof day === "string") {
+            const trimmed = day.trim();
+            if (trimmed)
+                entries.push({ label, hours: trimmed });
+            continue;
+        }
+        if (day.closed === true) {
+            entries.push({ label, hours: "Closed" });
+            continue;
+        }
+        const open = typeof day.open === "string" ? formatTime12(day.open) : "";
+        const close = typeof day.close === "string" ? formatTime12(day.close) : "";
+        if (open && close) {
+            entries.push({ label, hours: `${open} – ${close}` });
+        }
+        else if (open) {
+            entries.push({ label, hours: `From ${open}` });
+        }
+    }
+    if (entries.length === 0)
+        return "";
+    const groups = [];
+    for (const entry of entries) {
+        const prev = groups[groups.length - 1];
+        if (prev && prev.hours === entry.hours) {
+            prev.last = entry.label;
+        }
+        else {
+            groups.push({ first: entry.label, last: entry.label, hours: entry.hours });
+        }
+    }
+    const activeGroups = groups.filter((g) => g.hours && g.hours !== "Closed");
+    if (activeGroups.length === 0)
+        return "Closed";
+    return activeGroups
+        .map((g) => (g.first === g.last ? `${g.first}: ${g.hours}` : `${g.first} – ${g.last}: ${g.hours}`))
+        .join(", ");
+}
 function normalizeProductItem(p) {
     if (!isRecord(p))
         return p;
@@ -791,7 +866,9 @@ function normalizeProductItem(p) {
         productName: (titleCandidate ?? nameCandidate),
         itemTitle: (titleCandidate ?? nameCandidate),
         minPrice: explicitMin !== undefined ? explicitMin : undefined,
+        priceMin: (explicitMin ?? p.priceMin) !== undefined ? (explicitMin ?? p.priceMin) : undefined,
         maxPrice: explicitMax !== undefined ? explicitMax : undefined,
+        priceMax: (explicitMax ?? p.priceMax) !== undefined ? (explicitMax ?? p.priceMax) : undefined,
         priceRange: explicitRange !== undefined ? explicitRange : undefined,
         isPriceRange: isRange,
         ...(numPrice !== undefined

package/dist/index.d.ts

@@ -5,12 +5,15 @@
 export * from './PreviewField';
 export * from './EditableText';
 export * from './EditableImage';
+export * from './EditableIcon';
 export * from './EditableMap';
 export * from './EditableList';
 export * from './EditableBox';
 export * from './EditableGrid';
 export * from './EditableSection';
 export * from './EditableProductCard';
+export * from './EditableVehicleCard';
+export * from './EditableUniversalCard';
 export * from './EditableProductGrid';
 export * from './EditableProductShowcase';
 export * from './EditableProductDetail';
@@ -72,6 +75,8 @@ export { EditableSection as Section } from './EditableSection';
 export { EditableBox as Box } from './EditableBox';
 export { EditableList as List } from './EditableList';
 export { EditableProductCard as ProductCard } from './EditableProductCard';
+export { EditableVehicleCard as VehicleCard } from './EditableVehicleCard';
+export { EditableUniversalCard as UniversalCard, EditableUniversalCard as ListingCard, EditableUniversalCard as EntityCard } from './EditableUniversalCard';
 export { EditableProductGrid as ProductGrid } from './EditableProductGrid';
 export { EditableProductShowcase as ProductShowcase } from './EditableProductShowcase';
 export { EditableProductDetail as ProductDetail } from './EditableProductDetail';

package/dist/index.js

@@ -18,17 +18,20 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FAQ = exports.Accordion = exports.Testimonials = exports.TestimonialSection = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.GoogleFeedback = exports.CustomerReviews = exports.ProductDetail = exports.ProductShowcase = exports.ProductGrid = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Map = 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.generateThemeVariables = exports.mergeVisualCustomizationIntoTheme = exports.customizationToTheme = exports.parseVisualCustomization = exports.normalizeHexColor = exports.toHexColor = exports.getAutoContrastTextColor = exports.isDarkColor = exports.FONT_PAIRINGS = exports.GLOBAL_FONT_OPTIONS = exports.THEME_PALETTES = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.AdditionalPagesNav = exports.PlatformAdditionalPages = exports.TestimonialCarousel = exports.BookingModal = exports.BeforeAfterSlider = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = void 0;
+exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.GoogleFeedback = exports.CustomerReviews = exports.ProductDetail = exports.ProductShowcase = exports.ProductGrid = exports.EntityCard = exports.ListingCard = exports.UniversalCard = exports.VehicleCard = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Map = 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.generateThemeVariables = exports.mergeVisualCustomizationIntoTheme = exports.customizationToTheme = exports.parseVisualCustomization = exports.normalizeHexColor = exports.toHexColor = exports.getAutoContrastTextColor = exports.isDarkColor = exports.FONT_PAIRINGS = exports.GLOBAL_FONT_OPTIONS = exports.THEME_PALETTES = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.AdditionalPagesNav = exports.PlatformAdditionalPages = exports.TestimonialCarousel = exports.BookingModal = exports.BeforeAfterSlider = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = exports.FAQ = exports.Accordion = exports.Testimonials = exports.TestimonialSection = void 0;
 __exportStar(require("./PreviewField"), exports);
 __exportStar(require("./EditableText"), exports);
 __exportStar(require("./EditableImage"), exports);
+__exportStar(require("./EditableIcon"), exports);
 __exportStar(require("./EditableMap"), exports);
 __exportStar(require("./EditableList"), exports);
 __exportStar(require("./EditableBox"), exports);
 __exportStar(require("./EditableGrid"), exports);
 __exportStar(require("./EditableSection"), exports);
 __exportStar(require("./EditableProductCard"), exports);
+__exportStar(require("./EditableVehicleCard"), exports);
+__exportStar(require("./EditableUniversalCard"), exports);
 __exportStar(require("./EditableProductGrid"), exports);
 __exportStar(require("./EditableProductShowcase"), exports);
 __exportStar(require("./EditableProductDetail"), exports);
@@ -130,6 +133,12 @@ var EditableList_1 = require("./EditableList");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return EditableList_1.EditableList; } });
 var EditableProductCard_1 = require("./EditableProductCard");
 Object.defineProperty(exports, "ProductCard", { enumerable: true, get: function () { return EditableProductCard_1.EditableProductCard; } });
+var EditableVehicleCard_1 = require("./EditableVehicleCard");
+Object.defineProperty(exports, "VehicleCard", { enumerable: true, get: function () { return EditableVehicleCard_1.EditableVehicleCard; } });
+var EditableUniversalCard_1 = require("./EditableUniversalCard");
+Object.defineProperty(exports, "UniversalCard", { enumerable: true, get: function () { return EditableUniversalCard_1.EditableUniversalCard; } });
+Object.defineProperty(exports, "ListingCard", { enumerable: true, get: function () { return EditableUniversalCard_1.EditableUniversalCard; } });
+Object.defineProperty(exports, "EntityCard", { enumerable: true, get: function () { return EditableUniversalCard_1.EditableUniversalCard; } });
 var EditableProductGrid_1 = require("./EditableProductGrid");
 Object.defineProperty(exports, "ProductGrid", { enumerable: true, get: function () { return EditableProductGrid_1.EditableProductGrid; } });
 var EditableProductShowcase_1 = require("./EditableProductShowcase");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.111",
+  "version": "2.0.113",
   "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",
@@ -50,7 +50,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@deneb-ui/core": "^2.0.111"
+    "@deneb-ui/core": "^2.0.113"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",