jupiter-dynamic-forms 1.10.0 → 1.11.0

package/dist/index.mjs

@@ -1574,6 +1574,7 @@ const filter$1 = {
   selectRoles: "Select Roles",
   filterRoles: "Filter Roles",
   title: "Filter Roles",
+  description: "Select the roles you want to display in the form. You can search and choose specific roles to focus on or manage all available roles.",
   searchPlaceholder: "Search roles by name, ID, or URI...",
   clearSearch: "Clear search",
   showingResults: "Showing",
@@ -1651,6 +1652,7 @@ const filter = {
   selectRoles: "Rollen selecteren",
   filterRoles: "Rollen filteren",
   title: "Rollen filteren",
+  description: "Selecteer de rollen die u in het formulier wilt weergeven. U kunt zoeken en specifieke rollen kiezen om op te focussen of alle beschikbare rollen beheren.",
   searchPlaceholder: "Zoek rollen op naam, ID of URI...",
   clearSearch: "Zoekopdracht wissen",
   showingResults: "Weergeven",
@@ -1789,6 +1791,194 @@ class I18n {
   }
 }
 I18n.currentLanguage = "en";
+class DraftStorageService {
+  constructor(useSessionStorage = false) {
+    this.DRAFT_DATA_KEY = "jupiter-form-draft-data";
+    this.DRAFT_METADATA_KEY = "jupiter-form-draft-metadata";
+    this.STORAGE_VERSION = "1.0";
+    this._storage = useSessionStorage ? sessionStorage : localStorage;
+    console.log(`💾 DraftStorageService initialized (using ${useSessionStorage ? "sessionStorage" : "localStorage"})`);
+  }
+  // ===========================================
+  // Public API Methods
+  // ===========================================
+  /**
+   * Save complete draft including data and metadata
+   */
+  saveDraft(submissionData, metadata) {
+    try {
+      const draft = {
+        formData: submissionData,
+        metadata: {
+          ...metadata,
+          savedAt: (/* @__PURE__ */ new Date()).toISOString()
+        },
+        version: this.STORAGE_VERSION
+      };
+      this._storage.setItem(this.DRAFT_DATA_KEY, JSON.stringify(draft.formData));
+      this._storage.setItem(this.DRAFT_METADATA_KEY, JSON.stringify(draft.metadata));
+      console.log("✅ Draft saved successfully", {
+        entries: submissionData.length,
+        timestamp: draft.metadata.savedAt,
+        roles: metadata.selectedRoleIds.length,
+        customColumns: metadata.customColumns.length
+      });
+      return true;
+    } catch (error) {
+      console.error("❌ Failed to save draft:", error);
+      return false;
+    }
+  }
+  /**
+   * Load saved draft
+   */
+  loadDraft() {
+    try {
+      const dataStr = this._storage.getItem(this.DRAFT_DATA_KEY);
+      const metadataStr = this._storage.getItem(this.DRAFT_METADATA_KEY);
+      if (!dataStr || !metadataStr) {
+        console.log("ℹ️ No saved draft found");
+        return null;
+      }
+      const formData = JSON.parse(dataStr);
+      const metadata = JSON.parse(metadataStr);
+      console.log("✅ Draft loaded successfully", {
+        entries: formData.length,
+        savedAt: metadata.savedAt,
+        roles: metadata.selectedRoleIds.length,
+        customColumns: metadata.customColumns.length
+      });
+      return {
+        formData,
+        metadata,
+        version: this.STORAGE_VERSION
+      };
+    } catch (error) {
+      console.error("❌ Failed to load draft:", error);
+      return null;
+    }
+  }
+  /**
+   * Check if a draft exists
+   */
+  hasDraft() {
+    return this._storage.getItem(this.DRAFT_DATA_KEY) !== null && this._storage.getItem(this.DRAFT_METADATA_KEY) !== null;
+  }
+  /**
+   * Get draft metadata only (without full data)
+   */
+  getDraftMetadata() {
+    try {
+      const metadataStr = this._storage.getItem(this.DRAFT_METADATA_KEY);
+      if (!metadataStr)
+        return null;
+      return JSON.parse(metadataStr);
+    } catch (error) {
+      console.error("❌ Failed to load draft metadata:", error);
+      return null;
+    }
+  }
+  /**
+   * Clear saved draft
+   */
+  clearDraft() {
+    try {
+      this._storage.removeItem(this.DRAFT_DATA_KEY);
+      this._storage.removeItem(this.DRAFT_METADATA_KEY);
+      console.log("🗑️ Draft cleared successfully");
+      return true;
+    } catch (error) {
+      console.error("❌ Failed to clear draft:", error);
+      return false;
+    }
+  }
+  /**
+   * Get draft age in milliseconds
+   */
+  getDraftAge() {
+    const metadata = this.getDraftMetadata();
+    if (!metadata)
+      return null;
+    const savedAt = new Date(metadata.savedAt);
+    const now = /* @__PURE__ */ new Date();
+    return now.getTime() - savedAt.getTime();
+  }
+  /**
+   * Check if draft is older than specified time (in milliseconds)
+   */
+  isDraftStale(maxAge) {
+    const age = this.getDraftAge();
+    return age !== null && age > maxAge;
+  }
+  /**
+   * Extract custom columns from all sections
+   */
+  extractCustomColumns(allSections) {
+    const customColumns = [];
+    allSections.forEach((section2) => {
+      if (!section2.columns || !Array.isArray(section2.columns)) {
+        return;
+      }
+      section2.columns.forEach((column2) => {
+        customColumns.push({
+          sectionId: section2.id,
+          columnId: column2.id,
+          label: column2.title,
+          // FormColumn uses 'title' not 'label'
+          periodType: this._inferPeriodTypeFromColumn(column2),
+          date: column2.periodStartDate,
+          // Use periodStartDate for instant
+          startDate: column2.periodStartDate,
+          endDate: column2.periodEndDate,
+          dimensionData: column2.dimensionData
+        });
+      });
+    });
+    return customColumns;
+  }
+  /**
+   * Infer period type from column data
+   */
+  _inferPeriodTypeFromColumn(column2) {
+    if (column2.periodStartDate && column2.periodEndDate) {
+      return "duration";
+    }
+    return "instant";
+  }
+  /**
+   * Create metadata snapshot from current form state
+   */
+  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences) {
+    return {
+      periodStartDate,
+      periodEndDate,
+      language,
+      selectedRoleIds,
+      customColumns: this.extractCustomColumns(allSections),
+      typedMemberData,
+      periodPreferences,
+      schemaVersion: this.STORAGE_VERSION
+    };
+  }
+  /**
+   * Validate draft compatibility with current schema
+   */
+  validateDraftCompatibility(draft, currentPeriodStart, currentPeriodEnd) {
+    const warnings = [];
+    if (draft.metadata.periodStartDate !== currentPeriodStart) {
+      warnings.push(`Draft period start (${draft.metadata.periodStartDate}) differs from current (${currentPeriodStart})`);
+    }
+    if (draft.metadata.periodEndDate !== currentPeriodEnd) {
+      warnings.push(`Draft period end (${draft.metadata.periodEndDate}) differs from current (${currentPeriodEnd})`);
+    }
+    const age = this.getDraftAge();
+    if (age && age > 7 * 24 * 60 * 60 * 1e3) {
+      warnings.push(`Draft is ${Math.floor(age / (24 * 60 * 60 * 1e3))} days old`);
+    }
+    const compatible = warnings.length === 0;
+    return { compatible, warnings };
+  }
+}
 const TYPE_INPUT_MAP = {
   // ==========================================
   // Dutch XBRL Types (nl-types namespace)
@@ -3776,7 +3966,7 @@ JupiterFormSection.styles = css`
     }
 
     .typed-member-header-field {
-      width: 100%;
+      width: 96%;
       padding: 4px 6px;
       border: 1px solid var(--jupiter-border-color, #ddd);
       border-radius: 3px;
@@ -4088,8 +4278,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
         <!-- Dialog Content -->
         <div class="dialog-content">
           <p class="description">
-            Select the roles you want to display in the form. You can search and choose specific roles 
-            to focus on or manage all ${totalCount} available roles.
+            ${I18n.t("filter.description")}
           </p>
 
           <!-- Search Input -->
@@ -4624,6 +4813,7 @@ let JupiterDynamicForm = class extends LitElement {
     this.mode = "inputForm";
     this.financialStatementsTypeAxis = [];
     this._formData = {};
+    this._draftLoaded = false;
     this._preservedFormData = {};
     this._typedMemberData = {};
     this._preservedTypedMemberData = {};
@@ -4639,6 +4829,7 @@ let JupiterDynamicForm = class extends LitElement {
     this._periodPreferences = {};
     this._activeSidePanelRoleId = null;
     this._adminRoleConfigs = {};
+    this._skipDraftLoading = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -4657,6 +4848,9 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _initializeForm() {
     var _a;
+    if (!this._draftStorageService) {
+      this._draftStorageService = new DraftStorageService(false);
+    }
     if (this.xbrlInput) {
       try {
         console.log("🔄 Initializing form from XBRL input:", this.xbrlInput);
@@ -4716,6 +4910,11 @@ let JupiterDynamicForm = class extends LitElement {
     if ((_a = this.xbrlInput) == null ? void 0 : _a.initialData) {
       this._formData = { ...this._formData, ...this.xbrlInput.initialData };
     }
+    if (!this._skipDraftLoading) {
+      this._loadDraftIfExists();
+    } else {
+      console.log("⏭️ Skipping draft loading during preference update");
+    }
     this._validateForm();
   }
   _getDefaultSchema() {
@@ -4933,7 +5132,24 @@ let JupiterDynamicForm = class extends LitElement {
     if (preferencesChanged) {
       this._periodPreferences = periodPreferences;
       console.log("📊 Period preferences updated:", this._periodPreferences);
+      this._skipDraftLoading = true;
       this._initializeForm();
+      this._skipDraftLoading = false;
+      if (this._draftStorageService.hasDraft()) {
+        console.log("💾 Updating draft with new period preferences...");
+        const draftData = this._generateSubmissionData();
+        const metadata = this._draftStorageService.createMetadataSnapshot(
+          this.periodStartDate,
+          this.periodEndDate,
+          this.language,
+          this._selectedRoleIds,
+          this._allSections,
+          this._typedMemberData,
+          this._periodPreferences
+        );
+        this._draftStorageService.saveDraft(draftData, metadata);
+        console.log("✅ Draft updated with new period preferences");
+      }
     } else {
       this._applyRoleFilter();
     }
@@ -4976,6 +5192,7 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _handleFieldChange(event) {
     const { fieldId, conceptId, columnId, value } = event.detail;
+    console.log(`📝 Field change: conceptId=${conceptId}, columnId=${columnId}, value=${value}, fieldId=${fieldId}`);
     const updatedFormData = { ...this._formData };
     if (!updatedFormData[conceptId]) {
       updatedFormData[conceptId] = {};
@@ -4983,6 +5200,7 @@ let JupiterDynamicForm = class extends LitElement {
     const oldValue = updatedFormData[conceptId][columnId];
     updatedFormData[conceptId] = { ...updatedFormData[conceptId], [columnId]: value };
     this._formData = updatedFormData;
+    console.log(`💾 Updated formData[${conceptId}]:`, this._formData[conceptId]);
     this._touched.add(`${conceptId}-${columnId}`);
     this._dirty = true;
     this._validateForm();
@@ -5376,16 +5594,452 @@ let JupiterDynamicForm = class extends LitElement {
     console.log("✅ Form submit event dispatched");
   }
   _handleSaveDraft() {
+    console.log("💾 Raw form data before submission generation:", this._formData);
     const draftData = this._generateSubmissionData();
+    console.log("📤 Generated submission data:", draftData);
+    console.log("📊 Submission data breakdown:");
+    draftData.forEach((entry, index) => {
+      console.log(`  [${index}] conceptId: ${entry.conceptId}, columnId: ${entry.columnId}, value: ${entry.value}`);
+    });
+    const metadata = this._draftStorageService.createMetadataSnapshot(
+      this.periodStartDate,
+      this.periodEndDate,
+      this.language,
+      this._selectedRoleIds,
+      this._allSections,
+      this._typedMemberData,
+      this._periodPreferences
+    );
+    const saved = this._draftStorageService.saveDraft(draftData, metadata);
     this.dispatchEvent(new CustomEvent("form-save-draft", {
       detail: {
         data: this._formData,
         draftData,
+        metadata,
+        saved,
         valid: this._valid,
-        errors: this._errors
+        errors: this._errors,
+        // Provide data in format for external storage
+        dynaformsFacts: draftData,
+        dynaformsMetadata: metadata
       },
       bubbles: true
     }));
+    console.log("💾 Draft saved to localStorage", {
+      entries: draftData.length,
+      saved,
+      roles: this._selectedRoleIds.length,
+      customColumns: metadata.customColumns.length
+    });
+  }
+  // ===========================================
+  // Draft Loading & Restoration
+  // ===========================================
+  async _loadDraftIfExists() {
+    console.log("📋 Checking for saved draft...");
+    if (this.dynaformsFacts && this.dynaformsMetadata) {
+      console.log("📦 Using external draft data from properties");
+      const draft2 = {
+        formData: this.dynaformsFacts,
+        metadata: this.dynaformsMetadata
+      };
+      await this._restoreFromDraft(draft2);
+      this._draftLoaded = true;
+      this._draftLoadedAt = this.dynaformsMetadata.savedAt || (/* @__PURE__ */ new Date()).toISOString();
+      this.dispatchEvent(new CustomEvent("form-draft-loaded", {
+        detail: {
+          draft: draft2,
+          source: "external",
+          compatible: true,
+          warnings: []
+        },
+        bubbles: true,
+        composed: true
+      }));
+      console.log("📥 External draft loaded successfully");
+      return;
+    }
+    if (!this._draftStorageService.hasDraft()) {
+      console.log("ℹ️ No saved draft found");
+      return;
+    }
+    const draft = this._draftStorageService.loadDraft();
+    if (!draft) {
+      console.warn("⚠️ Failed to load draft");
+      return;
+    }
+    const { compatible, warnings } = this._draftStorageService.validateDraftCompatibility(
+      draft,
+      this.periodStartDate,
+      this.periodEndDate
+    );
+    if (warnings.length > 0) {
+      console.warn("⚠️ Draft compatibility warnings:", warnings);
+    }
+    await this._restoreFromDraft(draft);
+    this.dispatchEvent(new CustomEvent("form-draft-loaded", {
+      detail: {
+        draft,
+        compatible,
+        warnings
+      },
+      bubbles: true,
+      composed: true
+    }));
+    console.log("📥 Draft loaded successfully", {
+      entries: draft.formData.length,
+      savedAt: draft.metadata.savedAt,
+      age: this._draftStorageService.getDraftAge()
+    });
+  }
+  async _restoreFromDraft(draft) {
+    var _a;
+    const { formData, metadata } = draft;
+    if (metadata.selectedRoleIds && metadata.selectedRoleIds.length > 0) {
+      this._selectedRoleIds = metadata.selectedRoleIds;
+      console.log(`🔄 Restored ${this._selectedRoleIds.length} selected roles`);
+    }
+    if (metadata.typedMemberData) {
+      this._typedMemberData = metadata.typedMemberData;
+      this._preservedTypedMemberData = {};
+      console.log("🔄 Restored typed member data");
+    }
+    if (metadata.periodPreferences) {
+      this._periodPreferences = metadata.periodPreferences;
+      console.log("🔄 Restored period preferences (including previous year settings):", this._periodPreferences);
+      if (this.xbrlInput) {
+        console.log("🔄 Rebuilding schema with restored period preferences...");
+        this._currentSchema = XBRLFormBuilder.buildFormSchema(
+          this.xbrlInput,
+          this.periodStartDate,
+          this.periodEndDate,
+          this.language,
+          this._periodPreferences
+        );
+        this._allSections = [...this._currentSchema.sections];
+        if (this.financialStatementsTypeAxis && this.financialStatementsTypeAxis.length > 0) {
+          this._allSections = this._filterRolesByFinancialStatementsType(this._allSections);
+        }
+        console.log("✅ Schema rebuilt with restored period preferences");
+        if (metadata.customColumns && metadata.customColumns.length > 0) {
+          this._mergeAdditionalCustomColumns(metadata.customColumns);
+          console.log(`🔄 Merged ${metadata.customColumns.length} additional custom columns`);
+        }
+      }
+    } else {
+      if (metadata.customColumns && metadata.customColumns.length > 0) {
+        this._restoreCustomColumns(metadata.customColumns);
+        console.log(`🔄 Restored ${metadata.customColumns.length} custom columns`);
+      }
+    }
+    const restoredFormData = {};
+    formData.forEach((entry) => {
+      let { conceptId, value, columnId, period } = entry;
+      if (!columnId && period) {
+        columnId = this._inferColumnIdFromPeriod(period, conceptId);
+        if (!columnId) {
+          console.warn(`⚠️ Could not infer columnId for concept ${conceptId}, skipping...`);
+          return;
+        }
+      }
+      const actualConceptId = this._findActualConceptId(conceptId);
+      const conceptIdToUse = actualConceptId || conceptId;
+      if (!restoredFormData[conceptIdToUse]) {
+        restoredFormData[conceptIdToUse] = {};
+      }
+      restoredFormData[conceptIdToUse][columnId] = value;
+      console.log(`📦 Restored: ${conceptIdToUse}[${columnId}] = ${value}`);
+    });
+    this._formData = { ...this._formData, ...restoredFormData };
+    console.log(`🔄 Restored ${Object.keys(restoredFormData).length} concepts with data`);
+    if (this._selectedRoleIds.length > 0) {
+      this._applyRoleFilter();
+    }
+    this._dirty = true;
+    this._touched.clear();
+    this._validateForm();
+    this._allSections = [...this._allSections];
+    this.requestUpdate();
+    await this.updateComplete;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const fieldCount = ((_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("input, textarea, select").length) || 0;
+    console.log(`🔍 Found ${fieldCount} fields in DOM after update`);
+    if (fieldCount > 0) {
+      this._populateFieldValues(restoredFormData);
+    } else {
+      console.error("❌ No fields found in DOM even after updateComplete");
+    }
+    console.log("✅ Draft restoration completed");
+  }
+  _findActualConceptId(conceptId) {
+    for (const section2 of this._allSections) {
+      const found = this._findActualConceptIdInTree(section2.concepts, conceptId);
+      if (found)
+        return found;
+    }
+    return null;
+  }
+  _findActualConceptIdInTree(concepts, conceptId) {
+    for (const concept of concepts) {
+      if (concept.originalConceptId === conceptId || concept.id === conceptId) {
+        return concept.id;
+      }
+      if (concept.children) {
+        const found = this._findActualConceptIdInTree(concept.children, conceptId);
+        if (found)
+          return found;
+      }
+    }
+    return null;
+  }
+  _inferColumnIdFromPeriod(period, conceptId) {
+    for (const section2 of this._allSections) {
+      const concept = this._findConceptInSection(section2.concepts, conceptId);
+      if (concept && section2.columns) {
+        for (const column2 of section2.columns) {
+          const isInstant = period.type === "instant";
+          const isDuration = period.type === "duration";
+          if (isInstant && period.date) {
+            if (column2.periodStartDate === period.date || column2.periodStartDate === column2.periodEndDate && column2.periodStartDate === period.date) {
+              console.log(`✓ Inferred columnId: ${column2.id} for concept ${conceptId}`);
+              return column2.id;
+            }
+          } else if (isDuration && period.startDate && period.endDate) {
+            if (column2.periodStartDate === period.startDate && column2.periodEndDate === period.endDate) {
+              console.log(`✓ Inferred columnId: ${column2.id} for concept ${conceptId}`);
+              return column2.id;
+            }
+          }
+        }
+        if (period.type === "instant") {
+          const instantCol = section2.columns.find((c2) => c2.id === "instant");
+          if (instantCol)
+            return instantCol.id;
+        } else {
+          const durationCol = section2.columns.find((c2) => c2.id === "duration");
+          if (durationCol)
+            return durationCol.id;
+        }
+      }
+    }
+    return null;
+  }
+  _findConceptInSection(concepts, conceptId) {
+    for (const concept of concepts) {
+      if (concept.id === conceptId || concept.originalConceptId === conceptId) {
+        return concept;
+      }
+      if (concept.children) {
+        const found = this._findConceptInSection(concept.children, conceptId);
+        if (found)
+          return found;
+      }
+    }
+    return null;
+  }
+  _populateFieldValues(formData) {
+    let populatedCount = 0;
+    let notFoundCount = 0;
+    console.log("🔍 Starting field population...");
+    console.log("📦 Form data to populate:", formData);
+    Object.keys(formData).forEach((conceptId) => {
+      const conceptData = formData[conceptId];
+      Object.keys(conceptData).forEach((columnId) => {
+        var _a, _b;
+        const value = conceptData[columnId];
+        const fieldId = `${conceptId}__${columnId}`;
+        console.log(`🔍 Looking for field: ${fieldId}`);
+        const fieldElement = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(`#${CSS.escape(fieldId)}`);
+        if (fieldElement) {
+          if (fieldElement instanceof HTMLInputElement || fieldElement instanceof HTMLTextAreaElement || fieldElement instanceof HTMLSelectElement) {
+            if (fieldElement.type === "checkbox") {
+              fieldElement.checked = Boolean(value);
+            } else {
+              fieldElement.value = value !== null && value !== void 0 ? String(value) : "";
+            }
+            console.log(`  ✅ Populated field ${fieldId} with value:`, value);
+            populatedCount++;
+          }
+        } else {
+          console.warn(`  ❌ Field element NOT FOUND: ${fieldId}`);
+          console.warn(`     Available fields in DOM:`, Array.from(((_b = this.shadowRoot) == null ? void 0 : _b.querySelectorAll("input, textarea, select")) || []).map((el) => el.id).filter((id) => id.includes(conceptId.split("__")[0])));
+          notFoundCount++;
+        }
+      });
+    });
+    console.log(`✅ Field population complete: ${populatedCount} populated, ${notFoundCount} not found`);
+  }
+  _restoreCustomColumns(customColumns) {
+    const columnsBySection = /* @__PURE__ */ new Map();
+    customColumns.forEach((col) => {
+      if (!columnsBySection.has(col.sectionId)) {
+        columnsBySection.set(col.sectionId, []);
+      }
+      columnsBySection.get(col.sectionId).push(col);
+    });
+    this._allSections.forEach((section2) => {
+      const savedColumns = columnsBySection.get(section2.id);
+      if (savedColumns) {
+        section2.columns = savedColumns.map((col) => ({
+          id: col.columnId,
+          title: col.label,
+          type: col.dimensionData ? "dimension" : "base",
+          periodStartDate: col.startDate || col.date,
+          periodEndDate: col.endDate || col.date,
+          dimensionData: col.dimensionData,
+          order: 0,
+          removable: col.columnId !== "duration" && col.columnId !== "instant"
+        }));
+        this._regenerateFieldsForSection(section2);
+        console.log(`  └─ Restored ${savedColumns.length} columns for section ${section2.id}`);
+      }
+    });
+    if (this._currentSchema) {
+      this._currentSchema = {
+        ...this._currentSchema,
+        sections: this._allSections
+      };
+    }
+  }
+  /**
+   * Merge additional custom columns that were manually added by user
+   * This preserves default columns (duration, instant, previous year) generated by schema builder
+   * and only adds custom columns that don't already exist
+   */
+  _mergeAdditionalCustomColumns(customColumns) {
+    const columnsBySection = /* @__PURE__ */ new Map();
+    customColumns.forEach((col) => {
+      const isManuallyAdded = col.columnId.startsWith("col-");
+      if (isManuallyAdded) {
+        if (!columnsBySection.has(col.sectionId)) {
+          columnsBySection.set(col.sectionId, []);
+        }
+        columnsBySection.get(col.sectionId).push(col);
+      }
+    });
+    this._allSections.forEach((section2) => {
+      const customColumnsForSection = columnsBySection.get(section2.id);
+      if (customColumnsForSection && customColumnsForSection.length > 0) {
+        if (!section2.columns) {
+          section2.columns = [];
+        }
+        customColumnsForSection.forEach((col) => {
+          const existingColumn = section2.columns.find((c2) => c2.id === col.columnId);
+          if (!existingColumn) {
+            const newColumn = {
+              id: col.columnId,
+              title: col.label,
+              type: col.dimensionData ? "dimension" : "base",
+              periodStartDate: col.startDate || col.date,
+              periodEndDate: col.endDate || col.date,
+              dimensionData: col.dimensionData,
+              order: section2.columns.length,
+              removable: true
+            };
+            section2.columns.push(newColumn);
+            console.log(`  └─ Added custom column ${col.columnId} to section ${section2.id}`);
+          }
+        });
+        this._regenerateFieldsForSection(section2);
+      }
+    });
+    if (this._currentSchema) {
+      this._currentSchema = {
+        ...this._currentSchema,
+        sections: this._allSections
+      };
+    }
+  }
+  _regenerateFieldsForSection(section2) {
+    if (!section2.columns)
+      return;
+    const sectionPreferences = this._periodPreferences[section2.id] || {
+      showDuration: true,
+      showInstant: true,
+      showPreviousYear: false
+    };
+    const regenerateConcepts = (concepts) => {
+      concepts.forEach((concept) => {
+        concept.fields = [];
+        const shouldShowConcept = this._shouldShowConceptBasedOnPeriodPreferences(
+          concept,
+          sectionPreferences
+        );
+        if (shouldShowConcept) {
+          section2.columns.forEach((column2) => {
+            const conceptPeriodType = concept.periodType;
+            const columnPeriodType = this._inferColumnPeriodType(column2);
+            if (concept.abstract)
+              return;
+            if (conceptPeriodType && columnPeriodType) {
+              if (conceptPeriodType !== columnPeriodType) {
+                return;
+              }
+            }
+            concept.fields.push({
+              id: `${concept.id}_${column2.id}`,
+              conceptId: concept.id,
+              columnId: column2.id,
+              type: this._mapConceptTypeToFieldType(concept.type),
+              label: concept.label,
+              periodStartDate: column2.periodStartDate,
+              periodEndDate: column2.periodEndDate
+            });
+          });
+        }
+        if (concept.children) {
+          regenerateConcepts(concept.children);
+        }
+      });
+    };
+    regenerateConcepts(section2.concepts);
+  }
+  /**
+   * Check if a concept should be shown based on period preferences
+   */
+  _shouldShowConceptBasedOnPeriodPreferences(concept, preferences) {
+    if (concept.abstract) {
+      return true;
+    }
+    if (!concept.periodType) {
+      return true;
+    }
+    if (concept.periodType === "duration" && !preferences.showDuration) {
+      return false;
+    }
+    if (concept.periodType === "instant" && !preferences.showInstant) {
+      return false;
+    }
+    return true;
+  }
+  _inferColumnPeriodType(column2) {
+    if (column2.periodStartDate && column2.periodEndDate) {
+      return column2.periodStartDate === column2.periodEndDate ? "instant" : "duration";
+    }
+    if (column2.periodStartDate && !column2.periodEndDate) {
+      return "instant";
+    }
+    return void 0;
+  }
+  _mapConceptTypeToFieldType(conceptType) {
+    if (!conceptType)
+      return "text";
+    if (conceptType.includes("monetary") || conceptType.includes("Monetary")) {
+      return "number";
+    }
+    if (conceptType.includes("date") || conceptType.includes("Date")) {
+      return "date";
+    }
+    if (conceptType.includes("boolean") || conceptType.includes("Boolean")) {
+      return "boolean";
+    }
+    if (conceptType.includes("integer") || conceptType.includes("Integer")) {
+      return "number";
+    }
+    if (conceptType.includes("decimal") || conceptType.includes("Decimal")) {
+      return "number";
+    }
+    return "text";
   }
   _generateSubmissionData() {
     const submissionData = [];
@@ -5426,20 +6080,6 @@ let JupiterDynamicForm = class extends LitElement {
     }
     return null;
   }
-  _findConceptInSection(concepts, conceptId) {
-    for (const concept of concepts) {
-      if (concept.id === conceptId) {
-        return concept;
-      }
-      if (concept.children) {
-        const found = this._findConceptInSection(concept.children, conceptId);
-        if (found) {
-          return found;
-        }
-      }
-    }
-    return null;
-  }
   _findSectionForConcept(conceptId) {
     for (const section2 of this._allSections) {
       const concept = this._findConceptInSection(section2.concepts, conceptId);
@@ -5456,10 +6096,10 @@ let JupiterDynamicForm = class extends LitElement {
       return;
     const isInstant = concept.periodType === "instant";
     const column2 = this._findColumnByIdInAllSections(columnId);
-    alert("hi");
     console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${columnId}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}`);
     const entry = {
       conceptId: concept.originalConceptId || concept.id,
+      columnId,
       value,
       period: {
         type: concept.periodType || "duration",
@@ -5613,6 +6253,8 @@ let JupiterDynamicForm = class extends LitElement {
             const column2 = this._findColumnByIdInSection(field.columnId, section2);
             const submissionEntry = {
               conceptId: concept.id,
+              columnId: field.columnId,
+              // CRITICAL: Include columnId for draft restoration
               value: fieldValue,
               period: {
                 type: concept.periodType || "duration"
@@ -6369,9 +7011,21 @@ __decorateClass([
 __decorateClass([
   n2({ type: Array })
 ], JupiterDynamicForm.prototype, "financialStatementsTypeAxis", 2);
+__decorateClass([
+  n2({ type: Object, attribute: "dynaforms-metadata" })
+], JupiterDynamicForm.prototype, "dynaformsMetadata", 2);
+__decorateClass([
+  n2({ type: Object, attribute: "dynaforms-facts" })
+], JupiterDynamicForm.prototype, "dynaformsFacts", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_formData", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_draftLoaded", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_draftLoadedAt", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_preservedFormData", 2);