@walkeros/explorer 0.3.1 → 1.0.0

package/dist/components/demos/PromotionPlayground.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Grid } from '../atoms/grid';
+import { Preview } from '../molecules/preview';
+import { BrowserBox } from '../organisms/browser-box';
+import { CodeBox } from '../molecules/code-box';
+import { CollectorBox } from '../organisms/collector-box';
+import { createGtagDestination, } from '../../helpers/destinations';
+const defaultHtml = `<div
+  data-elb="product"
+  data-elbaction="load:view"
+  data-elbcontext="stage:inspire"
+  class="product-card"
+>
+  <figure class="product-figure">
+    <div class="product-badge-container">
+      <div data-elb-product="badge:delicious" class="product-badge">delicious</div>
+    </div>
+  </figure>
+  <div class="product-body">
+    <h3 data-elb-product="name:#innerText" class="product-title">
+      Everyday Ruck Snack
+    </h3>
+    <div class="form-control">
+      <label class="form-label">Taste</label>
+      <select
+        data-elb-product="taste:#value"
+        class="form-select"
+      >
+        <option value="sweet">Sweet</option>
+        <option value="spicy">Spicy</option>
+      </select>
+    </div>
+    <p data-elb-product="price:2.50" class="product-price">
+      € 2.50 <span data-elb-product="old_price:3.14" class="product-old-price">€ 3.14</span>
+    </p>
+    <div data-elbcontext="stage:hooked" class="product-actions">
+      <button
+        data-elbaction="click:save"
+        class="btn btn-secondary"
+      >
+        Maybe later
+      </button>
+      <button
+        data-elbaction="click:add"
+        class="btn btn-primary"
+      >
+        Add to Cart
+      </button>
+    </div>
+  </div>
+</div>`;
+const defaultCss = `* {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.product-card {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+.product-figure {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 160px;
+  background:
+    linear-gradient(135deg, rgba(243, 244, 246, 0.9) 0%, rgba(229, 231, 235, 0.9) 100%),
+    repeating-linear-gradient(
+      45deg,
+      #f9fafb,
+      #f9fafb 10px,
+      #f3f4f6 10px,
+      #f3f4f6 20px
+    );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.product-figure::before {
+  content: '🍟';
+  font-size: 8rem;
+  opacity: 0.8;
+}
+
+.product-badge-container {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.product-badge {
+  background: #01b5e2;
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.product-body {
+  padding: 1.5rem;
+}
+
+.product-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin: 0 0 1rem 0;
+  color: #111827;
+}
+
+.form-control {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  margin-bottom: 0.5rem;
+}
+
+.form-select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  color: #111827;
+  background: white;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.form-select:hover {
+  border-color: #9ca3af;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: #01b5e2;
+  box-shadow: 0 0 0 3px rgba(1, 181, 226, 0.1);
+}
+
+.product-price {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #111827;
+  margin: 0 0 1rem 0;
+}
+
+.product-old-price {
+  font-size: 1rem;
+  font-weight: 400;
+  color: #9ca3af;
+  text-decoration: line-through;
+  margin-left: 0.5rem;
+}
+
+.product-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.btn {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.btn:active {
+  transform: translateY(0);
+}
+
+.btn-primary {
+  background: #01b5e2;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #0195b8;
+}
+
+.btn-secondary {
+  background: #ffffff;
+  color: #01b5e2;
+  border: 1px solid #01b5e2;
+}
+
+.btn-secondary:hover {
+  background: #01b5e2;
+  color: #ffffff;
+}`;
+const defaultMapping = `{
+  "product": {
+    "view": {
+      "name": "view_item",
+      "data": {
+        "map": {
+          "event": "name",
+          "price": "data.price",
+          "stage": "context.stage.0"
+        }
+      }
+    },
+    "add": {
+      "name": "add_to_cart",
+      "data": {
+        "map": {
+          "event": "event",
+          "price": "data.price",
+          "user": {
+            "consent": { "marketing": true },
+            "key": "user.session"
+          },
+          "isSale": {
+            "fn": "(e) => !!e.data.old_price"
+          }
+        }
+      }
+    },
+    "save": {
+      "data": {
+        "map": {
+          "event": "event",
+          "data": "data"
+        }
+      }
+    }
+  }
+}`;
+/**
+ * PromotionPlayground - Full walkerOS demonstration with live code editing
+ *
+ * Shows the complete chain:
+ * 1. Code Editor - Edit HTML/CSS/JS with walkerOS data attributes
+ * 2. Preview - Live rendered output that captures real events
+ * 3. Events - Real events captured from preview interactions
+ * 4. Mapping - Apply transformations and see destination output
+ * 5. Result - Final destination function calls
+ */
+export function PromotionPlayground({ initialHtml = defaultHtml, initialCss = defaultCss, initialJs = '', initialMapping = defaultMapping, labelCode = 'Code', labelPreview = 'Preview', labelEvents = 'Events', labelMapping = 'Mapping', labelResult = 'Result', destination = createGtagDestination(), }) {
+    const [html, setHtml] = useState(initialHtml);
+    const [css, setCss] = useState(initialCss);
+    const [js, setJs] = useState(initialJs);
+    const [mappingInput, setMappingInput] = useState(initialMapping);
+    const [capturedEvent, setCapturedEvent] = useState(null);
+    const [eventInput, setEventInput] = useState('// Click elements in the preview to see events');
+    // Handle events from preview
+    const handleEvent = useCallback((event) => {
+        setCapturedEvent(event);
+        setEventInput(JSON.stringify(event, null, 2));
+    }, []);
+    const eventDisplay = eventInput;
+    return (_jsxs(Grid, { columns: 5, rowHeight: 600, children: [_jsx(BrowserBox, { label: labelCode, html: html, css: css, js: js, onHtmlChange: setHtml, onCssChange: setCss, onJsChange: setJs, showPreview: false, initialTab: "html", lineNumbers: false, wordWrap: true }), _jsx(Preview, { label: labelPreview, html: html, css: css, onEvent: handleEvent }), _jsx(CodeBox, { label: labelEvents, code: eventDisplay, onChange: setEventInput, language: "json", wordWrap: true }), _jsx(CodeBox, { label: labelMapping, code: mappingInput, onChange: setMappingInput, language: "json", wordWrap: true }), _jsx(CollectorBox, { event: eventInput, mapping: mappingInput, destination: destination, label: labelResult, wordWrap: true })] }));
+}
+//# sourceMappingURL=PromotionPlayground.js.map

package/dist/components/demos/PromotionPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotionPlayground.js","sourceRoot":"","sources":["../../../src/components/demos/PromotionPlayground.tsx"],"names":[],"mappings":"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"}

package/dist/components/demos/PromotionPlayground.stories.d.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PromotionPlayground } from './PromotionPlayground';
+/**
+ * PromotionPlayground - Complete walkerOS demonstration
+ *
+ * Full-featured playground showing the complete walkerOS flow:
+ * HTML → Preview → Events → Mapping → Destination output
+ *
+ * Features:
+ * - Live HTML/CSS/JS editor with real-time preview
+ * - Event capture from data attributes
+ * - Interactive mapping configuration
+ * - Destination output visualization
+ *
+ * Perfect for demonstrating the entire walkerOS ecosystem in action.
+ */
+declare const meta: Meta<typeof PromotionPlayground>;
+export default meta;
+type Story = StoryObj<typeof PromotionPlayground>;
+/**
+ * Default promotion playground with product card example
+ *
+ * Includes a fully styled product card with walkerOS data attributes,
+ * demonstrating event tracking, context switching, and destination integration.
+ */
+export declare const Default: Story;
+//# sourceMappingURL=PromotionPlayground.stories.d.ts.map

package/dist/components/demos/PromotionPlayground.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotionPlayground.stories.d.ts","sourceRoot":"","sources":["../../../src/components/demos/PromotionPlayground.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAO1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/demos/PromotionPlayground.stories.js

@@ -0,0 +1,32 @@
+import { PromotionPlayground } from './PromotionPlayground';
+/**
+ * PromotionPlayground - Complete walkerOS demonstration
+ *
+ * Full-featured playground showing the complete walkerOS flow:
+ * HTML → Preview → Events → Mapping → Destination output
+ *
+ * Features:
+ * - Live HTML/CSS/JS editor with real-time preview
+ * - Event capture from data attributes
+ * - Interactive mapping configuration
+ * - Destination output visualization
+ *
+ * Perfect for demonstrating the entire walkerOS ecosystem in action.
+ */
+const meta = {
+    component: PromotionPlayground,
+    title: 'Demos/PromotionPlayground',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+/**
+ * Default promotion playground with product card example
+ *
+ * Includes a fully styled product card with walkerOS data attributes,
+ * demonstrating event tracking, context switching, and destination integration.
+ */
+export const Default = {};
+//# sourceMappingURL=PromotionPlayground.stories.js.map

package/dist/components/demos/PromotionPlayground.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotionPlayground.stories.js","sourceRoot":"","sources":["../../../src/components/demos/PromotionPlayground.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;;;;;;;;;;;GAaG;AACH,MAAM,IAAI,GAAqC;IAC7C,SAAS,EAAE,mBAAmB;IAC9B,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}

package/dist/components/forms/field-registry.d.ts

@@ -0,0 +1,42 @@
+import type { RegistryFieldsType } from '@rjsf/utils';
+/**
+ * Field Registry for RJSF Mapping Forms
+ *
+ * Central registry of all custom fields used in react-jsonschema-form.
+ * Fields are used for complex types (like objects) while widgets are for primitives.
+ * Fields are referenced in uiSchema via 'ui:field' property.
+ *
+ * @example
+ * // In uiSchema:
+ * const uiSchema = {
+ *   consent: {
+ *     'ui:field': 'mappingConsent'
+ *   }
+ * }
+ *
+ * @example
+ * // In Form component:
+ * <Form
+ *   schema={schema}
+ *   fields={mappingFields}
+ *   ...
+ * />
+ */
+/**
+ * Mapping Fields Registry
+ *
+ * Available fields:
+ * - mappingConsent: Collapsible consent requirements editor for object types
+ * - mappingCondition: Checkbox-collapsible condition function editor for string types
+ * - mappingFn: Checkbox-collapsible custom transformation function editor for string types
+ * - mappingKey: Simple text input for event path extraction (e.g., 'data.id', 'user.email')
+ * - mappingValidate: Checkbox-collapsible validate function editor for string types
+ * - mappingData: Toggle-collapsible data transformation editor for object types
+ * - mappingSettings: Destination-specific settings editor (schema-aware or JSON fallback)
+ * - objectExplorer: Generic object key-value explorer with add/rename/delete/navigate
+ * - mappingMap: Key-value pair editor for object transformation mapping
+ * - mappingSet: Array of values editor for static value arrays
+ * - mappingLoop: Array processing with transformation editor for loop tuples
+ */
+export declare const mappingFields: RegistryFieldsType;
+//# sourceMappingURL=field-registry.d.ts.map

package/dist/components/forms/field-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-registry.d.ts","sourceRoot":"","sources":["../../../src/components/forms/field-registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAatD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,aAAa,EAAE,kBAY3B,CAAC"}

package/dist/components/forms/field-registry.js

@@ -0,0 +1,64 @@
+import { MappingConsentField } from '../atoms/mapping-consent-field';
+import { MappingConditionField } from '../atoms/mapping-condition-field';
+import { MappingFnField } from '../atoms/mapping-fn-field';
+import { MappingKeyField } from '../atoms/mapping-key-field';
+import { MappingValidateField } from '../atoms/mapping-validate-field';
+import { MappingDataField } from '../atoms/mapping-data-field';
+import { MappingSettingsField } from '../atoms/mapping-settings-field';
+import { MappingObjectExplorerField } from '../atoms/mapping-object-explorer-field';
+import { MappingMapField } from '../molecules/mapping-map-field';
+import { MappingSetField } from '../molecules/mapping-set-field';
+import { MappingLoopField } from '../molecules/mapping-loop-field';
+/**
+ * Field Registry for RJSF Mapping Forms
+ *
+ * Central registry of all custom fields used in react-jsonschema-form.
+ * Fields are used for complex types (like objects) while widgets are for primitives.
+ * Fields are referenced in uiSchema via 'ui:field' property.
+ *
+ * @example
+ * // In uiSchema:
+ * const uiSchema = {
+ *   consent: {
+ *     'ui:field': 'mappingConsent'
+ *   }
+ * }
+ *
+ * @example
+ * // In Form component:
+ * <Form
+ *   schema={schema}
+ *   fields={mappingFields}
+ *   ...
+ * />
+ */
+/**
+ * Mapping Fields Registry
+ *
+ * Available fields:
+ * - mappingConsent: Collapsible consent requirements editor for object types
+ * - mappingCondition: Checkbox-collapsible condition function editor for string types
+ * - mappingFn: Checkbox-collapsible custom transformation function editor for string types
+ * - mappingKey: Simple text input for event path extraction (e.g., 'data.id', 'user.email')
+ * - mappingValidate: Checkbox-collapsible validate function editor for string types
+ * - mappingData: Toggle-collapsible data transformation editor for object types
+ * - mappingSettings: Destination-specific settings editor (schema-aware or JSON fallback)
+ * - objectExplorer: Generic object key-value explorer with add/rename/delete/navigate
+ * - mappingMap: Key-value pair editor for object transformation mapping
+ * - mappingSet: Array of values editor for static value arrays
+ * - mappingLoop: Array processing with transformation editor for loop tuples
+ */
+export const mappingFields = {
+    mappingConsent: MappingConsentField,
+    mappingCondition: MappingConditionField,
+    mappingFn: MappingFnField,
+    mappingKey: MappingKeyField,
+    mappingValidate: MappingValidateField,
+    mappingData: MappingDataField,
+    mappingSettings: MappingSettingsField,
+    objectExplorer: MappingObjectExplorerField,
+    mappingMap: MappingMapField,
+    mappingSet: MappingSetField,
+    mappingLoop: MappingLoopField,
+};
+//# sourceMappingURL=field-registry.js.map

package/dist/components/forms/field-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-registry.js","sourceRoot":"","sources":["../../../src/components/forms/field-registry.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,wCAAwC,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,aAAa,GAAuB;IAC/C,cAAc,EAAE,mBAAmB;IACnC,gBAAgB,EAAE,qBAAqB;IACvC,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE,eAAe;IAC3B,eAAe,EAAE,oBAAoB;IACrC,WAAW,EAAE,gBAAgB;IAC7B,eAAe,EAAE,oBAAoB;IACrC,cAAc,EAAE,0BAA0B;IAC1C,UAAU,EAAE,eAAe;IAC3B,UAAU,EAAE,eAAe;IAC3B,WAAW,EAAE,gBAAgB;CAC9B,CAAC"}

package/dist/components/forms/mapping-form-wrapper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { RJSFSchema, UiSchema, FormContextType } from '@rjsf/utils';
+export interface MappingFormWrapperProps {
+    schema: RJSFSchema;
+    uiSchema?: UiSchema;
+    formData?: unknown;
+    onChange?: (data: unknown) => void;
+    onSubmit?: (data: unknown) => void;
+    children?: React.ReactNode;
+    nested?: boolean;
+    formContext?: FormContextType;
+}
+export declare function MappingFormWrapper({ schema, uiSchema, formData, onChange, onSubmit, children, nested, formContext, }: MappingFormWrapperProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=mapping-form-wrapper.d.ts.map

package/dist/components/forms/mapping-form-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapping-form-wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/forms/mapping-form-wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EACV,UAAU,EACV,QAAQ,EACR,eAAe,EAEhB,MAAM,aAAa,CAAC;AAQrB,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAyCD,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAc,EACd,WAAW,GACZ,EAAE,uBAAuB,2CA8DzB"}

package/dist/components/forms/mapping-form-wrapper.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import Form from '@rjsf/core';
+import { withTheme } from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
+import { mappingWidgets } from './widget-registry';
+import { mappingFields } from './field-registry';
+import { MappingGrid } from '../atoms/mapping-grid';
+import { FieldHeader } from '../atoms/field-header';
+/**
+ * MappingFormWrapper - RJSF Form wrapper with theme integration
+ *
+ * Wraps react-jsonschema-form with custom theming, templates, and widgets.
+ * Integrates with the explorer's CSS variable system and provides custom
+ * layouts using MappingGrid.
+ *
+ * Features:
+ * - Custom FieldTemplate with proper label/input styling
+ * - Custom ObjectFieldTemplate using MappingGrid for layout
+ * - Theme integration via CSS variables
+ * - Custom widget registry
+ * - Form context support
+ *
+ * @example
+ * const schema = {
+ *   type: 'object',
+ *   properties: {
+ *     name: { type: 'string', title: 'Name' },
+ *     priority: { type: 'number', title: 'Priority' }
+ *   }
+ * };
+ *
+ * <MappingFormWrapper
+ *   schema={schema}
+ *   formData={data}
+ *   onChange={setData}
+ * />
+ */
+// Create themed version with our custom templates
+const ThemedForm = withTheme({
+    widgets: mappingWidgets,
+    fields: mappingFields,
+    templates: {
+        FieldTemplate: CustomFieldTemplate,
+        ObjectFieldTemplate: CustomObjectFieldTemplate,
+    },
+});
+export function MappingFormWrapper({ schema, uiSchema, formData, onChange, onSubmit, children, nested = false, formContext, }) {
+    // Memoize callbacks to prevent child component re-renders and infinite loops
+    const handleChange = useCallback((event) => {
+        onChange?.(event.formData);
+    }, [onChange]);
+    const handleSubmit = useCallback((event) => {
+        onSubmit?.(event.formData);
+    }, [onSubmit]);
+    // For nested usage, render fields directly without <form> wrapper
+    if (nested) {
+        return (_jsx("div", { className: "elb-rjsf-nested-wrapper", children: _jsx(ThemedForm, { schema: schema, uiSchema: uiSchema, formData: formData, validator: validator, onChange: handleChange, formContext: formContext, tagName: "div", children: _jsx("div", { style: { display: 'none' } }) }) }));
+    }
+    // For top-level usage, render full Form component
+    return (_jsx("div", { className: "elb-rjsf-form-wrapper", children: _jsx(Form, { schema: schema, uiSchema: uiSchema, formData: formData, validator: validator, widgets: mappingWidgets, fields: mappingFields, onChange: handleChange, onSubmit: handleSubmit, formContext: formContext, templates: {
+                FieldTemplate: CustomFieldTemplate,
+                ObjectFieldTemplate: CustomObjectFieldTemplate,
+            }, showErrorList: false, liveOmit: false, omitExtraData: false, children: _jsx("div", { style: { display: 'none' } }) }) }));
+}
+/**
+ * Custom FieldTemplate
+ *
+ * Provides consistent styling for all form fields:
+ * - Label with proper typography
+ * - Field wrapper with spacing
+ * - Error display
+ * - Help text support
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function CustomFieldTemplate(props) {
+    const { id, classNames, label, help, required, description, errors, children, hidden, schema, uiSchema, } = props;
+    if (hidden) {
+        return _jsx("div", { className: "elb-rjsf-field-hidden", children: children });
+    }
+    // Hide label and description if:
+    // 1. Object fields (like consent) - widget handles them
+    // 2. Custom fields (ui:field) - field component handles them
+    // 3. mappingValue widget - renders its own header
+    const hasCustomField = uiSchema?.['ui:field'];
+    const isValueWidget = uiSchema?.['ui:widget'] === 'mappingValue';
+    const showLabelAndDescription = schema.type !== 'object' && !hasCustomField && !isValueWidget;
+    return (_jsxs("div", { className: `elb-rjsf-field ${classNames || ''}`, id: id, children: [showLabelAndDescription && (_jsx(FieldHeader, { title: label, description: description, required: required })), children, errors, help && _jsx("div", { className: "elb-rjsf-help", children: help })] }));
+}
+/**
+ * Custom ObjectFieldTemplate
+ *
+ * Uses MappingGrid for laying out object properties in a responsive grid.
+ * Properties are arranged in a 2-column layout on larger screens,
+ * single column on mobile.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function CustomObjectFieldTemplate(props) {
+    const { title, description, properties, uiSchema } = props;
+    // Get layout preference from uiSchema
+    const layout = uiSchema?.['ui:layout'] || 'cols-2';
+    const responsive = uiSchema?.['ui:responsive'] !== false;
+    return (_jsxs("fieldset", { className: "elb-rjsf-object", children: [title && _jsx("legend", { className: "elb-rjsf-object-title", children: title }), description && (_jsx("div", { className: "elb-rjsf-object-description", children: description })), _jsx(MappingGrid, { layout: layout, responsive: responsive, gap: 16, children: properties.map((element) => (_jsx("div", { className: "elb-rjsf-object-property", children: element.content }, element.name))) })] }));
+}
+//# sourceMappingURL=mapping-form-wrapper.js.map

package/dist/components/forms/mapping-form-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapping-form-wrapper.js","sourceRoot":"","sources":["../../../src/components/forms/mapping-form-wrapper.tsx"],"names":[],"mappings":"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"}

package/dist/components/forms/widget-registry.d.ts

@@ -0,0 +1,42 @@
+import type { RegistryWidgetsType } from '@rjsf/utils';
+/**
+ * Widget Registry for RJSF Mapping Forms
+ *
+ * Central registry of all custom mapping widgets used in react-jsonschema-form.
+ * Widgets are registered here and referenced in uiSchema via 'ui:widget' property.
+ *
+ * @example
+ * // In uiSchema:
+ * const uiSchema = {
+ *   name: {
+ *     'ui:widget': 'mappingString'
+ *   }
+ * }
+ *
+ * @example
+ * // In Form component:
+ * <Form
+ *   schema={schema}
+ *   widgets={mappingWidgets}
+ *   ...
+ * />
+ *
+ * To add a new widget:
+ * 1. Create the widget component in src/components/atoms/mapping-*.tsx
+ * 2. Import it here
+ * 3. Add to the mappingWidgets object with a descriptive key
+ * 4. Reference it in uiSchema using the key
+ */
+/**
+ * Mapping Widgets Registry
+ *
+ * Available widgets:
+ * - mappingString: Text input for string values
+ * - mappingNumber: Number input with min/max validation
+ * - mappingBoolean: Checkbox for boolean values
+ * - mappingConsent: Collapsible consent requirements editor
+ * - mappingValue: Multi-type static value editor (string/number/boolean/object)
+ * - objectExplorer: Generic object key-value explorer with add/rename/delete/navigate
+ */
+export declare const mappingWidgets: RegistryWidgetsType;
+//# sourceMappingURL=widget-registry.d.ts.map

package/dist/components/forms/widget-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-registry.d.ts","sourceRoot":"","sources":["../../../src/components/forms/widget-registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQvD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,EAAE,mBAO5B,CAAC"}