@openg2p/registry-widgets 1.1.3 → 1.1.4-dev.1

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

@@ -1 +1 @@
-{"version":3,"file":"executeSectionSave.d.ts","sourceRoot":"","sources":["../../../../src/components/SectionRenderer/utils/executeSectionSave.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAI/C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;IACnC,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5C,sBAAsB,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACnE;AAED,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC5C;AAiGD,eAAO,MAAM,kBAAkB,GAAU,qIAUtC,wBAAwB,KAAG,OAAO,CAAC,wBAAwB,CAwD7D,CAAC"}
+{"version":3,"file":"executeSectionSave.d.ts","sourceRoot":"","sources":["../../../../src/components/SectionRenderer/utils/executeSectionSave.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAO/C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;IACnC,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5C,sBAAsB,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACnE;AAED,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC5C;AAwGD,eAAO,MAAM,kBAAkB,GAAU,qIAUtC,wBAAwB,KAAG,OAAO,CAAC,wBAAwB,CAwD7D,CAAC"}

package/dist/components/SectionRenderer.d.ts

@@ -0,0 +1,61 @@
+import { SectionConfig } from '../types';
+import { UseBaseWidgetOptions } from '../hooks/useBaseWidget';
+import { SectionMode } from './SectionsContainer';
+export interface SectionChanges {
+    section_id?: string;
+    section_register_id?: string;
+    records: unknown[];
+    files?: unknown[];
+    image?: File | null;
+}
+export interface SectionRendererProps {
+    section: SectionConfig;
+    dataSourceRequestHandler?: UseBaseWidgetOptions['dataSourceRequestHandler'];
+    schemaData?: UseBaseWidgetOptions['schemaData'];
+    onValueChange?: UseBaseWidgetOptions['onValueChange'];
+    gridColumnSpan?: number;
+    onSectionSave?: (changes: SectionChanges) => Promise<void> | void;
+    hideEditButton?: boolean;
+    mode?: SectionMode;
+    namespace?: string;
+    changeRequestType?: 'new' | 'old';
+    showChangeRequestLabel?: boolean;
+    dbSectionId?: string;
+    sectionRegisterId?: string;
+    /** Called when the section's dirty (has unsaved changes) status changes. Only fires while in edit mode. */
+    onSectionDirtyChange?: (sectionId: string, isDirty: boolean) => void;
+    /** IntakeForm mode: 0-based index of this section within the form */
+    sectionIndex?: number;
+    /** IntakeForm mode: total number of sections in the form */
+    sectionCount?: number;
+    /** IntakeForm mode: index of the currently expanded section (null = all collapsed) */
+    expandedSectionIndex?: number | null;
+    /** IntakeForm mode: called when user requests to expand a section (e.g. clicks accordion header) */
+    onExpandSection?: (index: number) => void;
+    /** IntakeForm mode: called when section save completes successfully (collapse current, expand next) */
+    onSectionSaveSuccess?: (index: number) => void;
+    /** IntakeForm mode: called when user clicks Previous (collapse current, expand previous) */
+    onPreviousSection?: (index: number) => void;
+    /** IntakeForm mode: when true or undefined, sections are editable; when false, sections are readonly */
+    isDraft?: boolean;
+    /**
+     * IntakeForm mode: when true the accordion header is clickable so the user can open/close this
+     * section freely. False (default) locks the header — navigation is only via Next/Previous.
+     * SectionsContainer sets this to true for every visited section plus the one immediately after.
+     */
+    isAccessible?: boolean;
+    /** RegistryView: called when this section enters or exits edit mode. Used by SectionsContainer to enforce single-edit. */
+    onEditModeChange?: (sectionId: string, editing: boolean) => void;
+    /** RegistryView: when true, forces this section out of edit mode (another section took over). */
+    forceExitEdit?: boolean;
+}
+/**
+ * Renders a section with its panels
+ *
+ * Layout behavior:
+ * - Section width is based on max 3 panels (or more on high resolution)
+ * - Panels wrap when they exceed available width
+ * - Sections can sit side-by-side if there's space
+ */
+export declare const SectionRenderer: ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton, mode, namespace, changeRequestType, showChangeRequestLabel, dbSectionId, sectionRegisterId, onSectionDirtyChange, sectionIndex, sectionCount, expandedSectionIndex, onExpandSection, onSectionSaveSuccess, onPreviousSection, isDraft, isAccessible, onEditModeChange, forceExitEdit, }: SectionRendererProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SectionRenderer.d.ts.map

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

@@ -0,0 +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;AAQ9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAuDlD,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;IAClB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACrB;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;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,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,saAyB7B,oBAAoB,4CAqlDtB,CAAC"}

package/dist/hooks/useGeoHierarchy.d.ts

@@ -9,6 +9,7 @@ export declare function useGeoHierarchy({ config }: UseGeoHierarchyOptions): {
     options: Record<string, GeoSelectOption[]>;
     resolvedLabels: Record<string, string>;
     columnCounts: number[];
+    columnSpan: number;
     visibleColumns: {
         index: number;
         levels: GeoLevel[];

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

@@ -1 +1 @@
-{"version":3,"file":"useGeoHierarchy.d.ts","sourceRoot":"","sources":["../../src/hooks/useGeoHierarchy.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAA4B,MAAM,UAAU,CAAC;AAKtE,OAAO,EACL,QAAQ,EAER,eAAe,EAMf,gBAAgB,EASjB,MAAM,uBAAuB,CAAC;AAE/B,UAAU,sBAAsB;IAC9B,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AA+BD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,EAAE,sBAAsB;;;;;;;;;;;;;;oCAmU3C,MAAM,aAAa,MAAM,GAAG,SAAS;iCA2E3B,MAAM;;;;;;;;;;;;;;;;;;;;;;;EAGtC"}
+{"version":3,"file":"useGeoHierarchy.d.ts","sourceRoot":"","sources":["../../src/hooks/useGeoHierarchy.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAA4B,MAAM,UAAU,CAAC;AAKtE,OAAO,EACL,QAAQ,EAER,eAAe,EAQf,gBAAgB,EASjB,MAAM,uBAAuB,CAAC;AAE/B,UAAU,sBAAsB;IAC9B,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AA+BD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,EAAE,sBAAsB;;;;;;;;;;;;;;;oCA0V3C,MAAM,aAAa,MAAM,GAAG,SAAS;iCAuF3B,MAAM;;;;;;;;;;;;;;;;;;;;;;;EAGtC"}

package/dist/hooks/useGeoWidgetCascade.d.ts

@@ -0,0 +1,12 @@
+import { BaseWidgetConfig, DataSourceRequestHandler } from '../types';
+export interface UseGeoWidgetCascadeOptions {
+    config: BaseWidgetConfig;
+    dataSourceRequestHandler?: DataSourceRequestHandler;
+    values: Record<string, any>;
+}
+/**
+ * Hook for geo widget cascade functionality
+ * Handles geo hierarchy building and cascade behavior
+ */
+export declare const useGeoWidgetCascade: (options: UseGeoWidgetCascadeOptions) => void;
+//# sourceMappingURL=useGeoWidgetCascade.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGeoWidgetCascade.d.ts","sourceRoot":"","sources":["../../src/hooks/useGeoWidgetCascade.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAmBtE,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,gBAAgB,CAAC;IACzB,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IACpD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC7B;AAGD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,0BAA0B,SAwMtE,CAAC"}

package/dist/hooks/useWidgetTranslation.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Custom hook for widget translations
+ * Provides translation function with widget-specific namespace and fallback support
+ */
+export declare const useWidgetTranslation: () => {
+    t: (keyOrString: string | undefined | null, options?: {
+        defaultValue?: string;
+        [key: string]: any;
+    }) => string;
+    translate: (keyOrString: string | undefined | null, options?: {
+        defaultValue?: string;
+        [key: string]: any;
+    }) => string;
+    translateConfig: (value: string | undefined | null, fallback?: string) => string;
+};
+//# sourceMappingURL=useWidgetTranslation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useWidgetTranslation.d.ts","sourceRoot":"","sources":["../../src/hooks/useWidgetTranslation.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,oBAAoB;qBAoBhB,MAAM,GAAG,SAAS,GAAG,IAAI,YAC5B;QACR,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,KACA,MAAM;6BALM,MAAM,GAAG,SAAS,GAAG,IAAI,YAC5B;QACR,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,KACA,MAAM;6BA0BA,MAAM,GAAG,SAAS,GAAG,IAAI,aACrB,MAAM,KAChB,MAAM;CAqDV,CAAC"}

package/dist/i18n/config.d.ts

@@ -0,0 +1,21 @@
+import i18n from 'i18next';
+/**
+ * Initialize i18n for the widget library
+ * Can be customized by passing custom resources or configuration
+ *
+ * If no resources are provided, it will attempt to automatically load translations
+ * from the consuming project's locale directory.
+ *
+ * If options are provided and the default instance is already initialized,
+ * creates a new i18n instance to avoid reinitialization issues.
+ */
+export declare const initI18n: (options?: {
+    resources?: Record<string, any>;
+    lng?: string;
+    fallbackLng?: string;
+    debug?: boolean;
+    loadPath?: string | string[];
+    autoLoad?: boolean;
+}) => Promise<import("i18next").i18n>;
+export default i18n;
+//# sourceMappingURL=config.d.ts.map

package/dist/i18n/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/i18n/config.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAC;AA6C3B;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,GAAU,UAAU;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,oCAuEA,CAAC;AAwBF,eAAe,IAAI,CAAC"}

package/dist/index.d.ts

@@ -57,7 +57,14 @@ interface DocsWidgetDocumentConfig {
 }
 interface GeoHierarchyLayout {
     distribution?: 'fixed';
+    /** Explicit levels-per-column counts, e.g. [3, 3] for a 6-level hierarchy in 2 columns. */
     columns?: number[];
+    /**
+     * How many section columns this hierarchy occupies (1–3), matching panel-column-span.
+     * Levels are distributed evenly across these columns.
+     * When omitted, derived from level count: ≤3 → 1, 4–5 → 2, ≥6 → 3.
+     */
+    columnSpan?: number;
     columnIndex?: number;
 }
 /** Optional read path for edit-mode hydration (defaults from widget-data-path). */
@@ -180,7 +187,8 @@ interface BaseWidgetConfig {
     /** Column layout for geo-hierarchy widget (e.g. 3 levels per column). */
     'widget-geo-layout'?: GeoHierarchyLayout;
     /**
-     * Read path for geo_code_hierarchy_json (geo-hierarchy widget, edit-mode hydrate).
+     * Read path for geo_code_hierarchy_json (hydrate/display).
+     * To also persist draft hierarchy on edit/save, use object widget-data-path with a hierarchy key.
      */
     'widget-geo-hierarchy-path'?: string;
     widgets?: BaseWidgetConfig[];

package/dist/index.esm.js

@@ -2988,6 +2988,15 @@ const extractProfileImage = (records) => {
                 profileImage = value;
                 copy[key] = '';
             }
+            else if (isSerializedFile(value)) {
+                try {
+                    profileImage = deserializeFile(value);
+                    copy[key] = '';
+                }
+                catch (err) {
+                    console.error('Failed to deserialize profile image:', err);
+                }
+            }
         }
         return copy;
     });
@@ -8695,10 +8704,6 @@ const DEFAULT_LABELS = {
     lastApprovedBy: 'Last Approved by',
     lastApprovedAt: 'Last Approved at',
 };
-// Options are loaded in both view and edit modes because view mode
-// needs them to resolve display labels (e.g. "active" → "Active").
-// For API data sources, loading is deferred to edit mode to avoid
-// unnecessary network calls when only labels are needed.
 function useFieldDataSource(fieldKey, fieldConfig, isReadonly) {
     const [options, setOptions] = useState([]);
     const { dataSourceRequestHandler, schemaData } = useWidgetContext();
@@ -8802,11 +8807,15 @@ const HeaderSectionWidget = ({ config }) => {
     const imageUrlVal = findValue('imageUrl');
     const [previewUrl, setPreviewUrl] = useState(null);
     useEffect(() => {
-        if (imageUrlVal instanceof File) {
+        if (isFile(imageUrlVal)) {
             const url = URL.createObjectURL(imageUrlVal);
             setPreviewUrl(url);
             return () => URL.revokeObjectURL(url);
         }
+        if (isSerializedFile(imageUrlVal) && imageUrlVal.data) {
+            setPreviewUrl(`data:${imageUrlVal.type};base64,${imageUrlVal.data}`);
+            return;
+        }
         setPreviewUrl(null);
     }, [imageUrlVal]);
     const displayImageUrl = previewUrl || (typeof imageUrlVal === 'string' && imageUrlVal ? imageUrlVal : null);
@@ -8910,16 +8919,25 @@ const HeaderSectionWidget = ({ config }) => {
     }, [statusValue, statusOptions]);
     const statusColor = statusColors[String(statusValue).toLowerCase()] || 'var(--owt-color-text-muted, #6B7280)';
     const fileInputRef = useRef(null);
-    const handleImageUpload = useCallback((e) => {
+    const handleImageUpload = useCallback(async (e) => {
         const file = e.target.files?.[0];
         if (!file || !paths.imageUrl)
             return;
-        dispatch(setValues(setValueByPath({ ...values }, paths.imageUrl, file)));
-        e.target.value = '';
+        try {
+            const serialized = await serializeFile(file);
+            dispatch(setValues(setValueByPath({ ...values }, paths.imageUrl, serialized)));
+        }
+        catch (err) {
+            console.error('[HeaderSectionWidget] Error serializing image:', err);
+        }
+        finally {
+            e.target.value = '';
+        }
     }, [paths.imageUrl, values, dispatch]);
     const handleImageDelete = useCallback(() => {
         if (!paths.imageUrl)
             return;
+        setPreviewUrl(null);
         dispatch(setValues(setValueByPath({ ...values }, paths.imageUrl, null)));
     }, [paths.imageUrl, values, dispatch]);
     const cls = `header-section-widget-${widgetConfig['widget-id']}`;
@@ -10596,6 +10614,33 @@ function buildOrderedLevels(flat) {
     return ordered;
 }
 const GEO_SECTION_COLUMN_SLOTS = 3;
+/**
+ * Suggested panel/widget column span from hierarchy depth:
+ * ≤3 levels → 1, 4–5 → 2, ≥6 → 3.
+ */
+function suggestedGeoColumnSpan(levelCount) {
+    if (levelCount <= 0) {
+        return 1;
+    }
+    if (levelCount <= 3) {
+        return 1;
+    }
+    if (levelCount < 6) {
+        return 2;
+    }
+    return GEO_SECTION_COLUMN_SLOTS;
+}
+/** Clamp span to 1…GEO_SECTION_COLUMN_SLOTS and at most the level count. */
+function resolveGeoColumnSpan(levelCount, explicitSpan) {
+    const preferred = explicitSpan !== undefined && explicitSpan !== null
+        ? explicitSpan
+        : suggestedGeoColumnSpan(levelCount);
+    const clamped = Math.min(GEO_SECTION_COLUMN_SLOTS, Math.max(1, Math.floor(preferred)));
+    if (levelCount <= 0) {
+        return clamped;
+    }
+    return Math.min(clamped, levelCount);
+}
 /** Slice ordered levels into section columns per counts, e.g. [3, 2, 0]. */
 function distributeLevelsToColumns(levels, columnCounts) {
     const columns = columnCounts.map(() => []);
@@ -10626,19 +10671,22 @@ function resolveGeoLevelColumns(levels, layout) {
         const columnCounts = layout.distribution === 'fixed'
             ? padColumnCounts(layout.columns, GEO_SECTION_COLUMN_SLOTS)
             : layout.columns;
+        const columns = distributeLevelsToColumns(levels, columnCounts);
+        const occupied = columns.filter((column) => column.length > 0).length;
         return {
             columnCounts,
-            columns: distributeLevelsToColumns(levels, columnCounts),
+            columns,
+            columnSpan: resolveGeoColumnSpan(levels.length, layout.columnSpan ?? occupied),
         };
     }
-    // Default (no explicit layout): fill top-to-bottom across up to
-    // GEO_SECTION_COLUMN_SLOTS columns, each holding a contiguous block of levels
-    // so the order stays correct when columns stack on small screens.
-    const columnCount = Math.min(GEO_SECTION_COLUMN_SLOTS, Math.max(levels.length, 1));
-    const columns = distributeLevelsContiguous(levels, columnCount);
+    // Distribute top-to-bottom across the allotted column span so order stays
+    // correct when columns stack on small screens.
+    const columnSpan = resolveGeoColumnSpan(levels.length, layout?.columnSpan);
+    const columns = distributeLevelsContiguous(levels, columnSpan);
     return {
         columnCounts: columns.map((column) => column.length),
         columns,
+        columnSpan,
     };
 }
 function padColumnCounts(counts, slotCount) {
@@ -10781,6 +10829,42 @@ function getDeepestSelectedValue(orderedLevels, selectedValues) {
     }
     return deepest;
 }
+/** Build geo_code_hierarchy_json document from current selections (for save payload). */
+function buildHierarchyJson(orderedLevels, selectedValues, options, resolvedLabels = {}) {
+    const hierarchy = [];
+    for (const level of orderedLevels) {
+        const levelValueId = selectedValues[level.level_id];
+        if (!levelValueId) {
+            break;
+        }
+        const optionLabel = options[level.level_id]?.find((item) => item.value === levelValueId)?.label;
+        const mnemonic = optionLabel || resolvedLabels[levelValueId] || levelValueId;
+        hierarchy.push({
+            level_id: level.level_id,
+            level: level.level_mnemonic,
+            level_mnemonic: level.level_mnemonic,
+            level_value_id: levelValueId,
+            level_value_mnemonic: mnemonic,
+        });
+    }
+    if (hierarchy.length === 0) {
+        return null;
+    }
+    return {
+        hierarchy,
+        lowest_level_value_id: hierarchy[hierarchy.length - 1].level_value_id,
+    };
+}
+/** Preserve string vs object storage shape used by the existing hierarchy field. */
+function formatHierarchyForPersist(document, previous) {
+    if (document === null) {
+        return typeof previous === 'string' ? '' : null;
+    }
+    if (typeof previous === 'string') {
+        return JSON.stringify(document);
+    }
+    return document;
+}
 function clearDescendants(orderedLevels, fromIndex, selectedValues, options) {
     const nextSelected = { ...selectedValues };
     const nextOptions = { ...options };
@@ -10856,7 +10940,10 @@ function useGeoHierarchy({ config }) {
     const geoLayout = config['widget-geo-layout'];
     const hierarchyJsonPath = useMemo(() => resolveHierarchyPath(config), [config]);
     const dataPath = useMemo(() => resolveDataPath(config), [config]);
-    /** Read-only base: geo_code_hierarchy_json is never written — schema first, then store. */
+    /**
+     * Approved hierarchy for hydrate/display: schema first, then store.
+     * Edits persist draft hierarchy into store values for save; schema keeps approved.
+     */
     const baseHierarchyJson = useMemo(() => {
         if (!hierarchyJsonPath) {
             return null;
@@ -10956,17 +11043,23 @@ function useGeoHierarchy({ config }) {
         });
         return transformGeoValueOptions(payload);
     }, [fetchRawValues]);
-    /** Write only geo_lowest_level_value_id — never geo_code_hierarchy_json. */
-    const persistDeepestValue = useCallback((nextSelectedValues, orderedLevels) => {
+    /** Persist leaf id + current hierarchy structure for save (schema approved value stays preferred for read). */
+    const persistDeepestValue = useCallback((nextSelectedValues, orderedLevels, nextOptions, nextResolvedLabels) => {
         if (initializingRef.current || hydratingRef.current || isReadonly) {
             return;
         }
         const deepest = getDeepestSelectedValue(orderedLevels, nextSelectedValues);
         selfPersistedValueRef.current = deepest ? String(deepest) : '';
+        const hierarchyDocument = buildHierarchyJson(orderedLevels, nextSelectedValues, nextOptions, nextResolvedLabels);
+        const hierarchyPayload = formatHierarchyForPersist(hierarchyDocument, baseHierarchyRef.current);
         const rawDataPath = config['widget-data-path'];
         const nextValue = deepest ?? null;
         if (rawDataPath && typeof rawDataPath === 'object') {
-            base.onChange({ value: nextValue });
+            const payload = { value: nextValue };
+            if ('hierarchy' in rawDataPath) {
+                payload.hierarchy = hierarchyPayload;
+            }
+            base.onChange(payload);
         }
         else {
             base.onChange(nextValue);
@@ -11108,9 +11201,7 @@ function useGeoHierarchy({ config }) {
         nextSelectedValues = cleared.selectedValues;
         setSelectedValues(nextSelectedValues);
         setOptions(cleared.options);
-        if (nextValue || Object.values(nextSelectedValues).some((value) => value)) {
-            persistDeepestValue(nextSelectedValues, levels);
-        }
+        persistDeepestValue(nextSelectedValues, levels, cleared.options, resolvedLabels);
         if (!nextValue || levelIndex >= levels.length - 1) {
             return;
         }
@@ -11122,9 +11213,17 @@ function useGeoHierarchy({ config }) {
             const message = error instanceof Error ? error.message : 'Failed to load child geo level values';
             setGeoError(message);
         }
-    }, [isReadonly, levels, selectedValues, options, persistDeepestValue, loadOptionsForLevel]);
+    }, [
+        isReadonly,
+        levels,
+        selectedValues,
+        options,
+        resolvedLabels,
+        persistDeepestValue,
+        loadOptionsForLevel,
+    ]);
     const readonlyPath = useMemo(() => buildReadonlyPath(levels, selectedValues, options, resolvedLabels), [levels, selectedValues, options, resolvedLabels]);
-    const { columnCounts, columns: levelColumns } = useMemo(() => resolveGeoLevelColumns(levels, geoLayout), [levels, geoLayout]);
+    const { columnCounts, columns: levelColumns, columnSpan } = useMemo(() => resolveGeoLevelColumns(levels, geoLayout), [levels, geoLayout]);
     const visibleColumns = useMemo(() => {
         const columnIndex = geoLayout?.columnIndex;
         if (columnIndex === undefined || columnIndex === null) {
@@ -11142,6 +11241,7 @@ function useGeoHierarchy({ config }) {
         options,
         resolvedLabels,
         columnCounts,
+        columnSpan,
         visibleColumns,
         loadingLevels,
         loadingLevelId,
@@ -11211,11 +11311,12 @@ const GeoHierarchyWidget = ({ config }) => {
         isLevelEnabled,
         formatLevelLabel,
     };
+    const layoutColumnCount = Math.max(visibleColumns.length, 1);
     const content = visibleColumns.length <= 1 ? (renderLevelRows({
         ...rowProps,
         columnLevels: visibleColumns[0]?.levels ?? levels,
     })) : (jsxRuntimeExports.jsx("div", { className: "flex flex-col lg:grid w-full", style: {
-            gridTemplateColumns: `repeat(${visibleColumns.length}, minmax(200px, 1fr))`,
+            gridTemplateColumns: `repeat(${layoutColumnCount}, minmax(200px, 1fr))`,
         }, children: visibleColumns.map((column, position) => {
             const isLast = position === visibleColumns.length - 1;
             const columnClassName = [
@@ -11343,7 +11444,22 @@ const DocsWidget = ({ config }) => {
                                                 fileInputRefs.current[docKey] = el;
                                             } })] })), hasFile && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: (e) => handlePreview(file, e), className: "inline-flex items-center px-3 py-1 rounded-md border border-gray-300 text-sm font-medium text-gray-900 bg-gray-50 focus:outline-none", title: fileName, children: t?.('common.view') ?? 'View' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleRemove(docKey), className: "inline-flex items-center px-3 py-1 rounded-md border border-gray-300 text-sm font-medium text-gray-900 bg-gray-50 focus:outline-none", title: "Remove", children: t?.('common.remove') ?? 'Remove' })] }))] }) })] }) }, docKey));
     };
-    return (jsxRuntimeExports.jsxs("div", { className: isReadonly ? 'DocsDisplayWidget mb-[10px]' : 'DocsWidget mb-[10px]', children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col lg:grid gap-x-8 gap-y-0", style: { gridTemplateColumns: `repeat(${docColumns.length || 1}, minmax(0, 1fr))` }, children: docColumns.map((column, columnIndex) => (jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: column.map((doc) => renderSlot(doc)) }, `docs-column-${columnIndex}`))) }), jsxRuntimeExports.jsx(FilePreviewModal, { file: previewFile, isOpen: isPreviewOpen && !!previewFile, onClose: () => {
+    return (jsxRuntimeExports.jsxs("div", { className: isReadonly ? 'DocsDisplayWidget mb-[10px]' : 'DocsWidget mb-[10px]', children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col lg:grid w-full", style: { gridTemplateColumns: `repeat(${docColumns.length || 1}, minmax(0, 1fr))` }, children: docColumns.map((column, columnIndex) => {
+                    const isLast = columnIndex === docColumns.length - 1;
+                    const columnClassName = [
+                        'flex flex-col min-w-0 relative',
+                        columnIndex > 0 ? 'lg:pl-10' : '',
+                        isLast ? '' : 'lg:pr-10',
+                    ]
+                        .filter(Boolean)
+                        .join(' ');
+                    return (jsxRuntimeExports.jsxs("div", { className: columnClassName, children: [!isLast && (jsxRuntimeExports.jsx("div", { className: "hidden lg:block absolute right-0 top-0 w-px", style: {
+                                    bottom: '5px',
+                                    backgroundColor: isReadonly
+                                        ? 'var(--owt-panel-divider-color, #C4C4C4)'
+                                        : 'var(--owt-color-primary, #F5BB1A)',
+                                } })), column.map((doc) => renderSlot(doc))] }, `docs-column-${columnIndex}`));
+                }) }), jsxRuntimeExports.jsx(FilePreviewModal, { file: previewFile, isOpen: isPreviewOpen && !!previewFile, onClose: () => {
                     setIsPreviewOpen(false);
                     setPreviewFile(null);
                 } })] }));