jupiter-dynamic-forms 1.1.0 → 1.4.0

package/dist/index.mjs

@@ -523,18 +523,33 @@ class FormValidator {
   }
 }
 class XBRLFormBuilder {
+  /**
+   * Create unique concept ID by combining original ID with preferred label suffix
+   * This handles cases where the same concept appears multiple times with different labels
+   */
+  static createUniqueConceptId(concept) {
+    if (concept.preferredLabel && concept.preferredLabel.trim() !== "") {
+      const roleMatch = concept.preferredLabel.match(/\/([^\/]+)$/);
+      const roleSuffix = roleMatch ? roleMatch[1] : concept.preferredLabel.replace(/[^a-zA-Z0-9]/g, "_");
+      return `${concept.id}_${roleSuffix}`;
+    }
+    return concept.id;
+  }
   /**
    * Build form schema from XBRL input data
    * Creates accordion sections for each presentation role
    */
   static buildFormSchema(xbrlInput, periodStartDate, periodEndDate) {
+    var _a;
     if (!xbrlInput.presentation || xbrlInput.presentation.length === 0) {
       throw new Error("XBRL presentation data is required");
     }
     const presentationData = xbrlInput.presentation[0];
+    const hypercubeData = (_a = xbrlInput.hypercubes) == null ? void 0 : _a[0];
     const sections = [];
     presentationData.roles.forEach((role) => {
-      const section = this.buildSectionFromRole(role, periodStartDate, periodEndDate);
+      const section = this.buildSectionFromRole(role, periodStartDate, periodEndDate, hypercubeData);
+      this.assignFieldColumnIds(section);
       sections.push(section);
     });
     return {
@@ -548,70 +563,116 @@ class XBRLFormBuilder {
   /**
    * Build a form section from a presentation role
    */
-  static buildSectionFromRole(role, periodStartDate, periodEndDate) {
+  static buildSectionFromRole(role, periodStartDate, periodEndDate, hypercubeData) {
     var _a;
     const title = this.extractRoleTitle(role.role);
+    const nonAbstractConcepts = this.getAllNonAbstractConcepts(role);
+    const periodTypes = new Set(
+      nonAbstractConcepts.filter((concept) => concept.periodType).map((concept) => concept.periodType)
+    );
+    const roleInfo = { periodTypes };
     const conceptTrees = [];
     if ((_a = role.presentationLinkbase) == null ? void 0 : _a.concepts) {
       role.presentationLinkbase.concepts.forEach((concept) => {
-        const conceptTree = this.buildConceptTree(concept, 0, periodStartDate, periodEndDate);
+        const conceptTree = this.buildConceptTree(concept, 0, periodStartDate, periodEndDate, roleInfo);
         if (conceptTree) {
           conceptTrees.push(conceptTree);
         }
       });
     }
+    const hypercubeRole = hypercubeData == null ? void 0 : hypercubeData.roles.find((hr) => hr.roleId === role.id);
+    if (hypercubeRole) {
+      console.log(`🏷️ Found matching hypercube role "${role.id}"`);
+    } else {
+      console.log(`❌ No hypercube role found for "${role.id}"`);
+    }
+    const columns = this.generateDefaultColumnsForRole(role, periodStartDate || "2025-01-01", periodEndDate || "2025-12-31", hypercubeRole, nonAbstractConcepts, periodTypes);
     return {
       id: role.id,
       title,
       description: `Section for ${title}`,
       concepts: conceptTrees,
+      columns,
       expanded: false
     };
   }
   /**
    * Build concept tree from XBRL presentation concept
    */
-  static buildConceptTree(concept, level, periodStartDate, periodEndDate) {
+  static buildConceptTree(concept, level, periodStartDate, periodEndDate, roleInfo) {
     const label = this.getPreferredLabel(concept.labels);
     const fields = [];
     if (!concept.elementAbstract) {
-      const field = this.createFieldFromConcept(concept, periodStartDate, periodEndDate);
-      if (field) {
-        fields.push(field);
+      let shouldCreateField = true;
+      if ((roleInfo == null ? void 0 : roleInfo.periodTypes) && roleInfo.periodTypes.size > 1) {
+        if (concept.periodType === "instant") {
+          shouldCreateField = false;
+        }
+      }
+      if (shouldCreateField) {
+        let columnId;
+        if (!(roleInfo == null ? void 0 : roleInfo.periodTypes) || roleInfo.periodTypes.size === 0) {
+          columnId = "default";
+        } else if (roleInfo.periodTypes.size === 1 && roleInfo.periodTypes.has("instant")) {
+          columnId = "instant";
+        } else if (roleInfo.periodTypes.size === 1 && roleInfo.periodTypes.has("duration")) {
+          columnId = "duration";
+        } else {
+          columnId = "period";
+        }
+        const field = this.createFieldFromConcept(concept, periodStartDate, periodEndDate, columnId);
+        if (field)
+          fields.push(field);
       }
     }
     const children = [];
     if (concept.children && concept.children.length > 0) {
       concept.children.forEach((child) => {
-        const childTree = this.buildConceptTree(child, level + 1, periodStartDate, periodEndDate);
+        const childTree = this.buildConceptTree(child, level + 1, periodStartDate, periodEndDate, roleInfo);
         if (childTree) {
           children.push(childTree);
         }
       });
     }
     return {
-      id: concept.id,
+      id: this.createUniqueConceptId(concept),
+      // Use unique ID for form management
+      originalConceptId: concept.id,
+      // Store original for submission data
       name: concept.conceptName,
       label,
       description: `${concept.conceptName} (${concept.type})`,
       level,
       children,
       fields,
-      collapsed: level > 0
+      collapsed: level > 0,
       // Collapse nested levels by default
+      abstract: concept.elementAbstract,
+      periodType: concept.periodType
     };
   }
   /**
    * Create form field from XBRL concept
    */
-  static createFieldFromConcept(concept, periodStartDate, periodEndDate) {
+  static createFieldFromConcept(concept, periodStartDate, periodEndDate, forcedColumnId) {
     const fieldType = this.mapXBRLTypeToFieldType(concept.type);
     const label = this.getPreferredLabel(concept.labels);
+    let columnId;
+    if (forcedColumnId) {
+      columnId = forcedColumnId;
+    } else {
+      if (concept.periodType === "instant") {
+        columnId = "instant";
+      } else if (concept.periodType === "duration") {
+        columnId = "duration";
+      } else {
+        columnId = "default";
+      }
+    }
     const field = {
-      id: `${concept.id}_field`,
+      id: `${concept.id}_${columnId}_field`,
       conceptId: concept.id,
-      columnId: "default",
-      // Default column, will be expanded later
+      columnId,
       type: fieldType,
       label,
       placeholder: `Enter ${label.toLowerCase()}`,
@@ -660,6 +721,238 @@ class XBRLFormBuilder {
       return terse.label;
     return labels[0].label;
   }
+  /**
+   * Assign appropriate column IDs to fields based on section's generated columns
+   */
+  static assignFieldColumnIds(section) {
+    if (!section.columns || section.columns.length === 0) {
+      return;
+    }
+    const columnIds = section.columns.map((col) => col.id);
+    section.concepts.forEach((conceptTree) => {
+      this.assignColumnIdsToConceptFields(conceptTree, columnIds);
+    });
+  }
+  /**
+   * Recursively assign column IDs to fields in a concept tree
+   */
+  static assignColumnIdsToConceptFields(conceptTree, columnIds) {
+    conceptTree.fields = conceptTree.fields.filter((field) => {
+      return columnIds.includes(field.columnId);
+    });
+    if (conceptTree.children) {
+      conceptTree.children.forEach((child) => {
+        this.assignColumnIdsToConceptFields(child, columnIds);
+      });
+    }
+  }
+  /**
+   * Count total fields in a concept tree recursively
+   */
+  static countFieldsInTree(conceptTree) {
+    let count = conceptTree.fields.length;
+    if (conceptTree.children) {
+      conceptTree.children.forEach((child) => {
+        count += this.countFieldsInTree(child);
+      });
+    }
+    return count;
+  }
+  /**
+   * Get all non-abstract concepts from a role recursively
+   */
+  static getAllNonAbstractConcepts(role) {
+    var _a;
+    const nonAbstractConcepts = [];
+    if ((_a = role.presentationLinkbase) == null ? void 0 : _a.concepts) {
+      role.presentationLinkbase.concepts.forEach((concept) => {
+        this.collectNonAbstractConcepts(concept, nonAbstractConcepts);
+      });
+    }
+    return nonAbstractConcepts;
+  }
+  /**
+   * Recursively collect non-abstract concepts from a concept tree
+   */
+  static collectNonAbstractConcepts(concept, collection) {
+    if (!concept.elementAbstract) {
+      collection.push(concept);
+    }
+    if (concept.children && concept.children.length > 0) {
+      concept.children.forEach((child) => {
+        this.collectNonAbstractConcepts(child, collection);
+      });
+    }
+  }
+  /**
+   * Generate default columns based on period types of non-abstract concepts in a role
+   */
+  static generateDefaultColumnsForRole(role, periodStartDate, periodEndDate, hypercubeRole, nonAbstractConcepts, rolePeriodTypes) {
+    var _a, _b, _c, _d, _e;
+    const concepts = nonAbstractConcepts || this.getAllNonAbstractConcepts(role);
+    const periodTypes = rolePeriodTypes || new Set(
+      concepts.filter((concept) => concept.periodType).map((concept) => concept.periodType)
+    );
+    console.log(`📊 Analyzing role "${role.role}" with ${concepts.length} non-abstract concepts`);
+    if (concepts.length === 0) {
+      console.log("📊 No non-abstract concepts found, using default column");
+      return [{
+        id: "default",
+        title: "Value",
+        description: "Default value column",
+        type: "base",
+        order: 0,
+        removable: false
+      }];
+    }
+    let dimensionInfo = null;
+    if (((_a = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _a.length) === 1) {
+      const item = hypercubeRole.items[0];
+      console.log(`🔍 Processing hypercube item for role "${role.role}":`, {
+        itemId: item.id,
+        conceptIds: ((_b = item.conceptIds) == null ? void 0 : _b.length) || 0,
+        dimensions: item.dimensions.length
+      });
+      if (item.dimensions.length === 1) {
+        const dimension = item.dimensions[0];
+        console.log(`📊 Found single dimension:`, {
+          id: dimension.id,
+          conceptName: dimension.conceptName,
+          membersCount: dimension.members.length
+        });
+        if (dimension.members.length > 0) {
+          const axisLabel = ((_c = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _c.label) || dimension.conceptName;
+          const firstMember = dimension.members[0];
+          const memberLabel = ((_d = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _d.label) || firstMember.conceptName;
+          dimensionInfo = {
+            axisId: dimension.id,
+            axisLabel,
+            memberId: firstMember.id,
+            memberLabel,
+            dimensionKey: `${axisLabel} | ${memberLabel}`,
+            dimensionIdKey: `${dimension.id} | ${firstMember.id}`
+          };
+          console.log(`📊 Generated dimension info:`, dimensionInfo);
+        }
+      } else {
+        console.log(`⚠️ Multiple dimensions found (${item.dimensions.length}), skipping for now`);
+      }
+    } else if (((_e = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _e.length) && hypercubeRole.items.length > 1) {
+      console.log(`⚠️ Multiple items found (${hypercubeRole.items.length}), skipping for now`);
+    }
+    console.log(`📅 Found period types: ${Array.from(periodTypes).join(", ")}`);
+    const columns = [];
+    if (periodTypes.size === 0) {
+      console.log("📅 No period types found, using default column");
+      const columnTitle = dimensionInfo ? `${dimensionInfo.memberLabel}` : "Value";
+      columns.push({
+        id: "default",
+        title: columnTitle,
+        description: "Default value column",
+        type: dimensionInfo ? "dimension" : "base",
+        dimensionData: dimensionInfo ? {
+          dimensionId: "default",
+          axisId: dimensionInfo.axisId,
+          memberId: dimensionInfo.memberId,
+          memberValue: dimensionInfo.memberLabel,
+          memberLabel: dimensionInfo.memberLabel,
+          axis: dimensionInfo.axisLabel,
+          axisLabel: dimensionInfo.axisLabel,
+          memberKey: dimensionInfo.dimensionKey,
+          dimensionIdKey: dimensionInfo.dimensionIdKey
+        } : void 0,
+        order: 0,
+        removable: false
+      });
+    } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
+      console.log("📅 All concepts are instant type, creating single column");
+      const columnTitle = dimensionInfo ? `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)})` : `As of ${this.formatDateForDisplay(periodStartDate)}`;
+      columns.push({
+        id: "instant",
+        title: columnTitle,
+        description: `Values as of ${periodStartDate}`,
+        type: dimensionInfo ? "dimension" : "base",
+        dimensionData: dimensionInfo ? {
+          dimensionId: "instant",
+          axisId: dimensionInfo.axisId,
+          memberId: dimensionInfo.memberId,
+          memberValue: dimensionInfo.memberLabel,
+          memberLabel: dimensionInfo.memberLabel,
+          axis: dimensionInfo.axisLabel,
+          axisLabel: dimensionInfo.axisLabel,
+          memberKey: dimensionInfo.dimensionKey,
+          dimensionIdKey: dimensionInfo.dimensionIdKey
+        } : void 0,
+        order: 0,
+        removable: false
+      });
+    } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
+      console.log("📅 All concepts are duration type, creating single column with period range");
+      const columnTitle = dimensionInfo ? `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)})` : `${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)}`;
+      columns.push({
+        id: "duration",
+        title: columnTitle,
+        description: `Period: ${periodStartDate} to ${periodEndDate}`,
+        type: dimensionInfo ? "dimension" : "base",
+        dimensionData: dimensionInfo ? {
+          dimensionId: "duration",
+          axisId: dimensionInfo.axisId,
+          memberId: dimensionInfo.memberId,
+          memberValue: dimensionInfo.memberLabel,
+          memberLabel: dimensionInfo.memberLabel,
+          axis: dimensionInfo.axisLabel,
+          axisLabel: dimensionInfo.axisLabel,
+          memberKey: dimensionInfo.dimensionKey,
+          dimensionIdKey: dimensionInfo.dimensionIdKey
+        } : void 0,
+        order: 0,
+        removable: false
+      });
+      console.log("📅 Created duration column:", columns.map((c2) => ({ id: c2.id, title: c2.title })));
+    } else {
+      console.log("📅 Mixed period types found, creating single column with period range");
+      const columnTitle = dimensionInfo ? `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)})` : `${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)}`;
+      columns.push({
+        id: "period",
+        title: columnTitle,
+        description: `Period: ${periodStartDate} to ${periodEndDate}`,
+        type: dimensionInfo ? "dimension" : "base",
+        dimensionData: dimensionInfo ? {
+          dimensionId: "period",
+          axisId: dimensionInfo.axisId,
+          memberId: dimensionInfo.memberId,
+          memberValue: dimensionInfo.memberLabel,
+          memberLabel: dimensionInfo.memberLabel,
+          axis: dimensionInfo.axisLabel,
+          axisLabel: dimensionInfo.axisLabel,
+          memberKey: dimensionInfo.dimensionKey,
+          dimensionIdKey: dimensionInfo.dimensionIdKey
+        } : void 0,
+        order: 0,
+        removable: false
+      });
+    }
+    if (dimensionInfo) {
+      console.log(`📊 Applied dimension to ${columns.length} columns: ${dimensionInfo.dimensionKey}`);
+    }
+    console.log(`📊 Generated ${columns.length} columns for role "${role.role}":`, columns.map((c2) => c2.title));
+    return columns;
+  }
+  /**
+   * Format date for display in column headers
+   */
+  static formatDateForDisplay(dateString) {
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    } catch {
+      return dateString;
+    }
+  }
   /**
    * Extract entity name from entrypoint URL
    */
@@ -698,15 +991,15 @@ class XBRLFormBuilder {
     }];
   }
 }
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$3(target, key, result);
+    __defProp$4(target, key, result);
   return result;
 };
 let JupiterFormField = class extends LitElement {
@@ -715,6 +1008,7 @@ let JupiterFormField = class extends LitElement {
     this.value = null;
     this.disabled = false;
     this.locale = "en-US";
+    this.hideLabel = false;
     this._errors = [];
     this._touched = false;
   }
@@ -783,10 +1077,14 @@ let JupiterFormField = class extends LitElement {
     const hasErrors = this._errors.some((e2) => e2.severity === "error");
     const hasWarnings = this._errors.some((e2) => e2.severity === "warning");
     const cssClass = `field-input ${hasErrors ? "error" : hasWarnings ? "warning" : ""}`;
+    const fieldId = `${this.conceptId}__${this.columnId}`;
+    const fieldName = `data[${this.conceptId}][${this.columnId}]`;
     switch (this.field.type) {
       case "textarea":
         return html`
           <textarea
+            id="${fieldId}"
+            name="${fieldName}"
             class="${cssClass}"
             .value="${this.value || ""}"
             ?disabled="${this.disabled || this.field.disabled}"
@@ -799,6 +1097,8 @@ let JupiterFormField = class extends LitElement {
       case "select":
         return html`
           <select
+            id="${fieldId}"
+            name="${fieldName}"
             class="${cssClass}"
             .value="${this.value || ""}"
             ?disabled="${this.disabled || this.field.disabled}"
@@ -822,6 +1122,8 @@ let JupiterFormField = class extends LitElement {
         return html`
           <div class="checkbox-container">
             <input
+              id="${fieldId}"
+              name="${fieldName}"
               type="checkbox"
               class="field-input"
               .checked="${Boolean(this.value)}"
@@ -836,6 +1138,8 @@ let JupiterFormField = class extends LitElement {
       default:
         return html`
           <input
+            id="${fieldId}"
+            name="${fieldName}"
             type="${this._getInputType()}"
             class="${cssClass}"
             .value="${this.value || ""}"
@@ -870,7 +1174,7 @@ let JupiterFormField = class extends LitElement {
     }
   }
   render() {
-    const showLabel = this.field.type !== "boolean";
+    const showLabel = !this.hideLabel && this.field.type !== "boolean";
     return html`
       <div class="field-container">
         ${showLabel ? html`
@@ -897,7 +1201,11 @@ let JupiterFormField = class extends LitElement {
 JupiterFormField.styles = css`
     :host {
       display: block;
-      margin-bottom: 8px;
+      margin-bottom: 0px; /* Remove bottom margin for table layout */
+    }
+
+    :host([hideLabel]) {
+      margin-bottom: 0px;
     }
 
     .field-container {
@@ -919,10 +1227,10 @@ JupiterFormField.styles = css`
 
     .field-input {
       width: 100%;
-      padding: 8px 12px;
+      padding: 6px 8px; /* Reduced padding for table cells */
       border: 1px solid var(--jupiter-border-color, #ddd);
       border-radius: 4px;
-      font-size: 14px;
+      font-size: 13px; /* Slightly smaller font for table */
       font-family: inherit;
       background: var(--jupiter-input-background, #fff);
       color: var(--jupiter-text-primary, #333);
@@ -996,42 +1304,45 @@ JupiterFormField.styles = css`
       width: auto;
     }
   `;
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: Object })
 ], JupiterFormField.prototype, "field", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: String })
 ], JupiterFormField.prototype, "conceptId", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: String })
 ], JupiterFormField.prototype, "columnId", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2()
 ], JupiterFormField.prototype, "value", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: Boolean })
 ], JupiterFormField.prototype, "disabled", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: String })
 ], JupiterFormField.prototype, "locale", 2);
-__decorateClass$3([
+__decorateClass$4([
+  n2({ type: Boolean })
+], JupiterFormField.prototype, "hideLabel", 2);
+__decorateClass$4([
   r()
 ], JupiterFormField.prototype, "_errors", 2);
-__decorateClass$3([
+__decorateClass$4([
   r()
 ], JupiterFormField.prototype, "_touched", 2);
-JupiterFormField = __decorateClass$3([
+JupiterFormField = __decorateClass$4([
   t$1("jupiter-form-field")
 ], JupiterFormField);
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$2(target, key, result);
+    __defProp$3(target, key, result);
   return result;
 };
 let JupiterConceptTree = class extends LitElement {
@@ -1041,11 +1352,18 @@ let JupiterConceptTree = class extends LitElement {
     this.formData = {};
     this.disabled = false;
     this.locale = "en-US";
+    this.expandedConcepts = /* @__PURE__ */ new Set();
     this._expanded = true;
   }
   connectedCallback() {
     super.connectedCallback();
-    this._expanded = !this.concept.collapsed;
+    this._expanded = this.expandedConcepts.has(this.concept.id);
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("expandedConcepts")) {
+      this._expanded = this.expandedConcepts.has(this.concept.id);
+    }
   }
   _toggleExpanded() {
     this._expanded = !this._expanded;
@@ -1058,7 +1376,8 @@ let JupiterConceptTree = class extends LitElement {
     }));
   }
   _getFieldForColumn(columnId) {
-    return this.concept.fields.find((field) => field.columnId === columnId);
+    var _a;
+    return (_a = this.concept.fields) == null ? void 0 : _a.find((field) => field.columnId === columnId);
   }
   _getFieldValue(field) {
     var _a;
@@ -1074,104 +1393,103 @@ let JupiterConceptTree = class extends LitElement {
   render() {
     const hasChildren = this.concept.children && this.concept.children.length > 0;
     const level = this.concept.level || 0;
+    const isAbstract = this.concept.abstract || false;
     return html`
-      <div class="concept-row" style="--level: ${level}">
-        <!-- Concept Label Column -->
-        <div class="concept-header" @click="${this._toggleExpanded}">
+      <!-- Concept Name Cell (Left Column) -->
+      <td class="concept-name-cell ${isAbstract ? "abstract" : hasChildren ? "" : "leaf"}">
+        <div class="concept-content" style="--level: ${level}">
           <div class="concept-indent"></div>
-          <div class="concept-toggle ${hasChildren ? this._expanded ? "expanded" : "" : "no-children"}">
+          <div class="concept-toggle ${hasChildren ? this._expanded ? "expanded" : "" : "no-children"}"
+               @click="${this._toggleExpanded}">
             ${hasChildren ? "▶" : ""}
           </div>
-          <div class="concept-label">
+          <div class="concept-label" 
+               @click="${this._toggleExpanded}"
+               title="${this.concept.id}${this.concept.description ? " - " + this.concept.description : ""}">
             ${this.concept.label}
-            ${this.concept.description ? html`
-              <span class="concept-description">${this.concept.description}</span>
-            ` : ""}
           </div>
         </div>
+      </td>
 
-        <!-- Field Columns -->
-        ${this.columns.map((column) => {
+      <!-- Input Field Cells (Period Columns) - Only for non-abstract concepts -->
+      ${this.columns.map((column) => {
       const field = this._getFieldForColumn(column.id);
+      const shouldShowField = !isAbstract && field;
       return html`
-            <div class="field-cell ${!field ? "empty" : ""}">
-              ${field ? html`
-                <jupiter-form-field
-                  .field="${field}"
-                  .conceptId="${this.concept.id}"
-                  .columnId="${column.id}"
-                  .value="${this._getFieldValue(field)}"
-                  .disabled="${this.disabled}"
-                  .locale="${this.locale}"
-                  @field-change="${this._handleFieldChange}"
-                ></jupiter-form-field>
-              ` : ""}
-            </div>
-          `;
+          <td class="field-cell ${!shouldShowField ? "empty" : ""} ${isAbstract ? "abstract-row" : ""}">
+            ${shouldShowField ? html`
+              <jupiter-form-field
+                .field="${field}"
+                .conceptId="${this.concept.id}"
+                .columnId="${column.id}"
+                .value="${this._getFieldValue(field)}"
+                .disabled="${this.disabled}"
+                .locale="${this.locale}"
+                .hideLabel="${true}"
+                @field-change="${this._handleFieldChange}"
+              ></jupiter-form-field>
+            ` : ""}
+          </td>
+        `;
     })}
-      </div>
-
-      <!-- Children Concepts -->
-      ${hasChildren ? html`
-        <div class="children ${!this._expanded ? "collapsed" : ""}">
-          ${this.concept.children.map((child) => html`
-            <jupiter-concept-tree
-              .concept="${child}"
-              .columns="${this.columns}"
-              .formData="${this.formData}"
-              .disabled="${this.disabled}"
-              .locale="${this.locale}"
-              @field-change="${this._handleFieldChange}"
-              @concept-expand="${(e2) => {
-      e2.stopPropagation();
-      this.dispatchEvent(new CustomEvent("concept-expand", { detail: e2.detail, bubbles: true }));
-    }}"
-            ></jupiter-concept-tree>
-          `)}
-        </div>
-      ` : ""}
     `;
   }
 };
 JupiterConceptTree.styles = css`
     :host {
-      display: block;
-    }
-
-    .concept-row {
+      /* Component renders table cells directly */
       display: contents;
     }
 
-    .concept-header {
-      display: flex;
-      align-items: center;
-      padding: 8px 12px;
-      background: var(--jupiter-concept-background, #f8f9fa);
+    .concept-name-cell {
+      vertical-align: top;
+      padding: 2px 4px;
       border: 1px solid var(--jupiter-border-color, #ddd);
       border-bottom: none;
-      font-weight: 500;
-      cursor: pointer;
-      user-select: none;
+      background: var(--jupiter-concept-background, #f8f9fa);
+      position: sticky;
+      left: 0;
+      z-index: 1;
+      width: 300px;
+      min-width: 300px;
+      max-width: 300px;
     }
 
-    .concept-header:hover {
-      background: var(--jupiter-concept-hover-background, #e9ecef);
+    .concept-name-cell.abstract {
+      background: var(--jupiter-abstract-background, #f0f2f5);
+      font-weight: 600;
+    }
+
+    .concept-name-cell.leaf {
+      background: var(--jupiter-leaf-background, #fff);
+      font-weight: 400;
+    }
+
+    .concept-content {
+      display: flex;
+      align-items: center;
+      min-height: 28px;
+      font-size: 13px;
+      line-height: 1.3;
+      width: 100%;
+      overflow: hidden;
     }
 
     .concept-indent {
-      width: calc(var(--level, 0) * 20px);
+      width: calc(var(--level, 0) * 16px);
       flex-shrink: 0;
     }
 
     .concept-toggle {
-      width: 16px;
-      height: 16px;
-      margin-right: 8px;
+      width: 14px;
+      height: 14px;
+      margin-right: 6px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 12px;
+      font-size: 10px;
       transition: transform 0.2s ease;
+      cursor: pointer;
     }
 
     .concept-toggle.expanded {
@@ -1185,71 +1503,390 @@ JupiterConceptTree.styles = css`
     .concept-label {
       flex: 1;
       color: var(--jupiter-text-primary, #333);
-    }
-
-    .concept-description {
-      font-size: 12px;
-      color: var(--jupiter-text-secondary, #666);
-      font-weight: normal;
-      margin-left: 8px;
-    }
-
-    .concept-fields {
-      display: contents;
+      cursor: pointer;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      hyphens: auto;
+      line-height: 1.3;
+      min-width: 0; /* Allows flex item to shrink below content size */
     }
 
     .field-cell {
+      vertical-align: middle;
+      padding: 2px 6px;
       border: 1px solid var(--jupiter-border-color, #ddd);
       border-bottom: none;
-      padding: 8px;
       background: var(--jupiter-cell-background, #fff);
-      min-height: 40px;
-      display: flex;
-      align-items: center;
-    }
-
-    .field-cell:last-child {
-      border-right: 1px solid var(--jupiter-border-color, #ddd);
+      min-height: 28px;
+      text-align: center;
+      min-width: 180px;
+      width: 180px;
     }
 
     .field-cell.empty {
       background: var(--jupiter-empty-cell-background, #f8f9fa);
     }
 
-    .children {
-      display: contents;
+    .field-cell.abstract-row {
+      background: var(--jupiter-abstract-cell-background, #f0f2f5);
     }
 
-    .children.collapsed {
+    /* Children are rendered as separate table rows, not nested */
+    .children-wrapper {
       display: none;
     }
-
-    .concept-row:last-of-type .concept-header,
-    .concept-row:last-of-type .field-cell {
-      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
-    }
   `;
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: Object })
 ], JupiterConceptTree.prototype, "concept", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: Array })
 ], JupiterConceptTree.prototype, "columns", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: Object })
 ], JupiterConceptTree.prototype, "formData", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: Boolean })
 ], JupiterConceptTree.prototype, "disabled", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: String })
 ], JupiterConceptTree.prototype, "locale", 2);
-__decorateClass$2([
+__decorateClass$3([
+  n2({ type: Set })
+], JupiterConceptTree.prototype, "expandedConcepts", 2);
+__decorateClass$3([
   r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
-JupiterConceptTree = __decorateClass$2([
+JupiterConceptTree = __decorateClass$3([
   t$1("jupiter-concept-tree")
 ], JupiterConceptTree);
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$2(target, key, result);
+  return result;
+};
+let JupiterAddColumnDialog = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.periodType = "duration";
+    this.open = false;
+    this._startDate = "";
+    this._endDate = "";
+    this._instantDate = "";
+    this._selectedType = "duration";
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("open") && this.open) {
+      this._resetForm();
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._resetForm();
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("open") && this.open) {
+      this._resetForm();
+    }
+  }
+  _resetForm() {
+    const today = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+    this._startDate = today;
+    this._endDate = today;
+    this._instantDate = today;
+    this._selectedType = "duration";
+  }
+  _handleCancel() {
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("dialog-cancel", { bubbles: true }));
+  }
+  _handleConfirm() {
+    if (!this._isFormValid())
+      return;
+    const request = {
+      periodType: this.periodType === "mixed" ? this._selectedType : this.periodType
+    };
+    if (this.periodType === "instant" || this.periodType === "mixed" && this._selectedType === "instant") {
+      request.instantDate = this._instantDate;
+    } else {
+      request.startDate = this._startDate;
+      request.endDate = this._endDate;
+    }
+    this.dispatchEvent(new CustomEvent("column-add", {
+      detail: request,
+      bubbles: true
+    }));
+  }
+  _isFormValid() {
+    if (this.periodType === "mixed") {
+      if (this._selectedType === "instant") {
+        return !!this._instantDate;
+      } else {
+        return !!this._startDate && !!this._endDate && this._startDate <= this._endDate;
+      }
+    } else if (this.periodType === "duration") {
+      return !!this._startDate && !!this._endDate && this._startDate <= this._endDate;
+    } else if (this.periodType === "instant") {
+      return !!this._instantDate;
+    }
+    return false;
+  }
+  _handleStartDateChange(e2) {
+    this._startDate = e2.target.value;
+  }
+  _handleEndDateChange(e2) {
+    this._endDate = e2.target.value;
+  }
+  _handleSelectedTypeChange(e2) {
+    this._selectedType = e2.target.value;
+  }
+  _handleInstantDateChange(e2) {
+    this._instantDate = e2.target.value;
+  }
+  render() {
+    if (!this.open)
+      return html``;
+    const isValid = this._isFormValid();
+    return html`
+      <div class="dialog" @click="${(e2) => e2.stopPropagation()}">
+        <div class="dialog-header">
+          <h2 class="dialog-title">Add Column</h2>
+          <p class="dialog-description">
+            ${this.periodType === "instant" ? "Add a new instant period column by specifying the date." : this.periodType === "duration" ? "Add a new duration period column by specifying the start and end dates." : "This section contains both instant and duration concepts. Choose the type of column to add."}
+          </p>
+        </div>
+
+        <div class="dialog-content">
+          ${this.periodType === "mixed" ? html`
+            <div class="form-group">
+              <label class="form-label required">Column Type</label>
+              <select 
+                class="form-input"
+                .value="${this._selectedType}"
+                @change="${this._handleSelectedTypeChange}"
+                required
+              >
+                <option value="instant">Instant (single date)</option>
+                <option value="duration">Duration (start and end dates)</option>
+              </select>
+            </div>
+          ` : ""}
+
+          ${this.periodType === "instant" || this.periodType === "mixed" && this._selectedType === "instant" ? html`
+            <div class="form-group">
+              <label class="form-label required">Instant Date</label>
+              <input 
+                type="date" 
+                class="form-input"
+                .value="${this._instantDate}"
+                @change="${this._handleInstantDateChange}"
+                required
+              />
+            </div>
+          ` : html`
+            <div class="form-group">
+              <label class="form-label required">Start Period Date</label>
+              <input 
+                type="date" 
+                class="form-input"
+                .value="${this._startDate}"
+                @change="${this._handleStartDateChange}"
+                required
+              />
+            </div>
+            <div class="form-group">
+              <label class="form-label required">End Period Date</label>
+              <input 
+                type="date" 
+                class="form-input"
+                .value="${this._endDate}"
+                @change="${this._handleEndDateChange}"
+                required
+              />
+            </div>
+          `}
+        </div>
+
+        <div class="dialog-actions">
+          <button class="btn btn-cancel" @click="${this._handleCancel}">
+            Cancel
+          </button>
+          <button 
+            class="btn btn-primary" 
+            ?disabled="${!isValid}"
+            @click="${this._handleConfirm}"
+          >
+            Add Column
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+JupiterAddColumnDialog.styles = css`
+    :host {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s ease, visibility 0.3s ease;
+    }
+
+    :host([open]) {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .dialog {
+      background: white;
+      border-radius: 8px;
+      padding: 24px;
+      min-width: 400px;
+      max-width: 500px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+      transform: scale(0.9);
+      transition: transform 0.3s ease;
+    }
+
+    :host([open]) .dialog {
+      transform: scale(1);
+    }
+
+    .dialog-header {
+      margin-bottom: 20px;
+    }
+
+    .dialog-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--jupiter-text-primary, #333);
+      margin: 0 0 8px 0;
+    }
+
+    .dialog-description {
+      font-size: 14px;
+      color: var(--jupiter-text-secondary, #666);
+      margin: 0;
+    }
+
+    .dialog-content {
+      margin-bottom: 24px;
+    }
+
+    .form-group {
+      margin-bottom: 16px;
+    }
+
+    .form-label {
+      display: block;
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: var(--jupiter-text-primary, #333);
+      font-size: 14px;
+    }
+
+    .form-label.required::after {
+      content: ' *';
+      color: var(--jupiter-error-color, #d32f2f);
+    }
+
+    .form-input {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 12px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      font-size: 14px;
+      font-family: inherit;
+      transition: border-color 0.2s ease;
+    }
+
+    .form-input:focus {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #007bff);
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    }
+
+    select.form-input {
+      cursor: pointer;
+      background-color: white;
+    }
+
+    .dialog-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+    }
+
+    .btn {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+
+    .btn-cancel {
+      background: var(--jupiter-neutral-background, #f5f5f5);
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .btn-cancel:hover {
+      background: var(--jupiter-neutral-background-hover, #e0e0e0);
+    }
+
+    .btn-primary {
+      background: var(--jupiter-primary-color, #667eea);
+      color: white;
+    }
+
+    .btn-primary:hover {
+      background: var(--jupiter-primary-color-dark, #5a6fd8);
+    }
+
+    .btn-primary:disabled {
+      background: var(--jupiter-disabled-background, #ccc);
+      cursor: not-allowed;
+    }
+  `;
+__decorateClass$2([
+  n2({ type: String })
+], JupiterAddColumnDialog.prototype, "periodType", 2);
+__decorateClass$2([
+  n2({ type: Boolean })
+], JupiterAddColumnDialog.prototype, "open", 2);
+__decorateClass$2([
+  r()
+], JupiterAddColumnDialog.prototype, "_startDate", 2);
+__decorateClass$2([
+  r()
+], JupiterAddColumnDialog.prototype, "_endDate", 2);
+__decorateClass$2([
+  r()
+], JupiterAddColumnDialog.prototype, "_instantDate", 2);
+__decorateClass$2([
+  r()
+], JupiterAddColumnDialog.prototype, "_selectedType", 2);
+JupiterAddColumnDialog = __decorateClass$2([
+  t$1("jupiter-add-column-dialog")
+], JupiterAddColumnDialog);
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -1270,10 +1907,58 @@ let JupiterFormSection = class extends LitElement {
     this.collapsible = true;
     this.locale = "en-US";
     this._expanded = true;
+    this._showAddColumnDialog = false;
+    this._sectionPeriodType = "duration";
+    this._expandedConcepts = /* @__PURE__ */ new Set();
   }
   connectedCallback() {
     super.connectedCallback();
     this._expanded = this.section.expanded !== false;
+    this._determinePeriodType();
+  }
+  _determinePeriodType() {
+    const nonAbstractConcepts = this._getAllNonAbstractConcepts(this.section.concepts);
+    console.log(`🔍 Section ${this.section.id} (${this.section.title}): Found ${nonAbstractConcepts.length} non-abstract concepts`);
+    console.log(`📝 All concepts in section:`, this.section.concepts.map((c2) => ({
+      name: c2.name,
+      abstract: c2.abstract,
+      periodType: c2.periodType
+    })));
+    if (nonAbstractConcepts.length === 0) {
+      this._sectionPeriodType = "duration";
+      console.log(`📊 Section ${this.section.id}: No concepts, defaulting to duration`);
+      return;
+    }
+    const periodTypes = new Set(nonAbstractConcepts.map((c2) => c2.periodType).filter(Boolean));
+    console.log(`🏷️ Section ${this.section.id}: Found period types:`, Array.from(periodTypes));
+    console.log(
+      `📝 Section ${this.section.id}: Non-abstract concepts and their period types:`,
+      nonAbstractConcepts.map((c2) => ({ name: c2.name, periodType: c2.periodType, abstract: c2.abstract }))
+    );
+    if (periodTypes.size === 0) {
+      this._sectionPeriodType = "duration";
+      console.log(`📊 Section ${this.section.id}: No period types defined, defaulting to duration`);
+    } else if (periodTypes.size === 1) {
+      const singleType = Array.from(periodTypes)[0];
+      this._sectionPeriodType = singleType === "instant" ? "instant" : "duration";
+      console.log(`📊 Section ${this.section.id}: Single period type '${singleType}', setting to '${this._sectionPeriodType}'`);
+    } else {
+      this._sectionPeriodType = "mixed";
+      console.log(`📊 Section ${this.section.id}: Mixed period types, setting to 'mixed'`);
+    }
+    console.log(`✅ Section ${this.section.id}: Final period type: ${this._sectionPeriodType}`);
+  }
+  _getAllNonAbstractConcepts(concepts) {
+    const result = [];
+    for (const concept of concepts) {
+      if (!concept.abstract) {
+        result.push(concept);
+      }
+      if (concept.children) {
+        result.push(...this._getAllNonAbstractConcepts(concept.children));
+      }
+    }
+    return result;
   }
   _toggleExpanded() {
     if (!this.collapsible)
@@ -1289,7 +1974,58 @@ let JupiterFormSection = class extends LitElement {
   }
   _handleRemoveColumn(columnId) {
     this.dispatchEvent(new CustomEvent("column-remove", {
-      detail: { columnId },
+      detail: {
+        columnId,
+        sectionId: this.section.id
+      },
+      bubbles: true
+    }));
+  }
+  _handleAddColumn() {
+    const buttonPeriodType = this._determineButtonPeriodType();
+    this._sectionPeriodType = buttonPeriodType;
+    this._showAddColumnDialog = true;
+  }
+  _determineButtonPeriodType() {
+    const allNonAbstractConcepts = this._getAllNonAbstractConcepts(this.section.concepts);
+    if (allNonAbstractConcepts.length === 0) {
+      return "duration";
+    }
+    const periodTypes = new Set(
+      allNonAbstractConcepts.map((c2) => c2.periodType).filter((periodType) => periodType !== void 0 && periodType !== null)
+    );
+    if (periodTypes.size === 0) {
+      return "duration";
+    } else if (periodTypes.size === 1) {
+      const singleType = Array.from(periodTypes)[0];
+      return singleType === "instant" ? "instant" : "duration";
+    } else {
+      return "mixed";
+    }
+  }
+  _getConceptsWithFields(concepts) {
+    const result = [];
+    for (const concept of concepts) {
+      if (!concept.abstract && concept.fields && concept.fields.length > 0) {
+        result.push(concept);
+      }
+      if (concept.children) {
+        result.push(...this._getConceptsWithFields(concept.children));
+      }
+    }
+    return result;
+  }
+  _handleDialogCancel() {
+    this._showAddColumnDialog = false;
+  }
+  _handleColumnAdd(event) {
+    event.stopPropagation();
+    this._showAddColumnDialog = false;
+    this.dispatchEvent(new CustomEvent("column-add-request", {
+      detail: {
+        sectionId: this.section.id,
+        columnRequest: event.detail
+      },
       bubbles: true
     }));
   }
@@ -1300,8 +2036,26 @@ let JupiterFormSection = class extends LitElement {
       bubbles: true
     }));
   }
+  _flattenConcepts(concepts, expanded = /* @__PURE__ */ new Set()) {
+    const result = [];
+    for (const concept of concepts) {
+      result.push(concept);
+      if (concept.children && concept.children.length > 0 && expanded.has(concept.id)) {
+        const childrenFlattened = this._flattenConcepts(concept.children, expanded);
+        result.push(...childrenFlattened);
+      }
+    }
+    return result;
+  }
   _handleConceptExpand(event) {
     event.stopPropagation();
+    const { conceptId, expanded } = event.detail;
+    if (expanded) {
+      this._expandedConcepts.add(conceptId);
+    } else {
+      this._expandedConcepts.delete(conceptId);
+    }
+    this.requestUpdate();
     this.dispatchEvent(new CustomEvent("concept-expand", {
       detail: event.detail,
       bubbles: true
@@ -1348,7 +2102,7 @@ let JupiterFormSection = class extends LitElement {
         <div class="table-container">
           <table class="form-table">
             <thead class="table-header">
-              <tr>
+              <tr class="header-row">
                 <th class="header-cell concept-column">Concept</th>
                 ${this.columns.map((column) => html`
                   <th class="header-cell ${column.removable ? "removable" : ""}">
@@ -1366,24 +2120,43 @@ let JupiterFormSection = class extends LitElement {
                     ` : ""}
                   </th>
                 `)}
+                <th class="header-cell">
+                  <button class="add-column-btn" @click="${(e2) => {
+      e2.stopPropagation();
+      this._handleAddColumn();
+    }}" title="Add Column">
+                    + Add Column
+                  </button>
+                </th>
               </tr>
             </thead>
             <tbody class="table-body">
-              ${this.section.concepts.map((concept) => html`
-                <jupiter-concept-tree
-                  .concept="${concept}"
-                  .columns="${this.columns}"
-                  .formData="${this.formData}"
-                  .disabled="${this.disabled}"
-                  .locale="${this.locale}"
-                  @field-change="${this._handleFieldChange}"
-                  @concept-expand="${this._handleConceptExpand}"
-                ></jupiter-concept-tree>
+              ${this._flattenConcepts(this.section.concepts, this._expandedConcepts).map((concept) => html`
+                <tr>
+                  <jupiter-concept-tree
+                    .concept="${concept}"
+                    .columns="${this.columns}"
+                    .formData="${this.formData}"
+                    .disabled="${this.disabled}"
+                    .locale="${this.locale}"
+                    .expandedConcepts="${this._expandedConcepts}"
+                    @field-change="${this._handleFieldChange}"
+                    @concept-expand="${this._handleConceptExpand}"
+                  ></jupiter-concept-tree>
+                </tr>
               `)}
             </tbody>
           </table>
         </div>
       </div>
+
+      <!-- Add Column Dialog -->
+      <jupiter-add-column-dialog
+        .periodType="${this._sectionPeriodType}"
+        ?open="${this._showAddColumnDialog}"
+        @dialog-cancel="${this._handleDialogCancel}"
+        @column-add="${this._handleColumnAdd}"
+      ></jupiter-add-column-dialog>
     `;
   }
 };
@@ -1467,7 +2240,8 @@ JupiterFormSection.styles = css`
 
     .form-table {
       width: 100%;
-      border-collapse: collapse;
+      border-collapse: separate;
+      border-spacing: 0;
       background: var(--jupiter-table-background, #fff);
     }
 
@@ -1478,18 +2252,27 @@ JupiterFormSection.styles = css`
       z-index: 1;
     }
 
+    .header-row {
+      /* Table row - no special display needed */
+    }
+
     .header-cell {
-      padding: 12px;
+      padding: 8px 12px;
       text-align: left;
       font-weight: 600;
       color: var(--jupiter-text-primary, #333);
       border: 1px solid var(--jupiter-border-color, #ddd);
       background: var(--jupiter-header-background, #f8f9fa);
-      min-width: 150px;
+      min-width: 180px;
+      width: 180px;
+      font-size: 14px;
+      vertical-align: middle;
     }
 
     .header-cell.concept-column {
+      width: 300px;
       min-width: 300px;
+      max-width: 300px;
       position: sticky;
       left: 0;
       z-index: 2;
@@ -1520,8 +2303,19 @@ JupiterFormSection.styles = css`
       background: var(--jupiter-error-color-dark, #b71c1c);
     }
 
-    .table-body {
-      display: table-row-group;
+    .add-column-btn {
+      background: var(--jupiter-primary-color, #667eea);
+      color: white;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      margin: 8px;
+    }
+
+    .add-column-btn:hover {
+      background: var(--jupiter-primary-color-dark, #5a6fd8);
     }
 
     .empty-section {
@@ -1552,6 +2346,15 @@ __decorateClass$1([
 __decorateClass$1([
   r()
 ], JupiterFormSection.prototype, "_expanded", 2);
+__decorateClass$1([
+  r()
+], JupiterFormSection.prototype, "_showAddColumnDialog", 2);
+__decorateClass$1([
+  r()
+], JupiterFormSection.prototype, "_sectionPeriodType", 2);
+__decorateClass$1([
+  r()
+], JupiterFormSection.prototype, "_expandedConcepts", 2);
 JupiterFormSection = __decorateClass$1([
   t$1("jupiter-form-section")
 ], JupiterFormSection);
@@ -1707,21 +2510,208 @@ let JupiterDynamicForm = class extends LitElement {
     }));
   }
   _handleColumnRemove(event) {
-    const { columnId } = event.detail;
-    this._columns = this._columns.filter((col) => col.id !== columnId);
-    for (const conceptId in this._formData) {
-      if (this._formData[conceptId][columnId] !== void 0) {
-        delete this._formData[conceptId][columnId];
+    const { columnId, sectionId } = event.detail;
+    if (this._currentSchema && sectionId) {
+      const targetSection = this._currentSchema.sections.find((section) => section.id === sectionId);
+      if (targetSection && targetSection.columns) {
+        targetSection.columns = targetSection.columns.filter((col) => col.id !== columnId);
+      }
+    } else {
+      this._columns = this._columns.filter((col) => col.id !== columnId);
+      if (this._currentSchema) {
+        this._currentSchema.sections.forEach((section) => {
+          if (section.columns) {
+            section.columns = section.columns.filter((col) => col.id !== columnId);
+          }
+        });
       }
     }
+    this._removeColumnData(columnId, sectionId);
     this._dirty = true;
     this._validateForm();
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent("column-remove", {
-      detail: { columnId },
+      detail: { columnId, sectionId },
+      bubbles: true
+    }));
+  }
+  _handleColumnAddRequest(event) {
+    const { sectionId, columnRequest } = event.detail;
+    this._addColumnFromRequest(columnRequest, sectionId);
+  }
+  _addColumnFromRequest(request, sectionId) {
+    var _a, _b, _c, _d, _e;
+    const timestamp = Date.now();
+    const newColumnId = `col-${timestamp}`;
+    let title = "";
+    let description = "";
+    if (request.periodType === "instant") {
+      title = request.instantDate || "Instant Date";
+      description = `Instant period: ${request.instantDate}`;
+    } else if (request.periodType === "duration" || request.periodType === "mixed") {
+      title = `${request.startDate} / ${request.endDate}`;
+      description = `Duration period: ${request.startDate} to ${request.endDate}`;
+    }
+    let dimensionData = {
+      dimensionId: "period",
+      memberValue: request.periodType === "instant" ? `instant-${request.instantDate}` : `duration-${request.startDate}-${request.endDate}`,
+      memberLabel: title
+    };
+    if ((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0]) {
+      const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === sectionId);
+      if (((_c = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _c.length) === 1) {
+        const item = hypercubeRole.items[0];
+        if (item.dimensions.length === 1) {
+          const dimension = item.dimensions[0];
+          if (dimension.members.length > 0) {
+            const axisLabel = ((_d = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _d.label) || dimension.conceptName;
+            const firstMember = dimension.members[0];
+            const memberLabel = ((_e = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _e.label) || firstMember.conceptName;
+            const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
+            title = `${memberLabel} ${periodPart}`;
+            dimensionData = {
+              dimensionId: newColumnId,
+              axisId: dimension.id,
+              memberId: firstMember.id,
+              memberValue: memberLabel,
+              memberLabel,
+              axis: axisLabel,
+              axisLabel,
+              memberKey: `${axisLabel} | ${memberLabel}`,
+              dimensionIdKey: `${dimension.id} | ${firstMember.id}`
+            };
+            console.log(`📊 Applied hypercube dimension to new column: ${dimensionData.memberKey}`);
+          }
+        }
+      }
+    }
+    const newColumn = {
+      id: newColumnId,
+      title,
+      description,
+      type: dimensionData.memberKey ? "dimension" : "dimension",
+      order: this._columns.length,
+      removable: true,
+      dimensionData
+    };
+    if (this._currentSchema) {
+      const targetSection = this._currentSchema.sections.find((section) => section.id === sectionId);
+      if (targetSection) {
+        if (!targetSection.columns) {
+          targetSection.columns = [...this._columns];
+        }
+        targetSection.columns = [...targetSection.columns, newColumn];
+      }
+    }
+    this._replicateFieldsForNewColumn(newColumnId, request, sectionId);
+    this._dirty = true;
+    this.requestUpdate();
+    this.dispatchEvent(new CustomEvent("column-add", {
+      detail: { column: newColumn },
       bubbles: true
     }));
   }
+  _removeColumnData(columnId, sectionId) {
+    if (!this._currentSchema)
+      return;
+    if (sectionId) {
+      const targetSection = this._currentSchema.sections.find((section) => section.id === sectionId);
+      if (targetSection) {
+        this._removeColumnDataFromConcepts(targetSection.concepts, columnId);
+      }
+    } else {
+      for (const conceptId in this._formData) {
+        if (this._formData[conceptId][columnId] !== void 0) {
+          delete this._formData[conceptId][columnId];
+        }
+      }
+    }
+  }
+  _removeColumnDataFromConcepts(concepts, columnId) {
+    concepts.forEach((concept) => {
+      if (this._formData[concept.id] && this._formData[concept.id][columnId] !== void 0) {
+        delete this._formData[concept.id][columnId];
+      }
+      if (concept.fields) {
+        concept.fields = concept.fields.filter((field) => field.columnId !== columnId);
+      }
+      if (concept.children) {
+        this._removeColumnDataFromConcepts(concept.children, columnId);
+      }
+    });
+  }
+  _shouldCreateFieldForConcept(concept, request) {
+    if (concept.abstract) {
+      return false;
+    }
+    if (concept.periodType) {
+      if (request.periodType === "instant" && concept.periodType !== "instant") {
+        return false;
+      }
+      if (request.periodType === "duration" && concept.periodType !== "duration") {
+        return false;
+      }
+    }
+    return true;
+  }
+  _replicateFieldsForNewColumn(columnId, request, sectionId) {
+    if (!this._currentSchema)
+      return;
+    const formBuilder = new XBRLFormBuilder();
+    const targetSection = this._currentSchema.sections.find((section) => section.id === sectionId);
+    if (targetSection) {
+      this._replicateFieldsForSection(targetSection.concepts, columnId, request, formBuilder);
+    }
+  }
+  _replicateFieldsForSection(concepts, columnId, request, formBuilder) {
+    concepts.forEach((concept) => {
+      var _a;
+      if (this._shouldCreateFieldForConcept(concept, request)) {
+        const existingField = (_a = concept.fields) == null ? void 0 : _a[0];
+        let field;
+        if (existingField) {
+          field = {
+            id: `${concept.id}_${columnId}`,
+            conceptId: concept.id,
+            columnId,
+            type: existingField.type,
+            label: existingField.label,
+            placeholder: existingField.placeholder,
+            required: existingField.required,
+            disabled: existingField.disabled,
+            validation: existingField.validation,
+            defaultValue: existingField.defaultValue,
+            // Set period dates from the add column request
+            periodStartDate: request.periodType === "instant" ? request.instantDate : request.startDate,
+            periodEndDate: request.periodType === "instant" ? request.instantDate : request.endDate
+          };
+        } else {
+          field = {
+            id: `${concept.id}_${columnId}`,
+            conceptId: concept.id,
+            columnId,
+            type: "text",
+            label: concept.label || concept.name,
+            placeholder: `Enter ${concept.name}`,
+            required: false,
+            disabled: false,
+            validation: [],
+            defaultValue: "",
+            // Set period dates from the add column request
+            periodStartDate: request.periodType === "instant" ? request.instantDate : request.startDate,
+            periodEndDate: request.periodType === "instant" ? request.instantDate : request.endDate
+          };
+        }
+        if (!concept.fields) {
+          concept.fields = [];
+        }
+        concept.fields.push(field);
+      }
+      if (concept.children) {
+        this._replicateFieldsForSection(concept.children, columnId, request, formBuilder);
+      }
+    });
+  }
   _addColumn() {
     const newColumnId = `dim-${Date.now()}`;
     const newColumn = {
@@ -1747,15 +2737,95 @@ let JupiterDynamicForm = class extends LitElement {
   _handleSubmit() {
     this._submitted = true;
     this._validateForm();
+    const submissionData = this._generateSubmissionData();
     this.dispatchEvent(new CustomEvent("form-submit", {
       detail: {
         data: this._formData,
+        submissionData,
+        valid: this._valid,
+        errors: this._errors
+      },
+      bubbles: true
+    }));
+  }
+  _handleSaveDraft() {
+    const draftData = this._generateSubmissionData();
+    this.dispatchEvent(new CustomEvent("form-save-draft", {
+      detail: {
+        data: this._formData,
+        draftData,
         valid: this._valid,
         errors: this._errors
       },
       bubbles: true
     }));
   }
+  _generateSubmissionData() {
+    const submissionData = [];
+    if (!this._currentSchema) {
+      return submissionData;
+    }
+    this._currentSchema.sections.forEach((section) => {
+      this._processConceptsForSubmission(section.concepts, submissionData, section);
+    });
+    return submissionData;
+  }
+  _findColumnById(columnId) {
+    if (!this._currentSchema) {
+      return void 0;
+    }
+    for (const section of this._currentSchema.sections) {
+      if (section.columns) {
+        const column = section.columns.find((col) => col.id === columnId);
+        if (column) {
+          return column;
+        }
+      }
+    }
+    return void 0;
+  }
+  _processConceptsForSubmission(concepts, submissionData, section) {
+    concepts.forEach((concept) => {
+      if (concept.fields && concept.fields.length > 0) {
+        concept.fields.forEach((field) => {
+          var _a, _b, _c;
+          const conceptData = this._formData[concept.id];
+          const fieldValue = conceptData == null ? void 0 : conceptData[field.columnId];
+          if (fieldValue !== void 0 && fieldValue !== null && fieldValue !== "") {
+            const column = this._findColumnById(field.columnId);
+            const submissionEntry = {
+              conceptId: concept.id,
+              value: fieldValue,
+              period: {
+                type: concept.periodType || "duration"
+              }
+            };
+            if (concept.periodType === "instant") {
+              submissionEntry.period.date = field.periodStartDate || this.periodStartDate;
+            } else {
+              submissionEntry.period.startDate = field.periodStartDate || this.periodStartDate;
+              submissionEntry.period.endDate = field.periodEndDate || this.periodEndDate;
+            }
+            if ((column == null ? void 0 : column.type) === "dimension" && ((_a = column.dimensionData) == null ? void 0 : _a.dimensionIdKey)) {
+              submissionEntry.dimension = column.dimensionData.dimensionIdKey;
+            } else if ((_b = section == null ? void 0 : section.columns) == null ? void 0 : _b.length) {
+              const sectionDimensionColumn = section.columns.find((col) => {
+                var _a2;
+                return col.type === "dimension" && ((_a2 = col.dimensionData) == null ? void 0 : _a2.dimensionIdKey);
+              });
+              if ((_c = sectionDimensionColumn == null ? void 0 : sectionDimensionColumn.dimensionData) == null ? void 0 : _c.dimensionIdKey) {
+                submissionEntry.dimension = sectionDimensionColumn.dimensionData.dimensionIdKey;
+              }
+            }
+            submissionData.push(submissionEntry);
+          }
+        });
+      }
+      if (concept.children) {
+        this._processConceptsForSubmission(concept.children, submissionData, section);
+      }
+    });
+  }
   _handleReset() {
     this._formData = { ...this.initialData };
     this._touched.clear();
@@ -1816,19 +2886,6 @@ let JupiterDynamicForm = class extends LitElement {
           ` : ""}
         </div>
 
-        <!-- Add Column Section -->
-        ${config.enableColumnManagement !== false ? html`
-          <div class="add-column-container">
-            <button 
-              class="add-column-btn"
-              @click="${this._addColumn}"
-              ?disabled="${this.disabled || this.readonly || config.maxColumns && this._columns.length >= config.maxColumns}"
-            >
-              Add Dimension Column
-            </button>
-          </div>
-        ` : ""}
-
         <!-- Form Content -->
         <div class="form-sections">
           <!-- Validation Summary -->
@@ -1847,7 +2904,7 @@ let JupiterDynamicForm = class extends LitElement {
           ${schema.sections.map((section) => html`
             <jupiter-form-section
               .section="${section}"
-              .columns="${this._columns}"
+              .columns="${section.columns || this._columns}"
               .formData="${this._formData}"
               .disabled="${this.disabled || this.readonly}"
               .collapsible="${config.collapsibleSections !== false}"
@@ -1856,26 +2913,27 @@ let JupiterDynamicForm = class extends LitElement {
               @section-expand="${this._handleSectionExpand}"
               @concept-expand="${this._handleConceptExpand}"
               @column-remove="${this._handleColumnRemove}"
+              @column-add-request="${this._handleColumnAddRequest}"
             ></jupiter-form-section>
           `)}
         </div>
 
-        <!-- Form Actions -->
+        <!-- Form Actions - Fixed Footer -->
         <div class="form-actions">
           <button 
-            class="btn-primary"
-            @click="${this._handleSubmit}"
+            class="btn-secondary"
+            @click="${this._handleSaveDraft}"
             ?disabled="${this.disabled || this.readonly}"
           >
-            Submit
+            Save Draft
           </button>
           
           <button 
-            class="btn-outline"
-            @click="${this._handleReset}"
-            ?disabled="${this.disabled || !this._dirty}"
+            class="btn-primary"
+            @click="${this._handleSubmit}"
+            ?disabled="${this.disabled || this.readonly}"
           >
-            Reset
+            Submit
           </button>
 
           <div class="form-meta">
@@ -1923,42 +2981,23 @@ JupiterDynamicForm.styles = css`
     }
 
     .form-actions {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
       padding: 16px 24px;
       border-top: 1px solid var(--jupiter-border-color, #ddd);
       background: var(--jupiter-form-actions-background, #f8f9fa);
       display: flex;
       gap: 12px;
       align-items: center;
-    }
-
-    .add-column-container {
-      padding: 16px 24px;
-      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
-      background: var(--jupiter-form-actions-background, #f8f9fa);
-    }
-
-    .add-column-btn {
-      padding: 8px 16px;
-      background: var(--jupiter-primary-color, #1976d2);
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 500;
-    }
-
-    .add-column-btn:hover {
-      background: var(--jupiter-primary-color-dark, #1565c0);
-    }
-
-    .add-column-btn:disabled {
-      background: var(--jupiter-disabled-background, #ccc);
-      cursor: not-allowed;
+      z-index: 1000;
+      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
     }
 
     .form-sections {
       padding: 24px;
+      padding-bottom: 100px; /* Add space for fixed footer */
     }
 
     .validation-summary {
@@ -2092,6 +3131,7 @@ JupiterDynamicForm = __decorateClass([
 const version = "1.0.0";
 export {
   FormValidator,
+  JupiterAddColumnDialog,
   JupiterConceptTree,
   JupiterDynamicForm,
   JupiterFormField,