@openg2p/registry-widgets 0.2.1 → 1.0.1

package/README.md

@@ -16,9 +16,14 @@ The Registry UI Widget Library is a layered, extensible system that enables you
 - ✅ **Data Sources** (static, API, schema reference)
 - ✅ **Formatting** (dates, currency, phone numbers, numbers)
 - ✅ **Widget Registry** system for extensible plugin architecture
-- ✅ **19+ Pre-built Widgets** ready to use
+- ✅ **20 Pre-built Widgets** ready to use (including HeaderSection)
 - ✅ **Internationalization** support via i18next
 - ✅ **Tailwind CSS** ready (unstyled base, you provide styles)
+- ✅ **Multi-mode Section Rendering** (RegistryView, CRView, IntakeForm)
+- ✅ **Geo Hierarchy Cascading Dropdowns** for location-based fields
+- ✅ **Section Builder** with visual and JSON editor for UI schemas
+- ✅ **Form Handle API** for host-driven validation and submission
+- ✅ **Dirty Tracking** with unsaved changes detection per section
 
 ## Installation
 
@@ -77,7 +82,7 @@ The library follows a layered architecture that separates concerns and enables e
               ↓
 ┌─────────────────────────────────────────┐
 │     Widget Components Layer              │
-│  (19+ Pre-built Widgets)                 │
+│  (20 Pre-built Widgets)                  │
 └─────────────────────────────────────────┘
               ↓
 ┌─────────────────────────────────────────┐
@@ -102,7 +107,7 @@ The library follows a layered architecture that separates concerns and enables e
 
 **Widget Registry Layer** - A plugin system that maintains a catalog of available widgets. When a widget is requested by name, the registry looks it up and returns the corresponding React component. This enables dynamic widget loading and easy extensibility - new widgets can be registered without modifying core library code.
 
-**Widget Components Layer** - The actual React components that render UI elements (text inputs, selects, tables, etc.). These are the 19+ pre-built widgets that come with the library. Each widget is a React component that receives configuration and renders the appropriate UI. Custom widgets can be added by registering them in the registry.
+**Widget Components Layer** - The actual React components that render UI elements (text inputs, selects, tables, etc.). These are the 20 pre-built widgets that come with the library. Each widget is a React component that receives configuration and renders the appropriate UI. Custom widgets can be added by registering them in the registry.
 
 **Core Hooks Layer** - React hooks that provide all the business logic for widgets. The `useBaseWidget` hook handles state management, validation, conditional logic, data source loading, and formatting. The `useWidgetTranslation` hook provides internationalization support. Widget components use these hooks to get values, errors, visibility states, and change handlers without directly interacting with Redux or utilities.
 
@@ -224,25 +229,92 @@ Support for multiple validation strategies:
 
 ## Available Widgets
 
-The library includes 19+ pre-built widgets:
+The library includes 20 pre-built widgets:
 
 - **Input Widgets**: TextInput, TextArea, NumberInput, CurrencyInput, DateInput, DateTimeInput, PhoneInput, FileInput
 - **Selection Widgets**: Select, Radio, Checkbox, Boolean
 - **Layout Widgets**: Array, IterableAccordion
 - **Display Widgets**: Display, Profile
 - **Table Widgets**: Table, SimpleTable
+- **Section Widgets**: HeaderSection
 
-> 📚 **Widget documentation coming soon!** Detailed guides for each widget will be available in our tutorial pages.
+### HeaderSection Widget
+
+A full-width header card designed for registry record views. Displays a profile image, record name, functional ID, status badge, and audit metadata (created by / approved by) in a responsive two-column layout. Supports editable status and status-reason fields with data source-driven dropdowns, customisable label overrides via i18n, and configurable status-colour mapping.
+
+```json
+{
+  "widget": "header-section",
+  "widget-type": "group",
+  "widget-id": "registry-header",
+  "widget-data-path": {
+    "image": "record_image_storage_id",
+    "name": "record_name",
+    "functionalId": "functional_record_id",
+    "status": "record_status"
+  }
+}
+```
+
+## Section Modes
+
+`SectionsContainer` supports three display modes via the `mode` prop:
+
+### RegistryView (default)
+
+Standard registry display. Sections render in a CSS Grid layout with an inline **Edit Details** button. Only one section can be in edit mode at a time; editing a section opens it as a portal-based overlay with save/cancel controls.
+
+### CRView (Change Request View)
+
+Read-only comparison view for change requests. Sections display **Created by** / **Approved by** metadata and support `changeRequestType` labels (`"new"` / `"old"`) for side-by-side comparison.
+
+### IntakeForm
+
+Accordion-based registration form. Sections expand and collapse, with **Prev** / **Next** navigation buttons. Supports `isDraft` mode (editable vs read-only), per-section validation on save, and status badges (**Saved** / **Modified and not saved**).
+
+## Form Handle API
+
+`SectionsContainer` exposes a `SectionsFormHandle` via the `onFormReady` callback, enabling host applications to drive form submission externally:
+
+```tsx
+<SectionsContainer
+  sections={sections}
+  mode="IntakeForm"
+  onFormReady={(handle) => {
+    // handle.validate()            – validate all sections, returns boolean
+    // handle.getFormData()         – raw store data (no validation)
+    // handle.validateAndGetData()  – validate then return SectionChanges[]
+    // handle.getStructuredData()   – get records and files without validation
+  }}
+/>
+```
+
+## Geo Hierarchy Cascading Dropdowns
+
+The `useGeoWidgetCascade` hook and `geoHierarchyBuilder` utility provide cascading dropdown functionality for geographic location fields (e.g. Country > State > City). Changes in a parent level automatically reload and reset child dropdowns via the widget event bus.
+
+## Section Builder
+
+A visual UI schema editor shipped as `SectionBuilder`, with sub-components:
+
+- **JSONEditorPanel** — Live JSON editor (powered by `json-edit-react`) for direct schema manipulation
+- **VisualBuilderPanel** — Drag-and-drop visual layout editor
+- **SectionTree** — Tree view of the section/panel/widget hierarchy
+- **PropertyEditor** — Contextual property panel for the selected node
 
 ## Examples
 
 See the `examples/` directory for comprehensive examples demonstrating:
 
-- Basic widget usage
-- Layout widgets
-- Schema internationalization
-- Comparison views
-- And more...
+- Basic widget usage (`usage-example.tsx`)
+- Layout widgets (`LayoutWidgets.tsx`)
+- Schema internationalization (`schema-i18n-example.tsx`)
+- Comparison views (`comparison-view-example.tsx`)
+- Section rendering modes (`section-renderer-example.tsx`)
+- Intake form flow (`intake-form-example.tsx`)
+- Header section widget (`header-section-example.tsx`)
+- Section builder (`section-builder-example.tsx`)
+- JSON editor standalone (`jsoneditor-standalone-example.tsx`)
 
 ## API Reference
 
@@ -280,10 +352,36 @@ Registry for managing widget components.
 
 ### Components
 
-- `SectionsContainer` - Container for rendering sections
-- `SectionRenderer` - Renders individual sections
+- `SectionsContainer` - Container for rendering sections with mode support (RegistryView, CRView, IntakeForm)
+- `SectionRenderer` - Renders individual sections with edit mode, dirty tracking, and accordion support
 - `PanelRenderer` - Renders panels within sections
 - `FilePreviewModal` - Modal for file preview
+- `SectionBuilder` - Visual UI schema editor
+- `JSONEditorPanel` - JSON editor for UI schemas
+- `VisualBuilderPanel` - Visual layout builder
+- `SectionTree` - Tree view of section hierarchy
+- `PropertyEditor` - Property editor for selected nodes
+
+### Hooks
+
+- `useBaseWidget` - Core hook for widget state, validation, conditional logic, and formatting
+- `useWidgetTranslation` - i18n hook for widget labels and messages
+- `useWidgetEventBus` - Pub/sub event bus for inter-widget communication
+- `useWidgetCascade` - Cascading dropdown behaviour between linked widgets
+- `useGeoWidgetCascade` - Geo hierarchy cascading for location-based dropdowns
+
+### Utilities
+
+- `pathUtils` - Dot-notation path read/write for nested data structures
+- `validation` - Built-in, regex, and Zod validation
+- `formatting` - Date, currency, phone, number, and text formatting
+- `conditions` - Conditional show/hide and enable/disable evaluation
+- `dataSource` - Static, API, and schema reference data loading
+- `geoHierarchy` - Geo hierarchy builder for location cascades
+- `sectionValidate` - Section-level validation across all widgets
+- `buildSectionChanges` - Build change payloads from section data
+- `schemaNamespace` - Namespace section configs for multi-instance rendering
+- `schemaTranslation` - Translate UI schemas, widget configs, and panel configs
 
 ## Contributing
 

package/dist/components/SectionRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionRenderer.d.ts","sourceRoot":"","sources":["../../src/components/SectionRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAyC,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAMlD,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,0BAA0B,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAClC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAGjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,2GAA2G;IAC3G,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAErE,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,oGAAoG;IACpG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,4FAA4F;IAC5F,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,wGAAwG;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,0HAA0H;IAC1H,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjE,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAGD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,wZAwB7B,oBAAoB,4CAq6CtB,CAAC"}
+{"version":3,"file":"SectionRenderer.d.ts","sourceRoot":"","sources":["../../src/components/SectionRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAyC,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAMlD,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,0BAA0B,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAClC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAGjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,2GAA2G;IAC3G,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAErE,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,oGAAoG;IACpG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,4FAA4F;IAC5F,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,wGAAwG;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,0HAA0H;IAC1H,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjE,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAGD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,wZAwB7B,oBAAoB,4CAi5CtB,CAAC"}

package/dist/components/SectionsContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionsContainer.d.ts","sourceRoot":"","sources":["../../src/components/SectionsContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAmB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOpE,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEnE,uHAAuH;AACvH,MAAM,WAAW,kBAAkB;IACjC,qEAAqE;IACrE,QAAQ,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7B,qEAAqE;IACrE,WAAW,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,qFAAqF;IACrF,kBAAkB,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAClD;;;OAGG;IACD,iBAAiB,IAAI,cAAc,EAAE,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IACpD,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,wGAAwG;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAEpE,wHAAwH;IACxH,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrE,0JAA0J;IAC1J,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACpD;AA4ED;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,GAAI,yMAa/B,sBAAsB,4CA+RxB,CAAC"}
+{"version":3,"file":"SectionsContainer.d.ts","sourceRoot":"","sources":["../../src/components/SectionsContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAmB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOpE,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEnE,uHAAuH;AACvH,MAAM,WAAW,kBAAkB;IACjC,qEAAqE;IACrE,QAAQ,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7B,qEAAqE;IACrE,WAAW,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,qFAAqF;IACrF,kBAAkB,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAClD;;;OAGG;IACD,iBAAiB,IAAI,cAAc,EAAE,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IACpD,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,wGAAwG;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAEpE,wHAAwH;IACxH,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrE,0JAA0J;IAC1J,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACpD;AA4ED;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,GAAI,yMAa/B,sBAAsB,4CAqSxB,CAAC"}

package/dist/hooks/useWidgetTheme.d.ts

@@ -0,0 +1,19 @@
+import { resolveTheme } from '../theme';
+export type ResolvedTheme = ReturnType<typeof resolveTheme>;
+export declare const ThemeContext: import("react").Context<Required<{
+    colors: Required<import("../theme").WidgetThemeColors>;
+    section: Required<import("../theme").WidgetThemeSection>;
+    panel: Required<import("../theme").WidgetThemePanel>;
+    button: Required<import("../theme").WidgetThemeButton>;
+    widget: Required<import("../theme").WidgetThemeWidget>;
+}>>;
+/**
+ * Access the resolved widget theme from any component inside `<WidgetProvider>`.
+ *
+ * ```tsx
+ * const theme = useWidgetTheme();
+ * // theme.colors.primary, theme.section.dividerColor, etc.
+ * ```
+ */
+export declare function useWidgetTheme(): ResolvedTheme;
+//# sourceMappingURL=useWidgetTheme.d.ts.map

package/dist/hooks/useWidgetTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidgetTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useWidgetTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,YAAY,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AAE5D,eAAO,MAAM,YAAY;;;;;;GAA6C,CAAC;AAEvE;;;;;;;GAOG;AACH,wBAAgB,cAAc,IAAI,aAAa,CAE9C"}

package/dist/index.esm.js

@@ -3541,41 +3541,22 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         }
         return section;
     }, [section, namespace]);
-    // Create namespaced schemaData if namespace is provided
-    // This ensures widgets can read initial values from schemaData at namespaced paths
+    // Create namespaced schemaData if namespace is provided.
+    // Widgets with namespaced data-paths (e.g. "rv-section-0.a1a4d25a.birth_date")
+    // need a nested object at values[namespace] so getValueByPath can traverse it.
     const namespacedSchemaData = useMemo(() => {
         if (!namespace || !currentSchemaData) {
             return schemaData;
         }
-        // Create a namespaced version of schemaData by copying values to namespaced paths
-        const namespaced = { ...currentSchemaData };
-        // Copy all top-level keys to namespaced paths
-        Object.keys(currentSchemaData).forEach(key => {
-            const namespacedKey = `${namespace}.${key}`;
-            if (!(namespacedKey in namespaced)) {
-                namespaced[namespacedKey] = currentSchemaData[key];
-            }
-        });
-        // Also handle nested objects - copy nested values to namespaced paths
-        const copyNestedValues = (obj, prefix = '') => {
-            if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
-                Object.keys(obj).forEach(key => {
-                    const fullPath = prefix ? `${prefix}.${key}` : key;
-                    const namespacedPath = `${namespace}.${fullPath}`;
-                    if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
-                        copyNestedValues(obj[key], fullPath);
-                        // Also set the nested object at the namespaced path
-                        setValueByPath(namespaced, namespacedPath, obj[key]);
-                    }
-                    else {
-                        setValueByPath(namespaced, namespacedPath, obj[key]);
-                    }
-                });
-            }
-        };
-        copyNestedValues(currentSchemaData);
-        return namespaced;
+        return { ...currentSchemaData, [namespace]: currentSchemaData };
     }, [namespace, schemaData, currentSchemaData]);
+    // Populate the store with namespaced schema data so that namespaced widgets
+    // can read their initial values via getValueByPath on the namespaced paths.
+    useEffect(() => {
+        if (namespace && namespacedSchemaData) {
+            dispatch(setValues(namespacedSchemaData));
+        }
+    }, [namespace, namespacedSchemaData, dispatch]);
     const crViewData = useMemo(() => {
         if (mode !== 'CRView')
             return null;
@@ -3937,6 +3918,8 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const baselineSnapshotRef = useRef(null);
     // IntakeForm only: increment when baseline is updated after save - forces badge to update (refs don't trigger re-renders)
     const [intakeFormBaselineTrigger, setIntakeFormBaselineTrigger] = useState(0);
+    // IntakeForm only: tracks whether the user has actually saved this section (prevents "Saved" badge on initial load)
+    const [hasBeenSavedByUser, setHasBeenSavedByUser] = useState(false);
     // IntakeForm: treat as edit mode for dirty tracking when isDraft. RegistryView: use isEditMode.
     const effectiveEditModeForDirty = mode === 'IntakeForm' ? (isDraft !== false) : isEditMode;
     // Compute isDirty: compare current store state to baseline (only when in edit mode)
@@ -3979,18 +3962,68 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const intakeFormSectionStatus = useMemo(() => {
         if (mode !== 'IntakeForm' || isDraft === false)
             return null;
-        const hasValue = (v) => v !== undefined && v !== null && (typeof v !== 'string' || v.trim().length > 0);
-        const currentSnapshot = buildSectionSnapshot(storeValues, namespace);
-        const record = currentSnapshot.records?.[0];
-        const hasData = record &&
-            typeof record === 'object' &&
-            Object.values(record).some((v) => hasValue(v));
         if (isDirty)
             return 'modified';
-        if (hasData)
+        if (hasBeenSavedByUser)
             return 'saved';
         return null;
-    }, [mode, isDirty, storeValues, namespace, buildSectionSnapshot]);
+    }, [mode, isDirty, hasBeenSavedByUser]);
+    // Revert store values to the original schemaData for this section's widgets.
+    // Used by both handleSave (RegistryView raises a CR, so values should not persist)
+    // and handleCancel.
+    const revertToOriginalValues = useCallback(() => {
+        const sectionWidgets = collectWidgets(originalSection.panels);
+        const oldSchemaData = schemaData || contextSchemaData;
+        const currentStoreValues = store.getState().widget.values;
+        let newStoreValues = currentStoreValues;
+        sectionWidgets.forEach(widget => {
+            const originalWidgetId = widget['widget-id'];
+            const namespacedWidgetId = namespace ? `${namespace}__${originalWidgetId}` : originalWidgetId;
+            const widgetId = namespacedWidgetId;
+            const originalDataPath = widget['widget-data-path'];
+            const storeDataPath = namespace && originalDataPath
+                ? (typeof originalDataPath === 'string'
+                    ? `${namespace}.${originalDataPath}`
+                    : Object.fromEntries(Object.entries(originalDataPath).map(([key, path]) => [key, `${namespace}.${path}`])))
+                : originalDataPath;
+            if (widgetId && originalDataPath) {
+                let oldValue;
+                if (typeof originalDataPath === 'object') {
+                    oldValue = {};
+                    Object.entries(originalDataPath).forEach(([key, path]) => {
+                        if (typeof path === 'string') {
+                            oldValue[key] = getValueByPath(oldSchemaData, path);
+                        }
+                    });
+                }
+                else if (typeof originalDataPath === 'string') {
+                    oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                }
+                if (oldValue !== undefined) {
+                    newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
+                    // Also revert the widgetId-based entry — useBaseWidget.handleChange
+                    // sets values[widgetId] during editing, and useBaseWidget.currentValue
+                    // reads values[widgetId] first before falling through to the dataPath.
+                    newStoreValues = { ...newStoreValues, [widgetId]: oldValue };
+                }
+            }
+        });
+        if (hasSupportingDocuments) {
+            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+            originalSupportingDocuments.forEach((doc, index) => {
+                const widgetId = `supporting-doc-${sectionId}-${index}`;
+                const originalDataPath = doc['document-data-path'];
+                const storeDataPath = namespace && originalDataPath
+                    ? `${namespace}.${originalDataPath}`
+                    : originalDataPath;
+                const oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
+            });
+        }
+        if (newStoreValues !== currentStoreValues) {
+            dispatch(setValues(newStoreValues));
+        }
+    }, [originalSection, schemaData, contextSchemaData, store, namespace, hasSupportingDocuments, sectionId, dispatch]);
     // Handle save button click
     const handleSave = async () => {
         if (!store || !onSectionSave) {
@@ -4040,6 +4073,12 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                 console.error('Section Changes Save failed', error);
             }
         }
+        // In RegistryView, save raises a CR — the actual data update follows a
+        // separate approval workflow, so revert the displayed values to the
+        // originals so the view doesn't show unapproved edits.
+        if (mode === 'RegistryView') {
+            revertToOriginalValues();
+        }
         setIsEditMode(false);
         onEditModeChange?.(originalSectionId, false);
     };
@@ -4085,6 +4124,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             if (mode === 'IntakeForm') {
                 baselineSnapshotRef.current = buildSectionSnapshot(currentSchemaData, namespace);
                 setIntakeFormBaselineTrigger((prev) => prev + 1);
+                setHasBeenSavedByUser(true);
             }
             onSectionDirtyChange?.(sectionId, false);
         }
@@ -4093,64 +4133,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     }, [store, onSectionSave, onSectionSaveSuccess, sectionIndex, originalSection, schemaData, contextSchemaData, namespace, hasSupportingDocuments, dbSectionId, sectionRegisterId, dispatch, buildSectionSnapshot, sectionId, onSectionDirtyChange, mode, isDraft]);
     // Handle cancel button click
     const handleCancel = () => {
-        // Revert values in store to original schema data
-        // Use original section (without namespace) for collecting widgets
-        const sectionWidgets = collectWidgets(originalSection.panels);
-        const oldSchemaData = schemaData || contextSchemaData;
-        const currentStoreValues = store.getState().widget.values;
-        let newStoreValues = currentStoreValues;
-        sectionWidgets.forEach(widget => {
-            const originalWidgetId = widget['widget-id'];
-            // If namespace was used, we need to use namespaced widget ID and data path
-            const namespacedWidgetId = namespace ? `${namespace}__${originalWidgetId}` : originalWidgetId;
-            const widgetId = namespacedWidgetId;
-            const originalDataPath = widget['widget-data-path'];
-            // If namespace was used, data path in store is namespaced, but we read from original schema using original path
-            const storeDataPath = namespace && originalDataPath
-                ? (typeof originalDataPath === 'string'
-                    ? `${namespace}.${originalDataPath}`
-                    : Object.fromEntries(Object.entries(originalDataPath).map(([key, path]) => [key, `${namespace}.${path}`])))
-                : originalDataPath;
-            if (widgetId && originalDataPath) {
-                // Handle multi-path (object) or single path (string)
-                // Read from original schema data using original paths
-                let oldValue;
-                if (typeof originalDataPath === 'object') {
-                    // Multi-path: get values for each path
-                    oldValue = {};
-                    Object.entries(originalDataPath).forEach(([key, path]) => {
-                        if (typeof path === 'string') {
-                            oldValue[key] = getValueByPath(oldSchemaData, path);
-                        }
-                    });
-                }
-                else if (typeof originalDataPath === 'string') {
-                    oldValue = getValueByPath(oldSchemaData, originalDataPath);
-                }
-                // Set in store using namespaced data path (if namespace was used)
-                if (oldValue !== undefined) {
-                    newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
-                }
-            }
-        });
-        // Also revert supporting documents if any
-        if (hasSupportingDocuments) {
-            // Use original section's supporting documents to get original data paths
-            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
-            originalSupportingDocuments.forEach((doc, index) => {
-                const widgetId = `supporting-doc-${sectionId}-${index}`;
-                const originalDataPath = doc['document-data-path'];
-                // If namespace was used, data path in store is namespaced
-                const storeDataPath = namespace && originalDataPath
-                    ? `${namespace}.${originalDataPath}`
-                    : originalDataPath;
-                const oldValue = getValueByPath(oldSchemaData, originalDataPath);
-                newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
-            });
-        }
-        if (newStoreValues !== currentStoreValues) {
-            dispatch(setValues(newStoreValues));
-        }
+        revertToOriginalValues();
         setIsEditMode(false);
         onEditModeChange?.(originalSectionId, false);
     };
@@ -4716,6 +4699,9 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     }, []);
     const safeSections = sections ?? [];
     const prevSectionsLengthRef = useRef(safeSections.length);
+    // Stable ref for namespace so formHandle useMemo doesn't depend on the (possibly inline) function identity
+    const namespaceRef = useRef(namespace);
+    namespaceRef.current = namespace;
     // Track dirty (unsaved changes) per section for form handle validation
     const sectionDirtyMapRef = useRef({});
     const handleSectionDirtyChange = useCallback((sectionId, isDirty) => {
@@ -4761,11 +4747,14 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     // Form handle for onFormReady - allows host to validate and get all section data from its own Submit button
     const formHandle = useMemo(() => {
         const getValues = () => store.getState().widget?.values || {};
-        const getNamespace = (section, index) => namespace
-            ? typeof namespace === 'string'
-                ? namespace
-                : namespace(section['section-id'], index)
-            : undefined;
+        const getNamespace = (section, index) => {
+            const ns = namespaceRef.current;
+            return ns
+                ? typeof ns === 'string'
+                    ? ns
+                    : ns(section['section-id'], index)
+                : undefined;
+        };
         const checkNoUnsavedChanges = () => {
             const hasDirty = Object.values(sectionDirtyMapRef.current).some(Boolean);
             if (hasDirty) {
@@ -4815,7 +4804,7 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
                 return results;
             },
         };
-    }, [store, dispatch, safeSections, namespace]);
+    }, [store, dispatch, safeSections]);
     // Call onFormReady when form is ready (sections loaded)
     useEffect(() => {
         if (onFormReady && safeSections.length > 0) {
@@ -9104,16 +9093,6 @@ const HeaderSectionWidget = ({ config }) => {
     const statusColor = statusColors[String(statusValue).toLowerCase()] || '#6B7280';
     // ── Scoped class for CSS isolation ────────────────────────────
     const cls = `header-section-widget-${widgetConfig['widget-id']}`;
-    // ── Indicator dot component ───────────────────────────────────
-    const Dot = ({ color }) => (jsxRuntimeExports.jsx("span", { style: {
-            display: 'inline-block',
-            width: 8,
-            height: 8,
-            borderRadius: '50%',
-            backgroundColor: color,
-            flexShrink: 0,
-            marginTop: 6,
-        } }));
     // ── RENDER ────────────────────────────────────────────────────
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
         .${cls} {
@@ -9282,7 +9261,7 @@ const HeaderSectionWidget = ({ config }) => {
                                                 .parentElement?.querySelector('.hdr-avatar-placeholder');
                                             if (placeholder)
                                                 placeholder.style.display = 'flex';
-                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: imageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: "#9CA3AF" }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? statusColor : '#F59E0B' }), jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? '#9CA3AF' : '#F59E0B' }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
+                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: imageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
 };
 
 /**